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

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/tabs.json

@@ -412,6 +412,7 @@
     "--slotted-focus-ring-color",
     "--slotted-focus-ring-offset",
     "--slotted-focus-ring-width",
+    "--slotted-radius-full",
     "--slotted-radius-md",
     "--slotted-radius-sm",
     "--slotted-radius-xs",
@@ -446,13 +447,9 @@
     "--slotted-target-comfortable",
     "--slotted-target-min",
     "--slotted-text",
-    "--slotted-text-inverse",
     "--slotted-text-muted",
     "--slotted-tone-accent-solid",
     "--slotted-tone-accent-text",
-    "--slotted-tone-danger-border",
-    "--slotted-tone-danger-surface",
-    "--slotted-tone-danger-text",
     "--slotted-tone-secondary-subtle-active",
     "--slotted-tone-secondary-subtle-hover"
   ],

package/docs/tabs.md

@@ -204,7 +204,7 @@ export class TabsBasic {
 
 ## 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-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-inner-size-lg`, `--slotted-control-inner-size-md`, `--slotted-control-inner-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-transition-duration`, `--slotted-control-transition-easing`, `--slotted-disabled-background`, `--slotted-disabled-border`, `--slotted-disabled-foreground`, `--slotted-duration-short`, `--slotted-easing-enter`, `--slotted-focus-ring-color`, `--slotted-focus-ring-offset`, `--slotted-focus-ring-width`, `--slotted-radius-md`, `--slotted-radius-sm`, `--slotted-radius-xs`, `--slotted-shadow-xs`, `--slotted-space-1`, `--slotted-space-2`, `--slotted-space-4`, `--slotted-space-6`, `--slotted-surface`, `--slotted-surface-sunken`, `--slotted-tabs-actions-gap`, `--slotted-tabs-active-background`, `--slotted-tabs-active-marker-color`, `--slotted-tabs-color`, `--slotted-tabs-contained-background`, `--slotted-tabs-contained-selected-background`, `--slotted-tabs-dismiss-active-background`, `--slotted-tabs-dismiss-active-color`, `--slotted-tabs-dismiss-color`, `--slotted-tabs-dismiss-hover-background`, `--slotted-tabs-dismiss-hover-color`, `--slotted-tabs-fade-size`, `--slotted-tabs-gap`, `--slotted-tabs-hover-background`, `--slotted-tabs-hover-color`, `--slotted-tabs-hover-marker-color`, `--slotted-tabs-list-gap`, `--slotted-tabs-marker-color`, `--slotted-tabs-scroll-color`, `--slotted-tabs-selected-color`, `--slotted-tabs-track-color`, `--slotted-target-comfortable`, `--slotted-target-min`, `--slotted-text`, `--slotted-text-inverse`, `--slotted-text-muted`, `--slotted-tone-accent-solid`, `--slotted-tone-accent-text`, `--slotted-tone-danger-border`, `--slotted-tone-danger-surface`, `--slotted-tone-danger-text`, `--slotted-tone-secondary-subtle-active`, `--slotted-tone-secondary-subtle-hover`
+`--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-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-inner-size-lg`, `--slotted-control-inner-size-md`, `--slotted-control-inner-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-transition-duration`, `--slotted-control-transition-easing`, `--slotted-disabled-background`, `--slotted-disabled-border`, `--slotted-disabled-foreground`, `--slotted-duration-short`, `--slotted-easing-enter`, `--slotted-focus-ring-color`, `--slotted-focus-ring-offset`, `--slotted-focus-ring-width`, `--slotted-radius-full`, `--slotted-radius-md`, `--slotted-radius-sm`, `--slotted-radius-xs`, `--slotted-shadow-xs`, `--slotted-space-1`, `--slotted-space-2`, `--slotted-space-4`, `--slotted-space-6`, `--slotted-surface`, `--slotted-surface-sunken`, `--slotted-tabs-actions-gap`, `--slotted-tabs-active-background`, `--slotted-tabs-active-marker-color`, `--slotted-tabs-color`, `--slotted-tabs-contained-background`, `--slotted-tabs-contained-selected-background`, `--slotted-tabs-dismiss-active-background`, `--slotted-tabs-dismiss-active-color`, `--slotted-tabs-dismiss-color`, `--slotted-tabs-dismiss-hover-background`, `--slotted-tabs-dismiss-hover-color`, `--slotted-tabs-fade-size`, `--slotted-tabs-gap`, `--slotted-tabs-hover-background`, `--slotted-tabs-hover-color`, `--slotted-tabs-hover-marker-color`, `--slotted-tabs-list-gap`, `--slotted-tabs-marker-color`, `--slotted-tabs-scroll-color`, `--slotted-tabs-selected-color`, `--slotted-tabs-track-color`, `--slotted-target-comfortable`, `--slotted-target-min`, `--slotted-text`, `--slotted-text-muted`, `--slotted-tone-accent-solid`, `--slotted-tone-accent-text`, `--slotted-tone-secondary-subtle-active`, `--slotted-tone-secondary-subtle-hover`
 
 ## 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