@slotted/react 0.0.0-stage → 0.1.0-beta.1

package/dist/docs/accordion.json

@@ -0,0 +1,352 @@
+{
+  "family": "accordion",
+  "ui": "accordion",
+  "binding": "react",
+  "catalog": {
+    "group": "Layout",
+    "summary": "Stacked sections that expand and collapse."
+  },
+  "axes": {
+    "size": [
+      "sm",
+      "md",
+      "lg"
+    ],
+    "variant": [
+      "plain",
+      "ruled",
+      "framed",
+      "separated"
+    ],
+    "indicator": [
+      "chevron",
+      "plus-minus",
+      "none"
+    ],
+    "togglePlacement": [
+      "end",
+      "start"
+    ],
+    "headingLevel": [
+      "none",
+      "1",
+      "2",
+      "3",
+      "4",
+      "5",
+      "6"
+    ],
+    "mount": [
+      "active",
+      "lazy",
+      "eager",
+      "until-found"
+    ]
+  },
+  "members": {
+    "accordion": {
+      "nativeElement": "div",
+      "defaults": {
+        "size": "md",
+        "variant": "ruled",
+        "indicator": "chevron",
+        "togglePlacement": "end",
+        "headingLevel": "3",
+        "mount": "eager",
+        "truncate": false,
+        "multiple": false,
+        "requireOpen": false,
+        "loop": true,
+        "disabled": false
+      },
+      "capabilities": [
+        "selection",
+        "size",
+        "appearance",
+        "disabled",
+        "wiring"
+      ],
+      "states": [
+        "default",
+        "disabled"
+      ],
+      "parts": [
+        "root"
+      ]
+    }
+  },
+  "docs": {
+    "accordion": {
+      "imports": {
+        "source": "import { Accordion, AccordionDefaultsProvider, Collapsible, CollapsibleHeader, CollapsiblePanel, CollapsibleTrigger } from '@slotted/react';"
+      },
+      "anatomy": [
+        {
+          "part": "root",
+          "element": "div, or the element render returns",
+          "required": true,
+          "purpose": "The set. A single column carrying data-ui=\"accordion\", data-size, data-variant and data-disabled, and the chrome that belongs to the set rather than to one item — the rule under the last one, the frame around them all, the air between cards. Its items are Collapsibles: a family beside this one, never a part of it, so nothing here selects into their DOM."
+        }
+      ],
+      "api": [
+        {
+          "name": "value",
+          "type": "readonly string[]",
+          "defaultValue": "—",
+          "appliesTo": "Accordion",
+          "description": "Present means the consumer owns the set of open panels, for the life of the component. Each entry is a Collapsible’s value"
+        },
+        {
+          "name": "defaultValue",
+          "type": "readonly string[]",
+          "defaultValue": "—",
+          "appliesTo": "Accordion",
+          "description": "The set an uncontrolled accordion starts from, read once. A later change to it does not silently become new state"
+        },
+        {
+          "name": "multiple",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "Accordion, AccordionDefaultsProvider",
+          "description": "Whether more than one panel may be open. With it off, opening one closes the one that was, and that panel is told the reason was select"
+        },
+        {
+          "name": "requireOpen",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "Accordion, AccordionDefaultsProvider",
+          "description": "Whether the set refuses to empty. The one open header then carries aria-disabled=\"true\", which is what the pattern asks of an accordion that does not permit its panel to be collapsed"
+        },
+        {
+          "name": "loop",
+          "type": "boolean",
+          "defaultValue": "true",
+          "appliesTo": "Accordion, AccordionDefaultsProvider",
+          "description": "Whether the arrow keys wrap past the ends of the set"
+        },
+        {
+          "name": "size",
+          "type": "'sm' | 'md' | 'lg'",
+          "defaultValue": "md",
+          "appliesTo": "Accordion, AccordionDefaultsProvider",
+          "description": "The step every item sits at, and the air between cards under separated"
+        },
+        {
+          "name": "variant",
+          "type": "'plain' | 'ruled' | 'framed' | 'separated'",
+          "defaultValue": "ruled",
+          "appliesTo": "Accordion, AccordionDefaultsProvider",
+          "description": "How the set is drawn. Each value maps onto the item variant the set hands over: plain to plain, ruled and framed to ruled, separated to framed. The set never selects into an item to draw it"
+        },
+        {
+          "name": "indicator",
+          "type": "'chevron' | 'plus-minus' | 'none'",
+          "defaultValue": "chevron",
+          "appliesTo": "Accordion, AccordionDefaultsProvider",
+          "description": "The mark every header carries, handed to each item"
+        },
+        {
+          "name": "togglePlacement",
+          "type": "'end' | 'start'",
+          "defaultValue": "end",
+          "appliesTo": "Accordion, AccordionDefaultsProvider",
+          "description": "Which side of the words that mark stands on, handed to each item"
+        },
+        {
+          "name": "headingLevel",
+          "type": "'none' | '1' | '2' | '3' | '4' | '5' | '6'",
+          "defaultValue": "3",
+          "appliesTo": "Accordion, AccordionDefaultsProvider",
+          "description": "The heading element every item’s header renders as. 3 is the level the pattern’s own example uses for a set inside a section"
+        },
+        {
+          "name": "mount",
+          "type": "'active' | 'lazy' | 'eager' | 'until-found'",
+          "defaultValue": "eager",
+          "appliesTo": "Accordion, AccordionDefaultsProvider",
+          "description": "When each panel’s content exists, handed to every item"
+        },
+        {
+          "name": "truncate",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "Accordion, AccordionDefaultsProvider",
+          "description": "Clips every title to one line instead of letting the row grow"
+        },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "Accordion",
+          "description": "Reaches every item, and every trigger as the native attribute"
+        }
+      ],
+      "composition": [
+        {
+          "name": "handle",
+          "type": "Ref<AccordionHandle>",
+          "defaultValue": "—",
+          "appliesTo": "Accordion",
+          "description": "openAll() and closeAll(), the two moves an array cannot express while the family owns the array. They are on a handle of their own so ref keeps reaching the element, which is the rule for every other family here"
+        },
+        {
+          "name": "render",
+          "type": "(props) => ReactNode",
+          "defaultValue": "—",
+          "appliesTo": "Accordion",
+          "description": "Substitutes the set’s root and hands it every attribute — a set of sections can be a real section element"
+        },
+        {
+          "name": "ref",
+          "type": "Ref<HTMLElement>",
+          "defaultValue": "—",
+          "appliesTo": "Accordion",
+          "description": "Reaches the element itself, so the platform’s own methods are the platform’s"
+        },
+        {
+          "name": "useAccordion()",
+          "type": "() => AccordionContextValue | undefined",
+          "defaultValue": "—",
+          "appliesTo": "inside Accordion",
+          "description": "What each item reads: the axes the set hands over, whether a value is open, whether it is held open, and toggle(value, reason). It is undefined outside a set rather than a throw, because a Collapsible standing alone is a complete component"
+        },
+        {
+          "name": "AccordionDefaultsProvider",
+          "type": "{ multiple, requireOpen, loop, size, variant, indicator, togglePlacement, headingLevel, mount, truncate }",
+          "defaultValue": "—",
+          "appliesTo": "a subtree",
+          "description": "The ten decisions an application takes once. A set that states any of them itself still wins"
+        }
+      ],
+      "events": [
+        {
+          "name": "onValueChange",
+          "payload": "(value: readonly string[], request: ChangeRequest<readonly string[]>)",
+          "when": "Before the set of open panels moves. The request carries the new set, the set it replaces, the reason (pointer, keyboard, select or programmatic), the originating event, and cancel(), which refuses the move before anything commits. Two sets holding the same values in any order are the same set, so no request is emitted for a move that changes nothing."
+        },
+        {
+          "name": "onOpenChange, on each item",
+          "payload": "(open: boolean, request: ChangeRequest<boolean>)",
+          "when": "Before that one panel moves, and before the set is asked. It is what lets a consumer watch one section without unpacking the array, and cancelling it stops the set from being asked at all."
+        },
+        {
+          "name": "onFocusIn, onKeyDown, on the set",
+          "payload": "the element’s own events",
+          "when": "Whenever the set fires them. Which header has focus is read from event.target.dataset.value, which is why the family ships no separate focus-change output."
+        }
+      ],
+      "accessibility": [
+        "The pattern is the WAI-ARIA APG’s Accordion (w3.org/WAI/ARIA/apg/patterns/accordion/). Its keyboard table is four keys and all four are the platform’s: Enter and Space toggle the focused header because it is a button, and Tab and Shift + Tab move through the set because every focusable element in an accordion is in the page tab sequence. Nothing here writes tabindex.",
+        "ArrowDown, ArrowUp, Home and End are a deliberate departure, and the cost is written down. The arrows were optional guidance until w3c/aria-practices#3434 removed them, and Base UI deprecated its own loopFocus and orientation in the same change; Radix and Ark still ship them and readers have learned them. Here they are additive — they move focus between headers, open nothing, and take no header out of the tab sequence — so a reader who does not know them loses nothing.",
+        "Each header is a real heading at the level headingLevel names, and the trigger is its only element, which is what the pattern requires. The set itself carries no role: a group of headings is already an outline a reader can navigate, and a container announced around it is one more thing to move past.",
+        "requireOpen writes aria-disabled=\"true\" on the one header the set will not let close. The pattern asks for exactly that, and the APG’s own example is the only surveyed implementation that ships it; the header stays focusable and announced rather than leaving the reader’s path.",
+        "A horizontal accordion is not shipped. Radix and Ark both offer one and Base UI has deprecated its own; a horizontally stacked set of sections of which one is open is a tab list, and tabs owns it — with the marker, the scrolling list and that pattern’s own keyboard model.",
+        "Which header has focus is read from the platform: onFocusIn on the set and event.target.dataset.value. Ark ships an output for it, and an output that repeats what the DOM already says is one more thing to keep in step."
+      ]
+    }
+  },
+  "tokens": [
+    "--slotted-accordion-gap",
+    "--slotted-accordion-radius",
+    "--slotted-accordion-rule-color",
+    "--slotted-accordion-surface",
+    "--slotted-border-subtle",
+    "--slotted-border-width-thin",
+    "--slotted-disabled-foreground",
+    "--slotted-radius-md",
+    "--slotted-space-3",
+    "--slotted-space-4",
+    "--slotted-space-5",
+    "--slotted-surface-raised"
+  ],
+  "examples": [
+    {
+      "id": "playground",
+      "title": "Playground",
+      "note": "One set with every axis on it, driven by the controls below the canvas. Tab reaches every header; the arrows move between them without opening anything.",
+      "language": "tsx",
+      "source": "<Accordion defaultValue={['entrega']}>\n  <Collapsible value=\"entrega\">\n    <CollapsibleHeader>\n      <CollapsibleTrigger>Entrega</CollapsibleTrigger>\n    </CollapsibleHeader>\n    <CollapsiblePanel>Prevista para 12 de setembro.</CollapsiblePanel>\n  </Collapsible>\n  <Collapsible value=\"pagamento\">\n    <CollapsibleHeader>\n      <CollapsibleTrigger>Pagamento</CollapsibleTrigger>\n    </CollapsibleHeader>\n    <CollapsiblePanel>Cartão de crédito, aprovado.</CollapsiblePanel>\n  </Collapsible>\n</Accordion>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "multiple",
+      "title": "One panel open, or several",
+      "note": "With multiple off, opening one closes the one that was — and that panel is told it closed with the reason select, not because the reader asked it to.",
+      "language": "tsx",
+      "source": "<Accordion multiple defaultValue={['entrega', 'pagamento']}>\n  …\n</Accordion>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "requireOpen",
+      "title": "A set that refuses to empty",
+      "note": "The one open header carries aria-disabled=\"true\", which is the pattern’s own instruction for an accordion that does not permit its panel to be collapsed. It stays focusable and announced.",
+      "language": "tsx",
+      "source": "<Accordion requireOpen defaultValue={['entrega']}>\n  …\n</Accordion>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "variant",
+      "title": "The four ways a set is drawn",
+      "note": "ruled puts one hairline per seam and closes the stack at the bottom, framed wraps that set in one frame, separated gives each item a card, and plain paints nothing at all.",
+      "language": "tsx",
+      "source": "<Accordion variant=\"separated\">…</Accordion>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "sizes",
+      "title": "The step the set sits at",
+      "note": "The set hands the step to every item, so one word moves the type of every title and the rhythm of every row at once. The gap between cards moves with it.",
+      "language": "tsx",
+      "source": "<Accordion size=\"lg\" variant=\"separated\">\n  …\n</Accordion>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "mount",
+      "title": "When each panel’s content exists",
+      "note": "The set hands the strategy to every item: eager keeps every panel ready to transition, lazy builds one on its first open, and active drops each one as it closes.",
+      "language": "tsx",
+      "source": "<Accordion mount=\"lazy\">…</Accordion>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "states",
+      "title": "Every state the set paints",
+      "note": "A disabled set reaches every trigger as the native attribute, and one item may be out of action inside a live set. Hover and press are the item’s, held back for both.",
+      "language": "tsx",
+      "source": "<Accordion>\n  <Collapsible value=\"entrega\" disabled>\n    …\n  </Collapsible>\n</Accordion>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "imperative",
+      "title": "Opening and closing everything",
+      "note": "A controlled consumer already owns the array and needs neither of these; an uncontrolled one has no array to set, which is the case the handle exists for.",
+      "language": "tsx",
+      "source": "const set = useRef<AccordionHandle>(null);\n\n<Accordion handle={set} multiple>\n  …\n</Accordion>;\n\n<Button onClick={() => set.current?.openAll()}>Abrir tudo</Button>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "content",
+      "title": "Content the set did not choose",
+      "note": "A hundred sections, a title longer than its row, and an accordion nested inside another’s panel — which stays closed, because nothing in the family is a descendant rule.",
+      "language": "tsx",
+      "source": "<CollapsiblePanel>\n  <Accordion variant=\"plain\">…</Accordion>\n</CollapsiblePanel>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "composition",
+      "title": "Setting it once, and reaching past it",
+      "note": "The provider carries the ten decisions an application takes once, and a set that states any of them still wins; render substitutes the set’s own root.",
+      "language": "tsx",
+      "source": "<AccordionDefaultsProvider variant=\"separated\" multiple>\n  <Accordion>…</Accordion>\n</AccordionDefaultsProvider>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "keyboard",
+      "title": "The pattern’s table, and the four keys beside it",
+      "note": "Every header is a Tab stop, which is what the pattern requires; the arrows, Home and End move focus on top of that sequence and open nothing at all.",
+      "language": "tsx",
+      "source": "<Accordion onValueChange={(value, request) => report(request.reason)}>…</Accordion>;\n",
+      "verdict": "excerpt"
+    }
+  ]
+}

package/dist/docs/accordion.md

@@ -0,0 +1,214 @@
+<!-- index: ./index.md -->
+# accordion
+
+`data-ui="accordion"` · Stacked sections that expand and collapse.
+
+## Import
+
+```tsx
+import { Accordion, AccordionDefaultsProvider, Collapsible, CollapsibleHeader, CollapsiblePanel, CollapsibleTrigger } from '@slotted/react';
+```
+
+## Minimal example
+
+Excerpt — not a complete module
+
+```tsx
+<Accordion defaultValue={['entrega']}>
+  <Collapsible value="entrega">
+    <CollapsibleHeader>
+      <CollapsibleTrigger>Entrega</CollapsibleTrigger>
+    </CollapsibleHeader>
+    <CollapsiblePanel>Prevista para 12 de setembro.</CollapsiblePanel>
+  </Collapsible>
+  <Collapsible value="pagamento">
+    <CollapsibleHeader>
+      <CollapsibleTrigger>Pagamento</CollapsibleTrigger>
+    </CollapsibleHeader>
+    <CollapsiblePanel>Cartão de crédito, aprovado.</CollapsiblePanel>
+  </Collapsible>
+</Accordion>;
+```
+
+## Anatomy
+
+| Part | Element | Required |
+| --- | --- | --- |
+| `root` | div, or the element render returns | yes |
+
+## Props
+
+| Name | Type | Default | Applies to | Description |
+| --- | --- | --- | --- | --- |
+| `value` | `readonly string[]` | — | Accordion | Present means the consumer owns the set of open panels, for the life of the component. Each entry is a Collapsible’s value |
+| `defaultValue` | `readonly string[]` | — | Accordion | The set an uncontrolled accordion starts from, read once. A later change to it does not silently become new state |
+| `multiple` | `boolean` | false | Accordion, AccordionDefaultsProvider | Whether more than one panel may be open. With it off, opening one closes the one that was, and that panel is told the reason was select |
+| `requireOpen` | `boolean` | false | Accordion, AccordionDefaultsProvider | Whether the set refuses to empty. The one open header then carries aria-disabled="true", which is what the pattern asks of an accordion that does not permit its panel to be collapsed |
+| `loop` | `boolean` | true | Accordion, AccordionDefaultsProvider | Whether the arrow keys wrap past the ends of the set |
+| `size` | `'sm' \| 'md' \| 'lg'` | md | Accordion, AccordionDefaultsProvider | The step every item sits at, and the air between cards under separated |
+| `variant` | `'plain' \| 'ruled' \| 'framed' \| 'separated'` | ruled | Accordion, AccordionDefaultsProvider | How the set is drawn. Each value maps onto the item variant the set hands over: plain to plain, ruled and framed to ruled, separated to framed. The set never selects into an item to draw it |
+| `indicator` | `'chevron' \| 'plus-minus' \| 'none'` | chevron | Accordion, AccordionDefaultsProvider | The mark every header carries, handed to each item |
+| `togglePlacement` | `'end' \| 'start'` | end | Accordion, AccordionDefaultsProvider | Which side of the words that mark stands on, handed to each item |
+| `headingLevel` | `'none' \| '1' \| '2' \| '3' \| '4' \| '5' \| '6'` | 3 | Accordion, AccordionDefaultsProvider | The heading element every item’s header renders as. 3 is the level the pattern’s own example uses for a set inside a section |
+| `mount` | `'active' \| 'lazy' \| 'eager' \| 'until-found'` | eager | Accordion, AccordionDefaultsProvider | When each panel’s content exists, handed to every item |
+| `truncate` | `boolean` | false | Accordion, AccordionDefaultsProvider | Clips every title to one line instead of letting the row grow |
+| `disabled` | `boolean` | false | Accordion | Reaches every item, and every trigger as the native attribute |
+| `handle` | `Ref<AccordionHandle>` | — | Accordion | openAll() and closeAll(), the two moves an array cannot express while the family owns the array. They are on a handle of their own so ref keeps reaching the element, which is the rule for every other family here |
+| `render` | `(props) => ReactNode` | — | Accordion | Substitutes the set’s root and hands it every attribute — a set of sections can be a real section element |
+| `ref` | `Ref<HTMLElement>` | — | Accordion | Reaches the element itself, so the platform’s own methods are the platform’s |
+| `useAccordion()` | `() => AccordionContextValue \| undefined` | — | inside Accordion | What each item reads: the axes the set hands over, whether a value is open, whether it is held open, and toggle(value, reason). It is undefined outside a set rather than a throw, because a Collapsible standing alone is a complete component |
+| `AccordionDefaultsProvider` | `{ multiple, requireOpen, loop, size, variant, indicator, togglePlacement, headingLevel, mount, truncate }` | — | a subtree | The ten decisions an application takes once. A set that states any of them itself still wins |
+
+## Events
+
+| Name | Payload | When |
+| --- | --- | --- |
+| `onValueChange` | `(value: readonly string[], request: ChangeRequest<readonly string[]>)` | Before the set of open panels moves. The request carries the new set, the set it replaces, the reason (pointer, keyboard, select or programmatic), the originating event, and cancel(), which refuses the move before anything commits. Two sets holding the same values in any order are the same set, so no request is emitted for a move that changes nothing. |
+| `onOpenChange, on each item` | `(open: boolean, request: ChangeRequest<boolean>)` | Before that one panel moves, and before the set is asked. It is what lets a consumer watch one section without unpacking the array, and cancelling it stops the set from being asked at all. |
+| `onFocusIn, onKeyDown, on the set` | `the element’s own events` | Whenever the set fires them. Which header has focus is read from event.target.dataset.value, which is why the family ships no separate focus-change output. |
+
+## Axes and defaults
+
+| Axis | Values | Default |
+| --- | --- | --- |
+| `size` | `sm`, `md`, `lg` | `md` |
+| `variant` | `plain`, `ruled`, `framed`, `separated` | `ruled` |
+| `indicator` | `chevron`, `plus-minus`, `none` | `chevron` |
+| `togglePlacement` | `end`, `start` | `end` |
+| `headingLevel` | `none`, `1`, `2`, `3`, `4`, `5`, `6` | `3` |
+| `mount` | `active`, `lazy`, `eager`, `until-found` | `eager` |
+
+## Rules
+
+- The pattern is the WAI-ARIA APG’s Accordion (w3.org/WAI/ARIA/apg/patterns/accordion/). Its keyboard table is four keys and all four are the platform’s: Enter and Space toggle the focused header because it is a button, and Tab and Shift + Tab move through the set because every focusable element in an accordion is in the page tab sequence. Nothing here writes tabindex.
+- ArrowDown, ArrowUp, Home and End are a deliberate departure, and the cost is written down. The arrows were optional guidance until w3c/aria-practices#3434 removed them, and Base UI deprecated its own loopFocus and orientation in the same change; Radix and Ark still ship them and readers have learned them. Here they are additive — they move focus between headers, open nothing, and take no header out of the tab sequence — so a reader who does not know them loses nothing.
+- Each header is a real heading at the level headingLevel names, and the trigger is its only element, which is what the pattern requires. The set itself carries no role: a group of headings is already an outline a reader can navigate, and a container announced around it is one more thing to move past.
+- requireOpen writes aria-disabled="true" on the one header the set will not let close. The pattern asks for exactly that, and the APG’s own example is the only surveyed implementation that ships it; the header stays focusable and announced rather than leaving the reader’s path.
+- A horizontal accordion is not shipped. Radix and Ark both offer one and Base UI has deprecated its own; a horizontally stacked set of sections of which one is open is a tab list, and tabs owns it — with the marker, the scrolling list and that pattern’s own keyboard model.
+- Which header has focus is read from the platform: onFocusIn on the set and event.target.dataset.value. Ark ships an output for it, and an output that repeats what the DOM already says is one more thing to keep in step.
+
+## Tokens
+
+`--slotted-accordion-gap`, `--slotted-accordion-radius`, `--slotted-accordion-rule-color`, `--slotted-accordion-surface`, `--slotted-border-subtle`, `--slotted-border-width-thin`, `--slotted-disabled-foreground`, `--slotted-radius-md`, `--slotted-space-3`, `--slotted-space-4`, `--slotted-space-5`, `--slotted-surface-raised`
+
+## Examples
+
+### One panel open, or several
+
+With multiple off, opening one closes the one that was — and that panel is told it closed with the reason select, not because the reader asked it to.
+
+Excerpt — not a complete module
+
+```tsx
+<Accordion multiple defaultValue={['entrega', 'pagamento']}>
+  …
+</Accordion>;
+```
+
+### A set that refuses to empty
+
+The one open header carries aria-disabled="true", which is the pattern’s own instruction for an accordion that does not permit its panel to be collapsed. It stays focusable and announced.
+
+Excerpt — not a complete module
+
+```tsx
+<Accordion requireOpen defaultValue={['entrega']}>
+  …
+</Accordion>;
+```
+
+### The four ways a set is drawn
+
+ruled puts one hairline per seam and closes the stack at the bottom, framed wraps that set in one frame, separated gives each item a card, and plain paints nothing at all.
+
+Excerpt — not a complete module
+
+```tsx
+<Accordion variant="separated">…</Accordion>;
+```
+
+### The step the set sits at
+
+The set hands the step to every item, so one word moves the type of every title and the rhythm of every row at once. The gap between cards moves with it.
+
+Excerpt — not a complete module
+
+```tsx
+<Accordion size="lg" variant="separated">
+  …
+</Accordion>;
+```
+
+### When each panel’s content exists
+
+The set hands the strategy to every item: eager keeps every panel ready to transition, lazy builds one on its first open, and active drops each one as it closes.
+
+Excerpt — not a complete module
+
+```tsx
+<Accordion mount="lazy">…</Accordion>;
+```
+
+### Every state the set paints
+
+A disabled set reaches every trigger as the native attribute, and one item may be out of action inside a live set. Hover and press are the item’s, held back for both.
+
+Excerpt — not a complete module
+
+```tsx
+<Accordion>
+  <Collapsible value="entrega" disabled>
+    …
+  </Collapsible>
+</Accordion>;
+```
+
+### Opening and closing everything
+
+A controlled consumer already owns the array and needs neither of these; an uncontrolled one has no array to set, which is the case the handle exists for.
+
+Excerpt — not a complete module
+
+```tsx
+const set = useRef<AccordionHandle>(null);
+
+<Accordion handle={set} multiple>
+  …
+</Accordion>;
+
+<Button onClick={() => set.current?.openAll()}>Abrir tudo</Button>;
+```
+
+### Content the set did not choose
+
+A hundred sections, a title longer than its row, and an accordion nested inside another’s panel — which stays closed, because nothing in the family is a descendant rule.
+
+Excerpt — not a complete module
+
+```tsx
+<CollapsiblePanel>
+  <Accordion variant="plain">…</Accordion>
+</CollapsiblePanel>;
+```
+
+### Setting it once, and reaching past it
+
+The provider carries the ten decisions an application takes once, and a set that states any of them still wins; render substitutes the set’s own root.
+
+Excerpt — not a complete module
+
+```tsx
+<AccordionDefaultsProvider variant="separated" multiple>
+  <Accordion>…</Accordion>
+</AccordionDefaultsProvider>;
+```
+
+### The pattern’s table, and the four keys beside it
+
+Every header is a Tab stop, which is what the pattern requires; the arrows, Home and End move focus on top of that sequence and open nothing at all.
+
+Excerpt — not a complete module
+
+```tsx
+<Accordion onValueChange={(value, request) => report(request.reason)}>…</Accordion>;
+```