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

package/dist/docs/toggle.md

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

package/dist/docs/tokens.md

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

package/dist/docs/top-navigation.examples.md

@@ -115,15 +115,33 @@ Excerpt — not a complete module
 
 ### Where the reader is
 
-value on the root names the destination and a press asks it to move with the device’s reason; a link that states current itself wins. Where the current destination has folded, more carries the mark in its place.
+value on the root names the destination and a press asks it to move with the device’s reason; a link that states current itself wins. Where the current destination has folded, more carries the mark in its place. 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>('cargas');
-
-<TopNavigation 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));
+};
+
+<TopNavigation value={selected ?? null}>
+  <TopNavigationNav>
+    <TopNavigationList>
+      <TopNavigationItem value="/cargas">
+        <TopNavigationLink href="/cargas" onClick={press('/cargas')}>
+          Cargas
+        </TopNavigationLink>
+      </TopNavigationItem>
+    </TopNavigationList>
+  </TopNavigationNav>
 </TopNavigation>;
 ```
 

package/dist/docs/top-navigation.json

@@ -598,9 +598,9 @@
     {
       "id": "current",
       "title": "Where the reader is",
-      "note": "value on the root names the destination and a press asks it to move with the device’s reason; a link that states current itself wins. Where the current destination has folded, more carries the mark in its place.",
+      "note": "value on the root names the destination and a press asks it to move with the device’s reason; a link that states current itself wins. Where the current destination has folded, more carries the mark in its place. 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>('cargas');\n\n<TopNavigation value={value} onValueChange={(next) => setValue(next)}>\n  …\n</TopNavigation>;\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<TopNavigation value={selected ?? null}>\n  <TopNavigationNav>\n    <TopNavigationList>\n      <TopNavigationItem value=\"/cargas\">\n        <TopNavigationLink href=\"/cargas\" onClick={press('/cargas')}>\n          Cargas\n        </TopNavigationLink>\n      </TopNavigationItem>\n    </TopNavigationList>\n  </TopNavigationNav>\n</TopNavigation>;\n",
       "verdict": "excerpt"
     },
     {

package/dist/docs/tour.json

@@ -174,7 +174,7 @@
           "part": "content",
           "element": "div role=\"dialog\"",
           "required": true,
-          "purpose": "TourContent. The card: named by the title, described by the description, aria-modal on a modal step. Takes focus and reads the arrow keys."
+          "purpose": "TourContent. The card: named by the title, described by the description, aria-modal on a modal step. Takes focus and reads the arrow keys. It draws no padding: TourHeader, TourBody and TourFooter carry the card inset, set by --slotted-tour-padding-inline and --slotted-tour-padding-block."
         },
         {
           "part": "media",