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

package/src/stat-card/stat-card.tokens.json

@@ -13,6 +13,7 @@
   "--slotted-font-size-xs",
   "--slotted-font-weight-medium",
   "--slotted-font-weight-semibold",
+  "--slotted-letter-spacing-tighter",
   "--slotted-line-height-2xl",
   "--slotted-line-height-3xl",
   "--slotted-line-height-4xl",
@@ -85,10 +86,12 @@
   "--slotted-stat-card-value-line-height-sm",
   "--slotted-surface-raised",
   "--slotted-surface-sunken",
+  "--slotted-target-comfortable",
   "--slotted-text",
   "--slotted-text-muted",
   "--slotted-tone-accent-text",
   "--slotted-tone-danger-text",
+  "--slotted-tone-info-text",
   "--slotted-tone-secondary-text",
   "--slotted-tone-success-text",
   "--slotted-tone-warning-text"

package/src/status-indicator/status-indicator.css

@@ -20,7 +20,7 @@
    * beside it — the answer Spectrum, Chakra and Ant Design all reached, and
    * the opposite of the coloured pill Primer and Atlassian draw.
    */
-  [data-ui='status-indicator'][data-part='root'] {
+  [data-ui-status-indicator][data-part-root] {
     /**
      * Type and glyph come from the control scales, the only ones the theme
      * restates per density, so a status shrinks with the row it sits in. The
@@ -127,7 +127,7 @@
    * in greyscale as well as in `light`.
    */
 
-  [data-ui='status-indicator'][data-part='root'][data-status='neutral'] {
+  [data-ui-status-indicator][data-part-root][data-status='neutral'] {
     /**
      * The one neutral the theme calibrates against the surface rather than
      * against a control, and the only fill that makes this dot read as filled.
@@ -145,12 +145,12 @@
     --_text: var(--slotted-tone-secondary-text);
   }
 
-  [data-ui='status-indicator'][data-part='root'][data-status='info'] {
+  [data-ui-status-indicator][data-part-root][data-status='info'] {
     --_solid: var(--slotted-tone-accent-solid);
     --_text: var(--slotted-tone-accent-text);
   }
 
-  [data-ui='status-indicator'][data-part='root'][data-status='success'] {
+  [data-ui-status-indicator][data-part-root][data-status='success'] {
     --_solid: var(--slotted-tone-success-solid);
     --_text: var(--slotted-tone-success-text);
   }
@@ -161,13 +161,13 @@
    * light, the fill itself in dark and black in `high-contrast` — an edge that
    * reads as the dot's own rim rather than as a second colour around it.
    */
-  [data-ui='status-indicator'][data-part='root'][data-status='warning'] {
+  [data-ui-status-indicator][data-part-root][data-status='warning'] {
     --_edge: var(--slotted-tone-warning-border);
     --_solid: var(--slotted-tone-warning-solid);
     --_text: var(--slotted-tone-warning-text);
   }
 
-  [data-ui='status-indicator'][data-part='root'][data-status='danger'] {
+  [data-ui-status-indicator][data-part-root][data-status='danger'] {
     --_solid: var(--slotted-tone-danger-solid);
     --_text: var(--slotted-tone-danger-text);
   }
@@ -178,7 +178,7 @@
    * has no halo of its own; the ring is drawn where the halo of a lit dot
    * ends, below.
    */
-  [data-ui='status-indicator'][data-part='root'][data-status='unknown'] {
+  [data-ui-status-indicator][data-part-root][data-status='unknown'] {
     --_edge: var(--slotted-border-strong);
     --_halo: transparent;
     --_solid: transparent;
@@ -192,13 +192,13 @@
    * the mark left the ring the size of a dot around a sixteen-pixel glyph, and
    * one and three quarter pixels above where it belonged.
    */
-  [data-ui='status-indicator'][data-part='root'][data-mark='icon'] {
+  [data-ui-status-indicator][data-part-root][data-mark='icon'] {
     --_mark-size: var(--_glyph-size);
   }
 
   /* ── Size ─────────────────────────────────────────────────────────────── */
 
-  [data-ui='status-indicator'][data-part='root'][data-size='sm'] {
+  [data-ui-status-indicator][data-part-root][data-size='sm'] {
     --_dot-size: var(--slotted-space-3, 0.375rem);
     --_font-size: var(--slotted-control-font-size-sm, 12px);
     --_glyph-size: var(--slotted-control-icon-size-sm, 14px);
@@ -206,7 +206,7 @@
     --_halo-width: var(--slotted-space-1, 0.125rem);
   }
 
-  [data-ui='status-indicator'][data-part='root'][data-size='lg'] {
+  [data-ui-status-indicator][data-part-root][data-size='lg'] {
     --_font-size: var(--slotted-control-font-size-lg, 14px);
     --_glyph-size: var(--slotted-control-icon-size-lg, 18px);
   }
@@ -219,7 +219,7 @@
    * number saying how. It is the rule `skeleton` uses to sit an inline bar on
    * a line of type, applied to a box rather than to a baseline.
    */
-  [data-ui='status-indicator'] [data-part='mark'] {
+  [data-ui-status-indicator] [data-part-mark] {
     block-size: var(--_mark-size);
     box-sizing: border-box;
     flex: none;
@@ -227,7 +227,7 @@
     margin-block-start: var(--_pulse-inset);
   }
 
-  [data-ui='status-indicator'][data-mark='dot'] [data-part='mark'] {
+  [data-ui-status-indicator][data-mark='dot'] [data-part-mark] {
     background-color: var(--_solid, ButtonFace);
     border: var(--_rim-width) solid var(--_rim, CanvasText);
     border-radius: var(--slotted-radius-full, 9999px);
@@ -239,7 +239,7 @@
    * to `neutral` and `unknown` sharing a tone, and it is the only mark in the
    * family that says something by what it is missing.
    */
-  [data-ui='status-indicator'][data-mark='dot'][data-status='unknown'] [data-part='mark'] {
+  [data-ui-status-indicator][data-mark='dot'][data-status='unknown'] [data-part-mark] {
     border: 0;
     position: relative;
   }
@@ -253,7 +253,7 @@
    * neighbours, and read as a speck rather than as a status. `outline` is
    * reserved for the focus ring (`focus-ring.test.mjs`).
    */
-  [data-ui='status-indicator'][data-mark='dot'][data-status='unknown'] [data-part='mark']::before {
+  [data-ui-status-indicator][data-mark='dot'][data-status='unknown'] [data-part-mark]::before {
     border: var(--slotted-border-width-thick, 2px) dashed var(--_rim);
     border-radius: var(--slotted-radius-full, 9999px);
     box-sizing: border-box;
@@ -278,7 +278,7 @@
    * binding puts the status's glyph inside. `flex` rather than a line box, so
    * no strut of the root's line-height pushes the glyph off the box.
    */
-  [data-ui='status-indicator'][data-mark='icon'] [data-part='mark'] {
+  [data-ui-status-indicator][data-mark='icon'] [data-part-mark] {
     --slotted-icon-size: var(--_mark-size);
 
     color: var(--_text, CanvasText);
@@ -302,7 +302,7 @@
    * first column was auto-sized. `break-word` keeps the longest word as the
    * minimum and breaks only what still does not fit.
    */
-  [data-ui='status-indicator'] [data-part='label'] {
+  [data-ui-status-indicator] [data-part-label] {
     margin-inline-start: var(--_gap);
     min-inline-size: 0;
     overflow-wrap: break-word;
@@ -315,7 +315,7 @@
    * empty, and a gap in front of an empty box puts a bare dot off the centre
    * of the cell it was meant to sit in.
    */
-  [data-ui='status-indicator'] [data-part='label']:has(> [data-part='announcement']) {
+  [data-ui-status-indicator] [data-part-label]:has(> [data-part-announcement]) {
     margin-inline-start: 0;
   }
 
@@ -326,7 +326,7 @@
    * root an `<a>` or a `<button>`, and a ring that appears only where a family
    * expects focus is a ring that goes missing.
    */
-  [data-ui='status-indicator'][data-part='root']:focus-visible {
+  [data-ui-status-indicator][data-part-root]:focus-visible {
     outline: var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);
     outline-offset: var(--slotted-focus-ring-offset, 2px);
   }
@@ -340,7 +340,7 @@
    * text role, a step hover does not take. The offset is `link`'s own 0.15em
    * (dossier § 4).
    */
-  [data-ui='status-indicator'][data-part='root']:any-link {
+  [data-ui-status-indicator][data-part-root]:any-link {
     text-decoration-color: transparent;
     text-decoration-line: underline;
     text-decoration-thickness: from-font;
@@ -350,11 +350,11 @@
       text-decoration-color var(--slotted-duration-short) var(--slotted-easing-standard);
   }
 
-  [data-ui='status-indicator'][data-part='root']:any-link:not([data-disabled]):hover {
+  [data-ui-status-indicator][data-part-root]:any-link:not([data-disabled]):hover {
     text-decoration-color: currentColor;
   }
 
-  [data-ui='status-indicator'][data-part='root']:any-link:not([data-disabled]):active {
+  [data-ui-status-indicator][data-part-root]:any-link:not([data-disabled]):active {
     color: var(--slotted-text-muted, GrayText);
     text-decoration-color: currentColor;
   }
@@ -402,11 +402,11 @@
    * stacking context so the wave can sit under the mark (`z-index: -1`)
    * without falling behind the surface the indicator is drawn on.
    */
-  [data-ui='status-indicator'][data-pulse] {
+  [data-ui-status-indicator][data-pulse] {
     isolation: isolate;
   }
 
-  [data-ui='status-indicator'][data-pulse]::after {
+  [data-ui-status-indicator][data-pulse]::after {
     animation: slotted-status-indicator-pulse var(--slotted-duration-loop-slow)
       var(--slotted-easing-enter) infinite;
     background-color: var(--_rim);
@@ -429,7 +429,7 @@
    * carried by the tone, the glyph and the word, as it is under reduced
    * motion.
    */
-  [data-ui='status-indicator'][data-mark='icon'][data-pulse]::after {
+  [data-ui-status-indicator][data-mark='icon'][data-pulse]::after {
     content: none;
   }
 
@@ -440,7 +440,7 @@
    * and the status is left to the parts that were always carrying it.
    */
   @media (prefers-reduced-motion: reduce) {
-    [data-ui='status-indicator'][data-pulse]::after {
+    [data-ui-status-indicator][data-pulse]::after {
       animation: none;
       content: none;
     }
@@ -465,16 +465,16 @@
    * rule: the system sets `box-shadow` to `none`.
    */
   @media (forced-colors: active) {
-    [data-ui='status-indicator'][data-mark='dot'] [data-part='mark'] {
+    [data-ui-status-indicator][data-mark='dot'] [data-part-mark] {
       background-color: CanvasText;
       border-color: CanvasText;
     }
 
-    [data-ui='status-indicator'][data-mark='dot'][data-status='unknown'] [data-part='mark'] {
+    [data-ui-status-indicator][data-mark='dot'][data-status='unknown'] [data-part-mark] {
       background-color: Canvas;
     }
 
-    [data-ui='status-indicator'][data-pulse]::after {
+    [data-ui-status-indicator][data-pulse]::after {
       content: none;
     }
   }

package/src/stepper/stepper.css

@@ -11,7 +11,7 @@
    * that retunes the control scale moves the whole stepper together instead of
    * leaving the connector behind.
    */
-  [data-ui='stepper'] {
+  [data-ui-stepper] {
     --_marker: var(--slotted-stepper-marker-size, var(--slotted-control-height-md, 34px));
     --_gap: var(--slotted-stepper-gap, var(--slotted-control-gap-md, 8px));
     --_rule: var(--slotted-stepper-connector-thickness, var(--slotted-border-width-thick, 2px));
@@ -74,34 +74,34 @@
    * line rather than beside it.
    */
 
-  [data-ui='stepper'] [data-part='list'] {
+  [data-ui-stepper] [data-part-list] {
     display: flex;
     list-style: none;
     margin: 0;
     padding: 0;
   }
 
-  [data-ui='stepper'][data-orientation='horizontal'] [data-part='list'] {
+  [data-ui-stepper][data-orientation='horizontal'] [data-part-list] {
     align-items: flex-start;
     flex-direction: row;
   }
 
-  [data-ui='stepper'][data-orientation='vertical'] [data-part='list'] {
+  [data-ui-stepper][data-orientation='vertical'] [data-part-list] {
     flex-direction: column;
   }
 
-  [data-ui='stepper'] [data-part='item'] {
+  [data-ui-stepper] [data-part-item] {
     display: flex;
     position: relative;
   }
 
-  [data-ui='stepper'][data-orientation='horizontal'] [data-part='item'] {
+  [data-ui-stepper][data-orientation='horizontal'] [data-part-item] {
     flex: 1 1 0;
     /* A label longer than its column wraps instead of widening the column. */
     min-inline-size: 0;
   }
 
-  [data-ui='stepper'][data-orientation='vertical'] [data-part='item'] {
+  [data-ui-stepper][data-orientation='vertical'] [data-part-item] {
     flex-direction: column;
   }
 
@@ -114,7 +114,7 @@
    * component.
    */
 
-  [data-ui='stepper'] [data-part='trigger'] {
+  [data-ui-stepper] [data-part-trigger] {
     align-items: center;
     appearance: none;
     background: none;
@@ -131,8 +131,8 @@
       var(--slotted-control-transition-easing);
   }
 
-  [data-ui='stepper'] button[data-part='trigger'],
-  [data-ui='stepper'] a[data-part='trigger'] {
+  [data-ui-stepper] button[data-part-trigger],
+  [data-ui-stepper] a[data-part-trigger] {
     cursor: pointer;
   }
 
@@ -142,7 +142,7 @@
    * The stack is centred so the marker sits over the middle of its own label
    * rather than over the middle of the column.
    */
-  [data-ui='stepper'][data-label-placement='bottom'] [data-part='trigger'] {
+  [data-ui-stepper][data-label-placement='bottom'] [data-part-trigger] {
     align-items: center;
     flex-direction: column;
     /**
@@ -156,7 +156,7 @@
     text-align: center;
   }
 
-  [data-ui='stepper'] [data-part='trigger']:focus-visible {
+  [data-ui-stepper] [data-part-trigger]:focus-visible {
     outline: var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);
     outline-offset: var(--slotted-focus-ring-offset, 2px);
   }
@@ -172,7 +172,7 @@
    * progress that does not depend on colour.
    */
 
-  [data-ui='stepper'] [data-part='marker'] {
+  [data-ui-stepper] [data-part-marker] {
     /**
      * The colour of the glyph drawn over the number, held on the marker rather
      * than stated on the glyph's box. Reading it through one custom property
@@ -224,7 +224,7 @@
    * takes the accent's text colour: it is where they are, not where they have
    * been, so it stays an outline and does not fill.
    */
-  [data-ui='stepper'] [data-current] [data-part='marker'] {
+  [data-ui-stepper] [data-current] [data-part-marker] {
     border-color: var(--slotted-stepper-marker-border-current, var(--_done-line));
     color: var(--slotted-stepper-marker-color-current, var(--slotted-tone-accent-text, Highlight));
   }
@@ -234,12 +234,12 @@
    * check, because a reader scanning the row counts filled discs rather than
    * reading five numbers.
    */
-  [data-ui='stepper'] [data-complete]:not([data-current], [data-invalid]) [data-part='marker'] {
+  [data-ui-stepper] [data-complete]:not([data-current], [data-invalid]) [data-part-marker] {
     background-color: var(--slotted-stepper-marker-surface-complete, var(--_done-line));
     border-color: var(--slotted-stepper-marker-surface-complete, var(--_done-line));
   }
 
-  [data-ui='stepper'] [data-invalid] [data-part='marker'] {
+  [data-ui-stepper] [data-invalid] [data-part-marker] {
     --_mark: var(
       --slotted-stepper-marker-color-invalid,
       var(--slotted-tone-danger-on-solid, MarkText)
@@ -255,7 +255,7 @@
     );
   }
 
-  [data-ui='stepper'] [data-disabled]:not([data-invalid]) [data-part='marker'] {
+  [data-ui-stepper] [data-disabled]:not([data-invalid]) [data-part-marker] {
     background-color: transparent;
     border-color: var(--slotted-disabled-border, GrayText);
     color: var(--slotted-disabled-foreground, GrayText);
@@ -284,11 +284,11 @@
    * each other. The capture is what said so — the two marks overlap into a
    * shape that is neither.
    */
-  [data-ui='stepper'] :is([data-complete], [data-invalid]) [data-part='marker'] {
+  [data-ui-stepper] :is([data-complete], [data-invalid]) [data-part-marker] {
     color: transparent;
   }
 
-  [data-ui='stepper'] [data-part='marker'] > [data-ui='icon'] {
+  [data-ui-stepper] [data-part-marker] > [data-ui-icon] {
     --slotted-icon-size: var(--_mark-size);
 
     color: var(--_mark);
@@ -310,7 +310,7 @@
    * complete, because the number is what says where the reader is in a
    * sequence and a check would say they had left it.
    */
-  [data-ui='stepper'] [data-current]:not([data-invalid]) [data-part='marker'] {
+  [data-ui-stepper] [data-current]:not([data-invalid]) [data-part-marker] {
     color: var(--slotted-stepper-marker-color-current, var(--slotted-tone-accent-text, Highlight));
   }
 
@@ -321,7 +321,7 @@
    * where it was.
    */
 
-  [data-ui='stepper'] [data-part='label'] {
+  [data-ui-stepper] [data-part-label] {
     color: var(--_muted);
     font-weight: var(--slotted-stepper-label-weight, var(--slotted-font-weight-medium, 500));
     line-height: var(--slotted-stepper-line-height, var(--slotted-line-height-sm, 1.45));
@@ -329,19 +329,19 @@
     overflow-wrap: anywhere;
   }
 
-  [data-ui='stepper'] :is([data-current], [data-complete]) [data-part='label'] {
+  [data-ui-stepper] :is([data-current], [data-complete]) [data-part-label] {
     color: var(--_strong);
   }
 
-  [data-ui='stepper'] [data-invalid] [data-part='label'] {
+  [data-ui-stepper] [data-invalid] [data-part-label] {
     color: var(--slotted-stepper-label-color-invalid, var(--slotted-tone-danger-text, MarkText));
   }
 
-  [data-ui='stepper'] [data-disabled]:not([data-invalid]) [data-part='label'] {
+  [data-ui-stepper] [data-disabled]:not([data-invalid]) [data-part-label] {
     color: var(--slotted-disabled-foreground, GrayText);
   }
 
-  [data-ui='stepper'] [data-part='description'] {
+  [data-ui-stepper] [data-part-description] {
     color: var(--_muted);
     display: block;
     font-size: var(--slotted-stepper-description-font-size, var(--slotted-font-size-xs, 0.75rem));
@@ -354,10 +354,10 @@
    * on the label rather than on the whole column: the column is mostly empty
    * space, and a fill across it would read as a selected row.
    */
-  [data-ui='stepper']
-    [data-part='item']:not([data-disabled], [data-loading])
-    :is(button, a)[data-part='trigger']:hover
-    [data-part='label'] {
+  [data-ui-stepper]
+    [data-part-item]:not([data-disabled], [data-loading])
+    :is(button, a)[data-part-trigger]:hover
+    [data-part-label] {
     color: var(--_strong);
     text-decoration-color: currentColor;
     text-decoration-line: underline;
@@ -378,10 +378,10 @@
    * the danger tone, and a press that replaced either would be a press that
    * also changed what the step is.
    */
-  [data-ui='stepper']
-    [data-part='item']:not([data-disabled], [data-loading])
-    :is(button, a)[data-part='trigger']:active
-    [data-part='marker'] {
+  [data-ui-stepper]
+    [data-part-item]:not([data-disabled], [data-loading])
+    :is(button, a)[data-part-trigger]:active
+    [data-part-marker] {
     box-shadow: inset 0 0 0 var(--_marker) var(--_state-press);
   }
 
@@ -399,7 +399,7 @@
    * centre at every density.
    */
 
-  [data-ui='stepper'] [data-part='separator'] {
+  [data-ui-stepper] [data-part-separator] {
     background-color: var(--_pending-line);
     display: block;
     flex: none;
@@ -415,7 +415,7 @@
    * consumer marked completion would stay grey through every flow that never
    * claims it.
    */
-  [data-ui='stepper'] [data-part='separator'][data-complete] {
+  [data-ui-stepper] [data-part-separator][data-complete] {
     background-color: var(--_done-line);
   }
 
@@ -427,8 +427,8 @@
    * knows how wide a label is, so nothing can position around it — but a flex
    * item can be told to take the rest.
    */
-  [data-ui='stepper'][data-orientation='horizontal'][data-label-placement='end']
-    [data-part='separator'] {
+  [data-ui-stepper][data-orientation='horizontal'][data-label-placement='end']
+    [data-part-separator] {
     align-self: center;
     block-size: var(--_rule);
     flex: 1 1 auto;
@@ -437,8 +437,7 @@
     position: static;
   }
 
-  [data-ui='stepper'][data-orientation='horizontal'][data-label-placement='end']
-    [data-part='trigger'] {
+  [data-ui-stepper][data-orientation='horizontal'][data-label-placement='end'] [data-part-trigger] {
     flex: 0 1 auto;
     min-inline-size: 0;
   }
@@ -448,8 +447,8 @@
    * centres. The columns are equal, so the next centre is exactly one column
    * away, and both ends are derived from the marker rather than stated.
    */
-  [data-ui='stepper'][data-orientation='horizontal'][data-label-placement='bottom']
-    [data-part='separator'] {
+  [data-ui-stepper][data-orientation='horizontal'][data-label-placement='bottom']
+    [data-part-separator] {
     block-size: var(--_rule);
     inset-block-start: calc(0.5 * (var(--_marker) - var(--_rule)));
     inset-inline-end: calc(-50% + 0.5 * var(--_marker) + var(--_gap));
@@ -469,7 +468,7 @@
    * tall, and `--_gap` at both ends of a step gap of one rem left a rule of
    * no length at all; a quarter rem leaves half the step gap drawn.
    */
-  [data-ui='stepper'][data-orientation='vertical'] [data-part='separator'] {
+  [data-ui-stepper][data-orientation='vertical'] [data-part-separator] {
     --_rule-room: var(--slotted-stepper-connector-gap, var(--slotted-space-2, 0.25rem));
 
     inline-size: var(--_rule);
@@ -484,7 +483,7 @@
    * binding does not render the element at all; this is what a consumer who
    * renders one anyway gets, and it is nothing.
    */
-  [data-ui='stepper'] [data-part='item']:last-child [data-part='separator'] {
+  [data-ui-stepper] [data-part-item]:last-child [data-part-separator] {
     display: none;
   }
 
@@ -494,8 +493,8 @@
    * centres over the column and the connector runs between two centres.
    */
 
-  [data-ui='stepper'][data-orientation='horizontal'][data-label-placement='bottom']
-    [data-part='trigger'] {
+  [data-ui-stepper][data-orientation='horizontal'][data-label-placement='bottom']
+    [data-part-trigger] {
     inline-size: 100%;
   }
 
@@ -505,24 +504,24 @@
    * step lines up with its name rather than with its number.
    */
 
-  [data-ui='stepper'][data-orientation='vertical'] [data-part='item'] {
+  [data-ui-stepper][data-orientation='vertical'] [data-part-item] {
     padding-block-end: var(--slotted-stepper-step-gap, var(--slotted-space-6, 1rem));
   }
 
-  [data-ui='stepper'][data-orientation='vertical'] [data-part='item']:last-child {
+  [data-ui-stepper][data-orientation='vertical'] [data-part-item]:last-child {
     padding-block-end: 0;
   }
 
-  [data-ui='stepper'][data-orientation='vertical'] [data-part='panel'] {
+  [data-ui-stepper][data-orientation='vertical'] [data-part-panel] {
     margin-inline-start: calc(var(--_marker) + var(--_gap));
     padding-block-start: var(--slotted-stepper-panel-gap, var(--slotted-space-4, 0.5rem));
   }
 
-  [data-ui='stepper'][data-orientation='horizontal'] [data-part='panel'] {
+  [data-ui-stepper][data-orientation='horizontal'] [data-part-panel] {
     padding-block-start: var(--slotted-stepper-panel-gap, var(--slotted-space-6, 1rem));
   }
 
-  [data-ui='stepper'] [data-part='panel']:focus-visible {
+  [data-ui-stepper] [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);
   }
@@ -540,23 +539,23 @@
    */
 
   @container slotted-stepper (max-width: 30rem) {
-    [data-ui='stepper'][data-orientation='horizontal'] [data-part='list'] {
+    [data-ui-stepper][data-orientation='horizontal'] [data-part-list] {
       align-items: stretch;
       flex-direction: column;
     }
 
-    [data-ui='stepper'][data-orientation='horizontal'] [data-part='item'] {
+    [data-ui-stepper][data-orientation='horizontal'] [data-part-item] {
       flex: none;
       flex-direction: column;
       padding-block-end: var(--slotted-stepper-step-gap, var(--slotted-space-6, 1rem));
       padding-inline-end: 0;
     }
 
-    [data-ui='stepper'][data-orientation='horizontal'] [data-part='item']:last-child {
+    [data-ui-stepper][data-orientation='horizontal'] [data-part-item]:last-child {
       padding-block-end: 0;
     }
 
-    [data-ui='stepper'][data-orientation='horizontal'][data-label-placement] [data-part='trigger'] {
+    [data-ui-stepper][data-orientation='horizontal'][data-label-placement] [data-part-trigger] {
       align-items: center;
       flex-direction: row;
       inline-size: auto;
@@ -578,8 +577,7 @@
      * adds no weight of its own. Without it the row's own connector geometry
      * survived the reflow and the column drew four-pixel dots down its side.
      */
-    [data-ui='stepper'][data-orientation='horizontal'][data-label-placement]
-      [data-part='separator'] {
+    [data-ui-stepper][data-orientation='horizontal'][data-label-placement] [data-part-separator] {
       block-size: auto;
       flex: none;
       inline-size: var(--_rule);
@@ -592,7 +590,7 @@
       position: absolute;
     }
 
-    [data-ui='stepper'][data-orientation='horizontal'][data-label-placement] [data-part='panel'] {
+    [data-ui-stepper][data-orientation='horizontal'][data-label-placement] [data-part-panel] {
       margin-inline-start: calc(var(--_marker) + var(--_gap));
       padding-block-start: var(--slotted-stepper-panel-gap, var(--slotted-space-4, 0.5rem));
     }
@@ -609,17 +607,15 @@
    */
 
   @media (forced-colors: active) {
-    [data-ui='stepper'] [data-part='separator'] {
+    [data-ui-stepper] [data-part-separator] {
       background-color: GrayText;
     }
 
-    [data-ui='stepper'] [data-part='separator'][data-complete] {
+    [data-ui-stepper] [data-part-separator][data-complete] {
       background-color: Highlight;
     }
 
-    [data-ui='stepper']
-      :is([data-complete], [data-invalid]):not([data-current])
-      [data-part='marker'] {
+    [data-ui-stepper] :is([data-complete], [data-invalid]):not([data-current]) [data-part-marker] {
       background-color: Highlight;
       border-color: Highlight;
       color: HighlightText;