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

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

@@ -41,7 +41,7 @@
    * the name that says so, which is the convention `docs/build-briefing.md`
    * sets. They are not design tokens and no theme writes them.
    */
-  [data-ui='segmented-control'][data-part='root'] {
+  [data-ui-segmented-control][data-part-root] {
     --_count: var(--slotted-segmented-control-count, 1);
     --_index: var(--slotted-segmented-control-index, 0);
     --_height: var(--slotted-control-height-md, 34px);
@@ -59,6 +59,8 @@
     --_inset: var(--slotted-segmented-control-inset, var(--slotted-space-1, 0.125rem));
     /** What is left for a segment once the track has taken its edge and ring. */
     --_inner: calc(var(--_height) - (var(--_inset) + var(--_border-width)) * 2);
+    /** The space between two segments: the ring's own step. */
+    --_spacing: var(--slotted-segmented-control-gap, var(--_inset));
     /** The thumb's corner, kept concentric with the track's own. */
     --_thumb-radius: max(calc(var(--_radius) - var(--_inset)), var(--slotted-radius-xs, 2px));
     /**
@@ -69,15 +71,22 @@
      */
     --_travel: var(--slotted-duration-medium);
 
-    /* A control in a row of controls: the fill, edge and lift a field has. */
-    background: var(--slotted-segmented-control-background, var(--slotted-control-surface, Field));
-    border: var(--_border-width) solid
-      var(
-        --slotted-segmented-control-border-color,
-        var(--slotted-control-border-color, ButtonBorder)
-      );
+    /**
+     * A neutral track: the page's own ink at a low alpha rather than an opaque
+     * fill, so it darkens whatever it stands on — a surface, a sunken panel, a
+     * card header — by the same step, and reads as a recess in each. The edge
+     * keeps its width and is transparent by default, so the arithmetic below is
+     * the same with a theme's edge and without one. An accent track with an
+     * accent thumb edge was the first appearance: a coloured outline on a row
+     * of neutral controls read as an alert before it read as a choice.
+     */
+    background: var(
+      --slotted-segmented-control-background,
+      color-mix(in oklab, var(--slotted-text, CanvasText) 6%, transparent)
+    );
+    border: var(--_border-width) solid var(--slotted-segmented-control-border-color, transparent);
     border-radius: var(--_radius);
-    box-shadow: var(--slotted-segmented-control-shadow, var(--slotted-control-shadow, none));
+    box-shadow: var(--slotted-segmented-control-shadow, none);
     box-sizing: border-box;
     display: inline-grid;
     font-family: var(--slotted-control-font-family, system-ui, sans-serif);
@@ -87,8 +96,15 @@
      * sized grid resolves every track to the largest content contribution, so
      * the rule Carbon states — base the width on the longest label, and give
      * every segment that width — falls out of the layout.
+     *
+     * The column carries the segment's floor, and the segment none of its own:
+     * a segment with a minimum inside a column that could shrink below it ran
+     * past its column in a narrow container, while the thumb, a column wide,
+     * did not — the thumb and its segment no longer matched, and the label
+     * overflowed the track.
      */
-    grid-auto-columns: minmax(0, 1fr);
+    gap: var(--_spacing);
+    grid-auto-columns: minmax(max(var(--_inner), var(--slotted-target-min, 24px)), 1fr);
     grid-auto-flow: column;
     isolation: isolate;
     min-inline-size: 0;
@@ -96,13 +112,13 @@
     position: relative;
   }
 
-  [data-ui='segmented-control'][data-part='root']:empty {
+  [data-ui-segmented-control][data-part-root]:empty {
     display: none;
   }
 
   /* ── Size ─────────────────────────────────────────────────────────────── */
 
-  [data-ui='segmented-control'][data-part='root'][data-size='sm'] {
+  [data-ui-segmented-control][data-part-root][data-size='sm'] {
     --_height: var(--slotted-control-height-sm, 30px);
     --_padding-inline: var(--slotted-control-padding-inline-sm, 10px);
     --_font-size: var(--slotted-control-font-size-sm, 12px);
@@ -110,7 +126,7 @@
     --_gap: var(--slotted-control-gap-sm, 6px);
   }
 
-  [data-ui='segmented-control'][data-part='root'][data-size='lg'] {
+  [data-ui-segmented-control][data-part-root][data-size='lg'] {
     --_height: var(--slotted-control-height-lg, 38px);
     --_padding-inline: var(--slotted-control-padding-inline-lg, 16px);
     --_font-size: var(--slotted-control-font-size-lg, 14px);
@@ -120,13 +136,13 @@
 
   /* ── Orientation and width ────────────────────────────────────────────── */
 
-  [data-ui='segmented-control'][data-part='root'][data-orientation='vertical'] {
+  [data-ui-segmented-control][data-part-root][data-orientation='vertical'] {
     grid-auto-columns: auto;
     grid-auto-flow: row;
     grid-auto-rows: minmax(0, 1fr);
   }
 
-  [data-ui='segmented-control'][data-part='root'][data-full-width] {
+  [data-ui-segmented-control][data-part-root][data-full-width] {
     display: grid;
     inline-size: 100%;
   }
@@ -148,7 +164,7 @@
    * words at a width it chose for itself is a question with no answer — it
    * chose a width that fits them.
    */
-  [data-ui='segmented-control'][data-part='root'][data-condense='icons'] {
+  [data-ui-segmented-control][data-part-root][data-condense='icons'] {
     container-name: slotted-segmented-control;
     container-type: inline-size;
     display: grid;
@@ -157,7 +173,7 @@
 
   /* ── The segment ──────────────────────────────────────────────────────── */
 
-  [data-ui='segmented-control'] [data-part='item'] {
+  [data-ui-segmented-control] [data-part-item] {
     align-items: center;
     block-size: var(--_inner);
     border-radius: var(--_thumb-radius);
@@ -172,7 +188,10 @@
     color: var(--slotted-segmented-control-color, var(--slotted-text, ButtonText));
     cursor: pointer;
     display: flex;
-    font-weight: var(--slotted-control-font-weight, 600);
+    font-weight: var(
+      --slotted-segmented-control-font-weight,
+      var(--slotted-font-weight-medium, 500)
+    );
     gap: var(--_gap);
     justify-content: center;
     letter-spacing: var(--slotted-control-letter-spacing, 0);
@@ -180,66 +199,95 @@
     /**
      * The thumb is shorter than the control it lives in, so at the smallest
      * step and the tightest density it is eighteen pixels tall. The WCAG
-     * minimum is the floor across the segment, and the radio below reaches the
-     * track's own edge to meet it in the other axis.
+     * minimum is the column's floor across the segment, and the radio below
+     * reaches the track's own edge to meet it in the other axis.
      */
-    min-inline-size: max(var(--_inner), var(--slotted-target-min, 24px));
+    min-inline-size: 0;
     padding-inline: var(--_padding-inline);
+    /**
+     * Positioned without a `z-index`: the segment paints after the thumb, which
+     * comes first in the DOM, so its words lie over the thumb, and its divider
+     * and its hover ground — pseudo-elements at `z-index: -1` — lie under it.
+     * A segment at `z-index: 1` lifted both over the thumb as well, and a thumb
+     * crossing a hovered segment or a divider lost part of its edge for the
+     * length of the slide.
+     */
     position: relative;
-    transition:
-      background-color var(--slotted-control-transition-duration)
-        var(--slotted-control-transition-easing),
-      color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing);
-    /* Above the thumb, which is painted behind every segment. */
-    z-index: 1;
+    transition: color var(--slotted-control-transition-duration)
+      var(--slotted-control-transition-easing);
+  }
+
+  /** The hover and press ground, under the thumb; see the segment above. */
+  [data-ui-segmented-control] [data-part-item]::after {
+    background: transparent;
+    border-radius: inherit;
+    content: '';
+    inset: 0;
+    position: absolute;
+    transition: background-color var(--slotted-control-transition-duration)
+      var(--slotted-control-transition-easing);
+    z-index: -1;
   }
 
   /* An empty label is no label: a binding that always renders the span must
      not leave a flex gap after the icon of a segment without words. */
-  [data-ui='segmented-control'] [data-part='item']:not(:has([data-part='label']:not(:empty))) {
+  [data-ui-segmented-control] [data-part-item]:not(:has([data-part-label]:not(:empty))) {
     padding-inline: 0;
   }
 
-  [data-ui='segmented-control'] [data-part='label']:empty {
+  [data-ui-segmented-control] [data-part-label]:empty {
     display: none;
   }
 
   /**
-   * ── The rule between two segments ─────────────────────────────────────
+   * ── Between two segments ──────────────────────────────────────────────
+   *
+   * Segments stand apart by the same step as the ring of track around them,
+   * so each one — its hover ground, the thumb on it — is a shape of its own
+   * on the track, and a rule in the middle of that room says the control is
+   * divided: a track of words with nothing between them reads as a sentence.
    *
-   * A track of words with nothing between them reads as a sentence. The rule
-   * is what says the control is divided, and it is what Mantine ships on by
-   * default, Apple draws, and Carbon draws. It is shorter than the segment, so
-   * it reads as a divider rather than as a second frame, and it gives way
-   * around the thumb — a grey line touching the accent edge is the "border
-   * inside a border" this family had to correct elsewhere.
+   * The rule is centred in the gap rather than on a segment's edge, half the
+   * segment's height, rounded at its ends, in a light tint of the ink rather
+   * than an opaque border colour. It gives way wherever it would touch a
+   * shape: beside the thumb, and beside the segment under the pointer, whose
+   * ground would otherwise meet it. It lies under the thumb, so a thumb that
+   * crosses it while sliding passes over it.
    */
-  [data-ui='segmented-control'] [data-part='item'] + [data-part='item']::before {
+  [data-ui-segmented-control] [data-part-item] + [data-part-item]::before {
     /* No system colour behind it: an unthemed decoration disappears rather
        than shouting, which is what `fallbacks.test.mjs` holds a pseudo-element
-       to. The rule is a decoration — what divides the segments in forced
-       colours is the thumb's own border. */
-    background: var(--slotted-segmented-control-divider-color, var(--slotted-border-subtle));
+       to. In forced colours the thumb's own edge is what divides. */
+    background: var(
+      --slotted-segmented-control-divider-color,
+      color-mix(in oklab, var(--slotted-text) 14%, transparent)
+    );
+    border-radius: var(--slotted-radius-full, 9999px);
     content: '';
     inline-size: var(--_border-width);
-    inset-block: 22%;
-    inset-inline-start: 0;
+    inset-block: 25%;
+    inset-inline-start: calc((var(--_spacing) + var(--_border-width)) / -2);
     position: absolute;
     transition: opacity var(--_travel) var(--slotted-easing-standard);
+    z-index: -1;
   }
 
-  [data-ui='segmented-control'][data-part='root'][data-orientation='vertical']
-    [data-part='item']
-    + [data-part='item']::before {
+  [data-ui-segmented-control][data-part-root][data-orientation='vertical']
+    [data-part-item]
+    + [data-part-item]::before {
     block-size: var(--_border-width);
     inline-size: auto;
-    inset-block: auto;
-    inset-block-start: 0;
-    inset-inline: 22%;
+    inset-block: calc((var(--_spacing) + var(--_border-width)) / -2) auto;
+    inset-inline: 25%;
   }
 
-  [data-ui='segmented-control'] [data-part='item'][data-checked]::before,
-  [data-ui='segmented-control'] [data-part='item'][data-checked] + [data-part='item']::before {
+  [data-ui-segmented-control] [data-part-item][data-checked]::before,
+  [data-ui-segmented-control] [data-part-item][data-checked] + [data-part-item]::before,
+  [data-ui-segmented-control][data-part-root]:not([data-readonly])
+    [data-part-item]:hover:has([data-part-control]:enabled)::before,
+  [data-ui-segmented-control][data-part-root]:not([data-readonly])
+    [data-part-item]:hover:has([data-part-control]:enabled)
+    + [data-part-item]::before {
     opacity: 0;
   }
 
@@ -250,21 +298,23 @@
    * thumb's — which is what keeps the smallest step at the tightest density
    * above the WCAG minimum.
    */
-  [data-ui='segmented-control'] [data-part='control'] {
+  [data-ui-segmented-control] [data-part-control] {
     appearance: none;
     background: none;
     border: 0;
     border-radius: inherit;
     cursor: inherit;
     inset-block: calc(-1 * (var(--_inset) + var(--_border-width)));
-    inset-inline: 0;
+    /* Half the space on each side, so the room between two segments is not a
+       place a press lands on nothing. */
+    inset-inline: calc(var(--_spacing) / -2);
     margin: 0;
     opacity: 0;
     padding: 0;
     position: absolute;
   }
 
-  [data-ui='segmented-control'] [data-part='icon'] {
+  [data-ui-segmented-control] [data-part-icon] {
     block-size: var(--_icon-size);
     display: inline-flex;
     flex: none;
@@ -276,8 +326,13 @@
    * narrow clips rather than wrapping the segment onto a second line. The
    * string stays whole in the DOM: truncation never removes content.
    */
-  [data-ui='segmented-control'] [data-part='label'] {
-    overflow: hidden;
+  [data-ui-segmented-control] [data-part-label] {
+    /* Clipped along the line only: `hidden` on a one-line box cut the
+       descenders and the accents above the cap height. A clipped box is not a
+       scroll container, so the flex minimum is given back by hand, or the words
+       would hold their full width and run into the next segment. */
+    min-inline-size: 0;
+    overflow-x: clip;
     text-overflow: ellipsis;
     white-space: nowrap;
   }
@@ -306,21 +361,34 @@
    * it in where it belongs rather than sliding it from an edge the reader has
    * never seen — which is what Mantine does.
    */
-  [data-ui='segmented-control'] [data-part='indicator'] {
+  [data-ui-segmented-control] [data-part-indicator] {
+    /* A raised surface with a hairline and the lightest elevation: the chosen
+       segment sits on the track rather than being painted into it. In a dark
+       scheme the raised surface is darker than the tinted track, and a thumb
+       darker than its track reads as a hole, so it takes a step of the ink. */
     background: var(
       --slotted-segmented-control-indicator-background,
-      var(--slotted-tone-accent-subtle-active, Highlight)
+      light-dark(
+        var(--slotted-surface-raised, Canvas),
+        color-mix(
+          in oklab,
+          var(--slotted-text, CanvasText) 14%,
+          var(--slotted-surface-raised, Canvas)
+        )
+      )
     );
     block-size: calc(100% - var(--_inset) * 2);
     border: var(--_border-width) solid
       var(
         --slotted-segmented-control-indicator-border-color,
-        var(--slotted-tone-accent-border, Highlight)
+        color-mix(in oklab, var(--slotted-text, CanvasText) 10%, transparent)
       );
     border-radius: var(--_thumb-radius);
-    box-shadow: var(--slotted-control-shadow, none);
+    box-shadow: var(--slotted-segmented-control-indicator-shadow, var(--slotted-shadow-xs, none));
     box-sizing: border-box;
-    inline-size: calc((100% - var(--_inset) * 2) / var(--_count));
+    inline-size: calc(
+      (100% - var(--_inset) * 2 - var(--_spacing) * (var(--_count) - 1)) / var(--_count)
+    );
     inset-block-start: var(--_inset);
     inset-inline-start: var(--_inset);
     pointer-events: none;
@@ -328,7 +396,7 @@
     transition:
       opacity var(--slotted-control-transition-duration) var(--slotted-easing-standard),
       translate var(--_travel) var(--slotted-easing-standard);
-    translate: calc(var(--_index) * 100%);
+    translate: calc(var(--_index) * (100% + var(--_spacing)));
     z-index: 0;
 
     @starting-style {
@@ -336,15 +404,16 @@
     }
   }
 
-  [data-ui='segmented-control'] [data-part='indicator']:dir(rtl) {
-    translate: calc(var(--_index) * -100%);
+  [data-ui-segmented-control] [data-part-indicator]:dir(rtl) {
+    translate: calc(var(--_index) * (-100% - var(--_spacing)));
   }
 
-  [data-ui='segmented-control'][data-part='root'][data-orientation='vertical']
-    [data-part='indicator'] {
-    block-size: calc((100% - var(--_inset) * 2) / var(--_count));
+  [data-ui-segmented-control][data-part-root][data-orientation='vertical'] [data-part-indicator] {
+    block-size: calc(
+      (100% - var(--_inset) * 2 - var(--_spacing) * (var(--_count) - 1)) / var(--_count)
+    );
     inline-size: calc(100% - var(--_inset) * 2);
-    translate: 0 calc(var(--_index) * 100%);
+    translate: 0 calc(var(--_index) * (100% + var(--_spacing)));
   }
 
   /**
@@ -355,11 +424,8 @@
    * was, because a label that thickens when it is chosen moves every label
    * beside it.
    */
-  [data-ui='segmented-control'] [data-part='item'][data-checked] {
-    color: var(
-      --slotted-segmented-control-checked-color,
-      var(--slotted-tone-accent-text, HighlightText)
-    );
+  [data-ui-segmented-control] [data-part-item][data-checked] {
+    color: var(--slotted-segmented-control-checked-color, var(--slotted-text, CanvasText));
   }
 
   /* ── Hover and press, held back for every stronger state ──────────────── */
@@ -373,13 +439,13 @@
    * records — a tinted hover on a row of choices reads as a row of status
    * chips before it reads as one of them being pointed at.
    */
-  [data-ui='segmented-control'][data-part='root']: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]:not([data-readonly])
+    [data-part-item]:hover:not([data-disabled]):not([data-checked]):has(
+      [data-part-control]:enabled
+    )::after {
     background: var(
       --slotted-segmented-control-hover-background,
-      var(--slotted-tone-secondary-subtle-hover, ButtonFace)
+      color-mix(in oklab, var(--slotted-text) 5%, transparent)
     );
   }
 
@@ -388,13 +454,13 @@
    * own pace, which is the rule every activating family here writes: the
    * duration belongs to the state being entered.
    */
-  [data-ui='segmented-control'][data-part='root']:not([data-readonly])
-    [data-part='item']:active:not([data-disabled]):not([data-checked]):has(
-      [data-part='control']:enabled
-    ) {
+  [data-ui-segmented-control][data-part-root]:not([data-readonly])
+    [data-part-item]:active:not([data-disabled]):not([data-checked]):has(
+      [data-part-control]:enabled
+    )::after {
     background: var(
       --slotted-segmented-control-active-background,
-      var(--slotted-tone-secondary-subtle-active, ButtonFace)
+      color-mix(in oklab, var(--slotted-text) 9%, transparent)
     );
     transition-duration: var(--slotted-duration-instant);
   }
@@ -421,13 +487,13 @@
    * it, so a segment that is both checked and focused shows one ring rather
    * than a ring and a border a pixel apart.
    */
-  [data-ui='segmented-control'] [data-part='item']:has([data-part='control']:focus-visible) {
+  [data-ui-segmented-control] [data-part-item]:has([data-part-control]:focus-visible) {
     outline: var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);
     outline-offset: calc(-1 * var(--slotted-focus-ring-width, 2px));
     z-index: 2;
   }
 
-  [data-ui='segmented-control'] [data-part='control']:focus-visible {
+  [data-ui-segmented-control] [data-part-control]:focus-visible {
     outline: none;
   }
 
@@ -438,7 +504,7 @@
    * that draws one, which is what `--slotted-focus-ring-color-invalid` exists
    * for and what keeps the outline and its shadow the same colour.
    */
-  [data-ui='segmented-control'][data-part='root'][data-invalid] {
+  [data-ui-segmented-control][data-part-root][data-invalid] {
     --slotted-focus-ring-color: var(
       --slotted-segmented-control-invalid-focus-ring-color,
       var(--slotted-focus-ring-color-invalid, Highlight)
@@ -474,14 +540,14 @@
    * legible, still focusable and still copyable, and it must not be mistaken
    * for a disabled one — which is what `docs/component-features.md` §2.5 asks.
    */
-  [data-ui='segmented-control'][data-part='root'][data-readonly] [data-part='item'],
-  [data-ui='segmented-control'][data-part='root'][data-readonly] [data-part='control'] {
+  [data-ui-segmented-control][data-part-root][data-readonly] [data-part-item],
+  [data-ui-segmented-control][data-part-root][data-readonly] [data-part-control] {
     cursor: default;
   }
 
   /* ── Disabled ─────────────────────────────────────────────────────────── */
 
-  [data-ui='segmented-control'] [data-part='item'][data-disabled] {
+  [data-ui-segmented-control] [data-part-item][data-disabled] {
     color: var(
       --slotted-segmented-control-disabled-color,
       var(--slotted-disabled-foreground, GrayText)
@@ -489,7 +555,7 @@
     cursor: default;
   }
 
-  [data-ui='segmented-control'] [data-part='control']:disabled {
+  [data-ui-segmented-control] [data-part-control]:disabled {
     cursor: default;
   }
 
@@ -501,14 +567,14 @@
    * is the ground the thumb is read against, so it is the one thing that has
    * to stay.
    */
-  [data-ui='segmented-control'][data-part='root'][data-disabled] {
+  [data-ui-segmented-control][data-part-root][data-disabled] {
     border-color: var(
       --slotted-segmented-control-disabled-border-color,
       var(--slotted-disabled-border, GrayText)
     );
   }
 
-  [data-ui='segmented-control'][data-part='root'][data-disabled] [data-part='indicator'] {
+  [data-ui-segmented-control][data-part-root][data-disabled] [data-part-indicator] {
     background: var(
       --slotted-segmented-control-disabled-indicator-background,
       var(--slotted-disabled-background, ButtonFace)
@@ -520,6 +586,87 @@
     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,
+  [data-ui-segmented-control][data-part-root][data-variant='underline'] [data-part-item]::after {
+    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 ────────────────────────────────────────────────────────── */
 
   /**
@@ -533,9 +680,9 @@
    * because `@container (max-inline-size: var(--x))` is invalid CSS.
    */
   @container slotted-segmented-control (max-inline-size: 20rem) {
-    [data-ui='segmented-control'][data-part='root'][data-condense='icons']
-      [data-part='item']:has([data-part='icon'])
-      [data-part='label'] {
+    [data-ui-segmented-control][data-part-root][data-condense='icons']
+      [data-part-item]:has([data-part-icon])
+      [data-part-label] {
       block-size: 1px;
       clip-path: inset(50%);
       inline-size: 1px;
@@ -544,8 +691,8 @@
       white-space: nowrap;
     }
 
-    [data-ui='segmented-control'][data-part='root'][data-condense='icons']
-      [data-part='item']:has([data-part='icon']) {
+    [data-ui-segmented-control][data-part-root][data-condense='icons']
+      [data-part-item]:has([data-part-icon]) {
       padding-inline: 0;
     }
   }
@@ -556,7 +703,17 @@
    * ring belongs to a segment and leaves it alone.
    */
   @media (forced-colors: active) {
-    [data-ui='segmented-control'][data-part='root'][data-invalid] {
+    /* The neutral track is a tint, and a tint flattens to Canvas: the edge
+       says where the control is, and the thumb's edge says which is chosen. */
+    [data-ui-segmented-control][data-part-root]:not([data-variant='underline']) {
+      border-color: ButtonBorder;
+    }
+
+    [data-ui-segmented-control] [data-part-indicator] {
+      border-color: Highlight;
+    }
+
+    [data-ui-segmented-control][data-part-root][data-invalid] {
       outline: var(--_invalid-edge-width) solid CanvasText;
       outline-offset: calc(-1 * (var(--_border-width) + var(--_invalid-edge-width)));
     }