@slotted/react 0.1.0-beta.1 → 0.1.0-beta.10

package/dist/docs/toggle-group.json

@@ -14,7 +14,8 @@
     ],
     "variant": [
       "outline",
-      "ghost"
+      "ghost",
+      "chips"
     ],
     "orientation": [
       "horizontal",
@@ -131,10 +132,10 @@
         },
         {
           "name": "variant",
-          "type": "'outline' | 'ghost'",
+          "type": "'outline' | 'ghost' | 'chips'",
           "defaultValue": "outline",
           "appliesTo": "ToggleGroup",
-          "description": "Whether the bar draws its own edge. There is no tone axis: “on” is one colour across the system, and a bar that wants the whole palette is button-group around ToggleButtons"
+          "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, and a bar that wants the whole palette is button-group around ToggleButtons"
         },
         {
           "name": "orientation",
@@ -292,9 +293,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",
@@ -310,6 +318,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/dist/docs/toggle-group.md

@@ -39,7 +39,7 @@ Excerpt — not a complete module
 | `multiple` | `boolean` | false | ToggleGroup | Whether more than one item may be on at a time. The value stays an array either way, so both bindings hold one shape and a single-select consumer writes an array of one |
 | `deselectable` | `boolean` | true | ToggleGroup | 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 | ToggleGroup | 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 | ToggleGroup | Whether the bar draws its own edge. There is no tone axis: “on” is one colour across the system, and a bar that wants the whole palette is button-group around ToggleButtons |
+| `variant` | `'outline' \| 'ghost' \| 'chips'` | outline | ToggleGroup | 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, and a bar that wants the whole palette is button-group around ToggleButtons |
 | `orientation` | `'horizontal' \| 'vertical'` | horizontal | ToggleGroup | How the items flow, and which pair of arrows moves focus. A vertical group writes aria-orientation |
 | `attached` | `boolean` | true | ToggleGroup | 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 | ToggleGroup | Whether the items share the whole line. Left alone the bar is as wide as its labels |
@@ -67,7 +67,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
@@ -81,7 +81,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/dist/docs/toggle.json

@@ -14,7 +14,8 @@
     ],
     "variant": [
       "outline",
-      "ghost"
+      "ghost",
+      "chips"
     ]
   },
   "members": {
@@ -99,10 +100,10 @@
         },
         {
           "name": "variant",
-          "type": "'outline' | 'ghost'",
+          "type": "'outline' | 'ghost' | 'chips'",
           "defaultValue": "outline",
           "appliesTo": "Toggle",
-          "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": "icon",
@@ -217,9 +218,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",
@@ -235,6 +241,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/dist/docs/toggle.md

@@ -34,7 +34,7 @@ Excerpt — not a complete module
 | `pressed` | `boolean` | — | Toggle | Present means the consumer owns the state, for the life of the component. Absent, the toggle owns it and starts from defaultPressed |
 | `defaultPressed` | `boolean` | false | Toggle | What an uncontrolled toggle starts from, read once. A later change to it does not silently become new state |
 | `size` | `'sm' \| 'md' \| 'lg'` | md | Toggle | The control step. It reads the control scale, so the toggle is as tall as the field beside it |
-| `variant` | `'outline' \| 'ghost'` | outline | Toggle | 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 | Toggle | 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 |
 | `icon` | `ReactNode` | — | Toggle | The mark drawn before the words, sized from the control glyph scale and hidden from the reading order. Alone, it makes the toggle square |
 | `children` | `ReactNode` | — | Toggle | The words, which never change with the state. Absent, the toggle needs an aria-label |
 | `disabled` | `boolean` | false | Toggle | The native attribute, which is also what makes the browser refuse focus. A toggle that is on and unavailable keeps saying both |
@@ -56,7 +56,7 @@ Excerpt — not a complete module
 | Axis | Values | Default |
 | --- | --- | --- |
 | `size` | `sm`, `md`, `lg` | `md` |
-| `variant` | `outline`, `ghost` | `outline` |
+| `variant` | `outline`, `ghost`, `chips` | `outline` |
 
 ## Rules
 
@@ -68,7 +68,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
 

package/dist/docs/tokens.md

@@ -0,0 +1,467 @@
+# Tokens
+
+The theme states every value the families draw with. An element of the application's own reads the groups on this page, never a literal, and never a token of a group under "Read by their family only" (CP-05, OE-01).
+
+A primitive is a step on a scale; a semantic token says what a value is for. Values are the default theme's. A colour has no value here: it changes with the scheme — light, dark, high-contrast — and is chosen by its role. A value that follows density is given for comfortable, compact and dense.
+
+## space
+
+How much separation or inset a layout needs, smallest first; a gap or an inset is one step.
+
+Names: --slotted-space-{step}
+
+| Token | Meaning | Default value |
+| --- | --- | --- |
+| `--slotted-space-1` | — | 0.125rem |
+| `--slotted-space-2` | — | 0.25rem |
+| `--slotted-space-3` | — | 0.375rem |
+| `--slotted-space-4` | — | 0.5rem |
+| `--slotted-space-5` | — | 0.75rem |
+| `--slotted-space-6` | — | 1rem |
+| `--slotted-space-7` | — | 1.25rem |
+| `--slotted-space-8` | — | 1.5rem |
+| `--slotted-space-9` | — | 2rem |
+| `--slotted-space-10` | — | 2.5rem |
+| `--slotted-space-11` | — | 3rem |
+| `--slotted-space-12` | — | 4rem |
+
+## radius
+
+How rounded a box or a part is drawn, from none to full.
+
+Names: --slotted-radius-{step}
+
+| Token | Meaning | Default value |
+| --- | --- | --- |
+| `--slotted-radius-none` | — | 0px |
+| `--slotted-radius-xs` | — | 2px |
+| `--slotted-radius-sm` | — | 4px |
+| `--slotted-radius-md` | — | 6px |
+| `--slotted-radius-lg` | — | 8px |
+| `--slotted-radius-full` | — | 9999px |
+
+## font-family
+
+The typeface text is set in.
+
+Names: --slotted-font-family-{family}
+
+| family | Meaning |
+| --- | --- |
+| sans | The typeface of the interface's text. |
+| mono | The typeface of code and of values read character by character. |
+| heading | The typeface of headings; a theme may point it at a face of its own. |
+
+| Token | Meaning | Default value |
+| --- | --- | --- |
+| `--slotted-font-family-sans` | The typeface of the interface's text. | 'Geist Variable', ui-sans-serif, system-ui, sans-serif |
+| `--slotted-font-family-mono` | The typeface of code and of values read character by character. | 'Geist Mono Variable', ui-monospace, SFMono-Regular, Menlo, monospace |
+| `--slotted-font-family-heading` | The typeface of headings; a theme may point it at a face of its own. | 'Geist Variable', ui-sans-serif, system-ui, sans-serif |
+
+## font-size
+
+What size text is set in, smallest first; text of the application's own takes its size from the `typography` family before this scale.
+
+Names: --slotted-font-size-{step}
+
+| Token | Meaning | Default value |
+| --- | --- | --- |
+| `--slotted-font-size-xs` | — | 0.75rem |
+| `--slotted-font-size-sm` | — | 0.8125rem |
+| `--slotted-font-size-md` | — | 0.875rem |
+| `--slotted-font-size-lg` | — | 1rem |
+| `--slotted-font-size-xl` | — | 1.125rem |
+| `--slotted-font-size-2xl` | — | 1.25rem |
+| `--slotted-font-size-3xl` | — | 1.5rem |
+| `--slotted-font-size-4xl` | — | 2rem |
+
+## line-height
+
+The line height that pairs with the font-size step of the same name.
+
+Names: --slotted-line-height-{step}
+
+| Token | Meaning | Default value |
+| --- | --- | --- |
+| `--slotted-line-height-xs` | — | 1.4 |
+| `--slotted-line-height-sm` | — | 1.45 |
+| `--slotted-line-height-md` | — | 1.5 |
+| `--slotted-line-height-lg` | — | 1.5 |
+| `--slotted-line-height-xl` | — | 1.45 |
+| `--slotted-line-height-2xl` | — | 1.4 |
+| `--slotted-line-height-3xl` | — | 1.3 |
+| `--slotted-line-height-4xl` | — | 1.2 |
+
+## letter-spacing
+
+The tracking large type takes: the tight step at the md and lg display steps, the tighter step at 3xl and 4xl. Text at the body steps reads the face as drawn.
+
+| Token | Meaning | Default value |
+| --- | --- | --- |
+| `--slotted-letter-spacing-tight` | The tracking of a display figure or a wordmark at the md and lg font-size steps. | -0.02em |
+| `--slotted-letter-spacing-tighter` | The tracking of a display figure at the 3xl and 4xl font-size steps. | -0.03em |
+
+## font-weight
+
+How much typographic emphasis text carries.
+
+Names: --slotted-font-weight-{weight}
+
+| weight | Meaning |
+| --- | --- |
+| regular | Running text. |
+| medium | Text that stands out from running text without heading it. |
+| semibold | A heading, a control's label, a figure that leads. |
+
+| Token | Meaning | Default value |
+| --- | --- | --- |
+| `--slotted-font-weight-regular` | Running text. | 400 |
+| `--slotted-font-weight-medium` | Text that stands out from running text without heading it. | 500 |
+| `--slotted-font-weight-semibold` | A heading, a control's label, a figure that leads. | 600 |
+
+## border-width
+
+How thick an edge or a ring is drawn.
+
+Names: --slotted-border-width-{width}
+
+| width | Meaning |
+| --- | --- |
+| thin | The edge of a box, a control or a divider. |
+| medium | The weight between thin and thick. |
+| thick | The heaviest edge. |
+
+| Token | Meaning | Default value |
+| --- | --- | --- |
+| `--slotted-border-width-thin` | The edge of a box, a control or a divider. | 1px |
+| `--slotted-border-width-thick` | The heaviest edge. | 2px |
+| `--slotted-border-width-medium` | The weight between thin and thick. | 1.5px |
+
+## duration
+
+How long a transition or one cycle of a loop takes. The steps from instant to long collapse under reduced motion; the loops do not, so a repeating animation stops there instead.
+
+Names: --slotted-duration-{step}
+
+| step | Meaning |
+| --- | --- |
+| instant | A change that must not read as motion. |
+| short | A control changing state: a ground, a border, a mark. |
+| medium | A part appearing or leaving: a popover, a menu, a tooltip. |
+| long | A surface entering or leaving over a larger distance: a drawer, a dialog. |
+| loop-fast | One cycle of a fast repeating animation. |
+| loop | One cycle of a repeating animation. |
+| loop-slow | One cycle of a slow repeating animation. |
+
+| Token | Meaning | Default value |
+| --- | --- | --- |
+| `--slotted-duration-loop-fast` | One cycle of a fast repeating animation. | 700ms |
+| `--slotted-duration-loop` | One cycle of a repeating animation. | 1.1s |
+| `--slotted-duration-loop-slow` | One cycle of a slow repeating animation. | 1.6s |
+| `--slotted-duration-instant` | A change that must not read as motion. | 1ms |
+| `--slotted-duration-short` | A control changing state: a ground, a border, a mark. | 120ms; 1ms under reduced motion |
+| `--slotted-duration-medium` | A part appearing or leaving: a popover, a menu, a tooltip. | 200ms; 1ms under reduced motion |
+| `--slotted-duration-long` | A surface entering or leaving over a larger distance: a drawer, a dialog. | 320ms; 1ms under reduced motion |
+
+## easing
+
+How the velocity of a transition changes.
+
+Names: --slotted-easing-{curve}
+
+| curve | Meaning |
+| --- | --- |
+| standard | A change within the screen. |
+| enter | A part arriving. |
+| exit | A part leaving. |
+| emphasized | A change meant to be noticed; it overshoots its end. |
+
+| Token | Meaning | Default value |
+| --- | --- | --- |
+| `--slotted-easing-standard` | A change within the screen. | cubic-bezier(0.2, 0, 0, 1) |
+| `--slotted-easing-enter` | A part arriving. | cubic-bezier(0.05, 0.7, 0.1, 1) |
+| `--slotted-easing-exit` | A part leaving. | cubic-bezier(0.3, 0, 0.8, 0.15) |
+| `--slotted-easing-emphasized` | A change meant to be noticed; it overshoots its end. | cubic-bezier(0.3, 0, 0, 1.3) |
+
+## z-index
+
+Which layer an element occupies above the page.
+
+Names: --slotted-z-index-{layer}
+
+| layer | Meaning |
+| --- | --- |
+| sticky | A header or a column that stays in place while its region scrolls. |
+| overlay | A modal surface and the scrim under it. |
+| popover | A popover, a menu or a tooltip; above an overlay, so one opens from a dialog. |
+| toast | A toast; above every other layer. |
+
+| Token | Meaning | Default value |
+| --- | --- | --- |
+| `--slotted-z-index-sticky` | A header or a column that stays in place while its region scrolls. | 100 |
+| `--slotted-z-index-overlay` | A modal surface and the scrim under it. | 1000 |
+| `--slotted-z-index-popover` | A popover, a menu or a tooltip; above an overlay, so one opens from a dialog. | 1100 |
+| `--slotted-z-index-toast` | A toast; above every other layer. | 1200 |
+
+## shadow
+
+What elevation a surface has above the one under it, smallest first; under forced colours every step is none.
+
+Names: --slotted-shadow-{step}
+
+| Token | Meaning | Default value |
+| --- | --- | --- |
+| `--slotted-shadow-xs` | — | by scheme |
+| `--slotted-shadow-sm` | — | by scheme |
+| `--slotted-shadow-md` | — | by scheme |
+| `--slotted-shadow-lg` | — | by scheme |
+
+## surface
+
+The grounds content stands on.
+
+| Token | Meaning | Default value |
+| --- | --- | --- |
+| `--slotted-surface` | The ground of the page's content and of a card. | by scheme |
+| `--slotted-surface-raised` | The ground of a surface above another: a popover, a menu, a dialog; paired with a step of `shadow`. | by scheme |
+| `--slotted-surface-sunken` | The canvas under the content: the ground a card and a field stand out from. | by scheme |
+| `--slotted-surface-inverse` | A ground in the opposite lightness, with `--slotted-text-inverse` on it. | by scheme |
+| `--slotted-surface-inverse-hover` | The inverse ground under the pointer: `--slotted-surface-inverse` moved a share toward the opposite lightness. | by scheme |
+| `--slotted-surface-inverse-active` | The inverse ground while pressed, a step beyond the hover. | by scheme |
+| `--slotted-surface-material` | The ground of a bar that floats over scrolling content, drawn as a material: `--slotted-surface` at a partial share over transparency, behind `--slotted-material-backdrop`. Under `prefers-reduced-transparency: reduce` it is `--slotted-surface`, and under forced colours the Canvas system colour. | by scheme |
+| `--slotted-material-backdrop` | The backdrop filter a material is drawn with: the content scrolling under it, saturated and blurred. Under `prefers-reduced-transparency: reduce` it is `none`. | saturate(1.6) blur(20px) |
+
+## text
+
+The colours text is painted in.
+
+| Token | Meaning | Default value |
+| --- | --- | --- |
+| `--slotted-text` | Text on a surface. | by scheme |
+| `--slotted-text-muted` | Text that ranks below the text beside it: a caption, a hint, a secondary value. | by scheme |
+| `--slotted-text-inverse` | Text on `--slotted-surface-inverse`. | by scheme |
+
+## border
+
+The colours of lines between and inside surfaces.
+
+| Token | Meaning | Default value |
+| --- | --- | --- |
+| `--slotted-border-subtle` | A rule inside a surface: a divider, the edge of a region, the seam under a header. | by scheme |
+| `--slotted-border-strong` | The line between two surfaces; it holds 3:1 against every surface a control stands on. | by scheme |
+
+## disabled
+
+How an unavailable control is painted.
+
+Names: --slotted-disabled-{role}
+
+| role | Meaning |
+| --- | --- |
+| background | The ground of an unavailable control. |
+| foreground | The text and icons of an unavailable control. |
+| border | The edge of an unavailable control, a step lighter than the edge of an available one. |
+
+## focus-ring
+
+The outline every focused element draws.
+
+| Token | Meaning | Default value |
+| --- | --- | --- |
+| `--slotted-focus-ring-width` | The thickness of the focus outline. | 2px |
+| `--slotted-focus-ring-offset` | The distance between the element and its focus outline. | 2px |
+| `--slotted-focus-ring-color` | The colour of the focus outline. | by scheme |
+| `--slotted-focus-ring-color-invalid` | The colour of the focus outline of a control in error; an element in error points `--slotted-focus-ring-color` at it. | by scheme |
+
+## target
+
+How small an interactive target may be.
+
+| Token | Meaning | Default value |
+| --- | --- | --- |
+| `--slotted-target-min` | The smallest target in both axes: 24 by 24 CSS pixels. | 24px |
+| `--slotted-target-comfortable` | The size a target grows to under a coarse pointer. | 44px |
+
+## tone
+
+What an element carrying an intent is painted with: seven tones, each with the same nine roles.
+
+Names: --slotted-tone-{tone}-{role}
+
+| tone | Meaning |
+| --- | --- |
+| accent | The product's intent: the primary action, the chosen option, the current place. |
+| secondary | A second intent beside accent, for an action or a mark that must not compete with it. |
+| neutral | Ink: the inverse surface as a fill and the text colour as a label, for a primary action in a product that keeps the accent for data. |
+| info | A fact the reader is told with no judgement of it: a note, a transfer, a change of state that is neither good nor bad. Its own seed, so it stays apart from an accent that shares a hue with success. |
+| success | A result that completed or a state that is healthy. |
+| warning | A state that needs attention before it becomes a failure. |
+| danger | A failure, an error or an action that destroys data. |
+
+| role | Meaning |
+| --- | --- |
+| solid | A filled ground: the primary button of the tone. |
+| solid-hover | The filled ground under the pointer. |
+| solid-active | The filled ground while pressed. |
+| on-solid | Text and icons on the filled ground. |
+| surface | A tinted ground; a state that must be seen pairs it with the tone's border. |
+| subtle-hover | The tint under the pointer of an element with no filled ground. |
+| subtle-active | That tint while pressed. |
+| border | An edge in the tone, at the non-text contrast ratio against the page and against its own surface. |
+| text | Text in the tone on a surface. |
+
+## data
+
+What a series of data is painted with: a line, a bar, a slice. Slots are assigned in order and never skipped.
+
+Names: --slotted-data-{slot}
+
+| slot | Meaning |
+| --- | --- |
+| 1 | The first series. |
+| 2 | The second series. |
+| 3 | The third series. |
+| 4 | The fourth series. |
+| 5 | The fifth series. |
+| 6 | The sixth series. |
+| 7 | The seventh series. |
+| 8 | The eighth series. |
+
+## data-on
+
+The ink drawn on a data slot used as a ground — an icon on a category tile — at the non-text ratio (3:1, WCAG 1.4.11) against its slot in every scheme.
+
+Names: --slotted-data-{slot}-on
+
+| slot | Meaning |
+| --- | --- |
+| 1 | Ink on the first slot. |
+| 2 | Ink on the second slot. |
+| 3 | Ink on the third slot. |
+| 4 | Ink on the fourth slot. |
+| 5 | Ink on the fifth slot. |
+| 6 | Ink on the sixth slot. |
+| 7 | Ink on the seventh slot. |
+| 8 | Ink on the eighth slot. |
+
+## control
+
+What a control's text and frame look like at every size.
+
+| Token | Meaning | Default value |
+| --- | --- | --- |
+| `--slotted-control-font-family` | The typeface of a control's text. | 'Geist Variable', ui-sans-serif, system-ui, sans-serif |
+| `--slotted-control-font-weight` | The weight of a control's label. | 600 |
+| `--slotted-control-line-height` | The line height of a control's text. | 1 |
+| `--slotted-control-letter-spacing` | The letter spacing of a control's text. | 0 |
+| `--slotted-control-border-width` | The edge width of a control at rest. | 1px |
+| `--slotted-control-radius` | The corner of a control. | 4px |
+| `--slotted-control-shadow-focus-geometry` | Offset, blur and spread of the shadow a focused control draws, with no colour; drawn with `--slotted-focus-ring-color`. | 0 1px 4px -1px |
+| `--slotted-control-transition-duration` | How long a control takes to change state. | 120ms; 1ms under reduced motion |
+| `--slotted-control-transition-easing` | The curve of a control's change of state. | cubic-bezier(0.2, 0, 0, 1) |
+| `--slotted-control-invalid-edge-width` | The edge an invalid control adds inside its border, so the state reads where colour cannot. | 1px |
+| `--slotted-control-focus-ring-offset` | The distance between a field's frame and its focus outline; set to the negative of `--slotted-control-border-width`, a field's ring lies flush over its border while a button keeps `--slotted-focus-ring-offset`. | 2px |
+| `--slotted-control-border-color` | The edge colour of a control at rest. | by scheme |
+| `--slotted-control-surface` | The ground of a control at rest: a field, a select, a segmented control. | by scheme |
+| `--slotted-control-shadow` | The shadow of a control at rest. | by scheme |
+
+## control-size
+
+The size and inner spacing of a control at each size step; every value follows density.
+
+Names: --slotted-control-{part}-{size}
+
+| part | Meaning |
+| --- | --- |
+| height | The block size of the control. |
+| padding-inline | The inline space between the control's edge and its content. |
+| font-size | The size of the control's text. |
+| icon-size | The size of an icon inside the control. |
+| gap | The space between items inside the control, and between one choice and the next in a group. |
+| label-gap | The space between a binary control — a box, a circle, a switch — and its own label. |
+| inner-size | The block size of what stands inside the control: a key, a chip, a clear mark. |
+
+| size | Meaning |
+| --- | --- |
+| sm | The small step. |
+| md | The medium step. |
+| lg | The large step. |
+
+| Token | Meaning | Default value |
+| --- | --- | --- |
+| `--slotted-control-height-sm` | The block size of the control. The small step. | comfortable 30px, compact 26px, dense 24px |
+| `--slotted-control-height-md` | The block size of the control. The medium step. | comfortable 34px, compact 28px, dense 26px |
+| `--slotted-control-height-lg` | The block size of the control. The large step. | comfortable 38px, compact 32px, dense 30px |
+| `--slotted-control-padding-inline-sm` | The inline space between the control's edge and its content. The small step. | comfortable 10px, compact 8px, dense 6px |
+| `--slotted-control-padding-inline-md` | The inline space between the control's edge and its content. The medium step. | comfortable 13px, compact 10px, dense 8px |
+| `--slotted-control-padding-inline-lg` | The inline space between the control's edge and its content. The large step. | comfortable 16px, compact 12px, dense 10px |
+| `--slotted-control-font-size-sm` | The size of the control's text. The small step. | comfortable 12px, compact 12px, dense 12px |
+| `--slotted-control-font-size-md` | The size of the control's text. The medium step. | comfortable 13px, compact 12px, dense 12px |
+| `--slotted-control-font-size-lg` | The size of the control's text. The large step. | comfortable 14px, compact 13px, dense 12px |
+| `--slotted-control-icon-size-sm` | The size of an icon inside the control. The small step. | comfortable 14px, compact 13px, dense 12px |
+| `--slotted-control-icon-size-md` | The size of an icon inside the control. The medium step. | comfortable 16px, compact 14px, dense 13px |
+| `--slotted-control-icon-size-lg` | The size of an icon inside the control. The large step. | comfortable 18px, compact 16px, dense 14px |
+| `--slotted-control-gap-sm` | The space between items inside the control, and between one choice and the next in a group. The small step. | comfortable 6px, compact 4px, dense 4px |
+| `--slotted-control-gap-md` | The space between items inside the control, and between one choice and the next in a group. The medium step. | comfortable 8px, compact 6px, dense 4px |
+| `--slotted-control-gap-lg` | The space between items inside the control, and between one choice and the next in a group. The large step. | comfortable 8px, compact 6px, dense 6px |
+| `--slotted-control-label-gap-sm` | The space between a binary control — a box, a circle, a switch — and its own label. The small step. | comfortable 8px, compact 6px, dense 6px |
+| `--slotted-control-label-gap-md` | The space between a binary control — a box, a circle, a switch — and its own label. The medium step. | comfortable 12px, compact 8px, dense 6px |
+| `--slotted-control-label-gap-lg` | The space between a binary control — a box, a circle, a switch — and its own label. The large step. | comfortable 12px, compact 8px, dense 8px |
+| `--slotted-control-inner-size-sm` | The block size of what stands inside the control: a key, a chip, a clear mark. The small step. | comfortable 22px, compact 18px, dense 16px |
+| `--slotted-control-inner-size-md` | The block size of what stands inside the control: a key, a chip, a clear mark. The medium step. | comfortable 24px, compact 20px, dense 18px |
+| `--slotted-control-inner-size-lg` | The block size of what stands inside the control: a key, a chip, a clear mark. The large step. | comfortable 28px, compact 24px, dense 22px |
+
+## selection
+
+The size of a selection control and of the halo behind it.
+
+| Token | Meaning | Default value |
+| --- | --- | --- |
+| `--slotted-selection-size-sm` | The box of a checkbox and the circle of a radio at the small step. | 14px |
+| `--slotted-selection-size-md` | The box and the circle at the medium step. | 16px |
+| `--slotted-selection-size-lg` | The box and the circle at the large step. | 18px |
+| `--slotted-selection-halo-opacity` | The share of `--slotted-tone-accent-text` in the halo behind a selection control under the pointer. | 0.12 |
+
+## highlight
+
+How strong the band behind a matched span is.
+
+| Token | Meaning | Default value |
+| --- | --- | --- |
+| `--slotted-highlight-tint-opacity` | The share of `--slotted-tone-accent-text` in the band behind a matched span. | 0.075 |
+
+## current
+
+How the place the reader is on is marked.
+
+| Token | Meaning | Default value |
+| --- | --- | --- |
+| `--slotted-current-edge` | The edge of the row the reader is on, drawn over its tone ground. | by scheme |
+
+## state
+
+Translucent layers laid over whatever surface an element stands on, so a hovered, pressed or selected row reads the same on the page and on a raised surface. Each is the scheme's text colour at a small share over transparency. Under forced colours every layer is the Canvas system colour: the state is carried by the system colours the family draws, Highlight for selection and an outline for focus.
+
+| Token | Meaning | Default value |
+| --- | --- | --- |
+| `--slotted-state-hover` | The layer under the pointer. | by scheme |
+| `--slotted-state-pressed` | The layer while the element is pressed; the strongest of the three. | by scheme |
+| `--slotted-state-selected` | The layer of a selected or open element, between hover and pressed. | by scheme |
+
+## scrim
+
+The veil under a modal surface.
+
+| Token | Meaning | Default value |
+| --- | --- | --- |
+| `--slotted-scrim` | The veil between the page and a modal surface above it. | by scheme |
+
+## Read by their family only
+
+A family adjusts these for itself. An element of the application's own does not read them.
+
+- icon: The geometry of an icon a family draws itself; an icon of the application's own is drawn with the icon family. Names: --slotted-icon-{glyph}
+- upload-kind: The tile colours of file kinds in upload and attachment. Names: --slotted-upload-kind-{kind}
+- code: The colours of syntax scopes in code-block. Names: --slotted-code-{scope}
+- rating: The edge of a star in rating. Names: --slotted-rating-edge
+- avatar-size: The sizes of avatar, smallest first. Names: --slotted-avatar-size-{size}