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

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

@@ -29,7 +29,7 @@
    * by restating the custom property the field reads, so the frame is the one
    * box a reader sees and the field's stylesheet is not reached into.
    */
-  [data-ui='date-range-picker'][data-part='root'] {
+  [data-ui-date-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. */
@@ -43,7 +43,7 @@
    * tokens for the ground, so a form holding a date and a range shows one
    * frame twice rather than two frames.
    */
-  [data-ui='date-range-picker'] [data-part='control'] {
+  [data-ui-date-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);
@@ -109,7 +109,7 @@
    * an in-flow trigger was the first thing to be pushed, and the guaranteed
    * way in was the first thing lost.
    */
-  [data-ui='date-range-picker'] [data-part='control'] {
+  [data-ui-date-range-picker] [data-part-control] {
     --_action-inset: max(
       0px,
       calc(var(--_padding-inline) - (var(--_action-size) - var(--_icon-size)) / 2)
@@ -122,11 +122,11 @@
     );
   }
 
-  [data-ui='date-range-picker'] [data-part='control']:has(> [data-part='clear']) {
+  [data-ui-date-range-picker] [data-part-control]:has(> [data-part-clear]) {
     --_actions: 2;
   }
 
-  [data-ui='date-range-picker'][data-part='root'][data-size='sm'] [data-part='control'] {
+  [data-ui-date-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);
@@ -134,7 +134,7 @@
     --_icon-size: var(--slotted-control-icon-size-sm, 14px);
   }
 
-  [data-ui='date-range-picker'][data-part='root'][data-size='lg'] [data-part='control'] {
+  [data-ui-date-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);
@@ -147,7 +147,7 @@
    * The three steps `text-field` set, through the field's own variant tokens,
    * so a theme that retunes `subtle` for one date retunes it for two.
    */
-  [data-ui='date-range-picker'][data-part='root'][data-variant='subtle'] [data-part='control'] {
+  [data-ui-date-range-picker][data-part-root][data-variant='subtle'] [data-part-control] {
     background-color: var(
       --slotted-date-range-picker-subtle-background,
       var(--slotted-surface-sunken, Canvas)
@@ -158,7 +158,7 @@
     );
   }
 
-  [data-ui='date-range-picker'][data-part='root'][data-variant='plain'] [data-part='control'] {
+  [data-ui-date-range-picker][data-part-root][data-variant='plain'] [data-part-control] {
     background-color: transparent;
     border-color: transparent;
     border-radius: var(--slotted-radius-none, 0px);
@@ -172,8 +172,8 @@
    * field's border, inline padding, hover wash, invalid edge and focus ring
    * are all zeroed here, and the frame answers each of them once for both.
    */
-  [data-ui='date-range-picker'] [data-part='start'],
-  [data-ui='date-range-picker'] [data-part='end'] {
+  [data-ui-date-range-picker] [data-part-start],
+  [data-ui-date-range-picker] [data-part-end] {
     --slotted-control-border-width: 0px;
     --slotted-control-padding-inline-sm: 0px;
     --slotted-control-padding-inline-md: 0px;
@@ -200,8 +200,8 @@
    * the reader is in the control — the panel open, or focus inside the frame —
    * because at rest there is no "next press" for it to name.
    */
-  [data-ui='date-range-picker'] [data-part='start']::after,
-  [data-ui='date-range-picker'] [data-part='end']::after {
+  [data-ui-date-range-picker] [data-part-start]::after,
+  [data-ui-date-range-picker] [data-part-end]::after {
     background-color: var(
       --slotted-date-range-picker-current-color,
       var(--slotted-tone-accent-solid)
@@ -218,17 +218,17 @@
       var(--slotted-control-transition-easing);
   }
 
-  [data-ui='date-range-picker'][data-part='root']:is(
+  [data-ui-date-range-picker][data-part-root]:is(
       [data-open],
-      :has([data-part='control']:focus-within)
+      :has([data-part-control]:focus-within)
     )
-    :is([data-part='start'], [data-part='end'])[data-current]::after {
+    :is([data-part-start], [data-part-end])[data-current]::after {
     opacity: 1;
   }
 
   /* A dash between the two ends, in the adornment's ink: it annotates, and a
      reader looking for either date should not have to step over it. */
-  [data-ui='date-range-picker'] [data-part='separator'] {
+  [data-ui-date-range-picker] [data-part-separator] {
     color: var(--slotted-date-range-picker-separator-color, var(--slotted-text-muted, GrayText));
     flex: 0 0 auto;
     padding-inline: var(--slotted-space-2, 0.25rem);
@@ -241,8 +241,8 @@
    * trigger is always drawn: ChromeOS turns `Alt`+`ArrowDown` into `PageDown`
    * before the browser sees it, so the chord cannot be the only way in.
    */
-  [data-ui='date-range-picker'] [data-part='clear'],
-  [data-ui='date-range-picker'] [data-part='trigger'] {
+  [data-ui-date-range-picker] [data-part-clear],
+  [data-ui-date-range-picker] [data-part-trigger] {
     --slotted-icon-size: var(--_icon-size);
 
     align-items: center;
@@ -270,7 +270,7 @@
     -webkit-tap-highlight-color: transparent;
   }
 
-  [data-ui='date-range-picker'] [data-part='clear'] {
+  [data-ui-date-range-picker] [data-part-clear] {
     inset-inline-end: calc(
       var(--_action-inset) + var(--_action-size) + var(--slotted-space-1, 0.125rem)
     );
@@ -278,8 +278,8 @@
 
   /* The hit area, recovered outside the paint, exactly as every other inner
      control in the library recovers it. */
-  [data-ui='date-range-picker'] [data-part='clear']::after,
-  [data-ui='date-range-picker'] [data-part='trigger']::after {
+  [data-ui-date-range-picker] [data-part-clear]::after,
+  [data-ui-date-range-picker] [data-part-trigger]::after {
     content: '';
     inset: min(0px, calc((100% - var(--slotted-target-min, 24px)) / 2));
     position: absolute;
@@ -290,16 +290,15 @@
      the hit area above grows to 44 pixels around them. Side by side, neither
      button reaches across the edge the two share. */
   @media (pointer: coarse) {
-    [data-ui='date-range-picker'] :is([data-part='clear'], [data-part='trigger'])::after {
+    [data-ui-date-range-picker] :is([data-part-clear], [data-part-trigger])::after {
       inset: min(0px, calc((100% - var(--slotted-target-comfortable, 44px)) / 2));
     }
 
-    [data-ui='date-range-picker']
-      [data-part='clear']:has(+ [data-part='trigger']:not([hidden]))::after {
+    [data-ui-date-range-picker] [data-part-clear]:has(+ [data-part-trigger]:not([hidden]))::after {
       inset-inline-end: 0;
     }
 
-    [data-ui='date-range-picker'] [data-part='clear']:not([hidden]) + [data-part='trigger']::after {
+    [data-ui-date-range-picker] [data-part-clear]:not([hidden]) + [data-part-trigger]::after {
       inset-inline-start: 0;
     }
   }
@@ -309,16 +308,16 @@
      chevron while the surface is open: what opens is a month, not a list, and
      the trigger goes on saying what kind of value it holds. */
 
-  [data-ui='date-range-picker'] [data-part='clear']:hover:not(:disabled):not([data-disabled]),
-  [data-ui='date-range-picker'] [data-part='trigger']:hover:not(:disabled):not([data-disabled]) {
+  [data-ui-date-range-picker] [data-part-clear]:hover:not(:disabled):not([data-disabled]),
+  [data-ui-date-range-picker] [data-part-trigger]:hover:not(:disabled):not([data-disabled]) {
     background-color: var(
       --slotted-date-range-picker-action-hover-background,
       var(--slotted-tone-secondary-subtle-hover)
     );
   }
 
-  [data-ui='date-range-picker'] [data-part='clear']:active:not(:disabled):not([data-disabled]),
-  [data-ui='date-range-picker'] [data-part='trigger']:active:not(:disabled):not([data-disabled]) {
+  [data-ui-date-range-picker] [data-part-clear]:active:not(:disabled):not([data-disabled]),
+  [data-ui-date-range-picker] [data-part-trigger]:active:not(:disabled):not([data-disabled]) {
     background-color: var(
       --slotted-date-range-picker-action-active-background,
       var(--slotted-tone-secondary-subtle-active)
@@ -327,14 +326,14 @@
 
   /* Their own rings: tabbing from the last segment to a button has to move
      something visible, and the frame's ring would sit still. */
-  [data-ui='date-range-picker'] [data-part='clear']:focus-visible,
-  [data-ui='date-range-picker'] [data-part='trigger']:focus-visible {
+  [data-ui-date-range-picker] [data-part-clear]:focus-visible,
+  [data-ui-date-range-picker] [data-part-trigger]: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='date-range-picker'] [data-part='clear']:disabled,
-  [data-ui='date-range-picker'] [data-part='trigger']:disabled {
+  [data-ui-date-range-picker] [data-part-clear]:disabled,
+  [data-ui-date-range-picker] [data-part-trigger]:disabled {
     color: var(--slotted-disabled-foreground);
     cursor: not-allowed;
   }
@@ -345,30 +344,30 @@
    * one it can meet, which is the order `STATE_PRECEDENCE` sets.
    */
 
-  [data-ui='date-range-picker'][data-part='root']:not([data-disabled]):not([data-readonly]):not(
+  [data-ui-date-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-date-range-picker-hover-border-color,
       var(--slotted-tone-accent-border)
     );
   }
 
-  [data-ui='date-range-picker'][data-part='root'][data-variant='subtle']:not([data-disabled]):not(
+  [data-ui-date-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-date-range-picker-subtle-hover-background,
       var(--slotted-tone-secondary-subtle-hover)
     );
   }
 
-  [data-ui='date-range-picker'][data-part='root'][data-variant='plain']:not([data-disabled]):not(
+  [data-ui-date-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-date-range-picker-plain-hover-background,
       var(--slotted-tone-secondary-subtle-hover)
@@ -386,9 +385,9 @@
    * records: every part of a segmented field is a `div`, and a browser refuses
    * `:focus-visible` on a `div` a pointer focused.
    */
-  [data-ui='date-range-picker']
-    [data-part='control']:focus-within:not(
-      :has(> [data-part='clear']:focus, > [data-part='trigger']:focus)
+  [data-ui-date-range-picker]
+    [data-part-control]:focus-within:not(
+      :has(> [data-part-clear]:focus, > [data-part-trigger]:focus)
     ) {
     box-shadow: var(--slotted-control-shadow-focus-geometry, 0 1px 4px -1px)
       var(--slotted-focus-ring-color, Highlight);
@@ -403,9 +402,9 @@
    * shadow that appears only under focus is a cell that changes size when it
    * is used.
    */
-  [data-ui='date-range-picker'][data-part='root'][data-variant='plain']
-    [data-part='control']:focus-within:not(
-      :has(> [data-part='clear']:focus, > [data-part='trigger']:focus)
+  [data-ui-date-range-picker][data-part-root][data-variant='plain']
+    [data-part-control]:focus-within:not(
+      :has(> [data-part-clear]:focus, > [data-part-trigger]:focus)
     ) {
     box-shadow: none;
     outline-offset: calc(var(--slotted-focus-ring-offset, 2px) * -1);
@@ -414,14 +413,14 @@
   /* Invalid outranks hover and is written after it. The ring is retargeted
      rather than repainted, so the frame's outline and the ring on the two
      buttons all move at once. */
-  [data-ui='date-range-picker'][data-part='root'][data-invalid] {
+  [data-ui-date-range-picker][data-part-root][data-invalid] {
     --slotted-focus-ring-color: var(
       --slotted-date-range-picker-invalid-focus-ring-color,
       var(--slotted-focus-ring-color-invalid, Highlight)
     );
   }
 
-  [data-ui='date-range-picker'][data-part='root'][data-invalid] [data-part='control'] {
+  [data-ui-date-range-picker][data-part-root][data-invalid] [data-part-control] {
     --_invalid-edge-width: var(
       --slotted-date-range-picker-invalid-edge-width,
       var(--slotted-control-invalid-edge-width, 1px)
@@ -445,9 +444,9 @@
     box-shadow: var(--_invalid-edge);
   }
 
-  [data-ui='date-range-picker'][data-invalid]
-    [data-part='control']:focus-within:not(
-      :has(> [data-part='clear']:focus, > [data-part='trigger']:focus)
+  [data-ui-date-range-picker][data-invalid]
+    [data-part-control]:focus-within:not(
+      :has(> [data-part-clear]:focus, > [data-part-trigger]:focus)
     ) {
     box-shadow:
       var(--_invalid-edge),
@@ -455,9 +454,9 @@
         var(--slotted-focus-ring-color, Highlight);
   }
 
-  [data-ui='date-range-picker'][data-part='root'][data-variant='plain'][data-invalid]
-    [data-part='control']:focus-within:not(
-      :has(> [data-part='clear']:focus, > [data-part='trigger']:focus)
+  [data-ui-date-range-picker][data-part-root][data-variant='plain'][data-invalid]
+    [data-part-control]:focus-within:not(
+      :has(> [data-part-clear]:focus, > [data-part-trigger]:focus)
     ) {
     /* The ring lies inside the box here, over the border and an edge as wide as
        it; the edge reaches past the ring. */
@@ -474,23 +473,23 @@
    * control draws its ring double, which a valid ring is not.
    */
   @media (forced-colors: active) {
-    [data-ui='date-range-picker'][data-part='root'][data-invalid] [data-part='control'] {
+    [data-ui-date-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='date-range-picker'][data-invalid]
-      [data-part='control']:focus-within:not(
-        :has(> [data-part='clear']:focus, > [data-part='trigger']:focus)
+    [data-ui-date-range-picker][data-invalid]
+      [data-part-control]:focus-within:not(
+        :has(> [data-part-clear]:focus, > [data-part-trigger]:focus)
       ) {
       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='date-range-picker'][data-part='root'][data-variant='plain'][data-invalid]
-      [data-part='control']:focus-within:not(
-        :has(> [data-part='clear']:focus, > [data-part='trigger']:focus)
+    [data-ui-date-range-picker][data-part-root][data-variant='plain'][data-invalid]
+      [data-part-control]:focus-within:not(
+        :has(> [data-part-clear]:focus, > [data-part-trigger]:focus)
       ) {
       outline: calc(var(--slotted-focus-ring-width, 2px) + var(--_invalid-edge-width)) double
         var(--slotted-focus-ring-color, Highlight);
@@ -502,7 +501,7 @@
 
   /* Read-only stays focusable, readable and copyable, and must not be
      mistakable for disabled: the ground says "not yours to change". */
-  [data-ui='date-range-picker'][data-part='root'][data-readonly] [data-part='control'] {
+  [data-ui-date-range-picker][data-part-root][data-readonly] [data-part-control] {
     background-color: var(
       --slotted-date-range-picker-readonly-background,
       var(--slotted-tone-secondary-subtle-hover)
@@ -512,7 +511,7 @@
 
   /* Muted to the colour the theme measures rather than faded by opacity: a
      disabled form still has to say what it holds. */
-  [data-ui='date-range-picker'][data-part='root'][data-disabled] [data-part='control'] {
+  [data-ui-date-range-picker][data-part-root][data-disabled] [data-part-control] {
     background-color: var(
       --slotted-date-range-picker-disabled-background,
       var(--slotted-disabled-background)
@@ -526,7 +525,7 @@
     cursor: not-allowed;
   }
 
-  [data-ui='date-range-picker'][data-part='root'][data-disabled] [data-part='separator'] {
+  [data-ui-date-range-picker][data-part-root][data-disabled] [data-part-separator] {
     color: var(--slotted-disabled-foreground);
   }
 
@@ -535,7 +534,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='date-range-picker'][data-part='positioner'] {
+  [data-ui-date-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. */
@@ -559,19 +558,16 @@
       translate var(--slotted-duration-short) var(--slotted-easing-exit);
   }
 
-  [data-ui='date-range-picker'][data-part='positioner'][data-side='top'] {
+  [data-ui-date-range-picker][data-part-positioner][data-side='top'] {
     translate: 0 var(--_enter-distance);
   }
 
   /* A lateral side has no block direction to arrive from, so it only fades. */
-  [data-ui='date-range-picker'][data-part='positioner']:is(
-      [data-side='left'],
-      [data-side='right']
-    ) {
+  [data-ui-date-range-picker][data-part-positioner]:is([data-side='left'], [data-side='right']) {
     translate: 0 0;
   }
 
-  [data-ui='date-range-picker'][data-part='positioner'][data-open] {
+  [data-ui-date-range-picker][data-part-positioner][data-open] {
     opacity: 1;
     translate: 0 0;
     transition: none;
@@ -581,16 +577,16 @@
      `select` records: a transition starts from the style the browser computed
      last, and the positioner writes `data-side` in the same style update as
      the family opens the layer. Only a layer the positioner placed arrives. */
-  [data-ui='date-range-picker'][data-part='positioner'][data-open][data-positioned] {
+  [data-ui-date-range-picker][data-part-positioner][data-open][data-positioned] {
     animation: slotted-date-range-picker-enter-down var(--slotted-duration-medium)
       var(--slotted-easing-enter);
   }
 
-  [data-ui='date-range-picker'][data-part='positioner'][data-open][data-positioned][data-side='top'] {
+  [data-ui-date-range-picker][data-part-positioner][data-open][data-positioned][data-side='top'] {
     animation-name: slotted-date-range-picker-enter-up;
   }
 
-  [data-ui='date-range-picker'][data-part='positioner'][data-open][data-positioned]:is(
+  [data-ui-date-range-picker][data-part-positioner][data-open][data-positioned]:is(
       [data-side='left'],
       [data-side='right']
     ) {
@@ -619,25 +615,25 @@
 
   /* Stillness keeps the fade and drops the movement. */
   @media (prefers-reduced-motion: reduce) {
-    [data-ui='date-range-picker'][data-part='positioner'],
-    [data-ui='date-range-picker'][data-part='positioner'][data-side='top'],
-    [data-ui='date-range-picker'][data-part='positioner'][data-side='left'],
-    [data-ui='date-range-picker'][data-part='positioner'][data-side='right'] {
+    [data-ui-date-range-picker][data-part-positioner],
+    [data-ui-date-range-picker][data-part-positioner][data-side='top'],
+    [data-ui-date-range-picker][data-part-positioner][data-side='left'],
+    [data-ui-date-range-picker][data-part-positioner][data-side='right'] {
       translate: 0 0;
       transition: opacity var(--slotted-duration-short) var(--slotted-easing-exit);
     }
 
-    [data-ui='date-range-picker'][data-part='positioner'][data-open][data-positioned],
-    [data-ui='date-range-picker'][data-part='positioner'][data-open][data-positioned][data-side='top'],
-    [data-ui='date-range-picker'][data-part='positioner'][data-open][data-positioned][data-side='left'],
-    [data-ui='date-range-picker'][data-part='positioner'][data-open][data-positioned][data-side='right'] {
+    [data-ui-date-range-picker][data-part-positioner][data-open][data-positioned],
+    [data-ui-date-range-picker][data-part-positioner][data-open][data-positioned][data-side='top'],
+    [data-ui-date-range-picker][data-part-positioner][data-open][data-positioned][data-side='left'],
+    [data-ui-date-range-picker][data-part-positioner][data-open][data-positioned][data-side='right'] {
       animation-name: slotted-date-range-picker-fade;
     }
   }
 
   /* The anchor scrolled out of its own clipper. The calendar is still open and
      still belongs to a control the reader can no longer see. */
-  [data-ui='date-range-picker'][data-part='positioner'][data-detached] {
+  [data-ui-date-range-picker][data-part-positioner][data-detached] {
     visibility: hidden;
   }
 
@@ -647,7 +643,7 @@
    * `date-picker` records: a percentage flex basis against a shrink-wrapped
    * container makes the surface wider than anything in it.
    */
-  [data-ui='date-range-picker'] [data-part='content'] {
+  [data-ui-date-range-picker] [data-part-content] {
     background-color: var(
       --slotted-date-range-picker-surface,
       var(--slotted-surface-raised, Canvas)
@@ -686,7 +682,7 @@
    * has no width of its own to ask about, which is the rule `datetime-picker`
    * records for its own two panels.
    */
-  [data-ui='date-range-picker'] [data-part='panels'] {
+  [data-ui-date-range-picker] [data-part-panels] {
     align-items: flex-start;
     display: flex;
     flex-wrap: wrap;
@@ -695,7 +691,7 @@
     min-inline-size: 0;
   }
 
-  [data-ui='date-range-picker'] [data-part='panels'] > [data-ui='calendar'] {
+  [data-ui-date-range-picker] [data-part-panels] > [data-ui-calendar] {
     flex: 0 1 auto;
   }
 
@@ -713,7 +709,7 @@
    * own width, so the calendar decides how wide the panel is and the band
    * wraps inside whatever it decides.
    */
-  [data-ui='date-range-picker'] [data-part='head'] {
+  [data-ui-date-range-picker] [data-part-head] {
     box-sizing: border-box;
     inline-size: 0;
     min-inline-size: 100%;
@@ -738,8 +734,8 @@
   /* The two ends and the dash between them are one run, and the run does not
      break inside itself: "12 Sep –" on one line and "16 Sep" on the next is a
      range read twice. */
-  [data-ui='date-range-picker'] [data-part='head'] > [data-part='head-start'],
-  [data-ui='date-range-picker'] [data-part='head'] > [data-part='head-end'] {
+  [data-ui-date-range-picker] [data-part-head] > [data-part-head-start],
+  [data-ui-date-range-picker] [data-part-head] > [data-part-head-end] {
     color: var(--slotted-date-range-picker-content-color, var(--slotted-text, CanvasText));
     font-size: var(--slotted-font-size-sm, 13px);
     font-variant-numeric: tabular-nums;
@@ -760,16 +756,16 @@
   /* The end not yet written, drawn as its placeholder beside the one that is;
      and the pending one, which is a proposal and reads as the band's own
      proposal in the calendar does. */
-  [data-ui='date-range-picker']
-    [data-part='head']
-    :is([data-part='head-start'], [data-part='head-end'])[data-placeholder] {
+  [data-ui-date-range-picker]
+    [data-part-head]
+    :is([data-part-head-start], [data-part-head-end])[data-placeholder] {
     color: var(--slotted-date-range-picker-placeholder-color, var(--slotted-text-muted, GrayText));
     font-weight: var(--slotted-font-weight-regular, 400);
   }
 
-  [data-ui='date-range-picker']
-    [data-part='head']
-    :is([data-part='head-start'], [data-part='head-end'])[data-pending] {
+  [data-ui-date-range-picker]
+    [data-part-head]
+    :is([data-part-head-start], [data-part-head-end])[data-pending] {
     color: var(--slotted-date-range-picker-pending-color, var(--slotted-tone-accent-text));
   }
 
@@ -779,7 +775,7 @@
    * keeps the tone and drops a step of weight, the way the calendar's pending
    * band keeps the tint and drops a step of share.
    */
-  [data-ui='date-range-picker'] [data-part='length'] {
+  [data-ui-date-range-picker] [data-part-length] {
     color: var(--slotted-date-range-picker-length-color, var(--slotted-tone-accent-text));
     font-size: var(--slotted-font-size-sm, 13px);
     font-variant-numeric: tabular-nums;
@@ -792,19 +788,19 @@
     white-space: nowrap;
   }
 
-  [data-ui='date-range-picker'] [data-part='length'][data-pending] {
+  [data-ui-date-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='date-range-picker'] [data-part='length']:empty::before {
+  [data-ui-date-range-picker] [data-part-length]:empty::before {
     content: '\200B';
   }
 
   /* The limit, on a row of its own under the ends: a rule the grid enforces
      is a rule the band names. */
-  [data-ui='date-range-picker'] [data-part='limit'] {
+  [data-ui-date-range-picker] [data-part-limit] {
     color: var(--slotted-date-range-picker-limit-color, var(--slotted-text-muted, GrayText));
     flex-basis: 100%;
     font-size: var(--slotted-font-size-xs, 11px);
@@ -817,7 +813,7 @@
    * and a library that guessed at one would be guessing at a fiscal year. It
    * ships the column they stand in and the button each one is.
    */
-  [data-ui='date-range-picker'] [data-part='presets'] {
+  [data-ui-date-range-picker] [data-part-presets] {
     align-items: stretch;
     display: flex;
     /* It grows: beside the grid it takes what the surface leaves, and alone
@@ -836,7 +832,7 @@
    * no left edge to run down. Selected, it takes the accent's subtle ground
    * and text, which is the pair `calendar` gives a day inside the run.
    */
-  [data-ui='date-range-picker'] [data-part='preset'] {
+  [data-ui-date-range-picker] [data-part-preset] {
     appearance: none;
     background-color: transparent;
     border: 0;
@@ -859,21 +855,21 @@
     -webkit-tap-highlight-color: transparent;
   }
 
-  [data-ui='date-range-picker'] [data-part='preset']:hover:not(:disabled):not([data-selected]) {
+  [data-ui-date-range-picker] [data-part-preset]:hover:not(:disabled):not([data-selected]) {
     background-color: var(
       --slotted-date-range-picker-preset-hover-background,
       var(--slotted-tone-secondary-subtle-hover)
     );
   }
 
-  [data-ui='date-range-picker'] [data-part='preset']:active:not(:disabled):not([data-selected]) {
+  [data-ui-date-range-picker] [data-part-preset]:active:not(:disabled):not([data-selected]) {
     background-color: var(
       --slotted-date-range-picker-preset-active-background,
       var(--slotted-tone-secondary-subtle-active)
     );
   }
 
-  [data-ui='date-range-picker'] [data-part='preset'][data-selected] {
+  [data-ui-date-range-picker] [data-part-preset][data-selected] {
     background-color: var(
       --slotted-date-range-picker-preset-selected-background,
       var(--slotted-tone-accent-subtle-hover)
@@ -882,17 +878,17 @@
     font-weight: var(--slotted-font-weight-medium, 500);
   }
 
-  [data-ui='date-range-picker'] [data-part='preset']:focus-visible {
+  [data-ui-date-range-picker] [data-part-preset]: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='date-range-picker'] [data-part='preset']:disabled {
+  [data-ui-date-range-picker] [data-part-preset]:disabled {
     color: var(--slotted-disabled-foreground);
     cursor: not-allowed;
   }
 
-  [data-ui='date-range-picker'] [data-part='footer'] {
+  [data-ui-date-range-picker] [data-part-footer] {
     box-sizing: border-box;
     inline-size: 0;
     min-inline-size: 100%;
@@ -917,7 +913,7 @@
    * decision is testable without a device.
    */
   @media (max-width: 480px) and (pointer: coarse) {
-    [data-ui='date-range-picker'][data-part='positioner'][data-presentation='sheet'] {
+    [data-ui-date-range-picker][data-part-positioner][data-presentation='sheet'] {
       /* A sheet is not placed against an anchor, it is placed against the
          screen. */
       inset: auto 0 0;
@@ -925,12 +921,12 @@
       translate: 0 var(--slotted-space-9, 2rem);
     }
 
-    [data-ui='date-range-picker'][data-part='positioner'][data-presentation='sheet'][data-open] {
+    [data-ui-date-range-picker][data-part-positioner][data-presentation='sheet'][data-open] {
       translate: 0 0;
     }
 
-    [data-ui='date-range-picker'][data-part='positioner'][data-presentation='sheet']
-      [data-part='content'] {
+    [data-ui-date-range-picker][data-part-positioner][data-presentation='sheet']
+      [data-part-content] {
       border-end-end-radius: 0;
       border-end-start-radius: 0;
       border-inline: 0;
@@ -942,8 +938,8 @@
       justify-content: center;
     }
 
-    [data-ui='date-range-picker'][data-part='positioner'][data-presentation='sheet']
-      [data-part='presets'] {
+    [data-ui-date-range-picker][data-part-positioner][data-presentation='sheet']
+      [data-part-presets] {
       /* Beside the grid there is no room for a column of shortcuts, so they
          become a row above it and keep their labels. */
       flex-direction: row;
@@ -954,27 +950,27 @@
   @media (forced-colors: active) {
     /* A transparent border has no system colour to be remapped to, so the
        `plain` frame would lose its only edge where an edge matters most. */
-    [data-ui='date-range-picker'][data-part='root'][data-variant='plain'] [data-part='control'] {
+    [data-ui-date-range-picker][data-part-root][data-variant='plain'] [data-part-control] {
       border-color: ButtonBorder;
     }
 
     /* The underline is painted with a background, and forced colours replace
        a background that is not one of the system's own. */
-    [data-ui='date-range-picker'] [data-part='start']::after,
-    [data-ui='date-range-picker'] [data-part='end']::after {
+    [data-ui-date-range-picker] [data-part-start]::after,
+    [data-ui-date-range-picker] [data-part-end]::after {
       forced-color-adjust: none;
     }
 
     /* The underline keeps its ink as the text's own: a tone has nothing to
        map to here, and `currentcolor` is whatever the system gave the frame. */
-    [data-ui='date-range-picker'] [data-part='start']::after,
-    [data-ui='date-range-picker'] [data-part='end']::after {
+    [data-ui-date-range-picker] [data-part-start]::after,
+    [data-ui-date-range-picker] [data-part-end]::after {
       background-color: currentcolor;
     }
 
     /* A tinted ground has nothing to tint in a palette the system replaced;
        the selected shortcut takes the pair the system keeps legible. */
-    [data-ui='date-range-picker'] [data-part='preset'][data-selected] {
+    [data-ui-date-range-picker] [data-part-preset][data-selected] {
       background-color: Highlight;
       color: HighlightText;
       forced-color-adjust: none;