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

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.
@@ -95,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);
@@ -104,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);
@@ -123,7 +123,7 @@
    * 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);
 
@@ -139,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));
@@ -166,7 +166,7 @@
     scrollbar-width: thin;
   }
 
-  [data-ui='tabs'][data-overflowing] > [data-part='list'] {
+  [data-ui-tabs][data-overflowing] > [data-part-list] {
     scrollbar-width: none;
   }
 
@@ -177,7 +177,7 @@
    * 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'] {
+  [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);
 
@@ -206,15 +206,15 @@
    * 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;
@@ -223,15 +223,15 @@
   }
 
   /* 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'] {
+  [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'] {
+  [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);
   }
 
@@ -244,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;
@@ -253,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;
@@ -274,7 +274,7 @@
    * 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;
@@ -288,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;
@@ -320,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;
   }
 
@@ -333,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;
   }
@@ -349,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;
@@ -372,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));
   }
 
@@ -385,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)
@@ -416,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)));
   }
@@ -430,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;
   }
@@ -469,9 +463,13 @@
    * 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 translate is from the list's left edge.
+   * 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'] {
+  [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);
@@ -483,26 +481,24 @@
     border-radius: var(--_marker-radius);
     inline-size: var(--_length);
     inset-block-end: calc(var(--_marker-lift, 0px) + var(--_marker-offset));
-    left: 0;
+    left: calc(
+      var(--_indicator-start, 0px) + var(--_left-inset) + (var(--_span) - var(--_length)) / 2
+    );
     pointer-events: none;
     position: absolute;
-    translate: calc(
-        var(--_indicator-start, 0px) + var(--_left-inset) + (var(--_span) - var(--_length)) / 2
-      )
-      0;
   }
 
-  [data-ui='tabs']:dir(rtl) > :where([data-part='list']) > [data-part='marker'] {
+  [data-ui-tabs]:dir(rtl) > :where([data-part-list]) > [data-part-marker] {
     --_left-inset: var(--_end-inset);
   }
 
-  [data-ui='tabs']:not([data-orientation='vertical'])
-    > [data-part='list']:has(> [data-part='item'][data-selected] > [data-part='dismiss'])
-    > [data-part='marker'] {
+  [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'] > :where([data-part='list']) > [data-part='marker'][hidden] {
+  [data-ui-tabs] > :where([data-part-list]) > [data-part-marker][hidden] {
     display: none;
   }
 
@@ -516,17 +512,18 @@
    * 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] {
+  [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-duration-medium) var(--_marker-easing),
+      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);
   }
 
   @media (prefers-reduced-motion: reduce) {
-    [data-ui='tabs'] > :where([data-part='list']) > [data-part='marker'][data-moving] {
+    [data-ui-tabs] > :where([data-part-list]) > [data-part-marker][data-moving] {
       transition: none;
     }
   }
@@ -540,7 +537,7 @@
    * 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'] > :where([data-part='list']) > [data-part='item']::before {
+  [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);
@@ -557,26 +554,22 @@
       opacity var(--slotted-control-transition-duration) var(--slotted-control-transition-easing);
   }
 
-  [data-ui='tabs']:not([data-orientation='vertical'])
-    > :where([data-part='list'])
-    > [data-part='item']:has(> [data-part='dismiss'])::before {
+  [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-variant='line']
-    > :where([data-part='list'])
-    > [data-part='item']:not([data-selected]):has(
-      > [data-part='tab']:not(:disabled):hover
-    )::before {
+  [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);
   }
 
   /** 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 {
+  [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));
   }
 
@@ -585,20 +578,19 @@
    * 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'] {
+  [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 auto;
+    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));
-    translate: 0
-      calc(var(--_indicator-start, 0px) + var(--_start-inset) + (var(--_span) - var(--_length)) / 2);
   }
 
-  [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]::before {
     block-size: auto;
     inline-size: var(--_marker-size);
     inset-block: var(--_marker-inset);
@@ -622,7 +614,7 @@
    * 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));
 
@@ -633,15 +625,15 @@
     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);
   }
@@ -664,10 +656,7 @@
    * 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'] {
+  [data-ui-tabs] > :where([data-part-list]) > :where([data-part-item]) > [data-part-dismiss] {
     --slotted-icon-size: var(--_icon-size);
 
     align-items: center;
@@ -696,27 +685,24 @@
      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-secondary-subtle-hover)
@@ -724,10 +710,10 @@
     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-secondary-subtle-active)
@@ -735,10 +721,10 @@
     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;
   }
@@ -761,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;
@@ -793,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,
@@ -831,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;
@@ -858,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));
   }
@@ -888,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;
@@ -909,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;
   }
@@ -928,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;
   }
@@ -946,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;
   }
 
@@ -956,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);
   }
@@ -969,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);
   }
 
@@ -987,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-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);
   }
 
@@ -1000,7 +985,7 @@
    * 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='marker'] {
+  [data-ui-tabs][data-disabled] > :where([data-part-list]) > [data-part-marker] {
     background-color: var(--slotted-disabled-border);
   }
 
@@ -1014,27 +999,27 @@
    */
   @media (forced-colors: active) {
     /* 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'] {
+    [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'] {
+    [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'] {
+    [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] {
+    [data-ui-tabs][data-variant='contained']
+      > :where([data-part-list])
+      > [data-part-item][data-selected] {
       border: var(--slotted-border-width-thin, 1px) solid Highlight;
     }
   }