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

package/src/time-range-picker/time-range-picker.css

@@ -39,7 +39,7 @@
    * that end, and choosing one end moves to the other — the end list
    * appears already striking what the chosen start refuses.
    */
-  [data-ui='time-range-picker'][data-part='root'] {
+  [data-ui-time-range-picker][data-part-root] {
     display: block;
     /* The anchor the positioner measures is the control, and a block root
        lets the frame take the width the form gave it. */
@@ -55,7 +55,7 @@
    * and two of them broke the frame into two lines in any form column
    * narrower than they are, against the height every control shares.
    */
-  [data-ui='time-range-picker'] [data-part='control'] {
+  [data-ui-time-range-picker] [data-part-control] {
     --_font-size: var(--slotted-control-font-size-md, 13px);
     --_height: var(--slotted-control-height-md, 34px);
     --_padding-inline: var(--slotted-control-padding-inline-md, 13px);
@@ -105,7 +105,7 @@
       box-shadow var(--slotted-control-transition-duration) var(--slotted-control-transition-easing);
   }
 
-  [data-ui='time-range-picker'][data-part='root'][data-size='sm'] [data-part='control'] {
+  [data-ui-time-range-picker][data-part-root][data-size='sm'] [data-part-control] {
     --_font-size: var(--slotted-control-font-size-sm, 12px);
     --_height: var(--slotted-control-height-sm, 30px);
     --_padding-inline: var(--slotted-control-padding-inline-sm, 11px);
@@ -113,7 +113,7 @@
     --_icon-size: var(--slotted-control-icon-size-sm, 14px);
   }
 
-  [data-ui='time-range-picker'][data-part='root'][data-size='lg'] [data-part='control'] {
+  [data-ui-time-range-picker][data-part-root][data-size='lg'] [data-part-control] {
     --_font-size: var(--slotted-control-font-size-lg, 14px);
     --_height: var(--slotted-control-height-lg, 38px);
     --_padding-inline: var(--slotted-control-padding-inline-lg, 15px);
@@ -125,7 +125,7 @@
    *
    * The three steps `text-field` set, through the field's own variant tokens.
    */
-  [data-ui='time-range-picker'][data-part='root'][data-variant='subtle'] [data-part='control'] {
+  [data-ui-time-range-picker][data-part-root][data-variant='subtle'] [data-part-control] {
     background-color: var(
       --slotted-time-range-picker-subtle-background,
       var(--slotted-surface-sunken, Canvas)
@@ -136,7 +136,7 @@
     );
   }
 
-  [data-ui='time-range-picker'][data-part='root'][data-variant='plain'] [data-part='control'] {
+  [data-ui-time-range-picker][data-part-root][data-variant='plain'] [data-part-control] {
     background-color: transparent;
     border-color: transparent;
     border-radius: var(--slotted-radius-none, 0px);
@@ -151,7 +151,7 @@
    * into `PageDown` before the browser sees it, so a chord cannot be the only
    * way in.
    */
-  [data-ui='time-range-picker'] [data-part='trigger'] {
+  [data-ui-time-range-picker] [data-part-trigger] {
     align-items: center;
     appearance: none;
     background-color: transparent;
@@ -177,14 +177,14 @@
     -webkit-tap-highlight-color: transparent;
   }
 
-  [data-ui='time-range-picker'] [data-part='control']:has(> [data-part='clear']) {
+  [data-ui-time-range-picker] [data-part-control]:has(> [data-part-clear]) {
     --_actions: 2;
   }
 
   /* The value in words, one line, cut where it does not fit: the trigger's
      name carries it whole, so the ellipsis removes nothing a reader cannot
      hear. Tabular figures, so two ranges in a form line up. */
-  [data-ui='time-range-picker'] [data-part='summary'] {
+  [data-ui-time-range-picker] [data-part-summary] {
     flex: 1 1 auto;
     font-variant-numeric: tabular-nums;
     min-inline-size: 0;
@@ -194,7 +194,7 @@
     white-space: nowrap;
   }
 
-  [data-ui='time-range-picker'] [data-part='summary'][data-placeholder] {
+  [data-ui-time-range-picker] [data-part-summary][data-placeholder] {
     color: var(--slotted-time-range-picker-placeholder-color, var(--slotted-text-muted, GrayText));
   }
 
@@ -204,11 +204,11 @@
      sits where `date-range-picker` sits its calendar. */
   /* The frame draws the ring for the trigger; the browser's own ring on the
      trigger would be a second one, inside the frame and over its edge. */
-  [data-ui='time-range-picker'] [data-part='trigger']:focus-visible {
+  [data-ui-time-range-picker] [data-part-trigger]:focus-visible {
     outline: none;
   }
 
-  [data-ui='time-range-picker'] [data-part='trigger'] > [data-ui='icon'] {
+  [data-ui-time-range-picker] [data-part-trigger] > [data-ui-icon] {
     --slotted-icon-size: var(--_icon-size);
 
     /* No system-colour fallback on a decoration: unthemed, it takes the
@@ -220,7 +220,7 @@
     translate: 0 -50%;
   }
 
-  [data-ui='time-range-picker'] [data-part='trigger']:disabled {
+  [data-ui-time-range-picker] [data-part-trigger]:disabled {
     cursor: not-allowed;
   }
 
@@ -230,7 +230,7 @@
    * stands. Its own ring: tabbing from the trigger to it has to move
    * something visible, and the frame's ring would sit still.
    */
-  [data-ui='time-range-picker'] [data-part='clear'] {
+  [data-ui-time-range-picker] [data-part-clear] {
     --slotted-icon-size: var(--_icon-size);
 
     align-items: center;
@@ -260,7 +260,7 @@
   }
 
   /* The hit area, recovered outside the paint, as every inner control does. */
-  [data-ui='time-range-picker'] [data-part='clear']::after {
+  [data-ui-time-range-picker] [data-part-clear]::after {
     content: '';
     inset: min(0px, calc((100% - var(--slotted-target-min, 24px)) / 2));
     position: absolute;
@@ -271,32 +271,32 @@
      the hit area above grows to 44 pixels around them. It does not reach into
      the clock's lane after it, which is the trigger's to answer. */
   @media (pointer: coarse) {
-    [data-ui='time-range-picker'] [data-part='clear']::after {
+    [data-ui-time-range-picker] [data-part-clear]::after {
       inset: min(0px, calc((100% - var(--slotted-target-comfortable, 44px)) / 2));
       inset-inline-end: 0;
     }
   }
 
-  [data-ui='time-range-picker'] [data-part='clear']:hover:not(:disabled):not([data-disabled]) {
+  [data-ui-time-range-picker] [data-part-clear]:hover:not(:disabled):not([data-disabled]) {
     background-color: var(
       --slotted-time-range-picker-action-hover-background,
       var(--slotted-tone-secondary-subtle-hover)
     );
   }
 
-  [data-ui='time-range-picker'] [data-part='clear']:active:not(:disabled):not([data-disabled]) {
+  [data-ui-time-range-picker] [data-part-clear]:active:not(:disabled):not([data-disabled]) {
     background-color: var(
       --slotted-time-range-picker-action-active-background,
       var(--slotted-tone-secondary-subtle-active)
     );
   }
 
-  [data-ui='time-range-picker'] [data-part='clear']:focus-visible {
+  [data-ui-time-range-picker] [data-part-clear]:focus-visible {
     outline: var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);
     outline-offset: calc(var(--slotted-focus-ring-offset, 2px) * -1);
   }
 
-  [data-ui='time-range-picker'] [data-part='clear']:disabled {
+  [data-ui-time-range-picker] [data-part-clear]:disabled {
     color: var(--slotted-disabled-foreground);
     cursor: not-allowed;
   }
@@ -307,30 +307,30 @@
    * one it can meet, which is the order `STATE_PRECEDENCE` sets.
    */
 
-  [data-ui='time-range-picker'][data-part='root']:not([data-disabled]):not([data-readonly]):not(
+  [data-ui-time-range-picker][data-part-root]:not([data-disabled]):not([data-readonly]):not(
       [data-invalid]
     )
-    [data-part='control']:hover {
+    [data-part-control]:hover {
     border-color: var(
       --slotted-time-range-picker-hover-border-color,
       var(--slotted-tone-accent-border)
     );
   }
 
-  [data-ui='time-range-picker'][data-part='root'][data-variant='subtle']:not([data-disabled]):not(
+  [data-ui-time-range-picker][data-part-root][data-variant='subtle']:not([data-disabled]):not(
       [data-readonly]
     ):not([data-invalid])
-    [data-part='control']:hover {
+    [data-part-control]:hover {
     background-color: var(
       --slotted-time-range-picker-subtle-hover-background,
       var(--slotted-tone-secondary-subtle-hover)
     );
   }
 
-  [data-ui='time-range-picker'][data-part='root'][data-variant='plain']:not([data-disabled]):not(
+  [data-ui-time-range-picker][data-part-root][data-variant='plain']:not([data-disabled]):not(
       [data-readonly]
     ):not([data-invalid])
-    [data-part='control']:hover {
+    [data-part-control]:hover {
     background-color: var(
       --slotted-time-range-picker-plain-hover-background,
       var(--slotted-tone-secondary-subtle-hover)
@@ -340,7 +340,7 @@
 
   /* The trigger is the only thing in the frame that takes focus, apart from
      the clear, which draws its own ring; the frame's ring is drawn for it. */
-  [data-ui='time-range-picker'] [data-part='control']:has(> [data-part='trigger']:focus-visible) {
+  [data-ui-time-range-picker] [data-part-control]:has(> [data-part-trigger]: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);
@@ -349,15 +349,15 @@
 
   /* The ring of a control whose box is not its own is drawn inside that box,
      and there is no lift — the `plain` rule of `plain-variant.test.mjs`. */
-  [data-ui='time-range-picker'][data-part='root'][data-variant='plain']
-    [data-part='control']:has(> [data-part='trigger']:focus-visible) {
+  [data-ui-time-range-picker][data-part-root][data-variant='plain']
+    [data-part-control]:has(> [data-part-trigger]:focus-visible) {
     box-shadow: none;
     outline-offset: calc(var(--slotted-focus-ring-offset, 2px) * -1);
   }
 
   /* Invalid outranks hover and is written after it. The ring is retargeted
      rather than repainted, so every ring in the frame moves at once. */
-  [data-ui='time-range-picker'][data-part='root'][data-invalid] [data-part='control'] {
+  [data-ui-time-range-picker][data-part-root][data-invalid] [data-part-control] {
     --slotted-focus-ring-color: var(
       --slotted-time-range-picker-invalid-focus-ring-color,
       var(--slotted-focus-ring-color-invalid, Highlight)
@@ -385,16 +385,16 @@
     box-shadow: var(--_invalid-edge);
   }
 
-  [data-ui='time-range-picker'][data-invalid]
-    [data-part='control']:has(> [data-part='trigger']:focus-visible) {
+  [data-ui-time-range-picker][data-invalid]
+    [data-part-control]:has(> [data-part-trigger]:focus-visible) {
     box-shadow:
       var(--_invalid-edge),
       var(--slotted-control-shadow-focus-geometry, 0 1px 4px -1px)
         var(--slotted-focus-ring-color, Highlight);
   }
 
-  [data-ui='time-range-picker'][data-part='root'][data-variant='plain'][data-invalid]
-    [data-part='control']:has(> [data-part='trigger']:focus-visible) {
+  [data-ui-time-range-picker][data-part-root][data-variant='plain'][data-invalid]
+    [data-part-control]:has(> [data-part-trigger]:focus-visible) {
     /* The ring lies inside the box here, over the border and an edge as wide as
        it; the edge reaches past the ring. */
     box-shadow: inset 0 0 0
@@ -410,20 +410,20 @@
    * control draws its ring double, which a valid ring is not.
    */
   @media (forced-colors: active) {
-    [data-ui='time-range-picker'][data-part='root'][data-invalid] [data-part='control'] {
+    [data-ui-time-range-picker][data-part-root][data-invalid] [data-part-control] {
       outline: var(--_invalid-edge-width) solid CanvasText;
       outline-offset: calc(-1 * (var(--_border-width) + var(--_invalid-edge-width)));
     }
 
-    [data-ui='time-range-picker'][data-invalid]
-      [data-part='control']:has(> [data-part='trigger']:focus-visible) {
+    [data-ui-time-range-picker][data-invalid]
+      [data-part-control]:has(> [data-part-trigger]:focus-visible) {
       outline: calc(var(--slotted-focus-ring-width, 2px) + var(--_invalid-edge-width)) double
         var(--slotted-focus-ring-color, Highlight);
       outline-offset: var(--slotted-focus-ring-offset, 2px);
     }
 
-    [data-ui='time-range-picker'][data-part='root'][data-variant='plain'][data-invalid]
-      [data-part='control']:has(> [data-part='trigger']:focus-visible) {
+    [data-ui-time-range-picker][data-part-root][data-variant='plain'][data-invalid]
+      [data-part-control]:has(> [data-part-trigger]:focus-visible) {
       outline: calc(var(--slotted-focus-ring-width, 2px) + var(--_invalid-edge-width)) double
         var(--slotted-focus-ring-color, Highlight);
       outline-offset: calc(
@@ -434,7 +434,7 @@
 
   /* Read-only stays focusable, readable and copyable, and must not be
      mistakable for disabled: the ground says "not yours to change". */
-  [data-ui='time-range-picker'][data-part='root'][data-readonly] [data-part='control'] {
+  [data-ui-time-range-picker][data-part-root][data-readonly] [data-part-control] {
     background-color: var(
       --slotted-time-range-picker-readonly-background,
       var(--slotted-tone-secondary-subtle-hover)
@@ -443,7 +443,7 @@
   }
 
   /* Muted to the colour the theme measures rather than faded by opacity. */
-  [data-ui='time-range-picker'][data-part='root'][data-disabled] [data-part='control'] {
+  [data-ui-time-range-picker][data-part-root][data-disabled] [data-part-control] {
     background-color: var(
       --slotted-time-range-picker-disabled-background,
       var(--slotted-disabled-background)
@@ -457,9 +457,7 @@
     cursor: not-allowed;
   }
 
-  [data-ui='time-range-picker'][data-part='root'][data-disabled]
-    [data-part='trigger']
-    > [data-ui='icon'] {
+  [data-ui-time-range-picker][data-part-root][data-disabled] [data-part-trigger] > [data-ui-icon] {
     color: var(--slotted-disabled-foreground);
   }
 
@@ -468,7 +466,7 @@
    * What `packages/core/src/positioner` writes `position`, `left` and `top`
    * onto. The painted surface is one element in, as every overlay is built.
    */
-  [data-ui='time-range-picker'][data-part='positioner'] {
+  [data-ui-time-range-picker][data-part-positioner] {
     /* Only the block inset: the positioner writes `left` and never `right`,
        and `inset-inline-start` would resolve to `right` in a right-to-left
        document and win over the measured value. */
@@ -490,18 +488,15 @@
       translate var(--slotted-duration-short) var(--slotted-easing-exit);
   }
 
-  [data-ui='time-range-picker'][data-part='positioner'][data-side='top'] {
+  [data-ui-time-range-picker][data-part-positioner][data-side='top'] {
     translate: 0 var(--_enter-distance);
   }
 
-  [data-ui='time-range-picker'][data-part='positioner']:is(
-      [data-side='left'],
-      [data-side='right']
-    ) {
+  [data-ui-time-range-picker][data-part-positioner]:is([data-side='left'], [data-side='right']) {
     translate: 0 0;
   }
 
-  [data-ui='time-range-picker'][data-part='positioner'][data-open] {
+  [data-ui-time-range-picker][data-part-positioner][data-open] {
     opacity: 1;
     translate: 0 0;
     transition: none;
@@ -509,16 +504,16 @@
 
   /* The entrance is a keyframe animation and not a transition, for the reason
      `select` records: only a layer the positioner placed arrives. */
-  [data-ui='time-range-picker'][data-part='positioner'][data-open][data-positioned] {
+  [data-ui-time-range-picker][data-part-positioner][data-open][data-positioned] {
     animation: slotted-time-range-picker-enter-down var(--slotted-duration-medium)
       var(--slotted-easing-enter);
   }
 
-  [data-ui='time-range-picker'][data-part='positioner'][data-open][data-positioned][data-side='top'] {
+  [data-ui-time-range-picker][data-part-positioner][data-open][data-positioned][data-side='top'] {
     animation-name: slotted-time-range-picker-enter-up;
   }
 
-  [data-ui='time-range-picker'][data-part='positioner'][data-open][data-positioned]:is(
+  [data-ui-time-range-picker][data-part-positioner][data-open][data-positioned]:is(
       [data-side='left'],
       [data-side='right']
     ) {
@@ -547,24 +542,24 @@
 
   /* Stillness keeps the fade and drops the movement. */
   @media (prefers-reduced-motion: reduce) {
-    [data-ui='time-range-picker'][data-part='positioner'],
-    [data-ui='time-range-picker'][data-part='positioner'][data-side='top'],
-    [data-ui='time-range-picker'][data-part='positioner'][data-side='left'],
-    [data-ui='time-range-picker'][data-part='positioner'][data-side='right'] {
+    [data-ui-time-range-picker][data-part-positioner],
+    [data-ui-time-range-picker][data-part-positioner][data-side='top'],
+    [data-ui-time-range-picker][data-part-positioner][data-side='left'],
+    [data-ui-time-range-picker][data-part-positioner][data-side='right'] {
       translate: 0 0;
       transition: opacity var(--slotted-duration-short) var(--slotted-easing-exit);
     }
 
-    [data-ui='time-range-picker'][data-part='positioner'][data-open][data-positioned],
-    [data-ui='time-range-picker'][data-part='positioner'][data-open][data-positioned][data-side='top'],
-    [data-ui='time-range-picker'][data-part='positioner'][data-open][data-positioned][data-side='left'],
-    [data-ui='time-range-picker'][data-part='positioner'][data-open][data-positioned][data-side='right'] {
+    [data-ui-time-range-picker][data-part-positioner][data-open][data-positioned],
+    [data-ui-time-range-picker][data-part-positioner][data-open][data-positioned][data-side='top'],
+    [data-ui-time-range-picker][data-part-positioner][data-open][data-positioned][data-side='left'],
+    [data-ui-time-range-picker][data-part-positioner][data-open][data-positioned][data-side='right'] {
       animation-name: slotted-time-range-picker-fade;
     }
   }
 
   /* The anchor scrolled out of its own clipper. */
-  [data-ui='time-range-picker'][data-part='positioner'][data-detached] {
+  [data-ui-time-range-picker][data-part-positioner][data-detached] {
     visibility: hidden;
   }
 
@@ -579,7 +574,7 @@
    * by the positioner and absent wherever the surface is drawn without one,
    * and `min(auto, …)` is not a value.
    */
-  [data-ui='time-range-picker'] [data-part='content'] {
+  [data-ui-time-range-picker] [data-part-content] {
     background-color: var(
       --slotted-time-range-picker-surface,
       var(--slotted-surface-raised, Canvas)
@@ -628,7 +623,7 @@
    * what to do next. It renders at the panel's width and contributes nothing
    * to it, by the pair `datetime-picker` records.
    */
-  [data-ui='time-range-picker'] [data-part='head'] {
+  [data-ui-time-range-picker] [data-part-head] {
     box-sizing: border-box;
     inline-size: 0;
     min-inline-size: 100%;
@@ -643,30 +638,30 @@
     row-gap: var(--slotted-space-2, 0.25rem);
   }
 
-  [data-ui='time-range-picker'] [data-part='tabs'] {
+  [data-ui-time-range-picker] [data-part-tabs] {
     grid-area: tabs;
   }
 
-  [data-ui='time-range-picker'] [data-part='field'] {
+  [data-ui-time-range-picker] [data-part-field] {
     grid-area: field;
   }
 
-  [data-ui='time-range-picker'] [data-part='head'] > [data-part='now'] {
+  [data-ui-time-range-picker] [data-part-head] > [data-part-now] {
     align-self: center;
     grid-area: now;
   }
 
-  [data-ui='time-range-picker'] [data-part='hint'] {
+  [data-ui-time-range-picker] [data-part-hint] {
     align-self: center;
     grid-area: hint;
   }
 
-  [data-ui='time-range-picker'] [data-part='length'] {
+  [data-ui-time-range-picker] [data-part-length] {
     align-self: center;
     grid-area: length;
   }
 
-  [data-ui='time-range-picker'] [data-part='limit'] {
+  [data-ui-time-range-picker] [data-part-limit] {
     grid-area: limit;
   }
 
@@ -678,7 +673,7 @@
    * The row is the whole width so the two are the same size whatever their
    * values, and a thumb finds them without aiming.
    */
-  [data-ui='time-range-picker'] [data-part='tabs'] {
+  [data-ui-time-range-picker] [data-part-tabs] {
     border-block-end: var(--slotted-border-width-thin, 1px) solid
       var(
         --slotted-time-range-picker-content-border-color,
@@ -689,7 +684,7 @@
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
 
-  [data-ui='time-range-picker'] [data-part='tab'] {
+  [data-ui-time-range-picker] [data-part-tab] {
     appearance: none;
     background-color: transparent;
     border: 0;
@@ -719,7 +714,7 @@
     -webkit-tap-highlight-color: transparent;
   }
 
-  [data-ui='time-range-picker'] [data-part='tab']::after {
+  [data-ui-time-range-picker] [data-part-tab]::after {
     background-color: var(
       --slotted-time-range-picker-current-color,
       var(--slotted-tone-accent-solid)
@@ -738,30 +733,30 @@
       var(--slotted-control-transition-easing);
   }
 
-  [data-ui='time-range-picker'] [data-part='tab'][data-current]::after {
+  [data-ui-time-range-picker] [data-part-tab][data-current]::after {
     opacity: 1;
   }
 
-  [data-ui='time-range-picker'] [data-part='tab']:hover:not(:disabled):not([data-current]) {
+  [data-ui-time-range-picker] [data-part-tab]:hover:not(:disabled):not([data-current]) {
     background-color: var(
       --slotted-time-range-picker-option-hover-background,
       var(--slotted-tone-secondary-subtle-hover)
     );
   }
 
-  [data-ui='time-range-picker'] [data-part='tab']:focus-visible {
+  [data-ui-time-range-picker] [data-part-tab]:focus-visible {
     outline: var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);
     outline-offset: calc(var(--slotted-focus-ring-offset, 2px) * -1);
   }
 
-  [data-ui='time-range-picker'] [data-part='tab']:disabled {
+  [data-ui-time-range-picker] [data-part-tab]:disabled {
     color: var(--slotted-disabled-foreground);
     cursor: not-allowed;
   }
 
   /* The label, in the muted ink for both ends alike: which end is current
      is said once, by the underline. */
-  [data-ui='time-range-picker'] [data-part='tab-label'] {
+  [data-ui-time-range-picker] [data-part-tab-label] {
     color: var(--slotted-time-range-picker-label-color, var(--slotted-text-muted, GrayText));
     font-size: var(--slotted-font-size-xs, 11px);
     font-weight: var(--slotted-font-weight-medium, 500);
@@ -770,7 +765,7 @@
     white-space: nowrap;
   }
 
-  [data-ui='time-range-picker'] [data-part='tab-value'] {
+  [data-ui-time-range-picker] [data-part-tab-value] {
     font-size: var(--slotted-font-size-sm, 13px);
     font-variant-numeric: tabular-nums;
     font-weight: var(--slotted-font-weight-medium, 500);
@@ -780,7 +775,7 @@
     white-space: nowrap;
   }
 
-  [data-ui='time-range-picker'] [data-part='tab'][data-placeholder] [data-part='tab-value'] {
+  [data-ui-time-range-picker] [data-part-tab][data-placeholder] [data-part-tab-value] {
     color: var(--slotted-time-range-picker-label-color, var(--slotted-text-muted, GrayText));
     font-weight: var(--slotted-font-weight-regular, 400);
   }
@@ -794,7 +789,7 @@
    * `now` sits at the reading end of the same row. On a coarse pointer the
    * row is `now` alone: a segment is a spinbutton and raises no keyboard.
    */
-  [data-ui='time-range-picker'] [data-part='field'] {
+  [data-ui-time-range-picker] [data-part-field] {
     --slotted-control-border-width: 0px;
     --slotted-control-padding-inline-sm: var(--slotted-space-2, 0.25rem);
     --slotted-control-padding-inline-md: var(--slotted-space-2, 0.25rem);
@@ -815,7 +810,7 @@
    * line of its own under them. The hint is the difference between a panel
    * that refuses and a panel that explains.
    */
-  [data-ui='time-range-picker'] [data-part='hint'] {
+  [data-ui-time-range-picker] [data-part-hint] {
     color: var(--slotted-time-range-picker-hint-color, var(--slotted-text-muted, GrayText));
     font-size: var(--slotted-font-size-sm, 13px);
     min-inline-size: 0;
@@ -824,13 +819,13 @@
     unicode-bidi: plaintext;
   }
 
-  [data-ui='time-range-picker'] [data-part='hint'][data-invalid] {
+  [data-ui-time-range-picker] [data-part-hint][data-invalid] {
     color: var(--slotted-time-range-picker-invalid-color, var(--slotted-tone-danger-text));
   }
 
   /* The duration, at the reading end, in the accent's text tone: it is the
      number the band exists to say. Pending, it drops a step of weight. */
-  [data-ui='time-range-picker'] [data-part='length'] {
+  [data-ui-time-range-picker] [data-part-length] {
     color: var(--slotted-time-range-picker-length-color, var(--slotted-tone-accent-text));
     font-size: var(--slotted-font-size-sm, 13px);
     font-variant-numeric: tabular-nums;
@@ -840,17 +835,17 @@
     white-space: nowrap;
   }
 
-  [data-ui='time-range-picker'] [data-part='length'][data-pending] {
+  [data-ui-time-range-picker] [data-part-length][data-pending] {
     font-weight: var(--slotted-font-weight-medium, 500);
   }
 
   /* An empty length still holds its line, so the band does not grow a row
      when the first end is chosen. */
-  [data-ui='time-range-picker'] [data-part='length']:empty::before {
+  [data-ui-time-range-picker] [data-part-length]:empty::before {
     content: '\200B';
   }
 
-  [data-ui='time-range-picker'] [data-part='limit'] {
+  [data-ui-time-range-picker] [data-part-limit] {
     color: var(--slotted-time-range-picker-limit-color, var(--slotted-text-muted, GrayText));
     font-size: var(--slotted-font-size-xs, 11px);
     padding-inline-start: var(--slotted-space-2, 0.25rem);
@@ -861,7 +856,7 @@
    *
    * The current end, one at a time: its list. `data-position` says which.
    */
-  [data-ui='time-range-picker'] [data-part='panel'] {
+  [data-ui-time-range-picker] [data-part-panel] {
     display: flex;
     flex-direction: column;
     gap: var(--slotted-space-2, 0.25rem);
@@ -869,7 +864,7 @@
     min-inline-size: 0;
   }
 
-  [data-ui='time-range-picker'] [data-part='now'] {
+  [data-ui-time-range-picker] [data-part-now] {
     appearance: none;
     background-color: transparent;
     border: 0;
@@ -887,19 +882,19 @@
       var(--slotted-control-transition-easing);
   }
 
-  [data-ui='time-range-picker'] [data-part='now']:hover:not(:disabled):not([data-disabled]) {
+  [data-ui-time-range-picker] [data-part-now]:hover:not(:disabled):not([data-disabled]) {
     background-color: var(
       --slotted-time-range-picker-option-hover-background,
       var(--slotted-tone-secondary-subtle-hover)
     );
   }
 
-  [data-ui='time-range-picker'] [data-part='now']:focus-visible {
+  [data-ui-time-range-picker] [data-part-now]:focus-visible {
     outline: var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);
     outline-offset: calc(var(--slotted-focus-ring-offset, 2px) * -1);
   }
 
-  [data-ui='time-range-picker'] [data-part='now']:disabled {
+  [data-ui-time-range-picker] [data-part-now]:disabled {
     color: var(--slotted-disabled-foreground);
     cursor: not-allowed;
   }
@@ -910,7 +905,7 @@
    * clock. It ships the row they stand in and the chip each one is, between
    * the band and the panel, wrapping when they do not fit.
    */
-  [data-ui='time-range-picker'] [data-part='presets'] {
+  [data-ui-time-range-picker] [data-part-presets] {
     display: flex;
     flex-wrap: wrap;
     gap: var(--slotted-space-2, 0.25rem);
@@ -918,7 +913,7 @@
     min-inline-size: 0;
   }
 
-  [data-ui='time-range-picker'] [data-part='preset'] {
+  [data-ui-time-range-picker] [data-part-preset] {
     appearance: none;
     background-color: var(
       --slotted-time-range-picker-preset-background,
@@ -947,21 +942,21 @@
     -webkit-tap-highlight-color: transparent;
   }
 
-  [data-ui='time-range-picker'] [data-part='preset']:hover:not(:disabled):not([data-selected]) {
+  [data-ui-time-range-picker] [data-part-preset]:hover:not(:disabled):not([data-selected]) {
     background-color: var(
       --slotted-time-range-picker-preset-hover-background,
       var(--slotted-tone-secondary-subtle-hover)
     );
   }
 
-  [data-ui='time-range-picker'] [data-part='preset']:active:not(:disabled):not([data-selected]) {
+  [data-ui-time-range-picker] [data-part-preset]:active:not(:disabled):not([data-selected]) {
     background-color: var(
       --slotted-time-range-picker-preset-active-background,
       var(--slotted-tone-secondary-subtle-active)
     );
   }
 
-  [data-ui='time-range-picker'] [data-part='preset'][data-selected] {
+  [data-ui-time-range-picker] [data-part-preset][data-selected] {
     background-color: var(
       --slotted-time-range-picker-preset-selected-background,
       var(--slotted-tone-accent-subtle-hover)
@@ -970,12 +965,12 @@
     font-weight: var(--slotted-font-weight-medium, 500);
   }
 
-  [data-ui='time-range-picker'] [data-part='preset']:focus-visible {
+  [data-ui-time-range-picker] [data-part-preset]: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='time-range-picker'] [data-part='preset']:disabled {
+  [data-ui-time-range-picker] [data-part-preset]:disabled {
     color: var(--slotted-disabled-foreground);
     cursor: not-allowed;
   }
@@ -986,7 +981,7 @@
    * cap holds at every density, and scrolled rather than truncated —
    * `time-picker`'s list.
    */
-  [data-ui='time-range-picker'] [data-part='list'] {
+  [data-ui-time-range-picker] [data-part-list] {
     display: flex;
     flex-direction: column;
     /* One step of air between rows, so the chosen row's painted ground and
@@ -1001,7 +996,7 @@
     scroll-padding-block: var(--slotted-space-2, 0.25rem);
   }
 
-  [data-ui='time-range-picker'] [data-part='option'] {
+  [data-ui-time-range-picker] [data-part-option] {
     /* The time and its duration share a baseline, and the line box is the
        row: baseline alignment alone would seat both at the top of a row
        taller than one line, and a length line-height centres them in it. */
@@ -1036,7 +1031,7 @@
    * the other end it is the duration to the end already chosen. Muted, so the
    * time stays what the row is; on the chosen row it takes the row's own ink.
    */
-  [data-ui='time-range-picker'] [data-part='option-duration'] {
+  [data-ui-time-range-picker] [data-part-option-duration] {
     color: var(--slotted-time-range-picker-label-color, var(--slotted-text-muted, GrayText));
     flex: 0 1 auto;
     font-size: var(--slotted-font-size-xs, 11px);
@@ -1047,8 +1042,8 @@
     white-space: nowrap;
   }
 
-  [data-ui='time-range-picker'] [data-part='option'][data-selected] [data-part='option-duration'],
-  [data-ui='time-range-picker'] [data-part='option'][data-disabled] [data-part='option-duration'] {
+  [data-ui-time-range-picker] [data-part-option][data-selected] [data-part-option-duration],
+  [data-ui-time-range-picker] [data-part-option][data-disabled] [data-part-option-duration] {
     color: inherit;
   }
 
@@ -1059,27 +1054,27 @@
    * outranks the pointer. Specificity is what makes this a rule rather than an
    * ordering — the defect `time-picker` records from its visual gate.
    */
-  [data-ui='time-range-picker']
-    [data-part='option']:hover:not([data-disabled]):not([data-selected]):not([data-current]) {
+  [data-ui-time-range-picker]
+    [data-part-option]:hover:not([data-disabled]):not([data-selected]):not([data-current]) {
     background-color: var(
       --slotted-time-range-picker-option-hover-background,
       var(--slotted-tone-secondary-subtle-hover)
     );
   }
 
-  [data-ui='time-range-picker'] [data-part='option'][data-current]:not([data-selected]) {
+  [data-ui-time-range-picker] [data-part-option][data-current]:not([data-selected]) {
     background-color: var(
       --slotted-time-range-picker-option-current-background,
       var(--slotted-tone-secondary-subtle-active)
     );
   }
 
-  [data-ui='time-range-picker'] [data-part='option']:focus-visible {
+  [data-ui-time-range-picker] [data-part-option]:focus-visible {
     outline: var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);
     outline-offset: calc(var(--slotted-focus-ring-offset, 2px) * -1);
   }
 
-  [data-ui='time-range-picker'] [data-part='option'][data-selected] {
+  [data-ui-time-range-picker] [data-part-option][data-selected] {
     background-color: var(
       --slotted-time-range-picker-option-selected-background,
       var(--slotted-tone-accent-solid)
@@ -1091,7 +1086,7 @@
   }
 
   /* The chosen row still answers the pointer, one step along its own tone. */
-  [data-ui='time-range-picker'] [data-part='option'][data-selected]:hover:not([data-disabled]) {
+  [data-ui-time-range-picker] [data-part-option][data-selected]:hover:not([data-disabled]) {
     background-color: var(
       --slotted-time-range-picker-option-selected-hover-background,
       var(--slotted-tone-accent-solid-hover)
@@ -1104,7 +1099,7 @@
    * step the reader cannot infer — and it is muted to the colour the theme
    * measures rather than faded by opacity, so it stays readable.
    */
-  [data-ui='time-range-picker'] [data-part='option'][data-disabled] {
+  [data-ui-time-range-picker] [data-part-option][data-disabled] {
     background-color: transparent;
     color: var(--slotted-disabled-foreground);
     cursor: not-allowed;
@@ -1112,7 +1107,7 @@
 
   /* Nothing available for this end at all. A sentence rather than an empty
      box, the reason `time-picker` records. */
-  [data-ui='time-range-picker'] [data-part='empty'] {
+  [data-ui-time-range-picker] [data-part-empty] {
     align-items: center;
     color: var(--slotted-time-range-picker-label-color, var(--slotted-text-muted, GrayText));
     display: flex;
@@ -1129,7 +1124,7 @@
 
   /* The consumer's own actions and, at the reading end, `done`: the way out
      of a sheet that fills the screen and of an edit left half way. */
-  [data-ui='time-range-picker'] [data-part='footer'] {
+  [data-ui-time-range-picker] [data-part-footer] {
     box-sizing: border-box;
     inline-size: 0;
     min-inline-size: 100%;
@@ -1147,7 +1142,7 @@
     padding-block-start: var(--slotted-space-3, 0.375rem);
   }
 
-  [data-ui='time-range-picker'] [data-part='done'] {
+  [data-ui-time-range-picker] [data-part-done] {
     appearance: none;
     background-color: var(
       --slotted-time-range-picker-done-background,
@@ -1171,21 +1166,21 @@
     -webkit-tap-highlight-color: transparent;
   }
 
-  [data-ui='time-range-picker'] [data-part='done']:hover:not(:disabled) {
+  [data-ui-time-range-picker] [data-part-done]:hover:not(:disabled) {
     background-color: var(
       --slotted-time-range-picker-done-hover-background,
       var(--slotted-tone-accent-solid-hover)
     );
   }
 
-  [data-ui='time-range-picker'] [data-part='done']:active:not(:disabled) {
+  [data-ui-time-range-picker] [data-part-done]:active:not(:disabled) {
     background-color: var(
       --slotted-time-range-picker-done-active-background,
       var(--slotted-tone-accent-solid-active)
     );
   }
 
-  [data-ui='time-range-picker'] [data-part='done']:focus-visible {
+  [data-ui-time-range-picker] [data-part-done]:focus-visible {
     outline: var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);
     outline-offset: var(--slotted-focus-ring-offset, 2px);
   }
@@ -1198,7 +1193,7 @@
    * raises no keyboard — and the list is the way to a time.
    */
   @media (pointer: coarse) {
-    [data-ui='time-range-picker'] [data-part='field'] {
+    [data-ui-time-range-picker] [data-part-field] {
       display: none;
     }
   }
@@ -1209,18 +1204,18 @@
    * desktop and a sheet in a narrow viewport. The DOM does not change.
    */
   @media (max-width: 480px) and (pointer: coarse) {
-    [data-ui='time-range-picker'][data-part='positioner'][data-presentation='sheet'] {
+    [data-ui-time-range-picker][data-part-positioner][data-presentation='sheet'] {
       inset: auto 0 0;
       position: fixed;
       translate: 0 var(--slotted-space-9, 2rem);
     }
 
-    [data-ui='time-range-picker'][data-part='positioner'][data-presentation='sheet'][data-open] {
+    [data-ui-time-range-picker][data-part-positioner][data-presentation='sheet'][data-open] {
       translate: 0 0;
     }
 
-    [data-ui='time-range-picker'][data-part='positioner'][data-presentation='sheet']
-      [data-part='content'] {
+    [data-ui-time-range-picker][data-part-positioner][data-presentation='sheet']
+      [data-part-content] {
       border-end-end-radius: 0;
       border-end-start-radius: 0;
       border-inline: 0;
@@ -1243,13 +1238,11 @@
 
     /* Six rows and a half on a phone, at the touch height: the sheet stays
        under two thirds of the screen and done stays reachable. */
-    [data-ui='time-range-picker'][data-part='positioner'][data-presentation='sheet']
-      [data-part='list'] {
+    [data-ui-time-range-picker][data-part-positioner][data-presentation='sheet'] [data-part-list] {
       max-block-size: calc(var(--_row-pitch) * 6.5);
     }
 
-    [data-ui='time-range-picker'][data-part='positioner'][data-presentation='sheet']
-      [data-part='tab'] {
+    [data-ui-time-range-picker][data-part-positioner][data-presentation='sheet'] [data-part-tab] {
       min-block-size: var(
         --slotted-time-range-picker-tab-block-size,
         var(--slotted-target-comfortable, 44px)
@@ -1258,28 +1251,28 @@
   }
 
   @media (forced-colors: active) {
-    [data-ui='time-range-picker'][data-part='root'][data-variant='plain'] [data-part='control'] {
+    [data-ui-time-range-picker][data-part-root][data-variant='plain'] [data-part-control] {
       border-color: ButtonBorder;
     }
 
     /* The tab's underline is painted with a background, and forced colours
        replace a background that is not one of the system's own. */
-    [data-ui='time-range-picker'] [data-part='tab']::after {
+    [data-ui-time-range-picker] [data-part-tab]::after {
       forced-color-adjust: none;
     }
 
-    [data-ui='time-range-picker'] [data-part='tab']::after {
+    [data-ui-time-range-picker] [data-part-tab]::after {
       background-color: currentcolor;
     }
 
-    [data-ui='time-range-picker'] [data-part='preset'][data-selected],
-    [data-ui='time-range-picker'] [data-part='option'][data-selected] {
+    [data-ui-time-range-picker] [data-part-preset][data-selected],
+    [data-ui-time-range-picker] [data-part-option][data-selected] {
       background-color: Highlight;
       color: HighlightText;
       forced-color-adjust: none;
     }
 
-    [data-ui='time-range-picker'] [data-part='option'][data-current]:not([data-selected]) {
+    [data-ui-time-range-picker] [data-part-option][data-current]:not([data-selected]) {
       outline: var(--slotted-focus-ring-width, 2px) solid Highlight;
       outline-offset: calc(var(--slotted-focus-ring-offset, 2px) * -1);
     }