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

package/src/segmented-control/segmented-control.css

@@ -41,7 +41,7 @@
    * the name that says so, which is the convention `docs/build-briefing.md`
    * sets. They are not design tokens and no theme writes them.
    */
-  [data-ui='segmented-control'][data-part='root'] {
+  [data-ui-segmented-control][data-part-root] {
     --_count: var(--slotted-segmented-control-count, 1);
     --_index: var(--slotted-segmented-control-index, 0);
     --_height: var(--slotted-control-height-md, 34px);
@@ -112,13 +112,13 @@
     position: relative;
   }
 
-  [data-ui='segmented-control'][data-part='root']:empty {
+  [data-ui-segmented-control][data-part-root]:empty {
     display: none;
   }
 
   /* ── Size ─────────────────────────────────────────────────────────────── */
 
-  [data-ui='segmented-control'][data-part='root'][data-size='sm'] {
+  [data-ui-segmented-control][data-part-root][data-size='sm'] {
     --_height: var(--slotted-control-height-sm, 30px);
     --_padding-inline: var(--slotted-control-padding-inline-sm, 10px);
     --_font-size: var(--slotted-control-font-size-sm, 12px);
@@ -126,7 +126,7 @@
     --_gap: var(--slotted-control-gap-sm, 6px);
   }
 
-  [data-ui='segmented-control'][data-part='root'][data-size='lg'] {
+  [data-ui-segmented-control][data-part-root][data-size='lg'] {
     --_height: var(--slotted-control-height-lg, 38px);
     --_padding-inline: var(--slotted-control-padding-inline-lg, 16px);
     --_font-size: var(--slotted-control-font-size-lg, 14px);
@@ -136,13 +136,13 @@
 
   /* ── Orientation and width ────────────────────────────────────────────── */
 
-  [data-ui='segmented-control'][data-part='root'][data-orientation='vertical'] {
+  [data-ui-segmented-control][data-part-root][data-orientation='vertical'] {
     grid-auto-columns: auto;
     grid-auto-flow: row;
     grid-auto-rows: minmax(0, 1fr);
   }
 
-  [data-ui='segmented-control'][data-part='root'][data-full-width] {
+  [data-ui-segmented-control][data-part-root][data-full-width] {
     display: grid;
     inline-size: 100%;
   }
@@ -164,7 +164,7 @@
    * words at a width it chose for itself is a question with no answer — it
    * chose a width that fits them.
    */
-  [data-ui='segmented-control'][data-part='root'][data-condense='icons'] {
+  [data-ui-segmented-control][data-part-root][data-condense='icons'] {
     container-name: slotted-segmented-control;
     container-type: inline-size;
     display: grid;
@@ -173,7 +173,7 @@
 
   /* ── The segment ──────────────────────────────────────────────────────── */
 
-  [data-ui='segmented-control'] [data-part='item'] {
+  [data-ui-segmented-control] [data-part-item] {
     align-items: center;
     block-size: var(--_inner);
     border-radius: var(--_thumb-radius);
@@ -218,7 +218,7 @@
   }
 
   /** The hover and press ground, under the thumb; see the segment above. */
-  [data-ui='segmented-control'] [data-part='item']::after {
+  [data-ui-segmented-control] [data-part-item]::after {
     background: transparent;
     border-radius: inherit;
     content: '';
@@ -231,11 +231,11 @@
 
   /* An empty label is no label: a binding that always renders the span must
      not leave a flex gap after the icon of a segment without words. */
-  [data-ui='segmented-control'] [data-part='item']:not(:has([data-part='label']:not(:empty))) {
+  [data-ui-segmented-control] [data-part-item]:not(:has([data-part-label]:not(:empty))) {
     padding-inline: 0;
   }
 
-  [data-ui='segmented-control'] [data-part='label']:empty {
+  [data-ui-segmented-control] [data-part-label]:empty {
     display: none;
   }
 
@@ -254,7 +254,7 @@
    * ground would otherwise meet it. It lies under the thumb, so a thumb that
    * crosses it while sliding passes over it.
    */
-  [data-ui='segmented-control'] [data-part='item'] + [data-part='item']::before {
+  [data-ui-segmented-control] [data-part-item] + [data-part-item]::before {
     /* No system colour behind it: an unthemed decoration disappears rather
        than shouting, which is what `fallbacks.test.mjs` holds a pseudo-element
        to. In forced colours the thumb's own edge is what divides. */
@@ -272,22 +272,22 @@
     z-index: -1;
   }
 
-  [data-ui='segmented-control'][data-part='root'][data-orientation='vertical']
-    [data-part='item']
-    + [data-part='item']::before {
+  [data-ui-segmented-control][data-part-root][data-orientation='vertical']
+    [data-part-item]
+    + [data-part-item]::before {
     block-size: var(--_border-width);
     inline-size: auto;
     inset-block: calc((var(--_spacing) + var(--_border-width)) / -2) auto;
     inset-inline: 25%;
   }
 
-  [data-ui='segmented-control'] [data-part='item'][data-checked]::before,
-  [data-ui='segmented-control'] [data-part='item'][data-checked] + [data-part='item']::before,
-  [data-ui='segmented-control'][data-part='root']:not([data-readonly])
-    [data-part='item']:hover:has([data-part='control']:enabled)::before,
-  [data-ui='segmented-control'][data-part='root']:not([data-readonly])
-    [data-part='item']:hover:has([data-part='control']:enabled)
-    + [data-part='item']::before {
+  [data-ui-segmented-control] [data-part-item][data-checked]::before,
+  [data-ui-segmented-control] [data-part-item][data-checked] + [data-part-item]::before,
+  [data-ui-segmented-control][data-part-root]:not([data-readonly])
+    [data-part-item]:hover:has([data-part-control]:enabled)::before,
+  [data-ui-segmented-control][data-part-root]:not([data-readonly])
+    [data-part-item]:hover:has([data-part-control]:enabled)
+    + [data-part-item]::before {
     opacity: 0;
   }
 
@@ -298,7 +298,7 @@
    * thumb's — which is what keeps the smallest step at the tightest density
    * above the WCAG minimum.
    */
-  [data-ui='segmented-control'] [data-part='control'] {
+  [data-ui-segmented-control] [data-part-control] {
     appearance: none;
     background: none;
     border: 0;
@@ -314,7 +314,7 @@
     position: absolute;
   }
 
-  [data-ui='segmented-control'] [data-part='icon'] {
+  [data-ui-segmented-control] [data-part-icon] {
     block-size: var(--_icon-size);
     display: inline-flex;
     flex: none;
@@ -326,7 +326,7 @@
    * narrow clips rather than wrapping the segment onto a second line. The
    * string stays whole in the DOM: truncation never removes content.
    */
-  [data-ui='segmented-control'] [data-part='label'] {
+  [data-ui-segmented-control] [data-part-label] {
     /* Clipped along the line only: `hidden` on a one-line box cut the
        descenders and the accents above the cap height. A clipped box is not a
        scroll container, so the flex minimum is given back by hand, or the words
@@ -361,7 +361,7 @@
    * it in where it belongs rather than sliding it from an edge the reader has
    * never seen — which is what Mantine does.
    */
-  [data-ui='segmented-control'] [data-part='indicator'] {
+  [data-ui-segmented-control] [data-part-indicator] {
     /* A raised surface with a hairline and the lightest elevation: the chosen
        segment sits on the track rather than being painted into it. In a dark
        scheme the raised surface is darker than the tinted track, and a thumb
@@ -404,12 +404,11 @@
     }
   }
 
-  [data-ui='segmented-control'] [data-part='indicator']:dir(rtl) {
+  [data-ui-segmented-control] [data-part-indicator]:dir(rtl) {
     translate: calc(var(--_index) * (-100% - var(--_spacing)));
   }
 
-  [data-ui='segmented-control'][data-part='root'][data-orientation='vertical']
-    [data-part='indicator'] {
+  [data-ui-segmented-control][data-part-root][data-orientation='vertical'] [data-part-indicator] {
     block-size: calc(
       (100% - var(--_inset) * 2 - var(--_spacing) * (var(--_count) - 1)) / var(--_count)
     );
@@ -425,7 +424,7 @@
    * was, because a label that thickens when it is chosen moves every label
    * beside it.
    */
-  [data-ui='segmented-control'] [data-part='item'][data-checked] {
+  [data-ui-segmented-control] [data-part-item][data-checked] {
     color: var(--slotted-segmented-control-checked-color, var(--slotted-text, CanvasText));
   }
 
@@ -440,9 +439,9 @@
    * records — a tinted hover on a row of choices reads as a row of status
    * chips before it reads as one of them being pointed at.
    */
-  [data-ui='segmented-control'][data-part='root']:not([data-readonly])
-    [data-part='item']:hover:not([data-disabled]):not([data-checked]):has(
-      [data-part='control']:enabled
+  [data-ui-segmented-control][data-part-root]:not([data-readonly])
+    [data-part-item]:hover:not([data-disabled]):not([data-checked]):has(
+      [data-part-control]:enabled
     )::after {
     background: var(
       --slotted-segmented-control-hover-background,
@@ -455,9 +454,9 @@
    * own pace, which is the rule every activating family here writes: the
    * duration belongs to the state being entered.
    */
-  [data-ui='segmented-control'][data-part='root']:not([data-readonly])
-    [data-part='item']:active:not([data-disabled]):not([data-checked]):has(
-      [data-part='control']:enabled
+  [data-ui-segmented-control][data-part-root]:not([data-readonly])
+    [data-part-item]:active:not([data-disabled]):not([data-checked]):has(
+      [data-part-control]:enabled
     )::after {
     background: var(
       --slotted-segmented-control-active-background,
@@ -488,13 +487,13 @@
    * it, so a segment that is both checked and focused shows one ring rather
    * than a ring and a border a pixel apart.
    */
-  [data-ui='segmented-control'] [data-part='item']:has([data-part='control']:focus-visible) {
+  [data-ui-segmented-control] [data-part-item]:has([data-part-control]: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));
     z-index: 2;
   }
 
-  [data-ui='segmented-control'] [data-part='control']:focus-visible {
+  [data-ui-segmented-control] [data-part-control]:focus-visible {
     outline: none;
   }
 
@@ -505,7 +504,7 @@
    * that draws one, which is what `--slotted-focus-ring-color-invalid` exists
    * for and what keeps the outline and its shadow the same colour.
    */
-  [data-ui='segmented-control'][data-part='root'][data-invalid] {
+  [data-ui-segmented-control][data-part-root][data-invalid] {
     --slotted-focus-ring-color: var(
       --slotted-segmented-control-invalid-focus-ring-color,
       var(--slotted-focus-ring-color-invalid, Highlight)
@@ -541,14 +540,14 @@
    * legible, still focusable and still copyable, and it must not be mistaken
    * for a disabled one — which is what `docs/component-features.md` §2.5 asks.
    */
-  [data-ui='segmented-control'][data-part='root'][data-readonly] [data-part='item'],
-  [data-ui='segmented-control'][data-part='root'][data-readonly] [data-part='control'] {
+  [data-ui-segmented-control][data-part-root][data-readonly] [data-part-item],
+  [data-ui-segmented-control][data-part-root][data-readonly] [data-part-control] {
     cursor: default;
   }
 
   /* ── Disabled ─────────────────────────────────────────────────────────── */
 
-  [data-ui='segmented-control'] [data-part='item'][data-disabled] {
+  [data-ui-segmented-control] [data-part-item][data-disabled] {
     color: var(
       --slotted-segmented-control-disabled-color,
       var(--slotted-disabled-foreground, GrayText)
@@ -556,7 +555,7 @@
     cursor: default;
   }
 
-  [data-ui='segmented-control'] [data-part='control']:disabled {
+  [data-ui-segmented-control] [data-part-control]:disabled {
     cursor: default;
   }
 
@@ -568,14 +567,14 @@
    * is the ground the thumb is read against, so it is the one thing that has
    * to stay.
    */
-  [data-ui='segmented-control'][data-part='root'][data-disabled] {
+  [data-ui-segmented-control][data-part-root][data-disabled] {
     border-color: var(
       --slotted-segmented-control-disabled-border-color,
       var(--slotted-disabled-border, GrayText)
     );
   }
 
-  [data-ui='segmented-control'][data-part='root'][data-disabled] [data-part='indicator'] {
+  [data-ui-segmented-control][data-part-root][data-disabled] [data-part-indicator] {
     background: var(
       --slotted-segmented-control-disabled-indicator-background,
       var(--slotted-disabled-background, ButtonFace)
@@ -596,7 +595,7 @@
    * dividers, no ground — the underline is the mark, and it sits under the
    * word rather than on an edge of a box (R1).
    */
-  [data-ui='segmented-control'][data-part='root'][data-variant='underline'] {
+  [data-ui-segmented-control][data-part-root][data-variant='underline'] {
     --_inner: var(--_height);
 
     background: none;
@@ -608,64 +607,63 @@
     padding: 0;
   }
 
-  [data-ui='segmented-control'][data-part='root'][data-variant='underline'] [data-part='indicator'],
-  [data-ui='segmented-control'][data-part='root'][data-variant='underline']
-    [data-part='item']
-    + [data-part='item']::before,
-  [data-ui='segmented-control'][data-part='root'][data-variant='underline']
-    [data-part='item']::after {
+  [data-ui-segmented-control][data-part-root][data-variant='underline'] [data-part-indicator],
+  [data-ui-segmented-control][data-part-root][data-variant='underline']
+    [data-part-item]
+    + [data-part-item]::before,
+  [data-ui-segmented-control][data-part-root][data-variant='underline'] [data-part-item]::after {
     display: none;
   }
 
-  [data-ui='segmented-control'][data-part='root'][data-variant='underline'] [data-part='item'] {
+  [data-ui-segmented-control][data-part-root][data-variant='underline'] [data-part-item] {
     color: var(--slotted-segmented-control-underline-color, var(--slotted-text-muted, GrayText));
     font-weight: var(--slotted-font-weight-medium, 500);
     min-inline-size: var(--slotted-target-min, 24px);
     padding-inline: 0;
   }
 
-  [data-ui='segmented-control'][data-part='root'][data-variant='underline']
-    [data-part='item'][data-checked] {
+  [data-ui-segmented-control][data-part-root][data-variant='underline']
+    [data-part-item][data-checked] {
     color: var(
       --slotted-segmented-control-underline-checked-color,
       var(--slotted-text, CanvasText)
     );
   }
 
-  [data-ui='segmented-control'][data-part='root'][data-variant='underline']
-    [data-part='item'][data-checked]
-    [data-part='label'] {
+  [data-ui-segmented-control][data-part-root][data-variant='underline']
+    [data-part-item][data-checked]
+    [data-part-label] {
     text-decoration-color: currentColor;
     text-decoration-line: underline;
     text-decoration-thickness: var(--slotted-border-width-thick, 2px);
     text-underline-offset: 0.35em;
   }
 
-  [data-ui='segmented-control'][data-part='root'][data-variant='underline'][data-invalid]
-    [data-part='item'][data-checked]
-    [data-part='label'] {
+  [data-ui-segmented-control][data-part-root][data-variant='underline'][data-invalid]
+    [data-part-item][data-checked]
+    [data-part-label] {
     text-decoration-color: var(--slotted-tone-danger-border, CanvasText);
   }
 
-  [data-ui='segmented-control'][data-part='root'][data-variant='underline']:not([data-readonly])
-    [data-part='item']:hover:not([data-disabled]):not([data-checked]):has(
-      [data-part='control']:enabled
+  [data-ui-segmented-control][data-part-root][data-variant='underline']:not([data-readonly])
+    [data-part-item]:hover:not([data-disabled]):not([data-checked]):has(
+      [data-part-control]:enabled
     ),
-  [data-ui='segmented-control'][data-part='root'][data-variant='underline']:not([data-readonly])
-    [data-part='item']:active:not([data-disabled]):not([data-checked]):has(
-      [data-part='control']:enabled
+  [data-ui-segmented-control][data-part-root][data-variant='underline']:not([data-readonly])
+    [data-part-item]:active:not([data-disabled]):not([data-checked]):has(
+      [data-part-control]:enabled
     ) {
     background: none;
     color: var(--slotted-text, CanvasText);
   }
 
-  [data-ui='segmented-control'][data-part='root'][data-variant='underline']
-    [data-part='item']:has([data-part='control']:focus-visible) {
+  [data-ui-segmented-control][data-part-root][data-variant='underline']
+    [data-part-item]:has([data-part-control]:focus-visible) {
     outline-offset: var(--slotted-focus-ring-offset, 2px);
   }
 
-  [data-ui='segmented-control'][data-part='root'][data-variant='underline']
-    [data-part='item'][data-disabled] {
+  [data-ui-segmented-control][data-part-root][data-variant='underline']
+    [data-part-item][data-disabled] {
     color: var(--slotted-disabled-foreground, GrayText);
   }
 
@@ -682,9 +680,9 @@
    * because `@container (max-inline-size: var(--x))` is invalid CSS.
    */
   @container slotted-segmented-control (max-inline-size: 20rem) {
-    [data-ui='segmented-control'][data-part='root'][data-condense='icons']
-      [data-part='item']:has([data-part='icon'])
-      [data-part='label'] {
+    [data-ui-segmented-control][data-part-root][data-condense='icons']
+      [data-part-item]:has([data-part-icon])
+      [data-part-label] {
       block-size: 1px;
       clip-path: inset(50%);
       inline-size: 1px;
@@ -693,8 +691,8 @@
       white-space: nowrap;
     }
 
-    [data-ui='segmented-control'][data-part='root'][data-condense='icons']
-      [data-part='item']:has([data-part='icon']) {
+    [data-ui-segmented-control][data-part-root][data-condense='icons']
+      [data-part-item]:has([data-part-icon]) {
       padding-inline: 0;
     }
   }
@@ -707,15 +705,15 @@
   @media (forced-colors: active) {
     /* The neutral track is a tint, and a tint flattens to Canvas: the edge
        says where the control is, and the thumb's edge says which is chosen. */
-    [data-ui='segmented-control'][data-part='root']:not([data-variant='underline']) {
+    [data-ui-segmented-control][data-part-root]:not([data-variant='underline']) {
       border-color: ButtonBorder;
     }
 
-    [data-ui='segmented-control'] [data-part='indicator'] {
+    [data-ui-segmented-control] [data-part-indicator] {
       border-color: Highlight;
     }
 
-    [data-ui='segmented-control'][data-part='root'][data-invalid] {
+    [data-ui-segmented-control][data-part-root][data-invalid] {
       outline: var(--_invalid-edge-width) solid CanvasText;
       outline-offset: calc(-1 * (var(--_border-width) + var(--_invalid-edge-width)));
     }