@adres/mgda-ui 0.0.0-stage → 0.0.2

package/brand-knowledge.json

@@ -0,0 +1,451 @@
+{
+  "schemaVersion": 2,
+  "generatedBy": "scripts/sync-brand-knowledge.mjs",
+  "requiredSemanticCssVars": [
+    "--background",
+    "--foreground",
+    "--foreground-muted",
+    "--card",
+    "--card-foreground",
+    "--popover",
+    "--popover-foreground",
+    "--primary",
+    "--primary-foreground",
+    "--secondary",
+    "--secondary-foreground",
+    "--accent",
+    "--accent-foreground",
+    "--muted",
+    "--muted-foreground",
+    "--destructive",
+    "--destructive-foreground",
+    "--success",
+    "--success-foreground",
+    "--warning",
+    "--warning-foreground",
+    "--border",
+    "--border-strong",
+    "--input",
+    "--ring",
+    "--font-family-sans",
+    "--radius-sm",
+    "--radius",
+    "--radius-md",
+    "--radius-lg",
+    "--radius-full",
+    "--surface-n1",
+    "--surface-0",
+    "--surface-1",
+    "--surface-2",
+    "--surface-3",
+    "--radius-badge",
+    "--button-radius",
+    "--input-radius"
+  ],
+  "brands": [
+    {
+      "id": "mgda",
+      "packageDir": "design-system",
+      "importPath": "@adres/mgda-ui",
+      "meta": {
+        "name": "MGDA",
+        "description": "MGDA brand tokens. Vivid blue primary, pale cyan secondary, cool blue-gray neutrals, Gilroy typography.",
+        "id": "mgda"
+      },
+      "cssVars": {
+        "light": {
+          "--accent": "38 90% 55%",
+          "--accent-100": "38 90% 89%",
+          "--accent-200": "38 90% 80%",
+          "--accent-300": "38 90% 72%",
+          "--accent-400": "38 90% 63%",
+          "--accent-50": "38 90% 97%",
+          "--accent-500": "38 90% 55%",
+          "--accent-600": "38 90% 45%",
+          "--accent-700": "38 90% 35%",
+          "--accent-800": "38 90% 25%",
+          "--accent-900": "38 90% 15%",
+          "--accent-950": "38 90% 5%",
+          "--accent-foreground": "38 90% 35%",
+          "--accent-muted": "38 90% 97%",
+          "--accent-strong": "38 90% 35%",
+          "--accent-stronger": "38 90% 25%",
+          "--accent-strongest": "38 90% 15%",
+          "--accent-weak": "38 90% 72%",
+          "--accent-weaker": "38 90% 80%",
+          "--accent-weakest": "38 90% 89%",
+          "--background": "220 20% 97%",
+          "--border": "220 20% 86%",
+          "--border-strong": "220 20% 74%",
+          "--button-radius": "0.375rem",
+          "--card": "0 0% 100%",
+          "--card-foreground": "220 20% 30%",
+          "--chart-1": "211 36% 48%",
+          "--chart-10": "20 10% 70%",
+          "--chart-2": "30 88% 56%",
+          "--chart-3": "359 70% 61%",
+          "--chart-4": "175 31% 59%",
+          "--chart-5": "113 34% 47%",
+          "--chart-6": "47 82% 61%",
+          "--chart-7": "316 25% 58%",
+          "--chart-8": "354 100% 81%",
+          "--chart-9": "22 24% 49%",
+          "--destructive": "0 80% 62%",
+          "--destructive-100": "0 80% 94%",
+          "--destructive-200": "0 80% 88%",
+          "--destructive-300": "0 80% 80%",
+          "--destructive-400": "0 80% 75%",
+          "--destructive-50": "0 80% 97%",
+          "--destructive-500": "0 80% 62%",
+          "--destructive-600": "0 80% 44%",
+          "--destructive-700": "0 80% 32%",
+          "--destructive-800": "0 80% 18%",
+          "--destructive-900": "0 80% 10%",
+          "--destructive-950": "0 80% 6%",
+          "--destructive-foreground": "0 80% 32%",
+          "--destructive-muted": "0 80% 97%",
+          "--destructive-strong": "0 80% 32%",
+          "--destructive-stronger": "0 80% 18%",
+          "--destructive-strongest": "0 80% 10%",
+          "--destructive-weak": "0 80% 80%",
+          "--destructive-weaker": "0 80% 88%",
+          "--destructive-weakest": "0 80% 94%",
+          "--font-family-sans": "var(--font-gilroy, \"Gilroy\"), \"Gilroy\", \"Inter\", ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
+          "--foreground": "220 20% 30%",
+          "--foreground-muted": "220 20% 45%",
+          "--foreground-strong": "220 20% 10%",
+          "--input": "220 20% 74%",
+          "--input-radius": "0.375rem",
+          "--muted": "220 20% 92%",
+          "--muted-foreground": "220 20% 45%",
+          "--neutral": "220 20% 45%",
+          "--neutral-100": "220 20% 92%",
+          "--neutral-200": "220 20% 86%",
+          "--neutral-300": "220 20% 74%",
+          "--neutral-400": "220 20% 60%",
+          "--neutral-50": "220 20% 97%",
+          "--neutral-500": "220 20% 45%",
+          "--neutral-600": "220 20% 40%",
+          "--neutral-700": "220 20% 30%",
+          "--neutral-800": "220 20% 20%",
+          "--neutral-900": "220 20% 10%",
+          "--neutral-950": "220 20% 5%",
+          "--neutral-muted": "220 20% 97%",
+          "--neutral-strong": "220 20% 30%",
+          "--neutral-stronger": "220 20% 20%",
+          "--neutral-strongest": "220 20% 10%",
+          "--neutral-weak": "220 20% 74%",
+          "--neutral-weaker": "220 20% 86%",
+          "--neutral-weakest": "220 20% 92%",
+          "--popover": "0 0% 100%",
+          "--popover-foreground": "220 20% 30%",
+          "--primary": "208 100% 50%",
+          "--primary-100": "208 100% 92%",
+          "--primary-200": "208 100% 86%",
+          "--primary-300": "208 100% 74%",
+          "--primary-400": "208 100% 59%",
+          "--primary-50": "208 100% 97%",
+          "--primary-500": "208 100% 50%",
+          "--primary-600": "208 100% 41%",
+          "--primary-700": "208 100% 32%",
+          "--primary-800": "208 100% 23%",
+          "--primary-900": "208 100% 14%",
+          "--primary-950": "208 100% 5%",
+          "--primary-foreground": "208 100% 41%",
+          "--primary-muted": "208 100% 97%",
+          "--primary-strong": "208 100% 32%",
+          "--primary-stronger": "208 100% 23%",
+          "--primary-strongest": "208 100% 14%",
+          "--primary-weak": "208 100% 74%",
+          "--primary-weaker": "208 100% 86%",
+          "--primary-weakest": "208 100% 92%",
+          "--radius": "0.375rem",
+          "--radius-badge": "0.25rem",
+          "--radius-full": "9999px",
+          "--radius-lg": "0.75rem",
+          "--radius-md": "0.5rem",
+          "--radius-sm": "0.25rem",
+          "--radius-xl": "1rem",
+          "--radius-xs": "0.125rem",
+          "--ring": "208 100% 50%",
+          "--secondary": "184 100% 64%",
+          "--secondary-100": "184 100% 94%",
+          "--secondary-200": "184 100% 90%",
+          "--secondary-300": "184 100% 84%",
+          "--secondary-400": "184 100% 76%",
+          "--secondary-50": "184 100% 97%",
+          "--secondary-500": "184 100% 64%",
+          "--secondary-600": "184 100% 50%",
+          "--secondary-700": "184 100% 38%",
+          "--secondary-800": "184 100% 26%",
+          "--secondary-900": "184 100% 16%",
+          "--secondary-950": "184 100% 10%",
+          "--secondary-foreground": "184 100% 38%",
+          "--secondary-muted": "184 100% 97%",
+          "--secondary-strong": "184 100% 38%",
+          "--secondary-stronger": "184 100% 26%",
+          "--secondary-strongest": "184 100% 16%",
+          "--secondary-weak": "184 100% 84%",
+          "--secondary-weaker": "184 100% 90%",
+          "--secondary-weakest": "184 100% 94%",
+          "--selected": "220 20% 86%",
+          "--success": "158 80% 62%",
+          "--success-100": "158 80% 94%",
+          "--success-200": "158 80% 88%",
+          "--success-300": "158 80% 80%",
+          "--success-400": "158 80% 75%",
+          "--success-50": "158 80% 97%",
+          "--success-500": "158 80% 62%",
+          "--success-600": "158 80% 44%",
+          "--success-700": "158 80% 32%",
+          "--success-800": "158 80% 18%",
+          "--success-900": "158 80% 10%",
+          "--success-950": "158 80% 6%",
+          "--success-foreground": "158 80% 32%",
+          "--success-muted": "158 80% 97%",
+          "--success-strong": "158 80% 32%",
+          "--success-stronger": "158 80% 18%",
+          "--success-strongest": "158 80% 10%",
+          "--success-weak": "158 80% 80%",
+          "--success-weaker": "158 80% 88%",
+          "--success-weakest": "158 80% 94%",
+          "--surface-0": "220 20% 92%",
+          "--surface-1": "0 0% 100%",
+          "--surface-2": "0 0% 100%",
+          "--surface-3": "220 20% 74%",
+          "--surface-n1": "220 20% 86%",
+          "--warning": "32 92% 62%",
+          "--warning-100": "32 92% 94%",
+          "--warning-200": "32 92% 88%",
+          "--warning-300": "32 92% 80%",
+          "--warning-400": "32 92% 75%",
+          "--warning-50": "32 92% 97%",
+          "--warning-500": "32 92% 62%",
+          "--warning-600": "32 92% 44%",
+          "--warning-700": "32 92% 32%",
+          "--warning-800": "32 92% 18%",
+          "--warning-900": "38 55% 10%",
+          "--warning-950": "32 92% 6%",
+          "--warning-foreground": "32 92% 32%",
+          "--warning-muted": "32 92% 97%",
+          "--warning-strong": "32 92% 32%",
+          "--warning-stronger": "32 92% 18%",
+          "--warning-strongest": "38 55% 10%",
+          "--warning-weak": "32 92% 80%",
+          "--warning-weaker": "32 92% 88%",
+          "--warning-weakest": "32 92% 94%"
+        },
+        "dark": {
+          "--accent": "38 90% 55%",
+          "--accent-100": "38 90% 89%",
+          "--accent-200": "38 90% 80%",
+          "--accent-300": "38 90% 72%",
+          "--accent-400": "38 90% 63%",
+          "--accent-50": "38 90% 97%",
+          "--accent-500": "38 90% 55%",
+          "--accent-600": "38 90% 45%",
+          "--accent-700": "38 90% 35%",
+          "--accent-800": "38 90% 25%",
+          "--accent-900": "38 90% 15%",
+          "--accent-950": "38 90% 5%",
+          "--accent-foreground": "38 90% 55%",
+          "--accent-muted": "38 90% 15%",
+          "--accent-strong": "38 90% 72%",
+          "--accent-stronger": "38 90% 80%",
+          "--accent-strongest": "38 90% 89%",
+          "--accent-weak": "38 90% 45%",
+          "--accent-weaker": "38 90% 35%",
+          "--accent-weakest": "38 90% 25%",
+          "--background": "220 20% 10%",
+          "--border": "220 20% 20%",
+          "--border-strong": "220 20% 30%",
+          "--button-radius": "0.375rem",
+          "--card": "220 20% 5%",
+          "--card-foreground": "220 20% 74%",
+          "--chart-1": "211 70% 65%",
+          "--chart-10": "220 15% 72%",
+          "--chart-2": "30 95% 63%",
+          "--chart-3": "359 85% 70%",
+          "--chart-4": "175 55% 65%",
+          "--chart-5": "113 50% 58%",
+          "--chart-6": "47 90% 68%",
+          "--chart-7": "316 50% 68%",
+          "--chart-8": "354 100% 85%",
+          "--chart-9": "22 55% 62%",
+          "--destructive": "0 80% 62%",
+          "--destructive-100": "0 80% 94%",
+          "--destructive-200": "0 80% 88%",
+          "--destructive-300": "0 80% 80%",
+          "--destructive-400": "0 80% 75%",
+          "--destructive-50": "0 80% 97%",
+          "--destructive-500": "0 80% 62%",
+          "--destructive-600": "0 80% 44%",
+          "--destructive-700": "0 80% 32%",
+          "--destructive-800": "0 80% 18%",
+          "--destructive-900": "0 80% 10%",
+          "--destructive-950": "0 80% 6%",
+          "--destructive-foreground": "0 80% 62%",
+          "--destructive-muted": "0 80% 10%",
+          "--destructive-strong": "0 80% 80%",
+          "--destructive-stronger": "0 80% 88%",
+          "--destructive-strongest": "0 80% 94%",
+          "--destructive-weak": "0 80% 44%",
+          "--destructive-weaker": "0 80% 32%",
+          "--destructive-weakest": "0 80% 18%",
+          "--font-family-sans": "var(--font-gilroy, \"Gilroy\"), \"Gilroy\", \"Inter\", ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
+          "--foreground": "220 20% 74%",
+          "--foreground-muted": "220 20% 45%",
+          "--foreground-strong": "220 20% 92%",
+          "--input": "220 20% 30%",
+          "--input-radius": "0.375rem",
+          "--muted": "220 20% 20%",
+          "--muted-foreground": "220 20% 45%",
+          "--neutral": "220 20% 45%",
+          "--neutral-100": "220 20% 92%",
+          "--neutral-200": "220 20% 86%",
+          "--neutral-300": "220 20% 74%",
+          "--neutral-400": "220 20% 60%",
+          "--neutral-50": "220 20% 97%",
+          "--neutral-500": "220 20% 45%",
+          "--neutral-600": "220 20% 40%",
+          "--neutral-700": "220 20% 30%",
+          "--neutral-800": "220 20% 20%",
+          "--neutral-900": "220 20% 10%",
+          "--neutral-950": "220 20% 5%",
+          "--neutral-muted": "220 20% 5%",
+          "--neutral-strong": "220 20% 74%",
+          "--neutral-stronger": "220 20% 86%",
+          "--neutral-strongest": "220 20% 92%",
+          "--neutral-weak": "220 20% 30%",
+          "--neutral-weaker": "220 20% 20%",
+          "--neutral-weakest": "220 20% 10%",
+          "--popover": "220 20% 5%",
+          "--popover-foreground": "220 20% 74%",
+          "--primary": "208 100% 50%",
+          "--primary-100": "208 100% 92%",
+          "--primary-200": "208 100% 86%",
+          "--primary-300": "208 100% 74%",
+          "--primary-400": "208 100% 59%",
+          "--primary-50": "208 100% 97%",
+          "--primary-500": "208 100% 50%",
+          "--primary-600": "208 100% 41%",
+          "--primary-700": "208 100% 32%",
+          "--primary-800": "208 100% 23%",
+          "--primary-900": "208 100% 14%",
+          "--primary-950": "208 100% 5%",
+          "--primary-foreground": "208 100% 50%",
+          "--primary-muted": "208 100% 14%",
+          "--primary-strong": "208 100% 74%",
+          "--primary-stronger": "208 100% 86%",
+          "--primary-strongest": "208 100% 92%",
+          "--primary-weak": "208 100% 41%",
+          "--primary-weaker": "208 100% 32%",
+          "--primary-weakest": "208 100% 23%",
+          "--radius": "0.375rem",
+          "--radius-badge": "0.25rem",
+          "--radius-full": "9999px",
+          "--radius-lg": "0.75rem",
+          "--radius-md": "0.5rem",
+          "--radius-sm": "0.25rem",
+          "--radius-xl": "1rem",
+          "--radius-xs": "0.125rem",
+          "--ring": "208 100% 50%",
+          "--secondary": "184 100% 64%",
+          "--secondary-100": "184 100% 94%",
+          "--secondary-200": "184 100% 90%",
+          "--secondary-300": "184 100% 84%",
+          "--secondary-400": "184 100% 76%",
+          "--secondary-50": "184 100% 97%",
+          "--secondary-500": "184 100% 64%",
+          "--secondary-600": "184 100% 50%",
+          "--secondary-700": "184 100% 38%",
+          "--secondary-800": "184 100% 26%",
+          "--secondary-900": "184 100% 16%",
+          "--secondary-950": "184 100% 10%",
+          "--secondary-foreground": "184 100% 84%",
+          "--secondary-muted": "184 100% 10%",
+          "--secondary-strong": "184 100% 84%",
+          "--secondary-stronger": "184 100% 90%",
+          "--secondary-strongest": "184 100% 94%",
+          "--secondary-weak": "184 100% 38%",
+          "--secondary-weaker": "184 100% 26%",
+          "--secondary-weakest": "184 100% 16%",
+          "--selected": "220 20% 20%",
+          "--success": "158 80% 62%",
+          "--success-100": "158 80% 94%",
+          "--success-200": "158 80% 88%",
+          "--success-300": "158 80% 80%",
+          "--success-400": "158 80% 75%",
+          "--success-50": "158 80% 97%",
+          "--success-500": "158 80% 62%",
+          "--success-600": "158 80% 44%",
+          "--success-700": "158 80% 32%",
+          "--success-800": "158 80% 18%",
+          "--success-900": "158 80% 10%",
+          "--success-950": "158 80% 6%",
+          "--success-foreground": "158 80% 62%",
+          "--success-muted": "158 80% 10%",
+          "--success-strong": "158 80% 80%",
+          "--success-stronger": "158 80% 88%",
+          "--success-strongest": "158 80% 94%",
+          "--success-weak": "158 80% 44%",
+          "--success-weaker": "158 80% 32%",
+          "--success-weakest": "158 80% 18%",
+          "--surface-0": "220 20% 5%",
+          "--surface-1": "220 20% 10%",
+          "--surface-2": "220 20% 20%",
+          "--surface-3": "220 20% 30%",
+          "--surface-n1": "220 20% 10%",
+          "--warning": "32 92% 62%",
+          "--warning-100": "32 92% 94%",
+          "--warning-200": "32 92% 88%",
+          "--warning-300": "32 92% 80%",
+          "--warning-400": "32 92% 75%",
+          "--warning-50": "32 92% 97%",
+          "--warning-500": "32 92% 62%",
+          "--warning-600": "32 92% 44%",
+          "--warning-700": "32 92% 32%",
+          "--warning-800": "32 92% 18%",
+          "--warning-900": "38 55% 10%",
+          "--warning-950": "32 92% 6%",
+          "--warning-foreground": "32 92% 62%",
+          "--warning-muted": "38 55% 10%",
+          "--warning-strong": "32 92% 80%",
+          "--warning-stronger": "32 92% 88%",
+          "--warning-strongest": "32 92% 94%",
+          "--warning-weak": "32 92% 44%",
+          "--warning-weaker": "32 92% 32%",
+          "--warning-weakest": "32 92% 18%"
+        }
+      },
+      "tokens": {
+        "shape": {
+          "softBg": false,
+          "cardBorderless": false,
+          "cardElevation": "sm",
+          "tabsRounded": false
+        },
+        "voice": {
+          "personality": [
+            "Clear",
+            "Structured",
+            "Institutional",
+            "Trustworthy"
+          ],
+          "avoid": [
+            "Decorative",
+            "Noisy",
+            "Off-brand whimsy"
+          ]
+        }
+      },
+      "hasOverrides": false,
+      "hasTypography": false
+    }
+  ],
+  "index": {
+    "byId": {
+      "mgda": 0
+    }
+  }
+}

package/knowledge/accordion.md

@@ -0,0 +1,135 @@
+---
+# >>> DERIVED - regenerated by `npm run knowledge:sync`. Do not edit. <<<
+derived:
+  schemaVersion: 1
+  id: accordion
+  sourceFile: packages/design-system/src/components/accordion.tsx
+  client: true
+  category: web-app-data
+  categoryFromBarrel: web-app-data
+  barrelExported: true
+  importPath: "@adres/mgda-ui"
+  exports:
+    - name: Accordion
+      kind: component
+      radixSource: "@radix-ui/react-accordion#Root"
+      typeText: "ForwardRefExoticComponent<(AccordionSingleProps | AccordionMultipleProps) & RefAttributes<HTMLDivElement>>"
+    - name: AccordionContent
+      kind: component
+      typeText: "ForwardRefExoticComponent<Omit<AccordionContentProps & RefAttributes<HTMLDivElement>, \"ref\"> & RefAttributes<HTMLDivElement>>"
+    - name: AccordionItem
+      kind: component
+      typeText: "ForwardRefExoticComponent<Omit<AccordionItemProps & RefAttributes<HTMLDivElement>, \"ref\"> & RefAttributes<HTMLDivElement>>"
+    - name: AccordionProps
+      kind: type
+    - name: AccordionTrigger
+      kind: component
+      typeText: "ForwardRefExoticComponent<Omit<AccordionTriggerProps & RefAttributes<HTMLButtonElement>, \"ref\"> & RefAttributes<HTMLButtonElement>>"
+  primaryExport: Accordion
+  subcomponents:
+    - AccordionContent
+    - AccordionItem
+    - AccordionTrigger
+  props: {}
+  extendsProps: []
+  variants: {}
+  variantSource: none
+  compoundVariants: []
+  sizeMaps: []
+  dataSlots: []
+  dependsOn:
+    internal: []
+    lib:
+      - cn
+    hooks: []
+    external:
+      - "@radix-ui/react-accordion"
+      - lucide-react
+      - react
+  contexts: []
+  stories:
+    - exportName: Default
+      id: components-accordion--default
+    - exportName: Multiple
+      id: components-accordion--multiple
+  storybookTitle: Components/Accordion
+  docsId: components-accordion--documentation
+  argTypeOptions: {}
+  resolvedCleanly: true
+  contractHash: "79b72715fcd7"
+  factsHash: "781b4b74c41d"
+# >>> AUTHORED - humans own everything below this line. <<<
+status: stable
+summary: "A vertical stack of expand/collapse sections built on Radix Accordion, single or multi-open."
+useWhen:
+  - "a list of items where only the relevant one(s) need to be expanded at a time - FAQs, collapsible settings groups, progressive disclosure of detail"
+useInstead:
+  - id: data-list
+    when: "the content is a flat set of label/value pairs, not sections that expand and collapse"
+  - id: table
+    when: "the content is genuinely tabular (multiple columns of comparable data), not a list of expandable sections"
+related:
+  - data-list
+  - table
+a11y:
+  notes:
+    - "AccordionTrigger renders inside a Radix header wrapper, giving each section heading semantics for free - do not wrap it in your own heading element too."
+    - "Radix manages aria-expanded and the content's visibility/ARIA relationship automatically - no extra ARIA is needed on AccordionItem/AccordionContent."
+  keyboard:
+    - "Native Radix accordion keyboard behavior: arrow keys move focus between triggers, Home/End jump to the first/last trigger, Enter/Space toggles the focused section."
+  radixHandles: true
+pitfalls:
+  - "type=\"single\" needs collapsible to allow closing the currently-open item - without it, exactly one item is always open and clicking the open item's own trigger does nothing."
+  - "type is a required, mode-changing prop - single allows at most one open item at a time, multiple allows any number open simultaneously; the shape of value/defaultValue (a string vs. a string array) depends on which mode is chosen."
+  - "className, type, collapsible, and value cannot be demonstrated in this file's machine-checked canonicalSnippet, because Accordion is a bare Radix re-export with no resolvable props - the same gap as separator/aspect-ratio in 15b-ii. See the fuller example in ## Usage."
+canonicalSnippet: |
+  import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@adres/mgda-ui"
+
+  <Accordion>
+    <AccordionItem>
+      <AccordionTrigger>What is Adres?</AccordionTrigger>
+      <AccordionContent>
+        Adres is a multi-brand design system for property and education products.
+      </AccordionContent>
+    </AccordionItem>
+  </Accordion>
+reviewedAt: 2026-09-01
+reviewedAgainstContractHash: "79b72715fcd7"
+---
+
+## Usage
+
+`Accordion` stacks expandable sections vertically - reach for it for FAQs,
+collapsible settings groups, or any progressive-disclosure list where only
+the relevant section(s) need to stay expanded. Reach for `DataList` instead
+when the content is flat label/value pairs with nothing to expand, and
+`Table` when the content is genuinely tabular.
+
+`type` (`"single"` or `"multiple"`) is required and changes both behavior and
+the shape of `value`/`defaultValue` (a single string vs. a string array).
+With `type="single"`, also pass `collapsible` if the open item should be
+closeable - without it, exactly one item stays open at all times.
+
+`type`, `collapsible`, and `value` cannot appear in this file's
+machine-checked `canonicalSnippet` above (see the pitfall on why). The real,
+recommended usage:
+
+```tsx
+<Accordion type="single" collapsible className="ax:w-full ax:max-w-md">
+  <AccordionItem value="item-1">
+    <AccordionTrigger>What is Adres?</AccordionTrigger>
+    <AccordionContent>
+      Adres is a multi-brand design system for property and education products.
+    </AccordionContent>
+  </AccordionItem>
+</Accordion>
+```
+
+## Anatomy
+
+| Part | Role |
+| --- | --- |
+| `Accordion` | Root. Holds `type` (single/multiple) and the open value(s). A direct Radix `Root` re-export. |
+| `AccordionItem` | One section. Requires a unique `value` used to identify it as open or closed. |
+| `AccordionTrigger` | The clickable header. Renders inside a Radix heading wrapper and rotates a chevron on open. |
+| `AccordionContent` | The collapsible body. Animates open and closed via `data-state`, respecting reduced-motion. |