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

package/src/data-grid/data-grid.tokens.json

@@ -7,7 +7,9 @@
   "--slotted-control-font-size-md",
   "--slotted-control-font-size-sm",
   "--slotted-control-gap-md",
+  "--slotted-control-height-lg",
   "--slotted-control-height-md",
+  "--slotted-control-height-sm",
   "--slotted-control-icon-size-md",
   "--slotted-control-inner-size-sm",
   "--slotted-control-invalid-edge-width",

package/src/data-list/data-list.css

@@ -14,7 +14,7 @@
    * family is written on an element of its own, never on the `li`, so the row
    * stays the row `list-item.css` recognises.
    */
-  [data-ui='data-list'][data-part='root'] {
+  [data-ui-data-list][data-part-root] {
     /* The pop-in's two measures (`data-grid.css`, the pop-in): a field is at
        least nine rems, so two sit side by side from eighteen, and a field that
        has the row to itself puts its label in a track of seven and a half. */
@@ -35,12 +35,12 @@
     min-inline-size: 0;
   }
 
-  [data-ui='data-list'][data-size='sm'] {
+  [data-ui-data-list][data-size='sm'] {
     --_pad-inline: var(--slotted-control-padding-inline-sm, 10px);
     --_gap: var(--slotted-control-gap-sm, 6px);
   }
 
-  [data-ui='data-list'][data-size='lg'] {
+  [data-ui-data-list][data-size='lg'] {
     --_pad-inline: var(--slotted-control-padding-inline-lg, 16px);
     --_gap: var(--slotted-control-gap-lg, 8px);
   }
@@ -53,7 +53,7 @@
    * The rule under it is the set's first rule: a ruled list draws a line above
    * every row but the first, and the header is what the first row sits under.
    */
-  [data-ui='data-list'] > [data-part='header'] {
+  [data-ui-data-list] > [data-part-header] {
     align-items: center;
     box-shadow: 0 var(--_rule-width) 0 0 var(--_rule);
     box-sizing: border-box;
@@ -70,23 +70,23 @@
 
   /* A plain list draws no rule between its rows, so the bar draws none under
      itself either. */
-  [data-ui='data-list'][data-variant='plain'] > [data-part='header'] {
+  [data-ui-data-list][data-variant='plain'] > [data-part-header] {
     box-shadow: none;
   }
 
   /* A framed set carries its own edge; the bar sits outside it and the rule
      would double the frame's top. */
-  [data-ui='data-list'][data-variant='framed'] > [data-part='header'] {
+  [data-ui-data-list][data-variant='framed'] > [data-part-header] {
     box-shadow: none;
     padding-inline: calc(var(--_pad-inline) + var(--_rule-width));
   }
 
-  [data-ui='data-list'] [data-part='select-all'] {
+  [data-ui-data-list] [data-part-select-all] {
     display: inline-flex;
     flex: none;
   }
 
-  [data-ui='data-list'] [data-part='count'] {
+  [data-ui-data-list] [data-part-count] {
     color: var(--_muted);
     flex: 1 1 auto;
     font-variant-numeric: tabular-nums;
@@ -96,7 +96,7 @@
     unicode-bidi: plaintext;
   }
 
-  [data-ui='data-list'] [data-part='sort'] {
+  [data-ui-data-list] [data-part-sort] {
     display: inline-flex;
     flex: none;
     margin-inline-start: auto;
@@ -112,14 +112,14 @@
    * half turn for ascending. Without a key there is nothing to point at and
    * the binding draws no mark.
    */
-  [data-ui='data-list'] [data-part='sort'] [data-part='end'] > [data-ui='icon'] {
+  [data-ui-data-list] [data-part-sort] [data-part-end] > [data-ui-icon] {
     transition: transform var(--_transition);
   }
 
-  [data-ui='data-list']
-    [data-part='sort'][data-direction='ascending']
-    [data-part='end']
-    > [data-ui='icon'] {
+  [data-ui-data-list]
+    [data-part-sort][data-direction='ascending']
+    [data-part-end]
+    > [data-ui-icon] {
     transform: rotate(180deg);
   }
 
@@ -130,31 +130,31 @@
    * controls a record holds stand above that target, so pressing a checkbox,
    * a disclosure or an action presses that control and not the record.
    */
-  [data-ui='data-list'] [data-ui='list-item'] {
+  [data-ui-data-list] [data-ui-list-item] {
     position: relative;
   }
 
-  [data-ui='data-list']
-    [data-ui='list-item']
+  [data-ui-data-list]
+    [data-ui-list-item]
     :is(
-      [data-part='selection'],
-      [data-part='more'],
-      [data-part='field-value'] :is(a, button, input, select, textarea, [tabindex])
+      [data-part-selection],
+      [data-part-more],
+      [data-part-field-value] :is(a, button, input, select, textarea, [tabindex])
     ),
-  [data-ui='data-list'] [data-ui='list-item'] > [data-part='actions'] {
+  [data-ui-data-list] [data-ui-list-item] > [data-part-actions] {
     position: relative;
     z-index: 1;
   }
 
-  [data-ui='data-list'] [data-part='selection'],
-  [data-ui='data-list'] [data-part='media'] {
+  [data-ui-data-list] [data-part-selection],
+  [data-ui-data-list] [data-part-media] {
     align-items: center;
     display: inline-flex;
     flex: none;
   }
 
   /* Both in one leading column: the chooser first, the picture after it. */
-  [data-ui='data-list'] [data-part='selection'] + [data-part='media'] {
+  [data-ui-data-list] [data-part-selection] + [data-part-media] {
     margin-inline-start: var(--_gap);
   }
 
@@ -164,7 +164,7 @@
    * sentence nobody listens to twice — and its `::after` is the whole row to a
    * pointer, which is where a phone reader's thumb lands.
    */
-  [data-ui='data-list'] :is(a, button)[data-part='title'] {
+  [data-ui-data-list] :is(a, button)[data-part-title] {
     appearance: none;
     background: none;
     border: 0;
@@ -177,29 +177,29 @@
     text-decoration: none;
   }
 
-  [data-ui='data-list'] :is(a, button)[data-part='title']::after {
+  [data-ui-data-list] :is(a, button)[data-part-title]::after {
     border-radius: inherit;
     content: '';
     inset: 0;
     position: absolute;
   }
 
-  [data-ui='data-list'] :is(a, button)[data-part='title']:focus-visible {
+  [data-ui-data-list] :is(a, button)[data-part-title]:focus-visible {
     outline: none;
   }
 
   /* The ring is drawn by the target, inside the row, as `list-item` draws it
      on its own content: a row is full width, and an outward ring on the first
      record of a framed set is drawn under the frame. */
-  [data-ui='data-list'] :is(a, button)[data-part='title']:focus-visible::after {
+  [data-ui-data-list] :is(a, button)[data-part-title]:focus-visible::after {
     outline: var(--slotted-focus-ring-width, 2px) solid
       var(--slotted-focus-ring-color, currentColor);
     outline-offset: calc(var(--slotted-focus-ring-offset, 2px) * -1);
   }
 
-  [data-ui='data-list']
-    [data-ui='list-item']:not([data-disabled]):not([data-loading])
-    :is(a[href], button:not(:disabled))[data-part='title']:hover {
+  [data-ui-data-list]
+    [data-ui-list-item]:not([data-disabled]):not([data-loading])
+    :is(a[href], button:not(:disabled))[data-part-title]:hover {
     text-decoration: underline;
     text-decoration-thickness: from-font;
     text-underline-offset: 0.2em;
@@ -212,23 +212,21 @@
    * through the row's own `--_fill`, which already knows the tone and the
    * selection it is painted over. Both hold back for `disabled` and `loading`.
    */
-  [data-ui='data-list']
-    [data-ui='list-item']:not([data-disabled]):not([data-loading]):has(
-      [data-part='title']:is(a[href], button:not(:disabled)):hover
+  [data-ui-data-list]
+    [data-ui-list-item]:not([data-disabled]):not([data-loading]):has(
+      [data-part-title]:is(a[href], button:not(:disabled)):hover
     ) {
     --_fill: var(--_hover, ButtonFace);
   }
 
-  [data-ui='data-list']
-    [data-ui='list-item']:not([data-disabled]):not([data-loading]):has(
-      [data-part='title']:is(a[href], button:not(:disabled)):active
+  [data-ui-data-list]
+    [data-ui-list-item]:not([data-disabled]):not([data-loading]):has(
+      [data-part-title]:is(a[href], button:not(:disabled)):active
     ) {
     --_fill: var(--_active, ButtonFace);
   }
 
-  [data-ui='data-list']
-    [data-ui='list-item']:is([data-disabled], [data-loading])
-    [data-part='title'] {
+  [data-ui-data-list] [data-ui-list-item]:is([data-disabled], [data-loading]) [data-part-title] {
     cursor: default;
   }
 
@@ -239,7 +237,7 @@
    * recedes itself while it loads or is disabled, and which a selection leaves
    * alone, so a selected record keeps its figures in the page's ink.
    */
-  [data-ui='data-list'] [data-part='trailing'] {
+  [data-ui-data-list] [data-part-trailing] {
     color: var(--_text, CanvasText);
     font-variant-numeric: tabular-nums;
     font-weight: var(--slotted-font-weight-medium, 500);
@@ -264,10 +262,10 @@
    * fell to one squeezed column with its dates broken in two. Below
    * `list-item`'s 22rem the grid has two columns and `-1` still names its end.
    */
-  [data-ui='data-list']
-    [data-ui='list-item']
-    > [data-part='content']
-    > :is([data-part='fields'], [data-part='more']) {
+  [data-ui-data-list]
+    [data-ui-list-item]
+    > [data-part-content]
+    > :is([data-part-fields], [data-part-more]) {
     grid-column: 2 / -1;
   }
 
@@ -276,17 +274,17 @@
      under them the fields of a 240-pixel record were eleven rems wide. The
      pop-in makes the same move below 600 pixels. */
   @container slotted-list-item (max-inline-size: 22rem) {
-    [data-ui='data-list']
-      [data-ui='list-item']
-      > [data-part='content']
-      > :is([data-part='fields'], [data-part='more']) {
+    [data-ui-data-list]
+      [data-ui-list-item]
+      > [data-part-content]
+      > :is([data-part-fields], [data-part-more]) {
       grid-column: 1 / -1;
     }
   }
 
   /* The box is a query container for its pairs. Its own tracks need no query:
      `auto-fill` already gives one column below eighteen rems. */
-  [data-ui='data-list'] [data-part='fields'] {
+  [data-ui-data-list] [data-part-fields] {
     column-gap: var(--slotted-space-4, 0.5rem);
     container: slotted-data-list-fields / inline-size;
     display: grid;
@@ -297,14 +295,14 @@
     row-gap: var(--slotted-space-2, 0.25rem);
   }
 
-  [data-ui='data-list'] [data-part='field'] {
+  [data-ui-data-list] [data-part-field] {
     display: flex;
     flex-direction: column;
     margin: 0;
     min-inline-size: 0;
   }
 
-  [data-ui='data-list'] [data-part='field-label'] {
+  [data-ui-data-list] [data-part-field-label] {
     color: var(--_muted, GrayText);
     font-size: var(--slotted-font-size-xs, 0.75rem);
     font-weight: var(--slotted-font-weight-regular, 400);
@@ -317,7 +315,7 @@
 
   /* The value is the row's own ink and size, and it wraps: a field has no
      other way to show what it holds, so it never truncates. */
-  [data-ui='data-list'] [data-part='field-value'] {
+  [data-ui-data-list] [data-part-field-value] {
     color: var(--_text, CanvasText);
     font-weight: var(--slotted-font-weight-regular, 400);
     line-height: var(--slotted-line-height-md, 1.5);
@@ -333,13 +331,13 @@
     unicode-bidi: plaintext;
   }
 
-  [data-ui='data-list'] [data-part='field-value'][data-numeric] {
+  [data-ui-data-list] [data-part-field-value][data-numeric] {
     font-variant-numeric: tabular-nums;
   }
 
   /* `—` is written by both bindings; the sheet only lowers its ink, the rule
      `description-list` settled for the same mark. */
-  [data-ui='data-list'] [data-part='field-empty'] {
+  [data-ui-data-list] [data-part-field-empty] {
     color: var(--_muted, GrayText);
   }
 
@@ -351,7 +349,7 @@
    * and a date took two lines, so the pair returns to the label over the value.
    */
   @container slotted-data-list-fields (min-inline-size: 12rem) and (max-inline-size: 19rem) {
-    [data-ui='data-list'] [data-part='field'] {
+    [data-ui-data-list] [data-part-field] {
       align-items: baseline;
       column-gap: var(--slotted-space-3, 0.375rem);
       display: grid;
@@ -364,7 +362,7 @@
    * a control-sized button, because it belongs to the record's text; its box
    * still reaches the 24-pixel target.
    */
-  [data-ui='data-list'] [data-part='more'] {
+  [data-ui-data-list] [data-part-more] {
     align-items: center;
     appearance: none;
     background: none;
@@ -385,26 +383,26 @@
 
   /* The chevron is the `Glyph` the binding draws after the words; it turns a
      half turn once the fields are shown. */
-  [data-ui='data-list'] [data-part='more'] > [data-ui='icon'] {
+  [data-ui-data-list] [data-part-more] > [data-ui-icon] {
     transition: transform var(--_transition);
   }
 
-  [data-ui='data-list'] [data-part='more'][aria-expanded='true'] > [data-ui='icon'] {
+  [data-ui-data-list] [data-part-more][aria-expanded='true'] > [data-ui-icon] {
     transform: rotate(180deg);
   }
 
-  [data-ui='data-list'] [data-part='more']:not(:disabled):hover {
+  [data-ui-data-list] [data-part-more]:not(:disabled):hover {
     text-decoration: underline;
     text-decoration-thickness: from-font;
     text-underline-offset: 0.2em;
   }
 
-  [data-ui='data-list'] [data-part='more']:focus-visible {
+  [data-ui-data-list] [data-part-more]:focus-visible {
     outline: var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);
     outline-offset: var(--slotted-focus-ring-offset, 2px);
   }
 
-  [data-ui='data-list'] [data-ui='list-item'][data-disabled] [data-part='more'] {
+  [data-ui-data-list] [data-ui-list-item][data-disabled] [data-part-more] {
     color: var(--slotted-disabled-foreground, GrayText);
   }
 
@@ -414,28 +412,41 @@
    * Over rows already shown the rows stay and recede, and nothing moves:
    * `data-grid`'s rule for the same wait, at the same strength.
    */
-  [data-ui='data-list'][aria-busy='true'] > [data-ui='list'] {
+  [data-ui-data-list] > [data-ui-list] {
+    /* The containing block of the veil a busy list lays over its rows. */
+    position: relative;
+  }
+
+  [data-ui-data-list][aria-busy='true'] > [data-ui-list] {
     opacity: 0.55;
-    pointer-events: none;
     transition: opacity var(--_transition);
   }
 
-  [data-ui='data-list'] > [data-part='empty'] {
+  /* A veil refuses the press, as `data-grid`'s does: `pointer-events: none`
+     on the list is inherited, and toggling it restyled every row. */
+  [data-ui-data-list][aria-busy='true'] > [data-ui-list]::after {
+    content: '';
+    inset: 0;
+    position: absolute;
+    z-index: calc(var(--slotted-z-index-sticky, 100) + 4);
+  }
+
+  [data-ui-data-list] > [data-part-empty] {
     padding-block: var(--slotted-space-8, 1.5rem);
     padding-inline: var(--_pad-inline);
   }
 
-  [data-ui='data-list'] > [data-part='loader'] {
+  [data-ui-data-list] > [data-part-loader] {
     display: block;
   }
 
   /* A skeleton record's lines stand where the text will: the title's at the
      title's size, the description's under it. */
-  [data-ui='data-list'] > [data-part='loader'] [data-part='field-value'] [data-ui='skeleton'] {
+  [data-ui-data-list] > [data-part-loader] [data-part-field-value] [data-ui-skeleton] {
     vertical-align: middle;
   }
 
-  [data-ui='data-list'] > [data-part='footer'] {
+  [data-ui-data-list] > [data-part-footer] {
     align-items: center;
     display: flex;
     flex-wrap: wrap;
@@ -445,11 +456,11 @@
     padding-inline: var(--_pad-inline);
   }
 
-  [data-ui='data-list'] > [data-part='footer']:empty {
+  [data-ui-data-list] > [data-part-footer]:empty {
     display: none;
   }
 
-  [data-ui='data-list'] [data-part='load-more'] {
+  [data-ui-data-list] [data-part-load-more] {
     display: inline-flex;
   }
 }

package/src/data-list/data-list.tokens.json

@@ -31,5 +31,6 @@
   "--slotted-target-min",
   "--slotted-text",
   "--slotted-text-muted",
-  "--slotted-tone-accent-text"
+  "--slotted-tone-accent-text",
+  "--slotted-z-index-sticky"
 ]