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

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'",
@@ -268,14 +280,12 @@
     }
   },
   "tokens": [
-    "--slotted-border-subtle",
-    "--slotted-control-border-color",
+    "--slotted-border-width-thick",
     "--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",
@@ -292,8 +302,6 @@
     "--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",
@@ -304,7 +312,10 @@
     "--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-full",
     "--slotted-radius-xs",
     "--slotted-segmented-control-active-background",
     "--slotted-segmented-control-background",
@@ -315,24 +326,29 @@
     "--slotted-segmented-control-disabled-color",
     "--slotted-segmented-control-disabled-indicator-background",
     "--slotted-segmented-control-divider-color",
+    "--slotted-segmented-control-font-weight",
+    "--slotted-segmented-control-gap",
     "--slotted-segmented-control-hover-background",
     "--slotted-segmented-control-indicator-background",
     "--slotted-segmented-control-indicator-border-color",
+    "--slotted-segmented-control-indicator-shadow",
     "--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-shadow-xs",
     "--slotted-space-1",
+    "--slotted-space-6",
+    "--slotted-surface-raised",
     "--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-text-muted",
+    "--slotted-tone-danger-border"
   ],
   "examples": [
     {
@@ -375,6 +391,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-width-thick`, `--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-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-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-full`, `--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-font-weight`, `--slotted-segmented-control-gap`, `--slotted-segmented-control-hover-background`, `--slotted-segmented-control-indicator-background`, `--slotted-segmented-control-indicator-border-color`, `--slotted-segmented-control-indicator-shadow`, `--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-shadow-xs`, `--slotted-space-1`, `--slotted-space-6`, `--slotted-surface-raised`, `--slotted-target-min`, `--slotted-text`, `--slotted-text-muted`, `--slotted-tone-danger-border`
 
 ## 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",
@@ -861,6 +861,7 @@
     "--slotted-border-width-thin",
     "--slotted-control-border-color",
     "--slotted-control-border-width",
+    "--slotted-control-focus-ring-offset",
     "--slotted-control-font-family",
     "--slotted-control-font-size-lg",
     "--slotted-control-font-size-md",

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. |
@@ -201,7 +201,7 @@ export default function SelectBasic() {
 
 ## Tokens
 
-`--slotted-border-subtle`, `--slotted-border-width-thin`, `--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-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-invalid-edge-width`, `--slotted-control-padding-inline-lg`, `--slotted-control-padding-inline-md`, `--slotted-control-padding-inline-sm`, `--slotted-control-radius`, `--slotted-control-shadow`, `--slotted-control-shadow-focus-geometry`, `--slotted-control-surface`, `--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-easing-exit`, `--slotted-easing-standard`, `--slotted-focus-ring-color`, `--slotted-focus-ring-color-invalid`, `--slotted-focus-ring-offset`, `--slotted-focus-ring-width`, `--slotted-font-family-sans`, `--slotted-font-size-xs`, `--slotted-font-weight-medium`, `--slotted-font-weight-semibold`, `--slotted-line-height-md`, `--slotted-line-height-sm`, `--slotted-radius-lg`, `--slotted-radius-none`, `--slotted-select-action-active-background`, `--slotted-select-action-color`, `--slotted-select-action-hover-background`, `--slotted-select-action-size`, `--slotted-select-arrow-color`, `--slotted-select-background`, `--slotted-select-border-color`, `--slotted-select-color`, `--slotted-select-content-border-color`, `--slotted-select-content-padding-block`, `--slotted-select-content-padding-inline`, `--slotted-select-content-radius`, `--slotted-select-content-shadow`, `--slotted-select-content-text`, `--slotted-select-content-text-muted`, `--slotted-select-disabled-background`, `--slotted-select-disabled-border-color`, `--slotted-select-disabled-color`, `--slotted-select-highlight`, `--slotted-select-highlight-active`, `--slotted-select-highlight-ring`, `--slotted-select-hover-border-color`, `--slotted-select-icon-size-min`, `--slotted-select-invalid-border-color`, `--slotted-select-invalid-edge-width`, `--slotted-select-invalid-focus-ring-color`, `--slotted-select-item-radius`, `--slotted-select-measure`, `--slotted-select-open-border-color`, `--slotted-select-placeholder-color`, `--slotted-select-plain-hover-background`, `--slotted-select-radius`, `--slotted-select-readonly-background`, `--slotted-select-search-icon-color`, `--slotted-select-selected-color`, `--slotted-select-separator-color`, `--slotted-select-shadow`, `--slotted-select-subtle-background`, `--slotted-select-subtle-border-color`, `--slotted-select-subtle-hover-background`, `--slotted-select-surface`, `--slotted-shadow-md`, `--slotted-space-1`, `--slotted-space-2`, `--slotted-space-5`, `--slotted-surface-raised`, `--slotted-surface-sunken`, `--slotted-target-comfortable`, `--slotted-target-min`, `--slotted-text`, `--slotted-text-muted`, `--slotted-tone-accent-border`, `--slotted-tone-accent-surface`, `--slotted-tone-accent-text`, `--slotted-tone-danger-border`, `--slotted-tone-secondary-subtle-active`, `--slotted-tone-secondary-subtle-hover`, `--slotted-z-index-popover`
+`--slotted-border-subtle`, `--slotted-border-width-thin`, `--slotted-control-border-color`, `--slotted-control-border-width`, `--slotted-control-focus-ring-offset`, `--slotted-control-font-family`, `--slotted-control-font-size-lg`, `--slotted-control-font-size-md`, `--slotted-control-font-size-sm`, `--slotted-control-gap-lg`, `--slotted-control-gap-md`, `--slotted-control-gap-sm`, `--slotted-control-height-lg`, `--slotted-control-height-md`, `--slotted-control-height-sm`, `--slotted-control-icon-size-lg`, `--slotted-control-icon-size-md`, `--slotted-control-icon-size-sm`, `--slotted-control-inner-size-lg`, `--slotted-control-inner-size-md`, `--slotted-control-inner-size-sm`, `--slotted-control-invalid-edge-width`, `--slotted-control-padding-inline-lg`, `--slotted-control-padding-inline-md`, `--slotted-control-padding-inline-sm`, `--slotted-control-radius`, `--slotted-control-shadow`, `--slotted-control-shadow-focus-geometry`, `--slotted-control-surface`, `--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-easing-exit`, `--slotted-easing-standard`, `--slotted-focus-ring-color`, `--slotted-focus-ring-color-invalid`, `--slotted-focus-ring-offset`, `--slotted-focus-ring-width`, `--slotted-font-family-sans`, `--slotted-font-size-xs`, `--slotted-font-weight-medium`, `--slotted-font-weight-semibold`, `--slotted-line-height-md`, `--slotted-line-height-sm`, `--slotted-radius-lg`, `--slotted-radius-none`, `--slotted-select-action-active-background`, `--slotted-select-action-color`, `--slotted-select-action-hover-background`, `--slotted-select-action-size`, `--slotted-select-arrow-color`, `--slotted-select-background`, `--slotted-select-border-color`, `--slotted-select-color`, `--slotted-select-content-border-color`, `--slotted-select-content-padding-block`, `--slotted-select-content-padding-inline`, `--slotted-select-content-radius`, `--slotted-select-content-shadow`, `--slotted-select-content-text`, `--slotted-select-content-text-muted`, `--slotted-select-disabled-background`, `--slotted-select-disabled-border-color`, `--slotted-select-disabled-color`, `--slotted-select-highlight`, `--slotted-select-highlight-active`, `--slotted-select-highlight-ring`, `--slotted-select-hover-border-color`, `--slotted-select-icon-size-min`, `--slotted-select-invalid-border-color`, `--slotted-select-invalid-edge-width`, `--slotted-select-invalid-focus-ring-color`, `--slotted-select-item-radius`, `--slotted-select-measure`, `--slotted-select-open-border-color`, `--slotted-select-placeholder-color`, `--slotted-select-plain-hover-background`, `--slotted-select-radius`, `--slotted-select-readonly-background`, `--slotted-select-search-icon-color`, `--slotted-select-selected-color`, `--slotted-select-separator-color`, `--slotted-select-shadow`, `--slotted-select-subtle-background`, `--slotted-select-subtle-border-color`, `--slotted-select-subtle-hover-background`, `--slotted-select-surface`, `--slotted-shadow-md`, `--slotted-space-1`, `--slotted-space-2`, `--slotted-space-5`, `--slotted-surface-raised`, `--slotted-surface-sunken`, `--slotted-target-comfortable`, `--slotted-target-min`, `--slotted-text`, `--slotted-text-muted`, `--slotted-tone-accent-border`, `--slotted-tone-accent-surface`, `--slotted-tone-accent-text`, `--slotted-tone-danger-border`, `--slotted-tone-secondary-subtle-active`, `--slotted-tone-secondary-subtle-hover`, `--slotted-z-index-popover`
 
 ## Examples
 

package/dist/docs/side-navigation.json

@@ -429,6 +429,7 @@
     "--slotted-app-shell-row-inset",
     "--slotted-app-shell-row-line-height",
     "--slotted-app-shell-row-mark",
+    "--slotted-app-shell-row-ring-inset",
     "--slotted-border-subtle",
     "--slotted-border-width-thin",
     "--slotted-control-font-family",
@@ -553,9 +554,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

@@ -130,7 +130,7 @@ export default function SideNavigationBasic() {
 
 ## Tokens
 
-`--slotted-app-shell-row-font-size`, `--slotted-app-shell-row-gap`, `--slotted-app-shell-row-height`, `--slotted-app-shell-row-inset`, `--slotted-app-shell-row-line-height`, `--slotted-app-shell-row-mark`, `--slotted-border-subtle`, `--slotted-border-width-thin`, `--slotted-control-font-family`, `--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-transition-duration`, `--slotted-control-transition-easing`, `--slotted-current-edge`, `--slotted-disabled-foreground`, `--slotted-duration-instant`, `--slotted-duration-medium`, `--slotted-duration-short`, `--slotted-easing-enter`, `--slotted-easing-exit`, `--slotted-easing-standard`, `--slotted-focus-ring-color`, `--slotted-focus-ring-offset`, `--slotted-focus-ring-width`, `--slotted-font-size-md`, `--slotted-font-size-sm`, `--slotted-font-size-xs`, `--slotted-font-weight-medium`, `--slotted-font-weight-regular`, `--slotted-font-weight-semibold`, `--slotted-line-height-md`, `--slotted-line-height-sm`, `--slotted-line-height-xs`, `--slotted-radius-full`, `--slotted-radius-lg`, `--slotted-radius-md`, `--slotted-shadow-md`, `--slotted-side-navigation-active-background`, `--slotted-side-navigation-color`, `--slotted-side-navigation-current-background`, `--slotted-side-navigation-current-color`, `--slotted-side-navigation-current-description-color`, `--slotted-side-navigation-current-edge`, `--slotted-side-navigation-description-color`, `--slotted-side-navigation-description-gap`, `--slotted-side-navigation-dot-color`, `--slotted-side-navigation-dot-size`, `--slotted-side-navigation-flyout-border-color`, `--slotted-side-navigation-flyout-measure`, `--slotted-side-navigation-flyout-min-measure`, `--slotted-side-navigation-flyout-radius`, `--slotted-side-navigation-flyout-shadow`, `--slotted-side-navigation-flyout-surface`, `--slotted-side-navigation-guide-color`, `--slotted-side-navigation-hover-background`, `--slotted-side-navigation-hover-color`, `--slotted-side-navigation-indent`, `--slotted-side-navigation-indent-step`, `--slotted-side-navigation-radius`, `--slotted-side-navigation-row-gap`, `--slotted-side-navigation-section-color`, `--slotted-side-navigation-section-gap`, `--slotted-side-navigation-section-label-gap`, `--slotted-space-1`, `--slotted-space-2`, `--slotted-space-3`, `--slotted-space-4`, `--slotted-space-5`, `--slotted-space-7`, `--slotted-surface-raised`, `--slotted-text`, `--slotted-text-muted`, `--slotted-tone-accent-solid`, `--slotted-tone-accent-surface`, `--slotted-tone-accent-text`, `--slotted-tone-secondary-subtle-active`, `--slotted-tone-secondary-subtle-hover`, `--slotted-z-index-popover`
+`--slotted-app-shell-row-font-size`, `--slotted-app-shell-row-gap`, `--slotted-app-shell-row-height`, `--slotted-app-shell-row-inset`, `--slotted-app-shell-row-line-height`, `--slotted-app-shell-row-mark`, `--slotted-app-shell-row-ring-inset`, `--slotted-border-subtle`, `--slotted-border-width-thin`, `--slotted-control-font-family`, `--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-transition-duration`, `--slotted-control-transition-easing`, `--slotted-current-edge`, `--slotted-disabled-foreground`, `--slotted-duration-instant`, `--slotted-duration-medium`, `--slotted-duration-short`, `--slotted-easing-enter`, `--slotted-easing-exit`, `--slotted-easing-standard`, `--slotted-focus-ring-color`, `--slotted-focus-ring-offset`, `--slotted-focus-ring-width`, `--slotted-font-size-md`, `--slotted-font-size-sm`, `--slotted-font-size-xs`, `--slotted-font-weight-medium`, `--slotted-font-weight-regular`, `--slotted-font-weight-semibold`, `--slotted-line-height-md`, `--slotted-line-height-sm`, `--slotted-line-height-xs`, `--slotted-radius-full`, `--slotted-radius-lg`, `--slotted-radius-md`, `--slotted-shadow-md`, `--slotted-side-navigation-active-background`, `--slotted-side-navigation-color`, `--slotted-side-navigation-current-background`, `--slotted-side-navigation-current-color`, `--slotted-side-navigation-current-description-color`, `--slotted-side-navigation-current-edge`, `--slotted-side-navigation-description-color`, `--slotted-side-navigation-description-gap`, `--slotted-side-navigation-dot-color`, `--slotted-side-navigation-dot-size`, `--slotted-side-navigation-flyout-border-color`, `--slotted-side-navigation-flyout-measure`, `--slotted-side-navigation-flyout-min-measure`, `--slotted-side-navigation-flyout-radius`, `--slotted-side-navigation-flyout-shadow`, `--slotted-side-navigation-flyout-surface`, `--slotted-side-navigation-guide-color`, `--slotted-side-navigation-hover-background`, `--slotted-side-navigation-hover-color`, `--slotted-side-navigation-indent`, `--slotted-side-navigation-indent-step`, `--slotted-side-navigation-radius`, `--slotted-side-navigation-row-gap`, `--slotted-side-navigation-section-color`, `--slotted-side-navigation-section-gap`, `--slotted-side-navigation-section-label-gap`, `--slotted-space-1`, `--slotted-space-2`, `--slotted-space-3`, `--slotted-space-4`, `--slotted-space-5`, `--slotted-space-7`, `--slotted-surface-raised`, `--slotted-text`, `--slotted-text-muted`, `--slotted-tone-accent-solid`, `--slotted-tone-accent-surface`, `--slotted-tone-accent-text`, `--slotted-tone-secondary-subtle-active`, `--slotted-tone-secondary-subtle-hover`, `--slotted-z-index-popover`
 
 ## Examples
 
@@ -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/build-own-element/SKILL.md

@@ -0,0 +1,90 @@
+---
+name: build-own-element
+description: Use when writing a component, widget or visual element that no family of @slotted/react draws — a timeline strip, a seat map, a heat grid, a bespoke control. Proves first that no family answers, then builds the element from the theme's tokens with the states, focus, target size, forced colours and motion the families keep.
+---
+
+# Build an element of the application's own
+
+An element of the application's own is a node the application writes and
+styles itself, outside any family (CP-04). It is the last resort, and it is
+built from the same theme as the families beside it.
+
+## 1. Prove that no family answers
+
+1. Read `../../index.md` and list the families whose line is near the
+   element.
+2. Read `../../<family>.md` for each: its anatomy, its slots, its axes.
+   When a family draws the element, or names a slot that holds it, the family
+   is used (CP-01).
+3. When a family draws a part of the element — a toggle, a popup, a list, a
+   tooltip — that part is the family, and only the rest is written.
+4. Write, in a comment above the element, the families read and what each
+   lacks.
+
+## 2. What is free and what is fixed
+
+Free, decided by the problem:
+
+- the element's shape, its arrangement and how it encodes the data — a strip,
+  a grid, a ring, a map;
+- which states it has, and what each state shows;
+- its layout inside the box it is given.
+
+Fixed, read from the theme:
+
+- every value it paints comes from a token of the group
+  `../../tokens.md` lists for that decision (OE-01, CP-05);
+- a tone carries the meaning the `tone` group gives it, and a data series takes
+  the `data` slots in order;
+- how its states yield, how focus is drawn, how large a target is, what forced
+  colours keep and how it moves (OE-02 to OE-07).
+
+A new appearance is a new combination of tokens, never a new value.
+
+## 3. Map each decision to a group
+
+| Decision                                       | Group in `../../tokens.md`                    |
+| ---------------------------------------------- | --------------------------------------------------- |
+| Distance between parts, inner padding          | `space`                                             |
+| Corners                                        | `radius`                                            |
+| Ground of the element and its parts            | `surface`; `tone` when the ground carries an intent |
+| Text                                           | `text`, `font-size`, `font-weight`, `line-height`   |
+| Edges                                          | `border`, `border-width`                            |
+| Series and categories of data                  | `data`                                              |
+| The place the reader is on, a matched span     | `current`, `highlight`                              |
+| Focus                                          | `focus-ring`                                        |
+| Hit area                                       | `target`                                            |
+| A part that stands beside controls             | `control`, `control-size`                           |
+| Movement                                       | `duration`, `easing`                                |
+| A surface above another, a layer over the page | `shadow`, `z-index`                                 |
+| A disabled part                                | `disabled`                                          |
+
+A decision no group names is written as a literal beside a comment that says
+why no token covers it (CP-05).
+
+## 4. Write it
+
+1. Give each interactive part the native element that carries its role: a
+   button for an action, a link for a destination, an input for a value. Add
+   ARIA only where no element carries the role.
+2. List the element's states, and paint each pair that can hold at once in the
+   order of OE-02.
+3. Draw focus on `:focus-visible` as an outline of `--slotted-focus-ring-width`
+   in `--slotted-focus-ring-color`, offset by `--slotted-focus-ring-offset`
+   (OE-03). Size every target to `--slotted-target-min` (OE-04), and take the
+   control step of the controls beside it (OE-05).
+4. Under `forced-colors: active`, tell each state from rest by a border,
+   an outline or text (OE-06). Move with the motion tokens, and stop a
+   repeating animation under `prefers-reduced-motion: reduce` (OE-07).
+5. Write the CSS in a layer of the application after the library's, on class
+   names of the element's own (OE-08). Reflow by a container query on a
+   container of its own (OE-09). Float with a raised surface and one shadow
+   step (OE-10).
+6. Text that stands alone takes its size from the `typography` family (CP-02).
+
+## 5. Done
+
+1. Each `Check` of `../../guidelines/own-elements.md` passes.
+2. The element's CSS holds no colour or length literal without its comment.
+3. Every custom property the element reads is listed in
+   `../../tokens.md` above "Read by their family only".

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

@@ -0,0 +1,95 @@
+---
+name: compose-screen
+description: Use when writing or changing a screen of an application built with @slotted/react — a list of records, the page of one record, a form that writes one, an overview, a report, a tree beside a list, a rule builder, a conversation or a ledger. Applies the Slotted guidelines in order and ends with each Check of the rules read.
+---
+
+# Compose a screen
+
+A screen is composed from the families' own parts first. An element of the
+screen's own exists only where no family names a place for it.
+
+## 1. Name the domain values
+
+Name the values the product is about on this screen — money, a period, a day,
+an account, a person — and the task the reader performs with each: enter it in
+one motion, step it, compare it. For each, write which family accepts the
+value and whether that family performs the task in one step with the value's
+own words. When it does not, CP-04 applies before any family is chosen: a
+family that technically accepts a value does not answer the reader's task by
+that fact.
+
+## 2. Classify the screen
+
+| The screen                                            | Topic              |
+| ----------------------------------------------------- | ------------------ |
+| Lists records, searches, filters, pages               | `list-pages.md`    |
+| Shows one record, its figures and its related records | `record-pages.md`  |
+| Creates or edits a record                             | `forms.md`         |
+| Summarises a domain in figures and charts             | `overviews.md`     |
+| Places a list beside a tree of its places             | `browsing.md`      |
+| Reads records over a chosen period                    | `reports.md`       |
+| Writes or reads a rule the system runs later          | `builders.md`      |
+| Holds a conversation the reader answers               | `conversations.md` |
+| Works a queue against candidates in three regions     | `workspaces.md`    |
+| Lists immutable changes with their cause and balance  | `ledgers.md`       |
+
+A screen can be two of these: a record with an edit form in place reads both
+topics.
+
+## 3. Read
+
+1. `../../guidelines/index.md`.
+2. `../../guidelines/composition.md`, always.
+3. The topic of step 2. Add `layout-alignment.md` and `shell-composition.md`
+   when the screen places controls in a row or in the application frame.
+4. Add `errors-and-conflicts.md` and `reading-permissions.md` when the screen
+   writes data or reads under a role.
+5. When the screen writes an element of its own, follow
+   `../../skills/build-own-element/SKILL.md`.
+
+## 4. Read each family before writing beside it
+
+For each family the screen uses, read `../../<family>.md` — its anatomy,
+its slots, its axes (CP-01). When the family names a slot for an element, the
+element stands in that slot.
+
+## 5. Compose
+
+- Every destination of the navigation is `full`, and a list adds `fill`; a
+  create or edit form is `wide`; preferences read as prose are `measure`
+  (CP-10).
+- Siblings of the screen's own stand in `inline` (one row) or `stack` (one
+  column) with a gap from the space scale; text of the screen's own takes its
+  size from the `typography` family's `text` member (CP-02).
+- A track that holds a family which scrolls states a zero minimum, so the
+  family's scroller is what scrolls (CP-03).
+- An element of the screen's own paints only with theme tokens; a literal is
+  written only beside a comment that says why no token covers it (CP-05).
+- A state a family already draws is set on the family and stated once, with
+  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 `../../skills/build-own-element/SKILL.md`.
+
+## 6. Waits
+
+Every region filled by a request and every control that starts one follow
+`../../skills/waiting-states/SKILL.md`.
+
+## 7. Done
+
+1. Each `MUST` rule of the topics read: its `Check` passes.
+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.
+5. For each value named in step 1, the control that edits it was chosen
+   against the task, and the reason is written beside it.

package/dist/docs/skills/index.md

@@ -0,0 +1,9 @@
+# Skills index
+
+Each skill, with when it applies. Read a skill before its task.
+
+- build-own-element: `./build-own-element/SKILL.md` — Use when writing a component, widget or visual element that no family of @slotted/react draws — a timeline strip, a seat map, a heat grid, a bespoke control. Proves first that no family answers, then builds the element from the theme's tokens with the states, focus, target size, forced colours and motion the families keep.
+- compose-screen: `./compose-screen/SKILL.md` — Use when writing or changing a screen of an application built with @slotted/react — a list of records, the page of one record, a form that writes one, an overview, a report, a tree beside a list, a rule builder, a conversation or a ledger. Applies the Slotted guidelines in order and ends with each Check of the rules read.
+- review-screen: `./review-screen/SKILL.md` — Use when reviewing, auditing or fixing an existing screen of an application built with @slotted/react, or when asked whether a screen follows the Slotted guidelines. Reads the rules that apply, sweeps the screen's code for the defects found without running it, and reports each finding with its rule, level and place.
+- theme-app: `./theme-app/SKILL.md` — Use when changing how an application built with @slotted/react looks, as a whole or in one region — its brand colour, a light, dark or high-contrast scheme, density, fonts, corners, or the shape of a control. Chooses the narrowest level that reaches the change — a seed, a token, a family token or a theme rule — and where it is declared.
+- waiting-states: `./waiting-states/SKILL.md` — Use when building or reviewing anything a person waits in front of in an application built with @slotted/react — placeholders, a control's own loading state, a loading overlay, a progress indicator, or the empty and error states beside them. Decides which indicator answers which wait and how placeholders are built from the anatomy they stand in for.

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

@@ -0,0 +1,77 @@
+---
+name: review-screen
+description: Use when reviewing, auditing or fixing an existing screen of an application built with @slotted/react, or when asked whether a screen follows the Slotted guidelines. Reads the rules that apply, sweeps the screen's code for the defects found without running it, and reports each finding with its rule, level and place.
+---
+
+# Review a screen
+
+A review answers one question per rule read: does the screen pass the rule's
+`Check`. A finding names a rule; a remark that names no rule is not a finding.
+
+## 1. Inventory
+
+1. List the screen's files: its component, its template, its stylesheet and
+   the requests it starts.
+2. List the families it imports, and read `../../<family>.md` for each.
+3. List the elements of the screen's own: every element that is not a family,
+   with the CSS that paints it.
+4. Classify the screen with the table in step 1 of
+   `../../skills/compose-screen/SKILL.md`.
+
+## 2. Read
+
+1. `../../guidelines/index.md` and
+   `../../guidelines/composition.md`.
+2. The topics of the classification, and each topic whose `triggers` the
+   screen matches.
+3. `own-elements.md` when step 1 listed an element of the screen's own.
+4. `../../skills/waiting-states/SKILL.md` when the screen starts a
+   request.
+
+## 3. Sweep the code
+
+Each search below finds a defect without running the screen.
+
+| Search the screen's files for                                                                                                  | Defect                                                    | Rule         |
+| ------------------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------- | ------------ |
+| A colour literal (hex, rgb, hsl, oklch), a length in pixels or rem other than zero, or a font size, in the screen's CSS        | a value the theme has a token for                         | CP-05, OE-01 |
+| A rule of the application's CSS that sets colour, border, radius, padding or type on a family's `data-ui` or `data-part`       | the screen restyles a family instead of setting its axes  | OE-08        |
+| A control that starts a request and is not in its `loading` state until the answer, except a Refresh of the whole page         | a control that fires twice                                | AF-03        |
+| A Refresh of the whole page drawing a spinner on its button, or a refetch of data on screen with no `page-header` progress bar | a wait in the wrong place, and no wait shown for the page | AF-07        |
+| An empty state drawn from the initial value of the data, before the first answer                                               | a wait shown as nothing                                   | AF-01        |
+| A spinner standing in a region that has no items yet                                                                           | placeholders missing                                      | AF-02        |
+| Siblings of the page's own spaced by margins, or text with a font size of its own                                              | layout outside the primitives                             | CP-02        |
+| A grid or flex track around a family that scrolls, with no zero minimum                                                        | the page scrolls, not the family                          | CP-03        |
+| A badge, a tag or a colour beside a family that already draws the same state                                                   | a state stated twice                                      | CP-06        |
+| An element of the screen's own that takes focus with no ring in its `focus-visible` state                                      | focus not drawn                                           | OE-03        |
+| A `data-grid` or `table` with no `variant` on a page whose `width` is not `bleed`                                              | a grid with no frame on the page's surface                | LP-15        |
+| A list page's `page-header` with a heading and no subheading, no figures and no solid primary action                           | a header that does not say what the list covers           | LP-16        |
+| A grid whose column state unpins its `actions` column                                                                          | the row's actions leave the frame                         | LP-17        |
+| A row of `stat-card`s where a label has more than three words, or one card has a comparison the others lack                    | a row of cards with no shared structure                   | OV-06        |
+| Two destinations of the navigation whose `page`s state different `width`s                                                      | the column's edges move between destinations              | CP-10        |
+| A write whose success handler refreshes only the region of the control that wrote                                              | figures elsewhere stay stale after the write              | AF-08        |
+
+A rule whose `Check` needs the screen running — a size class, a throttled
+network, the accessibility tree — is run when the environment can run it, and
+otherwise reported as not checked, with the step that checks it.
+
+## 4. Report
+
+One finding per entry, every `MUST` before every `SHOULD`:
+
+- the rule's id and level;
+- the file and the line;
+- what the screen does, in one sentence;
+- the change after which the rule's `Check` passes.
+
+A `SHOULD` the screen breaks on purpose is listed with its reason, as a
+deviation. The screen passes when no `MUST` finding remains.
+
+## 5. Fix, when asked
+
+1. Fix every `MUST` finding, then each `SHOULD` finding the request covers.
+2. A fix uses what the family offers — its state, its slot, its axis — and
+   never CSS on its parts.
+3. A literal becomes a token of the group `../../tokens.md` lists for
+   that decision.
+4. Run the searches of step 3 again on the changed files: none finds anything.