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

package/src/tabs/tabs.css

@@ -16,7 +16,7 @@
    *   │ panel                                            │
    *   └──────────────────────────────────────────────────┘
    */
-  [data-ui='tabs'] {
+  [data-ui-tabs] {
     /**
      * The control scales, read once at the root, so `size` and the three
      * densities are one decision each rather than one per rule.
@@ -47,23 +47,35 @@
       min(calc(var(--_icon-size) + 2 * var(--slotted-space-2, 0.25rem)), var(--_inner-size))
     );
     --_dismiss-overhang: calc((var(--_dismiss-size) - var(--_icon-size)) / 2);
-    --_marker-size: var(--slotted-border-width-thick, 2px);
+    /**
+     * 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 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
+     * thicken the marker without thickening sixty other rules.
+     */
+    --_marker-size: max(
+      var(--slotted-tabs-marker-size, 3px),
+      var(--slotted-border-width-thick, 2px)
+    );
+    --_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
      * behind it, read once here so the five mask gradients below state a
      * length and no public property of their own.
      */
     --_fade: var(--slotted-tabs-fade-size, var(--slotted-space-6, 1rem));
-    /**
-     * Which way the selection travelled, resolved into a transform origin. The
-     * marker of the tab being left collapses toward the direction of travel
-     * and the marker of the tab being entered grows from the side the reader
-     * came from, so the pair reads as one bar moving. Nothing is measured:
-     * every surveyed indicator reads the active tab's box, which is why Base UI
-     * ships `renderBeforeHydration` and Ark UI a `setIndicatorRect`.
-     */
-    --_marker-origin: 50%;
-    --_marker-origin-selected: 50%;
 
     /**
      * No column gap on the grid itself: three gaps stood around two empty
@@ -83,7 +95,7 @@
     row-gap: var(--slotted-tabs-gap, var(--slotted-space-6, 1rem));
   }
 
-  [data-ui='tabs'][data-size='sm'] {
+  [data-ui-tabs][data-size='sm'] {
     --_height: var(--slotted-control-height-sm, 30px);
     --_font-size: var(--slotted-control-font-size-sm, 0.8125rem);
     --_padding-inline: var(--slotted-control-padding-inline-sm, 0.625rem);
@@ -92,7 +104,7 @@
     --_inner-size: var(--slotted-control-inner-size-sm, 22px);
   }
 
-  [data-ui='tabs'][data-size='lg'] {
+  [data-ui-tabs][data-size='lg'] {
     --_height: var(--slotted-control-height-lg, 40px);
     --_font-size: var(--slotted-control-font-size-lg, 1rem);
     --_padding-inline: var(--slotted-control-padding-inline-lg, 1rem);
@@ -111,7 +123,10 @@
    * the panel: the distance the row gap keeps in a horizontal family. Without
    * it the panel's first letter touched the track on the list's end edge.
    */
-  [data-ui='tabs'][data-orientation='vertical'] {
+  [data-ui-tabs][data-orientation='vertical'] {
+    /* The inset runs along the block axis, where a tab has no padding. */
+    --_marker-inset: var(--slotted-tabs-marker-inset, 0px);
+
     column-gap: var(--slotted-tabs-gap, var(--slotted-space-6, 1rem));
     grid-template-columns: auto minmax(0, 1fr);
     grid-template-rows: auto auto;
@@ -124,7 +139,7 @@
    * which is on the border box and therefore does not scroll with the tabs —
    * a track drawn on the content would slide away with the first tab.
    */
-  [data-ui='tabs'] > [data-part='list'] {
+  [data-ui-tabs] > [data-part-list] {
     align-items: stretch;
     display: flex;
     gap: var(--slotted-tabs-list-gap, var(--_list-gap));
@@ -140,6 +155,8 @@
     overflow-x: auto;
     overflow-y: hidden;
     overscroll-behavior-inline: contain;
+    /* The containing block of the marker, which scrolls with the tabs. */
+    position: relative;
     /**
      * The platform's scrollbar is the affordance until the family draws its
      * own. It is hidden only once `data-overflowing` says the paging controls
@@ -149,13 +166,23 @@
     scrollbar-width: thin;
   }
 
-  [data-ui='tabs'][data-overflowing] > [data-part='list'] {
+  [data-ui-tabs][data-overflowing] > [data-part-list] {
     scrollbar-width: none;
   }
 
-  [data-ui='tabs'][data-variant='line'][data-track='line'] > [data-part='list'] {
-    border-block-end: var(--_track-size) solid
-      var(--slotted-tabs-track-color, var(--slotted-border-subtle, ButtonBorder));
+  /**
+   * The track is an inset shadow on the list's own padding rather than its
+   * border. The list is a scroll container, which clips what it draws to its
+   * padding box, so a marker standing over a border was cut along it; inside
+   * the padding the marker lies over the line, flush with the list's edge. The
+   * shadow is the box's, so the line does not scroll with the tabs.
+   */
+  [data-ui-tabs][data-variant='line'][data-track='line'] > [data-part-list] {
+    /* How far the hover bar reaches past an item to stand on the track. */
+    --_track-reach: var(--_track-size);
+
+    box-shadow: inset 0 calc(-1 * var(--_track-size)) 0 var(--_track-color);
+    padding-block-end: var(--_track-size);
   }
 
   /**
@@ -169,39 +196,25 @@
    * variant for the same case, which is a second family's worth of paint to
    * remove one line.
    *
-   * The marker then sits on the item's own edge rather than a track's width
-   * below it, so it lands on the line the page already drew. Where that line is
-   * is the page's business: the family stops at its own box.
+   * The marker then sits on the list's own edge, which is the items' edge, so
+   * it lands on the line the page already drew. Where that line is is the
+   * page's business: the family stops at its own box.
    */
-  [data-ui='tabs'][data-track='none'] > :where([data-part='list']) > [data-part='item']::before,
-  [data-ui='tabs'][data-track='none'] > :where([data-part='list']) > [data-part='item']::after {
-    inset-block-end: 0;
-  }
-
-  [data-ui='tabs'][data-track='none'][data-orientation='vertical']
-    > :where([data-part='list'])
-    > [data-part='item']::before,
-  [data-ui='tabs'][data-track='none'][data-orientation='vertical']
-    > :where([data-part='list'])
-    > [data-part='item']::after {
-    inset-block-end: auto;
-    inset-inline-end: 0;
-  }
 
   /**
    * A column of labels reads down its own start edge. Centring them is what the
    * horizontal rule wants — a row of equal shares has a middle — and in a
    * column it produces a ragged left edge nobody can scan.
    */
-  [data-ui='tabs'][data-orientation='vertical']
-    > :where([data-part='list'])
-    > :where([data-part='item'])
-    > [data-part='tab'] {
+  [data-ui-tabs][data-orientation='vertical']
+    > :where([data-part-list])
+    > :where([data-part-item])
+    > [data-part-tab] {
     justify-content: start;
     text-align: start;
   }
 
-  [data-ui='tabs'][data-orientation='vertical'] > [data-part='list'] {
+  [data-ui-tabs][data-orientation='vertical'] > [data-part-list] {
     flex-direction: column;
     grid-column: 1;
     grid-row: 1;
@@ -209,11 +222,17 @@
     overflow-y: auto;
   }
 
-  [data-ui='tabs'][data-orientation='vertical'][data-variant='line'][data-track='line']
-    > [data-part='list'] {
-    border-block-end: 0;
-    border-inline-end: var(--_track-size) solid
-      var(--slotted-tabs-track-color, var(--slotted-border-subtle, ButtonBorder));
+  /* A shadow takes no logical offset, so the line's side is mirrored by hand. */
+  [data-ui-tabs][data-orientation='vertical'][data-variant='line'][data-track='line']
+    > [data-part-list] {
+    box-shadow: inset calc(-1 * var(--_track-size)) 0 0 var(--_track-color);
+    padding-block-end: 0;
+    padding-inline-end: var(--_track-size);
+  }
+
+  [data-ui-tabs][data-orientation='vertical'][data-variant='line'][data-track='line']:dir(rtl)
+    > [data-part-list] {
+    box-shadow: inset var(--_track-size) 0 0 var(--_track-color);
   }
 
   /**
@@ -225,7 +244,7 @@
    * label is what gives way, and it is the only place a horizontal label ever
    * truncates.
    */
-  [data-ui='tabs'][data-fit='equal'] > [data-part='list'] {
+  [data-ui-tabs][data-fit='equal'] > [data-part-list] {
     display: grid;
     grid-auto-columns: minmax(0, 1fr);
     grid-auto-flow: column;
@@ -234,15 +253,15 @@
   }
 
   /** Equal shares are shares of the line, so each item takes the one it is given. */
-  [data-ui='tabs'][data-fit='equal'] > :where([data-part='list']) > [data-part='item'] {
+  [data-ui-tabs][data-fit='equal'] > :where([data-part-list]) > [data-part-item] {
     min-inline-size: 0;
   }
 
-  [data-ui='tabs'][data-fit='equal']
-    > :where([data-part='list'])
-    > :where([data-part='item'])
-    > :where([data-part='tab'])
-    > [data-part='label'] {
+  [data-ui-tabs][data-fit='equal']
+    > :where([data-part-list])
+    > :where([data-part-item])
+    > :where([data-part-tab])
+    > [data-part-label] {
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
@@ -251,12 +270,11 @@
   /* ── One tab, and the box that holds it ───────────────────────────────── */
 
   /**
-   * The item is presentational, and it exists for two reasons a `button`
-   * cannot answer: a `button` may not contain a `button`, so a dismissible tab
-   * needs a box for its second control, and the marker has to span the pair
-   * rather than only the label.
+   * The item is presentational, and it exists because a `button` may not
+   * contain a `button`: a dismissible tab needs a box for its second control.
+   * It also carries the hover bar, under the tab and not the control.
    */
-  [data-ui='tabs'] > :where([data-part='list']) > [data-part='item'] {
+  [data-ui-tabs] > :where([data-part-list]) > [data-part-item] {
     align-items: stretch;
     display: grid;
     grid-auto-flow: column;
@@ -270,7 +288,7 @@
     position: relative;
   }
 
-  [data-ui='tabs'] > :where([data-part='list']) > :where([data-part='item']) > [data-part='tab'] {
+  [data-ui-tabs] > :where([data-part-list]) > :where([data-part-item]) > [data-part-tab] {
     align-items: center;
     appearance: none;
     background-color: transparent;
@@ -302,10 +320,10 @@
    * inset there: the control carries it instead, measured from the mark rather
    * than from the box.
    */
-  [data-ui='tabs']
-    > :where([data-part='list'])
-    > [data-part='item']:has(> [data-part='dismiss'])
-    > [data-part='tab'] {
+  [data-ui-tabs]
+    > :where([data-part-list])
+    > [data-part-item]:has(> [data-part-dismiss])
+    > [data-part-tab] {
     padding-inline-end: 0;
   }
 
@@ -315,11 +333,11 @@
    * needs something to be aligned against, and a label in another script needs
    * to read its own way inside a page that reads the other.
    */
-  [data-ui='tabs']
-    > :where([data-part='list'])
-    > :where([data-part='item'])
-    > :where([data-part='tab'])
-    > [data-part='label'] {
+  [data-ui-tabs]
+    > :where([data-part-list])
+    > :where([data-part-item])
+    > :where([data-part-tab])
+    > [data-part-label] {
     min-inline-size: 0;
     unicode-bidi: plaintext;
   }
@@ -331,11 +349,11 @@
    * gives way. An icon box reads `--slotted-icon-size` from the slot, so it
    * takes the tab's icon step.
    */
-  [data-ui='tabs']
-    > :where([data-part='list'])
-    > :where([data-part='item'])
-    > :where([data-part='tab'])
-    > :is([data-part='start'], [data-part='end']) {
+  [data-ui-tabs]
+    > :where([data-part-list])
+    > :where([data-part-item])
+    > :where([data-part-tab])
+    > :is([data-part-start], [data-part-end]) {
     --slotted-icon-size: var(--_icon-size);
 
     align-items: center;
@@ -354,10 +372,10 @@
    * meeting a line that runs under all of them. What that variant says on
    * hover is where the mark would go, and it says it on the item, below.
    */
-  [data-ui='tabs']
-    > :where([data-part='list'])
-    > :where([data-part='item'])
-    > [data-part='tab']:not(:disabled):not([aria-selected='true']):hover {
+  [data-ui-tabs]
+    > :where([data-part-list])
+    > :where([data-part-item])
+    > [data-part-tab]:not(:disabled):not([aria-selected='true']):hover {
     color: var(--slotted-tabs-hover-color, var(--slotted-text, CanvasText));
   }
 
@@ -367,20 +385,20 @@
    * and goes one step further on press is what a segmented control does —
    * the fill has a box to belong to and no line to meet.
    */
-  [data-ui='tabs'][data-variant='contained']
-    > :where([data-part='list'])
-    > :where([data-part='item'])
-    > [data-part='tab']:not(:disabled):not([aria-selected='true']):hover {
+  [data-ui-tabs][data-variant='contained']
+    > :where([data-part-list])
+    > :where([data-part-item])
+    > [data-part-tab]:not(:disabled):not([aria-selected='true']):hover {
     background-color: var(
       --slotted-tabs-hover-background,
       var(--slotted-tone-secondary-subtle-hover)
     );
   }
 
-  [data-ui='tabs'][data-variant='contained']
-    > :where([data-part='list'])
-    > :where([data-part='item'])
-    > [data-part='tab']:not(:disabled):active {
+  [data-ui-tabs][data-variant='contained']
+    > :where([data-part-list])
+    > :where([data-part-item])
+    > [data-part-tab]:not(:disabled):active {
     background-color: var(
       --slotted-tabs-active-background,
       var(--slotted-tone-secondary-subtle-active)
@@ -398,10 +416,10 @@
    * focus became one blue shape that said neither of the two things — the
    * capture is what showed it.
    */
-  [data-ui='tabs']
-    > :where([data-part='list'])
-    > :where([data-part='item'])
-    > [data-part='tab']:focus-visible {
+  [data-ui-tabs]
+    > :where([data-part-list])
+    > :where([data-part-item])
+    > [data-part-tab]:focus-visible {
     outline: var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);
     outline-offset: calc(-1 * (var(--slotted-focus-ring-offset, 2px) + var(--_marker-size)));
   }
@@ -412,25 +430,19 @@
    * and nothing about it reaches the edge the scroller clips at — and an inset
    * ring on a twenty-four pixel box would be drawn through the mark.
    */
-  [data-ui='tabs']
-    > :where([data-part='list'])
-    > :where([data-part='item'])
-    > [data-part='dismiss']:focus-visible {
+  [data-ui-tabs]
+    > :where([data-part-list])
+    > :where([data-part-item])
+    > [data-part-dismiss]:focus-visible {
     outline: var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);
     outline-offset: var(--slotted-focus-ring-offset, 2px);
   }
 
-  [data-ui='tabs']
-    > :where([data-part='list'])
-    > [data-part='item'][data-selected]
-    > [data-part='tab'] {
+  [data-ui-tabs] > :where([data-part-list]) > [data-part-item][data-selected] > [data-part-tab] {
     color: var(--slotted-tabs-selected-color, var(--slotted-tone-accent-text));
   }
 
-  [data-ui='tabs']
-    > :where([data-part='list'])
-    > :where([data-part='item'])
-    > [data-part='tab']:disabled {
+  [data-ui-tabs] > :where([data-part-list]) > :where([data-part-item]) > [data-part-tab]:disabled {
     color: var(--slotted-disabled-foreground, GrayText);
     cursor: not-allowed;
   }
@@ -438,132 +450,153 @@
   /* ── The marker ───────────────────────────────────────────────────────── */
 
   /**
-   * Drawn on the item, on the edge the list runs along, and present on every
-   * item rather than only on the selected one: a mark that appears has nothing
-   * to transition from. It is scaled to nothing across the axis it marks, and
-   * the transform origin is what the direction of travel decides.
-   *
-   * It is pulled over the track by exactly the track's own width, so the two
-   * lines are one line rather than a hairline with a thicker line beside it.
+   * One bar, drawn by the list rather than by each item, that slides from the
+   * tab being left to the tab being entered: a mark per item can only appear
+   * or scale from an edge, and one mark moving is what says the selection
+   * moved. The binding creates it with `createIndicator` from
+   * `@slotted/core/measure`, which writes the selected tab's start and length
+   * in the list's scroll coordinates; everything else is decided here.
    *
-   * There are two of them in the same place. `::after` is the mark, in the
-   * accent, and the one that travels. `::before` is the hover, in a neutral
-   * a step darker than the track: the same bar, under the tab the pointer is
-   * on, saying where the mark would go. It fades rather than grows — a bar
-   * that slid in from one side on every pass of the pointer would be the
-   * travelling animation with nothing travelling — and it is never on the
-   * selected item, where the mark already is.
-   */
-  [data-ui='tabs'] > :where([data-part='list']) > [data-part='item']::before,
-  [data-ui='tabs'] > :where([data-part='list']) > [data-part='item']::after {
-    border-start-end-radius: var(--slotted-radius-xs, 2px);
-    border-start-start-radius: var(--slotted-radius-xs, 2px);
+   * It spans the tab's content box — the icon and the label — through
+   * `--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
+   * `--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 position is from the list's left edge.
+   * Position and length are both layout properties, so one thread advances
+   * both edges in the same frame: a composited `translate` beside a
+   * main-thread `inline-size` drifted apart while the panel rendered, and the
+   * bar grew and shrank on its way between tabs of unequal widths.
+   */
+  [data-ui-tabs] > :where([data-part-list]) > [data-part-marker] {
+    --_start-inset: var(--_marker-inset);
+    --_end-inset: var(--_marker-inset);
+    --_left-inset: var(--_start-inset);
+    --_span: calc(var(--_indicator-length, 0px) - var(--_start-inset) - var(--_end-inset));
+    --_length: max(var(--slotted-space-6, 1rem), var(--_span));
+
+    background-color: var(--slotted-tabs-marker-color, var(--slotted-tone-accent-solid));
     block-size: var(--_marker-size);
-    content: '';
-    inset-block-end: calc(-1 * var(--_track-size));
-    inset-inline: 0;
-    opacity: 0;
+    border-radius: var(--_marker-radius);
+    inline-size: var(--_length);
+    inset-block-end: calc(var(--_marker-lift, 0px) + var(--_marker-offset));
+    left: calc(
+      var(--_indicator-start, 0px) + var(--_left-inset) + (var(--_span) - var(--_length)) / 2
+    );
     pointer-events: none;
     position: absolute;
   }
 
-  [data-ui='tabs'] > :where([data-part='list']) > [data-part='item']::before {
-    /* No system colour as a last resort: unthemed, the bar disappears rather
-       than shouts, as the mark beside it already does. */
-    background-color: var(--slotted-tabs-hover-marker-color, var(--slotted-border-strong));
-    transition:
-      background-color var(--slotted-control-transition-duration)
-        var(--slotted-control-transition-easing),
-      opacity var(--slotted-control-transition-duration) var(--slotted-control-transition-easing);
+  [data-ui-tabs]:dir(rtl) > :where([data-part-list]) > [data-part-marker] {
+    --_left-inset: var(--_end-inset);
   }
 
-  [data-ui='tabs'] > :where([data-part='list']) > [data-part='item']::after {
-    background-color: var(--slotted-tabs-marker-color, var(--slotted-tone-accent-solid));
-    transform: scale(0, 1);
-    transform-origin: var(--_marker-origin) 50%;
-    transition:
-      opacity var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),
-      transform var(--slotted-control-transition-duration) var(--slotted-control-transition-easing);
+  [data-ui-tabs]:not([data-orientation='vertical'])
+    > [data-part-list]:has(> [data-part-item][data-selected] > [data-part-dismiss])
+    > [data-part-marker] {
+    --_end-inset: 0px;
   }
 
-  [data-ui='tabs'][data-variant='line']
-    > :where([data-part='list'])
-    > [data-part='item']:not([data-selected]):has(
-      > [data-part='tab']:not(:disabled):hover
-    )::before {
-    opacity: 1;
+  [data-ui-tabs] > :where([data-part-list]) > [data-part-marker][hidden] {
+    display: none;
   }
 
-  /** Press takes the bar to the label's own ink: the two say one thing. */
-  [data-ui='tabs'][data-variant='line']
-    > :where([data-part='list'])
-    > [data-part='item']:not([data-selected]):has(
-      > [data-part='tab']:not(:disabled):active
-    )::before {
-    background-color: var(--slotted-tabs-active-marker-color, var(--slotted-text));
+  /**
+   * 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-moving] {
+    --_marker-easing: var(--slotted-tabs-marker-easing, cubic-bezier(0.4, 0, 0.2, 1));
+
+    transition:
+      left var(--slotted-duration-medium) var(--_marker-easing),
+      top 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);
   }
 
-  [data-ui='tabs'] > :where([data-part='list']) > [data-part='item'][data-selected]::after {
-    opacity: 1;
-    transform: scale(1, 1);
-    transform-origin: var(--_marker-origin-selected) 50%;
+  @media (prefers-reduced-motion: reduce) {
+    [data-ui-tabs] > :where([data-part-list]) > [data-part-marker][data-moving] {
+      transition: none;
+    }
   }
 
   /**
-   * Forward is toward the end of the list. The tab being left collapses toward
-   * the end and the tab being entered grows from the start, which is one bar
-   * travelling. `transform-origin` takes no logical keyword, so the two
-   * percentages swap under `:dir(rtl)` — the one place in this stylesheet
-   * where a rule is mirrored by hand.
+   * The hover bar: the marker's geometry under the tab the pointer is on, in a
+   * neutral at a reduced opacity, saying where the mark would go. It is drawn
+   * on the item, and it fades rather than slides — a bar that travelled on
+   * every pass of the pointer would be the selection's motion with nothing
+   * selected. It reaches past the item by the track's width to lie on it, and
+   * stops at the tab where a closing control follows: that control is the
+   * tab's inline padding on either side of the glyph.
    */
-  [data-ui='tabs'][data-activation-direction='forward'] {
-    --_marker-origin: 100%;
-    --_marker-origin-selected: 0%;
+  [data-ui-tabs] > :where([data-part-list]) > [data-part-item]::before {
+    background-color: var(--slotted-tabs-hover-marker-color, var(--slotted-border-strong));
+    block-size: var(--_marker-size);
+    border-radius: var(--_marker-radius);
+    content: '';
+    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;
+    pointer-events: none;
+    position: absolute;
+    transition:
+      background-color var(--slotted-control-transition-duration)
+        var(--slotted-control-transition-easing),
+      opacity var(--slotted-control-transition-duration) var(--slotted-control-transition-easing);
   }
 
-  [data-ui='tabs'][data-activation-direction='backward'] {
-    --_marker-origin: 0%;
-    --_marker-origin-selected: 100%;
+  [data-ui-tabs]:not([data-orientation='vertical'])
+    > :where([data-part-list])
+    > [data-part-item]:has(> [data-part-dismiss])::before {
+    inset-inline-end: calc(2 * var(--_padding-inline) + var(--_icon-size));
   }
 
-  [data-ui='tabs'][data-activation-direction='forward']:dir(rtl) {
-    --_marker-origin: 0%;
-    --_marker-origin-selected: 100%;
+  [data-ui-tabs][data-variant='line']
+    > :where([data-part-list])
+    > [data-part-item]:not([data-selected]):has(> [data-part-tab]:not(:disabled):hover)::before {
+    opacity: var(--slotted-tabs-hover-marker-opacity, 0.5);
   }
 
-  [data-ui='tabs'][data-activation-direction='backward']:dir(rtl) {
-    --_marker-origin: 100%;
-    --_marker-origin-selected: 0%;
+  /** Press takes the bar to the label's own ink: the two say one thing. */
+  [data-ui-tabs][data-variant='line']
+    > :where([data-part-list])
+    > [data-part-item]:not([data-selected]):has(> [data-part-tab]:not(:disabled):active)::before {
+    background-color: var(--slotted-tabs-active-marker-color, var(--slotted-text));
   }
 
-  /** A quarter turn: the bar stands on the list's own edge and grows in block. */
-  [data-ui='tabs'][data-orientation='vertical']
-    > :where([data-part='list'])
-    > [data-part='item']::before,
-  [data-ui='tabs'][data-orientation='vertical']
-    > :where([data-part='list'])
-    > [data-part='item']::after {
-    block-size: auto;
-    border-start-end-radius: var(--slotted-radius-xs, 2px);
-    border-start-start-radius: 0;
-    border-end-end-radius: var(--slotted-radius-xs, 2px);
+  /**
+   * A quarter turn: both bars stand on the list's inline-end edge and run along
+   * the block axis, where the inset defaults to nought because a tab has no
+   * block padding.
+   */
+  [data-ui-tabs][data-orientation='vertical'] > :where([data-part-list]) > [data-part-marker] {
+    block-size: var(--_length);
     inline-size: var(--_marker-size);
-    inset-block: 0;
-    inset-inline: auto calc(-1 * var(--_track-size));
+    inset-block: calc(
+        var(--_indicator-start, 0px) + var(--_start-inset) + (var(--_span) - var(--_length)) / 2
+      )
+      auto;
+    inset-inline: auto calc(var(--_marker-lift, 0px) + var(--_marker-offset));
   }
 
-  [data-ui='tabs'][data-orientation='vertical']
-    > :where([data-part='list'])
-    > [data-part='item']::after {
-    transform: scale(1, 0);
-    transform-origin: 50% var(--_marker-origin);
-  }
-
-  [data-ui='tabs'][data-orientation='vertical']
-    > :where([data-part='list'])
-    > [data-part='item'][data-selected]::after {
-    transform: scale(1, 1);
-    transform-origin: 50% var(--_marker-origin-selected);
+  [data-ui-tabs][data-orientation='vertical']
+    > :where([data-part-list])
+    > [data-part-item]::before {
+    block-size: auto;
+    inline-size: var(--_marker-size);
+    inset-block: var(--_marker-inset);
+    inset-inline: auto calc(var(--_marker-offset) - var(--_track-reach, 0px));
+    min-block-size: var(--slotted-space-6, 1rem);
+    min-inline-size: 0;
   }
 
   /* ── Contained ────────────────────────────────────────────────────────── */
@@ -581,7 +614,10 @@
    * the first capture showed; the `line` variant keeps the full width, because
    * there the track is the edge of the panel below it.
    */
-  [data-ui='tabs'][data-variant='contained'] > [data-part='list'] {
+  [data-ui-tabs][data-variant='contained'] > [data-part-list] {
+    /* The marker underlines the label inside the selected surface, a step above its edge. */
+    --_marker-lift: calc(2 * var(--slotted-space-1, 0.125rem));
+
     background-color: var(--slotted-tabs-contained-background, var(--slotted-surface-sunken));
     border-radius: var(--slotted-radius-md, 6px);
     justify-self: start;
@@ -589,39 +625,19 @@
     padding: var(--slotted-space-1, 0.125rem);
   }
 
-  [data-ui='tabs'][data-variant='contained'] > :where([data-part='list']) > [data-part='item'] {
+  [data-ui-tabs][data-variant='contained'] > :where([data-part-list]) > [data-part-item] {
     border-radius: var(--slotted-radius-sm, 4px);
     transition: background-color var(--slotted-control-transition-duration)
       var(--slotted-control-transition-easing);
   }
 
-  [data-ui='tabs'][data-variant='contained']
-    > :where([data-part='list'])
-    > [data-part='item'][data-selected] {
+  [data-ui-tabs][data-variant='contained']
+    > :where([data-part-list])
+    > [data-part-item][data-selected] {
     background-color: var(--slotted-tabs-contained-selected-background, var(--slotted-surface));
     box-shadow: var(--slotted-shadow-xs);
   }
 
-  /**
-   * Inset from the corners by the radius, so the bar underlines the label
-   * instead of tracing the edge of the surface it sits on. Sitting on the
-   * edge, it read as a second border of a different colour, and the capture
-   * showed a pill with one blue side.
-   */
-  [data-ui='tabs'][data-variant='contained']
-    > :where([data-part='list'])
-    > [data-part='item']::after {
-    inset-block-end: var(--slotted-space-1, 0.125rem);
-    inset-inline: var(--slotted-radius-sm, 4px);
-  }
-
-  [data-ui='tabs'][data-variant='contained'][data-orientation='vertical']
-    > :where([data-part='list'])
-    > [data-part='item']::after {
-    inset-block: var(--slotted-radius-sm, 4px);
-    inset-inline: auto var(--slotted-space-1, 0.125rem);
-  }
-
   /* ── The dismiss control ──────────────────────────────────────────────── */
 
   /**
@@ -631,17 +647,16 @@
    * through `aria-keyshortcuts`.
    *
    * It is aligned by its mark rather than by its box. The box overhangs the X
-   * on every side, so a box set flush against the label leaves a hole where the
-   * overhang is; both margins take the overhang back, which puts the mark one
-   * inner gap from the last letter and the tab's own inset from the end of the
-   * item. The first capture showed the other arrangement: a square the height of
-   * the control, hard against the words, with the whole tab's padding on the
-   * far side of it.
-   */
-  [data-ui='tabs']
-    > :where([data-part='list'])
-    > :where([data-part='item'])
-    > [data-part='dismiss'] {
+   * on every side, and both margins take the overhang back, which puts the mark
+   * the tab's own inset from the last letter and from the end of the item. An
+   * inner gap before the mark left the round ground of the hover touching the
+   * words; the first capture showed a square the height of the control, hard
+   * against the words, with the whole tab's padding on the far side of it.
+   *
+   * Neutral, as the dialog's close and the paging controls: removing a tab
+   * closes a view and destroys nothing, so the danger tone overstated it.
+   */
+  [data-ui-tabs] > :where([data-part-list]) > :where([data-part-item]) > [data-part-dismiss] {
     --slotted-icon-size: var(--_icon-size);
 
     align-items: center;
@@ -650,7 +665,7 @@
     background-color: transparent;
     block-size: var(--_dismiss-size);
     border: 0;
-    border-radius: var(--slotted-control-radius, 4px);
+    border-radius: var(--slotted-radius-full, 9999px);
     color: var(--slotted-tabs-dismiss-color, var(--slotted-text-muted, GrayText));
     cursor: pointer;
     display: inline-flex;
@@ -658,7 +673,7 @@
     inline-size: var(--_dismiss-size);
     justify-content: center;
     margin-inline-end: calc(var(--_padding-inline) - var(--_dismiss-overhang));
-    margin-inline-start: max(0px, calc(var(--_inner-gap) - var(--_dismiss-overhang)));
+    margin-inline-start: calc(var(--_padding-inline) - var(--_dismiss-overhang));
     padding: 0;
     transition:
       background-color var(--slotted-control-transition-duration)
@@ -670,49 +685,46 @@
      is the one a mouse sees: a transparent box centred on the control reaches
      44 pixels, and the ground and the ring stay square. */
   @media (pointer: coarse) {
-    [data-ui='tabs']
-      > :where([data-part='list'])
-      > :where([data-part='item'])
-      > [data-part='dismiss'] {
+    [data-ui-tabs] > :where([data-part-list]) > :where([data-part-item]) > [data-part-dismiss] {
       position: relative;
     }
 
-    [data-ui='tabs']
-      > :where([data-part='list'])
-      > :where([data-part='item'])
-      > [data-part='dismiss']::after {
+    [data-ui-tabs]
+      > :where([data-part-list])
+      > :where([data-part-item])
+      > [data-part-dismiss]::after {
       content: '';
       inset: min(0px, calc((100% - var(--slotted-target-comfortable, 44px)) / 2));
       position: absolute;
     }
   }
 
-  [data-ui='tabs']
-    > :where([data-part='list'])
-    > :where([data-part='item'])
-    > [data-part='dismiss']:not(:disabled):hover {
+  [data-ui-tabs]
+    > :where([data-part-list])
+    > :where([data-part-item])
+    > [data-part-dismiss]:not(:disabled):hover {
     background-color: var(
       --slotted-tabs-dismiss-hover-background,
-      var(--slotted-tone-danger-surface)
+      var(--slotted-tone-secondary-subtle-hover)
     );
-    color: var(--slotted-tabs-dismiss-hover-color, var(--slotted-tone-danger-text));
+    color: var(--slotted-tabs-dismiss-hover-color, var(--slotted-text, CanvasText));
   }
 
-  [data-ui='tabs']
-    > :where([data-part='list'])
-    > :where([data-part='item'])
-    > [data-part='dismiss']:not(:disabled):active {
+  [data-ui-tabs]
+    > :where([data-part-list])
+    > :where([data-part-item])
+    > [data-part-dismiss]:not(:disabled):active {
     background-color: var(
       --slotted-tabs-dismiss-active-background,
-      var(--slotted-tone-danger-border)
+      var(--slotted-tone-secondary-subtle-active)
     );
-    color: var(--slotted-tabs-dismiss-active-color, var(--slotted-text-inverse));
+    color: var(--slotted-tabs-dismiss-active-color, var(--slotted-text, CanvasText));
   }
 
-  [data-ui='tabs']
-    > :where([data-part='list'])
-    > :where([data-part='item'])
-    > [data-part='dismiss']:disabled {
+  [data-ui-tabs]
+    > :where([data-part-list])
+    > :where([data-part-item])
+    > [data-part-dismiss]:disabled {
     color: var(--slotted-disabled-foreground, GrayText);
     cursor: not-allowed;
   }
@@ -735,7 +747,7 @@
    * list as they move, and Cloudscape's own guidance warns against extra
    * stops before a tab list.
    */
-  [data-ui='tabs'] > [data-part='scroll'] {
+  [data-ui-tabs] > [data-part-scroll] {
     --slotted-icon-size: var(--_icon-size);
 
     align-items: center;
@@ -767,31 +779,30 @@
    * is read from the control itself — a paging control at its end is
    * disabled — so the family needs no second signal for it.
    */
-  [data-ui='tabs']:has(> [data-part='scroll'][data-direction='start']:not(:disabled))
-    > [data-part='list'] {
+  [data-ui-tabs]:has(> [data-part-scroll][data-direction='start']:not(:disabled))
+    > [data-part-list] {
     mask-image: linear-gradient(to right, transparent, black var(--_fade));
   }
 
-  [data-ui='tabs']:has(> [data-part='scroll'][data-direction='end']:not(:disabled))
-    > [data-part='list'] {
+  [data-ui-tabs]:has(> [data-part-scroll][data-direction='end']:not(:disabled)) > [data-part-list] {
     mask-image: linear-gradient(to left, transparent, black var(--_fade));
   }
 
   /* The start edge is the right one in a right-to-left document. */
-  [data-ui='tabs']:dir(rtl):has(> [data-part='scroll'][data-direction='start']:not(:disabled))
-    > [data-part='list'] {
+  [data-ui-tabs]:dir(rtl):has(> [data-part-scroll][data-direction='start']:not(:disabled))
+    > [data-part-list] {
     mask-image: linear-gradient(to left, transparent, black var(--_fade));
   }
 
-  [data-ui='tabs']:dir(rtl):has(> [data-part='scroll'][data-direction='end']:not(:disabled))
-    > [data-part='list'] {
+  [data-ui-tabs]:dir(rtl):has(> [data-part-scroll][data-direction='end']:not(:disabled))
+    > [data-part-list] {
     mask-image: linear-gradient(to right, transparent, black var(--_fade));
   }
 
-  [data-ui='tabs']:has(> [data-part='scroll'][data-direction='start']:not(:disabled)):has(
-      > [data-part='scroll'][data-direction='end']:not(:disabled)
+  [data-ui-tabs]:has(> [data-part-scroll][data-direction='start']:not(:disabled)):has(
+      > [data-part-scroll][data-direction='end']:not(:disabled)
     )
-    > [data-part='list'] {
+    > [data-part-list] {
     mask-image: linear-gradient(
       to right,
       transparent,
@@ -805,19 +816,19 @@
      for both axes. As wide as its glyph and as tall as the row, it stood 24
      wide and 44 tall beside tabs grown to the comfortable height. */
   @media (pointer: coarse) {
-    [data-ui='tabs'] > [data-part='scroll'] {
+    [data-ui-tabs] > [data-part-scroll] {
       min-block-size: max(var(--slotted-target-comfortable, 44px), var(--_height));
       min-inline-size: max(var(--slotted-target-comfortable, 44px), var(--_height));
     }
   }
 
-  [data-ui='tabs'] > [data-part='scroll'][data-direction='start'] {
+  [data-ui-tabs] > [data-part-scroll][data-direction='start'] {
     grid-column: 1;
     grid-row: 1;
     margin-inline-end: var(--slotted-tabs-actions-gap, var(--slotted-space-4, 0.5rem));
   }
 
-  [data-ui='tabs'] > [data-part='scroll'][data-direction='end'] {
+  [data-ui-tabs] > [data-part-scroll][data-direction='end'] {
     grid-column: 3;
     margin-inline-start: var(--slotted-tabs-actions-gap, var(--slotted-space-4, 0.5rem));
     grid-row: 1;
@@ -832,26 +843,26 @@
    * own mirror holds: the two compose, so the start control points back in
    * both directions.
    */
-  [data-ui='tabs'] > [data-part='scroll'][data-direction='start'] > [data-ui='icon'] {
+  [data-ui-tabs] > [data-part-scroll][data-direction='start'] > [data-ui-icon] {
     rotate: 0.5turn;
   }
 
   /* The ground moves under the pointer and nothing else does (R2). */
-  [data-ui='tabs'] > [data-part='scroll']:not(:disabled):hover {
+  [data-ui-tabs] > [data-part-scroll]:not(:disabled):hover {
     background-color: var(
       --slotted-tabs-hover-background,
       var(--slotted-tone-secondary-subtle-hover)
     );
   }
 
-  [data-ui='tabs'] > [data-part='scroll']:not(:disabled):active {
+  [data-ui-tabs] > [data-part-scroll]:not(:disabled):active {
     background-color: var(
       --slotted-tabs-active-background,
       var(--slotted-tone-secondary-subtle-active)
     );
   }
 
-  [data-ui='tabs'] > [data-part='scroll']:focus-visible {
+  [data-ui-tabs] > [data-part-scroll]: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));
   }
@@ -862,18 +873,18 @@
    * not removed — so the list never moves under the pointer that is using
    * the other one.
    */
-  [data-ui='tabs'] > [data-part='scroll']:disabled {
+  [data-ui-tabs] > [data-part-scroll]:disabled {
     cursor: default;
     visibility: hidden;
   }
 
-  [data-ui='tabs'][data-orientation='vertical'] > [data-part='scroll'] {
+  [data-ui-tabs][data-orientation='vertical'] > [data-part-scroll] {
     display: none;
   }
 
   /* ── Actions, and the panels ──────────────────────────────────────────── */
 
-  [data-ui='tabs'] > [data-part='actions'] {
+  [data-ui-tabs] > [data-part-actions] {
     align-items: center;
     align-self: center;
     display: flex;
@@ -883,7 +894,7 @@
     min-inline-size: 0;
   }
 
-  [data-ui='tabs'][data-orientation='vertical'] > [data-part='actions'] {
+  [data-ui-tabs][data-orientation='vertical'] > [data-part-actions] {
     grid-column: 1;
     grid-row: 2;
   }
@@ -902,14 +913,14 @@
    * their own element, which is one declaration against a layout that
    * otherwise breaks for every reader on a narrow screen.
    */
-  [data-ui='tabs'] > [data-part='panel'] {
+  [data-ui-tabs] > [data-part-panel] {
     grid-column: 1 / -1;
     grid-row: 2;
     min-inline-size: 0;
     overflow-wrap: anywhere;
   }
 
-  [data-ui='tabs'][data-orientation='vertical'] > [data-part='panel'] {
+  [data-ui-tabs][data-orientation='vertical'] > [data-part-panel] {
     grid-column: 2;
     grid-row: 1 / -1;
   }
@@ -920,7 +931,7 @@
    * than relied on. It is the attribute and not a class because a screen
    * reader, find-in-page and `:target` all already understand it.
    */
-  [data-ui='tabs'] > [data-part='panel'][hidden] {
+  [data-ui-tabs] > [data-part-panel][hidden] {
     display: none;
   }
 
@@ -930,7 +941,7 @@
    * own content and has no padding of its own, so an inset ring is drawn
    * through the first line of it.
    */
-  [data-ui='tabs'] > [data-part='panel']:focus-visible {
+  [data-ui-tabs] > [data-part-panel]:focus-visible {
     outline: var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);
     outline-offset: var(--slotted-focus-ring-offset, 2px);
   }
@@ -943,7 +954,7 @@
    * panel instead, which needs a clipping viewport that traps horizontal
    * scrolling and fights the list's own scroll.
    */
-  [data-ui='tabs'] > [data-part='panel']:not([hidden]) {
+  [data-ui-tabs] > [data-part-panel]:not([hidden]) {
     animation: slotted-tabs-panel-in var(--slotted-duration-short) var(--slotted-easing-enter);
   }
 
@@ -961,11 +972,11 @@
    * adds is the track: a disabled family should not read as a live one with
    * grey labels.
    */
-  [data-ui='tabs'][data-disabled][data-variant='line'][data-track='line'] > [data-part='list'] {
-    border-color: var(--slotted-disabled-border, GrayText);
+  [data-ui-tabs][data-disabled] {
+    --_track-color: var(--slotted-disabled-border, GrayText);
   }
 
-  [data-ui='tabs'][data-disabled][data-variant='contained'] > [data-part='list'] {
+  [data-ui-tabs][data-disabled][data-variant='contained'] > [data-part-list] {
     background-color: var(--slotted-disabled-background, Canvas);
   }
 
@@ -974,24 +985,41 @@
    * decoration in an unthemed page should disappear rather than shout, and a
    * marker painted `GrayText` with no theme would be the loudest thing on it.
    */
-  [data-ui='tabs'][data-disabled]
-    > :where([data-part='list'])
-    > [data-part='item'][data-selected]::after {
+  [data-ui-tabs][data-disabled] > :where([data-part-list]) > [data-part-marker] {
     background-color: var(--slotted-disabled-border);
   }
 
   /* ── Forced colours ──────────────────────────────────────────────────── */
 
   /**
-   * The theme maps every scheme token to a system colour, so the only rule
-   * here is about paint the theme cannot reach: a selected tab in the
-   * contained variant has a fill that flattens to `Canvas` along with the
-   * track it stands in.
+   * The theme maps every scheme token to a system colour, so the rules here
+   * are about paint the theme cannot reach: the track drawn as a shadow, the
+   * marker's ground, and a selected tab in the contained variant, whose fill
+   * flattens to `Canvas` along with the track it stands in.
    */
   @media (forced-colors: active) {
-    [data-ui='tabs'][data-variant='contained']
-      > :where([data-part='list'])
-      > [data-part='item'][data-selected] {
+    /* A shadow is not drawn under forced colours: the track is a border again. */
+    [data-ui-tabs][data-variant='line'][data-track='line'] > [data-part-list] {
+      border-block-end: var(--_track-size) solid CanvasText;
+      padding-block-end: 0;
+    }
+
+    [data-ui-tabs][data-orientation='vertical'][data-variant='line'][data-track='line']
+      > [data-part-list] {
+      border-block-end: 0;
+      border-inline-end: var(--_track-size) solid CanvasText;
+      padding-inline-end: 0;
+    }
+
+    /* The marker's ground would flatten to Canvas with every other ground. */
+    [data-ui-tabs] > :where([data-part-list]) > [data-part-marker] {
+      background-color: Highlight;
+      forced-color-adjust: none;
+    }
+
+    [data-ui-tabs][data-variant='contained']
+      > :where([data-part-list])
+      > [data-part-item][data-selected] {
       border: var(--slotted-border-width-thin, 1px) solid Highlight;
     }
   }