@slotted/react 0.1.0-beta.0 → 0.1.0-beta.10

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,11 +330,41 @@
           "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",
           "required": false,
-          "purpose": "What is shown when there is nothing, spanning every column. It takes a ResultState, which already separates an empty set from a set a filter emptied."
+          "purpose": "What is shown when there is nothing, spanning every column, in a row the part writes itself. It takes a ResultState, which already separates an empty set from a set a filter emptied."
         },
         {
           "part": "loader",
@@ -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"
@@ -923,7 +1012,7 @@
       "title": "Nothing yet, nothing at all, and something arriving",
       "note": "A first load draws skeleton rows, so the shape is visible before the content. A refresh over rows already read writes aria-busy and dims them without moving anything — a reader looking at row forty stays there.",
       "language": "tsx",
-      "source": "{\n  loading && rows.length === 0 ? (\n    <TableLoader skeletonRows={5} />\n  ) : rows.length === 0 ? (\n    <TableBody>\n      <TableRow>\n        <TableEmpty>\n          <ResultState status=\"no-results\" title=\"No invoices match this filter\" />\n        </TableEmpty>\n      </TableRow>\n    </TableBody>\n  ) : (\n    <TableBody>{rows}</TableBody>\n  );\n}\n",
+      "source": "{\n  loading && rows.length === 0 ? (\n    <TableLoader skeletonRows={5} />\n  ) : rows.length === 0 ? (\n    <TableBody>\n      <TableEmpty>\n        <ResultState status=\"no-results\" title=\"No invoices match this filter\" />\n      </TableEmpty>\n    </TableBody>\n  ) : (\n    <TableBody>{rows}</TableBody>\n  );\n}\n",
       "verdict": "excerpt"
     },
     {
@@ -987,7 +1076,7 @@
       "title": "empty.tsx",
       "note": null,
       "language": "tsx",
-      "source": "import {\n  ResultState,\n  ResultStateContent,\n  ResultStateDescription,\n  ResultStateTitle,\n} from '@slotted/react/result-state';\nimport {\n  Table,\n  TableBody,\n  TableColumnHeader,\n  TableContent,\n  TableEmpty,\n  TableHead,\n  TableRow,\n} from '@slotted/react/table';\n\nexport default function TableEmptyExample() {\n  return (\n    <Table columns={4}>\n      <TableContent aria-label=\"Returns this week\">\n        <TableHead>\n          <TableRow>\n            <TableColumnHeader>Return</TableColumnHeader>\n            <TableColumnHeader>Order</TableColumnHeader>\n            <TableColumnHeader>Customer</TableColumnHeader>\n            <TableColumnHeader numeric>Refund</TableColumnHeader>\n          </TableRow>\n        </TableHead>\n        <TableBody>\n          <TableRow>\n            <TableEmpty>\n              <ResultState status=\"empty\">\n                <ResultStateContent>\n                  <ResultStateTitle>No returns this week</ResultStateTitle>\n                  <ResultStateDescription>\n                    Returns appear here as soon as a customer opens one from their order page.\n                  </ResultStateDescription>\n                </ResultStateContent>\n              </ResultState>\n            </TableEmpty>\n          </TableRow>\n        </TableBody>\n      </TableContent>\n    </Table>\n  );\n}\n",
+      "source": "import {\n  ResultState,\n  ResultStateContent,\n  ResultStateDescription,\n  ResultStateTitle,\n} from '@slotted/react/result-state';\nimport {\n  Table,\n  TableBody,\n  TableColumnHeader,\n  TableContent,\n  TableEmpty,\n  TableHead,\n  TableRow,\n} from '@slotted/react/table';\n\nexport default function TableEmptyExample() {\n  return (\n    <Table columns={4}>\n      <TableContent aria-label=\"Returns this week\">\n        <TableHead>\n          <TableRow>\n            <TableColumnHeader>Return</TableColumnHeader>\n            <TableColumnHeader>Order</TableColumnHeader>\n            <TableColumnHeader>Customer</TableColumnHeader>\n            <TableColumnHeader numeric>Refund</TableColumnHeader>\n          </TableRow>\n        </TableHead>\n        <TableBody>\n          <TableEmpty>\n            <ResultState status=\"empty\">\n              <ResultStateContent>\n                <ResultStateTitle>No returns this week</ResultStateTitle>\n                <ResultStateDescription>\n                  Returns appear here as soon as a customer opens one from their order page.\n                </ResultStateDescription>\n              </ResultStateContent>\n            </ResultState>\n          </TableEmpty>\n        </TableBody>\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

@@ -78,6 +78,7 @@
         "label",
         "end",
         "dismiss",
+        "marker",
         "panel",
         "scroll",
         "actions"
@@ -106,7 +107,7 @@
           "part": "item",
           "element": "div[role=\"presentation\"], or the element the render of Tab returns",
           "required": true,
-          "purpose": "One tab and its optional close button. It exists because a button cannot contain a button, and because the marker spans the tab and its close button together. className and style reach it."
+          "purpose": "One tab and its optional close button. It exists because a button cannot contain a button, and it carries the hover bar under the tab. className and style reach it."
         },
         {
           "part": "tab",
@@ -138,6 +139,12 @@
           "required": false,
           "purpose": "The close button. It has tabindex=\"-1\", so the arrow keys move between tabs only, and it stays in the accessibility tree, so a screen reader can press it. From the keyboard, Delete closes the focused tab, which aria-keyshortcuts on the tab announces."
         },
+        {
+          "part": "marker",
+          "element": "span, aria-hidden",
+          "required": false,
+          "purpose": "The bar under the selected tab. The list draws one and slides it between tabs; it spans the tab’s content box, never the close button. --slotted-tabs-marker-size, --slotted-tabs-marker-radius, --slotted-tabs-marker-inset and --slotted-tabs-marker-offset (1px above the list’s edge) shape it, and the hover bar takes the same geometry at --slotted-tabs-hover-marker-opacity."
+        },
         {
           "part": "panel",
           "element": "div[role=\"tabpanel\"]",
@@ -221,6 +228,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 +333,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,13 +368,14 @@
         }
       ],
       "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.",
         "The paging controls are aria-hidden and outside the Tab sequence, because the arrow keys reach every tab and scroll it into view. Cloudscape’s guidance warns against extra Tab stops between a tab list and its panel.",
         "A list that starts to overflow scrolls the selected tab into view once its paging controls are drawn, so the selected tab is not left behind the end control.",
         "Each tab names its panel with aria-controls and each panel names its tab with aria-labelledby. The ids come from the value, with the characters an id cannot hold escaped rather than replaced, so two values that differ only by a space never share a panel.",
-        "The selected tab is never shown by colour alone: the marker is a bar the width of a thick border, which stays visible in the high-contrast scheme, where the theme paints every surface Canvas and the fill of the contained variant disappears.",
+        "The selected tab is never shown by colour alone: the marker is a bar never thinner than a thick border, which stays visible in the high-contrast scheme, where the theme paints every surface Canvas and the fill of the contained variant disappears.",
         "A panel carries tabindex=\"0\", so the Tab key reaches it from the list. The pattern permits that stop even when the panel’s first content is focusable."
       ]
     }
@@ -398,14 +413,15 @@
     "--slotted-disabled-background",
     "--slotted-disabled-border",
     "--slotted-disabled-foreground",
+    "--slotted-duration-medium",
     "--slotted-duration-short",
     "--slotted-easing-enter",
     "--slotted-focus-ring-color",
     "--slotted-focus-ring-offset",
     "--slotted-focus-ring-width",
+    "--slotted-radius-full",
     "--slotted-radius-md",
     "--slotted-radius-sm",
-    "--slotted-radius-xs",
     "--slotted-shadow-xs",
     "--slotted-space-1",
     "--slotted-space-2",
@@ -429,21 +445,23 @@
     "--slotted-tabs-hover-background",
     "--slotted-tabs-hover-color",
     "--slotted-tabs-hover-marker-color",
+    "--slotted-tabs-hover-marker-opacity",
     "--slotted-tabs-list-gap",
     "--slotted-tabs-marker-color",
+    "--slotted-tabs-marker-easing",
+    "--slotted-tabs-marker-inset",
+    "--slotted-tabs-marker-offset",
+    "--slotted-tabs-marker-radius",
+    "--slotted-tabs-marker-size",
     "--slotted-tabs-scroll-color",
     "--slotted-tabs-selected-color",
     "--slotted-tabs-track-color",
     "--slotted-target-comfortable",
     "--slotted-target-min",
     "--slotted-text",
-    "--slotted-text-inverse",
     "--slotted-text-muted",
     "--slotted-tone-accent-solid",
     "--slotted-tone-accent-text",
-    "--slotted-tone-danger-border",
-    "--slotted-tone-danger-surface",
-    "--slotted-tone-danger-text",
     "--slotted-tone-secondary-subtle-active",
     "--slotted-tone-secondary-subtle-hover"
   ],
@@ -531,7 +549,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

@@ -110,6 +110,7 @@ export default function TabsBasic() {
 | `label` | span | yes |
 | `end` | span | no |
 | `dismiss` | button | no |
+| `marker` | span, aria-hidden | no |
 | `panel` | div[role="tabpanel"] | yes |
 | `scroll` | button | no |
 | `actions` | div, or the element render returns | no |
@@ -127,6 +128,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 +142,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,18 +168,19 @@ 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.
 - The paging controls are aria-hidden and outside the Tab sequence, because the arrow keys reach every tab and scroll it into view. Cloudscape’s guidance warns against extra Tab stops between a tab list and its panel.
 - A list that starts to overflow scrolls the selected tab into view once its paging controls are drawn, so the selected tab is not left behind the end control.
 - Each tab names its panel with aria-controls and each panel names its tab with aria-labelledby. The ids come from the value, with the characters an id cannot hold escaped rather than replaced, so two values that differ only by a space never share a panel.
-- The selected tab is never shown by colour alone: the marker is a bar the width of a thick border, which stays visible in the high-contrast scheme, where the theme paints every surface Canvas and the fill of the contained variant disappears.
+- The selected tab is never shown by colour alone: the marker is a bar never thinner than a thick border, which stays visible in the high-contrast scheme, where the theme paints every surface Canvas and the fill of the contained variant disappears.
 - A panel carries tabindex="0", so the Tab key reaches it from the list. The pattern permits that stop even when the panel’s first content is focusable.
 
 ## Tokens
 
-`--slotted-border-strong`, `--slotted-border-subtle`, `--slotted-border-width-thick`, `--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-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-inner-size-lg`, `--slotted-control-inner-size-md`, `--slotted-control-inner-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-transition-duration`, `--slotted-control-transition-easing`, `--slotted-disabled-background`, `--slotted-disabled-border`, `--slotted-disabled-foreground`, `--slotted-duration-short`, `--slotted-easing-enter`, `--slotted-focus-ring-color`, `--slotted-focus-ring-offset`, `--slotted-focus-ring-width`, `--slotted-radius-md`, `--slotted-radius-sm`, `--slotted-radius-xs`, `--slotted-shadow-xs`, `--slotted-space-1`, `--slotted-space-2`, `--slotted-space-4`, `--slotted-space-6`, `--slotted-surface`, `--slotted-surface-sunken`, `--slotted-tabs-actions-gap`, `--slotted-tabs-active-background`, `--slotted-tabs-active-marker-color`, `--slotted-tabs-color`, `--slotted-tabs-contained-background`, `--slotted-tabs-contained-selected-background`, `--slotted-tabs-dismiss-active-background`, `--slotted-tabs-dismiss-active-color`, `--slotted-tabs-dismiss-color`, `--slotted-tabs-dismiss-hover-background`, `--slotted-tabs-dismiss-hover-color`, `--slotted-tabs-fade-size`, `--slotted-tabs-gap`, `--slotted-tabs-hover-background`, `--slotted-tabs-hover-color`, `--slotted-tabs-hover-marker-color`, `--slotted-tabs-list-gap`, `--slotted-tabs-marker-color`, `--slotted-tabs-scroll-color`, `--slotted-tabs-selected-color`, `--slotted-tabs-track-color`, `--slotted-target-comfortable`, `--slotted-target-min`, `--slotted-text`, `--slotted-text-inverse`, `--slotted-text-muted`, `--slotted-tone-accent-solid`, `--slotted-tone-accent-text`, `--slotted-tone-danger-border`, `--slotted-tone-danger-surface`, `--slotted-tone-danger-text`, `--slotted-tone-secondary-subtle-active`, `--slotted-tone-secondary-subtle-hover`
+`--slotted-border-strong`, `--slotted-border-subtle`, `--slotted-border-width-thick`, `--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-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-inner-size-lg`, `--slotted-control-inner-size-md`, `--slotted-control-inner-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-transition-duration`, `--slotted-control-transition-easing`, `--slotted-disabled-background`, `--slotted-disabled-border`, `--slotted-disabled-foreground`, `--slotted-duration-medium`, `--slotted-duration-short`, `--slotted-easing-enter`, `--slotted-focus-ring-color`, `--slotted-focus-ring-offset`, `--slotted-focus-ring-width`, `--slotted-radius-full`, `--slotted-radius-md`, `--slotted-radius-sm`, `--slotted-shadow-xs`, `--slotted-space-1`, `--slotted-space-2`, `--slotted-space-4`, `--slotted-space-6`, `--slotted-surface`, `--slotted-surface-sunken`, `--slotted-tabs-actions-gap`, `--slotted-tabs-active-background`, `--slotted-tabs-active-marker-color`, `--slotted-tabs-color`, `--slotted-tabs-contained-background`, `--slotted-tabs-contained-selected-background`, `--slotted-tabs-dismiss-active-background`, `--slotted-tabs-dismiss-active-color`, `--slotted-tabs-dismiss-color`, `--slotted-tabs-dismiss-hover-background`, `--slotted-tabs-dismiss-hover-color`, `--slotted-tabs-fade-size`, `--slotted-tabs-gap`, `--slotted-tabs-hover-background`, `--slotted-tabs-hover-color`, `--slotted-tabs-hover-marker-color`, `--slotted-tabs-hover-marker-opacity`, `--slotted-tabs-list-gap`, `--slotted-tabs-marker-color`, `--slotted-tabs-marker-easing`, `--slotted-tabs-marker-inset`, `--slotted-tabs-marker-offset`, `--slotted-tabs-marker-radius`, `--slotted-tabs-marker-size`, `--slotted-tabs-scroll-color`, `--slotted-tabs-selected-color`, `--slotted-tabs-track-color`, `--slotted-target-comfortable`, `--slotted-target-min`, `--slotted-text`, `--slotted-text-muted`, `--slotted-tone-accent-solid`, `--slotted-tone-accent-text`, `--slotted-tone-secondary-subtle-active`, `--slotted-tone-secondary-subtle-hover`
 
 ## Examples
 

package/dist/docs/tag.json

@@ -10,6 +10,7 @@
     "tone": [
       "accent",
       "secondary",
+      "info",
       "success",
       "warning",
       "danger"
@@ -181,7 +182,7 @@
       "api": [
         {
           "name": "tone",
-          "type": "'accent' | 'secondary' | 'success' | 'warning' | 'danger'",
+          "type": "'accent' | 'secondary' | 'info' | 'success' | 'warning' | 'danger'",
           "defaultValue": "secondary",
           "appliesTo": "Tag",
           "description": "Which of the five semantic colours the tag speaks in"
@@ -321,7 +322,7 @@
       "api": [
         {
           "name": "tone",
-          "type": "'accent' | 'secondary' | 'success' | 'warning' | 'danger'",
+          "type": "'accent' | 'secondary' | 'info' | 'success' | 'warning' | 'danger'",
           "defaultValue": "secondary",
           "appliesTo": "TagButton",
           "description": "Which of the five semantic colours the tag speaks in"
@@ -419,7 +420,7 @@
       "api": [
         {
           "name": "tone",
-          "type": "'accent' | 'secondary' | 'success' | 'warning' | 'danger'",
+          "type": "'accent' | 'secondary' | 'info' | 'success' | 'warning' | 'danger'",
           "defaultValue": "secondary",
           "appliesTo": "TagLink",
           "description": "Which of the five semantic colours the tag speaks in"
@@ -517,7 +518,7 @@
       "api": [
         {
           "name": "tone",
-          "type": "'accent' | 'secondary' | 'success' | 'warning' | 'danger'",
+          "type": "'accent' | 'secondary' | 'info' | 'success' | 'warning' | 'danger'",
           "defaultValue": "secondary",
           "appliesTo": "TagToggle",
           "description": "Which of the five semantic colours the tag speaks in"
@@ -683,6 +684,15 @@
     "--slotted-tone-danger-subtle-hover",
     "--slotted-tone-danger-surface",
     "--slotted-tone-danger-text",
+    "--slotted-tone-info-border",
+    "--slotted-tone-info-on-solid",
+    "--slotted-tone-info-solid",
+    "--slotted-tone-info-solid-active",
+    "--slotted-tone-info-solid-hover",
+    "--slotted-tone-info-subtle-active",
+    "--slotted-tone-info-subtle-hover",
+    "--slotted-tone-info-surface",
+    "--slotted-tone-info-text",
     "--slotted-tone-secondary-border",
     "--slotted-tone-secondary-on-solid",
     "--slotted-tone-secondary-solid-active",

package/dist/docs/tag.md

@@ -17,7 +17,7 @@ Excerpt — not a complete module
 
 | Name | Type | Default | Applies to | Description |
 | --- | --- | --- | --- | --- |
-| `tone` | `'accent' \| 'secondary' \| 'success' \| 'warning' \| 'danger'` | secondary | Tag | Which of the five semantic colours the tag speaks in |
+| `tone` | `'accent' \| 'secondary' \| 'info' \| 'success' \| 'warning' \| 'danger'` | secondary | Tag | Which of the five semantic colours the tag speaks in |
 | `variant` | `'solid' \| 'soft' \| 'outline'` | soft | Tag | How that colour is painted: filled, tinted, or an edge alone. A selected tag fills whatever its variant |
 | `size` | `'sm' \| 'md' \| 'lg'` | md | Tag | Type, glyph and gap come from the control scale, so a tag shrinks with density beside the controls it sits with |
 | `shape` | `'pill' \| 'square'` | pill | Tag | A rounded chip, or a rectangle with the small corner radius |
@@ -39,7 +39,7 @@ Excerpt — not a complete module
 
 | Name | Type | Default | Applies to | Description |
 | --- | --- | --- | --- | --- |
-| `tone` | `'accent' \| 'secondary' \| 'success' \| 'warning' \| 'danger'` | secondary | TagButton | Which of the five semantic colours the tag speaks in |
+| `tone` | `'accent' \| 'secondary' \| 'info' \| 'success' \| 'warning' \| 'danger'` | secondary | TagButton | Which of the five semantic colours the tag speaks in |
 | `variant` | `'solid' \| 'soft' \| 'outline'` | soft | TagButton | How that colour is painted: filled, tinted, or an edge alone. A selected tag fills whatever its variant |
 | `size` | `'sm' \| 'md' \| 'lg'` | md | TagButton | Type, glyph and gap come from the control scale, so a tag shrinks with density beside the controls it sits with |
 | `shape` | `'pill' \| 'square'` | pill | TagButton | A rounded chip, or a rectangle with the small corner radius |
@@ -55,7 +55,7 @@ Excerpt — not a complete module
 
 | Name | Type | Default | Applies to | Description |
 | --- | --- | --- | --- | --- |
-| `tone` | `'accent' \| 'secondary' \| 'success' \| 'warning' \| 'danger'` | secondary | TagLink | Which of the five semantic colours the tag speaks in |
+| `tone` | `'accent' \| 'secondary' \| 'info' \| 'success' \| 'warning' \| 'danger'` | secondary | TagLink | Which of the five semantic colours the tag speaks in |
 | `variant` | `'solid' \| 'soft' \| 'outline'` | soft | TagLink | How that colour is painted: filled, tinted, or an edge alone. A selected tag fills whatever its variant |
 | `size` | `'sm' \| 'md' \| 'lg'` | md | TagLink | Type, glyph and gap come from the control scale, so a tag shrinks with density beside the controls it sits with |
 | `shape` | `'pill' \| 'square'` | pill | TagLink | A rounded chip, or a rectangle with the small corner radius |
@@ -71,7 +71,7 @@ Excerpt — not a complete module
 
 | Name | Type | Default | Applies to | Description |
 | --- | --- | --- | --- | --- |
-| `tone` | `'accent' \| 'secondary' \| 'success' \| 'warning' \| 'danger'` | secondary | TagToggle | Which of the five semantic colours the tag speaks in |
+| `tone` | `'accent' \| 'secondary' \| 'info' \| 'success' \| 'warning' \| 'danger'` | secondary | TagToggle | Which of the five semantic colours the tag speaks in |
 | `variant` | `'solid' \| 'soft' \| 'outline'` | soft | TagToggle | How that colour is painted: filled, tinted, or an edge alone. A selected tag fills whatever its variant |
 | `size` | `'sm' \| 'md' \| 'lg'` | md | TagToggle | Type, glyph and gap come from the control scale, so a tag shrinks with density beside the controls it sits with |
 | `shape` | `'pill' \| 'square'` | pill | TagToggle | A rounded chip, or a rectangle with the small corner radius |
@@ -89,7 +89,7 @@ Excerpt — not a complete module
 
 | Axis | Values | Default |
 | --- | --- | --- |
-| `tone` | `accent`, `secondary`, `success`, `warning`, `danger` | `secondary` |
+| `tone` | `accent`, `secondary`, `info`, `success`, `warning`, `danger` | `secondary` |
 | `variant` | `solid`, `soft`, `outline` | `soft` |
 | `size` | `sm`, `md`, `lg` | `md` |
 | `shape` | `pill`, `square` | `pill` |
@@ -118,7 +118,7 @@ Excerpt — not a complete module
 
 ## Tokens
 
-`--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-icon-size-md`, `--slotted-control-icon-size-sm`, `--slotted-control-inner-size`, `--slotted-control-inner-size-md`, `--slotted-control-inner-size-sm`, `--slotted-control-transition-duration`, `--slotted-control-transition-easing`, `--slotted-disabled-background`, `--slotted-disabled-border`, `--slotted-disabled-foreground`, `--slotted-duration-short`, `--slotted-easing-standard`, `--slotted-focus-ring-color`, `--slotted-focus-ring-offset`, `--slotted-focus-ring-width`, `--slotted-font-weight-medium`, `--slotted-line-height-xs`, `--slotted-radius-full`, `--slotted-radius-sm`, `--slotted-space-1`, `--slotted-space-2`, `--slotted-space-3`, `--slotted-space-4`, `--slotted-space-5`, `--slotted-tag-border-color`, `--slotted-tag-border-width`, `--slotted-tag-font-family`, `--slotted-tag-font-weight`, `--slotted-tag-group-gap`, `--slotted-tag-inset-block`, `--slotted-tag-state-layer-active`, `--slotted-tag-state-layer-hover`, `--slotted-target-comfortable`, `--slotted-target-min`, `--slotted-tone-accent-border`, `--slotted-tone-accent-on-solid`, `--slotted-tone-accent-solid`, `--slotted-tone-accent-solid-active`, `--slotted-tone-accent-solid-hover`, `--slotted-tone-accent-subtle-active`, `--slotted-tone-accent-subtle-hover`, `--slotted-tone-accent-surface`, `--slotted-tone-accent-text`, `--slotted-tone-danger-border`, `--slotted-tone-danger-on-solid`, `--slotted-tone-danger-solid`, `--slotted-tone-danger-solid-active`, `--slotted-tone-danger-solid-hover`, `--slotted-tone-danger-subtle-active`, `--slotted-tone-danger-subtle-hover`, `--slotted-tone-danger-surface`, `--slotted-tone-danger-text`, `--slotted-tone-secondary-border`, `--slotted-tone-secondary-on-solid`, `--slotted-tone-secondary-solid-active`, `--slotted-tone-secondary-solid-hover`, `--slotted-tone-secondary-subtle-active`, `--slotted-tone-secondary-subtle-hover`, `--slotted-tone-secondary-surface`, `--slotted-tone-secondary-text`, `--slotted-tone-success-border`, `--slotted-tone-success-on-solid`, `--slotted-tone-success-solid`, `--slotted-tone-success-solid-active`, `--slotted-tone-success-solid-hover`, `--slotted-tone-success-subtle-active`, `--slotted-tone-success-subtle-hover`, `--slotted-tone-success-surface`, `--slotted-tone-success-text`, `--slotted-tone-warning-border`, `--slotted-tone-warning-on-solid`, `--slotted-tone-warning-solid`, `--slotted-tone-warning-solid-active`, `--slotted-tone-warning-solid-hover`, `--slotted-tone-warning-subtle-active`, `--slotted-tone-warning-subtle-hover`, `--slotted-tone-warning-surface`, `--slotted-tone-warning-text`
+`--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-icon-size-md`, `--slotted-control-icon-size-sm`, `--slotted-control-inner-size`, `--slotted-control-inner-size-md`, `--slotted-control-inner-size-sm`, `--slotted-control-transition-duration`, `--slotted-control-transition-easing`, `--slotted-disabled-background`, `--slotted-disabled-border`, `--slotted-disabled-foreground`, `--slotted-duration-short`, `--slotted-easing-standard`, `--slotted-focus-ring-color`, `--slotted-focus-ring-offset`, `--slotted-focus-ring-width`, `--slotted-font-weight-medium`, `--slotted-line-height-xs`, `--slotted-radius-full`, `--slotted-radius-sm`, `--slotted-space-1`, `--slotted-space-2`, `--slotted-space-3`, `--slotted-space-4`, `--slotted-space-5`, `--slotted-tag-border-color`, `--slotted-tag-border-width`, `--slotted-tag-font-family`, `--slotted-tag-font-weight`, `--slotted-tag-group-gap`, `--slotted-tag-inset-block`, `--slotted-tag-state-layer-active`, `--slotted-tag-state-layer-hover`, `--slotted-target-comfortable`, `--slotted-target-min`, `--slotted-tone-accent-border`, `--slotted-tone-accent-on-solid`, `--slotted-tone-accent-solid`, `--slotted-tone-accent-solid-active`, `--slotted-tone-accent-solid-hover`, `--slotted-tone-accent-subtle-active`, `--slotted-tone-accent-subtle-hover`, `--slotted-tone-accent-surface`, `--slotted-tone-accent-text`, `--slotted-tone-danger-border`, `--slotted-tone-danger-on-solid`, `--slotted-tone-danger-solid`, `--slotted-tone-danger-solid-active`, `--slotted-tone-danger-solid-hover`, `--slotted-tone-danger-subtle-active`, `--slotted-tone-danger-subtle-hover`, `--slotted-tone-danger-surface`, `--slotted-tone-danger-text`, `--slotted-tone-info-border`, `--slotted-tone-info-on-solid`, `--slotted-tone-info-solid`, `--slotted-tone-info-solid-active`, `--slotted-tone-info-solid-hover`, `--slotted-tone-info-subtle-active`, `--slotted-tone-info-subtle-hover`, `--slotted-tone-info-surface`, `--slotted-tone-info-text`, `--slotted-tone-secondary-border`, `--slotted-tone-secondary-on-solid`, `--slotted-tone-secondary-solid-active`, `--slotted-tone-secondary-solid-hover`, `--slotted-tone-secondary-subtle-active`, `--slotted-tone-secondary-subtle-hover`, `--slotted-tone-secondary-surface`, `--slotted-tone-secondary-text`, `--slotted-tone-success-border`, `--slotted-tone-success-on-solid`, `--slotted-tone-success-solid`, `--slotted-tone-success-solid-active`, `--slotted-tone-success-solid-hover`, `--slotted-tone-success-subtle-active`, `--slotted-tone-success-subtle-hover`, `--slotted-tone-success-surface`, `--slotted-tone-success-text`, `--slotted-tone-warning-border`, `--slotted-tone-warning-on-solid`, `--slotted-tone-warning-solid`, `--slotted-tone-warning-solid-active`, `--slotted-tone-warning-solid-hover`, `--slotted-tone-warning-subtle-active`, `--slotted-tone-warning-subtle-hover`, `--slotted-tone-warning-surface`, `--slotted-tone-warning-text`
 
 ## Examples