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

package/src/top-navigation/top-navigation.css

@@ -38,7 +38,7 @@
    * reads as the row it would be in `side-navigation`. Outside the shell the
    * fallbacks are the control scale.
    */
-  [data-ui='top-navigation'] {
+  [data-ui-top-navigation] {
     --_control-height: var(--slotted-control-height-md, 34px);
     --_control-padding: var(--slotted-control-padding-inline-md, 13px);
     --_control-font-size: var(--slotted-control-font-size-md, 13px);
@@ -152,7 +152,7 @@
    * content box is its border box, and the first and last clusters carry the
    * edge — `--_edge`, nought inside the shell — beside the shell's row inset.
    */
-  [data-ui='top-navigation'][data-frame] {
+  [data-ui-top-navigation][data-frame] {
     --_edge: var(--_inset);
 
     background-color: var(--_surface);
@@ -160,7 +160,7 @@
     min-block-size: var(--_block-size);
   }
 
-  [data-ui='top-navigation'][data-size='sm'] {
+  [data-ui-top-navigation][data-size='sm'] {
     --_control-height: var(--slotted-control-height-sm, 30px);
     --_control-padding: var(--slotted-control-padding-inline-sm, 10px);
     --_control-font-size: var(--slotted-control-font-size-sm, 12px);
@@ -180,7 +180,7 @@
     );
   }
 
-  [data-ui='top-navigation'][data-size='lg'] {
+  [data-ui-top-navigation][data-size='lg'] {
     --_control-height: var(--slotted-control-height-lg, 38px);
     --_control-padding: var(--slotted-control-padding-inline-lg, 16px);
     --_control-font-size: var(--slotted-control-font-size-lg, 14px);
@@ -207,7 +207,7 @@
    * bar, on the bar's own ground: a reader tabbing into the page sees where
    * they are before they see anything else.
    */
-  [data-ui='top-navigation'] > [data-part='skip'] {
+  [data-ui-top-navigation] > [data-part-skip] {
     background-color: var(--_surface);
     block-size: var(--_control-height);
     border-radius: var(--_radius);
@@ -227,7 +227,7 @@
     z-index: 1;
   }
 
-  [data-ui='top-navigation'] > [data-part='skip']:focus-visible {
+  [data-ui-top-navigation] > [data-part-skip]:focus-visible {
     clip-path: none;
     outline: var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);
     outline-offset: var(--slotted-focus-ring-offset, 2px);
@@ -238,7 +238,7 @@
   /**
    * The root part is named in the selector for one reason: `app-shell` styles
    * its own brand cluster with a descendant selector,
-   * `[data-ui='app-shell'] [data-part='brand']`, which reaches this part when
+   * `[data-ui-app-shell] [data-part-brand]`, which reaches this part when
    * the bar stands in the shell's banner and clips `home` to a sliver at 240
    * pixels. Naming the root outranks it. The shell's own reopening narrows
    * that selector to its banner; until then the two declarations it leaks —
@@ -250,7 +250,7 @@
    * nought it shrank under its own marks on a phone whose actions held seven
    * touch-sized controls, and the marks spilled over the cluster beside it.
    */
-  [data-ui='top-navigation'][data-part='root'] > [data-part='brand'] {
+  [data-ui-top-navigation][data-part-root] > [data-part-brand] {
     align-items: center;
     display: flex;
     flex: 0 1 auto;
@@ -259,13 +259,13 @@
     padding-inline-start: calc(var(--_edge) + var(--_row-inset));
   }
 
-  [data-ui='top-navigation'][data-part='root'] > [data-part='brand'] > [data-part='home'] {
+  [data-ui-top-navigation][data-part-root] > [data-part-brand] > [data-part-home] {
     min-inline-size: var(--_control-height);
     overflow: visible;
     white-space: normal;
   }
 
-  [data-ui='top-navigation'] [data-part='home'] {
+  [data-ui-top-navigation] [data-part-home] {
     align-items: center;
     border-radius: var(--_radius);
     color: var(--_color);
@@ -293,13 +293,13 @@
     text-decoration: none;
   }
 
-  [data-ui='top-navigation'] [data-part='home']:focus-visible {
+  [data-ui-top-navigation] [data-part-home]:focus-visible {
     outline: var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);
     outline-offset: var(--slotted-focus-ring-offset, 2px);
   }
 
   /** A square the mark is centred in, the height of the bar's controls. */
-  [data-ui='top-navigation'] [data-part='mark'] {
+  [data-ui-top-navigation] [data-part-mark] {
     align-items: center;
     block-size: var(--_control-height);
     display: inline-flex;
@@ -308,7 +308,7 @@
     justify-content: center;
   }
 
-  [data-ui='top-navigation'] [data-part='mark'] > :is(svg, img) {
+  [data-ui-top-navigation] [data-part-mark] > :is(svg, img) {
     block-size: var(--_mark-size);
     inline-size: var(--_mark-size);
   }
@@ -317,7 +317,7 @@
    * One line. It ends in an ellipsis rather than pushing the bar wider than
    * the space there is — the rule `app-shell` states for its own brand.
    */
-  [data-ui='top-navigation'] [data-part='name'] {
+  [data-ui-top-navigation] [data-part-name] {
     font-size: var(--_name-font-size);
     font-weight: var(--slotted-font-weight-semibold, 600);
     max-inline-size: var(--_name-max);
@@ -337,7 +337,7 @@
    * what a shrinking cluster does to a button — and the steps below are what
    * takes their room back.
    */
-  [data-ui='top-navigation'] [data-part='context'] {
+  [data-ui-top-navigation] [data-part-context] {
     align-items: center;
     display: flex;
     flex: 0 0 auto;
@@ -352,7 +352,7 @@
    * inherited back, so the bar's rows and the sections' panels read the bar's
    * tokens — one bar, one set of decisions.
    */
-  [data-ui='top-navigation'] [data-part='nav'] {
+  [data-ui-top-navigation] [data-part-nav] {
     --_control-height: inherit;
     --_control-padding: inherit;
     --_control-font-size: inherit;
@@ -374,7 +374,7 @@
     flex: 0 0 auto;
   }
 
-  [data-ui='top-navigation'] [data-part='list'] {
+  [data-ui-top-navigation] [data-part-list] {
     align-items: center;
     display: flex;
     gap: var(--slotted-space-1, 0.125rem);
@@ -384,7 +384,7 @@
     padding: 0;
   }
 
-  [data-ui='top-navigation'] [data-part='item'] {
+  [data-ui-top-navigation] [data-part-item] {
     display: flex;
     flex: 0 0 auto;
     min-inline-size: 0;
@@ -398,10 +398,10 @@
    * muted ink in `light`; the icon-only controls stay muted, the way Carbon's
    * global actions do, because a mark carries less weight than a word.
    */
-  [data-ui='top-navigation']
-    :is([data-part='nav'] > [data-part='list'], [data-part='panel-list'])
-    > [data-part='item']
-    > :is([data-part='link'], [data-part='trigger']) {
+  [data-ui-top-navigation]
+    :is([data-part-nav] > [data-part-list], [data-part-panel-list])
+    > [data-part-item]
+    > :is([data-part-link], [data-part-trigger]) {
     align-items: center;
     appearance: none;
     background-color: transparent;
@@ -425,22 +425,22 @@
     white-space: nowrap;
   }
 
-  [data-ui='top-navigation']
-    [data-part='item']:not([data-disabled])
-    > [data-part='link']:not([data-current], [aria-current='page']):hover,
-  [data-ui='top-navigation']
-    [data-part='item']:not([data-disabled])
-    > [data-part='trigger']:enabled:hover {
+  [data-ui-top-navigation]
+    [data-part-item]:not([data-disabled])
+    > [data-part-link]:not([data-current], [aria-current='page']):hover,
+  [data-ui-top-navigation]
+    [data-part-item]:not([data-disabled])
+    > [data-part-trigger]:enabled:hover {
     background-color: var(--_hover-background);
     color: var(--_color);
   }
 
-  [data-ui='top-navigation']
-    [data-part='item']:not([data-disabled])
-    > [data-part='link']:not([data-current], [aria-current='page']):active,
-  [data-ui='top-navigation']
-    [data-part='item']:not([data-disabled])
-    > [data-part='trigger']:enabled:active {
+  [data-ui-top-navigation]
+    [data-part-item]:not([data-disabled])
+    > [data-part-link]:not([data-current], [aria-current='page']):active,
+  [data-ui-top-navigation]
+    [data-part-item]:not([data-disabled])
+    > [data-part-trigger]:enabled:active {
     background-color: var(--_active-background);
     color: var(--_color);
     transition-duration: var(--slotted-duration-instant);
@@ -451,9 +451,9 @@
    * is written on the trigger by the consumer's `menu`, whose trigger the
    * family's part is rendered as, so the family wires nothing for it.
    */
-  [data-ui='top-navigation']
-    [data-part='item']:not([data-disabled])
-    > [data-part='trigger'][data-open]:enabled {
+  [data-ui-top-navigation]
+    [data-part-item]:not([data-disabled])
+    > [data-part-trigger][data-open]:enabled {
     background-color: var(--_hover-background);
     color: var(--_color);
   }
@@ -464,32 +464,32 @@
    * router link rendered through `render` says where the reader is in the one
    * attribute it owns, and the stylesheet reads it as the same state.
    */
-  [data-ui='top-navigation']
-    :is([data-part='nav'] > [data-part='list'], [data-part='panel-list'])
-    > [data-part='item']
-    > [data-part='link']:is([data-current], [aria-current='page']) {
+  [data-ui-top-navigation]
+    :is([data-part-nav] > [data-part-list], [data-part-panel-list])
+    > [data-part-item]
+    > [data-part-link]:is([data-current], [aria-current='page']) {
     background-color: var(--_current-background);
     box-shadow: inset 0 0 0 var(--_rule-width) var(--_current-edge);
     color: var(--_current-color);
     font-weight: var(--slotted-font-weight-semibold, 600);
   }
 
-  [data-ui='top-navigation']
-    :is([data-part='nav'] > [data-part='list'], [data-part='panel-list'])
-    > [data-part='item'][data-disabled]
-    > [data-part='link'],
-  [data-ui='top-navigation']
-    :is([data-part='nav'] > [data-part='list'], [data-part='panel-list'])
-    > [data-part='item']
-    > [data-part='trigger']:disabled {
+  [data-ui-top-navigation]
+    :is([data-part-nav] > [data-part-list], [data-part-panel-list])
+    > [data-part-item][data-disabled]
+    > [data-part-link],
+  [data-ui-top-navigation]
+    :is([data-part-nav] > [data-part-list], [data-part-panel-list])
+    > [data-part-item]
+    > [data-part-trigger]:disabled {
     color: var(--_disabled-color);
     cursor: not-allowed;
   }
 
-  [data-ui='top-navigation']
-    :is([data-part='nav'] > [data-part='list'], [data-part='panel-list'])
-    > [data-part='item']
-    > :is([data-part='link'], [data-part='trigger']):focus-visible {
+  [data-ui-top-navigation]
+    :is([data-part-nav] > [data-part-list], [data-part-panel-list])
+    > [data-part-item]
+    > :is([data-part-link], [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);
   }
@@ -500,11 +500,11 @@
    * the `chevron-down` Glyph element the binding renders in the part. Down is
    * down in both directions, so its box is not `directional`.
    */
-  [data-ui='top-navigation']
-    :is([data-part='nav'] > [data-part='list'], [data-part='panel-list'])
-    > [data-part='item']
-    > [data-part='trigger']
-    > [data-part='indicator'] {
+  [data-ui-top-navigation]
+    :is([data-part-nav] > [data-part-list], [data-part-panel-list])
+    > [data-part-item]
+    > [data-part-trigger]
+    > [data-part-indicator] {
     --slotted-icon-size: var(--_icon-size);
 
     display: flex;
@@ -512,19 +512,16 @@
     margin-inline-end: calc(-1 * var(--slotted-space-2, 0.25rem));
   }
 
-  [data-ui='top-navigation']
-    :is([data-part='nav'] > [data-part='list'], [data-part='panel-list'])
-    > [data-part='item']
-    > [data-part='trigger']
-    > [data-part='indicator']
-    > [data-ui='icon'] {
+  [data-ui-top-navigation]
+    :is([data-part-nav] > [data-part-list], [data-part-panel-list])
+    > [data-part-item]
+    > [data-part-trigger]
+    > [data-part-indicator]
+    > [data-ui-icon] {
     transition: rotate var(--slotted-duration-medium) var(--_easing);
   }
 
-  [data-ui='top-navigation']
-    [data-part='trigger'][data-open]
-    > [data-part='indicator']
-    > [data-ui='icon'] {
+  [data-ui-top-navigation] [data-part-trigger][data-open] > [data-part-indicator] > [data-ui-icon] {
     rotate: 0.5turn;
   }
 
@@ -539,15 +536,15 @@
    * family's would be, so the cluster is one row of equals and not four of
    * the family's beside three of another.
    */
-  [data-ui='top-navigation']
+  [data-ui-top-navigation]
     :is(
-      [data-part='more'],
-      [data-part='search-toggle'],
-      [data-part='search-close'],
-      [data-part='help'],
-      [data-part='notifications'],
-      [data-part='account'],
-      [data-part='action']
+      [data-part-more],
+      [data-part-search-toggle],
+      [data-part-search-close],
+      [data-part-help],
+      [data-part-notifications],
+      [data-part-account],
+      [data-part-action]
     ) {
     align-items: center;
     appearance: none;
@@ -579,13 +576,13 @@
    * The family's marks — `ellipsis`, `search`, `x`, `circle-question` and
    * `bell` — are sized by the control they stand in.
    */
-  [data-ui='top-navigation']
+  [data-ui-top-navigation]
     :is(
-      [data-part='more'],
-      [data-part='search-toggle'],
-      [data-part='search-close'],
-      [data-part='help'],
-      [data-part='notifications']
+      [data-part-more],
+      [data-part-search-toggle],
+      [data-part-search-close],
+      [data-part-help],
+      [data-part-notifications]
     ) {
     --slotted-icon-size: var(--_icon-size);
   }
@@ -596,90 +593,88 @@
    * host such as `ng-icon` reads the font-size the child rule gives it. The
    * count stands out of the flow and is not the glyph.
    */
-  [data-ui='top-navigation'] [data-part='action'] {
+  [data-ui-top-navigation] [data-part-action] {
     --slotted-icon-size: var(--_icon-size);
   }
 
-  [data-ui='top-navigation'] [data-part='action'] > :not([data-part='count']) {
+  [data-ui-top-navigation] [data-part-action] > :not([data-part-count]) {
     block-size: var(--_icon-size);
     flex: 0 0 auto;
     font-size: var(--_icon-size);
     inline-size: var(--_icon-size);
   }
 
-  [data-ui='top-navigation']
+  [data-ui-top-navigation]
     :is(
-      [data-part='more'],
-      [data-part='search-toggle'],
-      [data-part='search-close'],
-      [data-part='notifications'],
-      [data-part='account']
+      [data-part-more],
+      [data-part-search-toggle],
+      [data-part-search-close],
+      [data-part-notifications],
+      [data-part-account]
     ):enabled:hover,
-  [data-ui='top-navigation']
-    a:is([data-part='help'], [data-part='action']):not([data-disabled]):hover,
-  [data-ui='top-navigation'] button:is([data-part='help'], [data-part='action']):enabled:hover {
+  [data-ui-top-navigation] a:is([data-part-help], [data-part-action]):not([data-disabled]):hover,
+  [data-ui-top-navigation] button:is([data-part-help], [data-part-action]):enabled:hover {
     background-color: var(--_hover-background);
     color: var(--_color);
   }
 
-  [data-ui='top-navigation']
+  [data-ui-top-navigation]
     :is(
-      [data-part='more'],
-      [data-part='search-toggle'],
-      [data-part='search-close'],
-      [data-part='notifications'],
-      [data-part='account']
+      [data-part-more],
+      [data-part-search-toggle],
+      [data-part-search-close],
+      [data-part-notifications],
+      [data-part-account]
     ):enabled:active,
-  [data-ui='top-navigation']
-    a:is([data-part='help'], [data-part='action']):not([data-disabled]):active,
-  [data-ui='top-navigation'] button:is([data-part='help'], [data-part='action']):enabled:active {
+  [data-ui-top-navigation] a:is([data-part-help], [data-part-action]):not([data-disabled]):active,
+  [data-ui-top-navigation] button:is([data-part-help], [data-part-action]):enabled:active {
     background-color: var(--_active-background);
     color: var(--_color);
     transition-duration: var(--slotted-duration-instant);
   }
 
   /** A control whose layer is open holds the ground the pointer gave it. */
-  [data-ui='top-navigation']
+  [data-ui-top-navigation]
     :is(
-      [data-part='more'],
-      [data-part='notifications'],
-      [data-part='account'],
-      [data-part='help'],
-      [data-part='action']
+      [data-part-more],
+      [data-part-notifications],
+      [data-part-account],
+      [data-part-help],
+      [data-part-action]
     )[data-open] {
     background-color: var(--_hover-background);
     color: var(--_color);
   }
 
-  [data-ui='top-navigation']
+  [data-ui-top-navigation]
     :is(
-      [data-part='more'],
-      [data-part='search-toggle'],
-      [data-part='search-close'],
-      [data-part='help'],
-      [data-part='notifications'],
-      [data-part='account'],
-      [data-part='action']
+      [data-part-more],
+      [data-part-search-toggle],
+      [data-part-search-close],
+      [data-part-help],
+      [data-part-notifications],
+      [data-part-account],
+      [data-part-action]
     ):focus-visible {
     outline: var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);
     outline-offset: var(--slotted-focus-ring-offset, 2px);
   }
 
-  [data-ui='top-navigation']
+  [data-ui-top-navigation]
     :is(
-      [data-part='more'],
-      [data-part='search-toggle'],
-      [data-part='search-close'],
-      [data-part='notifications'],
-      [data-part='account']
+      [data-part-more],
+      [data-part-search-toggle],
+      [data-part-search-close],
+      [data-part-notifications],
+      [data-part-account]
     ):disabled,
-  [data-ui='top-navigation'] button:is([data-part='help'], [data-part='action']):disabled {
+  [data-ui-top-navigation] button:is([data-part-help], [data-part-action]):disabled {
     color: var(--_disabled-color);
     cursor: not-allowed;
   }
 
   /** The folded destination is where the reader is: `more` says so the way a closed parent does. */
-  [data-ui='top-navigation'] [data-part='more'][data-current] {
+  [data-ui-top-navigation] [data-part-more][data-current] {
     color: var(--_current-color);
   }
 
@@ -690,13 +685,13 @@
    * and the avatar the bar expects is one step under the control — `xs` at
    * `md` — which is what leaves the halo whole inside the control's height.
    */
-  [data-ui='top-navigation'] [data-part='account'] {
+  [data-ui-top-navigation] [data-part-account] {
     border-radius: var(--slotted-radius-full, 9999px);
     gap: var(--slotted-space-3, 0.375rem);
     padding: var(--slotted-space-2, 0.25rem);
   }
 
-  [data-ui='top-navigation'] [data-part='account'] > :not([data-ui='avatar']) {
+  [data-ui-top-navigation] [data-part-account] > :not([data-ui-avatar]) {
     padding-inline-end: var(--slotted-space-3, 0.375rem);
   }
 
@@ -721,7 +716,7 @@
    * figures sat high. `align-content` centres the one line, and the trim
    * below makes that line the ink.
    */
-  [data-ui='top-navigation'] [data-part='count'] {
+  [data-ui-top-navigation] [data-part-count] {
     --_count-font: var(--slotted-control-font-size-sm, 12px);
     --_count-size: calc(var(--_count-font) * var(--slotted-line-height-xs, 1.4));
     --_count-inset: calc((var(--_control-height) - var(--_icon-size)) / 2);
@@ -751,7 +746,7 @@
 
   /** What is centred is the ink rather than the font's metrics, as `badge` and `avatar` do it. */
   @supports (text-box: trim-both cap alphabetic) {
-    [data-ui='top-navigation'] [data-part='count'] {
+    [data-ui-top-navigation] [data-part-count] {
       text-box: trim-both cap alphabetic;
     }
   }
@@ -771,7 +766,7 @@
    * one grid track each, which is not this family's tree; what a field at the
    * start of the middle aligns with is the brand it follows.
    */
-  [data-ui='top-navigation'] [data-part='search'] {
+  [data-ui-top-navigation] [data-part-search] {
     align-items: center;
     display: flex;
     /* A shrink weight far above the brand's, so the field gives way to its
@@ -787,20 +782,20 @@
     min-inline-size: var(--_search-min);
   }
 
-  [data-ui='top-navigation'] [data-part='search'] > :not([data-part='search-close']) {
+  [data-ui-top-navigation] [data-part-search] > :not([data-part-search-close]) {
     flex: 1 1 auto;
     min-inline-size: 0;
   }
 
   /** The toggle and the close exist for the narrow bar alone. */
-  [data-ui='top-navigation'] [data-part='search-toggle'],
-  [data-ui='top-navigation'] [data-part='search-close'] {
+  [data-ui-top-navigation] [data-part-search-toggle],
+  [data-ui-top-navigation] [data-part-search-close] {
     display: none;
   }
 
   /* ── Actions ────────────────────────────────────────────────────────────── */
 
-  [data-ui='top-navigation'] [data-part='actions'] {
+  [data-ui-top-navigation] [data-part-actions] {
     align-items: center;
     display: flex;
     flex: 0 0 auto;
@@ -817,11 +812,11 @@
    * shows it by the count it writes, which is what a list whose folded items
    * have all moved into the panel is left with.
    */
-  [data-ui='top-navigation'] [data-part='item']:has(> [data-part='more']) {
+  [data-ui-top-navigation] [data-part-item]:has(> [data-part-more]) {
     display: none;
   }
 
-  [data-ui='top-navigation'] [data-part='item']:has(> [data-part='more'][data-overflow]) {
+  [data-ui-top-navigation] [data-part-item]:has(> [data-part-more][data-overflow]) {
     display: flex;
   }
 
@@ -832,7 +827,7 @@
    * style the browser has already computed, and closing leaves from wherever
    * the panel is. It arrives from one step above its place (R7).
    */
-  [data-ui='top-navigation'] [data-part='panel'] {
+  [data-ui-top-navigation] [data-part-panel] {
     --_enter-distance: var(--slotted-space-2, 0.25rem);
 
     background-color: var(--_panel-surface);
@@ -860,7 +855,7 @@
     z-index: calc(var(--slotted-z-index-popover, 1100) + var(--slotted-layer-depth, 0));
   }
 
-  [data-ui='top-navigation'] [data-part='panel'][data-open] {
+  [data-ui-top-navigation] [data-part-panel][data-open] {
     opacity: 1;
     transition:
       opacity var(--slotted-duration-medium) var(--slotted-easing-enter),
@@ -870,7 +865,7 @@
     visibility: visible;
   }
 
-  [data-ui='top-navigation'] [data-part='panel-list'] {
+  [data-ui-top-navigation] [data-part-panel-list] {
     display: flex;
     flex-direction: column;
     gap: var(--slotted-space-1, 0.125rem);
@@ -879,7 +874,7 @@
     padding: 0;
   }
 
-  [data-ui='top-navigation'] [data-part='panel-list']:empty {
+  [data-ui-top-navigation] [data-part-panel-list]:empty {
     display: none;
   }
 
@@ -888,16 +883,16 @@
    * type, the whole width, the label at the start. A section trigger in the
    * panel keeps its chevron at the end of the row.
    */
-  [data-ui='top-navigation'] [data-part='panel'] [data-part='item'] {
+  [data-ui-top-navigation] [data-part-panel] [data-part-item] {
     display: flex;
     flex: 0 0 auto;
   }
 
-  [data-ui='top-navigation']
-    [data-part='panel-list']
-    > [data-part='item']
-    > :is([data-part='link'], [data-part='trigger']),
-  [data-ui='top-navigation'] [data-part='panel'] > [data-part='help'] {
+  [data-ui-top-navigation]
+    [data-part-panel-list]
+    > [data-part-item]
+    > :is([data-part-link], [data-part-trigger]),
+  [data-ui-top-navigation] [data-part-panel] > [data-part-help] {
     flex: 1 1 auto;
     font-size: var(--_row-font-size);
     justify-content: flex-start;
@@ -907,11 +902,11 @@
     white-space: normal;
   }
 
-  [data-ui='top-navigation']
-    [data-part='panel-list']
-    > [data-part='item']
-    > [data-part='trigger']
-    > [data-part='indicator'] {
+  [data-ui-top-navigation]
+    [data-part-panel-list]
+    > [data-part-item]
+    > [data-part-trigger]
+    > [data-part-indicator] {
     margin-inline-end: 0;
     margin-inline-start: auto;
   }
@@ -923,28 +918,23 @@
    * reader did not ask for. The rows read the row geometry the folded links
    * already read.
    */
-  [data-ui='top-navigation']
-    [data-part='panel-list']
-    > [data-part='item']:has(> [data-part='content']) {
+  [data-ui-top-navigation] [data-part-panel-list] > [data-part-item]:has(> [data-part-content]) {
     align-items: stretch;
     flex-direction: column;
   }
 
-  [data-ui='top-navigation'] [data-part='panel-list'] > [data-part='item'] > [data-part='content'] {
+  [data-ui-top-navigation] [data-part-panel-list] > [data-part-item] > [data-part-content] {
     display: grid;
     gap: var(--slotted-space-1, 0.125rem);
     padding-block-end: var(--slotted-space-2, 0.25rem);
     padding-inline-start: var(--_control-padding);
   }
 
-  [data-ui='top-navigation']
-    [data-part='panel-list']
-    > [data-part='item']
-    > [data-part='content'][hidden] {
+  [data-ui-top-navigation] [data-part-panel-list] > [data-part-item] > [data-part-content][hidden] {
     display: none;
   }
 
-  [data-ui='top-navigation'] [data-part='panel-list'] [data-part='content'] [data-part='links'] {
+  [data-ui-top-navigation] [data-part-panel-list] [data-part-content] [data-part-links] {
     display: grid;
     gap: var(--slotted-space-1, 0.125rem);
     list-style: none;
@@ -952,7 +942,7 @@
     padding: 0;
   }
 
-  [data-ui='top-navigation'] [data-part='panel-list'] [data-part='content'] [data-part='link'] {
+  [data-ui-top-navigation] [data-part-panel-list] [data-part-content] [data-part-link] {
     align-content: center;
     border-radius: var(--_radius);
     color: var(--_color);
@@ -967,56 +957,56 @@
     transition: background-color var(--_duration) var(--_easing);
   }
 
-  [data-ui='top-navigation']
-    [data-part='panel-list']
-    [data-part='content']
-    [data-part='link']:not([data-disabled], [data-current], [aria-current='page']):hover {
+  [data-ui-top-navigation]
+    [data-part-panel-list]
+    [data-part-content]
+    [data-part-link]:not([data-disabled], [data-current], [aria-current='page']):hover {
     background-color: var(--_hover-background);
   }
 
-  [data-ui='top-navigation']
-    [data-part='panel-list']
-    [data-part='content']
-    [data-part='link']:not([data-disabled], [data-current], [aria-current='page']):active {
+  [data-ui-top-navigation]
+    [data-part-panel-list]
+    [data-part-content]
+    [data-part-link]:not([data-disabled], [data-current], [aria-current='page']):active {
     background-color: var(--_active-background);
     transition-duration: var(--slotted-duration-instant);
   }
 
-  [data-ui='top-navigation']
-    [data-part='panel-list']
-    [data-part='content']
-    [data-part='link']:is([data-current], [aria-current='page']) {
+  [data-ui-top-navigation]
+    [data-part-panel-list]
+    [data-part-content]
+    [data-part-link]:is([data-current], [aria-current='page']) {
     background-color: var(--_current-background);
     box-shadow: inset 0 0 0 var(--_rule-width) var(--_current-edge);
     color: var(--_current-color);
   }
 
-  [data-ui='top-navigation']
-    [data-part='panel-list']
-    [data-part='content']
-    [data-part='link'][data-disabled] {
+  [data-ui-top-navigation]
+    [data-part-panel-list]
+    [data-part-content]
+    [data-part-link][data-disabled] {
     color: var(--_disabled-color);
     cursor: not-allowed;
   }
 
-  [data-ui='top-navigation']
-    [data-part='panel-list']
-    [data-part='content']
-    [data-part='link']:focus-visible {
+  [data-ui-top-navigation]
+    [data-part-panel-list]
+    [data-part-content]
+    [data-part-link]:focus-visible {
     outline: var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);
     outline-offset: calc(var(--slotted-focus-ring-width, 2px) * -1);
   }
 
   /** A link of plain words, or a rich one with no mark, starts its text at the inset. */
-  [data-ui='top-navigation']
-    [data-part='panel-list']
-    [data-part='content']
-    [data-part='link']:not(:has(> [data-part='icon']))
+  [data-ui-top-navigation]
+    [data-part-panel-list]
+    [data-part-content]
+    [data-part-link]:not(:has(> [data-part-icon]))
     > * {
     grid-column: 1 / -1;
   }
 
-  [data-ui='top-navigation'] [data-part='panel-list'] [data-part='content'] [data-part='icon'] {
+  [data-ui-top-navigation] [data-part-panel-list] [data-part-content] [data-part-icon] {
     --slotted-icon-size: var(--_icon-size);
 
     color: var(--_muted-color);
@@ -1024,19 +1014,13 @@
     grid-row: 1 / span 2;
   }
 
-  [data-ui='top-navigation']
-    [data-part='panel-list']
-    [data-part='content']
-    [data-part='description'] {
+  [data-ui-top-navigation] [data-part-panel-list] [data-part-content] [data-part-description] {
     color: var(--_muted-color);
     font-size: var(--slotted-font-size-xs, 0.75rem);
     grid-column: 2;
   }
 
-  [data-ui='top-navigation']
-    [data-part='panel-list']
-    [data-part='content']
-    [data-part='group-label'] {
+  [data-ui-top-navigation] [data-part-panel-list] [data-part-content] [data-part-group-label] {
     color: var(--_muted-color);
     font-size: var(--slotted-font-size-xs, 0.75rem);
     font-weight: var(--slotted-font-weight-semibold, 600);
@@ -1044,7 +1028,7 @@
     padding-inline: var(--_control-padding);
   }
 
-  [data-ui='top-navigation'] [data-part='panel-list'] [data-part='content'] [data-part='footer'] {
+  [data-ui-top-navigation] [data-part-panel-list] [data-part-content] [data-part-footer] {
     align-items: center;
     border-block-start: var(--_rule-width) solid var(--_border-color);
     display: flex;
@@ -1061,7 +1045,7 @@
    * in both places, from the same text. The words are a text node, which no
    * child selector reaches, so the box itself does the hiding.
    */
-  [data-ui='top-navigation'] [data-part='actions'] > [data-part='help'] {
+  [data-ui-top-navigation] [data-part-actions] > [data-part-help] {
     gap: var(--_control-height);
     inline-size: var(--_control-height);
     justify-content: flex-start;
@@ -1069,11 +1053,11 @@
     padding-inline-start: calc((var(--_control-height) - var(--_icon-size)) / 2);
   }
 
-  [data-ui='top-navigation'] [data-part='panel'] > [data-part='help'] {
+  [data-ui-top-navigation] [data-part-panel] > [data-part-help] {
     gap: var(--_gap);
   }
 
-  [data-ui='top-navigation'] [data-part='panel'] > [data-part='context'] {
+  [data-ui-top-navigation] [data-part-panel] > [data-part-context] {
     padding: var(--slotted-space-2, 0.25rem) var(--slotted-space-3, 0.375rem);
   }
 
@@ -1084,20 +1068,20 @@
    * the list and on help, from what the panel holds rather than from what
    * stands before them, for the same reason.
    */
-  [data-ui='top-navigation'] [data-part='panel'] > [data-part='context'] {
+  [data-ui-top-navigation] [data-part-panel] > [data-part-context] {
     order: -1;
   }
 
-  [data-ui='top-navigation'] [data-part='panel'] > [data-part='help'] {
+  [data-ui-top-navigation] [data-part-panel] > [data-part-help] {
     order: 1;
   }
 
-  [data-ui='top-navigation']
-    [data-part='panel']:has(> [data-part='context'])
-    > [data-part='panel-list']:not(:empty),
-  [data-ui='top-navigation']
-    [data-part='panel']:has(> [data-part='panel-list']:not(:empty), > [data-part='context'])
-    > [data-part='help'] {
+  [data-ui-top-navigation]
+    [data-part-panel]:has(> [data-part-context])
+    > [data-part-panel-list]:not(:empty),
+  [data-ui-top-navigation]
+    [data-part-panel]:has(> [data-part-panel-list]:not(:empty), > [data-part-context])
+    > [data-part-help] {
     border-block-start: var(--_rule-width) solid var(--_border-color);
     padding-block-start: var(--slotted-space-2, 0.25rem);
   }
@@ -1111,90 +1095,90 @@
    * width already has the button.
    */
   @container slotted-top-navigation (inline-size < 1024px) {
-    [data-ui='top-navigation'] [data-part='list'] > [data-part='item'][data-priority='low'] {
+    [data-ui-top-navigation] [data-part-list] > [data-part-item][data-priority='low'] {
       display: none;
     }
 
-    [data-ui='top-navigation']
-      [data-part='list']:has(> [data-part='item'][data-priority='low'])
-      > [data-part='item']:has(> [data-part='more']) {
+    [data-ui-top-navigation]
+      [data-part-list]:has(> [data-part-item][data-priority='low'])
+      > [data-part-item]:has(> [data-part-more]) {
       display: flex;
     }
   }
 
   @container slotted-top-navigation (inline-size < 600px) {
-    [data-ui='top-navigation']
-      [data-part='list']
-      > [data-part='item']:not([data-priority='low']):not([data-priority='high']):not(
-        :has(> [data-part='more'])
+    [data-ui-top-navigation]
+      [data-part-list]
+      > [data-part-item]:not([data-priority='low']):not([data-priority='high']):not(
+        :has(> [data-part-more])
       ) {
       display: none;
     }
 
-    [data-ui='top-navigation']
-      [data-part='list']:has(
-        > [data-part='item']:not([data-priority='low']):not([data-priority='high']):not(
-            :has(> [data-part='more'])
+    [data-ui-top-navigation]
+      [data-part-list]:has(
+        > [data-part-item]:not([data-priority='low']):not([data-priority='high']):not(
+            :has(> [data-part-more])
           )
       )
-      > [data-part='item']:has(> [data-part='more']) {
+      > [data-part-item]:has(> [data-part-more]) {
       display: flex;
     }
 
     /* The field gives way to its toggle; open, it takes the whole bar. */
-    [data-ui='top-navigation']:not([data-search-open]) [data-part='search'] {
+    [data-ui-top-navigation]:not([data-search-open]) [data-part-search] {
       display: none;
     }
 
-    [data-ui='top-navigation']:not([data-search-open]) [data-part='search-toggle'] {
+    [data-ui-top-navigation]:not([data-search-open]) [data-part-search-toggle] {
       display: inline-flex;
     }
 
-    [data-ui='top-navigation'][data-search-open] [data-part='search'] {
+    [data-ui-top-navigation][data-search-open] [data-part-search] {
       max-inline-size: none;
       padding-inline: var(--_edge);
     }
 
-    [data-ui='top-navigation'][data-search-open] [data-part='search-close'] {
+    [data-ui-top-navigation][data-search-open] [data-part-search-close] {
       display: inline-flex;
     }
 
-    [data-ui='top-navigation'][data-search-open]
-      > :is([data-part='brand'], [data-part='context'], [data-part='nav'], [data-part='actions']) {
+    [data-ui-top-navigation][data-search-open]
+      > :is([data-part-brand], [data-part-context], [data-part-nav], [data-part-actions]) {
       display: none;
     }
 
     /* The account keeps its avatar and gives up the name beside it. */
-    [data-ui='top-navigation'] [data-part='account'] > :not([data-ui='avatar']) {
+    [data-ui-top-navigation] [data-part-account] > :not([data-ui-avatar]) {
       display: none;
     }
 
     /* The context moves to the panel; in the bar it leaves, and `more` shows for it. */
-    [data-ui='top-navigation'] > [data-part='context'] {
+    [data-ui-top-navigation] > [data-part-context] {
       display: none;
     }
 
-    [data-ui='top-navigation']:has(> [data-part='context'])
-      [data-part='list']
-      > [data-part='item']:has(> [data-part='more']) {
+    [data-ui-top-navigation]:has(> [data-part-context])
+      [data-part-list]
+      > [data-part-item]:has(> [data-part-more]) {
       display: flex;
     }
   }
 
   @container slotted-top-navigation (inline-size < 480px) {
     /* Six controls in a row: the air between them is what gives way. */
-    [data-ui='top-navigation'] {
+    [data-ui-top-navigation] {
       --_gap: var(--slotted-space-2, 0.25rem);
       --_action-gap: var(--slotted-space-2, 0.25rem);
     }
 
-    [data-ui='top-navigation'] [data-part='list'] > [data-part='item'][data-priority='high'] {
+    [data-ui-top-navigation] [data-part-list] > [data-part-item][data-priority='high'] {
       display: none;
     }
 
-    [data-ui='top-navigation']
-      [data-part='list']:has(> [data-part='item'][data-priority='high'])
-      > [data-part='item']:has(> [data-part='more']) {
+    [data-ui-top-navigation]
+      [data-part-list]:has(> [data-part-item][data-priority='high'])
+      > [data-part-item]:has(> [data-part-more]) {
       display: flex;
     }
 
@@ -1204,13 +1188,13 @@
      * gap's far edge instead and grows toward the bell: the disc still sits on
      * the corner, and a pill covers the bell's top before it covers a control.
      */
-    [data-ui='top-navigation'] [data-part='count'] {
+    [data-ui-top-navigation] [data-part-count] {
       inset-inline-end: calc(var(--slotted-border-width-thick, 2px) - var(--_action-gap));
       inset-inline-start: auto;
     }
 
     /* The name leaves the eye and not the DOM: `home` keeps its accessible name. */
-    [data-ui='top-navigation'] [data-part='name'] {
+    [data-ui-top-navigation] [data-part-name] {
       clip-path: inset(50%);
       inline-size: 1px;
       margin: 0;
@@ -1220,22 +1204,22 @@
     }
 
     /* Out of flow, the name leaves its track empty; one track, or the gap stays. */
-    [data-ui='top-navigation'] [data-part='home'] {
+    [data-ui-top-navigation] [data-part-home] {
       grid-template-columns: auto;
     }
 
     /* Help moves to the panel; in the bar it leaves, and `more` shows for it. */
-    [data-ui='top-navigation'] [data-part='actions'] > [data-part='help'] {
+    [data-ui-top-navigation] [data-part-actions] > [data-part-help] {
       display: none;
     }
 
-    [data-ui='top-navigation']:has([data-part='actions'] > [data-part='help'])
-      [data-part='list']
-      > [data-part='item']:has(> [data-part='more']) {
+    [data-ui-top-navigation]:has([data-part-actions] > [data-part-help])
+      [data-part-list]
+      > [data-part-item]:has(> [data-part-more]) {
       display: flex;
     }
 
-    [data-ui='top-navigation'] [data-part='panel'] {
+    [data-ui-top-navigation] [data-part-panel] {
       inline-size: auto;
       inset-inline: var(--_edge);
     }
@@ -1244,8 +1228,8 @@
   /* ── Stillness ──────────────────────────────────────────────────────────── */
 
   @media (prefers-reduced-motion: reduce) {
-    [data-ui='top-navigation'] [data-part='panel'],
-    [data-ui='top-navigation'] [data-part='panel'][data-open] {
+    [data-ui-top-navigation] [data-part-panel],
+    [data-ui-top-navigation] [data-part-panel][data-open] {
       translate: 0 0;
     }
   }
@@ -1253,34 +1237,34 @@
   /* ── Forced colours ─────────────────────────────────────────────────────── */
 
   @media (forced-colors: active) {
-    [data-ui='top-navigation']
-      :is([data-part='nav'] > [data-part='list'], [data-part='panel-list'])
-      > [data-part='item']
-      > [data-part='link']:is([data-current], [aria-current='page']) {
+    [data-ui-top-navigation]
+      :is([data-part-nav] > [data-part-list], [data-part-panel-list])
+      > [data-part-item]
+      > [data-part-link]:is([data-current], [aria-current='page']) {
       background-color: Highlight;
       color: HighlightText;
       forced-color-adjust: none;
     }
 
-    [data-ui='top-navigation'] [data-part='count'] {
+    [data-ui-top-navigation] [data-part-count] {
       background-color: Highlight;
       color: HighlightText;
       forced-color-adjust: none;
     }
 
-    [data-ui='top-navigation']
-      :is([data-part='nav'] > [data-part='list'], [data-part='panel-list'])
-      > [data-part='item'][data-disabled]
-      > [data-part='link'],
-    [data-ui='top-navigation']
-      :is([data-part='nav'] > [data-part='list'], [data-part='panel-list'])
-      > [data-part='item']
-      > [data-part='trigger']:disabled {
+    [data-ui-top-navigation]
+      :is([data-part-nav] > [data-part-list], [data-part-panel-list])
+      > [data-part-item][data-disabled]
+      > [data-part-link],
+    [data-ui-top-navigation]
+      :is([data-part-nav] > [data-part-list], [data-part-panel-list])
+      > [data-part-item]
+      > [data-part-trigger]:disabled {
       color: GrayText;
     }
 
-    [data-ui='top-navigation'][data-frame],
-    [data-ui='top-navigation'] [data-part='panel'] {
+    [data-ui-top-navigation][data-frame],
+    [data-ui-top-navigation] [data-part-panel] {
       border-color: CanvasText;
     }
   }