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

package/dist/docs/page-header.json

@@ -12,6 +12,10 @@
       "plain",
       "floating"
     ],
+    "material": [
+      false,
+      true
+    ],
     "size": [
       "sm",
       "md",
@@ -35,6 +39,7 @@
         "level": "1",
         "collapse": "scroll",
         "variant": "band",
+        "material": false,
         "expanded": true,
         "pinned": false,
         "loading": false
@@ -93,7 +98,7 @@
           "part": "root",
           "element": "header, or the element render returns",
           "required": true,
-          "purpose": "The family: sticky with a negative offset the size of the header area, carrying data-ui=\"page-header\", the four axes, data-expanded, data-revealed, data-loading and the measured facts data-scrolled, data-stuck and data-compact. Below 600 pixels of its own width it carries data-compact, is not sticky and scrolls away with the page. It is its own container, so the rows reflow on its own inline size."
+          "purpose": "The family: sticky with a negative offset the size of the header area, carrying data-ui=\"page-header\", the four axes, data-expanded, data-revealed, data-loading and the measured facts data-scrolled, data-stuck and data-compact. In a frame narrower than 600 pixels — a phone — it carries data-compact, is not sticky and scrolls away with the page. It is its own container, so the rows reflow on its own inline size."
         },
         {
           "part": "title-area",
@@ -256,7 +261,14 @@
           "type": "'band' | 'plain' | 'floating'",
           "defaultValue": "band",
           "appliesTo": "PageHeader, PageHeaderDefaultsProvider",
-          "description": "band is a strip of the surface with a hairline under it, the page’s own header; plain paints no ground at rest and takes the surface back once content passes under the chrome (data-stuck), for a header inside a region with a ground of its own; floating is a box with the hairline all round and rounded corners that, once stuck, slides to an inset below the scroller’s edge and lifts by a shadow, for a header that stands inside padding"
+          "description": "band is a strip of the surface with a hairline under it, the page’s own header; plain paints no ground at rest and takes the surface back once content passes under the chrome (data-stuck), for a header inside a region with a ground of its own; floating is a box with the hairline all round and rounded corners that, once stuck, slides to an inset below the scroller’s edge and lifts by a shadow, for a header that stands inside padding. The ground changes over --slotted-page-header-ground-duration (the medium duration) with --slotted-page-header-ground-easing (the standard easing); a duration of 0s makes the change instant"
+        },
+        {
+          "name": "material",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "PageHeader, PageHeaderDefaultsProvider",
+          "description": "Once content passes under the chrome (data-stuck), its ground is the theme’s --slotted-surface-material and its backdrop filter --slotted-material-backdrop, in every variant; at rest each variant keeps its ground. --slotted-page-header-background and --slotted-page-header-backdrop-filter still win. The theme makes both opaque under prefers-reduced-transparency and forced colours"
         },
         {
           "name": "size",
@@ -412,11 +424,15 @@
     "--slotted-line-height-md",
     "--slotted-line-height-sm",
     "--slotted-line-height-xl",
+    "--slotted-material-backdrop",
+    "--slotted-page-header-backdrop-filter",
     "--slotted-page-header-background",
     "--slotted-page-header-border",
     "--slotted-page-header-control-size",
     "--slotted-page-header-description-measure",
     "--slotted-page-header-gap",
+    "--slotted-page-header-ground-duration",
+    "--slotted-page-header-ground-easing",
     "--slotted-page-header-heading-size-lg",
     "--slotted-page-header-heading-size-md",
     "--slotted-page-header-heading-size-sm",
@@ -438,6 +454,7 @@
     "--slotted-space-5",
     "--slotted-space-6",
     "--slotted-surface",
+    "--slotted-surface-material",
     "--slotted-target-comfortable",
     "--slotted-target-min",
     "--slotted-text",
@@ -534,7 +551,7 @@
     {
       "id": "progress",
       "title": "A refresh of what is on screen",
-      "note": "PageHeaderProgress draws an indeterminate bar over the line where the chrome ends, after 200 ms and for at least 400 ms. With tabs that line is the one the pill straddles, never the tab strip’s edge; without them it is the root’s hairline. The header writes no aria-busy: the region that waits — the page body — is the consumer’s to mark.",
+      "note": "PageHeaderProgress draws an indeterminate bar over the line where the chrome ends, after 200 ms and for at least 400 ms, wherever it is written among the parts. With a pill over the tabs that line is the one the pill straddles, never the tab strip’s edge; otherwise it is the root’s hairline. The header writes no aria-busy: the region that waits — the page body — is the consumer’s to mark.",
       "language": "tsx",
       "source": "<PageHeader>\n  <PageHeaderTitleArea>…</PageHeaderTitleArea>\n  <PageHeaderControls>…</PageHeaderControls>\n  <PageHeaderProgress loading={isRefetching} />\n  <PageHeaderTabs>…</PageHeaderTabs>\n</PageHeader>;\n",
       "verdict": "excerpt"
@@ -550,7 +567,7 @@
     {
       "id": "narrow",
       "title": "Below 600 pixels",
-      "note": "The family answers its own inline size: the header is not sticky and scrolls away with the page, nothing collapses it on scroll and the toggle still folds the area in place; the breadcrumbs go and the way back stays, the title steps down, the subheading takes one line, and the figure takes a row above the content. Actions written as Toolbar overflow=\"menu\", each item with its counterpart, stay on the title row and fold what does not fit into the menu, where every action is still reachable; loose actions and the navigation take the row under the title.",
+      "note": "The family answers its own inline size: the header is not sticky and scrolls away with the page, nothing collapses it on scroll and the toggle still folds the area in place; the breadcrumbs go and the way back stays, the title steps down, the subheading takes one line, and the figure takes a row above the content. Actions written as Toolbar overflow=\"menu\", each item with its counterpart, stay on the title row beside a plain title, and take a full row of their own under a rich one (a visual, marks or a subheading); either way they fold what does not fit into the menu, where every action is still reachable; loose actions and the navigation take the row under the title.",
       "language": "tsx",
       "source": "<PageHeader>…</PageHeader>;\n",
       "verdict": "excerpt"

package/dist/docs/page-header.md

@@ -62,7 +62,8 @@ Excerpt — not a complete module
 | `defaultExpanded` | `boolean` | — | PageHeader | The value an uncontrolled header area starts from, read once |
 | `pinned` | `boolean` | false | PageHeader | Present means the consumer owns the pin’s state. Pinned, the whole header stays while the page scrolls |
 | `defaultPinned` | `boolean` | — | PageHeader | The value an uncontrolled pin starts from, read once |
-| `variant` | `'band' \| 'plain' \| 'floating'` | band | PageHeader, PageHeaderDefaultsProvider | band is a strip of the surface with a hairline under it, the page’s own header; plain paints no ground at rest and takes the surface back once content passes under the chrome (data-stuck), for a header inside a region with a ground of its own; floating is a box with the hairline all round and rounded corners that, once stuck, slides to an inset below the scroller’s edge and lifts by a shadow, for a header that stands inside padding |
+| `variant` | `'band' \| 'plain' \| 'floating'` | band | PageHeader, PageHeaderDefaultsProvider | band is a strip of the surface with a hairline under it, the page’s own header; plain paints no ground at rest and takes the surface back once content passes under the chrome (data-stuck), for a header inside a region with a ground of its own; floating is a box with the hairline all round and rounded corners that, once stuck, slides to an inset below the scroller’s edge and lifts by a shadow, for a header that stands inside padding. The ground changes over --slotted-page-header-ground-duration (the medium duration) with --slotted-page-header-ground-easing (the standard easing); a duration of 0s makes the change instant |
+| `material` | `boolean` | false | PageHeader, PageHeaderDefaultsProvider | Once content passes under the chrome (data-stuck), its ground is the theme’s --slotted-surface-material and its backdrop filter --slotted-material-backdrop, in every variant; at rest each variant keeps its ground. --slotted-page-header-background and --slotted-page-header-backdrop-filter still win. The theme makes both opaque under prefers-reduced-transparency and forced colours |
 | `size` | `'sm' \| 'md' \| 'lg'` | md | PageHeader, PageHeaderDefaultsProvider | The step the title sits at, on the type scale. The snapped title takes the step below |
 | `level` | `'1' \| '2' \| '3'` | 1 | PageHeader, PageHeaderDefaultsProvider | The rank of the heading, which decides its element. A page’s own header is 1 |
 | `collapse` | `'scroll' \| 'manual'` | scroll | PageHeader, PageHeaderDefaultsProvider | scroll collapses the area when it leaves the scrollport and re-opens it when it returns; manual leaves it to the toggle, the pin and the application, and the whole header stays while the page scrolls |
@@ -90,6 +91,7 @@ Excerpt — not a complete module
 | Axis | Values | Default |
 | --- | --- | --- |
 | `variant` | `band`, `plain`, `floating` | `band` |
+| `material` | `false`, `true` | `false` |
 | `size` | `sm`, `md`, `lg` | `md` |
 | `level` | `1`, `2`, `3` | `1` |
 | `collapse` | `scroll`, `manual` | `scroll` |
@@ -105,7 +107,7 @@ Excerpt — not a complete module
 
 ## Tokens
 
-`--slotted-border-subtle`, `--slotted-border-width-thin`, `--slotted-control-gap-md`, `--slotted-control-gap-sm`, `--slotted-control-height-md`, `--slotted-control-height-sm`, `--slotted-control-icon-size-md`, `--slotted-control-icon-size-sm`, `--slotted-control-radius`, `--slotted-disabled-foreground`, `--slotted-duration-medium`, `--slotted-duration-short`, `--slotted-easing-standard`, `--slotted-focus-ring-color`, `--slotted-focus-ring-offset`, `--slotted-focus-ring-width`, `--slotted-font-family-heading`, `--slotted-font-family-sans`, `--slotted-font-size-2xl`, `--slotted-font-size-3xl`, `--slotted-font-size-lg`, `--slotted-font-size-md`, `--slotted-font-size-sm`, `--slotted-font-size-xl`, `--slotted-font-weight-medium`, `--slotted-font-weight-semibold`, `--slotted-line-height-2xl`, `--slotted-line-height-3xl`, `--slotted-line-height-lg`, `--slotted-line-height-md`, `--slotted-line-height-sm`, `--slotted-line-height-xl`, `--slotted-page-header-background`, `--slotted-page-header-border`, `--slotted-page-header-control-size`, `--slotted-page-header-description-measure`, `--slotted-page-header-gap`, `--slotted-page-header-heading-size-lg`, `--slotted-page-header-heading-size-md`, `--slotted-page-header-heading-size-sm`, `--slotted-page-header-inset`, `--slotted-page-header-padding-block`, `--slotted-page-header-radius`, `--slotted-page-header-shadow`, `--slotted-page-header-snapped-heading-size-lg`, `--slotted-page-header-snapped-heading-size-md`, `--slotted-page-header-snapped-heading-size-sm`, `--slotted-radius-full`, `--slotted-radius-lg`, `--slotted-radius-sm`, `--slotted-shadow-sm`, `--slotted-space-1`, `--slotted-space-2`, `--slotted-space-3`, `--slotted-space-4`, `--slotted-space-5`, `--slotted-space-6`, `--slotted-surface`, `--slotted-target-comfortable`, `--slotted-target-min`, `--slotted-text`, `--slotted-text-muted`, `--slotted-tone-accent-subtle-hover`, `--slotted-tone-accent-surface`, `--slotted-tone-accent-text`, `--slotted-tone-secondary-subtle-active`, `--slotted-tone-secondary-subtle-hover`, `--slotted-toolbar-inset`, `--slotted-z-index-sticky`
+`--slotted-border-subtle`, `--slotted-border-width-thin`, `--slotted-control-gap-md`, `--slotted-control-gap-sm`, `--slotted-control-height-md`, `--slotted-control-height-sm`, `--slotted-control-icon-size-md`, `--slotted-control-icon-size-sm`, `--slotted-control-radius`, `--slotted-disabled-foreground`, `--slotted-duration-medium`, `--slotted-duration-short`, `--slotted-easing-standard`, `--slotted-focus-ring-color`, `--slotted-focus-ring-offset`, `--slotted-focus-ring-width`, `--slotted-font-family-heading`, `--slotted-font-family-sans`, `--slotted-font-size-2xl`, `--slotted-font-size-3xl`, `--slotted-font-size-lg`, `--slotted-font-size-md`, `--slotted-font-size-sm`, `--slotted-font-size-xl`, `--slotted-font-weight-medium`, `--slotted-font-weight-semibold`, `--slotted-line-height-2xl`, `--slotted-line-height-3xl`, `--slotted-line-height-lg`, `--slotted-line-height-md`, `--slotted-line-height-sm`, `--slotted-line-height-xl`, `--slotted-material-backdrop`, `--slotted-page-header-backdrop-filter`, `--slotted-page-header-background`, `--slotted-page-header-border`, `--slotted-page-header-control-size`, `--slotted-page-header-description-measure`, `--slotted-page-header-gap`, `--slotted-page-header-ground-duration`, `--slotted-page-header-ground-easing`, `--slotted-page-header-heading-size-lg`, `--slotted-page-header-heading-size-md`, `--slotted-page-header-heading-size-sm`, `--slotted-page-header-inset`, `--slotted-page-header-padding-block`, `--slotted-page-header-radius`, `--slotted-page-header-shadow`, `--slotted-page-header-snapped-heading-size-lg`, `--slotted-page-header-snapped-heading-size-md`, `--slotted-page-header-snapped-heading-size-sm`, `--slotted-radius-full`, `--slotted-radius-lg`, `--slotted-radius-sm`, `--slotted-shadow-sm`, `--slotted-space-1`, `--slotted-space-2`, `--slotted-space-3`, `--slotted-space-4`, `--slotted-space-5`, `--slotted-space-6`, `--slotted-surface`, `--slotted-surface-material`, `--slotted-target-comfortable`, `--slotted-target-min`, `--slotted-text`, `--slotted-text-muted`, `--slotted-tone-accent-subtle-hover`, `--slotted-tone-accent-surface`, `--slotted-tone-accent-text`, `--slotted-tone-secondary-subtle-active`, `--slotted-tone-secondary-subtle-hover`, `--slotted-toolbar-inset`, `--slotted-z-index-sticky`
 
 ## Examples
 
@@ -287,7 +289,7 @@ Excerpt — not a complete module
 
 ### A refresh of what is on screen
 
-PageHeaderProgress draws an indeterminate bar over the line where the chrome ends, after 200 ms and for at least 400 ms. With tabs that line is the one the pill straddles, never the tab strip’s edge; without them it is the root’s hairline. The header writes no aria-busy: the region that waits — the page body — is the consumer’s to mark.
+PageHeaderProgress draws an indeterminate bar over the line where the chrome ends, after 200 ms and for at least 400 ms, wherever it is written among the parts. With a pill over the tabs that line is the one the pill straddles, never the tab strip’s edge; otherwise it is the root’s hairline. The header writes no aria-busy: the region that waits — the page body — is the consumer’s to mark.
 
 Excerpt — not a complete module
 
@@ -315,7 +317,7 @@ Excerpt — not a complete module
 
 ### Below 600 pixels
 
-The family answers its own inline size: the header is not sticky and scrolls away with the page, nothing collapses it on scroll and the toggle still folds the area in place; the breadcrumbs go and the way back stays, the title steps down, the subheading takes one line, and the figure takes a row above the content. Actions written as Toolbar overflow="menu", each item with its counterpart, stay on the title row and fold what does not fit into the menu, where every action is still reachable; loose actions and the navigation take the row under the title.
+The family answers its own inline size: the header is not sticky and scrolls away with the page, nothing collapses it on scroll and the toggle still folds the area in place; the breadcrumbs go and the way back stays, the title steps down, the subheading takes one line, and the figure takes a row above the content. Actions written as Toolbar overflow="menu", each item with its counterpart, stay on the title row beside a plain title, and take a full row of their own under a rich one (a visual, marks or a subheading); either way they fold what does not fit into the menu, where every action is still reachable; loose actions and the navigation take the row under the title.
 
 Excerpt — not a complete module
 

package/dist/docs/page.json

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

package/dist/docs/page.md

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

package/dist/docs/popover.json

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

package/dist/docs/progress-indicator.json

@@ -15,6 +15,7 @@
     "tone": [
       "accent",
       "secondary",
+      "info",
       "success",
       "warning",
       "danger"
@@ -141,7 +142,7 @@
         },
         {
           "name": "tone",
-          "type": "accent | secondary | success | warning | danger",
+          "type": "accent | secondary | info | success | warning | danger",
           "defaultValue": "accent",
           "appliesTo": "all three",
           "description": "The five the theme owns. The indicator is the tone’s text role and the track is a computed tint of it"
@@ -330,7 +331,6 @@
     "--slotted-progress-indicator-wave-phase",
     "--slotted-radius-full",
     "--slotted-radius-none",
-    "--slotted-space-1",
     "--slotted-space-2",
     "--slotted-space-3",
     "--slotted-space-4",
@@ -339,6 +339,7 @@
     "--slotted-text-muted",
     "--slotted-tone-accent-text",
     "--slotted-tone-danger-text",
+    "--slotted-tone-info-text",
     "--slotted-tone-success-text",
     "--slotted-tone-warning-text",
     "--slotted-z-index-sticky"
@@ -419,7 +420,7 @@
     {
       "id": "waveSizes",
       "title": "The wave is measured in thicknesses",
-      "note": "One wavelength is ten thicknesses and a crest is three quarters of one at every size, so the small bar’s wave is twenty pixels long and the large bar’s eighty. Every ring carries eight crests, because the wave is wound on the viewBox and the viewBox scales.",
+      "note": "One wavelength is ten thicknesses and a crest is three quarters of one at every size, so the small bar’s wave is forty pixels long and the large bar’s eighty. Every ring carries eight crests, because the wave is wound on the viewBox and the viewBox scales.",
       "language": "tsx",
       "source": "<ProgressBar label=\"Small\" size=\"sm\" value={55} wave />;\n<ProgressBar label=\"Large\" size=\"lg\" value={55} wave />;\n<ProgressCircle label=\"Saving\" size=\"lg\" value={55} wave />;\n",
       "verdict": "excerpt"

package/dist/docs/progress-indicator.md

@@ -36,7 +36,7 @@ Excerpt — not a complete module
 | `max` | `number` | 100 | ProgressBar, ProgressCircle | The top of the range, and what aria-valuemax reports. Reaching it writes data-complete |
 | `buffer` | `number \| null` | — | ProgressBar | A second, further quantity: received but not yet processed. Never painted behind the value |
 | `size` | `sm \| md \| lg` | md | all three | The bar’s thickness, the ring’s diameter, the loader’s box. Rings and loaders read the control height scale, so they match a control of the same step |
-| `tone` | `accent \| secondary \| success \| warning \| danger` | accent | all three | The five the theme owns. The indicator is the tone’s text role and the track is a computed tint of it |
+| `tone` | `accent \| secondary \| info \| success \| warning \| danger` | accent | all three | The five the theme owns. The indicator is the tone’s text role and the track is a computed tint of it |
 | `label` | `string` | — | all three | The rendered accessible name. Without it, or aria-label, or decorative, a development warning names the component |
 | `hideLabel` | `boolean` | false | all three | Clips the label with visually-hidden and keeps it as the name. A page-level bar sets it by itself |
 | `showValue` | `boolean` | false | ProgressBar, ProgressCircle | Whether the formatted number is rendered beside the name. A wait needs no number to be understood |
@@ -67,7 +67,7 @@ Excerpt — not a complete module
 | Axis | Values | Default |
 | --- | --- | --- |
 | `size` | `sm`, `md`, `lg` | `md` |
-| `tone` | `accent`, `secondary`, `success`, `warning`, `danger` | `accent` |
+| `tone` | `accent`, `secondary`, `info`, `success`, `warning`, `danger` | `accent` |
 | `placement` | `inline`, `page`, `edge-start`, `edge-end` | `inline` |
 
 ## Rules
@@ -82,7 +82,7 @@ Excerpt — not a complete module
 
 ## Tokens
 
-`--slotted-border-strong`, `--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-height-lg`, `--slotted-control-height-md`, `--slotted-control-height-sm`, `--slotted-duration-long`, `--slotted-duration-loop`, `--slotted-duration-loop-slow`, `--slotted-duration-medium`, `--slotted-duration-short`, `--slotted-easing-emphasized`, `--slotted-easing-enter`, `--slotted-easing-exit`, `--slotted-easing-standard`, `--slotted-line-height-md`, `--slotted-progress-indicator-buffer-color`, `--slotted-progress-indicator-buffer-percent`, `--slotted-progress-indicator-gap`, `--slotted-progress-indicator-indicator-color`, `--slotted-progress-indicator-percent`, `--slotted-progress-indicator-position`, `--slotted-progress-indicator-radius`, `--slotted-progress-indicator-size`, `--slotted-progress-indicator-stroke`, `--slotted-progress-indicator-thickness`, `--slotted-progress-indicator-track-color`, `--slotted-progress-indicator-travel-size`, `--slotted-progress-indicator-travel-start`, `--slotted-progress-indicator-wave-amplitude`, `--slotted-progress-indicator-wave-phase`, `--slotted-radius-full`, `--slotted-radius-none`, `--slotted-space-1`, `--slotted-space-2`, `--slotted-space-3`, `--slotted-space-4`, `--slotted-surface`, `--slotted-text`, `--slotted-text-muted`, `--slotted-tone-accent-text`, `--slotted-tone-danger-text`, `--slotted-tone-success-text`, `--slotted-tone-warning-text`, `--slotted-z-index-sticky`
+`--slotted-border-strong`, `--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-height-lg`, `--slotted-control-height-md`, `--slotted-control-height-sm`, `--slotted-duration-long`, `--slotted-duration-loop`, `--slotted-duration-loop-slow`, `--slotted-duration-medium`, `--slotted-duration-short`, `--slotted-easing-emphasized`, `--slotted-easing-enter`, `--slotted-easing-exit`, `--slotted-easing-standard`, `--slotted-line-height-md`, `--slotted-progress-indicator-buffer-color`, `--slotted-progress-indicator-buffer-percent`, `--slotted-progress-indicator-gap`, `--slotted-progress-indicator-indicator-color`, `--slotted-progress-indicator-percent`, `--slotted-progress-indicator-position`, `--slotted-progress-indicator-radius`, `--slotted-progress-indicator-size`, `--slotted-progress-indicator-stroke`, `--slotted-progress-indicator-thickness`, `--slotted-progress-indicator-track-color`, `--slotted-progress-indicator-travel-size`, `--slotted-progress-indicator-travel-start`, `--slotted-progress-indicator-wave-amplitude`, `--slotted-progress-indicator-wave-phase`, `--slotted-radius-full`, `--slotted-radius-none`, `--slotted-space-2`, `--slotted-space-3`, `--slotted-space-4`, `--slotted-surface`, `--slotted-text`, `--slotted-text-muted`, `--slotted-tone-accent-text`, `--slotted-tone-danger-text`, `--slotted-tone-info-text`, `--slotted-tone-success-text`, `--slotted-tone-warning-text`, `--slotted-z-index-sticky`
 
 ## Examples
 
@@ -191,7 +191,7 @@ Excerpt — not a complete module
 
 ### The wave is measured in thicknesses
 
-One wavelength is ten thicknesses and a crest is three quarters of one at every size, so the small bar’s wave is twenty pixels long and the large bar’s eighty. Every ring carries eight crests, because the wave is wound on the viewBox and the viewBox scales.
+One wavelength is ten thicknesses and a crest is three quarters of one at every size, so the small bar’s wave is forty pixels long and the large bar’s eighty. Every ring carries eight crests, because the wave is wound on the viewBox and the viewBox scales.
 
 Excerpt — not a complete module
 

package/dist/docs/prompt-composer.json

@@ -26,6 +26,10 @@
       "submitted",
       "streaming",
       "error"
+    ],
+    "emphasis": [
+      "none",
+      "ring"
     ]
   },
   "members": {
@@ -71,7 +75,9 @@
         "footer",
         "action",
         "attach",
-        "submit"
+        "submit",
+        "ring",
+        "glow"
       ]
     }
   },
@@ -122,6 +128,18 @@
           "element": "button (PromptComposerSubmit)",
           "required": false,
           "purpose": "The send: a round accent disc named by the label for its status — Send, Sending, Stop, Retry — or a pill named by the words given to it. A busy ring while submitted, a stop square inside the ring while streaming, a retry turn after an error."
+        },
+        {
+          "part": "ring",
+          "element": "span, aria-hidden",
+          "required": false,
+          "purpose": "With emphasis=\"ring\": the frame's edge, a band cut from a turning conic gradient of --slotted-prompt-composer-ring-colors. It replaces the border, the focus outline and the raised shadow; the buttons keep their own focus rings."
+        },
+        {
+          "part": "glow",
+          "element": "span, aria-hidden",
+          "required": false,
+          "purpose": "With emphasis=\"ring\": the same gradient blurred outside the frame, at --slotted-prompt-composer-ring-glow-opacity at rest, -focus while the input holds focus, -busy while loading, submitted or streaming."
         }
       ],
       "api": [
@@ -167,6 +185,13 @@
           "appliesTo": "PromptComposer, PromptComposerDefaultsProvider",
           "description": "raised is the chat surface; outline and subtle sit inside a form"
         },
+        {
+          "name": "emphasis",
+          "type": "'none' | 'ring'",
+          "defaultValue": "none",
+          "appliesTo": "PromptComposer",
+          "description": "A ring of turning hues and a soft glow in place of the border, the focus outline and the raised shadow. Reduced motion stops the turn; forced colours bring the border back"
+        },
         {
           "name": "canSubmit",
           "type": "boolean",
@@ -316,9 +341,11 @@
     "--slotted-border-strong",
     "--slotted-border-subtle",
     "--slotted-border-width-medium",
+    "--slotted-border-width-thick",
     "--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",
@@ -338,9 +365,14 @@
     "--slotted-control-surface",
     "--slotted-control-transition-duration",
     "--slotted-control-transition-easing",
+    "--slotted-data-1",
+    "--slotted-data-2",
+    "--slotted-data-3",
+    "--slotted-data-5",
     "--slotted-disabled-background",
     "--slotted-disabled-border",
     "--slotted-disabled-foreground",
+    "--slotted-duration-loop-slow",
     "--slotted-duration-medium",
     "--slotted-duration-short",
     "--slotted-easing-enter",
@@ -376,6 +408,13 @@
     "--slotted-prompt-composer-raised-focus-shadow",
     "--slotted-prompt-composer-raised-shadow",
     "--slotted-prompt-composer-readonly-background",
+    "--slotted-prompt-composer-ring-colors",
+    "--slotted-prompt-composer-ring-duration",
+    "--slotted-prompt-composer-ring-glow-opacity",
+    "--slotted-prompt-composer-ring-glow-opacity-busy",
+    "--slotted-prompt-composer-ring-glow-opacity-focus",
+    "--slotted-prompt-composer-ring-glow-reach",
+    "--slotted-prompt-composer-ring-width",
     "--slotted-prompt-composer-rows",
     "--slotted-prompt-composer-selection-background",
     "--slotted-prompt-composer-shadow",
@@ -396,6 +435,7 @@
     "--slotted-space-3",
     "--slotted-space-4",
     "--slotted-space-5",
+    "--slotted-space-8",
     "--slotted-surface-sunken",
     "--slotted-target-comfortable",
     "--slotted-target-min",

package/dist/docs/prompt-composer.md

@@ -42,6 +42,8 @@ Excerpt — not a complete module
 | `action` | button (PromptComposerAction) | no |
 | `attach` | button (PromptComposerAttach), with a hidden file input beside it | no |
 | `submit` | button (PromptComposerSubmit) | no |
+| `ring` | span, aria-hidden | no |
+| `glow` | span, aria-hidden | no |
 
 ## Props
 
@@ -53,6 +55,7 @@ Excerpt — not a complete module
 | `submitOn` | `'enter' \| 'mod-enter'` | enter | PromptComposer, PromptComposerDefaultsProvider | Which key sends. Shift+Enter always breaks a line; Mod+Enter always sends |
 | `size` | `'sm' \| 'md' \| 'lg'` | md | PromptComposer, PromptComposerDefaultsProvider | The control step, read from the field first |
 | `variant` | `'raised' \| 'outline' \| 'subtle'` | raised | PromptComposer, PromptComposerDefaultsProvider | raised is the chat surface; outline and subtle sit inside a form |
+| `emphasis` | `'none' \| 'ring'` | none | PromptComposer | A ring of turning hues and a soft glow in place of the border, the focus outline and the raised shadow. Reduced motion stops the turn; forced colours bring the border back |
 | `canSubmit` | `boolean` | the value is not blank | PromptComposer | Whether the send is available; an application with attachments ready says true |
 | `accept / maxSize / maxFiles / multiple` | `string / number / number / boolean` | — / — / — / true | PromptComposer | The selection rules upload applies, for the paperclip, a paste and a drop |
 | `disabled` | `boolean` | from the field, or false | PromptComposer | Unstated rather than false, so the composer defers to its field. The native attribute on the textarea; the paperclip and the send leave the tab order with it |
@@ -87,6 +90,7 @@ Excerpt — not a complete module
 | `variant` | `raised`, `outline`, `subtle` | `raised` |
 | `submitOn` | `enter`, `mod-enter` | `enter` |
 | `status` | `ready`, `submitted`, `streaming`, `error` | `ready` |
+| `emphasis` | `none`, `ring` | — |
 
 ## Rules
 
@@ -99,7 +103,7 @@ Excerpt — not a complete module
 
 ## Tokens
 
-`--slotted-border-strong`, `--slotted-border-subtle`, `--slotted-border-width-medium`, `--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-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-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-weight-medium`, `--slotted-line-height-md`, `--slotted-prompt-composer-action-active-background`, `--slotted-prompt-composer-action-color`, `--slotted-prompt-composer-action-hover-background`, `--slotted-prompt-composer-action-label-color`, `--slotted-prompt-composer-background`, `--slotted-prompt-composer-border-color`, `--slotted-prompt-composer-caret-color`, `--slotted-prompt-composer-color`, `--slotted-prompt-composer-disabled-background`, `--slotted-prompt-composer-disabled-border-color`, `--slotted-prompt-composer-disabled-color`, `--slotted-prompt-composer-drop-background`, `--slotted-prompt-composer-drop-border-color`, `--slotted-prompt-composer-hover-border-color`, `--slotted-prompt-composer-invalid-border-color`, `--slotted-prompt-composer-invalid-edge-width`, `--slotted-prompt-composer-invalid-focus-ring-color`, `--slotted-prompt-composer-line-height`, `--slotted-prompt-composer-max-rows`, `--slotted-prompt-composer-placeholder-color`, `--slotted-prompt-composer-radius`, `--slotted-prompt-composer-raised-focus-shadow`, `--slotted-prompt-composer-raised-shadow`, `--slotted-prompt-composer-readonly-background`, `--slotted-prompt-composer-rows`, `--slotted-prompt-composer-selection-background`, `--slotted-prompt-composer-shadow`, `--slotted-prompt-composer-submit-active-background`, `--slotted-prompt-composer-submit-background`, `--slotted-prompt-composer-submit-color`, `--slotted-prompt-composer-submit-disabled-background`, `--slotted-prompt-composer-submit-hover-background`, `--slotted-prompt-composer-subtle-background`, `--slotted-prompt-composer-subtle-border-color`, `--slotted-radius-full`, `--slotted-radius-lg`, `--slotted-radius-xs`, `--slotted-shadow-lg`, `--slotted-shadow-md`, `--slotted-space-1`, `--slotted-space-2`, `--slotted-space-3`, `--slotted-space-4`, `--slotted-space-5`, `--slotted-surface-sunken`, `--slotted-target-comfortable`, `--slotted-target-min`, `--slotted-text`, `--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-surface`, `--slotted-tone-danger-border`, `--slotted-tone-secondary-subtle-active`, `--slotted-tone-secondary-subtle-hover`
+`--slotted-border-strong`, `--slotted-border-subtle`, `--slotted-border-width-medium`, `--slotted-border-width-thick`, `--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-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-shadow`, `--slotted-control-shadow-focus-geometry`, `--slotted-control-surface`, `--slotted-control-transition-duration`, `--slotted-control-transition-easing`, `--slotted-data-1`, `--slotted-data-2`, `--slotted-data-3`, `--slotted-data-5`, `--slotted-disabled-background`, `--slotted-disabled-border`, `--slotted-disabled-foreground`, `--slotted-duration-loop-slow`, `--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-weight-medium`, `--slotted-line-height-md`, `--slotted-prompt-composer-action-active-background`, `--slotted-prompt-composer-action-color`, `--slotted-prompt-composer-action-hover-background`, `--slotted-prompt-composer-action-label-color`, `--slotted-prompt-composer-background`, `--slotted-prompt-composer-border-color`, `--slotted-prompt-composer-caret-color`, `--slotted-prompt-composer-color`, `--slotted-prompt-composer-disabled-background`, `--slotted-prompt-composer-disabled-border-color`, `--slotted-prompt-composer-disabled-color`, `--slotted-prompt-composer-drop-background`, `--slotted-prompt-composer-drop-border-color`, `--slotted-prompt-composer-hover-border-color`, `--slotted-prompt-composer-invalid-border-color`, `--slotted-prompt-composer-invalid-edge-width`, `--slotted-prompt-composer-invalid-focus-ring-color`, `--slotted-prompt-composer-line-height`, `--slotted-prompt-composer-max-rows`, `--slotted-prompt-composer-placeholder-color`, `--slotted-prompt-composer-radius`, `--slotted-prompt-composer-raised-focus-shadow`, `--slotted-prompt-composer-raised-shadow`, `--slotted-prompt-composer-readonly-background`, `--slotted-prompt-composer-ring-colors`, `--slotted-prompt-composer-ring-duration`, `--slotted-prompt-composer-ring-glow-opacity`, `--slotted-prompt-composer-ring-glow-opacity-busy`, `--slotted-prompt-composer-ring-glow-opacity-focus`, `--slotted-prompt-composer-ring-glow-reach`, `--slotted-prompt-composer-ring-width`, `--slotted-prompt-composer-rows`, `--slotted-prompt-composer-selection-background`, `--slotted-prompt-composer-shadow`, `--slotted-prompt-composer-submit-active-background`, `--slotted-prompt-composer-submit-background`, `--slotted-prompt-composer-submit-color`, `--slotted-prompt-composer-submit-disabled-background`, `--slotted-prompt-composer-submit-hover-background`, `--slotted-prompt-composer-subtle-background`, `--slotted-prompt-composer-subtle-border-color`, `--slotted-radius-full`, `--slotted-radius-lg`, `--slotted-radius-xs`, `--slotted-shadow-lg`, `--slotted-shadow-md`, `--slotted-space-1`, `--slotted-space-2`, `--slotted-space-3`, `--slotted-space-4`, `--slotted-space-5`, `--slotted-space-8`, `--slotted-surface-sunken`, `--slotted-target-comfortable`, `--slotted-target-min`, `--slotted-text`, `--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-surface`, `--slotted-tone-danger-border`, `--slotted-tone-secondary-subtle-active`, `--slotted-tone-secondary-subtle-hover`
 
 ## Examples
 

package/dist/docs/rating.json

@@ -14,6 +14,7 @@
     ],
     "tone": [
       "accent",
+      "info",
       "success",
       "warning",
       "danger"
@@ -246,7 +247,7 @@
         },
         {
           "name": "tone",
-          "type": "'accent' | 'success' | 'warning' | 'danger'",
+          "type": "'accent' | 'info' | 'success' | 'warning' | 'danger'",
           "defaultValue": "warning",
           "appliesTo": "all members, RatingProvider",
           "description": "The colour a lit symbol takes. secondary is declined: its solid step is a ground, and a star lit in it reads as unlit"
@@ -461,7 +462,7 @@
         },
         {
           "name": "tone",
-          "type": "'accent' | 'success' | 'warning' | 'danger'",
+          "type": "'accent' | 'info' | 'success' | 'warning' | 'danger'",
           "defaultValue": "warning",
           "appliesTo": "all members, RatingProvider",
           "description": "The colour a lit symbol takes. secondary is declined: its solid step is a ground, and a star lit in it reads as unlit"
@@ -780,7 +781,7 @@
         },
         {
           "name": "tone",
-          "type": "'accent' | 'success' | 'warning' | 'danger'",
+          "type": "'accent' | 'info' | 'success' | 'warning' | 'danger'",
           "defaultValue": "warning",
           "appliesTo": "all members, RatingProvider",
           "description": "The colour a lit symbol takes. secondary is declined: its solid step is a ground, and a star lit in it reads as unlit"
@@ -912,6 +913,7 @@
     "--slotted-tone-danger-solid",
     "--slotted-tone-danger-surface",
     "--slotted-tone-danger-text",
+    "--slotted-tone-info-solid",
     "--slotted-tone-secondary-border",
     "--slotted-tone-secondary-subtle-active",
     "--slotted-tone-secondary-subtle-hover",

package/dist/docs/rating.md

@@ -89,7 +89,7 @@ Excerpt — not a complete module
 | `step` | `1 \| 0.5` | 1 | Rating | A whole symbol or half of one. Finer fractions are declined: a third of a 20-pixel star is below the minimum target |
 | `clearable` | `boolean` | true | Rating, RatingProvider | Whether a press on the checked star, Backspace and Delete empty the value |
 | `size` | `'sm' \| 'md' \| 'lg'` | md | all members, RatingProvider | The step the symbols and the text sit at. The symbol does not follow density; the text does |
-| `tone` | `'accent' \| 'success' \| 'warning' \| 'danger'` | warning | all members, RatingProvider | The colour a lit symbol takes. secondary is declined: its solid step is a ground, and a star lit in it reads as unlit |
+| `tone` | `'accent' \| 'info' \| 'success' \| 'warning' \| 'danger'` | warning | all members, RatingProvider | The colour a lit symbol takes. secondary is declined: its solid step is a ground, and a star lit in it reads as unlit |
 | `disabled` | `boolean` | from the field, or false | Rating | Unstated rather than false. Every radio is disabled natively; the value stays readable |
 | `readOnly` | `boolean` | from the field, or false | Rating | Unstated rather than false. Every change is refused, every radio keeps its tab stop, and aria-readonly is written |
 | `required` | `boolean` | from the field, or false | Rating | Unstated rather than false. Writes aria-required on the group, never the native attribute |
@@ -112,7 +112,7 @@ Excerpt — not a complete module
 | `value` | `number` | — | RatingDisplay | The value reported, any fraction, clamped to the scale |
 | `max` | `number` | 5 | all members, RatingProvider | How many symbols, or how many levels a summary reads from counts |
 | `size` | `'sm' \| 'md' \| 'lg'` | md | all members, RatingProvider | The step the symbols and the text sit at. The symbol does not follow density; the text does |
-| `tone` | `'accent' \| 'success' \| 'warning' \| 'danger'` | warning | all members, RatingProvider | The colour a lit symbol takes. secondary is declined: its solid step is a ground, and a star lit in it reads as unlit |
+| `tone` | `'accent' \| 'info' \| 'success' \| 'warning' \| 'danger'` | warning | all members, RatingProvider | The colour a lit symbol takes. secondary is declined: its solid step is a ground, and a star lit in it reads as unlit |
 | `variant` | `'full' \| 'compact' \| 'histogram'` | full | RatingDisplay | Every symbol, or one star beside the number, or one star and a bar per level |
 | `count` | `number` | — | RatingDisplay | How many ratings. Written beside the number and added to the accessible name |
 | `distribution` | `readonly number[]` | — | RatingDisplay | Counts per level, lowest first, drawn by the histogram variant |
@@ -137,7 +137,7 @@ Excerpt — not a complete module
 | `showInsight` | `boolean` | true | RatingSummary | Whether the spectrum writes its conclusion |
 | `insightThresholds` | `Partial<RatingInsightThresholds>` | { divided: 0.25, few: 30, margin: 0.5, consensus: 0.8 } | RatingSummary, RatingProvider | Where the conclusions are drawn, merged over the provider’s |
 | `size` | `'sm' \| 'md' \| 'lg'` | md | all members, RatingProvider | The step the symbols and the text sit at. The symbol does not follow density; the text does |
-| `tone` | `'accent' \| 'success' \| 'warning' \| 'danger'` | warning | all members, RatingProvider | The colour a lit symbol takes. secondary is declined: its solid step is a ground, and a star lit in it reads as unlit |
+| `tone` | `'accent' \| 'info' \| 'success' \| 'warning' \| 'danger'` | warning | all members, RatingProvider | The colour a lit symbol takes. secondary is declined: its solid step is a ground, and a star lit in it reads as unlit |
 | `locale` | `string` | the language in force | all members | The locale every number is written in: 4,6 and 1.284 in pt-BR |
 | `messages` | `Partial<RatingMessages>` | — | all members | Words laid over the language in force, key by key: every string the family writes |
 | `render` | `(props: RatingRootProps) => ReactNode` | — | RatingSummary | Substitutes the section root and hands it every attribute and handler |
@@ -165,8 +165,8 @@ Excerpt — not a complete module
 | Axis | Values | Default |
 | --- | --- | --- |
 | `size` | `sm`, `md`, `lg` | `md` |
-| `tone` | `accent`, `success`, `warning`, `danger` | `warning` |
-| `variant` | `full`, `compact`, `histogram` | `full`, `bars` |
+| `tone` | `accent`, `info`, `success`, `warning`, `danger` | `warning` |
+| `variant` | `full`, `compact`, `histogram` | `full`, bars |
 | `summaryVariant` | `bars`, `spectrum` | — |
 
 ## Rules
@@ -185,7 +185,7 @@ Excerpt — not a complete module
 
 ## Tokens
 
-`--slotted-border-strong`, `--slotted-border-subtle`, `--slotted-border-width-thick`, `--slotted-border-width-thin`, `--slotted-control-font-family`, `--slotted-control-font-size-lg`, `--slotted-control-font-size-md`, `--slotted-control-font-size-sm`, `--slotted-control-gap-lg`, `--slotted-control-gap-md`, `--slotted-control-gap-sm`, `--slotted-control-height-sm`, `--slotted-control-icon-size-sm`, `--slotted-control-invalid-edge-width`, `--slotted-control-transition-duration`, `--slotted-control-transition-easing`, `--slotted-disabled-background`, `--slotted-disabled-foreground`, `--slotted-duration-instant`, `--slotted-duration-long`, `--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-size-4xl`, `--slotted-font-size-xs`, `--slotted-font-weight-medium`, `--slotted-font-weight-regular`, `--slotted-font-weight-semibold`, `--slotted-highlight-tint-opacity`, `--slotted-line-height-4xl`, `--slotted-line-height-md`, `--slotted-line-height-xs`, `--slotted-radius-full`, `--slotted-radius-sm`, `--slotted-radius-xs`, `--slotted-rating-active-background`, `--slotted-rating-bar-color`, `--slotted-rating-bar-size`, `--slotted-rating-edge`, `--slotted-rating-empty-color`, `--slotted-rating-gap`, `--slotted-rating-hover-background`, `--slotted-rating-invalid-color`, `--slotted-rating-invalid-edge-width`, `--slotted-rating-lit-color`, `--slotted-rating-symbol-size`, `--slotted-space-1`, `--slotted-space-10`, `--slotted-space-12`, `--slotted-space-2`, `--slotted-space-3`, `--slotted-space-4`, `--slotted-space-5`, `--slotted-space-6`, `--slotted-space-7`, `--slotted-space-8`, `--slotted-space-9`, `--slotted-surface-inverse`, `--slotted-target-comfortable`, `--slotted-target-min`, `--slotted-text`, `--slotted-text-inverse`, `--slotted-text-muted`, `--slotted-tone-accent-solid`, `--slotted-tone-danger-border`, `--slotted-tone-danger-solid`, `--slotted-tone-danger-surface`, `--slotted-tone-danger-text`, `--slotted-tone-secondary-border`, `--slotted-tone-secondary-subtle-active`, `--slotted-tone-secondary-subtle-hover`, `--slotted-tone-secondary-surface`, `--slotted-tone-success-border`, `--slotted-tone-success-solid`, `--slotted-tone-success-surface`, `--slotted-tone-success-text`, `--slotted-tone-warning-border`, `--slotted-tone-warning-solid`, `--slotted-tone-warning-surface`, `--slotted-tone-warning-text`
+`--slotted-border-strong`, `--slotted-border-subtle`, `--slotted-border-width-thick`, `--slotted-border-width-thin`, `--slotted-control-font-family`, `--slotted-control-font-size-lg`, `--slotted-control-font-size-md`, `--slotted-control-font-size-sm`, `--slotted-control-gap-lg`, `--slotted-control-gap-md`, `--slotted-control-gap-sm`, `--slotted-control-height-sm`, `--slotted-control-icon-size-sm`, `--slotted-control-invalid-edge-width`, `--slotted-control-transition-duration`, `--slotted-control-transition-easing`, `--slotted-disabled-background`, `--slotted-disabled-foreground`, `--slotted-duration-instant`, `--slotted-duration-long`, `--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-size-4xl`, `--slotted-font-size-xs`, `--slotted-font-weight-medium`, `--slotted-font-weight-regular`, `--slotted-font-weight-semibold`, `--slotted-highlight-tint-opacity`, `--slotted-line-height-4xl`, `--slotted-line-height-md`, `--slotted-line-height-xs`, `--slotted-radius-full`, `--slotted-radius-sm`, `--slotted-radius-xs`, `--slotted-rating-active-background`, `--slotted-rating-bar-color`, `--slotted-rating-bar-size`, `--slotted-rating-edge`, `--slotted-rating-empty-color`, `--slotted-rating-gap`, `--slotted-rating-hover-background`, `--slotted-rating-invalid-color`, `--slotted-rating-invalid-edge-width`, `--slotted-rating-lit-color`, `--slotted-rating-symbol-size`, `--slotted-space-1`, `--slotted-space-10`, `--slotted-space-12`, `--slotted-space-2`, `--slotted-space-3`, `--slotted-space-4`, `--slotted-space-5`, `--slotted-space-6`, `--slotted-space-7`, `--slotted-space-8`, `--slotted-space-9`, `--slotted-surface-inverse`, `--slotted-target-comfortable`, `--slotted-target-min`, `--slotted-text`, `--slotted-text-inverse`, `--slotted-text-muted`, `--slotted-tone-accent-solid`, `--slotted-tone-danger-border`, `--slotted-tone-danger-solid`, `--slotted-tone-danger-surface`, `--slotted-tone-danger-text`, `--slotted-tone-info-solid`, `--slotted-tone-secondary-border`, `--slotted-tone-secondary-subtle-active`, `--slotted-tone-secondary-subtle-hover`, `--slotted-tone-secondary-surface`, `--slotted-tone-success-border`, `--slotted-tone-success-solid`, `--slotted-tone-success-surface`, `--slotted-tone-success-text`, `--slotted-tone-warning-border`, `--slotted-tone-warning-solid`, `--slotted-tone-warning-surface`, `--slotted-tone-warning-text`
 
 ## Examples