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

package/docs/list.md

@@ -33,6 +33,7 @@ Excerpt — not a complete module
 | `root` | ul or ol, or the element render returns | yes |
 | `section` | li | no |
 | `section-label` | h1 to h6, or a div | no |
+| `section-end` | span | no |
 | `section-list` | ul or ol | no |
 | `empty` | li | no |
 
@@ -48,6 +49,7 @@ Excerpt — not a complete module
 | `loading` | `boolean` | false | slList | Writes aria-busy on the set. What stands in for the rows is slSkeleton, composed by the page |
 | `level` | `'none' \| '1' \| '2' \| '3' \| '4' \| '5' \| '6'` | 3 | the element | Not an input: slListSectionLabel goes on the heading the page wrote, at whatever level the document needs |
 | `sticky` | `boolean` | false | slListSectionLabel | Keeps a group name in place while its own rows scroll past it |
+| `variant` | `'caption' \| 'ruled'` | caption | slListSectionLabel | How the group heading is drawn: the small muted name, or the name over a rule with no ground; an element inside it marked slListSectionEnd stands at the end, in tabular figures |
 | `id` | `string` | — | slListSectionLabel | The heading own id, which the nested list is named by. Generated when the page wrote none |
 | `exportAs` | `slList \| slListSection \| slListSectionLabel \| slListSectionList \| slListEmpty` | — | every directive | Reaches the instance from a template |
 | `aria-label / aria-labelledby` | `string` | — | slList | The set own name, written on the element. The family adds no label of its own |
@@ -75,7 +77,7 @@ Excerpt — not a complete module
 
 ## Tokens
 
-`--slotted-border-subtle`, `--slotted-border-width-thin`, `--slotted-control-padding-inline-lg`, `--slotted-control-padding-inline-md`, `--slotted-control-padding-inline-sm`, `--slotted-font-size-xs`, `--slotted-font-weight-semibold`, `--slotted-line-height-sm`, `--slotted-list-background`, `--slotted-list-border-color`, `--slotted-list-border-width`, `--slotted-list-empty-color`, `--slotted-list-empty-padding`, `--slotted-list-empty-padding-lg`, `--slotted-list-empty-padding-sm`, `--slotted-list-gap`, `--slotted-list-gap-lg`, `--slotted-list-gap-sm`, `--slotted-list-padding-inline`, `--slotted-list-padding-inline-lg`, `--slotted-list-padding-inline-sm`, `--slotted-list-radius`, `--slotted-list-section-color`, `--slotted-list-section-font-size`, `--slotted-list-section-font-weight`, `--slotted-list-section-letter-spacing`, `--slotted-list-section-padding-block`, `--slotted-list-section-padding-block-lg`, `--slotted-list-section-padding-block-sm`, `--slotted-radius-md`, `--slotted-space-2`, `--slotted-space-3`, `--slotted-space-4`, `--slotted-space-5`, `--slotted-space-6`, `--slotted-space-8`, `--slotted-space-9`, `--slotted-surface`, `--slotted-text-muted`, `--slotted-z-index-sticky`
+`--slotted-border-subtle`, `--slotted-border-width-thin`, `--slotted-control-padding-inline-lg`, `--slotted-control-padding-inline-md`, `--slotted-control-padding-inline-sm`, `--slotted-font-size-xs`, `--slotted-font-weight-medium`, `--slotted-font-weight-semibold`, `--slotted-line-height-sm`, `--slotted-list-background`, `--slotted-list-border-color`, `--slotted-list-border-width`, `--slotted-list-empty-color`, `--slotted-list-empty-padding`, `--slotted-list-empty-padding-lg`, `--slotted-list-empty-padding-sm`, `--slotted-list-gap`, `--slotted-list-gap-lg`, `--slotted-list-gap-sm`, `--slotted-list-padding-inline`, `--slotted-list-padding-inline-lg`, `--slotted-list-padding-inline-sm`, `--slotted-list-radius`, `--slotted-list-section-color`, `--slotted-list-section-font-size`, `--slotted-list-section-font-weight`, `--slotted-list-section-letter-spacing`, `--slotted-list-section-padding-block`, `--slotted-list-section-padding-block-lg`, `--slotted-list-section-padding-block-sm`, `--slotted-list-section-rule-color`, `--slotted-list-section-ruled-color`, `--slotted-radius-md`, `--slotted-space-2`, `--slotted-space-3`, `--slotted-space-4`, `--slotted-space-5`, `--slotted-space-6`, `--slotted-space-8`, `--slotted-space-9`, `--slotted-surface`, `--slotted-text`, `--slotted-text-muted`, `--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/segmented-control.json

@@ -19,6 +19,10 @@
     "condense": [
       "none",
       "icons"
+    ],
+    "variant": [
+      "track",
+      "underline"
     ]
   },
   "members": {
@@ -29,7 +33,8 @@
         "orientation": "horizontal",
         "condense": "none",
         "fullWidth": false,
-        "disabled": false
+        "disabled": false,
+        "variant": "track"
       },
       "capabilities": [
         "selection",
@@ -145,6 +150,13 @@
           "appliesTo": "slSegmentedControl",
           "description": "How the segments flow and which way the thumb travels. A horizontal set writes aria-orientation, because radiogroup already implies vertical"
         },
+        {
+          "name": "variant",
+          "type": "'track' | 'underline'",
+          "defaultValue": "track",
+          "appliesTo": "slSegmentedControl",
+          "description": "How the choice is drawn: a track with a thumb, or the words alone with the chosen one underlined"
+        },
         {
           "name": "condense",
           "type": "'none' | 'icons'",
@@ -263,6 +275,7 @@
   },
   "tokens": [
     "--slotted-border-subtle",
+    "--slotted-border-width-thick",
     "--slotted-control-border-color",
     "--slotted-control-border-width",
     "--slotted-control-font-family",
@@ -298,7 +311,9 @@
     "--slotted-easing-standard",
     "--slotted-focus-ring-color",
     "--slotted-focus-ring-color-invalid",
+    "--slotted-focus-ring-offset",
     "--slotted-focus-ring-width",
+    "--slotted-font-weight-medium",
     "--slotted-radius-xs",
     "--slotted-segmented-control-active-background",
     "--slotted-segmented-control-background",
@@ -318,9 +333,14 @@
     "--slotted-segmented-control-invalid-focus-ring-color",
     "--slotted-segmented-control-radius",
     "--slotted-segmented-control-shadow",
+    "--slotted-segmented-control-underline-checked-color",
+    "--slotted-segmented-control-underline-color",
+    "--slotted-segmented-control-underline-gap",
     "--slotted-space-1",
+    "--slotted-space-6",
     "--slotted-target-min",
     "--slotted-text",
+    "--slotted-text-muted",
     "--slotted-tone-accent-border",
     "--slotted-tone-accent-subtle-active",
     "--slotted-tone-accent-text",
@@ -369,6 +389,14 @@
       "source": "<div slSegmentedControl aria-label=\"Alinhamento\" defaultValue=\"center\">\n  <label slSegment value=\"start\" aria-label=\"Início\">\n    <ng-icon slSegmentIcon name=\"lucideAlignLeft\" />\n  </label>\n</div>\n",
       "verdict": "excerpt"
     },
+    {
+      "id": "variants",
+      "title": "A track, or the words alone",
+      "note": "underline draws the same radio group as words: each as wide as itself, the chosen one in the text colour and underlined, the others muted. One tab stop, the arrows move the value, and inside a field the label names the set.",
+      "language": "html",
+      "source": "<div slSegmentedControl aria-label=\"Período\" defaultValue=\"month\" variant=\"underline\">\n  <label slSegment value=\"day\">Dia</label>\n  <label slSegment value=\"week\">Semana</label>\n  <label slSegment value=\"month\">Mês</label>\n</div>\n",
+      "verdict": "excerpt"
+    },
     {
       "id": "condense",
       "title": "Narrower than its words",

package/docs/segmented-control.md

@@ -48,6 +48,7 @@ Excerpt — not a complete module
 | `name` | `string` | — | slSegmentedControl | The submission name the segments share, and the reason the platform treats them as one radio group. Generated when none is written, from an application-scoped factory so the server and the client agree |
 | `size` | `'sm' \| 'md' \| 'lg'` | md | slSegmentedControl | The control step. The track measures its segments back from it, so the whole control is exactly as tall as the field beside it |
 | `orientation` | `'horizontal' \| 'vertical'` | horizontal | slSegmentedControl | How the segments flow and which way the thumb travels. A horizontal set writes aria-orientation, because radiogroup already implies vertical |
+| `variant` | `'track' \| 'underline'` | track | slSegmentedControl | How the choice is drawn: a track with a thumb, or the words alone with the chosen one underlined |
 | `condense` | `'none' \| 'icons'` | none | slSegmentedControl | What the control does when it is narrower than its labels need. icons keeps the marks and hides the words, and makes the control take its parent’s width so there is a width to ask a question about |
 | `fullWidth` | `boolean` | false | slSegmentedControl | Whether the equal columns spread across the whole line. Left alone every column is the widest label’s |
 | `disabled` | `boolean` | false | slSegmentedControl | Unstated rather than false, so the control defers to the field around it and to a form that disables it. Stated, it reaches every radio as the native attribute |
@@ -76,6 +77,7 @@ Excerpt — not a complete module
 | `size` | `sm`, `md`, `lg` | `md` |
 | `orientation` | `horizontal`, `vertical` | `horizontal` |
 | `condense` | `none`, `icons` | `none` |
+| `variant` | `track`, `underline` | `track` |
 
 ## Rules
 
@@ -88,7 +90,7 @@ Excerpt — not a complete module
 
 ## Tokens
 
-`--slotted-border-subtle`, `--slotted-control-border-color`, `--slotted-control-border-width`, `--slotted-control-font-family`, `--slotted-control-font-size-lg`, `--slotted-control-font-size-md`, `--slotted-control-font-size-sm`, `--slotted-control-font-weight`, `--slotted-control-gap-lg`, `--slotted-control-gap-md`, `--slotted-control-gap-sm`, `--slotted-control-height-lg`, `--slotted-control-height-md`, `--slotted-control-height-sm`, `--slotted-control-icon-size-lg`, `--slotted-control-icon-size-md`, `--slotted-control-icon-size-sm`, `--slotted-control-invalid-edge-width`, `--slotted-control-letter-spacing`, `--slotted-control-line-height`, `--slotted-control-padding-inline-lg`, `--slotted-control-padding-inline-md`, `--slotted-control-padding-inline-sm`, `--slotted-control-radius`, `--slotted-control-shadow`, `--slotted-control-surface`, `--slotted-control-transition-duration`, `--slotted-control-transition-easing`, `--slotted-disabled-background`, `--slotted-disabled-border`, `--slotted-disabled-foreground`, `--slotted-duration-instant`, `--slotted-duration-medium`, `--slotted-easing-standard`, `--slotted-focus-ring-color`, `--slotted-focus-ring-color-invalid`, `--slotted-focus-ring-width`, `--slotted-radius-xs`, `--slotted-segmented-control-active-background`, `--slotted-segmented-control-background`, `--slotted-segmented-control-border-color`, `--slotted-segmented-control-checked-color`, `--slotted-segmented-control-color`, `--slotted-segmented-control-disabled-border-color`, `--slotted-segmented-control-disabled-color`, `--slotted-segmented-control-disabled-indicator-background`, `--slotted-segmented-control-divider-color`, `--slotted-segmented-control-hover-background`, `--slotted-segmented-control-indicator-background`, `--slotted-segmented-control-indicator-border-color`, `--slotted-segmented-control-inset`, `--slotted-segmented-control-invalid-border-color`, `--slotted-segmented-control-invalid-edge-width`, `--slotted-segmented-control-invalid-focus-ring-color`, `--slotted-segmented-control-radius`, `--slotted-segmented-control-shadow`, `--slotted-space-1`, `--slotted-target-min`, `--slotted-text`, `--slotted-tone-accent-border`, `--slotted-tone-accent-subtle-active`, `--slotted-tone-accent-text`, `--slotted-tone-danger-border`, `--slotted-tone-secondary-subtle-active`, `--slotted-tone-secondary-subtle-hover`
+`--slotted-border-subtle`, `--slotted-border-width-thick`, `--slotted-control-border-color`, `--slotted-control-border-width`, `--slotted-control-font-family`, `--slotted-control-font-size-lg`, `--slotted-control-font-size-md`, `--slotted-control-font-size-sm`, `--slotted-control-font-weight`, `--slotted-control-gap-lg`, `--slotted-control-gap-md`, `--slotted-control-gap-sm`, `--slotted-control-height-lg`, `--slotted-control-height-md`, `--slotted-control-height-sm`, `--slotted-control-icon-size-lg`, `--slotted-control-icon-size-md`, `--slotted-control-icon-size-sm`, `--slotted-control-invalid-edge-width`, `--slotted-control-letter-spacing`, `--slotted-control-line-height`, `--slotted-control-padding-inline-lg`, `--slotted-control-padding-inline-md`, `--slotted-control-padding-inline-sm`, `--slotted-control-radius`, `--slotted-control-shadow`, `--slotted-control-surface`, `--slotted-control-transition-duration`, `--slotted-control-transition-easing`, `--slotted-disabled-background`, `--slotted-disabled-border`, `--slotted-disabled-foreground`, `--slotted-duration-instant`, `--slotted-duration-medium`, `--slotted-easing-standard`, `--slotted-focus-ring-color`, `--slotted-focus-ring-color-invalid`, `--slotted-focus-ring-offset`, `--slotted-focus-ring-width`, `--slotted-font-weight-medium`, `--slotted-radius-xs`, `--slotted-segmented-control-active-background`, `--slotted-segmented-control-background`, `--slotted-segmented-control-border-color`, `--slotted-segmented-control-checked-color`, `--slotted-segmented-control-color`, `--slotted-segmented-control-disabled-border-color`, `--slotted-segmented-control-disabled-color`, `--slotted-segmented-control-disabled-indicator-background`, `--slotted-segmented-control-divider-color`, `--slotted-segmented-control-hover-background`, `--slotted-segmented-control-indicator-background`, `--slotted-segmented-control-indicator-border-color`, `--slotted-segmented-control-inset`, `--slotted-segmented-control-invalid-border-color`, `--slotted-segmented-control-invalid-edge-width`, `--slotted-segmented-control-invalid-focus-ring-color`, `--slotted-segmented-control-radius`, `--slotted-segmented-control-shadow`, `--slotted-segmented-control-underline-checked-color`, `--slotted-segmented-control-underline-color`, `--slotted-segmented-control-underline-gap`, `--slotted-space-1`, `--slotted-space-6`, `--slotted-target-min`, `--slotted-text`, `--slotted-text-muted`, `--slotted-tone-accent-border`, `--slotted-tone-accent-subtle-active`, `--slotted-tone-accent-text`, `--slotted-tone-danger-border`, `--slotted-tone-secondary-subtle-active`, `--slotted-tone-secondary-subtle-hover`
 
 ## Examples
 
@@ -145,6 +147,20 @@ Excerpt — not a complete module
 </div>
 ```
 
+### A track, or the words alone
+
+underline draws the same radio group as words: each as wide as itself, the chosen one in the text colour and underlined, the others muted. One tab stop, the arrows move the value, and inside a field the label names the set.
+
+Excerpt — not a complete module
+
+```html
+<div slSegmentedControl aria-label="Período" defaultValue="month" variant="underline">
+  <label slSegment value="day">Dia</label>
+  <label slSegment value="week">Semana</label>
+  <label slSegment value="month">Mês</label>
+</div>
+```
+
 ### Narrower than its words
 
 Below the width its labels need, a control told to condense keeps its marks and hides its words — hidden, never removed, so every segment is announced the same at every width.

package/docs/skills/theme-app/SKILL.md

@@ -55,6 +55,11 @@ new seed keeps the ratios of every scheme. A colour of the `tone`, `surface`,
 3. A colour the reader picks at runtime: write the seed property on the element
    that carries `data-slotted-theme`, with `seedStyle` from
    `@slotted/theme/seeds`, which leaves the token contract out of the bundle.
+4. A bar of the application's own that floats over scrolling content — a phone
+   tab bar, a sticky banner — is a material: its background reads
+   `--slotted-surface-material` and its backdrop filter reads
+   `--slotted-material-backdrop`. The theme makes both opaque under reduced
+   transparency and forced colours.
 
 ## 4. Restyle a control
 

package/docs/split-button.json

@@ -10,6 +10,7 @@
     "tone": [
       "accent",
       "secondary",
+      "neutral",
       "success",
       "warning",
       "danger"

package/docs/split-button.md

@@ -83,7 +83,7 @@ Excerpt — not a complete module
 
 | Axis | Values | Default |
 | --- | --- | --- |
-| `tone` | `accent`, `secondary`, `success`, `warning`, `danger` | `accent` |
+| `tone` | `accent`, `secondary`, `neutral`, `success`, `warning`, `danger` | `accent` |
 | `variant` | `solid`, `outline`, `ghost` | `solid` |
 | `size` | `sm`, `md`, `lg` | `md` |
 

package/docs/stat-card.json

@@ -356,6 +356,7 @@
     "--slotted-font-size-xs",
     "--slotted-font-weight-medium",
     "--slotted-font-weight-semibold",
+    "--slotted-letter-spacing-tighter",
     "--slotted-line-height-2xl",
     "--slotted-line-height-3xl",
     "--slotted-line-height-4xl",

package/docs/stat-card.md

@@ -110,7 +110,7 @@ Excerpt — not a complete module
 
 ## Tokens
 
-`--slotted-border-subtle`, `--slotted-border-width-thin`, `--slotted-control-icon-size-md`, `--slotted-control-icon-size-sm`, `--slotted-font-family-sans`, `--slotted-font-size-2xl`, `--slotted-font-size-3xl`, `--slotted-font-size-4xl`, `--slotted-font-size-md`, `--slotted-font-size-sm`, `--slotted-font-size-xl`, `--slotted-font-size-xs`, `--slotted-font-weight-medium`, `--slotted-font-weight-semibold`, `--slotted-line-height-2xl`, `--slotted-line-height-3xl`, `--slotted-line-height-4xl`, `--slotted-line-height-md`, `--slotted-line-height-sm`, `--slotted-line-height-xl`, `--slotted-line-height-xs`, `--slotted-radius-lg`, `--slotted-radius-none`, `--slotted-shadow-md`, `--slotted-space-1`, `--slotted-space-11`, `--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-sparkline-block-size`, `--slotted-sparkline-block-size-lg`, `--slotted-sparkline-block-size-sm`, `--slotted-stat-card-background`, `--slotted-stat-card-background-subtle`, `--slotted-stat-card-border-color`, `--slotted-stat-card-border-width`, `--slotted-stat-card-color`, `--slotted-stat-card-color-muted`, `--slotted-stat-card-delta-font-size`, `--slotted-stat-card-delta-font-size-lg`, `--slotted-stat-card-delta-font-size-sm`, `--slotted-stat-card-indicator-size`, `--slotted-stat-card-indicator-size-lg`, `--slotted-stat-card-label-font-size`, `--slotted-stat-card-label-font-size-lg`, `--slotted-stat-card-label-font-size-sm`, `--slotted-stat-card-label-line-height`, `--slotted-stat-card-label-line-height-lg`, `--slotted-stat-card-label-line-height-sm`, `--slotted-stat-card-min-inline-size`, `--slotted-stat-card-padding-block`, `--slotted-stat-card-padding-block-lg`, `--slotted-stat-card-padding-block-sm`, `--slotted-stat-card-padding-inline`, `--slotted-stat-card-padding-inline-lg`, `--slotted-stat-card-padding-inline-sm`, `--slotted-stat-card-prose-font-size`, `--slotted-stat-card-prose-font-size-lg`, `--slotted-stat-card-prose-line-height`, `--slotted-stat-card-prose-line-height-lg`, `--slotted-stat-card-radius`, `--slotted-stat-card-region-gap`, `--slotted-stat-card-region-gap-lg`, `--slotted-stat-card-region-gap-sm`, `--slotted-stat-card-shadow`, `--slotted-stat-card-shadow-elevated`, `--slotted-stat-card-trend-gap`, `--slotted-stat-card-trend-gap-lg`, `--slotted-stat-card-trend-gap-sm`, `--slotted-stat-card-trend-inline-size`, `--slotted-stat-card-trend-inline-size-lg`, `--slotted-stat-card-trend-inline-size-sm`, `--slotted-stat-card-value-font-size`, `--slotted-stat-card-value-font-size-lg`, `--slotted-stat-card-value-font-size-sm`, `--slotted-stat-card-value-line-height`, `--slotted-stat-card-value-line-height-lg`, `--slotted-stat-card-value-line-height-sm`, `--slotted-surface-raised`, `--slotted-surface-sunken`, `--slotted-target-comfortable`, `--slotted-text`, `--slotted-text-muted`, `--slotted-tone-accent-text`, `--slotted-tone-danger-text`, `--slotted-tone-secondary-text`, `--slotted-tone-success-text`, `--slotted-tone-warning-text`
+`--slotted-border-subtle`, `--slotted-border-width-thin`, `--slotted-control-icon-size-md`, `--slotted-control-icon-size-sm`, `--slotted-font-family-sans`, `--slotted-font-size-2xl`, `--slotted-font-size-3xl`, `--slotted-font-size-4xl`, `--slotted-font-size-md`, `--slotted-font-size-sm`, `--slotted-font-size-xl`, `--slotted-font-size-xs`, `--slotted-font-weight-medium`, `--slotted-font-weight-semibold`, `--slotted-letter-spacing-tighter`, `--slotted-line-height-2xl`, `--slotted-line-height-3xl`, `--slotted-line-height-4xl`, `--slotted-line-height-md`, `--slotted-line-height-sm`, `--slotted-line-height-xl`, `--slotted-line-height-xs`, `--slotted-radius-lg`, `--slotted-radius-none`, `--slotted-shadow-md`, `--slotted-space-1`, `--slotted-space-11`, `--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-sparkline-block-size`, `--slotted-sparkline-block-size-lg`, `--slotted-sparkline-block-size-sm`, `--slotted-stat-card-background`, `--slotted-stat-card-background-subtle`, `--slotted-stat-card-border-color`, `--slotted-stat-card-border-width`, `--slotted-stat-card-color`, `--slotted-stat-card-color-muted`, `--slotted-stat-card-delta-font-size`, `--slotted-stat-card-delta-font-size-lg`, `--slotted-stat-card-delta-font-size-sm`, `--slotted-stat-card-indicator-size`, `--slotted-stat-card-indicator-size-lg`, `--slotted-stat-card-label-font-size`, `--slotted-stat-card-label-font-size-lg`, `--slotted-stat-card-label-font-size-sm`, `--slotted-stat-card-label-line-height`, `--slotted-stat-card-label-line-height-lg`, `--slotted-stat-card-label-line-height-sm`, `--slotted-stat-card-min-inline-size`, `--slotted-stat-card-padding-block`, `--slotted-stat-card-padding-block-lg`, `--slotted-stat-card-padding-block-sm`, `--slotted-stat-card-padding-inline`, `--slotted-stat-card-padding-inline-lg`, `--slotted-stat-card-padding-inline-sm`, `--slotted-stat-card-prose-font-size`, `--slotted-stat-card-prose-font-size-lg`, `--slotted-stat-card-prose-line-height`, `--slotted-stat-card-prose-line-height-lg`, `--slotted-stat-card-radius`, `--slotted-stat-card-region-gap`, `--slotted-stat-card-region-gap-lg`, `--slotted-stat-card-region-gap-sm`, `--slotted-stat-card-shadow`, `--slotted-stat-card-shadow-elevated`, `--slotted-stat-card-trend-gap`, `--slotted-stat-card-trend-gap-lg`, `--slotted-stat-card-trend-gap-sm`, `--slotted-stat-card-trend-inline-size`, `--slotted-stat-card-trend-inline-size-lg`, `--slotted-stat-card-trend-inline-size-sm`, `--slotted-stat-card-value-font-size`, `--slotted-stat-card-value-font-size-lg`, `--slotted-stat-card-value-font-size-sm`, `--slotted-stat-card-value-line-height`, `--slotted-stat-card-value-line-height-lg`, `--slotted-stat-card-value-line-height-sm`, `--slotted-surface-raised`, `--slotted-surface-sunken`, `--slotted-target-comfortable`, `--slotted-text`, `--slotted-text-muted`, `--slotted-tone-accent-text`, `--slotted-tone-danger-text`, `--slotted-tone-secondary-text`, `--slotted-tone-success-text`, `--slotted-tone-warning-text`
 
 ## Examples
 

package/docs/table.examples.md

@@ -742,7 +742,7 @@ export class TableExpansion {
 
 ### A header, a summary and a column that stay
 
-stickyHeader holds the head against the top of the scroller and stickyFooter holds the summary against the bottom of it, so the total is on screen at the first row and the last. stickyTo says which box that is: this table own scroller, or whatever scrolls outside it. A pinned column darkens its edge exactly while something is hidden under it, and all of it mirrors in a right-to-left document.
+stickyHeader holds the head against the top of the scroller and stickyFooter holds the summary against the bottom of it, so the total is on screen at the first row and the last. stickyTo says which box that is: this table own scroller, or whatever scrolls outside it. Under stickyTo="page" the head stops at --slotted-table-sticky-offset, which a page binds to its own chrome; a table inside a scrolling box of its own sets that token to 0 on the box. A pinned column darkens its edge exactly while something is hidden under it, and all of it mirrors in a right-to-left document.
 
 Example
 

package/docs/table.json

@@ -107,6 +107,7 @@
         "active",
         "focus-visible",
         "selected",
+        "current",
         "expanded",
         "disabled",
         "loading"
@@ -139,6 +140,11 @@
         "selection",
         "expander",
         "detail",
+        "group-row",
+        "group-header",
+        "group-content",
+        "group-start",
+        "group-end",
         "empty",
         "loader",
         "footer"
@@ -321,6 +327,36 @@
           "required": false,
           "purpose": "The open row detail, one cell spanning every column. Control flow in the template keeps a closed one out of the DOM, which a host element cannot do for itself."
         },
+        {
+          "part": "group-row",
+          "element": "tr[slTableGroupRow]",
+          "required": false,
+          "purpose": "The band that opens a group of rows: a day of a ledger with its net at the end. One header cell spans every column, and sticky holds the band under the header while its rows scroll past."
+        },
+        {
+          "part": "group-header",
+          "element": "th",
+          "required": false,
+          "purpose": "The one cell of the band, scope=\"rowgroup\", spanning the columns of the table. It names the rows of its own tbody, so a grouped listing writes one body per group."
+        },
+        {
+          "part": "group-content",
+          "element": "div",
+          "required": false,
+          "purpose": "The line inside the band that sets the name at the start and the end content at the end."
+        },
+        {
+          "part": "group-start",
+          "element": "span",
+          "required": false,
+          "purpose": "The name of the group."
+        },
+        {
+          "part": "group-end",
+          "element": "span",
+          "required": false,
+          "purpose": "The end of the band, the element marked slTableGroupRowEnd: the total or net of the group, in tabular figures."
+        },
         {
           "part": "empty",
           "element": "td[slTableEmpty]",
@@ -566,6 +602,27 @@
           "appliesTo": "slTableRow",
           "description": "The record position in the whole set, written as aria-rowindex"
         },
+        {
+          "name": "current",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "slTableRow",
+          "description": "The record open elsewhere on the page, a detail pane beside the table, written as aria-current"
+        },
+        {
+          "name": "interactive",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "slTableRow",
+          "description": "Paints the row as a thing the pointer presses; stated beside (action)"
+        },
+        {
+          "name": "(action)",
+          "type": "MouseEvent",
+          "defaultValue": "—",
+          "appliesTo": "slTableRow",
+          "description": "A click anywhere in the row that lands on no control of its own; the first link or button in the row is the keyboard way in"
+        },
         {
           "name": "column",
           "type": "string",
@@ -608,6 +665,13 @@
           "appliesTo": "the three cell parts and both selection cells",
           "description": "Which edge the column is pinned to while the table scrolls past it"
         },
+        {
+          "name": "sticky",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "slTableGroupRow",
+          "description": "Holds the band under the header while its rows scroll past; the end of the band is the element marked slTableGroupRowEnd"
+        },
         {
           "name": "stickyOffset",
           "type": "string",
@@ -748,12 +812,16 @@
     "--slotted-table-font-family",
     "--slotted-table-font-size",
     "--slotted-table-gap",
+    "--slotted-table-group-color",
+    "--slotted-table-group-sticky-offset",
+    "--slotted-table-group-surface",
     "--slotted-table-header-surface",
     "--slotted-table-header-surface-hover",
     "--slotted-table-icon-size",
     "--slotted-table-radius",
     "--slotted-table-row-color-selected",
     "--slotted-table-row-min-block-size",
+    "--slotted-table-row-surface-current",
     "--slotted-table-row-surface-hover",
     "--slotted-table-row-surface-selected",
     "--slotted-table-row-surface-selected-hover",
@@ -771,6 +839,7 @@
     "--slotted-tone-accent-subtle-hover",
     "--slotted-tone-accent-surface",
     "--slotted-tone-accent-text",
+    "--slotted-tone-secondary-subtle-active",
     "--slotted-tone-secondary-subtle-hover",
     "--slotted-z-index-sticky"
   ],
@@ -898,7 +967,7 @@
     {
       "id": "sticky",
       "title": "A header, a summary and a column that stay",
-      "note": "stickyHeader holds the head against the top of the scroller and stickyFooter holds the summary against the bottom of it, so the total is on screen at the first row and the last. stickyTo says which box that is: this table own scroller, or whatever scrolls outside it. A pinned column darkens its edge exactly while something is hidden under it, and all of it mirrors in a right-to-left document.",
+      "note": "stickyHeader holds the head against the top of the scroller and stickyFooter holds the summary against the bottom of it, so the total is on screen at the first row and the last. stickyTo says which box that is: this table own scroller, or whatever scrolls outside it. Under stickyTo=\"page\" the head stops at --slotted-table-sticky-offset, which a page binds to its own chrome; a table inside a scrolling box of its own sets that token to 0 on the box. A pinned column darkens its edge exactly while something is hidden under it, and all of it mirrors in a right-to-left document.",
       "language": "ts",
       "source": "import { Component } from '@angular/core';\nimport {\n  SlTable,\n  SlTableBody,\n  SlTableCell,\n  SlTableColumnHeader,\n  SlTableContent,\n  SlTableHead,\n  SlTableRow,\n  SlTableRowHeader,\n  SlTableSummary,\n} from '@slotted/angular/table';\n\nconst USD = new Intl.NumberFormat('en-US', { currency: 'USD', style: 'currency' });\n\nconst CUSTOMERS = [\n  'Alfreds Futterkiste',\n  \"Bon app'\",\n  'Ernst Handel',\n  'Folk och fä HB',\n  'Hanari Carnes',\n  'Island Trading',\n  'QUICK-Stop',\n  'Wartian Herkku',\n];\nconst WAREHOUSES = ['Reno', 'Columbus', 'Savannah'];\n\nconst ORDERS = Array.from({ length: 30 }, (_, index) => ({\n  id: `SO-${10400 + index}`,\n  customer: CUSTOMERS[index % CUSTOMERS.length],\n  warehouse: WAREHOUSES[index % WAREHOUSES.length],\n  total: 180 + ((index * 397) % 2400),\n}));\n\n@Component({\n  selector: 'app-table-sticky',\n  imports: [\n    SlTable,\n    SlTableBody,\n    SlTableCell,\n    SlTableColumnHeader,\n    SlTableContent,\n    SlTableHead,\n    SlTableRow,\n    SlTableRowHeader,\n    SlTableSummary,\n  ],\n  template: `\n    <div slTable [columns]=\"4\" stickyFooter stickyHeader>\n      <div slTableContent aria-label=\"September orders\" style=\"max-block-size: 20rem\">\n        <thead slTableHead>\n          <tr slTableRow>\n            <th slTableColumnHeader>Order</th>\n            <th slTableColumnHeader>Customer</th>\n            <th slTableColumnHeader>Warehouse</th>\n            <th slTableColumnHeader numeric>Total</th>\n          </tr>\n        </thead>\n        <tbody slTableBody>\n          @for (order of orders; track order.id) {\n            <tr slTableRow [value]=\"order.id\">\n              <th slTableRowHeader text=\"nowrap\">{{ order.id }}</th>\n              <td slTableCell>{{ order.customer }}</td>\n              <td slTableCell>{{ order.warehouse }}</td>\n              <td slTableCell numeric>{{ usd.format(order.total) }}</td>\n            </tr>\n          }\n        </tbody>\n        <tfoot slTableSummary>\n          <tr slTableRow>\n            <td slTableCell [attr.colspan]=\"3\">{{ orders.length }} orders</td>\n            <td slTableCell numeric>{{ usd.format(total) }}</td>\n          </tr>\n        </tfoot>\n      </div>\n    </div>\n  `,\n})\nexport class TableSticky {\n  readonly orders = ORDERS;\n  readonly total = ORDERS.reduce((sum, order) => sum + order.total, 0);\n  readonly usd = USD;\n}\n",
       "verdict": "example"

package/docs/table.md

@@ -186,6 +186,11 @@ export class TableBasic {
 | `selection` | td[slTableSelect] and th[slTableSelectAll] | no |
 | `expander` | button[slTableExpander] | no |
 | `detail` | tr[slTableDetail] | no |
+| `group-row` | tr[slTableGroupRow] | no |
+| `group-header` | th | no |
+| `group-content` | div | no |
+| `group-start` | span | no |
+| `group-end` | span | no |
 | `empty` | td[slTableEmpty] | no |
 | `loader` | tbody[slTableLoader] | no |
 
@@ -226,12 +231,16 @@ export class TableBasic {
 | `value` | `string` | — | slTableRow | The record key the selection and the expansion are held by |
 | `disabled` | `boolean` | false | slTableRow | A record the reader may not choose; it leaves the set the header covers |
 | `rowIndex` | `number` | — | slTableRow | The record position in the whole set, written as aria-rowindex |
+| `current` | `boolean` | false | slTableRow | The record open elsewhere on the page, a detail pane beside the table, written as aria-current |
+| `interactive` | `boolean` | false | slTableRow | Paints the row as a thing the pointer presses; stated beside (action) |
+| `(action)` | `MouseEvent` | — | slTableRow | A click anywhere in the row that lands on no control of its own; the first link or button in the row is the keyboard way in |
 | `column` | `string` | — | slTableColumnHeader, slTableSort | The column key the sort descriptor names |
 | `align` | `'start' \| 'center' \| 'end'` | start | the three cell parts | Which edge the value stands on, resolved logically |
 | `numeric` | `boolean` | false | the three cell parts | Tabular figures, and the end edge unless align says otherwise |
 | `blockAlign` | `'start' \| 'center' \| 'end'` | center | the three cell parts and both selection cells | Where this cell content sits in its row, overriding the table own cellAlign |
 | `text` | `'wrap' \| 'truncate' \| 'nowrap'` | wrap | the three cell parts | What a value longer than its column does |
 | `sticky` | `'start' \| 'end'` | start | the three cell parts and both selection cells | Which edge the column is pinned to while the table scrolls past it |
+| `sticky` | `boolean` | false | slTableGroupRow | Holds the band under the header while its rows scroll past; the end of the band is the element marked slTableGroupRowEnd |
 | `stickyOffset` | `string` | 0 | the three cell parts and both selection cells | Where the pinned column stops, as a CSS length. Two columns pinned to the same edge need the second to state how wide the first is — beside a selection column that is --slotted-table-selection-size, which is 3rem. |
 | `colSpan` | `number` | — | slTableDetail, slTableEmpty | How many columns the part spans, defaulting to the table own count |
 | `exportAs` | `slTable, slTableRow, slTableContent` | — | every part | Reaches the instance from the template: row.expanded(), table.rows(), content.scrollToRow() |
@@ -283,7 +292,7 @@ export class TableBasic {
 
 ## Tokens
 
-`--slotted-border-strong`, `--slotted-border-subtle`, `--slotted-border-width-thin`, `--slotted-control-font-family`, `--slotted-control-font-size-md`, `--slotted-control-gap-md`, `--slotted-control-height-md`, `--slotted-control-icon-size-md`, `--slotted-control-padding-inline-md`, `--slotted-control-transition-duration`, `--slotted-control-transition-easing`, `--slotted-disabled-foreground`, `--slotted-duration-short`, `--slotted-easing-standard`, `--slotted-focus-ring-color`, `--slotted-focus-ring-offset`, `--slotted-focus-ring-width`, `--slotted-font-size-xs`, `--slotted-font-weight-medium`, `--slotted-font-weight-regular`, `--slotted-font-weight-semibold`, `--slotted-ground`, `--slotted-line-height-md`, `--slotted-radius-md`, `--slotted-radius-sm`, `--slotted-shadow-xs`, `--slotted-space-2`, `--slotted-space-5`, `--slotted-space-9`, `--slotted-surface`, `--slotted-table-border-color`, `--slotted-table-border-color-strong`, `--slotted-table-border-width`, `--slotted-table-cell-padding-block`, `--slotted-table-cell-padding-inline`, `--slotted-table-color`, `--slotted-table-color-muted`, `--slotted-table-column-actions-size`, `--slotted-table-control-radius`, `--slotted-table-font-family`, `--slotted-table-font-size`, `--slotted-table-gap`, `--slotted-table-header-surface`, `--slotted-table-header-surface-hover`, `--slotted-table-icon-size`, `--slotted-table-radius`, `--slotted-table-row-color-selected`, `--slotted-table-row-min-block-size`, `--slotted-table-row-surface-hover`, `--slotted-table-row-surface-selected`, `--slotted-table-row-surface-selected-hover`, `--slotted-table-row-surface-stripe`, `--slotted-table-selection-size`, `--slotted-table-shadow`, `--slotted-table-sticky-inset`, `--slotted-table-sticky-offset`, `--slotted-table-sticky-offset-end`, `--slotted-table-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-hover`, `--slotted-z-index-sticky`
+`--slotted-border-strong`, `--slotted-border-subtle`, `--slotted-border-width-thin`, `--slotted-control-font-family`, `--slotted-control-font-size-md`, `--slotted-control-gap-md`, `--slotted-control-height-md`, `--slotted-control-icon-size-md`, `--slotted-control-padding-inline-md`, `--slotted-control-transition-duration`, `--slotted-control-transition-easing`, `--slotted-disabled-foreground`, `--slotted-duration-short`, `--slotted-easing-standard`, `--slotted-focus-ring-color`, `--slotted-focus-ring-offset`, `--slotted-focus-ring-width`, `--slotted-font-size-xs`, `--slotted-font-weight-medium`, `--slotted-font-weight-regular`, `--slotted-font-weight-semibold`, `--slotted-ground`, `--slotted-line-height-md`, `--slotted-radius-md`, `--slotted-radius-sm`, `--slotted-shadow-xs`, `--slotted-space-2`, `--slotted-space-5`, `--slotted-space-9`, `--slotted-surface`, `--slotted-table-border-color`, `--slotted-table-border-color-strong`, `--slotted-table-border-width`, `--slotted-table-cell-padding-block`, `--slotted-table-cell-padding-inline`, `--slotted-table-color`, `--slotted-table-color-muted`, `--slotted-table-column-actions-size`, `--slotted-table-control-radius`, `--slotted-table-font-family`, `--slotted-table-font-size`, `--slotted-table-gap`, `--slotted-table-group-color`, `--slotted-table-group-sticky-offset`, `--slotted-table-group-surface`, `--slotted-table-header-surface`, `--slotted-table-header-surface-hover`, `--slotted-table-icon-size`, `--slotted-table-radius`, `--slotted-table-row-color-selected`, `--slotted-table-row-min-block-size`, `--slotted-table-row-surface-current`, `--slotted-table-row-surface-hover`, `--slotted-table-row-surface-selected`, `--slotted-table-row-surface-selected-hover`, `--slotted-table-row-surface-stripe`, `--slotted-table-selection-size`, `--slotted-table-shadow`, `--slotted-table-sticky-inset`, `--slotted-table-sticky-offset`, `--slotted-table-sticky-offset-end`, `--slotted-table-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-z-index-sticky`
 
 ## Examples
 

package/docs/toggle-group.json

@@ -14,7 +14,8 @@
     ],
     "variant": [
       "outline",
-      "ghost"
+      "ghost",
+      "chips"
     ],
     "orientation": [
       "horizontal",
@@ -133,10 +134,10 @@
         },
         {
           "name": "variant",
-          "type": "'outline' | 'ghost'",
+          "type": "'outline' | 'ghost' | 'chips'",
           "defaultValue": "outline",
           "appliesTo": "slToggleGroup",
-          "description": "Whether the bar draws its own edge. There is no tone axis: “on” is one colour across the system"
+          "description": "Whether the bar draws its own edge, or draws its items as chips: separate rounded items that wrap, never joined, the pressed one in the neutral tone ink. There is no tone axis: “on” is one colour across the system"
         },
         {
           "name": "orientation",
@@ -287,9 +288,16 @@
     "--slotted-focus-ring-color",
     "--slotted-focus-ring-offset",
     "--slotted-focus-ring-width",
+    "--slotted-font-weight-medium",
+    "--slotted-radius-full",
+    "--slotted-space-3",
     "--slotted-text",
     "--slotted-toggle-group-active-background",
     "--slotted-toggle-group-border-color",
+    "--slotted-toggle-group-chips-gap",
+    "--slotted-toggle-group-chips-pressed-background",
+    "--slotted-toggle-group-chips-pressed-color",
+    "--slotted-toggle-group-chips-radius",
     "--slotted-toggle-group-color",
     "--slotted-toggle-group-disabled-border-color",
     "--slotted-toggle-group-disabled-color",
@@ -305,6 +313,9 @@
     "--slotted-tone-accent-subtle-active",
     "--slotted-tone-accent-subtle-hover",
     "--slotted-tone-accent-text",
+    "--slotted-tone-neutral-on-solid",
+    "--slotted-tone-neutral-solid",
+    "--slotted-tone-neutral-solid-hover",
     "--slotted-tone-secondary-subtle-active",
     "--slotted-tone-secondary-subtle-hover"
   ],

package/docs/toggle-group.md

@@ -46,7 +46,7 @@ Excerpt — not a complete module
 | `multiple` | `boolean` | false | slToggleGroup | Whether more than one item may be on at a time. The value stays an array either way, so one signal holds it in every mode |
 | `deselectable` | `boolean` | true | slToggleGroup | Whether the last item on may be turned off. Ignored while multiple is true, where a set may always empty |
 | `size` | `'sm' \| 'md' \| 'lg'` | md | slToggleGroup | The control step the bar and every item sit at. It reads the control scale, so the bar is as tall as the field beside it |
-| `variant` | `'outline' \| 'ghost'` | outline | slToggleGroup | Whether the bar draws its own edge. There is no tone axis: “on” is one colour across the system |
+| `variant` | `'outline' \| 'ghost' \| 'chips'` | outline | slToggleGroup | Whether the bar draws its own edge, or draws its items as chips: separate rounded items that wrap, never joined, the pressed one in the neutral tone ink. There is no tone axis: “on” is one colour across the system |
 | `orientation` | `'horizontal' \| 'vertical'` | horizontal | slToggleGroup | How the items flow, and which pair of arrows moves focus. A vertical group writes aria-orientation |
 | `attached` | `boolean` | true | slToggleGroup | Whether the items are joined into one bar or spaced apart. A joined bar overlaps its items by one border so a shared column holds one line |
 | `fullWidth` | `boolean` | false | slToggleGroup | Whether the items share the whole line. Left alone the bar is as wide as its labels |
@@ -73,7 +73,7 @@ Excerpt — not a complete module
 | Axis | Values | Default |
 | --- | --- | --- |
 | `size` | `sm`, `md`, `lg` | `md` |
-| `variant` | `outline`, `ghost` | `outline` |
+| `variant` | `outline`, `ghost`, `chips` | `outline` |
 | `orientation` | `horizontal`, `vertical` | `horizontal` |
 
 ## Rules
@@ -87,7 +87,7 @@ Excerpt — not a complete module
 
 ## Tokens
 
-`--slotted-control-border-color`, `--slotted-control-border-width`, `--slotted-control-font-family`, `--slotted-control-font-size-lg`, `--slotted-control-font-size-md`, `--slotted-control-font-size-sm`, `--slotted-control-font-weight`, `--slotted-control-gap-lg`, `--slotted-control-gap-md`, `--slotted-control-gap-sm`, `--slotted-control-height-lg`, `--slotted-control-height-md`, `--slotted-control-height-sm`, `--slotted-control-icon-size-lg`, `--slotted-control-icon-size-md`, `--slotted-control-icon-size-sm`, `--slotted-control-letter-spacing`, `--slotted-control-line-height`, `--slotted-control-padding-inline-lg`, `--slotted-control-padding-inline-md`, `--slotted-control-padding-inline-sm`, `--slotted-control-radius`, `--slotted-control-shadow`, `--slotted-control-transition-duration`, `--slotted-control-transition-easing`, `--slotted-disabled-background`, `--slotted-disabled-border`, `--slotted-disabled-foreground`, `--slotted-duration-instant`, `--slotted-focus-ring-color`, `--slotted-focus-ring-offset`, `--slotted-focus-ring-width`, `--slotted-text`, `--slotted-toggle-group-active-background`, `--slotted-toggle-group-border-color`, `--slotted-toggle-group-color`, `--slotted-toggle-group-disabled-border-color`, `--slotted-toggle-group-disabled-color`, `--slotted-toggle-group-disabled-pressed-background`, `--slotted-toggle-group-hover-background`, `--slotted-toggle-group-pressed-background`, `--slotted-toggle-group-pressed-border-color`, `--slotted-toggle-group-pressed-color`, `--slotted-toggle-group-pressed-hover-background`, `--slotted-toggle-group-radius`, `--slotted-toggle-group-shadow`, `--slotted-tone-accent-border`, `--slotted-tone-accent-subtle-active`, `--slotted-tone-accent-subtle-hover`, `--slotted-tone-accent-text`, `--slotted-tone-secondary-subtle-active`, `--slotted-tone-secondary-subtle-hover`
+`--slotted-control-border-color`, `--slotted-control-border-width`, `--slotted-control-font-family`, `--slotted-control-font-size-lg`, `--slotted-control-font-size-md`, `--slotted-control-font-size-sm`, `--slotted-control-font-weight`, `--slotted-control-gap-lg`, `--slotted-control-gap-md`, `--slotted-control-gap-sm`, `--slotted-control-height-lg`, `--slotted-control-height-md`, `--slotted-control-height-sm`, `--slotted-control-icon-size-lg`, `--slotted-control-icon-size-md`, `--slotted-control-icon-size-sm`, `--slotted-control-letter-spacing`, `--slotted-control-line-height`, `--slotted-control-padding-inline-lg`, `--slotted-control-padding-inline-md`, `--slotted-control-padding-inline-sm`, `--slotted-control-radius`, `--slotted-control-shadow`, `--slotted-control-transition-duration`, `--slotted-control-transition-easing`, `--slotted-disabled-background`, `--slotted-disabled-border`, `--slotted-disabled-foreground`, `--slotted-duration-instant`, `--slotted-focus-ring-color`, `--slotted-focus-ring-offset`, `--slotted-focus-ring-width`, `--slotted-font-weight-medium`, `--slotted-radius-full`, `--slotted-space-3`, `--slotted-text`, `--slotted-toggle-group-active-background`, `--slotted-toggle-group-border-color`, `--slotted-toggle-group-chips-gap`, `--slotted-toggle-group-chips-pressed-background`, `--slotted-toggle-group-chips-pressed-color`, `--slotted-toggle-group-chips-radius`, `--slotted-toggle-group-color`, `--slotted-toggle-group-disabled-border-color`, `--slotted-toggle-group-disabled-color`, `--slotted-toggle-group-disabled-pressed-background`, `--slotted-toggle-group-hover-background`, `--slotted-toggle-group-pressed-background`, `--slotted-toggle-group-pressed-border-color`, `--slotted-toggle-group-pressed-color`, `--slotted-toggle-group-pressed-hover-background`, `--slotted-toggle-group-radius`, `--slotted-toggle-group-shadow`, `--slotted-tone-accent-border`, `--slotted-tone-accent-subtle-active`, `--slotted-tone-accent-subtle-hover`, `--slotted-tone-accent-text`, `--slotted-tone-neutral-on-solid`, `--slotted-tone-neutral-solid`, `--slotted-tone-neutral-solid-hover`, `--slotted-tone-secondary-subtle-active`, `--slotted-tone-secondary-subtle-hover`
 
 ## Examples
 

package/docs/toggle.json

@@ -14,7 +14,8 @@
     ],
     "variant": [
       "outline",
-      "ghost"
+      "ghost",
+      "chips"
     ]
   },
   "members": {
@@ -101,10 +102,10 @@
         },
         {
           "name": "variant",
-          "type": "'outline' | 'ghost'",
+          "type": "'outline' | 'ghost' | 'chips'",
           "defaultValue": "outline",
           "appliesTo": "slToggle",
-          "description": "Whether the control draws its own edge before it is on. There is no tone axis: a mode is one colour when it is on, and an action that persists in one of five tones is button’s ToggleButton"
+          "description": "Whether the control draws its own edge before it is on, or is a chip pressed in the neutral tone ink. There is no tone axis: a mode is one colour when it is on, and an action that persists in one of five tones is button’s ToggleButton"
         },
         {
           "name": "disabled",
@@ -212,9 +213,14 @@
     "--slotted-focus-ring-color",
     "--slotted-focus-ring-offset",
     "--slotted-focus-ring-width",
+    "--slotted-font-weight-medium",
+    "--slotted-radius-full",
     "--slotted-text",
     "--slotted-toggle-active-background",
     "--slotted-toggle-border-color",
+    "--slotted-toggle-chips-pressed-background",
+    "--slotted-toggle-chips-pressed-color",
+    "--slotted-toggle-chips-radius",
     "--slotted-toggle-color",
     "--slotted-toggle-disabled-border-color",
     "--slotted-toggle-disabled-color",
@@ -230,6 +236,9 @@
     "--slotted-tone-accent-subtle-active",
     "--slotted-tone-accent-subtle-hover",
     "--slotted-tone-accent-text",
+    "--slotted-tone-neutral-on-solid",
+    "--slotted-tone-neutral-solid",
+    "--slotted-tone-neutral-solid-hover",
     "--slotted-tone-secondary-subtle-active",
     "--slotted-tone-secondary-subtle-hover"
   ],

package/docs/toggle.md

@@ -37,7 +37,7 @@ Excerpt — not a complete module
 | `pressed` | `boolean` | — | slToggle | Bound, the consumer owns the state for the life of the component. Unbound, the toggle owns it and starts from defaultPressed |
 | `defaultPressed` | `boolean` | false | slToggle | What an uncontrolled toggle starts from, read once. A later change to it does not silently become new state |
 | `size` | `'sm' \| 'md' \| 'lg'` | md | slToggle | The control step. It reads the control scale, so the toggle is as tall as the field beside it |
-| `variant` | `'outline' \| 'ghost'` | outline | slToggle | Whether the control draws its own edge before it is on. There is no tone axis: a mode is one colour when it is on, and an action that persists in one of five tones is button’s ToggleButton |
+| `variant` | `'outline' \| 'ghost' \| 'chips'` | outline | slToggle | Whether the control draws its own edge before it is on, or is a chip pressed in the neutral tone ink. There is no tone axis: a mode is one colour when it is on, and an action that persists in one of five tones is button’s ToggleButton |
 | `disabled` | `boolean` | false | slToggle | The native attribute, which is also what makes the browser refuse focus. A toggle that is on and unavailable keeps saying both |
 | `type` | `'button' \| 'submit' \| 'reset'` | button | slToggle | The native attribute, kept when the consumer wrote it. A toggle in a form is not a form control — checkbox and switch are — so it is a button unless the consumer says otherwise |
 | `slToggle` | `directive on a button` | — | the consumer’s element | The component is a directive on the consumer’s own button: every attribute, every listener and every structural directive around it stay as written. It stays a button, because aria-pressed on a link is a link announcing a state a link does not hold |
@@ -58,7 +58,7 @@ Excerpt — not a complete module
 | Axis | Values | Default |
 | --- | --- | --- |
 | `size` | `sm`, `md`, `lg` | `md` |
-| `variant` | `outline`, `ghost` | `outline` |
+| `variant` | `outline`, `ghost`, `chips` | `outline` |
 
 ## Rules
 
@@ -70,7 +70,7 @@ Excerpt — not a complete module
 
 ## Tokens
 
-`--slotted-control-border-color`, `--slotted-control-border-width`, `--slotted-control-font-family`, `--slotted-control-font-size-lg`, `--slotted-control-font-size-md`, `--slotted-control-font-size-sm`, `--slotted-control-font-weight`, `--slotted-control-gap-lg`, `--slotted-control-gap-md`, `--slotted-control-gap-sm`, `--slotted-control-height-lg`, `--slotted-control-height-md`, `--slotted-control-height-sm`, `--slotted-control-icon-size-lg`, `--slotted-control-icon-size-md`, `--slotted-control-icon-size-sm`, `--slotted-control-letter-spacing`, `--slotted-control-line-height`, `--slotted-control-padding-inline-lg`, `--slotted-control-padding-inline-md`, `--slotted-control-padding-inline-sm`, `--slotted-control-radius`, `--slotted-control-shadow`, `--slotted-control-transition-duration`, `--slotted-control-transition-easing`, `--slotted-disabled-background`, `--slotted-disabled-border`, `--slotted-disabled-foreground`, `--slotted-duration-instant`, `--slotted-focus-ring-color`, `--slotted-focus-ring-offset`, `--slotted-focus-ring-width`, `--slotted-text`, `--slotted-toggle-active-background`, `--slotted-toggle-border-color`, `--slotted-toggle-color`, `--slotted-toggle-disabled-border-color`, `--slotted-toggle-disabled-color`, `--slotted-toggle-disabled-pressed-background`, `--slotted-toggle-hover-background`, `--slotted-toggle-pressed-background`, `--slotted-toggle-pressed-border-color`, `--slotted-toggle-pressed-color`, `--slotted-toggle-pressed-hover-background`, `--slotted-toggle-radius`, `--slotted-toggle-shadow`, `--slotted-tone-accent-border`, `--slotted-tone-accent-subtle-active`, `--slotted-tone-accent-subtle-hover`, `--slotted-tone-accent-text`, `--slotted-tone-secondary-subtle-active`, `--slotted-tone-secondary-subtle-hover`
+`--slotted-control-border-color`, `--slotted-control-border-width`, `--slotted-control-font-family`, `--slotted-control-font-size-lg`, `--slotted-control-font-size-md`, `--slotted-control-font-size-sm`, `--slotted-control-font-weight`, `--slotted-control-gap-lg`, `--slotted-control-gap-md`, `--slotted-control-gap-sm`, `--slotted-control-height-lg`, `--slotted-control-height-md`, `--slotted-control-height-sm`, `--slotted-control-icon-size-lg`, `--slotted-control-icon-size-md`, `--slotted-control-icon-size-sm`, `--slotted-control-letter-spacing`, `--slotted-control-line-height`, `--slotted-control-padding-inline-lg`, `--slotted-control-padding-inline-md`, `--slotted-control-padding-inline-sm`, `--slotted-control-radius`, `--slotted-control-shadow`, `--slotted-control-transition-duration`, `--slotted-control-transition-easing`, `--slotted-disabled-background`, `--slotted-disabled-border`, `--slotted-disabled-foreground`, `--slotted-duration-instant`, `--slotted-focus-ring-color`, `--slotted-focus-ring-offset`, `--slotted-focus-ring-width`, `--slotted-font-weight-medium`, `--slotted-radius-full`, `--slotted-text`, `--slotted-toggle-active-background`, `--slotted-toggle-border-color`, `--slotted-toggle-chips-pressed-background`, `--slotted-toggle-chips-pressed-color`, `--slotted-toggle-chips-radius`, `--slotted-toggle-color`, `--slotted-toggle-disabled-border-color`, `--slotted-toggle-disabled-color`, `--slotted-toggle-disabled-pressed-background`, `--slotted-toggle-hover-background`, `--slotted-toggle-pressed-background`, `--slotted-toggle-pressed-border-color`, `--slotted-toggle-pressed-color`, `--slotted-toggle-pressed-hover-background`, `--slotted-toggle-radius`, `--slotted-toggle-shadow`, `--slotted-tone-accent-border`, `--slotted-tone-accent-subtle-active`, `--slotted-tone-accent-subtle-hover`, `--slotted-tone-accent-text`, `--slotted-tone-neutral-on-solid`, `--slotted-tone-neutral-solid`, `--slotted-tone-neutral-solid-hover`, `--slotted-tone-secondary-subtle-active`, `--slotted-tone-secondary-subtle-hover`
 
 ## Examples