@slotted/styles 0.1.0-beta.0 → 0.1.0-beta.10

package/src/datetime-field/datetime-field.css

@@ -18,7 +18,7 @@
    * order is the browser's locale rather than the application's. The value
    * reaches a form through a hidden input carrying `YYYY-MM-DDTHH:mm:ss`.
    */
-  [data-ui='datetime-field'][data-part='root'] {
+  [data-ui-datetime-field][data-part-root] {
     /**
      * Type, height, inline padding, gap and glyph size come from the control
      * scales — the only ones the theme restates per density — so a datetime in
@@ -89,7 +89,7 @@
    * begin from it — the arithmetic `text-field` records, holding at every step
    * and every density.
    */
-  [data-ui='datetime-field'][data-part='root']:has(> [data-part='clear']:last-child) {
+  [data-ui-datetime-field][data-part-root]:has(> [data-part-clear]:last-child) {
     padding-inline-end: max(
       0px,
       calc(var(--_padding-inline) - (var(--_action-size) - var(--_icon-size)) / 2)
@@ -111,7 +111,7 @@
    * the focus. Each half stays one flex item, so the value never breaks
    * inside a date or inside a time.
    */
-  [data-ui='datetime-field'] [data-part='segments'] {
+  [data-ui-datetime-field] [data-part-segments] {
     align-items: center;
     column-gap: var(--_half-gap);
     /* It says what it is before it is pressed. A datetime is typed, so the
@@ -137,7 +137,7 @@
    * a field that had done nothing but inherit. The isolation keeps the decision
    * inside the half, so the frame around it still reads with the document.
    */
-  [data-ui='datetime-field'] [data-part='half'] {
+  [data-ui-datetime-field] [data-part-half] {
     align-items: center;
     direction: ltr;
     display: flex;
@@ -158,7 +158,7 @@
    * the document — which is the reason every other family in this library
    * reaches for it too.
    */
-  [data-ui='datetime-field'] [data-part='segments']:dir(rtl) {
+  [data-ui-datetime-field] [data-part-segments]:dir(rtl) {
     justify-content: flex-end;
   }
 
@@ -169,7 +169,7 @@
    * single digit becomes two: `1ch` is the advance of a digit in a tabular
    * face, and `--_digits` is how many the field can hold.
    */
-  [data-ui='datetime-field'] [data-part='segment'] {
+  [data-ui-datetime-field] [data-part-segment] {
     --_digits: 2;
 
     background-color: transparent;
@@ -206,7 +206,7 @@
 
   /* The one field with four digits rather than two. Stated here rather than in
      the markup, so a year is the same width in both bindings and the harness. */
-  [data-ui='datetime-field'] [data-part='segment'][data-field='year'] {
+  [data-ui-datetime-field] [data-part-segment][data-field='year'] {
     --_digits: 4;
   }
 
@@ -217,7 +217,7 @@
    * first of those, and a floor clips none of them. The digit face is dropped
    * here for the same reason: tabular figures inside a word letter-space it.
    */
-  [data-ui='datetime-field'] [data-part='segment'][data-field='dayPeriod'] {
+  [data-ui-datetime-field] [data-part-segment][data-field='dayPeriod'] {
     font-variant-numeric: normal;
     min-inline-size: var(--slotted-datetime-field-period-min-inline-size, 2ch);
     /* An abbreviation, in whatever case the locale itself writes it. */
@@ -231,7 +231,7 @@
    * rather than in English — and a value being typed has to keep saying what
    * is missing.
    */
-  [data-ui='datetime-field'] [data-part='segment'][data-placeholder] {
+  [data-ui-datetime-field] [data-part-segment][data-placeholder] {
     color: var(--slotted-datetime-field-placeholder-color, var(--slotted-text-muted, GrayText));
   }
 
@@ -240,7 +240,7 @@
    * name already carries the whole value in words, so a screen reader reading
    * "slash" between two numbers would be reading punctuation aloud.
    */
-  [data-ui='datetime-field'] [data-part='literal'] {
+  [data-ui-datetime-field] [data-part-literal] {
     color: var(--slotted-datetime-field-literal-color, var(--slotted-text-muted, GrayText));
     flex: 0 0 auto;
     /* Its own bidi run: a colon between two numbers takes the paragraph's
@@ -258,7 +258,7 @@
    * whitespace is not drawn at all, and the row's column gap separates the
    * halves instead.
    */
-  [data-ui='datetime-field'] [data-part='literal'][data-boundary] {
+  [data-ui-datetime-field] [data-part-literal][data-boundary] {
     margin-inline-end: 0;
   }
 
@@ -273,7 +273,7 @@
    * It is a real `input`, so a mobile keyboard opens and the platform supplies
    * every text-editing key the reader already knows.
    */
-  [data-ui='datetime-field'] [data-part='duration'] {
+  [data-ui-datetime-field] [data-part-duration] {
     appearance: none;
     background-color: transparent;
     border: 0;
@@ -297,11 +297,11 @@
 
   /* Left-to-right content in a right-to-left field still sits at the reading
      edge, which is the treatment every form gives a phone number or an IBAN. */
-  [data-ui='datetime-field'] [data-part='duration']:dir(rtl) {
+  [data-ui-datetime-field] [data-part-duration]:dir(rtl) {
     text-align: right;
   }
 
-  [data-ui='datetime-field'] [data-part='duration']::placeholder {
+  [data-ui-datetime-field] [data-part-duration]::placeholder {
     color: var(--slotted-datetime-field-placeholder-color, var(--slotted-text-muted, GrayText));
   }
 
@@ -313,7 +313,7 @@
    * library already has for "and then"; it is direction-sensitive, so it turns
    * with the document rather than pointing out of it.
    */
-  [data-ui='datetime-field'] [data-part='preview'] {
+  [data-ui-datetime-field] [data-part-preview] {
     /**
      * One line box, not a flex row. The chevron sits *in* the line rather than
      * beside it, which is the only way it can be aligned to the text at all —
@@ -351,7 +351,7 @@
    * marked `directional`: it points along the reading direction, so the `icon`
    * family turns it in a right-to-left context.
    */
-  [data-ui='datetime-field'] [data-part='preview'] > [data-ui='icon'] {
+  [data-ui-datetime-field] [data-part-preview] > [data-ui-icon] {
     --slotted-icon-size: var(--_mark);
 
     /**
@@ -377,7 +377,7 @@
    * preview whenever it differs from today — and this rule only lifts the date
    * out of the surrounding time so the eye lands on the part that moved.
    */
-  [data-ui='datetime-field'] [data-part='preview'][data-rolls-day] > [data-part='preview-date'] {
+  [data-ui-datetime-field] [data-part-preview][data-rolls-day] > [data-part-preview-date] {
     color: var(--slotted-datetime-field-preview-day-color, var(--slotted-tone-accent-text));
     font-weight: var(--slotted-font-weight-semibold, 600);
   }
@@ -388,7 +388,7 @@
    * border is the accent the preview is written in, so the two marks are one
    * statement rather than two.
    */
-  [data-ui='datetime-field'][data-part='root'][data-relative] {
+  [data-ui-datetime-field][data-part-root][data-relative] {
     border-color: var(
       --slotted-datetime-field-relative-border-color,
       var(--slotted-tone-accent-border)
@@ -401,7 +401,7 @@
    * holding an `md` control is a field and a control disagreeing about one row.
    */
 
-  [data-ui='datetime-field'][data-part='root'][data-size='sm'] {
+  [data-ui-datetime-field][data-part-root][data-size='sm'] {
     --_font-size: var(--slotted-control-font-size-sm, 12px);
     --_height: var(--slotted-control-height-sm, 30px);
     --_padding-inline: var(--slotted-control-padding-inline-sm, 10px);
@@ -409,7 +409,7 @@
     --_icon-size: max(var(--_icon-floor), var(--slotted-control-icon-size-sm, 14px));
   }
 
-  [data-ui='datetime-field'][data-part='root'][data-size='md'] {
+  [data-ui-datetime-field][data-part-root][data-size='md'] {
     --_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);
@@ -417,7 +417,7 @@
     --_icon-size: max(var(--_icon-floor), var(--slotted-control-icon-size-md, 16px));
   }
 
-  [data-ui='datetime-field'][data-part='root'][data-size='lg'] {
+  [data-ui-datetime-field][data-part-root][data-size='lg'] {
     --_font-size: var(--slotted-control-font-size-lg, 14px);
     --_height: var(--slotted-control-height-lg, 38px);
     --_padding-inline: var(--slotted-control-padding-inline-lg, 16px);
@@ -431,7 +431,7 @@
    * shows one frame twice rather than two frames.
    */
 
-  [data-ui='datetime-field'][data-part='root'][data-variant='subtle'] {
+  [data-ui-datetime-field][data-part-root][data-variant='subtle'] {
     background-color: var(
       --slotted-datetime-field-subtle-background,
       var(--slotted-surface-sunken, Canvas)
@@ -442,7 +442,7 @@
     );
   }
 
-  [data-ui='datetime-field'][data-part='root'][data-variant='plain'] {
+  [data-ui-datetime-field][data-part-root][data-variant='plain'] {
     background-color: transparent;
     border-color: transparent;
     border-radius: var(--slotted-radius-none, 0px);
@@ -455,8 +455,8 @@
    * the value: an adornment annotates, and a reader looking for the datetime
    * should not have to step over it.
    */
-  [data-ui='datetime-field'] > [data-part='start'],
-  [data-ui='datetime-field'] > [data-part='end'] {
+  [data-ui-datetime-field] > [data-part-start],
+  [data-ui-datetime-field] > [data-part-end] {
     --slotted-icon-size: var(--_icon-size);
 
     align-items: center;
@@ -468,8 +468,8 @@
     unicode-bidi: plaintext;
   }
 
-  [data-ui='datetime-field'] > [data-part='start'] > svg,
-  [data-ui='datetime-field'] > [data-part='end'] > svg {
+  [data-ui-datetime-field] > [data-part-start] > svg,
+  [data-ui-datetime-field] > [data-part-end] > svg {
     block-size: var(--_icon-size);
     inline-size: var(--_icon-size);
   }
@@ -481,7 +481,7 @@
    * page. It empties both halves: half a value is not a value this family
    * holds.
    */
-  [data-ui='datetime-field'] > [data-part='clear'] {
+  [data-ui-datetime-field] > [data-part-clear] {
     align-items: center;
     appearance: none;
     background-color: transparent;
@@ -511,7 +511,7 @@
    * larger one alone, which is the correction `docs/token-foundation.md`
    * leaves to the family rather than to the theme.
    */
-  [data-ui='datetime-field'] > [data-part='clear']::after {
+  [data-ui-datetime-field] > [data-part-clear]::after {
     content: '';
     inset: min(0px, calc((100% - var(--slotted-target-min, 24px)) / 2));
     position: absolute;
@@ -522,28 +522,28 @@
      the hit area above grows to 44 pixels around them. After an end
      adornment — a picker's trigger — it does not reach back across it. */
   @media (pointer: coarse) {
-    [data-ui='datetime-field'] > [data-part='clear']::after {
+    [data-ui-datetime-field] > [data-part-clear]::after {
       inset: min(0px, calc((100% - var(--slotted-target-comfortable, 44px)) / 2));
     }
 
-    [data-ui='datetime-field'] > [data-part='end'] + [data-part='clear']::after {
+    [data-ui-datetime-field] > [data-part-end] + [data-part-clear]::after {
       inset-inline-start: 0;
     }
   }
 
   /* The cross is drawn at the control's own icon step. */
-  [data-ui='datetime-field'] > [data-part='clear'] {
+  [data-ui-datetime-field] > [data-part-clear] {
     --slotted-icon-size: var(--_icon-size);
   }
 
-  [data-ui='datetime-field'] > [data-part='clear']:hover:not(:disabled):not([data-disabled]) {
+  [data-ui-datetime-field] > [data-part-clear]:hover:not(:disabled):not([data-disabled]) {
     background-color: var(
       --slotted-datetime-field-action-hover-background,
       var(--slotted-tone-secondary-subtle-hover)
     );
   }
 
-  [data-ui='datetime-field'] > [data-part='clear']:active:not(:disabled):not([data-disabled]) {
+  [data-ui-datetime-field] > [data-part-clear]:active:not(:disabled):not([data-disabled]) {
     background-color: var(
       --slotted-datetime-field-action-active-background,
       var(--slotted-tone-secondary-subtle-active)
@@ -556,7 +556,7 @@
    * and a ring around the whole frame would sit still while focus moved inside
    * it.
    */
-  [data-ui='datetime-field'] > [data-part='clear']:focus-visible {
+  [data-ui-datetime-field] > [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);
   }
@@ -567,7 +567,7 @@
    * one it can meet, which is the order `STATE_PRECEDENCE` sets.
    */
 
-  [data-ui='datetime-field'][data-part='root']:hover:not([data-disabled]):not([data-readonly]):not(
+  [data-ui-datetime-field][data-part-root]:hover:not([data-disabled]):not([data-readonly]):not(
       [data-invalid]
     ):not([data-incomplete]) {
     border-color: var(
@@ -576,16 +576,16 @@
     );
   }
 
-  [data-ui='datetime-field'][data-part='root'][data-variant='subtle']:hover:not(
-      [data-disabled]
-    ):not([data-readonly]):not([data-invalid]) {
+  [data-ui-datetime-field][data-part-root][data-variant='subtle']:hover:not([data-disabled]):not(
+      [data-readonly]
+    ):not([data-invalid]) {
     background-color: var(
       --slotted-datetime-field-subtle-hover-background,
       var(--slotted-tone-secondary-subtle-hover)
     );
   }
 
-  [data-ui='datetime-field'][data-part='root'][data-variant='plain']:hover:not([data-disabled]):not(
+  [data-ui-datetime-field][data-part-root][data-variant='plain']:hover:not([data-disabled]):not(
       [data-readonly]
     ):not([data-invalid]) {
     background-color: var(
@@ -624,7 +624,7 @@
    * reminder — louder at rest than `invalid` is, for a state that is weaker
    * than it.
    */
-  [data-ui='datetime-field'][data-part='root'][data-incomplete]:not([data-disabled]):not(
+  [data-ui-datetime-field][data-part-root][data-incomplete]:not([data-disabled]):not(
       [data-readonly]
     ):not([data-invalid]):not(:focus-within) {
     border-color: var(
@@ -649,12 +649,12 @@
    * had before the press. The expression is an `input` and takes the frame's
    * ring the same way from the other side.
    */
-  [data-ui='datetime-field'][data-part='root']:has([data-part='segment']:focus),
-  [data-ui='datetime-field'][data-part='root']:has([data-part='duration']:focus) {
+  [data-ui-datetime-field][data-part-root]:has([data-part-segment]:focus),
+  [data-ui-datetime-field][data-part-root]:has([data-part-duration]:focus) {
     box-shadow: var(--slotted-control-shadow-focus-geometry, 0 1px 4px -1px)
       var(--slotted-focus-ring-color, Highlight);
     outline: var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);
-    outline-offset: var(--slotted-focus-ring-offset, 2px);
+    outline-offset: var(--slotted-control-focus-ring-offset, var(--slotted-focus-ring-offset, 2px));
   }
 
   /**
@@ -664,17 +664,13 @@
    * shadow that appears only under focus is a cell that changes size when it
    * is used.
    */
-  [data-ui='datetime-field'][data-part='root'][data-variant='plain']:has(
-      [data-part='segment']:focus
-    ),
-  [data-ui='datetime-field'][data-part='root'][data-variant='plain']:has(
-      [data-part='duration']:focus
-    ) {
+  [data-ui-datetime-field][data-part-root][data-variant='plain']:has([data-part-segment]:focus),
+  [data-ui-datetime-field][data-part-root][data-variant='plain']:has([data-part-duration]:focus) {
     box-shadow: none;
     outline-offset: calc(var(--slotted-focus-ring-offset, 2px) * -1);
   }
 
-  [data-ui='datetime-field'] [data-part='segment']:focus {
+  [data-ui-datetime-field] [data-part-segment]:focus {
     background-color: var(
       --slotted-datetime-field-segment-focus-background,
       var(--slotted-tone-accent-solid)
@@ -691,7 +687,7 @@
    * The ring is retargeted rather than repainted, so the frame's outline, the
    * shadow under it and the ring on the clear button all move at once.
    */
-  [data-ui='datetime-field'][data-part='root'][data-invalid] {
+  [data-ui-datetime-field][data-part-root][data-invalid] {
     --slotted-focus-ring-color: var(
       --slotted-datetime-field-invalid-focus-ring-color,
       var(--slotted-focus-ring-color-invalid, Highlight)
@@ -719,19 +715,19 @@
     box-shadow: var(--_invalid-edge);
   }
 
-  [data-ui='datetime-field'][data-part='root'][data-invalid]:has([data-part='segment']:focus),
-  [data-ui='datetime-field'][data-part='root'][data-invalid]:has([data-part='duration']:focus) {
+  [data-ui-datetime-field][data-part-root][data-invalid]:has([data-part-segment]:focus),
+  [data-ui-datetime-field][data-part-root][data-invalid]:has([data-part-duration]:focus) {
     box-shadow:
       var(--_invalid-edge),
       var(--slotted-control-shadow-focus-geometry, 0 1px 4px -1px)
         var(--slotted-focus-ring-color, Highlight);
   }
 
-  [data-ui='datetime-field'][data-part='root'][data-variant='plain'][data-invalid]:has(
-      [data-part='segment']:focus
+  [data-ui-datetime-field][data-part-root][data-variant='plain'][data-invalid]:has(
+      [data-part-segment]:focus
     ),
-  [data-ui='datetime-field'][data-part='root'][data-variant='plain'][data-invalid]:has(
-      [data-part='duration']:focus
+  [data-ui-datetime-field][data-part-root][data-variant='plain'][data-invalid]:has(
+      [data-part-duration]:focus
     ) {
     /* The ring lies inside the box here, over the border and an edge as wide as
        it; the edge reaches past the ring. */
@@ -749,25 +745,28 @@
    * control draws its ring double, which a valid ring is not.
    */
   @media (forced-colors: active) {
-    [data-ui='datetime-field'][data-part='root'][data-invalid] {
+    [data-ui-datetime-field][data-part-root][data-invalid] {
       outline: var(--_invalid-edge-width) solid CanvasText;
       outline-offset: calc(
         -1 * (var(--slotted-control-border-width, 1px) + var(--_invalid-edge-width))
       );
     }
 
-    [data-ui='datetime-field'][data-part='root'][data-invalid]:has([data-part='segment']:focus),
-    [data-ui='datetime-field'][data-part='root'][data-invalid]:has([data-part='duration']:focus) {
+    [data-ui-datetime-field][data-part-root][data-invalid]:has([data-part-segment]:focus),
+    [data-ui-datetime-field][data-part-root][data-invalid]:has([data-part-duration]: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);
+      outline-offset: var(
+        --slotted-control-focus-ring-offset,
+        var(--slotted-focus-ring-offset, 2px)
+      );
     }
 
-    [data-ui='datetime-field'][data-part='root'][data-variant='plain'][data-invalid]:has(
-        [data-part='segment']:focus
+    [data-ui-datetime-field][data-part-root][data-variant='plain'][data-invalid]:has(
+        [data-part-segment]:focus
       ),
-    [data-ui='datetime-field'][data-part='root'][data-variant='plain'][data-invalid]:has(
-        [data-part='duration']:focus
+    [data-ui-datetime-field][data-part-root][data-variant='plain'][data-invalid]:has(
+        [data-part-duration]:focus
       ) {
       outline: calc(var(--slotted-focus-ring-width, 2px) + var(--_invalid-edge-width)) double
         var(--slotted-focus-ring-color, Highlight);
@@ -782,13 +781,13 @@
    * mistakable for disabled: the value is still real and still submitted. The
    * ground says "not yours to change" and the ink says nothing at all.
    */
-  [data-ui='datetime-field'][data-part='root'][data-readonly],
-  [data-ui='datetime-field'][data-part='root'][data-readonly] [data-part='segments'],
-  [data-ui='datetime-field'][data-part='root'][data-readonly] [data-part='segment'] {
+  [data-ui-datetime-field][data-part-root][data-readonly],
+  [data-ui-datetime-field][data-part-root][data-readonly] [data-part-segments],
+  [data-ui-datetime-field][data-part-root][data-readonly] [data-part-segment] {
     cursor: default;
   }
 
-  [data-ui='datetime-field'][data-part='root'][data-readonly] {
+  [data-ui-datetime-field][data-part-root][data-readonly] {
     background-color: var(
       --slotted-datetime-field-readonly-background,
       var(--slotted-tone-secondary-subtle-hover)
@@ -800,7 +799,7 @@
    * datetime nobody can read is a field nobody can check, and a disabled form
    * still has to say what it holds.
    */
-  [data-ui='datetime-field'][data-part='root'][data-disabled] {
+  [data-ui-datetime-field][data-part-root][data-disabled] {
     background-color: var(
       --slotted-datetime-field-disabled-background,
       var(--slotted-disabled-background)
@@ -815,23 +814,22 @@
     cursor: not-allowed;
   }
 
-  [data-ui='datetime-field'][data-part='root'][data-disabled] [data-part='segments'],
-  [data-ui='datetime-field'][data-part='root'][data-disabled] [data-part='segment'] {
+  [data-ui-datetime-field][data-part-root][data-disabled] [data-part-segments],
+  [data-ui-datetime-field][data-part-root][data-disabled] [data-part-segment] {
     cursor: not-allowed;
   }
 
-  [data-ui='datetime-field'][data-part='root'][data-disabled] > [data-part='start'],
-  [data-ui='datetime-field'][data-part='root'][data-disabled] > [data-part='end'],
-  [data-ui='datetime-field'][data-part='root'][data-disabled] [data-part='literal'],
-  [data-ui='datetime-field'][data-part='root'][data-disabled]
-    [data-part='segment'][data-placeholder] {
+  [data-ui-datetime-field][data-part-root][data-disabled] > [data-part-start],
+  [data-ui-datetime-field][data-part-root][data-disabled] > [data-part-end],
+  [data-ui-datetime-field][data-part-root][data-disabled] [data-part-literal],
+  [data-ui-datetime-field][data-part-root][data-disabled] [data-part-segment][data-placeholder] {
     color: var(--slotted-disabled-foreground);
   }
 
   @media (forced-colors: active) {
     /* A transparent border has no system colour to be remapped to, so the
        `plain` control would lose its only edge where an edge matters most. */
-    [data-ui='datetime-field'][data-part='root'][data-variant='plain'] {
+    [data-ui-datetime-field][data-part-root][data-variant='plain'] {
       border-color: ButtonBorder;
     }
 
@@ -839,7 +837,7 @@
        modes that are told apart by tone need a second signal. The expression
        borrows the highlight; the incomplete frame borrows the thicker border
        the system reserves for something asking to be finished. */
-    [data-ui='datetime-field'][data-part='root'][data-relative] {
+    [data-ui-datetime-field][data-part-root][data-relative] {
       border-color: Highlight;
     }
 

package/src/datetime-field/datetime-field.tokens.json

@@ -2,6 +2,7 @@
   "--slotted-border-subtle",
   "--slotted-control-border-color",
   "--slotted-control-border-width",
+  "--slotted-control-focus-ring-offset",
   "--slotted-control-font-family",
   "--slotted-control-font-size-lg",
   "--slotted-control-font-size-md",