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

package/src/otp-input/otp-input.css

@@ -13,7 +13,7 @@
    * mirrors its state onto the root rather than styling through, so a control
    * used outside a field looks the same as one inside it.
    */
-  [data-ui='otp-input'][data-part='root'] {
+  [data-ui-otp-input][data-part-root] {
     /**
      * A box is a square on the control's height at this density, so a code
      * beside a text field in the same form sits on the same row height. Its
@@ -71,7 +71,7 @@
    * native attribute a consumer wrote. `opacity: 1` rather than 0, because iOS
    * shows no paste menu on an invisible control (input-otp, `input.tsx`).
    */
-  [data-ui='otp-input'] > [data-part='input'] {
+  [data-ui-otp-input] > [data-part-input] {
     appearance: none;
     background-color: transparent;
     block-size: 100%;
@@ -104,7 +104,7 @@
    * selected at every press, so the drag is refused — here for the engines
    * that read the property, and in both bindings on `dragstart`.
    */
-  [data-ui='otp-input'] > [data-part='input']::selection {
+  [data-ui-otp-input] > [data-part-input]::selection {
     /**
      * `!important`, the only one in the library. An application that styles
      * its own `::selection` — and the workbench does, unlayered — outranks a
@@ -119,37 +119,44 @@
     -webkit-text-fill-color: transparent !important;
   }
 
-  [data-ui='otp-input'] > [data-part='input'] {
+  [data-ui-otp-input] > [data-part-input] {
     -webkit-user-drag: none;
   }
 
   /**
-   * Autofill. Chrome paints its own ground over the control's, and the classic
-   * repair — a hundred-pixel inset shadow — is the only way to reach it. The
-   * signal is kept rather than erased, as `text-field` keeps it: an autofilled
-   * code is a fact worth seeing, so the boxes sit on the accent surface the
-   * theme owns rather than on the browser's yellow.
+   * Autofill. The input lies over the boxes, so the classic repair — a
+   * hundred-pixel inset shadow in the tint — painted over every box, its edge
+   * and the gaps between them. The browser's own ground is held back instead,
+   * by a transition that never starts, and the boxes take the tint: an
+   * autofilled code is a fact worth seeing, on the accent surface the theme
+   * owns rather than on the browser's yellow.
    */
-  [data-ui='otp-input'] > [data-part='input']:autofill {
-    box-shadow: inset 0 0 0 100px
-      var(--slotted-otp-input-autofill-background, var(--slotted-tone-accent-surface));
+  [data-ui-otp-input] > [data-part-input]:autofill {
+    transition: background-color 0s 600000s;
     -webkit-text-fill-color: transparent;
   }
 
+  [data-ui-otp-input][data-part-root]:has(> [data-part-input]:autofill) [data-part-slot] {
+    background-color: var(
+      --slotted-otp-input-autofill-background,
+      var(--slotted-tone-accent-surface)
+    );
+  }
+
   /* ── Groups and the separator ─────────────────────────────────────────
    *
    * `groups` partitions the boxes; `123-456` is how the SMS arrives. Each
    * group is a row of boxes, and between two groups a short rule is drawn —
    * never a character, which would be read by nothing and mirrored by nothing.
    */
-  [data-ui='otp-input'] > [data-part='group'] {
+  [data-ui-otp-input] > [data-part-group] {
     align-items: center;
     display: flex;
     gap: var(--_gap);
     min-inline-size: 0;
   }
 
-  [data-ui='otp-input'] > [data-part='separator'] {
+  [data-ui-otp-input] > [data-part-separator] {
     background-color: var(
       --slotted-otp-input-separator-color,
       var(--slotted-control-border-color, ButtonBorder)
@@ -167,7 +174,7 @@
    * framed control carries. It shrinks before the row overflows — a code in a
    * 240-pixel column loses width, not boxes.
    */
-  [data-ui='otp-input'] [data-part='slot'] {
+  [data-ui-otp-input] [data-part-slot] {
     align-items: center;
     background-color: var(--slotted-otp-input-background, var(--slotted-control-surface, Field));
     block-size: var(--_height);
@@ -205,7 +212,7 @@
    * so the caret and the filled state keep reading the DOM rather than the
    * paint.
    */
-  [data-ui='otp-input'] [data-part='slot']:empty::before {
+  [data-ui-otp-input] [data-part-slot]:empty::before {
     color: var(--slotted-otp-input-placeholder-color, var(--slotted-text-muted));
     content: attr(data-placeholder);
   }
@@ -218,7 +225,7 @@
    * four-pixel speck in a thirty-four-pixel box, and a PIN pad draws its dots
    * larger than its digits.
    */
-  [data-ui='otp-input'][data-mask] [data-part='slot']:not(:empty) {
+  [data-ui-otp-input][data-mask] [data-part-slot]:not(:empty) {
     font-size: var(--slotted-otp-input-mask-size, var(--slotted-font-size-2xl, 1.25rem));
   }
 
@@ -230,29 +237,29 @@
    * rather than two, and the raised box — hovered, current, focused — comes
    * forward so its whole edge is seen.
    */
-  [data-ui='otp-input'][data-attached] > [data-part='group'] {
+  [data-ui-otp-input][data-attached] > [data-part-group] {
     gap: 0;
   }
 
-  [data-ui='otp-input'][data-attached] [data-part='slot'] {
+  [data-ui-otp-input][data-attached] [data-part-slot] {
     border-radius: 0;
   }
 
-  [data-ui='otp-input'][data-attached] [data-part='slot']:not(:first-child) {
+  [data-ui-otp-input][data-attached] [data-part-slot]:not(:first-child) {
     margin-inline-start: calc(var(--slotted-control-border-width, 1px) * -1);
   }
 
-  [data-ui='otp-input'][data-attached] [data-part='slot']:first-child {
+  [data-ui-otp-input][data-attached] [data-part-slot]:first-child {
     border-start-start-radius: var(--_radius);
     border-end-start-radius: var(--_radius);
   }
 
-  [data-ui='otp-input'][data-attached] [data-part='slot']:last-child {
+  [data-ui-otp-input][data-attached] [data-part-slot]:last-child {
     border-start-end-radius: var(--_radius);
     border-end-end-radius: var(--_radius);
   }
 
-  [data-ui='otp-input'][data-attached] [data-part='slot'][data-current] {
+  [data-ui-otp-input][data-attached] [data-part-slot][data-current] {
     z-index: 1;
   }
 
@@ -263,19 +270,19 @@
    * same name, so a `lg` code is a `lg` word's size and one step larger than
    * a `lg` field's text.
    */
-  [data-ui='otp-input'][data-part='root'][data-size='sm'] {
+  [data-ui-otp-input][data-part-root][data-size='sm'] {
     --_height: var(--slotted-control-height-sm, 30px);
     --_font-size: var(--slotted-font-size-sm, 0.8125rem);
     --_gap: var(--slotted-control-gap-sm, 6px);
   }
 
-  [data-ui='otp-input'][data-part='root'][data-size='md'] {
+  [data-ui-otp-input][data-part-root][data-size='md'] {
     --_height: var(--slotted-control-height-md, 34px);
     --_font-size: var(--slotted-font-size-md, 0.875rem);
     --_gap: var(--slotted-control-gap-md, 8px);
   }
 
-  [data-ui='otp-input'][data-part='root'][data-size='lg'] {
+  [data-ui-otp-input][data-part-root][data-size='lg'] {
     --_height: var(--slotted-control-height-lg, 38px);
     --_font-size: var(--slotted-font-size-lg, 1rem);
     --_gap: var(--slotted-control-gap-lg, 8px);
@@ -287,7 +294,7 @@
    * The same two steps `text-field` draws, with the same tokens behind them,
    * so a code under a text field in one form is one form.
    */
-  [data-ui='otp-input'][data-variant='subtle'] [data-part='slot'] {
+  [data-ui-otp-input][data-variant='subtle'] [data-part-slot] {
     background-color: var(
       --slotted-otp-input-subtle-background,
       var(--slotted-surface-sunken, Canvas)
@@ -309,8 +316,8 @@
    * rather than blinking faster: an endless animation stops, it does not
    * hurry.
    */
-  [data-ui='otp-input'][data-part='root']:has(> [data-part='input']:focus)
-    [data-part='slot'][data-current]:empty::after {
+  [data-ui-otp-input][data-part-root]:has(> [data-part-input]:focus)
+    [data-part-slot][data-current]:empty::after {
     animation: slotted-otp-input-blink var(--slotted-duration-loop) step-end infinite;
     background-color: currentcolor;
     block-size: 1em;
@@ -332,8 +339,8 @@
   }
 
   @media (prefers-reduced-motion: reduce) {
-    [data-ui='otp-input'][data-part='root']:has(> [data-part='input']:focus)
-      [data-part='slot'][data-current]:empty::after {
+    [data-ui-otp-input][data-part-root]:has(> [data-part-input]:focus)
+      [data-part-slot][data-current]:empty::after {
       animation: none;
     }
   }
@@ -345,17 +352,17 @@
    * is always over the input, never over a box, so hover is the root's and it
    * lights the whole row: the row is one control.
    */
-  [data-ui='otp-input'][data-part='root']:hover:not([data-disabled]):not([data-readonly]):not(
+  [data-ui-otp-input][data-part-root]:hover:not([data-disabled]):not([data-readonly]):not(
       [data-invalid]
     )
-    [data-part='slot'] {
+    [data-part-slot] {
     border-color: var(--slotted-otp-input-hover-border-color, var(--slotted-tone-accent-border));
   }
 
-  [data-ui='otp-input'][data-part='root'][data-variant='subtle']:hover:not([data-disabled]):not(
+  [data-ui-otp-input][data-part-root][data-variant='subtle']:hover:not([data-disabled]):not(
       [data-readonly]
     ):not([data-invalid])
-    [data-part='slot'] {
+    [data-part-slot] {
     background-color: var(
       --slotted-otp-input-subtle-hover-background,
       var(--slotted-tone-secondary-subtle-hover)
@@ -372,13 +379,13 @@
    * keeps its danger edge on every box, and the ring says where the cursor
    * is — while the tint survives, because it says what the next key does.
    */
-  [data-ui='otp-input'][data-part='root']:not([data-invalid]):has(> [data-part='input']:focus)
-    [data-part='slot'][data-current] {
+  [data-ui-otp-input][data-part-root]:not([data-invalid]):has(> [data-part-input]:focus)
+    [data-part-slot][data-current] {
     border-color: var(--slotted-otp-input-current-border-color, var(--slotted-tone-accent-border));
   }
 
-  [data-ui='otp-input'][data-part='root']:has(> [data-part='input']:focus)
-    [data-part='slot'][data-current]:not(:empty) {
+  [data-ui-otp-input][data-part-root]:has(> [data-part-input]:focus)
+    [data-part-slot][data-current]:not(:empty) {
     background-color: var(
       --slotted-otp-input-selection-background,
       var(--slotted-tone-accent-surface)
@@ -392,8 +399,8 @@
    * whose caret is the thing that moved. A ring around the whole row would sit
    * still while the cursor moved inside it.
    */
-  [data-ui='otp-input'][data-part='root']:has(> [data-part='input']:focus-visible)
-    [data-part='slot'][data-current] {
+  [data-ui-otp-input][data-part-root]:has(> [data-part-input]:focus-visible)
+    [data-part-slot][data-current] {
     /**
      * The resting shadow, recoloured. The geometry is the foundation's and the
      * ink is the focus ring's, so the lift under the box and the ring around
@@ -402,7 +409,7 @@
     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));
   }
 
   /**
@@ -412,14 +419,14 @@
    * colour on the root moves all of them at once — the rule `text-field`
    * wrote and every field family inherits.
    */
-  [data-ui='otp-input'][data-part='root'][data-invalid] {
+  [data-ui-otp-input][data-part-root][data-invalid] {
     --slotted-focus-ring-color: var(
       --slotted-otp-input-invalid-focus-ring-color,
       var(--slotted-focus-ring-color-invalid, Highlight)
     );
   }
 
-  [data-ui='otp-input'][data-part='root'][data-invalid] [data-part='slot'] {
+  [data-ui-otp-input][data-part-root][data-invalid] [data-part-slot] {
     --_invalid-edge-width: var(
       --slotted-otp-input-invalid-edge-width,
       var(--slotted-control-invalid-edge-width, 1px)
@@ -440,8 +447,8 @@
     box-shadow: var(--_invalid-edge);
   }
 
-  [data-ui='otp-input'][data-part='root'][data-invalid]:has(> [data-part='input']:focus-visible)
-    [data-part='slot'][data-current] {
+  [data-ui-otp-input][data-part-root][data-invalid]:has(> [data-part-input]:focus-visible)
+    [data-part-slot][data-current] {
     box-shadow:
       var(--_invalid-edge),
       var(--slotted-control-shadow-focus-geometry, 0 1px 4px -1px)
@@ -454,18 +461,21 @@
    * control draws its ring double, which a valid ring is not.
    */
   @media (forced-colors: active) {
-    [data-ui='otp-input'][data-part='root'][data-invalid] [data-part='slot'] {
+    [data-ui-otp-input][data-part-root][data-invalid] [data-part-slot] {
       outline: var(--_invalid-edge-width) solid CanvasText;
       outline-offset: calc(
         -1 * (var(--slotted-control-border-width, 1px) + var(--_invalid-edge-width))
       );
     }
 
-    [data-ui='otp-input'][data-part='root'][data-invalid]:has(> [data-part='input']:focus-visible)
-      [data-part='slot'][data-current] {
+    [data-ui-otp-input][data-part-root][data-invalid]:has(> [data-part-input]:focus-visible)
+      [data-part-slot][data-current] {
       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)
+      );
     }
   }
 
@@ -475,7 +485,7 @@
    * ground says "not yours to change" and the ink says nothing at all. No
    * caret either — there is nothing to type.
    */
-  [data-ui='otp-input'][data-part='root'][data-readonly] [data-part='slot'] {
+  [data-ui-otp-input][data-part-root][data-readonly] [data-part-slot] {
     background-color: var(
       --slotted-otp-input-readonly-background,
       var(--slotted-tone-secondary-subtle-hover)
@@ -483,7 +493,7 @@
     cursor: default;
   }
 
-  [data-ui='otp-input'][data-part='root'][data-readonly] [data-part='slot']::after {
+  [data-ui-otp-input][data-part-root][data-readonly] [data-part-slot]::after {
     content: none;
   }
 
@@ -493,14 +503,14 @@
    * disabled `fieldset` disables every control inside it, and the control has
    * no way to know.
    */
-  [data-ui='otp-input'][data-part='root'][data-disabled],
-  [data-ui='otp-input'][data-part='root']:has(> [data-part='input']:disabled) {
+  [data-ui-otp-input][data-part-root][data-disabled],
+  [data-ui-otp-input][data-part-root]:has(> [data-part-input]:disabled) {
     color: var(--slotted-otp-input-disabled-color, var(--slotted-disabled-foreground));
     cursor: not-allowed;
   }
 
-  [data-ui='otp-input'][data-part='root'][data-disabled] [data-part='slot'],
-  [data-ui='otp-input'][data-part='root']:has(> [data-part='input']:disabled) [data-part='slot'] {
+  [data-ui-otp-input][data-part-root][data-disabled] [data-part-slot],
+  [data-ui-otp-input][data-part-root]:has(> [data-part-input]:disabled) [data-part-slot] {
     background-color: var(
       --slotted-otp-input-disabled-background,
       var(--slotted-disabled-background)
@@ -518,7 +528,7 @@
    * theme already remaps.
    */
   @media (forced-colors: active) {
-    [data-ui='otp-input'] > [data-part='input'] {
+    [data-ui-otp-input] > [data-part-input] {
       forced-color-adjust: none;
     }
   }

package/src/otp-input/otp-input.tokens.json

@@ -4,6 +4,7 @@
   "--slotted-border-width-thin",
   "--slotted-control-border-color",
   "--slotted-control-border-width",
+  "--slotted-control-focus-ring-offset",
   "--slotted-control-font-family",
   "--slotted-control-gap-lg",
   "--slotted-control-gap-md",

package/src/page/page.css

@@ -3,7 +3,7 @@
    * The column of a screen: who scrolls, how wide the content is, where the
    * footer stays, how much air the body has.
    *
-   *   main[data-ui=page]
+   *   main[data-ui-page]
    *   ├─ scroll ▸ page-header · body ▸ container ▸ …
    *   └─ footer ▸ container ▸ actions
    *
@@ -13,7 +13,7 @@
    * `self` the scroll part is the scroller, the page is exactly as tall as its
    * parent lets it be, and the footer sits below the scroller in the flow.
    */
-  [data-ui='page'] {
+  [data-ui-page] {
     --_ground: var(--slotted-page-background-sunken, var(--slotted-surface-sunken, Canvas));
     --_padding-block: var(--slotted-page-padding-block, var(--slotted-space-8, 1.5rem));
     --_footer-ground: var(--slotted-page-footer-background, var(--slotted-surface, Canvas));
@@ -54,11 +54,11 @@
     min-inline-size: 0;
   }
 
-  [data-ui='page'][data-ground='surface'] {
+  [data-ui-page][data-ground='surface'] {
     --_ground: var(--slotted-page-background-surface, var(--slotted-surface, Canvas));
   }
 
-  [data-ui='page'] > [data-part='scroll'] {
+  [data-ui-page] > [data-part-scroll] {
     display: flex;
     flex: 1 0 auto;
     flex-direction: column;
@@ -72,11 +72,11 @@
     overflow-anchor: none;
   }
 
-  [data-ui='page'][data-scroll='self'] {
+  [data-ui-page][data-scroll='self'] {
     block-size: 100%;
     min-block-size: 0;
   }
-  [data-ui='page'][data-scroll='self'] > [data-part='scroll'] {
+  [data-ui-page][data-scroll='self'] > [data-part-scroll] {
     flex: 1 1 auto;
     min-block-size: 0;
     overflow: auto;
@@ -85,7 +85,7 @@
 
   /* ── The body ────────────────────────────────────────────────────────── */
 
-  [data-ui='page'] > [data-part='scroll'] > [data-part='body'] {
+  [data-ui-page] > [data-part-scroll] > [data-part-body] {
     flex: 1 0 auto;
     min-inline-size: 0;
     padding-block: var(--_padding-block);
@@ -102,19 +102,19 @@
    * chrome above a filled list left its rows 155 of 667 pixels.
    */
   @container slotted-page (width >= 600px) {
-    [data-ui='page'][data-fill] > [data-part='scroll'] > [data-part='body'] {
+    [data-ui-page][data-fill] > [data-part-scroll] > [data-part-body] {
       display: flex;
       flex: 1 1 auto;
       flex-direction: column;
       min-block-size: 0;
     }
-    [data-ui='page'][data-fill] > [data-part='scroll'] > [data-part='body'] > * {
+    [data-ui-page][data-fill] > [data-part-scroll] > [data-part-body] > * {
       flex: 1 1 auto;
       min-block-size: 0;
     }
   }
 
-  [data-ui='page'][data-loading] > [data-part='scroll'] > [data-part='body'] {
+  [data-ui-page][data-loading] > [data-part-scroll] > [data-part-body] {
     cursor: progress;
   }
 
@@ -126,7 +126,7 @@
    * under it. It enters from below and leaves the same way; presence holds
    * it through the exit.
    */
-  [data-ui='page'] > [data-part='footer'] {
+  [data-ui-page] > [data-part-footer] {
     background-color: var(--_footer-ground);
     border-block-start: var(--slotted-border-width-thin, 1px) solid var(--_footer-rule);
     inset-block-end: 0;
@@ -138,16 +138,16 @@
       opacity var(--_duration) var(--_easing);
     z-index: var(--slotted-z-index-sticky, 100);
   }
-  [data-ui='page'][data-scroll='self'] > [data-part='footer'] {
+  [data-ui-page][data-scroll='self'] > [data-part-footer] {
     position: static;
   }
-  [data-ui='page'] > [data-part='footer'][data-status='entering'],
-  [data-ui='page'] > [data-part='footer'][data-status='exiting'] {
+  [data-ui-page] > [data-part-footer][data-status='entering'],
+  [data-ui-page] > [data-part-footer][data-status='exiting'] {
     opacity: 0;
     translate: 0 100%;
   }
 
-  [data-ui='page'] > [data-part='footer'] > * > [data-part='actions'] {
+  [data-ui-page] > [data-part-footer] > * > [data-part-actions] {
     align-items: center;
     display: flex;
     flex-wrap: wrap;
@@ -165,14 +165,14 @@
    * they take 16. The steps under 4 keep their own value.
    */
   @container slotted-page (width < 600px) {
-    [data-ui='page'] [data-ui='container'][data-inset='5'],
-    [data-ui='page'] [data-ui='container'][data-inset='6'],
-    [data-ui='page'] [data-ui='container'][data-inset='7'],
-    [data-ui='page'] [data-ui='container'][data-inset='8'],
-    [data-ui='page'] [data-ui='container'][data-inset='9'],
-    [data-ui='page'] [data-ui='container'][data-inset='10'],
-    [data-ui='page'] [data-ui='container'][data-inset='11'],
-    [data-ui='page'] [data-ui='container'][data-inset='12'] {
+    [data-ui-page] [data-ui-container][data-inset='5'],
+    [data-ui-page] [data-ui-container][data-inset='6'],
+    [data-ui-page] [data-ui-container][data-inset='7'],
+    [data-ui-page] [data-ui-container][data-inset='8'],
+    [data-ui-page] [data-ui-container][data-inset='9'],
+    [data-ui-page] [data-ui-container][data-inset='10'],
+    [data-ui-page] [data-ui-container][data-inset='11'],
+    [data-ui-page] [data-ui-container][data-inset='12'] {
       --_inset: var(--slotted-space-4, 0.5rem);
     }
   }