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

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