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

package/src/transfer/transfer.css

@@ -25,7 +25,7 @@
    * control's padding or gap at the family's size step, and the list is a
    * number of control heights tall.
    */
-  [data-ui='transfer'] {
+  [data-ui-transfer] {
     --_text: var(--slotted-text, CanvasText);
     --_muted: var(--slotted-text-muted, GrayText);
     --_rule: var(--slotted-border-subtle, ButtonBorder);
@@ -62,7 +62,7 @@
     container-type: inline-size;
   }
 
-  [data-ui='transfer'][data-size='sm'] {
+  [data-ui-transfer][data-size='sm'] {
     --_option-height: var(--slotted-control-height-sm, 30px);
     --_option-inset: var(--slotted-control-padding-inline-sm, 10px);
     --_mark: var(--slotted-control-icon-size-sm, 14px);
@@ -70,7 +70,7 @@
     --_font-size: var(--slotted-control-font-size-sm, 12px);
   }
 
-  [data-ui='transfer'][data-size='lg'] {
+  [data-ui-transfer][data-size='lg'] {
     --_option-height: var(--slotted-control-height-lg, 38px);
     --_option-inset: var(--slotted-control-padding-inline-lg, 16px);
     --_mark: var(--slotted-control-icon-size-lg, 18px);
@@ -80,11 +80,11 @@
 
   /* ── The switch, which only steps lay out ─────────────────────────────── */
 
-  [data-ui='transfer'] > [data-part='switch'] {
+  [data-ui-transfer] > [data-part-switch] {
     display: none;
   }
 
-  [data-ui='transfer'] > [data-part='switch'] > [data-ui='segmented-control'] {
+  [data-ui-transfer] > [data-part-switch] > [data-ui-segmented-control] {
     inline-size: 100%;
   }
 
@@ -95,7 +95,7 @@
    * The actions centre on the panes' block size, which is the lists' middle
    * give or take the header, and the eye reads them as belonging to both.
    */
-  [data-ui='transfer'] > [data-part='body'] {
+  [data-ui-transfer] > [data-part-body] {
     align-items: center;
     column-gap: var(--_gap);
     display: grid;
@@ -114,7 +114,7 @@
    * listbox inside is `plain`: a box inside a box is what the variant exists
    * to prevent.
    */
-  [data-ui='transfer'] > [data-part='body'] > [data-part='pane'] {
+  [data-ui-transfer] > [data-part-body] > [data-part-pane] {
     align-self: stretch;
     background: var(--_surface);
     border: var(--slotted-border-width-thin, 1px) solid var(--_edge);
@@ -136,7 +136,7 @@
    * then the option's, less half of what the select-all box is wider than
    * the check. The box then stands centred over the marks it selects.
    */
-  [data-ui='transfer'] > [data-part='body'] > [data-part='pane'] > [data-part='pane-header'] {
+  [data-ui-transfer] > [data-part-body] > [data-part-pane] > [data-part-pane-header] {
     align-items: center;
     /* A stated step rather than the control gap: the box's focus ring is
        drawn four pixels out, and at dense the control gap is four and six
@@ -151,31 +151,31 @@
     );
   }
 
-  [data-ui='transfer']
-    > [data-part='body']
-    > [data-part='pane']
-    > [data-part='pane-header']
-    > [data-part='select-all'] {
+  [data-ui-transfer]
+    > [data-part-body]
+    > [data-part-pane]
+    > [data-part-pane-header]
+    > [data-part-select-all] {
     display: inline-flex;
     flex: none;
   }
 
   /* The box stands alone: its name is on the input, and the Angular binding's
      empty label would otherwise keep the grid's gap after the box. */
-  [data-ui='transfer']
-    > [data-part='body']
-    > [data-part='pane']
-    > [data-part='pane-header']
-    > [data-part='select-all']
-    > [data-ui='checkbox'] {
+  [data-ui-transfer]
+    > [data-part-body]
+    > [data-part-pane]
+    > [data-part-pane-header]
+    > [data-part-select-all]
+    > [data-ui-checkbox] {
     column-gap: 0;
   }
 
-  [data-ui='transfer']
-    > [data-part='body']
-    > [data-part='pane']
-    > [data-part='pane-header']
-    > [data-part='title'] {
+  [data-ui-transfer]
+    > [data-part-body]
+    > [data-part-pane]
+    > [data-part-pane-header]
+    > [data-part-title] {
     color: var(--_text);
     font-weight: var(--slotted-font-weight-semibold, 600);
     min-inline-size: 0;
@@ -187,11 +187,11 @@
    * title instead, and a figure that jumps as it counts is read as a change of
    * meaning. Tabular figures keep "9 of 12" and "10 of 12" the same width.
    */
-  [data-ui='transfer']
-    > [data-part='body']
-    > [data-part='pane']
-    > [data-part='pane-header']
-    > [data-part='count'] {
+  [data-ui-transfer]
+    > [data-part-body]
+    > [data-part-pane]
+    > [data-part-pane-header]
+    > [data-part-count] {
     color: var(--_muted);
     flex: none;
     font-size: var(--slotted-font-size-xs, 0.75rem);
@@ -201,24 +201,24 @@
     white-space: nowrap;
   }
 
-  [data-ui='transfer'] > [data-part='body'] > [data-part='pane'] > [data-part='search'] {
+  [data-ui-transfer] > [data-part-body] > [data-part-pane] > [data-part-search] {
     padding-block-end: var(--slotted-space-4, 0.5rem);
     padding-inline: var(--slotted-space-4, 0.5rem);
   }
 
-  [data-ui='transfer']
-    > [data-part='body']
-    > [data-part='pane']
-    > [data-part='search']
-    > [data-ui='text-field'] {
+  [data-ui-transfer]
+    > [data-part-body]
+    > [data-part-pane]
+    > [data-part-search]
+    > [data-ui-text-field] {
     inline-size: 100%;
   }
 
-  [data-ui='transfer']
-    > [data-part='body']
-    > [data-part='pane']
-    > [data-part='search']
-    [data-part='search-icon'] {
+  [data-ui-transfer]
+    > [data-part-body]
+    > [data-part-pane]
+    > [data-part-search]
+    [data-part-search-icon] {
     /* Holds the search `Glyph` the binding draws, at the icon size the text
        field's start slot states. */
     display: inline-flex;
@@ -231,7 +231,7 @@
    * not change the height of the page. The listbox fills it and scrolls
    * inside it; its measure cap is lifted, because the pane is the measure.
    */
-  [data-ui='transfer'] > [data-part='body'] > [data-part='pane'] > [data-part='list'] {
+  [data-ui-transfer] > [data-part-body] > [data-part-pane] > [data-part-list] {
     block-size: calc(var(--_rows) * var(--_option-height) + 2 * var(--_list-inset));
     border-block-start: var(--slotted-border-width-thin, 1px) solid var(--_rule);
     box-sizing: content-box;
@@ -239,11 +239,7 @@
     position: relative;
   }
 
-  [data-ui='transfer']
-    > [data-part='body']
-    > [data-part='pane']
-    > [data-part='list']
-    > [data-ui='listbox'] {
+  [data-ui-transfer] > [data-part-body] > [data-part-pane] > [data-part-list] > [data-ui-listbox] {
     --slotted-listbox-measure: none;
 
     block-size: 100%;
@@ -254,21 +250,21 @@
    * An empty list says so in the middle of the space it would fill, rather
    * than in a row at the top that reads as the first option.
    */
-  [data-ui='transfer']
-    > [data-part='body']
-    > [data-part='pane']
-    > [data-part='list']
-    > [data-ui='listbox']:has(> [data-part='empty']) {
+  [data-ui-transfer]
+    > [data-part-body]
+    > [data-part-pane]
+    > [data-part-list]
+    > [data-ui-listbox]:has(> [data-part-empty]) {
     align-content: center;
   }
 
-  [data-ui='transfer']
-    > [data-part='body']
-    > [data-part='pane']
-    > [data-part='list']
-    > [data-ui='listbox']
-    > [data-part='empty']
-    > [data-part='empty'] {
+  [data-ui-transfer]
+    > [data-part-body]
+    > [data-part-pane]
+    > [data-part-list]
+    > [data-ui-listbox]
+    > [data-part-empty]
+    > [data-part-empty] {
     /* The mark above the words is the `Glyph` the binding draws: an empty tray,
        or a failed search while a query is typed. */
     --slotted-icon-size: var(--_mark);
@@ -278,12 +274,12 @@
   }
 
   /** An option the collection does not hold: the key, in the muted ink. */
-  [data-ui='transfer']
-    > [data-part='body']
-    > [data-part='pane']
-    > [data-part='list']
-    > [data-ui='listbox']
-    [data-part='option']:has(> [data-part='indicator'][data-unresolved]) {
+  [data-ui-transfer]
+    > [data-part-body]
+    > [data-part-pane]
+    > [data-part-list]
+    > [data-ui-listbox]
+    [data-part-option]:has(> [data-part-indicator][data-unresolved]) {
     color: var(--_muted);
     font-family: var(--slotted-font-family-mono, ui-monospace, monospace);
   }
@@ -293,11 +289,11 @@
    * so nothing moves while the reader aims. Its offset is measured by script,
    * which is the one thing the stylesheet cannot know.
    */
-  [data-ui='transfer']
-    > [data-part='body']
-    > [data-part='pane']
-    > [data-part='list']
-    > [data-part='drop-indicator'] {
+  [data-ui-transfer]
+    > [data-part-body]
+    > [data-part-pane]
+    > [data-part-list]
+    > [data-part-drop-indicator] {
     block-size: 0;
     inset-block-start: var(--_drop-offset, 0);
     inset-inline: calc(var(--_list-inset) + var(--slotted-space-2, 0.25rem));
@@ -305,11 +301,11 @@
     position: absolute;
   }
 
-  [data-ui='transfer']
-    > [data-part='body']
-    > [data-part='pane']
-    > [data-part='list']
-    > [data-part='drop-indicator']::before {
+  [data-ui-transfer]
+    > [data-part-body]
+    > [data-part-pane]
+    > [data-part-list]
+    > [data-part-drop-indicator]::before {
     background-color: var(--slotted-tone-accent-solid);
     block-size: var(--slotted-border-width-thick, 2px);
     border-radius: var(--slotted-radius-full, 9999px);
@@ -320,12 +316,12 @@
   }
 
   /* An option being carried is the ghost of itself where it came from. */
-  [data-ui='transfer']
-    > [data-part='body']
-    > [data-part='pane']
-    > [data-part='list']
-    > [data-ui='listbox']
-    [data-part='option']:has(> [data-part='indicator'][data-dragging]) {
+  [data-ui-transfer]
+    > [data-part-body]
+    > [data-part-pane]
+    > [data-part-list]
+    > [data-ui-listbox]
+    [data-part-option]:has(> [data-part-indicator][data-dragging]) {
     opacity: 0.5;
   }
 
@@ -333,13 +329,13 @@
    * The pane a drop would land in. The accent edge at 3:1 is the signal; the
    * ring doubles it, so the edge reads at a glance without the pane moving.
    */
-  [data-ui='transfer'] > [data-part='body'] > [data-part='pane'][data-drop-target] {
+  [data-ui-transfer] > [data-part-body] > [data-part-pane][data-drop-target] {
     border-color: var(--slotted-tone-accent-border, Highlight);
     box-shadow: 0 0 0 var(--slotted-border-width-thin, 1px)
       var(--slotted-tone-accent-border, Highlight);
   }
 
-  [data-ui='transfer'] > [data-part='body'] > [data-part='pane'] > [data-part='pane-footer'] {
+  [data-ui-transfer] > [data-part-body] > [data-part-pane] > [data-part-pane-footer] {
     border-block-start: var(--slotted-border-width-thin, 1px) solid var(--_rule);
     color: var(--_muted);
     font-size: var(--slotted-font-size-xs, 0.75rem);
@@ -350,7 +346,7 @@
 
   /* ── The pane's states ────────────────────────────────────────────────── */
 
-  [data-ui='transfer'][data-invalid] > [data-part='body'] > [data-part='pane'] {
+  [data-ui-transfer][data-invalid] > [data-part-body] > [data-part-pane] {
     --_edge: var(--slotted-tone-danger-border, Mark);
     /* Width as well as colour (WCAG 1.4.1): in `high-contrast` the danger
        border is the resting edge's black. An edge inside the border, so
@@ -360,7 +356,7 @@
     --_shadow: inset 0 0 0 var(--_invalid-edge-width) var(--_edge);
   }
 
-  [data-ui='transfer'][data-disabled] {
+  [data-ui-transfer][data-disabled] {
     --_surface: var(--slotted-disabled-background, Canvas);
     --_edge: var(--slotted-disabled-border, GrayText);
     --_text: var(--slotted-disabled-foreground, GrayText);
@@ -376,32 +372,32 @@
    * buttons inside each, which is how the eye tells "toward Chosen" from
    * "toward Available" before reading either.
    */
-  [data-ui='transfer'] > [data-part='body'] > [data-part='actions'] {
+  [data-ui-transfer] > [data-part-body] > [data-part-actions] {
     display: grid;
     gap: var(--slotted-space-3, 0.375rem);
     grid-auto-rows: auto;
     min-inline-size: 0;
   }
 
-  [data-ui='transfer'] > [data-part='body'] > [data-part='actions'] > [data-part='move-to-source'],
-  [data-ui='transfer'] > [data-part='body'] > [data-part='actions'] > [data-part='reorder'] {
+  [data-ui-transfer] > [data-part-body] > [data-part-actions] > [data-part-move-to-source],
+  [data-ui-transfer] > [data-part-body] > [data-part-actions] > [data-part-reorder] {
     margin-block-start: var(--slotted-space-4, 0.5rem);
   }
 
-  [data-ui='transfer'] > [data-part='body'] > [data-part='actions'] > [data-ui='button'] {
+  [data-ui-transfer] > [data-part-body] > [data-part-actions] > [data-ui-button] {
     inline-size: 100%;
   }
 
-  [data-ui='transfer'] > [data-part='body'] > [data-part='actions'] > [data-part='reorder'] {
+  [data-ui-transfer] > [data-part-body] > [data-part-actions] > [data-part-reorder] {
     display: grid;
     gap: var(--slotted-space-3, 0.375rem);
   }
 
-  [data-ui='transfer']
-    > [data-part='body']
-    > [data-part='actions']
-    > [data-part='reorder']
-    > [data-ui='button'] {
+  [data-ui-transfer]
+    > [data-part-body]
+    > [data-part-actions]
+    > [data-part-reorder]
+    > [data-ui-button] {
     inline-size: 100%;
   }
 
@@ -416,37 +412,37 @@
    * Toward the source is the other way along the inline axis, and a
    * right-to-left document turns both.
    */
-  [data-ui='transfer']
-    > [data-part='body']
-    > [data-part='actions']
-    > :is([data-part='move-to-source'], [data-part='move-all-to-source'])
-    > [data-part='start']
-    > [data-ui='icon'],
-  [data-ui='transfer']:dir(rtl)
-    > [data-part='body']
-    > [data-part='actions']
-    > :is([data-part='move-to-target'], [data-part='move-all-to-target'])
-    > [data-part='end']
-    > [data-ui='icon'] {
+  [data-ui-transfer]
+    > [data-part-body]
+    > [data-part-actions]
+    > :is([data-part-move-to-source], [data-part-move-all-to-source])
+    > [data-part-start]
+    > [data-ui-icon],
+  [data-ui-transfer]:dir(rtl)
+    > [data-part-body]
+    > [data-part-actions]
+    > :is([data-part-move-to-target], [data-part-move-all-to-target])
+    > [data-part-end]
+    > [data-ui-icon] {
     scale: -1 1;
   }
 
-  [data-ui='transfer']:dir(rtl)
-    > [data-part='body']
-    > [data-part='actions']
-    > :is([data-part='move-to-source'], [data-part='move-all-to-source'])
-    > [data-part='start']
-    > [data-ui='icon'] {
+  [data-ui-transfer]:dir(rtl)
+    > [data-part-body]
+    > [data-part-actions]
+    > :is([data-part-move-to-source], [data-part-move-all-to-source])
+    > [data-part-start]
+    > [data-ui-icon] {
     scale: 1 1;
   }
 
-  [data-ui='transfer']
-    > [data-part='body']
-    > [data-part='actions']
-    > [data-part='reorder']
-    > [data-part='move-up']
-    > [data-part='start']
-    > [data-ui='icon'] {
+  [data-ui-transfer]
+    > [data-part-body]
+    > [data-part-actions]
+    > [data-part-reorder]
+    > [data-part-move-up]
+    > [data-part-start]
+    > [data-ui-icon] {
     scale: 1 -1;
   }
 
@@ -463,93 +459,93 @@
    * `layout="auto"` under the container step, because a container condition
    * cannot be a selector.
    */
-  [data-ui='transfer'][data-layout='steps'] > [data-part='switch'] {
+  [data-ui-transfer][data-layout='steps'] > [data-part-switch] {
     display: block;
   }
 
-  [data-ui='transfer'][data-layout='steps'] > [data-part='body'] {
+  [data-ui-transfer][data-layout='steps'] > [data-part-body] {
     grid-template-columns: minmax(0, 1fr);
     row-gap: var(--slotted-space-4, 0.5rem);
   }
 
-  [data-ui='transfer'][data-layout='steps']
-    > [data-part='body']
-    > [data-part='pane']:not([data-current]) {
+  [data-ui-transfer][data-layout='steps']
+    > [data-part-body]
+    > [data-part-pane]:not([data-current]) {
     display: none;
   }
 
-  [data-ui='transfer'][data-layout='steps'] > [data-part='body'] > [data-part='actions'] {
+  [data-ui-transfer][data-layout='steps'] > [data-part-body] > [data-part-actions] {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
 
-  [data-ui='transfer'][data-layout='steps']
-    > [data-part='body']
-    > [data-part='actions']
-    > :is([data-part='move-to-source'], [data-part='reorder']) {
+  [data-ui-transfer][data-layout='steps']
+    > [data-part-body]
+    > [data-part-actions]
+    > :is([data-part-move-to-source], [data-part-reorder]) {
     margin-block-start: 0;
   }
 
-  [data-ui='transfer'][data-layout='steps'][data-pane='source']
-    > [data-part='body']
-    > [data-part='actions']
-    > :is([data-part='move-to-source'], [data-part='move-all-to-source'], [data-part='reorder']),
-  [data-ui='transfer'][data-layout='steps'][data-pane='target']
-    > [data-part='body']
-    > [data-part='actions']
-    > :is([data-part='move-to-target'], [data-part='move-all-to-target']) {
+  [data-ui-transfer][data-layout='steps'][data-pane='source']
+    > [data-part-body]
+    > [data-part-actions]
+    > :is([data-part-move-to-source], [data-part-move-all-to-source], [data-part-reorder]),
+  [data-ui-transfer][data-layout='steps'][data-pane='target']
+    > [data-part-body]
+    > [data-part-actions]
+    > :is([data-part-move-to-target], [data-part-move-all-to-target]) {
     display: none;
   }
 
-  [data-ui='transfer'][data-layout='steps']
-    > [data-part='body']
-    > [data-part='actions']
-    > [data-part='reorder'] {
+  [data-ui-transfer][data-layout='steps']
+    > [data-part-body]
+    > [data-part-actions]
+    > [data-part-reorder] {
     grid-column: 1 / -1;
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
 
   @container transfer (inline-size < 36rem) {
-    [data-ui='transfer'][data-layout='auto'] > [data-part='switch'] {
+    [data-ui-transfer][data-layout='auto'] > [data-part-switch] {
       display: block;
     }
 
-    [data-ui='transfer'][data-layout='auto'] > [data-part='body'] {
+    [data-ui-transfer][data-layout='auto'] > [data-part-body] {
       grid-template-columns: minmax(0, 1fr);
       row-gap: var(--slotted-space-4, 0.5rem);
     }
 
-    [data-ui='transfer'][data-layout='auto']
-      > [data-part='body']
-      > [data-part='pane']:not([data-current]) {
+    [data-ui-transfer][data-layout='auto']
+      > [data-part-body]
+      > [data-part-pane]:not([data-current]) {
       display: none;
     }
 
-    [data-ui='transfer'][data-layout='auto'] > [data-part='body'] > [data-part='actions'] {
+    [data-ui-transfer][data-layout='auto'] > [data-part-body] > [data-part-actions] {
       grid-template-columns: repeat(2, minmax(0, 1fr));
     }
 
-    [data-ui='transfer'][data-layout='auto']
-      > [data-part='body']
-      > [data-part='actions']
-      > :is([data-part='move-to-source'], [data-part='reorder']) {
+    [data-ui-transfer][data-layout='auto']
+      > [data-part-body]
+      > [data-part-actions]
+      > :is([data-part-move-to-source], [data-part-reorder]) {
       margin-block-start: 0;
     }
 
-    [data-ui='transfer'][data-layout='auto'][data-pane='source']
-      > [data-part='body']
-      > [data-part='actions']
-      > :is([data-part='move-to-source'], [data-part='move-all-to-source'], [data-part='reorder']),
-    [data-ui='transfer'][data-layout='auto'][data-pane='target']
-      > [data-part='body']
-      > [data-part='actions']
-      > :is([data-part='move-to-target'], [data-part='move-all-to-target']) {
+    [data-ui-transfer][data-layout='auto'][data-pane='source']
+      > [data-part-body]
+      > [data-part-actions]
+      > :is([data-part-move-to-source], [data-part-move-all-to-source], [data-part-reorder]),
+    [data-ui-transfer][data-layout='auto'][data-pane='target']
+      > [data-part-body]
+      > [data-part-actions]
+      > :is([data-part-move-to-target], [data-part-move-all-to-target]) {
       display: none;
     }
 
-    [data-ui='transfer'][data-layout='auto']
-      > [data-part='body']
-      > [data-part='actions']
-      > [data-part='reorder'] {
+    [data-ui-transfer][data-layout='auto']
+      > [data-part-body]
+      > [data-part-actions]
+      > [data-part-reorder] {
       grid-column: 1 / -1;
       grid-template-columns: repeat(2, minmax(0, 1fr));
     }
@@ -561,7 +557,7 @@
    * draws no focus ring of its own.
    */
   @media (forced-colors: active) {
-    [data-ui='transfer'][data-invalid] > [data-part='body'] > [data-part='pane'] {
+    [data-ui-transfer][data-invalid] > [data-part-body] > [data-part-pane] {
       outline: var(--_invalid-edge-width) solid CanvasText;
       outline-offset: calc(
         -1 * (var(--slotted-border-width-thin, 1px) + var(--_invalid-edge-width))