{ "$schema": "./components.schema.json", "name": "Greda Design System component registry", "version": "0.7.0", "generatedFrom": "index.html", "documentation": "https://www.greda.design/", "stylesheet": "https://www.greda.design/v0.7.0/greda.css", "validator": "node scripts/validate.mjs your-file.html", "components": [ { "id": "button", "name": "Button", "category": "Actions", "description": "Primary, secondary, quiet and disabled.", "docs": "https://www.greda.design/#button", "search": [ "button", "Button", "Primary, secondary, quiet and disabled." ], "classes": [ "gr-button", "gr-button--primary", "gr-button--quiet", "gr-button--secondary", "gr-cluster" ], "tokens": [], "icons": [], "states": [ "primary", "secondary", "quiet", "danger", "disabled" ], "requires": [], "accessibility": [ "Use a native button and declare type.", "Keep visible focus and disabled semantics." ], "implementation": { "html": "
\n \n \n \n \n
", "javascript": "// No JavaScript required.", "aiPrompt": "Implement the Button component with Greda Design System v0.7.0.\n\nLoad https://www.greda.design/v0.7.0/greda.css and use only documented gr-* classes and --gr-* tokens.\n\nStart from this exact HTML:\n\n```html\n
\n \n \n \n \n
\n```\n\nNo JavaScript is required for this example.\n\nAccessibility requirements:\n- Use a native button and declare type.\n- Keep visible focus and disabled semantics.\n\nUse exact Grid22 icons when an icon is present. Preserve native HTML semantics. Verify the result from 360px upward, in light and dark themes, and with keyboard-only navigation." } }, { "id": "icon-button", "name": "Icon Button", "category": "Actions", "description": "A square action with an accessible name and one exact Grid22 icon.", "docs": "https://www.greda.design/#icon-button", "search": [ "icon-button", "Icon Button", "A square action with an accessible name and one exact Grid22 icon.", "icon action", "square button", "toolbar button" ], "classes": [ "gr-button", "gr-button--danger", "gr-button--icon", "gr-button--quiet", "gr-button--secondary", "gr-cluster", "gr-icon" ], "tokens": [], "icons": [ "search", "more-horizontal", "trash", "close" ], "states": [ "secondary", "quiet", "danger", "disabled" ], "requires": [ "Grid22" ], "accessibility": [ "Give every icon-only button an accessible name.", "Hide the decorative Grid22 SVG with aria-hidden.", "Keep a 44px touch target and a 32px precise-pointer target." ], "implementation": { "html": "
\n \n \n \n \n
", "javascript": "// No JavaScript required.", "aiPrompt": "Implement the Icon Button component with Greda Design System v0.7.0.\n\nLoad https://www.greda.design/v0.7.0/greda.css and use only documented gr-* classes and --gr-* tokens.\n\nStart from this exact HTML:\n\n```html\n
\n \n \n \n \n
\n```\n\nNo JavaScript is required for this example.\n\nAccessibility requirements:\n- Give every icon-only button an accessible name.\n- Hide the decorative Grid22 SVG with aria-hidden.\n- Keep a 44px touch target and a 32px precise-pointer target.\n\nUse exact Grid22 icons when an icon is present. Preserve native HTML semantics. Verify the result from 360px upward, in light and dark themes, and with keyboard-only navigation." } }, { "id": "tooltip", "name": "Tooltip", "category": "Feedback", "description": "Short supporting text on hover and focus; never the only accessible name.", "docs": "https://www.greda.design/#tooltip", "search": [ "tooltip", "Tooltip", "Short supporting text on hover and focus; never the only accessible name.", "hint", "hover label", "description" ], "classes": [ "gr-button", "gr-button--icon", "gr-button--secondary", "gr-icon", "gr-tooltip", "gr-tooltip-wrap" ], "tokens": [], "icons": [ "edit" ], "states": [ "hidden", "hover", "focus", "dismissed" ], "requires": [ "Grid22", "Escape handler" ], "accessibility": [ "Keep the trigger's accessible name; the tooltip only describes it.", "Connect the tooltip with aria-describedby.", "Show it on hover and focus, keep it hoverable, and dismiss it on Escape." ], "implementation": { "html": "\n \n Edit project\n", "javascript": "document.querySelectorAll(\".gr-tooltip-wrap\").forEach((wrapper) => {\n const reset = (event) => {\n if (!wrapper.contains(event.relatedTarget)) {\n wrapper.removeAttribute(\"data-gr-tooltip-dismissed\");\n }\n };\n\n wrapper.addEventListener(\"keydown\", (event) => {\n if (event.key === \"Escape\") {\n wrapper.setAttribute(\"data-gr-tooltip-dismissed\", \"true\");\n }\n });\n wrapper.addEventListener(\"pointerleave\", reset);\n wrapper.addEventListener(\"focusout\", reset);\n});", "aiPrompt": "Implement the Tooltip component with Greda Design System v0.7.0.\n\nLoad https://www.greda.design/v0.7.0/greda.css and use only documented gr-* classes and --gr-* tokens.\n\nStart from this exact HTML:\n\n```html\n\n \n Edit project\n\n```\n\nUse this JavaScript behavior:\n\n```js\ndocument.querySelectorAll(\".gr-tooltip-wrap\").forEach((wrapper) => {\n const reset = (event) => {\n if (!wrapper.contains(event.relatedTarget)) {\n wrapper.removeAttribute(\"data-gr-tooltip-dismissed\");\n }\n };\n\n wrapper.addEventListener(\"keydown\", (event) => {\n if (event.key === \"Escape\") {\n wrapper.setAttribute(\"data-gr-tooltip-dismissed\", \"true\");\n }\n });\n wrapper.addEventListener(\"pointerleave\", reset);\n wrapper.addEventListener(\"focusout\", reset);\n});\n```\n\nAccessibility requirements:\n- Keep the trigger's accessible name; the tooltip only describes it.\n- Connect the tooltip with aria-describedby.\n- Show it on hover and focus, keep it hoverable, and dismiss it on Escape.\n\nUse exact Grid22 icons when an icon is present. Preserve native HTML semantics. Verify the result from 360px upward, in light and dark themes, and with keyboard-only navigation." } }, { "id": "link", "name": "Link", "category": "Content", "description": "The underline is always there; colour is never animated.", "docs": "https://www.greda.design/#link", "search": [ "link", "Link", "The underline is always there; colour is never animated." ], "classes": [ "gr-link", "gr-link--accent", "gr-link--quiet" ], "tokens": [], "icons": [], "states": [], "requires": [], "accessibility": [ "Preserve semantic HTML.", "Keep visible focus on interactive elements." ], "implementation": { "html": "

\n A default link,\n a quiet one\n and an accent one.\n

", "javascript": "// No JavaScript required.", "aiPrompt": "Implement the Link component with Greda Design System v0.7.0.\n\nLoad https://www.greda.design/v0.7.0/greda.css and use only documented gr-* classes and --gr-* tokens.\n\nStart from this exact HTML:\n\n```html\n

\n A default link,\n a quiet one\n and an accent one.\n

\n```\n\nNo JavaScript is required for this example.\n\nAccessibility requirements:\n- Preserve semantic HTML.\n- Keep visible focus on interactive elements.\n\nUse exact Grid22 icons when an icon is present. Preserve native HTML semantics. Verify the result from 360px upward, in light and dark themes, and with keyboard-only navigation." } }, { "id": "field", "name": "Field", "category": "Forms", "description": "Label, help text and visible focus.", "docs": "https://www.greda.design/#field", "search": [ "field", "Field", "Label, help text and visible focus.", "input", "text input", "form control" ], "classes": [ "gr-field", "gr-field__control", "gr-field__label", "gr-field__message", "gr-icon" ], "tokens": [], "icons": [ "search" ], "states": [ "default", "focus", "help" ], "requires": [], "accessibility": [ "Keep a visible label.", "Associate help and error text with the control." ], "implementation": { "html": "", "javascript": "// No JavaScript required.", "aiPrompt": "Implement the Field component with Greda Design System v0.7.0.\n\nLoad https://www.greda.design/v0.7.0/greda.css and use only documented gr-* classes and --gr-* tokens.\n\nStart from this exact HTML:\n\n```html\n\n```\n\nNo JavaScript is required for this example.\n\nAccessibility requirements:\n- Keep a visible label.\n- Associate help and error text with the control.\n\nUse exact Grid22 icons when an icon is present. Preserve native HTML semantics. Verify the result from 360px upward, in light and dark themes, and with keyboard-only navigation." } }, { "id": "textarea", "name": "Textarea", "category": "Forms", "description": "The same control, aligned to the top and resizable.", "docs": "https://www.greda.design/#textarea", "search": [ "textarea", "Textarea", "The same control, aligned to the top and resizable.", "multiline", "long text" ], "classes": [ "gr-field", "gr-field__control", "gr-field__control--multiline", "gr-field__label" ], "tokens": [], "icons": [], "states": [ "default", "focus", "resizable" ], "requires": [], "accessibility": [ "Keep a visible label.", "Do not prevent native resizing." ], "implementation": { "html": "", "javascript": "// No JavaScript required.", "aiPrompt": "Implement the Textarea component with Greda Design System v0.7.0.\n\nLoad https://www.greda.design/v0.7.0/greda.css and use only documented gr-* classes and --gr-* tokens.\n\nStart from this exact HTML:\n\n```html\n\n```\n\nNo JavaScript is required for this example.\n\nAccessibility requirements:\n- Keep a visible label.\n- Do not prevent native resizing.\n\nUse exact Grid22 icons when an icon is present. Preserve native HTML semantics. Verify the result from 360px upward, in light and dark themes, and with keyboard-only navigation." } }, { "id": "select", "name": "Select", "category": "Forms", "description": "Native control; it only borrows the box.", "docs": "https://www.greda.design/#select", "search": [ "select", "Select", "Native control; it only borrows the box.", "dropdown", "picker", "native select" ], "classes": [ "gr-field", "gr-field__control", "gr-field__control--select", "gr-field__label", "gr-icon" ], "tokens": [], "icons": [ "chevron-down" ], "states": [ "default", "open", "selected" ], "requires": [], "accessibility": [ "Use the native select so keyboard, forms, and type-ahead remain intact." ], "implementation": { "html": "", "javascript": "// No JavaScript required.", "aiPrompt": "Implement the Select component with Greda Design System v0.7.0.\n\nLoad https://www.greda.design/v0.7.0/greda.css and use only documented gr-* classes and --gr-* tokens.\n\nStart from this exact HTML:\n\n```html\n\n```\n\nNo JavaScript is required for this example.\n\nAccessibility requirements:\n- Use the native select so keyboard, forms, and type-ahead remain intact.\n\nUse exact Grid22 icons when an icon is present. Preserve native HTML semantics. Verify the result from 360px upward, in light and dark themes, and with keyboard-only navigation." } }, { "id": "cascader", "name": "Cascader", "category": "Forms", "description": "Select one value by moving through related levels.", "docs": "https://www.greda.design/#cascader", "search": [ "cascader", "Cascader", "Select one value by moving through related levels.", "hierarchical select", "multi level picker", "path selector" ], "classes": [ "gr-cascader", "gr-cascader__column", "gr-cascader__columns", "gr-cascader__option", "gr-cascader__panel", "gr-cascader__path", "gr-field", "gr-field__control", "gr-field__control--picker", "gr-field__label", "gr-icon", "gr-popover" ], "tokens": [], "icons": [ "chevron-down", "chevron-right" ], "states": [ "closed", "open", "parent selected", "value selected" ], "requires": [ "Field", "Grid22", "Popover API", "Cascader keyboard script" ], "accessibility": [ "Expose each level as a named listbox.", "Support Arrow Up/Down, Arrow Left/Right, Home, End, Enter, Space, and Escape.", "Keep the hidden form value and visible path synchronized." ], "implementation": { "html": "
\n \n \n
\n

Americas / Chile

\n
\n
\n \n \n
\n
\n \n \n \n
\n \n
\n
\n
", "javascript": "document.querySelectorAll(\"[data-gr-cascader]\").forEach((cascader) => {\n const trigger = cascader.querySelector(\"[data-gr-cascader-trigger]\");\n const panel = cascader.querySelector(\".gr-cascader__panel\");\n const value = cascader.querySelector(\"[data-gr-cascader-value]\");\n const path = cascader.querySelector(\"[data-gr-cascader-path]\");\n const input = cascader.querySelector(\"[data-gr-cascader-input]\");\n const columns = [...cascader.querySelectorAll(\"[data-gr-cascader-column]\")];\n const root = columns.find((column) => column.dataset.grCascaderColumn === \"root\");\n const optionsIn = (column) => [...column.querySelectorAll(\"[data-gr-cascader-option]\")];\n\n function positionPanel() {\n const control = trigger.closest(\".gr-field__control\") || trigger;\n const rootStyles = getComputedStyle(document.documentElement);\n const edge = parseFloat(rootStyles.getPropertyValue(\"--gr-space-4\")) || 16;\n const gap = parseFloat(rootStyles.getPropertyValue(\"--gr-space-1\")) || 4;\n const viewport = window.visualViewport;\n const viewportLeft = viewport?.offsetLeft || 0;\n const viewportTop = viewport?.offsetTop || 0;\n const viewportWidth = viewport?.width || window.innerWidth;\n const viewportHeight = viewport?.height || window.innerHeight;\n const triggerRect = control.getBoundingClientRect();\n const panelWidth = Math.min(triggerRect.width, viewportWidth - edge * 2);\n panel.style.setProperty(\"--_gr-picker-width\", `${panelWidth}px`);\n const panelRect = panel.getBoundingClientRect();\n const left = Math.min(Math.max(viewportLeft + edge, triggerRect.left),\n Math.max(viewportLeft + edge, viewportLeft + viewportWidth - panelRect.width - edge));\n const below = triggerRect.bottom + gap;\n const top = below + panelRect.height <= viewportTop + viewportHeight - edge\n ? below : Math.max(viewportTop + edge, triggerRect.top - panelRect.height - gap);\n panel.style.setProperty(\"--_gr-picker-left\", `${left}px`);\n panel.style.setProperty(\"--_gr-picker-top\", `${top}px`);\n }\n\n function openColumn(name, focus = false) {\n const next = columns.find((column) => column.dataset.grCascaderColumn === name);\n if (!root || !next) return;\n columns.forEach((column) => {\n if (column !== root) column.hidden = column !== next;\n });\n optionsIn(root).forEach((option) => {\n option.setAttribute(\"aria-selected\", String(option.dataset.next === name));\n });\n const parent = optionsIn(root).find((option) => option.dataset.next === name);\n path.textContent = parent?.dataset.label || \"\";\n if (focus) requestAnimationFrame(() => (optionsIn(next).find((option) =>\n option.getAttribute(\"aria-selected\") === \"true\") || optionsIn(next)[0])?.focus());\n }\n\n function commit(option) {\n const column = option.closest(\"[data-gr-cascader-column]\");\n const parent = optionsIn(root).find((candidate) =>\n candidate.dataset.next === column.dataset.grCascaderColumn);\n optionsIn(column).forEach((candidate) => {\n candidate.setAttribute(\"aria-selected\", String(candidate === option));\n });\n const label = [parent?.dataset.label, option.dataset.label].filter(Boolean).join(\" / \");\n value.value = label;\n path.textContent = label;\n input.value = option.dataset.value || \"\";\n input.dispatchEvent(new Event(\"change\", { bubbles: true }));\n panel.hidePopover();\n trigger.focus();\n }\n\n panel.addEventListener(\"click\", (event) => {\n const option = event.target.closest(\"[data-gr-cascader-option]\");\n if (!option) return;\n if (option.dataset.next) openColumn(option.dataset.next, true);\n else commit(option);\n });\n\n panel.addEventListener(\"keydown\", (event) => {\n const option = event.target.closest(\"[data-gr-cascader-option]\");\n if (!option) return;\n const column = option.closest(\"[data-gr-cascader-column]\");\n const available = optionsIn(column);\n const index = available.indexOf(option);\n const positions = {\n ArrowDown: (index + 1) % available.length,\n ArrowUp: (index - 1 + available.length) % available.length,\n Home: 0,\n End: available.length - 1,\n };\n if (positions[event.key] !== undefined) {\n event.preventDefault();\n available[positions[event.key]].focus();\n }\n if (event.key === \"ArrowRight\" && option.dataset.next) {\n event.preventDefault();\n openColumn(option.dataset.next, true);\n }\n if (event.key === \"ArrowLeft\" && column !== root) {\n event.preventDefault();\n optionsIn(root).find((candidate) =>\n candidate.dataset.next === column.dataset.grCascaderColumn)?.focus();\n }\n if ([\"Enter\", \" \"].includes(event.key)) {\n event.preventDefault();\n option.click();\n }\n if (event.key === \"Escape\") {\n panel.hidePopover();\n trigger.focus();\n }\n });\n\n panel.addEventListener(\"toggle\", () => {\n const open = panel.matches(\":popover-open\");\n trigger.setAttribute(\"aria-expanded\", String(open));\n if (open) requestAnimationFrame(() => {\n positionPanel();\n (optionsIn(root).find((option) => option.getAttribute(\"aria-selected\") === \"true\") ||\n optionsIn(root)[0])?.focus();\n });\n });\n\n trigger.addEventListener(\"keydown\", (event) => {\n if (![\"ArrowDown\", \"ArrowUp\", \"Enter\", \" \"].includes(event.key)) return;\n event.preventDefault();\n if (!panel.matches(\":popover-open\")) {\n panel.showPopover();\n positionPanel();\n }\n });\n\n trigger.addEventListener(\"click\", () => {\n if (panel.matches(\":popover-open\")) panel.hidePopover();\n else {\n panel.showPopover();\n positionPanel();\n }\n });\n\n const reposition = () => {\n if (panel.matches(\":popover-open\")) positionPanel();\n };\n window.addEventListener(\"resize\", reposition);\n window.addEventListener(\"scroll\", reposition, true);\n window.visualViewport?.addEventListener(\"resize\", reposition);\n window.visualViewport?.addEventListener(\"scroll\", reposition);\n});", "aiPrompt": "Implement the Cascader component with Greda Design System v0.7.0.\n\nLoad https://www.greda.design/v0.7.0/greda.css and use only documented gr-* classes and --gr-* tokens.\n\nStart from this exact HTML:\n\n```html\n
\n \n \n
\n

Americas / Chile

\n
\n
\n \n \n
\n
\n \n \n \n
\n \n
\n
\n
\n```\n\nUse this JavaScript behavior:\n\n```js\ndocument.querySelectorAll(\"[data-gr-cascader]\").forEach((cascader) => {\n const trigger = cascader.querySelector(\"[data-gr-cascader-trigger]\");\n const panel = cascader.querySelector(\".gr-cascader__panel\");\n const value = cascader.querySelector(\"[data-gr-cascader-value]\");\n const path = cascader.querySelector(\"[data-gr-cascader-path]\");\n const input = cascader.querySelector(\"[data-gr-cascader-input]\");\n const columns = [...cascader.querySelectorAll(\"[data-gr-cascader-column]\")];\n const root = columns.find((column) => column.dataset.grCascaderColumn === \"root\");\n const optionsIn = (column) => [...column.querySelectorAll(\"[data-gr-cascader-option]\")];\n\n function positionPanel() {\n const control = trigger.closest(\".gr-field__control\") || trigger;\n const rootStyles = getComputedStyle(document.documentElement);\n const edge = parseFloat(rootStyles.getPropertyValue(\"--gr-space-4\")) || 16;\n const gap = parseFloat(rootStyles.getPropertyValue(\"--gr-space-1\")) || 4;\n const viewport = window.visualViewport;\n const viewportLeft = viewport?.offsetLeft || 0;\n const viewportTop = viewport?.offsetTop || 0;\n const viewportWidth = viewport?.width || window.innerWidth;\n const viewportHeight = viewport?.height || window.innerHeight;\n const triggerRect = control.getBoundingClientRect();\n const panelWidth = Math.min(triggerRect.width, viewportWidth - edge * 2);\n panel.style.setProperty(\"--_gr-picker-width\", `${panelWidth}px`);\n const panelRect = panel.getBoundingClientRect();\n const left = Math.min(Math.max(viewportLeft + edge, triggerRect.left),\n Math.max(viewportLeft + edge, viewportLeft + viewportWidth - panelRect.width - edge));\n const below = triggerRect.bottom + gap;\n const top = below + panelRect.height <= viewportTop + viewportHeight - edge\n ? below : Math.max(viewportTop + edge, triggerRect.top - panelRect.height - gap);\n panel.style.setProperty(\"--_gr-picker-left\", `${left}px`);\n panel.style.setProperty(\"--_gr-picker-top\", `${top}px`);\n }\n\n function openColumn(name, focus = false) {\n const next = columns.find((column) => column.dataset.grCascaderColumn === name);\n if (!root || !next) return;\n columns.forEach((column) => {\n if (column !== root) column.hidden = column !== next;\n });\n optionsIn(root).forEach((option) => {\n option.setAttribute(\"aria-selected\", String(option.dataset.next === name));\n });\n const parent = optionsIn(root).find((option) => option.dataset.next === name);\n path.textContent = parent?.dataset.label || \"\";\n if (focus) requestAnimationFrame(() => (optionsIn(next).find((option) =>\n option.getAttribute(\"aria-selected\") === \"true\") || optionsIn(next)[0])?.focus());\n }\n\n function commit(option) {\n const column = option.closest(\"[data-gr-cascader-column]\");\n const parent = optionsIn(root).find((candidate) =>\n candidate.dataset.next === column.dataset.grCascaderColumn);\n optionsIn(column).forEach((candidate) => {\n candidate.setAttribute(\"aria-selected\", String(candidate === option));\n });\n const label = [parent?.dataset.label, option.dataset.label].filter(Boolean).join(\" / \");\n value.value = label;\n path.textContent = label;\n input.value = option.dataset.value || \"\";\n input.dispatchEvent(new Event(\"change\", { bubbles: true }));\n panel.hidePopover();\n trigger.focus();\n }\n\n panel.addEventListener(\"click\", (event) => {\n const option = event.target.closest(\"[data-gr-cascader-option]\");\n if (!option) return;\n if (option.dataset.next) openColumn(option.dataset.next, true);\n else commit(option);\n });\n\n panel.addEventListener(\"keydown\", (event) => {\n const option = event.target.closest(\"[data-gr-cascader-option]\");\n if (!option) return;\n const column = option.closest(\"[data-gr-cascader-column]\");\n const available = optionsIn(column);\n const index = available.indexOf(option);\n const positions = {\n ArrowDown: (index + 1) % available.length,\n ArrowUp: (index - 1 + available.length) % available.length,\n Home: 0,\n End: available.length - 1,\n };\n if (positions[event.key] !== undefined) {\n event.preventDefault();\n available[positions[event.key]].focus();\n }\n if (event.key === \"ArrowRight\" && option.dataset.next) {\n event.preventDefault();\n openColumn(option.dataset.next, true);\n }\n if (event.key === \"ArrowLeft\" && column !== root) {\n event.preventDefault();\n optionsIn(root).find((candidate) =>\n candidate.dataset.next === column.dataset.grCascaderColumn)?.focus();\n }\n if ([\"Enter\", \" \"].includes(event.key)) {\n event.preventDefault();\n option.click();\n }\n if (event.key === \"Escape\") {\n panel.hidePopover();\n trigger.focus();\n }\n });\n\n panel.addEventListener(\"toggle\", () => {\n const open = panel.matches(\":popover-open\");\n trigger.setAttribute(\"aria-expanded\", String(open));\n if (open) requestAnimationFrame(() => {\n positionPanel();\n (optionsIn(root).find((option) => option.getAttribute(\"aria-selected\") === \"true\") ||\n optionsIn(root)[0])?.focus();\n });\n });\n\n trigger.addEventListener(\"keydown\", (event) => {\n if (![\"ArrowDown\", \"ArrowUp\", \"Enter\", \" \"].includes(event.key)) return;\n event.preventDefault();\n if (!panel.matches(\":popover-open\")) {\n panel.showPopover();\n positionPanel();\n }\n });\n\n trigger.addEventListener(\"click\", () => {\n if (panel.matches(\":popover-open\")) panel.hidePopover();\n else {\n panel.showPopover();\n positionPanel();\n }\n });\n\n const reposition = () => {\n if (panel.matches(\":popover-open\")) positionPanel();\n };\n window.addEventListener(\"resize\", reposition);\n window.addEventListener(\"scroll\", reposition, true);\n window.visualViewport?.addEventListener(\"resize\", reposition);\n window.visualViewport?.addEventListener(\"scroll\", reposition);\n});\n```\n\nAccessibility requirements:\n- Expose each level as a named listbox.\n- Support Arrow Up/Down, Arrow Left/Right, Home, End, Enter, Space, and Escape.\n- Keep the hidden form value and visible path synchronized.\n\nUse exact Grid22 icons when an icon is present. Preserve native HTML semantics. Verify the result from 360px upward, in light and dark themes, and with keyboard-only navigation." } }, { "id": "tree-select", "name": "Tree Select", "category": "Forms", "description": "Select several values without losing their hierarchy.", "docs": "https://www.greda.design/#tree-select", "search": [ "tree-select", "Tree Select", "Select several values without losing their hierarchy.", "hierarchy picker", "nested multiselect", "tree view" ], "classes": [ "gr-choice", "gr-choice__input", "gr-choice__label", "gr-field", "gr-field__control", "gr-field__control--picker", "gr-field__label", "gr-fieldset", "gr-icon", "gr-popover", "gr-tree-select", "gr-tree-select__branch", "gr-tree-select__branch-toggle", "gr-tree-select__chevron", "gr-tree-select__choice", "gr-tree-select__group", "gr-tree-select__panel", "gr-tree-select__tree", "gr-visually-hidden" ], "tokens": [], "icons": [ "chevron-down", "chevron-right", "check" ], "states": [ "closed", "open", "expanded", "collapsed", "checked", "unchecked" ], "requires": [ "Field", "Fieldset", "Choice", "Grid22", "Popover API" ], "accessibility": [ "Compose the existing Field, Fieldset, and Choice components.", "Use native checkboxes so Space, focus, and form semantics remain intact.", "Connect each disclosure button to its checkbox group with aria-controls and aria-expanded." ], "implementation": { "html": "
\n \n \n
\n
\n Documentation sections\n
\n \n
\n \n \n \n
\n
\n
\n \n \n
\n
\n
\n
", "javascript": "document.querySelectorAll(\"[data-gr-tree-select]\").forEach((select) => {\n const trigger = select.querySelector(\"[data-gr-tree-select-trigger]\");\n const panel = select.querySelector(\".gr-tree-select__panel\");\n const tree = select.querySelector(\".gr-tree-select__tree\");\n const value = select.querySelector(\"[data-gr-tree-select-value]\");\n const input = select.querySelector(\"[data-gr-tree-select-input]\");\n const options = () => [...tree.querySelectorAll(\"[data-gr-tree-option]\")];\n\n function positionPanel() {\n const control = trigger.closest(\".gr-field__control\") || trigger;\n const rootStyles = getComputedStyle(document.documentElement);\n const edge = parseFloat(rootStyles.getPropertyValue(\"--gr-space-4\")) || 16;\n const gap = parseFloat(rootStyles.getPropertyValue(\"--gr-space-1\")) || 4;\n const viewport = window.visualViewport;\n const viewportLeft = viewport?.offsetLeft || 0;\n const viewportTop = viewport?.offsetTop || 0;\n const viewportWidth = viewport?.width || window.innerWidth;\n const viewportHeight = viewport?.height || window.innerHeight;\n const triggerRect = control.getBoundingClientRect();\n const panelWidth = Math.min(triggerRect.width, viewportWidth - edge * 2);\n panel.style.setProperty(\"--_gr-picker-width\", `${panelWidth}px`);\n const panelRect = panel.getBoundingClientRect();\n const left = Math.min(Math.max(viewportLeft + edge, triggerRect.left),\n Math.max(viewportLeft + edge, viewportLeft + viewportWidth - panelRect.width - edge));\n const below = triggerRect.bottom + gap;\n const top = below + panelRect.height <= viewportTop + viewportHeight - edge\n ? below : Math.max(viewportTop + edge, triggerRect.top - panelRect.height - gap);\n panel.style.setProperty(\"--_gr-picker-left\", `${left}px`);\n panel.style.setProperty(\"--_gr-picker-top\", `${top}px`);\n }\n\n function updateValue() {\n const selected = options().filter((option) => option.checked);\n const labels = selected.map((item) => item.dataset.label);\n value.value = labels.length <= 2 ? labels.join(\", \") || \"Select sections\"\n : `${labels.length} selected`;\n input.value = selected.map((item) => item.value).join(\",\");\n input.dispatchEvent(new Event(\"change\", { bubbles: true }));\n }\n\n tree.addEventListener(\"click\", (event) => {\n const branch = event.target.closest(\"[data-gr-tree-branch]\");\n if (!branch) return;\n const group = tree.querySelector(`#${CSS.escape(branch.getAttribute(\"aria-controls\"))}`);\n const expanded = branch.getAttribute(\"aria-expanded\") !== \"true\";\n branch.setAttribute(\"aria-expanded\", String(expanded));\n if (group) group.hidden = !expanded;\n });\n\n tree.addEventListener(\"change\", (event) => {\n if (event.target.matches(\"[data-gr-tree-option]\")) updateValue();\n });\n\n panel.addEventListener(\"keydown\", (event) => {\n if (event.key !== \"Escape\") return;\n event.preventDefault();\n panel.hidePopover();\n trigger.focus();\n });\n\n panel.addEventListener(\"toggle\", () => {\n const open = panel.matches(\":popover-open\");\n trigger.setAttribute(\"aria-expanded\", String(open));\n if (open) requestAnimationFrame(() => {\n positionPanel();\n const firstControl = options().find((option) => option.checked &&\n !option.closest(\"[hidden]\")) || tree.querySelector(\"[data-gr-tree-branch]\");\n firstControl?.focus();\n });\n });\n\n trigger.addEventListener(\"keydown\", (event) => {\n if (![\"ArrowDown\", \"ArrowUp\", \"Enter\", \" \"].includes(event.key)) return;\n event.preventDefault();\n if (!panel.matches(\":popover-open\")) {\n panel.showPopover();\n positionPanel();\n }\n });\n\n trigger.addEventListener(\"click\", () => {\n if (panel.matches(\":popover-open\")) panel.hidePopover();\n else {\n panel.showPopover();\n positionPanel();\n }\n });\n\n const reposition = () => {\n if (panel.matches(\":popover-open\")) positionPanel();\n };\n window.addEventListener(\"resize\", reposition);\n window.addEventListener(\"scroll\", reposition, true);\n window.visualViewport?.addEventListener(\"resize\", reposition);\n window.visualViewport?.addEventListener(\"scroll\", reposition);\n\n updateValue();\n});", "aiPrompt": "Implement the Tree Select component with Greda Design System v0.7.0.\n\nLoad https://www.greda.design/v0.7.0/greda.css and use only documented gr-* classes and --gr-* tokens.\n\nStart from this exact HTML:\n\n```html\n
\n \n \n
\n
\n Documentation sections\n
\n \n
\n \n \n \n
\n
\n
\n \n \n
\n
\n
\n
\n```\n\nUse this JavaScript behavior:\n\n```js\ndocument.querySelectorAll(\"[data-gr-tree-select]\").forEach((select) => {\n const trigger = select.querySelector(\"[data-gr-tree-select-trigger]\");\n const panel = select.querySelector(\".gr-tree-select__panel\");\n const tree = select.querySelector(\".gr-tree-select__tree\");\n const value = select.querySelector(\"[data-gr-tree-select-value]\");\n const input = select.querySelector(\"[data-gr-tree-select-input]\");\n const options = () => [...tree.querySelectorAll(\"[data-gr-tree-option]\")];\n\n function positionPanel() {\n const control = trigger.closest(\".gr-field__control\") || trigger;\n const rootStyles = getComputedStyle(document.documentElement);\n const edge = parseFloat(rootStyles.getPropertyValue(\"--gr-space-4\")) || 16;\n const gap = parseFloat(rootStyles.getPropertyValue(\"--gr-space-1\")) || 4;\n const viewport = window.visualViewport;\n const viewportLeft = viewport?.offsetLeft || 0;\n const viewportTop = viewport?.offsetTop || 0;\n const viewportWidth = viewport?.width || window.innerWidth;\n const viewportHeight = viewport?.height || window.innerHeight;\n const triggerRect = control.getBoundingClientRect();\n const panelWidth = Math.min(triggerRect.width, viewportWidth - edge * 2);\n panel.style.setProperty(\"--_gr-picker-width\", `${panelWidth}px`);\n const panelRect = panel.getBoundingClientRect();\n const left = Math.min(Math.max(viewportLeft + edge, triggerRect.left),\n Math.max(viewportLeft + edge, viewportLeft + viewportWidth - panelRect.width - edge));\n const below = triggerRect.bottom + gap;\n const top = below + panelRect.height <= viewportTop + viewportHeight - edge\n ? below : Math.max(viewportTop + edge, triggerRect.top - panelRect.height - gap);\n panel.style.setProperty(\"--_gr-picker-left\", `${left}px`);\n panel.style.setProperty(\"--_gr-picker-top\", `${top}px`);\n }\n\n function updateValue() {\n const selected = options().filter((option) => option.checked);\n const labels = selected.map((item) => item.dataset.label);\n value.value = labels.length <= 2 ? labels.join(\", \") || \"Select sections\"\n : `${labels.length} selected`;\n input.value = selected.map((item) => item.value).join(\",\");\n input.dispatchEvent(new Event(\"change\", { bubbles: true }));\n }\n\n tree.addEventListener(\"click\", (event) => {\n const branch = event.target.closest(\"[data-gr-tree-branch]\");\n if (!branch) return;\n const group = tree.querySelector(`#${CSS.escape(branch.getAttribute(\"aria-controls\"))}`);\n const expanded = branch.getAttribute(\"aria-expanded\") !== \"true\";\n branch.setAttribute(\"aria-expanded\", String(expanded));\n if (group) group.hidden = !expanded;\n });\n\n tree.addEventListener(\"change\", (event) => {\n if (event.target.matches(\"[data-gr-tree-option]\")) updateValue();\n });\n\n panel.addEventListener(\"keydown\", (event) => {\n if (event.key !== \"Escape\") return;\n event.preventDefault();\n panel.hidePopover();\n trigger.focus();\n });\n\n panel.addEventListener(\"toggle\", () => {\n const open = panel.matches(\":popover-open\");\n trigger.setAttribute(\"aria-expanded\", String(open));\n if (open) requestAnimationFrame(() => {\n positionPanel();\n const firstControl = options().find((option) => option.checked &&\n !option.closest(\"[hidden]\")) || tree.querySelector(\"[data-gr-tree-branch]\");\n firstControl?.focus();\n });\n });\n\n trigger.addEventListener(\"keydown\", (event) => {\n if (![\"ArrowDown\", \"ArrowUp\", \"Enter\", \" \"].includes(event.key)) return;\n event.preventDefault();\n if (!panel.matches(\":popover-open\")) {\n panel.showPopover();\n positionPanel();\n }\n });\n\n trigger.addEventListener(\"click\", () => {\n if (panel.matches(\":popover-open\")) panel.hidePopover();\n else {\n panel.showPopover();\n positionPanel();\n }\n });\n\n const reposition = () => {\n if (panel.matches(\":popover-open\")) positionPanel();\n };\n window.addEventListener(\"resize\", reposition);\n window.addEventListener(\"scroll\", reposition, true);\n window.visualViewport?.addEventListener(\"resize\", reposition);\n window.visualViewport?.addEventListener(\"scroll\", reposition);\n\n updateValue();\n});\n```\n\nAccessibility requirements:\n- Compose the existing Field, Fieldset, and Choice components.\n- Use native checkboxes so Space, focus, and form semantics remain intact.\n- Connect each disclosure button to its checkbox group with aria-controls and aria-expanded.\n\nUse exact Grid22 icons when an icon is present. Preserve native HTML semantics. Verify the result from 360px upward, in light and dark themes, and with keyboard-only navigation." } }, { "id": "choice", "name": "Choice", "category": "Forms", "description": "Checkbox and radio share everything but the shape.", "docs": "https://www.greda.design/#choice", "search": [ "choice", "Choice", "Checkbox and radio share everything but the shape.", "checkbox", "radio" ], "classes": [ "gr-choice", "gr-choice__input", "gr-choice__label", "gr-fieldset", "gr-fieldset__legend" ], "tokens": [], "icons": [], "states": [ "checked", "unchecked", "radio" ], "requires": [], "accessibility": [ "Use native checkbox and radio inputs inside a fieldset when grouped." ], "implementation": { "html": "
\n What gets validated\n \n \n \n \n
", "javascript": "// No JavaScript required.", "aiPrompt": "Implement the Choice component with Greda Design System v0.7.0.\n\nLoad https://www.greda.design/v0.7.0/greda.css and use only documented gr-* classes and --gr-* tokens.\n\nStart from this exact HTML:\n\n```html\n
\n What gets validated\n \n \n \n \n
\n```\n\nNo JavaScript is required for this example.\n\nAccessibility requirements:\n- Use native checkbox and radio inputs inside a fieldset when grouped.\n\nUse exact Grid22 icons when an icon is present. Preserve native HTML semantics. Verify the result from 360px upward, in light and dark themes, and with keyboard-only navigation." } }, { "id": "switch", "name": "Switch", "category": "Forms", "description": "A physical state: the thumb travels, the track does not animate.", "docs": "https://www.greda.design/#switch", "search": [ "switch", "Switch", "A physical state: the thumb travels, the track does not animate.", "toggle" ], "classes": [ "gr-switch", "gr-switch__input", "gr-switch__label" ], "tokens": [], "icons": [], "states": [ "on", "off" ], "requires": [], "accessibility": [ "Use a checkbox with role=switch and a visible label." ], "implementation": { "html": "\n", "javascript": "// No JavaScript required.", "aiPrompt": "Implement the Switch component with Greda Design System v0.7.0.\n\nLoad https://www.greda.design/v0.7.0/greda.css and use only documented gr-* classes and --gr-* tokens.\n\nStart from this exact HTML:\n\n```html\n\n\n```\n\nNo JavaScript is required for this example.\n\nAccessibility requirements:\n- Use a checkbox with role=switch and a visible label.\n\nUse exact Grid22 icons when an icon is present. Preserve native HTML semantics. Verify the result from 360px upward, in light and dark themes, and with keyboard-only navigation." } }, { "id": "states", "name": "States", "category": "Forms", "description": "Error, required, readonly and disabled.", "docs": "https://www.greda.design/#states", "search": [ "states", "States", "Error, required, readonly and disabled.", "error", "required", "readonly", "disabled" ], "classes": [ "gr-field", "gr-field--invalid", "gr-field__control", "gr-field__label", "gr-field__message" ], "tokens": [], "icons": [], "states": [ "error", "required", "readonly", "disabled" ], "requires": [], "accessibility": [ "Use aria-invalid for errors.", "Do not communicate state with color alone." ], "implementation": { "html": "\n\n", "javascript": "// No JavaScript required.", "aiPrompt": "Implement the States component with Greda Design System v0.7.0.\n\nLoad https://www.greda.design/v0.7.0/greda.css and use only documented gr-* classes and --gr-* tokens.\n\nStart from this exact HTML:\n\n```html\n\n\n\n```\n\nNo JavaScript is required for this example.\n\nAccessibility requirements:\n- Use aria-invalid for errors.\n- Do not communicate state with color alone.\n\nUse exact Grid22 icons when an icon is present. Preserve native HTML semantics. Verify the result from 360px upward, in light and dark themes, and with keyboard-only navigation." } }, { "id": "card", "name": "Card", "category": "Data", "description": "A surface, not decoration.", "docs": "https://www.greda.design/#card", "search": [ "card", "Card", "A surface, not decoration." ], "classes": [ "gr-button", "gr-button--primary", "gr-button--quiet", "gr-card", "gr-card__actions", "gr-card__body", "gr-card__title" ], "tokens": [], "icons": [], "states": [], "requires": [], "accessibility": [ "Preserve semantic HTML.", "Keep visible focus on interactive elements." ], "implementation": { "html": "
\n

Personal project

\n

A surface grouped only when the content needs a boundary you can recognise.

\n
\n \n \n
\n
", "javascript": "// No JavaScript required.", "aiPrompt": "Implement the Card component with Greda Design System v0.7.0.\n\nLoad https://www.greda.design/v0.7.0/greda.css and use only documented gr-* classes and --gr-* tokens.\n\nStart from this exact HTML:\n\n```html\n
\n

Personal project

\n

A surface grouped only when the content needs a boundary you can recognise.

\n
\n \n \n
\n
\n```\n\nNo JavaScript is required for this example.\n\nAccessibility requirements:\n- Preserve semantic HTML.\n- Keep visible focus on interactive elements.\n\nUse exact Grid22 icons when an icon is present. Preserve native HTML semantics. Verify the result from 360px upward, in light and dark themes, and with keyboard-only navigation." } }, { "id": "badge", "name": "Badge", "category": "Data", "description": "A short label, in mono like everything technical.", "docs": "https://www.greda.design/#badge", "search": [ "badge", "Badge", "A short label, in mono like everything technical." ], "classes": [ "gr-badge", "gr-badge--accent", "gr-badge--strong", "gr-cluster" ], "tokens": [], "icons": [], "states": [], "requires": [], "accessibility": [ "Preserve semantic HTML.", "Keep visible focus on interactive elements." ], "implementation": { "html": "
\n v0.7.0\n Stable\n API change\n
", "javascript": "// No JavaScript required.", "aiPrompt": "Implement the Badge component with Greda Design System v0.7.0.\n\nLoad https://www.greda.design/v0.7.0/greda.css and use only documented gr-* classes and --gr-* tokens.\n\nStart from this exact HTML:\n\n```html\n
\n v0.7.0\n Stable\n API change\n
\n```\n\nNo JavaScript is required for this example.\n\nAccessibility requirements:\n- Preserve semantic HTML.\n- Keep visible focus on interactive elements.\n\nUse exact Grid22 icons when an icon is present. Preserve native HTML semantics. Verify the result from 360px upward, in light and dark themes, and with keyboard-only navigation." } }, { "id": "table", "name": "Table", "category": "Data", "description": "Rules that separate; numbers in mono and to the right.", "docs": "https://www.greda.design/#table", "search": [ "table", "Table", "Rules that separate; numbers in mono and to the right." ], "classes": [ "gr-table", "gr-table-wrap", "gr-table__numeric" ], "tokens": [], "icons": [], "states": [], "requires": [], "accessibility": [ "Preserve semantic HTML.", "Keep visible focus on interactive elements." ], "implementation": { "html": "
\n \n \n \n \n \n \n \n \n \n
ControlCompactTouch
Button32px44px
Field32px44px
Choice20px44px
\n
", "javascript": "// No JavaScript required.", "aiPrompt": "Implement the Table component with Greda Design System v0.7.0.\n\nLoad https://www.greda.design/v0.7.0/greda.css and use only documented gr-* classes and --gr-* tokens.\n\nStart from this exact HTML:\n\n```html\n
\n \n \n \n \n \n \n \n \n \n
ControlCompactTouch
Button32px44px
Field32px44px
Choice20px44px
\n
\n```\n\nNo JavaScript is required for this example.\n\nAccessibility requirements:\n- Preserve semantic HTML.\n- Keep visible focus on interactive elements.\n\nUse exact Grid22 icons when an icon is present. Preserve native HTML semantics. Verify the result from 360px upward, in light and dark themes, and with keyboard-only navigation." } }, { "id": "prose", "name": "Prose + Code", "category": "Content", "description": "Long-form content and technical snippets with one reading rhythm.", "docs": "https://www.greda.design/#prose", "search": [ "prose", "Prose + Code", "Long-form content and technical snippets with one reading rhythm.", "article", "long form", "code snippet" ], "classes": [ "gr-button", "gr-button--primary", "gr-code", "gr-code-snippet", "gr-code-snippet__copy", "gr-code-snippet__head", "gr-codeblock", "gr-prose", "gr-prose__lead" ], "tokens": [], "icons": [], "states": [], "requires": [], "accessibility": [ "Preserve semantic HTML.", "Keep visible focus on interactive elements." ], "implementation": { "html": "
\n

Greda grows from evidence, not speculation. A pattern enters the system only after it repeats across real projects.

\n

That keeps the stylesheet small enough to understand and makes each public class carry a clear responsibility.

\n

Before a pattern enters

\n \n
\n

The component should explain its purpose before its decoration.

\n Greda contribution principle\n
\n
\n
\n HTML\n \n
\n 
<link rel=\"stylesheet\" href=\"/v0.7.0/greda.css\">\n\n<button class=\"gr-button gr-button--primary\">Save</button>
\n
\n
", "javascript": "document.querySelectorAll(\"[data-copy-code]\").forEach((button) => {\n button.addEventListener(\"click\", async () => {\n const code = button.closest(\".gr-code-snippet\")?.querySelector(\"code\");\n if (code) await navigator.clipboard.writeText(code.textContent);\n });\n});", "aiPrompt": "Implement the Prose + Code component with Greda Design System v0.7.0.\n\nLoad https://www.greda.design/v0.7.0/greda.css and use only documented gr-* classes and --gr-* tokens.\n\nStart from this exact HTML:\n\n```html\n
\n

Greda grows from evidence, not speculation. A pattern enters the system only after it repeats across real projects.

\n

That keeps the stylesheet small enough to understand and makes each public class carry a clear responsibility.

\n

Before a pattern enters

\n \n
\n

The component should explain its purpose before its decoration.

\n Greda contribution principle\n
\n
\n
\n HTML\n \n
\n 
<link rel=\"stylesheet\" href=\"/v0.7.0/greda.css\">\n\n<button class=\"gr-button gr-button--primary\">Save</button>
\n
\n
\n```\n\nUse this JavaScript behavior:\n\n```js\ndocument.querySelectorAll(\"[data-copy-code]\").forEach((button) => {\n button.addEventListener(\"click\", async () => {\n const code = button.closest(\".gr-code-snippet\")?.querySelector(\"code\");\n if (code) await navigator.clipboard.writeText(code.textContent);\n });\n});\n```\n\nAccessibility requirements:\n- Preserve semantic HTML.\n- Keep visible focus on interactive elements.\n\nUse exact Grid22 icons when an icon is present. Preserve native HTML semantics. Verify the result from 360px upward, in light and dark themes, and with keyboard-only navigation." } }, { "id": "dialog", "name": "Dialog", "category": "Overlays", "description": "Native : trapped focus and Escape for free.", "docs": "https://www.greda.design/#dialog", "search": [ "dialog", "Dialog", "Native : trapped focus and Escape for free.", "modal", "confirmation" ], "classes": [ "gr-button", "gr-button--primary", "gr-button--quiet", "gr-button--secondary", "gr-dialog", "gr-dialog__actions", "gr-dialog__body", "gr-dialog__head", "gr-dialog__title", "gr-icon" ], "tokens": [], "icons": [ "close" ], "states": [ "closed", "open" ], "requires": [ "Dialog API" ], "accessibility": [ "Use a native dialog opened modally.", "Give icon-only close actions an accessible name." ], "implementation": { "html": "\n\n
\n

Discard the changes

\n \n
\n

Everything edited since the last save will be lost. This cannot be undone.

\n
\n \n \n
\n", "javascript": "if (!(\"command\" in HTMLButtonElement.prototype)) {\n document.querySelectorAll(\"button[command][commandfor]\").forEach((button) => {\n button.addEventListener(\"click\", () => {\n const dialog = document.getElementById(button.getAttribute(\"commandfor\"));\n if (!(dialog instanceof HTMLDialogElement)) return;\n if (button.getAttribute(\"command\") === \"show-modal\") dialog.showModal();\n if (button.getAttribute(\"command\") === \"close\") dialog.close();\n });\n });\n}", "aiPrompt": "Implement the Dialog component with Greda Design System v0.7.0.\n\nLoad https://www.greda.design/v0.7.0/greda.css and use only documented gr-* classes and --gr-* tokens.\n\nStart from this exact HTML:\n\n```html\n\n\n
\n

Discard the changes

\n \n
\n

Everything edited since the last save will be lost. This cannot be undone.

\n
\n \n \n
\n\n```\n\nUse this JavaScript behavior:\n\n```js\nif (!(\"command\" in HTMLButtonElement.prototype)) {\n document.querySelectorAll(\"button[command][commandfor]\").forEach((button) => {\n button.addEventListener(\"click\", () => {\n const dialog = document.getElementById(button.getAttribute(\"commandfor\"));\n if (!(dialog instanceof HTMLDialogElement)) return;\n if (button.getAttribute(\"command\") === \"show-modal\") dialog.showModal();\n if (button.getAttribute(\"command\") === \"close\") dialog.close();\n });\n });\n}\n```\n\nAccessibility requirements:\n- Use a native dialog opened modally.\n- Give icon-only close actions an accessible name.\n\nUse exact Grid22 icons when an icon is present. Preserve native HTML semantics. Verify the result from 360px upward, in light and dark themes, and with keyboard-only navigation." } }, { "id": "drawer", "name": "Drawer", "category": "Overlays", "description": "A modal side panel for focused tasks that should preserve the current page.", "docs": "https://www.greda.design/#drawer", "search": [ "drawer", "Drawer", "A modal side panel for focused tasks that should preserve the current page.", "side panel", "sheet", "filters" ], "classes": [ "gr-button", "gr-button--icon", "gr-button--primary", "gr-button--quiet", "gr-button--secondary", "gr-choice", "gr-choice__input", "gr-choice__label", "gr-drawer", "gr-drawer__actions", "gr-drawer__body", "gr-drawer__head", "gr-drawer__title", "gr-fieldset", "gr-fieldset__legend", "gr-icon" ], "tokens": [], "icons": [ "close" ], "states": [ "closed", "open" ], "requires": [ "Dialog API", "Grid22" ], "accessibility": [ "Use a native dialog opened modally so focus, Escape, and page inertness remain intact.", "Give the drawer an accessible title and every icon-only close action an accessible name.", "Keep the body independently scrollable while its title and actions remain visible." ], "implementation": { "html": "\n\n
\n

Filter projects

\n \n
\n
\n
\n Status\n \n \n \n
\n
\n
\n \n
\n", "javascript": "// No JavaScript required.", "aiPrompt": "Implement the Drawer component with Greda Design System v0.7.0.\n\nLoad https://www.greda.design/v0.7.0/greda.css and use only documented gr-* classes and --gr-* tokens.\n\nStart from this exact HTML:\n\n```html\n\n\n
\n

Filter projects

\n \n
\n
\n
\n Status\n \n \n \n
\n
\n
\n \n
\n\n```\n\nNo JavaScript is required for this example.\n\nAccessibility requirements:\n- Use a native dialog opened modally so focus, Escape, and page inertness remain intact.\n- Give the drawer an accessible title and every icon-only close action an accessible name.\n- Keep the body independently scrollable while its title and actions remain visible.\n\nUse exact Grid22 icons when an icon is present. Preserve native HTML semantics. Verify the result from 360px upward, in light and dark themes, and with keyboard-only navigation." } }, { "id": "command-menu", "name": "Search / Command Menu", "category": "Overlays", "description": "Find and run a known action without leaving the keyboard.", "docs": "https://www.greda.design/#command-menu", "search": [ "command-menu", "Search / Command Menu", "Find and run a known action without leaving the keyboard.", "search", "command palette", "quick actions", "launcher" ], "classes": [ "gr-button", "gr-button--icon", "gr-button--quiet", "gr-button--secondary", "gr-command-menu", "gr-command-menu__empty", "gr-command-menu__input", "gr-command-menu__item", "gr-command-menu__meta", "gr-command-menu__results", "gr-command-menu__search", "gr-icon", "gr-visually-hidden" ], "tokens": [], "icons": [ "search", "close" ], "states": [ "closed", "open", "filtered", "selected", "empty" ], "requires": [ "Dialog API", "Grid22", "Command menu script" ], "accessibility": [ "Keep focus in the combobox and expose the selected result through aria-activedescendant.", "Support Arrow Up, Arrow Down, Enter, and Escape without overriding native text editing.", "Announce the result count and provide an explicit empty state." ], "implementation": { "html": "\n\n

Search commands

\n
\n \n \n \n \n \n \n
\n
\n \n Go to foundations\n Navigate\n \n \n Browse components\n Navigate\n \n \n Read release notes\n Navigate\n \n \n Use Greda with AI\n Navigate\n \n
\n \n

4 commands available.

\n", "javascript": "document.querySelectorAll(\"[data-gr-command-menu]\").forEach((dialog) => {\n const input = dialog.querySelector(\"[data-gr-command-input]\");\n const results = dialog.querySelector('[role=\"listbox\"]');\n const options = [...dialog.querySelectorAll(\"[data-gr-command-option]\")];\n const empty = dialog.querySelector(\"[data-gr-command-empty]\");\n const status = dialog.querySelector(\"[data-gr-command-status]\");\n const trigger = document.querySelector(\n `[command=\"show-modal\"][commandfor=\"${CSS.escape(dialog.id)}\"]`,\n );\n if (!input || !results || !empty || !status) return;\n\n const visibleOptions = () => options.filter((option) => !option.hidden);\n\n function select(option) {\n options.forEach((candidate) => {\n candidate.setAttribute(\"aria-selected\", String(candidate === option));\n });\n if (option) input.setAttribute(\"aria-activedescendant\", option.id);\n else input.removeAttribute(\"aria-activedescendant\");\n }\n\n function filter() {\n const query = input.value.trim().toLocaleLowerCase();\n options.forEach((option) => {\n const text = `${option.textContent} ${option.dataset.search || \"\"}`.toLocaleLowerCase();\n option.hidden = !text.includes(query);\n });\n const available = visibleOptions();\n results.hidden = available.length === 0;\n empty.hidden = available.length !== 0;\n status.textContent = available.length\n ? `${available.length} ${available.length === 1 ? \"command\" : \"commands\"} available.`\n : \"No commands found.\";\n select(available[0]);\n }\n\n input.addEventListener(\"input\", filter);\n input.addEventListener(\"keydown\", (event) => {\n const available = visibleOptions();\n const current = available.findIndex(\n (option) => option.getAttribute(\"aria-selected\") === \"true\",\n );\n if (event.key === \"ArrowDown\" || event.key === \"ArrowUp\") {\n if (!available.length) return;\n event.preventDefault();\n const direction = event.key === \"ArrowDown\" ? 1 : -1;\n const index = (current + direction + available.length) % available.length;\n select(available[index]);\n available[index]?.scrollIntoView({ block: \"nearest\" });\n }\n if (event.key === \"Enter\") {\n const selected = available.find(\n (option) => option.getAttribute(\"aria-selected\") === \"true\",\n );\n if (selected) {\n event.preventDefault();\n selected.click();\n }\n }\n if (event.key === \"Escape\") {\n event.preventDefault();\n dialog.close();\n trigger?.focus();\n }\n });\n\n options.forEach((option) => {\n option.addEventListener(\"click\", () => dialog.close());\n });\n\n trigger?.addEventListener(\"click\", () => {\n requestAnimationFrame(() => {\n if (!dialog.open) return;\n input.setAttribute(\"aria-expanded\", \"true\");\n filter();\n input.focus();\n });\n });\n\n dialog.addEventListener(\"close\", () => {\n input.setAttribute(\"aria-expanded\", \"false\");\n input.value = \"\";\n filter();\n });\n});", "aiPrompt": "Implement the Search / Command Menu component with Greda Design System v0.7.0.\n\nLoad https://www.greda.design/v0.7.0/greda.css and use only documented gr-* classes and --gr-* tokens.\n\nStart from this exact HTML:\n\n```html\n\n\n

Search commands

\n
\n \n \n \n \n \n \n
\n
\n \n Go to foundations\n Navigate\n \n \n Browse components\n Navigate\n \n \n Read release notes\n Navigate\n \n \n Use Greda with AI\n Navigate\n \n
\n \n

4 commands available.

\n\n```\n\nUse this JavaScript behavior:\n\n```js\ndocument.querySelectorAll(\"[data-gr-command-menu]\").forEach((dialog) => {\n const input = dialog.querySelector(\"[data-gr-command-input]\");\n const results = dialog.querySelector('[role=\"listbox\"]');\n const options = [...dialog.querySelectorAll(\"[data-gr-command-option]\")];\n const empty = dialog.querySelector(\"[data-gr-command-empty]\");\n const status = dialog.querySelector(\"[data-gr-command-status]\");\n const trigger = document.querySelector(\n `[command=\"show-modal\"][commandfor=\"${CSS.escape(dialog.id)}\"]`,\n );\n if (!input || !results || !empty || !status) return;\n\n const visibleOptions = () => options.filter((option) => !option.hidden);\n\n function select(option) {\n options.forEach((candidate) => {\n candidate.setAttribute(\"aria-selected\", String(candidate === option));\n });\n if (option) input.setAttribute(\"aria-activedescendant\", option.id);\n else input.removeAttribute(\"aria-activedescendant\");\n }\n\n function filter() {\n const query = input.value.trim().toLocaleLowerCase();\n options.forEach((option) => {\n const text = `${option.textContent} ${option.dataset.search || \"\"}`.toLocaleLowerCase();\n option.hidden = !text.includes(query);\n });\n const available = visibleOptions();\n results.hidden = available.length === 0;\n empty.hidden = available.length !== 0;\n status.textContent = available.length\n ? `${available.length} ${available.length === 1 ? \"command\" : \"commands\"} available.`\n : \"No commands found.\";\n select(available[0]);\n }\n\n input.addEventListener(\"input\", filter);\n input.addEventListener(\"keydown\", (event) => {\n const available = visibleOptions();\n const current = available.findIndex(\n (option) => option.getAttribute(\"aria-selected\") === \"true\",\n );\n if (event.key === \"ArrowDown\" || event.key === \"ArrowUp\") {\n if (!available.length) return;\n event.preventDefault();\n const direction = event.key === \"ArrowDown\" ? 1 : -1;\n const index = (current + direction + available.length) % available.length;\n select(available[index]);\n available[index]?.scrollIntoView({ block: \"nearest\" });\n }\n if (event.key === \"Enter\") {\n const selected = available.find(\n (option) => option.getAttribute(\"aria-selected\") === \"true\",\n );\n if (selected) {\n event.preventDefault();\n selected.click();\n }\n }\n if (event.key === \"Escape\") {\n event.preventDefault();\n dialog.close();\n trigger?.focus();\n }\n });\n\n options.forEach((option) => {\n option.addEventListener(\"click\", () => dialog.close());\n });\n\n trigger?.addEventListener(\"click\", () => {\n requestAnimationFrame(() => {\n if (!dialog.open) return;\n input.setAttribute(\"aria-expanded\", \"true\");\n filter();\n input.focus();\n });\n });\n\n dialog.addEventListener(\"close\", () => {\n input.setAttribute(\"aria-expanded\", \"false\");\n input.value = \"\";\n filter();\n });\n});\n```\n\nAccessibility requirements:\n- Keep focus in the combobox and expose the selected result through aria-activedescendant.\n- Support Arrow Up, Arrow Down, Enter, and Escape without overriding native text editing.\n- Announce the result count and provide an explicit empty state.\n\nUse exact Grid22 icons when an icon is present. Preserve native HTML semantics. Verify the result from 360px upward, in light and dark themes, and with keyboard-only navigation." } }, { "id": "disclosure", "name": "Disclosure", "category": "Content", "description": "
; the panel does not animate.", "docs": "https://www.greda.design/#disclosure", "search": [ "disclosure", "Disclosure", "
; the panel does not animate.", "accordion", "details" ], "classes": [ "gr-code", "gr-disclosure", "gr-disclosure__panel", "gr-disclosure__summary", "gr-icon" ], "tokens": [], "icons": [ "chevron-down" ], "states": [ "closed", "open" ], "requires": [], "accessibility": [ "Use native details and summary elements." ], "implementation": { "html": "
\n \n Why is there no build step?\n \n \n \n \n

Because a person should be able to copy the styles/ folder and keep working without installing anything.

\n
\n
\n \n When does a component get in?\n \n \n \n \n

Once it has shown up as a real pattern in more than one project.

\n
", "javascript": "// No JavaScript required.", "aiPrompt": "Implement the Disclosure component with Greda Design System v0.7.0.\n\nLoad https://www.greda.design/v0.7.0/greda.css and use only documented gr-* classes and --gr-* tokens.\n\nStart from this exact HTML:\n\n```html\n
\n \n Why is there no build step?\n \n \n \n \n

Because a person should be able to copy the styles/ folder and keep working without installing anything.

\n
\n
\n \n When does a component get in?\n \n \n \n \n

Once it has shown up as a real pattern in more than one project.

\n
\n```\n\nNo JavaScript is required for this example.\n\nAccessibility requirements:\n- Use native details and summary elements.\n\nUse exact Grid22 icons when an icon is present. Preserve native HTML semantics. Verify the result from 360px upward, in light and dark themes, and with keyboard-only navigation." } }, { "id": "tabs", "name": "Tabs", "category": "Navigation", "description": "The styling lives here; keeping aria-selected in sync is the consumer's.", "docs": "https://www.greda.design/#tabs", "search": [ "tabs", "Tabs", "The styling lives here; keeping aria-selected in sync is the consumer's.", "tabpanel", "tablist" ], "classes": [ "gr-field__message", "gr-tabs", "gr-tabs__list", "gr-tabs__panel", "gr-tabs__tab" ], "tokens": [], "icons": [], "states": [ "selected", "unselected" ], "requires": [ "Roving tab script" ], "accessibility": [ "Keep role=tab, aria-selected, tabindex, aria-controls, and panel visibility synchronized.", "Support Arrow Left/Right, Home, and End." ], "implementation": { "html": "
\n
\n \n \n
\n
\n

32px with a precise pointer, from 45rem up.

\n
\n \n
", "javascript": "document.querySelectorAll(\".gr-tabs\").forEach((tabs) => {\n const controls = [...tabs.querySelectorAll('[role=\"tab\"]')];\n\n function activate(tab, focus = false) {\n controls.forEach((control) => {\n const selected = control === tab;\n control.setAttribute(\"aria-selected\", String(selected));\n control.tabIndex = selected ? 0 : -1;\n const panel = tabs.querySelector(`#${control.getAttribute(\"aria-controls\")}`);\n if (panel) panel.hidden = !selected;\n });\n if (focus) tab.focus();\n }\n\n controls.forEach((tab, index) => {\n tab.addEventListener(\"click\", () => activate(tab));\n tab.addEventListener(\"keydown\", (event) => {\n let next;\n if (event.key === \"ArrowRight\") next = controls[(index + 1) % controls.length];\n if (event.key === \"ArrowLeft\") next = controls[(index - 1 + controls.length) % controls.length];\n if (event.key === \"Home\") next = controls[0];\n if (event.key === \"End\") next = controls.at(-1);\n if (!next) return;\n event.preventDefault();\n activate(next, true);\n });\n });\n});", "aiPrompt": "Implement the Tabs component with Greda Design System v0.7.0.\n\nLoad https://www.greda.design/v0.7.0/greda.css and use only documented gr-* classes and --gr-* tokens.\n\nStart from this exact HTML:\n\n```html\n
\n
\n \n \n
\n
\n

32px with a precise pointer, from 45rem up.

\n
\n \n
\n```\n\nUse this JavaScript behavior:\n\n```js\ndocument.querySelectorAll(\".gr-tabs\").forEach((tabs) => {\n const controls = [...tabs.querySelectorAll('[role=\"tab\"]')];\n\n function activate(tab, focus = false) {\n controls.forEach((control) => {\n const selected = control === tab;\n control.setAttribute(\"aria-selected\", String(selected));\n control.tabIndex = selected ? 0 : -1;\n const panel = tabs.querySelector(`#${control.getAttribute(\"aria-controls\")}`);\n if (panel) panel.hidden = !selected;\n });\n if (focus) tab.focus();\n }\n\n controls.forEach((tab, index) => {\n tab.addEventListener(\"click\", () => activate(tab));\n tab.addEventListener(\"keydown\", (event) => {\n let next;\n if (event.key === \"ArrowRight\") next = controls[(index + 1) % controls.length];\n if (event.key === \"ArrowLeft\") next = controls[(index - 1 + controls.length) % controls.length];\n if (event.key === \"Home\") next = controls[0];\n if (event.key === \"End\") next = controls.at(-1);\n if (!next) return;\n event.preventDefault();\n activate(next, true);\n });\n });\n});\n```\n\nAccessibility requirements:\n- Keep role=tab, aria-selected, tabindex, aria-controls, and panel visibility synchronized.\n- Support Arrow Left/Right, Home, and End.\n\nUse exact Grid22 icons when an icon is present. Preserve native HTML semantics. Verify the result from 360px upward, in light and dark themes, and with keyboard-only navigation." } }, { "id": "vertical-steps", "name": "Vertical Steps", "category": "Navigation", "description": "Show progress through a sequence without hiding what comes next.", "docs": "https://www.greda.design/#vertical-steps", "search": [ "vertical-steps", "Vertical Steps", "Show progress through a sequence without hiding what comes next.", "stepper", "workflow", "progress sequence" ], "classes": [ "gr-icon", "gr-step", "gr-step--complete", "gr-step--current", "gr-step__content", "gr-step__description", "gr-step__marker", "gr-step__status", "gr-step__title", "gr-steps", "gr-steps--vertical" ], "tokens": [], "icons": [ "check" ], "states": [ "complete", "current", "upcoming" ], "requires": [], "accessibility": [ "Use an ordered list and mark the active item with aria-current=step.", "Write state labels so completion is not communicated by color alone." ], "implementation": { "html": "
    \n
  1. \n \n \n \n \n \n \n Draft\n Content and component API complete.\n Completed\n \n
    2. \n
  2. \n 2\n \n Review\n Accessibility and responsive behavior.\n Current step\n \n
    3. \n
  3. \n 3\n \n Publish\n Create the immutable release.\n Not started\n \n
    4. \n
", "javascript": "// No JavaScript required.", "aiPrompt": "Implement the Vertical Steps component with Greda Design System v0.7.0.\n\nLoad https://www.greda.design/v0.7.0/greda.css and use only documented gr-* classes and --gr-* tokens.\n\nStart from this exact HTML:\n\n```html\n
    \n
  1. \n \n \n \n \n \n \n Draft\n Content and component API complete.\n Completed\n \n
    2. \n
  2. \n 2\n \n Review\n Accessibility and responsive behavior.\n Current step\n \n
    3. \n
  3. \n 3\n \n Publish\n Create the immutable release.\n Not started\n \n
    4. \n
\n```\n\nNo JavaScript is required for this example.\n\nAccessibility requirements:\n- Use an ordered list and mark the active item with aria-current=step.\n- Write state labels so completion is not communicated by color alone.\n\nUse exact Grid22 icons when an icon is present. Preserve native HTML semantics. Verify the result from 360px upward, in light and dark themes, and with keyboard-only navigation." } }, { "id": "popover", "name": "Popover", "category": "Overlays", "description": "The popover attribute: top layer and light dismiss.", "docs": "https://www.greda.design/#popover", "search": [ "popover", "Popover", "The popover attribute: top layer and light dismiss.", "floating panel" ], "classes": [ "gr-button", "gr-button--secondary", "gr-popover" ], "tokens": [], "icons": [], "states": [ "closed", "open" ], "requires": [ "Popover API" ], "accessibility": [ "Use the native popover attribute for Escape and light dismiss." ], "implementation": { "html": "\n
\n Local references, duplicate ids, inline styles, colours outside the tokens, and transitions on properties that are not composited.\n
", "javascript": "// No JavaScript required.", "aiPrompt": "Implement the Popover component with Greda Design System v0.7.0.\n\nLoad https://www.greda.design/v0.7.0/greda.css and use only documented gr-* classes and --gr-* tokens.\n\nStart from this exact HTML:\n\n```html\n\n
\n Local references, duplicate ids, inline styles, colours outside the tokens, and transitions on properties that are not composited.\n
\n```\n\nNo JavaScript is required for this example.\n\nAccessibility requirements:\n- Use the native popover attribute for Escape and light dismiss.\n\nUse exact Grid22 icons when an icon is present. Preserve native HTML semantics. Verify the result from 360px upward, in light and dark themes, and with keyboard-only navigation." } }, { "id": "dropdown-menu", "name": "Dropdown Menu", "category": "Actions", "description": "A compact list of actions with roving keyboard focus and native dismissal.", "docs": "https://www.greda.design/#dropdown-menu", "search": [ "dropdown-menu", "Dropdown Menu", "A compact list of actions with roving keyboard focus and native dismissal.", "action menu", "context menu", "menu" ], "classes": [ "gr-button", "gr-button--icon", "gr-button--secondary", "gr-icon", "gr-menu", "gr-menu__item", "gr-menu__item--danger", "gr-menu__list", "gr-menu__separator", "gr-menu__shortcut", "gr-popover" ], "tokens": [], "icons": [ "more-horizontal", "edit", "copy", "trash" ], "states": [ "closed", "open", "focused", "disabled", "danger" ], "requires": [ "Grid22", "Popover API", "Roving menu script" ], "accessibility": [ "Use aria-haspopup=menu and keep aria-expanded synchronized.", "Move focus into the menu on open and return it to the trigger on close.", "Support Arrow Up/Down, Home, End, Escape, and disabled items." ], "implementation": { "html": "\n
\n
    \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n
  • \n \n
    • \n
  • \n \n
    • \n
\n
", "javascript": "document.querySelectorAll(\".gr-menu[popover]\").forEach((menu) => {\n const trigger = document.querySelector(`[popovertarget=\"${CSS.escape(menu.id)}\"]`);\n if (!trigger) return;\n\n const items = () => [...menu.querySelectorAll('[role=\"menuitem\"]')]\n .filter((item) => !item.disabled && item.getAttribute(\"aria-disabled\") !== \"true\");\n\n function positionMenu() {\n const rootStyles = getComputedStyle(document.documentElement);\n const edge = parseFloat(rootStyles.getPropertyValue(\"--gr-space-4\")) || 16;\n const gap = parseFloat(rootStyles.getPropertyValue(\"--gr-space-1\")) || 4;\n const viewport = window.visualViewport;\n const viewportLeft = viewport?.offsetLeft || 0;\n const viewportTop = viewport?.offsetTop || 0;\n const viewportWidth = viewport?.width || window.innerWidth;\n const viewportHeight = viewport?.height || window.innerHeight;\n const triggerRect = trigger.getBoundingClientRect();\n const menuRect = menu.getBoundingClientRect();\n const left = Math.min(Math.max(viewportLeft + edge, triggerRect.right - menuRect.width),\n Math.max(viewportLeft + edge, viewportLeft + viewportWidth - menuRect.width - edge));\n const below = triggerRect.bottom + gap;\n const top = below + menuRect.height <= viewportTop + viewportHeight - edge\n ? below : Math.max(viewportTop + edge, triggerRect.top - menuRect.height - gap);\n menu.style.setProperty(\"--_gr-picker-left\", `${left}px`);\n menu.style.setProperty(\"--_gr-picker-top\", `${top}px`);\n }\n\n function focusItem(index) {\n const available = items();\n if (available.length) available[(index + available.length) % available.length].focus();\n }\n\n function openAt(index) {\n if (!menu.matches(\":popover-open\")) {\n menu.showPopover();\n positionMenu();\n }\n requestAnimationFrame(() => {\n positionMenu();\n focusItem(index);\n });\n }\n\n trigger.addEventListener(\"click\", () => {\n requestAnimationFrame(() => {\n if (menu.matches(\":popover-open\")) {\n positionMenu();\n focusItem(0);\n }\n });\n });\n trigger.addEventListener(\"keydown\", (event) => {\n if (![\"ArrowDown\", \"ArrowUp\"].includes(event.key)) return;\n event.preventDefault();\n openAt(event.key === \"ArrowDown\" ? 0 : -1);\n });\n menu.addEventListener(\"toggle\", () => {\n const open = menu.matches(\":popover-open\");\n trigger.setAttribute(\"aria-expanded\", String(open));\n if (open) requestAnimationFrame(positionMenu);\n });\n menu.addEventListener(\"keydown\", (event) => {\n const available = items();\n const current = available.indexOf(document.activeElement);\n const positions = {\n ArrowDown: current + 1,\n ArrowUp: current - 1,\n Home: 0,\n End: -1,\n };\n if (positions[event.key] !== undefined) {\n event.preventDefault();\n focusItem(positions[event.key]);\n }\n if (event.key === \"Escape\") {\n event.preventDefault();\n menu.hidePopover();\n trigger.focus();\n }\n if (event.key === \"Tab\") menu.hidePopover();\n });\n menu.addEventListener(\"click\", (event) => {\n const item = event.target.closest('[role=\"menuitem\"]');\n if (!item || item.disabled || item.getAttribute(\"aria-disabled\") === \"true\") return;\n menu.hidePopover();\n trigger.focus();\n });\n\n const reposition = () => {\n if (menu.matches(\":popover-open\")) positionMenu();\n };\n window.addEventListener(\"resize\", reposition);\n window.addEventListener(\"scroll\", reposition, true);\n window.visualViewport?.addEventListener(\"resize\", reposition);\n window.visualViewport?.addEventListener(\"scroll\", reposition);\n});", "aiPrompt": "Implement the Dropdown Menu component with Greda Design System v0.7.0.\n\nLoad https://www.greda.design/v0.7.0/greda.css and use only documented gr-* classes and --gr-* tokens.\n\nStart from this exact HTML:\n\n```html\n\n
\n
    \n
  • \n \n
    • \n
  • \n \n
    • \n
  • \n
  • \n \n
    • \n
  • \n \n
    • \n
\n
\n```\n\nUse this JavaScript behavior:\n\n```js\ndocument.querySelectorAll(\".gr-menu[popover]\").forEach((menu) => {\n const trigger = document.querySelector(`[popovertarget=\"${CSS.escape(menu.id)}\"]`);\n if (!trigger) return;\n\n const items = () => [...menu.querySelectorAll('[role=\"menuitem\"]')]\n .filter((item) => !item.disabled && item.getAttribute(\"aria-disabled\") !== \"true\");\n\n function positionMenu() {\n const rootStyles = getComputedStyle(document.documentElement);\n const edge = parseFloat(rootStyles.getPropertyValue(\"--gr-space-4\")) || 16;\n const gap = parseFloat(rootStyles.getPropertyValue(\"--gr-space-1\")) || 4;\n const viewport = window.visualViewport;\n const viewportLeft = viewport?.offsetLeft || 0;\n const viewportTop = viewport?.offsetTop || 0;\n const viewportWidth = viewport?.width || window.innerWidth;\n const viewportHeight = viewport?.height || window.innerHeight;\n const triggerRect = trigger.getBoundingClientRect();\n const menuRect = menu.getBoundingClientRect();\n const left = Math.min(Math.max(viewportLeft + edge, triggerRect.right - menuRect.width),\n Math.max(viewportLeft + edge, viewportLeft + viewportWidth - menuRect.width - edge));\n const below = triggerRect.bottom + gap;\n const top = below + menuRect.height <= viewportTop + viewportHeight - edge\n ? below : Math.max(viewportTop + edge, triggerRect.top - menuRect.height - gap);\n menu.style.setProperty(\"--_gr-picker-left\", `${left}px`);\n menu.style.setProperty(\"--_gr-picker-top\", `${top}px`);\n }\n\n function focusItem(index) {\n const available = items();\n if (available.length) available[(index + available.length) % available.length].focus();\n }\n\n function openAt(index) {\n if (!menu.matches(\":popover-open\")) {\n menu.showPopover();\n positionMenu();\n }\n requestAnimationFrame(() => {\n positionMenu();\n focusItem(index);\n });\n }\n\n trigger.addEventListener(\"click\", () => {\n requestAnimationFrame(() => {\n if (menu.matches(\":popover-open\")) {\n positionMenu();\n focusItem(0);\n }\n });\n });\n trigger.addEventListener(\"keydown\", (event) => {\n if (![\"ArrowDown\", \"ArrowUp\"].includes(event.key)) return;\n event.preventDefault();\n openAt(event.key === \"ArrowDown\" ? 0 : -1);\n });\n menu.addEventListener(\"toggle\", () => {\n const open = menu.matches(\":popover-open\");\n trigger.setAttribute(\"aria-expanded\", String(open));\n if (open) requestAnimationFrame(positionMenu);\n });\n menu.addEventListener(\"keydown\", (event) => {\n const available = items();\n const current = available.indexOf(document.activeElement);\n const positions = {\n ArrowDown: current + 1,\n ArrowUp: current - 1,\n Home: 0,\n End: -1,\n };\n if (positions[event.key] !== undefined) {\n event.preventDefault();\n focusItem(positions[event.key]);\n }\n if (event.key === \"Escape\") {\n event.preventDefault();\n menu.hidePopover();\n trigger.focus();\n }\n if (event.key === \"Tab\") menu.hidePopover();\n });\n menu.addEventListener(\"click\", (event) => {\n const item = event.target.closest('[role=\"menuitem\"]');\n if (!item || item.disabled || item.getAttribute(\"aria-disabled\") === \"true\") return;\n menu.hidePopover();\n trigger.focus();\n });\n\n const reposition = () => {\n if (menu.matches(\":popover-open\")) positionMenu();\n };\n window.addEventListener(\"resize\", reposition);\n window.addEventListener(\"scroll\", reposition, true);\n window.visualViewport?.addEventListener(\"resize\", reposition);\n window.visualViewport?.addEventListener(\"scroll\", reposition);\n});\n```\n\nAccessibility requirements:\n- Use aria-haspopup=menu and keep aria-expanded synchronized.\n- Move focus into the menu on open and return it to the trigger on close.\n- Support Arrow Up/Down, Home, End, Escape, and disabled items.\n\nUse exact Grid22 icons when an icon is present. Preserve native HTML semantics. Verify the result from 360px upward, in light and dark themes, and with keyboard-only navigation." } }, { "id": "callout", "name": "Callout", "category": "Feedback", "description": "A message that stays on the page.", "docs": "https://www.greda.design/#callout", "search": [ "callout", "Callout", "A message that stays on the page.", "notice", "inline alert" ], "classes": [ "gr-callout", "gr-callout--danger", "gr-callout__body", "gr-callout__title", "gr-code", "gr-icon" ], "tokens": [], "icons": [ "info", "alert-triangle" ], "states": [], "requires": [], "accessibility": [ "Preserve semantic HTML.", "Keep visible focus on interactive elements." ], "implementation": { "html": "
\n \n \n \n \n \n
\n

Breakpoints are a fixed scale

\n

A media query cannot read a token, so sm, md and lg are written out.

\n
\n
\n
\n \n \n \n \n \n
\n

The accent does not separate focus from error

\n

Today danger resolves to the accent; separating them is one line in tokens.css.

\n
\n
", "javascript": "// No JavaScript required.", "aiPrompt": "Implement the Callout component with Greda Design System v0.7.0.\n\nLoad https://www.greda.design/v0.7.0/greda.css and use only documented gr-* classes and --gr-* tokens.\n\nStart from this exact HTML:\n\n```html\n
\n \n \n \n \n \n
\n

Breakpoints are a fixed scale

\n

A media query cannot read a token, so sm, md and lg are written out.

\n
\n
\n
\n \n \n \n \n \n
\n

The accent does not separate focus from error

\n

Today danger resolves to the accent; separating them is one line in tokens.css.

\n
\n
\n```\n\nNo JavaScript is required for this example.\n\nAccessibility requirements:\n- Preserve semantic HTML.\n- Keep visible focus on interactive elements.\n\nUse exact Grid22 icons when an icon is present. Preserve native HTML semantics. Verify the result from 360px upward, in light and dark themes, and with keyboard-only navigation." } }, { "id": "toast", "name": "Toast", "category": "Feedback", "description": "Transient; it lives on the toast layer.", "docs": "https://www.greda.design/#toast", "search": [ "toast", "Toast", "Transient; it lives on the toast layer.", "notification", "status" ], "classes": [ "gr-code", "gr-field__message", "gr-icon", "gr-toast", "gr-toast__message" ], "tokens": [], "icons": [], "states": [ "visible" ], "requires": [], "accessibility": [ "Use role=status for non-urgent updates and keep the message as text." ], "implementation": { "html": "
\n \n \n \n Tokens validated: 2 documents, 7 stylesheets.\n
\n

In real use it sits inside .gr-toast-region, which pins it to the bottom and intercepts no clicks.

", "javascript": "// No JavaScript required.", "aiPrompt": "Implement the Toast component with Greda Design System v0.7.0.\n\nLoad https://www.greda.design/v0.7.0/greda.css and use only documented gr-* classes and --gr-* tokens.\n\nStart from this exact HTML:\n\n```html\n
\n \n \n \n Tokens validated: 2 documents, 7 stylesheets.\n
\n

In real use it sits inside .gr-toast-region, which pins it to the bottom and intercepts no clicks.

\n```\n\nNo JavaScript is required for this example.\n\nAccessibility requirements:\n- Use role=status for non-urgent updates and keep the message as text.\n\nUse exact Grid22 icons when an icon is present. Preserve native HTML semantics. Verify the result from 360px upward, in light and dark themes, and with keyboard-only navigation." } }, { "id": "spinner-progress", "name": "Spinner and Progress", "category": "Feedback", "description": "Indeterminate and determinate; the second is .", "docs": "https://www.greda.design/#spinner-progress", "search": [ "spinner-progress", "Spinner and Progress", "Indeterminate and determinate; the second is .", "loading", "progress" ], "classes": [ "gr-code", "gr-field__message", "gr-loading", "gr-progress", "gr-spinner" ], "tokens": [], "icons": [], "states": [ "indeterminate", "determinate" ], "requires": [], "accessibility": [ "Never use motion as the only loading message.", "Use native progress when a value exists." ], "implementation": { "html": "\n \n Validating tokens…\n\n\n

The spinner never travels alone: prefers-reduced-motion freezes it, and a still circle says nothing. The label does.

", "javascript": "// No JavaScript required.", "aiPrompt": "Implement the Spinner and Progress component with Greda Design System v0.7.0.\n\nLoad https://www.greda.design/v0.7.0/greda.css and use only documented gr-* classes and --gr-* tokens.\n\nStart from this exact HTML:\n\n```html\n\n \n Validating tokens…\n\n\n

The spinner never travels alone: prefers-reduced-motion freezes it, and a still circle says nothing. The label does.

\n```\n\nNo JavaScript is required for this example.\n\nAccessibility requirements:\n- Never use motion as the only loading message.\n- Use native progress when a value exists.\n\nUse exact Grid22 icons when an icon is present. Preserve native HTML semantics. Verify the result from 360px upward, in light and dark themes, and with keyboard-only navigation." } }, { "id": "skeleton", "name": "Skeleton", "category": "Feedback", "description": "Only opacity moves; the block keeps its size.", "docs": "https://www.greda.design/#skeleton", "search": [ "skeleton", "Skeleton", "Only opacity moves; the block keeps its size.", "loading placeholder" ], "classes": [ "gr-card", "gr-skeleton", "gr-skeleton--text", "gr-skeleton--title", "gr-stack" ], "tokens": [], "icons": [], "states": [ "loading" ], "requires": [], "accessibility": [ "Keep its final dimensions to avoid layout shift.", "Respect reduced motion." ], "implementation": { "html": "
\n
\n
\n
\n
\n
\n
", "javascript": "// No JavaScript required.", "aiPrompt": "Implement the Skeleton component with Greda Design System v0.7.0.\n\nLoad https://www.greda.design/v0.7.0/greda.css and use only documented gr-* classes and --gr-* tokens.\n\nStart from this exact HTML:\n\n```html\n
\n
\n
\n
\n
\n
\n
\n```\n\nNo JavaScript is required for this example.\n\nAccessibility requirements:\n- Keep its final dimensions to avoid layout shift.\n- Respect reduced motion.\n\nUse exact Grid22 icons when an icon is present. Preserve native HTML semantics. Verify the result from 360px upward, in light and dark themes, and with keyboard-only navigation." } }, { "id": "empty-state", "name": "Empty state", "category": "Feedback", "description": "Name what is missing and offer the way out.", "docs": "https://www.greda.design/#empty-state", "search": [ "empty-state", "Empty state", "Name what is missing and offer the way out.", "no results", "blank slate" ], "classes": [ "gr-button", "gr-button--secondary", "gr-empty", "gr-empty__body", "gr-empty__title", "gr-icon" ], "tokens": [], "icons": [ "search" ], "states": [], "requires": [], "accessibility": [ "Name what is missing and provide a next action." ], "implementation": { "html": "
\n \n \n \n \n

No component matches

\n

Try another name, or look at the full list of primitives.

\n View all\n
", "javascript": "// No JavaScript required.", "aiPrompt": "Implement the Empty state component with Greda Design System v0.7.0.\n\nLoad https://www.greda.design/v0.7.0/greda.css and use only documented gr-* classes and --gr-* tokens.\n\nStart from this exact HTML:\n\n```html\n
\n \n \n \n \n

No component matches

\n

Try another name, or look at the full list of primitives.

\n View all\n
\n```\n\nNo JavaScript is required for this example.\n\nAccessibility requirements:\n- Name what is missing and provide a next action.\n\nUse exact Grid22 icons when an icon is present. Preserve native HTML semantics. Verify the result from 360px upward, in light and dark themes, and with keyboard-only navigation." } }, { "id": "breadcrumb", "name": "Breadcrumb", "category": "Navigation", "description": "The current page is marked with aria-current .", "docs": "https://www.greda.design/#breadcrumb", "search": [ "breadcrumb", "Breadcrumb", "The current page is marked with aria-current .", "path", "hierarchy" ], "classes": [ "gr-breadcrumb", "gr-breadcrumb__item", "gr-breadcrumb__list", "gr-link", "gr-link--quiet" ], "tokens": [], "icons": [], "states": [], "requires": [], "accessibility": [ "Mark the current item with aria-current." ], "implementation": { "html": "", "javascript": "// No JavaScript required.", "aiPrompt": "Implement the Breadcrumb component with Greda Design System v0.7.0.\n\nLoad https://www.greda.design/v0.7.0/greda.css and use only documented gr-* classes and --gr-* tokens.\n\nStart from this exact HTML:\n\n```html\n\n```\n\nNo JavaScript is required for this example.\n\nAccessibility requirements:\n- Mark the current item with aria-current.\n\nUse exact Grid22 icons when an icon is present. Preserve native HTML semantics. Verify the result from 360px upward, in light and dark themes, and with keyboard-only navigation." } }, { "id": "pagination", "name": "Pagination", "category": "Navigation", "description": "44px targets, 32px with a precise pointer.", "docs": "https://www.greda.design/#pagination", "search": [ "pagination", "Pagination", "44px targets, 32px with a precise pointer.", "pages", "previous next" ], "classes": [ "gr-pagination", "gr-pagination__link", "gr-pagination__list" ], "tokens": [], "icons": [], "states": [ "current", "disabled" ], "requires": [], "accessibility": [ "Give the navigation an accessible name and mark the current page." ], "implementation": { "html": "", "javascript": "// No JavaScript required.", "aiPrompt": "Implement the Pagination component with Greda Design System v0.7.0.\n\nLoad https://www.greda.design/v0.7.0/greda.css and use only documented gr-* classes and --gr-* tokens.\n\nStart from this exact HTML:\n\n```html\n\n```\n\nNo JavaScript is required for this example.\n\nAccessibility requirements:\n- Give the navigation an accessible name and mark the current page.\n\nUse exact Grid22 icons when an icon is present. Preserve native HTML semantics. Verify the result from 360px upward, in light and dark themes, and with keyboard-only navigation." } }, { "id": "site-chrome", "name": "Header, Nav and Footer", "category": "Navigation", "description": "This page's own; they no longer live in docs.css .", "docs": "https://www.greda.design/#site-chrome", "search": [ "site-chrome", "Header, Nav and Footer", "This page's own; they no longer live in docs.css .", "header", "navigation", "footer" ], "classes": [ "gr-code", "gr-field__message" ], "tokens": [], "icons": [], "states": [], "requires": [], "accessibility": [ "Use semantic header, nav, main, and footer landmarks." ], "implementation": { "html": "

The top bar is .gr-header with .gr-nav, and it uses the sticky layer instead of an invented z-index. The footer is .gr-footer.

", "javascript": "// No JavaScript required.", "aiPrompt": "Implement the Header, Nav and Footer component with Greda Design System v0.7.0.\n\nLoad https://www.greda.design/v0.7.0/greda.css and use only documented gr-* classes and --gr-* tokens.\n\nStart from this exact HTML:\n\n```html\n

The top bar is .gr-header with .gr-nav, and it uses the sticky layer instead of an invented z-index. The footer is .gr-footer.

\n```\n\nNo JavaScript is required for this example.\n\nAccessibility requirements:\n- Use semantic header, nav, main, and footer landmarks.\n\nUse exact Grid22 icons when an icon is present. Preserve native HTML semantics. Verify the result from 360px upward, in light and dark themes, and with keyboard-only navigation." } }, { "id": "skip-link", "name": "Skip link", "category": "Navigation", "description": "The page's first focus; revealed by keyboard.", "docs": "https://www.greda.design/#skip-link", "search": [ "skip-link", "Skip link", "The page's first focus; revealed by keyboard.", "skip navigation", "accessibility" ], "classes": [ "gr-button", "gr-button--primary", "gr-field__message" ], "tokens": [], "icons": [], "states": [], "requires": [], "accessibility": [ "Place it first in the body and reveal it on keyboard focus." ], "implementation": { "html": "Skip to content\n

It lives at the start of the <body>. Press Tab on load to watch it appear.

", "javascript": "// No JavaScript required.", "aiPrompt": "Implement the Skip link component with Greda Design System v0.7.0.\n\nLoad https://www.greda.design/v0.7.0/greda.css and use only documented gr-* classes and --gr-* tokens.\n\nStart from this exact HTML:\n\n```html\nSkip to content\n

It lives at the start of the <body>. Press Tab on load to watch it appear.

\n```\n\nNo JavaScript is required for this example.\n\nAccessibility requirements:\n- Place it first in the body and reveal it on keyboard focus.\n\nUse exact Grid22 icons when an icon is present. Preserve native HTML semantics. Verify the result from 360px upward, in light and dark themes, and with keyboard-only navigation." } } ] }