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

package/src/inline/inline.css

@@ -10,7 +10,7 @@
    * type step, so a run of items reads as one line rather than as a list laid
    * sideways.
    */
-  [data-ui='inline'] {
+  [data-ui-inline] {
     --_gap: var(--slotted-space-4, 0.5rem);
 
     display: flex;
@@ -27,55 +27,55 @@
   }
 
   /* Separation is a step on the scale, never a length the consumer states. */
-  [data-ui='inline'][data-gap='0'] {
+  [data-ui-inline][data-gap='0'] {
     --_gap: 0;
   }
 
-  [data-ui='inline'][data-gap='1'] {
+  [data-ui-inline][data-gap='1'] {
     --_gap: var(--slotted-space-1, 0.125rem);
   }
 
-  [data-ui='inline'][data-gap='2'] {
+  [data-ui-inline][data-gap='2'] {
     --_gap: var(--slotted-space-2, 0.25rem);
   }
 
-  [data-ui='inline'][data-gap='3'] {
+  [data-ui-inline][data-gap='3'] {
     --_gap: var(--slotted-space-3, 0.375rem);
   }
 
-  [data-ui='inline'][data-gap='4'] {
+  [data-ui-inline][data-gap='4'] {
     --_gap: var(--slotted-space-4, 0.5rem);
   }
 
-  [data-ui='inline'][data-gap='5'] {
+  [data-ui-inline][data-gap='5'] {
     --_gap: var(--slotted-space-5, 0.75rem);
   }
 
-  [data-ui='inline'][data-gap='6'] {
+  [data-ui-inline][data-gap='6'] {
     --_gap: var(--slotted-space-6, 1rem);
   }
 
-  [data-ui='inline'][data-gap='7'] {
+  [data-ui-inline][data-gap='7'] {
     --_gap: var(--slotted-space-7, 1.25rem);
   }
 
-  [data-ui='inline'][data-gap='8'] {
+  [data-ui-inline][data-gap='8'] {
     --_gap: var(--slotted-space-8, 1.5rem);
   }
 
-  [data-ui='inline'][data-gap='9'] {
+  [data-ui-inline][data-gap='9'] {
     --_gap: var(--slotted-space-9, 2rem);
   }
 
-  [data-ui='inline'][data-gap='10'] {
+  [data-ui-inline][data-gap='10'] {
     --_gap: var(--slotted-space-10, 2.5rem);
   }
 
-  [data-ui='inline'][data-gap='11'] {
+  [data-ui-inline][data-gap='11'] {
     --_gap: var(--slotted-space-11, 3rem);
   }
 
-  [data-ui='inline'][data-gap='12'] {
+  [data-ui-inline][data-gap='12'] {
     --_gap: var(--slotted-space-12, 4rem);
   }
 
@@ -85,23 +85,23 @@
    * line can share a baseline, and a label beside a badge reads wrong without
    * it.
    */
-  [data-ui='inline'][data-align='start'] {
+  [data-ui-inline][data-align='start'] {
     align-items: start;
   }
 
-  [data-ui='inline'][data-align='center'] {
+  [data-ui-inline][data-align='center'] {
     align-items: center;
   }
 
-  [data-ui='inline'][data-align='end'] {
+  [data-ui-inline][data-align='end'] {
     align-items: end;
   }
 
-  [data-ui='inline'][data-align='stretch'] {
+  [data-ui-inline][data-align='stretch'] {
     align-items: stretch;
   }
 
-  [data-ui='inline'][data-align='baseline'] {
+  [data-ui-inline][data-align='baseline'] {
     align-items: baseline;
   }
 
@@ -110,31 +110,31 @@
    * axis. The keywords are the logical ones, so a right-to-left document is the
    * same component mirrored rather than a second stylesheet.
    */
-  [data-ui='inline'][data-justify='start'] {
+  [data-ui-inline][data-justify='start'] {
     justify-content: start;
   }
 
-  [data-ui='inline'][data-justify='center'] {
+  [data-ui-inline][data-justify='center'] {
     justify-content: center;
   }
 
-  [data-ui='inline'][data-justify='end'] {
+  [data-ui-inline][data-justify='end'] {
     justify-content: end;
   }
 
-  [data-ui='inline'][data-justify='between'] {
+  [data-ui-inline][data-justify='between'] {
     justify-content: space-between;
   }
 
-  [data-ui='inline'][data-justify='around'] {
+  [data-ui-inline][data-justify='around'] {
     justify-content: space-around;
   }
 
-  [data-ui='inline'][data-justify='evenly'] {
+  [data-ui-inline][data-justify='evenly'] {
     justify-content: space-evenly;
   }
 
-  [data-ui='inline'][data-wrap='wrap'] {
+  [data-ui-inline][data-wrap='wrap'] {
     flex-wrap: wrap;
   }
 
@@ -143,7 +143,7 @@
    * content. That is what the consumer asked for, and it is why the family does
    * not ask for it on the consumer's behalf.
    */
-  [data-ui='inline'][data-wrap='nowrap'] {
+  [data-ui-inline][data-wrap='nowrap'] {
     flex-wrap: nowrap;
   }
 }

package/src/inline-message/inline-message.css

@@ -20,7 +20,7 @@
    *   DOM so it is read first; `position: absolute` is what keeps it from
    *   taking a grid cell or adding a line.
    */
-  [data-ui='inline-message'][data-part='root'] {
+  [data-ui-inline-message][data-part-root] {
     /**
      * The default is the help tone, which is what most fields carry. It is the
      * one tone that paints in the neutral muted ink rather than in a tone's
@@ -91,23 +91,23 @@
    * a severity.
    */
 
-  [data-ui='inline-message'][data-part='root'][data-tone='accent'] {
+  [data-ui-inline-message][data-part-root][data-tone='accent'] {
     --_text: var(--slotted-tone-accent-text);
   }
 
-  [data-ui='inline-message'][data-part='root'][data-tone='secondary'] {
+  [data-ui-inline-message][data-part-root][data-tone='secondary'] {
     --_text: var(--slotted-text-muted);
   }
 
-  [data-ui='inline-message'][data-part='root'][data-tone='success'] {
+  [data-ui-inline-message][data-part-root][data-tone='success'] {
     --_text: var(--slotted-tone-success-text);
   }
 
-  [data-ui='inline-message'][data-part='root'][data-tone='warning'] {
+  [data-ui-inline-message][data-part-root][data-tone='warning'] {
     --_text: var(--slotted-tone-warning-text);
   }
 
-  [data-ui='inline-message'][data-part='root'][data-tone='danger'] {
+  [data-ui-inline-message][data-part-root][data-tone='danger'] {
     --_text: var(--slotted-tone-danger-text);
   }
 
@@ -119,11 +119,11 @@
    * field. Both are restated per density by the theme.
    */
 
-  [data-ui='inline-message'][data-part='root'][data-size='sm'] {
+  [data-ui-inline-message][data-part-root][data-size='sm'] {
     --_font-size: var(--slotted-control-font-size-sm, 12px);
   }
 
-  [data-ui='inline-message'][data-part='root'][data-size='md'] {
+  [data-ui-inline-message][data-part-root][data-size='md'] {
     --_font-size: var(--slotted-control-font-size-md, 13px);
   }
 
@@ -137,7 +137,7 @@
    * character as the message. A space is content: it defeats `:empty` below, so
    * the mark and the severity word would be drawn beside nothing.
    */
-  [data-ui='inline-message'][data-part='root'][data-reserve] {
+  [data-ui-inline-message][data-part-root][data-reserve] {
     min-block-size: 1lh;
   }
 
@@ -156,7 +156,7 @@
    * a one-pixel box, clipped, out of flow, on a single line, with the negative
    * margin that keeps it from adding a pixel of scrollable overflow.
    */
-  [data-ui='inline-message'] > [data-part='prefix'] {
+  [data-ui-inline-message] > [data-part-prefix] {
     block-size: 1px;
     border: 0;
     clip-path: inset(50%);
@@ -183,7 +183,7 @@
    * A mark the page supplies instead takes the same box and its place on the
    * first line, centred in it.
    */
-  [data-ui='inline-message'] > [data-part='icon'] {
+  [data-ui-inline-message] > [data-part-icon] {
     --slotted-icon-size: var(--_mark-size);
 
     align-items: center;
@@ -221,12 +221,12 @@
    * page's own artwork alone: a supplied mark keeps the full box it was
    * measured for.
    */
-  [data-ui='inline-message'][data-part='root'][data-mark='dot'] {
+  [data-ui-inline-message][data-part-root][data-mark='dot'] {
     --_dot-size: calc(var(--_mark-size) / 3);
   }
 
-  [data-ui='inline-message'][data-mark='dot']
-    > [data-part='icon']:has(> [data-ui='icon'] > [data-glyph='dot']) {
+  [data-ui-inline-message][data-mark='dot']
+    > [data-part-icon]:has(> [data-ui-icon] > [data-glyph='dot']) {
     --slotted-icon-size: calc(var(--_dot-size) * 2);
 
     inline-size: var(--_dot-size);
@@ -242,8 +242,8 @@
    * and it is stated as an absence rather than as `[data-mark='glyph']` so
    * markup written without the attribute keeps the rule.
    */
-  [data-ui='inline-message'][data-tone='secondary']:not([data-loading]):not([data-mark='dot'])
-    > [data-part='icon']:empty {
+  [data-ui-inline-message][data-tone='secondary']:not([data-loading]):not([data-mark='dot'])
+    > [data-part-icon]:empty {
     display: none;
   }
 
@@ -263,7 +263,7 @@
    * `:not([data-loading])` keeps the ring, because a message with no mark can
    * be waiting for something like any other.
    */
-  [data-ui='inline-message'][data-mark='none']:not([data-loading]) > [data-part='icon']:empty {
+  [data-ui-inline-message][data-mark='none']:not([data-loading]) > [data-part-icon]:empty {
     display: none;
   }
 
@@ -279,7 +279,7 @@
    * name without a hyphen. Nothing is removed: the whole string stays in the
    * DOM, in the accessibility tree, and findable by a page search.
    */
-  [data-ui='inline-message'] > [data-part='text'] {
+  [data-ui-inline-message] > [data-part-text] {
     grid-column: 2;
     grid-row: 1;
     min-inline-size: 0;
@@ -292,8 +292,8 @@
    * standing beside an empty sentence would be the layout shift moved rather
    * than removed.
    */
-  [data-ui='inline-message']:has([data-part='text']:empty) > [data-part='icon'],
-  [data-ui='inline-message']:has([data-part='text']:empty) > [data-part='prefix'] {
+  [data-ui-inline-message]:has([data-part-text]:empty) > [data-part-icon],
+  [data-ui-inline-message]:has([data-part-text]:empty) > [data-part-prefix] {
     display: none;
   }
 
@@ -309,7 +309,7 @@
    * It is the ring `button` draws for the same reason, at the same duration,
    * in the mark's own square on the first line where the mark it replaced was.
    */
-  [data-ui='inline-message'][data-loading] > [data-part='icon'] {
+  [data-ui-inline-message][data-loading] > [data-part-icon] {
     animation: slotted-inline-message-spin var(--slotted-duration-loop-fast) linear infinite;
     block-size: var(--_mark-size);
     border: max(var(--slotted-border-width-thin, 1px), calc(var(--_mark-size) / 8)) solid
@@ -329,7 +329,7 @@
 
   /* The page's own artwork withdraws for the ring rather than sitting inside
      it, because the ring is the mark while the message is waiting. */
-  [data-ui='inline-message'][data-loading] > [data-part='icon'] > * {
+  [data-ui-inline-message][data-loading] > [data-part-icon] > * {
     display: none;
   }
 
@@ -343,11 +343,11 @@
    * own. The ring does need one: `STATE_PRECEDENCE` puts `disabled` above
    * `loading`, and a control nobody can use is not waiting for anything.
    */
-  [data-ui='inline-message'][data-part='root'][data-disabled] {
+  [data-ui-inline-message][data-part-root][data-disabled] {
     color: var(--slotted-disabled-foreground);
   }
 
-  [data-ui='inline-message'][data-disabled] > [data-part='icon'] {
+  [data-ui-inline-message][data-disabled] > [data-part-icon] {
     animation: none;
   }
 
@@ -357,7 +357,7 @@
    * is the decision `button` recorded for the same ring.
    */
   @media (prefers-reduced-motion: reduce) {
-    [data-ui='inline-message'][data-loading] > [data-part='icon'] {
+    [data-ui-inline-message][data-loading] > [data-part-icon] {
       animation: none;
     }
   }
@@ -374,15 +374,15 @@
    * one colour and the turn would be a complete circle turning invisibly.
    */
   @media (forced-colors: active) {
-    [data-ui='inline-message'] > [data-part='icon'] {
+    [data-ui-inline-message] > [data-part-icon] {
       color: CanvasText;
     }
 
-    [data-ui='inline-message'][data-part='root'][data-disabled] > [data-part='icon'] {
+    [data-ui-inline-message][data-part-root][data-disabled] > [data-part-icon] {
       color: GrayText;
     }
 
-    [data-ui='inline-message'][data-loading] > [data-part='icon'] {
+    [data-ui-inline-message][data-loading] > [data-part-icon] {
       border-color: CanvasText;
       border-inline-end-color: Canvas;
     }

package/src/kbd/kbd.css

@@ -19,7 +19,7 @@
    * The same length is the minimum inline size, which is what makes a
    * one-letter cap square instead of a slot.
    */
-  [data-ui='kbd'] {
+  [data-ui-kbd] {
     /**
      * The height comes from the space scale — 16, 20, 24, 28 — and not from
      * the control geometry. A cap on its own is a glyph box, not a control,
@@ -73,7 +73,7 @@
     --_color: var(--slotted-text, CanvasText);
   }
 
-  [data-ui='kbd'][data-part='root'] {
+  [data-ui-kbd][data-part-root] {
     background-color: var(--_background);
     background-image: var(--_face);
     /**
@@ -167,7 +167,7 @@
    * so the trim moves the ink and never the box.
    */
   @supports (text-box: trim-both cap alphabetic) {
-    [data-ui='kbd'] [data-part='legend'] {
+    [data-ui-kbd] [data-part-legend] {
       text-box: trim-both cap alphabetic;
     }
 
@@ -179,7 +179,7 @@
      * three sat visibly high in the cap. Left untrimmed, what gets centred is
      * the em box, which is where a mark is drawn.
      */
-    [data-ui='kbd'] [data-part='legend'][data-legend='symbol'] {
+    [data-ui-kbd] [data-part-legend][data-legend='symbol'] {
       text-box: normal;
     }
   }
@@ -193,7 +193,7 @@
    * below the cap height of `K`, and at 1.15em `⌫` stood wider than the
    * `Esc` beside it.
    */
-  [data-ui='kbd'] [data-part='legend'][data-legend='symbol'] {
+  [data-ui-kbd] [data-part-legend][data-legend='symbol'] {
     font-family: var(--slotted-kbd-symbol-font-family, var(--slotted-font-family-sans, sans-serif));
     font-size: 1.1em;
   }
@@ -208,7 +208,7 @@
    * whose accessible name disappears when a consumer forgets an import has no
    * accessible name.
    */
-  [data-ui='kbd'] [data-part='name'] {
+  [data-ui-kbd] [data-part-name] {
     block-size: 1px;
     border: 0;
     clip-path: inset(50%);
@@ -233,7 +233,7 @@
    * pinned. A key legend written in Arabic still renders right-to-left within
    * its own cap, because that is a run of its own.
    */
-  [data-ui='kbd'][data-part='shortcut'] {
+  [data-ui-kbd][data-part-shortcut] {
     align-items: center;
     direction: ltr;
     display: inline-flex;
@@ -266,11 +266,11 @@
    * `⌥⇧⌘P` and `⌘K` read as one run of six keys. One step tighter is what says
    * these caps are one shortcut. Everywhere else the `+` says it instead.
    */
-  [data-ui='kbd'][data-part='shortcut'][data-platform='mac'] {
+  [data-ui-kbd][data-part-shortcut][data-platform='mac'] {
     --_gap: var(--slotted-space-1, 0.125rem);
   }
 
-  [data-ui='kbd'][data-part='shortcut'][data-platform='mac'][data-size='inherit'] {
+  [data-ui-kbd][data-part-shortcut][data-platform='mac'][data-size='inherit'] {
     --_gap: 0.125em;
   }
 
@@ -281,7 +281,7 @@
    * announce for the same shortcut. The word is not hidden: it is the only
    * thing that tells a sequence from a combination.
    */
-  [data-ui='kbd'] [data-part='separator'] {
+  [data-ui-kbd] [data-part-separator] {
     color: var(--slotted-text-muted, GrayText);
     flex: none;
     font-family: var(--slotted-kbd-font-family, var(--slotted-control-font-family, sans-serif));
@@ -289,7 +289,7 @@
     line-height: 1;
   }
 
-  [data-ui='kbd'] [data-part='separator'][data-separator='then'] {
+  [data-ui-kbd] [data-part-separator][data-separator='then'] {
     font-family: var(--slotted-control-font-family, sans-serif);
     /**
      * A step boundary is a bigger break than a key join, so it gets more air
@@ -311,7 +311,7 @@
    * scale starts at 12px, and 12px in a 16-pixel cap left one pixel of air
    * above an ascender, so this step writes the one size the scale lacks.
    */
-  [data-ui='kbd'][data-size='xs'] {
+  [data-ui-kbd][data-size='xs'] {
     --_size: var(--slotted-space-6, 1rem);
     --_font-size: 0.6875rem;
     --_inset-inline: var(--slotted-space-2, 0.25rem);
@@ -319,13 +319,13 @@
     --_gap: var(--slotted-space-1, 0.125rem);
   }
 
-  [data-ui='kbd'][data-size='sm'] {
+  [data-ui-kbd][data-size='sm'] {
     --_size: var(--slotted-space-7, 1.25rem);
     --_font-size: var(--slotted-control-font-size-sm, 12px);
     --_inset-inline: var(--slotted-space-2, 0.25rem);
   }
 
-  [data-ui='kbd'][data-size='lg'] {
+  [data-ui-kbd][data-size='lg'] {
     --_size: calc(var(--slotted-space-8, 1.5rem) + var(--slotted-space-2, 0.25rem));
     --_font-size: var(--slotted-control-font-size-lg, 14px);
     --_inset-inline: var(--slotted-space-4, 0.5rem);
@@ -345,7 +345,7 @@
    * insets plus edges, made 25.8px on 16px text set at 24px lines. The radius
    * is a quarter of that height, the proportion of the absolute steps.
    */
-  [data-ui='kbd'][data-size='inherit'] {
+  [data-ui-kbd][data-size='inherit'] {
     --_size: 1.5em;
     --_font-size: 0.8em;
     --_inset-inline: 0.4em;
@@ -355,7 +355,7 @@
 
   /* A fractional height puts both horizontal edges between pixels. */
   @supports (inline-size: round(nearest, 1.5em, 1px)) {
-    [data-ui='kbd'][data-size='inherit'] {
+    [data-ui-kbd][data-size='inherit'] {
       --_size: round(nearest, 1.5em, 1px);
     }
   }
@@ -367,7 +367,7 @@
    * outlined one, and it is why `raised` is the default: it is the only value
    * that reads as an object rather than as a box drawn round a word.
    */
-  [data-ui='kbd'][data-variant='raised'] {
+  [data-ui-kbd][data-variant='raised'] {
     --_base-width: var(--slotted-kbd-base-width, var(--slotted-border-width-thick, 2px));
     /**
      * The skirt. The lower part of the face turns a tenth of the way toward
@@ -394,7 +394,7 @@
    * survive an unknown surface was the one variant that could not. A box that
    * borrows its ground borrows its foreground with it.
    */
-  [data-ui='kbd'][data-variant='outline'] {
+  [data-ui-kbd][data-variant='outline'] {
     --_background: transparent;
     /* The edge is all this variant draws, so it is the strong one all round. */
     --_border: var(--slotted-border-strong, ButtonBorder);
@@ -407,7 +407,7 @@
    * panel, where a key painted with it would disappear; the neutral tone's
    * surface is the step `badge` calibrated to read on both.
    */
-  [data-ui='kbd'][data-variant='soft'] {
+  [data-ui-kbd][data-variant='soft'] {
     --_background: var(--slotted-tone-secondary-surface);
     /**
      * The tinted key draws the tone's own edge, as every `badge` variant does,
@@ -435,14 +435,14 @@
    * also what makes the row work: a menu item that dims dims its shortcut with
    * it, with no state to set and nothing left bright at the end of a grey row.
    */
-  [data-ui='kbd'][data-variant='plain'] {
+  [data-ui-kbd][data-variant='plain'] {
     --_background: transparent;
     --_border: transparent;
     --_base: transparent;
     --_color: inherit;
   }
 
-  [data-ui='kbd'][data-part='root'][data-variant='plain'] {
+  [data-ui-kbd][data-part-root][data-variant='plain'] {
     min-inline-size: 0;
     padding-inline: 0;
   }
@@ -455,7 +455,7 @@
    * belongs to owns the semantics: `kbd` may carry only the global ARIA
    * attributes, and `aria-disabled` is not one of them.
    */
-  [data-ui='kbd'][data-disabled] {
+  [data-ui-kbd][data-disabled] {
     --_background: var(--slotted-disabled-background, Canvas);
     --_face: none;
     --_border: var(--slotted-disabled-border, GrayText);
@@ -463,7 +463,7 @@
     --_color: var(--slotted-disabled-foreground, GrayText);
   }
 
-  [data-ui='kbd'][data-disabled] [data-part='separator'] {
+  [data-ui-kbd][data-disabled] [data-part-separator] {
     color: var(--slotted-disabled-foreground, GrayText);
   }
 
@@ -472,12 +472,12 @@
    * that filled itself grey would be a grey rectangle on whatever surface it
    * was placed over, which is the one thing the variant exists to avoid.
    */
-  [data-ui='kbd'][data-variant='outline'][data-disabled],
-  [data-ui='kbd'][data-variant='plain'][data-disabled] {
+  [data-ui-kbd][data-variant='outline'][data-disabled],
+  [data-ui-kbd][data-variant='plain'][data-disabled] {
     --_background: transparent;
   }
 
-  [data-ui='kbd'][data-variant='plain'][data-disabled] {
+  [data-ui-kbd][data-variant='plain'][data-disabled] {
     --_border: transparent;
     --_base: transparent;
   }

package/src/link/link.css

@@ -19,7 +19,7 @@
    * theme already holds to the highest ratio in each scheme cannot fail the
    * same way.
    */
-  [data-ui='link'] {
+  [data-ui-link] {
     --_strong: var(--slotted-text, CanvasText);
     --_rest: var(--slotted-link-color, var(--slotted-tone-accent-text, LinkText));
     --_hover: var(
@@ -80,7 +80,7 @@
    * pointer. Fluent calls it `subtle`, Primer `muted`, Polaris `monochrome`,
    * and all three describe the same two colours.
    */
-  [data-ui='link'][data-variant='neutral'] {
+  [data-ui-link][data-variant='neutral'] {
     --_rest: var(--slotted-link-color, currentColor);
     --_hover: var(--slotted-link-color-hover, var(--slotted-tone-accent-text, LinkText));
     --_active: var(
@@ -94,7 +94,7 @@
    * ground, so hover has nowhere further to go and the underline carries the
    * state on its own.
    */
-  [data-ui='link'][data-variant='inverse'] {
+  [data-ui-link][data-variant='inverse'] {
     --_strong: var(--slotted-text-inverse, Canvas);
     --_rest: var(--slotted-link-color, var(--slotted-text-inverse, Canvas));
   }
@@ -108,12 +108,12 @@
    * where there is no sentence for it to disappear into.
    */
 
-  [data-ui='link'][data-underline='hover'],
-  [data-ui='link'][data-underline='none'] {
+  [data-ui-link][data-underline='hover'],
+  [data-ui-link][data-underline='none'] {
     text-decoration-line: none;
   }
 
-  [data-ui='link'][data-underline='hover']:not([data-disabled]):hover {
+  [data-ui-link][data-underline='hover']:not([data-disabled]):hover {
     text-decoration-line: underline;
   }
 
@@ -122,7 +122,7 @@
    * `none` is left alone: it says the underline does not exist, not that it is
    * waiting for something.
    */
-  [data-ui='link'][data-underline='hover']:focus-visible {
+  [data-ui-link][data-underline='hover']:focus-visible {
     text-decoration-line: underline;
   }
 
@@ -134,19 +134,19 @@
    * in this repository can read this rule back.
    */
 
-  [data-ui='link'][data-visited]:visited {
+  [data-ui-link][data-visited]:visited {
     color: var(--_visited);
   }
 
   /* ── Hover and press, held back for disabled ────────────────────────────── */
 
-  [data-ui='link']:not([data-disabled]):hover {
+  [data-ui-link]:not([data-disabled]):hover {
     --_underline: currentColor;
 
     color: var(--_hover);
   }
 
-  [data-ui='link']:not([data-disabled]):active {
+  [data-ui-link]:not([data-disabled]):active {
     --_underline: currentColor;
 
     color: var(--_active);
@@ -159,7 +159,7 @@
    * offset reaches into the line above.
    */
 
-  [data-ui='link']:focus-visible {
+  [data-ui-link]:focus-visible {
     outline: var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);
     outline-offset: var(--slotted-link-focus-ring-offset, 1px);
   }
@@ -172,7 +172,7 @@
    * reads as a link that is not available rather than as plain text.
    */
 
-  [data-ui='link'][data-disabled] {
+  [data-ui-link][data-disabled] {
     color: var(--slotted-link-color-disabled, var(--slotted-disabled-foreground, GrayText));
     cursor: not-allowed;
   }
@@ -196,7 +196,7 @@
    * `--slotted-icon-size`, which the part states at the size of the text.
    */
 
-  [data-ui='link'] [data-part='external-icon'] {
+  [data-ui-link] [data-part-external-icon] {
     --slotted-icon-size: var(--slotted-link-external-icon-size, 1em);
 
     margin-inline-start: var(--slotted-link-external-icon-gap, 0.15em);
@@ -217,7 +217,7 @@
    * it.
    */
 
-  [data-ui='link'][aria-current]:not([aria-current='false']) {
+  [data-ui-link][aria-current]:not([aria-current='false']) {
     --_rest: var(--slotted-link-color-current, var(--slotted-text, CanvasText));
   }
 
@@ -230,7 +230,7 @@
    */
 
   @media (forced-colors: active) {
-    [data-ui='link'] {
+    [data-ui-link] {
       text-decoration-line: underline;
     }
   }