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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@slotted/styles",
-  "version": "0.1.0-beta.2",
+  "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;

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/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/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/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

@@ -446,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",

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/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"
 ]