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

package/src/form/form.css

@@ -14,10 +14,10 @@
    * Both stand anywhere inside the form, and so do other families' parts of
    * the same names — a `table`'s summary row, a `section`'s actions. The two
    * carry the family's identifier, and every rule names them by it: a rule
-   * that reached `[data-part='summary']` as any descendant painted a table's
+   * that reached `[data-part-summary]` as any descendant painted a table's
    * totals as an error panel.
    */
-  [data-ui='form'][data-part='root'] {
+  [data-ui-form][data-part-root] {
     --_font-size: var(--slotted-control-font-size-md, 13px);
 
     /**
@@ -48,7 +48,7 @@
    * with `aria-busy`, because the pointer is where a reader who just pressed
    * the button already is.
    */
-  [data-ui='form'][data-part='root'][data-loading] {
+  [data-ui-form][data-part-root][data-loading] {
     cursor: progress;
   }
 
@@ -63,7 +63,7 @@
    * they read it. The tone tokens are the theme's, so the panel answers the
    * scheme switch instead of being a red box that turns black.
    */
-  [data-ui='form'][data-part='summary'] {
+  [data-ui-form][data-part-summary] {
     background-color: var(--slotted-form-summary-background, var(--slotted-tone-danger-surface));
     border: var(--slotted-control-border-width, 1px) solid
       var(--slotted-form-summary-border-color, var(--slotted-tone-danger-border));
@@ -88,12 +88,12 @@
    * announced, and the ring is the family's own: a `tabindex="-1"` target that
    * showed nothing on focus would move a reader somewhere they cannot see.
    */
-  [data-ui='form'][data-part='summary']:focus-visible {
+  [data-ui-form][data-part-summary]: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='form'][data-part='summary'] > [data-part='summary-title'] {
+  [data-ui-form][data-part-summary] > [data-part-summary-title] {
     font-family: var(
       --slotted-font-family-heading,
       var(--slotted-font-family-sans, ui-sans-serif, system-ui, sans-serif)
@@ -104,7 +104,7 @@
     margin: 0;
   }
 
-  [data-ui='form'][data-part='summary'] > [data-part='summary-list'] {
+  [data-ui-form][data-part-summary] > [data-part-summary-list] {
     display: flex;
     flex-direction: column;
     gap: var(--slotted-space-2, 0.25rem);
@@ -130,26 +130,23 @@
     padding-inline-start: 0;
   }
 
-  [data-ui='form'][data-part='summary']
-    > [data-part='summary-list']
-    > li
-    > [data-part='summary-item'] {
+  [data-ui-form][data-part-summary] > [data-part-summary-list] > li > [data-part-summary-item] {
     color: inherit;
     text-decoration-line: underline;
     text-underline-offset: var(--slotted-space-1, 0.125rem);
   }
 
-  [data-ui='form'][data-part='summary']
-    > [data-part='summary-list']
+  [data-ui-form][data-part-summary]
+    > [data-part-summary-list]
     > li
-    > [data-part='summary-item']:hover:not(:disabled) {
+    > [data-part-summary-item]:hover:not(:disabled) {
     text-decoration-thickness: var(--slotted-border-width-thick, 2px);
   }
 
-  [data-ui='form'][data-part='summary']
-    > [data-part='summary-list']
+  [data-ui-form][data-part-summary]
+    > [data-part-summary-list]
     > li
-    > [data-part='summary-item']:focus-visible {
+    > [data-part-summary-item]:focus-visible {
     border-radius: var(--slotted-radius-xs, 2px);
     outline: var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);
     outline-offset: var(--slotted-focus-ring-offset, 2px);
@@ -162,7 +159,7 @@
    * forbids a custom property in a container condition, which
    * `docs/token-foundation.md` rule 4 records.
    */
-  [data-ui='form'][data-part='actions'] {
+  [data-ui-form][data-part-actions] {
     display: flex;
     flex-wrap: wrap;
     gap: var(--slotted-space-4, 0.5rem);
@@ -170,15 +167,15 @@
     margin-block-start: var(--slotted-space-8, 1.5rem);
   }
 
-  [data-ui='form'][data-part='actions'][data-align='start'] {
+  [data-ui-form][data-part-actions][data-align='start'] {
     justify-content: flex-start;
   }
 
-  [data-ui='form'][data-part='actions'][data-align='between'] {
+  [data-ui-form][data-part-actions][data-align='between'] {
     justify-content: space-between;
   }
 
-  [data-ui='form'][data-part='actions'][data-align='stretch'] > * {
+  [data-ui-form][data-part-actions][data-align='stretch'] > * {
     flex: 1 1 0;
   }
 
@@ -194,11 +191,11 @@
    * action they came to take belongs first.
    */
   @container slotted-form (max-width: 360px) {
-    [data-ui='form'][data-part='actions'] {
+    [data-ui-form][data-part-actions] {
       flex-direction: column-reverse;
     }
 
-    [data-ui='form'][data-part='actions'] > * {
+    [data-ui-form][data-part-actions] > * {
       inline-size: 100%;
     }
   }
@@ -210,7 +207,7 @@
    * panel with nothing but its border.
    */
   @media (forced-colors: active) {
-    [data-ui='form'][data-part='summary'] {
+    [data-ui-form][data-part-summary] {
       border-color: CanvasText;
       border-inline-start-color: Highlight;
     }

package/src/fullscreen/fullscreen.css

@@ -21,7 +21,7 @@
    * browser, an iframe without `allow="fullscreen"`, a refused request. The
    * two ways are one component; only `data-mode` tells them apart.
    */
-  [data-ui='fullscreen'][data-part='root'][data-fullscreen] {
+  [data-ui-fullscreen][data-part-root][data-fullscreen] {
     /* The region is the viewport in full screen, so the viewport is what the
        inset answers: the page step on a desktop, down to the small step on a
        phone, where twenty-four pixels a side is an eighth of the width. */
@@ -75,7 +75,7 @@
    * (the automatic minimum of a flex item), so content taller than the screen
    * still scrolls in the region.
    */
-  [data-ui='fullscreen'][data-part='root'][data-fullscreen] {
+  [data-ui-fullscreen][data-part-root][data-fullscreen] {
     display: flex;
     flex-direction: column;
   }
@@ -95,8 +95,7 @@
    * full screen; a descendant selector on the part alone turned an open list
    * into a grid. A flex share only reaches a direct child in any case.
    */
-  [data-ui='fullscreen'][data-part='root'][data-fullscreen]
-    > [data-ui='fullscreen'][data-part='content'] {
+  [data-ui-fullscreen][data-part-root][data-fullscreen] > [data-ui-fullscreen][data-part-content] {
     display: grid;
     flex: 1 0 auto;
     grid-template-columns: minmax(0, 1fr);
@@ -115,9 +114,9 @@
    * menu opened, and the panel would drop to its own height under it. The
    * root is always appended last.
    */
-  [data-ui='fullscreen'][data-part='root'][data-fullscreen]
+  [data-ui-fullscreen][data-part-root][data-fullscreen]
     > :first-child:is(:last-child, :has(+ [data-slotted-portal]:last-child)):not(
-      [data-part='trigger'],
+      [data-part-trigger],
       img,
       video,
       canvas
@@ -131,7 +130,7 @@
    * gives a video in full screen. It may shrink below its natural height,
    * which a photograph taller than the screen has to.
    */
-  [data-ui='fullscreen'][data-part='root'][data-fullscreen]
+  [data-ui-fullscreen][data-part-root][data-fullscreen]
     > :is(img, video, canvas):first-child:is(
       :last-child,
       :has(+ [data-slotted-portal]:last-child)
@@ -142,7 +141,7 @@
     object-fit: contain;
   }
 
-  [data-ui='fullscreen'][data-part='root']::backdrop {
+  [data-ui-fullscreen][data-part-root]::backdrop {
     background-color: var(--slotted-fullscreen-surface, var(--slotted-surface, Canvas));
   }
 
@@ -161,7 +160,7 @@
    * page and never covered it. Nothing else here is `!important` — the ground,
    * the edge and the inset stay the consumer's to change in full screen.
    */
-  [data-ui='fullscreen'][data-part='root'][data-mode='layout'] {
+  [data-ui-fullscreen][data-part-root][data-mode='layout'] {
     animation: slotted-fullscreen-enter var(--slotted-duration-short) var(--slotted-easing-enter);
     block-size: auto !important;
     inline-size: auto !important;
@@ -199,7 +198,7 @@
    * control scale's, the same box `toggle` and `button` stand in, so the
    * control sits in a toolbar beside them without a pixel of difference.
    */
-  [data-ui='fullscreen'][data-part='trigger'] {
+  [data-ui-fullscreen][data-part-trigger] {
     --_height: var(--slotted-control-height-md, 34px);
     --_padding-inline: var(--slotted-control-padding-inline-md, 13px);
     --_font-size: var(--slotted-control-font-size-md, 13px);
@@ -247,7 +246,7 @@
 
   /* ── Size ─────────────────────────────────────────────────────────────── */
 
-  [data-ui='fullscreen'][data-part='trigger'][data-size='sm'] {
+  [data-ui-fullscreen][data-part-trigger][data-size='sm'] {
     --_height: var(--slotted-control-height-sm, 30px);
     --_padding-inline: var(--slotted-control-padding-inline-sm, 10px);
     --_font-size: var(--slotted-control-font-size-sm, 12px);
@@ -255,7 +254,7 @@
     --_gap: var(--slotted-control-gap-sm, 6px);
   }
 
-  [data-ui='fullscreen'][data-part='trigger'][data-size='lg'] {
+  [data-ui-fullscreen][data-part-trigger][data-size='lg'] {
     --_height: var(--slotted-control-height-lg, 38px);
     --_padding-inline: var(--slotted-control-padding-inline-lg, 16px);
     --_font-size: var(--slotted-control-font-size-lg, 14px);
@@ -271,7 +270,7 @@
    * consumer's icon placed in its stead, each at the control's icon step and
    * in the host's ink.
    */
-  [data-ui='fullscreen'] [data-part='icon'] {
+  [data-ui-fullscreen] [data-part-icon] {
     --slotted-icon-size: var(--_icon-size);
 
     block-size: var(--_icon-size);
@@ -281,7 +280,7 @@
     inline-size: var(--_icon-size);
   }
 
-  [data-ui='fullscreen'] [data-part='icon'] > * {
+  [data-ui-fullscreen] [data-part-icon] > * {
     block-size: 100%;
     display: block;
     inline-size: 100%;
@@ -292,7 +291,7 @@
    * container is shorter than a translated label; the string stays whole in
    * the DOM and in the accessible name.
    */
-  [data-ui='fullscreen'] [data-part='label'] {
+  [data-ui-fullscreen] [data-part-label] {
     min-inline-size: 0;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -304,12 +303,12 @@
    * reader. The label is visually hidden rather than removed, which keeps
    * the accessible name the label the state gives it.
    */
-  [data-ui='fullscreen'][data-part='trigger'][data-icon-only] {
+  [data-ui-fullscreen][data-part-trigger][data-icon-only] {
     inline-size: var(--_height);
     padding-inline: 0;
   }
 
-  [data-ui='fullscreen'][data-part='trigger'][data-icon-only] [data-part='label'] {
+  [data-ui-fullscreen][data-part-trigger][data-icon-only] [data-part-label] {
     block-size: 1px;
     clip-path: inset(50%);
     inline-size: 1px;
@@ -326,7 +325,7 @@
    * screen needs its own ground, or the edge is all that separates the words
    * from what is behind them.
    */
-  [data-ui='fullscreen'][data-part='trigger'][data-variant='outline'] {
+  [data-ui-fullscreen][data-part-trigger][data-variant='outline'] {
     background-color: var(--slotted-control-surface, ButtonFace);
     border-color: var(
       --slotted-fullscreen-trigger-border-color,
@@ -337,14 +336,14 @@
 
   /* ── Hover and press, held back for disabled ─────────────────────────── */
 
-  [data-ui='fullscreen'][data-part='trigger']:hover:not(:disabled):not([data-disabled]) {
+  [data-ui-fullscreen][data-part-trigger]:hover:not(:disabled):not([data-disabled]) {
     background-color: var(
       --slotted-fullscreen-trigger-hover-background,
       var(--slotted-tone-secondary-subtle-hover, ButtonFace)
     );
   }
 
-  [data-ui='fullscreen'][data-part='trigger']:active:not(:disabled):not([data-disabled]) {
+  [data-ui-fullscreen][data-part-trigger]:active:not(:disabled):not([data-disabled]) {
     background-color: var(
       --slotted-fullscreen-trigger-active-background,
       var(--slotted-tone-secondary-subtle-active, ButtonFace)
@@ -354,22 +353,22 @@
 
   /* ── Focus ────────────────────────────────────────────────────────────── */
 
-  [data-ui='fullscreen'][data-part='trigger']:focus-visible {
+  [data-ui-fullscreen][data-part-trigger]:focus-visible {
     outline: var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);
     outline-offset: var(--slotted-focus-ring-offset, 2px);
   }
 
   /* ── Disabled ─────────────────────────────────────────────────────────── */
 
-  [data-ui='fullscreen'][data-part='trigger']:disabled,
-  [data-ui='fullscreen'][data-part='trigger'][data-disabled] {
+  [data-ui-fullscreen][data-part-trigger]:disabled,
+  [data-ui-fullscreen][data-part-trigger][data-disabled] {
     background-color: transparent;
     color: var(--slotted-disabled-foreground, GrayText);
     cursor: not-allowed;
   }
 
-  [data-ui='fullscreen'][data-part='trigger'][data-variant='outline']:disabled,
-  [data-ui='fullscreen'][data-part='trigger'][data-variant='outline'][data-disabled] {
+  [data-ui-fullscreen][data-part-trigger][data-variant='outline']:disabled,
+  [data-ui-fullscreen][data-part-trigger][data-variant='outline'][data-disabled] {
     border-color: var(--slotted-disabled-border, GrayText);
     box-shadow: none;
   }

package/src/grid/grid.css

@@ -12,7 +12,7 @@
    * `auto-fit` is used here so a single child fills the row rather than sitting
    * alone at its minimum.
    */
-  [data-ui='grid'] {
+  [data-ui-grid] {
     --_gap: var(--slotted-space-6, 1rem);
     --_min-item: var(--slotted-grid-min-item-width-md, 16rem);
 
@@ -37,7 +37,7 @@
    * `auto-fill` is used here so two children in a three-column grid occupy two
    * thirds of it rather than stretching across the whole row.
    */
-  [data-ui='grid'][data-columns] {
+  [data-ui-grid][data-columns] {
     grid-template-columns: repeat(
       auto-fill,
       minmax(
@@ -55,55 +55,55 @@
   }
 
   /* Separation is a step on the scale, never a length the consumer states. */
-  [data-ui='grid'][data-gap='0'] {
+  [data-ui-grid][data-gap='0'] {
     --_gap: 0;
   }
 
-  [data-ui='grid'][data-gap='1'] {
+  [data-ui-grid][data-gap='1'] {
     --_gap: var(--slotted-space-1, 0.125rem);
   }
 
-  [data-ui='grid'][data-gap='2'] {
+  [data-ui-grid][data-gap='2'] {
     --_gap: var(--slotted-space-2, 0.25rem);
   }
 
-  [data-ui='grid'][data-gap='3'] {
+  [data-ui-grid][data-gap='3'] {
     --_gap: var(--slotted-space-3, 0.375rem);
   }
 
-  [data-ui='grid'][data-gap='4'] {
+  [data-ui-grid][data-gap='4'] {
     --_gap: var(--slotted-space-4, 0.5rem);
   }
 
-  [data-ui='grid'][data-gap='5'] {
+  [data-ui-grid][data-gap='5'] {
     --_gap: var(--slotted-space-5, 0.75rem);
   }
 
-  [data-ui='grid'][data-gap='6'] {
+  [data-ui-grid][data-gap='6'] {
     --_gap: var(--slotted-space-6, 1rem);
   }
 
-  [data-ui='grid'][data-gap='7'] {
+  [data-ui-grid][data-gap='7'] {
     --_gap: var(--slotted-space-7, 1.25rem);
   }
 
-  [data-ui='grid'][data-gap='8'] {
+  [data-ui-grid][data-gap='8'] {
     --_gap: var(--slotted-space-8, 1.5rem);
   }
 
-  [data-ui='grid'][data-gap='9'] {
+  [data-ui-grid][data-gap='9'] {
     --_gap: var(--slotted-space-9, 2rem);
   }
 
-  [data-ui='grid'][data-gap='10'] {
+  [data-ui-grid][data-gap='10'] {
     --_gap: var(--slotted-space-10, 2.5rem);
   }
 
-  [data-ui='grid'][data-gap='11'] {
+  [data-ui-grid][data-gap='11'] {
     --_gap: var(--slotted-space-11, 3rem);
   }
 
-  [data-ui='grid'][data-gap='12'] {
+  [data-ui-grid][data-gap='12'] {
     --_gap: var(--slotted-space-12, 4rem);
   }
 
@@ -113,23 +113,23 @@
    * these are cell minima rather than reading measure, which `container` owns.
    * A theme retunes any of them through its token.
    */
-  [data-ui='grid'][data-min-item-width='xs'] {
+  [data-ui-grid][data-min-item-width='xs'] {
     --_min-item: var(--slotted-grid-min-item-width-xs, 8rem);
   }
 
-  [data-ui='grid'][data-min-item-width='sm'] {
+  [data-ui-grid][data-min-item-width='sm'] {
     --_min-item: var(--slotted-grid-min-item-width-sm, 12rem);
   }
 
-  [data-ui='grid'][data-min-item-width='md'] {
+  [data-ui-grid][data-min-item-width='md'] {
     --_min-item: var(--slotted-grid-min-item-width-md, 16rem);
   }
 
-  [data-ui='grid'][data-min-item-width='lg'] {
+  [data-ui-grid][data-min-item-width='lg'] {
     --_min-item: var(--slotted-grid-min-item-width-lg, 20rem);
   }
 
-  [data-ui='grid'][data-min-item-width='xl'] {
+  [data-ui-grid][data-min-item-width='xl'] {
     --_min-item: var(--slotted-grid-min-item-width-xl, 24rem);
   }
 
@@ -139,35 +139,35 @@
    * distributes tracks: the tracks already fill the row, so there is nothing
    * between them to distribute.
    */
-  [data-ui='grid'][data-align='start'] {
+  [data-ui-grid][data-align='start'] {
     align-items: start;
   }
 
-  [data-ui='grid'][data-align='center'] {
+  [data-ui-grid][data-align='center'] {
     align-items: center;
   }
 
-  [data-ui='grid'][data-align='end'] {
+  [data-ui-grid][data-align='end'] {
     align-items: end;
   }
 
-  [data-ui='grid'][data-align='stretch'] {
+  [data-ui-grid][data-align='stretch'] {
     align-items: stretch;
   }
 
-  [data-ui='grid'][data-justify='start'] {
+  [data-ui-grid][data-justify='start'] {
     justify-items: start;
   }
 
-  [data-ui='grid'][data-justify='center'] {
+  [data-ui-grid][data-justify='center'] {
     justify-items: center;
   }
 
-  [data-ui='grid'][data-justify='end'] {
+  [data-ui-grid][data-justify='end'] {
     justify-items: end;
   }
 
-  [data-ui='grid'][data-justify='stretch'] {
+  [data-ui-grid][data-justify='stretch'] {
     justify-items: stretch;
   }
 }

package/src/highlight/highlight.css

@@ -46,7 +46,7 @@
    * highlighted row — that caps the share: 0.075 leaves 7.078:1, 0.08 leaves
    * 7.001:1, and 0.12 leaves 6.540:1.
    */
-  [data-ui='highlight'] [data-part='match'] {
+  [data-ui-highlight] [data-part-match] {
     background-color: var(
       --slotted-highlight-background,
       color-mix(
@@ -87,7 +87,7 @@
    * sits inside the fill and reads as nothing, which the capture showed. An
    * outline is not used: R3 reserves it for the focus ring.
    */
-  [data-ui='highlight'] [data-part='match'][data-current] {
+  [data-ui-highlight] [data-part-match][data-current] {
     background-color: var(--slotted-highlight-current-background, var(--slotted-tone-accent-solid));
     color: var(--slotted-highlight-current-color, var(--slotted-tone-accent-on-solid));
     text-decoration-line: none;
@@ -104,7 +104,7 @@
    * already carries `data-disabled`, and the family reads it from there rather
    * than asking the host to say it twice.
    */
-  [data-ui='highlight']:is([data-disabled], [data-disabled] *) [data-part='match'] {
+  [data-ui-highlight]:is([data-disabled], [data-disabled] *) [data-part-match] {
     background-color: var(--slotted-highlight-disabled-background, transparent);
     color: inherit;
     /* Restated for the current match, which gave the rule up for its fill. */
@@ -120,14 +120,14 @@
    * active find match in.
    */
   @media (forced-colors: active) {
-    [data-ui='highlight'] [data-part='match'],
-    [data-ui='highlight']:is([data-disabled], [data-disabled] *) [data-part='match'] {
+    [data-ui-highlight] [data-part-match],
+    [data-ui-highlight]:is([data-disabled], [data-disabled] *) [data-part-match] {
       background-color: Mark;
       color: MarkText;
       forced-color-adjust: none;
     }
 
-    [data-ui='highlight'] [data-part='match'][data-current] {
+    [data-ui-highlight] [data-part-match][data-current] {
       background-color: Highlight;
       color: HighlightText;
     }

package/src/hover-card/hover-card.css

@@ -4,7 +4,7 @@
    * preview of where it goes, or of who it names.
    *
    *   root ─ the trigger ─ <a> ─ data-open
-   *         └─ [data-ui='popover'] ─ unchanged, autoFocus off ─┐
+   *         └─ [data-ui-popover] ─ unchanged, autoFocus off ─┐
    *            │  header / body / footer — the consumer's      │
    *            │  arrow                                        │
    *            └───────────────────────────────────────────────┘
@@ -20,7 +20,7 @@
    * the family renders its own anchor, it owes the reader a link that reads as
    * one and says, while the card shows, which word the card is about.
    */
-  [data-ui='hover-card'] {
+  [data-ui-hover-card] {
     --_text: var(--slotted-hover-card-color, var(--slotted-tone-accent-text, LinkText));
     /* The underline at rest is the text at less than half strength, as
        `link` draws it: present enough to say "link", quiet enough that a
@@ -59,7 +59,7 @@
 
   /* Hover fills the underline. The card itself waits for `openDelay`, so this
      is the only thing that answers the pointer at once. */
-  [data-ui='hover-card']:not([data-disabled]):hover {
+  [data-ui-hover-card]:not([data-disabled]):hover {
     text-decoration-color: currentColor;
   }
 
@@ -69,13 +69,13 @@
    * grows by one step of space without moving the line it sits on. A padding
    * would have reflowed the paragraph on every open.
    */
-  [data-ui='hover-card'][data-open] {
+  [data-ui-hover-card][data-open] {
     background-color: var(--_tint);
     box-shadow: 0 0 0 var(--_halo) var(--_tint);
     text-decoration-color: currentColor;
   }
 
-  [data-ui='hover-card']:focus-visible {
+  [data-ui-hover-card]:focus-visible {
     outline: var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);
     outline-offset: var(--slotted-focus-ring-offset, 2px);
   }
@@ -86,7 +86,7 @@
    * colour instead, which is the one thing forced colours keep.
    */
   @media (forced-colors: active) {
-    [data-ui='hover-card'][data-open] {
+    [data-ui-hover-card][data-open] {
       text-decoration-thickness: var(--slotted-border-width-thick, 2px);
     }
   }

package/src/icon/icon.css

@@ -11,7 +11,7 @@
    * this family. An instance overrides that container through `data-size`,
    * which sets the same token on the element itself.
    */
-  [data-ui='icon'] {
+  [data-ui-icon] {
     --_size: var(--slotted-icon-size, var(--slotted-control-icon-size-md, 16px));
 
     align-items: center;
@@ -58,8 +58,8 @@
    * is on the child and not on the box, because `vertical-align` above reads
    * `cap` from the text the box sits in.
    */
-  [data-ui='icon'] > *,
-  [data-ui='icon'] svg {
+  [data-ui-icon] > *,
+  [data-ui-icon] svg {
     block-size: 100%;
     display: block;
     font-size: var(--_size);
@@ -72,19 +72,19 @@
    * the type it sits in, because sixteen pixels inside a display heading is
    * not an icon.
    */
-  [data-ui='icon'][data-size='text'] {
+  [data-ui-icon][data-size='text'] {
     --slotted-icon-size: 1em;
   }
 
-  [data-ui='icon'][data-size='sm'] {
+  [data-ui-icon][data-size='sm'] {
     --slotted-icon-size: var(--slotted-control-icon-size-sm, 14px);
   }
 
-  [data-ui='icon'][data-size='md'] {
+  [data-ui-icon][data-size='md'] {
     --slotted-icon-size: var(--slotted-control-icon-size-md, 16px);
   }
 
-  [data-ui='icon'][data-size='lg'] {
+  [data-ui-icon][data-size='lg'] {
     --slotted-icon-size: var(--slotted-control-icon-size-lg, 18px);
   }
 
@@ -95,31 +95,31 @@
    * `stroke="currentColor"` and filled artwork declares `fill="currentColor"`,
    * and imposing either would break the other.
    */
-  [data-ui='icon'][data-tone='default'] {
+  [data-ui-icon][data-tone='default'] {
     color: var(--slotted-text, CanvasText);
   }
 
-  [data-ui='icon'][data-tone='muted'] {
+  [data-ui-icon][data-tone='muted'] {
     color: var(--slotted-text-muted, GrayText);
   }
 
-  [data-ui='icon'][data-tone='accent'] {
+  [data-ui-icon][data-tone='accent'] {
     color: var(--slotted-tone-accent-text, LinkText);
   }
 
-  [data-ui='icon'][data-tone='success'] {
+  [data-ui-icon][data-tone='success'] {
     color: var(--slotted-tone-success-text, CanvasText);
   }
 
-  [data-ui='icon'][data-tone='warning'] {
+  [data-ui-icon][data-tone='warning'] {
     color: var(--slotted-tone-warning-text, CanvasText);
   }
 
-  [data-ui='icon'][data-tone='danger'] {
+  [data-ui-icon][data-tone='danger'] {
     color: var(--slotted-tone-danger-text, CanvasText);
   }
 
-  [data-ui='icon'][data-tone='inverse'] {
+  [data-ui-icon][data-tone='inverse'] {
     color: var(--slotted-text-inverse, Canvas);
   }
 
@@ -130,7 +130,7 @@
    * right-to-left page has to read the directionality that actually applies to
    * it.
    */
-  [data-ui='icon'][data-directional]:dir(rtl) {
+  [data-ui-icon][data-directional]:dir(rtl) {
     scale: -1 1;
   }
 }