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

package/src/listbox/listbox.css

@@ -46,7 +46,7 @@
    * component; only the surface's own inset, radius and shadow come off the
    * space, radius and shadow scales.
    */
-  [data-ui='listbox'] {
+  [data-ui-listbox] {
     --_surface: var(--slotted-listbox-surface, var(--slotted-surface, #ffffff));
     --_text: var(--slotted-listbox-text, var(--slotted-text, #0f172a));
     --_muted: var(--slotted-listbox-text-muted, var(--slotted-text-muted, #5b6b7f));
@@ -126,7 +126,7 @@
     scroll-behavior: auto;
   }
 
-  [data-ui='listbox'][data-size='sm'] {
+  [data-ui-listbox][data-size='sm'] {
     --_option-inset: var(--slotted-control-padding-inline-sm, 0.625rem);
     --_option-height: var(--slotted-control-height-sm, 30px);
     --_font-size: var(--slotted-control-font-size-sm, 12px);
@@ -135,7 +135,7 @@
     --_column-gap: var(--slotted-control-gap-sm, 0.375rem);
   }
 
-  [data-ui='listbox'][data-size='lg'] {
+  [data-ui-listbox][data-size='lg'] {
     --_option-inset: var(--slotted-control-padding-inline-lg, 1rem);
     --_option-height: var(--slotted-control-height-lg, 38px);
     --_font-size: var(--slotted-control-font-size-lg, 14px);
@@ -153,14 +153,14 @@
    * and `combobox` render inside their own layer, where the layer already has
    * the edge and a second one would draw a box inside a box.
    */
-  [data-ui='listbox'][data-variant='framed'] {
+  [data-ui-listbox][data-variant='framed'] {
     background: var(--_surface);
     border: var(--_border-width) solid var(--_border-color);
     border-radius: var(--_radius);
     box-shadow: var(--_shadow);
   }
 
-  [data-ui='listbox'][data-variant='plain'] {
+  [data-ui-listbox][data-variant='plain'] {
     background: transparent;
     border: 0;
   }
@@ -171,16 +171,16 @@
    * the option, and a second ring around the whole listbox would say the
    * listbox is the thing being operated.
    */
-  [data-ui='listbox'][data-focus-mode='activedescendant']:focus-visible {
+  [data-ui-listbox][data-focus-mode='activedescendant']:focus-visible {
     outline: var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, #2563eb);
     outline-offset: var(--slotted-focus-ring-offset, 2px);
   }
 
-  [data-ui='listbox'][data-focus-mode='roving']:focus {
+  [data-ui-listbox][data-focus-mode='roving']:focus {
     outline: none;
   }
 
-  [data-ui='listbox'][data-invalid] {
+  [data-ui-listbox][data-invalid] {
     --_border-color: var(--slotted-tone-danger-border);
     --slotted-focus-ring-color: var(--slotted-focus-ring-color-invalid);
   }
@@ -189,12 +189,12 @@
      is the resting edge's black. An edge inside the border, so nothing moves,
      in place of the resting lift — the one `text-field` draws. Disabled keeps
      its own edge, as it keeps its own border colour. */
-  [data-ui='listbox'][data-invalid]:not([data-disabled]) {
+  [data-ui-listbox][data-invalid]:not([data-disabled]) {
     --_invalid-edge-width: var(--slotted-control-invalid-edge-width, 1px);
     --_shadow: inset 0 0 0 var(--_invalid-edge-width) var(--slotted-tone-danger-border);
   }
 
-  [data-ui='listbox'][data-disabled] {
+  [data-ui-listbox][data-disabled] {
     --_surface: var(--slotted-disabled-background, #e2e8f0);
     --_text: var(--slotted-disabled-foreground, #64748b);
     --_border-color: var(--slotted-disabled-border, #cbd5e1);
@@ -202,7 +202,7 @@
     cursor: not-allowed;
   }
 
-  [data-ui='listbox'][data-loading] {
+  [data-ui-listbox][data-loading] {
     cursor: progress;
   }
 
@@ -215,18 +215,18 @@
    * a layout read during a key press; here the number is stated, the arrows
    * step by it, and the picture and the keyboard cannot disagree.
    */
-  [data-ui='listbox'][data-layout='grid'] {
+  [data-ui-listbox][data-layout='grid'] {
     column-gap: var(--_column-gap);
     grid-template-columns: repeat(var(--_columns), minmax(0, 1fr));
     max-block-size: none;
   }
 
-  [data-ui='listbox'][data-layout='grid'] [data-part='option'] {
+  [data-ui-listbox][data-layout='grid'] [data-part-option] {
     grid-column: auto;
     grid-template-columns: auto minmax(0, 1fr) auto;
   }
 
-  [data-ui='listbox'][data-layout='grid'] :is([data-part='group'], [data-part='canvas']) {
+  [data-ui-listbox][data-layout='grid'] :is([data-part-group], [data-part-canvas]) {
     grid-template-columns: repeat(var(--_columns), minmax(0, 1fr));
   }
 
@@ -235,7 +235,7 @@
    * is one row tall — and the scroll turns with it, so `dir="rtl"` reverses the
    * whole thing without a rule of its own.
    */
-  [data-ui='listbox'][data-orientation='horizontal'] {
+  [data-ui-listbox][data-orientation='horizontal'] {
     display: flex;
     flex-direction: row;
     max-block-size: none;
@@ -243,7 +243,7 @@
     overflow-y: hidden;
   }
 
-  [data-ui='listbox'][data-orientation='horizontal'] [data-part='option'] {
+  [data-ui-listbox][data-orientation='horizontal'] [data-part-option] {
     flex: 0 0 auto;
     grid-template-columns: auto auto auto;
   }
@@ -262,7 +262,7 @@
    * generic element between a `listbox` and its `option`s is an owned element
    * with no permitted role, and the role is what makes it transparent.
    */
-  [data-ui='listbox'] > [data-part='canvas'] {
+  [data-ui-listbox] > [data-part-canvas] {
     /**
      * `align-content: start` and `grid-auto-rows: min-content` together, and
      * neither is optional: a grid with a definite block size and automatic rows
@@ -291,7 +291,7 @@
    * because the reader scrolled it out and moving it back would take the
    * scrollbar away from them.
    */
-  [data-ui='listbox'] [data-part='option'][data-pinned] {
+  [data-ui-listbox] [data-part-option][data-pinned] {
     /* Out of flow, so out of the subgrid: it states the three columns itself.
        They are the option's own rather than the listbox's, which is the price
        of rendering a row the window does not reach. */
@@ -302,13 +302,13 @@
 
   /* ── Groups ───────────────────────────────────────────────────────────── */
 
-  [data-ui='listbox'] [data-part='group'] {
+  [data-ui-listbox] [data-part-group] {
     display: grid;
     grid-column: 1 / -1;
     grid-template-columns: subgrid;
   }
 
-  [data-ui='listbox'] [data-part='group-label'] {
+  [data-ui-listbox] [data-part-group-label] {
     color: var(--_muted);
     font-size: var(--_secondary-font-size);
     font-weight: var(--slotted-font-weight-semibold, 600);
@@ -323,7 +323,7 @@
    * element: ARIA 1.2 lets a `listbox` own `option` and `group` and nothing
    * else, so an `hr` inside one is an owned element with no permitted role.
    */
-  [data-ui='listbox'] [data-part='group'] + [data-part='group'] {
+  [data-ui-listbox] [data-part-group] + [data-part-group] {
     border-block-start: var(--_border-width) solid
       var(--slotted-listbox-group-border-color, var(--slotted-border-subtle, #e2e8f0));
     margin-block-start: var(--slotted-space-2, 0.25rem);
@@ -332,7 +332,7 @@
 
   /* ── Options ──────────────────────────────────────────────────────────── */
 
-  [data-ui='listbox'] [data-part='option'] {
+  [data-ui-listbox] [data-part-option] {
     align-content: center;
     background: transparent;
     border-radius: var(--_option-radius);
@@ -369,11 +369,11 @@
    * highlight, and a hover that moved the highlight would fight the arrow keys
    * a reader is holding down.
    */
-  [data-ui='listbox']:not([data-disabled]) [data-part='option']:not([data-disabled]):hover {
+  [data-ui-listbox]:not([data-disabled]) [data-part-option]:not([data-disabled]):hover {
     background-color: var(--_highlight);
   }
 
-  [data-ui='listbox']:not([data-disabled]) [data-part='option']:not([data-disabled]):active {
+  [data-ui-listbox]:not([data-disabled]) [data-part-option]:not([data-disabled]):active {
     background-color: var(--_highlight-active);
   }
 
@@ -387,8 +387,8 @@
    * legitimately be elsewhere — a `combobox` keeps it in its own text field and
    * this ground is then the only thing that says which option is live.
    */
-  [data-ui='listbox'][data-focus-mode='roving']:focus-within [data-part='option'][data-current],
-  [data-ui='listbox'][data-focus-mode='activedescendant'] [data-part='option'][data-current] {
+  [data-ui-listbox][data-focus-mode='roving']:focus-within [data-part-option][data-current],
+  [data-ui-listbox][data-focus-mode='activedescendant'] [data-part-option][data-current] {
     background-color: var(--_highlight);
   }
 
@@ -405,12 +405,12 @@
    * colours replace its paint on their own, where a pseudo-element's border
    * would be decoration the theme cannot reach.
    */
-  [data-ui='listbox']:focus-within [data-part='option'][data-current] {
+  [data-ui-listbox]:focus-within [data-part-option][data-current] {
     outline: var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, #2563eb);
     outline-offset: calc(-1 * var(--slotted-focus-ring-width, 2px));
   }
 
-  [data-ui='listbox'] [data-part='option']:focus {
+  [data-ui-listbox] [data-part-option]:focus {
     outline: none;
   }
 
@@ -424,7 +424,7 @@
    * it once; a rail for state is out of the system (R1), and the `indicator`
    * below is the mark that carries it instead.
    */
-  [data-ui='listbox'] [data-part='option'][data-selected] {
+  [data-ui-listbox] [data-part-option][data-selected] {
     background-color: var(--_selected-surface);
     color: var(--_selected-text);
   }
@@ -438,24 +438,23 @@
    * selection begins and ends. `select` and `combobox` draw the same ground
    * and answer the same way; `selection-block.test.mjs` holds the three to it.
    */
-  [data-ui='listbox'] [data-part='option'][data-selected] + [data-part='option'][data-selected] {
+  [data-ui-listbox] [data-part-option][data-selected] + [data-part-option][data-selected] {
     border-start-end-radius: 0;
     border-start-start-radius: 0;
   }
 
-  [data-ui='listbox']
-    [data-part='option'][data-selected]:has(+ [data-part='option'][data-selected]) {
+  [data-ui-listbox] [data-part-option][data-selected]:has(+ [data-part-option][data-selected]) {
     border-end-end-radius: 0;
     border-end-start-radius: 0;
   }
 
-  [data-ui='listbox']:not([data-disabled])
-    [data-part='option'][data-selected]:not([data-disabled]):hover {
+  [data-ui-listbox]:not([data-disabled])
+    [data-part-option][data-selected]:not([data-disabled]):hover {
     background-color: var(--slotted-tone-accent-subtle-hover);
   }
 
-  [data-ui='listbox']:not([data-disabled])
-    [data-part='option'][data-selected]:not([data-disabled]):active {
+  [data-ui-listbox]:not([data-disabled])
+    [data-part-option][data-selected]:not([data-disabled]):active {
     background-color: var(--slotted-tone-accent-subtle-active);
   }
 
@@ -465,7 +464,7 @@
    * control cannot do. It therefore has to answer the highlight with something,
    * and answer it more quietly than an option that would do anything.
    */
-  [data-ui='listbox'] [data-part='option'][data-disabled] {
+  [data-ui-listbox] [data-part-option][data-disabled] {
     color: var(--slotted-disabled-foreground, #64748b);
     cursor: not-allowed;
   }
@@ -475,12 +474,12 @@
    * The mark stays drawn — the reader still needs to know which option was
    * chosen — and the ground stops claiming the option is theirs to change.
    */
-  [data-ui='listbox'] [data-part='option'][data-disabled]:is([data-selected], [data-current]) {
+  [data-ui-listbox] [data-part-option][data-disabled]:is([data-selected], [data-current]) {
     background-color: var(--slotted-disabled-background, #e2e8f0);
     color: var(--slotted-disabled-foreground, #64748b);
   }
 
-  [data-ui='listbox'][data-readonly] [data-part='option'] {
+  [data-ui-listbox][data-readonly] [data-part-option] {
     cursor: default;
   }
 
@@ -491,7 +490,7 @@
    * labels up: the mark's box exists whether or not the mark is drawn, so a
    * list of options does not shift by sixteen pixels as one is chosen.
    */
-  [data-ui='listbox'] :is([data-part='indicator'], [data-part='icon']) {
+  [data-ui-listbox] :is([data-part-indicator], [data-part-icon]) {
     /* One line box tall, so a mark beside a label that wrapped onto three lines
        sits on the first of them rather than in the middle of the option. */
     block-size: 1lh;
@@ -507,7 +506,7 @@
    * an `icon` box, sized here to the column so the mark and a consumer's icon
    * in the same column are one size.
    */
-  [data-ui='listbox'] [data-part='indicator'] {
+  [data-ui-listbox] [data-part-indicator] {
     --slotted-icon-size: var(--_icon-size);
 
     align-items: center;
@@ -517,7 +516,7 @@
     transition: opacity var(--slotted-duration-short) var(--slotted-easing-standard);
   }
 
-  [data-ui='listbox'] [data-part='option'][data-selected] > [data-part='indicator'] {
+  [data-ui-listbox] [data-part-option][data-selected] > [data-part-indicator] {
     opacity: 1;
   }
 
@@ -526,7 +525,7 @@
    * paints none: a `Glyph` in an `Icon` box, or an element of the consumer's
    * own, centred and sized from the column, as the tick is.
    */
-  [data-ui='listbox'] [data-part='icon'] {
+  [data-ui-listbox] [data-part-icon] {
     --slotted-icon-size: var(--_icon-size);
 
     align-items: center;
@@ -535,14 +534,14 @@
   }
 
   /* Column two, and the only column that gives way. */
-  [data-ui='listbox'] [data-part='label'] {
+  [data-ui-listbox] [data-part-label] {
     grid-column: 2;
     grid-row: 1;
     min-inline-size: 0;
     overflow-wrap: anywhere;
   }
 
-  [data-ui='listbox'] [data-part='description'] {
+  [data-ui-listbox] [data-part-description] {
     color: var(--_muted);
     font-size: var(--_secondary-font-size);
     grid-column: 2;
@@ -552,9 +551,9 @@
     overflow-wrap: anywhere;
   }
 
-  [data-ui='listbox']
-    [data-part='option']:is([data-disabled], [data-selected])
-    > [data-part='description'] {
+  [data-ui-listbox]
+    [data-part-option]:is([data-disabled], [data-selected])
+    > [data-part-description] {
     color: inherit;
   }
 
@@ -565,7 +564,7 @@
    * library. Never narrower than its own content, so a long label wraps in
    * column two rather than pushing the value off the surface.
    */
-  [data-ui='listbox'] [data-part='meta'] {
+  [data-ui-listbox] [data-part-meta] {
     color: var(--_muted);
     font-variant-numeric: tabular-nums;
     grid-column: 3;
@@ -575,9 +574,7 @@
     white-space: nowrap;
   }
 
-  [data-ui='listbox']
-    [data-part='option']:is([data-disabled], [data-selected])
-    > [data-part='meta'] {
+  [data-ui-listbox] [data-part-option]:is([data-disabled], [data-selected]) > [data-part-meta] {
     color: inherit;
   }
 
@@ -589,7 +586,7 @@
    * all. The message lives inside the listbox: outside it the reader hears
    * "listbox, 0 items" and then nothing.
    */
-  [data-ui='listbox'] :is([data-part='empty'], [data-part='loader']) {
+  [data-ui-listbox] :is([data-part-empty], [data-part-loader]) {
     align-content: center;
     color: var(--_muted);
     display: grid;
@@ -605,7 +602,7 @@
    * role — a listbox owns nothing else — so it carries the same geometry and
    * says what it is with a pulse rather than with a second element.
    */
-  [data-ui='listbox'] [data-part='loader'] {
+  [data-ui-listbox] [data-part-loader] {
     animation: slotted-listbox-loader var(--slotted-duration-loop) ease-in-out infinite;
   }
 
@@ -626,7 +623,7 @@
    * the rest of the motion scale.
    */
   @media (prefers-reduced-motion: reduce) {
-    [data-ui='listbox'] [data-part='loader'] {
+    [data-ui-listbox] [data-part-loader] {
       animation: none;
       opacity: 0.7;
     }
@@ -641,13 +638,13 @@
    * leave a reader unable to tell what they have chosen from what they are on.
    */
   @media (forced-colors: active) {
-    [data-ui='listbox'] [data-part='option'][data-selected] {
+    [data-ui-listbox] [data-part-option][data-selected] {
       background-color: Highlight;
       color: HighlightText;
       forced-color-adjust: none;
     }
 
-    [data-ui='listbox'] [data-part='option'][data-disabled] {
+    [data-ui-listbox] [data-part-option][data-disabled] {
       color: GrayText;
     }
   }
@@ -658,12 +655,12 @@
    * on the same box an invalid ring is double, which a valid one is not.
    */
   @media (forced-colors: active) {
-    [data-ui='listbox'][data-variant='framed'][data-invalid]:not([data-disabled]) {
+    [data-ui-listbox][data-variant='framed'][data-invalid]:not([data-disabled]) {
       outline: var(--_invalid-edge-width) solid CanvasText;
       outline-offset: calc(-1 * (var(--_border-width) + var(--_invalid-edge-width)));
     }
 
-    [data-ui='listbox'][data-variant='framed'][data-invalid]:not(
+    [data-ui-listbox][data-variant='framed'][data-invalid]:not(
         [data-disabled]
       )[data-focus-mode='activedescendant']:focus-visible {
       outline: calc(var(--slotted-focus-ring-width, 2px) + var(--_invalid-edge-width)) double