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

package/src/cascader/cascader.css

@@ -47,7 +47,7 @@
 
   /* ── The control ──────────────────────────────────────────────────────── */
 
-  [data-ui='cascader'][data-part='root'] {
+  [data-ui-cascader][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);
@@ -85,18 +85,18 @@
       box-shadow var(--slotted-control-transition-duration) var(--slotted-control-transition-easing);
   }
 
-  [data-ui='cascader'][data-part='root']:has(> [data-part='clear']) {
+  [data-ui-cascader][data-part-root]:has(> [data-part-clear]) {
     grid-template-columns: minmax(0, 1fr) auto auto;
   }
 
-  [data-ui='cascader'][data-part='root']:not([data-full-width]) {
+  [data-ui-cascader][data-part-root]:not([data-full-width]) {
     inline-size: auto;
   }
 
   /* The trigger fills the frame and the two marks sit over it, for the reason
      `select` writes above its own trigger: the chevron ends the control, and
      the clear button is a sibling of the button rather than a widget in it. */
-  [data-ui='cascader'] > [data-part='trigger'] {
+  [data-ui-cascader] > [data-part-trigger] {
     align-items: center;
     appearance: none;
     background-color: transparent;
@@ -120,7 +120,7 @@
     -webkit-tap-highlight-color: transparent;
   }
 
-  [data-ui='cascader'][data-part='root']:has(> [data-part='clear']) > [data-part='trigger'] {
+  [data-ui-cascader][data-part-root]:has(> [data-part-clear]) > [data-part-trigger] {
     padding-inline-end: calc(
       var(--_padding-inline) + var(--_icon-size) + var(--_gap) + var(--_action-size) + var(--_gap)
     );
@@ -133,7 +133,7 @@
    * and eliding the middle of the road to it. The whole path stays in the DOM,
    * so the trigger's name is never the ellipsis.
    */
-  [data-ui='cascader'] [data-part='value'] {
+  [data-ui-cascader] [data-part-value] {
     align-items: baseline;
     display: flex;
     flex: 1 1 auto;
@@ -142,7 +142,7 @@
     white-space: nowrap;
   }
 
-  [data-ui='cascader'] [data-part='value-segment'] {
+  [data-ui-cascader] [data-part-value-segment] {
     flex: 0 1 auto;
     /* Two characters and the ellipsis, the least a segment can say. */
     min-inline-size: 2.5ch;
@@ -160,26 +160,26 @@
    * shortfall, and the last segment overflowed the value unclipped by its own
    * ellipsis at a weight of 0.001.
    */
-  [data-ui='cascader'] [data-part='value-segment'] {
+  [data-ui-cascader] [data-part-value-segment] {
     flex-shrink: 100;
   }
 
-  [data-ui='cascader'] [data-part='value-segment']:first-child {
+  [data-ui-cascader] [data-part-value-segment]:first-child {
     flex-shrink: 50;
   }
 
-  [data-ui='cascader'] [data-part='value-segment']:last-child {
+  [data-ui-cascader] [data-part-value-segment]:last-child {
     flex-shrink: 1;
   }
 
-  [data-ui='cascader'] [data-part='value-separator'] {
+  [data-ui-cascader] [data-part-value-separator] {
     color: var(--slotted-cascader-separator-color, var(--slotted-text-muted, GrayText));
     flex: none;
     padding-inline: var(--slotted-space-2, 0.25rem);
   }
 
   /* Nothing chosen yet: the same weight, one step quieter. */
-  [data-ui='cascader'] [data-part='placeholder'] {
+  [data-ui-cascader] [data-part-placeholder] {
     color: var(--slotted-cascader-placeholder-color, var(--slotted-text-muted, GrayText));
     flex: 1 1 auto;
     min-inline-size: 0;
@@ -189,7 +189,7 @@
   }
 
   /* A multiple selection shows its chips in the content lane, as `select`'s. */
-  [data-ui='cascader'][data-part='root'] > [data-part='tags'] {
+  [data-ui-cascader][data-part-root] > [data-part-tags] {
     align-items: center;
     display: flex;
     gap: var(--slotted-space-2, 0.25rem);
@@ -201,12 +201,12 @@
     pointer-events: none;
   }
 
-  [data-ui='cascader'] > [data-part='tags'] > * {
+  [data-ui-cascader] > [data-part-tags] > * {
     pointer-events: auto;
     position: relative;
   }
 
-  [data-ui='cascader'] [data-part='summary'] {
+  [data-ui-cascader] [data-part-summary] {
     display: block;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -214,7 +214,7 @@
     white-space: nowrap;
   }
 
-  [data-ui='cascader'][data-part='root']:not([data-narrow]) [data-part='summary'] {
+  [data-ui-cascader][data-part-root]:not([data-narrow]) [data-part-summary] {
     block-size: 1px;
     clip-path: inset(50%);
     inline-size: 1px;
@@ -222,11 +222,11 @@
     white-space: nowrap;
   }
 
-  [data-ui='cascader'][data-part='root'][data-narrow] > [data-part='tags'] {
+  [data-ui-cascader][data-part-root][data-narrow] > [data-part-tags] {
     display: none;
   }
 
-  [data-ui='cascader'] > [data-part='arrow'] {
+  [data-ui-cascader] > [data-part-arrow] {
     --slotted-icon-size: var(--_icon-size);
 
     align-items: center;
@@ -240,17 +240,17 @@
     pointer-events: none;
   }
 
-  [data-ui='cascader'] > [data-part='arrow'] > [data-ui='icon'] {
+  [data-ui-cascader] > [data-part-arrow] > [data-ui-icon] {
     transition: rotate var(--slotted-control-transition-duration)
       var(--slotted-control-transition-easing);
   }
 
-  [data-ui='cascader'][data-open] > [data-part='arrow'] > [data-ui='icon'] {
+  [data-ui-cascader][data-open] > [data-part-arrow] > [data-ui-icon] {
     rotate: 180deg;
   }
 
   /* The ring where the chevron stands, while the value's path is resolving. */
-  [data-ui='cascader'] > [data-part='busy'] {
+  [data-ui-cascader] > [data-part-busy] {
     --slotted-spinner-size: var(--_icon-size);
 
     color: var(--slotted-cascader-arrow-color, var(--slotted-text-muted, GrayText));
@@ -259,7 +259,7 @@
     pointer-events: none;
   }
 
-  [data-ui='cascader'] > [data-part='clear'] {
+  [data-ui-cascader] > [data-part-clear] {
     --slotted-icon-size: var(--_icon-size);
 
     align-items: center;
@@ -286,14 +286,14 @@
   }
 
   /* The hit area recovered outside the paint, as `select`'s. */
-  [data-ui='cascader'] > [data-part='clear']::after {
+  [data-ui-cascader] > [data-part-clear]::after {
     content: '';
     inset: min(0px, calc((100% - var(--slotted-target-min, 24px)) / 2));
     position: absolute;
   }
 
   @media (pointer: coarse) {
-    [data-ui='cascader'] > [data-part='clear']::after {
+    [data-ui-cascader] > [data-part-clear]::after {
       inset: min(0px, calc((100% - var(--slotted-target-comfortable, 44px)) / 2));
       inset-inline-end: 0;
     }
@@ -301,7 +301,7 @@
 
   /* ── Size ─────────────────────────────────────────────────────────────── */
 
-  [data-ui='cascader'][data-part='root'][data-size='sm'] {
+  [data-ui-cascader][data-part-root][data-size='sm'] {
     --_font-size: var(--slotted-control-font-size-sm, 12px);
     --_height: var(--slotted-control-height-sm, 30px);
     --_padding-inline: var(--slotted-control-padding-inline-sm, 10px);
@@ -310,7 +310,7 @@
     --_inner-size: var(--slotted-control-inner-size-sm, 22px);
   }
 
-  [data-ui='cascader'][data-part='root'][data-size='lg'] {
+  [data-ui-cascader][data-part-root][data-size='lg'] {
     --_font-size: var(--slotted-control-font-size-lg, 14px);
     --_height: var(--slotted-control-height-lg, 38px);
     --_padding-inline: var(--slotted-control-padding-inline-lg, 16px);
@@ -321,12 +321,12 @@
 
   /* ── Variant ──────────────────────────────────────────────────────────── */
 
-  [data-ui='cascader'][data-part='root'][data-variant='subtle'] {
+  [data-ui-cascader][data-part-root][data-variant='subtle'] {
     background-color: var(--slotted-surface-sunken, Canvas);
     border-color: var(--slotted-border-subtle, ButtonBorder);
   }
 
-  [data-ui='cascader'][data-part='root'][data-variant='plain'] {
+  [data-ui-cascader][data-part-root][data-variant='plain'] {
     background-color: transparent;
     border-color: transparent;
     border-radius: var(--slotted-radius-none, 0px);
@@ -334,51 +334,51 @@
   }
 
   @media (forced-colors: active) {
-    [data-ui='cascader'][data-part='root'][data-variant='plain'] {
+    [data-ui-cascader][data-part-root][data-variant='plain'] {
       border-color: ButtonBorder;
     }
   }
 
   /* ── States on the control ────────────────────────────────────────────── */
 
-  [data-ui='cascader'][data-part='root']:hover:not([data-disabled]):not([data-readonly]):not(
+  [data-ui-cascader][data-part-root]:hover:not([data-disabled]):not([data-readonly]):not(
       [data-invalid]
     ) {
     border-color: var(--slotted-cascader-hover-border-color, var(--slotted-tone-accent-border));
   }
 
-  [data-ui='cascader'][data-part='root'][data-variant='subtle']:hover:not([data-disabled]):not(
+  [data-ui-cascader][data-part-root][data-variant='subtle']:hover:not([data-disabled]):not(
       [data-readonly]
     ):not([data-invalid]) {
     background-color: var(--slotted-tone-secondary-subtle-hover);
   }
 
-  [data-ui='cascader'][data-part='root'][data-variant='plain']:hover:not([data-disabled]):not(
+  [data-ui-cascader][data-part-root][data-variant='plain']:hover:not([data-disabled]):not(
       [data-readonly]
     ):not([data-invalid]) {
     background-color: var(--slotted-tone-secondary-subtle-hover);
     border-color: transparent;
   }
 
-  [data-ui='cascader'][data-part='root']:has(> [data-part='trigger']:focus-visible) {
+  [data-ui-cascader][data-part-root]:has(> [data-part-trigger]: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));
   }
 
-  [data-ui='cascader'][data-part='root'][data-variant='plain']:has(
-      > [data-part='trigger']:focus-visible
+  [data-ui-cascader][data-part-root][data-variant='plain']:has(
+      > [data-part-trigger]:focus-visible
     ) {
     box-shadow: none;
     outline-offset: calc(var(--slotted-focus-ring-offset, 2px) * -1);
   }
 
-  [data-ui='cascader'][data-part='root'][data-open]:not([data-disabled]) {
+  [data-ui-cascader][data-part-root][data-open]:not([data-disabled]) {
     border-color: var(--slotted-cascader-open-border-color, var(--slotted-tone-accent-border));
   }
 
-  [data-ui='cascader'][data-part='root'][data-invalid] {
+  [data-ui-cascader][data-part-root][data-invalid] {
     --slotted-focus-ring-color: var(--slotted-focus-ring-color-invalid, Highlight);
     --_invalid-edge-width: var(
       --slotted-cascader-invalid-edge-width,
@@ -400,15 +400,15 @@
     box-shadow: var(--_invalid-edge);
   }
 
-  [data-ui='cascader'][data-part='root'][data-invalid]:has(> [data-part='trigger']:focus-visible) {
+  [data-ui-cascader][data-part-root][data-invalid]:has(> [data-part-trigger]:focus-visible) {
     box-shadow:
       var(--_invalid-edge),
       var(--slotted-control-shadow-focus-geometry, 0 1px 4px -1px)
         var(--slotted-focus-ring-color, Highlight);
   }
 
-  [data-ui='cascader'][data-part='root'][data-variant='plain'][data-invalid]:has(
-      > [data-part='trigger']:focus-visible
+  [data-ui-cascader][data-part-root][data-variant='plain'][data-invalid]:has(
+      > [data-part-trigger]: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. */
@@ -426,23 +426,24 @@
    * control draws its ring double, which a valid ring is not.
    */
   @media (forced-colors: active) {
-    [data-ui='cascader'][data-part='root'][data-invalid] {
+    [data-ui-cascader][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='cascader'][data-part='root'][data-invalid]:has(
-        > [data-part='trigger']:focus-visible
-      ) {
+    [data-ui-cascader][data-part-root][data-invalid]:has(> [data-part-trigger]: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='cascader'][data-part='root'][data-variant='plain'][data-invalid]:has(
-        > [data-part='trigger']:focus-visible
+    [data-ui-cascader][data-part-root][data-variant='plain'][data-invalid]:has(
+        > [data-part-trigger]:focus-visible
       ) {
       outline: calc(var(--slotted-focus-ring-width, 2px) + var(--_invalid-edge-width)) double
         var(--slotted-focus-ring-color, Highlight);
@@ -452,46 +453,46 @@
     }
   }
 
-  [data-ui='cascader'][data-part='root'][data-readonly] {
+  [data-ui-cascader][data-part-root][data-readonly] {
     background-color: var(--slotted-tone-secondary-subtle-hover);
   }
 
   /* The chevron of a control nobody may open steps down to the muted ink it
      already has plus the disabled one, rather than fading by opacity. */
-  [data-ui='cascader'][data-part='root'][data-readonly] > [data-part='arrow'] {
+  [data-ui-cascader][data-part-root][data-readonly] > [data-part-arrow] {
     color: var(--slotted-disabled-foreground);
   }
 
-  [data-ui='cascader'][data-part='root'][data-disabled],
-  [data-ui='cascader'][data-part='root']:has(> [data-part='trigger']:disabled) {
+  [data-ui-cascader][data-part-root][data-disabled],
+  [data-ui-cascader][data-part-root]:has(> [data-part-trigger]:disabled) {
     background-color: var(--slotted-disabled-background);
     border-color: var(--slotted-disabled-border);
     box-shadow: none;
     color: var(--slotted-disabled-foreground);
   }
 
-  [data-ui='cascader'][data-part='root'][data-disabled] > [data-part='trigger'],
-  [data-ui='cascader'][data-part='root'] > [data-part='trigger']:disabled {
+  [data-ui-cascader][data-part-root][data-disabled] > [data-part-trigger],
+  [data-ui-cascader][data-part-root] > [data-part-trigger]:disabled {
     cursor: not-allowed;
   }
 
-  [data-ui='cascader'] > [data-part='clear']:hover:not(:disabled):not([data-disabled]) {
+  [data-ui-cascader] > [data-part-clear]:hover:not(:disabled):not([data-disabled]) {
     background-color: var(--slotted-tone-secondary-subtle-hover);
     color: var(--slotted-text, CanvasText);
   }
 
-  [data-ui='cascader'] > [data-part='clear']:active:not(:disabled):not([data-disabled]) {
+  [data-ui-cascader] > [data-part-clear]:active:not(:disabled):not([data-disabled]) {
     background-color: var(--slotted-tone-secondary-subtle-active);
   }
 
-  [data-ui='cascader'] > [data-part='clear']:focus-visible {
+  [data-ui-cascader] > [data-part-clear]: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='cascader']:is([data-part='positioner'], [data-part='content']) {
+  [data-ui-cascader]:is([data-part-positioner], [data-part-content]) {
     --_surface: var(--slotted-cascader-surface, var(--slotted-surface-raised, #ffffff));
     --_text: var(--slotted-text, #0f172a);
     --_muted: var(--slotted-text-muted, #5b6b7f);
@@ -546,7 +547,7 @@
     );
   }
 
-  [data-ui='cascader'][data-part='positioner'] {
+  [data-ui-cascader][data-part-positioner] {
     position: absolute;
     inset-block-start: 0;
     z-index: calc(var(--slotted-z-index-popover, 1100) + var(--slotted-layer-depth, 0));
@@ -562,27 +563,27 @@
       translate var(--slotted-duration-short) var(--slotted-easing-exit);
   }
 
-  [data-ui='cascader'][data-part='positioner'][data-side='top'] {
+  [data-ui-cascader][data-part-positioner][data-side='top'] {
     translate: 0 var(--_enter-distance);
   }
 
-  [data-ui='cascader'][data-part='positioner']:is([data-side='left'], [data-side='right']) {
+  [data-ui-cascader][data-part-positioner]:is([data-side='left'], [data-side='right']) {
     translate: 0 0;
   }
 
   /* The entrance is a keyframe, the exit a transition: `select`'s reasoning. */
-  [data-ui='cascader'][data-part='positioner'][data-open] {
+  [data-ui-cascader][data-part-positioner][data-open] {
     opacity: 1;
     translate: 0 0;
     transition: none;
   }
 
-  [data-ui='cascader'][data-part='positioner'][data-open][data-positioned] {
+  [data-ui-cascader][data-part-positioner][data-open][data-positioned] {
     animation: slotted-cascader-enter-down var(--slotted-duration-medium)
       var(--slotted-easing-enter);
   }
 
-  [data-ui='cascader'][data-part='positioner'][data-open][data-positioned][data-side='top'] {
+  [data-ui-cascader][data-part-positioner][data-open][data-positioned][data-side='top'] {
     animation-name: slotted-cascader-enter-up;
   }
 
@@ -607,19 +608,19 @@
   }
 
   @media (prefers-reduced-motion: reduce) {
-    [data-ui='cascader'][data-part='positioner'],
-    [data-ui='cascader'][data-part='positioner'][data-side='top'] {
+    [data-ui-cascader][data-part-positioner],
+    [data-ui-cascader][data-part-positioner][data-side='top'] {
       translate: 0 0;
       transition: opacity var(--slotted-duration-short) var(--slotted-easing-exit);
     }
 
-    [data-ui='cascader'][data-part='positioner'][data-open][data-positioned],
-    [data-ui='cascader'][data-part='positioner'][data-open][data-positioned][data-side='top'] {
+    [data-ui-cascader][data-part-positioner][data-open][data-positioned],
+    [data-ui-cascader][data-part-positioner][data-open][data-positioned][data-side='top'] {
       animation-name: slotted-cascader-fade;
     }
   }
 
-  [data-ui='cascader'][data-part='positioner'][data-detached] {
+  [data-ui-cascader][data-part-positioner][data-detached] {
     visibility: hidden;
   }
 
@@ -628,7 +629,7 @@
    * path is deep, up to the room the positioner reports; one level at a time
    * takes the control's width, and never less than one column.
    */
-  [data-ui='cascader'][data-part='positioner'][data-layout='columns'] {
+  [data-ui-cascader][data-part-positioner][data-layout='columns'] {
     inline-size: max-content;
     max-inline-size: var(--slotted-positioner-available-width, 100vw);
     min-inline-size: var(--slotted-positioner-anchor-width, auto);
@@ -640,18 +641,18 @@
    * control it hangs from. The reserved strip beside it is the layer's, which
    * takes no pointer.
    */
-  [data-ui='cascader'][data-part='positioner'][data-layout='columns'] > [data-part='content'] {
+  [data-ui-cascader][data-part-positioner][data-layout='columns'] > [data-part-content] {
     inline-size: max-content;
     max-inline-size: 100%;
     min-inline-size: min(var(--slotted-positioner-anchor-width, 0px), 100%);
   }
 
-  [data-ui='cascader'][data-part='positioner']:is([data-layout='drill'], [data-layout='tree']) {
+  [data-ui-cascader][data-part-positioner]:is([data-layout='drill'], [data-layout='tree']) {
     inline-size: max(var(--slotted-positioner-anchor-width, 0px), var(--_column-measure));
     max-inline-size: var(--slotted-positioner-available-width, 100vw);
   }
 
-  [data-ui='cascader']:is([data-part='positioner'], [data-part='content'])[data-size='sm'] {
+  [data-ui-cascader]:is([data-part-positioner], [data-part-content])[data-size='sm'] {
     --_item-inset: calc(var(--slotted-control-padding-inline-sm, 0.625rem) - var(--_inset-inline));
     --_item-height: var(--slotted-control-height-sm, 30px);
     --_content-font-size: var(--slotted-control-font-size-sm, 12px);
@@ -661,7 +662,7 @@
     --_column-gap: var(--slotted-control-gap-sm, 0.375rem);
   }
 
-  [data-ui='cascader']:is([data-part='positioner'], [data-part='content'])[data-size='lg'] {
+  [data-ui-cascader]:is([data-part-positioner], [data-part-content])[data-size='lg'] {
     --_item-inset: calc(var(--slotted-control-padding-inline-lg, 1rem) - var(--_inset-inline));
     --_item-height: var(--slotted-control-height-lg, 38px);
     --_content-font-size: var(--slotted-control-font-size-lg, 14px);
@@ -678,7 +679,7 @@
    * panel — bounded by the height the positioner reports. The panel is the one
    * that gives, and inside it each column scrolls on its own.
    */
-  [data-ui='cascader'] > [data-part='content'] {
+  [data-ui-cascader] > [data-part-content] {
     background: var(--_surface);
     border: var(--_border-width) solid var(--_border-color);
     border-radius: var(--_radius);
@@ -699,7 +700,7 @@
     pointer-events: auto;
   }
 
-  [data-ui='cascader'] > [data-part='content']:focus-visible {
+  [data-ui-cascader] > [data-part-content]:focus-visible {
     outline: none;
   }
 
@@ -710,7 +711,7 @@
    * and is as wide as its columns up to its container. The tree inside it
    * takes focus here, and the surface draws the ring for it.
    */
-  [data-ui='cascader'][data-part='content'] {
+  [data-ui-cascader][data-part-content] {
     background: var(--_surface);
     border: var(--_border-width) solid var(--_border-color);
     border-radius: var(--_radius);
@@ -726,14 +727,14 @@
     overflow: hidden;
   }
 
-  [data-ui='cascader'][data-part='content']:has(> [data-part='panel']:focus-visible) {
+  [data-ui-cascader][data-part-content]:has(> [data-part-panel]:focus-visible) {
     outline: var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);
     outline-offset: var(--slotted-focus-ring-offset, 2px);
   }
 
   /* ── The search field ─────────────────────────────────────────────────── */
 
-  [data-ui='cascader'] [data-part='search'] {
+  [data-ui-cascader] [data-part-search] {
     align-items: center;
     border-block-end: var(--_border-width) solid var(--_border-color);
     box-sizing: border-box;
@@ -745,7 +746,7 @@
     padding-inline: calc(var(--_inset-inline) + var(--_item-inset));
   }
 
-  [data-ui='cascader'] [data-part='search'] > [data-ui='icon'] {
+  [data-ui-cascader] [data-part-search] > [data-ui-icon] {
     --slotted-icon-size: var(--_content-icon-size);
 
     color: var(--_muted);
@@ -754,7 +755,7 @@
 
   /* No ring: the field holds focus for as long as the popup is open, so a
      ring would be a border, not a state. The caret says where focus is. */
-  [data-ui='cascader'] [data-part='search-input'] {
+  [data-ui-cascader] [data-part-search-input] {
     background-color: transparent;
     border: 0;
     color: inherit;
@@ -766,7 +767,7 @@
     text-overflow: ellipsis;
   }
 
-  [data-ui='cascader'] [data-part='search-input']::placeholder {
+  [data-ui-cascader] [data-part-search-input]::placeholder {
     color: var(--_muted);
     text-overflow: ellipsis;
   }
@@ -784,7 +785,7 @@
    * (`cascaderCrumbs`), so the row is as tall at the tenth level as at the
    * second and the list under it does not move down as the reader drills.
    */
-  [data-ui='cascader'] [data-part='breadcrumb'] {
+  [data-ui-cascader] [data-part-breadcrumb] {
     align-items: center;
     border-block-end: var(--_border-width) solid var(--_border-color);
     color: var(--_muted);
@@ -802,13 +803,13 @@
     white-space: nowrap;
   }
 
-  [data-ui='cascader'] [data-part='breadcrumb'] > [data-ui='icon'] {
+  [data-ui-cascader] [data-part-breadcrumb] > [data-ui-icon] {
     --slotted-icon-size: var(--_secondary-font-size);
 
     flex: none;
   }
 
-  [data-ui='cascader'] [data-part='crumb'] {
+  [data-ui-cascader] [data-part-crumb] {
     appearance: none;
     background-color: transparent;
     border: 0;
@@ -833,24 +834,24 @@
       color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing);
   }
 
-  [data-ui='cascader'] [data-part='crumb']:hover:not([aria-current]):not(:disabled) {
+  [data-ui-cascader] [data-part-crumb]:hover:not([aria-current]):not(:disabled) {
     background-color: var(--_highlight);
     color: var(--_text);
   }
 
-  [data-ui='cascader'] [data-part='crumb']:active:not([aria-current]):not(:disabled) {
+  [data-ui-cascader] [data-part-crumb]:active:not([aria-current]):not(:disabled) {
     background-color: var(--_highlight-active);
   }
 
   /* Outside the crumb: an inset ring sat on the first letter of a label the
      crumb's own padding barely clears. The row's block padding holds it. */
-  [data-ui='cascader'] [data-part='crumb']:focus-visible {
+  [data-ui-cascader] [data-part-crumb]:focus-visible {
     outline: var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);
     outline-offset: 0;
   }
 
   /* The level on show: where the reader is, and not a place to go. */
-  [data-ui='cascader'] [data-part='crumb'][aria-current] {
+  [data-ui-cascader] [data-part-crumb][aria-current] {
     color: var(--_text);
     cursor: default;
     flex-shrink: 1;
@@ -859,7 +860,7 @@
   }
 
   /* The fold: the middle of a deep trail as one crumb, its ellipsis whole. */
-  [data-ui='cascader'] [data-part='crumb'][data-collapsed] {
+  [data-ui-cascader] [data-part-crumb][data-collapsed] {
     flex: none;
     min-inline-size: var(--slotted-target-min, 24px);
   }
@@ -873,7 +874,7 @@
    * scrolled them instead, and at 420 pixels the third column sat under the
    * rounded edge with nothing on a touch screen saying there was more.
    */
-  [data-ui='cascader'] [data-part='panel'] {
+  [data-ui-cascader] [data-part-panel] {
     display: flex;
     flex: 1 1 auto;
     min-block-size: 0;
@@ -887,7 +888,7 @@
    * one before by a hairline from the border scale — the edge a reader follows
    * from a branch to its children.
    */
-  [data-ui='cascader'] [data-part='column'] {
+  [data-ui-cascader] [data-part-column] {
     align-content: start;
     box-sizing: border-box;
     display: grid;
@@ -911,18 +912,18 @@
     padding-inline: var(--_inset-inline);
   }
 
-  [data-ui='cascader'] [data-part='column'] + [data-part='column'] {
+  [data-ui-cascader] [data-part-column] + [data-part-column] {
     border-inline-start: var(--_border-width) solid var(--_border-color);
   }
 
   /* One level at a time, or every level in one run: the column is the panel. */
-  [data-ui='cascader']:is([data-layout='drill'], [data-layout='tree']) [data-part='column'] {
+  [data-ui-cascader]:is([data-layout='drill'], [data-layout='tree']) [data-part-column] {
     flex: 1 1 auto;
     inline-size: auto;
   }
 
   /* A level still loading says so to a reader while its rows wait. */
-  [data-ui='cascader'] [data-part='column'][aria-busy='true'] {
+  [data-ui-cascader] [data-part-column][aria-busy='true'] {
     cursor: progress;
   }
 
@@ -933,7 +934,7 @@
    * cursor is `aria-activedescendant`, so a node is neither focusable nor a
    * button, as `select`'s option is not.
    */
-  [data-ui='cascader'] [data-part='node'] {
+  [data-ui-cascader] [data-part-node] {
     align-content: center;
     border-radius: var(--_item-radius);
     box-sizing: border-box;
@@ -962,7 +963,7 @@
    * carrying `aria-level`, because a node that held its children would paint
    * its highlight over them.
    */
-  [data-ui='cascader'][data-layout='tree'] [data-part='node'] {
+  [data-ui-cascader][data-layout='tree'] [data-part-node] {
     /* Its own tracks rather than the column's: a subgrid gives every row the
        widest padding among them, so the first capture drew every level at the
        deepest indent. The end tracks still line up, because every node ends in
@@ -980,55 +981,55 @@
    * dark scheme, where no neutral ground below the cursor lifts, the ink
    * carries it alone.
    */
-  [data-ui='cascader'] [data-part='node'][data-expanded] {
+  [data-ui-cascader] [data-part-node][data-expanded] {
     background-color: var(--_path);
   }
 
   /* And a weight, which is what carries the road where no ground does: the
      high-contrast scheme draws the path ground as its own surface. */
-  [data-ui='cascader'] [data-part='node'][data-expanded] > [data-part='label'] {
+  [data-ui-cascader] [data-part-node][data-expanded] > [data-part-label] {
     font-weight: var(--slotted-font-weight-semibold, 600);
   }
 
-  [data-ui='cascader'][data-layout='tree'] [data-part='node'][data-expanded] {
+  [data-ui-cascader][data-layout='tree'] [data-part-node][data-expanded] {
     background-color: transparent;
   }
 
   /* The cursor, a ground and a one-pixel ring, for the reason `select` gives. */
-  [data-ui='cascader'] [data-part='node'][data-current] {
+  [data-ui-cascader] [data-part-node][data-current] {
     background-color: var(--_highlight);
     box-shadow: inset 0 0 0 var(--slotted-border-width-thin, 1px)
       var(--slotted-cascader-highlight-ring, var(--slotted-tone-accent-border));
   }
 
-  [data-ui='cascader'] [data-part='node']:not([data-disabled]):active {
+  [data-ui-cascader] [data-part-node]:not([data-disabled]):active {
     background-color: var(--_highlight-active);
   }
 
-  [data-ui='cascader'] [data-part='node'][data-selected] {
+  [data-ui-cascader] [data-part-node][data-selected] {
     color: var(--_selected-color);
   }
 
-  [data-ui='cascader'] [data-part='node'][data-selected] > [data-part='label'] {
+  [data-ui-cascader] [data-part-node][data-selected] > [data-part-label] {
     font-weight: var(--slotted-font-weight-medium, 500);
   }
 
-  [data-ui='cascader'] [data-part='node'][data-disabled] {
+  [data-ui-cascader] [data-part-node][data-disabled] {
     color: var(--slotted-disabled-foreground, #64748b);
     cursor: not-allowed;
   }
 
   /* The cursor lifts on a disabled node too; the ink and the ring step down. */
-  [data-ui='cascader'] [data-part='node'][data-disabled][data-current] {
+  [data-ui-cascader] [data-part-node][data-disabled][data-current] {
     box-shadow: inset 0 0 0 var(--slotted-border-width-thin, 1px)
       var(--slotted-disabled-border, #cbd5e1);
   }
 
   /* ── The cells ────────────────────────────────────────────────────────── */
 
-  [data-ui='cascader']
-    [data-part='node']
-    > :is([data-part='indicator'], [data-part='icon'], [data-part='expander']) {
+  [data-ui-cascader]
+    [data-part-node]
+    > :is([data-part-indicator], [data-part-icon], [data-part-expander]) {
     block-size: 1lh;
   }
 
@@ -1036,7 +1037,7 @@
    * Track two: the node's own picture, content the consumer supplies and the
    * column sizes. No stylesheet fills it.
    */
-  [data-ui='cascader'] [data-part='node'] > [data-part='icon'] {
+  [data-ui-cascader] [data-part-node] > [data-part-icon] {
     --slotted-icon-size: var(--_content-icon-size);
 
     align-items: center;
@@ -1048,12 +1049,12 @@
     margin-inline-end: var(--_column-gap);
   }
 
-  [data-ui='cascader'] [data-part='node'] > [data-part='icon'] > * {
+  [data-ui-cascader] [data-part-node] > [data-part-icon] > * {
     font-size: var(--_content-icon-size);
   }
 
   /* Track three, the only one that gives way: two lines, then an ellipsis. */
-  [data-ui='cascader'] [data-part='node'] > [data-part='label'] {
+  [data-ui-cascader] [data-part-node] > [data-part-label] {
     display: -webkit-box;
     grid-column: 3;
     grid-row: 1;
@@ -1068,7 +1069,7 @@
    * The path of a search hit, or the line under a label. Quieter by the
    * secondary step and never in the way of the label above it.
    */
-  [data-ui='cascader'] [data-part='node'] > [data-part='description'] {
+  [data-ui-cascader] [data-part-node] > [data-part-description] {
     color: var(--_muted);
     font-size: var(--_secondary-font-size);
     grid-column: 3;
@@ -1080,12 +1081,12 @@
     white-space: nowrap;
   }
 
-  [data-ui='cascader'] [data-part='node'][data-disabled] > [data-part='description'] {
+  [data-ui-cascader] [data-part-node][data-disabled] > [data-part-description] {
     color: inherit;
   }
 
   /* Track four: the count of a branch, or how many inside it are chosen. */
-  [data-ui='cascader'] [data-part='node'] > [data-part='meta'] {
+  [data-ui-cascader] [data-part-node] > [data-part-meta] {
     color: var(--_muted);
     font-size: var(--_secondary-font-size);
     font-variant-numeric: tabular-nums;
@@ -1096,8 +1097,8 @@
     white-space: nowrap;
   }
 
-  [data-ui='cascader'] [data-part='node'][data-selected] > [data-part='meta'],
-  [data-ui='cascader'] [data-part='node'][data-indeterminate] > [data-part='meta'] {
+  [data-ui-cascader] [data-part-node][data-selected] > [data-part-meta],
+  [data-ui-cascader] [data-part-node][data-indeterminate] > [data-part-meta] {
     color: var(--_selected-color);
   }
 
@@ -1106,7 +1107,7 @@
    * direction, from the `directional` icon box the binding draws, and takes
    * the label's ink on the path.
    */
-  [data-ui='cascader'] [data-part='node'] > [data-part='expander'] {
+  [data-ui-cascader] [data-part-node] > [data-part-expander] {
     --slotted-icon-size: var(--_content-icon-size);
 
     align-items: center;
@@ -1122,27 +1123,25 @@
       var(--slotted-control-transition-easing);
   }
 
-  [data-ui='cascader']
-    [data-part='node']:is([data-expanded], [data-current])
-    > [data-part='expander'] {
+  [data-ui-cascader] [data-part-node]:is([data-expanded], [data-current]) > [data-part-expander] {
     color: inherit;
   }
 
-  [data-ui='cascader'] [data-part='node'] > [data-part='expander'] > [data-ui='icon'] {
+  [data-ui-cascader] [data-part-node] > [data-part-expander] > [data-ui-icon] {
     transition: rotate var(--slotted-control-transition-duration)
       var(--slotted-control-transition-easing);
   }
 
   /* In the tree the level opens under the node, so the chevron turns down. */
-  [data-ui='cascader'][data-layout='tree']
-    [data-part='node'][data-expanded]
-    > [data-part='expander']
-    > [data-ui='icon'] {
+  [data-ui-cascader][data-layout='tree']
+    [data-part-node][data-expanded]
+    > [data-part-expander]
+    > [data-ui-icon] {
     rotate: 90deg;
   }
 
   /* A branch whose level is on its way: the ring stands where the chevron stood. */
-  [data-ui='cascader'] [data-part='expander'] > [data-ui='spinner'] {
+  [data-ui-cascader] [data-part-expander] > [data-ui-spinner] {
     --slotted-spinner-size: var(--_content-icon-size);
   }
 
@@ -1151,7 +1150,7 @@
    * track, because only a node that is not a branch — or a branch the consumer
    * made selectable — carries it.
    */
-  [data-ui='cascader'] [data-part='node'] > [data-part='indicator'] {
+  [data-ui-cascader] [data-part-node] > [data-part-indicator] {
     --slotted-icon-size: var(--_content-icon-size);
 
     align-items: center;
@@ -1169,7 +1168,7 @@
       scale var(--slotted-duration-short) var(--slotted-easing-exit);
   }
 
-  [data-ui='cascader'] [data-part='node'][data-selected] > [data-part='indicator'] {
+  [data-ui-cascader] [data-part-node][data-selected] > [data-part-indicator] {
     opacity: 1;
     scale: 1;
     transition:
@@ -1183,7 +1182,7 @@
    * same solid ground when chosen, and the mark — a check, or the dash while
    * part of the branch is chosen — revealed along its stroke.
    */
-  [data-ui='cascader'][data-selection='multiple'] [data-part='node'] > [data-part='indicator'] {
+  [data-ui-cascader][data-selection='multiple'] [data-part-node] > [data-part-indicator] {
     --_mark-inset: var(--slotted-cascader-mark-inset, 2px);
     --_check-border: var(--slotted-border-width-medium, 1.5px);
     --slotted-icon-size: calc(var(--_check-size) - 2 * var(--_mark-inset));
@@ -1209,10 +1208,10 @@
         var(--slotted-control-transition-easing);
   }
 
-  [data-ui='cascader'][data-selection='multiple']
-    [data-part='node']
-    > [data-part='indicator']
-    > [data-ui='icon'] {
+  [data-ui-cascader][data-selection='multiple']
+    [data-part-node]
+    > [data-part-indicator]
+    > [data-ui-icon] {
     clip-path: inset(0% 100% 0% 0%);
     color: var(--slotted-tone-accent-on-solid);
     inset-block-start: calc(var(--_mark-inset) - var(--_check-border));
@@ -1225,24 +1224,24 @@
       opacity var(--slotted-duration-medium) var(--slotted-control-transition-easing);
   }
 
-  [data-ui='cascader'][data-selection='multiple']
-    [data-part='node']:is([data-selected], [data-indeterminate])
-    > [data-part='indicator'] {
+  [data-ui-cascader][data-selection='multiple']
+    [data-part-node]:is([data-selected], [data-indeterminate])
+    > [data-part-indicator] {
     background-color: var(--slotted-tone-accent-solid);
     border-color: var(--slotted-tone-accent-solid);
   }
 
-  [data-ui='cascader'][data-selection='multiple']
-    [data-part='node']:is([data-selected], [data-indeterminate])
-    > [data-part='indicator']
-    > [data-ui='icon'] {
+  [data-ui-cascader][data-selection='multiple']
+    [data-part-node]:is([data-selected], [data-indeterminate])
+    > [data-part-indicator]
+    > [data-ui-icon] {
     clip-path: inset(0% 0% 0% 0%);
     opacity: 1;
   }
 
-  [data-ui='cascader'][data-selection='multiple']
-    [data-part='node'][data-disabled]
-    > [data-part='indicator'] {
+  [data-ui-cascader][data-selection='multiple']
+    [data-part-node][data-disabled]
+    > [data-part-indicator] {
     background-color: var(--slotted-disabled-background, Canvas);
     border-color: var(--slotted-disabled-border, GrayText);
   }
@@ -1254,7 +1253,7 @@
    * the height of a node, descending in width, from `skeleton`'s sheet. The
    * column's `aria-busy` is what a reader hears.
    */
-  [data-ui='cascader'] [data-part='loader'] {
+  [data-ui-cascader] [data-part-loader] {
     align-items: center;
     display: flex;
     grid-column: 1 / -1;
@@ -1262,15 +1261,15 @@
     padding-inline: var(--_item-inset);
   }
 
-  [data-ui='cascader'] [data-part='loader'] > [data-ui='skeleton'] {
+  [data-ui-cascader] [data-part-loader] > [data-ui-skeleton] {
     flex: 1 1 auto;
   }
 
-  [data-ui='cascader'] [data-part='loader']:nth-child(3n + 2) > [data-ui='skeleton'] {
+  [data-ui-cascader] [data-part-loader]:nth-child(3n + 2) > [data-ui-skeleton] {
     flex: 0 1 78%;
   }
 
-  [data-ui='cascader'] [data-part='loader']:nth-child(3n) > [data-ui='skeleton'] {
+  [data-ui-cascader] [data-part-loader]:nth-child(3n) > [data-ui-skeleton] {
     flex: 0 1 56%;
   }
 
@@ -1279,7 +1278,7 @@
    * with its retry. Centred sentences in their own bidi run, as `select`'s are,
    * and never narrower than a word.
    */
-  [data-ui='cascader'] :is([data-part='empty'], [data-part='status']) {
+  [data-ui-cascader] :is([data-part-empty], [data-part-status]) {
     align-items: center;
     color: var(--_muted);
     display: flex;
@@ -1293,26 +1292,26 @@
     unicode-bidi: plaintext;
   }
 
-  [data-ui='cascader'] [data-part='status']:empty {
+  [data-ui-cascader] [data-part-status]:empty {
     display: none;
   }
 
   /* ── Forced colours ───────────────────────────────────────────────────── */
 
   @media (forced-colors: active) {
-    [data-ui='cascader'] [data-part='node'][data-current] {
+    [data-ui-cascader] [data-part-node][data-current] {
       background-color: Highlight;
       color: HighlightText;
       forced-color-adjust: none;
     }
 
-    [data-ui='cascader'] [data-part='node'][data-disabled][data-current] {
+    [data-ui-cascader] [data-part-node][data-disabled][data-current] {
       background-color: Highlight;
       color: GrayText;
     }
 
     /* The path would lose its ground to Canvas: an outline keeps the road. */
-    [data-ui='cascader'] [data-part='node'][data-expanded]:not([data-current]) {
+    [data-ui-cascader] [data-part-node][data-expanded]:not([data-current]) {
       outline: 1px solid CanvasText;
       outline-offset: -1px;
     }