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

package/src/avatar/avatar.css

@@ -17,7 +17,7 @@
    * proportion of that length rather than a scale of its own, which is the
    * reasoning `badge` used for the overhang of an anchored count.
    */
-  [data-ui='avatar'][data-part='root'] {
+  [data-ui-avatar][data-part-root] {
     /**
      * Tone. `secondary` reads the `solid-hover` step rather than `solid` for
      * the reason `badge` records: `secondary.solid` is the surface colour in
@@ -189,7 +189,7 @@
 
   /* ── Tone: which of the five semantic colours the name resolves to ─────── */
 
-  [data-ui='avatar'][data-part='root'][data-tone='accent'] {
+  [data-ui-avatar][data-part-root][data-tone='accent'] {
     --_solid: var(--slotted-tone-accent-solid);
     --_solid-edge: var(--slotted-tone-accent-solid);
     --_on-solid: var(--slotted-tone-accent-on-solid);
@@ -198,7 +198,7 @@
     --_text: var(--slotted-tone-accent-text);
   }
 
-  [data-ui='avatar'][data-part='root'][data-tone='success'] {
+  [data-ui-avatar][data-part-root][data-tone='success'] {
     --_solid: var(--slotted-tone-success-solid);
     --_solid-edge: var(--slotted-tone-success-solid);
     --_on-solid: var(--slotted-tone-success-on-solid);
@@ -207,7 +207,7 @@
     --_text: var(--slotted-tone-success-text);
   }
 
-  [data-ui='avatar'][data-part='root'][data-tone='warning'] {
+  [data-ui-avatar][data-part-root][data-tone='warning'] {
     --_solid: var(--slotted-tone-warning-solid);
     --_solid-edge: var(--slotted-tone-warning-solid);
     --_on-solid: var(--slotted-tone-warning-on-solid);
@@ -216,7 +216,7 @@
     --_text: var(--slotted-tone-warning-text);
   }
 
-  [data-ui='avatar'][data-part='root'][data-tone='danger'] {
+  [data-ui-avatar][data-part-root][data-tone='danger'] {
     --_solid: var(--slotted-tone-danger-solid);
     --_solid-edge: var(--slotted-tone-danger-solid);
     --_on-solid: var(--slotted-tone-danger-on-solid);
@@ -236,14 +236,14 @@
    * There is no `outline`: an avatar drawn as a ring around nothing is not an
    * avatar, and every one of the fourteen surveyed implementations fills.
    */
-  [data-ui='avatar'][data-part='root'][data-variant='soft'] {
+  [data-ui-avatar][data-part-root][data-variant='soft'] {
     --_ground: var(--_surface, ButtonFace);
 
     background-color: var(--_ground);
     color: var(--_text, ButtonText);
   }
 
-  [data-ui='avatar'][data-part='root'][data-variant='solid'] {
+  [data-ui-avatar][data-part-root][data-variant='solid'] {
     --_edge: var(--_solid-edge);
     --_ground: var(--_solid, ButtonFace);
 
@@ -265,29 +265,29 @@
    * Rounded to the pixel: a sixth of 64 is 10.67 and of 28 is 4.67, and a
    * fractional radius spreads the curve over partial pixels at every corner.
    */
-  [data-ui='avatar'][data-part='root'][data-shape='square'] {
+  [data-ui-avatar][data-part-root][data-shape='square'] {
     --_radius: var(--slotted-avatar-radius, round(nearest, calc(var(--_size) / 6), 1px));
   }
 
   /* ── Size ─────────────────────────────────────────────────────────────── */
 
-  [data-ui='avatar'][data-part='root'][data-size='xs'] {
+  [data-ui-avatar][data-part-root][data-size='xs'] {
     --slotted-avatar-size: var(--slotted-avatar-size-xs, 24px);
   }
 
-  [data-ui='avatar'][data-part='root'][data-size='sm'] {
+  [data-ui-avatar][data-part-root][data-size='sm'] {
     --slotted-avatar-size: var(--slotted-avatar-size-sm, 28px);
   }
 
-  [data-ui='avatar'][data-part='root'][data-size='md'] {
+  [data-ui-avatar][data-part-root][data-size='md'] {
     --slotted-avatar-size: var(--slotted-avatar-size-md, 36px);
   }
 
-  [data-ui='avatar'][data-part='root'][data-size='lg'] {
+  [data-ui-avatar][data-part-root][data-size='lg'] {
     --slotted-avatar-size: var(--slotted-avatar-size-lg, 48px);
   }
 
-  [data-ui='avatar'][data-part='root'][data-size='xl'] {
+  [data-ui-avatar][data-part-root][data-size='xl'] {
     --slotted-avatar-size: var(--slotted-avatar-size-xl, 64px);
   }
 
@@ -304,7 +304,7 @@
    * `prefers-reduced-motion` collapses the duration in the theme, and nothing
    * here loops.
    */
-  [data-ui='avatar'] [data-part='image'] {
+  [data-ui-avatar] [data-part-image] {
     block-size: 100%;
     border-radius: inherit;
     inline-size: 100%;
@@ -320,14 +320,14 @@
    * enters on the entering curve and, when a later request fails, leaves on the
    * exiting one. The fallback below is the mirror of it.
    */
-  [data-ui='avatar'][data-status='loaded'] [data-part='image'] {
+  [data-ui-avatar][data-status='loaded'] [data-part-image] {
     opacity: 1;
     transition-timing-function: var(--slotted-easing-enter);
   }
 
   /* ── What stands in for it ────────────────────────────────────────────── */
 
-  [data-ui='avatar'] [data-part='fallback'] {
+  [data-ui-avatar] [data-part-fallback] {
     /**
      * The last step of the fallback order, and the only artwork this family
      * owns. It is reached when there is no picture and no name to take
@@ -357,7 +357,7 @@
     transition: opacity var(--slotted-duration-short) var(--slotted-easing-enter);
   }
 
-  [data-ui='avatar'][data-status='loaded'] [data-part='fallback'] {
+  [data-ui-avatar][data-status='loaded'] [data-part-fallback] {
     /**
      * It leaves as the picture arrives rather than the instant the load
      * reports, so the two cross rather than flicker. It is still painted
@@ -394,7 +394,7 @@
    * family's own glyph as well, which is an icon and needs no line at all.
    */
   @supports (text-box: trim-both cap alphabetic) {
-    [data-ui='avatar'] [data-part='fallback']:not(:has(> *)) {
+    [data-ui-avatar] [data-part-fallback]:not(:has(> *)) {
       align-content: center;
       display: block;
       text-align: center;
@@ -413,7 +413,7 @@
    * resolve in the order `STATE_PRECEDENCE` declares with no selector weight
    * standing in for the order.
    */
-  [data-ui='avatar'][data-part='root'][data-status='loaded'] {
+  [data-ui-avatar][data-part-root][data-status='loaded'] {
     --_edge: var(--slotted-border-subtle, ButtonBorder);
   }
 
@@ -425,7 +425,7 @@
    * disabled foreground, which the theme holds against the disabled ground, and
    * the photograph loses its colour rather than its contrast.
    */
-  [data-ui='avatar'][data-part='root'][data-disabled] {
+  [data-ui-avatar][data-part-root][data-disabled] {
     --_solid: var(--slotted-disabled-background, Canvas);
     --_on-solid: var(--slotted-disabled-foreground, GrayText);
     --_surface: var(--slotted-disabled-background, Canvas);
@@ -440,7 +440,7 @@
    * has no photograph at all. Grey alone kept every luminance, which made a
    * deactivated portrait the strongest thing in a row of disabled avatars.
    */
-  [data-ui='avatar'][data-part='root'][data-disabled] [data-part='image'] {
+  [data-ui-avatar][data-part-root][data-disabled] [data-part-image] {
     filter: var(--slotted-avatar-disabled-image-filter, grayscale(1) opacity(0.5));
   }
 
@@ -456,9 +456,9 @@
    * A weak state held back for the stronger one: a disabled avatar answers no
    * hover, which is the rule that test exists to keep.
    */
-  [data-ui='avatar'][data-part='root']:any-link,
-  button[data-ui='avatar'][data-part='root'],
-  [data-ui='avatar'][data-part='root'][tabindex] {
+  [data-ui-avatar][data-part-root]:any-link,
+  button[data-ui-avatar][data-part-root],
+  [data-ui-avatar][data-part-root][tabindex] {
     cursor: pointer;
     /**
      * The target below hangs outside the box on purpose. A box whose content
@@ -492,9 +492,9 @@
    * Press exists because `render` makes the root a link or a button, and a
    * command that does not answer the press reads as one that did not register.
    */
-  [data-ui='avatar'][data-part='root']:any-link:not([data-disabled]):hover,
-  button[data-ui='avatar'][data-part='root']:not([data-disabled]):hover,
-  [data-ui='avatar'][data-part='root'][tabindex]:not([data-disabled]):hover {
+  [data-ui-avatar][data-part-root]:any-link:not([data-disabled]):hover,
+  button[data-ui-avatar][data-part-root]:not([data-disabled]):hover,
+  [data-ui-avatar][data-part-root][tabindex]:not([data-disabled]):hover {
     background-color: color-mix(
       in oklab,
       var(--_ground),
@@ -502,9 +502,9 @@
     );
   }
 
-  [data-ui='avatar'][data-part='root']:any-link:not([data-disabled]):active,
-  button[data-ui='avatar'][data-part='root']:not([data-disabled]):active,
-  [data-ui='avatar'][data-part='root'][tabindex]:not([data-disabled]):active {
+  [data-ui-avatar][data-part-root]:any-link:not([data-disabled]):active,
+  button[data-ui-avatar][data-part-root]:not([data-disabled]):active,
+  [data-ui-avatar][data-part-root][tabindex]:not([data-disabled]):active {
     background-color: color-mix(
       in oklab,
       var(--_ground),
@@ -525,17 +525,17 @@
    * declaration of the same token win without either file knowing the order
    * the other is loaded in.
    */
-  [data-ui='avatar'][data-status='loaded']:any-link:not([data-disabled]):hover,
-  button[data-ui='avatar'][data-status='loaded']:not([data-disabled]):hover,
-  [data-ui='avatar'][data-status='loaded'][tabindex]:not([data-disabled]):hover {
+  [data-ui-avatar][data-status='loaded']:any-link:not([data-disabled]):hover,
+  button[data-ui-avatar][data-status='loaded']:not([data-disabled]):hover,
+  [data-ui-avatar][data-status='loaded'][tabindex]:not([data-disabled]):hover {
     --_edge: var(--slotted-border-strong, CanvasText);
     --slotted-avatar-ring-width: var(--slotted-border-width-thin, 1px);
     --slotted-avatar-ring-color: var(--slotted-border-strong, CanvasText);
   }
 
-  [data-ui='avatar'][data-status='loaded']:any-link:not([data-disabled]):active,
-  button[data-ui='avatar'][data-status='loaded']:not([data-disabled]):active,
-  [data-ui='avatar'][data-status='loaded'][tabindex]:not([data-disabled]):active {
+  [data-ui-avatar][data-status='loaded']:any-link:not([data-disabled]):active,
+  button[data-ui-avatar][data-status='loaded']:not([data-disabled]):active,
+  [data-ui-avatar][data-status='loaded'][tabindex]:not([data-disabled]):active {
     --slotted-avatar-ring-width: var(--slotted-border-width-thick, 2px);
   }
 
@@ -544,7 +544,7 @@
    * on its own, and a ring that appears only where a family expects focus is a
    * ring that goes missing the first time a consumer makes one a link.
    */
-  [data-ui='avatar'][data-part='root']:focus-visible {
+  [data-ui-avatar][data-part-root]:focus-visible {
     outline: var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);
     outline-offset: var(--slotted-focus-ring-offset, 2px);
   }
@@ -570,9 +570,9 @@
    * Fluent ships a 16-pixel avatar and Atlassian a 16- and a 20-pixel one, and
    * both accept a click on it as it stands.
    */
-  [data-ui='avatar'][data-part='root']:any-link::after,
-  button[data-ui='avatar'][data-part='root']::after,
-  [data-ui='avatar'][data-part='root'][tabindex]::after {
+  [data-ui-avatar][data-part-root]:any-link::after,
+  button[data-ui-avatar][data-part-root]::after,
+  [data-ui-avatar][data-part-root][tabindex]::after {
     content: '';
     inset: min(0px, calc((100% - var(--slotted-target-min, 24px)) / 2));
     position: absolute;
@@ -591,7 +591,7 @@
    * photograph.
    */
   @media (forced-colors: active) {
-    [data-ui='avatar'][data-part='root'] {
+    [data-ui-avatar][data-part-root] {
       --_edge: currentColor;
     }
   }

package/src/avatar-group/avatar-group.css

@@ -12,7 +12,7 @@
    * the decision `button-group` already took for the same question: a second
    * way to name one thing is a second thing to get wrong.
    */
-  [data-ui='avatar-group'][data-part='root'] {
+  [data-ui-avatar-group][data-part-root] {
     /**
      * How much of a member the next one covers, as a fraction of its own box.
      * A proportion rather than a step of the space scale, because what has to
@@ -76,12 +76,12 @@
    * beside it drifts for a reason nobody can see in the markup. The same
    * decision `button-group` took.
    */
-  [data-ui='avatar-group'][data-part='root']:empty {
+  [data-ui-avatar-group][data-part-root]:empty {
     display: none;
   }
 
-  [data-ui='avatar-group'] [data-part='item'],
-  [data-ui='avatar-group'] [data-part='overflow'] {
+  [data-ui-avatar-group] [data-part-item],
+  [data-ui-avatar-group] [data-part-overflow] {
     display: flex;
     /* Not a stacking context: `z-index` stays `auto` so a member raised on
        hover rises above its neighbours rather than only inside its own item. */
@@ -95,30 +95,29 @@
    * curve of the state it arrives at, which is why the rest rule carries the
    * exit.
    */
-  [data-ui='avatar-group'][data-part='root'][data-layout='stack']
-    [data-ui='avatar'][data-part='root'] {
+  [data-ui-avatar-group][data-part-root][data-layout='stack'] [data-ui-avatar][data-part-root] {
     transition-timing-function: var(--slotted-easing-exit);
   }
 
   /* ── Size ─────────────────────────────────────────────────────────────── */
 
-  [data-ui='avatar-group'][data-part='root'][data-size='xs'] {
+  [data-ui-avatar-group][data-part-root][data-size='xs'] {
     --slotted-avatar-size: var(--slotted-avatar-size-xs, 24px);
   }
 
-  [data-ui='avatar-group'][data-part='root'][data-size='sm'] {
+  [data-ui-avatar-group][data-part-root][data-size='sm'] {
     --slotted-avatar-size: var(--slotted-avatar-size-sm, 28px);
   }
 
-  [data-ui='avatar-group'][data-part='root'][data-size='md'] {
+  [data-ui-avatar-group][data-part-root][data-size='md'] {
     --slotted-avatar-size: var(--slotted-avatar-size-md, 36px);
   }
 
-  [data-ui='avatar-group'][data-part='root'][data-size='lg'] {
+  [data-ui-avatar-group][data-part-root][data-size='lg'] {
     --slotted-avatar-size: var(--slotted-avatar-size-lg, 48px);
   }
 
-  [data-ui='avatar-group'][data-part='root'][data-size='xl'] {
+  [data-ui-avatar-group][data-part-root][data-size='xl'] {
     --slotted-avatar-size: var(--slotted-avatar-size-xl, 64px);
   }
 
@@ -132,7 +131,7 @@
    * Members are not wrapped: a stack that broke across two lines would leave
    * the last face of the first line overlapping nothing.
    */
-  [data-ui='avatar-group'][data-part='root'][data-layout='stack'] {
+  [data-ui-avatar-group][data-part-root][data-layout='stack'] {
     flex-wrap: nowrap;
   }
 
@@ -141,7 +140,7 @@
    * so the stack has one curve per face instead of a second thick ring layered
    * over every member.
    */
-  [data-ui='avatar-group'][data-part='root'][data-layout='stack'] > * + * {
+  [data-ui-avatar-group][data-part-root][data-layout='stack'] > * + * {
     /* Whole pixels: 0.28 of 36 is 10.08, which left every member after the
        first on a fractional x (50.92, 76.84, 102.77) and softened its edge. */
     margin-inline-start: calc(round(nearest, calc(var(--_size) * var(--_overlap)), 1px) * -1);
@@ -152,7 +151,7 @@
    * to go somewhere, and a group laid out apart has no stacking order to lose
    * by breaking.
    */
-  [data-ui='avatar-group'][data-part='root'][data-layout='spread'] {
+  [data-ui-avatar-group][data-part-root][data-layout='spread'] {
     flex-wrap: wrap;
     /**
      * A step of the space scale rather than a proportion of the avatar, because
@@ -206,8 +205,8 @@
    * neighbours keep the box they had at rest, in three schemes and three
    * densities.
    */
-  [data-ui='avatar-group'][data-layout='stack']
-    [data-ui='avatar'][data-part='root']:not([data-disabled]):hover {
+  [data-ui-avatar-group][data-layout='stack']
+    [data-ui-avatar][data-part-root]:not([data-disabled]):hover {
     --slotted-avatar-ring-width: var(--_raise-ring);
     --slotted-avatar-elevation: var(--_raise-shadow);
 
@@ -216,7 +215,7 @@
     transition-timing-function: var(--slotted-easing-enter);
   }
 
-  [data-ui='avatar-group'][data-layout='stack'] [data-ui='avatar'][data-part='root']:focus-visible {
+  [data-ui-avatar-group][data-layout='stack'] [data-ui-avatar][data-part-root]:focus-visible {
     z-index: 1;
     transform: translateY(var(--_raise-lift));
     transition-timing-function: var(--slotted-easing-enter);
@@ -227,8 +226,8 @@
    * translate and not a scale for the reason the lift is (R7), and it is a
    * different answer from the hover, which is the whole point of a press.
    */
-  [data-ui='avatar-group'][data-layout='stack']
-    [data-ui='avatar'][data-part='root']:not([data-disabled]):active {
+  [data-ui-avatar-group][data-layout='stack']
+    [data-ui-avatar][data-part-root]:not([data-disabled]):active {
     transform: translateY(calc(var(--_raise-lift) / 2));
   }
 
@@ -240,12 +239,12 @@
    * not move is a light source switching on.
    */
   @media (prefers-reduced-motion: reduce) {
-    [data-ui='avatar-group'][data-part='root'][data-layout='stack'] {
+    [data-ui-avatar-group][data-part-root][data-layout='stack'] {
       --_raise-lift: 0px;
       --_raise-shadow: 0 0 transparent;
     }
 
-    [data-ui='avatar-group'][data-layout='stack'] [data-ui='avatar'][data-part='root'] {
+    [data-ui-avatar-group][data-layout='stack'] [data-ui-avatar][data-part-root] {
       transition: none;
     }
   }
@@ -260,7 +259,7 @@
    * from jittering as the count crosses a power of ten, which is the same rule
    * `badge` applies to its own count.
    */
-  [data-ui='avatar-group'] [data-part='overflow'] [data-ui='avatar'][data-part='root'] {
+  [data-ui-avatar-group] [data-part-overflow] [data-ui-avatar][data-part-root] {
     --slotted-avatar-initials-size: round(nearest, calc(var(--_size) * 0.36), 1px);
 
     font-variant-numeric: tabular-nums;

package/src/badge/badge.css

@@ -16,7 +16,7 @@
    * that keeps an icon-only badge the same height as a text one, and the
    * minimum inline size that makes a one-figure pill a circle.
    */
-  [data-ui='badge'][data-part='root'] {
+  [data-ui-badge][data-part-root] {
     /**
      * Tone. The default is the one a badge carrying a value should speak in: a
      * badge with no tone stated is holding a number, not an opinion.
@@ -123,11 +123,11 @@
 
   /* ── Tone: which of the five semantic colours the badge speaks in ─────── */
 
-  [data-ui='badge'][data-part='root'][data-tone='secondary'] {
+  [data-ui-badge][data-part-root][data-tone='secondary'] {
     --_edge: var(--_border);
   }
 
-  [data-ui='badge'][data-part='root'][data-tone='accent'] {
+  [data-ui-badge][data-part-root][data-tone='accent'] {
     --_solid: var(--slotted-tone-accent-solid);
     --_on-solid: var(--slotted-tone-accent-on-solid);
     --_surface: var(--slotted-tone-accent-surface);
@@ -135,7 +135,7 @@
     --_text: var(--slotted-tone-accent-text);
   }
 
-  [data-ui='badge'][data-part='root'][data-tone='success'] {
+  [data-ui-badge][data-part-root][data-tone='success'] {
     --_solid: var(--slotted-tone-success-solid);
     --_on-solid: var(--slotted-tone-success-on-solid);
     --_surface: var(--slotted-tone-success-surface);
@@ -143,7 +143,7 @@
     --_text: var(--slotted-tone-success-text);
   }
 
-  [data-ui='badge'][data-part='root'][data-tone='warning'] {
+  [data-ui-badge][data-part-root][data-tone='warning'] {
     --_solid: var(--slotted-tone-warning-solid);
     --_on-solid: var(--slotted-tone-warning-on-solid);
     --_surface: var(--slotted-tone-warning-surface);
@@ -151,7 +151,7 @@
     --_text: var(--slotted-tone-warning-text);
   }
 
-  [data-ui='badge'][data-part='root'][data-tone='danger'] {
+  [data-ui-badge][data-part-root][data-tone='danger'] {
     --_solid: var(--slotted-tone-danger-solid);
     --_on-solid: var(--slotted-tone-danger-on-solid);
     --_surface: var(--slotted-tone-danger-surface);
@@ -180,19 +180,19 @@
    * border looks like and disagree about which of them should wear it.
    */
 
-  [data-ui='badge'][data-part='root'][data-variant='solid'] {
+  [data-ui-badge][data-part-root][data-variant='solid'] {
     background-color: var(--_solid, ButtonFace);
     border-color: var(--_edge, ButtonFace);
     color: var(--_on-solid, ButtonText);
   }
 
-  [data-ui='badge'][data-part='root'][data-variant='soft'] {
+  [data-ui-badge][data-part-root][data-variant='soft'] {
     background-color: var(--_surface, ButtonFace);
     border-color: var(--_border, ButtonBorder);
     color: var(--_text, ButtonText);
   }
 
-  [data-ui='badge'][data-part='root'][data-variant='outline'] {
+  [data-ui-badge][data-part-root][data-variant='outline'] {
     background-color: transparent;
     border-color: var(--_border, ButtonBorder);
     color: var(--_text, ButtonText);
@@ -200,7 +200,7 @@
 
   /* ── Size ─────────────────────────────────────────────────────────────── */
 
-  [data-ui='badge'][data-part='root'][data-size='sm'] {
+  [data-ui-badge][data-part-root][data-size='sm'] {
     --_font-size: var(--slotted-control-font-size-sm, 12px);
     /* `0px` rather than `0`: a unitless zero inside the `--_block-size` sum
        makes the whole calculation invalid, and `min-block-size` silently fell
@@ -216,7 +216,7 @@
    * a rounding error: a 12px badge and a 13px badge should not carry visibly
    * different glyphs.
    */
-  [data-ui='badge'][data-part='root'][data-size='lg'] {
+  [data-ui-badge][data-part-root][data-size='lg'] {
     --_font-size: var(--slotted-control-font-size-lg, 14px);
     --_icon-size: var(--slotted-control-icon-size-md, 16px);
     --_inset-block: var(--slotted-space-2, 0.25rem);
@@ -226,7 +226,7 @@
 
   /* ── Shape ────────────────────────────────────────────────────────────── */
 
-  [data-ui='badge'][data-part='root'][data-shape='square'] {
+  [data-ui-badge][data-part-root][data-shape='square'] {
     border-radius: var(--slotted-badge-radius, var(--slotted-radius-sm, 4px));
   }
 
@@ -244,7 +244,7 @@
    * A dot renders no value, so nothing is clipped. Text a consumer forces into
    * one overflows rather than disappearing.
    */
-  [data-ui='badge'][data-part='root'][data-shape='dot'] {
+  [data-ui-badge][data-part-root][data-shape='dot'] {
     block-size: var(--_dot-size);
     border-color: var(--slotted-badge-dot-border-color, var(--slotted-border-strong, CanvasText));
     border-radius: var(--slotted-radius-full, 9999px);
@@ -262,7 +262,7 @@
    * can make the root an `<a>` and a ring that appears only where a family
    * expects focus is a ring that goes missing.
    */
-  [data-ui='badge'][data-part='root']:focus-visible {
+  [data-ui-badge][data-part-root]:focus-visible {
     outline: var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);
     outline-offset: var(--slotted-focus-ring-offset, 2px);
   }
@@ -293,14 +293,14 @@
    * below its content inside the flex root, which is the condition
    * `text-overflow` needs to have anything to do.
    */
-  [data-ui='badge'] [data-part='label'] {
+  [data-ui-badge] [data-part-label] {
     min-inline-size: 0;
     overflow: hidden;
     text-overflow: ellipsis;
   }
 
   @supports (text-box: trim-both cap alphabetic) {
-    [data-ui='badge'] [data-part='label'] {
+    [data-ui-badge] [data-part-label] {
       /**
        * A descender and a tall diacritic both live outside a box trimmed to the
        * cap and the baseline, and `overflow: hidden` cut them off — visible in
@@ -323,8 +323,8 @@
    * from its container, and a bare glyph host such as `ng-icon` reads the
    * slot's font-size, so both are the glyph scale.
    */
-  [data-ui='badge'] [data-part='start'],
-  [data-ui='badge'] [data-part='end'] {
+  [data-ui-badge] [data-part-start],
+  [data-ui-badge] [data-part-end] {
     --slotted-icon-size: var(--_icon-size);
 
     align-items: center;
@@ -338,8 +338,8 @@
     line-height: 1;
   }
 
-  [data-ui='badge'] [data-part='start'] > *,
-  [data-ui='badge'] [data-part='end'] > * {
+  [data-ui-badge] [data-part-start] > *,
+  [data-ui-badge] [data-part-end] > * {
     block-size: 100%;
     display: block;
     inline-size: 100%;
@@ -358,7 +358,7 @@
    * frame is read in. Everything else — which corner, how far in from it — is
    * written in logical insets and mirrors on its own.
    */
-  [data-ui='badge'][data-part='anchor'] {
+  [data-ui-badge][data-part-anchor] {
     --_dir: 1;
     /* Half the badge's own size. A proportion of the box rather than a step of
        any scale, which is why it is geometry here and not a token. */
@@ -389,25 +389,25 @@
     vertical-align: middle;
   }
 
-  [data-ui='badge'][data-part='anchor']:dir(rtl) {
+  [data-ui-badge][data-part-anchor]:dir(rtl) {
     --_dir: -1;
   }
 
-  [data-ui='badge'][data-part='anchor'][data-overlap='circle'] {
+  [data-ui-badge][data-part-anchor][data-overlap='circle'] {
     --_anchor-inset: 14%;
   }
 
-  [data-ui='badge'][data-part='anchor'][data-placement='top-start'],
-  [data-ui='badge'][data-part='anchor'][data-placement='bottom-start'] {
+  [data-ui-badge][data-part-anchor][data-placement='top-start'],
+  [data-ui-badge][data-part-anchor][data-placement='bottom-start'] {
     --_overhang-inline: -50%;
   }
 
-  [data-ui='badge'][data-part='anchor'][data-placement='bottom-start'],
-  [data-ui='badge'][data-part='anchor'][data-placement='bottom-end'] {
+  [data-ui-badge][data-part-anchor][data-placement='bottom-start'],
+  [data-ui-badge][data-part-anchor][data-placement='bottom-end'] {
     --_overhang-block: 50%;
   }
 
-  [data-ui='badge'][data-part='anchor'] > [data-ui='badge'][data-part='root'] {
+  [data-ui-badge][data-part-anchor] > [data-ui-badge][data-part-root] {
     /**
      * The ring is what separates the badge from whatever it is sitting on.
      * It is a token rather than a boolean, because a badge inside a card, a
@@ -424,23 +424,23 @@
     z-index: 1;
   }
 
-  [data-ui='badge'][data-part='anchor'][data-placement='top-end'] > [data-part='root'],
-  [data-ui='badge'][data-part='anchor'][data-placement='top-start'] > [data-part='root'] {
+  [data-ui-badge][data-part-anchor][data-placement='top-end'] > [data-part-root],
+  [data-ui-badge][data-part-anchor][data-placement='top-start'] > [data-part-root] {
     inset-block-start: var(--_anchor-inset);
   }
 
-  [data-ui='badge'][data-part='anchor'][data-placement='bottom-end'] > [data-part='root'],
-  [data-ui='badge'][data-part='anchor'][data-placement='bottom-start'] > [data-part='root'] {
+  [data-ui-badge][data-part-anchor][data-placement='bottom-end'] > [data-part-root],
+  [data-ui-badge][data-part-anchor][data-placement='bottom-start'] > [data-part-root] {
     inset-block-end: var(--_anchor-inset);
   }
 
-  [data-ui='badge'][data-part='anchor'][data-placement='top-end'] > [data-part='root'],
-  [data-ui='badge'][data-part='anchor'][data-placement='bottom-end'] > [data-part='root'] {
+  [data-ui-badge][data-part-anchor][data-placement='top-end'] > [data-part-root],
+  [data-ui-badge][data-part-anchor][data-placement='bottom-end'] > [data-part-root] {
     inset-inline-end: var(--_anchor-inset);
   }
 
-  [data-ui='badge'][data-part='anchor'][data-placement='top-start'] > [data-part='root'],
-  [data-ui='badge'][data-part='anchor'][data-placement='bottom-start'] > [data-part='root'] {
+  [data-ui-badge][data-part-anchor][data-placement='top-start'] > [data-part-root],
+  [data-ui-badge][data-part-anchor][data-placement='bottom-start'] > [data-part-root] {
     inset-inline-start: var(--_anchor-inset);
   }
 
@@ -455,7 +455,7 @@
    * from the page.
    */
   @media (forced-colors: active) {
-    [data-ui='badge'][data-part='root'] {
+    [data-ui-badge][data-part-root] {
       border-color: currentColor;
     }
   }