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

package/src/list-item/list-item.css

@@ -4,7 +4,7 @@
    *
    * One entry of a `list`. The set decides four things — variant, size, marker
    * and inset — and hands each one down through the binding as a `data-`
-   * attribute this sheet reads. **No selector here reaches `[data-ui='list']`,
+   * attribute this sheet reads. **No selector here reaches `[data-ui-list]`,
    * and none there reaches this family**, which is the rule `accordion` and
    * `collapsible` set for the same relationship.
    *
@@ -28,7 +28,7 @@
    * each part on the element the page wrote and React renders it as that
    * element, so the chain in the selectors is the chain in the document.
    */
-  [data-ui='list-item'][data-part='root'] {
+  [data-ui-list-item][data-part-root] {
     /* Geometry. Every value is the control scale's, because a row is a
        control-sized thing: one theme decision retunes the rows, the buttons and
        the fields together, and `@media (pointer: coarse)` grows all three at
@@ -157,7 +157,7 @@
    * arrives inside every control token above; the two never multiply, because
    * this family reads the density-varying token and states no second scale.
    */
-  [data-ui='list-item'][data-size='sm'] {
+  [data-ui-list-item][data-size='sm'] {
     --_min-block: var(
       --slotted-list-item-min-block-size-sm,
       var(--slotted-control-height-sm, 30px)
@@ -182,7 +182,7 @@
     );
   }
 
-  [data-ui='list-item'][data-size='lg'] {
+  [data-ui-list-item][data-size='lg'] {
     --_min-block: var(
       --slotted-list-item-min-block-size-lg,
       var(--slotted-control-height-lg, 38px)
@@ -220,7 +220,7 @@
    * never fills a resting row, because a list of rows each filled with a tone
    * is a list nobody can read. The current row is not the tone's to move.
    */
-  [data-ui='list-item'][data-tone='accent'] {
+  [data-ui-list-item][data-tone='accent'] {
     --_text: var(--slotted-tone-accent-text, CanvasText);
     --_subtle-hover: var(--slotted-tone-accent-subtle-hover, ButtonFace);
     --_subtle-active: var(--slotted-tone-accent-subtle-active, ButtonFace);
@@ -234,7 +234,7 @@
     --_selected-active: var(--_subtle-active);
   }
 
-  [data-ui='list-item'][data-tone='success'] {
+  [data-ui-list-item][data-tone='success'] {
     --_text: var(--slotted-tone-success-text, CanvasText);
     --_subtle-hover: var(--slotted-tone-success-subtle-hover, ButtonFace);
     --_subtle-active: var(--slotted-tone-success-subtle-active, ButtonFace);
@@ -248,7 +248,21 @@
     --_selected-active: var(--_subtle-active);
   }
 
-  [data-ui='list-item'][data-tone='warning'] {
+  [data-ui-list-item][data-tone='info'] {
+    --_text: var(--slotted-tone-info-text, CanvasText);
+    --_subtle-hover: var(--slotted-tone-info-subtle-hover, ButtonFace);
+    --_subtle-active: var(--slotted-tone-info-subtle-active, ButtonFace);
+    --_solid-hover: var(--slotted-tone-info-solid-hover, ButtonFace);
+    --_solid-active: var(--slotted-tone-info-solid-active, ButtonFace);
+    --_surface: var(--slotted-tone-info-surface, Canvas);
+    --_selected-edge: var(--slotted-tone-info-border, ButtonBorder);
+    --_selected-surface: var(--slotted-list-item-background-selected, var(--_surface));
+    --_selected-text: var(--slotted-tone-info-text, CanvasText);
+    --_selected-hover: var(--_subtle-hover);
+    --_selected-active: var(--_subtle-active);
+  }
+
+  [data-ui-list-item][data-tone='warning'] {
     --_text: var(--slotted-tone-warning-text, CanvasText);
     --_subtle-hover: var(--slotted-tone-warning-subtle-hover, ButtonFace);
     --_subtle-active: var(--slotted-tone-warning-subtle-active, ButtonFace);
@@ -262,7 +276,7 @@
     --_selected-active: var(--_subtle-active);
   }
 
-  [data-ui='list-item'][data-tone='danger'] {
+  [data-ui-list-item][data-tone='danger'] {
     --_text: var(--slotted-tone-danger-text, CanvasText);
     --_subtle-hover: var(--slotted-tone-danger-subtle-hover, ButtonFace);
     --_subtle-active: var(--slotted-tone-danger-subtle-active, ButtonFace);
@@ -293,8 +307,8 @@
    * sits on the title's line in a row of three lines instead of floating in the
    * middle of the block.
    */
-  [data-ui='list-item'][data-marker='bullet'] > [data-part='marker'],
-  [data-ui='list-item'][data-marker='number']::before {
+  [data-ui-list-item][data-marker='bullet'] > [data-part-marker],
+  [data-ui-list-item][data-marker='number']::before {
     /* The mark sits on the title's first line and never in the middle of the
        block, whatever `align` says. `align` is about the leading visual — an
        avatar beside three lines of text belongs with the title or with the
@@ -329,7 +343,7 @@
     padding-block-start: var(--_pad-block);
   }
 
-  [data-ui='list-item'][data-marker='bullet'] > [data-part='marker'] {
+  [data-ui-list-item][data-marker='bullet'] > [data-part-marker] {
     --slotted-icon-size: var(--_marker-size);
     justify-content: center;
   }
@@ -338,27 +352,27 @@
      middle of the part, because the part is one line and its padding tall and
      the dot has no baseline to sit on. Half the line less half the dot, so the
      dot stands between the baseline and the cap line rather than on either. */
-  [data-ui='list-item'][data-marker='bullet'] > [data-part='marker'] > [data-ui='icon'] {
+  [data-ui-list-item][data-marker='bullet'] > [data-part-marker] > [data-ui-icon] {
     margin-block-start: calc(
       var(--_font-size) * var(--slotted-line-height-md, 1.5) * 0.5 - var(--_marker-size) * 0.5
     );
   }
 
-  [data-ui='list-item'][data-marker='number']::before {
+  [data-ui-list-item][data-marker='number']::before {
     content: counter(slotted-list-item) '.';
     justify-content: end;
   }
 
   /* The mark already stands in its own gutter, so the box beside it gives up
      the padding it would otherwise repeat. */
-  [data-ui='list-item']:is([data-marker='bullet'], [data-marker='number']) > [data-part='content'] {
+  [data-ui-list-item]:is([data-marker='bullet'], [data-marker='number']) > [data-part-content] {
     padding-inline-start: 0;
   }
 
   /* `inset` is the set's answer for a list inside a box that already pads its
      own content. The mark gives up its gutter with everything else. */
-  [data-ui='list-item'][data-inset][data-marker='bullet'] > [data-part='marker'],
-  [data-ui='list-item'][data-inset][data-marker='number']::before {
+  [data-ui-list-item][data-inset][data-marker='bullet'] > [data-part-marker],
+  [data-ui-list-item][data-inset][data-marker='number']::before {
     margin-inline-start: 0;
   }
 
@@ -375,7 +389,7 @@
    * consumer choosing between the three chooses an accessibility tree, never a
    * different picture.
    */
-  [data-ui='list-item'] > [data-part='content'] {
+  [data-ui-list-item] > [data-part-content] {
     appearance: none;
     background-color: transparent;
     border: none;
@@ -420,20 +434,20 @@
    * `framed` clips its own corners at the set, so the first and last rows are
    * rounded by the box rather than by themselves.
    */
-  [data-ui='list-item']:is([data-variant='ruled'], [data-variant='framed']) {
+  [data-ui-list-item]:is([data-variant='ruled'], [data-variant='framed']) {
     border-radius: 0;
   }
 
   /* A row whose whole box resolves somewhere, or runs a command, is a target
      and the pointer says so. A row that is only read keeps the arrow. */
-  [data-ui='list-item']:not([data-disabled]) > :is(a, button)[data-part='content']:not(:disabled) {
+  [data-ui-list-item]:not([data-disabled]) > :is(a, button)[data-part-content]:not(:disabled) {
     cursor: pointer;
   }
 
   /* `inset` takes the row's inline padding away so a list inside a padded box
      lines its titles up with the box. The fill and the rule still run edge to
      edge, which is the half MUI's `disableGutters` leaves out. */
-  [data-ui='list-item'][data-inset] > [data-part='content'] {
+  [data-ui-list-item][data-inset] > [data-part-content] {
     padding-inline: 0;
   }
 
@@ -443,11 +457,11 @@
    * the same decision `alignItems`; Angular Material derives it from counting
    * the lines, which is a count a translated string can change.
    */
-  [data-ui='list-item'][data-align='start'] > [data-part='content'] {
+  [data-ui-list-item][data-align='start'] > [data-part-content] {
     align-items: start;
   }
 
-  [data-ui='list-item'] > [data-part='content'] > [data-part='start'] {
+  [data-ui-list-item] > [data-part-content] > [data-part-start] {
     align-items: center;
     color: var(--_text);
     display: flex;
@@ -472,7 +486,7 @@
    * chooser is (CK1); the gap beside it is the row's control gap, the same
    * distance the chooser puts between its box and its own label.
    */
-  [data-ui='list-item'] > [data-part='content'] > [data-part='start']:has(> [data-ui='checkbox']) {
+  [data-ui-list-item] > [data-part-content] > [data-part-start]:has(> [data-ui-checkbox]) {
     align-items: start;
     inline-size: var(--_control-size);
     min-block-size: calc(var(--_font-size) * var(--slotted-line-height-md, 1.5));
@@ -480,7 +494,7 @@
 
   /* A leading visual beside a three-line row sits on the title's line, and the
      line is the box's own, not the block's. */
-  [data-ui='list-item'][data-align='start'] > [data-part='content'] > [data-part='start'] {
+  [data-ui-list-item][data-align='start'] > [data-part-content] > [data-part-start] {
     min-block-size: calc(var(--_font-size) * var(--slotted-line-height-md, 1.5));
   }
 
@@ -490,7 +504,7 @@
    * word, so a title that is one unbroken token — a URL, a commit hash — pushes
    * the metadata out of the row instead of breaking inside it.
    */
-  [data-ui='list-item'] > [data-part='content'] > [data-part='body'] {
+  [data-ui-list-item] > [data-part-content] > [data-part-body] {
     display: flex;
     flex-direction: column;
     grid-area: body;
@@ -498,7 +512,7 @@
     row-gap: var(--slotted-list-item-body-gap, var(--slotted-space-1, 0.125rem));
   }
 
-  [data-ui='list-item'] > [data-part='content'] > [data-part='body'] > [data-part='label'] {
+  [data-ui-list-item] > [data-part-content] > [data-part-body] > [data-part-label] {
     color: inherit;
     font-size: var(--_font-size);
     font-weight: var(--slotted-list-item-font-weight, var(--slotted-font-weight-regular, 400));
@@ -514,7 +528,7 @@
     unicode-bidi: plaintext;
   }
 
-  [data-ui='list-item'] > [data-part='content'] > [data-part='body'] > [data-part='description'] {
+  [data-ui-list-item] > [data-part-content] > [data-part-body] > [data-part-description] {
     color: var(--_muted);
     font-size: var(--slotted-list-item-description-font-size, var(--slotted-font-size-xs, 0.75rem));
     line-height: var(--slotted-line-height-sm, 1.45);
@@ -533,10 +547,10 @@
    * truncated string is still readable to assistive technology and still
    * reachable in full when the row is opened.
    */
-  [data-ui='list-item'][data-truncate]
-    > [data-part='content']
-    > [data-part='body']
-    > :is([data-part='label'], [data-part='description']) {
+  [data-ui-list-item][data-truncate]
+    > [data-part-content]
+    > [data-part-body]
+    > :is([data-part-label], [data-part-description]) {
     overflow: hidden;
     overflow-wrap: normal;
     text-overflow: ellipsis;
@@ -549,7 +563,7 @@
    * reader and part of its target for a pointer. Anything that acts is
    * `actions` instead.
    */
-  [data-ui='list-item'] > [data-part='content'] > [data-part='end'] {
+  [data-ui-list-item] > [data-part-content] > [data-part-end] {
     align-items: center;
     color: var(--_muted);
     display: flex;
@@ -571,7 +585,7 @@
    * The box is above the row's own fill, so a control here is operable on a row
    * whose whole surface resolves somewhere else.
    */
-  [data-ui='list-item'] > [data-part='actions'] {
+  [data-ui-list-item] > [data-part-actions] {
     align-items: center;
     /* The box counts its own inset (LI4). Below the breakpoint it takes the
        whole line and the row's inline inset on both sides, and read as
@@ -585,7 +599,7 @@
     position: relative;
   }
 
-  [data-ui='list-item'][data-inset] > [data-part='actions'] {
+  [data-ui-list-item][data-inset] > [data-part-actions] {
     padding-inline-end: 0;
   }
 
@@ -595,7 +609,7 @@
    * the title's line, a row of two lines put its badge and its delete control
    * on two different lines — the one thing a trailing pair must not do.
    */
-  [data-ui='list-item'][data-align='start'] > [data-part='actions'] {
+  [data-ui-list-item][data-align='start'] > [data-part-actions] {
     align-items: start;
     padding-block-start: var(--_pad-block);
   }
@@ -616,7 +630,7 @@
    * `framed` rules its rows exactly as `ruled` does; what it adds is the box
    * around them, and that box belongs to the set.
    */
-  [data-ui='list-item']:is([data-variant='ruled'], [data-variant='framed']):not(:first-child) {
+  [data-ui-list-item]:is([data-variant='ruled'], [data-variant='framed']):not(:first-child) {
     /* A shadow rather than a border, and the reason is the pointer. A border is
        part of the row's box and outside the box that paints hover, so the top
        pixel of every ruled row answered nothing: the reader saw a one-pixel
@@ -636,7 +650,7 @@
    * drawn once, at row scale, so a list of cards and a list of rows are the
    * same family in two arrangements rather than two families.
    */
-  [data-ui='list-item'][data-variant='separated'] {
+  [data-ui-list-item][data-variant='separated'] {
     --_fill: var(--slotted-list-item-background, var(--slotted-surface-raised, Canvas));
 
     border: var(--_rule-width) solid var(--_rule);
@@ -645,7 +659,7 @@
   /* The row's own corners clip the fill its content paints, so a hover wash
      inside a rounded row does not square off its edges. `clip` rather than
      `hidden`: a row is not a scroll container, and `hidden` would make it one. */
-  [data-ui='list-item'][data-variant='separated'] {
+  [data-ui-list-item][data-variant='separated'] {
     overflow: clip;
   }
 
@@ -661,14 +675,14 @@
    * nothing to say about being pointed at, and washing it would promise an
    * interaction that never arrives.
    */
-  [data-ui='list-item']:not([data-disabled]):not([data-loading]):has(
-      > :is(a, button)[data-part='content']:not(:disabled):hover
+  [data-ui-list-item]:not([data-disabled]):not([data-loading]):has(
+      > :is(a, button)[data-part-content]:not(:disabled):hover
     ) {
     --_fill: var(--_hover);
   }
 
-  [data-ui='list-item']:not([data-disabled]):not([data-loading]):has(
-      > :is(a, button)[data-part='content']:not(:disabled):active
+  [data-ui-list-item]:not([data-disabled]):not([data-loading]):has(
+      > :is(a, button)[data-part-content]:not(:disabled):active
     ) {
     --_fill: var(--_active);
   }
@@ -679,7 +693,7 @@
    * and on the last row it is drawn outside the page; a negative offset keeps
    * the whole ring on the row it is about.
    */
-  [data-ui='list-item'] > [data-part='content']:focus-visible {
+  [data-ui-list-item] > [data-part-content]: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);
   }
@@ -694,7 +708,7 @@
    * announce for itself, so this is also the only one of the two the row says
    * out loud.
    */
-  [data-ui='list-item'][data-current] {
+  [data-ui-list-item][data-current] {
     --_fill: var(--_current-surface);
     /* The edge is an inset shadow rather than a border, so the state changes
        no measurement and moves no text. It is what carries the state in
@@ -708,7 +722,7 @@
    * and the control the page puts in `start` — a `checkbox` — is what announces
    * it. `card` reached the same conclusion for the same reason.
    */
-  [data-ui='list-item'][data-selected] {
+  [data-ui-list-item][data-selected] {
     /* A selected row that is hovered has to darken, not lighten. The resting
        fill is already the tone's subtle step, so the two pointer states move
        one step along the same subtle pair rather than staying where an
@@ -718,7 +732,7 @@
     --_active: var(--_selected-active);
   }
 
-  [data-ui='list-item'][data-selected] {
+  [data-ui-list-item][data-selected] {
     --_fill: var(--_selected-surface);
     --_edge-shadow: inset 0 0 0 var(--_rule-width) var(--_selected-edge);
   }
@@ -732,8 +746,8 @@
    * and a rule drawn above the edge made its top two pixels in `high-contrast`,
    * where both are black.
    */
-  [data-ui='list-item']:is([data-selected], [data-current]):not(:first-child),
-  [data-ui='list-item']:is([data-selected], [data-current]) + [data-ui='list-item'] {
+  [data-ui-list-item]:is([data-selected], [data-current]):not(:first-child),
+  [data-ui-list-item]:is([data-selected], [data-current]) + [data-ui-list-item] {
     --_rule-shadow: 0 0 0 0 transparent;
   }
 
@@ -742,14 +756,14 @@
      them; both edges drawn made that line two pixels. The offsets are
      physical because `box-shadow` has no logical form, and the two sides are
      the same width, so the mirrored row is the same picture. */
-  [data-ui='list-item'][data-selected] + [data-ui='list-item'][data-selected] {
+  [data-ui-list-item][data-selected] + [data-ui-list-item][data-selected] {
     --_edge-shadow:
       inset 0 calc(var(--_rule-width) * -1) 0 0 var(--_selected-edge),
       inset var(--_rule-width) 0 0 0 var(--_selected-edge),
       inset calc(var(--_rule-width) * -1) 0 0 0 var(--_selected-edge);
   }
 
-  [data-ui='list-item'][data-selected] > [data-part='content'] {
+  [data-ui-list-item][data-selected] > [data-part-content] {
     color: var(--_selected-text);
     font-weight: var(
       --slotted-list-item-font-weight-selected,
@@ -757,7 +771,7 @@
     );
   }
 
-  [data-ui='list-item'][data-current] > [data-part='content'] {
+  [data-ui-list-item][data-current] > [data-part-content] {
     font-weight: var(
       --slotted-list-item-font-weight-current,
       var(--slotted-font-weight-medium, 500)
@@ -776,14 +790,14 @@
    * No placeholder is drawn. `skeleton` owns placeholder geometry, and a second
    * answer to that question is what `collapsible` already refused.
    */
-  [data-ui='list-item'][data-loading] {
+  [data-ui-list-item][data-loading] {
     /* One retarget rather than a rule per part: the title, the description, the
        metadata and the mark all read the same two custom properties, so the
        whole row recedes together and nothing changes size. */
     --_text: var(--_muted);
   }
 
-  [data-ui='list-item'][data-loading] > [data-part='content'] {
+  [data-ui-list-item][data-loading] > [data-part-content] {
     cursor: progress;
   }
 
@@ -799,7 +813,7 @@
    * control can refuse an interaction, which is the rule `card` states for the
    * same shape.
    */
-  [data-ui='list-item'][data-disabled] {
+  [data-ui-list-item][data-disabled] {
     /* Both, stated from one alias rather than one pointing at the other: a row
        that is loading retargets `--_text` at `--_muted`, and a disabled loading
        row would otherwise be a cycle CSS resolves by dropping both. Disabled is
@@ -812,7 +826,7 @@
     --_muted: var(--_disabled-ink);
   }
 
-  [data-ui='list-item'][data-disabled] > [data-part='content'] {
+  [data-ui-list-item][data-disabled] > [data-part-content] {
     cursor: default;
   }
 
@@ -823,7 +837,7 @@
    * surface a selected row is filled with, so a disabled card and a selected
    * one were one rectangle told apart only by their edge.
    */
-  [data-ui='list-item'][data-disabled][data-variant='separated'] {
+  [data-ui-list-item][data-disabled][data-variant='separated'] {
     --_fill: var(--slotted-surface-sunken, Canvas);
 
     border-color: var(--slotted-disabled-border, GrayText);
@@ -842,14 +856,14 @@
    * is invalid CSS — `docs/token-foundation.md` rule 4.
    */
   @container slotted-list-item (max-inline-size: 22rem) {
-    [data-ui='list-item'] > [data-part='content'] {
+    [data-ui-list-item] > [data-part-content] {
       grid-template-areas:
         'start body'
         'start end';
       grid-template-columns: auto minmax(0, 1fr);
     }
 
-    [data-ui='list-item'] > [data-part='content'] > [data-part='end'] {
+    [data-ui-list-item] > [data-part-content] > [data-part-end] {
       justify-content: start;
       margin-block-start: var(--slotted-list-item-body-gap, var(--slotted-space-1, 0.125rem));
       margin-inline-start: 0;
@@ -857,7 +871,7 @@
 
     /* The leading visual now spans two rows, so it stops being centred on the
        block and returns to the title's line. */
-    [data-ui='list-item'] > [data-part='content'] > [data-part='start'] {
+    [data-ui-list-item] > [data-part-content] > [data-part-start] {
       align-self: start;
       min-block-size: calc(var(--_font-size) * var(--slotted-line-height-md, 1.5));
     }
@@ -871,14 +885,14 @@
      * They stay at the end of the row, where they were, and take the row's own
      * inline inset so they line up with the content above them.
      */
-    [data-ui='list-item'] > [data-part='actions'] {
+    [data-ui-list-item] > [data-part-actions] {
       flex-basis: 100%;
       justify-content: flex-end;
       padding-block-end: var(--_pad-block);
       padding-inline: var(--_pad-inline);
     }
 
-    [data-ui='list-item'][data-inset] > [data-part='actions'] {
+    [data-ui-list-item][data-inset] > [data-part-actions] {
       padding-inline: 0;
     }
 
@@ -891,13 +905,13 @@
      * keeps the line it had; a target that carries a word still takes its
      * own, because a word is what does not fit.
      */
-    [data-ui='list-item'] > [data-part='actions']:not(:has(> :not([data-shape]))) {
+    [data-ui-list-item] > [data-part-actions]:not(:has(> :not([data-shape]))) {
       flex-basis: auto;
       padding-block-end: 0;
       padding-inline: 0 var(--_pad-inline);
     }
 
-    [data-ui='list-item'][data-inset] > [data-part='actions']:not(:has(> :not([data-shape]))) {
+    [data-ui-list-item][data-inset] > [data-part-actions]:not(:has(> :not([data-shape]))) {
       padding-inline-end: 0;
     }
   }
@@ -916,11 +930,11 @@
      * resting one would be the same rectangle. Selection is the accent state,
      * and the system's own selected pair is what says so.
      */
-    [data-ui='list-item'][data-selected] {
+    [data-ui-list-item][data-selected] {
       background-color: Highlight;
     }
 
-    [data-ui='list-item'][data-selected] > [data-part='content'] {
+    [data-ui-list-item][data-selected] > [data-part-content] {
       color: HighlightText;
     }
 
@@ -929,7 +943,7 @@
      * colour, drawn inward so it changes no measurement: the inset shadow that
      * says it elsewhere is decoration the theme cannot reach (R1).
      */
-    [data-ui='list-item'][data-current]:not([data-selected]) {
+    [data-ui-list-item][data-current]:not([data-selected]) {
       outline: var(--slotted-border-width-thin, 1px) solid Highlight;
       outline-offset: calc(-1 * var(--slotted-border-width-thin, 1px));
     }

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

@@ -91,6 +91,13 @@
   "--slotted-tone-danger-subtle-hover",
   "--slotted-tone-danger-surface",
   "--slotted-tone-danger-text",
+  "--slotted-tone-info-border",
+  "--slotted-tone-info-solid-active",
+  "--slotted-tone-info-solid-hover",
+  "--slotted-tone-info-subtle-active",
+  "--slotted-tone-info-subtle-hover",
+  "--slotted-tone-info-surface",
+  "--slotted-tone-info-text",
   "--slotted-tone-secondary-border",
   "--slotted-tone-secondary-solid-active",
   "--slotted-tone-secondary-solid-hover",