@slotted/angular 0.1.0-beta.0 → 0.1.0-beta.10

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
 

package/docs/tags-input.json

@@ -130,7 +130,9 @@
         "message",
         "counter",
         "clear",
-        "hint"
+        "hint",
+        "suggestions",
+        "suggestion"
       ]
     }
   },
@@ -195,6 +197,18 @@
           "element": "span, visually hidden",
           "required": true,
           "purpose": "What the row answers to, for a reader who cannot see the remove buttons: Delete removes a value, and — while editable — Enter edits it. The row names it as its description."
+        },
+        {
+          "part": "suggestions",
+          "element": "div[role=\"listbox\"]",
+          "required": false,
+          "purpose": "With suggestions, the list under the frame of the ones the typed text matches, minus the values already chosen. Rendered only while open; the input controls it and names its highlighted option by aria-activedescendant."
+        },
+        {
+          "part": "suggestion",
+          "element": "div[role=\"option\"]",
+          "required": false,
+          "purpose": "One suggestion. data-highlighted and aria-selected on the one Enter adds; a press adds it and keeps focus in the input."
         }
       ],
       "api": [
@@ -254,6 +268,13 @@
           "appliesTo": "sl-tags-input",
           "description": "How a paste is split. The default splits on the delimiters and on every line break."
         },
+        {
+          "name": "suggestions",
+          "type": "readonly string[]",
+          "defaultValue": "—",
+          "appliesTo": "sl-tags-input",
+          "description": "Values the reader may choose instead of typing them whole. The input becomes a combobox: the typed text filters them by the locale’s collator, ArrowDown and ArrowUp move through them, Enter adds the highlighted one. A chosen suggestion is normalized, judged, deduplicated and capped like typed text, and typed text still commits."
+        },
         {
           "name": "formatLabel",
           "type": "(value: string) => string",
@@ -524,8 +545,10 @@
   },
   "tokens": [
     "--slotted-border-subtle",
+    "--slotted-border-width-thin",
     "--slotted-control-border-color",
     "--slotted-control-border-width",
+    "--slotted-control-focus-ring-offset",
     "--slotted-control-font-family",
     "--slotted-control-font-size-lg",
     "--slotted-control-font-size-md",
@@ -562,9 +585,12 @@
     "--slotted-font-size-xs",
     "--slotted-font-weight-medium",
     "--slotted-line-height-sm",
+    "--slotted-radius-lg",
     "--slotted-radius-none",
+    "--slotted-shadow-md",
     "--slotted-space-1",
     "--slotted-space-2",
+    "--slotted-surface-raised",
     "--slotted-surface-sunken",
     "--slotted-tags-input-action-active-background",
     "--slotted-tags-input-action-color",
@@ -604,7 +630,8 @@
     "--slotted-tone-accent-text",
     "--slotted-tone-danger-border",
     "--slotted-tone-secondary-subtle-active",
-    "--slotted-tone-secondary-subtle-hover"
+    "--slotted-tone-secondary-subtle-hover",
+    "--slotted-z-index-popover"
   ],
   "examples": [
     {

package/docs/tags-input.md

@@ -37,6 +37,8 @@ Excerpt — not a complete module
 | `counter` | span | no |
 | `clear` | button | no |
 | `hint` | span, visually hidden | yes |
+| `suggestions` | div[role="listbox"] | no |
+| `suggestion` | div[role="option"] | no |
 
 ## Props
 
@@ -50,6 +52,7 @@ Excerpt — not a complete module
 | `invalidValues` | `'keep' \| 'refuse'` | keep | sl-tags-input | What becomes of a value that fails: a chip in the danger tone with its reason, or a report through valueRefuse. |
 | `normalize` | `(text: string) => string` | — | sl-tags-input | Runs before a value is judged. Trim by default. |
 | `split` | `(text: string) => readonly string[]` | — | sl-tags-input | How a paste is split. The default splits on the delimiters and on every line break. |
+| `suggestions` | `readonly string[]` | — | sl-tags-input | Values the reader may choose instead of typing them whole. The input becomes a combobox: the typed text filters them by the locale’s collator, ArrowDown and ArrowUp move through them, Enter adds the highlighted one. A chosen suggestion is normalized, judged, deduplicated and capped like typed text, and typed text still commits. |
 | `formatLabel` | `(value: string) => string` | — | sl-tags-input | The chip’s text for a value. |
 | `lockedValues` | `readonly string[]` | — | sl-tags-input | The values the reader may not remove. |
 | `pattern` | `string` | — | sl-tags-input | The input’s own pattern, applied to each value. |
@@ -124,7 +127,7 @@ Excerpt — not a complete module
 
 ## Tokens
 
-`--slotted-border-subtle`, `--slotted-control-border-color`, `--slotted-control-border-width`, `--slotted-control-font-family`, `--slotted-control-font-size-lg`, `--slotted-control-font-size-md`, `--slotted-control-font-size-sm`, `--slotted-control-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-invalid-edge-width`, `--slotted-control-padding-inline-lg`, `--slotted-control-padding-inline-md`, `--slotted-control-padding-inline-sm`, `--slotted-control-radius`, `--slotted-control-shadow`, `--slotted-control-shadow-focus-geometry`, `--slotted-control-surface`, `--slotted-control-transition-duration`, `--slotted-control-transition-easing`, `--slotted-disabled-background`, `--slotted-disabled-border`, `--slotted-disabled-foreground`, `--slotted-focus-ring-color`, `--slotted-focus-ring-color-invalid`, `--slotted-focus-ring-offset`, `--slotted-focus-ring-width`, `--slotted-font-size-xs`, `--slotted-font-weight-medium`, `--slotted-line-height-sm`, `--slotted-radius-none`, `--slotted-space-1`, `--slotted-space-2`, `--slotted-surface-sunken`, `--slotted-tags-input-action-active-background`, `--slotted-tags-input-action-color`, `--slotted-tags-input-action-hover-background`, `--slotted-tags-input-action-size`, `--slotted-tags-input-autofill-background`, `--slotted-tags-input-background`, `--slotted-tags-input-border-color`, `--slotted-tags-input-color`, `--slotted-tags-input-counter-color`, `--slotted-tags-input-counter-complete-color`, `--slotted-tags-input-current-border-color`, `--slotted-tags-input-disabled-background`, `--slotted-tags-input-disabled-border-color`, `--slotted-tags-input-disabled-color`, `--slotted-tags-input-field-basis`, `--slotted-tags-input-field-min`, `--slotted-tags-input-hover-border-color`, `--slotted-tags-input-icon-size-min`, `--slotted-tags-input-invalid-border-color`, `--slotted-tags-input-invalid-edge-width`, `--slotted-tags-input-invalid-focus-ring-color`, `--slotted-tags-input-placeholder-color`, `--slotted-tags-input-plain-hover-background`, `--slotted-tags-input-radius`, `--slotted-tags-input-readonly-background`, `--slotted-tags-input-shadow`, `--slotted-tags-input-subtle-background`, `--slotted-tags-input-subtle-border-color`, `--slotted-tags-input-subtle-hover-background`, `--slotted-target-comfortable`, `--slotted-target-min`, `--slotted-text`, `--slotted-text-muted`, `--slotted-tone-accent-border`, `--slotted-tone-accent-surface`, `--slotted-tone-accent-text`, `--slotted-tone-danger-border`, `--slotted-tone-secondary-subtle-active`, `--slotted-tone-secondary-subtle-hover`
+`--slotted-border-subtle`, `--slotted-border-width-thin`, `--slotted-control-border-color`, `--slotted-control-border-width`, `--slotted-control-focus-ring-offset`, `--slotted-control-font-family`, `--slotted-control-font-size-lg`, `--slotted-control-font-size-md`, `--slotted-control-font-size-sm`, `--slotted-control-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-invalid-edge-width`, `--slotted-control-padding-inline-lg`, `--slotted-control-padding-inline-md`, `--slotted-control-padding-inline-sm`, `--slotted-control-radius`, `--slotted-control-shadow`, `--slotted-control-shadow-focus-geometry`, `--slotted-control-surface`, `--slotted-control-transition-duration`, `--slotted-control-transition-easing`, `--slotted-disabled-background`, `--slotted-disabled-border`, `--slotted-disabled-foreground`, `--slotted-focus-ring-color`, `--slotted-focus-ring-color-invalid`, `--slotted-focus-ring-offset`, `--slotted-focus-ring-width`, `--slotted-font-size-xs`, `--slotted-font-weight-medium`, `--slotted-line-height-sm`, `--slotted-radius-lg`, `--slotted-radius-none`, `--slotted-shadow-md`, `--slotted-space-1`, `--slotted-space-2`, `--slotted-surface-raised`, `--slotted-surface-sunken`, `--slotted-tags-input-action-active-background`, `--slotted-tags-input-action-color`, `--slotted-tags-input-action-hover-background`, `--slotted-tags-input-action-size`, `--slotted-tags-input-autofill-background`, `--slotted-tags-input-background`, `--slotted-tags-input-border-color`, `--slotted-tags-input-color`, `--slotted-tags-input-counter-color`, `--slotted-tags-input-counter-complete-color`, `--slotted-tags-input-current-border-color`, `--slotted-tags-input-disabled-background`, `--slotted-tags-input-disabled-border-color`, `--slotted-tags-input-disabled-color`, `--slotted-tags-input-field-basis`, `--slotted-tags-input-field-min`, `--slotted-tags-input-hover-border-color`, `--slotted-tags-input-icon-size-min`, `--slotted-tags-input-invalid-border-color`, `--slotted-tags-input-invalid-edge-width`, `--slotted-tags-input-invalid-focus-ring-color`, `--slotted-tags-input-placeholder-color`, `--slotted-tags-input-plain-hover-background`, `--slotted-tags-input-radius`, `--slotted-tags-input-readonly-background`, `--slotted-tags-input-shadow`, `--slotted-tags-input-subtle-background`, `--slotted-tags-input-subtle-border-color`, `--slotted-tags-input-subtle-hover-background`, `--slotted-target-comfortable`, `--slotted-target-min`, `--slotted-text`, `--slotted-text-muted`, `--slotted-tone-accent-border`, `--slotted-tone-accent-surface`, `--slotted-tone-accent-text`, `--slotted-tone-danger-border`, `--slotted-tone-secondary-subtle-active`, `--slotted-tone-secondary-subtle-hover`, `--slotted-z-index-popover`
 
 ## Examples
 

package/docs/text-field.json

@@ -256,7 +256,7 @@
           "type": "'text' | 'search' | 'email' | 'url' | 'tel' | 'password'",
           "defaultValue": "text",
           "appliesTo": "the input element",
-          "description": "The input’s own type, written as a static attribute. It is read before the host binding computes, so the reveal toggle can swap it and restore what you wrote."
+          "description": "The input’s own type, one of the six listed, written as a static attribute. It is read before the host binding computes, so the reveal toggle can swap it and restore what you wrote. A date, a time, a month or a number is not a text field: use date-picker (forms.md FM-16), time-picker or number-field. Other strings still reach the element for compatibility and are not supported."
         },
         {
           "name": "copyable",
@@ -356,6 +356,7 @@
     "--slotted-border-subtle",
     "--slotted-control-border-color",
     "--slotted-control-border-width",
+    "--slotted-control-focus-ring-offset",
     "--slotted-control-font-family",
     "--slotted-control-font-size-lg",
     "--slotted-control-font-size-md",

package/docs/text-field.md

@@ -78,7 +78,7 @@ export class TextFieldBasic {}
 | `readOnly` | `boolean` | from the field, or false | slTextFieldInput | Unset by default, so the input takes the state of the field around it. It is the native readonly: the input stays focusable and selectable, and its value is submitted. A static readonly attribute you write is read before the binding computes. |
 | `invalid` | `boolean` | from the field, or false | slTextFieldInput | Unset by default, so the input takes the state of the field around it. It sets aria-invalid on the input and data-invalid on the frame. |
 | `required` | `boolean` | — | the input element | The input’s own attribute; slTextFieldInput never writes it. A field marks a required value with aria-required instead, because the native attribute turns on browser constraint validation. |
-| `type` | `'text' \| 'search' \| 'email' \| 'url' \| 'tel' \| 'password'` | text | the input element | The input’s own type, written as a static attribute. It is read before the host binding computes, so the reveal toggle can swap it and restore what you wrote. |
+| `type` | `'text' \| 'search' \| 'email' \| 'url' \| 'tel' \| 'password'` | text | the input element | The input’s own type, one of the six listed, written as a static attribute. It is read before the host binding computes, so the reveal toggle can swap it and restore what you wrote. A date, a time, a month or a number is not a text field: use date-picker (forms.md FM-16), time-picker or number-field. Other strings still reach the element for compatibility and are not supported. |
 | `copyable` | `boolean` | false | slTextField | Draws a button that writes the value to the clipboard, shows a check for two seconds and announces the outcome. It is hidden while the value is empty or the input is disabled. |
 | `loading` | `boolean` | false | slTextField | Draws the shared spinner before the buttons and sets aria-busy on the input; the value stays editable. Once loading is bound, false included, the spinner keeps its place so it can leave with a transition. |
 | `messages` | `Partial<TextFieldMessages>` | — | slTextField | Replaces words of the active language, key by key. clear, reveal and copy name the buttons; reveal does not change with the state, because aria-pressed carries it. copied and copyFailed announce the outcome of a copy. capsLock is announced once when Caps Lock turns on in a focused password field. |
@@ -118,7 +118,7 @@ export class TextFieldBasic {}
 
 ## Tokens
 
-`--slotted-border-subtle`, `--slotted-control-border-color`, `--slotted-control-border-width`, `--slotted-control-font-family`, `--slotted-control-font-size-lg`, `--slotted-control-font-size-md`, `--slotted-control-font-size-sm`, `--slotted-control-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-invalid-edge-width`, `--slotted-control-padding-inline-lg`, `--slotted-control-padding-inline-md`, `--slotted-control-padding-inline-sm`, `--slotted-control-radius`, `--slotted-control-shadow`, `--slotted-control-shadow-focus-geometry`, `--slotted-control-surface`, `--slotted-control-transition-duration`, `--slotted-control-transition-easing`, `--slotted-disabled-background`, `--slotted-disabled-border`, `--slotted-disabled-foreground`, `--slotted-duration-short`, `--slotted-easing-enter`, `--slotted-easing-exit`, `--slotted-focus-ring-color`, `--slotted-focus-ring-color-invalid`, `--slotted-focus-ring-offset`, `--slotted-focus-ring-width`, `--slotted-font-family-mono`, `--slotted-font-weight-medium`, `--slotted-radius-none`, `--slotted-radius-xs`, `--slotted-space-2`, `--slotted-space-3`, `--slotted-surface-sunken`, `--slotted-target-comfortable`, `--slotted-target-min`, `--slotted-text`, `--slotted-text-field-action-active-background`, `--slotted-text-field-action-color`, `--slotted-text-field-action-hover-background`, `--slotted-text-field-action-label-color`, `--slotted-text-field-action-size`, `--slotted-text-field-adornment-color`, `--slotted-text-field-autofill-background`, `--slotted-text-field-background`, `--slotted-text-field-border-color`, `--slotted-text-field-caps-lock-color`, `--slotted-text-field-color`, `--slotted-text-field-copy-complete-color`, `--slotted-text-field-disabled-background`, `--slotted-text-field-disabled-border-color`, `--slotted-text-field-disabled-color`, `--slotted-text-field-hover-border-color`, `--slotted-text-field-icon-size-min`, `--slotted-text-field-invalid-border-color`, `--slotted-text-field-invalid-edge-width`, `--slotted-text-field-invalid-focus-ring-color`, `--slotted-text-field-placeholder-color`, `--slotted-text-field-plain-hover-background`, `--slotted-text-field-radius`, `--slotted-text-field-readonly-background`, `--slotted-text-field-shadow`, `--slotted-text-field-subtle-background`, `--slotted-text-field-subtle-border-color`, `--slotted-text-field-subtle-hover-background`, `--slotted-text-muted`, `--slotted-tone-accent-border`, `--slotted-tone-accent-surface`, `--slotted-tone-danger-border`, `--slotted-tone-secondary-subtle-active`, `--slotted-tone-secondary-subtle-hover`, `--slotted-tone-success-text`, `--slotted-tone-warning-text`
+`--slotted-border-subtle`, `--slotted-control-border-color`, `--slotted-control-border-width`, `--slotted-control-focus-ring-offset`, `--slotted-control-font-family`, `--slotted-control-font-size-lg`, `--slotted-control-font-size-md`, `--slotted-control-font-size-sm`, `--slotted-control-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-invalid-edge-width`, `--slotted-control-padding-inline-lg`, `--slotted-control-padding-inline-md`, `--slotted-control-padding-inline-sm`, `--slotted-control-radius`, `--slotted-control-shadow`, `--slotted-control-shadow-focus-geometry`, `--slotted-control-surface`, `--slotted-control-transition-duration`, `--slotted-control-transition-easing`, `--slotted-disabled-background`, `--slotted-disabled-border`, `--slotted-disabled-foreground`, `--slotted-duration-short`, `--slotted-easing-enter`, `--slotted-easing-exit`, `--slotted-focus-ring-color`, `--slotted-focus-ring-color-invalid`, `--slotted-focus-ring-offset`, `--slotted-focus-ring-width`, `--slotted-font-family-mono`, `--slotted-font-weight-medium`, `--slotted-radius-none`, `--slotted-radius-xs`, `--slotted-space-2`, `--slotted-space-3`, `--slotted-surface-sunken`, `--slotted-target-comfortable`, `--slotted-target-min`, `--slotted-text`, `--slotted-text-field-action-active-background`, `--slotted-text-field-action-color`, `--slotted-text-field-action-hover-background`, `--slotted-text-field-action-label-color`, `--slotted-text-field-action-size`, `--slotted-text-field-adornment-color`, `--slotted-text-field-autofill-background`, `--slotted-text-field-background`, `--slotted-text-field-border-color`, `--slotted-text-field-caps-lock-color`, `--slotted-text-field-color`, `--slotted-text-field-copy-complete-color`, `--slotted-text-field-disabled-background`, `--slotted-text-field-disabled-border-color`, `--slotted-text-field-disabled-color`, `--slotted-text-field-hover-border-color`, `--slotted-text-field-icon-size-min`, `--slotted-text-field-invalid-border-color`, `--slotted-text-field-invalid-edge-width`, `--slotted-text-field-invalid-focus-ring-color`, `--slotted-text-field-placeholder-color`, `--slotted-text-field-plain-hover-background`, `--slotted-text-field-radius`, `--slotted-text-field-readonly-background`, `--slotted-text-field-shadow`, `--slotted-text-field-subtle-background`, `--slotted-text-field-subtle-border-color`, `--slotted-text-field-subtle-hover-background`, `--slotted-text-muted`, `--slotted-tone-accent-border`, `--slotted-tone-accent-surface`, `--slotted-tone-danger-border`, `--slotted-tone-secondary-subtle-active`, `--slotted-tone-secondary-subtle-hover`, `--slotted-tone-success-text`, `--slotted-tone-warning-text`
 
 ## Examples
 

package/docs/textarea.json

@@ -244,6 +244,7 @@
     "--slotted-border-subtle",
     "--slotted-control-border-color",
     "--slotted-control-border-width",
+    "--slotted-control-focus-ring-offset",
     "--slotted-control-font-family",
     "--slotted-control-font-size-lg",
     "--slotted-control-font-size-md",

package/docs/textarea.md

@@ -91,7 +91,7 @@ export class TextareaBasic {}
 
 ## Tokens
 
-`--slotted-border-subtle`, `--slotted-control-border-color`, `--slotted-control-border-width`, `--slotted-control-font-family`, `--slotted-control-font-size-lg`, `--slotted-control-font-size-md`, `--slotted-control-font-size-sm`, `--slotted-control-height-lg`, `--slotted-control-height-md`, `--slotted-control-height-sm`, `--slotted-control-invalid-edge-width`, `--slotted-control-padding-inline-lg`, `--slotted-control-padding-inline-md`, `--slotted-control-padding-inline-sm`, `--slotted-control-radius`, `--slotted-control-shadow`, `--slotted-control-shadow-focus-geometry`, `--slotted-control-surface`, `--slotted-control-transition-duration`, `--slotted-control-transition-easing`, `--slotted-disabled-background`, `--slotted-disabled-border`, `--slotted-disabled-foreground`, `--slotted-focus-ring-color`, `--slotted-focus-ring-color-invalid`, `--slotted-focus-ring-offset`, `--slotted-focus-ring-width`, `--slotted-font-family-mono`, `--slotted-line-height-md`, `--slotted-radius-none`, `--slotted-surface-sunken`, `--slotted-text`, `--slotted-text-muted`, `--slotted-textarea-background`, `--slotted-textarea-border-color`, `--slotted-textarea-color`, `--slotted-textarea-disabled-background`, `--slotted-textarea-disabled-border-color`, `--slotted-textarea-disabled-color`, `--slotted-textarea-hover-border-color`, `--slotted-textarea-invalid-border-color`, `--slotted-textarea-invalid-edge-width`, `--slotted-textarea-invalid-focus-ring-color`, `--slotted-textarea-line-height`, `--slotted-textarea-max-rows`, `--slotted-textarea-placeholder-color`, `--slotted-textarea-plain-hover-background`, `--slotted-textarea-radius`, `--slotted-textarea-readonly-background`, `--slotted-textarea-rows`, `--slotted-textarea-shadow`, `--slotted-textarea-subtle-background`, `--slotted-textarea-subtle-border-color`, `--slotted-textarea-subtle-hover-background`, `--slotted-tone-accent-border`, `--slotted-tone-danger-border`, `--slotted-tone-secondary-subtle-hover`
+`--slotted-border-subtle`, `--slotted-control-border-color`, `--slotted-control-border-width`, `--slotted-control-focus-ring-offset`, `--slotted-control-font-family`, `--slotted-control-font-size-lg`, `--slotted-control-font-size-md`, `--slotted-control-font-size-sm`, `--slotted-control-height-lg`, `--slotted-control-height-md`, `--slotted-control-height-sm`, `--slotted-control-invalid-edge-width`, `--slotted-control-padding-inline-lg`, `--slotted-control-padding-inline-md`, `--slotted-control-padding-inline-sm`, `--slotted-control-radius`, `--slotted-control-shadow`, `--slotted-control-shadow-focus-geometry`, `--slotted-control-surface`, `--slotted-control-transition-duration`, `--slotted-control-transition-easing`, `--slotted-disabled-background`, `--slotted-disabled-border`, `--slotted-disabled-foreground`, `--slotted-focus-ring-color`, `--slotted-focus-ring-color-invalid`, `--slotted-focus-ring-offset`, `--slotted-focus-ring-width`, `--slotted-font-family-mono`, `--slotted-line-height-md`, `--slotted-radius-none`, `--slotted-surface-sunken`, `--slotted-text`, `--slotted-text-muted`, `--slotted-textarea-background`, `--slotted-textarea-border-color`, `--slotted-textarea-color`, `--slotted-textarea-disabled-background`, `--slotted-textarea-disabled-border-color`, `--slotted-textarea-disabled-color`, `--slotted-textarea-hover-border-color`, `--slotted-textarea-invalid-border-color`, `--slotted-textarea-invalid-edge-width`, `--slotted-textarea-invalid-focus-ring-color`, `--slotted-textarea-line-height`, `--slotted-textarea-max-rows`, `--slotted-textarea-placeholder-color`, `--slotted-textarea-plain-hover-background`, `--slotted-textarea-radius`, `--slotted-textarea-readonly-background`, `--slotted-textarea-rows`, `--slotted-textarea-shadow`, `--slotted-textarea-subtle-background`, `--slotted-textarea-subtle-border-color`, `--slotted-textarea-subtle-hover-background`, `--slotted-tone-accent-border`, `--slotted-tone-danger-border`, `--slotted-tone-secondary-subtle-hover`
 
 ## Examples
 

package/docs/time-field.json

@@ -361,6 +361,7 @@
     "--slotted-border-subtle",
     "--slotted-control-border-color",
     "--slotted-control-border-width",
+    "--slotted-control-focus-ring-offset",
     "--slotted-control-font-family",
     "--slotted-control-font-size-lg",
     "--slotted-control-font-size-md",

package/docs/time-field.md

@@ -96,7 +96,7 @@ Excerpt — not a complete module
 
 ## Tokens
 
-`--slotted-border-subtle`, `--slotted-control-border-color`, `--slotted-control-border-width`, `--slotted-control-font-family`, `--slotted-control-font-size-lg`, `--slotted-control-font-size-md`, `--slotted-control-font-size-sm`, `--slotted-control-gap-lg`, `--slotted-control-gap-md`, `--slotted-control-gap-sm`, `--slotted-control-height-lg`, `--slotted-control-height-md`, `--slotted-control-height-sm`, `--slotted-control-icon-size-lg`, `--slotted-control-icon-size-md`, `--slotted-control-icon-size-sm`, `--slotted-control-invalid-edge-width`, `--slotted-control-padding-inline-lg`, `--slotted-control-padding-inline-md`, `--slotted-control-padding-inline-sm`, `--slotted-control-radius`, `--slotted-control-shadow`, `--slotted-control-shadow-focus-geometry`, `--slotted-control-surface`, `--slotted-control-transition-duration`, `--slotted-control-transition-easing`, `--slotted-disabled-background`, `--slotted-disabled-border`, `--slotted-disabled-foreground`, `--slotted-focus-ring-color`, `--slotted-focus-ring-color-invalid`, `--slotted-focus-ring-offset`, `--slotted-focus-ring-width`, `--slotted-radius-none`, `--slotted-radius-xs`, `--slotted-space-1`, `--slotted-space-2`, `--slotted-surface-sunken`, `--slotted-target-comfortable`, `--slotted-target-min`, `--slotted-text`, `--slotted-text-muted`, `--slotted-time-field-action-active-background`, `--slotted-time-field-action-color`, `--slotted-time-field-action-hover-background`, `--slotted-time-field-action-size`, `--slotted-time-field-adornment-color`, `--slotted-time-field-background`, `--slotted-time-field-border-color`, `--slotted-time-field-color`, `--slotted-time-field-disabled-background`, `--slotted-time-field-disabled-border-color`, `--slotted-time-field-disabled-color`, `--slotted-time-field-hover-border-color`, `--slotted-time-field-icon-size-min`, `--slotted-time-field-invalid-border-color`, `--slotted-time-field-invalid-edge-width`, `--slotted-time-field-invalid-focus-ring-color`, `--slotted-time-field-literal-color`, `--slotted-time-field-period-min-inline-size`, `--slotted-time-field-placeholder-color`, `--slotted-time-field-plain-hover-background`, `--slotted-time-field-preview-color`, `--slotted-time-field-preview-next-color`, `--slotted-time-field-radius`, `--slotted-time-field-readonly-background`, `--slotted-time-field-relative-border-color`, `--slotted-time-field-segment-focus-background`, `--slotted-time-field-segment-focus-color`, `--slotted-time-field-segment-min-inline-size`, `--slotted-time-field-segment-padding-inline`, `--slotted-time-field-segment-radius`, `--slotted-time-field-shadow`, `--slotted-time-field-subtle-background`, `--slotted-time-field-subtle-border-color`, `--slotted-time-field-subtle-hover-background`, `--slotted-tone-accent-border`, `--slotted-tone-accent-on-solid`, `--slotted-tone-accent-solid`, `--slotted-tone-accent-text`, `--slotted-tone-danger-border`, `--slotted-tone-secondary-subtle-active`, `--slotted-tone-secondary-subtle-hover`, `--slotted-tone-warning-text`
+`--slotted-border-subtle`, `--slotted-control-border-color`, `--slotted-control-border-width`, `--slotted-control-focus-ring-offset`, `--slotted-control-font-family`, `--slotted-control-font-size-lg`, `--slotted-control-font-size-md`, `--slotted-control-font-size-sm`, `--slotted-control-gap-lg`, `--slotted-control-gap-md`, `--slotted-control-gap-sm`, `--slotted-control-height-lg`, `--slotted-control-height-md`, `--slotted-control-height-sm`, `--slotted-control-icon-size-lg`, `--slotted-control-icon-size-md`, `--slotted-control-icon-size-sm`, `--slotted-control-invalid-edge-width`, `--slotted-control-padding-inline-lg`, `--slotted-control-padding-inline-md`, `--slotted-control-padding-inline-sm`, `--slotted-control-radius`, `--slotted-control-shadow`, `--slotted-control-shadow-focus-geometry`, `--slotted-control-surface`, `--slotted-control-transition-duration`, `--slotted-control-transition-easing`, `--slotted-disabled-background`, `--slotted-disabled-border`, `--slotted-disabled-foreground`, `--slotted-focus-ring-color`, `--slotted-focus-ring-color-invalid`, `--slotted-focus-ring-offset`, `--slotted-focus-ring-width`, `--slotted-radius-none`, `--slotted-radius-xs`, `--slotted-space-1`, `--slotted-space-2`, `--slotted-surface-sunken`, `--slotted-target-comfortable`, `--slotted-target-min`, `--slotted-text`, `--slotted-text-muted`, `--slotted-time-field-action-active-background`, `--slotted-time-field-action-color`, `--slotted-time-field-action-hover-background`, `--slotted-time-field-action-size`, `--slotted-time-field-adornment-color`, `--slotted-time-field-background`, `--slotted-time-field-border-color`, `--slotted-time-field-color`, `--slotted-time-field-disabled-background`, `--slotted-time-field-disabled-border-color`, `--slotted-time-field-disabled-color`, `--slotted-time-field-hover-border-color`, `--slotted-time-field-icon-size-min`, `--slotted-time-field-invalid-border-color`, `--slotted-time-field-invalid-edge-width`, `--slotted-time-field-invalid-focus-ring-color`, `--slotted-time-field-literal-color`, `--slotted-time-field-period-min-inline-size`, `--slotted-time-field-placeholder-color`, `--slotted-time-field-plain-hover-background`, `--slotted-time-field-preview-color`, `--slotted-time-field-preview-next-color`, `--slotted-time-field-radius`, `--slotted-time-field-readonly-background`, `--slotted-time-field-relative-border-color`, `--slotted-time-field-segment-focus-background`, `--slotted-time-field-segment-focus-color`, `--slotted-time-field-segment-min-inline-size`, `--slotted-time-field-segment-padding-inline`, `--slotted-time-field-segment-radius`, `--slotted-time-field-shadow`, `--slotted-time-field-subtle-background`, `--slotted-time-field-subtle-border-color`, `--slotted-time-field-subtle-hover-background`, `--slotted-tone-accent-border`, `--slotted-tone-accent-on-solid`, `--slotted-tone-accent-solid`, `--slotted-tone-accent-text`, `--slotted-tone-danger-border`, `--slotted-tone-secondary-subtle-active`, `--slotted-tone-secondary-subtle-hover`, `--slotted-tone-warning-text`
 
 ## Examples