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

package/docs/stat-card.md

@@ -73,7 +73,7 @@ Excerpt — not a complete module
 | `loading` | `boolean` | false | slStatCard | The value is on its way: every part stands in with a placeholder and the root is aria-busy |
 | `goodWhen` | `'up' \| 'down' \| 'none'` | up | slStatCard, slStatCardDelta | Which way is good for this metric. The tone of a change is derived from it, never from the sign |
 | `delta` | `number` | — | slStatCard | The change, as the first delta reads it: a fraction for a percentage. Stated on the root so the card knows its tone before its delta renders |
-| `tone` | `'neutral' \| 'accent' \| 'secondary' \| 'success' \| 'warning' \| 'danger'` | — | slStatCard, slStatCardDelta | An explicit tone, which wins over the derived one. On the root it is what the trend hands its sparkline |
+| `tone` | `'neutral' \| 'accent' \| 'secondary' \| 'info' \| 'success' \| 'warning' \| 'danger'` | — | slStatCard, slStatCardDelta | An explicit tone, which wins over the derived one. On the root it is what the trend hands its sparkline |
 | `locale` | `string` | — | slStatCard | BCP 47, for every number the card formats; the language in force when absent |
 | `formatOptions` | `Intl.NumberFormatOptions` | — | slStatCard, slStatCardValue, slStatCardDelta | How a number is written. On the root, the default for the value and the delta |
 | `messages` | `Partial<StatCardMessages>` | — | slStatCard | Words laid over the language in force, key by key: up, down and flat, heard before the delta; empty, shown in place of a missing value |
@@ -96,7 +96,7 @@ Excerpt — not a complete module
 | `layout` | `inline`, `stacked` | `inline` |
 | `status` | `ready`, `empty`, `error` | `ready` |
 | `goodWhen` | `up`, `down`, `none` | `up` |
-| `tone` | `neutral`, `accent`, `secondary`, `success`, `warning`, `danger` | — |
+| `tone` | `neutral`, `accent`, `secondary`, `info`, `success`, `warning`, `danger` | — |
 | `trend` | `up`, `down`, `flat` | — |
 
 ## Rules
@@ -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-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-info-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
 
@@ -1128,7 +1128,7 @@ Excerpt — not a complete module
   <tbody slTableLoader [skeletonRows]="5"></tbody>
 } @else if (rows().length === 0) {
   <tbody slTableBody>
-    <tr slTableRow>
+    <tr>
       <td slTableEmpty>
         <section slResultState status="no-results"></section>
       </td>
@@ -1376,7 +1376,7 @@ import {
           </tr>
         </thead>
         <tbody slTableBody>
-          <tr slTableRow>
+          <tr>
             <td slTableEmpty>
               <section slResultState status="empty">
                 <div slResultStateContent>

package/docs/table.json

@@ -12,6 +12,10 @@
       "ruled",
       "framed"
     ],
+    "edges": [
+      "inset",
+      "flush"
+    ],
     "striped": [
       true,
       false
@@ -71,6 +75,7 @@
       "nativeElement": "div",
       "defaults": {
         "variant": "ruled",
+        "edges": "inset",
         "striped": false,
         "stickyHeader": false,
         "stickyTo": "scroll",
@@ -107,6 +112,7 @@
         "active",
         "focus-visible",
         "selected",
+        "current",
         "expanded",
         "disabled",
         "loading"
@@ -139,6 +145,11 @@
         "selection",
         "expander",
         "detail",
+        "group-row",
+        "group-header",
+        "group-content",
+        "group-start",
+        "group-end",
         "empty",
         "loader",
         "footer"
@@ -321,6 +332,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]",
@@ -384,6 +425,13 @@
           "appliesTo": "slTable",
           "description": "How much of a frame the set is given"
         },
+        {
+          "name": "edges",
+          "type": "'inset' | 'flush'",
+          "defaultValue": "inset",
+          "appliesTo": "slTable",
+          "description": "Whether the first and the last column keep the cell inset on their outer side. flush lines a plain or ruled table up with the heading around it, leaving the theme’s --slotted-table-edge-inset (0 unless set); a framed table ignores it. Sticky and selection columns keep their own offsets"
+        },
         {
           "name": "striped",
           "type": "boolean",
@@ -566,6 +614,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 +677,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",
@@ -745,15 +821,20 @@
     "--slotted-table-color-muted",
     "--slotted-table-column-actions-size",
     "--slotted-table-control-radius",
+    "--slotted-table-edge-inset",
     "--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 +852,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 +980,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"
@@ -940,7 +1022,7 @@
       "title": "Nothing yet, nothing at all, and something arriving",
       "note": "A first load draws skeleton rows, so the shape is visible before the content. A refresh over rows already read writes aria-busy and dims them without moving anything — a reader looking at row forty stays there.",
       "language": "html",
-      "source": "@if (loading() && rows().length === 0) {\n  <tbody slTableLoader [skeletonRows]=\"5\"></tbody>\n} @else if (rows().length === 0) {\n  <tbody slTableBody>\n    <tr slTableRow>\n      <td slTableEmpty>\n        <section slResultState status=\"no-results\"></section>\n      </td>\n    </tr>\n  </tbody>\n} @else {\n  <tbody slTableBody></tbody>\n}\n",
+      "source": "@if (loading() && rows().length === 0) {\n  <tbody slTableLoader [skeletonRows]=\"5\"></tbody>\n} @else if (rows().length === 0) {\n  <tbody slTableBody>\n    <tr>\n      <td slTableEmpty>\n        <section slResultState status=\"no-results\"></section>\n      </td>\n    </tr>\n  </tbody>\n} @else {\n  <tbody slTableBody></tbody>\n}\n",
       "verdict": "excerpt"
     },
     {
@@ -1004,7 +1086,7 @@
       "title": "empty.ts",
       "note": null,
       "language": "ts",
-      "source": "import { Component } from '@angular/core';\nimport {\n  SlResultState,\n  SlResultStateContent,\n  SlResultStateDescription,\n  SlResultStateTitle,\n} from '@slotted/angular/result-state';\nimport {\n  SlTable,\n  SlTableBody,\n  SlTableColumnHeader,\n  SlTableContent,\n  SlTableEmpty,\n  SlTableHead,\n  SlTableRow,\n} from '@slotted/angular/table';\n\n@Component({\n  selector: 'app-table-empty',\n  imports: [\n    SlResultState,\n    SlResultStateContent,\n    SlResultStateDescription,\n    SlResultStateTitle,\n    SlTable,\n    SlTableBody,\n    SlTableColumnHeader,\n    SlTableContent,\n    SlTableEmpty,\n    SlTableHead,\n    SlTableRow,\n  ],\n  template: `\n    <div slTable [columns]=\"4\">\n      <div slTableContent aria-label=\"Returns this week\">\n        <thead slTableHead>\n          <tr slTableRow>\n            <th slTableColumnHeader>Return</th>\n            <th slTableColumnHeader>Order</th>\n            <th slTableColumnHeader>Customer</th>\n            <th slTableColumnHeader numeric>Refund</th>\n          </tr>\n        </thead>\n        <tbody slTableBody>\n          <tr slTableRow>\n            <td slTableEmpty>\n              <section slResultState status=\"empty\">\n                <div slResultStateContent>\n                  <h3 slResultStateTitle>No returns this week</h3>\n                  <p slResultStateDescription>\n                    Returns appear here as soon as a customer opens one from their order page.\n                  </p>\n                </div>\n              </section>\n            </td>\n          </tr>\n        </tbody>\n      </div>\n    </div>\n  `,\n})\nexport class TableEmptyExample {}\n",
+      "source": "import { Component } from '@angular/core';\nimport {\n  SlResultState,\n  SlResultStateContent,\n  SlResultStateDescription,\n  SlResultStateTitle,\n} from '@slotted/angular/result-state';\nimport {\n  SlTable,\n  SlTableBody,\n  SlTableColumnHeader,\n  SlTableContent,\n  SlTableEmpty,\n  SlTableHead,\n  SlTableRow,\n} from '@slotted/angular/table';\n\n@Component({\n  selector: 'app-table-empty',\n  imports: [\n    SlResultState,\n    SlResultStateContent,\n    SlResultStateDescription,\n    SlResultStateTitle,\n    SlTable,\n    SlTableBody,\n    SlTableColumnHeader,\n    SlTableContent,\n    SlTableEmpty,\n    SlTableHead,\n    SlTableRow,\n  ],\n  template: `\n    <div slTable [columns]=\"4\">\n      <div slTableContent aria-label=\"Returns this week\">\n        <thead slTableHead>\n          <tr slTableRow>\n            <th slTableColumnHeader>Return</th>\n            <th slTableColumnHeader>Order</th>\n            <th slTableColumnHeader>Customer</th>\n            <th slTableColumnHeader numeric>Refund</th>\n          </tr>\n        </thead>\n        <tbody slTableBody>\n          <tr>\n            <td slTableEmpty>\n              <section slResultState status=\"empty\">\n                <div slResultStateContent>\n                  <h3 slResultStateTitle>No returns this week</h3>\n                  <p slResultStateDescription>\n                    Returns appear here as soon as a customer opens one from their order page.\n                  </p>\n                </div>\n              </section>\n            </td>\n          </tr>\n        </tbody>\n      </div>\n    </div>\n  `,\n})\nexport class TableEmptyExample {}\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 |
 
@@ -200,6 +205,7 @@ export class TableBasic {
 | `expanded` | `model<readonly string[]>` | [] | slTable | The rows whose detail is open, two-way |
 | `defaultExpanded` | `model initial value` | [] | slTable | The details an unbound table starts with |
 | `variant` | `'plain' \| 'ruled' \| 'framed'` | ruled | slTable | How much of a frame the set is given |
+| `edges` | `'inset' \| 'flush'` | inset | slTable | Whether the first and the last column keep the cell inset on their outer side. flush lines a plain or ruled table up with the heading around it, leaving the theme’s --slotted-table-edge-inset (0 unless set); a framed table ignores it. Sticky and selection columns keep their own offsets |
 | `striped` | `boolean` | false | slTable | A tinted ground on every second record |
 | `stickyHeader` | `boolean` | false | slTable | Whether the header stays while the body scrolls |
 | `stickyFooter` | `boolean` | false | slTable | Whether the summary rows stay while the body scrolls. It pins the tfoot and not the footer bar, which never scrolls. |
@@ -226,12 +232,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() |
@@ -256,6 +266,7 @@ export class TableBasic {
 | Axis | Values | Default |
 | --- | --- | --- |
 | `variant` | `plain`, `ruled`, `framed` | `ruled` |
+| `edges` | `inset`, `flush` | `inset` |
 | `striped` | `true`, `false` | `false` |
 | `stickyHeader` | `true`, `false` | `false` |
 | `stickyFooter` | `true`, `false` | `false` |
@@ -283,7 +294,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-edge-inset`, `--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

@@ -78,6 +78,7 @@
         "label",
         "end",
         "dismiss",
+        "marker",
         "panel",
         "scroll",
         "actions"
@@ -108,7 +109,7 @@
           "part": "item",
           "element": "the slTab host, with role=\"presentation\"",
           "required": true,
-          "purpose": "One tab and its optional close button. It exists because a button cannot contain a button, and because the marker spans the tab and its close button together. A class or an attribute written on slTab lands on it."
+          "purpose": "One tab and its optional close button. It exists because a button cannot contain a button, and it carries the hover bar under the tab. A class or an attribute written on slTab lands on it."
         },
         {
           "part": "tab",
@@ -140,6 +141,12 @@
           "required": false,
           "purpose": "The close button. It has tabindex=\"-1\", so the arrow keys move between tabs only, and it stays in the accessibility tree, so a screen reader can press it. From the keyboard, Delete closes the focused tab, which aria-keyshortcuts on the tab announces."
         },
+        {
+          "part": "marker",
+          "element": "span, aria-hidden",
+          "required": false,
+          "purpose": "The bar under the selected tab. The list draws one and slides it between tabs; it spans the tab’s content box, never the close button. --slotted-tabs-marker-size, --slotted-tabs-marker-radius, --slotted-tabs-marker-inset and --slotted-tabs-marker-offset (1px above the list’s edge) shape it, and the hover bar takes the same geometry at --slotted-tabs-hover-marker-opacity."
+        },
         {
           "part": "panel",
           "element": "the element carrying slTabPanel, with role=\"tabpanel\"",
@@ -369,7 +376,7 @@
         "The paging controls are aria-hidden and outside the Tab sequence, because the arrow keys reach every tab and scroll it into view. Cloudscape’s guidance warns against extra Tab stops between a tab list and its panel.",
         "A list that starts to overflow scrolls the selected tab into view once its paging controls are drawn, so the selected tab is not left behind the end control.",
         "Each tab names its panel with aria-controls and each panel names its tab with aria-labelledby. The ids come from the value, with the characters an id cannot hold escaped rather than replaced, so two values that differ only by a space never share a panel.",
-        "The selected tab is never shown by colour alone: the marker is a bar the width of a thick border, which stays visible in the high-contrast scheme, where the theme paints every surface Canvas and the fill of the contained variant disappears.",
+        "The selected tab is never shown by colour alone: the marker is a bar never thinner than a thick border, which stays visible in the high-contrast scheme, where the theme paints every surface Canvas and the fill of the contained variant disappears.",
         "A panel carries tabindex=\"0\", so the Tab key reaches it from the list. The pattern permits that stop even when the panel’s first content is focusable."
       ]
     }
@@ -407,14 +414,15 @@
     "--slotted-disabled-background",
     "--slotted-disabled-border",
     "--slotted-disabled-foreground",
+    "--slotted-duration-medium",
     "--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",
@@ -438,21 +446,23 @@
     "--slotted-tabs-hover-background",
     "--slotted-tabs-hover-color",
     "--slotted-tabs-hover-marker-color",
+    "--slotted-tabs-hover-marker-opacity",
     "--slotted-tabs-list-gap",
     "--slotted-tabs-marker-color",
+    "--slotted-tabs-marker-easing",
+    "--slotted-tabs-marker-inset",
+    "--slotted-tabs-marker-offset",
+    "--slotted-tabs-marker-radius",
+    "--slotted-tabs-marker-size",
     "--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"
   ],

package/docs/tabs.md

@@ -136,6 +136,7 @@ export class TabsBasic {
 | `label` | span | yes |
 | `end` | the element carrying slTabEnd | no |
 | `dismiss` | button | no |
+| `marker` | span, aria-hidden | no |
 | `panel` | the element carrying slTabPanel, with role="tabpanel" | yes |
 | `scroll` | button | no |
 | `actions` | the element carrying slTabActions | no |
@@ -199,12 +200,12 @@ export class TabsBasic {
 - The paging controls are aria-hidden and outside the Tab sequence, because the arrow keys reach every tab and scroll it into view. Cloudscape’s guidance warns against extra Tab stops between a tab list and its panel.
 - A list that starts to overflow scrolls the selected tab into view once its paging controls are drawn, so the selected tab is not left behind the end control.
 - Each tab names its panel with aria-controls and each panel names its tab with aria-labelledby. The ids come from the value, with the characters an id cannot hold escaped rather than replaced, so two values that differ only by a space never share a panel.
-- The selected tab is never shown by colour alone: the marker is a bar the width of a thick border, which stays visible in the high-contrast scheme, where the theme paints every surface Canvas and the fill of the contained variant disappears.
+- The selected tab is never shown by colour alone: the marker is a bar never thinner than a thick border, which stays visible in the high-contrast scheme, where the theme paints every surface Canvas and the fill of the contained variant disappears.
 - A panel carries tabindex="0", so the Tab key reaches it from the list. The pattern permits that stop even when the panel’s first content is focusable.
 
 ## 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-medium`, `--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-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-hover-marker-opacity`, `--slotted-tabs-list-gap`, `--slotted-tabs-marker-color`, `--slotted-tabs-marker-easing`, `--slotted-tabs-marker-inset`, `--slotted-tabs-marker-offset`, `--slotted-tabs-marker-radius`, `--slotted-tabs-marker-size`, `--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/tag.json

@@ -10,6 +10,7 @@
     "tone": [
       "accent",
       "secondary",
+      "info",
       "success",
       "warning",
       "danger"
@@ -181,7 +182,7 @@
       "api": [
         {
           "name": "tone",
-          "type": "'accent' | 'secondary' | 'success' | 'warning' | 'danger'",
+          "type": "'accent' | 'secondary' | 'info' | 'success' | 'warning' | 'danger'",
           "defaultValue": "secondary",
           "appliesTo": "slTag",
           "description": "Which of the five semantic colours the tag speaks in"
@@ -315,7 +316,7 @@
       "api": [
         {
           "name": "tone",
-          "type": "'accent' | 'secondary' | 'success' | 'warning' | 'danger'",
+          "type": "'accent' | 'secondary' | 'info' | 'success' | 'warning' | 'danger'",
           "defaultValue": "secondary",
           "appliesTo": "slTag",
           "description": "Which of the five semantic colours the tag speaks in"
@@ -421,7 +422,7 @@
       "api": [
         {
           "name": "tone",
-          "type": "'accent' | 'secondary' | 'success' | 'warning' | 'danger'",
+          "type": "'accent' | 'secondary' | 'info' | 'success' | 'warning' | 'danger'",
           "defaultValue": "secondary",
           "appliesTo": "slTag",
           "description": "Which of the five semantic colours the tag speaks in"
@@ -527,7 +528,7 @@
       "api": [
         {
           "name": "tone",
-          "type": "'accent' | 'secondary' | 'success' | 'warning' | 'danger'",
+          "type": "'accent' | 'secondary' | 'info' | 'success' | 'warning' | 'danger'",
           "defaultValue": "secondary",
           "appliesTo": "slTag",
           "description": "Which of the five semantic colours the tag speaks in"
@@ -701,6 +702,15 @@
     "--slotted-tone-danger-subtle-hover",
     "--slotted-tone-danger-surface",
     "--slotted-tone-danger-text",
+    "--slotted-tone-info-border",
+    "--slotted-tone-info-on-solid",
+    "--slotted-tone-info-solid",
+    "--slotted-tone-info-solid-active",
+    "--slotted-tone-info-solid-hover",
+    "--slotted-tone-info-subtle-active",
+    "--slotted-tone-info-subtle-hover",
+    "--slotted-tone-info-surface",
+    "--slotted-tone-info-text",
     "--slotted-tone-secondary-border",
     "--slotted-tone-secondary-on-solid",
     "--slotted-tone-secondary-solid-active",

package/docs/tag.md

@@ -17,7 +17,7 @@ Excerpt — not a complete module
 
 | Name | Type | Default | Applies to | Description |
 | --- | --- | --- | --- | --- |
-| `tone` | `'accent' \| 'secondary' \| 'success' \| 'warning' \| 'danger'` | secondary | slTag | Which of the five semantic colours the tag speaks in |
+| `tone` | `'accent' \| 'secondary' \| 'info' \| 'success' \| 'warning' \| 'danger'` | secondary | slTag | Which of the five semantic colours the tag speaks in |
 | `variant` | `'solid' \| 'soft' \| 'outline'` | soft | slTag | How that colour is painted: filled, tinted, or an edge alone. A selected tag fills whatever its variant |
 | `size` | `'sm' \| 'md' \| 'lg'` | md | slTag | Type, glyph and gap come from the control scale, so a tag shrinks with density beside the controls it sits with |
 | `shape` | `'pill' \| 'square'` | pill | slTag | A rounded chip, or a rectangle with the small corner radius |
@@ -38,7 +38,7 @@ Excerpt — not a complete module
 
 | Name | Type | Default | Applies to | Description |
 | --- | --- | --- | --- | --- |
-| `tone` | `'accent' \| 'secondary' \| 'success' \| 'warning' \| 'danger'` | secondary | slTag | Which of the five semantic colours the tag speaks in |
+| `tone` | `'accent' \| 'secondary' \| 'info' \| 'success' \| 'warning' \| 'danger'` | secondary | slTag | Which of the five semantic colours the tag speaks in |
 | `variant` | `'solid' \| 'soft' \| 'outline'` | soft | slTag | How that colour is painted: filled, tinted, or an edge alone. A selected tag fills whatever its variant |
 | `size` | `'sm' \| 'md' \| 'lg'` | md | slTag | Type, glyph and gap come from the control scale, so a tag shrinks with density beside the controls it sits with |
 | `shape` | `'pill' \| 'square'` | pill | slTag | A rounded chip, or a rectangle with the small corner radius |
@@ -55,7 +55,7 @@ Excerpt — not a complete module
 
 | Name | Type | Default | Applies to | Description |
 | --- | --- | --- | --- | --- |
-| `tone` | `'accent' \| 'secondary' \| 'success' \| 'warning' \| 'danger'` | secondary | slTag | Which of the five semantic colours the tag speaks in |
+| `tone` | `'accent' \| 'secondary' \| 'info' \| 'success' \| 'warning' \| 'danger'` | secondary | slTag | Which of the five semantic colours the tag speaks in |
 | `variant` | `'solid' \| 'soft' \| 'outline'` | soft | slTag | How that colour is painted: filled, tinted, or an edge alone. A selected tag fills whatever its variant |
 | `size` | `'sm' \| 'md' \| 'lg'` | md | slTag | Type, glyph and gap come from the control scale, so a tag shrinks with density beside the controls it sits with |
 | `shape` | `'pill' \| 'square'` | pill | slTag | A rounded chip, or a rectangle with the small corner radius |
@@ -72,7 +72,7 @@ Excerpt — not a complete module
 
 | Name | Type | Default | Applies to | Description |
 | --- | --- | --- | --- | --- |
-| `tone` | `'accent' \| 'secondary' \| 'success' \| 'warning' \| 'danger'` | secondary | slTag | Which of the five semantic colours the tag speaks in |
+| `tone` | `'accent' \| 'secondary' \| 'info' \| 'success' \| 'warning' \| 'danger'` | secondary | slTag | Which of the five semantic colours the tag speaks in |
 | `variant` | `'solid' \| 'soft' \| 'outline'` | soft | slTag | How that colour is painted: filled, tinted, or an edge alone. A selected tag fills whatever its variant |
 | `size` | `'sm' \| 'md' \| 'lg'` | md | slTag | Type, glyph and gap come from the control scale, so a tag shrinks with density beside the controls it sits with |
 | `shape` | `'pill' \| 'square'` | pill | slTag | A rounded chip, or a rectangle with the small corner radius |
@@ -91,7 +91,7 @@ Excerpt — not a complete module
 
 | Axis | Values | Default |
 | --- | --- | --- |
-| `tone` | `accent`, `secondary`, `success`, `warning`, `danger` | `secondary` |
+| `tone` | `accent`, `secondary`, `info`, `success`, `warning`, `danger` | `secondary` |
 | `variant` | `solid`, `soft`, `outline` | `soft` |
 | `size` | `sm`, `md`, `lg` | `md` |
 | `shape` | `pill`, `square` | `pill` |
@@ -121,7 +121,7 @@ Excerpt — not a complete module
 
 ## Tokens
 
-`--slotted-border-width-thin`, `--slotted-control-font-family`, `--slotted-control-font-size-lg`, `--slotted-control-font-size-md`, `--slotted-control-font-size-sm`, `--slotted-control-icon-size-md`, `--slotted-control-icon-size-sm`, `--slotted-control-inner-size`, `--slotted-control-inner-size-md`, `--slotted-control-inner-size-sm`, `--slotted-control-transition-duration`, `--slotted-control-transition-easing`, `--slotted-disabled-background`, `--slotted-disabled-border`, `--slotted-disabled-foreground`, `--slotted-duration-short`, `--slotted-easing-standard`, `--slotted-focus-ring-color`, `--slotted-focus-ring-offset`, `--slotted-focus-ring-width`, `--slotted-font-weight-medium`, `--slotted-line-height-xs`, `--slotted-radius-full`, `--slotted-radius-sm`, `--slotted-space-1`, `--slotted-space-2`, `--slotted-space-3`, `--slotted-space-4`, `--slotted-space-5`, `--slotted-tag-border-color`, `--slotted-tag-border-width`, `--slotted-tag-font-family`, `--slotted-tag-font-weight`, `--slotted-tag-group-gap`, `--slotted-tag-inset-block`, `--slotted-tag-state-layer-active`, `--slotted-tag-state-layer-hover`, `--slotted-target-comfortable`, `--slotted-target-min`, `--slotted-tone-accent-border`, `--slotted-tone-accent-on-solid`, `--slotted-tone-accent-solid`, `--slotted-tone-accent-solid-active`, `--slotted-tone-accent-solid-hover`, `--slotted-tone-accent-subtle-active`, `--slotted-tone-accent-subtle-hover`, `--slotted-tone-accent-surface`, `--slotted-tone-accent-text`, `--slotted-tone-danger-border`, `--slotted-tone-danger-on-solid`, `--slotted-tone-danger-solid`, `--slotted-tone-danger-solid-active`, `--slotted-tone-danger-solid-hover`, `--slotted-tone-danger-subtle-active`, `--slotted-tone-danger-subtle-hover`, `--slotted-tone-danger-surface`, `--slotted-tone-danger-text`, `--slotted-tone-secondary-border`, `--slotted-tone-secondary-on-solid`, `--slotted-tone-secondary-solid-active`, `--slotted-tone-secondary-solid-hover`, `--slotted-tone-secondary-subtle-active`, `--slotted-tone-secondary-subtle-hover`, `--slotted-tone-secondary-surface`, `--slotted-tone-secondary-text`, `--slotted-tone-success-border`, `--slotted-tone-success-on-solid`, `--slotted-tone-success-solid`, `--slotted-tone-success-solid-active`, `--slotted-tone-success-solid-hover`, `--slotted-tone-success-subtle-active`, `--slotted-tone-success-subtle-hover`, `--slotted-tone-success-surface`, `--slotted-tone-success-text`, `--slotted-tone-warning-border`, `--slotted-tone-warning-on-solid`, `--slotted-tone-warning-solid`, `--slotted-tone-warning-solid-active`, `--slotted-tone-warning-solid-hover`, `--slotted-tone-warning-subtle-active`, `--slotted-tone-warning-subtle-hover`, `--slotted-tone-warning-surface`, `--slotted-tone-warning-text`
+`--slotted-border-width-thin`, `--slotted-control-font-family`, `--slotted-control-font-size-lg`, `--slotted-control-font-size-md`, `--slotted-control-font-size-sm`, `--slotted-control-icon-size-md`, `--slotted-control-icon-size-sm`, `--slotted-control-inner-size`, `--slotted-control-inner-size-md`, `--slotted-control-inner-size-sm`, `--slotted-control-transition-duration`, `--slotted-control-transition-easing`, `--slotted-disabled-background`, `--slotted-disabled-border`, `--slotted-disabled-foreground`, `--slotted-duration-short`, `--slotted-easing-standard`, `--slotted-focus-ring-color`, `--slotted-focus-ring-offset`, `--slotted-focus-ring-width`, `--slotted-font-weight-medium`, `--slotted-line-height-xs`, `--slotted-radius-full`, `--slotted-radius-sm`, `--slotted-space-1`, `--slotted-space-2`, `--slotted-space-3`, `--slotted-space-4`, `--slotted-space-5`, `--slotted-tag-border-color`, `--slotted-tag-border-width`, `--slotted-tag-font-family`, `--slotted-tag-font-weight`, `--slotted-tag-group-gap`, `--slotted-tag-inset-block`, `--slotted-tag-state-layer-active`, `--slotted-tag-state-layer-hover`, `--slotted-target-comfortable`, `--slotted-target-min`, `--slotted-tone-accent-border`, `--slotted-tone-accent-on-solid`, `--slotted-tone-accent-solid`, `--slotted-tone-accent-solid-active`, `--slotted-tone-accent-solid-hover`, `--slotted-tone-accent-subtle-active`, `--slotted-tone-accent-subtle-hover`, `--slotted-tone-accent-surface`, `--slotted-tone-accent-text`, `--slotted-tone-danger-border`, `--slotted-tone-danger-on-solid`, `--slotted-tone-danger-solid`, `--slotted-tone-danger-solid-active`, `--slotted-tone-danger-solid-hover`, `--slotted-tone-danger-subtle-active`, `--slotted-tone-danger-subtle-hover`, `--slotted-tone-danger-surface`, `--slotted-tone-danger-text`, `--slotted-tone-info-border`, `--slotted-tone-info-on-solid`, `--slotted-tone-info-solid`, `--slotted-tone-info-solid-active`, `--slotted-tone-info-solid-hover`, `--slotted-tone-info-subtle-active`, `--slotted-tone-info-subtle-hover`, `--slotted-tone-info-surface`, `--slotted-tone-info-text`, `--slotted-tone-secondary-border`, `--slotted-tone-secondary-on-solid`, `--slotted-tone-secondary-solid-active`, `--slotted-tone-secondary-solid-hover`, `--slotted-tone-secondary-subtle-active`, `--slotted-tone-secondary-subtle-hover`, `--slotted-tone-secondary-surface`, `--slotted-tone-secondary-text`, `--slotted-tone-success-border`, `--slotted-tone-success-on-solid`, `--slotted-tone-success-solid`, `--slotted-tone-success-solid-active`, `--slotted-tone-success-solid-hover`, `--slotted-tone-success-subtle-active`, `--slotted-tone-success-subtle-hover`, `--slotted-tone-success-surface`, `--slotted-tone-success-text`, `--slotted-tone-warning-border`, `--slotted-tone-warning-on-solid`, `--slotted-tone-warning-solid`, `--slotted-tone-warning-solid-active`, `--slotted-tone-warning-solid-hover`, `--slotted-tone-warning-subtle-active`, `--slotted-tone-warning-subtle-hover`, `--slotted-tone-warning-surface`, `--slotted-tone-warning-text`
 
 ## Examples