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

package/src/wizard/wizard.css

@@ -23,7 +23,7 @@
    * combinators: the content is other families, and a descendant rule would
    * restyle a `form`'s actions or an `alert`'s title.
    */
-  [data-ui='wizard'] {
+  [data-ui-wizard] {
     --_text: var(--slotted-text, CanvasText);
     --_muted: var(--slotted-text-muted, GrayText);
     --_rule: var(--slotted-wizard-border, var(--slotted-border-subtle, ButtonBorder));
@@ -72,7 +72,7 @@
 
   /* ── The two columns ──────────────────────────────────────────────────── */
 
-  [data-ui='wizard'] > [data-part='layout'] {
+  [data-ui-wizard] > [data-part-layout] {
     display: grid;
     gap: var(--_gap);
     grid-template-columns: minmax(0, 1fr);
@@ -84,16 +84,16 @@
    * step takes the rest. `align-items: start` keeps a short progress from
    * stretching to the step's height, which the sticky rule below needs.
    */
-  [data-ui='wizard'][data-progress='start'] > [data-part='layout'] {
+  [data-ui-wizard][data-progress='start'] > [data-part-layout] {
     align-items: start;
     grid-template-columns: var(--_progress-size) minmax(0, 1fr);
   }
 
-  [data-ui='wizard'][data-progress='none'] > [data-part='layout'] > [data-part='progress'] {
+  [data-ui-wizard][data-progress='none'] > [data-part-layout] > [data-part-progress] {
     display: none;
   }
 
-  [data-ui='wizard'] > [data-part='layout'] > [data-part='progress'] {
+  [data-ui-wizard] > [data-part-layout] > [data-part-progress] {
     display: flex;
     flex-direction: column;
     gap: var(--slotted-space-4, 0.5rem);
@@ -106,9 +106,9 @@
    * `--slotted-page-sticky-top` decision). Under `scroll=self` the column is
    * inside the root's own scroller and needs no stickiness.
    */
-  [data-ui='wizard'][data-progress='start']:not([data-scroll='self'])
-    > [data-part='layout']
-    > [data-part='progress'] {
+  [data-ui-wizard][data-progress='start']:not([data-scroll='self'])
+    > [data-part-layout]
+    > [data-part-progress] {
     inset-block-start: var(--slotted-page-sticky-top, 0px);
     position: sticky;
   }
@@ -117,7 +117,7 @@
    * Above the step, the progress is a row closed by a rule: without it the
    * row of markers and the step's heading read as one block of text.
    */
-  [data-ui='wizard'][data-progress='top'] > [data-part='layout'] > [data-part='progress'] {
+  [data-ui-wizard][data-progress='top'] > [data-part-layout] > [data-part-progress] {
     border-block-end: var(--_rule-size) solid var(--_rule);
     padding-block-end: var(--_rhythm);
   }
@@ -141,10 +141,7 @@
    * It is painted as a control at rest — the control surface, its resting
    * edge and lift, its radius — because it is one: it opens and closes.
    */
-  [data-ui='wizard']
-    > [data-part='layout']
-    > [data-part='progress']
-    > [data-part='progress-toggle'] {
+  [data-ui-wizard] > [data-part-layout] > [data-part-progress] > [data-part-progress-toggle] {
     align-items: center;
     appearance: none;
     background-color: var(--slotted-control-surface, Field);
@@ -175,41 +172,41 @@
         var(--slotted-control-transition-easing, var(--slotted-easing-standard, ease));
   }
 
-  [data-ui='wizard']
-    > [data-part='layout']
-    > [data-part='progress']
-    > [data-part='progress-toggle']:hover:not(:disabled):not([data-disabled]) {
+  [data-ui-wizard]
+    > [data-part-layout]
+    > [data-part-progress]
+    > [data-part-progress-toggle]:hover:not(:disabled):not([data-disabled]) {
     border-color: var(
       --slotted-wizard-toggle-hover-border-color,
       var(--slotted-tone-accent-border)
     );
   }
 
-  [data-ui='wizard']
-    > [data-part='layout']
-    > [data-part='progress']
-    > [data-part='progress-toggle']:active:not(:disabled):not([data-disabled]) {
+  [data-ui-wizard]
+    > [data-part-layout]
+    > [data-part-progress]
+    > [data-part-progress-toggle]:active:not(:disabled):not([data-disabled]) {
     background-color: var(
       --slotted-wizard-toggle-active-background,
       var(--slotted-tone-secondary-subtle-hover)
     );
   }
 
-  [data-ui='wizard']
-    > [data-part='layout']
-    > [data-part='progress']
-    > [data-part='progress-toggle']:focus-visible {
+  [data-ui-wizard]
+    > [data-part-layout]
+    > [data-part-progress]
+    > [data-part-progress-toggle]:focus-visible {
     box-shadow: var(--slotted-control-shadow-focus-geometry, 0 1px 4px -1px)
       var(--slotted-focus-ring-color, Highlight);
     outline: var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);
     outline-offset: var(--slotted-focus-ring-offset, 2px);
   }
 
-  [data-ui='wizard']
-    > [data-part='layout']
-    > [data-part='progress']
-    > [data-part='progress-toggle']
-    > [data-part='progress-position'] {
+  [data-ui-wizard]
+    > [data-part-layout]
+    > [data-part-progress]
+    > [data-part-progress-toggle]
+    > [data-part-progress-position] {
     font-size: var(--slotted-font-size-sm, 0.8125rem);
     font-weight: var(--slotted-font-weight-medium, 500);
     grid-area: position;
@@ -224,11 +221,11 @@
    * Every segment fills the track's height; colour alone separates a step
    * ahead from a step reached.
    */
-  [data-ui='wizard']
-    > [data-part='layout']
-    > [data-part='progress']
-    > [data-part='progress-toggle']
-    > [data-part='progress-track'] {
+  [data-ui-wizard]
+    > [data-part-layout]
+    > [data-part-progress]
+    > [data-part-progress-toggle]
+    > [data-part-progress-track] {
     align-items: center;
     block-size: var(--slotted-space-2, 0.25rem);
     display: flex;
@@ -237,12 +234,12 @@
     min-inline-size: 0;
   }
 
-  [data-ui='wizard']
-    > [data-part='layout']
-    > [data-part='progress']
-    > [data-part='progress-toggle']
-    > [data-part='progress-track']
-    > [data-part='progress-segment'] {
+  [data-ui-wizard]
+    > [data-part-layout]
+    > [data-part-progress]
+    > [data-part-progress-toggle]
+    > [data-part-progress-track]
+    > [data-part-progress-segment] {
     background-color: var(
       --slotted-wizard-segment-color,
       var(--slotted-control-border-color, ButtonBorder)
@@ -253,24 +250,24 @@
     transition: background-color var(--slotted-duration-medium) var(--slotted-easing-standard, ease);
   }
 
-  [data-ui='wizard']
-    > [data-part='layout']
-    > [data-part='progress']
-    > [data-part='progress-toggle']
-    > [data-part='progress-track']
-    > [data-part='progress-segment']:is([data-complete], [data-current]) {
+  [data-ui-wizard]
+    > [data-part-layout]
+    > [data-part-progress]
+    > [data-part-progress-toggle]
+    > [data-part-progress-track]
+    > [data-part-progress-segment]:is([data-complete], [data-current]) {
     background-color: var(
       --slotted-wizard-segment-color-complete,
       var(--slotted-tone-accent-solid, Highlight)
     );
   }
 
-  [data-ui='wizard']
-    > [data-part='layout']
-    > [data-part='progress']
-    > [data-part='progress-toggle']
-    > [data-part='progress-track']
-    > [data-part='progress-segment'][data-invalid] {
+  [data-ui-wizard]
+    > [data-part-layout]
+    > [data-part-progress]
+    > [data-part-progress-toggle]
+    > [data-part-progress-track]
+    > [data-part-progress-segment][data-invalid] {
     background-color: var(
       --slotted-wizard-segment-color-invalid,
       var(--slotted-tone-danger-solid, Mark)
@@ -281,49 +278,49 @@
    * The chevron turns a half turn when the list opens. The eye follows it
    * because it is the control the reader just pressed.
    */
-  [data-ui='wizard']
-    > [data-part='layout']
-    > [data-part='progress']
-    > [data-part='progress-toggle']
-    > [data-ui='icon'] {
+  [data-ui-wizard]
+    > [data-part-layout]
+    > [data-part-progress]
+    > [data-part-progress-toggle]
+    > [data-ui-icon] {
     color: var(--_muted);
     grid-area: icon;
     transition: rotate var(--slotted-duration-short) var(--slotted-easing-standard, ease);
   }
 
-  [data-ui='wizard']
-    > [data-part='layout']
-    > [data-part='progress'][data-open]
-    > [data-part='progress-toggle']
-    > [data-ui='icon'] {
+  [data-ui-wizard]
+    > [data-part-layout]
+    > [data-part-progress][data-open]
+    > [data-part-progress-toggle]
+    > [data-ui-icon] {
     rotate: 180deg;
   }
 
   /* ── The step ─────────────────────────────────────────────────────────── */
 
-  [data-ui='wizard'] > [data-part='layout'] > [data-part='main'] {
+  [data-ui-wizard] > [data-part-layout] > [data-part-main] {
     display: flex;
     flex-direction: column;
     gap: var(--_rhythm);
     min-inline-size: 0;
   }
 
-  [data-ui='wizard'] > [data-part='layout'] > [data-part='main'] > [data-part='error'] {
+  [data-ui-wizard] > [data-part-layout] > [data-part-main] > [data-part-error] {
     min-inline-size: 0;
   }
 
-  [data-ui='wizard'] > [data-part='layout'] > [data-part='main'] > [data-part='step'] {
+  [data-ui-wizard] > [data-part-layout] > [data-part-main] > [data-part-step] {
     display: flex;
     flex-direction: column;
     gap: var(--_header-gap);
     min-inline-size: 0;
   }
 
-  [data-ui='wizard']
-    > [data-part='layout']
-    > [data-part='main']
-    > [data-part='step']
-    > [data-part='step-header'] {
+  [data-ui-wizard]
+    > [data-part-layout]
+    > [data-part-main]
+    > [data-part-step]
+    > [data-part-step-header] {
     display: flex;
     flex-direction: column;
     gap: var(--slotted-space-2, 0.25rem);
@@ -341,12 +338,12 @@
    * as a selection nobody made. `form`'s summary, which is a region a reader
    * is sent to with work to do, keeps its own.
    */
-  [data-ui='wizard']
-    > [data-part='layout']
-    > [data-part='main']
-    > [data-part='step']
-    > [data-part='step-header']
-    > [data-part='step-title'] {
+  [data-ui-wizard]
+    > [data-part-layout]
+    > [data-part-main]
+    > [data-part-step]
+    > [data-part-step-header]
+    > [data-part-step-title] {
     font-family: var(
       --slotted-font-family-heading,
       var(--slotted-font-family-sans, ui-sans-serif, system-ui, sans-serif)
@@ -359,13 +356,13 @@
     overflow-wrap: anywhere;
   }
 
-  [data-ui='wizard']
-    > [data-part='layout']
-    > [data-part='main']
-    > [data-part='step']
-    > [data-part='step-header']
-    > [data-part='step-title']
-    > [data-part='position'] {
+  [data-ui-wizard]
+    > [data-part-layout]
+    > [data-part-main]
+    > [data-part-step]
+    > [data-part-step-header]
+    > [data-part-step-title]
+    > [data-part-position] {
     color: var(--_muted);
     display: block;
     font-size: var(--slotted-font-size-sm, 0.8125rem);
@@ -380,23 +377,23 @@
    * the name and the mark two words in the heading's accessible name; the
    * margin adds to that space what a tag's frame needs to stand clear.
    */
-  [data-ui='wizard']
-    > [data-part='layout']
-    > [data-part='main']
-    > [data-part='step']
-    > [data-part='step-header']
-    > [data-part='step-title']
-    > [data-part='optional'] {
+  [data-ui-wizard]
+    > [data-part-layout]
+    > [data-part-main]
+    > [data-part-step]
+    > [data-part-step-header]
+    > [data-part-step-title]
+    > [data-part-optional] {
     margin-inline-start: var(--slotted-space-1, 0.125rem);
     vertical-align: middle;
   }
 
-  [data-ui='wizard']
-    > [data-part='layout']
-    > [data-part='main']
-    > [data-part='step']
-    > [data-part='step-header']
-    > [data-part='step-description'] {
+  [data-ui-wizard]
+    > [data-part-layout]
+    > [data-part-main]
+    > [data-part-step]
+    > [data-part-step-header]
+    > [data-part-step-description] {
     color: var(--_muted);
     font-size: var(--slotted-font-size-md, 0.875rem);
     line-height: var(--slotted-line-height-md, 1.5);
@@ -411,11 +408,11 @@
    * skeletons, at the field's own gap. Nothing moves when the step arrives.
    * Actions are absent while it stands.
    */
-  [data-ui='wizard']
-    > [data-part='layout']
-    > [data-part='main']
-    > [data-part='step']
-    > [data-part='skeleton'] {
+  [data-ui-wizard]
+    > [data-part-layout]
+    > [data-part-main]
+    > [data-part-step]
+    > [data-part-skeleton] {
     display: flex;
     flex-direction: column;
     min-inline-size: 0;
@@ -428,7 +425,7 @@
    * The order on screen is the order in the DOM (WCAG 2.4.3): what leaves
    * the flow at the start, what moves it at the end, the primary action last.
    */
-  [data-ui='wizard'] > [data-part='layout'] > [data-part='main'] > [data-part='actions'] {
+  [data-ui-wizard] > [data-part-layout] > [data-part-main] > [data-part-actions] {
     align-items: center;
     border-block-start: var(--_rule-size) solid var(--_rule);
     display: flex;
@@ -438,11 +435,11 @@
     padding-block-start: var(--_rhythm);
   }
 
-  [data-ui='wizard']
-    > [data-part='layout']
-    > [data-part='main']
-    > [data-part='actions']
-    > :is([data-part='actions-start'], [data-part='actions-end']) {
+  [data-ui-wizard]
+    > [data-part-layout]
+    > [data-part-main]
+    > [data-part-actions]
+    > :is([data-part-actions-start], [data-part-actions-end]) {
     align-items: center;
     display: flex;
     flex-wrap: wrap;
@@ -460,19 +457,19 @@
    * apart. The start group aligns by baseline, so the status reads on the
    * labels' line.
    */
-  [data-ui='wizard']
-    > [data-part='layout']
-    > [data-part='main']
-    > [data-part='actions']
-    > [data-part='actions-start'] {
+  [data-ui-wizard]
+    > [data-part-layout]
+    > [data-part-main]
+    > [data-part-actions]
+    > [data-part-actions-start] {
     align-items: baseline;
   }
 
-  [data-ui='wizard']
-    > [data-part='layout']
-    > [data-part='main']
-    > [data-part='actions']
-    > [data-part='actions-end'] {
+  [data-ui-wizard]
+    > [data-part-layout]
+    > [data-part-main]
+    > [data-part-actions]
+    > [data-part-actions-end] {
     justify-content: flex-end;
     margin-inline-start: auto;
   }
@@ -490,34 +487,34 @@
    * its label in two. The margin is not on the group either, which moved a
    * wrapped draft status past the column.
    */
-  [data-ui='wizard']
-    > [data-part='layout']
-    > [data-part='main']
-    > [data-part='actions']
-    > [data-part='actions-start']
-    > [data-ui='button'][data-variant='ghost']:first-child {
+  [data-ui-wizard]
+    > [data-part-layout]
+    > [data-part-main]
+    > [data-part-actions]
+    > [data-part-actions-start]
+    > [data-ui-button][data-variant='ghost']:first-child {
     flex: none;
     max-inline-size: none;
     margin-inline-start: calc(var(--slotted-control-padding-inline-md, 0.75rem) * -1);
   }
 
-  [data-ui='wizard']
-    > [data-part='layout']
-    > [data-part='main']
-    > [data-part='actions']
-    > [data-part='actions-start']
-    > [data-part='draft-status'] {
+  [data-ui-wizard]
+    > [data-part-layout]
+    > [data-part-main]
+    > [data-part-actions]
+    > [data-part-actions-start]
+    > [data-part-draft-status] {
     color: var(--_muted);
     font-size: var(--slotted-font-size-sm, 0.8125rem);
     line-height: var(--slotted-line-height-sm, 1.45);
   }
 
-  [data-ui='wizard']
-    > [data-part='layout']
-    > [data-part='main']
-    > [data-part='actions']
-    > [data-part='actions-start']
-    > [data-part='draft-status']:empty {
+  [data-ui-wizard]
+    > [data-part-layout]
+    > [data-part-main]
+    > [data-part-actions]
+    > [data-part-actions-start]
+    > [data-part-draft-status]:empty {
     display: none;
   }
 
@@ -534,7 +531,7 @@
    * It is the one part reached with a descendant combinator: it stands
    * wherever the consumer's review content puts it.
    */
-  [data-ui='wizard'] [data-part='edit'] {
+  [data-ui-wizard] [data-part-edit] {
     appearance: none;
     background: none;
     border: 0;
@@ -550,16 +547,16 @@
     text-underline-offset: 0.2em;
   }
 
-  [data-ui='wizard'] [data-part='edit']:hover:not(:disabled):not([aria-disabled='true']) {
+  [data-ui-wizard] [data-part-edit]:hover:not(:disabled):not([aria-disabled='true']) {
     text-decoration-line: underline;
   }
 
-  [data-ui='wizard'] [data-part='edit']:focus-visible {
+  [data-ui-wizard] [data-part-edit]: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='wizard'] [data-part='edit']:is(:disabled, [aria-disabled='true']) {
+  [data-ui-wizard] [data-part-edit]:is(:disabled, [aria-disabled='true']) {
     color: var(--slotted-disabled-foreground, GrayText);
     cursor: not-allowed;
   }
@@ -570,7 +567,7 @@
    * The consumer's content in place of the step and the actions. It takes
    * focus once, and draws no ring for the step title's reason.
    */
-  [data-ui='wizard'] > [data-part='layout'] > [data-part='main'] > [data-part='complete'] {
+  [data-ui-wizard] > [data-part-layout] > [data-part-main] > [data-part-complete] {
     min-inline-size: 0;
     outline: none;
   }
@@ -584,32 +581,32 @@
    * flex child shrink below its content; `overscroll-behavior` keeps a wheel
    * at the end of the step from scrolling the page behind the layer.
    */
-  [data-ui='wizard'][data-scroll='self'] {
+  [data-ui-wizard][data-scroll='self'] {
     block-size: 100%;
     min-block-size: 0;
   }
 
-  [data-ui='wizard'][data-scroll='self'] > [data-part='layout'] {
+  [data-ui-wizard][data-scroll='self'] > [data-part-layout] {
     block-size: 100%;
     min-block-size: 0;
   }
 
-  [data-ui='wizard'][data-scroll='self'] > [data-part='layout'] > [data-part='progress'] {
+  [data-ui-wizard][data-scroll='self'] > [data-part-layout] > [data-part-progress] {
     max-block-size: 100%;
     overflow: auto;
     padding: var(--_ring-room);
   }
 
-  [data-ui='wizard'][data-scroll='self'] > [data-part='layout'] > [data-part='main'] {
+  [data-ui-wizard][data-scroll='self'] > [data-part-layout] > [data-part-main] {
     block-size: 100%;
     gap: 0;
     min-block-size: 0;
   }
 
-  [data-ui='wizard'][data-scroll='self']
-    > [data-part='layout']
-    > [data-part='main']
-    > :is([data-part='step'], [data-part='complete']) {
+  [data-ui-wizard][data-scroll='self']
+    > [data-part-layout]
+    > [data-part-main]
+    > :is([data-part-step], [data-part-complete]) {
     flex: 1 1 auto;
     min-block-size: 0;
     overflow: auto;
@@ -618,18 +615,15 @@
     padding-inline: var(--_ring-room);
   }
 
-  [data-ui='wizard'][data-scroll='self']
-    > [data-part='layout']
-    > [data-part='main']
-    > [data-part='error'] {
+  [data-ui-wizard][data-scroll='self'] > [data-part-layout] > [data-part-main] > [data-part-error] {
     padding-block-end: var(--_rhythm);
     padding-inline: var(--_ring-room);
   }
 
-  [data-ui='wizard'][data-scroll='self']
-    > [data-part='layout']
-    > [data-part='main']
-    > [data-part='actions'] {
+  [data-ui-wizard][data-scroll='self']
+    > [data-part-layout]
+    > [data-part-main]
+    > [data-part-actions] {
     background-color: var(--_ground);
     flex: none;
     padding-block-end: 0;
@@ -647,31 +641,28 @@
    * condition cannot read a custom property (token foundation, rule 4).
    */
   @container slotted-wizard (width < 600px) {
-    [data-ui='wizard'] > [data-part='layout'] {
+    [data-ui-wizard] > [data-part-layout] {
       gap: var(--_rhythm);
     }
 
-    [data-ui='wizard'][data-progress='start'] > [data-part='layout'] {
+    [data-ui-wizard][data-progress='start'] > [data-part-layout] {
       grid-template-columns: minmax(0, 1fr);
     }
 
-    [data-ui='wizard'][data-progress] > [data-part='layout'] > [data-part='progress'] {
+    [data-ui-wizard][data-progress] > [data-part-layout] > [data-part-progress] {
       border-block-end: 0;
       padding-block-end: 0;
       position: static;
     }
 
-    [data-ui='wizard']
-      > [data-part='layout']
-      > [data-part='progress']
-      > [data-part='progress-toggle'] {
+    [data-ui-wizard] > [data-part-layout] > [data-part-progress] > [data-part-progress-toggle] {
       display: grid;
     }
 
-    [data-ui='wizard']
-      > [data-part='layout']
-      > [data-part='progress']:not([data-open])
-      > [data-ui='stepper'] {
+    [data-ui-wizard]
+      > [data-part-layout]
+      > [data-part-progress]:not([data-open])
+      > [data-ui-stepper] {
       display: none;
     }
 
@@ -679,20 +670,17 @@
      * The open list stands under the bar, in the flow, on a sunken ground
      * so it reads as the bar's content rather than as the step.
      */
-    [data-ui='wizard']
-      > [data-part='layout']
-      > [data-part='progress'][data-open]
-      > [data-ui='stepper'] {
+    [data-ui-wizard] > [data-part-layout] > [data-part-progress][data-open] > [data-ui-stepper] {
       background-color: var(--slotted-surface-sunken, Canvas);
       border-radius: var(--slotted-control-radius, 6px);
       padding: var(--slotted-space-5, 0.75rem);
     }
 
-    [data-ui='wizard']
-      > [data-part='layout']
-      > [data-part='main']
-      > [data-part='actions']
-      > :is([data-part='actions-start'], [data-part='actions-end']) {
+    [data-ui-wizard]
+      > [data-part-layout]
+      > [data-part-main]
+      > [data-part-actions]
+      > :is([data-part-actions-start], [data-part-actions-end]) {
       inline-size: 100%;
     }
 
@@ -700,12 +688,12 @@
      * The two moving buttons share the line; a ghost Skip keeps its own
      * width, because a borderless third of a row reads as empty space.
      */
-    [data-ui='wizard']
-      > [data-part='layout']
-      > [data-part='main']
-      > [data-part='actions']
-      > [data-part='actions-end']
-      > [data-ui='button']:not([data-variant='ghost']) {
+    [data-ui-wizard]
+      > [data-part-layout]
+      > [data-part-main]
+      > [data-part-actions]
+      > [data-part-actions-end]
+      > [data-ui-button]:not([data-variant='ghost']) {
       flex: 1 1 0;
     }
 
@@ -714,20 +702,20 @@
      * picture here — and only the picture: it stays in the heading's text,
      * which is what a screen reader hears when focus lands there.
      */
-    [data-ui='wizard'][data-progress='start']
-      > [data-part='layout']
-      > [data-part='main']
-      > [data-part='step']
-      > [data-part='step-header']
-      > [data-part='step-title']
-      > [data-part='position'],
-    [data-ui='wizard'][data-progress='top']
-      > [data-part='layout']
-      > [data-part='main']
-      > [data-part='step']
-      > [data-part='step-header']
-      > [data-part='step-title']
-      > [data-part='position'] {
+    [data-ui-wizard][data-progress='start']
+      > [data-part-layout]
+      > [data-part-main]
+      > [data-part-step]
+      > [data-part-step-header]
+      > [data-part-step-title]
+      > [data-part-position],
+    [data-ui-wizard][data-progress='top']
+      > [data-part-layout]
+      > [data-part-main]
+      > [data-part-step]
+      > [data-part-step-header]
+      > [data-part-step-title]
+      > [data-part-position] {
       block-size: 1px;
       clip-path: inset(50%);
       inline-size: 1px;