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

package/src/datetime-picker/datetime-picker.css

@@ -28,7 +28,7 @@
    * here restyles a segment or a day cell. This stylesheet owns the box the
    * positioner measures, the trigger inside the field, the layer, and the list.
    */
-  [data-ui='datetime-picker'][data-part='root'] {
+  [data-ui-datetime-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. */
@@ -41,7 +41,7 @@
    * It draws no frame: the `datetime-field` inside it draws its own, and the
    * trigger is handed to that field's `end` slot by the binding.
    */
-  [data-ui='datetime-picker'] [data-part='control'] {
+  [data-ui-datetime-picker] [data-part-control] {
     --_icon-size: var(--slotted-control-icon-size-md, 16px);
     --_height: var(--slotted-control-height-md, 34px);
 
@@ -52,12 +52,12 @@
     position: relative;
   }
 
-  [data-ui='datetime-picker'][data-part='root'][data-size='sm'] [data-part='control'] {
+  [data-ui-datetime-picker][data-part-root][data-size='sm'] [data-part-control] {
     --_icon-size: var(--slotted-control-icon-size-sm, 14px);
     --_height: var(--slotted-control-height-sm, 30px);
   }
 
-  [data-ui='datetime-picker'][data-part='root'][data-size='lg'] [data-part='control'] {
+  [data-ui-datetime-picker][data-part-root][data-size='lg'] [data-part-control] {
     --_icon-size: var(--slotted-control-icon-size-lg, 18px);
     --_height: var(--slotted-control-height-lg, 38px);
   }
@@ -76,7 +76,7 @@
    * `Alt`+`ArrowDown` into `PageDown` before the browser sees it, so the chord
    * cannot be the only way in.
    */
-  [data-ui='datetime-picker'] [data-part='trigger'] {
+  [data-ui-datetime-picker] [data-part-trigger] {
     --slotted-icon-size: var(--_icon-size);
 
     align-items: center;
@@ -121,7 +121,7 @@
 
   /* The hit area, recovered outside the paint, exactly as every other inner
      control in the library recovers it. */
-  [data-ui='datetime-picker'] [data-part='trigger']::after {
+  [data-ui-datetime-picker] [data-part-trigger]::after {
     content: '';
     inset: min(0px, calc((100% - var(--slotted-target-min, 24px)) / 2));
     position: absolute;
@@ -132,25 +132,25 @@
      the hit area above grows to 44 pixels around them. Before the field's
      clear it does not reach across it. */
   @media (pointer: coarse) {
-    [data-ui='datetime-picker'] [data-part='trigger']::after {
+    [data-ui-datetime-picker] [data-part-trigger]::after {
       inset: min(0px, calc((100% - var(--slotted-target-comfortable, 44px)) / 2));
     }
 
-    [data-ui='datetime-picker']
-      [data-part='end']:has(+ [data-part='clear']:not([hidden]))
-      > [data-part='trigger']::after {
+    [data-ui-datetime-picker]
+      [data-part-end]:has(+ [data-part-clear]:not([hidden]))
+      > [data-part-trigger]::after {
       inset-inline-end: 0;
     }
   }
 
-  [data-ui='datetime-picker'] [data-part='trigger']:hover:not(:disabled):not([data-disabled]) {
+  [data-ui-datetime-picker] [data-part-trigger]:hover:not(:disabled):not([data-disabled]) {
     background-color: var(
       --slotted-datetime-picker-trigger-hover-background,
       var(--slotted-tone-secondary-subtle-hover)
     );
   }
 
-  [data-ui='datetime-picker'] [data-part='trigger']:active:not(:disabled):not([data-disabled]) {
+  [data-ui-datetime-picker] [data-part-trigger]:active:not(:disabled):not([data-disabled]) {
     background-color: var(
       --slotted-datetime-picker-trigger-active-background,
       var(--slotted-tone-secondary-subtle-active)
@@ -159,19 +159,19 @@
 
   /* Its own ring: tabbing from the last segment to the trigger has to move
      something visible, and the frame's ring would sit still. */
-  [data-ui='datetime-picker'] [data-part='trigger']:focus-visible {
+  [data-ui-datetime-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='datetime-picker'][data-part='root'][data-invalid] {
+  [data-ui-datetime-picker][data-part-root][data-invalid] {
     --slotted-focus-ring-color: var(
       --slotted-datetime-picker-invalid-focus-ring-color,
       var(--slotted-focus-ring-color-invalid, Highlight)
     );
   }
 
-  [data-ui='datetime-picker'] [data-part='trigger']:disabled {
+  [data-ui-datetime-picker] [data-part-trigger]:disabled {
     color: var(--slotted-disabled-foreground);
     cursor: not-allowed;
   }
@@ -182,7 +182,7 @@
    * onto. The painted surface is one element in, as every anchored family in
    * the library is built.
    */
-  [data-ui='datetime-picker'][data-part='positioner'] {
+  [data-ui-datetime-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. */
@@ -206,16 +206,16 @@
       translate var(--slotted-duration-short) var(--slotted-easing-exit);
   }
 
-  [data-ui='datetime-picker'][data-part='positioner'][data-side='top'] {
+  [data-ui-datetime-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='datetime-picker'][data-part='positioner']:is([data-side='left'], [data-side='right']) {
+  [data-ui-datetime-picker][data-part-positioner]:is([data-side='left'], [data-side='right']) {
     translate: 0 0;
   }
 
-  [data-ui='datetime-picker'][data-part='positioner'][data-open] {
+  [data-ui-datetime-picker][data-part-positioner][data-open] {
     opacity: 1;
     translate: 0 0;
     transition: none;
@@ -229,16 +229,16 @@
    * harness, a docs snippet — is simply there, and is photographed where it
    * stands.
    */
-  [data-ui='datetime-picker'][data-part='positioner'][data-open][data-positioned] {
+  [data-ui-datetime-picker][data-part-positioner][data-open][data-positioned] {
     animation: slotted-datetime-picker-enter-down var(--slotted-duration-medium)
       var(--slotted-easing-enter);
   }
 
-  [data-ui='datetime-picker'][data-part='positioner'][data-open][data-positioned][data-side='top'] {
+  [data-ui-datetime-picker][data-part-positioner][data-open][data-positioned][data-side='top'] {
     animation-name: slotted-datetime-picker-enter-up;
   }
 
-  [data-ui='datetime-picker'][data-part='positioner'][data-open][data-positioned]:is(
+  [data-ui-datetime-picker][data-part-positioner][data-open][data-positioned]:is(
       [data-side='left'],
       [data-side='right']
     ) {
@@ -267,25 +267,25 @@
 
   /* Stillness keeps the fade and drops the movement. */
   @media (prefers-reduced-motion: reduce) {
-    [data-ui='datetime-picker'][data-part='positioner'],
-    [data-ui='datetime-picker'][data-part='positioner'][data-side='top'],
-    [data-ui='datetime-picker'][data-part='positioner'][data-side='left'],
-    [data-ui='datetime-picker'][data-part='positioner'][data-side='right'] {
+    [data-ui-datetime-picker][data-part-positioner],
+    [data-ui-datetime-picker][data-part-positioner][data-side='top'],
+    [data-ui-datetime-picker][data-part-positioner][data-side='left'],
+    [data-ui-datetime-picker][data-part-positioner][data-side='right'] {
       translate: 0 0;
       transition: opacity var(--slotted-duration-short) var(--slotted-easing-exit);
     }
 
-    [data-ui='datetime-picker'][data-part='positioner'][data-open][data-positioned],
-    [data-ui='datetime-picker'][data-part='positioner'][data-open][data-positioned][data-side='top'],
-    [data-ui='datetime-picker'][data-part='positioner'][data-open][data-positioned][data-side='left'],
-    [data-ui='datetime-picker'][data-part='positioner'][data-open][data-positioned][data-side='right'] {
+    [data-ui-datetime-picker][data-part-positioner][data-open][data-positioned],
+    [data-ui-datetime-picker][data-part-positioner][data-open][data-positioned][data-side='top'],
+    [data-ui-datetime-picker][data-part-positioner][data-open][data-positioned][data-side='left'],
+    [data-ui-datetime-picker][data-part-positioner][data-open][data-positioned][data-side='right'] {
       animation-name: slotted-datetime-picker-fade;
     }
   }
 
   /* The anchor scrolled out of its own clipper. The panel is still open and
      still belongs to a control the reader can no longer see. */
-  [data-ui='datetime-picker'][data-part='positioner'][data-detached] {
+  [data-ui-datetime-picker][data-part-positioner][data-detached] {
     visibility: hidden;
   }
 
@@ -301,7 +301,7 @@
    * a calendar needs; the two panels wrap instead, which needs no threshold to
    * guess at and cannot be wrong at a width nobody tested.
    */
-  [data-ui='datetime-picker'] [data-part='content'] {
+  [data-ui-datetime-picker] [data-part-content] {
     background-color: var(--slotted-datetime-picker-surface, var(--slotted-surface-raised, Canvas));
     border: var(--slotted-border-width-thin, 1px) solid
       var(
@@ -354,7 +354,7 @@
    * The rule under it is what makes this a band rather than a line of text
    * floating over two columns.
    */
-  [data-ui='datetime-picker'] [data-part='head'] {
+  [data-ui-datetime-picker] [data-part-head] {
     /**
      * The band renders at the panel's width and contributes nothing to it.
      *
@@ -413,7 +413,7 @@
    * surface's ink and a step of weight, and its digits line up with the list's
    * below it.
    */
-  [data-ui='datetime-picker'] [data-part='head-value'] {
+  [data-ui-datetime-picker] [data-part-head-value] {
     color: var(--slotted-datetime-picker-content-color, var(--slotted-text, CanvasText));
     font-size: var(--slotted-font-size-sm, 13px);
     font-variant-numeric: tabular-nums;
@@ -430,7 +430,7 @@
    * the half they have. It is the family's own answer to a value that is not
    * whole, said where the reader is looking rather than only in the field.
    */
-  [data-ui='datetime-picker'] [data-part='head-value'] [data-placeholder] {
+  [data-ui-datetime-picker] [data-part-head-value] [data-placeholder] {
     color: var(--slotted-datetime-picker-label-color, var(--slotted-text-muted, GrayText));
   }
 
@@ -452,7 +452,7 @@
    * the mark names what it does, and at the control glyph size inside a control
    * it is legible rather than a speck beside a word.
    */
-  [data-ui='datetime-picker'] [data-part='now'] {
+  [data-ui-datetime-picker] [data-part-now] {
     align-items: center;
     appearance: none;
     background-color: var(--slotted-datetime-picker-now-background, transparent);
@@ -491,14 +491,14 @@
    * `sm` icon step — takes the muted ink the label does not, so the pair reads
    * as one control with a glyph rather than as two things of equal weight.
    */
-  [data-ui='datetime-picker'] [data-part='now'] > [data-ui='icon'] {
+  [data-ui-datetime-picker] [data-part-now] > [data-ui-icon] {
     /* No system colour: a theme that never loaded should let the mark take the
        label's ink rather than the operating system's own grey, which is the
        rule `fallbacks.test.mjs` holds. */
     color: var(--slotted-datetime-picker-now-icon-color, var(--slotted-text-muted));
   }
 
-  [data-ui='datetime-picker'] [data-part='now']:hover:not(:disabled):not([data-disabled]) {
+  [data-ui-datetime-picker] [data-part-now]:hover:not(:disabled):not([data-disabled]) {
     background-color: var(
       --slotted-datetime-picker-now-hover-background,
       var(--slotted-tone-secondary-subtle-hover)
@@ -509,14 +509,14 @@
     );
   }
 
-  [data-ui='datetime-picker'] [data-part='now']:active:not(:disabled):not([data-disabled]) {
+  [data-ui-datetime-picker] [data-part-now]:active:not(:disabled):not([data-disabled]) {
     background-color: var(
       --slotted-datetime-picker-now-active-background,
       var(--slotted-tone-secondary-subtle-active)
     );
   }
 
-  [data-ui='datetime-picker'] [data-part='now']:focus-visible {
+  [data-ui-datetime-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);
   }
@@ -527,7 +527,7 @@
    * guessing at an industry. What it ships is the row they stand in, at the
    * reading end of the head beside `now`.
    */
-  [data-ui='datetime-picker'] [data-part='presets'] {
+  [data-ui-datetime-picker] [data-part-presets] {
     align-items: center;
     display: flex;
     flex-wrap: wrap;
@@ -545,7 +545,7 @@
    * setting look like a different component, and what answers the narrow case
    * is `scrollIntoView` on the surface focus lands in.
    */
-  [data-ui='datetime-picker'] [data-part='panels'] {
+  [data-ui-datetime-picker] [data-part-panels] {
     /**
      * The two columns are told apart by the air between them and by what they
      * hold, not by a rule. A rule would have to be on one inline edge, and the
@@ -571,7 +571,7 @@
    * is the time panel that wraps instead, which is the arrangement this family
    * already draws.
    */
-  [data-ui='datetime-picker'] [data-part='date-panel'] {
+  [data-ui-datetime-picker] [data-part-date-panel] {
     flex: 0 0 auto;
   }
 
@@ -587,7 +587,7 @@
    * and the column takes it, so the times read as a section rather than as a
    * narrow strip under a wide month.
    */
-  [data-ui='datetime-picker'] [data-part='time-panel'] {
+  [data-ui-datetime-picker] [data-part-time-panel] {
     display: flex;
     flex: 1 1 var(--slotted-datetime-picker-time-panel-inline-size, 7rem);
     flex-direction: column;
@@ -602,7 +602,7 @@
    * than truncated: a day of quarter-hours is ninety-six rows and every one of
    * them is choosable.
    */
-  [data-ui='datetime-picker'] [data-part='list'] {
+  [data-ui-datetime-picker] [data-part-list] {
     display: flex;
     flex: 1 1 auto;
     flex-direction: column;
@@ -645,7 +645,7 @@
    * say, and repeating it ninety-six times beside a month that already shows it
    * would spend the whole column on one word.
    */
-  [data-ui='datetime-picker'] [data-part='option'] {
+  [data-ui-datetime-picker] [data-part-option] {
     align-items: center;
     background-color: transparent;
     border-radius: var(--slotted-datetime-picker-option-radius, var(--slotted-radius-sm, 4px));
@@ -681,27 +681,27 @@
    * down the file its own rule is written. Found by the reviewer at
    * `time-picker`'s visual gate and inherited whole.
    */
-  [data-ui='datetime-picker']
-    [data-part='option']:hover:not([data-disabled]):not([data-selected]):not([data-current]) {
+  [data-ui-datetime-picker]
+    [data-part-option]:hover:not([data-disabled]):not([data-selected]):not([data-current]) {
     background-color: var(
       --slotted-datetime-picker-option-hover-background,
       var(--slotted-tone-secondary-subtle-hover)
     );
   }
 
-  [data-ui='datetime-picker'] [data-part='option'][data-current]:not([data-selected]) {
+  [data-ui-datetime-picker] [data-part-option][data-current]:not([data-selected]) {
     background-color: var(
       --slotted-datetime-picker-option-current-background,
       var(--slotted-tone-secondary-subtle-active)
     );
   }
 
-  [data-ui='datetime-picker'] [data-part='option']:focus-visible {
+  [data-ui-datetime-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='datetime-picker'] [data-part='option'][data-selected] {
+  [data-ui-datetime-picker] [data-part-option][data-selected] {
     background-color: var(
       --slotted-datetime-picker-option-selected-background,
       var(--slotted-tone-accent-solid)
@@ -715,7 +715,7 @@
   /* The chosen row still answers the pointer — one step along its own tone,
      rather than the grey every other row takes. A row that swapped colour
      family under the pointer read as a different row. */
-  [data-ui='datetime-picker'] [data-part='option'][data-selected]:hover:not([data-disabled]) {
+  [data-ui-datetime-picker] [data-part-option][data-selected]:hover:not([data-disabled]) {
     background-color: var(
       --slotted-datetime-picker-option-selected-hover-background,
       var(--slotted-tone-accent-solid-hover)
@@ -728,7 +728,7 @@
    * cannot infer — and it is muted to the colour the theme measures rather than
    * faded by opacity, so it stays readable.
    */
-  [data-ui='datetime-picker'] [data-part='option'][data-disabled] {
+  [data-ui-datetime-picker] [data-part-option][data-disabled] {
     background-color: transparent;
     color: var(--slotted-disabled-foreground);
     cursor: not-allowed;
@@ -740,7 +740,7 @@
    * step. It is a sentence rather than an empty box, and it is the state that
    * makes the list worth recomputing as the reader moves through the month.
    */
-  [data-ui='datetime-picker'] [data-part='empty'] {
+  [data-ui-datetime-picker] [data-part-empty] {
     align-items: center;
     color: var(--slotted-datetime-picker-label-color, var(--slotted-text-muted, GrayText));
     display: flex;
@@ -752,7 +752,7 @@
     text-wrap: balance;
   }
 
-  [data-ui='datetime-picker'] [data-part='footer'] {
+  [data-ui-datetime-picker] [data-part-footer] {
     /* The band's rule, for the same reason: a consumer's two buttons are not
        what decides how wide a month is drawn — and `border-box` with it, or the
        padding pushes the last button past the panel's edge. */
@@ -783,7 +783,7 @@
    * ask, and the question really is how much screen there is.
    */
   @media (max-width: 480px) and (pointer: coarse) {
-    [data-ui='datetime-picker'][data-part='positioner'][data-presentation='sheet'] {
+    [data-ui-datetime-picker][data-part-positioner][data-presentation='sheet'] {
       /* The positioner's own measurement is overridden here on purpose: a sheet
          is not placed against an anchor, it is placed against the screen. */
       inset: auto 0 0;
@@ -791,12 +791,11 @@
       translate: 0 var(--slotted-space-9, 2rem);
     }
 
-    [data-ui='datetime-picker'][data-part='positioner'][data-presentation='sheet'][data-open] {
+    [data-ui-datetime-picker][data-part-positioner][data-presentation='sheet'][data-open] {
       translate: 0 0;
     }
 
-    [data-ui='datetime-picker'][data-part='positioner'][data-presentation='sheet']
-      [data-part='content'] {
+    [data-ui-datetime-picker][data-part-positioner][data-presentation='sheet'] [data-part-content] {
       border-end-end-radius: 0;
       border-end-start-radius: 0;
       border-inline: 0;
@@ -813,8 +812,7 @@
     /* Stacked under a month, the list gets a shorter run: the reader scrolls
        the sheet to reach it, and a full-height list would put the footer out of
        reach behind ninety-six rows. */
-    [data-ui='datetime-picker'][data-part='positioner'][data-presentation='sheet']
-      [data-part='list'] {
+    [data-ui-datetime-picker][data-part-positioner][data-presentation='sheet'] [data-part-list] {
       max-block-size: calc(var(--_row-pitch) * 5.5);
     }
   }
@@ -823,13 +821,13 @@
     /* The chosen row and the highlighted row both lose their painted grounds,
        so each says what it is with a system pair the operating system
        guarantees legible together. */
-    [data-ui='datetime-picker'] [data-part='option'][data-selected] {
+    [data-ui-datetime-picker] [data-part-option][data-selected] {
       background-color: Highlight;
       color: HighlightText;
       forced-color-adjust: none;
     }
 
-    [data-ui='datetime-picker'] [data-part='option'][data-current]:not([data-selected]) {
+    [data-ui-datetime-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);
     }