@slotted/react 0.1.0-beta.1 → 0.1.0-beta.11

package/dist/docs/alert.json

@@ -10,6 +10,7 @@
     "tone": [
       "accent",
       "secondary",
+      "info",
       "success",
       "warning",
       "danger"
@@ -118,7 +119,7 @@
       "api": [
         {
           "name": "tone",
-          "type": "'accent' | 'secondary' | 'success' | 'warning' | 'danger'",
+          "type": "'accent' | 'secondary' | 'info' | 'success' | 'warning' | 'danger'",
           "defaultValue": "accent",
           "appliesTo": "Alert",
           "description": "Which of the five semantic colours the message speaks in, and which mark it draws: circle-info, none for secondary, circle-check, circle-alert, circle-x"
@@ -304,6 +305,11 @@
     "--slotted-tone-danger-solid",
     "--slotted-tone-danger-surface",
     "--slotted-tone-danger-text",
+    "--slotted-tone-info-border",
+    "--slotted-tone-info-on-solid",
+    "--slotted-tone-info-solid",
+    "--slotted-tone-info-surface",
+    "--slotted-tone-info-text",
     "--slotted-tone-secondary-border",
     "--slotted-tone-secondary-on-solid",
     "--slotted-tone-secondary-solid",

package/dist/docs/alert.md

@@ -45,7 +45,7 @@ Excerpt — not a complete module
 
 | Name | Type | Default | Applies to | Description |
 | --- | --- | --- | --- | --- |
-| `tone` | `'accent' \| 'secondary' \| 'success' \| 'warning' \| 'danger'` | accent | Alert | Which of the five semantic colours the message speaks in, and which mark it draws: circle-info, none for secondary, circle-check, circle-alert, circle-x |
+| `tone` | `'accent' \| 'secondary' \| 'info' \| 'success' \| 'warning' \| 'danger'` | accent | Alert | Which of the five semantic colours the message speaks in, and which mark it draws: circle-info, none for secondary, circle-check, circle-alert, circle-x |
 | `variant` | `'soft' \| 'outline' \| 'solid'` | soft | Alert | How that colour is painted. soft carries the tone’s surface and its border, outline the border alone, solid the tone’s fill and the ink the theme measures against it |
 | `reach` | `'inline' \| 'section' \| 'page'` | section | Alert | The scope the message applies to. inline is tightest and sits beside a field group; page loses its corners and its inline edges because it runs to both edges of what holds it |
 | `live` | `'off' \| 'polite' \| 'assertive'` | off | Alert | Whether the text announces itself. polite writes role="status" on the content part and assertive writes role="alert"; both imply aria-live and aria-atomic, and neither is written on the box |
@@ -71,7 +71,7 @@ Excerpt — not a complete module
 
 | Axis | Values | Default |
 | --- | --- | --- |
-| `tone` | `accent`, `secondary`, `success`, `warning`, `danger` | `accent` |
+| `tone` | `accent`, `secondary`, `info`, `success`, `warning`, `danger` | `accent` |
 | `variant` | `soft`, `outline`, `solid` | `soft` |
 | `reach` | `inline`, `section`, `page` | `section` |
 | `live` | `off`, `polite`, `assertive` | `off` |
@@ -89,7 +89,7 @@ Excerpt — not a complete module
 
 ## Tokens
 
-`--slotted-alert-actions-gap`, `--slotted-alert-border-width`, `--slotted-alert-column-gap`, `--slotted-alert-dismiss-radius`, `--slotted-alert-dismiss-size`, `--slotted-alert-font-family`, `--slotted-alert-padding-block`, `--slotted-alert-padding-inline`, `--slotted-alert-radius`, `--slotted-alert-row-gap`, `--slotted-alert-state-layer-active`, `--slotted-alert-state-layer-hover`, `--slotted-alert-text-gap`, `--slotted-alert-title-font-family`, `--slotted-alert-title-font-weight`, `--slotted-border-width-thin`, `--slotted-control-font-family`, `--slotted-control-font-size-lg`, `--slotted-control-font-size-md`, `--slotted-control-font-size-sm`, `--slotted-control-icon-size-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-radius`, `--slotted-control-transition-duration`, `--slotted-control-transition-easing`, `--slotted-disabled-foreground`, `--slotted-duration-short`, `--slotted-easing-enter`, `--slotted-easing-exit`, `--slotted-focus-ring-color`, `--slotted-focus-ring-offset`, `--slotted-focus-ring-width`, `--slotted-font-family-heading`, `--slotted-font-family-sans`, `--slotted-font-weight-semibold`, `--slotted-line-height-md`, `--slotted-radius-md`, `--slotted-radius-sm`, `--slotted-space-2`, `--slotted-space-3`, `--slotted-space-4`, `--slotted-space-5`, `--slotted-space-6`, `--slotted-space-7`, `--slotted-target-comfortable`, `--slotted-target-min`, `--slotted-tone-accent-border`, `--slotted-tone-accent-on-solid`, `--slotted-tone-accent-solid`, `--slotted-tone-accent-surface`, `--slotted-tone-accent-text`, `--slotted-tone-danger-border`, `--slotted-tone-danger-on-solid`, `--slotted-tone-danger-solid`, `--slotted-tone-danger-surface`, `--slotted-tone-danger-text`, `--slotted-tone-secondary-border`, `--slotted-tone-secondary-on-solid`, `--slotted-tone-secondary-solid`, `--slotted-tone-secondary-surface`, `--slotted-tone-secondary-text`, `--slotted-tone-success-border`, `--slotted-tone-success-on-solid`, `--slotted-tone-success-solid`, `--slotted-tone-success-surface`, `--slotted-tone-success-text`, `--slotted-tone-warning-border`, `--slotted-tone-warning-on-solid`, `--slotted-tone-warning-solid`, `--slotted-tone-warning-surface`, `--slotted-tone-warning-text`
+`--slotted-alert-actions-gap`, `--slotted-alert-border-width`, `--slotted-alert-column-gap`, `--slotted-alert-dismiss-radius`, `--slotted-alert-dismiss-size`, `--slotted-alert-font-family`, `--slotted-alert-padding-block`, `--slotted-alert-padding-inline`, `--slotted-alert-radius`, `--slotted-alert-row-gap`, `--slotted-alert-state-layer-active`, `--slotted-alert-state-layer-hover`, `--slotted-alert-text-gap`, `--slotted-alert-title-font-family`, `--slotted-alert-title-font-weight`, `--slotted-border-width-thin`, `--slotted-control-font-family`, `--slotted-control-font-size-lg`, `--slotted-control-font-size-md`, `--slotted-control-font-size-sm`, `--slotted-control-icon-size-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-radius`, `--slotted-control-transition-duration`, `--slotted-control-transition-easing`, `--slotted-disabled-foreground`, `--slotted-duration-short`, `--slotted-easing-enter`, `--slotted-easing-exit`, `--slotted-focus-ring-color`, `--slotted-focus-ring-offset`, `--slotted-focus-ring-width`, `--slotted-font-family-heading`, `--slotted-font-family-sans`, `--slotted-font-weight-semibold`, `--slotted-line-height-md`, `--slotted-radius-md`, `--slotted-radius-sm`, `--slotted-space-2`, `--slotted-space-3`, `--slotted-space-4`, `--slotted-space-5`, `--slotted-space-6`, `--slotted-space-7`, `--slotted-target-comfortable`, `--slotted-target-min`, `--slotted-tone-accent-border`, `--slotted-tone-accent-on-solid`, `--slotted-tone-accent-solid`, `--slotted-tone-accent-surface`, `--slotted-tone-accent-text`, `--slotted-tone-danger-border`, `--slotted-tone-danger-on-solid`, `--slotted-tone-danger-solid`, `--slotted-tone-danger-surface`, `--slotted-tone-danger-text`, `--slotted-tone-info-border`, `--slotted-tone-info-on-solid`, `--slotted-tone-info-solid`, `--slotted-tone-info-surface`, `--slotted-tone-info-text`, `--slotted-tone-secondary-border`, `--slotted-tone-secondary-on-solid`, `--slotted-tone-secondary-solid`, `--slotted-tone-secondary-surface`, `--slotted-tone-secondary-text`, `--slotted-tone-success-border`, `--slotted-tone-success-on-solid`, `--slotted-tone-success-solid`, `--slotted-tone-success-surface`, `--slotted-tone-success-text`, `--slotted-tone-warning-border`, `--slotted-tone-warning-on-solid`, `--slotted-tone-warning-solid`, `--slotted-tone-warning-surface`, `--slotted-tone-warning-text`
 
 ## Examples
 

package/dist/docs/app-shell.examples.md

@@ -304,7 +304,7 @@ const navigation = useNavigation();
 
 ### The first thing a keyboard meets
 
-Press Tab from the top of the frame: a link to the content appears, then one to the navigation, then one to the pane — one per region that rendered and is open, out of the flow until focused. The content region carries tabindex="-1", so the link moves the focus as well as the scroll.
+Press Tab from the top of the frame: a link to the content appears, then one to the navigation, then one to the pane — one per region that rendered and is open, out of the flow until focused. The link makes the content region focusable for that one focus, so it moves the focus as well as the scroll.
 
 Excerpt — not a complete module
 

package/dist/docs/app-shell.json

@@ -194,7 +194,7 @@
           "part": "nav",
           "element": "nav, or the element render returns",
           "required": false,
-          "purpose": "The navigation landmark, and one element across all three modes: the rail is this nav at another inline size, which keeps the focus and the scroll position where the reader left them. A query container of its own, named slotted-app-shell-nav, so the rows inside answer the rail without the shell telling them anything."
+          "purpose": "The navigation landmark, and one element across all three modes: the rail is this nav at another inline size, which keeps the focus and the scroll position where the reader left them. Its inline axis clips and its block axis scrolls, so a single column taller than the region keeps its foot reachable. A footer that must stay visible goes in nav-footer, between nav-header and a nav-body that scrolls. A query container of its own, named slotted-app-shell-nav, so the rows inside answer the rail without the shell telling them anything."
         },
         {
           "part": "nav-rail",
@@ -228,9 +228,9 @@
         },
         {
           "part": "main",
-          "element": "main with tabindex=\"-1\", or the element render returns",
+          "element": "main, or the element render returns",
           "required": true,
-          "purpose": "The main landmark and the skip link’s destination. Without the tabindex the link moves the scroll and leaves the focus behind, in Safari and in Firefox."
+          "purpose": "The main landmark and the skip link’s destination. The skip link and focusMain() write tabindex=\"-1\" for the focus they move, and blur or the next pointer press inside removes it: a main focusable all the time takes the focus of every click on its text, and the next key draws the ring around the page."
         },
         {
           "part": "progress",
@@ -571,7 +571,7 @@
         "The structure is the WAI-ARIA APG’s Landmark Regions (w3.org/WAI/ARIA/apg/practices/landmark-regions/), and every one of the five is earned from the element rather than written as a role: header in the context of the body is banner, nav is navigation, main is main, aside is complementary, footer is contentinfo. The root is a div for exactly that reason — a main inside a sectioning element stops being a landmark, and the shell has to be placeable anywhere.",
         "Both controls are the APG’s Disclosure pattern (w3.org/WAI/ARIA/apg/patterns/disclosure/): real buttons, so Enter and Space activate them natively, carrying aria-expanded and aria-controls pointing at their region. One departure is written and costed: under collapsedTo=\"rail\" the navigation does not disappear, it narrows — aria-expanded is still true or false about the region’s full form, and the region stays in the tab order because a rail whose destinations cannot be reached is not a rail. The pane has no such departure: closed, it leaves the layout and the tab order.",
         "A document with more than one navigation or complementary landmark needs a unique label on each, so both regions carry the family’s strings and a consumer may replace either per instance. Each control’s own name changes with the state — “Open navigation” and “Close navigation”, “Open side panel” and “Close side panel” — because a control whose name never changes leaves the reader to infer the state from aria-expanded alone.",
-        "The skip links are written from the regions that rendered and are open, so no link ever points at a target nobody built or the reader closed, and main carries tabindex=\"-1\": without it the browser moves the scroll and leaves the focus behind in Safari and Firefox, which is a link that appears to work and moves nothing a screen reader follows.",
+        "The skip links are written from the regions that rendered and are open, so no link ever points at a target nobody built or the reader closed, and the main link writes tabindex=\"-1\" on main before it moves the focus: without it the browser moves the scroll and leaves the focus behind in Safari and Firefox. Blur or the next pointer press inside removes the attribute, so a click on the content never focuses main.",
         "While an overlaid region is modal, @slotted/core/focus contains the keyboard inside it and returns it to the control that opened it on close, and every region beside it — the banner included — takes inert, so Tab cannot reach them and a screen reader does not read them. The ways out are Escape, the veil, a destination, and whatever control the product put in the panel. Two layers can be open together only with both modes forced, and @slotted/core/dismissable-layer keeps one stack, so Escape reaches the topmost.",
         "The pane’s edge is the APG’s Window Splitter (w3.org/WAI/ARIA/apg/patterns/windowsplitter/): a focusable separator with aria-orientation=\"vertical\", aria-controls pointing at the pane and aria-valuemin, aria-valuemax and aria-valuenow as whole percentages of the shell, named “Resize panel”. ArrowLeft and ArrowRight move it sixteen pixels, sixty-four with Shift, by the direction on the screen — so ArrowLeft grows an end pane and shrinks a start one, mirrored in right-to-left — and Home and End go to the limits.",
         "Nothing important depends on hover, the frame answers its own inline size rather than the window’s — which is what makes a 400% zoom behave like a narrow window — and every transition comes from the motion scale, so prefers-reduced-motion collapses all of them at once."
@@ -798,7 +798,7 @@
     {
       "id": "skipLinks",
       "title": "The first thing a keyboard meets",
-      "note": "Press Tab from the top of the frame: a link to the content appears, then one to the navigation, then one to the pane — one per region that rendered and is open, out of the flow until focused. The content region carries tabindex=\"-1\", so the link moves the focus as well as the scroll.",
+      "note": "Press Tab from the top of the frame: a link to the content appears, then one to the navigation, then one to the pane — one per region that rendered and is open, out of the flow until focused. The link makes the content region focusable for that one focus, so it moves the focus as well as the scroll.",
       "language": "tsx",
       "source": "<AppShell messages={{ skipToMain: 'Skip to the order' }}>\n  <AppShellMain>…</AppShellMain>\n</AppShell>;\n",
       "verdict": "excerpt"

package/dist/docs/app-shell.md

@@ -100,7 +100,7 @@ export default function AppShellBasic() {
 | `nav-body` | div | no |
 | `nav-footer` | div | no |
 | `scrim` | div | no |
-| `main` | main with tabindex="-1", or the element render returns | yes |
+| `main` | main, or the element render returns | yes |
 | `progress` | div, holding one ProgressBar at placement="edge-start" | no |
 | `aside` | aside, or the element render returns | no |
 | `aside-resizer` | div with role="separator", or the element render returns | no |
@@ -186,7 +186,7 @@ export default function AppShellBasic() {
 - The structure is the WAI-ARIA APG’s Landmark Regions (w3.org/WAI/ARIA/apg/practices/landmark-regions/), and every one of the five is earned from the element rather than written as a role: header in the context of the body is banner, nav is navigation, main is main, aside is complementary, footer is contentinfo. The root is a div for exactly that reason — a main inside a sectioning element stops being a landmark, and the shell has to be placeable anywhere.
 - Both controls are the APG’s Disclosure pattern (w3.org/WAI/ARIA/apg/patterns/disclosure/): real buttons, so Enter and Space activate them natively, carrying aria-expanded and aria-controls pointing at their region. One departure is written and costed: under collapsedTo="rail" the navigation does not disappear, it narrows — aria-expanded is still true or false about the region’s full form, and the region stays in the tab order because a rail whose destinations cannot be reached is not a rail. The pane has no such departure: closed, it leaves the layout and the tab order.
 - A document with more than one navigation or complementary landmark needs a unique label on each, so both regions carry the family’s strings and a consumer may replace either per instance. Each control’s own name changes with the state — “Open navigation” and “Close navigation”, “Open side panel” and “Close side panel” — because a control whose name never changes leaves the reader to infer the state from aria-expanded alone.
-- The skip links are written from the regions that rendered and are open, so no link ever points at a target nobody built or the reader closed, and main carries tabindex="-1": without it the browser moves the scroll and leaves the focus behind in Safari and Firefox, which is a link that appears to work and moves nothing a screen reader follows.
+- The skip links are written from the regions that rendered and are open, so no link ever points at a target nobody built or the reader closed, and the main link writes tabindex="-1" on main before it moves the focus: without it the browser moves the scroll and leaves the focus behind in Safari and Firefox. Blur or the next pointer press inside removes the attribute, so a click on the content never focuses main.
 - While an overlaid region is modal, @slotted/core/focus contains the keyboard inside it and returns it to the control that opened it on close, and every region beside it — the banner included — takes inert, so Tab cannot reach them and a screen reader does not read them. The ways out are Escape, the veil, a destination, and whatever control the product put in the panel. Two layers can be open together only with both modes forced, and @slotted/core/dismissable-layer keeps one stack, so Escape reaches the topmost.
 - The pane’s edge is the APG’s Window Splitter (w3.org/WAI/ARIA/apg/patterns/windowsplitter/): a focusable separator with aria-orientation="vertical", aria-controls pointing at the pane and aria-valuemin, aria-valuemax and aria-valuenow as whole percentages of the shell, named “Resize panel”. ArrowLeft and ArrowRight move it sixteen pixels, sixty-four with Shift, by the direction on the screen — so ArrowLeft grows an end pane and shrinks a start one, mirrored in right-to-left — and Home and End go to the limits.
 - Nothing important depends on hover, the frame answers its own inline size rather than the window’s — which is what makes a 400% zoom behave like a narrow window — and every transition comes from the motion scale, so prefers-reduced-motion collapses all of them at once.

package/dist/docs/avatar.json

@@ -22,6 +22,7 @@
       "auto",
       "accent",
       "secondary",
+      "info",
       "success",
       "warning",
       "danger"
@@ -30,6 +31,11 @@
       "soft",
       "solid"
     ],
+    "surface": [
+      "tone",
+      "none",
+      "plate"
+    ],
     "status": [
       "idle",
       "loading",
@@ -45,6 +51,7 @@
         "shape": "circle",
         "tone": "auto",
         "variant": "soft",
+        "surface": "tone",
         "decorative": false,
         "disabled": false
       },
@@ -97,7 +104,7 @@
         },
         {
           "name": "tone",
-          "type": "'auto' | 'accent' | 'secondary' | 'success' | 'warning' | 'danger'",
+          "type": "'auto' | 'accent' | 'secondary' | 'info' | 'success' | 'warning' | 'danger'",
           "defaultValue": "auto",
           "appliesTo": "Avatar",
           "description": "Which of the five semantic colours the fallback is painted in. auto derives it from the name"
@@ -116,6 +123,13 @@
           "appliesTo": "Avatar",
           "description": "How that colour is painted: tinted, or filled"
         },
+        {
+          "name": "surface",
+          "type": "'tone' | 'none' | 'plate'",
+          "defaultValue": "tone",
+          "appliesTo": "Avatar",
+          "description": "The ground behind the avatar: the tone behind the fallback and nothing behind a loaded picture; nothing at all; or a light plate in every scheme, for a logo made for a white ground (--slotted-avatar-plate-surface)"
+        },
         {
           "name": "size",
           "type": "'xs' | 'sm' | 'md' | 'lg' | 'xl'",
@@ -225,6 +239,8 @@
     "--slotted-avatar-font-weight",
     "--slotted-avatar-glyph-size",
     "--slotted-avatar-initials-size",
+    "--slotted-avatar-plate-color",
+    "--slotted-avatar-plate-surface",
     "--slotted-avatar-radius",
     "--slotted-avatar-ring-color",
     "--slotted-avatar-ring-width",
@@ -265,6 +281,11 @@
     "--slotted-tone-danger-solid",
     "--slotted-tone-danger-surface",
     "--slotted-tone-danger-text",
+    "--slotted-tone-info-border",
+    "--slotted-tone-info-on-solid",
+    "--slotted-tone-info-solid",
+    "--slotted-tone-info-surface",
+    "--slotted-tone-info-text",
     "--slotted-tone-secondary-border",
     "--slotted-tone-secondary-on-solid",
     "--slotted-tone-secondary-solid-hover",

package/dist/docs/avatar.md

@@ -18,9 +18,10 @@ Excerpt — not a complete module
 | `name` | `string` | — | Avatar | The person or entity. It is the accessible name in every status, the source of the initials, and the seed of the colour |
 | `src` | `string` | — | Avatar | The picture. Absent, the avatar is its fallback and nothing is requested |
 | `initials` | `string` | — | Avatar | The letters to draw, in place of the ones derived from the name |
-| `tone` | `'auto' \| 'accent' \| 'secondary' \| 'success' \| 'warning' \| 'danger'` | auto | Avatar | Which of the five semantic colours the fallback is painted in. auto derives it from the name |
+| `tone` | `'auto' \| 'accent' \| 'secondary' \| 'info' \| 'success' \| 'warning' \| 'danger'` | auto | Avatar | Which of the five semantic colours the fallback is painted in. auto derives it from the name |
 | `idFor` | `string` | — | Avatar | A stable identifier to derive the colour from, when the name is not stable or two people share one |
 | `variant` | `'soft' \| 'solid'` | soft | Avatar | How that colour is painted: tinted, or filled |
+| `surface` | `'tone' \| 'none' \| 'plate'` | tone | Avatar | The ground behind the avatar: the tone behind the fallback and nothing behind a loaded picture; nothing at all; or a light plate in every scheme, for a logo made for a white ground (--slotted-avatar-plate-surface) |
 | `size` | `'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'` | md | Avatar | Five steps, each of which answers density. --slotted-avatar-size states a size no step holds |
 | `shape` | `'circle' \| 'square'` | circle | Avatar | A circle is a person; a square is a team, an organisation or a bot |
 | `status` | `'idle' \| 'loading' \| 'loaded' \| 'error'` | — | Avatar | Where the picture is. Supplied, it wins over what the family derives from the element |
@@ -40,8 +41,9 @@ Excerpt — not a complete module
 | --- | --- | --- |
 | `size` | `xs`, `sm`, `md`, `lg`, `xl` | `md` |
 | `shape` | `circle`, `square` | `circle` |
-| `tone` | `auto`, `accent`, `secondary`, `success`, `warning`, `danger` | `auto` |
+| `tone` | `auto`, `accent`, `secondary`, `info`, `success`, `warning`, `danger` | `auto` |
 | `variant` | `soft`, `solid` | `soft` |
+| `surface` | `tone`, `none`, `plate` | `tone` |
 | `status` | `idle`, `loading`, `loaded`, `error` | — |
 
 ## Rules
@@ -59,7 +61,7 @@ Excerpt — not a complete module
 
 ## Tokens
 
-`--slotted-avatar-border-width`, `--slotted-avatar-disabled-image-filter`, `--slotted-avatar-elevation`, `--slotted-avatar-font-family`, `--slotted-avatar-font-weight`, `--slotted-avatar-glyph-size`, `--slotted-avatar-initials-size`, `--slotted-avatar-radius`, `--slotted-avatar-ring-color`, `--slotted-avatar-ring-width`, `--slotted-avatar-size`, `--slotted-avatar-size-lg`, `--slotted-avatar-size-md`, `--slotted-avatar-size-sm`, `--slotted-avatar-size-xl`, `--slotted-avatar-size-xs`, `--slotted-avatar-state-layer-active`, `--slotted-avatar-state-layer-hover`, `--slotted-border-strong`, `--slotted-border-subtle`, `--slotted-border-width-thick`, `--slotted-border-width-thin`, `--slotted-control-font-family`, `--slotted-disabled-background`, `--slotted-disabled-border`, `--slotted-disabled-foreground`, `--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-weight-medium`, `--slotted-radius-full`, `--slotted-surface`, `--slotted-target-min`, `--slotted-tone-accent-border`, `--slotted-tone-accent-on-solid`, `--slotted-tone-accent-solid`, `--slotted-tone-accent-surface`, `--slotted-tone-accent-text`, `--slotted-tone-danger-border`, `--slotted-tone-danger-on-solid`, `--slotted-tone-danger-solid`, `--slotted-tone-danger-surface`, `--slotted-tone-danger-text`, `--slotted-tone-secondary-border`, `--slotted-tone-secondary-on-solid`, `--slotted-tone-secondary-solid-hover`, `--slotted-tone-secondary-surface`, `--slotted-tone-secondary-text`, `--slotted-tone-success-border`, `--slotted-tone-success-on-solid`, `--slotted-tone-success-solid`, `--slotted-tone-success-surface`, `--slotted-tone-success-text`, `--slotted-tone-warning-border`, `--slotted-tone-warning-on-solid`, `--slotted-tone-warning-solid`, `--slotted-tone-warning-surface`, `--slotted-tone-warning-text`
+`--slotted-avatar-border-width`, `--slotted-avatar-disabled-image-filter`, `--slotted-avatar-elevation`, `--slotted-avatar-font-family`, `--slotted-avatar-font-weight`, `--slotted-avatar-glyph-size`, `--slotted-avatar-initials-size`, `--slotted-avatar-plate-color`, `--slotted-avatar-plate-surface`, `--slotted-avatar-radius`, `--slotted-avatar-ring-color`, `--slotted-avatar-ring-width`, `--slotted-avatar-size`, `--slotted-avatar-size-lg`, `--slotted-avatar-size-md`, `--slotted-avatar-size-sm`, `--slotted-avatar-size-xl`, `--slotted-avatar-size-xs`, `--slotted-avatar-state-layer-active`, `--slotted-avatar-state-layer-hover`, `--slotted-border-strong`, `--slotted-border-subtle`, `--slotted-border-width-thick`, `--slotted-border-width-thin`, `--slotted-control-font-family`, `--slotted-disabled-background`, `--slotted-disabled-border`, `--slotted-disabled-foreground`, `--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-weight-medium`, `--slotted-radius-full`, `--slotted-surface`, `--slotted-target-min`, `--slotted-tone-accent-border`, `--slotted-tone-accent-on-solid`, `--slotted-tone-accent-solid`, `--slotted-tone-accent-surface`, `--slotted-tone-accent-text`, `--slotted-tone-danger-border`, `--slotted-tone-danger-on-solid`, `--slotted-tone-danger-solid`, `--slotted-tone-danger-surface`, `--slotted-tone-danger-text`, `--slotted-tone-info-border`, `--slotted-tone-info-on-solid`, `--slotted-tone-info-solid`, `--slotted-tone-info-surface`, `--slotted-tone-info-text`, `--slotted-tone-secondary-border`, `--slotted-tone-secondary-on-solid`, `--slotted-tone-secondary-solid-hover`, `--slotted-tone-secondary-surface`, `--slotted-tone-secondary-text`, `--slotted-tone-success-border`, `--slotted-tone-success-on-solid`, `--slotted-tone-success-solid`, `--slotted-tone-success-surface`, `--slotted-tone-success-text`, `--slotted-tone-warning-border`, `--slotted-tone-warning-on-solid`, `--slotted-tone-warning-solid`, `--slotted-tone-warning-surface`, `--slotted-tone-warning-text`
 
 ## Examples
 

package/dist/docs/badge.json

@@ -10,6 +10,7 @@
     "tone": [
       "accent",
       "secondary",
+      "info",
       "success",
       "warning",
       "danger"
@@ -88,7 +89,7 @@
       "api": [
         {
           "name": "tone",
-          "type": "'accent' | 'secondary' | 'success' | 'warning' | 'danger'",
+          "type": "'accent' | 'secondary' | 'info' | 'success' | 'warning' | 'danger'",
           "defaultValue": "secondary",
           "appliesTo": "Badge",
           "description": "Which of the five semantic colours the badge speaks in"
@@ -265,6 +266,11 @@
     "--slotted-tone-danger-solid",
     "--slotted-tone-danger-surface",
     "--slotted-tone-danger-text",
+    "--slotted-tone-info-border",
+    "--slotted-tone-info-on-solid",
+    "--slotted-tone-info-solid",
+    "--slotted-tone-info-surface",
+    "--slotted-tone-info-text",
     "--slotted-tone-secondary-border",
     "--slotted-tone-secondary-on-solid",
     "--slotted-tone-secondary-solid-hover",

package/dist/docs/badge.md

@@ -17,7 +17,7 @@ Excerpt — not a complete module
 
 | Name | Type | Default | Applies to | Description |
 | --- | --- | --- | --- | --- |
-| `tone` | `'accent' \| 'secondary' \| 'success' \| 'warning' \| 'danger'` | secondary | Badge | Which of the five semantic colours the badge speaks in |
+| `tone` | `'accent' \| 'secondary' \| 'info' \| 'success' \| 'warning' \| 'danger'` | secondary | Badge | Which of the five semantic colours the badge speaks in |
 | `variant` | `'solid' \| 'soft' \| 'outline'` | soft | Badge | How that colour is painted: filled, tinted, or an edge alone. All three draw the same tone edge |
 | `size` | `'sm' \| 'md' \| 'lg'` | md | Badge | Type and glyph come from the control scale, so a badge shrinks with density beside the controls it sits with |
 | `shape` | `'pill' \| 'square' \| 'dot'` | pill | Badge | A dot is the same badge, tone and hidden text, drawn without a value |
@@ -39,7 +39,7 @@ Excerpt — not a complete module
 
 | Axis | Values | Default |
 | --- | --- | --- |
-| `tone` | `accent`, `secondary`, `success`, `warning`, `danger` | `secondary` |
+| `tone` | `accent`, `secondary`, `info`, `success`, `warning`, `danger` | `secondary` |
 | `variant` | `solid`, `soft`, `outline` | `soft` |
 | `size` | `sm`, `md`, `lg` | `md` |
 | `shape` | `pill`, `square`, `dot` | `pill` |
@@ -63,7 +63,7 @@ Excerpt — not a complete module
 
 ## Tokens
 
-`--slotted-badge-anchor-offset-x`, `--slotted-badge-anchor-offset-y`, `--slotted-badge-border-width`, `--slotted-badge-dot-border-color`, `--slotted-badge-font-family`, `--slotted-badge-font-weight`, `--slotted-badge-radius`, `--slotted-badge-ring-color`, `--slotted-badge-ring-width`, `--slotted-border-strong`, `--slotted-border-width-thick`, `--slotted-border-width-thin`, `--slotted-control-font-family`, `--slotted-control-font-size-lg`, `--slotted-control-font-size-md`, `--slotted-control-font-size-sm`, `--slotted-control-icon-size-md`, `--slotted-control-icon-size-sm`, `--slotted-focus-ring-color`, `--slotted-focus-ring-offset`, `--slotted-focus-ring-width`, `--slotted-font-weight-medium`, `--slotted-line-height-xs`, `--slotted-radius-full`, `--slotted-radius-sm`, `--slotted-space-1`, `--slotted-space-2`, `--slotted-space-3`, `--slotted-space-4`, `--slotted-space-5`, `--slotted-surface`, `--slotted-tone-accent-border`, `--slotted-tone-accent-on-solid`, `--slotted-tone-accent-solid`, `--slotted-tone-accent-surface`, `--slotted-tone-accent-text`, `--slotted-tone-danger-border`, `--slotted-tone-danger-on-solid`, `--slotted-tone-danger-solid`, `--slotted-tone-danger-surface`, `--slotted-tone-danger-text`, `--slotted-tone-secondary-border`, `--slotted-tone-secondary-on-solid`, `--slotted-tone-secondary-solid-hover`, `--slotted-tone-secondary-surface`, `--slotted-tone-secondary-text`, `--slotted-tone-success-border`, `--slotted-tone-success-on-solid`, `--slotted-tone-success-solid`, `--slotted-tone-success-surface`, `--slotted-tone-success-text`, `--slotted-tone-warning-border`, `--slotted-tone-warning-on-solid`, `--slotted-tone-warning-solid`, `--slotted-tone-warning-surface`, `--slotted-tone-warning-text`
+`--slotted-badge-anchor-offset-x`, `--slotted-badge-anchor-offset-y`, `--slotted-badge-border-width`, `--slotted-badge-dot-border-color`, `--slotted-badge-font-family`, `--slotted-badge-font-weight`, `--slotted-badge-radius`, `--slotted-badge-ring-color`, `--slotted-badge-ring-width`, `--slotted-border-strong`, `--slotted-border-width-thick`, `--slotted-border-width-thin`, `--slotted-control-font-family`, `--slotted-control-font-size-lg`, `--slotted-control-font-size-md`, `--slotted-control-font-size-sm`, `--slotted-control-icon-size-md`, `--slotted-control-icon-size-sm`, `--slotted-focus-ring-color`, `--slotted-focus-ring-offset`, `--slotted-focus-ring-width`, `--slotted-font-weight-medium`, `--slotted-line-height-xs`, `--slotted-radius-full`, `--slotted-radius-sm`, `--slotted-space-1`, `--slotted-space-2`, `--slotted-space-3`, `--slotted-space-4`, `--slotted-space-5`, `--slotted-surface`, `--slotted-tone-accent-border`, `--slotted-tone-accent-on-solid`, `--slotted-tone-accent-solid`, `--slotted-tone-accent-surface`, `--slotted-tone-accent-text`, `--slotted-tone-danger-border`, `--slotted-tone-danger-on-solid`, `--slotted-tone-danger-solid`, `--slotted-tone-danger-surface`, `--slotted-tone-danger-text`, `--slotted-tone-info-border`, `--slotted-tone-info-on-solid`, `--slotted-tone-info-solid`, `--slotted-tone-info-surface`, `--slotted-tone-info-text`, `--slotted-tone-secondary-border`, `--slotted-tone-secondary-on-solid`, `--slotted-tone-secondary-solid-hover`, `--slotted-tone-secondary-surface`, `--slotted-tone-secondary-text`, `--slotted-tone-success-border`, `--slotted-tone-success-on-solid`, `--slotted-tone-success-solid`, `--slotted-tone-success-surface`, `--slotted-tone-success-text`, `--slotted-tone-warning-border`, `--slotted-tone-warning-on-solid`, `--slotted-tone-warning-solid`, `--slotted-tone-warning-surface`, `--slotted-tone-warning-text`
 
 ## Examples
 

package/dist/docs/button-group.json

@@ -140,6 +140,8 @@
     "--slotted-text-muted",
     "--slotted-tone-accent-solid-active",
     "--slotted-tone-danger-solid-active",
+    "--slotted-tone-info-solid-active",
+    "--slotted-tone-neutral-solid-active",
     "--slotted-tone-secondary-solid-active",
     "--slotted-tone-success-solid-active",
     "--slotted-tone-warning-solid-active"

package/dist/docs/button-group.md

@@ -51,7 +51,7 @@ Excerpt — not a complete module
 
 ## Tokens
 
-`--slotted-control-border-color`, `--slotted-control-border-width`, `--slotted-control-radius`, `--slotted-text-muted`, `--slotted-tone-accent-solid-active`, `--slotted-tone-danger-solid-active`, `--slotted-tone-secondary-solid-active`, `--slotted-tone-success-solid-active`, `--slotted-tone-warning-solid-active`
+`--slotted-control-border-color`, `--slotted-control-border-width`, `--slotted-control-radius`, `--slotted-text-muted`, `--slotted-tone-accent-solid-active`, `--slotted-tone-danger-solid-active`, `--slotted-tone-info-solid-active`, `--slotted-tone-neutral-solid-active`, `--slotted-tone-secondary-solid-active`, `--slotted-tone-success-solid-active`, `--slotted-tone-warning-solid-active`
 
 ## Examples
 

package/dist/docs/button.json

@@ -10,6 +10,8 @@
     "tone": [
       "accent",
       "secondary",
+      "neutral",
+      "info",
       "success",
       "warning",
       "danger"
@@ -27,6 +29,10 @@
     "shape": [
       "square",
       "circle"
+    ],
+    "justify": [
+      "center",
+      "between"
     ]
   },
   "members": {
@@ -38,6 +44,7 @@
         "size": "md",
         "type": "button",
         "fullWidth": false,
+        "justify": "center",
         "disabled": false,
         "focusableWhenDisabled": false,
         "loading": false,
@@ -73,6 +80,7 @@
         "variant": "solid",
         "size": "md",
         "fullWidth": false,
+        "justify": "center",
         "disabled": false
       },
       "capabilities": [
@@ -138,6 +146,7 @@
         "size": "md",
         "type": "button",
         "fullWidth": false,
+        "justify": "center",
         "disabled": false,
         "focusableWhenDisabled": false,
         "loading": false,
@@ -180,7 +189,7 @@
           "part": "root",
           "element": "button, or the element render returns",
           "required": true,
-          "purpose": "The control. Carries data-ui=\"button\", data-tone, data-variant and data-size. It also carries data-full-width, data-disabled and data-loading when they apply."
+          "purpose": "The control. Carries data-ui=\"button\", data-tone, data-variant and data-size. It also carries data-justify, and data-full-width, data-disabled and data-loading when they apply."
         },
         {
           "part": "start",
@@ -210,10 +219,10 @@
       "api": [
         {
           "name": "tone",
-          "type": "accent | secondary | success | warning | danger",
+          "type": "accent | secondary | neutral | info | success | warning | danger",
           "defaultValue": "accent",
           "appliesTo": "Button",
-          "description": "The semantic colour: accent for the primary action, secondary for a neutral one, and success, warning or danger for what the action does."
+          "description": "The semantic colour: accent for the primary action, secondary for a neutral one, neutral for a primary action drawn in ink where the accent is kept for data, and success, warning or danger for what the action does."
         },
         {
           "name": "variant",
@@ -250,6 +259,13 @@
           "appliesTo": "Button",
           "description": "Fills the inline size of the container."
         },
+        {
+          "name": "justify",
+          "type": "center | between",
+          "defaultValue": "center",
+          "appliesTo": "Button",
+          "description": "Where the content sits along the inline axis: center keeps the label and end together in the middle; between sets the label at the start and end at the inline end, as a field trigger reads, with start beside the label. It mirrors in a right-to-left document."
+        },
         {
           "name": "disabled",
           "type": "boolean",
@@ -329,7 +345,7 @@
           "part": "root",
           "element": "a, or the element render returns",
           "required": true,
-          "purpose": "The control. Carries data-ui=\"button\", data-tone, data-variant and data-size. It also carries data-full-width and data-disabled when they apply."
+          "purpose": "The control. Carries data-ui=\"button\", data-tone, data-variant and data-size. It also carries data-justify, and data-full-width and data-disabled when they apply."
         },
         {
           "part": "start",
@@ -367,10 +383,10 @@
         },
         {
           "name": "tone",
-          "type": "accent | secondary | success | warning | danger",
+          "type": "accent | secondary | neutral | info | success | warning | danger",
           "defaultValue": "accent",
           "appliesTo": "ButtonLink",
-          "description": "The semantic colour: accent for the primary action, secondary for a neutral one, and success, warning or danger for what the action does."
+          "description": "The semantic colour: accent for the primary action, secondary for a neutral one, neutral for a primary action drawn in ink where the accent is kept for data, and success, warning or danger for what the action does."
         },
         {
           "name": "variant",
@@ -407,6 +423,13 @@
           "appliesTo": "ButtonLink",
           "description": "Fills the inline size of the container."
         },
+        {
+          "name": "justify",
+          "type": "center | between",
+          "defaultValue": "center",
+          "appliesTo": "ButtonLink",
+          "description": "Where the content sits along the inline axis: center keeps the label and end together in the middle; between sets the label at the start and end at the inline end, as a field trigger reads, with start beside the label. It mirrors in a right-to-left document."
+        },
         {
           "name": "disabled",
           "type": "boolean",
@@ -459,10 +482,10 @@
         },
         {
           "name": "tone",
-          "type": "accent | secondary | success | warning | danger",
+          "type": "accent | secondary | neutral | info | success | warning | danger",
           "defaultValue": "secondary",
           "appliesTo": "IconButton",
-          "description": "The semantic colour: accent for the primary action, secondary for a neutral one, and success, warning or danger for what the action does."
+          "description": "The semantic colour: accent for the primary action, secondary for a neutral one, neutral for a primary action drawn in ink where the accent is kept for data, and success, warning or danger for what the action does."
         },
         {
           "name": "variant",
@@ -576,7 +599,7 @@
           "part": "root",
           "element": "button, or the element render returns",
           "required": true,
-          "purpose": "The control. Carries data-ui=\"button\", data-tone, data-variant and data-size. It also carries data-full-width, data-disabled, data-loading and data-pressed when they apply."
+          "purpose": "The control. Carries data-ui=\"button\", data-tone, data-variant and data-size. It also carries data-justify, and data-full-width, data-disabled, data-loading and data-pressed when they apply."
         },
         {
           "part": "start",
@@ -606,10 +629,10 @@
       "api": [
         {
           "name": "tone",
-          "type": "accent | secondary | success | warning | danger",
+          "type": "accent | secondary | neutral | info | success | warning | danger",
           "defaultValue": "secondary",
           "appliesTo": "ToggleButton",
-          "description": "The semantic colour: accent for the primary action, secondary for a neutral one, and success, warning or danger for what the action does."
+          "description": "The semantic colour: accent for the primary action, secondary for a neutral one, neutral for a primary action drawn in ink where the accent is kept for data, and success, warning or danger for what the action does."
         },
         {
           "name": "variant",
@@ -646,6 +669,13 @@
           "appliesTo": "ToggleButton",
           "description": "Fills the inline size of the container."
         },
+        {
+          "name": "justify",
+          "type": "center | between",
+          "defaultValue": "center",
+          "appliesTo": "ToggleButton",
+          "description": "Where the content sits along the inline axis: center keeps the label and end together in the middle; between sets the label at the start and end at the inline end, as a field trigger reads, with start beside the label. It mirrors in a right-to-left document."
+        },
         {
           "name": "disabled",
           "type": "boolean",
@@ -783,6 +813,16 @@
     "--slotted-tone-danger-solid-active",
     "--slotted-tone-danger-solid-hover",
     "--slotted-tone-danger-text",
+    "--slotted-tone-info-on-solid",
+    "--slotted-tone-info-solid",
+    "--slotted-tone-info-solid-active",
+    "--slotted-tone-info-solid-hover",
+    "--slotted-tone-info-text",
+    "--slotted-tone-neutral-on-solid",
+    "--slotted-tone-neutral-solid",
+    "--slotted-tone-neutral-solid-active",
+    "--slotted-tone-neutral-solid-hover",
+    "--slotted-tone-neutral-text",
     "--slotted-tone-secondary-on-solid",
     "--slotted-tone-secondary-solid",
     "--slotted-tone-secondary-solid-active",

package/dist/docs/button.md

@@ -72,12 +72,13 @@ export default function ButtonBasic() {
 
 | Name | Type | Default | Applies to | Description |
 | --- | --- | --- | --- | --- |
-| `tone` | `accent \| secondary \| success \| warning \| danger` | accent | Button | The semantic colour: accent for the primary action, secondary for a neutral one, and success, warning or danger for what the action does. |
+| `tone` | `accent \| secondary \| neutral \| info \| success \| warning \| danger` | accent | Button | The semantic colour: accent for the primary action, secondary for a neutral one, neutral for a primary action drawn in ink where the accent is kept for data, and success, warning or danger for what the action does. |
 | `variant` | `solid \| outline \| ghost` | solid | Button | How the tone is painted: solid, outline or ghost. |
 | `size` | `sm \| md \| lg` | md | Button | The step of the control scale. Each step reads the --slotted-control-* tokens, so the density of the theme sets the height. |
 | `start` | `ReactNode` | — | Button | Content before the label, such as an icon. It mirrors in a right-to-left document. |
 | `end` | `ReactNode` | — | Button | Content after the label, such as an icon. It mirrors in a right-to-left document. |
 | `fullWidth` | `boolean` | false | Button | Fills the inline size of the container. |
+| `justify` | `center \| between` | center | Button | Where the content sits along the inline axis: center keeps the label and end together in the middle; between sets the label at the start and end at the inline end, as a field trigger reads, with start beside the label. It mirrors in a right-to-left document. |
 | `disabled` | `boolean` | false | Button | Refuses the action and marks the control unavailable. On its own, it sets the native disabled attribute, which also removes the control from the tab sequence. |
 | `focusableWhenDisabled` | `boolean` | false | Button | Keeps a disabled control in the tab sequence: aria-disabled replaces the native attribute, and activation is still refused. |
 | `loading` | `boolean` | false | Button | Refuses activation, keeps focus, and shows a progress indicator named by messages.loading. |
@@ -93,12 +94,13 @@ export default function ButtonBasic() {
 | --- | --- | --- | --- | --- |
 | `href` | `string` | required without render | ButtonLink | The destination. A disabled ButtonLink does not render it. |
 | `render` | `(rootProps) => ReactElement` | — | ButtonLink | Renders the root through a router’s link component. The function receives every root prop and must pass all of them on. |
-| `tone` | `accent \| secondary \| success \| warning \| danger` | accent | ButtonLink | The semantic colour: accent for the primary action, secondary for a neutral one, and success, warning or danger for what the action does. |
+| `tone` | `accent \| secondary \| neutral \| info \| success \| warning \| danger` | accent | ButtonLink | The semantic colour: accent for the primary action, secondary for a neutral one, neutral for a primary action drawn in ink where the accent is kept for data, and success, warning or danger for what the action does. |
 | `variant` | `solid \| outline \| ghost` | solid | ButtonLink | How the tone is painted: solid, outline or ghost. |
 | `size` | `sm \| md \| lg` | md | ButtonLink | The step of the control scale. Each step reads the --slotted-control-* tokens, so the density of the theme sets the height. |
 | `start` | `ReactNode` | — | ButtonLink | Content before the label, such as an icon. It mirrors in a right-to-left document. |
 | `end` | `ReactNode` | — | ButtonLink | Content after the label, such as an icon. It mirrors in a right-to-left document. |
 | `fullWidth` | `boolean` | false | ButtonLink | Fills the inline size of the container. |
+| `justify` | `center \| between` | center | ButtonLink | Where the content sits along the inline axis: center keeps the label and end together in the middle; between sets the label at the start and end at the inline end, as a field trigger reads, with start beside the label. It mirrors in a right-to-left document. |
 | `disabled` | `boolean` | false | ButtonLink | Removes the href and refuses activation. The link stays focusable with role="link" and aria-disabled. |
 
 ### iconButton
@@ -106,7 +108,7 @@ export default function ButtonBasic() {
 | Name | Type | Default | Applies to | Description |
 | --- | --- | --- | --- | --- |
 | `aria-label \| aria-labelledby` | `string` | required | IconButton | The accessible name. Required, because an icon supplies no text. When both are present, aria-labelledby names the button. |
-| `tone` | `accent \| secondary \| success \| warning \| danger` | secondary | IconButton | The semantic colour: accent for the primary action, secondary for a neutral one, and success, warning or danger for what the action does. |
+| `tone` | `accent \| secondary \| neutral \| info \| success \| warning \| danger` | secondary | IconButton | The semantic colour: accent for the primary action, secondary for a neutral one, neutral for a primary action drawn in ink where the accent is kept for data, and success, warning or danger for what the action does. |
 | `variant` | `solid \| outline \| ghost` | ghost | IconButton | How the tone is painted: solid, outline or ghost. |
 | `size` | `sm \| md \| lg` | md | IconButton | The step of the control scale. Each step reads the --slotted-control-* tokens, so the density of the theme sets the height. |
 | `shape` | `square \| circle` | square | IconButton | The corners of the control: square keeps the radius of the control scale, circle rounds it fully. Both are as wide as they are tall. |
@@ -125,12 +127,13 @@ export default function ButtonBasic() {
 
 | Name | Type | Default | Applies to | Description |
 | --- | --- | --- | --- | --- |
-| `tone` | `accent \| secondary \| success \| warning \| danger` | secondary | ToggleButton | The semantic colour: accent for the primary action, secondary for a neutral one, and success, warning or danger for what the action does. |
+| `tone` | `accent \| secondary \| neutral \| info \| success \| warning \| danger` | secondary | ToggleButton | The semantic colour: accent for the primary action, secondary for a neutral one, neutral for a primary action drawn in ink where the accent is kept for data, and success, warning or danger for what the action does. |
 | `variant` | `solid \| outline \| ghost` | outline | ToggleButton | How the tone is painted: solid, outline or ghost. |
 | `size` | `sm \| md \| lg` | md | ToggleButton | The step of the control scale. Each step reads the --slotted-control-* tokens, so the density of the theme sets the height. |
 | `start` | `ReactNode` | — | ToggleButton | Content before the label, such as an icon. It mirrors in a right-to-left document. |
 | `end` | `ReactNode` | — | ToggleButton | Content after the label, such as an icon. It mirrors in a right-to-left document. |
 | `fullWidth` | `boolean` | false | ToggleButton | Fills the inline size of the container. |
+| `justify` | `center \| between` | center | ToggleButton | Where the content sits along the inline axis: center keeps the label and end together in the middle; between sets the label at the start and end at the inline end, as a field trigger reads, with start beside the label. It mirrors in a right-to-left document. |
 | `disabled` | `boolean` | false | ToggleButton | Refuses the action and marks the control unavailable. On its own, it sets the native disabled attribute, which also removes the control from the tab sequence. |
 | `focusableWhenDisabled` | `boolean` | false | ToggleButton | Keeps a disabled control in the tab sequence: aria-disabled replaces the native attribute, and activation is still refused. |
 | `loading` | `boolean` | false | ToggleButton | Refuses activation, keeps focus, and shows a progress indicator named by messages.loading. |
@@ -146,10 +149,11 @@ export default function ButtonBasic() {
 
 | Axis | Values | Default |
 | --- | --- | --- |
-| `tone` | `accent`, `secondary`, `success`, `warning`, `danger` | `accent`, `secondary` |
+| `tone` | `accent`, `secondary`, `neutral`, `info`, `success`, `warning`, `danger` | `accent`, `secondary` |
 | `variant` | `solid`, `outline`, `ghost` | `solid`, `ghost`, `outline` |
 | `size` | `sm`, `md`, `lg` | `md` |
 | `shape` | `square`, `circle` | `square` |
+| `justify` | `center`, `between` | `center` |
 
 ## Rules
 
@@ -180,7 +184,7 @@ export default function ButtonBasic() {
 
 ## 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-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-duration-loop`, `--slotted-focus-ring-color`, `--slotted-focus-ring-offset`, `--slotted-focus-ring-width`, `--slotted-line-height-sm`, `--slotted-radius-full`, `--slotted-space-2`, `--slotted-target-min`, `--slotted-text-muted`, `--slotted-tone-accent-border`, `--slotted-tone-accent-on-solid`, `--slotted-tone-accent-solid`, `--slotted-tone-accent-solid-active`, `--slotted-tone-accent-solid-hover`, `--slotted-tone-accent-subtle-active`, `--slotted-tone-accent-subtle-hover`, `--slotted-tone-accent-text`, `--slotted-tone-danger-on-solid`, `--slotted-tone-danger-solid`, `--slotted-tone-danger-solid-active`, `--slotted-tone-danger-solid-hover`, `--slotted-tone-danger-text`, `--slotted-tone-secondary-on-solid`, `--slotted-tone-secondary-solid`, `--slotted-tone-secondary-solid-active`, `--slotted-tone-secondary-solid-hover`, `--slotted-tone-secondary-subtle-active`, `--slotted-tone-secondary-subtle-hover`, `--slotted-tone-secondary-text`, `--slotted-tone-success-on-solid`, `--slotted-tone-success-solid`, `--slotted-tone-success-solid-active`, `--slotted-tone-success-solid-hover`, `--slotted-tone-success-text`, `--slotted-tone-warning-on-solid`, `--slotted-tone-warning-solid`, `--slotted-tone-warning-solid-active`, `--slotted-tone-warning-solid-hover`, `--slotted-tone-warning-text`
+`--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-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-duration-loop`, `--slotted-focus-ring-color`, `--slotted-focus-ring-offset`, `--slotted-focus-ring-width`, `--slotted-line-height-sm`, `--slotted-radius-full`, `--slotted-space-2`, `--slotted-target-min`, `--slotted-text-muted`, `--slotted-tone-accent-border`, `--slotted-tone-accent-on-solid`, `--slotted-tone-accent-solid`, `--slotted-tone-accent-solid-active`, `--slotted-tone-accent-solid-hover`, `--slotted-tone-accent-subtle-active`, `--slotted-tone-accent-subtle-hover`, `--slotted-tone-accent-text`, `--slotted-tone-danger-on-solid`, `--slotted-tone-danger-solid`, `--slotted-tone-danger-solid-active`, `--slotted-tone-danger-solid-hover`, `--slotted-tone-danger-text`, `--slotted-tone-info-on-solid`, `--slotted-tone-info-solid`, `--slotted-tone-info-solid-active`, `--slotted-tone-info-solid-hover`, `--slotted-tone-info-text`, `--slotted-tone-neutral-on-solid`, `--slotted-tone-neutral-solid`, `--slotted-tone-neutral-solid-active`, `--slotted-tone-neutral-solid-hover`, `--slotted-tone-neutral-text`, `--slotted-tone-secondary-on-solid`, `--slotted-tone-secondary-solid`, `--slotted-tone-secondary-solid-active`, `--slotted-tone-secondary-solid-hover`, `--slotted-tone-secondary-subtle-active`, `--slotted-tone-secondary-subtle-hover`, `--slotted-tone-secondary-text`, `--slotted-tone-success-on-solid`, `--slotted-tone-success-solid`, `--slotted-tone-success-solid-active`, `--slotted-tone-success-solid-hover`, `--slotted-tone-success-text`, `--slotted-tone-warning-on-solid`, `--slotted-tone-warning-solid`, `--slotted-tone-warning-solid-active`, `--slotted-tone-warning-solid-hover`, `--slotted-tone-warning-text`
 
 ## Examples