@slotted/styles 0.1.0-beta.1 → 0.1.0-beta.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@slotted/styles",
-  "version": "0.1.0-beta.1",
+  "version": "0.1.0-beta.3",
   "license": "MIT",
   "repository": {
     "type": "git",

package/src/app-shell/app-shell.css

@@ -460,7 +460,18 @@
      * for fifty pixels stood at whatever the longest destination measured.
      */
     min-inline-size: 0;
-    overflow: hidden;
+    /**
+     * The inline axis clips, which the width transition between open and rail
+     * needs. The block axis scrolls: a region holding one column taller than
+     * itself instead of `nav-header`, `nav-body` and `nav-footer` keeps its
+     * foot reachable. With the three parts the body scrolls and the region
+     * never overflows.
+     */
+    overflow-x: hidden;
+    overflow-y: auto;
+    overflow-inline: hidden;
+    overflow-block: auto;
+    overscroll-behavior: contain;
     transition:
       inline-size var(--_duration) var(--_easing),
       visibility var(--_duration) step-start;
@@ -787,6 +798,20 @@
    * content card begins, and nothing to its left.
    */
   [data-ui='app-shell'][data-canvas='inset'] > [data-part='nav'] {
+    /* The navigation stands on the sunken frame, which the secondary tone's
+       hover is 0.011 lighter than in the light scheme: a row's hover was the
+       frame itself. Both steps are recomputed from the ground it stands on. */
+    --slotted-tone-secondary-subtle-hover: color-mix(
+      in oklab,
+      var(--slotted-app-shell-nav-surface, var(--_frame)),
+      var(--slotted-text) 4%
+    );
+    --slotted-tone-secondary-subtle-active: color-mix(
+      in oklab,
+      var(--slotted-app-shell-nav-surface, var(--_frame)),
+      var(--slotted-text) 7%
+    );
+
     /* Invisible on the transparent default; a product that paints the column
        gets a region with the plane's corners rather than a square block. */
     border-radius: var(--_radius);

package/src/button/button.css

@@ -158,6 +158,19 @@
     --_edge: var(--_solid-active);
   }
 
+  /**
+   * Ink: the theme's `neutral` tone fills with the inverse surface and labels
+   * with the inverse text. A product that keeps the accent for data draws its
+   * primary action in it.
+   */
+  [data-ui='button'][data-tone='neutral'] {
+    --_solid: var(--slotted-tone-neutral-solid);
+    --_solid-hover: var(--slotted-tone-neutral-solid-hover);
+    --_solid-active: var(--slotted-tone-neutral-solid-active);
+    --_on-solid: var(--slotted-tone-neutral-on-solid);
+    --_text: var(--slotted-tone-neutral-text);
+  }
+
   [data-ui='button'][data-tone='success'] {
     --_solid: var(--slotted-tone-success-solid);
     --_solid-hover: var(--slotted-tone-success-solid-hover);
@@ -681,6 +694,26 @@
     inline-size: 100%;
   }
 
+  /**
+   * A field trigger: the label at the start and `end` at the inline end. The
+   * label takes the free space, so `start` stays beside it and the end slot is
+   * pushed to the edge; flex follows the writing direction, so it mirrors.
+   */
+  [data-ui='button'][data-justify='between'] {
+    justify-content: space-between;
+  }
+
+  [data-ui='button'][data-justify='between'] > [data-part='label'] {
+    flex: 1 1 auto;
+    text-align: start;
+  }
+
+  /* What a trigger holds at its end — a shortcut, a count — is as wide as it is. */
+  [data-ui='button'][data-justify='between'] > [data-part='end'] {
+    inline-size: auto;
+    min-inline-size: var(--_icon-size);
+  }
+
   /**
    * An icon-only control is square from the control height, so its visual box
    * and its target are the same box. The two minimums are the WCAG 2.2 floor

package/src/button/button.tokens.json

@@ -52,6 +52,11 @@
   "--slotted-tone-danger-solid-active",
   "--slotted-tone-danger-solid-hover",
   "--slotted-tone-danger-text",
+  "--slotted-tone-neutral-on-solid",
+  "--slotted-tone-neutral-solid",
+  "--slotted-tone-neutral-solid-active",
+  "--slotted-tone-neutral-solid-hover",
+  "--slotted-tone-neutral-text",
   "--slotted-tone-secondary-on-solid",
   "--slotted-tone-secondary-solid",
   "--slotted-tone-secondary-solid-active",

package/src/button-group/button-group.css

@@ -341,6 +341,10 @@
     --_seam: var(--slotted-tone-secondary-solid-active);
   }
 
+  [data-ui='button-group'] > [data-tone='neutral'] {
+    --_seam: var(--slotted-tone-neutral-solid-active);
+  }
+
   [data-ui='button-group'] > [data-tone='success'] {
     --_seam: var(--slotted-tone-success-solid-active);
   }

package/src/button-group/button-group.tokens.json

@@ -5,6 +5,7 @@
   "--slotted-text-muted",
   "--slotted-tone-accent-solid-active",
   "--slotted-tone-danger-solid-active",
+  "--slotted-tone-neutral-solid-active",
   "--slotted-tone-secondary-solid-active",
   "--slotted-tone-success-solid-active",
   "--slotted-tone-warning-solid-active"

package/src/chart/chart.css

@@ -877,6 +877,13 @@
     overflow-wrap: anywhere;
   }
 
+  /* The label of a line on this category, the plot's own words for it. */
+  [data-ui='chart'] [data-part='tooltip-note'] {
+    color: var(--slotted-text-muted, GrayText);
+    grid-column: 1 / -1;
+    overflow-wrap: anywhere;
+  }
+
   [data-ui='chart'] :is([data-part='tooltip-item'], [data-part='tooltip-total']) {
     align-items: center;
     display: grid;

package/src/combobox/combobox.css

@@ -746,6 +746,18 @@
 
   /* ── Options ──────────────────────────────────────────────────────────── */
 
+  /**
+   * An option the query rejected, and a group whose options all went. Both
+   * carry `hidden` — Angular hides each rejected option rather than leaving the
+   * list, and both bindings hide an emptied group — and `display: grid` on
+   * either beats the user agent's own `[hidden] { display: none }`, because an
+   * author rule wins over the user agent sheet.
+   */
+  [data-ui='combobox'] [data-part='item'][hidden],
+  [data-ui='combobox'] [data-part='group'][hidden] {
+    display: none;
+  }
+
   [data-ui='combobox'] [data-part='item'] {
     align-content: center;
     border-radius: var(--_item-radius);

package/src/currency-field/currency-field.css

@@ -784,4 +784,128 @@
   [data-ui='currency-field'][data-part='root'][data-disabled] > [data-part='end'] {
     color: var(--slotted-disabled-foreground);
   }
+
+  /**
+   * ── The display step ───────────────────────────────────────────────────
+   *
+   * The headline amount of an entry sheet: the figure at the 4xl step in
+   * tabular figures with the tighter tracking large type takes, and the
+   * currency's mark apart from it, muted at the xl step and on the baseline
+   * of the digits. Where the platform sizes a field to its content the
+   * control is as wide as the amount it holds, so the mark stays beside the
+   * digits; elsewhere the control takes the line and `align` places the
+   * amount in it.
+   */
+  [data-ui='currency-field'][data-part='root'][data-appearance='display'] {
+    --_font-size: var(
+      --slotted-currency-field-display-font-size,
+      var(--slotted-font-size-4xl, 2rem)
+    );
+    --_height: calc(
+      var(--_font-size) * var(--slotted-line-height-4xl, 1.2) + 2 * var(--slotted-space-2, 0.25rem)
+    );
+    --_padding-inline: var(--slotted-control-padding-inline-lg, 16px);
+    --_gap: var(--slotted-space-3, 0.375rem);
+
+    align-items: baseline;
+    font-weight: var(--slotted-font-weight-medium, 500);
+    letter-spacing: var(--slotted-letter-spacing-tighter, -0.03em);
+    line-height: var(--slotted-line-height-4xl, 1.2);
+  }
+
+  [data-ui='currency-field'][data-part='root'][data-appearance='display'] > [data-part='symbol'] {
+    color: var(--slotted-currency-field-symbol-color, var(--slotted-text-muted, GrayText));
+    flex: none;
+    font-size: var(
+      --slotted-currency-field-symbol-font-size,
+      var(--slotted-font-size-xl, 1.125rem)
+    );
+    font-weight: var(--slotted-font-weight-regular, 400);
+    letter-spacing: 0;
+  }
+
+  [data-ui='currency-field'][data-part='root'][data-appearance='display'] > [data-part='input'] {
+    align-self: auto;
+    margin-block: 0;
+  }
+
+  @supports (field-sizing: content) {
+    [data-ui='currency-field'][data-part='root'][data-appearance='display'] {
+      inline-size: fit-content;
+      max-inline-size: 100%;
+    }
+
+    [data-ui='currency-field'][data-part='root'][data-appearance='display'] > [data-part='input'] {
+      field-sizing: content;
+      flex: 0 1 auto;
+      min-inline-size: 1ch;
+    }
+  }
+
+  /**
+   * No box: a rule under the amount. On focus the rule takes the text colour
+   * and doubles, which is the focus indicator; invalid, it takes the danger
+   * colour. No ground, no corner and no resting lift.
+   */
+  [data-ui='currency-field'][data-part='root'][data-appearance='display'] {
+    background-color: transparent;
+    border-color: transparent;
+    border-block-end-color: var(
+      --slotted-currency-field-underline-color,
+      var(--slotted-control-border-color, ButtonBorder)
+    );
+    border-radius: var(--slotted-radius-none, 0px);
+    box-shadow: none;
+    padding-inline: 0;
+  }
+
+  [data-ui='currency-field'][data-part='root'][data-appearance='display']:has(
+      > [data-part='input']:focus-visible
+    ) {
+    border-block-end-color: var(--slotted-text, CanvasText);
+    box-shadow: inset 0 calc(-1 * var(--slotted-border-width-thin, 1px)) 0
+      var(--slotted-text, CanvasText);
+    outline: none;
+  }
+
+  [data-ui='currency-field'][data-part='root'][data-appearance='display'][data-invalid] {
+    border-block-end-color: var(--slotted-tone-danger-border, CanvasText);
+    box-shadow: none;
+  }
+
+  [data-ui='currency-field'][data-part='root'][data-appearance='display'][data-invalid]:has(
+      > [data-part='input']:focus-visible
+    ) {
+    box-shadow: inset 0 calc(-1 * var(--_invalid-edge-width)) 0 var(--_invalid-edge-color);
+  }
+
+  [data-ui='currency-field'][data-part='root'][data-appearance='display']:has(
+      > [data-part='input']:disabled
+    ) {
+    border-block-end-color: var(--slotted-disabled-border, GrayText);
+  }
+
+  @media (forced-colors: active) {
+    [data-ui='currency-field'][data-part='root'][data-appearance='display'] {
+      border-block-end-color: ButtonBorder;
+    }
+
+    /* A shadow is not painted under forced colours, so the doubled rule of
+       focus is a wider border there. */
+    [data-ui='currency-field'][data-part='root'][data-appearance='display']:has(
+        > [data-part='input']:focus-visible
+      ) {
+      border-block-end-color: Highlight;
+      border-block-end-width: calc(2 * var(--slotted-border-width-thin, 1px));
+    }
+
+    [data-ui='currency-field'][data-part='root'][data-appearance='display'][data-invalid]:has(
+        > [data-part='input']:focus-visible
+      ) {
+      border-block-end-color: Highlight;
+      border-block-end-width: calc(
+        var(--slotted-border-width-thin, 1px) + var(--_invalid-edge-width)
+      );
+    }
+  }
 }

package/src/currency-field/currency-field.tokens.json

@@ -1,5 +1,6 @@
 [
   "--slotted-border-subtle",
+  "--slotted-border-width-thin",
   "--slotted-control-border-color",
   "--slotted-control-border-width",
   "--slotted-control-font-family",
@@ -36,6 +37,7 @@
   "--slotted-currency-field-disabled-background",
   "--slotted-currency-field-disabled-border-color",
   "--slotted-currency-field-disabled-color",
+  "--slotted-currency-field-display-font-size",
   "--slotted-currency-field-hover-border-color",
   "--slotted-currency-field-icon-size-min",
   "--slotted-currency-field-invalid-border-color",
@@ -57,6 +59,9 @@
   "--slotted-currency-field-subtle-background",
   "--slotted-currency-field-subtle-border-color",
   "--slotted-currency-field-subtle-hover-background",
+  "--slotted-currency-field-symbol-color",
+  "--slotted-currency-field-symbol-font-size",
+  "--slotted-currency-field-underline-color",
   "--slotted-disabled-background",
   "--slotted-disabled-border",
   "--slotted-disabled-foreground",
@@ -64,10 +69,17 @@
   "--slotted-focus-ring-color-invalid",
   "--slotted-focus-ring-offset",
   "--slotted-focus-ring-width",
+  "--slotted-font-size-4xl",
+  "--slotted-font-size-xl",
+  "--slotted-font-weight-medium",
+  "--slotted-font-weight-regular",
+  "--slotted-letter-spacing-tighter",
+  "--slotted-line-height-4xl",
   "--slotted-radius-none",
   "--slotted-radius-xs",
   "--slotted-space-1",
   "--slotted-space-2",
+  "--slotted-space-3",
   "--slotted-surface-sunken",
   "--slotted-target-comfortable",
   "--slotted-target-min",

package/src/dashboard-grid/dashboard-grid.css

@@ -350,8 +350,11 @@
   }
 
   /* While a widget is carried or pulled the lattice is what it snaps to, so
-     it comes forward. */
-  [data-ui='dashboard-grid'][data-gesture] > [data-part='grid']::before {
+     it comes forward. The attribute is on the grid, in the compound it styles:
+     a browser invalidates by attribute name, and on the root ahead of
+     `> [data-part='grid']` it restyled every element with a `data-part`
+     under the root as a widget was picked up and as it was dropped. */
+  [data-ui='dashboard-grid'] > [data-part='grid'][data-gesture]::before {
     opacity: 1;
   }
 
@@ -654,20 +657,18 @@
   /* ── Editing: a widget in hand ───────────────────────────────────────── */
 
   /**
-   * A widget carried or pulled leaves its cell and floats over the grid: it
-   * is placed where it was picked up, `--_dg-origin-*`, and follows the pointer
-   * by `--_dg-lift-*`, all written by script. The cell it would land in is the
-   * placeholder, and the widgets around it make room as the placeholder moves.
+   * A widget carried or pulled leaves its cell and floats over the grid. The
+   * script writes where it was picked up (`inset-inline-start`,
+   * `inset-block-start`, `inline-size`, `block-size`) and how far the pointer
+   * took it (`translate`) on the widget itself. A custom property in their
+   * place restyled everything under the widget on every frame. The cell it
+   * would land in is the placeholder, and the widgets around it make room as
+   * the placeholder moves.
    */
   [data-ui='dashboard-grid'] [data-part='widget']:is([data-dragging], [data-resizing]) {
-    block-size: var(--_dg-origin-block-size);
     grid-column: auto;
     grid-row: auto;
-    inline-size: var(--_dg-origin-inline-size);
-    inset-block-start: var(--_dg-origin-block-start);
-    inset-inline-start: var(--_dg-origin-inline-start);
     position: absolute;
-    translate: var(--_dg-lift-x, 0) var(--_dg-lift-y, 0);
     z-index: 3;
   }
 
@@ -746,3 +747,37 @@
     min-block-size: calc(var(--_row) * 2 + var(--_gap));
   }
 }
+
+/**
+ * A widget's cell, written on the widget by script and read only by the
+ * widget's own placement. Unregistered, each one inherited into the card and
+ * everything in it, and a preview that moved a widget restyled its whole
+ * content. Registered without inheritance and without a type, a widget no
+ * script placed still takes the fallback of `var()`. These sit outside
+ * `@layer slotted.components` because `@property` is a registration, not a
+ * rule a cascade layer holds.
+ */
+@property --_dg-x {
+  syntax: '*';
+  inherits: false;
+}
+
+@property --_dg-y {
+  syntax: '*';
+  inherits: false;
+}
+
+@property --_dg-w {
+  syntax: '*';
+  inherits: false;
+}
+
+@property --_dg-h {
+  syntax: '*';
+  inherits: false;
+}
+
+@property --_dg-span-medium {
+  syntax: '*';
+  inherits: false;
+}

package/src/dialog/dialog.css

@@ -52,8 +52,12 @@
     --_measure: var(--slotted-dialog-measure, 32rem);
     /** The air between the panel and the edge of the layer. */
     --_layer-padding: var(--slotted-space-8, 1.5rem);
-    /** The panel's own inset, which every row reads. */
-    --_padding-inline: var(--slotted-space-8, 1.5rem);
+    /**
+     * The panel's own inset, which every row reads. The panel draws none of it
+     * itself: the header, the body and the footer carry it, and a layout of the
+     * consumer's own that skips them reads the same two public tokens.
+     */
+    --_padding-inline: var(--slotted-dialog-padding-inline, var(--slotted-space-8, 1.5rem));
     /**
      * Three insets, not one number used three times, because the three rows
      * hold three different things.
@@ -72,7 +76,7 @@
      * paragraph reads as a slab around a button: twenty above and below a
      * thirty-four pixel control is a seventy-four pixel bar for one line.
      */
-    --_padding-block: var(--slotted-space-7, 1.25rem);
+    --_padding-block: var(--slotted-dialog-padding-block, var(--slotted-space-7, 1.25rem));
     --_header-padding-block: var(--slotted-space-6, 1rem);
     --_footer-padding-block: var(--slotted-space-5, 0.75rem);
     --_gap: var(--slotted-space-5, 0.75rem);
@@ -182,8 +186,8 @@
 
   [data-ui='dialog'][data-size='sm'] {
     --_measure: var(--slotted-dialog-measure, 24rem);
-    --_padding-inline: var(--slotted-space-7, 1.25rem);
-    --_padding-block: var(--slotted-space-6, 1rem);
+    --_padding-inline: var(--slotted-dialog-padding-inline-sm, var(--slotted-space-7, 1.25rem));
+    --_padding-block: var(--slotted-dialog-padding-block-sm, var(--slotted-space-6, 1rem));
     --_header-padding-block: var(--slotted-space-5, 0.75rem);
     --_footer-padding-block: var(--slotted-space-4, 0.5rem);
     --_title-font-size: var(--slotted-font-size-lg, 1rem);
@@ -281,6 +285,15 @@
   /* ── The panel ────────────────────────────────────────────────────────── */
 
   [data-ui='dialog'] > [data-part='viewport'] > [data-part='content'] {
+    /**
+     * The inset the rows carry, stated where a layout of the consumer's own can
+     * read it: the panel draws no padding, so content written straight inside
+     * it reads `--slotted-dialog-inset-inline` for its padding and stands
+     * in the column the header, the body and the footer stand in.
+     */
+    --slotted-dialog-inset-inline: var(--_padding-inline);
+    --slotted-dialog-inset-block: var(--_padding-block);
+
     display: grid;
     grid-template-rows: auto minmax(0, 1fr) auto;
     inline-size: 100%;

package/src/dialog/dialog.tokens.json

@@ -17,6 +17,10 @@
   "--slotted-dialog-description-color",
   "--slotted-dialog-footer-surface",
   "--slotted-dialog-measure",
+  "--slotted-dialog-padding-block",
+  "--slotted-dialog-padding-block-sm",
+  "--slotted-dialog-padding-inline",
+  "--slotted-dialog-padding-inline-sm",
   "--slotted-dialog-radius",
   "--slotted-dialog-rule-color",
   "--slotted-dialog-scrim",

package/src/list/list.css

@@ -193,6 +193,33 @@
    * level is the library's own sticky step, so a heading never rises above an
    * overlay that is above the page.
    */
+  /* A heading with an end sets the name at the start and the end content on
+     the same line, at the end. */
+  [data-ui='list'] [data-part='section-label']:has(> [data-part='section-end']) {
+    align-items: baseline;
+    display: flex;
+    gap: var(--slotted-space-4, 0.5rem);
+    justify-content: space-between;
+  }
+
+  [data-ui='list'] [data-part='section-end'] {
+    flex: none;
+    font-variant-numeric: tabular-nums;
+    white-space: nowrap;
+  }
+
+  /**
+   * `ruled`: the name in the text colour over a rule, with no ground behind it
+   * — a day of a phone list with its balance at the end. The sticky ground is
+   * still the set's surface, so the rows passing under it are covered.
+   */
+  [data-ui='list'] [data-part='section-label'][data-variant='ruled'] {
+    border-block-end: var(--slotted-border-width-thin, 1px) solid
+      var(--slotted-list-section-rule-color, var(--slotted-border-subtle, GrayText));
+    color: var(--slotted-list-section-ruled-color, var(--slotted-text, CanvasText));
+    font-weight: var(--slotted-font-weight-medium, 500);
+  }
+
   [data-ui='list'] [data-part='section-label'][data-sticky] {
     background-color: var(--_surface);
     inset-block-start: 0;

package/src/list/list.tokens.json

@@ -5,6 +5,7 @@
   "--slotted-control-padding-inline-md",
   "--slotted-control-padding-inline-sm",
   "--slotted-font-size-xs",
+  "--slotted-font-weight-medium",
   "--slotted-font-weight-semibold",
   "--slotted-line-height-sm",
   "--slotted-list-background",
@@ -28,6 +29,8 @@
   "--slotted-list-section-padding-block",
   "--slotted-list-section-padding-block-lg",
   "--slotted-list-section-padding-block-sm",
+  "--slotted-list-section-rule-color",
+  "--slotted-list-section-ruled-color",
   "--slotted-radius-md",
   "--slotted-space-2",
   "--slotted-space-3",
@@ -37,6 +40,7 @@
   "--slotted-space-8",
   "--slotted-space-9",
   "--slotted-surface",
+  "--slotted-text",
   "--slotted-text-muted",
   "--slotted-z-index-sticky"
 ]

package/src/number-field/number-field.css

@@ -323,6 +323,9 @@
     touch-action: none;
     transition: color var(--slotted-control-transition-duration)
       var(--slotted-control-transition-easing);
+    /* Its own bidi run: as a flex container its text is a new block, and a
+       mark of more than one character read backwards in a right-to-left page. */
+    unicode-bidi: plaintext;
     user-select: none;
     -webkit-user-select: none;
   }

package/src/progress-indicator/progress-indicator.css

@@ -123,8 +123,9 @@
      * scheme instead, because the ink is the far end of each scheme's own
      * range. Twenty-four per cent is measured rather than chosen: it is the
      * lowest ratio at which the track separates from the page in all three
-     * schemes at the 2-pixel `sm` thickness, and low enough that a column of
-     * bars does not read as a column of filled bars.
+     * schemes at a 2-pixel bar, half the thinnest one this family draws,
+     * and low enough that a column of bars does not read as a column of
+     * filled bars.
      */
     --_track-color: var(
       --slotted-progress-indicator-track-color,
@@ -152,14 +153,14 @@
     --_font-size: var(--slotted-control-font-size-md, 13px);
     --_text-gap: var(--slotted-space-4, 0.5rem);
     --_row-gap: var(--slotted-space-3, 0.375rem);
-    --_thickness: var(--slotted-progress-indicator-thickness, var(--slotted-space-2, 0.25rem));
+    --_thickness: var(--slotted-progress-indicator-thickness, var(--slotted-space-3, 0.375rem));
     --_size: var(--slotted-progress-indicator-size, var(--slotted-control-height-md, 34px));
     --_radius: var(--slotted-progress-indicator-radius, var(--slotted-radius-full, 9999px));
     /**
      * M3's indicator–track gap, and the stop indicator's diameter, are both
      * 4dp at the 4dp track. Making them one thickness is the proportional form
-     * of that decision rather than a copy of the number: a 4-pixel gap in a
-     * 2-pixel bar would be wider than the bar is tall.
+     * of that decision rather than a copy of the number: a fixed 4-pixel gap
+     * would be the whole `sm` bar and half the `lg` one.
      */
     --_gap: var(--slotted-progress-indicator-gap, var(--_thickness));
 
@@ -278,7 +279,7 @@
   /* ── Size ─────────────────────────────────────────────────────────────
    *
    * One axis, three geometries. The bar reads a thickness from the space
-   * scale — 2, 4 and 8 pixels, and M3's own default track is the middle one —
+   * scale — 4, 6 and 8 pixels, so no step draws a hairline in a table cell —
    * while the circle and the loader read the control height scale, so a
    * spinner standing beside a button is the same height as the button at
    * every density. Neither needs a scale of this family's own, and the
@@ -288,7 +289,7 @@
   [data-ui='progress-indicator'][data-part='root'][data-size='sm'] {
     --_font-size: var(--slotted-control-font-size-sm, 12px);
     --_text-gap: var(--slotted-space-3, 0.375rem);
-    --_thickness: var(--slotted-progress-indicator-thickness, var(--slotted-space-1, 0.125rem));
+    --_thickness: var(--slotted-progress-indicator-thickness, var(--slotted-space-2, 0.25rem));
     --_size: var(--slotted-progress-indicator-size, var(--slotted-control-height-sm, 30px));
   }
 

package/src/progress-indicator/progress-indicator.tokens.json

@@ -35,7 +35,6 @@
   "--slotted-progress-indicator-wave-phase",
   "--slotted-radius-full",
   "--slotted-radius-none",
-  "--slotted-space-1",
   "--slotted-space-2",
   "--slotted-space-3",
   "--slotted-space-4",

package/src/segmented-control/segmented-control.css

@@ -520,6 +520,86 @@
     box-shadow: none;
   }
 
+  /**
+   * ── Underline ──────────────────────────────────────────────────────────
+   *
+   * The same radio group with no track: the words alone, sized to their own
+   * width, the chosen one in the text colour and underlined. Every other word
+   * is muted and takes the text colour under the pointer. No thumb, no
+   * dividers, no ground — the underline is the mark, and it sits under the
+   * word rather than on an edge of a box (R1).
+   */
+  [data-ui='segmented-control'][data-part='root'][data-variant='underline'] {
+    --_inner: var(--_height);
+
+    background: none;
+    border: 0;
+    border-radius: 0;
+    box-shadow: none;
+    column-gap: var(--slotted-segmented-control-underline-gap, var(--slotted-space-6, 1rem));
+    grid-auto-columns: auto;
+    padding: 0;
+  }
+
+  [data-ui='segmented-control'][data-part='root'][data-variant='underline'] [data-part='indicator'],
+  [data-ui='segmented-control'][data-part='root'][data-variant='underline']
+    [data-part='item']
+    + [data-part='item']::before {
+    display: none;
+  }
+
+  [data-ui='segmented-control'][data-part='root'][data-variant='underline'] [data-part='item'] {
+    color: var(--slotted-segmented-control-underline-color, var(--slotted-text-muted, GrayText));
+    font-weight: var(--slotted-font-weight-medium, 500);
+    min-inline-size: var(--slotted-target-min, 24px);
+    padding-inline: 0;
+  }
+
+  [data-ui='segmented-control'][data-part='root'][data-variant='underline']
+    [data-part='item'][data-checked] {
+    color: var(
+      --slotted-segmented-control-underline-checked-color,
+      var(--slotted-text, CanvasText)
+    );
+  }
+
+  [data-ui='segmented-control'][data-part='root'][data-variant='underline']
+    [data-part='item'][data-checked]
+    [data-part='label'] {
+    text-decoration-color: currentColor;
+    text-decoration-line: underline;
+    text-decoration-thickness: var(--slotted-border-width-thick, 2px);
+    text-underline-offset: 0.35em;
+  }
+
+  [data-ui='segmented-control'][data-part='root'][data-variant='underline'][data-invalid]
+    [data-part='item'][data-checked]
+    [data-part='label'] {
+    text-decoration-color: var(--slotted-tone-danger-border, CanvasText);
+  }
+
+  [data-ui='segmented-control'][data-part='root'][data-variant='underline']:not([data-readonly])
+    [data-part='item']:hover:not([data-disabled]):not([data-checked]):has(
+      [data-part='control']:enabled
+    ),
+  [data-ui='segmented-control'][data-part='root'][data-variant='underline']:not([data-readonly])
+    [data-part='item']:active:not([data-disabled]):not([data-checked]):has(
+      [data-part='control']:enabled
+    ) {
+    background: none;
+    color: var(--slotted-text, CanvasText);
+  }
+
+  [data-ui='segmented-control'][data-part='root'][data-variant='underline']
+    [data-part='item']:has([data-part='control']:focus-visible) {
+    outline-offset: var(--slotted-focus-ring-offset, 2px);
+  }
+
+  [data-ui='segmented-control'][data-part='root'][data-variant='underline']
+    [data-part='item'][data-disabled] {
+    color: var(--slotted-disabled-foreground, GrayText);
+  }
+
   /* ── Condensed ────────────────────────────────────────────────────────── */
 
   /**

package/src/segmented-control/segmented-control.tokens.json

@@ -1,5 +1,6 @@
 [
   "--slotted-border-subtle",
+  "--slotted-border-width-thick",
   "--slotted-control-border-color",
   "--slotted-control-border-width",
   "--slotted-control-font-family",
@@ -35,7 +36,9 @@
   "--slotted-easing-standard",
   "--slotted-focus-ring-color",
   "--slotted-focus-ring-color-invalid",
+  "--slotted-focus-ring-offset",
   "--slotted-focus-ring-width",
+  "--slotted-font-weight-medium",
   "--slotted-radius-xs",
   "--slotted-segmented-control-active-background",
   "--slotted-segmented-control-background",
@@ -55,9 +58,14 @@
   "--slotted-segmented-control-invalid-focus-ring-color",
   "--slotted-segmented-control-radius",
   "--slotted-segmented-control-shadow",
+  "--slotted-segmented-control-underline-checked-color",
+  "--slotted-segmented-control-underline-color",
+  "--slotted-segmented-control-underline-gap",
   "--slotted-space-1",
+  "--slotted-space-6",
   "--slotted-target-min",
   "--slotted-text",
+  "--slotted-text-muted",
   "--slotted-tone-accent-border",
   "--slotted-tone-accent-subtle-active",
   "--slotted-tone-accent-text",

package/src/stat-card/stat-card.css

@@ -383,6 +383,24 @@
     margin-inline-start: auto;
   }
 
+  /* On a finger the card's one control is a full target among 44-pixel
+     controls: a transparent `::before` centred on the link or button — the
+     part itself when `render` made it one — reaches
+     the comfortable size in both axes, and the header keeps its height. */
+  @media (pointer: coarse) {
+    [data-ui='stat-card']
+      :is([data-part='action']:is(a, button), [data-part='action'] > :is(a, button)) {
+      position: relative;
+    }
+
+    [data-ui='stat-card']
+      :is([data-part='action']:is(a, button), [data-part='action'] > :is(a, button))::before {
+      content: '';
+      inset: min(0px, calc((100% - var(--slotted-target-comfortable, 44px)) / 2));
+      position: absolute;
+    }
+  }
+
   /* ── Figure: the value, its unit, the delta ───────────────────────────── */
 
   /**
@@ -428,7 +446,9 @@
     font-size: var(--_value-size);
     font-variant-numeric: proportional-nums;
     font-weight: var(--slotted-font-weight-semibold, 600);
-    letter-spacing: -0.02em;
+    /* The figure is set at the 3xl or 4xl step, where the theme's tighter
+       tracking applies. */
+    letter-spacing: var(--slotted-letter-spacing-tighter, -0.03em);
     unicode-bidi: plaintext;
     line-height: var(--_value-line);
     margin: 0;

package/src/stat-card/stat-card.tokens.json

@@ -13,6 +13,7 @@
   "--slotted-font-size-xs",
   "--slotted-font-weight-medium",
   "--slotted-font-weight-semibold",
+  "--slotted-letter-spacing-tighter",
   "--slotted-line-height-2xl",
   "--slotted-line-height-3xl",
   "--slotted-line-height-4xl",
@@ -85,6 +86,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/src/table/table.css

@@ -461,6 +461,84 @@
     color: var(--slotted-disabled-foreground, GrayText);
   }
 
+  /**
+   * The row the page shows elsewhere — the record open in a detail pane. A
+   * neutral ground a step beyond hover, so the pointer passing over it changes
+   * nothing, and no edge on the start side (R1). It is opaque, because a
+   * pinned cell copies the row's ground and a translucent one shows the
+   * scrolled cells through it. Selection is stronger and paints over it.
+   */
+  [data-ui='table'] [data-part='body'] > [data-part='row'][data-current]:not([data-selected]) {
+    background-color: var(
+      --slotted-table-row-surface-current,
+      var(--slotted-tone-secondary-subtle-active, ButtonFace)
+    );
+  }
+
+  /* A row with an action of its own is a thing the pointer presses. */
+  [data-ui='table'] [data-part='body'] > [data-part='row'][data-interactive]:not([data-disabled]) {
+    cursor: pointer;
+  }
+
+  /**
+   * ── The band that opens a group ────────────────────────────────────────
+   *
+   * One header cell across every column: the group's name at the start and
+   * its total at the end, in tabular figures so a column of daily nets lines
+   * up. The ground is the stripe's step, opaque for the same reason a pinned
+   * cell's is, and the band stays where it is when the pointer passes.
+   */
+  [data-ui='table'] [data-part='group-header'] {
+    background-color: var(--slotted-table-group-surface, var(--_stripe));
+    border-block-end: var(--_rule-width) solid var(--_rule);
+    color: var(--slotted-table-group-color, var(--_text));
+    font-weight: var(--slotted-font-weight-semibold, 600);
+    padding-block: var(--_pad-block);
+    padding-inline: var(--_pad-inline);
+    text-align: start;
+  }
+
+  [data-ui='table'] [data-part='group-content'] {
+    align-items: baseline;
+    display: flex;
+    gap: var(--_gap);
+    justify-content: space-between;
+    min-inline-size: 0;
+  }
+
+  [data-ui='table'] [data-part='group-end'] {
+    font-variant-numeric: tabular-nums;
+    text-align: end;
+    white-space: nowrap;
+  }
+
+  /**
+   * A sticky band stops under the header when the header sticks too. The
+   * header's height is one row of the control scale and its rule; a header
+   * that wraps sets `--slotted-table-group-sticky-offset` itself.
+   */
+  [data-ui='table'] [data-part='group-row'][data-sticky] > [data-part='group-header'] {
+    inset-block-start: var(--slotted-table-group-sticky-offset, 0);
+    position: sticky;
+    z-index: var(--slotted-z-index-sticky, 100);
+  }
+
+  [data-ui='table'][data-sticky-header]
+    [data-part='group-row'][data-sticky]
+    > [data-part='group-header'] {
+    inset-block-start: var(
+      --slotted-table-group-sticky-offset,
+      calc(var(--_row-min-block) + var(--_rule-width))
+    );
+  }
+
+  @media (forced-colors: active) {
+    [data-ui='table'] [data-part='body'] > [data-part='row'][data-current] {
+      outline: var(--_rule-width) solid Highlight;
+      outline-offset: calc(var(--_rule-width) * -1);
+    }
+  }
+
   /**
    * ── Alignment and numerals ─────────────────────────────────────────────
    *
@@ -542,20 +620,32 @@
    * written where the choice is made: a table wider than the page pushes the
    * page sideways instead of scrolling inside its frame.
    *
-   * The offset is where the header stops. An application with a bar of its own
-   * sets `--slotted-table-sticky-offset` once, and every table under it stops
-   * below the bar rather than under it.
+   * The offset is where the header stops under `page`. An application with a
+   * bar of its own sets `--slotted-table-sticky-offset` once, and every table
+   * under it stops below the bar rather than under it. Under `scroll` the
+   * header stops at the top of the family's own scroller and reads no offset:
+   * `page.css` binds the offset to the page's chrome for every table inside
+   * the page, and a header reading it stood that far below its own scroller's
+   * top, over the first rows. A `page` table inside a scrolling box of the
+   * consumer's own sets the offset on that box, `0` for its top edge.
    */
   [data-ui='table'][data-sticky-header] [data-part='column-header'],
   /* The chooser's own header is a `selection` cell and not a `column-header`,
      and a rule naming only the second left the select-all scrolling away while
      every column beside it stayed. */
   [data-ui='table'][data-sticky-header] [data-part='head'] [data-part='selection'] {
-    inset-block-start: var(--slotted-table-sticky-offset, 0);
+    inset-block-start: 0;
     position: sticky;
     z-index: calc(var(--slotted-z-index-sticky, 100) + 1);
   }
 
+  [data-ui='table'][data-sticky-to='page'][data-sticky-header] [data-part='column-header'],
+  [data-ui='table'][data-sticky-to='page'][data-sticky-header]
+    [data-part='head']
+    [data-part='selection'] {
+    inset-block-start: var(--slotted-table-sticky-offset, 0);
+  }
+
   [data-ui='table'][data-sticky-to='page'] [data-part='scroll'] {
     overflow: visible;
   }
@@ -572,11 +662,18 @@
    * sibling of the scroller and never leaves it in the first place.
    */
   [data-ui='table'][data-sticky-footer] [data-part='summary'] > [data-part='row'] > * {
-    inset-block-end: var(--slotted-table-sticky-offset-end, 0);
+    inset-block-end: 0;
     position: sticky;
     z-index: calc(var(--slotted-z-index-sticky, 100) + 1);
   }
 
+  [data-ui='table'][data-sticky-to='page'][data-sticky-footer]
+    [data-part='summary']
+    > [data-part='row']
+    > * {
+    inset-block-end: var(--slotted-table-sticky-offset-end, 0);
+  }
+
   /* The corner again, at the bottom: a summary cell that is also a pinned
      column takes both insets and the step above both. */
   [data-ui='table'][data-sticky-footer] [data-part='summary'] [data-sticky] {

package/src/table/table.tokens.json

@@ -41,12 +41,16 @@
   "--slotted-table-font-family",
   "--slotted-table-font-size",
   "--slotted-table-gap",
+  "--slotted-table-group-color",
+  "--slotted-table-group-sticky-offset",
+  "--slotted-table-group-surface",
   "--slotted-table-header-surface",
   "--slotted-table-header-surface-hover",
   "--slotted-table-icon-size",
   "--slotted-table-radius",
   "--slotted-table-row-color-selected",
   "--slotted-table-row-min-block-size",
+  "--slotted-table-row-surface-current",
   "--slotted-table-row-surface-hover",
   "--slotted-table-row-surface-selected",
   "--slotted-table-row-surface-selected-hover",
@@ -64,6 +68,7 @@
   "--slotted-tone-accent-subtle-hover",
   "--slotted-tone-accent-surface",
   "--slotted-tone-accent-text",
+  "--slotted-tone-secondary-subtle-active",
   "--slotted-tone-secondary-subtle-hover",
   "--slotted-z-index-sticky"
 ]

package/src/tabs/tabs.css

@@ -631,12 +631,14 @@
    * through `aria-keyshortcuts`.
    *
    * It is aligned by its mark rather than by its box. The box overhangs the X
-   * on every side, so a box set flush against the label leaves a hole where the
-   * overhang is; both margins take the overhang back, which puts the mark one
-   * inner gap from the last letter and the tab's own inset from the end of the
-   * item. The first capture showed the other arrangement: a square the height of
-   * the control, hard against the words, with the whole tab's padding on the
-   * far side of it.
+   * on every side, and both margins take the overhang back, which puts the mark
+   * the tab's own inset from the last letter and from the end of the item. An
+   * inner gap before the mark left the round ground of the hover touching the
+   * words; the first capture showed a square the height of the control, hard
+   * against the words, with the whole tab's padding on the far side of it.
+   *
+   * Neutral, as the dialog's close and the paging controls: removing a tab
+   * closes a view and destroys nothing, so the danger tone overstated it.
    */
   [data-ui='tabs']
     > :where([data-part='list'])
@@ -650,7 +652,7 @@
     background-color: transparent;
     block-size: var(--_dismiss-size);
     border: 0;
-    border-radius: var(--slotted-control-radius, 4px);
+    border-radius: var(--slotted-radius-full, 9999px);
     color: var(--slotted-tabs-dismiss-color, var(--slotted-text-muted, GrayText));
     cursor: pointer;
     display: inline-flex;
@@ -658,7 +660,7 @@
     inline-size: var(--_dismiss-size);
     justify-content: center;
     margin-inline-end: calc(var(--_padding-inline) - var(--_dismiss-overhang));
-    margin-inline-start: max(0px, calc(var(--_inner-gap) - var(--_dismiss-overhang)));
+    margin-inline-start: calc(var(--_padding-inline) - var(--_dismiss-overhang));
     padding: 0;
     transition:
       background-color var(--slotted-control-transition-duration)
@@ -693,9 +695,9 @@
     > [data-part='dismiss']:not(:disabled):hover {
     background-color: var(
       --slotted-tabs-dismiss-hover-background,
-      var(--slotted-tone-danger-surface)
+      var(--slotted-tone-secondary-subtle-hover)
     );
-    color: var(--slotted-tabs-dismiss-hover-color, var(--slotted-tone-danger-text));
+    color: var(--slotted-tabs-dismiss-hover-color, var(--slotted-text, CanvasText));
   }
 
   [data-ui='tabs']
@@ -704,9 +706,9 @@
     > [data-part='dismiss']:not(:disabled):active {
     background-color: var(
       --slotted-tabs-dismiss-active-background,
-      var(--slotted-tone-danger-border)
+      var(--slotted-tone-secondary-subtle-active)
     );
-    color: var(--slotted-tabs-dismiss-active-color, var(--slotted-text-inverse));
+    color: var(--slotted-tabs-dismiss-active-color, var(--slotted-text, CanvasText));
   }
 
   [data-ui='tabs']

package/src/tabs/tabs.tokens.json

@@ -36,6 +36,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",
@@ -70,13 +71,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/src/toggle/toggle.css

@@ -235,6 +235,47 @@
     transition-duration: var(--slotted-duration-instant);
   }
 
+  /**
+   * ── Chips ──────────────────────────────────────────────────────────────
+   *
+   * The same chip `toggle-group` draws: a rounded item with the control edge,
+   * pressed in the neutral tone's ink.
+   */
+  [data-ui='toggle'][data-part='root'][data-variant='chips'] {
+    border-color: var(--_border-color);
+    border-radius: var(--slotted-toggle-chips-radius, var(--slotted-radius-full, 9999px));
+    font-weight: var(--slotted-font-weight-medium, 500);
+  }
+
+  [data-ui='toggle'][data-part='root'][data-variant='chips'][data-pressed]:not(:disabled):not(
+      [data-disabled]
+    ),
+  [data-ui='toggle'][data-part='root'][data-variant='chips'][data-pressed]:active:not(
+      :disabled
+    ):not([data-disabled]) {
+    background: var(
+      --slotted-toggle-chips-pressed-background,
+      var(--slotted-tone-neutral-solid, CanvasText)
+    );
+    border-color: var(
+      --slotted-toggle-chips-pressed-background,
+      var(--slotted-tone-neutral-solid, CanvasText)
+    );
+    color: var(--slotted-toggle-chips-pressed-color, var(--slotted-tone-neutral-on-solid, Canvas));
+  }
+
+  [data-ui='toggle'][data-part='root'][data-variant='chips'][data-pressed]:hover:not(:disabled):not(
+      [data-disabled]
+    ) {
+    background: var(--slotted-tone-neutral-solid-hover, CanvasText);
+    border-color: var(--slotted-tone-neutral-solid-hover, CanvasText);
+  }
+
+  [data-ui='toggle'][data-part='root'][data-variant='chips']:disabled,
+  [data-ui='toggle'][data-part='root'][data-variant='chips'][data-disabled] {
+    border-color: var(--slotted-disabled-border, GrayText);
+  }
+
   /* ── Focus ────────────────────────────────────────────────────────────── */
 
   /**

package/src/toggle/toggle.tokens.json

@@ -31,9 +31,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",
@@ -49,6 +54,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/src/toggle-group/toggle-group.css

@@ -392,6 +392,56 @@
     transition-duration: var(--slotted-duration-instant);
   }
 
+  /**
+   * ── Chips ──────────────────────────────────────────────────────────────
+   *
+   * A short list of choices as separate rounded items that wrap onto a second
+   * line rather than overflow, never joined into a bar. A chip at rest has the
+   * control edge; the pressed one is the neutral tone's ink — its solid ground
+   * under its own label — which is the one state a chip has to say at a
+   * glance. Hover and press move the ground of a chip at rest only.
+   */
+  [data-ui='toggle-group'][data-part='root'][data-variant='chips'] {
+    flex-wrap: wrap;
+    gap: var(--slotted-toggle-group-chips-gap, var(--slotted-space-3, 0.375rem));
+  }
+
+  [data-ui='toggle-group'][data-part='root'][data-variant='chips'] [data-part='item'] {
+    border-color: var(--_border-color);
+    border-radius: var(--slotted-toggle-group-chips-radius, var(--slotted-radius-full, 9999px));
+    font-weight: var(--slotted-font-weight-medium, 500);
+  }
+
+  [data-ui='toggle-group'][data-part='root'][data-variant='chips']
+    [data-part='item'][data-pressed]:not(:disabled):not([data-disabled]),
+  [data-ui='toggle-group'][data-part='root'][data-variant='chips']
+    [data-part='item'][data-pressed]:active:not(:disabled):not([data-disabled]) {
+    background: var(
+      --slotted-toggle-group-chips-pressed-background,
+      var(--slotted-tone-neutral-solid, CanvasText)
+    );
+    border-color: var(
+      --slotted-toggle-group-chips-pressed-background,
+      var(--slotted-tone-neutral-solid, CanvasText)
+    );
+    color: var(
+      --slotted-toggle-group-chips-pressed-color,
+      var(--slotted-tone-neutral-on-solid, Canvas)
+    );
+  }
+
+  [data-ui='toggle-group'][data-part='root'][data-variant='chips']
+    [data-part='item'][data-pressed]:hover:not(:disabled):not([data-disabled]) {
+    background: var(--slotted-tone-neutral-solid-hover, CanvasText);
+    border-color: var(--slotted-tone-neutral-solid-hover, CanvasText);
+  }
+
+  [data-ui='toggle-group'][data-part='root'][data-variant='chips'] [data-part='item']:disabled,
+  [data-ui='toggle-group'][data-part='root'][data-variant='chips']
+    [data-part='item'][data-disabled] {
+    border-color: var(--slotted-disabled-border, GrayText);
+  }
+
   /* ── Focus ────────────────────────────────────────────────────────────── */
 
   /**

package/src/toggle-group/toggle-group.tokens.json

@@ -31,9 +31,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",
@@ -49,6 +56,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"
 ]