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

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Slotted contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,52 @@
-# Temporary Holding Version
+# @slotted/angular
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Angular components for Slotted, a UI library for product web applications.
+
+This package is a `0.x` beta. Its public API changes between beta releases without deprecation.
+
+## Install
+
+```sh
+npm install @slotted/angular @slotted/core @slotted/theme @slotted/themes
+```
+
+`@angular/core`, `@angular/common` and `@angular/forms` `>=22.1.0 <23` are peer dependencies.
+
+## Use
+
+Load one theme once in the application's global stylesheet:
+
+```css
+@layer slotted, app;
+@import '@slotted/themes/default.css';
+```
+
+Every rule the library ships lives in the `slotted` cascade layer; the `@layer` statement places it before the application's own layer ([styling](https://github.com/andrelopes-code/slotted/blob/main/docs/styling.md)). Each component comes from its secondary entry point and attaches to its native element:
+
+```ts
+import { Component } from '@angular/core';
+import { SlButton } from '@slotted/angular/button';
+
+@Component({
+  imports: [SlButton],
+  template: `<button slButton>Save</button>`,
+})
+export class Actions {}
+```
+
+## Language
+
+Components write English when no provider is present. `provideSlotted` sets the locale and the catalogs; `locale` accepts a string or a signal:
+
+```ts
+import { provideSlotted } from '@slotted/angular/i18n';
+import { PT_BR } from '@slotted/core/i18n/pt-BR';
+
+export const appConfig = {
+  providers: [provideSlotted({ locale: 'pt-BR', catalogs: { 'pt-BR': PT_BR } })],
+};
+```
+
+## License
+
+MIT

package/docs/AGENTS.snippet.md

@@ -0,0 +1,10 @@
+## Slotted UI (@slotted/angular)
+
+Before writing or changing UI, read `node_modules/@slotted/angular/docs/index.md`, then the file of each family you use. These files match the installed version: prefer them over prior knowledge of the library.
+
+- Import the standalone directives from the family entry point that each file's Import section shows (`@slotted/angular/<family>`), and place each on the native element its selector names: `<button slButton>`.
+- Load `@slotted/themes/default.css` once, in the global stylesheet.
+- Set `data-slotted-theme="default"` on `<html>`. `data-slotted-scheme` (`light`, `dark`, `high-contrast`) and `data-slotted-density` (`comfortable`, `compact`, `dense`) apply to any element and its descendants.
+- Change a family's appearance through its inputs (`size`, `variant`, `tone` where it has them), not with CSS that targets its parts.
+- Application CSS uses `var(--slotted-*)` tokens for color, spacing and radius, inside a layer declared after the library's: `@layer slotted, app;`.
+- In CSS and tests, select a family by `[data-ui="<family>"]` and its parts by `[data-part="<part>"]`.

package/docs/accordion.json

@@ -0,0 +1,345 @@
+{
+  "family": "accordion",
+  "ui": "accordion",
+  "binding": "angular",
+  "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 { SlAccordion } from '@slotted/angular/accordion';",
+        "selector": "[slAccordion]",
+        "exportAs": "slAccordion"
+      },
+      "anatomy": [
+        {
+          "part": "root",
+          "element": "the element carrying slAccordion",
+          "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 slCollapsibles: a family beside this one, never a part of it, so nothing here selects into their DOM."
+        }
+      ],
+      "api": [
+        {
+          "name": "value",
+          "type": "model<readonly string[]>",
+          "defaultValue": "[]",
+          "appliesTo": "slAccordion",
+          "description": "The set of open panels. A model, so [(value)] is both the value and the write-back — the initial value is the uncontrolled start and a bound signal is the controlled one. Each entry is an slCollapsible’s value"
+        },
+        {
+          "name": "multiple",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "slAccordion, provideAccordionDefaults",
+          "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": "slAccordion, provideAccordionDefaults",
+          "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": "slAccordion, provideAccordionDefaults",
+          "description": "Whether the arrow keys wrap past the ends of the set"
+        },
+        {
+          "name": "size",
+          "type": "'sm' | 'md' | 'lg'",
+          "defaultValue": "md",
+          "appliesTo": "slAccordion, provideAccordionDefaults",
+          "description": "The step every item sits at, and the air between cards under separated"
+        },
+        {
+          "name": "variant",
+          "type": "'plain' | 'ruled' | 'framed' | 'separated'",
+          "defaultValue": "ruled",
+          "appliesTo": "slAccordion, provideAccordionDefaults",
+          "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": "slAccordion, provideAccordionDefaults",
+          "description": "The mark every header carries, handed to each item"
+        },
+        {
+          "name": "togglePlacement",
+          "type": "'end' | 'start'",
+          "defaultValue": "end",
+          "appliesTo": "slAccordion, provideAccordionDefaults",
+          "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": "slAccordion, provideAccordionDefaults",
+          "description": "The heading level every item’s header answers to. A native heading element the consumer wrote is left alone; anything else is given role=\"heading\" and this level"
+        },
+        {
+          "name": "mount",
+          "type": "'active' | 'lazy' | 'eager' | 'until-found'",
+          "defaultValue": "eager",
+          "appliesTo": "slAccordion, provideAccordionDefaults",
+          "description": "When each panel’s content exists, handed to every item"
+        },
+        {
+          "name": "truncate",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "slAccordion, provideAccordionDefaults",
+          "description": "Clips every title to one line instead of letting the row grow"
+        },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "slAccordion",
+          "description": "Reaches every item, and every trigger as the native attribute"
+        }
+      ],
+      "composition": [
+        {
+          "name": "exportAs",
+          "type": "'slAccordion'",
+          "defaultValue": "—",
+          "appliesTo": "slAccordion",
+          "description": "#set=\"slAccordion\" reaches the instance from the template: openAll(), closeAll(), holds(value), isHeld(value) and every resolved axis, with no component class in between"
+        },
+        {
+          "name": "openAll, closeAll",
+          "type": "() => void",
+          "defaultValue": "—",
+          "appliesTo": "the instance",
+          "description": "The two moves an array cannot express while the family owns the array. Both carry the reason programmatic; openAll skips a disabled item, and closeAll leaves one open when requireOpen holds it"
+        },
+        {
+          "name": "provideAccordionDefaults",
+          "type": "(defaults: Partial<AccordionDefaults>) => Provider",
+          "defaultValue": "—",
+          "appliesTo": "an injector",
+          "description": "The ten decisions an application takes once. A set that states any of them itself still wins"
+        },
+        {
+          "name": "the element the directive is on",
+          "type": "any",
+          "defaultValue": "—",
+          "appliesTo": "slAccordion",
+          "description": "The set attaches to the consumer’s own element, so a set of sections can be a section without a render prop existing"
+        }
+      ],
+      "events": [
+        {
+          "name": "valueChange",
+          "payload": "readonly string[]",
+          "when": "The write-back half of the two-way binding. `[(value)]=\"open\"` keeps a signal in step with the set of open panels, which is the form this ecosystem expects."
+        },
+        {
+          "name": "valueChangeRequest",
+          "payload": "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": "openChangeRequest, on each item",
+          "payload": "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": "focusin, keydown, 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 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 slTabs owns it — with the marker, the scrolling list and that pattern’s own keyboard model.",
+        "A nested set is two sets. The arrow ring is scoped to the headers this set owns, so arrowing through an outer accordion never falls into an inner one, and the inner panel stays closed while the outer is open."
+      ]
+    }
+  },
+  "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 input on it, driven by the controls below the canvas. Tab reaches every header; the arrows move between them without opening anything.",
+      "language": "html",
+      "source": "<div slAccordion [(value)]=\"open\">\n  <div slCollapsible value=\"entrega\">\n    <h3 slCollapsibleHeader><button slCollapsibleTrigger>Entrega</button></h3>\n    <div slCollapsiblePanel>Prevista para 12 de setembro.</div>\n  </div>\n  <div slCollapsible value=\"pagamento\">\n    <h3 slCollapsibleHeader><button slCollapsibleTrigger>Pagamento</button></h3>\n    <div slCollapsiblePanel>Cartão de crédito, aprovado.</div>\n  </div>\n</div>\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": "html",
+      "source": "<div slAccordion [multiple]=\"true\" [value]=\"['entrega', 'pagamento']\">…</div>\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": "html",
+      "source": "<div slAccordion [requireOpen]=\"true\" [value]=\"['entrega']\">…</div>\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": "html",
+      "source": "<div slAccordion variant=\"separated\">…</div>\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": "html",
+      "source": "<div slAccordion size=\"lg\" variant=\"separated\">…</div>\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": "html",
+      "source": "<div slAccordion mount=\"lazy\">\n  <div slCollapsible value=\"entrega\">\n    <h3 slCollapsibleHeader><button slCollapsibleTrigger>Entrega</button></h3>\n    <div slCollapsiblePanel>\n      <ng-template slCollapsibleContent>{{ delivery() }}</ng-template>\n    </div>\n  </div>\n</div>\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": "html",
+      "source": "<div slAccordion>\n  <div slCollapsible value=\"nota\" [disabled]=\"true\">…</div>\n</div>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "imperative",
+      "title": "Opening and closing everything",
+      "note": "exportAs reaches the set from the template, so the pair Angular Material ships needs no component class in between and no handle to be passed down.",
+      "language": "html",
+      "source": "<div slAccordion #set=\"slAccordion\" [multiple]=\"true\">…</div>\n\n<button slButton (click)=\"set.openAll()\">Abrir tudo</button>\n<button slButton (click)=\"set.closeAll()\">Fechar 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": "html",
+      "source": "<div slCollapsiblePanel>\n  <div slAccordion variant=\"plain\">…</div>\n</div>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "composition",
+      "title": "Setting it once, and reaching past it",
+      "note": "provideAccordionDefaults carries the ten decisions an application takes once, and a set that states any of them still wins over it.",
+      "language": "ts",
+      "source": "bootstrapApplication(App, {\n  providers: [provideAccordionDefaults({ variant: 'separated', multiple: true })],\n});\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": "html",
+      "source": "<div slAccordion (valueChangeRequest)=\"reason.set($event.reason)\">…</div>\n",
+      "verdict": "excerpt"
+    }
+  ]
+}

package/docs/accordion.md

@@ -0,0 +1,207 @@
+<!-- index: ./index.md -->
+# accordion
+
+`data-ui="accordion"` · Stacked sections that expand and collapse.
+
+## Import
+
+```ts
+import { SlAccordion } from '@slotted/angular/accordion';
+```
+
+Selector: `[slAccordion]` · exportAs: `slAccordion`
+
+## Minimal example
+
+Excerpt — not a complete module
+
+```html
+<div slAccordion [(value)]="open">
+  <div slCollapsible value="entrega">
+    <h3 slCollapsibleHeader><button slCollapsibleTrigger>Entrega</button></h3>
+    <div slCollapsiblePanel>Prevista para 12 de setembro.</div>
+  </div>
+  <div slCollapsible value="pagamento">
+    <h3 slCollapsibleHeader><button slCollapsibleTrigger>Pagamento</button></h3>
+    <div slCollapsiblePanel>Cartão de crédito, aprovado.</div>
+  </div>
+</div>
+```
+
+## Anatomy
+
+| Part | Element | Required |
+| --- | --- | --- |
+| `root` | the element carrying slAccordion | yes |
+
+## Props
+
+| Name | Type | Default | Applies to | Description |
+| --- | --- | --- | --- | --- |
+| `value` | `model<readonly string[]>` | [] | slAccordion | The set of open panels. A model, so [(value)] is both the value and the write-back — the initial value is the uncontrolled start and a bound signal is the controlled one. Each entry is an slCollapsible’s value |
+| `multiple` | `boolean` | false | slAccordion, provideAccordionDefaults | 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 | slAccordion, provideAccordionDefaults | 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 | slAccordion, provideAccordionDefaults | Whether the arrow keys wrap past the ends of the set |
+| `size` | `'sm' \| 'md' \| 'lg'` | md | slAccordion, provideAccordionDefaults | The step every item sits at, and the air between cards under separated |
+| `variant` | `'plain' \| 'ruled' \| 'framed' \| 'separated'` | ruled | slAccordion, provideAccordionDefaults | 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 | slAccordion, provideAccordionDefaults | The mark every header carries, handed to each item |
+| `togglePlacement` | `'end' \| 'start'` | end | slAccordion, provideAccordionDefaults | Which side of the words that mark stands on, handed to each item |
+| `headingLevel` | `'none' \| '1' \| '2' \| '3' \| '4' \| '5' \| '6'` | 3 | slAccordion, provideAccordionDefaults | The heading level every item’s header answers to. A native heading element the consumer wrote is left alone; anything else is given role="heading" and this level |
+| `mount` | `'active' \| 'lazy' \| 'eager' \| 'until-found'` | eager | slAccordion, provideAccordionDefaults | When each panel’s content exists, handed to every item |
+| `truncate` | `boolean` | false | slAccordion, provideAccordionDefaults | Clips every title to one line instead of letting the row grow |
+| `disabled` | `boolean` | false | slAccordion | Reaches every item, and every trigger as the native attribute |
+| `exportAs` | `'slAccordion'` | — | slAccordion | #set="slAccordion" reaches the instance from the template: openAll(), closeAll(), holds(value), isHeld(value) and every resolved axis, with no component class in between |
+| `openAll, closeAll` | `() => void` | — | the instance | The two moves an array cannot express while the family owns the array. Both carry the reason programmatic; openAll skips a disabled item, and closeAll leaves one open when requireOpen holds it |
+| `provideAccordionDefaults` | `(defaults: Partial<AccordionDefaults>) => Provider` | — | an injector | The ten decisions an application takes once. A set that states any of them itself still wins |
+| `the element the directive is on` | `any` | — | slAccordion | The set attaches to the consumer’s own element, so a set of sections can be a section without a render prop existing |
+
+## Events
+
+| Name | Payload | When |
+| --- | --- | --- |
+| `valueChange` | `readonly string[]` | The write-back half of the two-way binding. `[(value)]="open"` keeps a signal in step with the set of open panels, which is the form this ecosystem expects. |
+| `valueChangeRequest` | `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. |
+| `openChangeRequest, on each item` | `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. |
+| `focusin, keydown, 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 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 slTabs owns it — with the marker, the scrolling list and that pattern’s own keyboard model.
+- A nested set is two sets. The arrow ring is scoped to the headers this set owns, so arrowing through an outer accordion never falls into an inner one, and the inner panel stays closed while the outer is open.
+
+## 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
+
+```html
+<div slAccordion [multiple]="true" [value]="['entrega', 'pagamento']">…</div>
+```
+
+### 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
+
+```html
+<div slAccordion [requireOpen]="true" [value]="['entrega']">…</div>
+```
+
+### 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
+
+```html
+<div slAccordion variant="separated">…</div>
+```
+
+### 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
+
+```html
+<div slAccordion size="lg" variant="separated">…</div>
+```
+
+### 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
+
+```html
+<div slAccordion mount="lazy">
+  <div slCollapsible value="entrega">
+    <h3 slCollapsibleHeader><button slCollapsibleTrigger>Entrega</button></h3>
+    <div slCollapsiblePanel>
+      <ng-template slCollapsibleContent>{{ delivery() }}</ng-template>
+    </div>
+  </div>
+</div>
+```
+
+### 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
+
+```html
+<div slAccordion>
+  <div slCollapsible value="nota" [disabled]="true">…</div>
+</div>
+```
+
+### Opening and closing everything
+
+exportAs reaches the set from the template, so the pair Angular Material ships needs no component class in between and no handle to be passed down.
+
+Excerpt — not a complete module
+
+```html
+<div slAccordion #set="slAccordion" [multiple]="true">…</div>
+
+<button slButton (click)="set.openAll()">Abrir tudo</button>
+<button slButton (click)="set.closeAll()">Fechar 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
+
+```html
+<div slCollapsiblePanel>
+  <div slAccordion variant="plain">…</div>
+</div>
+```
+
+### Setting it once, and reaching past it
+
+provideAccordionDefaults carries the ten decisions an application takes once, and a set that states any of them still wins over it.
+
+Excerpt — not a complete module
+
+```ts
+bootstrapApplication(App, {
+  providers: [provideAccordionDefaults({ variant: 'separated', multiple: true })],
+});
+```
+
+### 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
+
+```html
+<div slAccordion (valueChangeRequest)="reason.set($event.reason)">…</div>
+```