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

package/docs/action-bar.md

@@ -0,0 +1,364 @@
+<!-- index: ./index.md -->
+# action-bar
+
+`data-ui="action-bar"` · Row of actions that overflow into a menu.
+
+## Import
+
+```ts
+import { SlActionBar, SlActionBarAction, SlActionBarActions, SlActionBarOverflow, SlActionBarSeparator, SlActionBarStatus, provideActionBarDefaults } from '@slotted/angular/action-bar';
+```
+
+Selector: `[slActionBar], [slActionBarStatus], [slActionBarActions], [slActionBarAction], [slActionBarSeparator], sl-action-bar-overflow` · exportAs: `slActionBar, slActionBarStatus, slActionBarActions, slActionBarAction, slActionBarSeparator, slActionBarOverflow`
+
+## Minimal example
+
+Excerpt — not a complete module
+
+```html
+<footer slActionBar aria-label="Ações do pedido">
+  <div slActionBarStatus>Rascunho guardado às 14:07</div>
+  <div slActionBarActions>
+    <div slActionBarAction>
+      <button slButton variant="ghost" tone="secondary" type="button">Cancelar</button>
+    </div>
+    <div slActionBarAction>
+      <button slButton type="button">Submeter para aprovação</button>
+    </div>
+  </div>
+</footer>
+```
+
+## Anatomy
+
+| Part | Element | Required |
+| --- | --- | --- |
+| `root` | the consumer’s own element carrying slActionBar, with role="group" | yes |
+| `status` | an element carrying slActionBarStatus | no |
+| `actions` | an element carrying slActionBarActions | yes |
+| `action` | an element carrying slActionBarAction | no |
+| `separator` | an element carrying slActionBarSeparator, with role="separator" | no |
+| `overflow` | sl-action-bar-overflow, whose host is display: contents | no |
+
+## Props
+
+| Name | Type | Default | Applies to | Description |
+| --- | --- | --- | --- | --- |
+| `variant` | `'plain' \| 'raised'` | plain | slActionBar, provideActionBarDefaults | Whether the bar paints a ground and a rule of its own. plain is for a bar that already stands on one — a page footer, a card footer; raised is the bar with nothing under it |
+| `size` | `'sm' \| 'md' \| 'lg'` | md | slActionBar, provideActionBarDefaults | The bar’s own inset, gap, minimum height and rule, from the control scales. It also reaches the buttons inside through the Button family’s own defaults token, so a button that states its own size still wins |
+| `align` | `'end' \| 'start' \| 'center'` | end | slActionBar, provideActionBarDefaults | Where the run sits in the room left after the status. end is the anchor that keeps the action that confirms still, and it is the default for that reason |
+| `sticky` | `boolean` | false | slActionBar, provideActionBarDefaults | Whether the bar sticks to the end of the region that scrolls. Sticky and never fixed: it takes its own height in the flow, and its offset is whatever a page publishes as --slotted-page-sticky-bottom, so it stops above that page’s footer rather than covering it |
+| `present` | `boolean` | true | slActionBar | Whether the bar belongs on screen at all — a bulk bar while there is a selection, a save bar while there are unsaved changes. It enters from below and leaves the same way, and is painted out with display:none once it has gone, which takes it out of the accessibility tree and the tab order alike. A directive cannot remove the host the consumer wrote: a consumer who wants the node itself gone writes @if around it and gives up the exit |
+| `overflowChange` | `EventEmitter<number>` | — | slActionBar | How many actions gave way, once per change. There is no two-way binding over the collapsed set: it is a measurement, and a consumer who owned it could assert that a bar fits when the layout says it does not |
+| `slActionBarAction` | `'pinned' \| 'high' \| 'low' \| 'hide' \| 'always'` | low with a counterpart, pinned without | slActionBarAction | The selector’s own value is the rank. pinned never goes; high goes after low and hide; low is the first into the surface; hide goes first and is not offered in the surface at all; always is never in the bar. A rank that needs a counterpart and has none behaves as pinned, so a consumer error leaves the control on the bar |
+| `slActionBarActionCounterpart` | `TemplateRef<unknown>` | — | slActionBarAction | What the action becomes in the surface, as an ng-template rendered only while the action is in it — so a menu item that is never reached builds nothing. An action that declares none is pinned: pinning is the absence of a counterpart rather than a second input |
+| `label` | `string \| ((hidden: number) => string)` | counted | sl-action-bar-overflow | The accessible name of the control that holds what did not fit. The default counts — "3 more actions" — because three dots say nothing about how much is behind them. An aria-label written on the host wins over it |
+| `align, side, size` | `MenuAlign \| MenuSide \| MenuSize` | from the Menu defaults | sl-action-bar-overflow | Where the surface sits against the trigger, and its own measure. Everything else about the layer an application sets once with provideMenuDefaults |
+| `aria-label` | `string` | — | slActionBar | The name of the bar. The family writes none: only the page knows which task the bar finishes. aria-labelledby works the same way |
+| `role` | `string` | group | slActionBar | group, because there is no roving focus to declare — ARIA makes toolbar a subclass of group, and the subclass is what is asserted when there is focus management. A role written on the host is read with HostAttributeToken and survives, but a consumer who wants the composite wants the Toolbar family |
+| `the directive form` | `an attribute on the consumer’s own element` | — | every part but the overflow | The bar is a footer, the status a p, the run a div — the family adds behaviour to the element the page already wanted rather than inserting one of its own |
+| `provideActionBarDefaults` | `{ variant, size, align, sticky }` | — | an injector | The four decisions an application takes once. A bar that states any of them itself still wins |
+| `exportAs` | `'slActionBar' and one per part` | — | a template | Reaches the instance from the template — surfaceUnits() for what the menu holds, and refresh() to measure again after something the DOM cannot report |
+| `ng-template` | `TemplateRef` | — | slActionBarActionCounterpart | The counterpart is lazy: the outlet renders it only while the action is in the surface, and it is given an injector carrying the menu this component draws — so slMenuItem finds the surface it is actually inside |
+| `fieldset` | `the platform’s own element` | — | around an slActionBar | How a bar is taken out of action. A container cannot disable controls it does not own, and a bar that refused interaction while its controls still looked operable is the defect the state precedence exists to prevent |
+| `OnPush and zoneless` | `signals throughout` | — | the whole family | Every public value is an input signal and every derived one a computed; the measurement writes a signal and nothing calls markForCheck to compensate |
+
+## Axes and defaults
+
+| Axis | Values | Default |
+| --- | --- | --- |
+| `variant` | `plain`, `raised` | `plain` |
+| `size` | `sm`, `md`, `lg` | `md` |
+| `align` | `end`, `start`, `center` | `end` |
+| `sticky` | `true`, `false` | `false` |
+
+## Rules
+
+- There is no APG pattern for a bar of actions, and the closest official guidance is the Toolbar pattern (w3.org/WAI/ARIA/apg/patterns/toolbar/). This family departs from it deliberately: there is no roving focus, so Tab reaches every action in the order the author wrote it. The controls here are the page’s own form actions, and a reader walking a form expects to arrive at Cancel and then at Save; a composite would make the whole bar one tab stop and put Save behind an arrow key that announces nothing. The cost is written down — a bar of ten icon-only actions is ten tab stops, and that bar is the Toolbar family.
+- The role follows the departure. ARIA 1.2 makes toolbar a subclass of group, and the subclass is what is asserted when there is focus management to declare; without it, group is what is true. The bar names itself with the consumer’s aria-label or aria-labelledby, because only the page knows which task it finishes — and a role written on the host is read with HostAttributeToken before the host binding, so what the consumer wrote survives.
+- The only keyboard this family owns is the overflow trigger’s, and it is the Menu family’s: Enter, Space and ArrowDown open the surface, Escape closes it and returns focus to the trigger. Focus is moved onto the trigger before the action holding it is hidden, so a reader who was on the fifth button lands on the control that now holds it rather than on the document body.
+- The trigger’s accessible name carries the count rather than the mark, so a reader hears “3 more actions” instead of three dots — and an application in another language replaces the sentence rather than translating an ellipsis. The count in the DOM, data-collapsed, is the same fact for a stylesheet or a test.
+- A bar out of action is a fieldset around it: the platform disables every control inside and takes them out of the tab order with it. The family writes no data-disabled and declares no disabled state, because it does not own the capability — a container that refused interaction while its controls still looked operable is the defect the state precedence exists to prevent.
+- A bar that is not present is painted out with display:none once its exit has finished, which takes it out of the accessibility tree and out of the tab order together. Carbon’s batch bar writes aria-hidden on its root instead and leaves the buttons inside reachable by Tab, which puts focus in a region the screen reader announces as absent. Appearing never moves focus either: the bar is not a dialog, and taking focus from a reader who is ticking boxes is exactly the jump a selection bar must not make.
+- Under forced colours the rule between two runs keeps its own paint, because a background flattens to Canvas and would take the boundary between a destructive action and a frequent one with it. Everything else the reader sees belongs to the controls the consumer placed, and each keeps its own states, its own focus ring and its own contrast.
+
+## Tokens
+
+`--slotted-action-bar-background`, `--slotted-action-bar-border-color`, `--slotted-action-bar-gap`, `--slotted-action-bar-inset-block`, `--slotted-action-bar-inset-inline`, `--slotted-action-bar-overflow-active-background`, `--slotted-action-bar-overflow-color`, `--slotted-action-bar-overflow-hover-background`, `--slotted-action-bar-overflow-hover-color`, `--slotted-action-bar-overflow-open-background`, `--slotted-action-bar-separator-color`, `--slotted-action-bar-status-color`, `--slotted-border-strong`, `--slotted-border-subtle`, `--slotted-border-width-thin`, `--slotted-control-font-family`, `--slotted-control-font-size-lg`, `--slotted-control-font-size-md`, `--slotted-control-font-size-sm`, `--slotted-control-gap-lg`, `--slotted-control-gap-md`, `--slotted-control-gap-sm`, `--slotted-control-height-lg`, `--slotted-control-height-md`, `--slotted-control-height-sm`, `--slotted-control-icon-size-lg`, `--slotted-control-icon-size-md`, `--slotted-control-icon-size-sm`, `--slotted-control-radius`, `--slotted-control-transition-duration`, `--slotted-control-transition-easing`, `--slotted-disabled-foreground`, `--slotted-focus-ring-color`, `--slotted-focus-ring-offset`, `--slotted-focus-ring-width`, `--slotted-space-1`, `--slotted-space-2`, `--slotted-space-3`, `--slotted-space-4`, `--slotted-space-5`, `--slotted-space-6`, `--slotted-surface`, `--slotted-target-min`, `--slotted-text`, `--slotted-text-muted`, `--slotted-tone-secondary-subtle-active`, `--slotted-tone-secondary-subtle-hover`, `--slotted-z-index-sticky`
+
+## Examples
+
+### Which action gives way first
+
+Narrow the stage and watch the order: “Pré-visualizar” goes without a trace, “Duplicar” becomes a menu row, “Devolver” follows it, and “Aprovar” never moves. Position decides nothing here — the rank does.
+
+Excerpt — not a complete module
+
+```html
+<div slActionBarActions>
+  <!-- Gives way before every other rank, and is not offered in the menu. -->
+  <div slActionBarAction="hide">
+    <button slButton variant="ghost" type="button">Pré-visualizar</button>
+  </div>
+  <!-- low is the default for an action that declares a counterpart. -->
+  <div slActionBarAction [slActionBarActionCounterpart]="duplicate">
+    <button slButton variant="ghost" type="button">Duplicar</button>
+  </div>
+  <div slActionBarAction="high" [slActionBarActionCounterpart]="send">
+    <button slButton variant="outline" type="button">Devolver</button>
+  </div>
+  <!-- No counterpart, so it is pinned: it has nowhere to go. -->
+  <div slActionBarAction>
+    <button slButton type="button">Aprovar</button>
+  </div>
+  <sl-action-bar-overflow />
+</div>
+
+<ng-template #duplicate><button slMenuItem type="button">Duplicar</button></ng-template>
+<ng-template #send><button slMenuItem type="button">Devolver</button></ng-template>
+```
+
+### What is left over, behind one control
+
+The surface holds what gave way and what was never in the bar, in the bar’s own order, with a rule wherever one of the bar’s own rules divided two of them. The trigger’s name is the count, not three dots.
+
+Excerpt — not a complete module
+
+```html
+<div slActionBarActions>
+  <div slActionBarAction="always" [slActionBarActionCounterpart]="history">
+    <button slButton variant="ghost" type="button">Ver histórico</button>
+  </div>
+  <div slActionBarAction>
+    <button slButton type="button">Aprovar</button>
+  </div>
+  <sl-action-bar-overflow [label]="count" />
+</div>
+
+<ng-template #history><button slMenuItem type="button">Ver histórico</button></ng-template>
+```
+
+### The action that confirms does not move
+
+Four bars on one stage: no message, a short one, one that fills the bar, and a secondary action removed by a permission filter. Read the right edge — “Aprovar” is on the same pixel in all four.
+
+Excerpt — not a complete module
+
+```html
+<!-- The run carries margin-inline-start: auto, so what grows or leaves
+     moves what is *before* the last action and never the last action. -->
+<footer slActionBar aria-label="Ações do pedido">
+  @if (dirty()) {
+    <div slActionBarStatus>{{ message() }}</div>
+  }
+  <div slActionBarActions>
+    @if (canReturn()) {
+      <div slActionBarAction>
+        <button slButton variant="ghost" type="button">Devolver</button>
+      </div>
+    }
+    <div slActionBarAction>
+      <button slButton [loading]="saving()" type="button">Aprovar</button>
+    </div>
+  </div>
+</footer>
+```
+
+### A destructive action, and the rule beside it
+
+The first bar keeps “Anular fatura” away from the two frequent actions with the bar’s own rule. The second is the case nobody writes down: the action that confirms *is* the destructive one, and the rule is what a hand about to press Manter reads.
+
+Excerpt — not a complete module
+
+```html
+<div slActionBarActions>
+  <div slActionBarAction>
+    <button slButton variant="ghost" tone="danger" type="button">Anular fatura</button>
+  </div>
+  <div slActionBarSeparator></div>
+  <div slActionBarAction>
+    <button slButton variant="ghost" tone="secondary" type="button">Cancelar</button>
+  </div>
+  <div slActionBarAction>
+    <button slButton type="button">Guardar</button>
+  </div>
+</div>
+```
+
+### The sentence at the start
+
+Three things a product actually puts there — a timestamp, a status indicator and an inline message — and the same actions under each. The slot takes what room is left and shortens itself rather than pushing.
+
+Excerpt — not a complete module
+
+```html
+<div slActionBarStatus>
+  <span slStatusIndicator status="warning">3 campos por preencher</span>
+</div>
+```
+
+### The bar a selection brings
+
+Table owns the selection and its count; this family supplies the place, the ranks and the entry. Toggle the selection and watch the bar arrive from below rather than appear — and be painted out when it goes, rather than staying reachable by Tab.
+
+Excerpt — not a complete module
+
+```html
+<footer
+  slActionBar
+  aria-label="Ações sobre a seleção"
+  variant="raised"
+  [present]="selected().length > 0"
+>
+  <div slActionBarStatus>
+    <strong>{{ selected().length }} faturas selecionadas</strong>
+    <button slButton size="sm" variant="ghost" tone="accent" type="button" (click)="selectAll()">
+      Selecionar as {{ total() }} do filtro
+    </button>
+  </div>
+  <div slActionBarActions>
+    <div slActionBarAction [slActionBarActionCounterpart]="exported">
+      <button slButton variant="ghost" type="button">Exportar</button>
+    </div>
+    <div slActionBarSeparator></div>
+    <div slActionBarAction>
+      <button slButton tone="danger" type="button">Anular</button>
+    </div>
+  </div>
+</footer>
+```
+
+### Stuck to the end of what scrolls
+
+Scroll the panel: the bar stays at the bottom and the last line of content scrolls up to it rather than under it. Inside a page it reads --slotted-page-sticky-bottom and stops above that page’s own footer instead of covering it.
+
+Excerpt — not a complete module
+
+```html
+<footer slActionBar aria-label="Ações do formulário" variant="raised" sticky>
+  <div slActionBarActions>
+    <div slActionBarAction>
+      <button slButton type="button">Guardar</button>
+    </div>
+  </div>
+</footer>
+```
+
+### Where the run sits
+
+end is the anchor and the default; start puts the run beside the status; center places it in what is left. The field disagrees about this one — Salesforce centres a docked footer, Polaris ends it, Fluent starts it — so it is an axis.
+
+Excerpt — not a complete module
+
+```html
+<footer slActionBar aria-label="Ações" align="center" variant="raised"></footer>
+```
+
+### The step the bar sits at
+
+The size moves the bar’s own inset, gap, minimum height and rule — and it reaches the buttons through the Button family’s own defaults, so a bar does not make a consumer repeat size on every control. A button that states its own still wins.
+
+Excerpt — not a complete module
+
+```html
+<footer slActionBar aria-label="Ações" size="sm" variant="raised">
+  <div slActionBarActions>
+    <!-- No size here: the bar hands its own down. -->
+    <div slActionBarAction>
+      <button slButton variant="ghost" type="button">Cancelar</button>
+    </div>
+    <div slActionBarAction>
+      <button slButton size="lg" type="button">Guardar</button>
+    </div>
+  </div>
+</footer>
+```
+
+### Whether the bar paints a ground
+
+plain is the default and paints nothing — a bar inside a page footer is already standing on a ground that family painted. raised takes the surface and one hairline at the top, which is the bar with no page around it: a drawer, a dialog, a card.
+
+Excerpt — not a complete module
+
+```html
+<footer slActionBar aria-label="Ações" variant="plain"></footer>
+<footer slActionBar aria-label="Ações" variant="raised"></footer>
+```
+
+### The bar on a phone
+
+Below 24rem of container the run becomes a full-width column with the action that confirms on top, and the collapse stops running — a column has room for everything, so there is no menu. The DOM order does not change, so Tab still reads the form’s order.
+
+Excerpt — not a complete module
+
+```html
+<!-- The breakpoint lives in the stylesheet's container query, and the
+     directive reads back the property that query raises rather than
+     holding a copy of the number. -->
+<footer slActionBar aria-label="Ações do pedido" variant="raised">
+  <div slActionBarActions>
+    <div slActionBarAction>
+      <button slButton variant="ghost" type="button">Descartar alterações</button>
+    </div>
+    <div slActionBarAction>
+      <button slButton type="button">Guardar alterações</button>
+    </div>
+  </div>
+</footer>
+```
+
+### Content the family did not choose
+
+A German label twice the length of the Portuguese one, a reference number with no spaces in it, and an action mid-flight. The bar never truncates a label: it wraps, or the action goes to the menu where there is a whole row for it.
+
+Excerpt — not a complete module
+
+```html
+<footer slActionBar aria-label="Bestellaktionen" variant="raised">
+  <div slActionBarStatus>Entwurf um 14:07 gespeichert</div>
+  <div slActionBarActions>
+    <div slActionBarAction>
+      <button slButton variant="ghost" type="button">Änderungen verwerfen</button>
+    </div>
+    <div slActionBarAction>
+      <button slButton loading type="button">Zur Genehmigung einreichen</button>
+    </div>
+  </div>
+</footer>
+```
+
+### Setting it once, and standing beside other families
+
+provideActionBarDefaults carries the four decisions an application takes once. The bar is what goes inside a page footer, inside a drawer and under a table — and every part is a directive on the consumer’s own element.
+
+Excerpt — not a complete module
+
+```ts
+bootstrapApplication(App, {
+  providers: [provideActionBarDefaults({ size: 'sm', variant: 'plain' })],
+});
+
+// The bar is a directive, so the element is the page's own:
+// <footer slActionBar aria-label="Ações do pedido">…</footer>
+```
+
+### The keyboard, and what a reader hears
+
+Tab reaches each action in the order the author wrote it. The bar is role="group" with the consumer’s own name; a fieldset around it is how it goes out of action, and the platform takes the controls out of the tab order with it.
+
+Excerpt — not a complete module
+
+```html
+<fieldset [disabled]="submitting()">
+  <footer slActionBar aria-label="Ações do pedido">
+    <div slActionBarActions>
+      <div slActionBarAction>
+        <button slButton variant="ghost" type="button">Cancelar</button>
+      </div>
+      <div slActionBarAction>
+        <button slButton type="button">Guardar</button>
+      </div>
+    </div>
+  </footer>
+</fieldset>
+```

package/docs/action-sheet.json

@@ -0,0 +1,210 @@
+{
+  "family": "action-sheet",
+  "ui": "action-sheet",
+  "binding": "angular",
+  "catalog": {
+    "group": "Overlays",
+    "summary": "Bottom sheet of short actions for touch."
+  },
+  "axes": {
+    "modal": [
+      true,
+      false
+    ],
+    "mount": [
+      "active",
+      "lazy",
+      "eager"
+    ],
+    "escape": [
+      "close",
+      "none"
+    ],
+    "outsidePress": [
+      "close",
+      "none"
+    ],
+    "back": [
+      "close",
+      "none"
+    ],
+    "closeOnSelect": [
+      true,
+      false
+    ]
+  },
+  "members": {
+    "action-sheet": {
+      "nativeElement": "div",
+      "role": "dialog",
+      "defaults": {
+        "modal": true,
+        "mount": "active",
+        "escape": "close",
+        "outsidePress": "close",
+        "back": "close",
+        "closeOnSelect": true
+      },
+      "capabilities": [
+        "open",
+        "content",
+        "appearance",
+        "disabled",
+        "loading",
+        "wiring"
+      ],
+      "states": [
+        "default",
+        "hover",
+        "active",
+        "focus-visible",
+        "open",
+        "disabled",
+        "loading"
+      ],
+      "parts": [
+        "root",
+        "trigger",
+        "header",
+        "title",
+        "message",
+        "list",
+        "group",
+        "group-label",
+        "item",
+        "icon",
+        "label",
+        "description",
+        "separator",
+        "footer",
+        "cancel"
+      ]
+    }
+  },
+  "docs": {
+    "imports": {
+      "imports": null,
+      "anatomy": [],
+      "api": [],
+      "composition": [],
+      "events": [],
+      "accessibility": []
+    },
+    "anatomy": {
+      "imports": null,
+      "anatomy": [],
+      "api": [],
+      "composition": [],
+      "events": [],
+      "accessibility": []
+    },
+    "scenes": {
+      "imports": null,
+      "anatomy": [],
+      "api": [],
+      "composition": [],
+      "events": [],
+      "accessibility": []
+    },
+    "events": {
+      "imports": null,
+      "anatomy": [],
+      "api": [],
+      "composition": [],
+      "events": [],
+      "accessibility": []
+    },
+    "api": {
+      "imports": null,
+      "anatomy": [],
+      "api": [],
+      "composition": [],
+      "events": [],
+      "accessibility": []
+    },
+    "composition": {
+      "imports": null,
+      "anatomy": [],
+      "api": [],
+      "composition": [],
+      "events": [],
+      "accessibility": []
+    },
+    "accessibility": {
+      "imports": null,
+      "anatomy": [],
+      "api": [],
+      "composition": [],
+      "events": [],
+      "accessibility": []
+    },
+    "snippets": {
+      "imports": null,
+      "anatomy": [],
+      "api": [],
+      "composition": [],
+      "events": [],
+      "accessibility": []
+    }
+  },
+  "tokens": [
+    "--slotted-action-sheet-footer-surface",
+    "--slotted-action-sheet-highlight",
+    "--slotted-action-sheet-highlight-active",
+    "--slotted-action-sheet-inline-size",
+    "--slotted-action-sheet-rule-color",
+    "--slotted-border-subtle",
+    "--slotted-border-width-thin",
+    "--slotted-control-border-color",
+    "--slotted-control-border-width",
+    "--slotted-control-font-family",
+    "--slotted-control-gap-lg",
+    "--slotted-control-height-lg",
+    "--slotted-control-padding-inline-lg",
+    "--slotted-control-radius",
+    "--slotted-control-shadow",
+    "--slotted-control-surface",
+    "--slotted-control-transition-duration",
+    "--slotted-control-transition-easing",
+    "--slotted-disabled-background",
+    "--slotted-disabled-foreground",
+    "--slotted-duration-short",
+    "--slotted-easing-standard",
+    "--slotted-focus-ring-color",
+    "--slotted-focus-ring-offset",
+    "--slotted-focus-ring-width",
+    "--slotted-font-family-heading",
+    "--slotted-font-family-sans",
+    "--slotted-font-size-lg",
+    "--slotted-font-size-md",
+    "--slotted-font-size-sm",
+    "--slotted-font-weight-semibold",
+    "--slotted-line-height-md",
+    "--slotted-line-height-sm",
+    "--slotted-space-1",
+    "--slotted-space-2",
+    "--slotted-space-4",
+    "--slotted-space-5",
+    "--slotted-space-6",
+    "--slotted-surface-sunken",
+    "--slotted-text",
+    "--slotted-text-muted",
+    "--slotted-tone-accent-subtle-active",
+    "--slotted-tone-accent-surface",
+    "--slotted-tone-accent-text",
+    "--slotted-tone-danger-subtle-active",
+    "--slotted-tone-danger-surface",
+    "--slotted-tone-danger-text",
+    "--slotted-tone-secondary-subtle-active",
+    "--slotted-tone-secondary-subtle-hover",
+    "--slotted-tone-secondary-surface",
+    "--slotted-tone-secondary-text",
+    "--slotted-tone-success-subtle-active",
+    "--slotted-tone-success-surface",
+    "--slotted-tone-success-text",
+    "--slotted-tone-warning-subtle-active",
+    "--slotted-tone-warning-surface",
+    "--slotted-tone-warning-text"
+  ],
+  "examples": []
+}

package/docs/action-sheet.md

@@ -0,0 +1,19 @@
+<!-- index: ./index.md -->
+# action-sheet
+
+`data-ui="action-sheet"` · Bottom sheet of short actions for touch.
+
+## Axes and defaults
+
+| Axis | Values | Default |
+| --- | --- | --- |
+| `modal` | `true`, `false` | `true` |
+| `mount` | `active`, `lazy`, `eager` | `active` |
+| `escape` | `close`, `none` | `close` |
+| `outsidePress` | `close`, `none` | `close` |
+| `back` | `close`, `none` | `close` |
+| `closeOnSelect` | `true`, `false` | `true` |
+
+## Tokens
+
+`--slotted-action-sheet-footer-surface`, `--slotted-action-sheet-highlight`, `--slotted-action-sheet-highlight-active`, `--slotted-action-sheet-inline-size`, `--slotted-action-sheet-rule-color`, `--slotted-border-subtle`, `--slotted-border-width-thin`, `--slotted-control-border-color`, `--slotted-control-border-width`, `--slotted-control-font-family`, `--slotted-control-gap-lg`, `--slotted-control-height-lg`, `--slotted-control-padding-inline-lg`, `--slotted-control-radius`, `--slotted-control-shadow`, `--slotted-control-surface`, `--slotted-control-transition-duration`, `--slotted-control-transition-easing`, `--slotted-disabled-background`, `--slotted-disabled-foreground`, `--slotted-duration-short`, `--slotted-easing-standard`, `--slotted-focus-ring-color`, `--slotted-focus-ring-offset`, `--slotted-focus-ring-width`, `--slotted-font-family-heading`, `--slotted-font-family-sans`, `--slotted-font-size-lg`, `--slotted-font-size-md`, `--slotted-font-size-sm`, `--slotted-font-weight-semibold`, `--slotted-line-height-md`, `--slotted-line-height-sm`, `--slotted-space-1`, `--slotted-space-2`, `--slotted-space-4`, `--slotted-space-5`, `--slotted-space-6`, `--slotted-surface-sunken`, `--slotted-text`, `--slotted-text-muted`, `--slotted-tone-accent-subtle-active`, `--slotted-tone-accent-surface`, `--slotted-tone-accent-text`, `--slotted-tone-danger-subtle-active`, `--slotted-tone-danger-surface`, `--slotted-tone-danger-text`, `--slotted-tone-secondary-subtle-active`, `--slotted-tone-secondary-subtle-hover`, `--slotted-tone-secondary-surface`, `--slotted-tone-secondary-text`, `--slotted-tone-success-subtle-active`, `--slotted-tone-success-surface`, `--slotted-tone-success-text`, `--slotted-tone-warning-subtle-active`, `--slotted-tone-warning-surface`, `--slotted-tone-warning-text`