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

package/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
@@ -95,7 +100,7 @@
           "part": "root",
           "element": "the header carrying slPageHeader",
           "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",
@@ -221,7 +226,7 @@
           "part": "progress",
           "element": "the consumer’s element carrying slPageHeaderProgress, holding one [slProgressBar] at placement=\"edge-end\"",
           "required": false,
-          "purpose": "A refresh of what is already on screen. A row one hairline tall and the header’s whole width, written after the controls and before the tabs: there the bar covers the line the pill straddles, and with no tabs the root’s own hairline. It draws nothing while loading is true or inside a region that is aria-busy."
+          "purpose": "A refresh of what is already on screen. A row one hairline tall and the header’s whole width, wherever it is written among the parts: the bar covers the line the pill straddles when a pill stands over the tabs, and the root’s own hairline otherwise. It draws nothing while loading is true or inside a region that is aria-busy."
         }
       ],
       "api": [
@@ -244,7 +249,14 @@
           "type": "'band' | 'plain' | 'floating'",
           "defaultValue": "band",
           "appliesTo": "slPageHeader, providePageHeaderDefaults",
-          "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": "slPageHeader, providePageHeaderDefaults",
+          "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",
@@ -403,11 +415,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",
@@ -429,6 +445,7 @@
     "--slotted-space-5",
     "--slotted-space-6",
     "--slotted-surface",
+    "--slotted-surface-material",
     "--slotted-target-comfortable",
     "--slotted-target-min",
     "--slotted-text",
@@ -525,7 +542,7 @@
     {
       "id": "progress",
       "title": "A refresh of what is on screen",
-      "note": "slPageHeaderProgress 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": "slPageHeaderProgress 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": "html",
       "source": "<header slPageHeader>\n  <div slPageHeaderTitleArea>…</div>\n  <div slPageHeaderControls>…</div>\n  <div slPageHeaderProgress [loading]=\"refreshing()\"></div>\n  <div slPageHeaderTabs>…</div>\n</header>\n",
       "verdict": "excerpt"
@@ -541,7 +558,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 slToolbar 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 slToolbar 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": "html",
       "source": "<header slPageHeader>…</header>\n",
       "verdict": "excerpt"

package/docs/page-header.md

@@ -63,7 +63,8 @@ Excerpt — not a complete module
 | --- | --- | --- | --- | --- |
 | `expanded` | `model<boolean>` | true | slPageHeader | Whether the header area is open. Two-way, so [(expanded)] follows it; true at rest, pinned or revealed, false while scrolled past or collapsed by the control |
 | `pinned` | `model<boolean>` | false | slPageHeader | Whether the pin holds the area open. Two-way. Pinned, the whole header stays while the page scrolls |
-| `variant` | `'band' \| 'plain' \| 'floating'` | band | slPageHeader, providePageHeaderDefaults | 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 | slPageHeader, providePageHeaderDefaults | 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 | slPageHeader, providePageHeaderDefaults | 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 | slPageHeader, providePageHeaderDefaults | The step the title sits at, on the type scale. The snapped title takes the step below |
 | `level` | `'1' \| '2' \| '3'` | 1 | slPageHeader, providePageHeaderDefaults | The rank of the heading. A native heading element written by the consumer is left alone; any other element carrying slPageHeaderHeading gets role="heading" and this level |
 | `collapse` | `'scroll' \| 'manual'` | scroll | slPageHeader, providePageHeaderDefaults | 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 |
@@ -92,6 +93,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` |
@@ -107,7 +109,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
 
@@ -260,7 +262,7 @@ Excerpt — not a complete module
 
 ### A refresh of what is on screen
 
-slPageHeaderProgress 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.
+slPageHeaderProgress 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
 
@@ -288,7 +290,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 slToolbar 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 slToolbar 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/docs/page.json

@@ -221,6 +221,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. Write it on a main element and the directive adds nothing; on any other element it writes role=\"main\", unless landmark=\"none\" says the document already has one.",
         "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 — read with HostAttributeToken, so the consumer’s word is never written over.",
+        "Content outside slPageBody receives no inset: the inset lives on the body, so content written straight into slPage is drawn against the viewport edges. In development, slPage warns once when it holds content and no slPageBody.",
         "The outline is typography’s. slHeadingLevel is a host directive of the body, 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."
@@ -236,6 +237,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/docs/page.md

@@ -67,13 +67,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. Write it on a main element and the directive adds nothing; on any other element it writes role="main", unless landmark="none" says the document already has one.
 - 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 — read with HostAttributeToken, so the consumer’s word is never written over.
+- Content outside slPageBody receives no inset: the inset lives on the body, so content written straight into slPage is drawn against the viewport edges. In development, slPage warns once when it holds content and no slPageBody.
 - The outline is typography’s. slHeadingLevel is a host directive of the body, 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/docs/popover.json

@@ -146,7 +146,7 @@
           "part": "content",
           "element": "the element carrying slPopoverContent",
           "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: slPopoverHeader, slPopoverBody and slPopoverFooter carry the panel inset, set by --slotted-popover-padding-inline and --slotted-popover-padding-block."
         },
         {
           "part": "header",

package/docs/progress-indicator.json

@@ -15,6 +15,7 @@
     "tone": [
       "accent",
       "secondary",
+      "info",
       "success",
       "warning",
       "danger"
@@ -143,7 +144,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"
@@ -339,7 +340,6 @@
     "--slotted-progress-indicator-wave-phase",
     "--slotted-radius-full",
     "--slotted-radius-none",
-    "--slotted-space-1",
     "--slotted-space-2",
     "--slotted-space-3",
     "--slotted-space-4",
@@ -348,6 +348,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"
@@ -428,7 +429,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": "html",
       "source": "<div slProgressBar label=\"Small\" size=\"sm\" wave [value]=\"55\"></div>\n<div slProgressBar label=\"Large\" size=\"lg\" wave [value]=\"55\"></div>\n<div slProgressCircle label=\"Saving\" size=\"lg\" wave [value]=\"55\"></div>\n",
       "verdict": "excerpt"

package/docs/progress-indicator.md

@@ -38,7 +38,7 @@ Excerpt — not a complete module
 | `max` | `number` | 100 | slProgressBar, slProgressCircle | The top of the range, and what aria-valuemax reports. Reaching it writes data-complete |
 | `buffer` | `number \| null` | — | slProgressBar | 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 an aria-label on your own element, 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 | slProgressBar, slProgressCircle | Whether the formatted number is rendered beside the name. A wait needs no number to be understood |
@@ -70,7 +70,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
@@ -85,7 +85,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
 
@@ -195,7 +195,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/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"
       ]
     }
   },
@@ -124,6 +130,18 @@
           "element": "button[slPromptComposerSubmit]",
           "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": [
@@ -169,6 +187,13 @@
           "appliesTo": "slPromptComposer, providePromptComposerDefaults",
           "description": "raised is the chat surface; outline and subtle sit inside a form"
         },
+        {
+          "name": "emphasis",
+          "type": "'none' | 'ring'",
+          "defaultValue": "none",
+          "appliesTo": "sl-prompt-composer",
+          "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",
@@ -318,9 +343,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",
@@ -340,9 +367,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",
@@ -378,6 +410,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",
@@ -398,6 +437,7 @@
     "--slotted-space-3",
     "--slotted-space-4",
     "--slotted-space-5",
+    "--slotted-space-8",
     "--slotted-surface-sunken",
     "--slotted-target-comfortable",
     "--slotted-target-min",

package/docs/prompt-composer.md

@@ -49,6 +49,8 @@ Excerpt — not a complete module
 | `action` | button[slPromptComposerAction] | no |
 | `attach` | button[slPromptComposerAttach] | no |
 | `submit` | button[slPromptComposerSubmit] | no |
+| `ring` | span, aria-hidden | no |
+| `glow` | span, aria-hidden | no |
 
 ## Props
 
@@ -60,6 +62,7 @@ Excerpt — not a complete module
 | `submitOn` | `'enter' \| 'mod-enter'` | enter | slPromptComposer, providePromptComposerDefaults | Which key sends. Shift+Enter always breaks a line; Mod+Enter always sends |
 | `size` | `'sm' \| 'md' \| 'lg'` | md | slPromptComposer, providePromptComposerDefaults | The control step, read from the field first |
 | `variant` | `'raised' \| 'outline' \| 'subtle'` | raised | slPromptComposer, providePromptComposerDefaults | raised is the chat surface; outline and subtle sit inside a form |
+| `emphasis` | `'none' \| 'ring'` | none | sl-prompt-composer | 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 | slPromptComposer | Whether the send is available; an application with attachments ready says true |
 | `accept / maxSize / maxFiles / multiple` | `string / number / number / boolean` | — / — / — / true | slPromptComposer | The selection rules upload applies, for the paperclip, a paste and a drop |
 | `disabled` | `boolean` | from the field, or false | slPromptComposer | 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 |
@@ -94,6 +97,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
 
@@ -106,7 +110,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/docs/rating.json

@@ -14,6 +14,7 @@
     ],
     "tone": [
       "accent",
+      "info",
       "success",
       "warning",
       "danger"
@@ -241,7 +242,7 @@
         },
         {
           "name": "tone",
-          "type": "'accent' | 'success' | 'warning' | 'danger'",
+          "type": "'accent' | 'info' | 'success' | 'warning' | 'danger'",
           "defaultValue": "warning",
           "appliesTo": "SlRating, provideRating",
           "description": "The colour of a lit symbol. secondary is outside the axis: its solid step is a ground, and a lit star in it reads as unlit"
@@ -457,7 +458,7 @@
         },
         {
           "name": "tone",
-          "type": "'accent' | 'success' | 'warning' | 'danger'",
+          "type": "'accent' | 'info' | 'success' | 'warning' | 'danger'",
           "defaultValue": "warning",
           "appliesTo": "SlRatingDisplay, provideRating",
           "description": "The colour of the lit share"
@@ -757,7 +758,7 @@
         },
         {
           "name": "tone",
-          "type": "'accent' | 'success' | 'warning' | 'danger'",
+          "type": "'accent' | 'info' | 'success' | 'warning' | 'danger'",
           "defaultValue": "warning",
           "appliesTo": "SlRatingSummary, provideRating",
           "description": "The colour of the stars and the bars"
@@ -883,6 +884,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/docs/rating.md

@@ -105,7 +105,7 @@ Excerpt — not a complete module
 | `step` | `1 \| 0.5` | 1 | SlRating | The smallest move. A half adds a second radio per symbol; smaller fractions are refused because a third of a star is below the minimum target |
 | `clearable` | `boolean` | true | SlRating, provideRating | Whether a press on the checked radio, Backspace or Delete empty the value, with the reason clear |
 | `size` | `'sm' \| 'md' \| 'lg'` | md | SlRating, provideRating | The step of the symbols and the caption. Read from the field or field group first |
-| `tone` | `'accent' \| 'success' \| 'warning' \| 'danger'` | warning | SlRating, provideRating | The colour of a lit symbol. secondary is outside the axis: its solid step is a ground, and a lit star in it reads as unlit |
+| `tone` | `'accent' \| 'info' \| 'success' \| 'warning' \| 'danger'` | warning | SlRating, provideRating | The colour of a lit symbol. secondary is outside the axis: its solid step is a ground, and a lit star in it reads as unlit |
 | `name` | `string` | generated | SlRating | The submission name every radio shares. Generated when none is written, because an unnamed set of radios is not a group |
 | `form` | `string` | — | SlRating | The form the radios belong to when the rating sits outside it |
 | `disabled` | `boolean` | from the field, or false | SlRating | Native on every radio: the row leaves the tab order. A disabled form control sets it too |
@@ -128,7 +128,7 @@ Excerpt — not a complete module
 | `value` | `number` | — | SlRatingDisplay | The number drawn. Any fraction; clamped to the scale, NaN drawn as nought |
 | `max` | `number` | 5 | SlRatingDisplay, provideRating | How many symbols the scale has |
 | `size` | `'sm' \| 'md' \| 'lg'` | md | SlRatingDisplay, provideRating | The step of the symbols and the text |
-| `tone` | `'accent' \| 'success' \| 'warning' \| 'danger'` | warning | SlRatingDisplay, provideRating | The colour of the lit share |
+| `tone` | `'accent' \| 'info' \| 'success' \| 'warning' \| 'danger'` | warning | SlRatingDisplay, provideRating | The colour of the lit share |
 | `variant` | `'full' \| 'compact' \| 'histogram'` | full | SlRatingDisplay | Every symbol; one lit star with the number; or one star, the number and the distribution |
 | `count` | `number` | — | SlRatingDisplay | How many readings. Written beside the stars and in the accessible name |
 | `distribution` | `readonly number[]` | — | SlRatingDisplay | Counts per level, lowest first, drawn by the histogram variant |
@@ -150,7 +150,7 @@ Excerpt — not a complete module
 | `insightThresholds` | `Partial<RatingInsightThresholds>` | { divided: 0.25, few: 30, margin: 0.5, consensus: 0.8 } | SlRatingSummary, provideRating | Where each conclusion is drawn, merged key by key. margin also decides when the spectrum says its mean is uncertain |
 | `showInsight` | `boolean` | true | SlRatingSummary | Whether the spectrum draws its conclusion. The bars variant draws none |
 | `size` | `'sm' \| 'md' \| 'lg'` | md | SlRatingSummary, provideRating | The step of the text and the rows |
-| `tone` | `'accent' \| 'success' \| 'warning' \| 'danger'` | warning | SlRatingSummary, provideRating | The colour of the stars and the bars |
+| `tone` | `'accent' \| 'info' \| 'success' \| 'warning' \| 'danger'` | warning | SlRatingSummary, provideRating | The colour of the stars and the bars |
 | `messages` | `Partial<RatingMessages>` | — | SlRatingSummary | Words laid over the language in force, key by key — every sentence of the summary: summaryCount, summaryEmpty, spectrumCount, spectrumUncertain, levelLabel, distributionLabel, the buckets and the four conclusions |
 | `locale` | `string` | the language in force | SlRatingSummary | The locale every number is written in |
 | `exportAs="slRatingSummary"` | `SlRatingSummary` | — | a template | Reaches the instance: summary() is the whole summariseRatings result, for a caption of one’s own |
@@ -177,8 +177,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
@@ -197,7 +197,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