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

package/src/radio-group/radio-group.css

@@ -16,7 +16,7 @@
    * `checkbox` itself, so a theme can move one without the other and neither
    * stylesheet depends on the other's selectors.
    */
-  [data-ui='radio-group'][data-part='root'] {
+  [data-ui-radio-group][data-part-root] {
     /**
      * The circle is the selection scale's, the same square `checkbox` draws
      * in: 16px at `md`, stated once by the theme and not moved by density.
@@ -61,7 +61,7 @@
    * it reads well at, and it is the same doubling the horizontal rule below
    * already applies.
    */
-  [data-ui='radio-group'][data-part='root']:has([data-part='description']) {
+  [data-ui-radio-group][data-part-root]:has([data-part-description]) {
     row-gap: var(--slotted-radio-group-gap, calc(var(--_gap) * 2));
   }
 
@@ -70,7 +70,7 @@
    * past the container is a row whose last option nobody can see, and a set of
    * options is not a scroll region.
    */
-  [data-ui='radio-group'][data-part='root'][data-orientation='horizontal'] {
+  [data-ui-radio-group][data-part-root][data-orientation='horizontal'] {
     flex-direction: row;
     flex-wrap: wrap;
     /** Twice the control gap: the distance between two choices has to read as
@@ -80,7 +80,7 @@
 
   /* ── Size ─────────────────────────────────────────────────────────────── */
 
-  [data-ui='radio-group'][data-part='root'][data-size='sm'] {
+  [data-ui-radio-group][data-part-root][data-size='sm'] {
     --_size: var(--slotted-radio-group-size, var(--slotted-selection-size-sm, 14px));
     --_font-size: var(--slotted-control-font-size-sm, 12px);
     --_gap: var(--slotted-control-gap-sm, 6px);
@@ -91,7 +91,7 @@
     );
   }
 
-  [data-ui='radio-group'][data-part='root'][data-size='md'] {
+  [data-ui-radio-group][data-part-root][data-size='md'] {
     --_size: var(--slotted-radio-group-size, var(--slotted-selection-size-md, 16px));
     --_font-size: var(--slotted-control-font-size-md, 13px);
     --_gap: var(--slotted-control-gap-md, 8px);
@@ -102,7 +102,7 @@
     );
   }
 
-  [data-ui='radio-group'][data-part='root'][data-size='lg'] {
+  [data-ui-radio-group][data-part-root][data-size='lg'] {
     --_size: var(--slotted-radio-group-size, var(--slotted-selection-size-lg, 18px));
     --_font-size: var(--slotted-control-font-size-lg, 14px);
     --_gap: var(--slotted-control-gap-lg, 8px);
@@ -115,7 +115,7 @@
 
   /* ── One item ─────────────────────────────────────────────────────────── */
 
-  [data-ui='radio-group'] [data-part='item'] {
+  [data-ui-radio-group] [data-part-item] {
     /* The rows are as tall as they read. Stretched, the description drifted
        away from the label it belongs to; the surplus is the container's. */
     align-content: start;
@@ -130,15 +130,15 @@
 
   /* The direction the halo and the target are placed in — the root's, not the
      label's, for the reason `checkbox` records. */
-  [data-ui='radio-group'][data-part='root'] {
+  [data-ui-radio-group][data-part-root] {
     --_direction: ltr;
   }
 
-  [data-ui='radio-group'][data-part='root']:dir(rtl) {
+  [data-ui-radio-group][data-part-root]:dir(rtl) {
     --_direction: rtl;
   }
 
-  [data-ui='radio-group'] [data-part='control'] {
+  [data-ui-radio-group] [data-part-control] {
     appearance: none;
     background-color: var(--slotted-radio-group-background, var(--slotted-surface, Canvas));
     /* The medium step in the strong border colour, as `checkbox` edges its
@@ -175,7 +175,7 @@
    * names the dot glyph as this part's mark, and the mark then enters with the
    * same growth `checkbox`'s does.
    */
-  [data-ui='radio-group'] [data-part='indicator'] {
+  [data-ui-radio-group] [data-part-indicator] {
     --slotted-icon-size: var(--_size);
 
     block-size: var(--_size);
@@ -195,12 +195,12 @@
       scale var(--slotted-duration-medium) var(--slotted-control-transition-easing);
   }
 
-  [data-ui='radio-group'] [data-part='control']:checked + [data-part='indicator'] {
+  [data-ui-radio-group] [data-part-control]:checked + [data-part-indicator] {
     opacity: 1;
     scale: 1;
   }
 
-  [data-ui='radio-group'] [data-part='label'] {
+  [data-ui-radio-group] [data-part-label] {
     cursor: pointer;
     grid-column: 2;
     grid-row: 1;
@@ -213,11 +213,11 @@
    * in Arabic inside a row in Portuguese put it on the far side, against
    * nothing, with the text against the control.
    */
-  [data-ui='radio-group'] [data-part='item']:has(> [data-part='label']) {
+  [data-ui-radio-group] [data-part-item]:has(> [data-part-label]) {
     column-gap: var(--_label-gap);
   }
 
-  [data-ui='radio-group'][data-part='root']:not([data-variant='tile']) [data-part='label'] {
+  [data-ui-radio-group][data-part-root]:not([data-variant='tile']) [data-part-label] {
     justify-self: start;
     position: relative;
   }
@@ -232,7 +232,7 @@
    * `high-contrast` (CK7). The tile has neither; its surface answers the
    * pointer.
    */
-  [data-ui='radio-group'][data-part='root']:not([data-variant='tile']) [data-part='label']::before {
+  [data-ui-radio-group][data-part-root]:not([data-variant='tile']) [data-part-label]::before {
     block-size: var(--_target);
     content: '';
     direction: var(--_direction);
@@ -245,7 +245,7 @@
     z-index: -1;
   }
 
-  [data-ui='radio-group'][data-part='root']:not([data-variant='tile']) [data-part='label']::after {
+  [data-ui-radio-group][data-part-root]:not([data-variant='tile']) [data-part-label]::after {
     background-color: var(--slotted-radio-group-halo-color, var(--slotted-tone-accent-text));
     border-radius: calc(var(--_size) / 2 + var(--_halo-spread));
     content: '';
@@ -263,12 +263,11 @@
   /* A label with nothing in it — the Angular binding renders one whether or
      not content is projected — has no text to wash, so the wash closes around
      the circle at the same distance on all four sides. */
-  [data-ui='radio-group'][data-part='root']:not([data-variant='tile'])
-    [data-part='label']:empty::after {
+  [data-ui-radio-group][data-part-root]:not([data-variant='tile']) [data-part-label]:empty::after {
     inset-inline-end: calc(var(--_label-gap) - var(--_halo-spread));
   }
 
-  [data-ui='radio-group'] [data-part='description'] {
+  [data-ui-radio-group] [data-part-description] {
     color: var(--slotted-radio-group-description-color, var(--slotted-text-muted, GrayText));
     font-size: var(
       --slotted-radio-group-description-font-size,
@@ -284,7 +283,7 @@
 
   /* ── Placement ────────────────────────────────────────────────────────── */
 
-  [data-ui='radio-group'][data-part='root'][data-label-placement='start'] [data-part='item'] {
+  [data-ui-radio-group][data-part-root][data-label-placement='start'] [data-part-item] {
     /**
      * `1fr` and not `max-content`, which was tried first and looked better in
      * one row than in five: `max-content` sizes each item's first column from
@@ -297,29 +296,26 @@
     grid-template-columns: minmax(0, 1fr) auto;
   }
 
-  [data-ui='radio-group'][data-part='root'][data-label-placement='start'] [data-part='control'],
-  [data-ui='radio-group'][data-part='root'][data-label-placement='start'] [data-part='indicator'] {
+  [data-ui-radio-group][data-part-root][data-label-placement='start'] [data-part-control],
+  [data-ui-radio-group][data-part-root][data-label-placement='start'] [data-part-indicator] {
     grid-area: 1 / 2;
   }
 
-  [data-ui='radio-group'][data-part='root'][data-label-placement='start'] [data-part='label'],
-  [data-ui='radio-group'][data-part='root'][data-label-placement='start']
-    [data-part='description'] {
+  [data-ui-radio-group][data-part-root][data-label-placement='start'] [data-part-label],
+  [data-ui-radio-group][data-part-root][data-label-placement='start'] [data-part-description] {
     grid-column: 1;
   }
 
-  [data-ui='radio-group'][data-part='root'][data-label-placement='start'] [data-part='label'] {
+  [data-ui-radio-group][data-part-root][data-label-placement='start'] [data-part-label] {
     justify-self: stretch;
   }
 
-  [data-ui='radio-group'][data-part='root'][data-label-placement='start']
-    [data-part='label']::before {
+  [data-ui-radio-group][data-part-root][data-label-placement='start'] [data-part-label]::before {
     inset-inline-end: calc(-1 * (var(--_size) + var(--_label-gap)));
     inset-inline-start: auto;
   }
 
-  [data-ui='radio-group'][data-part='root'][data-label-placement='start']
-    [data-part='label']::after {
+  [data-ui-radio-group][data-part-root][data-label-placement='start'] [data-part-label]::after {
     inset-inline-end: calc(-1 * (var(--_size) + var(--_label-gap) + var(--_halo-spread)));
     inset-inline-start: calc(-1.5 * var(--_halo-spread));
   }
@@ -331,22 +327,22 @@
    * `checkbox` gives, lit from the circle and from the label alike because
    * both are the one target.
    */
-  [data-ui='radio-group'][data-part='root']:not([data-readonly])
-    [data-part='control']:hover:not(:disabled) {
+  [data-ui-radio-group][data-part-root]:not([data-readonly])
+    [data-part-control]:hover:not(:disabled) {
     border-color: var(--slotted-radio-group-hover-border-color, var(--slotted-tone-accent-border));
   }
 
-  [data-ui='radio-group'][data-part='root']:not([data-readonly])
-    [data-part='control']:hover:not(:disabled)
-    ~ [data-part='label']::after,
-  [data-ui='radio-group'][data-part='root']:not([data-readonly])
-    [data-part='control']:not(:disabled)
-    ~ [data-part='label']:hover::after {
+  [data-ui-radio-group][data-part-root]:not([data-readonly])
+    [data-part-control]:hover:not(:disabled)
+    ~ [data-part-label]::after,
+  [data-ui-radio-group][data-part-root]:not([data-readonly])
+    [data-part-control]:not(:disabled)
+    ~ [data-part-label]:hover::after {
     opacity: var(--slotted-selection-halo-opacity, 0.12);
   }
 
-  [data-ui='radio-group'][data-part='root']:not([data-readonly])
-    [data-part='control']:active:not(:disabled) {
+  [data-ui-radio-group][data-part-root]:not([data-readonly])
+    [data-part-control]:active:not(:disabled) {
     background-color: var(
       --slotted-radio-group-active-background,
       var(--slotted-tone-accent-subtle-active)
@@ -359,32 +355,32 @@
    * what says chosen and a filled circle with a white dot is a checkbox with a
    * different corner.
    */
-  [data-ui='radio-group'] [data-part='control']:checked {
+  [data-ui-radio-group] [data-part-control]:checked {
     border-color: var(--slotted-radio-group-checked-border-color, var(--slotted-tone-accent-solid));
   }
 
-  [data-ui='radio-group'][data-part='root']:not([data-readonly])
-    [data-part='control']:checked:hover:not(:disabled) {
+  [data-ui-radio-group][data-part-root]:not([data-readonly])
+    [data-part-control]:checked:hover:not(:disabled) {
     border-color: var(
       --slotted-radio-group-checked-hover-border-color,
       var(--slotted-tone-accent-solid-hover)
     );
   }
 
-  [data-ui='radio-group'][data-part='root']:not([data-readonly])
-    [data-part='control']:checked:active:not(:disabled) {
+  [data-ui-radio-group][data-part-root]:not([data-readonly])
+    [data-part-control]:checked:active:not(:disabled) {
     border-color: var(
       --slotted-radio-group-checked-active-border-color,
       var(--slotted-tone-accent-solid-active)
     );
   }
 
-  [data-ui='radio-group'] [data-part='control']:focus-visible {
+  [data-ui-radio-group] [data-part-control]:focus-visible {
     outline: var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);
     outline-offset: var(--slotted-focus-ring-offset, 2px);
   }
 
-  [data-ui='radio-group'][data-part='root'][data-invalid] {
+  [data-ui-radio-group][data-part-root][data-invalid] {
     --slotted-focus-ring-color: var(
       --slotted-radio-group-invalid-focus-ring-color,
       var(--slotted-focus-ring-color-invalid, Highlight)
@@ -402,7 +398,7 @@
    * shadow does not. The box keeps its size, because the border box is what is
    * measured.
    */
-  [data-ui='radio-group'][data-part='root'][data-invalid] [data-part='control'] {
+  [data-ui-radio-group][data-part-root][data-invalid] [data-part-control] {
     border-width: calc(
       var(--slotted-radio-group-border-width, var(--slotted-border-width-medium, 1.5px)) +
         var(
@@ -416,16 +412,16 @@
     );
   }
 
-  [data-ui='radio-group'][data-part='root'][data-invalid] [data-part='control']:checked {
+  [data-ui-radio-group][data-part-root][data-invalid] [data-part-control]:checked {
     border-color: var(
       --slotted-radio-group-invalid-checked-border-color,
       var(--slotted-tone-danger-solid)
     );
   }
 
-  [data-ui='radio-group'][data-part='root'][data-invalid]
-    [data-part='control']:checked
-    + [data-part='indicator'] {
+  [data-ui-radio-group][data-part-root][data-invalid]
+    [data-part-control]:checked
+    + [data-part-indicator] {
     color: var(--slotted-radio-group-invalid-mark-color, var(--slotted-tone-danger-solid));
   }
 
@@ -434,12 +430,12 @@
    * unchosen options and the pointer say the value is not the reader's to move,
    * and the chosen one keeps its accent because the value is real.
    */
-  [data-ui='radio-group'][data-part='root'][data-readonly] [data-part='control'],
-  [data-ui='radio-group'][data-part='root'][data-readonly] [data-part='label'] {
+  [data-ui-radio-group][data-part-root][data-readonly] [data-part-control],
+  [data-ui-radio-group][data-part-root][data-readonly] [data-part-label] {
     cursor: default;
   }
 
-  [data-ui='radio-group'][data-part='root'][data-readonly] [data-part='control']:not(:checked) {
+  [data-ui-radio-group][data-part-root][data-readonly] [data-part-control]:not(:checked) {
     background-color: var(
       --slotted-radio-group-readonly-background,
       /**
@@ -452,8 +448,8 @@
     );
   }
 
-  [data-ui='radio-group'][data-part='root'][data-disabled] [data-part='control'],
-  [data-ui='radio-group'] [data-part='control']:disabled {
+  [data-ui-radio-group][data-part-root][data-disabled] [data-part-control],
+  [data-ui-radio-group] [data-part-control]:disabled {
     background-color: var(
       --slotted-radio-group-disabled-background,
       var(--slotted-disabled-background)
@@ -462,14 +458,14 @@
     cursor: not-allowed;
   }
 
-  [data-ui='radio-group'] [data-part='control']:disabled + [data-part='indicator'] {
+  [data-ui-radio-group] [data-part-control]:disabled + [data-part-indicator] {
     color: var(--slotted-radio-group-disabled-mark-color, var(--slotted-disabled-foreground));
   }
 
-  [data-ui='radio-group'][data-part='root'][data-disabled] [data-part='label'],
-  [data-ui='radio-group'][data-part='root'][data-disabled] [data-part='description'],
-  [data-ui='radio-group'] [data-part='control']:disabled ~ [data-part='label'],
-  [data-ui='radio-group'] [data-part='control']:disabled ~ [data-part='description'] {
+  [data-ui-radio-group][data-part-root][data-disabled] [data-part-label],
+  [data-ui-radio-group][data-part-root][data-disabled] [data-part-description],
+  [data-ui-radio-group] [data-part-control]:disabled ~ [data-part-label],
+  [data-ui-radio-group] [data-part-control]:disabled ~ [data-part-description] {
     color: var(--slotted-radio-group-disabled-color, var(--slotted-disabled-foreground));
     cursor: not-allowed;
   }
@@ -491,7 +487,7 @@
    * equal height is a `grid` around the items and nothing this family adds.
    */
 
-  [data-ui='radio-group'][data-part='root'][data-variant='tile'] [data-part='item'] {
+  [data-ui-radio-group][data-part-root][data-variant='tile'] [data-part-item] {
     /* The description sits one step nearer its label inside a frame, as
        `checkbox` keeps it (CK2). */
     --_description-gap: var(
@@ -528,7 +524,7 @@
    * a shadow is removed outright and a width is not. `card` draws its own edge
    * the same way and for the same two reasons.
    */
-  [data-ui='radio-group'][data-part='root'][data-variant='tile'] [data-part='item']::before {
+  [data-ui-radio-group][data-part-root][data-variant='tile'] [data-part-item]::before {
     border: calc(var(--_tile-edge-width) + var(--_tile-invalid-edge, 0px)) solid var(--_tile-edge);
     border-radius: inherit;
     content: '';
@@ -549,9 +545,9 @@
    * Anything a consumer raises above the surface sets `position: relative` on
    * itself, for the same reason a card's footer does.
    */
-  [data-ui='radio-group'][data-part='root'][data-variant='tile']
-    [data-part='item']
-    [data-part='label']::after {
+  [data-ui-radio-group][data-part-root][data-variant='tile']
+    [data-part-item]
+    [data-part-label]::after {
     content: '';
     inset: 0;
     position: absolute;
@@ -568,11 +564,11 @@
    * pointer made a tile look less chosen than it was.
    */
 
-  [data-ui='radio-group'][data-part='root'][data-variant='tile']:not([data-readonly]):not(
+  [data-ui-radio-group][data-part-root][data-variant='tile']:not([data-readonly]):not(
       [data-disabled]
     )
-    [data-part='item']:has([data-part='control']:not(:disabled)):not(
-      :has([data-part='control']:checked)
+    [data-part-item]:has([data-part-control]:not(:disabled)):not(
+      :has([data-part-control]:checked)
     ):hover {
     --_tile-surface: var(
       --slotted-radio-group-tile-hover-background,
@@ -584,11 +580,11 @@
     );
   }
 
-  [data-ui='radio-group'][data-part='root'][data-variant='tile']:not([data-readonly]):not(
+  [data-ui-radio-group][data-part-root][data-variant='tile']:not([data-readonly]):not(
       [data-disabled]
     )
-    [data-part='item']:has([data-part='control']:not(:disabled)):not(
-      :has([data-part='control']:checked)
+    [data-part-item]:has([data-part-control]:not(:disabled)):not(
+      :has([data-part-control]:checked)
     ):active {
     --_tile-surface: var(
       --slotted-radio-group-tile-active-background,
@@ -602,8 +598,8 @@
    * difference a reader has to look for across a row of five, and the tint
    * alone is a difference the `high-contrast` scheme flattens to nothing.
    */
-  [data-ui='radio-group'][data-part='root'][data-variant='tile']:not([data-readonly])
-    [data-part='item']:has([data-part='control']:checked) {
+  [data-ui-radio-group][data-part-root][data-variant='tile']:not([data-readonly])
+    [data-part-item]:has([data-part-control]:checked) {
     --_tile-edge: var(
       --slotted-radio-group-tile-checked-border-color,
       var(--slotted-tone-accent-solid)
@@ -617,8 +613,8 @@
    * value is real and stays visible, and a read-only set then reads as a set of
    * secondary grounds with one accent edge on the choice that was made.
    */
-  [data-ui='radio-group'][data-part='root'][data-variant='tile']:not([data-readonly])
-    [data-part='item']:has([data-part='control']:checked) {
+  [data-ui-radio-group][data-part-root][data-variant='tile']:not([data-readonly])
+    [data-part-item]:has([data-part-control]:checked) {
     --_tile-surface: var(
       --slotted-radio-group-tile-checked-background,
       var(--slotted-tone-accent-surface)
@@ -631,17 +627,17 @@
    * accent tone has below its solid, so a ground that moved would either not
    * move at all in `light` or land on the tint an unchosen hovered tile shows.
    */
-  [data-ui='radio-group'][data-part='root'][data-variant='tile']:not([data-readonly]):not(
+  [data-ui-radio-group][data-part-root][data-variant='tile']:not([data-readonly]):not(
       [data-disabled]
     )
-    [data-part='item']:has([data-part='control']:checked:not(:disabled)):hover {
+    [data-part-item]:has([data-part-control]:checked:not(:disabled)):hover {
     --_tile-edge: var(
       --slotted-radio-group-tile-checked-hover-border-color,
       var(--slotted-tone-accent-solid-hover)
     );
   }
 
-  [data-ui='radio-group'][data-part='root'][data-variant='tile'][data-invalid] [data-part='item'] {
+  [data-ui-radio-group][data-part-root][data-variant='tile'][data-invalid] [data-part-item] {
     --_tile-edge: var(
       --slotted-radio-group-tile-invalid-border-color,
       var(--slotted-tone-danger-border)
@@ -654,8 +650,8 @@
     );
   }
 
-  [data-ui='radio-group'][data-part='root'][data-variant='tile'][data-invalid]
-    [data-part='item']:has([data-part='control']:checked) {
+  [data-ui-radio-group][data-part-root][data-variant='tile'][data-invalid]
+    [data-part-item]:has([data-part-control]:checked) {
     --_tile-surface: var(
       --slotted-radio-group-tile-invalid-checked-background,
       var(--slotted-tone-danger-surface)
@@ -668,7 +664,7 @@
 
   /* Read-only keeps the ink and the tab stop; only the ground and the pointer
      say the value is not the reader's to move. */
-  [data-ui='radio-group'][data-part='root'][data-variant='tile'][data-readonly] [data-part='item'] {
+  [data-ui-radio-group][data-part-root][data-variant='tile'][data-readonly] [data-part-item] {
     --_tile-surface: var(
       --slotted-radio-group-tile-readonly-background,
       var(--slotted-tone-secondary-subtle-hover)
@@ -689,9 +685,9 @@
     cursor: default;
   }
 
-  [data-ui='radio-group'][data-part='root'][data-variant='tile'][data-disabled] [data-part='item'],
-  [data-ui='radio-group'][data-part='root'][data-variant='tile']
-    [data-part='item']:has([data-part='control']:disabled) {
+  [data-ui-radio-group][data-part-root][data-variant='tile'][data-disabled] [data-part-item],
+  [data-ui-radio-group][data-part-root][data-variant='tile']
+    [data-part-item]:has([data-part-control]:disabled) {
     --_tile-surface: var(
       --slotted-radio-group-tile-disabled-background,
       var(--slotted-disabled-background)
@@ -711,14 +707,13 @@
    * left a ring around a sixteen-pixel circle inside a ring around the whole
    * surface, which reads as two controls.
    */
-  [data-ui='radio-group'][data-part='root'][data-variant='tile']
-    [data-part='item']:has([data-part='control']:focus-visible) {
+  [data-ui-radio-group][data-part-root][data-variant='tile']
+    [data-part-item]:has([data-part-control]:focus-visible) {
     outline: var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);
     outline-offset: var(--slotted-focus-ring-offset, 2px);
   }
 
-  [data-ui='radio-group'][data-part='root'][data-variant='tile']
-    [data-part='control']:focus-visible {
+  [data-ui-radio-group][data-part-root][data-variant='tile'] [data-part-control]:focus-visible {
     outline: none;
   }
 
@@ -728,17 +723,17 @@
    * `color`, so the dot would vanish into the circle it is drawn in. Restated in system colours, as `checkbox` restates the same pair.
    */
   @media (forced-colors: active) {
-    [data-ui='radio-group'] [data-part='control'] {
+    [data-ui-radio-group] [data-part-control] {
       background-color: Field;
       border-color: FieldText;
     }
 
-    [data-ui='radio-group'] [data-part='control']:checked {
+    [data-ui-radio-group] [data-part-control]:checked {
       background-color: Field;
       border-color: Highlight;
     }
 
-    [data-ui='radio-group'] [data-part='control']:checked + [data-part='indicator'] {
+    [data-ui-radio-group] [data-part-control]:checked + [data-part-indicator] {
       color: Highlight;
     }
 
@@ -749,29 +744,29 @@
      * `Highlight` as for a valid option, and the wider invalid edge takes
      * `CanvasText`, as does a tile's invalid edge.
      */
-    [data-ui='radio-group'][data-part='root'][data-invalid] [data-part='control']:checked {
+    [data-ui-radio-group][data-part-root][data-invalid] [data-part-control]:checked {
       background-color: Field;
       border-color: CanvasText;
     }
 
-    [data-ui='radio-group'][data-part='root'][data-invalid]
-      [data-part='control']:checked
-      + [data-part='indicator'] {
+    [data-ui-radio-group][data-part-root][data-invalid]
+      [data-part-control]:checked
+      + [data-part-indicator] {
       color: Highlight;
     }
 
-    [data-ui='radio-group'][data-part='root'][data-variant='tile'][data-invalid] [data-part='item'],
-    [data-ui='radio-group'][data-part='root'][data-variant='tile'][data-invalid]
-      [data-part='item']:has([data-part='control']:checked) {
+    [data-ui-radio-group][data-part-root][data-variant='tile'][data-invalid] [data-part-item],
+    [data-ui-radio-group][data-part-root][data-variant='tile'][data-invalid]
+      [data-part-item]:has([data-part-control]:checked) {
       --_tile-edge: CanvasText;
     }
 
-    [data-ui='radio-group'] [data-part='control']:disabled {
+    [data-ui-radio-group] [data-part-control]:disabled {
       background-color: Field;
       border-color: GrayText;
     }
 
-    [data-ui='radio-group'] [data-part='control']:disabled + [data-part='indicator'] {
+    [data-ui-radio-group] [data-part-control]:disabled + [data-part-indicator] {
       color: GrayText;
     }
   }