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

package/src/field/field.css

@@ -19,7 +19,7 @@
    * a field in a 240-pixel drawer has to stack while the same field in a page
    * grid stays beside its control.
    */
-  [data-ui='field'][data-part='root'] {
+  [data-ui-field][data-part-root] {
     /**
      * Type, control height and glyph come from the control scales, the only
      * ones the theme restates per density, so a field in a dense table shrinks
@@ -79,7 +79,7 @@
   }
 
   /* Every child spans the field, and the two that do not say so below. */
-  [data-ui='field'][data-part='root'] > * {
+  [data-ui-field][data-part-root] > * {
     grid-column: 1 / -1;
   }
 
@@ -90,7 +90,7 @@
    * rather than the control. Nothing here paints the control, sizes its type or
    * touches its border: `text-field` owns all three.
    */
-  [data-ui='field'] > [data-part='control'] {
+  [data-ui-field] > [data-part-control] {
     min-inline-size: 0;
   }
 
@@ -101,7 +101,7 @@
    * inside it, which makes a field with no control an unsized box.
    */
 
-  [data-ui='field'][data-part='root'][data-size='sm'] {
+  [data-ui-field][data-part-root][data-size='sm'] {
     --_help-glyph: max(
       var(--slotted-field-icon-size-min, 14px),
       var(--slotted-control-icon-size-sm, 14px)
@@ -111,7 +111,7 @@
     --_control-block-size: var(--slotted-control-height-sm, 30px);
   }
 
-  [data-ui='field'][data-part='root'][data-size='md'] {
+  [data-ui-field][data-part-root][data-size='md'] {
     --_help-glyph: max(
       var(--slotted-field-icon-size-min, 14px),
       var(--slotted-control-icon-size-sm, 14px)
@@ -121,7 +121,7 @@
     --_control-block-size: var(--slotted-control-height-md, 34px);
   }
 
-  [data-ui='field'][data-part='root'][data-size='lg'] {
+  [data-ui-field][data-part-root][data-size='lg'] {
     --_help-glyph: max(
       var(--slotted-field-icon-size-min, 14px),
       var(--slotted-control-icon-size-md, 16px)
@@ -142,8 +142,8 @@
    * line height is for a box holding one line, and a label of twelve words
    * beside a narrow control holds three.
    */
-  [data-ui='field'] > [data-part='label'],
-  [data-ui='field'] > [data-part='header'] > [data-part='label'] {
+  [data-ui-field] > [data-part-label],
+  [data-ui-field] > [data-part-header] > [data-part-label] {
     color: var(--slotted-field-label-color, var(--slotted-text));
     font-size: var(--_font-size);
     font-weight: var(--slotted-field-label-font-weight, var(--slotted-font-weight-medium, 500));
@@ -163,8 +163,8 @@
    * The first row is the label's, or the header's when the label has company.
    * Either spans the field when the label sits above the control.
    */
-  [data-ui='field'] > [data-part='label'],
-  [data-ui='field'] > [data-part='header'] {
+  [data-ui-field] > [data-part-label],
+  [data-ui-field] > [data-part-header] {
     grid-column: 1 / -1;
     grid-row: 1;
   }
@@ -175,7 +175,7 @@
    * label under it; a field without one would otherwise lose the counter's track
    * from the label's width for a part that is not there.
    */
-  [data-ui='field'][data-part='root']:has(> [data-part='counter']) > [data-part='label'] {
+  [data-ui-field][data-part-root]:has(> [data-part-counter]) > [data-part-label] {
     grid-column: 1 / 3;
   }
 
@@ -191,8 +191,8 @@
    * red marker on a red label is a marker nobody can see, and the error already
    * says the same thing in words, in colour and in a glyph.
    */
-  [data-ui='field'] > [data-part='label'] > [data-part='mark'],
-  [data-ui='field'] > [data-part='header'] > [data-part='label'] > [data-part='mark'] {
+  [data-ui-field] > [data-part-label] > [data-part-mark],
+  [data-ui-field] > [data-part-header] > [data-part-label] > [data-part-mark] {
     color: var(--slotted-field-mark-color, var(--slotted-tone-danger-text));
     margin-inline-start: var(--slotted-field-mark-gap, var(--slotted-space-2, 0.25rem));
     /* The label breaks anywhere; the necessity word never does. `(required)`
@@ -217,13 +217,13 @@
    * a qualifier rather than as two labels. `optional` writes the word only on
    * the fields a reader may skip; `words` writes both.
    */
-  [data-ui='field']:is([data-necessity='optional'], [data-necessity='words'])
-    > [data-part='label']
-    > [data-part='mark'],
-  [data-ui='field']:is([data-necessity='optional'], [data-necessity='words'])
-    > [data-part='header']
-    > [data-part='label']
-    > [data-part='mark'] {
+  [data-ui-field]:is([data-necessity='optional'], [data-necessity='words'])
+    > [data-part-label]
+    > [data-part-mark],
+  [data-ui-field]:is([data-necessity='optional'], [data-necessity='words'])
+    > [data-part-header]
+    > [data-part-label]
+    > [data-part-mark] {
     color: var(--slotted-field-mark-text-color, var(--slotted-text-muted));
     font-size: var(--slotted-control-font-size-sm, 12px);
     font-weight: var(--slotted-font-weight-regular, 400);
@@ -243,7 +243,7 @@
    * anything inside it are the label's line. It wraps: in a narrow field the
    * action and the counter move to a second line, still at its end.
    */
-  [data-ui='field'] > [data-part='header'] {
+  [data-ui-field] > [data-part-header] {
     align-items: baseline;
     column-gap: var(--slotted-field-header-gap, var(--slotted-space-3, 0.375rem));
     display: flex;
@@ -253,7 +253,7 @@
     min-inline-size: 0;
   }
 
-  [data-ui='field'] > [data-part='header'] > [data-part='label'] {
+  [data-ui-field] > [data-part-header] > [data-part-label] {
     flex: 0 1 auto;
   }
 
@@ -264,12 +264,12 @@
    * distance a side label keeps from its control, so a link and a number do
    * not read as one phrase.
    */
-  [data-ui='field'] > [data-part='header'] > [data-part='action'],
-  [data-ui='field'] > [data-part='header'] > [data-part='counter'] {
+  [data-ui-field] > [data-part-header] > [data-part-action],
+  [data-ui-field] > [data-part-header] > [data-part-counter] {
     margin-inline-start: auto;
   }
 
-  [data-ui='field'] > [data-part='header'] > [data-part='action'] ~ [data-part='counter'] {
+  [data-ui-field] > [data-part-header] > [data-part-action] ~ [data-part-counter] {
     margin-inline-start: var(--slotted-space-3, 0.375rem);
   }
 
@@ -306,7 +306,7 @@
    * the glyph, which put its centre on the band's top: four pixels high, and a
    * line box 3.3 pixels taller than the label's.
    */
-  [data-ui='field'] > [data-part='header'] > [data-part='help'] {
+  [data-ui-field] > [data-part-header] > [data-part-help] {
     /* Never shorter than the label's line: at dense the inside of a control is
        16 pixels and the line 17.39, and a button shorter than its own line
        overflows downward and pushes the row 0.69 pixels taller. */
@@ -348,13 +348,13 @@
   /* The pointer target: a transparent square centred on the box that reaches
      the WCAG minimum wherever the box falls short of it — 22 pixels at
      comfortable, 16 at dense. It takes no room, so the row keeps its height. */
-  [data-ui='field'] > [data-part='header'] > [data-part='help']::before {
+  [data-ui-field] > [data-part-header] > [data-part-help]::before {
     content: '';
     inset: min(0px, calc((100% - var(--slotted-target-min, 24px)) / 2));
     position: absolute;
   }
 
-  [data-ui='field'] > [data-part='header'] > [data-part='help'] > [data-ui='icon'] {
+  [data-ui-field] > [data-part-header] > [data-part-help] > [data-ui-icon] {
     vertical-align: calc(((1cap + 1ex) / 2 - var(--_help-glyph)) / 2);
   }
 
@@ -363,22 +363,22 @@
    * hover ground while its tooltip is showing, so the reader sees which icon
    * the layer belongs to after the pointer has moved onto the layer.
    */
-  [data-ui='field'] > [data-part='header'] > [data-part='help']:enabled:hover,
-  [data-ui='field'] > [data-part='header'] > [data-part='help'][data-open] {
+  [data-ui-field] > [data-part-header] > [data-part-help]:enabled:hover,
+  [data-ui-field] > [data-part-header] > [data-part-help][data-open] {
     background-color: var(
       --slotted-field-help-surface-hover,
       var(--slotted-tone-secondary-subtle-hover, ButtonFace)
     );
   }
 
-  [data-ui='field'] > [data-part='header'] > [data-part='help']:enabled:active {
+  [data-ui-field] > [data-part-header] > [data-part-help]:enabled:active {
     background-color: var(
       --slotted-field-help-surface-active,
       var(--slotted-tone-secondary-subtle-active, ButtonFace)
     );
   }
 
-  [data-ui='field'] > [data-part='header'] > [data-part='help']:focus-visible {
+  [data-ui-field] > [data-part-header] > [data-part-help]:focus-visible {
     outline: var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);
     outline-offset: var(--slotted-focus-ring-offset, 2px);
   }
@@ -391,7 +391,7 @@
    * description rather than with its name. The badges are the badge family's;
    * the field only spaces them.
    */
-  [data-ui='field'] > [data-part='header'] > [data-part='indicator'] {
+  [data-ui-field] > [data-part-header] > [data-part-indicator] {
     align-items: center;
     /* A badge is a box, not a line of text. Set on the label's baseline, its
        own inset stood it 1.77 pixels above the label's line and the row grew
@@ -419,7 +419,7 @@
    * from a padding and a line — the sum measured 23.98 — and a flex box's
    * baseline is its words', so the row still aligns on it.
    */
-  [data-ui='field'] > [data-part='header'] > [data-part='action'] {
+  [data-ui-field] > [data-part-header] > [data-part-action] {
     --_rest: var(--slotted-field-action-color, var(--slotted-tone-accent-text, LinkText));
 
     align-items: center;
@@ -453,9 +453,9 @@
     unicode-bidi: plaintext;
   }
 
-  [data-ui='field']
-    > [data-part='header']
-    > [data-part='action']:not(:disabled, [aria-disabled='true']):hover {
+  [data-ui-field]
+    > [data-part-header]
+    > [data-part-action]:not(:disabled, [aria-disabled='true']):hover {
     color: var(
       --slotted-field-action-color-hover,
       color-mix(in oklab, var(--_rest) 65%, var(--slotted-text, CanvasText))
@@ -463,9 +463,9 @@
     text-decoration-color: currentColor;
   }
 
-  [data-ui='field']
-    > [data-part='header']
-    > [data-part='action']:not(:disabled, [aria-disabled='true']):active {
+  [data-ui-field]
+    > [data-part-header]
+    > [data-part-action]:not(:disabled, [aria-disabled='true']):active {
     color: var(
       --slotted-field-action-color-active,
       color-mix(in oklab, var(--_rest) 35%, var(--slotted-text, CanvasText))
@@ -473,15 +473,13 @@
     text-decoration-color: currentColor;
   }
 
-  [data-ui='field'] > [data-part='header'] > [data-part='action']:focus-visible {
+  [data-ui-field] > [data-part-header] > [data-part-action]:focus-visible {
     outline: var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);
     outline-offset: var(--slotted-focus-ring-offset, 2px);
     text-decoration-color: currentColor;
   }
 
-  [data-ui='field']
-    > [data-part='header']
-    > [data-part='action']:is(:disabled, [aria-disabled='true']) {
+  [data-ui-field] > [data-part-header] > [data-part-action]:is(:disabled, [aria-disabled='true']) {
     color: var(--slotted-disabled-foreground, GrayText);
     cursor: not-allowed;
   }
@@ -492,12 +490,12 @@
    * keeps its height and the ground and the ring stay the box a mouse sees.
    */
   @media (pointer: coarse) {
-    [data-ui='field'] > [data-part='header'] > [data-part='action'] {
+    [data-ui-field] > [data-part-header] > [data-part-action] {
       position: relative;
     }
 
-    [data-ui='field'] > [data-part='header'] > [data-part='help']::before,
-    [data-ui='field'] > [data-part='header'] > [data-part='action']::before {
+    [data-ui-field] > [data-part-header] > [data-part-help]::before,
+    [data-ui-field] > [data-part-header] > [data-part-action]::before {
       content: '';
       inset: min(0px, calc((100% - var(--slotted-target-comfortable, 44px)) / 2));
       position: absolute;
@@ -514,8 +512,8 @@
    * Tabular figures, because a counter that jitters as it counts is a counter
    * the eye follows instead of the field.
    */
-  [data-ui='field'] > [data-part='counter'],
-  [data-ui='field'] > [data-part='header'] > [data-part='counter'] {
+  [data-ui-field] > [data-part-counter],
+  [data-ui-field] > [data-part-header] > [data-part-counter] {
     color: var(--slotted-field-counter-color, var(--slotted-text-muted));
     font-size: var(--slotted-control-font-size-sm, 12px);
     font-variant-numeric: tabular-nums;
@@ -528,7 +526,7 @@
    * The counter the family draws on a field with no header: the end of the
    * label row, in the third track, apart from the label by the side gap.
    */
-  [data-ui='field'] > [data-part='counter'] {
+  [data-ui-field] > [data-part-counter] {
     align-self: end;
     grid-column: 3;
     grid-row: 1;
@@ -541,8 +539,8 @@
    * its maximum while validation has not yet run, and a counter that only turned
    * at submit would say nothing at the moment it is being read.
    */
-  [data-ui='field'] > [data-part='counter'][data-invalid],
-  [data-ui='field'] > [data-part='header'] > [data-part='counter'][data-invalid] {
+  [data-ui-field] > [data-part-counter][data-invalid],
+  [data-ui-field] > [data-part-header] > [data-part-counter][data-invalid] {
     color: var(--slotted-field-counter-invalid-color, var(--slotted-tone-danger-text));
     font-weight: var(--slotted-font-weight-medium, 500);
   }
@@ -560,7 +558,7 @@
    * form that renders its error unconditionally so nothing below it moves when
    * the error arrives.
    */
-  [data-ui='field'] > [data-ui='inline-message']:not([data-reserve]):has([data-part='text']:empty) {
+  [data-ui-field] > [data-ui-inline-message]:not([data-reserve]):has([data-part-text]:empty) {
     display: none;
   }
 
@@ -575,7 +573,7 @@
    * own root rule, which has the same two attributes; equal specificity would
    * leave the winner to stylesheet order.
    */
-  [data-ui='field'][data-part='root'] > [data-ui='inline-message'] {
+  [data-ui-field][data-part-root] > [data-ui-inline-message] {
     font-size: var(--slotted-font-size-xs, 0.75rem);
   }
 
@@ -586,8 +584,8 @@
    * size (`inline-message`, R5) and its own ink, and the weight is what makes
    * the two read as two kinds of sentence rather than one.
    */
-  [data-ui='field'][data-part='root'] > [data-ui='inline-message'][data-tone='danger'],
-  [data-ui='field'][data-part='root'] > [data-ui='inline-message'][data-tone='success'] {
+  [data-ui-field][data-part-root] > [data-ui-inline-message][data-tone='danger'],
+  [data-ui-field][data-part-root] > [data-ui-inline-message][data-tone='success'] {
     font-weight: var(--slotted-font-weight-medium, 500);
   }
 
@@ -618,7 +616,7 @@
      * and a label of three lines — or a header whose action wrapped under the
      * label — stretched a one-line input beside it to 43 pixels.
      */
-    [data-ui='field'][data-part='root'][data-label-placement='side'] > * {
+    [data-ui-field][data-part-root][data-label-placement='side'] > * {
       align-self: start;
       grid-column: 2 / 3;
     }
@@ -629,8 +627,8 @@
      * textarea four lines tall. `max()` keeps a label taller than its control —
      * three wrapped lines beside a 30-pixel input — from being pushed down.
      */
-    [data-ui='field'][data-part='root'][data-label-placement='side'] > [data-part='label'],
-    [data-ui='field'][data-part='root'][data-label-placement='side'] > [data-part='header'] {
+    [data-ui-field][data-part-root][data-label-placement='side'] > [data-part-label],
+    [data-ui-field][data-part-root][data-label-placement='side'] > [data-part-header] {
       grid-column: 1;
       grid-row: 1;
       padding-block-start: max(0px, calc((var(--_control-block-size) - 1lh) / 2));
@@ -644,7 +642,7 @@
      * control, where it sat until the header existed, was a second place. Restated inside the query because `> *` above is one selector
      * more specific than the counter's own rule.
      */
-    [data-ui='field'][data-part='root'][data-label-placement='side'] > [data-part='counter'] {
+    [data-ui-field][data-part-root][data-label-placement='side'] > [data-part-counter] {
       grid-column: 1;
       grid-row: 2;
       justify-self: end;
@@ -657,9 +655,9 @@
      * part of the name — `Assunto 12/60` — and it stood one line higher than
      * the counter a field without a header draws.
      */
-    [data-ui='field'][data-part='root'][data-label-placement='side']
-      > [data-part='header']
-      > [data-part='counter'] {
+    [data-ui-field][data-part-root][data-label-placement='side']
+      > [data-part-header]
+      > [data-part-counter] {
       flex-basis: 100%;
       margin-inline-start: 0;
       text-align: end;
@@ -675,20 +673,18 @@
    * The messages need no rule here. The field passes `disabled` to them, and
    * `inline-message` mutes itself to the same colour and stops its own ring.
    */
-  [data-ui='field'][data-part='root'][data-disabled] > [data-part='label'],
-  [data-ui='field'][data-part='root'][data-disabled] > [data-part='counter'],
-  [data-ui='field'][data-part='root'][data-disabled] > [data-part='header'] > [data-part='label'],
-  [data-ui='field'][data-part='root'][data-disabled]
-    > [data-part='header']
-    > [data-part='counter'] {
+  [data-ui-field][data-part-root][data-disabled] > [data-part-label],
+  [data-ui-field][data-part-root][data-disabled] > [data-part-counter],
+  [data-ui-field][data-part-root][data-disabled] > [data-part-header] > [data-part-label],
+  [data-ui-field][data-part-root][data-disabled] > [data-part-header] > [data-part-counter] {
     color: var(--slotted-disabled-foreground);
   }
 
-  [data-ui='field'][data-part='root'][data-disabled] > [data-part='label'] > [data-part='mark'],
-  [data-ui='field'][data-part='root'][data-disabled]
-    > [data-part='header']
-    > [data-part='label']
-    > [data-part='mark'] {
+  [data-ui-field][data-part-root][data-disabled] > [data-part-label] > [data-part-mark],
+  [data-ui-field][data-part-root][data-disabled]
+    > [data-part-header]
+    > [data-part-label]
+    > [data-part-mark] {
     color: var(--slotted-disabled-foreground);
   }
 
@@ -697,10 +693,10 @@
    * whose counter is over its limit paints the counter muted rather than red.
    * A control nobody can type in is not over a limit; it is off.
    */
-  [data-ui='field'][data-part='root'][data-disabled] > [data-part='counter'][data-invalid],
-  [data-ui='field'][data-part='root'][data-disabled]
-    > [data-part='header']
-    > [data-part='counter'][data-invalid] {
+  [data-ui-field][data-part-root][data-disabled] > [data-part-counter][data-invalid],
+  [data-ui-field][data-part-root][data-disabled]
+    > [data-part-header]
+    > [data-part-counter][data-invalid] {
     color: var(--slotted-disabled-foreground);
     font-weight: var(--slotted-font-weight-regular, 400);
   }

package/src/field-group/field-group.css

@@ -19,7 +19,7 @@
    * fields is a `content` element the family draws, and the legend never
    * competes with it.
    */
-  [data-ui='field-group'][data-part='root'] {
+  [data-ui-field-group][data-part-root] {
     --_font-size: var(--slotted-control-font-size-lg, 14px);
     /** Legend to its own description, and description to error. */
     --_message-gap: var(--slotted-field-group-message-gap, var(--slotted-space-2, 0.25rem));
@@ -45,18 +45,18 @@
   }
 
   /* Legend, then what is said about the set, then the set. */
-  [data-ui='field-group'][data-part='root'] > * + * {
+  [data-ui-field-group][data-part-root] > * + * {
     margin-block-start: var(--_message-gap);
   }
 
   /* `inline-message` zeroes its root's margin at the weight of the rule above,
      so the order the two stylesheets load in decided the gap; a third
      attribute decides it here. */
-  [data-ui='field-group'][data-part='root'] > * + [data-ui='inline-message'] {
+  [data-ui-field-group][data-part-root] > * + [data-ui-inline-message] {
     margin-block-start: var(--_message-gap);
   }
 
-  [data-ui='field-group'][data-part='root'] > [data-part='content'] {
+  [data-ui-field-group][data-part-root] > [data-part-content] {
     margin-block-start: var(--_content-gap);
   }
 
@@ -69,15 +69,15 @@
    * because a third type scale would be a fourth thing for a theme to retune.
    */
 
-  [data-ui='field-group'][data-part='root'][data-size='sm'] {
+  [data-ui-field-group][data-part-root][data-size='sm'] {
     --_font-size: var(--slotted-control-font-size-md, 13px);
   }
 
-  [data-ui='field-group'][data-part='root'][data-size='md'] {
+  [data-ui-field-group][data-part-root][data-size='md'] {
     --_font-size: var(--slotted-control-font-size-lg, 14px);
   }
 
-  [data-ui='field-group'][data-part='root'][data-size='lg'] {
+  [data-ui-field-group][data-part-root][data-size='lg'] {
     --_font-size: var(--slotted-control-font-size-lg, 14px);
   }
 
@@ -90,7 +90,7 @@
    * recommendation work: on a page asking one question, the legend contains the
    * page's `h1`, so a reader hears the question once rather than twice.
    */
-  [data-ui='field-group'] > [data-part='legend'] {
+  [data-ui-field-group] > [data-part-legend] {
     color: var(--slotted-field-group-legend-color, var(--slotted-text));
     display: block;
     font-size: var(--_font-size);
@@ -110,7 +110,7 @@
    * is. The glyph takes the danger ink and the words do not, which is the field
    * family's decision applied to the element one level up.
    */
-  [data-ui='field-group'] > [data-part='legend'] > [data-part='mark'] {
+  [data-ui-field-group] > [data-part-legend] > [data-part-mark] {
     color: var(--slotted-field-group-mark-color, var(--slotted-tone-danger-text));
     margin-inline-start: var(--slotted-field-group-mark-gap, var(--slotted-space-2, 0.25rem));
     overflow-wrap: normal;
@@ -131,7 +131,7 @@
    * `font: inherit` here would shrink every question page's title to the size
    * of a form label.
    */
-  [data-ui='field-group'] > [data-part='legend'] > :is(h1, h2, h3, h4, h5, h6) {
+  [data-ui-field-group] > [data-part-legend] > :is(h1, h2, h3, h4, h5, h6) {
     display: inline;
     font-family: var(
       --slotted-font-family-heading,
@@ -140,9 +140,9 @@
     margin: 0;
   }
 
-  [data-ui='field-group']:is([data-necessity='optional'], [data-necessity='words'])
-    > [data-part='legend']
-    > [data-part='mark'] {
+  [data-ui-field-group]:is([data-necessity='optional'], [data-necessity='words'])
+    > [data-part-legend]
+    > [data-part-mark] {
     color: var(--slotted-field-group-mark-text-color, var(--slotted-text-muted));
     font-size: var(--slotted-control-font-size-sm, 12px);
     font-weight: var(--slotted-font-weight-regular, 400);
@@ -154,8 +154,7 @@
    * below from moving when the error arrives. The same two rules the field
    * writes, because the group holds the same two messages.
    */
-  [data-ui='field-group']
-    > [data-ui='inline-message']:not([data-reserve]):has([data-part='text']:empty) {
+  [data-ui-field-group] > [data-ui-inline-message]:not([data-reserve]):has([data-part-text]:empty) {
     display: none;
   }
 
@@ -167,12 +166,12 @@
    * selector carries the root's part so it outweighs the message family's own
    * root rule, which has the same two attributes.
    */
-  [data-ui='field-group'][data-part='root'] > [data-ui='inline-message'] {
+  [data-ui-field-group][data-part-root] > [data-ui-inline-message] {
     font-size: var(--slotted-font-size-xs, 0.75rem);
   }
 
-  [data-ui='field-group'][data-part='root'] > [data-ui='inline-message'][data-tone='danger'],
-  [data-ui='field-group'][data-part='root'] > [data-ui='inline-message'][data-tone='success'] {
+  [data-ui-field-group][data-part-root] > [data-ui-inline-message][data-tone='danger'],
+  [data-ui-field-group][data-part-root] > [data-ui-inline-message][data-tone='success'] {
     font-weight: var(--slotted-font-weight-medium, 500);
   }
 
@@ -188,19 +187,19 @@
    * a scale: `14rem` holds a date, a document number or a short name at the `md`
    * step without the control clipping what is being typed into it.
    */
-  [data-ui='field-group'] > [data-part='content'] {
+  [data-ui-field-group] > [data-part-content] {
     display: flex;
     flex-direction: column;
     gap: var(--_field-gap);
     min-inline-size: 0;
   }
 
-  [data-ui='field-group'][data-orientation='horizontal'] > [data-part='content'] {
+  [data-ui-field-group][data-orientation='horizontal'] > [data-part-content] {
     flex-direction: row;
     flex-wrap: wrap;
   }
 
-  [data-ui='field-group'][data-orientation='horizontal'] > [data-part='content'] > * {
+  [data-ui-field-group][data-orientation='horizontal'] > [data-part-content] > * {
     flex: 1 1 var(--slotted-field-group-track-min, 14rem);
     min-inline-size: 0;
   }
@@ -217,10 +216,8 @@
    * disabled appearance at all, which is the defect
    * `docs/history/designs/2026-08-31-field-aware-controls-design.md` records.
    */
-  [data-ui='field-group'][data-part='root'][data-disabled] > [data-part='legend'],
-  [data-ui='field-group'][data-part='root'][data-disabled]
-    > [data-part='legend']
-    > [data-part='mark'] {
+  [data-ui-field-group][data-part-root][data-disabled] > [data-part-legend],
+  [data-ui-field-group][data-part-root][data-disabled] > [data-part-legend] > [data-part-mark] {
     color: var(--slotted-disabled-foreground);
   }
 }