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

package/src/text-field/text-field.css

@@ -13,7 +13,7 @@
    * used outside a field looks the same as one inside it and the field's DOM
    * never becomes part of this stylesheet's contract.
    */
-  [data-ui='text-field'][data-part='root'] {
+  [data-ui-text-field][data-part-root] {
     /**
      * Type, height, inline padding, gap and glyph size all come from the
      * control scales — the only ones the theme restates per density — so a
@@ -130,15 +130,15 @@
    * The cost is written down: at `md` the glyph now ends four pixels nearer
    * the border than the text begins from it.
    */
-  [data-ui='text-field'][data-part='root']:has(
-      > :is([data-part='clear'], [data-part='copy'], [data-part='reveal']):not([hidden]):last-child,
-      > [data-part='end']:last-child > [data-part='action']:last-child
+  [data-ui-text-field][data-part-root]:has(
+      > :is([data-part-clear], [data-part-copy], [data-part-reveal]):not([hidden]):last-child,
+      > [data-part-end]:last-child > [data-part-action]:last-child
     ) {
     padding-inline-end: var(--_inset);
   }
 
-  [data-ui='text-field'][data-part='root']:has(
-      > [data-part='start']:first-child > [data-part='action']:first-child
+  [data-ui-text-field][data-part-root]:has(
+      > [data-part-start]:first-child > [data-part-action]:first-child
     ) {
     padding-inline-start: var(--_inset);
   }
@@ -149,7 +149,7 @@
    * it a text control: the value, the caret, the selection and every native
    * attribute a consumer wrote.
    */
-  [data-ui='text-field'] > [data-part='input'] {
+  [data-ui-text-field] > [data-part-input] {
     background-color: transparent;
     /* The frame's border box, not its content box: on a coarse pointer the frame
        is the touch target's height and the control it holds is too. Stretched
@@ -175,7 +175,7 @@
     text-overflow: ellipsis;
   }
 
-  [data-ui='text-field'] > [data-part='input']::placeholder {
+  [data-ui-text-field] > [data-part-input]::placeholder {
     color: var(--slotted-text-field-placeholder-color, var(--slotted-text-muted, GrayText));
     /* A placeholder longer than the control is clipped at a word rather than
        mid-glyph, which is the difference between a hint and a smear. */
@@ -187,21 +187,32 @@
    * `type="search"` control would be the second. The native decorations are
    * withdrawn rather than left to overlap.
    */
-  [data-ui='text-field'] > [data-part='input']::-webkit-search-cancel-button,
-  [data-ui='text-field'] > [data-part='input']::-webkit-search-decoration {
+  [data-ui-text-field] > [data-part-input]::-webkit-search-cancel-button,
+  [data-ui-text-field] > [data-part-input]::-webkit-search-decoration {
     appearance: 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: an autofilled value is a fact worth
-   * seeing, so it is repainted in the accent surface the theme owns instead of
-   * in the browser's yellow.
-   */
-  [data-ui='text-field'] > [data-part='input']:autofill {
+   * Autofill. Chrome paints its own ground over the input, and a hundred-pixel
+   * inset shadow is the only way to reach it. The signal is kept rather than
+   * erased, in the accent surface the theme owns, and it is the whole
+   * control's: the frame takes the tint under its border and inside its
+   * corner, and the input repaints the browser's ground in the same colour.
+   * Painted on the input alone, the tint left the frame's padding, the slots
+   * and the buttons bare, and covered the border the input overlaps by one width.
+   */
+  [data-ui-text-field][data-part-root]:has(> [data-part-input]:autofill) {
+    background-color: var(
+      --slotted-text-field-autofill-background,
+      var(--slotted-tone-accent-surface)
+    );
+  }
+
+  [data-ui-text-field] > [data-part-input]:autofill {
     box-shadow: inset 0 0 0 100px
       var(--slotted-text-field-autofill-background, var(--slotted-tone-accent-surface));
+    /* The input overlaps the frame's border by one width; the tint stops at it. */
+    clip-path: inset(var(--slotted-control-border-width, 1px) 0);
     -webkit-text-fill-color: var(--slotted-text-field-color, var(--slotted-text, CanvasText));
   }
 
@@ -213,7 +224,7 @@
    * disagreeing about one row.
    */
 
-  [data-ui='text-field'][data-part='root'][data-size='sm'] {
+  [data-ui-text-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);
@@ -222,7 +233,7 @@
     --_inner-size: var(--slotted-control-inner-size-sm, 22px);
   }
 
-  [data-ui='text-field'][data-part='root'][data-size='md'] {
+  [data-ui-text-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);
@@ -231,7 +242,7 @@
     --_inner-size: var(--slotted-control-inner-size-md, 24px);
   }
 
-  [data-ui='text-field'][data-part='root'][data-size='lg'] {
+  [data-ui-text-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);
@@ -246,7 +257,7 @@
    * it takes the width the buttons leave rather than the whole row, so the
    * button's label never wraps to make room for it.
    */
-  [data-ui='button-group'] > [data-ui='text-field'][data-part='root'] {
+  [data-ui-button-group] > [data-ui-text-field][data-part-root] {
     flex: 1 1 0;
     inline-size: auto;
   }
@@ -265,7 +276,7 @@
    * pointer crosses it.
    */
 
-  [data-ui='text-field'][data-part='root'][data-variant='subtle'] {
+  [data-ui-text-field][data-part-root][data-variant='subtle'] {
     background-color: var(
       --slotted-text-field-subtle-background,
       var(--slotted-surface-sunken, Canvas)
@@ -279,7 +290,7 @@
   /* No edge, no lift, no ground and no corner of its own: the cell it sits in
      is the box, the row is the ground, a cell has no corner, and the resting
      shadow would draw the cell where there is none. */
-  [data-ui='text-field'][data-part='root'][data-variant='plain'] {
+  [data-ui-text-field][data-part-root][data-variant='plain'] {
     background-color: transparent;
     border-color: transparent;
     border-radius: var(--slotted-radius-none, 0px);
@@ -292,7 +303,7 @@
    * its only edge exactly where an edge matters most.
    */
   @media (forced-colors: active) {
-    [data-ui='text-field'][data-part='root'][data-variant='plain'] {
+    [data-ui-text-field][data-part-root][data-variant='plain'] {
       border-color: ButtonBorder;
     }
   }
@@ -302,7 +313,7 @@
    * A back-office form full of identifiers, hashes and keys, which is the
    * audience `docs/product/prd.md` names first. Primer and Polaris both ship it.
    */
-  [data-ui='text-field'][data-part='root'][data-mono] {
+  [data-ui-text-field][data-part-root][data-mono] {
     font-family: var(--slotted-font-family-mono, monospace);
     /* Digits that do not shift as a value is typed over. */
     font-variant-numeric: tabular-nums;
@@ -315,8 +326,8 @@
    * than the value: an adornment annotates, and a reader looking for what they
    * typed should not have to step over it.
    */
-  [data-ui='text-field'] > [data-part='start'],
-  [data-ui='text-field'] > [data-part='end'] {
+  [data-ui-text-field] > [data-part-start],
+  [data-ui-text-field] > [data-part-end] {
     align-items: center;
     color: var(--slotted-text-field-adornment-color, var(--slotted-text-muted, GrayText));
     display: inline-flex;
@@ -345,16 +356,16 @@
    * table draws a 12-pixel glyph and nothing has to be written per instance.
    * A bare `svg` a consumer passed instead is held to the same box.
    */
-  [data-ui='text-field'] > [data-part='start'],
-  [data-ui='text-field'] > [data-part='end'] {
+  [data-ui-text-field] > [data-part-start],
+  [data-ui-text-field] > [data-part-end] {
     --slotted-icon-size: var(--_icon-size);
     /* And a key or a chip placed there is the height the inside of this
        control has, from the foundation's scale for it. */
     --slotted-control-inner-size: var(--_inner-size);
   }
 
-  [data-ui='text-field'] > [data-part='start'] > svg,
-  [data-ui='text-field'] > [data-part='end'] > svg {
+  [data-ui-text-field] > [data-part-start] > svg,
+  [data-ui-text-field] > [data-part-end] > svg {
     block-size: var(--_icon-size);
     inline-size: var(--_icon-size);
   }
@@ -373,10 +384,8 @@
    * keeps the gap to the value equal as well, and because a symmetric padding
    * cannot disagree with `unicode-bidi: plaintext` about which side is which.
    */
-  [data-ui='text-field']
-    > [data-part='start']:not(:has(svg, img, [data-ui='icon'], [data-part='action'])),
-  [data-ui='text-field']
-    > [data-part='end']:not(:has(svg, img, [data-ui='icon'], [data-part='action'])) {
+  [data-ui-text-field] > [data-part-start]:not(:has(svg, img, [data-ui-icon], [data-part-action])),
+  [data-ui-text-field] > [data-part-end]:not(:has(svg, img, [data-ui-icon], [data-part-action])) {
     padding-inline: calc(var(--_icon-size) / 8);
   }
 
@@ -390,8 +399,8 @@
    * Their glyphs are the `Glyph` element the binding renders: a character is
    * never an icon.
    */
-  [data-ui='text-field'] > :is([data-part='clear'], [data-part='copy'], [data-part='reveal']),
-  [data-ui='text-field'] > :is([data-part='start'], [data-part='end']) > [data-part='action'] {
+  [data-ui-text-field] > :is([data-part-clear], [data-part-copy], [data-part-reveal]),
+  [data-ui-text-field] > :is([data-part-start], [data-part-end]) > [data-part-action] {
     --slotted-icon-size: var(--_icon-size);
 
     align-items: center;
@@ -434,9 +443,9 @@
    * the two, so the attribute that makes it accessible is the one that shapes
    * it.
    */
-  [data-ui='text-field']
-    > :is([data-part='start'], [data-part='end'])
-    > [data-part='action']:not([aria-label], [aria-labelledby]) {
+  [data-ui-text-field]
+    > :is([data-part-start], [data-part-end])
+    > [data-part-action]:not([aria-label], [aria-labelledby]) {
     /* Words in the frame's quiet ink read as a suffix, not as something to
        press: "Search" beside the value looked like a unit. A named command
        or a chosen country code carries the value's ink; a lone mark stays
@@ -458,9 +467,9 @@
    * translate puts its centre at `(1cap + 1ex) / 4` above the baseline — the
    * midpoint of the capitals' and the lowercase letters' own centres.
    */
-  [data-ui='text-field']
-    > :is([data-part='start'], [data-part='end'])
-    > [data-part='action']:not([aria-label], [aria-labelledby]) {
+  [data-ui-text-field]
+    > :is([data-part-start], [data-part-end])
+    > [data-part-action]:not([aria-label], [aria-labelledby]) {
     align-content: center;
     align-items: baseline;
     display: inline-grid;
@@ -468,10 +477,10 @@
     justify-content: center;
   }
 
-  [data-ui='text-field']
-    > :is([data-part='start'], [data-part='end'])
-    > [data-part='action']:not([aria-label], [aria-labelledby])
-    > [data-ui='icon'] {
+  [data-ui-text-field]
+    > :is([data-part-start], [data-part-end])
+    > [data-part-action]:not([aria-label], [aria-labelledby])
+    > [data-ui-icon] {
     margin-block-start: calc((1cap + 1ex) / 4 - var(--_icon-size) / 2);
     translate: 0 calc(var(--_icon-size) / 2 - (1cap + 1ex) / 4);
   }
@@ -480,7 +489,7 @@
    * An adornment holding a button is not quiet text any more: its gap is the
    * one between two buttons, and it does not pad a glyph that is not there.
    */
-  [data-ui='text-field'] > :is([data-part='start'], [data-part='end']):has(> [data-part='action']) {
+  [data-ui-text-field] > :is([data-part-start], [data-part-end]):has(> [data-part-action]) {
     gap: 0;
   }
 
@@ -493,11 +502,8 @@
    * correction `docs/token-foundation.md` leaves to the family rather than to
    * the theme.
    */
-  [data-ui='text-field']
-    > :is([data-part='clear'], [data-part='copy'], [data-part='reveal'])::after,
-  [data-ui='text-field']
-    > :is([data-part='start'], [data-part='end'])
-    > [data-part='action']::after {
+  [data-ui-text-field] > :is([data-part-clear], [data-part-copy], [data-part-reveal])::after,
+  [data-ui-text-field] > :is([data-part-start], [data-part-end]) > [data-part-action]::after {
     content: '';
     inset: min(0px, calc((100% - var(--slotted-target-min, 24px)) / 2));
     position: absolute;
@@ -508,45 +514,42 @@
      the hit area grows to 44 pixels around them. Side by side, no button
      reaches across the edge it shares with the next. */
   @media (pointer: coarse) {
-    [data-ui='text-field']
-      > :is([data-part='start'], [data-part='end'])
-      > [data-part='action']::after,
-    [data-ui='text-field']
-      > :is([data-part='clear'], [data-part='copy'], [data-part='reveal'])::after {
+    [data-ui-text-field] > :is([data-part-start], [data-part-end]) > [data-part-action]::after,
+    [data-ui-text-field] > :is([data-part-clear], [data-part-copy], [data-part-reveal])::after {
       inset: min(0px, calc((100% - var(--slotted-target-comfortable, 44px)) / 2));
     }
 
-    [data-ui='text-field']
-      > :is([data-part='clear'], [data-part='copy']):has(
-        ~ :is([data-part='copy'], [data-part='reveal']):not([hidden])
+    [data-ui-text-field]
+      > :is([data-part-clear], [data-part-copy]):has(
+        ~ :is([data-part-copy], [data-part-reveal]):not([hidden])
       )::after,
-    [data-ui='text-field']
-      > :is([data-part='start'], [data-part='end'])
-      > [data-part='action']:has(+ [data-part='action'])::after {
+    [data-ui-text-field]
+      > :is([data-part-start], [data-part-end])
+      > [data-part-action]:has(+ [data-part-action])::after {
       inset-inline-end: 0;
     }
 
-    [data-ui='text-field']
-      > :is([data-part='clear'], [data-part='copy']):not([hidden])
-      ~ :is([data-part='copy'], [data-part='reveal'])::after,
-    [data-ui='text-field']
-      > :is([data-part='start'], [data-part='end'])
-      > [data-part='action']
-      + [data-part='action']::after {
+    [data-ui-text-field]
+      > :is([data-part-clear], [data-part-copy]):not([hidden])
+      ~ :is([data-part-copy], [data-part-reveal])::after,
+    [data-ui-text-field]
+      > :is([data-part-start], [data-part-end])
+      > [data-part-action]
+      + [data-part-action]::after {
       inset-inline-start: 0;
     }
   }
 
   /* An open menu keeps its button pressed under the pointer as well, and a
      finished copy keeps its success ink until the check goes. */
-  [data-ui='text-field']
-    > :is([data-part='clear'], [data-part='copy'], [data-part='reveal']):hover:not(
+  [data-ui-text-field]
+    > :is([data-part-clear], [data-part-copy], [data-part-reveal]):hover:not(
       :disabled,
       [data-complete]
     ),
-  [data-ui='text-field']
-    > :is([data-part='start'], [data-part='end'])
-    > [data-part='action']:hover:not(:disabled, [aria-expanded='true']) {
+  [data-ui-text-field]
+    > :is([data-part-start], [data-part-end])
+    > [data-part-action]:hover:not(:disabled, [aria-expanded='true']) {
     background-color: var(
       --slotted-text-field-action-hover-background,
       var(--slotted-tone-secondary-subtle-hover)
@@ -559,11 +562,11 @@
    * settles a pixel, and inside a 24-pixel box beside the value that reads as
    * the value moving (dossier § 4, `recusar`).
    */
-  [data-ui='text-field']
-    > :is([data-part='clear'], [data-part='copy'], [data-part='reveal']):active:not(:disabled),
-  [data-ui='text-field']
-    > :is([data-part='start'], [data-part='end'])
-    > [data-part='action']:active:not(:disabled) {
+  [data-ui-text-field]
+    > :is([data-part-clear], [data-part-copy], [data-part-reveal]):active:not(:disabled),
+  [data-ui-text-field]
+    > :is([data-part-start], [data-part-end])
+    > [data-part-action]:active:not(:disabled) {
     background-color: var(
       --slotted-text-field-action-active-background,
       var(--slotted-tone-secondary-subtle-active)
@@ -571,21 +574,19 @@
   }
 
   /* A menu or a popover the button opened keeps it pressed while it is open. */
-  [data-ui='text-field']
-    > :is([data-part='start'], [data-part='end'])
-    > [data-part='action'][aria-expanded='true'] {
+  [data-ui-text-field]
+    > :is([data-part-start], [data-part-end])
+    > [data-part-action][aria-expanded='true'] {
     background-color: var(
       --slotted-text-field-action-active-background,
       var(--slotted-tone-secondary-subtle-active)
     );
   }
 
-  [data-ui='text-field']
-    > :is([data-part='start'], [data-part='end'])
-    > [data-part='action']:disabled,
-  [data-ui='text-field'][data-part='root'][data-disabled]
-    > :is([data-part='start'], [data-part='end'])
-    > [data-part='action'] {
+  [data-ui-text-field] > :is([data-part-start], [data-part-end]) > [data-part-action]:disabled,
+  [data-ui-text-field][data-part-root][data-disabled]
+    > :is([data-part-start], [data-part-end])
+    > [data-part-action] {
     color: var(--slotted-disabled-foreground);
     cursor: not-allowed;
   }
@@ -595,17 +596,16 @@
    * from the value to a button has to move something visible, and a ring
    * around the whole frame would sit still while focus moved inside it.
    */
-  [data-ui='text-field']
-    > :is([data-part='clear'], [data-part='copy'], [data-part='reveal']):focus-visible,
-  [data-ui='text-field']
-    > :is([data-part='start'], [data-part='end'])
-    > [data-part='action']:focus-visible {
+  [data-ui-text-field] > :is([data-part-clear], [data-part-copy], [data-part-reveal]):focus-visible,
+  [data-ui-text-field]
+    > :is([data-part-start], [data-part-end])
+    > [data-part-action]: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);
   }
 
   /** A copy that finished: the mark changes as well as the ink, and returns on its own. */
-  [data-ui='text-field'] > [data-part='copy'][data-complete] {
+  [data-ui-text-field] > [data-part-copy][data-complete] {
     color: var(
       --slotted-text-field-copy-complete-color,
       var(--slotted-tone-success-text, CanvasText)
@@ -618,14 +618,14 @@
    * fifths of its size and transparent, on the entering curve. Nothing leaves:
    * the old mark is gone in the same frame, so there is no exit to time.
    */
-  [data-ui='text-field'] > :is([data-part='copy'], [data-part='reveal']) > [data-ui='icon'] {
+  [data-ui-text-field] > :is([data-part-copy], [data-part-reveal]) > [data-ui-icon] {
     transition:
       opacity var(--slotted-duration-short) var(--slotted-easing-enter),
       scale var(--slotted-duration-short) var(--slotted-easing-enter);
   }
 
   @starting-style {
-    [data-ui='text-field'] > :is([data-part='copy'], [data-part='reveal']) > [data-ui='icon'] {
+    [data-ui-text-field] > :is([data-part-copy], [data-part-reveal]) > [data-ui-icon] {
       opacity: 0;
       scale: 0.8;
     }
@@ -641,8 +641,8 @@
    * out on the leaving one, in the same short step, and `display` is held
    * until it has gone.
    */
-  [data-ui='text-field']
-    > :is([data-part='busy'], [data-part='caps-lock'], [data-part='clear'], [data-part='copy']) {
+  [data-ui-text-field]
+    > :is([data-part-busy], [data-part-caps-lock], [data-part-clear], [data-part-copy]) {
     transition:
       var(--_action-transition),
       opacity var(--slotted-duration-short) var(--slotted-easing-enter),
@@ -650,13 +650,8 @@
       display var(--slotted-duration-short) allow-discrete;
   }
 
-  [data-ui='text-field']
-    > :is(
-      [data-part='busy'],
-      [data-part='caps-lock'],
-      [data-part='clear'],
-      [data-part='copy']
-    )[hidden] {
+  [data-ui-text-field]
+    > :is([data-part-busy], [data-part-caps-lock], [data-part-clear], [data-part-copy])[hidden] {
     display: none;
     opacity: 0;
     scale: 0.8;
@@ -667,8 +662,8 @@
   }
 
   @starting-style {
-    [data-ui='text-field']
-      > :is([data-part='busy'], [data-part='caps-lock'], [data-part='clear'], [data-part='copy']) {
+    [data-ui-text-field]
+      > :is([data-part-busy], [data-part-caps-lock], [data-part-clear], [data-part-copy]) {
       opacity: 0;
       scale: 0.8;
     }
@@ -678,7 +673,7 @@
    * The ring is the one `spinner` draws for every family, at this control's
    * glyph size, so it occupies the box a mark beside it would.
    */
-  [data-ui='text-field'] > [data-part='busy'] {
+  [data-ui-text-field] > [data-part-busy] {
     --slotted-spinner-size: var(--_icon-size);
 
     color: var(--slotted-text-field-adornment-color, var(--slotted-text-muted, GrayText));
@@ -690,7 +685,7 @@
    * the value, so it is the warning ink on the glyph alone and never the
    * frame's edge — the frame's one alarming state is `invalid`.
    */
-  [data-ui='text-field'] > [data-part='caps-lock'] {
+  [data-ui-text-field] > [data-part-caps-lock] {
     --slotted-icon-size: var(--_icon-size);
 
     align-items: center;
@@ -705,24 +700,24 @@
    * one it can meet, which is the order `STATE_PRECEDENCE` sets.
    */
 
-  [data-ui='text-field'][data-part='root']:hover:not([data-disabled]):not([data-readonly]):not(
+  [data-ui-text-field][data-part-root]:hover:not([data-disabled]):not([data-readonly]):not(
       [data-invalid]
     ) {
     border-color: var(--slotted-text-field-hover-border-color, var(--slotted-tone-accent-border));
   }
 
-  [data-ui='text-field'][data-part='root'][data-variant='subtle']:hover:not([data-disabled]):not(
+  [data-ui-text-field][data-part-root][data-variant='subtle']:hover:not([data-disabled]):not(
       [data-readonly]
-    ):not([data-invalid]) {
+    ):not([data-invalid]):not(:has(> [data-part-input]:autofill)) {
     background-color: var(
       --slotted-text-field-subtle-hover-background,
       var(--slotted-tone-secondary-subtle-hover)
     );
   }
 
-  [data-ui='text-field'][data-part='root'][data-variant='plain']:hover:not([data-disabled]):not(
+  [data-ui-text-field][data-part-root][data-variant='plain']:hover:not([data-disabled]):not(
       [data-readonly]
-    ):not([data-invalid]) {
+    ):not([data-invalid]):not(:has(> [data-part-input]:autofill)) {
     background-color: var(
       --slotted-text-field-plain-hover-background,
       var(--slotted-tone-secondary-subtle-hover)
@@ -737,7 +732,7 @@
    * pointer press as well as for a Tab, which is exactly right for a control
    * whose caret is the thing that moved.
    */
-  [data-ui='text-field'][data-part='root']:has(> [data-part='input']:focus-visible) {
+  [data-ui-text-field][data-part-root]:has(> [data-part-input]:focus-visible) {
     /**
      * The resting shadow, recoloured. The geometry is the foundation's and the
      * ink is the focus ring's, so the lift under the control and the ring
@@ -746,7 +741,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));
   }
 
   /**
@@ -756,8 +751,8 @@
    * shadow that appears only under focus is a cell that changes size when it
    * is used.
    */
-  [data-ui='text-field'][data-part='root'][data-variant='plain']:has(
-      > [data-part='input']:focus-visible
+  [data-ui-text-field][data-part-root][data-variant='plain']:has(
+      > [data-part-input]:focus-visible
     ) {
     box-shadow: none;
     outline-offset: calc(var(--slotted-focus-ring-offset, 2px) * -1);
@@ -775,7 +770,7 @@
    * rule for a family, and it is the rule `checkbox`, `radio-group` and
    * `switch` inherit rather than restate when they arrive.
    */
-  [data-ui='text-field'][data-part='root'][data-invalid] {
+  [data-ui-text-field][data-part-root][data-invalid] {
     --slotted-focus-ring-color: var(
       --slotted-text-field-invalid-focus-ring-color,
       var(--slotted-focus-ring-color-invalid, Highlight)
@@ -802,15 +797,15 @@
     box-shadow: var(--_invalid-edge);
   }
 
-  [data-ui='text-field'][data-part='root'][data-invalid]:has(> [data-part='input']:focus-visible) {
+  [data-ui-text-field][data-part-root][data-invalid]:has(> [data-part-input]:focus-visible) {
     box-shadow:
       var(--_invalid-edge),
       var(--slotted-control-shadow-focus-geometry, 0 1px 4px -1px)
         var(--slotted-focus-ring-color, Highlight);
   }
 
-  [data-ui='text-field'][data-part='root'][data-variant='plain'][data-invalid]:has(
-      > [data-part='input']:focus-visible
+  [data-ui-text-field][data-part-root][data-variant='plain'][data-invalid]:has(
+      > [data-part-input]:focus-visible
     ) {
     /* The ring lies inside the box here, over the border and an edge as wide as
        it; the edge reaches past the ring. */
@@ -828,23 +823,24 @@
    * control draws its ring double, which a valid ring is not.
    */
   @media (forced-colors: active) {
-    [data-ui='text-field'][data-part='root'][data-invalid] {
+    [data-ui-text-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='text-field'][data-part='root'][data-invalid]:has(
-        > [data-part='input']:focus-visible
-      ) {
+    [data-ui-text-field][data-part-root][data-invalid]:has(> [data-part-input]:focus-visible) {
       outline: calc(var(--slotted-focus-ring-width, 2px) + var(--_invalid-edge-width)) double
         var(--slotted-focus-ring-color, Highlight);
-      outline-offset: var(--slotted-focus-ring-offset, 2px);
+      outline-offset: var(
+        --slotted-control-focus-ring-offset,
+        var(--slotted-focus-ring-offset, 2px)
+      );
     }
 
-    [data-ui='text-field'][data-part='root'][data-variant='plain'][data-invalid]:has(
-        > [data-part='input']:focus-visible
+    [data-ui-text-field][data-part-root][data-variant='plain'][data-invalid]:has(
+        > [data-part-input]:focus-visible
       ) {
       outline: calc(var(--slotted-focus-ring-width, 2px) + var(--_invalid-edge-width)) double
         var(--slotted-focus-ring-color, Highlight);
@@ -859,7 +855,7 @@
    * 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='text-field'][data-part='root'][data-readonly] {
+  [data-ui-text-field][data-part-root][data-readonly] {
     background-color: var(
       --slotted-text-field-readonly-background,
       var(--slotted-tone-secondary-subtle-hover)
@@ -875,8 +871,8 @@
    * operable and answering nothing — a defect the deleted `input` family
    * recorded and fixed, and one no rebuild is allowed to reintroduce.
    */
-  [data-ui='text-field'][data-part='root'][data-disabled],
-  [data-ui='text-field'][data-part='root']:has(> [data-part='input']:disabled) {
+  [data-ui-text-field][data-part-root][data-disabled],
+  [data-ui-text-field][data-part-root]:has(> [data-part-input]:disabled) {
     background-color: var(
       --slotted-text-field-disabled-background,
       var(--slotted-disabled-background)
@@ -893,8 +889,8 @@
    * value nobody can read is a field nobody can check, and a disabled form
    * still has to say what it holds.
    */
-  [data-ui='text-field'][data-part='root'][data-disabled] > [data-part='start'],
-  [data-ui='text-field'][data-part='root'][data-disabled] > [data-part='end'] {
+  [data-ui-text-field][data-part-root][data-disabled] > [data-part-start],
+  [data-ui-text-field][data-part-root][data-disabled] > [data-part-end] {
     color: var(--slotted-disabled-foreground);
   }
 }

package/src/text-field/text-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",