@slotted/react 0.1.0-beta.2 → 0.1.0-beta.4

package/dist/docs/table.json

@@ -12,6 +12,10 @@
       "ruled",
       "framed"
     ],
+    "edges": [
+      "inset",
+      "flush"
+    ],
     "striped": [
       true,
       false
@@ -71,6 +75,7 @@
       "nativeElement": "div",
       "defaults": {
         "variant": "ruled",
+        "edges": "inset",
         "striped": false,
         "stickyHeader": false,
         "stickyTo": "scroll",
@@ -107,6 +112,7 @@
         "active",
         "focus-visible",
         "selected",
+        "current",
         "expanded",
         "disabled",
         "loading"
@@ -139,6 +145,11 @@
         "selection",
         "expander",
         "detail",
+        "group-row",
+        "group-header",
+        "group-content",
+        "group-start",
+        "group-end",
         "empty",
         "loader",
         "footer"
@@ -148,7 +159,7 @@
   "docs": {
     "table": {
       "imports": {
-        "source": "import {\n  Table,\n  TableBody,\n  TableCaption,\n  TableCell,\n  TableColumnActions,\n  TableColumnHeader,\n  TableContent,\n  TableDefaultsProvider,\n  TableDetail,\n  TableEmpty,\n  TableExpander,\n  TableFooter,\n  TableHead,\n  TableLoader,\n  TableRow,\n  TableRowHeader,\n  TableSelect,\n  TableSelectAll,\n  TableSort,\n  TableSummary,\n} from '@slotted/react';"
+        "source": "import {\n  Table,\n  TableBody,\n  TableCaption,\n  TableCell,\n  TableColumnActions,\n  TableColumnHeader,\n  TableContent,\n  TableDefaultsProvider,\n  TableDetail,\n  TableEmpty,\n  TableExpander,\n  TableFooter,\n  TableGroupRow,\n  TableHead,\n  TableLoader,\n  TableRow,\n  TableRowHeader,\n  TableSelect,\n  TableSelectAll,\n  TableSort,\n  TableSummary,\n} from '@slotted/react';"
       },
       "anatomy": [
         {
@@ -319,6 +330,36 @@
           "required": false,
           "purpose": "The open row detail, one cell spanning every column. It is not rendered while it is closed."
         },
+        {
+          "part": "group-row",
+          "element": "tr",
+          "required": false,
+          "purpose": "The band that opens a group of rows: a day of a ledger with its net at the end. One header cell spans every column, and sticky holds the band under the header while its rows scroll past."
+        },
+        {
+          "part": "group-header",
+          "element": "th",
+          "required": false,
+          "purpose": "The one cell of the band, scope=\"rowgroup\", spanning the columns of the table. It names the rows of its own tbody, so a grouped listing writes one body per group."
+        },
+        {
+          "part": "group-content",
+          "element": "div",
+          "required": false,
+          "purpose": "The line inside the band that sets the name at the start and the end content at the end."
+        },
+        {
+          "part": "group-start",
+          "element": "span",
+          "required": false,
+          "purpose": "The name of the group."
+        },
+        {
+          "part": "group-end",
+          "element": "span",
+          "required": false,
+          "purpose": "The end of the band, from the end prop: the total or net of the group, in tabular figures."
+        },
         {
           "part": "empty",
           "element": "td",
@@ -382,6 +423,13 @@
           "appliesTo": "Table",
           "description": "How much of a frame the set is given"
         },
+        {
+          "name": "edges",
+          "type": "'inset' | 'flush'",
+          "defaultValue": "inset",
+          "appliesTo": "Table",
+          "description": "Whether the first and the last column keep the cell inset on their outer side. flush lines a plain or ruled table up with the heading around it, leaving the theme’s --slotted-table-edge-inset (0 unless set); a framed table ignores it. Sticky and selection columns keep their own offsets"
+        },
         {
           "name": "striped",
           "type": "boolean",
@@ -557,6 +605,34 @@
           "appliesTo": "TableRow",
           "description": "The record position in the whole set, written as aria-rowindex"
         },
+        {
+          "name": "current",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "TableRow",
+          "description": "The record open elsewhere on the page, a detail pane beside the table, written as aria-current"
+        },
+        {
+          "name": "interactive",
+          "type": "boolean",
+          "defaultValue": "true with onAction",
+          "appliesTo": "TableRow",
+          "description": "Paints the row as a thing the pointer presses"
+        },
+        {
+          "name": "onAction",
+          "type": "(event) => void",
+          "defaultValue": "—",
+          "appliesTo": "TableRow",
+          "description": "A click anywhere in the row that lands on no control of its own; the first link or button in the row is the keyboard way in"
+        },
+        {
+          "name": "end",
+          "type": "ReactNode",
+          "defaultValue": "—",
+          "appliesTo": "TableGroupRow",
+          "description": "What stands at the end of the band: the total or net of the group"
+        },
         {
           "name": "column",
           "type": "string",
@@ -599,6 +675,13 @@
           "appliesTo": "the three cell parts and both selection cells",
           "description": "Which edge the column is pinned to while the table scrolls past it"
         },
+        {
+          "name": "sticky",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "TableGroupRow",
+          "description": "Holds the band under the header while its rows scroll past"
+        },
         {
           "name": "stickyOffset",
           "type": "string",
@@ -728,15 +811,20 @@
     "--slotted-table-color-muted",
     "--slotted-table-column-actions-size",
     "--slotted-table-control-radius",
+    "--slotted-table-edge-inset",
     "--slotted-table-font-family",
     "--slotted-table-font-size",
     "--slotted-table-gap",
+    "--slotted-table-group-color",
+    "--slotted-table-group-sticky-offset",
+    "--slotted-table-group-surface",
     "--slotted-table-header-surface",
     "--slotted-table-header-surface-hover",
     "--slotted-table-icon-size",
     "--slotted-table-radius",
     "--slotted-table-row-color-selected",
     "--slotted-table-row-min-block-size",
+    "--slotted-table-row-surface-current",
     "--slotted-table-row-surface-hover",
     "--slotted-table-row-surface-selected",
     "--slotted-table-row-surface-selected-hover",
@@ -754,6 +842,7 @@
     "--slotted-tone-accent-subtle-hover",
     "--slotted-tone-accent-surface",
     "--slotted-tone-accent-text",
+    "--slotted-tone-secondary-subtle-active",
     "--slotted-tone-secondary-subtle-hover",
     "--slotted-z-index-sticky"
   ],
@@ -881,7 +970,7 @@
     {
       "id": "sticky",
       "title": "A header, a summary and a column that stay",
-      "note": "stickyHeader holds the head against the top of the scroller and stickyFooter holds the summary against the bottom of it, so the total is on screen at the first row and the last. stickyTo says which box that is: this table own scroller, or whatever scrolls outside it. A pinned column darkens its edge exactly while something is hidden under it, and all of it mirrors in a right-to-left document.",
+      "note": "stickyHeader holds the head against the top of the scroller and stickyFooter holds the summary against the bottom of it, so the total is on screen at the first row and the last. stickyTo says which box that is: this table own scroller, or whatever scrolls outside it. Under stickyTo=\"page\" the head stops at --slotted-table-sticky-offset, which a page binds to its own chrome; a table inside a scrolling box of its own sets that token to 0 on the box. A pinned column darkens its edge exactly while something is hidden under it, and all of it mirrors in a right-to-left document.",
       "language": "tsx",
       "source": "import {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumnHeader,\n  TableContent,\n  TableHead,\n  TableRow,\n  TableRowHeader,\n  TableSummary,\n} from '@slotted/react/table';\n\nconst USD = new Intl.NumberFormat('en-US', { currency: 'USD', style: 'currency' });\n\nconst CUSTOMERS = [\n  'Alfreds Futterkiste',\n  \"Bon app'\",\n  'Ernst Handel',\n  'Folk och fä HB',\n  'Hanari Carnes',\n  'Island Trading',\n  'QUICK-Stop',\n  'Wartian Herkku',\n];\nconst WAREHOUSES = ['Reno', 'Columbus', 'Savannah'];\n\nconst ORDERS = Array.from({ length: 30 }, (_, index) => ({\n  id: `SO-${10400 + index}`,\n  customer: CUSTOMERS[index % CUSTOMERS.length],\n  warehouse: WAREHOUSES[index % WAREHOUSES.length],\n  total: 180 + ((index * 397) % 2400),\n}));\n\nconst TOTAL = ORDERS.reduce((sum, order) => sum + order.total, 0);\n\nexport default function TableSticky() {\n  return (\n    <Table columns={4} stickyFooter stickyHeader>\n      <TableContent\n        aria-label=\"September orders\"\n        scrollProps={{ style: { maxBlockSize: '20rem' } }}\n      >\n        <TableHead>\n          <TableRow>\n            <TableColumnHeader>Order</TableColumnHeader>\n            <TableColumnHeader>Customer</TableColumnHeader>\n            <TableColumnHeader>Warehouse</TableColumnHeader>\n            <TableColumnHeader numeric>Total</TableColumnHeader>\n          </TableRow>\n        </TableHead>\n        <TableBody>\n          {ORDERS.map((order) => (\n            <TableRow key={order.id} value={order.id}>\n              <TableRowHeader text=\"nowrap\">{order.id}</TableRowHeader>\n              <TableCell>{order.customer}</TableCell>\n              <TableCell>{order.warehouse}</TableCell>\n              <TableCell numeric>{USD.format(order.total)}</TableCell>\n            </TableRow>\n          ))}\n        </TableBody>\n        <TableSummary>\n          <TableRow>\n            <TableCell colSpan={3}>{ORDERS.length} orders</TableCell>\n            <TableCell numeric>{USD.format(TOTAL)}</TableCell>\n          </TableRow>\n        </TableSummary>\n      </TableContent>\n    </Table>\n  );\n}\n",
       "verdict": "example"

package/dist/docs/table.md

@@ -19,6 +19,7 @@ import {
   TableEmpty,
   TableExpander,
   TableFooter,
+  TableGroupRow,
   TableHead,
   TableLoader,
   TableRow,
@@ -160,6 +161,11 @@ export default function TableBasic() {
 | `selection` | th or td | no |
 | `expander` | button | no |
 | `detail` | tr | no |
+| `group-row` | tr | no |
+| `group-header` | th | no |
+| `group-content` | div | no |
+| `group-start` | span | no |
+| `group-end` | span | no |
 | `empty` | td | no |
 | `loader` | tbody | no |
 
@@ -174,6 +180,7 @@ export default function TableBasic() {
 | `expanded` | `readonly string[]` | — | Table | The rows whose detail is open. Present means you own it. |
 | `defaultExpanded` | `readonly string[]` | [] | Table | The details an uncontrolled table starts with |
 | `variant` | `'plain' \| 'ruled' \| 'framed'` | ruled | Table | How much of a frame the set is given |
+| `edges` | `'inset' \| 'flush'` | inset | Table | Whether the first and the last column keep the cell inset on their outer side. flush lines a plain or ruled table up with the heading around it, leaving the theme’s --slotted-table-edge-inset (0 unless set); a framed table ignores it. Sticky and selection columns keep their own offsets |
 | `striped` | `boolean` | false | Table | A tinted ground on every second record |
 | `stickyHeader` | `boolean` | false | Table | Whether the header stays while the body scrolls |
 | `stickyFooter` | `boolean` | false | Table | Whether the summary rows stay while the body scrolls. It pins the tfoot and not the footer bar, which never scrolls. |
@@ -199,12 +206,17 @@ export default function TableBasic() {
 | `value` | `string` | — | TableRow | The record key the selection and the expansion are held by |
 | `disabled` | `boolean` | false | TableRow | A record the reader may not choose; it leaves the set the header covers |
 | `rowIndex` | `number` | — | TableRow | The record position in the whole set, written as aria-rowindex |
+| `current` | `boolean` | false | TableRow | The record open elsewhere on the page, a detail pane beside the table, written as aria-current |
+| `interactive` | `boolean` | true with onAction | TableRow | Paints the row as a thing the pointer presses |
+| `onAction` | `(event) => void` | — | TableRow | A click anywhere in the row that lands on no control of its own; the first link or button in the row is the keyboard way in |
+| `end` | `ReactNode` | — | TableGroupRow | What stands at the end of the band: the total or net of the group |
 | `column` | `string` | — | TableColumnHeader, TableSort | The column key the sort descriptor names |
 | `align` | `'start' \| 'center' \| 'end'` | start | the three cell parts | Which edge the value stands on, resolved logically |
 | `numeric` | `boolean` | false | the three cell parts | Tabular figures, and the end edge unless align says otherwise |
 | `blockAlign` | `'start' \| 'center' \| 'end'` | center | the three cell parts and both selection cells | Where this cell content sits in its row, overriding the table own cellAlign |
 | `text` | `'wrap' \| 'truncate' \| 'nowrap'` | wrap | the three cell parts | What a value longer than its column does |
 | `sticky` | `'start' \| 'end'` | start | the three cell parts and both selection cells | Which edge the column is pinned to while the table scrolls past it |
+| `sticky` | `boolean` | false | TableGroupRow | Holds the band under the header while its rows scroll past |
 | `stickyOffset` | `string` | 0 | the three cell parts and both selection cells | Where the pinned column stops, as a CSS length. Two columns pinned to the same edge need the second to state how wide the first is — beside a selection column that is --slotted-table-selection-size, which is 3rem. |
 | `colSpan` | `number` | — | TableDetail, TableEmpty | How many columns the part spans, defaulting to the table own count |
 | `render` | `(props) => ReactNode` | — | Table, TableRow, TableSort | Substitutes the rendered element, keeping every data attribute |
@@ -227,6 +239,7 @@ export default function TableBasic() {
 | Axis | Values | Default |
 | --- | --- | --- |
 | `variant` | `plain`, `ruled`, `framed` | `ruled` |
+| `edges` | `inset`, `flush` | `inset` |
 | `striped` | `true`, `false` | `false` |
 | `stickyHeader` | `true`, `false` | `false` |
 | `stickyFooter` | `true`, `false` | `false` |
@@ -254,7 +267,7 @@ export default function TableBasic() {
 
 ## Tokens
 
-`--slotted-border-strong`, `--slotted-border-subtle`, `--slotted-border-width-thin`, `--slotted-control-font-family`, `--slotted-control-font-size-md`, `--slotted-control-gap-md`, `--slotted-control-height-md`, `--slotted-control-icon-size-md`, `--slotted-control-padding-inline-md`, `--slotted-control-transition-duration`, `--slotted-control-transition-easing`, `--slotted-disabled-foreground`, `--slotted-duration-short`, `--slotted-easing-standard`, `--slotted-focus-ring-color`, `--slotted-focus-ring-offset`, `--slotted-focus-ring-width`, `--slotted-font-size-xs`, `--slotted-font-weight-medium`, `--slotted-font-weight-regular`, `--slotted-font-weight-semibold`, `--slotted-ground`, `--slotted-line-height-md`, `--slotted-radius-md`, `--slotted-radius-sm`, `--slotted-shadow-xs`, `--slotted-space-2`, `--slotted-space-5`, `--slotted-space-9`, `--slotted-surface`, `--slotted-table-border-color`, `--slotted-table-border-color-strong`, `--slotted-table-border-width`, `--slotted-table-cell-padding-block`, `--slotted-table-cell-padding-inline`, `--slotted-table-color`, `--slotted-table-color-muted`, `--slotted-table-column-actions-size`, `--slotted-table-control-radius`, `--slotted-table-font-family`, `--slotted-table-font-size`, `--slotted-table-gap`, `--slotted-table-header-surface`, `--slotted-table-header-surface-hover`, `--slotted-table-icon-size`, `--slotted-table-radius`, `--slotted-table-row-color-selected`, `--slotted-table-row-min-block-size`, `--slotted-table-row-surface-hover`, `--slotted-table-row-surface-selected`, `--slotted-table-row-surface-selected-hover`, `--slotted-table-row-surface-stripe`, `--slotted-table-selection-size`, `--slotted-table-shadow`, `--slotted-table-sticky-inset`, `--slotted-table-sticky-offset`, `--slotted-table-sticky-offset-end`, `--slotted-table-surface`, `--slotted-target-comfortable`, `--slotted-target-min`, `--slotted-text`, `--slotted-text-muted`, `--slotted-tone-accent-subtle-hover`, `--slotted-tone-accent-surface`, `--slotted-tone-accent-text`, `--slotted-tone-secondary-subtle-hover`, `--slotted-z-index-sticky`
+`--slotted-border-strong`, `--slotted-border-subtle`, `--slotted-border-width-thin`, `--slotted-control-font-family`, `--slotted-control-font-size-md`, `--slotted-control-gap-md`, `--slotted-control-height-md`, `--slotted-control-icon-size-md`, `--slotted-control-padding-inline-md`, `--slotted-control-transition-duration`, `--slotted-control-transition-easing`, `--slotted-disabled-foreground`, `--slotted-duration-short`, `--slotted-easing-standard`, `--slotted-focus-ring-color`, `--slotted-focus-ring-offset`, `--slotted-focus-ring-width`, `--slotted-font-size-xs`, `--slotted-font-weight-medium`, `--slotted-font-weight-regular`, `--slotted-font-weight-semibold`, `--slotted-ground`, `--slotted-line-height-md`, `--slotted-radius-md`, `--slotted-radius-sm`, `--slotted-shadow-xs`, `--slotted-space-2`, `--slotted-space-5`, `--slotted-space-9`, `--slotted-surface`, `--slotted-table-border-color`, `--slotted-table-border-color-strong`, `--slotted-table-border-width`, `--slotted-table-cell-padding-block`, `--slotted-table-cell-padding-inline`, `--slotted-table-color`, `--slotted-table-color-muted`, `--slotted-table-column-actions-size`, `--slotted-table-control-radius`, `--slotted-table-edge-inset`, `--slotted-table-font-family`, `--slotted-table-font-size`, `--slotted-table-gap`, `--slotted-table-group-color`, `--slotted-table-group-sticky-offset`, `--slotted-table-group-surface`, `--slotted-table-header-surface`, `--slotted-table-header-surface-hover`, `--slotted-table-icon-size`, `--slotted-table-radius`, `--slotted-table-row-color-selected`, `--slotted-table-row-min-block-size`, `--slotted-table-row-surface-current`, `--slotted-table-row-surface-hover`, `--slotted-table-row-surface-selected`, `--slotted-table-row-surface-selected-hover`, `--slotted-table-row-surface-stripe`, `--slotted-table-selection-size`, `--slotted-table-shadow`, `--slotted-table-sticky-inset`, `--slotted-table-sticky-offset`, `--slotted-table-sticky-offset-end`, `--slotted-table-surface`, `--slotted-target-comfortable`, `--slotted-target-min`, `--slotted-text`, `--slotted-text-muted`, `--slotted-tone-accent-subtle-hover`, `--slotted-tone-accent-surface`, `--slotted-tone-accent-text`, `--slotted-tone-secondary-subtle-active`, `--slotted-tone-secondary-subtle-hover`, `--slotted-z-index-sticky`
 
 ## Examples
 

package/dist/docs/tabs.examples.md

@@ -377,7 +377,7 @@ export default function TabsOverflow() {
 
 ### A view a router can deep-link to
 
-href makes the control an anchor, so the destination is real: a plain click selects, and a click carrying a modifier key is left to the browser, which opens the view in a new browser tab.
+href makes the control an anchor, so the destination is real: a plain click selects, and a click carrying a modifier key is left to the browser, which opens the view in a new browser tab. usePressSelection paints the press before the route renders: the tab is selected at once, and the navigation runs after the frame that shows it.
 
 Example
 

package/dist/docs/tabs.json

@@ -221,6 +221,13 @@
           "appliesTo": "Tabs, TabsDefaultsProvider",
           "description": "When a panel’s content exists: only while its tab is selected (active), from its first selection on (lazy), or from the start (eager). A panel that is not selected carries the hidden attribute."
         },
+        {
+          "name": "deferPanels",
+          "type": "boolean",
+          "defaultValue": "true under mount=\"active\", false otherwise",
+          "appliesTo": "Tabs",
+          "description": "Whether the panels render from useDeferredValue(value). The selected tab paints in the click’s frame and its panel renders after it; until it is ready the panel on screen stays, with aria-busy and data-pending. A panel that suspends keeps the shown one when its Suspense boundary is outside Tabs; a boundary inside the new panel shows its own fallback."
+        },
         {
           "name": "loop",
           "type": "boolean",
@@ -319,7 +326,7 @@
           "type": "() => TabsContextValue",
           "defaultValue": "—",
           "appliesTo": "inside Tabs",
-          "description": "What a tab and a panel read: the value, the mount strategy, the ids, and select(value, reason, source) for a view the page changes on its own. It throws outside Tabs instead of rendering a control that looks right and does nothing."
+          "description": "What a tab and a panel read: the value, shownValue (the value the panels render, deferred under deferPanels), the mount strategy, the ids, and select(value, reason, source) for a view the page changes on its own. A region rendered outside the panels — a page header’s tab with controls= — renders from shownValue. It throws outside Tabs instead of rendering a control that looks right and does nothing."
         },
         {
           "name": "TabsDefaultsProvider",
@@ -354,6 +361,7 @@
         }
       ],
       "accessibility": [
+        "Selecting a tab never waits for its panel: keep value urgent and render the region from useDeferredValue(value), which deferPanels does for the panels and useTabs().shownValue hands a region outside them. Wrapping the setter in startTransition delays the marker too.",
         "Tabs implements the WAI-ARIA APG Tabs pattern (w3.org/WAI/ARIA/apg/patterns/tabs/) and its whole keyboard table: Tab enters the list on the selected tab and leaves to the panel, the arrow keys of the list’s direction move focus and wrap at both ends, Home and End reach the first and last enabled tab, Enter and Space select under manual activation, and Delete closes a dismissible tab. A horizontal list does not listen for Up and Down, so those keys keep scrolling the page while focus is in the list.",
         "After a dismissal, focus follows the pattern: the next tab, the previous one when the closed tab was last, or the list itself when no tab is left, which is why the list carries tabindex=\"-1\". The selection follows the same rule, with the reason remove.",
         "The close button is outside the arrow-key sequence and inside the accessibility tree. A screen reader reaches and presses it; from the keyboard, Delete closes the focused tab, and the tab announces the key with aria-keyshortcuts. In the arrow-key sequence, close buttons would double the presses it takes to cross the list.",
@@ -528,7 +536,7 @@
     {
       "id": "links",
       "title": "A view a router can deep-link to",
-      "note": "href makes the control an anchor, so the destination is real: a plain click selects, and a click carrying a modifier key is left to the browser, which opens the view in a new browser tab.",
+      "note": "href makes the control an anchor, so the destination is real: a plain click selects, and a click carrying a modifier key is left to the browser, which opens the view in a new browser tab. usePressSelection paints the press before the route renders: the tab is selected at once, and the navigation runs after the frame that shows it.",
       "language": "tsx",
       "source": "import { Tab, TabList, TabPanel, Tabs } from '@slotted/react/tabs';\nimport { Text } from '@slotted/react/typography';\n\nconst VIEWS = [\n  { value: 'summary', label: 'Summary', panel: 'Harbor & Pine, $1,240.00, Net 30.' },\n  { value: 'items', label: 'Items', panel: '3 lines: shelves, brackets and an assembly kit.' },\n  { value: 'shipments', label: 'Shipments', panel: 'Atlas Freight, expected September 12.' },\n];\n\nexport default function TabsLinks() {\n  return (\n    <Tabs defaultValue=\"summary\">\n      <TabList aria-label=\"Order SO-1187\">\n        {VIEWS.map((view) => (\n          <Tab key={view.value} href={`#order-${view.value}`} value={view.value}>\n            {view.label}\n          </Tab>\n        ))}\n      </TabList>\n      {VIEWS.map((view) => (\n        <TabPanel key={view.value} value={view.value}>\n          <Text size=\"sm\">{view.panel}</Text>\n        </TabPanel>\n      ))}\n    </Tabs>\n  );\n}\n",
       "verdict": "example"

package/dist/docs/tabs.md

@@ -127,6 +127,7 @@ export default function TabsBasic() {
 | `track` | `'line' \| 'none'` | line | Tabs, TabsDefaultsProvider | Whether the list draws the line its tabs stand on. none is for a list placed on a line the page already draws, such as a card header’s edge or a table’s rule, where two hairlines a pixel apart read as one smudge. The marker then sits on the item’s own edge, on the line that is there. |
 | `fit` | `'auto' \| 'equal'` | auto | Tabs, TabsDefaultsProvider | Whether each tab is as wide as its label or takes an equal share of the line. equal cuts a label longer than its share with an ellipsis; auto never cuts a label and scrolls the list instead. |
 | `mount` | `'active' \| 'lazy' \| 'eager'` | active | Tabs, TabsDefaultsProvider | When a panel’s content exists: only while its tab is selected (active), from its first selection on (lazy), or from the start (eager). A panel that is not selected carries the hidden attribute. |
+| `deferPanels` | `boolean` | true under mount="active", false otherwise | Tabs | Whether the panels render from useDeferredValue(value). The selected tab paints in the click’s frame and its panel renders after it; until it is ready the panel on screen stays, with aria-busy and data-pending. A panel that suspends keeps the shown one when its Suspense boundary is outside Tabs; a boundary inside the new panel shows its own fallback. |
 | `loop` | `boolean` | true | Tabs, TabsDefaultsProvider | Whether the arrow keys wrap past the ends of the list. |
 | `disabled` | `boolean` | false | Tabs | Disables every tab with the native attribute, which also makes the arrow keys skip them, and dims the track. |
 | `value, on Tab` | `string` | — | Tab | What this tab selects, and what the value of Tabs holds. It reaches the DOM as data-value, which the keyboard reads. |
@@ -140,7 +141,7 @@ export default function TabsBasic() {
 | `value, on TabPanel` | `string` | — | TabPanel | The tab this panel belongs to. Tabs wires the pair with ids generated from the value. |
 | `render` | `(props) => ReactNode` | — | Tabs, TabList, Tab, TabPanel, TabActions | Replaces the root element of any of the five and passes it every attribute, so a list can be a nav and Tabs a section. The tab control itself cannot be replaced: it holds the role, the value and the keyboard, and href covers the substitution that matters. |
 | `ref` | `Ref<HTMLElement>` | — | Tab, TabPanel, Tabs | On Tab, reaches the tab’s own control, so focus() and click() are the element’s own methods and no imperative handle stands in for them. |
-| `useTabs()` | `() => TabsContextValue` | — | inside Tabs | What a tab and a panel read: the value, the mount strategy, the ids, and select(value, reason, source) for a view the page changes on its own. It throws outside Tabs instead of rendering a control that looks right and does nothing. |
+| `useTabs()` | `() => TabsContextValue` | — | inside Tabs | What a tab and a panel read: the value, shownValue (the value the panels render, deferred under deferPanels), the mount strategy, the ids, and select(value, reason, source) for a view the page changes on its own. A region rendered outside the panels — a page header’s tab with controls= — renders from shownValue. It throws outside Tabs instead of rendering a control that looks right and does nothing. |
 | `TabsDefaultsProvider` | `{ activation, orientation, size, variant, track, fit, mount, loop }` | — | a subtree | The eight settings an application decides once. A value set on one Tabs still wins. |
 | `aria-label, on TabList` | `string` | — | TabList | The name of the set of views. Tabs writes no name of its own; aria-labelledby works the same way. |
 
@@ -166,6 +167,7 @@ export default function TabsBasic() {
 
 ## Rules
 
+- Selecting a tab never waits for its panel: keep value urgent and render the region from useDeferredValue(value), which deferPanels does for the panels and useTabs().shownValue hands a region outside them. Wrapping the setter in startTransition delays the marker too.
 - Tabs implements the WAI-ARIA APG Tabs pattern (w3.org/WAI/ARIA/apg/patterns/tabs/) and its whole keyboard table: Tab enters the list on the selected tab and leaves to the panel, the arrow keys of the list’s direction move focus and wrap at both ends, Home and End reach the first and last enabled tab, Enter and Space select under manual activation, and Delete closes a dismissible tab. A horizontal list does not listen for Up and Down, so those keys keep scrolling the page while focus is in the list.
 - After a dismissal, focus follows the pattern: the next tab, the previous one when the closed tab was last, or the list itself when no tab is left, which is why the list carries tabindex="-1". The selection follows the same rule, with the reason remove.
 - The close button is outside the arrow-key sequence and inside the accessibility tree. A screen reader reaches and presses it; from the keyboard, Delete closes the focused tab, and the tab announces the key with aria-keyshortcuts. In the arrow-key sequence, close buttons would double the presses it takes to cross the list.

package/dist/docs/text-field.json

@@ -268,7 +268,7 @@
           "type": "'text' | 'search' | 'email' | 'url' | 'tel' | 'password'",
           "defaultValue": "text",
           "appliesTo": "TextField",
-          "description": "The input’s own type. Any other string an input accepts still reaches the element."
+          "description": "The input’s own type, one of the six listed. A date, a time, a month or a number is not a TextField: use date-picker (forms.md FM-16), time-picker or number-field. Other strings still reach the element for compatibility and are not supported."
         },
         {
           "name": "messages",

package/dist/docs/text-field.md

@@ -65,7 +65,7 @@ export default function TextFieldBasic() {
 | `readOnly` | `boolean` | from the field, or false | TextField | Unset by default, so the text field takes the state of the field around it. It is the native readonly: the input stays focusable and selectable, and its value is submitted. |
 | `invalid` | `boolean` | from the field, or false | TextField | Unset by default, so the text field takes the state of the field around it. It sets aria-invalid on the input and data-invalid on the frame. |
 | `required` | `boolean` | — | TextField | The input’s own attribute, passed through unchanged; TextField never writes it. A field marks a required value with aria-required instead, because the native attribute turns on browser constraint validation. |
-| `type` | `'text' \| 'search' \| 'email' \| 'url' \| 'tel' \| 'password'` | text | TextField | The input’s own type. Any other string an input accepts still reaches the element. |
+| `type` | `'text' \| 'search' \| 'email' \| 'url' \| 'tel' \| 'password'` | text | TextField | The input’s own type, one of the six listed. A date, a time, a month or a number is not a TextField: use date-picker (forms.md FM-16), time-picker or number-field. Other strings still reach the element for compatibility and are not supported. |
 | `messages` | `Partial<TextFieldMessages>` | — | TextField | Replaces words of the active language, key by key. clear, reveal and copy name the buttons; reveal does not change with the state, because aria-pressed carries it. copied and copyFailed announce the outcome of a copy. capsLock is announced once when Caps Lock turns on in a focused password field. |
 | `render` | `(props: TextFieldRootProps) => ReactNode` | — | TextField | Renders the frame into another element and passes it every attribute. The props are typed against HTMLAttributes<HTMLElement>, so they can be spread onto a label or a fieldset. The input cannot be replaced, because it holds the value, the identifier and the wiring. |
 | `TextFieldAction` | `ComponentPropsWithRef<"button"> & { render? }` | type="button" | start, end | A button you place inside the frame. Every native prop reaches the button, and render replaces it. MenuTrigger, PopoverTrigger and TooltipTrigger pass their wiring to it through their own render. |

package/dist/docs/toggle-group.json

@@ -14,7 +14,8 @@
     ],
     "variant": [
       "outline",
-      "ghost"
+      "ghost",
+      "chips"
     ],
     "orientation": [
       "horizontal",
@@ -131,10 +132,10 @@
         },
         {
           "name": "variant",
-          "type": "'outline' | 'ghost'",
+          "type": "'outline' | 'ghost' | 'chips'",
           "defaultValue": "outline",
           "appliesTo": "ToggleGroup",
-          "description": "Whether the bar draws its own edge. There is no tone axis: “on” is one colour across the system, and a bar that wants the whole palette is button-group around ToggleButtons"
+          "description": "Whether the bar draws its own edge, or draws its items as chips: separate rounded items that wrap, never joined, the pressed one in the neutral tone ink. There is no tone axis: “on” is one colour across the system, and a bar that wants the whole palette is button-group around ToggleButtons"
         },
         {
           "name": "orientation",
@@ -292,9 +293,16 @@
     "--slotted-focus-ring-color",
     "--slotted-focus-ring-offset",
     "--slotted-focus-ring-width",
+    "--slotted-font-weight-medium",
+    "--slotted-radius-full",
+    "--slotted-space-3",
     "--slotted-text",
     "--slotted-toggle-group-active-background",
     "--slotted-toggle-group-border-color",
+    "--slotted-toggle-group-chips-gap",
+    "--slotted-toggle-group-chips-pressed-background",
+    "--slotted-toggle-group-chips-pressed-color",
+    "--slotted-toggle-group-chips-radius",
     "--slotted-toggle-group-color",
     "--slotted-toggle-group-disabled-border-color",
     "--slotted-toggle-group-disabled-color",
@@ -310,6 +318,9 @@
     "--slotted-tone-accent-subtle-active",
     "--slotted-tone-accent-subtle-hover",
     "--slotted-tone-accent-text",
+    "--slotted-tone-neutral-on-solid",
+    "--slotted-tone-neutral-solid",
+    "--slotted-tone-neutral-solid-hover",
     "--slotted-tone-secondary-subtle-active",
     "--slotted-tone-secondary-subtle-hover"
   ],

package/dist/docs/toggle-group.md

@@ -39,7 +39,7 @@ Excerpt — not a complete module
 | `multiple` | `boolean` | false | ToggleGroup | Whether more than one item may be on at a time. The value stays an array either way, so both bindings hold one shape and a single-select consumer writes an array of one |
 | `deselectable` | `boolean` | true | ToggleGroup | Whether the last item on may be turned off. Ignored while multiple is true, where a set may always empty |
 | `size` | `'sm' \| 'md' \| 'lg'` | md | ToggleGroup | The control step the bar and every item sit at. It reads the control scale, so the bar is as tall as the field beside it |
-| `variant` | `'outline' \| 'ghost'` | outline | ToggleGroup | Whether the bar draws its own edge. There is no tone axis: “on” is one colour across the system, and a bar that wants the whole palette is button-group around ToggleButtons |
+| `variant` | `'outline' \| 'ghost' \| 'chips'` | outline | ToggleGroup | Whether the bar draws its own edge, or draws its items as chips: separate rounded items that wrap, never joined, the pressed one in the neutral tone ink. There is no tone axis: “on” is one colour across the system, and a bar that wants the whole palette is button-group around ToggleButtons |
 | `orientation` | `'horizontal' \| 'vertical'` | horizontal | ToggleGroup | How the items flow, and which pair of arrows moves focus. A vertical group writes aria-orientation |
 | `attached` | `boolean` | true | ToggleGroup | Whether the items are joined into one bar or spaced apart. A joined bar overlaps its items by one border so a shared column holds one line |
 | `fullWidth` | `boolean` | false | ToggleGroup | Whether the items share the whole line. Left alone the bar is as wide as its labels |
@@ -67,7 +67,7 @@ Excerpt — not a complete module
 | Axis | Values | Default |
 | --- | --- | --- |
 | `size` | `sm`, `md`, `lg` | `md` |
-| `variant` | `outline`, `ghost` | `outline` |
+| `variant` | `outline`, `ghost`, `chips` | `outline` |
 | `orientation` | `horizontal`, `vertical` | `horizontal` |
 
 ## Rules
@@ -81,7 +81,7 @@ Excerpt — not a complete module
 
 ## Tokens
 
-`--slotted-control-border-color`, `--slotted-control-border-width`, `--slotted-control-font-family`, `--slotted-control-font-size-lg`, `--slotted-control-font-size-md`, `--slotted-control-font-size-sm`, `--slotted-control-font-weight`, `--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-letter-spacing`, `--slotted-control-line-height`, `--slotted-control-padding-inline-lg`, `--slotted-control-padding-inline-md`, `--slotted-control-padding-inline-sm`, `--slotted-control-radius`, `--slotted-control-shadow`, `--slotted-control-transition-duration`, `--slotted-control-transition-easing`, `--slotted-disabled-background`, `--slotted-disabled-border`, `--slotted-disabled-foreground`, `--slotted-duration-instant`, `--slotted-focus-ring-color`, `--slotted-focus-ring-offset`, `--slotted-focus-ring-width`, `--slotted-text`, `--slotted-toggle-group-active-background`, `--slotted-toggle-group-border-color`, `--slotted-toggle-group-color`, `--slotted-toggle-group-disabled-border-color`, `--slotted-toggle-group-disabled-color`, `--slotted-toggle-group-disabled-pressed-background`, `--slotted-toggle-group-hover-background`, `--slotted-toggle-group-pressed-background`, `--slotted-toggle-group-pressed-border-color`, `--slotted-toggle-group-pressed-color`, `--slotted-toggle-group-pressed-hover-background`, `--slotted-toggle-group-radius`, `--slotted-toggle-group-shadow`, `--slotted-tone-accent-border`, `--slotted-tone-accent-subtle-active`, `--slotted-tone-accent-subtle-hover`, `--slotted-tone-accent-text`, `--slotted-tone-secondary-subtle-active`, `--slotted-tone-secondary-subtle-hover`
+`--slotted-control-border-color`, `--slotted-control-border-width`, `--slotted-control-font-family`, `--slotted-control-font-size-lg`, `--slotted-control-font-size-md`, `--slotted-control-font-size-sm`, `--slotted-control-font-weight`, `--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-letter-spacing`, `--slotted-control-line-height`, `--slotted-control-padding-inline-lg`, `--slotted-control-padding-inline-md`, `--slotted-control-padding-inline-sm`, `--slotted-control-radius`, `--slotted-control-shadow`, `--slotted-control-transition-duration`, `--slotted-control-transition-easing`, `--slotted-disabled-background`, `--slotted-disabled-border`, `--slotted-disabled-foreground`, `--slotted-duration-instant`, `--slotted-focus-ring-color`, `--slotted-focus-ring-offset`, `--slotted-focus-ring-width`, `--slotted-font-weight-medium`, `--slotted-radius-full`, `--slotted-space-3`, `--slotted-text`, `--slotted-toggle-group-active-background`, `--slotted-toggle-group-border-color`, `--slotted-toggle-group-chips-gap`, `--slotted-toggle-group-chips-pressed-background`, `--slotted-toggle-group-chips-pressed-color`, `--slotted-toggle-group-chips-radius`, `--slotted-toggle-group-color`, `--slotted-toggle-group-disabled-border-color`, `--slotted-toggle-group-disabled-color`, `--slotted-toggle-group-disabled-pressed-background`, `--slotted-toggle-group-hover-background`, `--slotted-toggle-group-pressed-background`, `--slotted-toggle-group-pressed-border-color`, `--slotted-toggle-group-pressed-color`, `--slotted-toggle-group-pressed-hover-background`, `--slotted-toggle-group-radius`, `--slotted-toggle-group-shadow`, `--slotted-tone-accent-border`, `--slotted-tone-accent-subtle-active`, `--slotted-tone-accent-subtle-hover`, `--slotted-tone-accent-text`, `--slotted-tone-neutral-on-solid`, `--slotted-tone-neutral-solid`, `--slotted-tone-neutral-solid-hover`, `--slotted-tone-secondary-subtle-active`, `--slotted-tone-secondary-subtle-hover`
 
 ## Examples
 

package/dist/docs/toggle.json

@@ -14,7 +14,8 @@
     ],
     "variant": [
       "outline",
-      "ghost"
+      "ghost",
+      "chips"
     ]
   },
   "members": {
@@ -99,10 +100,10 @@
         },
         {
           "name": "variant",
-          "type": "'outline' | 'ghost'",
+          "type": "'outline' | 'ghost' | 'chips'",
           "defaultValue": "outline",
           "appliesTo": "Toggle",
-          "description": "Whether the control draws its own edge before it is on. There is no tone axis: a mode is one colour when it is on, and an action that persists in one of five tones is button’s ToggleButton"
+          "description": "Whether the control draws its own edge before it is on, or is a chip pressed in the neutral tone ink. There is no tone axis: a mode is one colour when it is on, and an action that persists in one of five tones is button’s ToggleButton"
         },
         {
           "name": "icon",
@@ -217,9 +218,14 @@
     "--slotted-focus-ring-color",
     "--slotted-focus-ring-offset",
     "--slotted-focus-ring-width",
+    "--slotted-font-weight-medium",
+    "--slotted-radius-full",
     "--slotted-text",
     "--slotted-toggle-active-background",
     "--slotted-toggle-border-color",
+    "--slotted-toggle-chips-pressed-background",
+    "--slotted-toggle-chips-pressed-color",
+    "--slotted-toggle-chips-radius",
     "--slotted-toggle-color",
     "--slotted-toggle-disabled-border-color",
     "--slotted-toggle-disabled-color",
@@ -235,6 +241,9 @@
     "--slotted-tone-accent-subtle-active",
     "--slotted-tone-accent-subtle-hover",
     "--slotted-tone-accent-text",
+    "--slotted-tone-neutral-on-solid",
+    "--slotted-tone-neutral-solid",
+    "--slotted-tone-neutral-solid-hover",
     "--slotted-tone-secondary-subtle-active",
     "--slotted-tone-secondary-subtle-hover"
   ],

package/dist/docs/toggle.md

@@ -34,7 +34,7 @@ Excerpt — not a complete module
 | `pressed` | `boolean` | — | Toggle | Present means the consumer owns the state, for the life of the component. Absent, the toggle owns it and starts from defaultPressed |
 | `defaultPressed` | `boolean` | false | Toggle | What an uncontrolled toggle starts from, read once. A later change to it does not silently become new state |
 | `size` | `'sm' \| 'md' \| 'lg'` | md | Toggle | The control step. It reads the control scale, so the toggle is as tall as the field beside it |
-| `variant` | `'outline' \| 'ghost'` | outline | Toggle | Whether the control draws its own edge before it is on. There is no tone axis: a mode is one colour when it is on, and an action that persists in one of five tones is button’s ToggleButton |
+| `variant` | `'outline' \| 'ghost' \| 'chips'` | outline | Toggle | Whether the control draws its own edge before it is on, or is a chip pressed in the neutral tone ink. There is no tone axis: a mode is one colour when it is on, and an action that persists in one of five tones is button’s ToggleButton |
 | `icon` | `ReactNode` | — | Toggle | The mark drawn before the words, sized from the control glyph scale and hidden from the reading order. Alone, it makes the toggle square |
 | `children` | `ReactNode` | — | Toggle | The words, which never change with the state. Absent, the toggle needs an aria-label |
 | `disabled` | `boolean` | false | Toggle | The native attribute, which is also what makes the browser refuse focus. A toggle that is on and unavailable keeps saying both |
@@ -56,7 +56,7 @@ Excerpt — not a complete module
 | Axis | Values | Default |
 | --- | --- | --- |
 | `size` | `sm`, `md`, `lg` | `md` |
-| `variant` | `outline`, `ghost` | `outline` |
+| `variant` | `outline`, `ghost`, `chips` | `outline` |
 
 ## Rules
 
@@ -68,7 +68,7 @@ Excerpt — not a complete module
 
 ## Tokens
 
-`--slotted-control-border-color`, `--slotted-control-border-width`, `--slotted-control-font-family`, `--slotted-control-font-size-lg`, `--slotted-control-font-size-md`, `--slotted-control-font-size-sm`, `--slotted-control-font-weight`, `--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-letter-spacing`, `--slotted-control-line-height`, `--slotted-control-padding-inline-lg`, `--slotted-control-padding-inline-md`, `--slotted-control-padding-inline-sm`, `--slotted-control-radius`, `--slotted-control-shadow`, `--slotted-control-transition-duration`, `--slotted-control-transition-easing`, `--slotted-disabled-background`, `--slotted-disabled-border`, `--slotted-disabled-foreground`, `--slotted-duration-instant`, `--slotted-focus-ring-color`, `--slotted-focus-ring-offset`, `--slotted-focus-ring-width`, `--slotted-text`, `--slotted-toggle-active-background`, `--slotted-toggle-border-color`, `--slotted-toggle-color`, `--slotted-toggle-disabled-border-color`, `--slotted-toggle-disabled-color`, `--slotted-toggle-disabled-pressed-background`, `--slotted-toggle-hover-background`, `--slotted-toggle-pressed-background`, `--slotted-toggle-pressed-border-color`, `--slotted-toggle-pressed-color`, `--slotted-toggle-pressed-hover-background`, `--slotted-toggle-radius`, `--slotted-toggle-shadow`, `--slotted-tone-accent-border`, `--slotted-tone-accent-subtle-active`, `--slotted-tone-accent-subtle-hover`, `--slotted-tone-accent-text`, `--slotted-tone-secondary-subtle-active`, `--slotted-tone-secondary-subtle-hover`
+`--slotted-control-border-color`, `--slotted-control-border-width`, `--slotted-control-font-family`, `--slotted-control-font-size-lg`, `--slotted-control-font-size-md`, `--slotted-control-font-size-sm`, `--slotted-control-font-weight`, `--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-letter-spacing`, `--slotted-control-line-height`, `--slotted-control-padding-inline-lg`, `--slotted-control-padding-inline-md`, `--slotted-control-padding-inline-sm`, `--slotted-control-radius`, `--slotted-control-shadow`, `--slotted-control-transition-duration`, `--slotted-control-transition-easing`, `--slotted-disabled-background`, `--slotted-disabled-border`, `--slotted-disabled-foreground`, `--slotted-duration-instant`, `--slotted-focus-ring-color`, `--slotted-focus-ring-offset`, `--slotted-focus-ring-width`, `--slotted-font-weight-medium`, `--slotted-radius-full`, `--slotted-text`, `--slotted-toggle-active-background`, `--slotted-toggle-border-color`, `--slotted-toggle-chips-pressed-background`, `--slotted-toggle-chips-pressed-color`, `--slotted-toggle-chips-radius`, `--slotted-toggle-color`, `--slotted-toggle-disabled-border-color`, `--slotted-toggle-disabled-color`, `--slotted-toggle-disabled-pressed-background`, `--slotted-toggle-hover-background`, `--slotted-toggle-pressed-background`, `--slotted-toggle-pressed-border-color`, `--slotted-toggle-pressed-color`, `--slotted-toggle-pressed-hover-background`, `--slotted-toggle-radius`, `--slotted-toggle-shadow`, `--slotted-tone-accent-border`, `--slotted-tone-accent-subtle-active`, `--slotted-tone-accent-subtle-hover`, `--slotted-tone-accent-text`, `--slotted-tone-neutral-on-solid`, `--slotted-tone-neutral-solid`, `--slotted-tone-neutral-solid-hover`, `--slotted-tone-secondary-subtle-active`, `--slotted-tone-secondary-subtle-hover`
 
 ## Examples
 

package/dist/docs/tokens.md

@@ -92,6 +92,15 @@ Names: --slotted-line-height-{step}
 | `--slotted-line-height-3xl` | — | 1.3 |
 | `--slotted-line-height-4xl` | — | 1.2 |
 
+## letter-spacing
+
+The tracking large type takes: the tight step at the md and lg display steps, the tighter step at 3xl and 4xl. Text at the body steps reads the face as drawn.
+
+| Token | Meaning | Default value |
+| --- | --- | --- |
+| `--slotted-letter-spacing-tight` | The tracking of a display figure or a wordmark at the md and lg font-size steps. | -0.02em |
+| `--slotted-letter-spacing-tighter` | The tracking of a display figure at the 3xl and 4xl font-size steps. | -0.03em |
+
 ## font-weight
 
 How much typographic emphasis text carries.
@@ -217,6 +226,10 @@ The grounds content stands on.
 | `--slotted-surface-raised` | The ground of a surface above another: a popover, a menu, a dialog; paired with a step of `shadow`. | by scheme |
 | `--slotted-surface-sunken` | The canvas under the content: the ground a card and a field stand out from. | by scheme |
 | `--slotted-surface-inverse` | A ground in the opposite lightness, with `--slotted-text-inverse` on it. | by scheme |
+| `--slotted-surface-inverse-hover` | The inverse ground under the pointer: `--slotted-surface-inverse` moved a share toward the opposite lightness. | by scheme |
+| `--slotted-surface-inverse-active` | The inverse ground while pressed, a step beyond the hover. | by scheme |
+| `--slotted-surface-material` | The ground of a bar that floats over scrolling content, drawn as a material: `--slotted-surface` at a partial share over transparency, behind `--slotted-material-backdrop`. Under `prefers-reduced-transparency: reduce` it is `--slotted-surface`, and under forced colours the Canvas system colour. | by scheme |
+| `--slotted-material-backdrop` | The backdrop filter a material is drawn with: the content scrolling under it, saturated and blurred. Under `prefers-reduced-transparency: reduce` it is `none`. | saturate(1.6) blur(20px) |
 
 ## text
 
@@ -271,7 +284,7 @@ How small an interactive target may be.
 
 ## tone
 
-What an element carrying an intent is painted with: five tones, each with the same nine roles.
+What an element carrying an intent is painted with: six tones, each with the same nine roles.
 
 Names: --slotted-tone-{tone}-{role}
 
@@ -279,6 +292,7 @@ Names: --slotted-tone-{tone}-{role}
 | --- | --- |
 | accent | The product's intent: the primary action, the chosen option, the current place. |
 | secondary | A second intent beside accent, for an action or a mark that must not compete with it. |
+| neutral | Ink: the inverse surface as a fill and the text colour as a label, for a primary action in a product that keeps the accent for data. |
 | success | A result that completed or a state that is healthy. |
 | warning | A state that needs attention before it becomes a failure. |
 | danger | A failure, an error or an action that destroys data. |
@@ -405,6 +419,16 @@ How the place the reader is on is marked.
 | --- | --- | --- |
 | `--slotted-current-edge` | The edge of the row the reader is on, drawn over its tone ground. | by scheme |
 
+## state
+
+Translucent layers laid over whatever surface an element stands on, so a hovered, pressed or selected row reads the same on the page and on a raised surface. Each is the scheme's text colour at a small share over transparency. Under forced colours every layer is the Canvas system colour: the state is carried by the system colours the family draws, Highlight for selection and an outline for focus.
+
+| Token | Meaning | Default value |
+| --- | --- | --- |
+| `--slotted-state-hover` | The layer under the pointer. | by scheme |
+| `--slotted-state-pressed` | The layer while the element is pressed; the strongest of the three. | by scheme |
+| `--slotted-state-selected` | The layer of a selected or open element, between hover and pressed. | by scheme |
+
 ## scrim
 
 The veil under a modal surface.