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

package/docs/toast.md

@@ -76,7 +76,7 @@ export class ToastBasic {
 | `pauseWhenHidden` | `boolean` | true | sl-toast-region | A hidden tab holds every clock. A five-second message shown to a tab nobody is looking at was never shown |
 | `hotkey` | `string` | F6 | sl-toast-region | The key that moves focus into the region, written the way a reader says it — F6, Alt+T, Shift+F8 |
 | `messages` | `Partial<ToastMessages>` | — | sl-toast-region | Words laid over the language in force, key by key: the name a reader finds the region by in their landmark list, and what the hotkey lands in (label), and what each close control announces (close) |
-| `tone` | `'accent' \| 'secondary' \| 'success' \| 'warning' \| 'danger'` | accent | SlToastService.show | Which of the five semantic colours the message speaks in, and which mark it draws |
+| `tone` | `'accent' \| 'secondary' \| 'info' \| 'success' \| 'warning' \| 'danger'` | accent | SlToastService.show | Which of the five semantic colours the message speaks in, and which mark it draws |
 | `variant` | `'raised' \| 'soft' \| 'solid'` | raised | SlToastService.show | How that colour is painted. raised keeps the neutral surface and puts the tone in the mark, which is what a box floating over unknown content should do |
 | `priority` | `'polite' \| 'assertive'` | polite | SlToastService.show | How loudly the announcer says it. Never inferred from the tone: a danger message a background job produced must not cut into a sentence |
 | `dismissible` | `boolean` | true | SlToastService.show | Renders the control that closes the message. A touch reader has no Escape key, so the pointer needs a target |
@@ -113,7 +113,7 @@ export class ToastBasic {
 | `placement` | `top-start`, `top`, `top-end`, `bottom-start`, `bottom`, `bottom-end` | `bottom-end` |
 | `attach` | `portal`, `viewport`, `inline` | `portal` |
 | `stacking` | `list`, `stack` | `list` |
-| `tone` | `accent`, `secondary`, `success`, `warning`, `danger` | `accent` |
+| `tone` | `accent`, `secondary`, `info`, `success`, `warning`, `danger` | `accent` |
 | `variant` | `raised`, `soft`, `solid` | `raised` |
 | `priority` | `polite`, `assertive` | `polite` |
 | `dismissible` | `true`, `false` | `true` |
@@ -136,7 +136,7 @@ export class ToastBasic {
 
 ## Tokens
 
-`--slotted-border-subtle`, `--slotted-border-width-thin`, `--slotted-control-font-family`, `--slotted-control-font-size-md`, `--slotted-control-icon-size-md`, `--slotted-control-inner-size-md`, `--slotted-control-radius`, `--slotted-control-transition-duration`, `--slotted-control-transition-easing`, `--slotted-duration-long`, `--slotted-duration-medium`, `--slotted-duration-short`, `--slotted-easing-enter`, `--slotted-easing-exit`, `--slotted-easing-standard`, `--slotted-focus-ring-color`, `--slotted-focus-ring-offset`, `--slotted-focus-ring-width`, `--slotted-font-family-heading`, `--slotted-font-family-sans`, `--slotted-font-weight-semibold`, `--slotted-line-height-md`, `--slotted-radius-lg`, `--slotted-shadow-md`, `--slotted-space-1`, `--slotted-space-2`, `--slotted-space-3`, `--slotted-space-4`, `--slotted-space-5`, `--slotted-space-6`, `--slotted-space-7`, `--slotted-surface-raised`, `--slotted-target-comfortable`, `--slotted-target-min`, `--slotted-text`, `--slotted-text-muted`, `--slotted-toast-actions-gap`, `--slotted-toast-border-color`, `--slotted-toast-border-width`, `--slotted-toast-close-radius`, `--slotted-toast-close-size`, `--slotted-toast-column-gap`, `--slotted-toast-font-family`, `--slotted-toast-gap`, `--slotted-toast-measure`, `--slotted-toast-offset`, `--slotted-toast-padding-block`, `--slotted-toast-padding-inline`, `--slotted-toast-progress-size`, `--slotted-toast-radius`, `--slotted-toast-row-gap`, `--slotted-toast-shadow`, `--slotted-toast-stack-fade`, `--slotted-toast-stack-step`, `--slotted-toast-state-layer-active`, `--slotted-toast-state-layer-hover`, `--slotted-toast-surface`, `--slotted-toast-text`, `--slotted-toast-text-gap`, `--slotted-toast-text-muted`, `--slotted-toast-title-font-family`, `--slotted-toast-title-font-weight`, `--slotted-tone-accent-border`, `--slotted-tone-accent-on-solid`, `--slotted-tone-accent-solid`, `--slotted-tone-accent-surface`, `--slotted-tone-accent-text`, `--slotted-tone-danger-border`, `--slotted-tone-danger-on-solid`, `--slotted-tone-danger-solid`, `--slotted-tone-danger-surface`, `--slotted-tone-danger-text`, `--slotted-tone-secondary-border`, `--slotted-tone-secondary-on-solid`, `--slotted-tone-secondary-solid`, `--slotted-tone-secondary-surface`, `--slotted-tone-secondary-text`, `--slotted-tone-success-border`, `--slotted-tone-success-on-solid`, `--slotted-tone-success-solid`, `--slotted-tone-success-surface`, `--slotted-tone-success-text`, `--slotted-tone-warning-border`, `--slotted-tone-warning-on-solid`, `--slotted-tone-warning-solid`, `--slotted-tone-warning-surface`, `--slotted-tone-warning-text`, `--slotted-z-index-toast`
+`--slotted-border-subtle`, `--slotted-border-width-thin`, `--slotted-control-font-family`, `--slotted-control-font-size-md`, `--slotted-control-icon-size-md`, `--slotted-control-inner-size-md`, `--slotted-control-radius`, `--slotted-control-transition-duration`, `--slotted-control-transition-easing`, `--slotted-duration-long`, `--slotted-duration-medium`, `--slotted-duration-short`, `--slotted-easing-enter`, `--slotted-easing-exit`, `--slotted-easing-standard`, `--slotted-focus-ring-color`, `--slotted-focus-ring-offset`, `--slotted-focus-ring-width`, `--slotted-font-family-heading`, `--slotted-font-family-sans`, `--slotted-font-weight-semibold`, `--slotted-line-height-md`, `--slotted-radius-lg`, `--slotted-shadow-md`, `--slotted-space-1`, `--slotted-space-2`, `--slotted-space-3`, `--slotted-space-4`, `--slotted-space-5`, `--slotted-space-6`, `--slotted-space-7`, `--slotted-surface-raised`, `--slotted-target-comfortable`, `--slotted-target-min`, `--slotted-text`, `--slotted-text-muted`, `--slotted-toast-actions-gap`, `--slotted-toast-border-color`, `--slotted-toast-border-width`, `--slotted-toast-close-radius`, `--slotted-toast-close-size`, `--slotted-toast-column-gap`, `--slotted-toast-font-family`, `--slotted-toast-gap`, `--slotted-toast-measure`, `--slotted-toast-offset`, `--slotted-toast-padding-block`, `--slotted-toast-padding-inline`, `--slotted-toast-progress-size`, `--slotted-toast-radius`, `--slotted-toast-row-gap`, `--slotted-toast-shadow`, `--slotted-toast-stack-fade`, `--slotted-toast-stack-step`, `--slotted-toast-state-layer-active`, `--slotted-toast-state-layer-hover`, `--slotted-toast-surface`, `--slotted-toast-text`, `--slotted-toast-text-gap`, `--slotted-toast-text-muted`, `--slotted-toast-title-font-family`, `--slotted-toast-title-font-weight`, `--slotted-tone-accent-border`, `--slotted-tone-accent-on-solid`, `--slotted-tone-accent-solid`, `--slotted-tone-accent-surface`, `--slotted-tone-accent-text`, `--slotted-tone-danger-border`, `--slotted-tone-danger-on-solid`, `--slotted-tone-danger-solid`, `--slotted-tone-danger-surface`, `--slotted-tone-danger-text`, `--slotted-tone-info-border`, `--slotted-tone-info-on-solid`, `--slotted-tone-info-solid`, `--slotted-tone-info-surface`, `--slotted-tone-info-text`, `--slotted-tone-secondary-border`, `--slotted-tone-secondary-on-solid`, `--slotted-tone-secondary-solid`, `--slotted-tone-secondary-surface`, `--slotted-tone-secondary-text`, `--slotted-tone-success-border`, `--slotted-tone-success-on-solid`, `--slotted-tone-success-solid`, `--slotted-tone-success-surface`, `--slotted-tone-success-text`, `--slotted-tone-warning-border`, `--slotted-tone-warning-on-solid`, `--slotted-tone-warning-solid`, `--slotted-tone-warning-surface`, `--slotted-tone-warning-text`, `--slotted-z-index-toast`
 
 ## Examples
 

package/docs/toggle-group.json

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

package/docs/toggle-group.md

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

package/docs/toggle.json

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

package/docs/toggle.md

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