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

package/src/sparkline/sparkline.css

@@ -11,7 +11,7 @@
    * chooses its own width: it is a thing read beside a value, and the value's
    * container is what has the room. The height is the family's, by size step.
    */
-  [data-ui='sparkline'] {
+  [data-ui-sparkline] {
     /* The height of the box, by size. Three steps of the space scale rather
        than of control geometry: a sparkline is content, not a control, and a
        dense table asks for `size="sm"` rather than for a shorter `md`. */
@@ -69,49 +69,49 @@
     vertical-align: middle;
   }
 
-  [data-ui='sparkline'][data-size='sm'] {
+  [data-ui-sparkline][data-size='sm'] {
     --_size: var(--slotted-sparkline-block-size-sm, var(--slotted-space-7, 1.25rem));
     --_stroke: var(--slotted-sparkline-line-width-sm, var(--slotted-border-width-medium, 1.5px));
     --_marker: var(--slotted-sparkline-marker-size-sm, var(--slotted-space-2, 0.25rem));
     --_ring: var(--slotted-sparkline-ring-width-sm, var(--slotted-border-width-medium, 1.5px));
   }
 
-  [data-ui='sparkline'][data-size='lg'] {
+  [data-ui-sparkline][data-size='lg'] {
     --_size: var(--slotted-sparkline-block-size-lg, var(--slotted-space-11, 3rem));
     --_marker: var(--slotted-sparkline-marker-size-lg, var(--slotted-space-4, 0.5rem));
   }
 
   /* ── Series: which one of eight this is ──────────────────────────────── */
 
-  [data-ui='sparkline'][data-series='1'] {
+  [data-ui-sparkline][data-series='1'] {
     --_color: var(--slotted-data-1);
   }
 
-  [data-ui='sparkline'][data-series='2'] {
+  [data-ui-sparkline][data-series='2'] {
     --_color: var(--slotted-data-2);
   }
 
-  [data-ui='sparkline'][data-series='3'] {
+  [data-ui-sparkline][data-series='3'] {
     --_color: var(--slotted-data-3);
   }
 
-  [data-ui='sparkline'][data-series='4'] {
+  [data-ui-sparkline][data-series='4'] {
     --_color: var(--slotted-data-4);
   }
 
-  [data-ui='sparkline'][data-series='5'] {
+  [data-ui-sparkline][data-series='5'] {
     --_color: var(--slotted-data-5);
   }
 
-  [data-ui='sparkline'][data-series='6'] {
+  [data-ui-sparkline][data-series='6'] {
     --_color: var(--slotted-data-6);
   }
 
-  [data-ui='sparkline'][data-series='7'] {
+  [data-ui-sparkline][data-series='7'] {
     --_color: var(--slotted-data-7);
   }
 
-  [data-ui='sparkline'][data-series='8'] {
+  [data-ui-sparkline][data-series='8'] {
     --_color: var(--slotted-data-8);
   }
 
@@ -123,33 +123,33 @@
    * shape rather than found. `neutral` is the comparison series and the aside,
    * in the step the page uses for one.
    */
-  [data-ui='sparkline'][data-tone='neutral'] {
+  [data-ui-sparkline][data-tone='neutral'] {
     --_color: var(--slotted-text-muted, GrayText);
   }
 
-  [data-ui='sparkline'][data-tone='accent'] {
+  [data-ui-sparkline][data-tone='accent'] {
     --_color: var(--slotted-tone-accent-text);
   }
 
-  [data-ui='sparkline'][data-tone='secondary'] {
+  [data-ui-sparkline][data-tone='secondary'] {
     --_color: var(--slotted-tone-secondary-text);
   }
 
-  [data-ui='sparkline'][data-tone='success'] {
+  [data-ui-sparkline][data-tone='success'] {
     --_color: var(--slotted-tone-success-text);
   }
 
-  [data-ui='sparkline'][data-tone='warning'] {
+  [data-ui-sparkline][data-tone='warning'] {
     --_color: var(--slotted-tone-warning-text);
   }
 
-  [data-ui='sparkline'][data-tone='danger'] {
+  [data-ui-sparkline][data-tone='danger'] {
     --_color: var(--slotted-tone-danger-text);
   }
 
   /* ── The drawing ───────────────────────────────────────────────────────── */
 
-  [data-ui='sparkline'] [data-part='plot'] {
+  [data-ui-sparkline] [data-part-plot] {
     block-size: 100%;
     display: block;
     inline-size: 100%;
@@ -165,7 +165,7 @@
    * of forty sparklines does not mint forty gradients. `mask-image` applies to
    * an SVG child from CSS in every engine that ships `@layer`.
    */
-  [data-ui='sparkline'] [data-part='area'] {
+  [data-ui-sparkline] [data-part-area] {
     fill: var(--_color);
     fill-opacity: var(--_area-opacity);
     mask-image: linear-gradient(to bottom, black, transparent);
@@ -179,7 +179,7 @@
    * stretched to the box; once measured, the grid is the box and the effect
    * changes nothing.
    */
-  [data-ui='sparkline'] [data-part='line'] {
+  [data-ui-sparkline] [data-part-line] {
     fill: none;
     stroke: var(--_color);
     stroke-linecap: round;
@@ -189,7 +189,7 @@
     vector-effect: non-scaling-stroke;
   }
 
-  [data-ui='sparkline'] [data-part='bar'] {
+  [data-ui-sparkline] [data-part-bar] {
     fill: var(--_bar-dim);
     stroke: none;
     transition:
@@ -198,7 +198,7 @@
   }
 
   /* The current period is the one the value beside the chart is about. */
-  [data-ui='sparkline'] [data-part='bar'][data-current] {
+  [data-ui-sparkline] [data-part-bar][data-current] {
     fill: var(--_color);
   }
 
@@ -207,7 +207,7 @@
    * that is not data, and the dash is what says so before the colour does.
    * The dash lengths are geometry of the stroke, not a scale step.
    */
-  [data-ui='sparkline'] [data-part='reference'] {
+  [data-ui-sparkline] [data-part-reference] {
     fill: none;
     stroke: var(--_reference-color);
     stroke-dasharray: 2 3;
@@ -226,20 +226,20 @@
    * in the colour of the ground so the disc stays legible where it lands on
    * the line.
    */
-  [data-ui='sparkline'] [data-part='ring'],
-  [data-ui='sparkline'] [data-part='marker'] {
+  [data-ui-sparkline] [data-part-ring],
+  [data-ui-sparkline] [data-part-marker] {
     fill: none;
     stroke-linecap: round;
     transition: d var(--slotted-duration-medium) var(--slotted-easing-standard);
     vector-effect: non-scaling-stroke;
   }
 
-  [data-ui='sparkline'] [data-part='ring'] {
+  [data-ui-sparkline] [data-part-ring] {
     stroke: var(--_ring-color);
     stroke-width: calc(var(--_marker) + 2 * var(--_ring));
   }
 
-  [data-ui='sparkline'] [data-part='marker'] {
+  [data-ui-sparkline] [data-part-marker] {
     stroke: var(--_color);
     stroke-width: var(--_marker);
   }
@@ -250,7 +250,7 @@
    * inline end. The grid is mirrored rather than recomputed, so both
    * bindings hand the engine the same box and the same order.
    */
-  [data-ui='sparkline']:dir(rtl) [data-part='plot'] {
+  [data-ui-sparkline]:dir(rtl) [data-part-plot] {
     transform: scaleX(-1);
   }
 
@@ -263,19 +263,19 @@
    * one `CanvasText`, and the wash goes.
    */
   @media (forced-colors: active) {
-    [data-ui='sparkline'] [data-part='area'] {
+    [data-ui-sparkline] [data-part-area] {
       display: none;
     }
 
-    [data-ui='sparkline'] [data-part='bar'] {
+    [data-ui-sparkline] [data-part-bar] {
       fill: GrayText;
     }
 
-    [data-ui='sparkline'] [data-part='bar'][data-current] {
+    [data-ui-sparkline] [data-part-bar][data-current] {
       fill: CanvasText;
     }
 
-    [data-ui='sparkline'] [data-part='ring'] {
+    [data-ui-sparkline] [data-part-ring] {
       stroke: Canvas;
     }
   }

package/src/spinner/spinner.css

@@ -45,7 +45,7 @@
    * twenty-four clear inside that box, and the ring keeps the same inset, so
    * the swap is between two shapes of one measure.
    */
-  [data-ui='spinner'] {
+  [data-ui-spinner] {
     --_size: var(--slotted-spinner-size, var(--slotted-control-icon-size-md, 16px));
     --_ring: calc(var(--_size) * 5 / 6);
     /**
@@ -122,7 +122,7 @@
   }
 
   @starting-style {
-    [data-ui='spinner'] {
+    [data-ui-spinner] {
       opacity: 0;
       scale: 0.6;
     }
@@ -134,7 +134,7 @@
    * replacing one continuous motion with a slower one.
    */
   @media (prefers-reduced-motion: reduce) {
-    [data-ui='spinner'] {
+    [data-ui-spinner] {
       --_head: 270deg;
 
       animation: none;
@@ -149,7 +149,7 @@
      * `currentcolor`, which is the host's ink, already forced to the right
      * value.
      */
-    [data-ui='spinner'] {
+    [data-ui-spinner] {
       forced-color-adjust: none;
     }
   }

package/src/split-button/split-button.css

@@ -39,7 +39,7 @@
    *   itself;
    * - only focus is raised.
    */
-  [data-ui='split-button'][data-part='root'] {
+  [data-ui-split-button][data-part-root] {
     --_radius: var(--slotted-split-button-radius, var(--slotted-control-radius, 4px));
     --_overlap: calc(-1 * var(--slotted-control-border-width, 1px));
 
@@ -68,19 +68,19 @@
    * square from the control height and stays so, because a wide chevron is a
    * second button nobody asked for.
    */
-  [data-ui='split-button'][data-part='root'][data-full-width] {
+  [data-ui-split-button][data-part-root][data-full-width] {
     display: flex;
     inline-size: 100%;
   }
 
-  [data-ui='split-button'][data-part='root'][data-full-width] > [data-part='primary'] {
+  [data-ui-split-button][data-part-root][data-full-width] > [data-part-primary] {
     flex: 1 1 0;
     min-inline-size: 0;
   }
 
   /* ── The shape ────────────────────────────────────────────────────────── */
 
-  [data-ui='split-button'][data-part='root'] > [data-part='primary'] {
+  [data-ui-split-button][data-part-root] > [data-part-primary] {
     border-end-end-radius: 0;
     border-end-start-radius: var(--_radius);
     border-start-end-radius: 0;
@@ -90,7 +90,7 @@
     min-inline-size: 0;
   }
 
-  [data-ui='split-button'][data-part='root'] > [data-part='menu-trigger'] {
+  [data-ui-split-button][data-part-root] > [data-part-menu-trigger] {
     border-end-end-radius: var(--_radius);
     border-end-start-radius: 0;
     border-start-end-radius: var(--_radius);
@@ -113,19 +113,15 @@
    * `button-group` records: the rule has to outrank every border rule `button`
    * writes for the same control whatever order the two sheets load in.
    */
-  [data-ui='split-button'][data-part='root']
-    > [data-ui='button'][data-variant='outline'][data-pressed],
-  [data-ui='split-button'][data-part='root']
-    > [data-ui='button'][data-variant='outline'][data-disabled],
-  [data-ui='split-button'][data-part='root'] > [data-ui='button'][data-variant='outline']:disabled {
+  [data-ui-split-button][data-part-root] > [data-ui-button][data-variant='outline'][data-pressed],
+  [data-ui-split-button][data-part-root] > [data-ui-button][data-variant='outline'][data-disabled],
+  [data-ui-split-button][data-part-root] > [data-ui-button][data-variant='outline']:disabled {
     border-color: var(--slotted-control-border-color, ButtonBorder);
   }
 
-  [data-ui='split-button'][data-part='root']
-    > [data-ui='button'][data-variant='ghost'][data-pressed],
-  [data-ui='split-button'][data-part='root']
-    > [data-ui='button'][data-variant='ghost'][data-disabled],
-  [data-ui='split-button'][data-part='root'] > [data-ui='button'][data-variant='ghost']:disabled {
+  [data-ui-split-button][data-part-root] > [data-ui-button][data-variant='ghost'][data-pressed],
+  [data-ui-split-button][data-part-root] > [data-ui-button][data-variant='ghost'][data-disabled],
+  [data-ui-split-button][data-part-root] > [data-ui-button][data-variant='ghost']:disabled {
     border-color: transparent;
   }
 
@@ -136,8 +132,7 @@
    * narrowed, because a narrower border box would move its label by half a
    * pixel — and the trigger's leading edge is the one seen.
    */
-  [data-ui='split-button'][data-part='root']
-    > [data-ui='button'][data-part='primary'][data-variant] {
+  [data-ui-split-button][data-part-root] > [data-ui-button][data-part-primary][data-variant] {
     border-inline-end-color: transparent;
   }
 
@@ -153,28 +148,28 @@
    * one. It is painted on the trigger's leading edge, the one edge the rule
    * above leaves in the column.
    */
-  [data-ui='split-button'][data-part='root'] > [data-tone='accent'] {
+  [data-ui-split-button][data-part-root] > [data-tone='accent'] {
     --_seam: var(--slotted-tone-accent-solid-active);
   }
 
-  [data-ui='split-button'][data-part='root'] > [data-tone='secondary'] {
+  [data-ui-split-button][data-part-root] > [data-tone='secondary'] {
     --_seam: var(--slotted-tone-secondary-solid-active);
   }
 
-  [data-ui='split-button'][data-part='root'] > [data-tone='success'] {
+  [data-ui-split-button][data-part-root] > [data-tone='success'] {
     --_seam: var(--slotted-tone-success-solid-active);
   }
 
-  [data-ui='split-button'][data-part='root'] > [data-tone='warning'] {
+  [data-ui-split-button][data-part-root] > [data-tone='warning'] {
     --_seam: var(--slotted-tone-warning-solid-active);
   }
 
-  [data-ui='split-button'][data-part='root'] > [data-tone='danger'] {
+  [data-ui-split-button][data-part-root] > [data-tone='danger'] {
     --_seam: var(--slotted-tone-danger-solid-active);
   }
 
-  [data-ui='split-button'][data-part='root']
-    > [data-ui='button'][data-variant='solid'][data-part='menu-trigger'] {
+  [data-ui-split-button][data-part-root]
+    > [data-ui-button][data-variant='solid'][data-part-menu-trigger] {
     border-inline-start-color: var(--_seam, ButtonBorder);
   }
 
@@ -184,10 +179,10 @@
    * and the seam takes that border so the bar reads as one unavailable
    * control rather than as a grey one with a coloured line through it.
    */
-  [data-ui='split-button'][data-part='root']
-    > [data-ui='button'][data-variant='solid'][data-part='menu-trigger']:disabled,
-  [data-ui='split-button'][data-part='root']
-    > [data-ui='button'][data-variant='solid'][data-part='menu-trigger'][data-disabled] {
+  [data-ui-split-button][data-part-root]
+    > [data-ui-button][data-variant='solid'][data-part-menu-trigger]:disabled,
+  [data-ui-split-button][data-part-root]
+    > [data-ui-button][data-variant='solid'][data-part-menu-trigger][data-disabled] {
     border-inline-start-color: var(--slotted-disabled-border, ButtonBorder);
   }
 
@@ -197,7 +192,7 @@
    * follows it in the DOM. Hover and press repaint a fill and never an edge,
    * so there is nothing to lift for them — `button-group`'s reading.
    */
-  [data-ui='split-button'][data-part='root'] > *:focus-visible {
+  [data-ui-split-button][data-part-root] > *:focus-visible {
     z-index: 1;
   }
 
@@ -235,7 +230,7 @@
    * send. `pointer-events: none` is also what takes hover away without a
    * state the stylesheet would have to hold back.
    */
-  [data-ui='split-button'][data-part='root'][data-loading] > [data-part='menu-trigger'] {
+  [data-ui-split-button][data-part-root][data-loading] > [data-part-menu-trigger] {
     pointer-events: none;
   }
 
@@ -246,7 +241,7 @@
    * puts it back — `button-group`'s rule for the same case.
    */
   @media (forced-colors: active) {
-    [data-ui='split-button'][data-part='root'] > [data-ui='button'][data-pressed] {
+    [data-ui-split-button][data-part-root] > [data-ui-button][data-pressed] {
       border-color: Highlight;
     }
   }

package/src/splitter/splitter.css

@@ -15,7 +15,7 @@
    *
    * `touch-action: none` so a drag is not read as a scroll on the way past.
    */
-  [data-ui='splitter'] {
+  [data-ui-splitter] {
     /**
      * The track is what the pointer sees and `--slotted-target-min` is what it
      * gets: `::before` below is a transparent box centred on the track, which
@@ -111,9 +111,9 @@
    * `data-dragging` and rest as the same picture. Closing the gap hands those
    * pixels to the lines, and the pair roughly doubles instead.
    */
-  [data-ui='splitter']:not([data-disabled]):hover,
-  [data-ui='splitter']:not([data-disabled]):focus-visible,
-  [data-ui='splitter'][data-dragging] {
+  [data-ui-splitter]:not([data-disabled]):hover,
+  [data-ui-splitter]:not([data-disabled]):focus-visible,
+  [data-ui-splitter][data-dragging] {
     --_gap: var(--slotted-space-4, 0.5rem);
   }
 
@@ -124,14 +124,14 @@
    * other. A container that packs its children instead of stretching them
    * would otherwise size the bar from its content.
    */
-  [data-ui='splitter'][data-orientation='vertical'] {
+  [data-ui-splitter][data-orientation='vertical'] {
     flex-direction: column;
     inline-size: var(--_track);
     align-self: stretch;
     cursor: col-resize;
   }
 
-  [data-ui='splitter'][data-orientation='horizontal'] {
+  [data-ui-splitter][data-orientation='horizontal'] {
     flex-direction: row;
     block-size: var(--_track);
     justify-self: stretch;
@@ -142,18 +142,18 @@
    * The reach. Transparent, centred on the track, and the reason a sixteen-pixel
    * picture is a twenty-four-pixel target.
    */
-  [data-ui='splitter']::before {
+  [data-ui-splitter]::before {
     content: '';
     position: absolute;
     --_overhang: calc((var(--_reach) - var(--_track)) / -2);
   }
 
-  [data-ui='splitter'][data-orientation='vertical']::before {
+  [data-ui-splitter][data-orientation='vertical']::before {
     inset-block: 0;
     inset-inline: var(--_overhang);
   }
 
-  [data-ui='splitter'][data-orientation='horizontal']::before {
+  [data-ui-splitter][data-orientation='horizontal']::before {
     inset-inline: 0;
     inset-block: var(--_overhang);
   }
@@ -181,7 +181,7 @@
    * A proportion leaves slack at every track length. That slack is what the
    * hand claims.
    */
-  [data-ui='splitter'] > [data-part='line'] {
+  [data-ui-splitter] > [data-part-line] {
     flex: 0 1 min(var(--_line-length), 20%);
     min-block-size: 0;
     min-inline-size: 0;
@@ -193,28 +193,28 @@
         var(--slotted-control-transition-easing, var(--slotted-easing-standard));
   }
 
-  [data-ui='splitter'][data-orientation='vertical'] > [data-part='line'] {
+  [data-ui-splitter][data-orientation='vertical'] > [data-part-line] {
     inline-size: var(--_line);
   }
 
-  [data-ui='splitter'][data-orientation='horizontal'] > [data-part='line'] {
+  [data-ui-splitter][data-orientation='horizontal'] > [data-part-line] {
     block-size: var(--_line);
   }
 
   /* Solid at the grip, gone at the far end. Four rules, one per direction. */
-  [data-ui='splitter'][data-orientation='vertical'] > [data-part='line']:first-child {
+  [data-ui-splitter][data-orientation='vertical'] > [data-part-line]:first-child {
     background: linear-gradient(to bottom, transparent, var(--_rest));
   }
 
-  [data-ui='splitter'][data-orientation='vertical'] > [data-part='line']:last-child {
+  [data-ui-splitter][data-orientation='vertical'] > [data-part-line]:last-child {
     background: linear-gradient(to top, transparent, var(--_rest));
   }
 
-  [data-ui='splitter'][data-orientation='horizontal'] > [data-part='line']:first-child {
+  [data-ui-splitter][data-orientation='horizontal'] > [data-part-line]:first-child {
     background: linear-gradient(to right, transparent, var(--_rest));
   }
 
-  [data-ui='splitter'][data-orientation='horizontal'] > [data-part='line']:last-child {
+  [data-ui-splitter][data-orientation='horizontal'] > [data-part-line]:last-child {
     background: linear-gradient(to left, transparent, var(--_rest));
   }
 
@@ -227,9 +227,9 @@
    * Hover is held back for `data-disabled`, which is the shared rule from
    * `packages/styles/src/states.test.mjs`.
    */
-  [data-ui='splitter']:not([data-disabled]):hover > [data-part='line'],
-  [data-ui='splitter']:not([data-disabled]):focus-visible > [data-part='line'],
-  [data-ui='splitter'][data-dragging] > [data-part='line'] {
+  [data-ui-splitter]:not([data-disabled]):hover > [data-part-line],
+  [data-ui-splitter]:not([data-disabled]):focus-visible > [data-part-line],
+  [data-ui-splitter][data-dragging] > [data-part-line] {
     flex-basis: 100%;
     background: var(--_active);
   }
@@ -245,7 +245,7 @@
    * pixels, and the second saying cost the first its shape.
    */
 
-  [data-ui='splitter']:focus-visible {
+  [data-ui-splitter]: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));
   }
@@ -259,7 +259,7 @@
    * are one mark and have to move together, and `currentColor` is the one place
    * that says so.
    */
-  [data-ui='splitter'] > [data-part='grip'] {
+  [data-ui-splitter] > [data-part-grip] {
     flex: none;
     color: var(--_rest);
     background-image: radial-gradient(circle at center, currentColor 40%, transparent 42%);
@@ -269,19 +269,19 @@
       var(--slotted-control-transition-easing, var(--slotted-easing-standard));
   }
 
-  [data-ui='splitter'][data-orientation='vertical'] > [data-part='grip'] {
+  [data-ui-splitter][data-orientation='vertical'] > [data-part-grip] {
     inline-size: calc(2 * var(--_dot));
     block-size: calc(3 * var(--_dot));
   }
 
-  [data-ui='splitter'][data-orientation='horizontal'] > [data-part='grip'] {
+  [data-ui-splitter][data-orientation='horizontal'] > [data-part-grip] {
     inline-size: calc(3 * var(--_dot));
     block-size: calc(2 * var(--_dot));
   }
 
-  [data-ui='splitter']:not([data-disabled]):hover > [data-part='grip'],
-  [data-ui='splitter']:not([data-disabled]):focus-visible > [data-part='grip'],
-  [data-ui='splitter'][data-dragging] > [data-part='grip'] {
+  [data-ui-splitter]:not([data-disabled]):hover > [data-part-grip],
+  [data-ui-splitter]:not([data-disabled]):focus-visible > [data-part-grip],
+  [data-ui-splitter][data-dragging] > [data-part-grip] {
     color: var(--_active);
   }
 
@@ -290,7 +290,7 @@
    * separator can still read its value — so this changes the picture and the
    * cursor and nothing about the focus.
    */
-  [data-ui='splitter'][data-disabled] {
+  [data-ui-splitter][data-disabled] {
     cursor: default;
     --_rest: var(--slotted-splitter-disabled-line-color, var(--slotted-disabled-border, GrayText));
   }
@@ -301,23 +301,23 @@
    * grip's gradient is replaced for the same reason.
    */
   @media (forced-colors: active) {
-    [data-ui='splitter'] > [data-part='line'] {
+    [data-ui-splitter] > [data-part-line] {
       background: ButtonBorder;
       forced-color-adjust: none;
     }
 
-    [data-ui='splitter']:not([data-disabled]):hover > [data-part='line'],
-    [data-ui='splitter'][data-dragging] > [data-part='line'] {
+    [data-ui-splitter]:not([data-disabled]):hover > [data-part-line],
+    [data-ui-splitter][data-dragging] > [data-part-line] {
       background: ButtonText;
     }
 
-    [data-ui='splitter'] > [data-part='grip'] {
+    [data-ui-splitter] > [data-part-grip] {
       background-image: none;
       background-color: ButtonBorder;
     }
 
-    [data-ui='splitter'][data-disabled] > [data-part='line'],
-    [data-ui='splitter'][data-disabled] > [data-part='grip'] {
+    [data-ui-splitter][data-disabled] > [data-part-line],
+    [data-ui-splitter][data-disabled] > [data-part-grip] {
       background: GrayText;
     }
   }
@@ -328,8 +328,8 @@
    * without travelling.
    */
   @media (prefers-reduced-motion: reduce) {
-    [data-ui='splitter'] > [data-part='line'],
-    [data-ui='splitter'] > [data-part='grip'] {
+    [data-ui-splitter] > [data-part-line],
+    [data-ui-splitter] > [data-part-grip] {
       transition-duration: var(--slotted-duration-instant);
     }
   }