@slotted/styles 0.1.0-beta.1 → 0.1.0-beta.11

package/src/multi-select/multi-select.css

@@ -44,7 +44,7 @@
    * the two-line label clamp are `select`'s decisions, taken in an earlier
    * session. They are repeated here rather than shared because the three
    * families have three public identifiers, and a stylesheet that painted
-   * `[data-ui='select']` from a multi-select would make one family's selector
+   * `[data-ui-select]` from a multi-select would make one family's selector
    * match another's DOM. The duplication is the price of that boundary.
    *
    * ── What this sheet decides on its own ───────────────────────────────
@@ -71,7 +71,7 @@
 
   /* ── The frame ────────────────────────────────────────────────────────── */
 
-  [data-ui='multi-select'][data-part='root'] {
+  [data-ui-multi-select][data-part-root] {
     --_font-size: var(--slotted-control-font-size-md, 13px);
     --_height: var(--slotted-control-height-md, 34px);
     --_padding-inline: var(--slotted-control-padding-inline-md, 13px);
@@ -145,7 +145,7 @@
       box-shadow var(--slotted-control-transition-duration) var(--slotted-control-transition-easing);
   }
 
-  [data-ui='multi-select'][data-part='root']:not([data-full-width]) {
+  [data-ui-multi-select][data-part-root]:not([data-full-width]) {
     inline-size: auto;
   }
 
@@ -154,7 +154,7 @@
    * role is what the layout-grid pattern asks for, and the geometry belongs to
    * the row that wraps.
    */
-  [data-ui='multi-select'] > [data-part='control'] {
+  [data-ui-multi-select] > [data-part-control] {
     display: flex;
     flex: 1 1 auto;
     min-inline-size: 0;
@@ -171,7 +171,7 @@
    * acts on it was narrower than the rhythm inside it. Whichever part comes
    * first after the row takes the row's own gap.
    */
-  [data-ui='multi-select'] > [data-part='control'] + * {
+  [data-ui-multi-select] > [data-part-control] + * {
     margin-inline-start: var(--_row-gap);
   }
 
@@ -180,7 +180,7 @@
    * which is what keeps `ArrowDown` and `ArrowUp` free for the popup: there is
    * no cell above or below any cell, so the grid answers neither key.
    */
-  [data-ui='multi-select'] [data-part='chips'] {
+  [data-ui-multi-select] [data-part-chips] {
     /**
      * `safe`, because this box scrolls. Centring a scroll container's content
      * pushes the first line above the scrollport when there is more than fits,
@@ -240,7 +240,7 @@
     scrollbar-width: none;
   }
 
-  [data-ui='multi-select'] [data-part='chips']::-webkit-scrollbar {
+  [data-ui-multi-select] [data-part-chips]::-webkit-scrollbar {
     display: none;
   }
 
@@ -250,7 +250,7 @@
    * collapsed by `createCollapse` into the counting chip below, and the whole
    * set is still reachable in the popup's `chosen` band.
    */
-  [data-ui='multi-select'][data-overflow='collapse'] [data-part='chips'] {
+  [data-ui-multi-select][data-overflow='collapse'] [data-part-chips] {
     flex-wrap: nowrap;
     max-block-size: none;
     overflow: hidden;
@@ -267,7 +267,7 @@
    * not to this family, so it has no `data-part` of its own to be selected by,
    * and the query's own input is told apart by the part it does have.
    */
-  [data-ui='multi-select'] [data-part='chips'] input:not([data-part='input']) {
+  [data-ui-multi-select] [data-part-chips] input:not([data-part-input]) {
     background-color: transparent;
     border: 0;
     color: inherit;
@@ -284,7 +284,7 @@
    * or goes to the next one; the only chip that gives way is one wider than the
    * whole row, which is capped here and truncated by `tag.css`.
    */
-  [data-ui='multi-select'] [data-part='chips'] > :not([data-part='field']) {
+  [data-ui-multi-select] [data-part-chips] > :not([data-part-field]) {
     flex: 0 0 auto;
     max-inline-size: 100%;
     /* The row's own height, so three chips plus their gaps divide the cap the
@@ -296,10 +296,10 @@
   /**
    * The chip takes the height the inside of this control has, through the
    * property `tag` reads for it. Set on the row, inherited by every chip, and
-   * no rule of this sheet names `[data-ui='tag']`: the host stands beside the
+   * no rule of this sheet names `[data-ui-tag]`: the host stands beside the
    * tag sheet and never reaches into it.
    */
-  [data-ui='multi-select'] [data-part='chips'] {
+  [data-ui-multi-select] [data-part-chips] {
     --slotted-control-inner-size: var(--_inner-size);
   }
 
@@ -313,7 +313,7 @@
    * of its own the moment two chips were in front of it, and a control 240
    * pixels wide holding two values then stood two rows tall with one row empty.
    */
-  [data-ui='multi-select'] [data-part='field'] {
+  [data-ui-multi-select] [data-part-field] {
     align-items: center;
     display: flex;
     flex: 1 1 var(--slotted-multi-select-field-basis, 4rem);
@@ -326,7 +326,7 @@
    * everything that makes it a text control: the caret, the selection, IME
    * composition, autofill and every native attribute the consumer wrote.
    */
-  [data-ui='multi-select'] [data-part='input'] {
+  [data-ui-multi-select] [data-part-input] {
     background-color: transparent;
     border: 0;
     color: inherit;
@@ -341,18 +341,28 @@
     text-overflow: ellipsis;
   }
 
-  [data-ui='multi-select'] [data-part='input']::placeholder {
+  [data-ui-multi-select] [data-part-input]::placeholder {
     color: var(--slotted-multi-select-placeholder-color, var(--slotted-text-muted, GrayText));
     text-overflow: ellipsis;
   }
 
   /**
-   * Autofill. Chrome paints its own ground over the control's, and a
-   * hundred-pixel inset shadow is the only way to reach it. The signal is kept
-   * rather than erased, in the accent surface the theme owns — the repair
-   * `text-field` makes, for the same reason.
+   * Autofill. Chrome paints its own ground over the input, and a hundred-pixel
+   * inset shadow is the only way to reach it. The signal is kept rather than
+   * erased, in the accent surface the theme owns, and it is the whole
+   * control's: the frame takes the tint under its border and inside its
+   * corner, and the input repaints the browser's ground in the same colour.
+   * Painted on the input alone, the tint left the frame's padding, the slots
+   * and the buttons bare.
    */
-  [data-ui='multi-select'] [data-part='input']:autofill {
+  [data-ui-multi-select][data-part-root]:has([data-part-input]:autofill) {
+    background-color: var(
+      --slotted-multi-select-autofill-background,
+      var(--slotted-tone-accent-surface)
+    );
+  }
+
+  [data-ui-multi-select] [data-part-input]:autofill {
     box-shadow: inset 0 0 0 100px
       var(--slotted-multi-select-autofill-background, var(--slotted-tone-accent-surface));
     -webkit-text-fill-color: var(--slotted-multi-select-color, var(--slotted-text, CanvasText));
@@ -376,7 +386,7 @@
    * its own inner ring two widths in to keep a sliver of ground outside it;
    * here that sliver would cost the text its leading.
    */
-  [data-ui='multi-select'] [data-part='chips'] > :not([data-part='field']):focus-visible {
+  [data-ui-multi-select] [data-part-chips] > :not([data-part-field]):focus-visible {
     outline: var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);
     outline-offset: calc(-1 * var(--slotted-focus-ring-width, 2px));
   }
@@ -387,7 +397,7 @@
    * whose last one happens to be a count, and `createCollapse` measures it the
    * way it measures every other unit.
    */
-  [data-ui='multi-select'] [data-part='chips'] > [data-count] {
+  [data-ui-multi-select] [data-part-chips] > [data-count] {
     flex: none;
   }
 
@@ -397,7 +407,7 @@
    * too narrow for a chip — because a counter with nothing to count against is
    * furniture.
    */
-  [data-ui='multi-select'] > [data-part='counter'] {
+  [data-ui-multi-select] > [data-part-counter] {
     text-box: auto; /* refine the alignment */
     align-self: center;
     color: var(--slotted-multi-select-counter-color, var(--slotted-text-muted, GrayText));
@@ -426,25 +436,25 @@
    * uses for a chosen value. Not a warning tone: reaching the limit is the
    * reader arriving somewhere, not going wrong.
    */
-  [data-ui='multi-select'][data-complete] > [data-part='counter'] {
+  [data-ui-multi-select][data-complete] > [data-part-counter] {
     color: var(--slotted-multi-select-counter-complete-color, var(--slotted-tone-accent-text));
     font-weight: var(--slotted-font-weight-medium, 500);
   }
 
   /* Too narrow for a chip: the count is the whole answer. */
-  [data-ui='multi-select'][data-narrow] [data-part='chips'] > :not([data-part='field']) {
+  [data-ui-multi-select][data-narrow] [data-part-chips] > :not([data-part-field]) {
     display: none;
   }
 
   /* The row takes only the room the count and the buttons leave, so the count
      is what shortens when even that room runs out. */
-  [data-ui='multi-select'][data-narrow] > [data-part='control'] {
+  [data-ui-multi-select][data-narrow] > [data-part-control] {
     flex-basis: 0;
   }
 
   /* ── The two buttons inside the frame ─────────────────────────────────── */
 
-  [data-ui='multi-select'] > :is([data-part='clear'], [data-part='trigger']) {
+  [data-ui-multi-select] > :is([data-part-clear], [data-part-trigger]) {
     align-items: center;
     align-self: center;
     appearance: none;
@@ -476,7 +486,7 @@
    * control is 24 pixels tall — the WCAG 2.2 minimum — so nothing drawn inside
    * it can also be 24.
    */
-  [data-ui='multi-select'] > :is([data-part='clear'], [data-part='trigger'])::after {
+  [data-ui-multi-select] > :is([data-part-clear], [data-part-trigger])::after {
     content: '';
     inset: min(0px, calc((100% - var(--slotted-target-min, 24px)) / 2));
     position: absolute;
@@ -487,23 +497,22 @@
      the hit area above grows to 44 pixels around them. Side by side, neither
      button reaches across the edge the two share. */
   @media (pointer: coarse) {
-    [data-ui='multi-select'] > :is([data-part='clear'], [data-part='trigger'])::after {
+    [data-ui-multi-select] > :is([data-part-clear], [data-part-trigger])::after {
       inset: min(0px, calc((100% - var(--slotted-target-comfortable, 44px)) / 2));
     }
 
-    [data-ui='multi-select']
-      > [data-part='clear']:has(+ [data-part='trigger']:not([hidden]))::after {
+    [data-ui-multi-select] > [data-part-clear]:has(+ [data-part-trigger]:not([hidden]))::after {
       inset-inline-end: 0;
     }
 
-    [data-ui='multi-select'] > [data-part='clear']:not([hidden]) + [data-part='trigger']::after {
+    [data-ui-multi-select] > [data-part-clear]:not([hidden]) + [data-part-trigger]::after {
       inset-inline-start: 0;
     }
   }
 
   /* The cross and the chevron are `Glyph` elements the binding draws, sized
      here to the control's icon step. */
-  [data-ui='multi-select'] > :is([data-part='clear'], [data-part='trigger']) {
+  [data-ui-multi-select] > :is([data-part-clear], [data-part-trigger]) {
     --slotted-icon-size: var(--_icon-size);
   }
 
@@ -512,7 +521,7 @@
    * button is what a reader presses and the arrow is what turns over. The
    * library's own `Glyph` in an `icon` box; a character is never an icon.
    */
-  [data-ui='multi-select'] [data-part='arrow'] {
+  [data-ui-multi-select] [data-part-arrow] {
     align-items: center;
     block-size: var(--_icon-size);
     display: flex;
@@ -520,12 +529,12 @@
     justify-content: center;
   }
 
-  [data-ui='multi-select'] [data-part='arrow'] > [data-ui='icon'] {
+  [data-ui-multi-select] [data-part-arrow] > [data-ui-icon] {
     transition: rotate var(--slotted-control-transition-duration)
       var(--slotted-control-transition-easing);
   }
 
-  [data-ui='multi-select'][data-open] [data-part='arrow'] > [data-ui='icon'] {
+  [data-ui-multi-select][data-open] [data-part-arrow] > [data-ui-icon] {
     rotate: 180deg;
   }
 
@@ -536,7 +545,7 @@
    * onto anything yet — and the arc is the one `spinner/spinner.css` draws for
    * every family that waits.
    */
-  [data-ui='multi-select'] [data-part='busy'] {
+  [data-ui-multi-select] [data-part-busy] {
     --slotted-spinner-size: var(--_icon-size);
 
     align-self: center;
@@ -546,7 +555,7 @@
 
   /* ── Size ─────────────────────────────────────────────────────────────── */
 
-  [data-ui='multi-select'][data-part='root'][data-size='sm'] {
+  [data-ui-multi-select][data-part-root][data-size='sm'] {
     --_font-size: var(--slotted-control-font-size-sm, 12px);
     --_height: var(--slotted-control-height-sm, 30px);
     --_inner-size: var(--slotted-control-inner-size-sm, 22px);
@@ -555,7 +564,7 @@
     --_icon-size: max(var(--_icon-floor), var(--slotted-control-icon-size-sm, 14px));
   }
 
-  [data-ui='multi-select'][data-part='root'][data-size='md'] {
+  [data-ui-multi-select][data-part-root][data-size='md'] {
     --_font-size: var(--slotted-control-font-size-md, 13px);
     --_height: var(--slotted-control-height-md, 34px);
     --_padding-inline: var(--slotted-control-padding-inline-md, 13px);
@@ -564,7 +573,7 @@
     --_inner-size: var(--slotted-control-inner-size-md, 24px);
   }
 
-  [data-ui='multi-select'][data-part='root'][data-size='lg'] {
+  [data-ui-multi-select][data-part-root][data-size='lg'] {
     --_font-size: var(--slotted-control-font-size-lg, 14px);
     --_height: var(--slotted-control-height-lg, 38px);
     --_inner-size: var(--slotted-control-inner-size-lg, 28px);
@@ -575,7 +584,7 @@
 
   /* ── Variant ──────────────────────────────────────────────────────────── */
 
-  [data-ui='multi-select'][data-part='root'][data-variant='subtle'] {
+  [data-ui-multi-select][data-part-root][data-variant='subtle'] {
     background-color: var(
       --slotted-multi-select-subtle-background,
       var(--slotted-surface-sunken, Canvas)
@@ -589,7 +598,7 @@
   /* No edge, no lift, no ground and no corner of its own: the cell it sits in
      is the box, the row is the ground, a cell has no corner, and the resting
      shadow would draw the cell where there is none. */
-  [data-ui='multi-select'][data-part='root'][data-variant='plain'] {
+  [data-ui-multi-select][data-part-root][data-variant='plain'] {
     background-color: transparent;
     border-color: transparent;
     border-radius: var(--slotted-radius-none, 0px);
@@ -597,31 +606,31 @@
   }
 
   @media (forced-colors: active) {
-    [data-ui='multi-select'][data-part='root'][data-variant='plain'] {
+    [data-ui-multi-select][data-part-root][data-variant='plain'] {
       border-color: ButtonBorder;
     }
   }
 
   /* ── States on the control ────────────────────────────────────────────── */
 
-  [data-ui='multi-select'][data-part='root']:hover:not([data-disabled]):not([data-readonly]):not(
+  [data-ui-multi-select][data-part-root]:hover:not([data-disabled]):not([data-readonly]):not(
       [data-invalid]
     ) {
     border-color: var(--slotted-multi-select-hover-border-color, var(--slotted-tone-accent-border));
   }
 
-  [data-ui='multi-select'][data-part='root'][data-variant='subtle']:hover:not([data-disabled]):not(
+  [data-ui-multi-select][data-part-root][data-variant='subtle']:hover:not([data-disabled]):not(
       [data-readonly]
-    ):not([data-invalid]) {
+    ):not([data-invalid]):not(:has([data-part-input]:autofill)) {
     background-color: var(
       --slotted-multi-select-subtle-hover-background,
       var(--slotted-tone-secondary-subtle-hover)
     );
   }
 
-  [data-ui='multi-select'][data-part='root'][data-variant='plain']:hover:not([data-disabled]):not(
+  [data-ui-multi-select][data-part-root][data-variant='plain']:hover:not([data-disabled]):not(
       [data-readonly]
-    ):not([data-invalid]) {
+    ):not([data-invalid]):not(:has([data-part-input]:autofill)) {
     background-color: var(
       --slotted-multi-select-plain-hover-background,
       var(--slotted-tone-secondary-subtle-hover)
@@ -637,14 +646,14 @@
    * script, after a key, and a browser does not always match `:focus-visible`
    * on an element script moved focus to.
    */
-  [data-ui='multi-select'][data-part='root']:has([data-part='input']:focus-visible),
-  [data-ui='multi-select'][data-part='root']:has(
-      [data-part='chips'] > :not([data-part='field']):focus-visible
+  [data-ui-multi-select][data-part-root]:has([data-part-input]:focus-visible),
+  [data-ui-multi-select][data-part-root]:has(
+      [data-part-chips] > :not([data-part-field]):focus-visible
     ) {
     box-shadow: var(--slotted-control-shadow-focus-geometry, 0 1px 4px -1px)
       var(--slotted-focus-ring-color, Highlight);
     outline: var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);
-    outline-offset: var(--slotted-focus-ring-offset, 2px);
+    outline-offset: var(--slotted-control-focus-ring-offset, var(--slotted-focus-ring-offset, 2px));
   }
 
   /**
@@ -654,11 +663,9 @@
    * shadow that appears only under focus is a cell that changes size when it
    * is used.
    */
-  [data-ui='multi-select'][data-part='root'][data-variant='plain']:has(
-      [data-part='input']:focus-visible
-    ),
-  [data-ui='multi-select'][data-part='root'][data-variant='plain']:has(
-      [data-part='chips'] > :not([data-part='field']):focus-visible
+  [data-ui-multi-select][data-part-root][data-variant='plain']:has([data-part-input]:focus-visible),
+  [data-ui-multi-select][data-part-root][data-variant='plain']:has(
+      [data-part-chips] > :not([data-part-field]):focus-visible
     ) {
     box-shadow: none;
     outline-offset: calc(var(--slotted-focus-ring-offset, 2px) * -1);
@@ -669,17 +676,17 @@
    * is two rings for one focus. The frame keeps its lift and gives up the
    * outline while the ring is inside it.
    */
-  [data-ui='multi-select'][data-part='root']:has(
-      [data-part='chips'] > :not([data-part='field']):focus-visible
+  [data-ui-multi-select][data-part-root]:has(
+      [data-part-chips] > :not([data-part-field]):focus-visible
     ) {
     outline: none;
   }
 
-  [data-ui='multi-select'][data-part='root'][data-open]:not([data-disabled]) {
+  [data-ui-multi-select][data-part-root][data-open]:not([data-disabled]) {
     border-color: var(--slotted-multi-select-open-border-color, var(--slotted-tone-accent-border));
   }
 
-  [data-ui='multi-select'][data-part='root'][data-invalid] {
+  [data-ui-multi-select][data-part-root][data-invalid] {
     --slotted-focus-ring-color: var(
       --slotted-multi-select-invalid-focus-ring-color,
       var(--slotted-focus-ring-color-invalid, Highlight)
@@ -707,9 +714,9 @@
     box-shadow: var(--_invalid-edge);
   }
 
-  [data-ui='multi-select'][data-part='root'][data-invalid]:has([data-part='input']:focus-visible),
-  [data-ui='multi-select'][data-part='root'][data-invalid]:has(
-      [data-part='chips'] > :not([data-part='field']):focus-visible
+  [data-ui-multi-select][data-part-root][data-invalid]:has([data-part-input]:focus-visible),
+  [data-ui-multi-select][data-part-root][data-invalid]:has(
+      [data-part-chips] > :not([data-part-field]):focus-visible
     ) {
     box-shadow:
       var(--_invalid-edge),
@@ -717,11 +724,11 @@
         var(--slotted-focus-ring-color, Highlight);
   }
 
-  [data-ui='multi-select'][data-part='root'][data-variant='plain'][data-invalid]:has(
-      [data-part='input']:focus-visible
+  [data-ui-multi-select][data-part-root][data-variant='plain'][data-invalid]:has(
+      [data-part-input]:focus-visible
     ),
-  [data-ui='multi-select'][data-part='root'][data-variant='plain'][data-invalid]:has(
-      [data-part='chips'] > :not([data-part='field']):focus-visible
+  [data-ui-multi-select][data-part-root][data-variant='plain'][data-invalid]:has(
+      [data-part-chips] > :not([data-part-field]):focus-visible
     ) {
     /* The ring lies inside the box here, over the border and an edge as wide as
        it; the edge reaches past the ring. */
@@ -739,23 +746,24 @@
    * control draws its ring double, which a valid ring is not.
    */
   @media (forced-colors: active) {
-    [data-ui='multi-select'][data-part='root'][data-invalid] {
+    [data-ui-multi-select][data-part-root][data-invalid] {
       outline: var(--_invalid-edge-width) solid CanvasText;
       outline-offset: calc(
         -1 * (var(--slotted-control-border-width, 1px) + var(--_invalid-edge-width))
       );
     }
 
-    [data-ui='multi-select'][data-part='root'][data-invalid]:has(
-        [data-part='input']:focus-visible
-      ) {
+    [data-ui-multi-select][data-part-root][data-invalid]:has([data-part-input]:focus-visible) {
       outline: calc(var(--slotted-focus-ring-width, 2px) + var(--_invalid-edge-width)) double
         var(--slotted-focus-ring-color, Highlight);
-      outline-offset: var(--slotted-focus-ring-offset, 2px);
+      outline-offset: var(
+        --slotted-control-focus-ring-offset,
+        var(--slotted-focus-ring-offset, 2px)
+      );
     }
 
-    [data-ui='multi-select'][data-part='root'][data-variant='plain'][data-invalid]:has(
-        [data-part='input']:focus-visible
+    [data-ui-multi-select][data-part-root][data-variant='plain'][data-invalid]:has(
+        [data-part-input]:focus-visible
       ) {
       outline: calc(var(--slotted-focus-ring-width, 2px) + var(--_invalid-edge-width)) double
         var(--slotted-focus-ring-color, Highlight);
@@ -764,11 +772,11 @@
       );
     }
 
-    [data-ui='multi-select'][data-part='root'][data-invalid]:has(
-        [data-part='chips'] > :not([data-part='field']):focus-visible
+    [data-ui-multi-select][data-part-root][data-invalid]:has(
+        [data-part-chips] > :not([data-part-field]):focus-visible
       ),
-    [data-ui='multi-select'][data-part='root'][data-variant='plain'][data-invalid]:has(
-        [data-part='chips'] > :not([data-part='field']):focus-visible
+    [data-ui-multi-select][data-part-root][data-variant='plain'][data-invalid]:has(
+        [data-part-chips] > :not([data-part-field]):focus-visible
       ) {
       outline: var(--_invalid-edge-width) solid CanvasText;
       outline-offset: calc(
@@ -783,14 +791,14 @@
    * the text half; the rest is the family's, because neither pattern has a
    * readonly for a combobox.
    */
-  [data-ui='multi-select'][data-part='root'][data-readonly] {
+  [data-ui-multi-select][data-part-root][data-readonly] {
     background-color: var(
       --slotted-multi-select-readonly-background,
       var(--slotted-tone-secondary-subtle-hover)
     );
   }
 
-  [data-ui='multi-select'][data-part='root'][data-readonly] [data-part='arrow'] {
+  [data-ui-multi-select][data-part-root][data-readonly] [data-part-arrow] {
     opacity: 0.5;
   }
 
@@ -799,8 +807,8 @@
    * because a disabled `fieldset` disables every control inside it and the
    * control has no way to say so.
    */
-  [data-ui='multi-select'][data-part='root'][data-disabled],
-  [data-ui='multi-select'][data-part='root']:has([data-part='input']:disabled) {
+  [data-ui-multi-select][data-part-root][data-disabled],
+  [data-ui-multi-select][data-part-root]:has([data-part-input]:disabled) {
     background-color: var(
       --slotted-multi-select-disabled-background,
       var(--slotted-disabled-background)
@@ -811,16 +819,16 @@
     cursor: not-allowed;
   }
 
-  [data-ui='multi-select']
-    > :is([data-part='clear'], [data-part='trigger']):hover:not(:disabled):not([data-disabled]) {
+  [data-ui-multi-select]
+    > :is([data-part-clear], [data-part-trigger]):hover:not(:disabled):not([data-disabled]) {
     background-color: var(
       --slotted-multi-select-action-hover-background,
       var(--slotted-tone-secondary-subtle-hover)
     );
   }
 
-  [data-ui='multi-select']
-    > :is([data-part='clear'], [data-part='trigger']):active:not(:disabled):not([data-disabled]) {
+  [data-ui-multi-select]
+    > :is([data-part-clear], [data-part-trigger]):active:not(:disabled):not([data-disabled]) {
     background-color: var(
       --slotted-multi-select-action-active-background,
       var(--slotted-tone-secondary-subtle-active)
@@ -833,14 +841,14 @@
    * and a ring around the whole frame would sit still while focus moved inside
    * it.
    */
-  [data-ui='multi-select'] > :is([data-part='clear'], [data-part='trigger']):focus-visible {
+  [data-ui-multi-select] > :is([data-part-clear], [data-part-trigger]):focus-visible {
     outline: var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);
     outline-offset: calc(var(--slotted-focus-ring-offset, 2px) * -1);
   }
 
   /* ── The layer ────────────────────────────────────────────────────────── */
 
-  [data-ui='multi-select'][data-part='positioner'] {
+  [data-ui-multi-select][data-part-positioner] {
     --_surface: var(--slotted-multi-select-surface, var(--slotted-surface-raised, #ffffff));
     --_text: var(--slotted-multi-select-content-text, var(--slotted-text, #0f172a));
     --_muted: var(--slotted-multi-select-content-text-muted, var(--slotted-text-muted, #5b6b7f));
@@ -914,12 +922,12 @@
       translate var(--slotted-duration-short) var(--slotted-easing-exit);
   }
 
-  [data-ui='multi-select'][data-part='positioner'][data-side='top'] {
+  [data-ui-multi-select][data-part-positioner][data-side='top'] {
     translate: 0 var(--_enter-distance);
   }
 
   /* A lateral side has no block direction to arrive from, so it only fades. */
-  [data-ui='multi-select'][data-part='positioner']:is([data-side='left'], [data-side='right']) {
+  [data-ui-multi-select][data-part-positioner]:is([data-side='left'], [data-side='right']) {
     translate: 0 0;
   }
 
@@ -931,7 +939,7 @@
    * it had one. A keyframe states where it starts. The exit stays a transition:
    * it leaves from wherever the layer is, on the closed rule's durations.
    */
-  [data-ui='multi-select'][data-part='positioner'][data-open] {
+  [data-ui-multi-select][data-part-positioner][data-open] {
     opacity: 1;
     translate: 0 0;
     transition: none;
@@ -942,16 +950,16 @@
    * with the side, and a layer written open in static markup — the harness, a
    * docs snippet — is simply there, and is photographed where it stands.
    */
-  [data-ui='multi-select'][data-part='positioner'][data-open][data-positioned] {
+  [data-ui-multi-select][data-part-positioner][data-open][data-positioned] {
     animation: slotted-multi-select-enter-down var(--slotted-duration-medium)
       var(--slotted-easing-enter);
   }
 
-  [data-ui='multi-select'][data-part='positioner'][data-open][data-positioned][data-side='top'] {
+  [data-ui-multi-select][data-part-positioner][data-open][data-positioned][data-side='top'] {
     animation-name: slotted-multi-select-enter-up;
   }
 
-  [data-ui='multi-select'][data-part='positioner'][data-open][data-positioned]:is(
+  [data-ui-multi-select][data-part-positioner][data-open][data-positioned]:is(
       [data-side='left'],
       [data-side='right']
     ) {
@@ -980,37 +988,37 @@
 
   /* Stillness keeps the fade and drops the movement. */
   @media (prefers-reduced-motion: reduce) {
-    [data-ui='multi-select'][data-part='positioner'],
-    [data-ui='multi-select'][data-part='positioner'][data-side='top'],
-    [data-ui='multi-select'][data-part='positioner'][data-side='left'],
-    [data-ui='multi-select'][data-part='positioner'][data-side='right'] {
+    [data-ui-multi-select][data-part-positioner],
+    [data-ui-multi-select][data-part-positioner][data-side='top'],
+    [data-ui-multi-select][data-part-positioner][data-side='left'],
+    [data-ui-multi-select][data-part-positioner][data-side='right'] {
       translate: 0 0;
       transition: opacity var(--slotted-duration-short) var(--slotted-easing-exit);
     }
 
-    [data-ui='multi-select'][data-part='positioner'][data-open][data-positioned],
-    [data-ui='multi-select'][data-part='positioner'][data-open][data-positioned][data-side='top'],
-    [data-ui='multi-select'][data-part='positioner'][data-open][data-positioned][data-side='left'],
-    [data-ui='multi-select'][data-part='positioner'][data-open][data-positioned][data-side='right'] {
+    [data-ui-multi-select][data-part-positioner][data-open][data-positioned],
+    [data-ui-multi-select][data-part-positioner][data-open][data-positioned][data-side='top'],
+    [data-ui-multi-select][data-part-positioner][data-open][data-positioned][data-side='left'],
+    [data-ui-multi-select][data-part-positioner][data-open][data-positioned][data-side='right'] {
       animation-name: slotted-multi-select-fade;
     }
   }
 
-  [data-ui='multi-select'][data-part='positioner'][data-detached] {
+  [data-ui-multi-select][data-part-positioner][data-detached] {
     visibility: hidden;
   }
 
-  [data-ui='multi-select'][data-part='positioner'][data-width='anchor'] {
+  [data-ui-multi-select][data-part-positioner][data-width='anchor'] {
     inline-size: var(--slotted-positioner-anchor-width, auto);
   }
 
-  [data-ui='multi-select'][data-part='positioner'][data-width='content'] {
+  [data-ui-multi-select][data-part-positioner][data-width='content'] {
     inline-size: max-content;
     max-inline-size: min(var(--_measure), var(--slotted-positioner-available-width, 100vw));
     min-inline-size: var(--slotted-positioner-anchor-width, auto);
   }
 
-  [data-ui='multi-select'][data-part='positioner'][data-size='sm'] {
+  [data-ui-multi-select][data-part-positioner][data-size='sm'] {
     --_item-inset: var(--slotted-control-padding-inline-sm, 0.625rem);
     --_item-height: var(--slotted-control-height-sm, 30px);
     --_content-font-size: var(--slotted-control-font-size-sm, 12px);
@@ -1019,7 +1027,7 @@
     --_column-gap: var(--slotted-control-gap-sm, 0.375rem);
   }
 
-  [data-ui='multi-select'][data-part='positioner'][data-size='lg'] {
+  [data-ui-multi-select][data-part-positioner][data-size='lg'] {
     --_item-inset: var(--slotted-control-padding-inline-lg, 1rem);
     --_item-height: var(--slotted-control-height-lg, 38px);
     --_content-font-size: var(--slotted-control-font-size-lg, 14px);
@@ -1030,7 +1038,7 @@
 
   /* ── The surface ──────────────────────────────────────────────────────── */
 
-  [data-ui='multi-select'] > [data-part='content'] {
+  [data-ui-multi-select] > [data-part-content] {
     background: var(--_surface);
     border: var(--_border-width) solid var(--_border-color);
     border-radius: var(--_radius);
@@ -1057,7 +1065,7 @@
    * interaction — the highlight is `aria-activedescendant`, not focus — so a
    * ring here would draw a box around something nobody is operating.
    */
-  [data-ui='multi-select'] > [data-part='content']:focus-visible {
+  [data-ui-multi-select] > [data-part-content]:focus-visible {
     outline: none;
   }
 
@@ -1073,7 +1081,7 @@
    * option's own row, which the list has open beside it, and the chips in the
    * control, which are focusable. `select` recorded the same decision.
    */
-  [data-ui='multi-select'] [data-part='chosen'] {
+  [data-ui-multi-select] [data-part-chosen] {
     background: var(--_surface);
     border-block-end: var(--_border-width) solid var(--_border-color);
     box-sizing: border-box;
@@ -1102,7 +1110,7 @@
 
   /* ── Groups ───────────────────────────────────────────────────────────── */
 
-  [data-ui='multi-select'] [data-part='group'] {
+  [data-ui-multi-select] [data-part-group] {
     display: grid;
     grid-column: 1 / -1;
     grid-template-columns: subgrid;
@@ -1116,12 +1124,12 @@
    * author rule wins over the user agent sheet. Without this the search
    * filtered nothing the reader could see.
    */
-  [data-ui='multi-select'] [data-part='item'][hidden],
-  [data-ui='multi-select'] [data-part='group'][hidden] {
+  [data-ui-multi-select] [data-part-item][hidden],
+  [data-ui-multi-select] [data-part-group][hidden] {
     display: none;
   }
 
-  [data-ui='multi-select'] [data-part='group-label'] {
+  [data-ui-multi-select] [data-part-group-label] {
     color: var(--_muted);
     font-size: var(--_secondary-font-size);
     font-weight: var(--slotted-font-weight-semibold, 600);
@@ -1133,7 +1141,7 @@
 
   /* ── Options ──────────────────────────────────────────────────────────── */
 
-  [data-ui='multi-select'] [data-part='item'] {
+  [data-ui-multi-select] [data-part-item] {
     align-content: center;
     border-radius: var(--_item-radius);
     box-sizing: border-box;
@@ -1157,7 +1165,7 @@
         var(--slotted-control-transition-easing, var(--slotted-easing-standard));
   }
 
-  [data-ui='multi-select'] [data-part='item'][data-current] {
+  [data-ui-multi-select] [data-part-item][data-current] {
     background-color: var(--_highlight);
     /**
      * A ring as well as a ground. Nothing on this surface holds focus — DOM
@@ -1171,11 +1179,11 @@
       var(--slotted-multi-select-highlight-ring, var(--slotted-tone-accent-border));
   }
 
-  [data-ui='multi-select'] [data-part='item']:not([data-disabled]):active {
+  [data-ui-multi-select] [data-part-item]:not([data-disabled]):active {
     background-color: var(--_highlight-active);
   }
 
-  [data-ui='multi-select'] [data-part='item'][data-selected] {
+  [data-ui-multi-select] [data-part-item][data-selected] {
     color: var(--_selected-color);
   }
 
@@ -1188,22 +1196,21 @@
    * and ends. `select` and `combobox` answer the same way, and
    * `selection-block.test.mjs` holds all of them to it.
    */
-  [data-ui='multi-select'] [data-part='item'][data-selected] + [data-part='item'][data-selected] {
+  [data-ui-multi-select] [data-part-item][data-selected] + [data-part-item][data-selected] {
     border-start-end-radius: 0;
     border-start-start-radius: 0;
   }
 
-  [data-ui='multi-select']
-    [data-part='item'][data-selected]:has(+ [data-part='item'][data-selected]) {
+  [data-ui-multi-select] [data-part-item][data-selected]:has(+ [data-part-item][data-selected]) {
     border-end-end-radius: 0;
     border-end-start-radius: 0;
   }
 
-  [data-ui='multi-select'] [data-part='item'][data-selected] > [data-part='label'] {
+  [data-ui-multi-select] [data-part-item][data-selected] > [data-part-label] {
     font-weight: var(--slotted-font-weight-medium, 500);
   }
 
-  [data-ui='multi-select'] [data-part='item'][data-disabled] {
+  [data-ui-multi-select] [data-part-item][data-disabled] {
     color: var(--slotted-disabled-foreground, #64748b);
     cursor: not-allowed;
   }
@@ -1221,7 +1228,7 @@
    * the row cannot do is said by the ink and by the ring, which both step down
    * to the disabled pair.
    */
-  [data-ui='multi-select'] [data-part='item'][data-disabled][data-current] {
+  [data-ui-multi-select] [data-part-item][data-disabled][data-current] {
     box-shadow: inset 0 0 0 var(--slotted-border-width-thin, 1px)
       var(--slotted-disabled-border, #cbd5e1);
     color: var(--slotted-disabled-foreground, #64748b);
@@ -1229,13 +1236,13 @@
 
   /* ── The cells ────────────────────────────────────────────────────────── */
 
-  [data-ui='multi-select'] [data-part='item'] > :is([data-part='indicator'], [data-part='icon']) {
+  [data-ui-multi-select] [data-part-item] > :is([data-part-indicator], [data-part-icon]) {
     block-size: 1lh;
   }
 
   /* Column one holds content and paints none: a `Glyph` in an `Icon` box, or
      artwork of the consumer's own, centred and sized from the column. */
-  [data-ui='multi-select'] [data-part='item'] > [data-part='icon'] {
+  [data-ui-multi-select] [data-part-item] > [data-part-icon] {
     --slotted-icon-size: var(--_content-icon-size);
 
     align-items: center;
@@ -1248,7 +1255,7 @@
     margin-inline-end: var(--_column-gap);
   }
 
-  [data-ui='multi-select'] [data-part='item'] > [data-part='label'] {
+  [data-ui-multi-select] [data-part-item] > [data-part-label] {
     grid-column: 2;
     grid-row: 1;
     min-inline-size: 0;
@@ -1259,7 +1266,7 @@
     overflow-wrap: anywhere;
   }
 
-  [data-ui='multi-select'] [data-part='item'] > [data-part='description'] {
+  [data-ui-multi-select] [data-part-item] > [data-part-description] {
     color: var(--_muted);
     font-size: var(--_secondary-font-size);
     grid-column: 2;
@@ -1269,12 +1276,12 @@
     overflow-wrap: anywhere;
   }
 
-  [data-ui='multi-select'] [data-part='item'][data-disabled] > [data-part='description'] {
+  [data-ui-multi-select] [data-part-item][data-disabled] > [data-part-description] {
     color: inherit;
   }
 
   /* The tick is a `Glyph` the binding draws, at the content's icon step. */
-  [data-ui='multi-select'] [data-part='item'] > [data-part='indicator'] {
+  [data-ui-multi-select] [data-part-item] > [data-part-indicator] {
     --slotted-icon-size: var(--_content-icon-size);
 
     align-items: center;
@@ -1289,7 +1296,7 @@
     transition: opacity var(--slotted-duration-short) var(--slotted-easing-standard);
   }
 
-  [data-ui='multi-select'] [data-part='item'][data-selected] > [data-part='indicator'] {
+  [data-ui-multi-select] [data-part-item][data-selected] > [data-part-indicator] {
     opacity: 1;
   }
 
@@ -1299,7 +1306,7 @@
    * plus rather than the check: the check says "this is in the set" and nothing
    * is in the set yet. The binding draws the plus; the rule only shows it.
    */
-  [data-ui='multi-select'] [data-part='item'][data-create] > [data-part='indicator'] {
+  [data-ui-multi-select] [data-part-item][data-create] > [data-part-indicator] {
     opacity: 1;
   }
 
@@ -1312,13 +1319,13 @@
    * Latin word between them. The repair `status`, `empty` and the counter all
    * make, for the same reason.
    */
-  [data-ui='multi-select'] [data-part='item'][data-create] > [data-part='label'] {
+  [data-ui-multi-select] [data-part-item][data-create] > [data-part-label] {
     unicode-bidi: plaintext;
   }
 
   /* ── Separator, empty, status ─────────────────────────────────────────── */
 
-  [data-ui='multi-select'] [data-part='separator'] {
+  [data-ui-multi-select] [data-part-separator] {
     background-color: var(--slotted-multi-select-separator-color, var(--_border-color));
     block-size: var(--_border-width);
     border: 0;
@@ -1332,7 +1339,7 @@
    * keep the surface's measure rather than collapsing, so nothing jumps when
    * the results land.
    */
-  [data-ui='multi-select'] :is([data-part='empty'], [data-part='status']) {
+  [data-ui-multi-select] :is([data-part-empty], [data-part-status]) {
     color: var(--_muted);
     /* Its own bidi run, ordered by its own content: "3 results" is a European
        number, a neutral space and a Latin word, and in a right-to-left document
@@ -1368,7 +1375,7 @@
    * The status row is also the live region that announces the count, so it is
    * often present with nothing to draw. A row with no text takes no space.
    */
-  [data-ui='multi-select'] [data-part='status']:empty {
+  [data-ui-multi-select] [data-part-status]:empty {
     display: none;
   }
 
@@ -1379,47 +1386,47 @@
    * bars are `skeleton/skeleton.css`'s, and they are hidden from assistive
    * technology because the `status` row beside them is the live region.
    */
-  [data-ui='multi-select'] [data-part='placeholder'] {
+  [data-ui-multi-select] [data-part-placeholder] {
     display: grid;
     grid-column: 1 / -1;
     padding-block: var(--slotted-space-2, 0.25rem);
     padding-inline: var(--_item-inset);
   }
 
-  [data-ui='multi-select'] [data-part='placeholder'] > * {
+  [data-ui-multi-select] [data-part-placeholder] > * {
     align-items: center;
     display: flex;
     min-block-size: var(--_item-height);
   }
 
-  [data-ui='multi-select'] [data-part='placeholder'] > [data-ui='skeleton'] {
+  [data-ui-multi-select] [data-part-placeholder] > [data-ui-skeleton] {
     align-self: center;
   }
 
   /* Three ragged widths: three identical bars read as a table, and a list of
      labels is ragged. */
-  [data-ui='multi-select'] [data-part='placeholder'] > :nth-child(2) [data-ui='skeleton'] {
+  [data-ui-multi-select] [data-part-placeholder] > :nth-child(2) [data-ui-skeleton] {
     inline-size: 78%;
   }
 
-  [data-ui='multi-select'] [data-part='placeholder'] > :nth-child(3) [data-ui='skeleton'] {
+  [data-ui-multi-select] [data-part-placeholder] > :nth-child(3) [data-ui-skeleton] {
     inline-size: 56%;
   }
 
-  [data-ui='multi-select'] > [data-part='content'][data-loading] {
+  [data-ui-multi-select] > [data-part-content][data-loading] {
     cursor: progress;
   }
 
   /* ── Forced colours ───────────────────────────────────────────────────── */
 
   @media (forced-colors: active) {
-    [data-ui='multi-select'] [data-part='item'][data-current] {
+    [data-ui-multi-select] [data-part-item][data-current] {
       background-color: Highlight;
       color: HighlightText;
       forced-color-adjust: none;
     }
 
-    [data-ui='multi-select'] [data-part='item'][data-disabled][data-current] {
+    [data-ui-multi-select] [data-part-item][data-disabled][data-current] {
       background-color: Highlight;
       color: GrayText;
     }