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

package/docs/skills/theme-app/SKILL.md

@@ -0,0 +1,74 @@
+---
+name: theme-app
+description: Use when changing how an application built with @slotted/angular looks, as a whole or in one region — its brand colour, a light, dark or high-contrast scheme, density, fonts, corners, or the shape of a control. Chooses the narrowest level that reaches the change — a seed, a token, a family token or a theme rule — and where it is declared.
+---
+
+# Theme an application
+
+The theme decides every value a family paints. A change of look is made in a
+theme or on a scope, never by CSS of the application on a family's parts.
+
+## 1. Choose the level
+
+Take the first row that reaches the change.
+
+| The change                                             | Level                                                           | Declared in                                                                   |
+| ------------------------------------------------------ | --------------------------------------------------------------- | ----------------------------------------------------------------------------- |
+| The brand colour, or the colour of one intent          | a seed: `--slotted-seed-accent` or another name of `SEED_NAMES` | the theme's `seeds`, or a scope                                               |
+| Light, dark, high contrast, or the system's preference | the scheme: `light`, `dark`, `high-contrast`, `system`          | `data-slotted-scheme`, or the scheme of the `slThemeScope` directive from `@slotted/angular/theme`                        |
+| How tight controls and rows are                        | the density: `comfortable`, `compact`, `dense`                  | `data-slotted-density`, or the density of the `slThemeScope` directive from `@slotted/angular/theme`                      |
+| Spacing, corners, type, lines, shadows or motion       | a token of a group in `node_modules/@slotted/angular/docs/tokens.md`                   | the theme's `base`; `schemes` for a value per scheme; `densities` per density |
+| One family's look                                      | a token the family's page lists under Tokens                    | the theme's `components`                                                      |
+| What no token reaches                                  | a theme rule                                                    | the theme's `rules`                                                           |
+
+Every colour token derives from the five seeds within contrast bounds, so a
+new seed keeps the ratios of every scheme. A colour of the `tone`, `surface`,
+`text` or `border` groups is changed through its seed, never declared by hand.
+
+## 2. One theme for the product
+
+1. Build it with `extendTheme` on the theme of `@slotted/themes/default`: a
+   name of its own, and only what changes — `seeds`, then `base`, `schemes`
+   and `densities`, then `components`, then `rules`. A face the product brings
+   goes in `fonts`, and the `font-family` group names it; headings read
+   `--slotted-font-family-heading`.
+2. Compile it with `slotted-build-theme`, load the stylesheet it writes in
+   place of `@slotted/themes/default.css`, and set the theme's name in
+   `data-slotted-theme` and the scheme in `data-slotted-scheme` on the root
+   element.
+3. A theme chosen at runtime is applied with `applyTheme`, in a module the
+   application loads on demand: `@slotted/theme` carries the whole token
+   contract and its validator.
+4. In a test of the theme, `themeConformance` from `@slotted/theme/conformance`
+   checks the structure, the contrast of every scheme and the glyphs, under
+   Node's test runner. It takes the `contract`, the theme passed through
+   `flattenTheme`, and the compiled stylesheet.
+
+## 3. One region
+
+1. A scheme or a density for a subtree: the `slThemeScope` directive from `@slotted/angular/theme`, which carries both to
+   an overlay opened inside it, or the `data-slotted-scheme` and
+   `data-slotted-density` attributes on the subtree's root.
+2. A seed for a subtree: the seed property on an element that also carries
+   `data-slotted-seeds`, or the seeds of the `slThemeScope` directive from `@slotted/angular/theme`. Every colour under it
+   derives again from that seed.
+3. A colour the reader picks at runtime: write the seed property on the element
+   that carries `data-slotted-theme`, with `seedStyle` from
+   `@slotted/theme/seeds`, which leaves the token contract out of the bundle.
+
+## 4. Restyle a control
+
+1. A token every control reads, in `base`, `schemes` or `densities`.
+2. Else a token of the family, in `components`; it falls back to the control
+   token.
+3. Else a theme rule. It lives in `slotted.theme-rules`, selects only
+   `data-ui`, `data-part`, the attributes a family writes and the theme's
+   attributes, and reads only tokens; the compiler names the file, the line
+   and the selector of a rule it refuses.
+
+## 5. Done
+
+1. The application's own CSS declares no token of the `tone`, `surface`,
+   `text` or `border` groups, and sets no colour, border, radius, padding or
+   type on a family's `data-ui` or `data-part`.
+2. `themeConformance` passes for the theme.

package/docs/skills/waiting-states/SKILL.md

@@ -0,0 +1,139 @@
+---
+name: waiting-states
+description: Use when building or reviewing anything a person waits in front of in an application built with @slotted/angular — placeholders, a control's own loading state, a loading overlay, a progress indicator, or the empty and error states beside them. Decides which indicator answers which wait and how placeholders are built from the anatomy they stand in for.
+---
+
+# Waiting states
+
+A waiting state is a screen the reader sees, not a gap in one. It is built from
+the anatomy it stands in for, and it is finished when the loaded screen and the
+pending screen occupy the same boxes.
+
+The failure this skill prevents: three grey bars of equal length where a table,
+a card and a list should have been.
+
+Rules cited here are in `node_modules/@slotted/angular/docs/guidelines/async-feedback.md`. Each family
+named here has its page: `node_modules/@slotted/angular/docs/<family>.md`.
+
+## 1. Which indicator answers which wait
+
+Answer in order and stop at the first row that decides.
+
+| The wait                                                                           | The indicator                                     |
+| ---------------------------------------------------------------------------------- | ------------------------------------------------- |
+| Structure is known before the data arrives — a list, a table, a card, a form       | `skeleton` placeholders                           |
+| A control started the request and stays on screen — a button, a field, a menu item | that family's own `loading` state                 |
+| A region already painted is being replaced and must not be touched meanwhile       | `loading-overlay`                                 |
+| The work reports how much is done                                                  | `progress-indicator` with a value                 |
+| Nothing above: duration unknown, structure unknown, area small                     | `progress-indicator` in its `indeterminate` state |
+
+Two indicators never answer the same wait in the same region. Placeholders
+under an overlay, an indeterminate indicator inside placeholders, and a
+progress indicator over a control that already waits are each one indicator
+too many.
+
+A region that already shows items is busy, not pending: it keeps its items,
+carries `aria-busy`, and swaps them when the newer answer arrives (AF-02,
+AF-07). Replacing read content with placeholders on every refresh is how a
+screen flickers. A change of view or page is different: the rows on screen are
+removed and placeholders stand in their place (AF-04).
+
+A control that starts a request waits on it: it is in its `loading` state from
+activation until the answer, refuses a second activation and shows the
+family's indicator (AF-03).
+
+## 2. Placeholders are the anatomy, not rectangles
+
+Placeholders are the same layout as the content, drawn in one colour. Build
+them from the loaded markup:
+
+1. Keep the container, the parts, the grid, the inset and the gap tokens the
+   loaded content uses. Copy the structure; replace only what carries data.
+2. Text becomes `skeleton` text lines at the same type size, so the reserved
+   height is the height the text will take.
+3. Media — avatar, thumbnail, chart — becomes a shape of its own measured box.
+4. Repetition takes the real count: a list reserves the rows its first page
+   returns, a table reserves its columns at their real widths, a card reserves
+   the avatar and the two lines that card holds.
+5. Stop where the reader stops. A row's badge, a trailing icon and a caption
+   belong to the loaded row, not to its placeholder.
+
+Line lengths vary the way text varies: the last line of a paragraph is short,
+a name is shorter than a description. A stack of bars of equal length is the
+defect this section names.
+
+### What never gets placeholders
+
+Chrome that is already painted renders with its real content: the application
+bar, the navigation column, the page header's title, a toolbar, a tab strip, a
+section heading. Only what is being fetched is reserved. An action nobody can
+press yet is absent, not drawn as a placeholder.
+
+## 3. The test: nothing moves
+
+The pending state and the loaded state occupy the same boxes. Capture both at
+the same width, in the same scheme, and compare their bounding boxes: any box
+that moves between them is a defect.
+
+Where the two cannot match exactly — an unknown number of rows, a description
+of unknown length — reserve the smaller of the two and let the content grow
+downward, never a box that shrinks.
+
+## 4. Timing
+
+- A region's placeholders appear at once; they are never delayed (AF-05).
+- A control's indicator may wait for the family's `loadingDelay`, so a request
+  that answers first shows no indicator; the control still refuses a second
+  activation (AF-05).
+- Once painted, placeholders stay for one minimum duration the application
+  states once for the whole product — the `minDuration` of `skeleton` and
+  `loading-overlay` — even when the answer has already arrived (AF-06).
+
+## 5. Announcement and focus
+
+- Placeholders are out of the accessibility tree. They describe nothing; the
+  region says what is happening.
+- One announcement per region, `polite`, once — not one per placeholder.
+  `skeleton` and `loading-overlay` announce through their `live` axis, `polite`
+  by default: keep it on the one that stands for the region and set it to `off`
+  on every other placeholder in that region.
+- The region carries `aria-busy` while it waits and drops it when the answer
+  arrives.
+- Focus does not move, on entry or on arrival. Content that lands under the
+  reader's focus does not take it, and a placeholder never holds a tab stop.
+
+## 6. Motion
+
+One shimmer per region, from the family's own animation, not one per bar.
+Under `prefers-reduced-motion: reduce` the animation stops and the reserved
+shape stays.
+
+## 7. Pending, empty and error are three states
+
+| State      | What it says                              | What it offers                            |
+| ---------- | ----------------------------------------- | ----------------------------------------- |
+| Pending    | the answer is coming                      | nothing to press                          |
+| Empty      | an answer arrived and it holds zero items | the action that creates the first one     |
+| No results | the filter excluded everything            | clearing the filter                       |
+| Error      | the answer did not arrive                 | retry; the data that is still valid stays |
+
+The empty state appears only after an answer holding zero items, never while
+the first answer is pending (AF-01). Empty, no results and error are drawn by
+`result-state`. An error replaces the indicator; it never leaves placeholders
+animating behind a message.
+
+## 8. Before calling a wait done
+
+- [ ] The indicator matches the wait, by the table in section 1, and there is
+      only one.
+- [ ] Placeholders mirror the anatomy: same parts, same grid, same tokens, real
+      counts.
+- [ ] Loaded and pending captured at the same width: no box moves.
+- [ ] Line lengths vary; no stack of equal bars.
+- [ ] Chrome that already exists is painted with its real content.
+- [ ] Placeholders are not delayed; the minimum duration is stated once.
+- [ ] One polite announcement per region, `aria-busy` on the region, focus
+      untouched.
+- [ ] Reduced motion stops the animation and keeps the shape.
+- [ ] Empty, no results and error are distinct states, each with its next step.
+- [ ] Each `Check` of AF-01 to AF-07 passes.

package/docs/stat-card.json

@@ -428,6 +428,7 @@
     "--slotted-stat-card-value-line-height-sm",
     "--slotted-surface-raised",
     "--slotted-surface-sunken",
+    "--slotted-target-comfortable",
     "--slotted-text",
     "--slotted-text-muted",
     "--slotted-tone-accent-text",

package/docs/stat-card.md

@@ -110,7 +110,7 @@ Excerpt — not a complete module
 
 ## Tokens
 
-`--slotted-border-subtle`, `--slotted-border-width-thin`, `--slotted-control-icon-size-md`, `--slotted-control-icon-size-sm`, `--slotted-font-family-sans`, `--slotted-font-size-2xl`, `--slotted-font-size-3xl`, `--slotted-font-size-4xl`, `--slotted-font-size-md`, `--slotted-font-size-sm`, `--slotted-font-size-xl`, `--slotted-font-size-xs`, `--slotted-font-weight-medium`, `--slotted-font-weight-semibold`, `--slotted-line-height-2xl`, `--slotted-line-height-3xl`, `--slotted-line-height-4xl`, `--slotted-line-height-md`, `--slotted-line-height-sm`, `--slotted-line-height-xl`, `--slotted-line-height-xs`, `--slotted-radius-lg`, `--slotted-radius-none`, `--slotted-shadow-md`, `--slotted-space-1`, `--slotted-space-11`, `--slotted-space-12`, `--slotted-space-2`, `--slotted-space-3`, `--slotted-space-4`, `--slotted-space-5`, `--slotted-space-6`, `--slotted-space-7`, `--slotted-space-8`, `--slotted-space-9`, `--slotted-sparkline-block-size`, `--slotted-sparkline-block-size-lg`, `--slotted-sparkline-block-size-sm`, `--slotted-stat-card-background`, `--slotted-stat-card-background-subtle`, `--slotted-stat-card-border-color`, `--slotted-stat-card-border-width`, `--slotted-stat-card-color`, `--slotted-stat-card-color-muted`, `--slotted-stat-card-delta-font-size`, `--slotted-stat-card-delta-font-size-lg`, `--slotted-stat-card-delta-font-size-sm`, `--slotted-stat-card-indicator-size`, `--slotted-stat-card-indicator-size-lg`, `--slotted-stat-card-label-font-size`, `--slotted-stat-card-label-font-size-lg`, `--slotted-stat-card-label-font-size-sm`, `--slotted-stat-card-label-line-height`, `--slotted-stat-card-label-line-height-lg`, `--slotted-stat-card-label-line-height-sm`, `--slotted-stat-card-min-inline-size`, `--slotted-stat-card-padding-block`, `--slotted-stat-card-padding-block-lg`, `--slotted-stat-card-padding-block-sm`, `--slotted-stat-card-padding-inline`, `--slotted-stat-card-padding-inline-lg`, `--slotted-stat-card-padding-inline-sm`, `--slotted-stat-card-prose-font-size`, `--slotted-stat-card-prose-font-size-lg`, `--slotted-stat-card-prose-line-height`, `--slotted-stat-card-prose-line-height-lg`, `--slotted-stat-card-radius`, `--slotted-stat-card-region-gap`, `--slotted-stat-card-region-gap-lg`, `--slotted-stat-card-region-gap-sm`, `--slotted-stat-card-shadow`, `--slotted-stat-card-shadow-elevated`, `--slotted-stat-card-trend-gap`, `--slotted-stat-card-trend-gap-lg`, `--slotted-stat-card-trend-gap-sm`, `--slotted-stat-card-trend-inline-size`, `--slotted-stat-card-trend-inline-size-lg`, `--slotted-stat-card-trend-inline-size-sm`, `--slotted-stat-card-value-font-size`, `--slotted-stat-card-value-font-size-lg`, `--slotted-stat-card-value-font-size-sm`, `--slotted-stat-card-value-line-height`, `--slotted-stat-card-value-line-height-lg`, `--slotted-stat-card-value-line-height-sm`, `--slotted-surface-raised`, `--slotted-surface-sunken`, `--slotted-text`, `--slotted-text-muted`, `--slotted-tone-accent-text`, `--slotted-tone-danger-text`, `--slotted-tone-secondary-text`, `--slotted-tone-success-text`, `--slotted-tone-warning-text`
+`--slotted-border-subtle`, `--slotted-border-width-thin`, `--slotted-control-icon-size-md`, `--slotted-control-icon-size-sm`, `--slotted-font-family-sans`, `--slotted-font-size-2xl`, `--slotted-font-size-3xl`, `--slotted-font-size-4xl`, `--slotted-font-size-md`, `--slotted-font-size-sm`, `--slotted-font-size-xl`, `--slotted-font-size-xs`, `--slotted-font-weight-medium`, `--slotted-font-weight-semibold`, `--slotted-line-height-2xl`, `--slotted-line-height-3xl`, `--slotted-line-height-4xl`, `--slotted-line-height-md`, `--slotted-line-height-sm`, `--slotted-line-height-xl`, `--slotted-line-height-xs`, `--slotted-radius-lg`, `--slotted-radius-none`, `--slotted-shadow-md`, `--slotted-space-1`, `--slotted-space-11`, `--slotted-space-12`, `--slotted-space-2`, `--slotted-space-3`, `--slotted-space-4`, `--slotted-space-5`, `--slotted-space-6`, `--slotted-space-7`, `--slotted-space-8`, `--slotted-space-9`, `--slotted-sparkline-block-size`, `--slotted-sparkline-block-size-lg`, `--slotted-sparkline-block-size-sm`, `--slotted-stat-card-background`, `--slotted-stat-card-background-subtle`, `--slotted-stat-card-border-color`, `--slotted-stat-card-border-width`, `--slotted-stat-card-color`, `--slotted-stat-card-color-muted`, `--slotted-stat-card-delta-font-size`, `--slotted-stat-card-delta-font-size-lg`, `--slotted-stat-card-delta-font-size-sm`, `--slotted-stat-card-indicator-size`, `--slotted-stat-card-indicator-size-lg`, `--slotted-stat-card-label-font-size`, `--slotted-stat-card-label-font-size-lg`, `--slotted-stat-card-label-font-size-sm`, `--slotted-stat-card-label-line-height`, `--slotted-stat-card-label-line-height-lg`, `--slotted-stat-card-label-line-height-sm`, `--slotted-stat-card-min-inline-size`, `--slotted-stat-card-padding-block`, `--slotted-stat-card-padding-block-lg`, `--slotted-stat-card-padding-block-sm`, `--slotted-stat-card-padding-inline`, `--slotted-stat-card-padding-inline-lg`, `--slotted-stat-card-padding-inline-sm`, `--slotted-stat-card-prose-font-size`, `--slotted-stat-card-prose-font-size-lg`, `--slotted-stat-card-prose-line-height`, `--slotted-stat-card-prose-line-height-lg`, `--slotted-stat-card-radius`, `--slotted-stat-card-region-gap`, `--slotted-stat-card-region-gap-lg`, `--slotted-stat-card-region-gap-sm`, `--slotted-stat-card-shadow`, `--slotted-stat-card-shadow-elevated`, `--slotted-stat-card-trend-gap`, `--slotted-stat-card-trend-gap-lg`, `--slotted-stat-card-trend-gap-sm`, `--slotted-stat-card-trend-inline-size`, `--slotted-stat-card-trend-inline-size-lg`, `--slotted-stat-card-trend-inline-size-sm`, `--slotted-stat-card-value-font-size`, `--slotted-stat-card-value-font-size-lg`, `--slotted-stat-card-value-font-size-sm`, `--slotted-stat-card-value-line-height`, `--slotted-stat-card-value-line-height-lg`, `--slotted-stat-card-value-line-height-sm`, `--slotted-surface-raised`, `--slotted-surface-sunken`, `--slotted-target-comfortable`, `--slotted-text`, `--slotted-text-muted`, `--slotted-tone-accent-text`, `--slotted-tone-danger-text`, `--slotted-tone-secondary-text`, `--slotted-tone-success-text`, `--slotted-tone-warning-text`
 
 ## Examples
 

package/docs/tabs.json

@@ -412,6 +412,7 @@
     "--slotted-focus-ring-color",
     "--slotted-focus-ring-offset",
     "--slotted-focus-ring-width",
+    "--slotted-radius-full",
     "--slotted-radius-md",
     "--slotted-radius-sm",
     "--slotted-radius-xs",
@@ -446,13 +447,9 @@
     "--slotted-target-comfortable",
     "--slotted-target-min",
     "--slotted-text",
-    "--slotted-text-inverse",
     "--slotted-text-muted",
     "--slotted-tone-accent-solid",
     "--slotted-tone-accent-text",
-    "--slotted-tone-danger-border",
-    "--slotted-tone-danger-surface",
-    "--slotted-tone-danger-text",
     "--slotted-tone-secondary-subtle-active",
     "--slotted-tone-secondary-subtle-hover"
   ],

package/docs/tabs.md

@@ -204,7 +204,7 @@ export class TabsBasic {
 
 ## Tokens
 
-`--slotted-border-strong`, `--slotted-border-subtle`, `--slotted-border-width-thick`, `--slotted-border-width-thin`, `--slotted-control-font-family`, `--slotted-control-font-size-lg`, `--slotted-control-font-size-md`, `--slotted-control-font-size-sm`, `--slotted-control-font-weight`, `--slotted-control-gap-lg`, `--slotted-control-gap-md`, `--slotted-control-gap-sm`, `--slotted-control-height-lg`, `--slotted-control-height-md`, `--slotted-control-height-sm`, `--slotted-control-icon-size-lg`, `--slotted-control-icon-size-md`, `--slotted-control-icon-size-sm`, `--slotted-control-inner-size-lg`, `--slotted-control-inner-size-md`, `--slotted-control-inner-size-sm`, `--slotted-control-letter-spacing`, `--slotted-control-line-height`, `--slotted-control-padding-inline-lg`, `--slotted-control-padding-inline-md`, `--slotted-control-padding-inline-sm`, `--slotted-control-radius`, `--slotted-control-transition-duration`, `--slotted-control-transition-easing`, `--slotted-disabled-background`, `--slotted-disabled-border`, `--slotted-disabled-foreground`, `--slotted-duration-short`, `--slotted-easing-enter`, `--slotted-focus-ring-color`, `--slotted-focus-ring-offset`, `--slotted-focus-ring-width`, `--slotted-radius-md`, `--slotted-radius-sm`, `--slotted-radius-xs`, `--slotted-shadow-xs`, `--slotted-space-1`, `--slotted-space-2`, `--slotted-space-4`, `--slotted-space-6`, `--slotted-surface`, `--slotted-surface-sunken`, `--slotted-tabs-actions-gap`, `--slotted-tabs-active-background`, `--slotted-tabs-active-marker-color`, `--slotted-tabs-color`, `--slotted-tabs-contained-background`, `--slotted-tabs-contained-selected-background`, `--slotted-tabs-dismiss-active-background`, `--slotted-tabs-dismiss-active-color`, `--slotted-tabs-dismiss-color`, `--slotted-tabs-dismiss-hover-background`, `--slotted-tabs-dismiss-hover-color`, `--slotted-tabs-fade-size`, `--slotted-tabs-gap`, `--slotted-tabs-hover-background`, `--slotted-tabs-hover-color`, `--slotted-tabs-hover-marker-color`, `--slotted-tabs-list-gap`, `--slotted-tabs-marker-color`, `--slotted-tabs-scroll-color`, `--slotted-tabs-selected-color`, `--slotted-tabs-track-color`, `--slotted-target-comfortable`, `--slotted-target-min`, `--slotted-text`, `--slotted-text-inverse`, `--slotted-text-muted`, `--slotted-tone-accent-solid`, `--slotted-tone-accent-text`, `--slotted-tone-danger-border`, `--slotted-tone-danger-surface`, `--slotted-tone-danger-text`, `--slotted-tone-secondary-subtle-active`, `--slotted-tone-secondary-subtle-hover`
+`--slotted-border-strong`, `--slotted-border-subtle`, `--slotted-border-width-thick`, `--slotted-border-width-thin`, `--slotted-control-font-family`, `--slotted-control-font-size-lg`, `--slotted-control-font-size-md`, `--slotted-control-font-size-sm`, `--slotted-control-font-weight`, `--slotted-control-gap-lg`, `--slotted-control-gap-md`, `--slotted-control-gap-sm`, `--slotted-control-height-lg`, `--slotted-control-height-md`, `--slotted-control-height-sm`, `--slotted-control-icon-size-lg`, `--slotted-control-icon-size-md`, `--slotted-control-icon-size-sm`, `--slotted-control-inner-size-lg`, `--slotted-control-inner-size-md`, `--slotted-control-inner-size-sm`, `--slotted-control-letter-spacing`, `--slotted-control-line-height`, `--slotted-control-padding-inline-lg`, `--slotted-control-padding-inline-md`, `--slotted-control-padding-inline-sm`, `--slotted-control-radius`, `--slotted-control-transition-duration`, `--slotted-control-transition-easing`, `--slotted-disabled-background`, `--slotted-disabled-border`, `--slotted-disabled-foreground`, `--slotted-duration-short`, `--slotted-easing-enter`, `--slotted-focus-ring-color`, `--slotted-focus-ring-offset`, `--slotted-focus-ring-width`, `--slotted-radius-full`, `--slotted-radius-md`, `--slotted-radius-sm`, `--slotted-radius-xs`, `--slotted-shadow-xs`, `--slotted-space-1`, `--slotted-space-2`, `--slotted-space-4`, `--slotted-space-6`, `--slotted-surface`, `--slotted-surface-sunken`, `--slotted-tabs-actions-gap`, `--slotted-tabs-active-background`, `--slotted-tabs-active-marker-color`, `--slotted-tabs-color`, `--slotted-tabs-contained-background`, `--slotted-tabs-contained-selected-background`, `--slotted-tabs-dismiss-active-background`, `--slotted-tabs-dismiss-active-color`, `--slotted-tabs-dismiss-color`, `--slotted-tabs-dismiss-hover-background`, `--slotted-tabs-dismiss-hover-color`, `--slotted-tabs-fade-size`, `--slotted-tabs-gap`, `--slotted-tabs-hover-background`, `--slotted-tabs-hover-color`, `--slotted-tabs-hover-marker-color`, `--slotted-tabs-list-gap`, `--slotted-tabs-marker-color`, `--slotted-tabs-scroll-color`, `--slotted-tabs-selected-color`, `--slotted-tabs-track-color`, `--slotted-target-comfortable`, `--slotted-target-min`, `--slotted-text`, `--slotted-text-muted`, `--slotted-tone-accent-solid`, `--slotted-tone-accent-text`, `--slotted-tone-secondary-subtle-active`, `--slotted-tone-secondary-subtle-hover`
 
 ## Examples