zabi-components 8.1.0 → 9.0.0

package/dist/zabi-components-theme.css

@@ -31,14 +31,18 @@
 --zabi-base-900: #18181b;
 --zabi-base-925: #101013;
 --zabi-base-950: #09090b;
-/* Typography - Nunito Sans font family */
---font-family-sans: 'Nunito Sans', ui-sans-serif, system-ui, sans-serif;
+/* Typography - the platform UI face, no font is downloaded */
+--font-family-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
 /* Headings follow the body face until an app sets this to a display font
    * on :root. Applied to h1–h6 in the base layer below and by the Heading
    * component. */
 --font-family-heading: var(--font-family-sans);
-/* Code. The stack CodeBlock has always used, now a token. */
---font-family-mono: "Monaco", "Menlo", "Ubuntu Mono", monospace;
+/* A second face for a display line (Heading variant="display", `font-display`):
+   * a hero, a score, a big number. Follows the heading face until an app sets
+   * it, so a second typeface is one token and not a CSS rule. */
+--font-family-display: var(--font-family-heading);
+/* Code. CodeBlock reads it. */
+--font-family-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
 /* Tailwind's own names for the same three faces. Its `font-sans` and
    * `font-mono` utilities read --font-sans and --font-mono, which were its
    * system stacks: `class="font-sans"` on a heading left the brand face, and
@@ -48,6 +52,7 @@
 --font-sans: var(--font-family-sans);
 --font-mono: var(--font-family-mono);
 --font-heading: var(--font-family-heading);
+--font-display: var(--font-family-display);
 /* Font weights. These are the variables Tailwind's `font-normal`,
    * `font-medium`, `font-semibold` and `font-bold` read, so every component
    * weight follows an override here. `regular` is the name a brand uses for
@@ -81,17 +86,17 @@
 --color-brand-900: var(--zabi-brand-900);
 --color-brand-950: var(--zabi-brand-950);
 /* Citron Color Scale — physical ramp + semantic aliases (same mirror pattern as pine / base) */
---zabi-citron-50: #f6f7ef;
---zabi-citron-100: #edefdf;
---zabi-citron-200: #dcdfbf;
---zabi-citron-300: #c5ca95;
---zabi-citron-400: #aab063;
---zabi-citron-500: #8c9027;
---zabi-citron-600: #707400;
---zabi-citron-700: #5a5d00;
---zabi-citron-800: #454700;
---zabi-citron-900: #313200;
---zabi-citron-950: #202100;
+--zabi-citron-50: #f4f8ee;
+--zabi-citron-100: #e9f0de;
+--zabi-citron-200: #d4e2bd;
+--zabi-citron-300: #b9ce92;
+--zabi-citron-400: #99b55e;
+--zabi-citron-500: #769619;
+--zabi-citron-600: #5d7900;
+--zabi-citron-700: #4a6100;
+--zabi-citron-800: #384a00;
+--zabi-citron-900: #273500;
+--zabi-citron-950: #192300;
 --color-citron-50: var(--zabi-citron-50);
 --color-citron-100: var(--zabi-citron-100);
 --color-citron-200: var(--zabi-citron-200);
@@ -129,17 +134,17 @@
 --color-accent-900: var(--zabi-accent-900);
 --color-accent-950: var(--zabi-accent-950);
 /* Pine Color Scale — physical ramp + semantic aliases (mirror pattern matches --zabi-base-* / --color-base-*) */
---zabi-pine-50: #f0f8f5;
---zabi-pine-100: #e2f1eb;
---zabi-pine-200: #c5e4d7;
---zabi-pine-300: #9fd1bd;
---zabi-pine-400: #70ba9e;
---zabi-pine-500: #399c7a;
---zabi-pine-600: #00805e;
---zabi-pine-700: #00674a;
---zabi-pine-800: #004f37;
---zabi-pine-900: #003826;
---zabi-pine-950: #002518;
+--zabi-pine-50: #f0f9f3;
+--zabi-pine-100: #e1f2e8;
+--zabi-pine-200: #c3e5d0;
+--zabi-pine-300: #9cd3b2;
+--zabi-pine-400: #6cbb8e;
+--zabi-pine-500: #319e67;
+--zabi-pine-600: #00804b;
+--zabi-pine-700: #00683b;
+--zabi-pine-800: #00502b;
+--zabi-pine-900: #00391c;
+--zabi-pine-950: #002610;
 --color-pine-50: var(--zabi-pine-50);
 --color-pine-100: var(--zabi-pine-100);
 --color-pine-200: var(--zabi-pine-200);
@@ -175,17 +180,17 @@
 --color-iris-900: var(--zabi-iris-900);
 --color-iris-950: var(--zabi-iris-950);
 /* Warning Color Scale — physical ramp + semantic aliases (Tailwind amber) */
---zabi-warning-50: #fbf6ed;
---zabi-warning-100: #f7ecda;
---zabi-warning-200: #f1d9b6;
---zabi-warning-300: #e8bf87;
---zabi-warning-400: #db9e4c;
---zabi-warning-500: #c17b00;
---zabi-warning-600: #9e6000;
---zabi-warning-700: #824c00;
+--zabi-warning-50: #fdf5ec;
+--zabi-warning-100: #fbebda;
+--zabi-warning-200: #f6d7b4;
+--zabi-warning-300: #efbc84;
+--zabi-warning-400: #e49a44;
+--zabi-warning-500: #c67800;
+--zabi-warning-600: #a05f00;
+--zabi-warning-700: #834b00;
 --zabi-warning-800: #663800;
---zabi-warning-900: #4b2600;
---zabi-warning-950: #341800;
+--zabi-warning-900: #4b2700;
+--zabi-warning-950: #331800;
 --color-warning-50: var(--zabi-warning-50);
 --color-warning-100: var(--zabi-warning-100);
 --color-warning-200: var(--zabi-warning-200);
@@ -248,17 +253,33 @@
    * overlay: modals, sheets, menus, popovers, toasts. Light mode keeps white surfaces + shadows;
    * dark mode (see .dark) steps each level up in OKLCH lightness because shadows don't read on dark.
    *
-   * Light cannot go lighter than white, so its ladder runs the other way below
-   * the card: page (base-150) → elevated (base-100) → raised and overlay (white).
-   * Each grey sits a visible step from its neighbour; the page used to be
-   * base-100 with elevated at base-50, which left 1.04:1 between a card and the
-   * card nested in it. Enforced by scripts/check-surface-elevation.js.
+   * Light cannot go lighter than white, so the page is a near-white (base-50)
+   * and the card, white, is told apart from it by its 1px --color-border edge,
+   * not by lightness or a shadow. Nested surfaces step down from the card:
+   * elevated and inset (base-100). Enforced by scripts/check-surface-elevation.js:
+   * raised and overlay no darker than the page, elevated and inset at least 2
+   * points below raised, and the card edge at least 1.2:1 on the page and the card.
+   * (Until 8.1 the page was base-150 and the card carried a shadow.)
    * Keep this block BELOW the "Background Colors" marker: scripts/sync-theme-tokens.js regenerates
    * everything between the base-scale aliases and that marker. */
---color-surface-base: var(--color-base-150);
+--color-surface-base: var(--color-base-50);
 --color-surface-raised: #ffffff;
 --color-surface-elevated: var(--color-base-100);
 --color-surface-overlay: #ffffff;
+/* Chrome — the surface of bars and sidebars (AppBar, TopNavbar, BottomTabBar,
+   * the sidebars). One token so a theme can retint all of them at once. Equal to
+   * the page colour in both themes (D108): a bar is flush with the page at
+   * rest and takes the material over it once content scrolls under it. Point it
+   * at --color-surface-raised for a raised bar fill. */
+--color-surface-chrome: var(--color-surface-base);
+/* Bars (D124), read by .material-bar. The fill at rest, the hairline shown
+   * once content is under the bar (decorative, not a guarded edge: the same
+   * idea as the material rim), the fill of an on-brand AppBar, and the active
+   * tab's pill in the BottomTabBar. */
+--color-bar: var(--color-surface-chrome);
+--color-bar-border: color-mix(in srgb, var(--color-headline) 10%, transparent);
+--color-bar-brand: var(--color-action-primary);
+--color-tabbar-active: var(--color-nav-menu-active);
 /* Inset — a recessed area ON a raised surface (a well, a code sample, a stat
    * strip inside a card). It is the ramp step between the page and the raised
    * surface in both themes, so it always reads as cut into the card, never as
@@ -272,18 +293,31 @@
    * card still has an outline where its shadow is thinnest; a solid step in dark. */
 --color-border-overlay: rgba(9, 9, 11, 0.1);
 --color-background: var(--color-surface-base);
---color-background-secondary: var(--color-base-50);
+--color-background-secondary: var(--color-base-100);
+/* was base-50, which is now the page itself */
 --color-background-tertiary: var(--color-base-150);
 /* Page Colors */
---color-page: var(--color-base-150);
+--color-page: var(--color-surface-base);
 --color-page-secondary: var(--color-base-200);
 /* Card Colors — aliases of the surface levels (kept for compatibility) */
 --color-card: var(--color-surface-raised);
-/* Hover stays one step off the white card and is no longer the page colour
-   * (a hovered card used to turn exactly into the page). Active goes one further. */
---color-card-hover: var(--color-base-100);
---color-card-active: var(--color-base-150);
+/* Hover must not read as the page: the page is base-50 now, so base-100 was
+   * only ΔE 2.1 from it (the guard wants 2.5). Hover is base-150 (1.18:1 on the
+   * white card, ΔE 4.6 from the page), active one step further. */
+--color-card-hover: var(--color-base-150);
+--color-card-active: var(--color-base-200);
 --color-card-elevated: var(--color-surface-overlay);
+/* Card tint — the brand tint as a surface for content (Card tone="tint"): the
+   * subtle fill's own step (brand-100), as its own token so an app can move one
+   * and not the other. Headline, body, label, description, caption and link
+   * hold 4.5:1 on it, and the ring, the field edge and the outline Button's
+   * edge 3:1 (a form can sit on it): 15.30, 12.87, 9.02, 6.68, 5.29 and 5.84:1;
+   * ring 4.19, field edge 4.17. */
+--color-card-tint: var(--color-brand-100);
+/* Card variant="flat": today's flat fill (the card), opaque. Dark restates it as a translucent step. */
+--color-card-flat: var(--color-card);
+--color-card-flat-hover: var(--color-card-hover);
+--color-card-flat-active: var(--color-card-active);
 /* Surfaces — numbered aliases (kept for compatibility; prefer surface-base/raised/elevated/overlay) */
 --color-surface-1: var(--color-surface-raised);
 --color-surface-2: var(--color-surface-elevated);
@@ -295,10 +329,33 @@
 --color-control-track: var(--color-base-400);
 --color-control-track-hover: var(--color-base-450);
 --color-control-track-active: var(--color-base-500);
+/* Toggle track — the off switch. The shared control track above is a mid
+   * grey (base-400) that reads as disabled, so the switch has its own: a light
+   * tint, with its edge doing the 3:1 work (WCAG 1.4.11), which a fill this
+   * light cannot. The edge is the field edge, 4.63:1 on the page and 4.83:1 on
+   * a card. Slider and Progress keep the shared track. */
+--color-toggle-track: var(--color-base-200);
+--color-toggle-track-hover: var(--color-base-250);
+--color-toggle-track-active: var(--color-base-300);
+--color-toggle-track-border: var(--color-input-border);
+/* Toggle knob, by default 3:1 or more on every track fill it sits on (WCAG
+   * 1.4.11). Off, a dark knob on the light track: base-500 is 3.81:1 on the
+   * resting track, 3.53:1 hovered and 3.27:1 pressed. On, the label colour of
+   * the primary fill: 4.86:1 at rest, 6.76:1 hovered and 9.44:1 pressed. The consumer's
+   * own `--color-toggle-thumb` and `--color-toggle-thumb-checked` (declared
+   * nowhere) come first; see `.bg-toggle-thumb`. */
+--color-toggle-knob: var(--color-base-500);
+--color-toggle-knob-checked: var(--color-action-primary-text);
 /* Progress — the bar of Progress. The fill is the primary action, so it
    * follows a pinned primary; the track is the field fill it always was. */
 --color-progress-fill: var(--color-action-primary);
 --color-progress-track: var(--color-input);
+/* The edge of the track. The default track is the field fill (white on the
+   * white card), 1.00:1 on the card and 1.04:1 on the page, so its edge is the
+   * field edge, 3:1 on both (the guard holds it). An app whose own track
+   * already reaches 3:1 sets this to `transparent`; createTheme does that when
+   * it overrides the track. */
+--color-progress-track-border: var(--color-input-border);
 /* Interaction fills — surface-relative on purpose.
    * A hard-coded ramp step (e.g. base-100) can coincide exactly with the
    * surface it sits on, which is how ghost hover became invisible: in dark
@@ -320,19 +377,31 @@
    * border, not by greying the fill; dark keeps its fill step and leaves this
    * equal to the resting border. One step past the resting edge. */
 --color-input-border-hover: var(--color-base-550);
-/* One step off white. It was base-150, which is now the page itself, and was
-   * already greyer than the disabled fill. */
+/* One step off white, and the same step the card hover uses. */
 --color-input-hover: var(--color-base-100);
 /* Pressed, for a field that is pressed rather than typed in: the Select
    * trigger. It borrowed the hover step, 1.10:1 against the resting field,
-   * when every other pressed fill is 1.26:1 or more. base-200 is 1.27:1 on the
-   * white field and a visible step past hover (1.15:1); body text is 11.7:1
-   * on it. */
---color-input-active: var(--color-base-200);
+   * when every other pressed fill is 1.26:1 or more. Derived from the field,
+   * not a fixed ramp step: an app that sets the card (and so the field) to
+   * another colour through createTheme overrides would otherwise land its
+   * field on top of a fixed step (base-200 was 1.21:1 against a base-50 field
+   * of #f8faff, below the 1.25 the generator holds). 12% of the ink into the
+   * field is the smallest whole percent that keeps the three pairs: 1.25:1
+   * against the field (11% is the floor), body and placeholder 4.5:1 on it.
+   * Default theme: #e3e3e4 (was #e4e4e7); on a #f8faff field with the
+   * ink at 12%: 1.28:1 against it. */
+--color-input-active: color-mix(in srgb, var(--zabi-base-900) 12%, var(--color-input));
 --color-input-focus: var(--color-surface-raised);
-/* The page colour: a disabled field stops being a raised surface. Dark does
-   * the same (base-100 is the dark page). */
---color-input-disabled: var(--color-surface-base);
+/* The only grey field. It was the page colour; the page is now near white
+   * (1.04:1 against the white field), so it takes base-150, 1.18:1 on the field
+   * as before. Dark still uses the dark page (base-100). */
+--color-input-disabled: var(--color-base-150);
+/* Light fields are opaque already: inside a colour block they stay as they are. The dark
+   * theme restates these as opaque steps (see there). */
+--color-input-solid: var(--color-input);
+--color-input-solid-hover: var(--color-input-hover);
+--color-input-solid-focus: var(--color-input-focus);
+--color-input-solid-active: var(--color-input-active);
 /* Text Colors */
 --color-headline: var(--color-base-900);
 --color-body: var(--color-base-800);
@@ -382,6 +451,14 @@
    * elevated surface and 1.98:1 on the dark overlay. .dark pins this one step
    * lighter for that reason. */
 --color-control-border: var(--color-base-500);
+/* Segmented control thumb (tone neutral): the selected segment, a card-coloured
+   * piece on the tinted track. The edge is what identifies it (WCAG 1.4.11), as
+   * the 1.1:1 fill step alone would not. It is the control boundary, which dark
+   * lifts a step (base-600) because the input edge is only 2.4:1 on this track; it is held to 3:1 against the track
+   * over the page and over a card (scripts/contrast-pairs.js). */
+--color-segment-thumb: var(--color-surface-raised);
+--color-segment-thumb-text: var(--color-headline);
+--color-segment-thumb-border: var(--color-control-border);
 /* Focus Colors
    * brand-600, not brand-500: a focus indicator needs 3:1 against what is
    * around it, and brand-500 was 2.99:1 on the page. brand-600 is also the
@@ -426,8 +503,8 @@
    *   <family>-weak     step 700  pressed / emphasis
    *   <family>-medium   step 800  strongest fill
    *   <family>-strong   step 900  darkest
-   *   <family>-subtle   step 200  tinted fill (badges, alerts); .dark pins step 100
-   *   <family>-border   step 300  tinted edge; .dark pins step 200
+   *   <family>-subtle   step 100  tinted fill (badges, alerts); .dark restates step 100
+   *   <family>-border   step 200  tinted edge; .dark restates step 200
    *   <family>-text     step 700  text on a subtle fill or a page surface
    *
    * Warning, error and energetic previously sat at step 500 — the mirror's
@@ -440,29 +517,29 @@
 --color-success-weak: var(--color-pine-700);
 --color-success-medium: var(--color-pine-800);
 --color-success-strong: var(--color-pine-900);
---color-success-subtle: var(--color-pine-200);
---color-success-border: var(--color-pine-300);
+--color-success-subtle: var(--color-pine-100);
+--color-success-border: var(--color-pine-200);
 /* Warning Colors */
 --color-warning: var(--color-warning-600);
 --color-warning-weak: var(--color-warning-700);
 --color-warning-medium: var(--color-warning-800);
 --color-warning-strong: var(--color-warning-900);
---color-warning-subtle: var(--color-warning-200);
---color-warning-border: var(--color-warning-300);
+--color-warning-subtle: var(--color-warning-100);
+--color-warning-border: var(--color-warning-200);
 /* Error Colors */
 --color-error: var(--color-error-600);
 --color-error-weak: var(--color-error-700);
 --color-error-medium: var(--color-error-800);
 --color-error-strong: var(--color-error-900);
---color-error-subtle: var(--color-error-200);
---color-error-border: var(--color-error-300);
+--color-error-subtle: var(--color-error-100);
+--color-error-border: var(--color-error-200);
 /* Energetic Colors (Citron) */
 --color-energetic: var(--color-citron-600);
 --color-energetic-weak: var(--color-citron-700);
 --color-energetic-medium: var(--color-citron-800);
 --color-energetic-strong: var(--color-citron-900);
---color-energetic-subtle: var(--color-citron-200);
---color-energetic-border: var(--color-citron-300);
+--color-energetic-subtle: var(--color-citron-100);
+--color-energetic-border: var(--color-citron-200);
 /* Accent Colors — the second brand colour, on --zabi-accent-* (citron by
    * default). The same recipe as the primary action: fill at 600, hover 700,
    * active 800, so "more pressed" is "more contrast" in both themes; tint,
@@ -471,8 +548,8 @@
 --color-accent: var(--color-accent-600);
 --color-accent-hover: var(--color-accent-700);
 --color-accent-active: var(--color-accent-800);
---color-accent-subtle: var(--color-accent-200);
---color-accent-border: var(--color-accent-300);
+--color-accent-subtle: var(--color-accent-100);
+--color-accent-border: var(--color-accent-200);
 --color-accent-text: var(--color-accent-700);
 /* Label on a solid accent fill — see "on brand" below for the two knobs. */
 --zabi-on-accent: #ffffff;
@@ -488,20 +565,20 @@
 --color-neutral-weak: var(--color-base-600);
 --color-neutral-medium: var(--color-base-700);
 --color-neutral-strong: var(--color-base-900);
-/* One visible step past the page (base-150) and two past a card. It was
+/* Visibly past the page (base-50, 1.20:1) and the card (1.27:1). It was
    * base-100 once, which IS the dark page and made a neutral badge measure
-   * 1.00:1 and read as bare text. The border is a step darker than the fill,
-   * like every other family. */
---color-neutral-subtle: var(--color-base-250);
---color-neutral-border: var(--color-base-300);
+   * 1.00:1 and read as bare text; base-150 is only 1.13:1 on the page. The
+   * border is a step darker than the fill, like every other family. */
+--color-neutral-subtle: var(--color-base-200);
+--color-neutral-border: var(--color-base-250);
 /* Info Colors */
 --color-info: var(--color-iris-600);
 --color-info-weak: var(--color-iris-700);
 --color-info-medium: var(--color-iris-800);
 --color-info-strong: var(--color-iris-900);
 --color-info-active: var(--color-iris-400);
---color-info-subtle: var(--color-iris-200);
---color-info-border: var(--color-iris-300);
+--color-info-subtle: var(--color-iris-100);
+--color-info-border: var(--color-iris-200);
 /* Text alias */
 --color-info-text: var(--color-iris-700);
 /* ========================================
@@ -519,27 +596,32 @@
 --color-action-primary: var(--color-brand-600);
 --color-action-primary-hover: var(--color-brand-700);
 --color-action-primary-active: var(--color-brand-800);
---color-action-primary-subtle: var(--color-brand-200);
---color-action-primary-subtle-hover: var(--color-brand-300);
+--color-action-primary-subtle: var(--color-brand-100);
+--color-action-primary-subtle-hover: var(--color-brand-200);
+/* Edge of a subtle brand badge when `bordered`; the tint's own darker step. */
+--color-action-primary-border: var(--color-brand-200);
 /* Held down, on a control whose resting fill is the subtle one: a toggled-on
    * ghost IconButton. It used the hover step, which is 1.24:1 against the
    * resting fill and, with a mouse, is what the button already shows. Half a
    * step past hover is 1.42:1 against resting, and the icon (--color-link)
    * keeps 3.50:1 on it; a whole step would leave the icon at 3.01:1. */
---color-action-primary-subtle-active: color-mix(in srgb, var(--color-brand-400) 50%, var(--color-brand-300));
+--color-action-primary-subtle-active: color-mix(in srgb, var(--color-brand-300) 50%, var(--color-brand-200));
 /* "On brand" — the label on a primary fill.
    * White rather than brand-50: the ramp's lightest tint lands at exactly
    * 4.50:1 on brand-600 — passing, but with no margin. Pure white gives 4.86:1.
-   * Dark uses the dark end of the ramp on the light fill (7.21:1).
+   * Dark has the same fill (step 600, physical) and the same label: white on
+   * it is 4.76:1 on any ramp, since every ramp is on one lightness curve.
    *
    * A light brand (amber, yellow) cannot carry white text, so both values are
    * knobs an app sets once on :root, like the ramps:
    *   --zabi-on-brand        label in light mode
-   *   --zabi-on-brand-dark   label in dark mode
+   *   --zabi-on-brand-dark   label in dark mode: follows the light label (white),
+   *                          since the dark fill is the same step; set it to a dark
+   *                          one for a pale dark primary
    * --color-on-brand is the role, remapped by .dark; components keep using
    * --color-action-primary-text, which follows it. */
 --zabi-on-brand: #ffffff;
---zabi-on-brand-dark: var(--zabi-brand-950);
+--zabi-on-brand-dark: var(--zabi-on-brand);
 --color-on-brand: var(--zabi-on-brand);
 --color-action-primary-text: var(--color-on-brand);
 /* Secondary Actions - Used by bg-action-secondary utility class
@@ -552,6 +634,40 @@
 --color-action-secondary-subtle: var(--color-base-100);
 --color-action-secondary-subtle-hover: var(--color-base-200);
 --color-action-secondary-text: var(--color-headline);
+/* Tonal Actions - Used by bg-action-tonal utility class.
+   * A brand-tinted fill with the brand as its label: the quieter action beside
+   * a primary, and a chosen answer. It is the subtle tint (brand-100) and its
+   * own hover (brand-200) and pressed steps (halfway to brand-300, like the
+   * toggled-on ghost button; 1.30:1 against the resting fill). The label is
+   * brand-800, the lightest step that holds 4.5:1 on all three fills for any
+   * brand, not only the default: step 700 does on the default brand (5.84,
+   * 4.97, 4.48:1) but fails the pressed fill by 0.02, and by more on a
+   * saturated blue (4.39:1 for #0026EA). 800 gives 8.15, 6.94 and 6.25:1. */
+--color-action-tonal: var(--color-action-primary-subtle);
+--color-action-tonal-hover: var(--color-action-primary-subtle-hover);
+--color-action-tonal-active: color-mix(in srgb, var(--color-brand-300) 50%, var(--color-brand-200));
+--color-action-tonal-text: var(--color-brand-800);
+/* Chip - the filter and choice pill (Chip). At rest a quiet neutral fill that
+   * shows on the page and on a card without an edge: base-200 is 1.22:1 on the
+   * page and 1.27:1 on the card, hover base-300 and pressed base-350 (1.42 and
+   * 1.85 on the page). The label is the headline, 4.5:1 or more on all three
+   * (13.96, 11.99 and 9.18:1). */
+--color-chip: var(--color-base-200);
+--color-chip-hover: var(--color-base-300);
+--color-chip-active: var(--color-base-350);
+--color-chip-text: var(--color-headline);
+/* A selected chip is tonal, in both modes (never solid): its own tokens,
+   * pointing at the tonal role, so an app that themes tonal gets matching chips
+   * and one that wants another selected look sets these. */
+--color-chip-selected: var(--color-action-tonal);
+--color-chip-selected-hover: var(--color-action-tonal-hover);
+--color-chip-selected-active: var(--color-action-tonal-active);
+--color-chip-selected-text: var(--color-action-tonal-text);
+/* Outline Actions - the edge of an outline Button. The border role was the
+   * card edge, 1.25:1 on the page: a label in a ghost box. This is the field
+   * edge (base-500), already held to 3:1 on the field, the page and a card. */
+--color-action-outline-border: var(--color-input-border);
+--color-action-outline-border-hover: var(--color-input-border-hover);
 /* Disabled Actions - shared by every variant.
    * Disabled must be the QUIETEST state, never a brighter colour than the
    * enabled secondary. It used to be brand-500 plus opacity-50, which made a
@@ -576,13 +692,128 @@
 --color-action-danger-text: var(--color-error-50);
 /* Shadow Colors
    * Light elevation is carried by the shadow, so it is the ramp's own ink
-   * (base-900) at a strength that still reads on the top and side edges. */
+   * (base-900). Every step is two layers: a tight contact shadow
+   * (--shadow-opacity-contact) that grounds the edge and a wider, softer
+   * ambient one (--shadow-opacity) that carries the distance. Until 8.1 both
+   * layers shared one flat 14%; the 8.1 values are in CHANGELOG.md. */
 --shadow-color: 24 24 27;
---shadow-opacity: 0.14;
---shadow-sm: 0 1px 3px 0 rgb(var(--shadow-color) / var(--shadow-opacity)), 0 1px 2px -1px rgb(var(--shadow-color) / var(--shadow-opacity));
---shadow-md: 0 4px 6px -1px rgb(var(--shadow-color) / var(--shadow-opacity)), 0 2px 4px -2px rgb(var(--shadow-color) / var(--shadow-opacity));
---shadow-lg: 0 10px 15px -3px rgb(var(--shadow-color) / var(--shadow-opacity)), 0 4px 6px -4px rgb(var(--shadow-color) / var(--shadow-opacity));
---shadow-xl: 0 20px 25px -5px rgb(var(--shadow-color) / var(--shadow-opacity)), 0 8px 10px -6px rgb(var(--shadow-color) / var(--shadow-opacity));
+--shadow-opacity: 0.1;
+--shadow-opacity-contact: 0.06;
+--shadow-sm: 0 1px 2px 0 rgb(var(--shadow-color) / var(--shadow-opacity-contact)), 0 2px 6px -1px rgb(var(--shadow-color) / var(--shadow-opacity));
+--shadow-md: 0 1px 3px 0 rgb(var(--shadow-color) / var(--shadow-opacity-contact)), 0 6px 14px -2px rgb(var(--shadow-color) / var(--shadow-opacity));
+--shadow-lg: 0 1px 2px 0 rgb(var(--shadow-color) / var(--shadow-opacity-contact)), 0 10px 30px 0 rgb(var(--shadow-color) / var(--shadow-opacity));
+--shadow-xl: 0 2px 4px 0 rgb(var(--shadow-color) / var(--shadow-opacity-contact)), 0 20px 50px -8px rgb(var(--shadow-color) / var(--shadow-opacity));
+/* What a material (glass) casts: the lg step. Its own name so a theme can
+   * retune glass without moving every floating surface. */
+--shadow-material: 0 1px 2px 0 rgb(var(--shadow-color) / var(--shadow-opacity-contact)), 0 10px 30px 0 rgb(var(--shadow-color) / var(--shadow-opacity));
+/* Motion
+   * Four durations and three curves. Tailwind's default transition reads
+   * --duration-base and --ease-standard, so every `transition-*` class that
+   * sets no duration of its own follows them (150ms, as before; the curve is
+   * new). `ease-standard`, `ease-out` and `ease-spring` are utilities;
+   * durations are used as `duration-(--duration-moderate)`. --ease-out is
+   * Tailwind's own name and value. --ease-spring is a lightly damped spring
+   * (one overshoot of about 5%, settled by the end): the cubic-bezier is the
+   * fallback, and the @supports block after @theme upgrades it to linear().
+   * prefers-reduced-motion re-points all of them (see @motion-reduced). */
+--duration-fast: 100ms;
+--duration-base: 150ms;
+--duration-moderate: 200ms;
+--duration-slow: 300ms;
+--ease-standard: cubic-bezier(0.2, 0, 0, 1);
+--ease-out: cubic-bezier(0, 0, 0.2, 1);
+--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
+--default-transition-duration: var(--duration-base);
+--default-transition-timing-function: var(--ease-standard);
+/* Materials — the frosted layer for what floats over content (bars, sheets,
+   * menus). Used through .material-thin|regular|thick (below), never a raw
+   * backdrop-blur. A material is a surface at partial alpha, so it is judged
+   * over the worst backdrop of the mode, not alone: the alpha floors are
+   * enforced by scripts/check-contrast.js (see scripts/contrast-pairs.js,
+   * MATERIALS) and by createTheme for an app's own theme. Each alpha is the
+   * smallest whole 2% that passes every pair its level carries, plus a little
+   * margin (floors against the page-colour chrome: thin 50 / 30, regular 82 / 47,
+   * thick 84 / 68, light / dark; light thick has 4 points because a tinted neutral (neutralChroma 0.08) needs 87; dark is judged on the dimmed backdrop, below):
+   *   thin    headline                 (a control on a bar: an icon, a short label;
+   *                                    its focus ring is drawn outside it)
+   *   regular + body, label, focus ring (bars, the tab bar, a floating sidebar)
+   *   thick   + description, caption   (sheets, menus, modals, toasts, tooltips)
+   * Dark's worst backdrop is near-white, which its surfaces are close to. The
+   * dark filter therefore also dims the backdrop (--material-backdrop-brightness,
+   * 0.6: brightness() multiplies the sRGB channels), so the brightest thing
+   * that can be behind dark glass is near-white times 0.6, and the guard measures
+   * that. It is true to the rendering because the dimming and the translucent
+   * fill are switched together: every fallback below drops the filter and makes
+   * the fill opaque. Light is brightness(1), an identity.
+   * The fallbacks (reduced transparency, more contrast, forced colors, no
+   * backdrop-filter, data-materials="opaque") are below the .dark rule. */
+--material-alpha-thin: 58%;
+--material-alpha-regular: 84%;
+--material-alpha-thick: 88%;
+--color-material-thin: color-mix(in srgb, var(--color-surface-chrome) var(--material-alpha-thin), transparent);
+--color-material-regular: color-mix(in srgb, var(--color-surface-chrome) var(--material-alpha-regular), transparent);
+--color-material-thick: color-mix(in srgb, var(--color-surface-overlay) var(--material-alpha-thick), transparent);
+--material-blur-thin: 16px;
+--material-blur-regular: 24px;
+--material-blur-thick: 32px;
+--material-saturate: 180%;
+/* What the filter does to the backdrop's brightness (a number): 1 in light,
+   * where it is an identity; below 1 in dark, which dims what shows through the
+   * glass. The alpha floors are measured on the dimmed backdrop. */
+--material-backdrop-brightness: 1;
+--material-filter-thin: blur(var(--material-blur-thin)) saturate(var(--material-saturate)) brightness(var(--material-backdrop-brightness));
+--material-filter-regular: blur(var(--material-blur-regular)) saturate(var(--material-saturate)) brightness(var(--material-backdrop-brightness));
+--material-filter-thick: blur(var(--material-blur-thick)) saturate(var(--material-saturate)) brightness(var(--material-backdrop-brightness));
+/* The light top edge and the 1px outline, from the neutral ramp so a
+   * neutral override tints them. */
+--color-material-highlight: color-mix(in srgb, var(--zabi-base-50) 60%, transparent);
+--color-material-rim: color-mix(in srgb, var(--zabi-base-900) 9%, transparent);
+/* Gradients (D99). Contrast is never measured against a gradient: each one
+   * is built from named stops, and scripts/contrast-pairs.js holds the worst
+   * stop of each to the pairs that sit on it. The strengths are the strongest
+   * whole 5% (canvas) and whole percent (control veils) at which every pair
+   * passes, capped at the prototype (canvas 85 / 45, top veil 22, bottom 14).
+   * Light canvas 55 (caption and link on the wash), dark canvas 25 (field edge
+   * on the wash).
+   *
+   * Control veils, light: darken-only. The top is 0%, so the fill at the top
+   * is the control's own colour: the label keeps its full contrast and an
+   * app's brand colour is not altered. Lightening the top of the brand-600
+   * fill took the white label (about 4.6:1) under 4.5:1, which is why it was
+   * 4% before. The bottom is 14% of base-950, the strongest whole percent that
+   * passes every pair (the label only gains from a darker fill); it is the
+   * depth. Dark is the same darken-only veil (the fill is a mid step with a white
+   * label, as in light); only the accent, whose dark fill is light under a dark
+   * label, keeps the lighter top, 22 / 6, in its own strengths.
+   *
+   * Canvas: two soft radial washes from brand 300 and accent 300 for glass to
+   * show something. A background-image only; .bg-canvas adds the page colour.
+   * The library does not paint it on body. */
+--gradient-canvas-strength: 55%;
+--color-canvas-wash-brand: color-mix(in srgb, var(--color-brand-300) var(--gradient-canvas-strength), transparent);
+--color-canvas-wash-accent: color-mix(in srgb, var(--color-accent-300) var(--gradient-canvas-strength), transparent);
+--gradient-canvas:
+    radial-gradient(90% 46% at 8% 0%, var(--color-canvas-wash-brand), transparent 70%),
+    radial-gradient(80% 40% at 100% 4%, var(--color-canvas-wash-accent), transparent 70%);
+/* Solid controls: a veil laid over the control's own background-color, so
+   * hover and pressed fills keep working. The start and end tokens are the veil
+   * colours (translucent neutral, from the ramp so a neutral override tints
+   * them): a light one on top, a slight dark one at the bottom. It serves the
+   * three solid fills: primary, accent and danger (the veil is neutral, so
+   * `bg-control-gradient` is the danger one too). The accent has strengths of
+   * its own, which follow the shared ones, so an app whose accent carries a
+   * dark label can differ (createTheme does that when the pairs need it). */
+--gradient-control-top-strength: 0%;
+--gradient-control-bottom-strength: 14%;
+--gradient-control-accent-top-strength: var(--gradient-control-top-strength);
+--gradient-control-accent-bottom-strength: var(--gradient-control-bottom-strength);
+--color-control-gradient-start: color-mix(in srgb, var(--zabi-base-50) var(--gradient-control-top-strength), transparent);
+--color-control-gradient-end: color-mix(in srgb, var(--zabi-base-950) var(--gradient-control-bottom-strength), transparent);
+--gradient-control: linear-gradient(to bottom, var(--color-control-gradient-start), var(--color-control-gradient-end));
+--color-control-gradient-accent-start: color-mix(in srgb, var(--zabi-base-50) var(--gradient-control-accent-top-strength), transparent);
+--color-control-gradient-accent-end: color-mix(in srgb, var(--zabi-base-950) var(--gradient-control-accent-bottom-strength), transparent);
+--gradient-control-accent: linear-gradient(to bottom, var(--color-control-gradient-accent-start), var(--color-control-gradient-accent-end));
+--shadow-control-highlight: inset 0 1px 0 color-mix(in srgb, var(--zabi-base-50) 40%, transparent);
 /* Spacing */
 --spacing-xs: 0.25rem;
 --spacing-sm: 0.5rem;
@@ -693,6 +924,248 @@ body {
   color-scheme: light;
 }
 
+@media (prefers-reduced-transparency: reduce), (prefers-contrast: more), (forced-colors: active) {
+  :root:root {
+    --color-material-thin: var(--color-surface-chrome);
+    --color-material-regular: var(--color-surface-chrome);
+    --color-material-thick: var(--color-surface-overlay);
+    --material-filter-thin: none;
+    --material-filter-regular: none;
+    --material-filter-thick: none;
+  }
+}
+
+@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
+  :root:root {
+    --color-material-thin: var(--color-surface-chrome);
+    --color-material-regular: var(--color-surface-chrome);
+    --color-material-thick: var(--color-surface-overlay);
+    --material-filter-thin: none;
+    --material-filter-regular: none;
+    --material-filter-thick: none;
+  }
+}
+
+[data-materials="opaque"][data-materials="opaque"] {
+  --color-material-thin: var(--color-surface-chrome);
+  --color-material-regular: var(--color-surface-chrome);
+  --color-material-thick: var(--color-surface-overlay);
+  --material-filter-thin: none;
+  --material-filter-regular: none;
+  --material-filter-thick: none;
+}
+
+@supports (transition-timing-function: linear(0, 1)) {
+  :root {
+    --ease-spring: linear(0, 0.14, 0.409, 0.668, 0.859, 0.974, 1.029, 1.046, 1.041, 1.03, 1.017, 1.008, 1.002, 0.999, 0.998, 0.998, 1);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :root:root {
+    --duration-fast: 0s;
+    --duration-base: 0s;
+    --duration-moderate: 0s;
+    --duration-slow: 0s;
+    --ease-spring: var(--ease-standard);
+  }
+}
+
+.material-thin,
+.material-regular,
+.material-thick {
+  --tw-shadow:
+    inset 0 1px 0 var(--color-material-highlight),
+    inset 0 0 0 1px var(--color-material-rim),
+    var(--shadow-material);
+  box-shadow:
+    var(--tw-inset-shadow, 0 0 #0000),
+    var(--tw-inset-ring-shadow, 0 0 #0000),
+    var(--tw-ring-offset-shadow, 0 0 #0000),
+    var(--tw-ring-shadow, 0 0 #0000),
+    var(--tw-shadow);
+}
+
+.material-thin {
+  background-color: var(--color-material-thin);
+  -webkit-backdrop-filter: var(--material-filter-thin);
+  backdrop-filter: var(--material-filter-thin);
+}
+
+.material-regular {
+  background-color: var(--color-material-regular);
+  -webkit-backdrop-filter: var(--material-filter-regular);
+  backdrop-filter: var(--material-filter-regular);
+}
+
+.material-thick {
+  background-color: var(--color-material-thick);
+  -webkit-backdrop-filter: var(--material-filter-thick);
+  backdrop-filter: var(--material-filter-thick);
+}
+
+@media (forced-colors: active) {
+  .material-thin,
+  .material-regular,
+  .material-thick {
+    outline: 1px solid CanvasText;
+    outline-offset: -1px;
+  }
+}
+
+.material-layer-thick {
+  isolation: isolate;
+  background-color: transparent;
+  --tw-shadow: var(--shadow-material);
+  box-shadow:
+    var(--tw-inset-shadow, 0 0 #0000),
+    var(--tw-inset-ring-shadow, 0 0 #0000),
+    var(--tw-ring-offset-shadow, 0 0 #0000),
+    var(--tw-ring-shadow, 0 0 #0000),
+    var(--tw-shadow);
+}
+
+.material-layer-thick::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  border-radius: inherit;
+  pointer-events: none;
+  background-color: var(--color-material-thick);
+  -webkit-backdrop-filter: var(--material-filter-thick);
+  backdrop-filter: var(--material-filter-thick);
+  box-shadow:
+    inset 0 1px 0 var(--color-material-highlight),
+    inset 0 0 0 1px var(--color-material-rim);
+}
+
+@media (forced-colors: active) {
+  .material-layer-thick {
+    outline: 1px solid CanvasText;
+    outline-offset: -1px;
+  }
+}
+
+.material-layer-regular {
+  isolation: isolate;
+  background-color: transparent;
+  --tw-shadow: var(--shadow-material);
+  box-shadow:
+    var(--tw-inset-shadow, 0 0 #0000),
+    var(--tw-inset-ring-shadow, 0 0 #0000),
+    var(--tw-ring-offset-shadow, 0 0 #0000),
+    var(--tw-ring-shadow, 0 0 #0000),
+    var(--tw-shadow);
+}
+
+.material-layer-regular::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  border-radius: inherit;
+  pointer-events: none;
+  background-color: var(--color-material-regular);
+  -webkit-backdrop-filter: var(--material-filter-regular);
+  backdrop-filter: var(--material-filter-regular);
+  box-shadow:
+    inset 0 1px 0 var(--color-material-highlight),
+    inset 0 0 0 1px var(--color-material-rim);
+}
+
+@media (forced-colors: active) {
+  .material-layer-regular {
+    outline: 1px solid CanvasText;
+    outline-offset: -1px;
+  }
+}
+
+.material-bar {
+  isolation: isolate;
+  background-color: transparent;
+}
+
+.material-bar::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  box-sizing: border-box;
+  pointer-events: none;
+  background-color: var(--color-bar);
+  border: 0 solid transparent;
+  border-bottom-width: 1px;
+  transition-property: background-color, border-color;
+  transition-duration: var(--duration-moderate);
+  transition-timing-function: var(--ease-standard);
+}
+
+.material-bar[data-bar-edge="bottom"]::before {
+  border-bottom-width: 0;
+  border-top-width: 1px;
+}
+
+.material-bar[data-scrolled-under="true"]::before {
+  background-color: var(--color-material-regular);
+  -webkit-backdrop-filter: var(--material-filter-regular);
+  backdrop-filter: var(--material-filter-regular);
+  border-color: var(--color-bar-border);
+}
+
+@media (forced-colors: active) {
+  .material-bar[data-scrolled-under="true"]::before {
+    border-color: CanvasText;
+  }
+}
+
+.bg-canvas {
+  background-color: var(--color-surface-base);
+  background-image: var(--gradient-canvas);
+  background-repeat: no-repeat;
+}
+
+.bg-control-gradient,
+.bg-control-gradient-accent {
+  --tw-inset-shadow: var(--shadow-control-highlight);
+  box-shadow:
+    var(--tw-inset-shadow, 0 0 #0000),
+    var(--tw-inset-ring-shadow, 0 0 #0000),
+    var(--tw-ring-offset-shadow, 0 0 #0000),
+    var(--tw-ring-shadow, 0 0 #0000),
+    var(--tw-shadow, 0 0 #0000);
+}
+
+.bg-control-gradient {
+  background-image: var(--gradient-control);
+}
+
+.bg-control-gradient-accent {
+  background-image: var(--gradient-control-accent);
+}
+
+.ring-toggle-track {
+  --tw-inset-ring-shadow: inset 0 0 0 1px var(--color-toggle-track-border);
+  box-shadow:
+    var(--tw-inset-shadow, 0 0 #0000),
+    var(--tw-inset-ring-shadow, 0 0 #0000),
+    var(--tw-ring-offset-shadow, 0 0 #0000),
+    var(--tw-ring-shadow, 0 0 #0000),
+    var(--tw-shadow, 0 0 #0000);
+}
+
+.rounded-button {
+  border-radius: var(--zabi-button-radius, var(--radius-control));
+}
+
+.font-button {
+  font-weight: var(--zabi-button-font-weight, 500);
+}
+
+.font-button-strong {
+  font-weight: var(--zabi-button-font-weight, 600);
+}
+
 .bg-base-50 {
   background-color: var(--color-base-50);
 }
@@ -867,10 +1340,26 @@ body {
   background-color: var(--color-card);
 }
 
+.bg-toggle-thumb {
+  background-color: var(--color-toggle-thumb, var(--color-toggle-knob));
+}
+
+.bg-toggle-thumb-checked {
+  background-color: var(--color-toggle-thumb-checked, var(--color-toggle-thumb, var(--color-toggle-knob-checked)));
+}
+
+.bg-card-flat {
+  background-color: var(--color-card-flat);
+}
+
 @media (hover: hover) {
 .hover\:bg-card-hover:hover {
   background-color: var(--color-card-hover);
 }
+
+.hover\:bg-card-flat-hover:hover {
+  background-color: var(--color-card-flat-hover);
+}
 }
 
 .bg-surface-1 {
@@ -923,6 +1412,10 @@ body {
   background-color: var(--color-card-active);
 }
 
+.active\:bg-card-flat-active:active {
+  background-color: var(--color-card-flat-active);
+}
+
 .disabled\:bg-input-disabled:disabled {
   background-color: var(--color-input-disabled);
 }
@@ -1121,6 +1614,18 @@ body {
   background-color: var(--color-nav-menu-item-active);
 }
 
+.bg-tabbar-active {
+  background-color: var(--color-tabbar-active);
+}
+
+.bg-bar-brand {
+  background-color: var(--color-bar-brand);
+}
+
+.border-bar {
+  border-color: var(--color-bar-border);
+}
+
 .text-success {
   color: var(--color-success-text);
 }
@@ -1275,7 +1780,7 @@ body {
   .focus-ring--muted {
     --zabi-focus-ring-color: var(--color-focus-ring-muted, var(--color-base-500));
   }
-  :where(:has(> .on-brand, > .on-accent):not(.on-brand, .on-accent, .on-brand *, .on-accent *)) {
+  :where(:has(> .on-brand, > .on-accent, > .on-fill):not(.on-brand, .on-accent, .on-fill, .on-brand *, .on-accent *, .on-fill *)) {
     --zabi-theme-headline: var(--color-headline);
     --zabi-theme-body: var(--color-body);
     --zabi-theme-label: var(--color-label);
@@ -1287,6 +1792,8 @@ body {
     --zabi-theme-border-medium: var(--color-border-medium);
     --zabi-theme-border-strong: var(--color-border-strong);
     --zabi-theme-control-border: var(--color-control-border);
+    --zabi-theme-action-outline-border: var(--color-action-outline-border);
+    --zabi-theme-action-outline-border-hover: var(--color-action-outline-border-hover);
     --zabi-theme-focus-ring: var(--color-focus-ring);
     --zabi-theme-focus-ring-muted: var(--color-focus-ring-muted);
     --zabi-theme-nav-menu-focus: var(--color-nav-menu-focus);
@@ -1312,6 +1819,8 @@ body {
     --color-border-medium: var(--color-on-brand);
     --color-border-strong: var(--color-on-brand);
     --color-control-border: var(--color-on-brand);
+    --color-action-outline-border: var(--color-on-brand);
+    --color-action-outline-border-hover: var(--color-on-brand);
   }
 
   .on-accent {
@@ -1332,15 +1841,98 @@ body {
     --color-border-medium: var(--color-on-accent);
     --color-border-strong: var(--color-on-accent);
     --color-control-border: var(--color-on-accent);
+    --color-action-outline-border: var(--color-on-accent);
+    --color-action-outline-border-hover: var(--color-on-accent);
   }
-  :where(.on-brand, .on-accent)
+  .on-fill {
+    color: var(--zabi-on-fill, currentColor);
+    --color-focus-ring: var(--zabi-on-fill, currentColor);
+    --color-focus-ring-muted: var(--zabi-on-fill, currentColor);
+    --color-nav-menu-focus: var(--zabi-on-fill, currentColor);
+    --color-focus-ring-offset: transparent;
+    --color-focus-ring-danger: var(--zabi-on-fill, currentColor);
+    --color-headline: var(--zabi-on-fill, currentColor);
+    --color-body: var(--zabi-on-fill, currentColor);
+    --color-label: var(--zabi-on-fill, currentColor);
+    --color-description: var(--zabi-on-fill, currentColor);
+    --color-caption: var(--zabi-on-fill, currentColor);
+    --color-link: var(--zabi-on-fill, currentColor);
+    --color-link-hover: var(--zabi-on-fill, currentColor);
+    --color-border: var(--zabi-on-fill, currentColor);
+    --color-border-medium: var(--zabi-on-fill, currentColor);
+    --color-border-strong: var(--zabi-on-fill, currentColor);
+    --color-control-border: var(--zabi-on-fill, currentColor);
+    --color-action-outline-border: var(--zabi-on-fill, currentColor);
+    --color-action-outline-border-hover: var(--zabi-on-fill, currentColor);
+  }
+  :where(.on-brand, .on-accent, .on-fill) {
+    --zabi-inv-primary: var(--color-action-primary);
+    --zabi-inv-primary-hover: var(--color-action-primary-hover);
+    --zabi-inv-primary-active: var(--color-action-primary-active);
+    --zabi-inv-primary-text: var(--color-action-primary-text);
+    --zabi-inv-accent: var(--color-accent);
+    --zabi-inv-accent-hover: var(--color-accent-hover);
+    --zabi-inv-accent-active: var(--color-accent-active);
+    --zabi-inv-accent-text: var(--color-on-accent);
+    --zabi-inv-secondary: var(--color-action-secondary);
+    --zabi-inv-secondary-hover: var(--color-action-secondary-hover);
+    --zabi-inv-secondary-active: var(--color-action-secondary-active);
+  }
+  :where(.on-brand) {
+    --zabi-inv-secondary: rgba(9, 9, 11, 0.1);
+    --zabi-inv-secondary-hover: rgba(9, 9, 11, 0.15);
+    --zabi-inv-secondary-active: rgba(9, 9, 11, 0.2);
+  }
+  :where(.on-brand) {
+    --zabi-inv-primary: var(--color-on-brand);
+    --zabi-inv-primary-hover: color-mix(in srgb, var(--color-on-brand) 88%, var(--color-action-primary));
+    --zabi-inv-primary-active: color-mix(in srgb, var(--color-on-brand) 76%, var(--color-action-primary));
+    --zabi-inv-primary-text: var(--color-action-primary);
+    --zabi-inv-star: var(--color-on-brand);
+  }
+  :where(.on-accent) {
+    --zabi-inv-accent: var(--color-on-accent);
+    --zabi-inv-accent-hover: color-mix(in srgb, var(--color-on-accent) 88%, var(--color-accent));
+    --zabi-inv-accent-active: color-mix(in srgb, var(--color-on-accent) 76%, var(--color-accent));
+    --zabi-inv-accent-text: var(--color-accent);
+    --zabi-inv-star: var(--color-on-accent);
+  }
+  :where(.on-fill) {
+    --zabi-inv-primary: var(--zabi-on-fill, currentColor);
+    --zabi-inv-primary-hover: color-mix(in srgb, var(--zabi-on-fill, currentColor) 88%, var(--zabi-fill, var(--color-card)));
+    --zabi-inv-primary-active: color-mix(in srgb, var(--zabi-on-fill, currentColor) 76%, var(--zabi-fill, var(--color-card)));
+    --zabi-inv-primary-text: var(--zabi-fill, var(--color-card));
+    --zabi-inv-star: var(--zabi-on-fill, currentColor);
+  }
+  :where(.bg-action-primary:not(.on-brand, .on-accent, .on-fill)):where(.on-brand *, .on-accent *, .on-fill *) {
+    --color-action-primary: var(--zabi-inv-primary);
+    --color-action-primary-hover: var(--zabi-inv-primary-hover);
+    --color-action-primary-active: var(--zabi-inv-primary-active);
+    --color-action-primary-text: var(--zabi-inv-primary-text);
+  }
+  :where(.bg-action-secondary, .bg-action-secondary-active):where(.on-brand *, .on-accent *, .on-fill *) {
+    --color-action-secondary: var(--zabi-inv-secondary);
+    --color-action-secondary-hover: var(--zabi-inv-secondary-hover);
+    --color-action-secondary-active: var(--zabi-inv-secondary-active);
+  }
+  :where(.bg-accent:not(.on-brand, .on-accent, .on-fill)):where(.on-brand *, .on-accent *, .on-fill *) {
+    --color-accent: var(--zabi-inv-accent);
+    --color-accent-hover: var(--zabi-inv-accent-hover);
+    --color-accent-active: var(--zabi-inv-accent-active);
+    --color-on-accent: var(--zabi-inv-accent-text);
+  }
+  :where(.rating):where(.on-brand *, .on-accent *, .on-fill *) {
+    --zabi-rating-on: var(--zabi-inv-star);
+  }
+  :where(.on-brand, .on-accent, .on-fill)
     :where(
-      .bg-card, .bg-card-elevated, .bg-background, .bg-surface-base,
+      .bg-card, .bg-card-flat, .bg-card-elevated, .bg-background, .bg-surface-base,
       .bg-surface-raised, .bg-surface-elevated, .bg-surface-overlay, .bg-surface-overlay-hover,
-      .bg-surface-inset, .bg-surface-1, .bg-surface-2, .bg-surface-3,
+      .bg-surface-chrome, .bg-surface-inset, .bg-surface-1, .bg-surface-2, .bg-surface-3,
       .bg-surface-4, .bg-input, .bg-input-disabled, .bg-accent-subtle,
-      .bg-action-danger-subtle, .bg-action-primary-subtle, .bg-energetic-subtle, .bg-error-subtle,
-      .bg-info-subtle, .bg-neutral-subtle, .bg-success-subtle, .bg-warning-subtle,
+      .bg-action-danger-subtle, .bg-action-primary-subtle, .bg-action-tonal, .bg-card-tint, .bg-chip, .bg-chip-selected,
+      .bg-energetic-subtle, .bg-error-subtle,
+      .bg-info-subtle, .bg-neutral-subtle, .bg-badge-neutral, .bg-toggle-thumb, .bg-toggle-thumb-checked, .bg-success-subtle, .bg-warning-subtle,
       .bg-nav-menu-active, .bg-action-disabled, .list-group, .on-surface
     ) {
     color: var(--zabi-theme-body);
@@ -1355,15 +1947,41 @@ body {
     --color-border-medium: var(--zabi-theme-border-medium);
     --color-border-strong: var(--zabi-theme-border-strong);
     --color-control-border: var(--zabi-theme-control-border);
+    --color-action-outline-border: var(--zabi-theme-action-outline-border);
+    --color-action-outline-border-hover: var(--zabi-theme-action-outline-border-hover);
+    --zabi-inv-primary: var(--color-action-primary);
+    --zabi-inv-primary-hover: var(--color-action-primary-hover);
+    --zabi-inv-primary-active: var(--color-action-primary-active);
+    --zabi-inv-primary-text: var(--color-action-primary-text);
+    --zabi-inv-accent: var(--color-accent);
+    --zabi-inv-accent-hover: var(--color-accent-hover);
+    --zabi-inv-accent-active: var(--color-accent-active);
+    --zabi-inv-accent-text: var(--color-on-accent);
+    --zabi-inv-secondary: var(--color-action-secondary);
+    --zabi-inv-secondary-hover: var(--color-action-secondary-hover);
+    --zabi-inv-secondary-active: var(--color-action-secondary-active);
+    --zabi-inv-star: initial;
+  }
+  :where(.on-brand, .on-accent, .on-fill) :where(.bg-card-flat) {
+    --color-card-flat: var(--color-card);
+    --color-card-flat-hover: var(--color-card-hover);
+    --color-card-flat-active: var(--color-card-active);
+  }
+  :where(.on-brand, .on-accent, .on-fill) :where(.bg-input) {
+    --color-input: var(--color-input-solid);
+    --color-input-hover: var(--color-input-solid-hover);
+    --color-input-focus: var(--color-input-solid-focus);
+    --color-input-active: var(--color-input-solid-active);
   }
-  :where(.on-brand, .on-accent)
+  :where(.on-brand, .on-accent, .on-fill)
     :where(
-      .bg-card, .bg-card-elevated, .bg-background, .bg-surface-base,
+      .bg-card, .bg-card-flat, .bg-card-elevated, .bg-background, .bg-surface-base,
       .bg-surface-raised, .bg-surface-elevated, .bg-surface-overlay, .bg-surface-overlay-hover,
-      .bg-surface-inset, .bg-surface-1, .bg-surface-2, .bg-surface-3,
+      .bg-surface-chrome, .bg-surface-inset, .bg-surface-1, .bg-surface-2, .bg-surface-3,
       .bg-surface-4, .bg-input, .bg-input-disabled, .bg-accent-subtle,
-      .bg-action-danger-subtle, .bg-action-primary-subtle, .bg-energetic-subtle, .bg-error-subtle,
-      .bg-info-subtle, .bg-neutral-subtle, .bg-success-subtle, .bg-warning-subtle,
+      .bg-action-danger-subtle, .bg-action-primary-subtle, .bg-action-tonal, .bg-card-tint, .bg-chip, .bg-chip-selected,
+      .bg-energetic-subtle, .bg-error-subtle,
+      .bg-info-subtle, .bg-neutral-subtle, .bg-badge-neutral, .bg-toggle-thumb, .bg-toggle-thumb-checked, .bg-success-subtle, .bg-warning-subtle,
       .bg-nav-menu-active, .bg-action-disabled, .list-group, .on-surface
     )
     > :where(*) {
@@ -1373,6 +1991,24 @@ body {
     --color-focus-ring-offset: var(--zabi-theme-focus-ring-offset);
     --color-focus-ring-danger: var(--zabi-theme-focus-ring-danger);
   }
+  .list-dividers > li + li,
+  .list-group > li + li {
+    position: relative;
+  }
+  .list-dividers > li + li::before,
+  .list-group > li + li::before {
+    content: "";
+    position: absolute;
+    inset-inline: 1rem;
+    top: calc(-0.125rem - 0.5px);
+    height: 1px;
+    background-color: var(--zabi-list-divider-color, var(--color-border));
+    pointer-events: none;
+  }
+  :is(.list-dividers, .list-group) > li:has(> [data-selected="true"])::before,
+  :is(.list-dividers, .list-group) > li:has(> [data-selected="true"]) + li::before {
+    display: none;
+  }
   .list-group {
     @apply space-y-1 overflow-hidden rounded-xl border border-border p-1;
     background-color: var(--color-surface-1);
@@ -1425,6 +2061,9 @@ body {
       0 0 0 2px var(--color-focus-ring-offset),
       0 0 0 4px var(--color-focus-ring);
   }
+  .select-container {
+    max-width: 100%;
+  }
   .selection-control-option-row {
     box-shadow: none;
   }
@@ -1434,6 +2073,9 @@ body {
       0 0 0 2px var(--color-focus-ring-offset),
       0 0 0 4px var(--color-focus-ring);
   }
+  .selection-control-option-row-quiet:has(:checked):not(:has(:focus-visible)) {
+    box-shadow: none;
+  }
 }
 
 @media (forced-colors: active) {
@@ -1446,6 +2088,71 @@ body {
   }
 }
 
+@media (forced-colors: active) {
+  .toggle-switch {
+    border: 1px solid ButtonText;
+    background-color: Canvas;
+    background-image: none;
+  }
+  .toggle-switch-thumb {
+    top: 1px;
+    left: 1px;
+    background-color: ButtonText;
+  }
+  .toggle-switch[aria-checked="true"] {
+    border-color: Highlight;
+    background-color: Highlight;
+  }
+  .toggle-switch[aria-checked="true"] .toggle-switch-thumb {
+    background-color: HighlightText;
+  }
+  .toggle-switch:disabled {
+    border-color: GrayText;
+    opacity: 1;
+  }
+  .toggle-switch:disabled[aria-checked="true"] {
+    background-color: GrayText;
+  }
+  .toggle-switch:disabled .toggle-switch-thumb {
+    background-color: GrayText;
+  }
+  .toggle-switch:disabled[aria-checked="true"] .toggle-switch-thumb,
+  .toggle-switch:disabled[aria-busy="true"] .toggle-switch-thumb {
+    background-color: Canvas;
+  }
+
+  .selection-control-shell {
+    border-color: ButtonText;
+  }
+  .selection-control-shell:has(:checked) {
+    border-color: Highlight;
+    background-color: Highlight;
+  }
+  .selection-control-shell:has(:checked) > svg {
+    color: HighlightText;
+  }
+  .selection-control-shell:has(:checked) > .selection-control-dot {
+    background-color: HighlightText;
+  }
+  .selection-control-shell:has(:disabled) {
+    border-color: GrayText;
+    opacity: 1;
+  }
+  .selection-control-shell:has(:checked):has(:disabled) {
+    background-color: GrayText;
+  }
+  .selection-control-shell:has(:checked):has(:disabled) > svg {
+    color: Canvas;
+  }
+  .selection-control-shell:has(:checked):has(:disabled) > .selection-control-dot {
+    background-color: Canvas;
+  }
+  .selection-control-label-row-interaction:has(:disabled) {
+    opacity: 1;
+    color: GrayText;
+  }
+}
+
 .bg-action-primary {
   background-color: var(--color-action-primary);
 }
@@ -1508,6 +2215,129 @@ body {
 }
 }
 
+.bg-action-tonal {
+  background-color: var(--color-action-tonal);
+}
+
+@media (hover: hover) {
+.bg-action-tonal:hover {
+  background-color: var(--color-action-tonal-hover);
+}
+}
+
+.bg-action-tonal:active {
+  background-color: var(--color-action-tonal-active);
+}
+
+.bg-action-tonal:disabled {
+  background-color: var(--color-action-disabled);
+  color: var(--color-action-disabled-text);
+}
+
+.text-action-tonal {
+  color: var(--color-action-tonal-text);
+}
+
+@layer utilities {
+  .bg-badge-neutral {
+    background-color: var(--zabi-badge-neutral-fill, var(--color-neutral-subtle));
+  }
+  .text-badge-neutral {
+    color: var(--zabi-badge-neutral-text, var(--color-neutral-text));
+  }
+}
+
+@layer utilities {
+  .bg-skeleton-on-color {
+    background-color: var(--zabi-skeleton-fill, color-mix(in srgb, currentColor 24%, transparent));
+  }
+}
+
+.bg-chip {
+  background-color: var(--color-chip);
+}
+
+.bg-chip-hover {
+  background-color: var(--color-chip-hover);
+}
+
+.bg-chip-active {
+  background-color: var(--color-chip-active);
+}
+
+@media (hover: hover) {
+.hover\:bg-chip-hover:hover {
+  background-color: var(--color-chip-hover);
+}
+}
+
+.active\:bg-chip-active:active {
+  background-color: var(--color-chip-active);
+}
+
+.text-chip-text {
+  color: var(--color-chip-text);
+}
+
+.bg-chip-selected {
+  background-color: var(--color-chip-selected);
+}
+
+.bg-chip-selected-hover {
+  background-color: var(--color-chip-selected-hover);
+}
+
+.bg-chip-selected-active {
+  background-color: var(--color-chip-selected-active);
+}
+
+@media (hover: hover) {
+.hover\:bg-chip-selected-hover:hover {
+  background-color: var(--color-chip-selected-hover);
+}
+}
+
+.active\:bg-chip-selected-active:active {
+  background-color: var(--color-chip-selected-active);
+}
+
+.text-chip-selected-text {
+  color: var(--color-chip-selected-text);
+}
+
+.bg-card-tint {
+  background-color: var(--color-card-tint);
+}
+
+.border-progress-track-border {
+  border-color: var(--color-progress-track-border);
+}
+
+.bg-toggle-track {
+  background-color: var(--color-toggle-track);
+}
+
+@media (hover: hover) {
+.bg-toggle-track:hover {
+  background-color: var(--color-toggle-track-hover);
+}
+}
+
+.bg-toggle-track:active {
+  background-color: var(--color-toggle-track-active);
+}
+
+.border-action-outline {
+  border-color: var(--color-action-outline-border);
+}
+
+@media (hover: hover) {
+.border-action-outline:hover,
+.hover\:border-action-outline-hover:hover {
+  border-color: var(--color-action-outline-border-hover);
+}
+}
+
 .bg-action-danger {
   background-color: var(--color-action-danger);
 }
@@ -1659,6 +2489,10 @@ body {
   z-index: var(--z-sticky);
 }
 
+.z-fixed {
+  z-index: var(--z-fixed);
+}
+
 .z-dropdown {
   z-index: var(--z-dropdown);
 }