@slotted/styles 0.1.0-beta.5 → 0.1.0-beta.7

package/package.json

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

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

@@ -82,6 +82,16 @@
     /** The box a row's mark occupies: a control's own size, so the two agree. */
     --_row-mark: var(--slotted-app-shell-row-mark-size, var(--slotted-control-height-md, 34px));
     --_row-gap: var(--slotted-control-gap-md, 8px);
+    /**
+     * How far a focus ring drawn outside a control reaches past its box: the
+     * ring's width and its offset, 4px with the default theme. The three parts
+     * of the navigation column pad their inline sides by it, because the body
+     * scrolls and clips at its padding box, and a full-width control's ring
+     * stood outside that box on both sides.
+     */
+    --_row-ring-inset: calc(
+      var(--slotted-focus-ring-width, 2px) + var(--slotted-focus-ring-offset, 2px)
+    );
 
     /**
      * A row's type. A list of destinations is text and not a control, so it
@@ -495,7 +505,19 @@
     gap: var(--_row-gap);
     min-block-size: var(--_rail-size);
     min-inline-size: 0;
+    /**
+     * The gutter the body reserves, reserved here too. `scrollbar-gutter`
+     * applies to a scroll container only, and `hidden` is the overflow that
+     * makes one without a bar of its own: with classic scrollbars the body's
+     * content box ended one bar width (10px in Chrome) before the head's and
+     * the foot's. Nothing is clipped that was drawn before: the ring inset
+     * keeps a control's focus ring inside the padding box. The bar's width is
+     * the body's, or the gutter is the platform's full bar (15px in Chrome).
+     */
+    overflow: hidden;
     padding-block: var(--_row-inset);
+    scrollbar-gutter: stable;
+    scrollbar-width: thin;
   }
   /**
    * The inset is the rows', not the region's: on the parts, a seam drawn by
@@ -505,7 +527,13 @@
   [data-ui='app-shell']
     > [data-part='nav']
     > :is([data-part='nav-header'], [data-part='nav-body'], [data-part='nav-footer']) {
-    padding-inline: var(--_nav-inset);
+    /**
+     * Published where it pads, beside the row geometry the root publishes:
+     * `side-navigation` reads it to keep its rows' box on the edge it had,
+     * and a row it reaches outside these parts reads nothing.
+     */
+    --slotted-app-shell-row-ring-inset: var(--_row-ring-inset);
+    padding-inline: calc(var(--_nav-inset) + var(--_row-ring-inset));
   }
   /**
    * The body scrolls the way `scroll-area` scrolls, and for the reasons written
@@ -1221,6 +1249,19 @@
     border-start-end-radius: 0;
     margin-inline-end: 0;
   }
+
+  /**
+   * The seam re-read in each region's scope. `--_seam` declared on the root
+   * holds the root's `--slotted-app-shell-border-color`, so the property written
+   * on a region recoloured nothing. Declared again on every region, the chain
+   * resolves where the region stands: a colour written there recolours the
+   * seams the region and its parts draw, and `transparent` removes them. The
+   * tone rules below state the same two declarations at a higher specificity.
+   */
+  [data-ui='app-shell'] > [data-part] {
+    --_rule: var(--slotted-app-shell-border-color, var(--slotted-border-subtle, ButtonBorder));
+    --_seam: var(--_rule-width) solid var(--_rule);
+  }
   /* ── Separation by tone ──────────────────────────────────────────────── */
 
   /**
@@ -1238,7 +1279,8 @@
    * where it is declared, and a region carrying a scheme of its own must mix
    * its own ink.
    */
-  [data-ui='app-shell'][data-separation='tone'] {
+  [data-ui='app-shell'][data-separation='tone'],
+  [data-ui='app-shell'][data-separation='tone'] > [data-part] {
     --_seam: none;
     --_seam-width: 0px;
   }
@@ -1365,7 +1407,7 @@
   [data-ui='app-shell']
     > [data-part='nav']:has(> [data-part='nav-rail'])
     > :is([data-part='nav-header'], [data-part='nav-body'], [data-part='nav-footer']) {
-    padding-inline-start: var(--_row-inset);
+    padding-inline-start: calc(var(--_row-inset) + var(--_row-ring-inset));
     transition: visibility var(--_duration) step-start;
   }
   [data-ui='app-shell'][data-nav-mode='inline'][data-open]
@@ -1400,7 +1442,8 @@
    * a forced-colours rule of its own for.
    */
   @media (forced-colors: active) {
-    [data-ui='app-shell'][data-separation='tone'] {
+    [data-ui='app-shell'][data-separation='tone'],
+    [data-ui='app-shell'][data-separation='tone'] > [data-part] {
       --_seam: var(--_rule-width) solid CanvasText;
       --_seam-width: var(--_rule-width);
     }
@@ -1501,8 +1544,12 @@
    * mode at any width. The container query further down is the fallback for
    * the frame before the binding has measured, and nothing else.
    */
+  /* The rail holds the parts' ring inset on each side as well, so a control
+     at the mark's size keeps its focus ring inside the body beside the gutter. */
   [data-ui='app-shell'][data-nav-mode='inline'] > [data-part='nav'] {
-    inline-size: calc(var(--_rail-size) + 2 * var(--_nav-inset) + var(--_nav-edges));
+    inline-size: calc(
+      var(--_rail-size) + 2 * (var(--_nav-inset) + var(--_row-ring-inset)) + var(--_nav-edges)
+    );
   }
   [data-ui='app-shell'][data-nav-mode='inline'][data-open] > [data-part='nav'] {
     inline-size: var(--_nav-size);
@@ -1779,7 +1826,9 @@
    */
   @container slotted-app-shell (inline-size >= 600px) {
     [data-ui='app-shell']:not([data-nav-mode]) > [data-part='nav'] {
-      inline-size: calc(var(--_rail-size) + 2 * var(--_nav-inset) + var(--_nav-edges));
+      inline-size: calc(
+        var(--_rail-size) + 2 * (var(--_nav-inset) + var(--_row-ring-inset)) + var(--_nav-edges)
+      );
     }
     [data-ui='app-shell']:not([data-nav-mode])[data-open] > [data-part='nav'] {
       inline-size: var(--_nav-size);

package/src/button/button.css

@@ -625,14 +625,29 @@
     position: relative;
   }
 
-  [data-ui='button'] [data-part='start'] > *:not([data-part='indicator']),
-  [data-ui='button'] [data-part='end'] > *:not([data-part='indicator']),
+  [data-ui='button'] [data-part='start'] > *:not([data-part='indicator'], [data-ui='kbd']),
+  [data-ui='button'] [data-part='end'] > *:not([data-part='indicator'], [data-ui='kbd']),
   [data-ui='button'] [data-part='icon'] > *:not([data-part='indicator']) {
     block-size: 100%;
     display: block;
     inline-size: 100%;
   }
 
+  /**
+   * A key in a slot is sized by its own family. The slot above is a glyph's
+   * box: it stated `display: block` on the key, which put the legend on a line
+   * box's baseline instead of the key's centre, sixteen pixels square, and the
+   * icon's font size, which `size="inherit"` read as the text's. Measured, a
+   * `Kbd` legend stood 1.5px above the label's centre and a `Shortcut` 1.5px
+   * below it. Here the slot takes the key's measure and the label's type, and
+   * the flex container centres the key on the label.
+   */
+  [data-ui='button'] :is([data-part='start'], [data-part='end']):has(> [data-ui='kbd']) {
+    block-size: auto;
+    font-size: inherit;
+    inline-size: auto;
+  }
+
   /**
    * The label carries a wrapping line height of its own: the control's line
    * height is 1, which centres a single line inside the box and crushes the

package/src/kbd/kbd.css

@@ -237,6 +237,10 @@
     align-items: center;
     direction: ltr;
     display: inline-flex;
+    /* The root is a `kbd`: without these it keeps the user agent's monospace
+       face and its line box, which a key in the combination does not share. */
+    font-family: var(--slotted-kbd-font-family, var(--slotted-control-font-family, sans-serif));
+    line-height: 1;
     /**
      * A shortcut wider than its column wraps between caps and never inside
      * one. The row gets taller; no instruction gets shorter.

package/src/menu/menu.css

@@ -290,6 +290,28 @@
     visibility: hidden;
   }
 
+  /**
+   * The surface as wide as its trigger: an account switcher at the foot of a
+   * sidebar, opened from a row the column's full width. The content takes the
+   * anchor's width as its size and its floor, as `popover`'s `width="anchor"`
+   * does, and the room the positioner reports caps both. The layer drops the
+   * family's floor and cap, which would hold it narrower or wider than the
+   * row. Opened above or below, the layer has no inline padding, so the
+   * content and the trigger share both edges.
+   */
+  [data-ui='menu'][data-width='anchor'] {
+    max-inline-size: var(--slotted-positioner-available-width, 100vw);
+    min-inline-size: 0;
+  }
+  [data-ui='menu'][data-width='anchor'] > [data-part='content'] {
+    inline-size: var(--slotted-positioner-anchor-width, auto);
+    max-inline-size: var(--slotted-positioner-available-width, 100vw);
+    min-inline-size: min(
+      var(--slotted-positioner-anchor-width, 0px),
+      var(--slotted-positioner-available-width, 100vw)
+    );
+  }
+
   [data-ui='menu'][data-size='sm'] {
     --_item-padding: var(--slotted-control-padding-inline-sm, 0.625rem);
     --_item-height: var(--slotted-control-height-sm, 30px);

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

@@ -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;
@@ -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,18 +199,34 @@
     /**
      * 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
@@ -205,27 +240,36 @@
   }
 
   /**
-   * ── 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 {
     /* 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']
@@ -233,13 +277,17 @@
     + [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] + [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;
   }
 
@@ -257,7 +305,9 @@
     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;
@@ -277,7 +327,12 @@
    * string stays whole in the DOM: truncation never removes content.
    */
   [data-ui='segmented-control'] [data-part='label'] {
-    overflow: hidden;
+    /* 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;
   }
@@ -307,20 +362,33 @@
    * never seen — which is what Mantine does.
    */
   [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 {
@@ -337,14 +405,16 @@
   }
 
   [data-ui='segmented-control'] [data-part='indicator']:dir(rtl) {
-    translate: calc(var(--_index) * -100%);
+    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));
+    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)));
   }
 
   /**
@@ -356,10 +426,7 @@
    * beside it.
    */
   [data-ui='segmented-control'] [data-part='item'][data-checked] {
-    color: var(
-      --slotted-segmented-control-checked-color,
-      var(--slotted-tone-accent-text, HighlightText)
-    );
+    color: var(--slotted-segmented-control-checked-color, var(--slotted-text, CanvasText));
   }
 
   /* ── Hover and press, held back for every stronger state ──────────────── */
@@ -376,10 +443,10 @@
   [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)
     );
   }
 
@@ -391,10 +458,10 @@
   [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);
   }
@@ -544,7 +611,9 @@
   [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-part='item']::before,
+  [data-ui='segmented-control'][data-part='root'][data-variant='underline']
+    [data-part='item']::after {
     display: none;
   }
 
@@ -636,6 +705,16 @@
    * ring belongs to a segment and leaves it alone.
    */
   @media (forced-colors: active) {
+    /* 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)));

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

@@ -1,13 +1,10 @@
 [
-  "--slotted-border-subtle",
   "--slotted-border-width-thick",
-  "--slotted-control-border-color",
   "--slotted-control-border-width",
   "--slotted-control-font-family",
   "--slotted-control-font-size-lg",
   "--slotted-control-font-size-md",
   "--slotted-control-font-size-sm",
-  "--slotted-control-font-weight",
   "--slotted-control-gap-lg",
   "--slotted-control-gap-md",
   "--slotted-control-gap-sm",
@@ -24,8 +21,6 @@
   "--slotted-control-padding-inline-md",
   "--slotted-control-padding-inline-sm",
   "--slotted-control-radius",
-  "--slotted-control-shadow",
-  "--slotted-control-surface",
   "--slotted-control-transition-duration",
   "--slotted-control-transition-easing",
   "--slotted-disabled-background",
@@ -39,6 +34,7 @@
   "--slotted-focus-ring-offset",
   "--slotted-focus-ring-width",
   "--slotted-font-weight-medium",
+  "--slotted-radius-full",
   "--slotted-radius-xs",
   "--slotted-segmented-control-active-background",
   "--slotted-segmented-control-background",
@@ -49,9 +45,12 @@
   "--slotted-segmented-control-disabled-color",
   "--slotted-segmented-control-disabled-indicator-background",
   "--slotted-segmented-control-divider-color",
+  "--slotted-segmented-control-font-weight",
+  "--slotted-segmented-control-gap",
   "--slotted-segmented-control-hover-background",
   "--slotted-segmented-control-indicator-background",
   "--slotted-segmented-control-indicator-border-color",
+  "--slotted-segmented-control-indicator-shadow",
   "--slotted-segmented-control-inset",
   "--slotted-segmented-control-invalid-border-color",
   "--slotted-segmented-control-invalid-edge-width",
@@ -61,15 +60,12 @@
   "--slotted-segmented-control-underline-checked-color",
   "--slotted-segmented-control-underline-color",
   "--slotted-segmented-control-underline-gap",
+  "--slotted-shadow-xs",
   "--slotted-space-1",
   "--slotted-space-6",
+  "--slotted-surface-raised",
   "--slotted-target-min",
   "--slotted-text",
   "--slotted-text-muted",
-  "--slotted-tone-accent-border",
-  "--slotted-tone-accent-subtle-active",
-  "--slotted-tone-accent-text",
-  "--slotted-tone-danger-border",
-  "--slotted-tone-secondary-subtle-active",
-  "--slotted-tone-secondary-subtle-hover"
+  "--slotted-tone-danger-border"
 ]

package/src/side-navigation/side-navigation.css

@@ -48,6 +48,13 @@
      * there is to give.
      */
     --_standoff: min(var(--slotted-space-2, 0.25rem), var(--_inset));
+    /**
+     * The inline padding `app-shell`'s navigation parts add for an outward
+     * focus ring, read so a row's box keeps the edge it had there: the row
+     * reaches back into that padding, and its own ring is drawn inside. Nought
+     * outside those parts.
+     */
+    --_ring-inset: var(--slotted-app-shell-row-ring-inset, 0px);
     --_gap: var(--slotted-app-shell-row-gap, var(--slotted-control-gap-md, 8px));
     --_font-size: var(--slotted-app-shell-row-font-size, var(--slotted-font-size-sm, 0.8125rem));
     --_line-height: var(--slotted-app-shell-row-line-height, var(--slotted-line-height-sm, 1.45));
@@ -354,11 +361,11 @@
     grid-template-columns: auto minmax(0, 1fr) auto auto;
     grid-template-rows: auto auto;
     margin-block: 0;
-    margin-inline: var(--_standoff);
+    margin-inline: calc(var(--_standoff) - var(--_ring-inset));
     min-block-size: var(--_row-height);
     min-inline-size: 0;
     padding-block: 0;
-    padding-inline: calc(var(--_inset) - var(--_standoff));
+    padding-inline: calc(var(--_inset) - var(--_standoff) + var(--_ring-inset));
     position: relative;
     text-align: start;
     text-decoration: none;

package/src/side-navigation/side-navigation.tokens.json

@@ -5,6 +5,7 @@
   "--slotted-app-shell-row-inset",
   "--slotted-app-shell-row-line-height",
   "--slotted-app-shell-row-mark",
+  "--slotted-app-shell-row-ring-inset",
   "--slotted-border-subtle",
   "--slotted-border-width-thin",
   "--slotted-control-font-family",

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

@@ -218,7 +218,7 @@
    * number is broken only when it is wider than the card itself. A floor on
    * the trend was tried and pushed the trend through the card's edge.
    */
-  @scope ([data-ui='stat-card']) to ([data-ui]:not(:scope) > *) {
+  @scope ([data-ui='stat-card']) to (:scope [data-ui] > *) {
     :scope [data-part='body'] {
       column-gap: var(--_trend-gap);
       display: grid;
@@ -234,7 +234,7 @@
     }
   }
 
-  @scope ([data-ui='stat-card']) to ([data-ui]:not(:scope) > *) {
+  @scope ([data-ui='stat-card']) to (:scope [data-ui] > *) {
     :scope[data-layout='stacked'] [data-part='body'] {
       grid-template-areas:
         'header'
@@ -254,14 +254,14 @@
    * inline axis gives these regions no intrinsic width: the figure alone
    * decides the column, and the text is cut or wrapped by the card's width.
    */
-  @scope ([data-ui='stat-card']) to ([data-ui]:not(:scope) > *) {
+  @scope ([data-ui='stat-card']) to (:scope [data-ui] > *) {
     :scope [data-part='header'] {
       contain: inline-size;
       grid-area: header;
     }
   }
 
-  @scope ([data-ui='stat-card']) to ([data-ui]:not(:scope) > *) {
+  @scope ([data-ui='stat-card']) to (:scope [data-ui] > *) {
     :scope [data-part='figure'] {
       align-self: start;
       grid-area: figure;
@@ -276,7 +276,7 @@
    * width is the space a wide value left, which a query on the card cannot
    * see.
    */
-  @scope ([data-ui='stat-card']) to ([data-ui]:not(:scope) > *) {
+  @scope ([data-ui='stat-card']) to (:scope [data-ui] > *) {
     :scope [data-part='trend'] {
       /* The marker's ring is the card's ground, not the page's. */
       --slotted-sparkline-ring-color: var(--_surface);
@@ -291,21 +291,21 @@
   }
 
   @container stat-card-trend (max-width: 39px) {
-    @scope ([data-ui='stat-card']) to ([data-ui]:not(:scope) > *) {
+    @scope ([data-ui='stat-card']) to (:scope [data-ui] > *) {
       :scope [data-part='trend'] > * {
         visibility: hidden;
       }
     }
   }
 
-  @scope ([data-ui='stat-card']) to ([data-ui]:not(:scope) > *) {
+  @scope ([data-ui='stat-card']) to (:scope [data-ui] > *) {
     :scope[data-layout='stacked'] [data-part='trend'] {
       align-self: end;
       margin-block-start: var(--slotted-space-2, 0.25rem);
     }
   }
 
-  @scope ([data-ui='stat-card']) to ([data-ui]:not(:scope) > *) {
+  @scope ([data-ui='stat-card']) to (:scope [data-ui] > *) {
     :scope [data-part='message'] {
       contain: inline-size;
       grid-area: message;
@@ -319,7 +319,7 @@
    * (`docs/token-foundation.md`, rule 4).
    */
   @container stat-card (max-width: 219px) {
-    @scope ([data-ui='stat-card']) to ([data-ui]:not(:scope) > *) {
+    @scope ([data-ui='stat-card']) to (:scope [data-ui] > *) {
       :scope [data-part='body'] {
         grid-template-areas:
           'header'
@@ -331,14 +331,14 @@
       }
     }
 
-    @scope ([data-ui='stat-card']) to ([data-ui]:not(:scope) > *) {
+    @scope ([data-ui='stat-card']) to (:scope [data-ui] > *) {
       :scope [data-part='trend'] {
         align-self: end;
         margin-block-start: var(--slotted-space-2, 0.25rem);
       }
     }
 
-    @scope ([data-ui='stat-card']) to ([data-ui]:not(:scope) > *) {
+    @scope ([data-ui='stat-card']) to (:scope [data-ui] > *) {
       :scope [data-part='value'] {
         font-size: var(--_value-size-narrow);
         line-height: var(--_value-line-narrow);
@@ -346,7 +346,7 @@
     }
 
     /* The value steps down here, and so does the line its placeholder keeps. */
-    @scope ([data-ui='stat-card']) to ([data-ui]:not(:scope) > *) {
+    @scope ([data-ui='stat-card']) to (:scope [data-ui] > *) {
       :scope[data-loading] [data-part='value'] {
         min-block-size: calc(var(--_value-size-narrow) * var(--_value-line-narrow));
       }
@@ -361,7 +361,7 @@
    * them as part of the name, instead of floating them at the middle of the
    * block.
    */
-  @scope ([data-ui='stat-card']) to ([data-ui]:not(:scope) > *) {
+  @scope ([data-ui='stat-card']) to (:scope [data-ui] > *) {
     :scope [data-part='header'] {
       align-items: baseline;
       column-gap: var(--slotted-space-3, 0.375rem);
@@ -381,7 +381,7 @@
    * proportion of the type rather than a scale step: it is a width of
    * words, and it scales with them.
    */
-  @scope ([data-ui='stat-card']) to ([data-ui]:not(:scope) > *) {
+  @scope ([data-ui='stat-card']) to (:scope [data-ui] > *) {
     :scope [data-part='label'] {
       color: var(--_ink-muted);
       flex: 1 1 0%;
@@ -394,7 +394,7 @@
     }
   }
 
-  @scope ([data-ui='stat-card']) to ([data-ui]:not(:scope) > *) {
+  @scope ([data-ui='stat-card']) to (:scope [data-ui] > *) {
     :scope [data-part='status'] {
       display: inline-flex;
       flex: none;
@@ -404,7 +404,7 @@
   /* The action takes the end of the header's first line and stays there
      when the label wraps: it is the one thing on the card the reader presses,
      and a corner is where a control is looked for. */
-  @scope ([data-ui='stat-card']) to ([data-ui]:not(:scope) > *) {
+  @scope ([data-ui='stat-card']) to (:scope [data-ui] > *) {
     :scope [data-part='action'] {
       flex: none;
       /* The label's line, so a link here is as tall in the fallback face as in
@@ -420,13 +420,13 @@
      part itself when `render` made it one — reaches
      the comfortable size in both axes, and the header keeps its height. */
   @media (pointer: coarse) {
-    @scope ([data-ui='stat-card']) to ([data-ui]:not(:scope) > *) {
+    @scope ([data-ui='stat-card']) to (:scope [data-ui] > *) {
       :scope :is([data-part='action']:is(a, button), [data-part='action'] > :is(a, button)) {
         position: relative;
       }
     }
 
-    @scope ([data-ui='stat-card']) to ([data-ui]:not(:scope) > *) {
+    @scope ([data-ui='stat-card']) to (:scope [data-ui] > *) {
       :scope
         :is([data-part='action']:is(a, button), [data-part='action'] > :is(a, button))::before {
         content: '';
@@ -444,7 +444,7 @@
    * so a delta that does not fit beside a wide number drops under it rather
    * than pushing the number.
    */
-  @scope ([data-ui='stat-card']) to ([data-ui]:not(:scope) > *) {
+  @scope ([data-ui='stat-card']) to (:scope [data-ui] > *) {
     :scope [data-part='figure'] {
       align-items: baseline;
       column-gap: var(--slotted-space-3, 0.375rem);
@@ -454,7 +454,7 @@
     }
   }
 
-  @scope ([data-ui='stat-card']) to ([data-ui]:not(:scope) > *) {
+  @scope ([data-ui='stat-card']) to (:scope [data-ui] > *) {
     :scope [data-part='comparison'] {
       contain: inline-size;
       flex: 1 1 100%;
@@ -471,7 +471,7 @@
    * to pull a large numeral's counters back together, and it is the same
    * fraction at every size.
    */
-  @scope ([data-ui='stat-card']) to ([data-ui]:not(:scope) > *) {
+  @scope ([data-ui='stat-card']) to (:scope [data-ui] > *) {
     :scope [data-part='value'] {
       /* The figure and its unit are two flex items on one baseline — the text
          node is an item of its own — so the gap spaces the unit from the digit
@@ -502,7 +502,7 @@
 
   /* The unit is in the value's own line, a step down in size and weight, so
      `$` and `%` read as annotation of the number rather than as digits. */
-  @scope ([data-ui='stat-card']) to ([data-ui]:not(:scope) > *) {
+  @scope ([data-ui='stat-card']) to (:scope [data-ui] > *) {
     :scope [data-part='unit'] {
       color: var(--_ink-muted);
       font-size: var(--_delta-size);
@@ -517,7 +517,7 @@
    * metrics, and the tone's text role already clears the reading ratio on
    * the surface. It sits on the value's baseline.
    */
-  @scope ([data-ui='stat-card']) to ([data-ui]:not(:scope) > *) {
+  @scope ([data-ui='stat-card']) to (:scope [data-ui] > *) {
     :scope [data-part='delta'] {
       align-items: center;
       color: var(--_tone-text);
@@ -535,37 +535,37 @@
     }
   }
 
-  @scope ([data-ui='stat-card']) to ([data-ui]:not(:scope) > *) {
+  @scope ([data-ui='stat-card']) to (:scope [data-ui] > *) {
     :scope [data-part='delta'][data-tone='neutral'] {
       --_tone-text: var(--_ink-muted);
     }
   }
 
-  @scope ([data-ui='stat-card']) to ([data-ui]:not(:scope) > *) {
+  @scope ([data-ui='stat-card']) to (:scope [data-ui] > *) {
     :scope [data-part='delta'][data-tone='accent'] {
       --_tone-text: var(--slotted-tone-accent-text);
     }
   }
 
-  @scope ([data-ui='stat-card']) to ([data-ui]:not(:scope) > *) {
+  @scope ([data-ui='stat-card']) to (:scope [data-ui] > *) {
     :scope [data-part='delta'][data-tone='secondary'] {
       --_tone-text: var(--slotted-tone-secondary-text);
     }
   }
 
-  @scope ([data-ui='stat-card']) to ([data-ui]:not(:scope) > *) {
+  @scope ([data-ui='stat-card']) to (:scope [data-ui] > *) {
     :scope [data-part='delta'][data-tone='success'] {
       --_tone-text: var(--slotted-tone-success-text);
     }
   }
 
-  @scope ([data-ui='stat-card']) to ([data-ui]:not(:scope) > *) {
+  @scope ([data-ui='stat-card']) to (:scope [data-ui] > *) {
     :scope [data-part='delta'][data-tone='warning'] {
       --_tone-text: var(--slotted-tone-warning-text);
     }
   }
 
-  @scope ([data-ui='stat-card']) to ([data-ui]:not(:scope) > *) {
+  @scope ([data-ui='stat-card']) to (:scope [data-ui] > *) {
     :scope [data-part='delta'][data-tone='danger'] {
       --_tone-text: var(--slotted-tone-danger-text);
     }
@@ -579,7 +579,7 @@
    * change draws `minus`. The binding renders the glyph inside the icon box;
    * the part hands the box its size, and the box inherits the delta's ink.
    */
-  @scope ([data-ui='stat-card']) to ([data-ui]:not(:scope) > *) {
+  @scope ([data-ui='stat-card']) to (:scope [data-ui] > *) {
     :scope [data-part='indicator'] {
       --slotted-icon-size: var(--_indicator-size);
 
@@ -592,7 +592,7 @@
      a rise becomes a fall. Time runs from the right in a right-to-left
      document, so the rise points the other way there, as the sparkline beside
      it does — the `directional` icon box the binding draws does that. */
-  @scope ([data-ui='stat-card']) to ([data-ui]:not(:scope) > *) {
+  @scope ([data-ui='stat-card']) to (:scope [data-ui] > *) {
     :scope [data-part='delta'][data-trend='down'] [data-part='indicator'] > [data-ui='icon'] {
       rotate: x 180deg;
     }
@@ -600,7 +600,7 @@
 
   /* ── Comparison: the prose under the figure ───────────────────────────── */
 
-  @scope ([data-ui='stat-card']) to ([data-ui]:not(:scope) > *) {
+  @scope ([data-ui='stat-card']) to (:scope [data-ui] > *) {
     :scope [data-part='comparison'] {
       color: var(--_ink-muted);
       font-size: var(--_prose-size);
@@ -612,7 +612,7 @@
     }
   }
 
-  @scope ([data-ui='stat-card']) to ([data-ui]:not(:scope) > *) {
+  @scope ([data-ui='stat-card']) to (:scope [data-ui] > *) {
     :scope [data-part='period'] {
       color: var(--_ink-muted);
     }
@@ -628,44 +628,44 @@
    * — a card with no delta, or a metric with no valence, draws its trend in
    * the theme's blue and not in grey.
    */
-  @scope ([data-ui='stat-card']) to ([data-ui]:not(:scope) > *) {
+  @scope ([data-ui='stat-card']) to (:scope [data-ui] > *) {
     :scope [data-part='trend'] {
       align-self: center;
       display: flex;
     }
   }
 
-  @scope ([data-ui='stat-card']) to ([data-ui]:not(:scope) > *) {
+  @scope ([data-ui='stat-card']) to (:scope [data-ui] > *) {
     :scope[data-tone='success'] [data-part='trend'] {
       --slotted-sparkline-color: var(--slotted-tone-success-text);
     }
   }
 
-  @scope ([data-ui='stat-card']) to ([data-ui]:not(:scope) > *) {
+  @scope ([data-ui='stat-card']) to (:scope [data-ui] > *) {
     :scope[data-tone='danger'] [data-part='trend'] {
       --slotted-sparkline-color: var(--slotted-tone-danger-text);
     }
   }
 
-  @scope ([data-ui='stat-card']) to ([data-ui]:not(:scope) > *) {
+  @scope ([data-ui='stat-card']) to (:scope [data-ui] > *) {
     :scope[data-tone='warning'] [data-part='trend'] {
       --slotted-sparkline-color: var(--slotted-tone-warning-text);
     }
   }
 
-  @scope ([data-ui='stat-card']) to ([data-ui]:not(:scope) > *) {
+  @scope ([data-ui='stat-card']) to (:scope [data-ui] > *) {
     :scope[data-tone='accent'] [data-part='trend'] {
       --slotted-sparkline-color: var(--slotted-tone-accent-text);
     }
   }
 
-  @scope ([data-ui='stat-card']) to ([data-ui]:not(:scope) > *) {
+  @scope ([data-ui='stat-card']) to (:scope [data-ui] > *) {
     :scope[data-tone='secondary'] [data-part='trend'] {
       --slotted-sparkline-color: var(--slotted-tone-secondary-text);
     }
   }
 
-  @scope ([data-ui='stat-card']) to ([data-ui]:not(:scope) > *) {
+  @scope ([data-ui='stat-card']) to (:scope [data-ui] > *) {
     :scope[data-fill='plain'] [data-part='trend'] {
       --slotted-sparkline-ring-color: var(--slotted-surface-raised, Canvas);
     }
@@ -673,7 +673,7 @@
 
   /* ── Message: what stands in for a value that is missing or failed ────── */
 
-  @scope ([data-ui='stat-card']) to ([data-ui]:not(:scope) > *) {
+  @scope ([data-ui='stat-card']) to (:scope [data-ui] > *) {
     :scope [data-part='message'] {
       color: var(--_ink-muted);
       font-size: var(--_prose-size);
@@ -684,7 +684,7 @@
     }
   }
 
-  @scope ([data-ui='stat-card']) to ([data-ui]:not(:scope) > *) {
+  @scope ([data-ui='stat-card']) to (:scope [data-ui] > *) {
     :scope[data-status='error'] [data-part='message'] {
       color: var(--slotted-tone-danger-text);
     }
@@ -692,7 +692,7 @@
 
   /* A value that is not there is a dash in the muted step, at the value's
      own size, so the row keeps its height and its rhythm. */
-  @scope ([data-ui='stat-card']) to ([data-ui]:not(:scope) > *) {
+  @scope ([data-ui='stat-card']) to (:scope [data-ui] > *) {
     :scope[data-status='empty'] [data-part='value'],
     :scope[data-status='error'] [data-part='value'] {
       color: var(--_ink-muted);
@@ -716,13 +716,13 @@
    * arrived. The floor is one line of the value's own type, so the two states
    * occupy the same box.
    */
-  @scope ([data-ui='stat-card']) to ([data-ui]:not(:scope) > *) {
+  @scope ([data-ui='stat-card']) to (:scope [data-ui] > *) {
     :scope[data-loading] [data-part='value'] {
       min-block-size: calc(var(--_value-size) * var(--_value-line));
     }
   }
 
-  @scope ([data-ui='stat-card']) to ([data-ui]:not(:scope) > *) {
+  @scope ([data-ui='stat-card']) to (:scope [data-ui] > *) {
     :scope[data-loading] [data-part='trend'] {
       --slotted-skeleton-block-size: var(
         --slotted-sparkline-block-size,
@@ -731,7 +731,7 @@
     }
   }
 
-  @scope ([data-ui='stat-card']) to ([data-ui]:not(:scope) > *) {
+  @scope ([data-ui='stat-card']) to (:scope [data-ui] > *) {
     :scope[data-loading][data-size='sm'] [data-part='trend'] {
       --slotted-skeleton-block-size: var(
         --slotted-sparkline-block-size-sm,
@@ -740,7 +740,7 @@
     }
   }
 
-  @scope ([data-ui='stat-card']) to ([data-ui]:not(:scope) > *) {
+  @scope ([data-ui='stat-card']) to (:scope [data-ui] > *) {
     :scope[data-loading][data-size='lg'] [data-part='trend'] {
       --slotted-skeleton-block-size: var(
         --slotted-sparkline-block-size-lg,

package/src/tabs/tabs.css

@@ -50,7 +50,7 @@
     /**
      * The marker: one bar the list draws under the selected tab, and the hover
      * bar under the tab the pointer is on, in the same geometry — the tab's
-     * content box, a pill on the list's edge. It is never thinner than the
+     * content box, a pill just above the list's edge. It is never thinner than the
      * thick border width, the floor the high-contrast scheme keeps for a mark
      * that carries state, and its thickness, its rounding and its inset are
      * tokens of their own: tied to the thick border width, a theme could not
@@ -62,6 +62,13 @@
     );
     --_marker-radius: var(--slotted-tabs-marker-radius, var(--slotted-radius-full, 9999px));
     --_marker-inset: var(--slotted-tabs-marker-inset, var(--_padding-inline));
+    /**
+     * The gap between the bars and the list's edge: the selected marker and the
+     * hover bar stand this far above the track, so the line reads as a line and
+     * the bar as a mark on it. An inset rather than a transform, because the
+     * marker's `translate` is its slide between tabs.
+     */
+    --_marker-offset: var(--slotted-tabs-marker-offset, 1px);
     --_track-color: var(--slotted-tabs-track-color, var(--slotted-border-subtle, ButtonBorder));
     /**
      * The length of the fade a scrolling list takes at an edge that has more
@@ -460,8 +467,8 @@
    * `--slotted-tabs-marker-inset`, which defaults to the tab's own inline
    * padding, and never the closing control: a tab followed by one gives up its
    * end padding, so the end inset is nought there. Below the width of a short
-   * label it keeps a minimum length, centred on the content. It stands on the
-   * list's edge, over the track, and the axes are physical in this one rule
+   * label it keeps a minimum length, centred on the content. It stands
+   * `--slotted-tabs-marker-offset` above the list's edge, over the track, and the axes are physical in this one rule
    * because the measurement is: the translate is from the list's left edge.
    */
   [data-ui='tabs'] > :where([data-part='list']) > [data-part='marker'] {
@@ -475,7 +482,7 @@
     block-size: var(--_marker-size);
     border-radius: var(--_marker-radius);
     inline-size: var(--_length);
-    inset-block-end: var(--_marker-lift, 0px);
+    inset-block-end: calc(var(--_marker-lift, 0px) + var(--_marker-offset));
     left: 0;
     pointer-events: none;
     position: absolute;
@@ -500,20 +507,26 @@
   }
 
   /**
-   * Placed once without motion, then it slides: the first position arrives
-   * before `data-positioned`, so the bar does not travel in from the list's
-   * corner. Under reduced motion it jumps.
+   * It slides only when the selection moves: `data-moving` arrives with a
+   * position whose tab changed, and leaves with a re-measurement of the same
+   * tab, so the first position, a font arriving and a resized list place the
+   * bar without motion. The slide takes the medium duration on a curve that
+   * starts and ends slowly, `--slotted-tabs-marker-easing`: the control
+   * duration on the theme's decelerating curve covered a third of the
+   * distance in its first frame and read as a jump. Under reduced motion it
+   * jumps.
    */
-  [data-ui='tabs'] > :where([data-part='list']) > [data-part='marker'][data-positioned] {
+  [data-ui='tabs'] > :where([data-part='list']) > [data-part='marker'][data-moving] {
+    --_marker-easing: var(--slotted-tabs-marker-easing, cubic-bezier(0.4, 0, 0.2, 1));
+
     transition:
-      translate var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),
-      inline-size var(--slotted-control-transition-duration)
-        var(--slotted-control-transition-easing),
-      block-size var(--slotted-control-transition-duration) var(--slotted-control-transition-easing);
+      translate var(--slotted-duration-medium) var(--_marker-easing),
+      inline-size var(--slotted-duration-medium) var(--_marker-easing),
+      block-size var(--slotted-duration-medium) var(--_marker-easing);
   }
 
   @media (prefers-reduced-motion: reduce) {
-    [data-ui='tabs'] > :where([data-part='list']) > [data-part='marker'][data-positioned] {
+    [data-ui='tabs'] > :where([data-part='list']) > [data-part='marker'][data-moving] {
       transition: none;
     }
   }
@@ -532,7 +545,7 @@
     block-size: var(--_marker-size);
     border-radius: var(--_marker-radius);
     content: '';
-    inset-block-end: calc(-1 * var(--_track-reach, 0px));
+    inset-block-end: calc(var(--_marker-offset) - var(--_track-reach, 0px));
     inset-inline: var(--_marker-inset);
     min-inline-size: var(--slotted-space-6, 1rem);
     opacity: 0;
@@ -578,7 +591,7 @@
     block-size: var(--_length);
     inline-size: var(--_marker-size);
     inset-block: 0 auto;
-    inset-inline: auto var(--_marker-lift, 0px);
+    inset-inline: auto calc(var(--_marker-lift, 0px) + var(--_marker-offset));
     translate: 0
       calc(var(--_indicator-start, 0px) + var(--_start-inset) + (var(--_span) - var(--_length)) / 2);
   }
@@ -589,7 +602,7 @@
     block-size: auto;
     inline-size: var(--_marker-size);
     inset-block: var(--_marker-inset);
-    inset-inline: auto calc(-1 * var(--_track-reach, 0px));
+    inset-inline: auto calc(var(--_marker-offset) - var(--_track-reach, 0px));
     min-block-size: var(--slotted-space-6, 1rem);
     min-inline-size: 0;
   }

package/src/tabs/tabs.tokens.json

@@ -31,6 +31,7 @@
   "--slotted-disabled-background",
   "--slotted-disabled-border",
   "--slotted-disabled-foreground",
+  "--slotted-duration-medium",
   "--slotted-duration-short",
   "--slotted-easing-enter",
   "--slotted-focus-ring-color",
@@ -65,7 +66,9 @@
   "--slotted-tabs-hover-marker-opacity",
   "--slotted-tabs-list-gap",
   "--slotted-tabs-marker-color",
+  "--slotted-tabs-marker-easing",
   "--slotted-tabs-marker-inset",
+  "--slotted-tabs-marker-offset",
   "--slotted-tabs-marker-radius",
   "--slotted-tabs-marker-size",
   "--slotted-tabs-scroll-color",