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

package/src/link/link.css

@@ -19,7 +19,7 @@
    * theme already holds to the highest ratio in each scheme cannot fail the
    * same way.
    */
-  [data-ui='link'] {
+  [data-ui-link] {
     --_strong: var(--slotted-text, CanvasText);
     --_rest: var(--slotted-link-color, var(--slotted-tone-accent-text, LinkText));
     --_hover: var(
@@ -80,7 +80,7 @@
    * pointer. Fluent calls it `subtle`, Primer `muted`, Polaris `monochrome`,
    * and all three describe the same two colours.
    */
-  [data-ui='link'][data-variant='neutral'] {
+  [data-ui-link][data-variant='neutral'] {
     --_rest: var(--slotted-link-color, currentColor);
     --_hover: var(--slotted-link-color-hover, var(--slotted-tone-accent-text, LinkText));
     --_active: var(
@@ -94,7 +94,7 @@
    * ground, so hover has nowhere further to go and the underline carries the
    * state on its own.
    */
-  [data-ui='link'][data-variant='inverse'] {
+  [data-ui-link][data-variant='inverse'] {
     --_strong: var(--slotted-text-inverse, Canvas);
     --_rest: var(--slotted-link-color, var(--slotted-text-inverse, Canvas));
   }
@@ -108,12 +108,12 @@
    * where there is no sentence for it to disappear into.
    */
 
-  [data-ui='link'][data-underline='hover'],
-  [data-ui='link'][data-underline='none'] {
+  [data-ui-link][data-underline='hover'],
+  [data-ui-link][data-underline='none'] {
     text-decoration-line: none;
   }
 
-  [data-ui='link'][data-underline='hover']:not([data-disabled]):hover {
+  [data-ui-link][data-underline='hover']:not([data-disabled]):hover {
     text-decoration-line: underline;
   }
 
@@ -122,7 +122,7 @@
    * `none` is left alone: it says the underline does not exist, not that it is
    * waiting for something.
    */
-  [data-ui='link'][data-underline='hover']:focus-visible {
+  [data-ui-link][data-underline='hover']:focus-visible {
     text-decoration-line: underline;
   }
 
@@ -134,19 +134,19 @@
    * in this repository can read this rule back.
    */
 
-  [data-ui='link'][data-visited]:visited {
+  [data-ui-link][data-visited]:visited {
     color: var(--_visited);
   }
 
   /* ── Hover and press, held back for disabled ────────────────────────────── */
 
-  [data-ui='link']:not([data-disabled]):hover {
+  [data-ui-link]:not([data-disabled]):hover {
     --_underline: currentColor;
 
     color: var(--_hover);
   }
 
-  [data-ui='link']:not([data-disabled]):active {
+  [data-ui-link]:not([data-disabled]):active {
     --_underline: currentColor;
 
     color: var(--_active);
@@ -159,7 +159,7 @@
    * offset reaches into the line above.
    */
 
-  [data-ui='link']:focus-visible {
+  [data-ui-link]:focus-visible {
     outline: var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);
     outline-offset: var(--slotted-link-focus-ring-offset, 1px);
   }
@@ -172,7 +172,7 @@
    * reads as a link that is not available rather than as plain text.
    */
 
-  [data-ui='link'][data-disabled] {
+  [data-ui-link][data-disabled] {
     color: var(--slotted-link-color-disabled, var(--slotted-disabled-foreground, GrayText));
     cursor: not-allowed;
   }
@@ -196,7 +196,7 @@
    * `--slotted-icon-size`, which the part states at the size of the text.
    */
 
-  [data-ui='link'] [data-part='external-icon'] {
+  [data-ui-link] [data-part-external-icon] {
     --slotted-icon-size: var(--slotted-link-external-icon-size, 1em);
 
     margin-inline-start: var(--slotted-link-external-icon-gap, 0.15em);
@@ -217,7 +217,7 @@
    * it.
    */
 
-  [data-ui='link'][aria-current]:not([aria-current='false']) {
+  [data-ui-link][aria-current]:not([aria-current='false']) {
     --_rest: var(--slotted-link-color-current, var(--slotted-text, CanvasText));
   }
 
@@ -230,7 +230,7 @@
    */
 
   @media (forced-colors: active) {
-    [data-ui='link'] {
+    [data-ui-link] {
       text-decoration-line: underline;
     }
   }

package/src/list/list.css

@@ -3,7 +3,7 @@
    * ── The set ────────────────────────────────────────────────────────────
    *
    * A vertical run of related rows. The rows are `list-item`, a family of its
-   * own, and **no selector here reaches `[data-ui='list-item']`** — the rule
+   * own, and **no selector here reaches `[data-ui-list-item]`** — the rule
    * `accordion` and `collapsible` set for the same relationship. What the set
    * decides it hands to each row through the binding, as a `data-` attribute
    * the row's own stylesheet reads.
@@ -19,8 +19,8 @@
    * here and on `section-list`, which is what Safari and VoiceOver need once
    * the marker is removed.
    */
-  [data-ui='list'][data-part='root'],
-  [data-ui='list'] [data-part='section-list'] {
+  [data-ui-list][data-part-root],
+  [data-ui-list] [data-part-section-list] {
     /* The row's own number. The set opens the count; each group opens its own,
        so a numbered list of groups restarts rather than running through. */
     counter-reset: slotted-list-item;
@@ -37,7 +37,7 @@
     padding-inline: 0;
   }
 
-  [data-ui='list'][data-part='root'] {
+  [data-ui-list][data-part-root] {
     /* The distance between rows, and it is spent only by `separated`. The other
        three variants separate rows with a line or with nothing, so a gap there
        would be space the reader cannot account for. */
@@ -79,7 +79,7 @@
    * roomy settings list stand on the same page without either of them lying
    * about the density.
    */
-  [data-ui='list'][data-part='root'][data-size='sm'] {
+  [data-ui-list][data-part-root][data-size='sm'] {
     --_gap: var(--slotted-list-gap-sm, var(--slotted-space-2, 0.25rem));
     --_section-inset-block: var(
       --slotted-list-section-padding-block-sm,
@@ -92,7 +92,7 @@
     --_empty-inset: var(--slotted-list-empty-padding-sm, var(--slotted-space-6, 1rem));
   }
 
-  [data-ui='list'][data-part='root'][data-size='lg'] {
+  [data-ui-list][data-part-root][data-size='lg'] {
     --_gap: var(--slotted-list-gap-lg, var(--slotted-space-4, 0.5rem));
     --_section-inset-block: var(
       --slotted-list-section-padding-block-lg,
@@ -115,7 +115,7 @@
    *
    * `plain` and `ruled` draw nothing on the set.
    */
-  [data-ui='list'][data-part='root'][data-variant='framed'] {
+  [data-ui-list][data-part-root][data-variant='framed'] {
     background-color: var(--_surface);
     border: var(--_frame-width) solid var(--_frame-color);
     border-radius: var(--_frame-radius);
@@ -125,7 +125,7 @@
     overflow: clip;
   }
 
-  [data-ui='list'][data-part='root'][data-variant='separated'] {
+  [data-ui-list][data-part-root][data-variant='separated'] {
     row-gap: var(--_gap);
   }
 
@@ -135,7 +135,7 @@
    * React Aria each leave the heading loose among the rows instead, so a reader
    * hears a heading inside a set rather than a set with a name.
    */
-  [data-ui='list'] [data-part='section'] {
+  [data-ui-list] [data-part-section] {
     display: flex;
     flex-direction: column;
     min-inline-size: 0;
@@ -143,8 +143,8 @@
 
   /* A separated set gaps its groups too, and a group gaps its own rows. Both
      read the one distance the root declared. */
-  [data-ui='list'][data-variant='separated'] [data-part='section'],
-  [data-ui='list'][data-variant='separated'] [data-part='section-list'] {
+  [data-ui-list][data-variant='separated'] [data-part-section],
+  [data-ui-list][data-variant='separated'] [data-part-section-list] {
     row-gap: var(--_gap);
   }
 
@@ -153,7 +153,7 @@
    * titles under it stand in one column, which is the alignment that makes a
    * grouped list read as one list rather than as several.
    */
-  [data-ui='list'] [data-part='section-label'] {
+  [data-ui-list] [data-part-section-label] {
     color: var(--_section-color);
     font-size: var(--_section-font-size);
     font-weight: var(--_section-weight);
@@ -178,8 +178,8 @@
    * `disableGutters` leaves out: it removes the padding and leaves the line
    * inset, so a flush list draws a rule stopping short of the box it is in.
    */
-  [data-ui='list'][data-inset] [data-part='section-label'],
-  [data-ui='list'][data-inset] [data-part='empty'] {
+  [data-ui-list][data-inset] [data-part-section-label],
+  [data-ui-list][data-inset] [data-part-empty] {
     padding-inline: 0;
   }
 
@@ -193,7 +193,34 @@
    * level is the library's own sticky step, so a heading never rises above an
    * overlay that is above the page.
    */
-  [data-ui='list'] [data-part='section-label'][data-sticky] {
+  /* A heading with an end sets the name at the start and the end content on
+     the same line, at the end. */
+  [data-ui-list] [data-part-section-label]:has(> [data-part-section-end]) {
+    align-items: baseline;
+    display: flex;
+    gap: var(--slotted-space-4, 0.5rem);
+    justify-content: space-between;
+  }
+
+  [data-ui-list] [data-part-section-end] {
+    flex: none;
+    font-variant-numeric: tabular-nums;
+    white-space: nowrap;
+  }
+
+  /**
+   * `ruled`: the name in the text colour over a rule, with no ground behind it
+   * — a day of a phone list with its balance at the end. The sticky ground is
+   * still the set's surface, so the rows passing under it are covered.
+   */
+  [data-ui-list] [data-part-section-label][data-variant='ruled'] {
+    border-block-end: var(--slotted-border-width-thin, 1px) solid
+      var(--slotted-list-section-rule-color, var(--slotted-border-subtle, GrayText));
+    color: var(--slotted-list-section-ruled-color, var(--slotted-text, CanvasText));
+    font-weight: var(--slotted-font-weight-medium, 500);
+  }
+
+  [data-ui-list] [data-part-section-label][data-sticky] {
     background-color: var(--_surface);
     inset-block-start: 0;
     position: sticky;
@@ -209,7 +236,7 @@
    * The family supplies the box, the height and the muted ink. The words are
    * the page's, and `result-state` is what goes in here.
    */
-  [data-ui='list'] [data-part='empty'] {
+  [data-ui-list] [data-part-empty] {
     align-items: center;
     color: var(--_empty-color);
     display: flex;
@@ -234,7 +261,7 @@
    * loading panel. What is left for the set is the pointer, which is the one
    * signal that belongs to the box rather than to its content.
    */
-  [data-ui='list'][data-part='root'][data-loading] {
+  [data-ui-list][data-part-root][data-loading] {
     cursor: progress;
   }
 }

package/src/list/list.tokens.json

@@ -5,6 +5,7 @@
   "--slotted-control-padding-inline-md",
   "--slotted-control-padding-inline-sm",
   "--slotted-font-size-xs",
+  "--slotted-font-weight-medium",
   "--slotted-font-weight-semibold",
   "--slotted-line-height-sm",
   "--slotted-list-background",
@@ -28,6 +29,8 @@
   "--slotted-list-section-padding-block",
   "--slotted-list-section-padding-block-lg",
   "--slotted-list-section-padding-block-sm",
+  "--slotted-list-section-rule-color",
+  "--slotted-list-section-ruled-color",
   "--slotted-radius-md",
   "--slotted-space-2",
   "--slotted-space-3",
@@ -37,6 +40,7 @@
   "--slotted-space-8",
   "--slotted-space-9",
   "--slotted-surface",
+  "--slotted-text",
   "--slotted-text-muted",
   "--slotted-z-index-sticky"
 ]