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

package/dist/docs/dialog.examples.md

@@ -624,6 +624,32 @@ Excerpt — not a complete module
 <DialogTrigger render={(props) => <Button {...props}>Edit project</Button>} />;
 ```
 
+### A layout of its own
+
+DialogContent draws no padding: the header, the body and the footer carry the inset. A layout of its own — one field, a preview, a footer — reads --slotted-dialog-inset-inline and --slotted-dialog-inset-block, so it stands in the column the parts stand in.
+
+Excerpt — not a complete module
+
+```tsx
+<DialogContent>
+  <div
+    style={{
+      display: 'grid',
+      gap: 'var(--slotted-space-5)',
+      paddingBlock: 'var(--slotted-dialog-inset-block)',
+      paddingInline: 'var(--slotted-dialog-inset-inline)',
+    }}
+  >
+    <DialogTitle>Rename file</DialogTitle>
+    <TextField aria-label="Name" defaultValue="report-q3.pdf" />
+    <img alt="First page of report-q3.pdf" src={preview} />
+  </div>
+  <DialogFooter>
+    <Button size="sm">Rename</Button>
+  </DialogFooter>
+</DialogContent>;
+```
+
 ### Deciding once for the application
 
 Eight decisions an application takes once instead of eight props on every dialog in a product. Angular Material is the only surveyed library with an equivalent, and a dialog that states one itself still wins.

package/dist/docs/dialog.json

@@ -206,7 +206,7 @@
           "part": "content",
           "element": "div",
           "required": true,
-          "purpose": "The panel. It carries role=\"dialog\" and, while modal, aria-modal=\"true\". It is a grid of three rows, header, body and footer, and only the body row shrinks, so the actions stay on screen when the body is long."
+          "purpose": "The panel. It carries role=\"dialog\" and, while modal, aria-modal=\"true\". It is a grid of three rows, header, body and footer, and only the body row shrinks, so the actions stay on screen when the body is long. It draws no padding: DialogHeader, DialogBody and DialogFooter carry the panel inset. A layout that skips them reads --slotted-dialog-inset-inline and --slotted-dialog-inset-block, which the panel states, and a theme sets the inset with --slotted-dialog-padding-inline and --slotted-dialog-padding-block."
         },
         {
           "part": "header",
@@ -497,7 +497,7 @@
           "part": "content",
           "element": "div",
           "required": true,
-          "purpose": "The panel. It carries role=\"alertdialog\" and, while modal, aria-modal=\"true\". It is a grid of three rows, header, body and footer, and only the body row shrinks, so the actions stay on screen when the body is long."
+          "purpose": "The panel. It carries role=\"alertdialog\" and, while modal, aria-modal=\"true\". It is a grid of three rows, header, body and footer, and only the body row shrinks, so the actions stay on screen when the body is long. It draws no padding: DialogHeader, DialogBody and DialogFooter carry the panel inset. A layout that skips them reads --slotted-dialog-inset-inline and --slotted-dialog-inset-block, which the panel states, and a theme sets the inset with --slotted-dialog-padding-inline and --slotted-dialog-padding-block."
         },
         {
           "part": "header",
@@ -766,6 +766,10 @@
     "--slotted-dialog-description-color",
     "--slotted-dialog-footer-surface",
     "--slotted-dialog-measure",
+    "--slotted-dialog-padding-block",
+    "--slotted-dialog-padding-block-sm",
+    "--slotted-dialog-padding-inline",
+    "--slotted-dialog-padding-inline-sm",
     "--slotted-dialog-radius",
     "--slotted-dialog-rule-color",
     "--slotted-dialog-scrim",
@@ -918,6 +922,14 @@
       "source": "<DialogTrigger render={(props) => <Button {...props}>Edit project</Button>} />;\n",
       "verdict": "excerpt"
     },
+    {
+      "id": "layout",
+      "title": "A layout of its own",
+      "note": "DialogContent draws no padding: the header, the body and the footer carry the inset. A layout of its own — one field, a preview, a footer — reads --slotted-dialog-inset-inline and --slotted-dialog-inset-block, so it stands in the column the parts stand in.",
+      "language": "tsx",
+      "source": "<DialogContent>\n  <div\n    style={{\n      display: 'grid',\n      gap: 'var(--slotted-space-5)',\n      paddingBlock: 'var(--slotted-dialog-inset-block)',\n      paddingInline: 'var(--slotted-dialog-inset-inline)',\n    }}\n  >\n    <DialogTitle>Rename file</DialogTitle>\n    <TextField aria-label=\"Name\" defaultValue=\"report-q3.pdf\" />\n    <img alt=\"First page of report-q3.pdf\" src={preview} />\n  </div>\n  <DialogFooter>\n    <Button size=\"sm\">Rename</Button>\n  </DialogFooter>\n</DialogContent>;\n",
+      "verdict": "excerpt"
+    },
     {
       "id": "defaults",
       "title": "Deciding once for the application",

package/dist/docs/dialog.md

@@ -245,7 +245,7 @@ export default function DialogBasic() {
 
 ## Tokens
 
-`--slotted-border-subtle`, `--slotted-border-width-thick`, `--slotted-border-width-thin`, `--slotted-control-font-family`, `--slotted-control-icon-size-lg`, `--slotted-control-inner-size-lg`, `--slotted-control-radius`, `--slotted-control-transition-duration`, `--slotted-control-transition-easing`, `--slotted-dialog-body-color`, `--slotted-dialog-border-color`, `--slotted-dialog-close-active-background`, `--slotted-dialog-close-color`, `--slotted-dialog-close-hover-background`, `--slotted-dialog-color`, `--slotted-dialog-description-color`, `--slotted-dialog-footer-surface`, `--slotted-dialog-measure`, `--slotted-dialog-radius`, `--slotted-dialog-rule-color`, `--slotted-dialog-scrim`, `--slotted-dialog-surface`, `--slotted-dialog-title-color`, `--slotted-dialog-title-font-family`, `--slotted-duration-long`, `--slotted-duration-medium`, `--slotted-duration-short`, `--slotted-easing-exit`, `--slotted-easing-standard`, `--slotted-focus-ring-color`, `--slotted-focus-ring-offset`, `--slotted-focus-ring-width`, `--slotted-font-family-heading`, `--slotted-font-family-sans`, `--slotted-font-size-lg`, `--slotted-font-size-md`, `--slotted-font-size-xl`, `--slotted-font-weight-semibold`, `--slotted-line-height-md`, `--slotted-radius-lg`, `--slotted-radius-sm`, `--slotted-scrim`, `--slotted-shadow-lg`, `--slotted-space-12`, `--slotted-space-2`, `--slotted-space-4`, `--slotted-space-5`, `--slotted-space-6`, `--slotted-space-7`, `--slotted-space-8`, `--slotted-surface-raised`, `--slotted-surface-sunken`, `--slotted-target-comfortable`, `--slotted-target-min`, `--slotted-text`, `--slotted-text-muted`, `--slotted-tone-accent-text`, `--slotted-tone-danger-text`, `--slotted-tone-secondary-subtle-active`, `--slotted-tone-secondary-subtle-hover`, `--slotted-tone-secondary-text`, `--slotted-tone-success-text`, `--slotted-tone-warning-text`, `--slotted-z-index-overlay`
+`--slotted-border-subtle`, `--slotted-border-width-thick`, `--slotted-border-width-thin`, `--slotted-control-font-family`, `--slotted-control-icon-size-lg`, `--slotted-control-inner-size-lg`, `--slotted-control-radius`, `--slotted-control-transition-duration`, `--slotted-control-transition-easing`, `--slotted-dialog-body-color`, `--slotted-dialog-border-color`, `--slotted-dialog-close-active-background`, `--slotted-dialog-close-color`, `--slotted-dialog-close-hover-background`, `--slotted-dialog-color`, `--slotted-dialog-description-color`, `--slotted-dialog-footer-surface`, `--slotted-dialog-measure`, `--slotted-dialog-padding-block`, `--slotted-dialog-padding-block-sm`, `--slotted-dialog-padding-inline`, `--slotted-dialog-padding-inline-sm`, `--slotted-dialog-radius`, `--slotted-dialog-rule-color`, `--slotted-dialog-scrim`, `--slotted-dialog-surface`, `--slotted-dialog-title-color`, `--slotted-dialog-title-font-family`, `--slotted-duration-long`, `--slotted-duration-medium`, `--slotted-duration-short`, `--slotted-easing-exit`, `--slotted-easing-standard`, `--slotted-focus-ring-color`, `--slotted-focus-ring-offset`, `--slotted-focus-ring-width`, `--slotted-font-family-heading`, `--slotted-font-family-sans`, `--slotted-font-size-lg`, `--slotted-font-size-md`, `--slotted-font-size-xl`, `--slotted-font-weight-semibold`, `--slotted-line-height-md`, `--slotted-radius-lg`, `--slotted-radius-sm`, `--slotted-scrim`, `--slotted-shadow-lg`, `--slotted-space-12`, `--slotted-space-2`, `--slotted-space-4`, `--slotted-space-5`, `--slotted-space-6`, `--slotted-space-7`, `--slotted-space-8`, `--slotted-surface-raised`, `--slotted-surface-sunken`, `--slotted-target-comfortable`, `--slotted-target-min`, `--slotted-text`, `--slotted-text-muted`, `--slotted-tone-accent-text`, `--slotted-tone-danger-text`, `--slotted-tone-secondary-subtle-active`, `--slotted-tone-secondary-subtle-hover`, `--slotted-tone-secondary-text`, `--slotted-tone-success-text`, `--slotted-tone-warning-text`, `--slotted-z-index-overlay`
 
 ## Examples
 

package/dist/docs/guidelines/composition.md

@@ -127,3 +127,13 @@ Why: The line beside Reply and Internal note was longer in one mode and wrapped
 Do: Give the varying text `flex: 1 1 0`, `min-inline-size: 0` and a one-line cut, write the two texts to similar lengths, and keep a control's label set fixed across modes.
 Don't: Let a mode add or remove a line, a hint or a control that changes the region's height, or let a row wrap differently in one mode than in the other.
 Check: At 1280, 570 and 390 pixels, switch the mode and read the bounding box of each box in the region: every top and height is the same in both modes.
+
+### CP-09 · A control that switches a region does not render the region in its own frame
+
+Level: MUST
+Applies to: tabs, a segmented control, a route link or a filter whose change mounts a region holding tables, grids, charts or forms
+Rule: The control's own state — the selected tab, the pressed segment — updates in the interaction's frame; the region renders from a deferred value (in React, useDeferredValue or startTransition) and states aria-busy while the shown value lags the selected one.
+Why: Mounting a region of families in the click's task blocks the next paint, and Interaction to Next Paint above 200 ms is "needs improvement" and above 500 ms "poor": a table of a hundred rows of twenty cells measured 160 ms in one task in a development build, and a 4× CPU throttle takes its 93 ms in a production build past the first threshold.
+Do: Keep the selection state urgent and hand the region the deferred value; mount only the selected panel, with mount active.
+Don't: Set the selection and the region from one state update inside the click handler, or mount every panel to make switching look instant.
+Check: Switch the control with the CPU throttled 4× in Chrome: the selection marker moves in the next frame, and the Performance panel shows no long task between the click and that paint.

package/dist/docs/guidelines/index.md

@@ -29,6 +29,7 @@ Every active rule, one line each. Load this first; load a topic file when the ta
 | CP-06 | SHOULD | A screen states a state once. Where the family has a state for it, the screen sets that state and adds nothing louder beside it. | `composition.md` |
 | CP-07 | SHOULD | A list page is `bleed` with `fill`; a record, a dashboard and an overview keep the default `wide`; a create or edit form is `content`; a page of preferences read as prose is `measure`. | `composition.md` |
 | CP-08 | MUST | Switching the mode changes the words and the values in the region, never the size, the line count or the position of any box in it or around it; text whose length differs between modes stands on one line, cut with an ellipsis and read whole from its title. | `composition.md` |
+| CP-09 | MUST | The control's own state — the selected tab, the pressed segment — updates in the interaction's frame; the region renders from a deferred value (in React, useDeferredValue or startTransition) and states aria-busy while the shown value lags the selected one. | `composition.md` |
 | CV-01 | MUST | From 600 pixels the conversation fills its region and scrolls on its own with the composer under it, and the record's context scrolls on its own beside it or behind a tab of the header; below 600 pixels the page scrolls, the composer is stuck to the bottom of the screen, and the record opens on its last message. | `conversations.md` |
 | CV-02 | SHOULD | A running clock says the business time left and the hour it falls due in the organization's zone, a passed one by how much and when it was due, a paused one that it is stopped and why; a queue's row says the span alone, and no clock is ever said in raw minutes. | `conversations.md` |
 | CV-03 | SHOULD | Each queue is a view of the list's `filter-bar`, a tree of the bar's own fields, labelled with the count of the rows it opens on; choosing it writes its pills, and editing a pill leaves a view the bar marks as changed. | `conversations.md` |
@@ -72,6 +73,7 @@ Every active rule, one line each. Load this first; load a topic file when the ta
 | LP-11 | SHOULD | Where the primary input is a touch screen, the list tools leave out the row density: the theme raises every density's rows to the touch target, and the tools keep the sort, the views and the columns on one line. | `list-pages.md` |
 | LP-12 | MUST | From 600 pixels of the page's width the listing takes the height the bar and the messages leave and scrolls its own rows while the page does not scroll; below 600 the page's `fill` does not apply, the listing is as tall as its rows and the page scrolls. | `list-pages.md` |
 | LP-13 | SHOULD | The mark takes the `sm` `size`; the default `md` belongs to a record's header and to a region with room around it. | `list-pages.md` |
+| LP-14 | MUST | A list that can hold more than a hundred rows, or more than twenty columns, is a `data-grid`, which windows rows and middle columns under its default `virtualize` of `auto`; `table` is for sets the page bounds, such as a statement's lines or a record's related rows. | `list-pages.md` |
 | OV-01 | SHOULD | The figure leads to the list page of the records it counts, and that list opens with the figure's condition applied as the bar's own pills, which the reader removes like any other. | `overviews.md` |
 | OV-02 | SHOULD | Below 600 pixels the figures are one `list` of rows that are destinations — label, comparison, number — followed by the records to act on, the work in flight, the charts, and the history last. | `overviews.md` |
 | OV-03 | SHOULD | Where the reader's scope holds one category, the chart is not drawn and one sentence states the numbers it would have compared. | `overviews.md` |

package/dist/docs/guidelines/list-pages.md

@@ -27,7 +27,8 @@ triggers:
     badge,
     tag,
   ]
-families: [data-grid, filter-bar, action-bar, pagination, page, page-header, link, badge, tag]
+families:
+  [data-grid, table, filter-bar, action-bar, pagination, page, page-header, link, badge, tag]
 ---
 
 # List pages
@@ -163,3 +164,13 @@ Why: A row sets its text at the small type step, 13 pixels in a 34-pixel row; an
 Do: Give every mark a cell holds — a state, a flag, a warning — the `sm` `size`: 12-pixel words in a 19-pixel box.
 Don't: Leave a cell's mark at the family's default, or size it up to make a state stand out; a tone says that.
 Check: On every list, every `badge` and `tag` inside a cell of a `data-grid` or a `table` carries the `sm` `size`.
+
+### LP-14 · A list that can pass a hundred rows is a data-grid
+
+Level: MUST
+Applies to: a list of records whose count the reader does not bound — transactions, postings, imports
+Rule: A list that can hold more than a hundred rows, or more than twenty columns, is a `data-grid`, which windows rows and middle columns under its default `virtualize` of `auto`; `table` is for sets the page bounds, such as a statement's lines or a record's related rows.
+Why: `table` mounts every cell: a hundred rows of twenty columns measured 93 ms in one task with a production build of React in Chrome and 160 ms with a development build, and the count of rows the store returns sets that cost.
+Do: Give the store's list a `data-grid` with its query, and keep `table` for the bounded sets inside a record or a document.
+Don't: Render an unbounded store into a `table`, or page a `table` to keep it under a hundred rows where the grid's window would have kept the whole set reachable.
+Check: Every list over an unbounded store is a `data-grid`; every `table` on a page renders a set the page bounds.

package/dist/docs/list.json

@@ -51,6 +51,7 @@
         "root",
         "section",
         "section-label",
+        "section-end",
         "section-list",
         "empty"
       ]
@@ -78,7 +79,13 @@
           "part": "section-label",
           "element": "h1 to h6, or a div",
           "required": false,
-          "purpose": "The group name. It carries the id the nested list names itself by, and data-sticky when it has to hold still while its own rows scroll past."
+          "purpose": "The group name. It carries the id the nested list names itself by, data-sticky when it has to hold still while its own rows scroll past, and data-variant: caption, the small muted name, or ruled, the name in the text colour over a rule with no ground behind it."
+        },
+        {
+          "part": "section-end",
+          "element": "span",
+          "required": false,
+          "purpose": "What stands at the end of the heading, on the line of the name: a day balance, a count. Set in tabular figures. It is rendered from the end prop."
         },
         {
           "part": "section-list",
@@ -150,6 +157,20 @@
           "appliesTo": "ListSection",
           "description": "Keeps a group name in place while its own rows scroll past it"
         },
+        {
+          "name": "end",
+          "type": "ReactNode",
+          "defaultValue": "—",
+          "appliesTo": "ListSection",
+          "description": "What stands at the end of the group heading, on the line of the name, in tabular figures"
+        },
+        {
+          "name": "labelVariant",
+          "type": "'caption' | 'ruled'",
+          "defaultValue": "caption",
+          "appliesTo": "ListSection",
+          "description": "How the group heading is drawn: the small muted name, or the name over a rule with no ground"
+        },
         {
           "name": "label",
           "type": "ReactNode",
@@ -213,6 +234,7 @@
     "--slotted-control-padding-inline-md",
     "--slotted-control-padding-inline-sm",
     "--slotted-font-size-xs",
+    "--slotted-font-weight-medium",
     "--slotted-font-weight-semibold",
     "--slotted-line-height-sm",
     "--slotted-list-background",
@@ -236,6 +258,8 @@
     "--slotted-list-section-padding-block",
     "--slotted-list-section-padding-block-lg",
     "--slotted-list-section-padding-block-sm",
+    "--slotted-list-section-rule-color",
+    "--slotted-list-section-ruled-color",
     "--slotted-radius-md",
     "--slotted-space-2",
     "--slotted-space-3",
@@ -245,6 +269,7 @@
     "--slotted-space-8",
     "--slotted-space-9",
     "--slotted-surface",
+    "--slotted-text",
     "--slotted-text-muted",
     "--slotted-z-index-sticky"
   ],

package/dist/docs/list.md

@@ -33,6 +33,7 @@ Excerpt — not a complete module
 | `root` | ul or ol, or the element render returns | yes |
 | `section` | li | no |
 | `section-label` | h1 to h6, or a div | no |
+| `section-end` | span | no |
 | `section-list` | ul or ol | no |
 | `empty` | li | no |
 
@@ -48,6 +49,8 @@ Excerpt — not a complete module
 | `loading` | `boolean` | false | List | Writes aria-busy on the set. What stands in for the rows is Skeleton, composed by the page |
 | `level` | `'none' \| '1' \| '2' \| '3' \| '4' \| '5' \| '6'` | 3 | ListSection | The heading a group name is set as. none renders a div and announces no heading |
 | `sticky` | `boolean` | false | ListSection | Keeps a group name in place while its own rows scroll past it |
+| `end` | `ReactNode` | — | ListSection | What stands at the end of the group heading, on the line of the name, in tabular figures |
+| `labelVariant` | `'caption' \| 'ruled'` | caption | ListSection | How the group heading is drawn: the small muted name, or the name over a rule with no ground |
 | `label` | `ReactNode` | — | ListSection | The group name, which the nested list is named by |
 | `labelProps / listProps` | `HTMLAttributes` | — | ListSection | Reach the heading and the nested list, for an id or a class the page owns |
 | `render` | `(props) => ReactNode` | — | List, ListSection, ListEmpty | Renders the wiring into another element — a nav, a router own list |
@@ -75,7 +78,7 @@ Excerpt — not a complete module
 
 ## Tokens
 
-`--slotted-border-subtle`, `--slotted-border-width-thin`, `--slotted-control-padding-inline-lg`, `--slotted-control-padding-inline-md`, `--slotted-control-padding-inline-sm`, `--slotted-font-size-xs`, `--slotted-font-weight-semibold`, `--slotted-line-height-sm`, `--slotted-list-background`, `--slotted-list-border-color`, `--slotted-list-border-width`, `--slotted-list-empty-color`, `--slotted-list-empty-padding`, `--slotted-list-empty-padding-lg`, `--slotted-list-empty-padding-sm`, `--slotted-list-gap`, `--slotted-list-gap-lg`, `--slotted-list-gap-sm`, `--slotted-list-padding-inline`, `--slotted-list-padding-inline-lg`, `--slotted-list-padding-inline-sm`, `--slotted-list-radius`, `--slotted-list-section-color`, `--slotted-list-section-font-size`, `--slotted-list-section-font-weight`, `--slotted-list-section-letter-spacing`, `--slotted-list-section-padding-block`, `--slotted-list-section-padding-block-lg`, `--slotted-list-section-padding-block-sm`, `--slotted-radius-md`, `--slotted-space-2`, `--slotted-space-3`, `--slotted-space-4`, `--slotted-space-5`, `--slotted-space-6`, `--slotted-space-8`, `--slotted-space-9`, `--slotted-surface`, `--slotted-text-muted`, `--slotted-z-index-sticky`
+`--slotted-border-subtle`, `--slotted-border-width-thin`, `--slotted-control-padding-inline-lg`, `--slotted-control-padding-inline-md`, `--slotted-control-padding-inline-sm`, `--slotted-font-size-xs`, `--slotted-font-weight-medium`, `--slotted-font-weight-semibold`, `--slotted-line-height-sm`, `--slotted-list-background`, `--slotted-list-border-color`, `--slotted-list-border-width`, `--slotted-list-empty-color`, `--slotted-list-empty-padding`, `--slotted-list-empty-padding-lg`, `--slotted-list-empty-padding-sm`, `--slotted-list-gap`, `--slotted-list-gap-lg`, `--slotted-list-gap-sm`, `--slotted-list-padding-inline`, `--slotted-list-padding-inline-lg`, `--slotted-list-padding-inline-sm`, `--slotted-list-radius`, `--slotted-list-section-color`, `--slotted-list-section-font-size`, `--slotted-list-section-font-weight`, `--slotted-list-section-letter-spacing`, `--slotted-list-section-padding-block`, `--slotted-list-section-padding-block-lg`, `--slotted-list-section-padding-block-sm`, `--slotted-list-section-rule-color`, `--slotted-list-section-ruled-color`, `--slotted-radius-md`, `--slotted-space-2`, `--slotted-space-3`, `--slotted-space-4`, `--slotted-space-5`, `--slotted-space-6`, `--slotted-space-8`, `--slotted-space-9`, `--slotted-surface`, `--slotted-text`, `--slotted-text-muted`, `--slotted-z-index-sticky`
 
 ## Examples
 

package/dist/docs/page.json

@@ -219,6 +219,7 @@
       "accessibility": [
         "The practice is the WAI-ARIA APG’s Landmark Regions (w3.org/WAI/ARIA/apg/practices/landmark-regions/): each page should have one main landmark, and the page is it. landmark=\"none\" is for the page that is not the document’s — inside a drawer, a dialog or the detail pane of a master–detail layout — and it renders a div so the document keeps one main.",
         "The footer is a footer element inside main, which is not a contentinfo landmark, so it is named: the catalog’s footer message by default, an aria-label the consumer writes otherwise. A reader walking the page’s controls finds “Page actions” before the buttons in it.",
+        "Content outside PageBody receives no inset: the inset lives on the body, so content written straight into Page is drawn against the viewport edges. In development, Page warns once when it holds content and no PageBody.",
         "The outline is typography’s. The body is one HeadingLevel deeper than the header, so a Section written directly in it takes h2 under the header’s h1, and a section inside that takes h3 — without either family reading the other, and without a skip the HTML Standard forbids.",
         "The body carries aria-busy while loading, which is what tells a screen reader the region is not ready. The page draws no placeholder: the header stands skeleton text of the title’s own width, and each family inside stands its own.",
         "Scrolling is the platform’s. The page never writes a scroll position, and under scroll=\"self\" the scroll part is an ordinary scrolling box a keyboard reaches with the arrow keys once something inside it has focus."

package/dist/docs/page.md

@@ -64,6 +64,7 @@ Excerpt — not a complete module
 
 - The practice is the WAI-ARIA APG’s Landmark Regions (w3.org/WAI/ARIA/apg/practices/landmark-regions/): each page should have one main landmark, and the page is it. landmark="none" is for the page that is not the document’s — inside a drawer, a dialog or the detail pane of a master–detail layout — and it renders a div so the document keeps one main.
 - The footer is a footer element inside main, which is not a contentinfo landmark, so it is named: the catalog’s footer message by default, an aria-label the consumer writes otherwise. A reader walking the page’s controls finds “Page actions” before the buttons in it.
+- Content outside PageBody receives no inset: the inset lives on the body, so content written straight into Page is drawn against the viewport edges. In development, Page warns once when it holds content and no PageBody.
 - The outline is typography’s. The body is one HeadingLevel deeper than the header, so a Section written directly in it takes h2 under the header’s h1, and a section inside that takes h3 — without either family reading the other, and without a skip the HTML Standard forbids.
 - The body carries aria-busy while loading, which is what tells a screen reader the region is not ready. The page draws no placeholder: the header stands skeleton text of the title’s own width, and each family inside stands its own.
 - Scrolling is the platform’s. The page never writes a scroll position, and under scroll="self" the scroll part is an ordinary scrolling box a keyboard reaches with the arrow keys once something inside it has focus.

package/dist/docs/popover.json

@@ -144,7 +144,7 @@
           "part": "content",
           "element": "div",
           "required": true,
-          "purpose": "The panel, with role=\"dialog\" and tabindex=\"-1\". It is named by its title and described by its description when those parts are present. aria-modal is never written, because the popover is not modal."
+          "purpose": "The panel, with role=\"dialog\" and tabindex=\"-1\". It is named by its title and described by its description when those parts are present. aria-modal is never written, because the popover is not modal. It draws no padding: PopoverHeader, PopoverBody and PopoverFooter carry the panel inset, set by --slotted-popover-padding-inline and --slotted-popover-padding-block."
         },
         {
           "part": "header",

package/dist/docs/segmented-control.json

@@ -19,6 +19,10 @@
     "condense": [
       "none",
       "icons"
+    ],
+    "variant": [
+      "track",
+      "underline"
     ]
   },
   "members": {
@@ -29,7 +33,8 @@
         "orientation": "horizontal",
         "condense": "none",
         "fullWidth": false,
-        "disabled": false
+        "disabled": false,
+        "variant": "track"
       },
       "capabilities": [
         "selection",
@@ -143,6 +148,13 @@
           "appliesTo": "SegmentedControl",
           "description": "How the segments flow and which way the thumb travels. A horizontal set writes aria-orientation, because radiogroup already implies vertical"
         },
+        {
+          "name": "variant",
+          "type": "'track' | 'underline'",
+          "defaultValue": "track",
+          "appliesTo": "SegmentedControl",
+          "description": "How the choice is drawn: a track with a thumb, or the words alone with the chosen one underlined"
+        },
         {
           "name": "condense",
           "type": "'none' | 'icons'",
@@ -269,6 +281,7 @@
   },
   "tokens": [
     "--slotted-border-subtle",
+    "--slotted-border-width-thick",
     "--slotted-control-border-color",
     "--slotted-control-border-width",
     "--slotted-control-font-family",
@@ -304,7 +317,9 @@
     "--slotted-easing-standard",
     "--slotted-focus-ring-color",
     "--slotted-focus-ring-color-invalid",
+    "--slotted-focus-ring-offset",
     "--slotted-focus-ring-width",
+    "--slotted-font-weight-medium",
     "--slotted-radius-xs",
     "--slotted-segmented-control-active-background",
     "--slotted-segmented-control-background",
@@ -324,9 +339,14 @@
     "--slotted-segmented-control-invalid-focus-ring-color",
     "--slotted-segmented-control-radius",
     "--slotted-segmented-control-shadow",
+    "--slotted-segmented-control-underline-checked-color",
+    "--slotted-segmented-control-underline-color",
+    "--slotted-segmented-control-underline-gap",
     "--slotted-space-1",
+    "--slotted-space-6",
     "--slotted-target-min",
     "--slotted-text",
+    "--slotted-text-muted",
     "--slotted-tone-accent-border",
     "--slotted-tone-accent-subtle-active",
     "--slotted-tone-accent-text",
@@ -375,6 +395,14 @@
       "source": "<SegmentedControl aria-label=\"Alinhamento\" defaultValue=\"center\">\n  <Segment aria-label=\"Início\" icon={<AlignStartIcon />} value=\"start\" />\n  <Segment aria-label=\"Centro\" icon={<AlignCenterIcon />} value=\"center\" />\n</SegmentedControl>;\n",
       "verdict": "excerpt"
     },
+    {
+      "id": "variants",
+      "title": "A track, or the words alone",
+      "note": "underline draws the same radio group as words: each as wide as itself, the chosen one in the text colour and underlined, the others muted. One tab stop, the arrows move the value, and inside a field the label names the set.",
+      "language": "tsx",
+      "source": "<SegmentedControl aria-label=\"Período\" defaultValue=\"month\" variant=\"underline\">\n  <Segment value=\"day\">Dia</Segment>\n  <Segment value=\"week\">Semana</Segment>\n  <Segment value=\"month\">Mês</Segment>\n</SegmentedControl>;\n",
+      "verdict": "excerpt"
+    },
     {
       "id": "condense",
       "title": "Narrower than its words",

package/dist/docs/segmented-control.md

@@ -41,6 +41,7 @@ Excerpt — not a complete module
 | `name` | `string` | — | SegmentedControl | The submission name the segments share, and the reason the platform treats them as one radio group. Generated when none is written, and the cost is that such a control submits under a generated key |
 | `size` | `'sm' \| 'md' \| 'lg'` | md | SegmentedControl | The control step. The track measures its segments back from it, so the whole control is exactly as tall as the field beside it |
 | `orientation` | `'horizontal' \| 'vertical'` | horizontal | SegmentedControl | How the segments flow and which way the thumb travels. A horizontal set writes aria-orientation, because radiogroup already implies vertical |
+| `variant` | `'track' \| 'underline'` | track | SegmentedControl | How the choice is drawn: a track with a thumb, or the words alone with the chosen one underlined |
 | `condense` | `'none' \| 'icons'` | none | SegmentedControl | What the control does when it is narrower than its labels need. icons keeps the marks and hides the words, and makes the control take its parent’s width so there is a width to ask a question about |
 | `fullWidth` | `boolean` | false | SegmentedControl | Whether the equal columns spread across the whole line. Left alone every column is the widest label’s |
 | `disabled` | `boolean` | false | SegmentedControl | Unstated rather than false, so the control defers to the field around it. Stated, it reaches every radio as the native attribute, which is also what makes the browser skip it with the arrows |
@@ -70,6 +71,7 @@ Excerpt — not a complete module
 | `size` | `sm`, `md`, `lg` | `md` |
 | `orientation` | `horizontal`, `vertical` | `horizontal` |
 | `condense` | `none`, `icons` | `none` |
+| `variant` | `track`, `underline` | `track` |
 
 ## Rules
 
@@ -83,7 +85,7 @@ Excerpt — not a complete module
 
 ## Tokens
 
-`--slotted-border-subtle`, `--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-invalid-edge-width`, `--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-surface`, `--slotted-control-transition-duration`, `--slotted-control-transition-easing`, `--slotted-disabled-background`, `--slotted-disabled-border`, `--slotted-disabled-foreground`, `--slotted-duration-instant`, `--slotted-duration-medium`, `--slotted-easing-standard`, `--slotted-focus-ring-color`, `--slotted-focus-ring-color-invalid`, `--slotted-focus-ring-width`, `--slotted-radius-xs`, `--slotted-segmented-control-active-background`, `--slotted-segmented-control-background`, `--slotted-segmented-control-border-color`, `--slotted-segmented-control-checked-color`, `--slotted-segmented-control-color`, `--slotted-segmented-control-disabled-border-color`, `--slotted-segmented-control-disabled-color`, `--slotted-segmented-control-disabled-indicator-background`, `--slotted-segmented-control-divider-color`, `--slotted-segmented-control-hover-background`, `--slotted-segmented-control-indicator-background`, `--slotted-segmented-control-indicator-border-color`, `--slotted-segmented-control-inset`, `--slotted-segmented-control-invalid-border-color`, `--slotted-segmented-control-invalid-edge-width`, `--slotted-segmented-control-invalid-focus-ring-color`, `--slotted-segmented-control-radius`, `--slotted-segmented-control-shadow`, `--slotted-space-1`, `--slotted-target-min`, `--slotted-text`, `--slotted-tone-accent-border`, `--slotted-tone-accent-subtle-active`, `--slotted-tone-accent-text`, `--slotted-tone-danger-border`, `--slotted-tone-secondary-subtle-active`, `--slotted-tone-secondary-subtle-hover`
+`--slotted-border-subtle`, `--slotted-border-width-thick`, `--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-invalid-edge-width`, `--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-surface`, `--slotted-control-transition-duration`, `--slotted-control-transition-easing`, `--slotted-disabled-background`, `--slotted-disabled-border`, `--slotted-disabled-foreground`, `--slotted-duration-instant`, `--slotted-duration-medium`, `--slotted-easing-standard`, `--slotted-focus-ring-color`, `--slotted-focus-ring-color-invalid`, `--slotted-focus-ring-offset`, `--slotted-focus-ring-width`, `--slotted-font-weight-medium`, `--slotted-radius-xs`, `--slotted-segmented-control-active-background`, `--slotted-segmented-control-background`, `--slotted-segmented-control-border-color`, `--slotted-segmented-control-checked-color`, `--slotted-segmented-control-color`, `--slotted-segmented-control-disabled-border-color`, `--slotted-segmented-control-disabled-color`, `--slotted-segmented-control-disabled-indicator-background`, `--slotted-segmented-control-divider-color`, `--slotted-segmented-control-hover-background`, `--slotted-segmented-control-indicator-background`, `--slotted-segmented-control-indicator-border-color`, `--slotted-segmented-control-inset`, `--slotted-segmented-control-invalid-border-color`, `--slotted-segmented-control-invalid-edge-width`, `--slotted-segmented-control-invalid-focus-ring-color`, `--slotted-segmented-control-radius`, `--slotted-segmented-control-shadow`, `--slotted-segmented-control-underline-checked-color`, `--slotted-segmented-control-underline-color`, `--slotted-segmented-control-underline-gap`, `--slotted-space-1`, `--slotted-space-6`, `--slotted-target-min`, `--slotted-text`, `--slotted-text-muted`, `--slotted-tone-accent-border`, `--slotted-tone-accent-subtle-active`, `--slotted-tone-accent-text`, `--slotted-tone-danger-border`, `--slotted-tone-secondary-subtle-active`, `--slotted-tone-secondary-subtle-hover`
 
 ## Examples
 
@@ -143,6 +145,20 @@ Excerpt — not a complete module
 </SegmentedControl>;
 ```
 
+### A track, or the words alone
+
+underline draws the same radio group as words: each as wide as itself, the chosen one in the text colour and underlined, the others muted. One tab stop, the arrows move the value, and inside a field the label names the set.
+
+Excerpt — not a complete module
+
+```tsx
+<SegmentedControl aria-label="Período" defaultValue="month" variant="underline">
+  <Segment value="day">Dia</Segment>
+  <Segment value="week">Semana</Segment>
+  <Segment value="month">Mês</Segment>
+</SegmentedControl>;
+```
+
 ### Narrower than its words
 
 Below the width its labels need, a control told to condense keeps its marks and hides its words — hidden, never removed, so every segment is announced the same at every width.

package/dist/docs/select.json

@@ -483,7 +483,7 @@
           "type": "SelectItems",
           "defaultValue": "—",
           "appliesTo": "Select",
-          "description": "Values with their labels, so the closed control can show the label of a value whose option has not been rendered. Options are rendered only while the list is open."
+          "description": "Values with their labels, read before any option renders. Without it, a held value takes its label from its SelectItem: while the list is closed and a held value has no label, the options render once outside the document and register theirs. Pass items when the options are not rendered until the list opens, such as options fetched on open."
         },
         {
           "name": "name",

package/dist/docs/select.md

@@ -100,7 +100,7 @@ export default function SelectBasic() {
 | `defaultOpen` | `boolean` | false | Select | Whether an uncontrolled select starts open. |
 | `highlightedValue` | `string \| null` | — | Select | The highlighted option. Passing it makes the highlight controlled. The highlight is where the keyboard is, not what is chosen. |
 | `defaultHighlightedValue` | `string \| null` | — | Select | The option an uncontrolled highlight starts on. |
-| `items` | `SelectItems` | — | Select | Values with their labels, so the closed control can show the label of a value whose option has not been rendered. Options are rendered only while the list is open. |
+| `items` | `SelectItems` | — | Select | Values with their labels, read before any option renders. Without it, a held value takes its label from its SelectItem: while the list is closed and a held value has no label, the options render once outside the document and register theirs. Pass items when the options are not rendered until the list opens, such as options fetched on open. |
 | `name` | `string` | — | Select | The name the value is submitted under. It renders a hidden native select, which FormData reads and a form reset restores. |
 | `form` | `string` | — | Select | The id of the form the control belongs to, when it is not the enclosing form. |
 | `total` | `number` | — | Select | The size of the whole collection when only part of it is rendered. Options with position then carry aria-setsize and aria-posinset. |

package/dist/docs/side-navigation.json

@@ -553,9 +553,9 @@
     {
       "id": "current",
       "title": "Where the reader is",
-      "note": "value on the root names the destination and a press asks it to move; a link that states current itself wins. The parent of a hidden destination is marked until its group opens, and autoExpand opens it.",
+      "note": "value on the root names the destination and a press asks it to move; a link that states current itself wins. The parent of a hidden destination is marked until its group opens, and autoExpand opens it. With a router, usePressSelection paints the press before the route renders: the item is current at once, and the navigation runs after the frame that shows it. A click carrying a modifier key is left to the browser.",
       "language": "tsx",
-      "source": "const [value, setValue] = useState<string | null>('orders');\n\n<SideNavigation value={value} onValueChange={(next) => setValue(next)}>\n  …\n</SideNavigation>;\n",
+      "source": "const { pathname } = useLocation();\nconst navigate = useNavigate();\nconst { selected, select } = usePressSelection(pathname);\n\nconst press = (to: string) => (event: MouseEvent) => {\n  if (event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) {\n    return;\n  }\n  event.preventDefault();\n  select(to, () => navigate(to));\n};\n\n<SideNavigation value={selected ?? null}>\n  …\n  <SideNavigationItem value=\"/orders\">\n    <SideNavigationLink href=\"/orders\" onClick={press('/orders')}>\n      Orders\n    </SideNavigationLink>\n  </SideNavigationItem>\n</SideNavigation>;\n",
       "verdict": "excerpt"
     },
     {

package/dist/docs/side-navigation.md

@@ -272,15 +272,30 @@ Excerpt — not a complete module
 
 ### Where the reader is
 
-value on the root names the destination and a press asks it to move; a link that states current itself wins. The parent of a hidden destination is marked until its group opens, and autoExpand opens it.
+value on the root names the destination and a press asks it to move; a link that states current itself wins. The parent of a hidden destination is marked until its group opens, and autoExpand opens it. With a router, usePressSelection paints the press before the route renders: the item is current at once, and the navigation runs after the frame that shows it. A click carrying a modifier key is left to the browser.
 
 Excerpt — not a complete module
 
 ```tsx
-const [value, setValue] = useState<string | null>('orders');
-
-<SideNavigation value={value} onValueChange={(next) => setValue(next)}>
+const { pathname } = useLocation();
+const navigate = useNavigate();
+const { selected, select } = usePressSelection(pathname);
+
+const press = (to: string) => (event: MouseEvent) => {
+  if (event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) {
+    return;
+  }
+  event.preventDefault();
+  select(to, () => navigate(to));
+};
+
+<SideNavigation value={selected ?? null}>
   …
+  <SideNavigationItem value="/orders">
+    <SideNavigationLink href="/orders" onClick={press('/orders')}>
+      Orders
+    </SideNavigationLink>
+  </SideNavigationItem>
 </SideNavigation>;
 ```
 

package/dist/docs/skills/compose-screen/SKILL.md

@@ -59,6 +59,10 @@ element stands in that slot.
   nothing louder beside it (CP-06).
 - A control that switches what a region holds changes words and values, never
   the size or the position of a box (CP-08).
+- A control that switches a region — tabs, a route, a filter — updates its
+  own state at once and renders the region from a deferred value (in React,
+  useDeferredValue or startTransition) (CP-09). A list longer than a hundred
+  rows is a `data-grid`, which windows its rows (LP-14).
 - Where no anatomy answers the problem, the screen writes an element of its
   own instead of bending a family into a shape it does not have (CP-04). That
   element is built with `node_modules/@slotted/react/dist/docs/skills/build-own-element/SKILL.md`.
@@ -74,3 +78,6 @@ Every region filled by a request and every control that starts one follow
 2. Each `SHOULD` rule not followed is listed with its reason.
 3. No CSS of the screen's own targets a family's parts; a family's appearance
    changes through its axes.
+4. In a browser with the CPU throttled 4×, each control that switches a region
+   paints its new state in the next frame, with no long task between the input
+   and that paint.

package/dist/docs/skills/theme-app/SKILL.md

@@ -55,6 +55,11 @@ new seed keeps the ratios of every scheme. A colour of the `tone`, `surface`,
 3. A colour the reader picks at runtime: write the seed property on the element
    that carries `data-slotted-theme`, with `seedStyle` from
    `@slotted/theme/seeds`, which leaves the token contract out of the bundle.
+4. A bar of the application's own that floats over scrolling content — a phone
+   tab bar, a sticky banner — is a material: its background reads
+   `--slotted-surface-material` and its backdrop filter reads
+   `--slotted-material-backdrop`. The theme makes both opaque under reduced
+   transparency and forced colours.
 
 ## 4. Restyle a control
 

package/dist/docs/split-button.json

@@ -10,6 +10,7 @@
     "tone": [
       "accent",
       "secondary",
+      "neutral",
       "success",
       "warning",
       "danger"

package/dist/docs/split-button.md

@@ -78,7 +78,7 @@ Excerpt — not a complete module
 
 | Axis | Values | Default |
 | --- | --- | --- |
-| `tone` | `accent`, `secondary`, `success`, `warning`, `danger` | `accent` |
+| `tone` | `accent`, `secondary`, `neutral`, `success`, `warning`, `danger` | `accent` |
 | `variant` | `solid`, `outline`, `ghost` | `solid` |
 | `size` | `sm`, `md`, `lg` | `md` |
 

package/dist/docs/stat-card.json

@@ -354,6 +354,7 @@
     "--slotted-font-size-xs",
     "--slotted-font-weight-medium",
     "--slotted-font-weight-semibold",
+    "--slotted-letter-spacing-tighter",
     "--slotted-line-height-2xl",
     "--slotted-line-height-3xl",
     "--slotted-line-height-4xl",

package/dist/docs/stat-card.md

@@ -114,7 +114,7 @@ Excerpt — not a complete module
 
 ## Tokens
 
-`--slotted-border-subtle`, `--slotted-border-width-thin`, `--slotted-control-icon-size-md`, `--slotted-control-icon-size-sm`, `--slotted-font-family-sans`, `--slotted-font-size-2xl`, `--slotted-font-size-3xl`, `--slotted-font-size-4xl`, `--slotted-font-size-md`, `--slotted-font-size-sm`, `--slotted-font-size-xl`, `--slotted-font-size-xs`, `--slotted-font-weight-medium`, `--slotted-font-weight-semibold`, `--slotted-line-height-2xl`, `--slotted-line-height-3xl`, `--slotted-line-height-4xl`, `--slotted-line-height-md`, `--slotted-line-height-sm`, `--slotted-line-height-xl`, `--slotted-line-height-xs`, `--slotted-radius-lg`, `--slotted-radius-none`, `--slotted-shadow-md`, `--slotted-space-1`, `--slotted-space-11`, `--slotted-space-12`, `--slotted-space-2`, `--slotted-space-3`, `--slotted-space-4`, `--slotted-space-5`, `--slotted-space-6`, `--slotted-space-7`, `--slotted-space-8`, `--slotted-space-9`, `--slotted-sparkline-block-size`, `--slotted-sparkline-block-size-lg`, `--slotted-sparkline-block-size-sm`, `--slotted-stat-card-background`, `--slotted-stat-card-background-subtle`, `--slotted-stat-card-border-color`, `--slotted-stat-card-border-width`, `--slotted-stat-card-color`, `--slotted-stat-card-color-muted`, `--slotted-stat-card-delta-font-size`, `--slotted-stat-card-delta-font-size-lg`, `--slotted-stat-card-delta-font-size-sm`, `--slotted-stat-card-indicator-size`, `--slotted-stat-card-indicator-size-lg`, `--slotted-stat-card-label-font-size`, `--slotted-stat-card-label-font-size-lg`, `--slotted-stat-card-label-font-size-sm`, `--slotted-stat-card-label-line-height`, `--slotted-stat-card-label-line-height-lg`, `--slotted-stat-card-label-line-height-sm`, `--slotted-stat-card-min-inline-size`, `--slotted-stat-card-padding-block`, `--slotted-stat-card-padding-block-lg`, `--slotted-stat-card-padding-block-sm`, `--slotted-stat-card-padding-inline`, `--slotted-stat-card-padding-inline-lg`, `--slotted-stat-card-padding-inline-sm`, `--slotted-stat-card-prose-font-size`, `--slotted-stat-card-prose-font-size-lg`, `--slotted-stat-card-prose-line-height`, `--slotted-stat-card-prose-line-height-lg`, `--slotted-stat-card-radius`, `--slotted-stat-card-region-gap`, `--slotted-stat-card-region-gap-lg`, `--slotted-stat-card-region-gap-sm`, `--slotted-stat-card-shadow`, `--slotted-stat-card-shadow-elevated`, `--slotted-stat-card-trend-gap`, `--slotted-stat-card-trend-gap-lg`, `--slotted-stat-card-trend-gap-sm`, `--slotted-stat-card-trend-inline-size`, `--slotted-stat-card-trend-inline-size-lg`, `--slotted-stat-card-trend-inline-size-sm`, `--slotted-stat-card-value-font-size`, `--slotted-stat-card-value-font-size-lg`, `--slotted-stat-card-value-font-size-sm`, `--slotted-stat-card-value-line-height`, `--slotted-stat-card-value-line-height-lg`, `--slotted-stat-card-value-line-height-sm`, `--slotted-surface-raised`, `--slotted-surface-sunken`, `--slotted-target-comfortable`, `--slotted-text`, `--slotted-text-muted`, `--slotted-tone-accent-text`, `--slotted-tone-danger-text`, `--slotted-tone-secondary-text`, `--slotted-tone-success-text`, `--slotted-tone-warning-text`
+`--slotted-border-subtle`, `--slotted-border-width-thin`, `--slotted-control-icon-size-md`, `--slotted-control-icon-size-sm`, `--slotted-font-family-sans`, `--slotted-font-size-2xl`, `--slotted-font-size-3xl`, `--slotted-font-size-4xl`, `--slotted-font-size-md`, `--slotted-font-size-sm`, `--slotted-font-size-xl`, `--slotted-font-size-xs`, `--slotted-font-weight-medium`, `--slotted-font-weight-semibold`, `--slotted-letter-spacing-tighter`, `--slotted-line-height-2xl`, `--slotted-line-height-3xl`, `--slotted-line-height-4xl`, `--slotted-line-height-md`, `--slotted-line-height-sm`, `--slotted-line-height-xl`, `--slotted-line-height-xs`, `--slotted-radius-lg`, `--slotted-radius-none`, `--slotted-shadow-md`, `--slotted-space-1`, `--slotted-space-11`, `--slotted-space-12`, `--slotted-space-2`, `--slotted-space-3`, `--slotted-space-4`, `--slotted-space-5`, `--slotted-space-6`, `--slotted-space-7`, `--slotted-space-8`, `--slotted-space-9`, `--slotted-sparkline-block-size`, `--slotted-sparkline-block-size-lg`, `--slotted-sparkline-block-size-sm`, `--slotted-stat-card-background`, `--slotted-stat-card-background-subtle`, `--slotted-stat-card-border-color`, `--slotted-stat-card-border-width`, `--slotted-stat-card-color`, `--slotted-stat-card-color-muted`, `--slotted-stat-card-delta-font-size`, `--slotted-stat-card-delta-font-size-lg`, `--slotted-stat-card-delta-font-size-sm`, `--slotted-stat-card-indicator-size`, `--slotted-stat-card-indicator-size-lg`, `--slotted-stat-card-label-font-size`, `--slotted-stat-card-label-font-size-lg`, `--slotted-stat-card-label-font-size-sm`, `--slotted-stat-card-label-line-height`, `--slotted-stat-card-label-line-height-lg`, `--slotted-stat-card-label-line-height-sm`, `--slotted-stat-card-min-inline-size`, `--slotted-stat-card-padding-block`, `--slotted-stat-card-padding-block-lg`, `--slotted-stat-card-padding-block-sm`, `--slotted-stat-card-padding-inline`, `--slotted-stat-card-padding-inline-lg`, `--slotted-stat-card-padding-inline-sm`, `--slotted-stat-card-prose-font-size`, `--slotted-stat-card-prose-font-size-lg`, `--slotted-stat-card-prose-line-height`, `--slotted-stat-card-prose-line-height-lg`, `--slotted-stat-card-radius`, `--slotted-stat-card-region-gap`, `--slotted-stat-card-region-gap-lg`, `--slotted-stat-card-region-gap-sm`, `--slotted-stat-card-shadow`, `--slotted-stat-card-shadow-elevated`, `--slotted-stat-card-trend-gap`, `--slotted-stat-card-trend-gap-lg`, `--slotted-stat-card-trend-gap-sm`, `--slotted-stat-card-trend-inline-size`, `--slotted-stat-card-trend-inline-size-lg`, `--slotted-stat-card-trend-inline-size-sm`, `--slotted-stat-card-value-font-size`, `--slotted-stat-card-value-font-size-lg`, `--slotted-stat-card-value-font-size-sm`, `--slotted-stat-card-value-line-height`, `--slotted-stat-card-value-line-height-lg`, `--slotted-stat-card-value-line-height-sm`, `--slotted-surface-raised`, `--slotted-surface-sunken`, `--slotted-target-comfortable`, `--slotted-text`, `--slotted-text-muted`, `--slotted-tone-accent-text`, `--slotted-tone-danger-text`, `--slotted-tone-secondary-text`, `--slotted-tone-success-text`, `--slotted-tone-warning-text`
 
 ## Examples
 

package/dist/docs/table.examples.md

@@ -688,7 +688,7 @@ export default function TableExpansion() {
 
 ### A header, a summary and a column that stay
 
-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.
+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.
 
 Example