@slotted/styles 0.0.0-stage → 0.1.0-beta.0

package/src/link/link.css

@@ -0,0 +1,237 @@
+@layer slotted.components {
+  /**
+   * A link is text that goes somewhere. It is not a control surface: it has no
+   * height, no padding and no fill, it takes the type of the text around it,
+   * and `button` owns the anchor that wants the action surface — `ButtonLink`,
+   * the same family, the same geometry.
+   *
+   * Three values carry every variant: the colour at rest, the colour under the
+   * pointer, and the colour while it is being pressed. A fourth, `--_strong`,
+   * is the maximum-contrast text colour of whatever context the link sits in,
+   * and it is what hover mixes toward. That indirection is the whole reason
+   * this family was rebuilt: the shipped stylesheet painted hover with
+   * `--slotted-tone-accent-solid-hover`, which is a fill colour. In the light
+   * scheme a fill that darkens is also a text colour that darkens, so the
+   * defect never showed. In the dark scheme that token is `#1d4ed8` over a
+   * `#131316` ground, and hovering a link made it harder to read than leaving
+   * it alone. A ramp built for fills cannot be a ramp for text, and the tone
+   * scale has no `text-hover` role to reach for; mixing toward the colour the
+   * theme already holds to the highest ratio in each scheme cannot fail the
+   * same way.
+   */
+  [data-ui='link'] {
+    --_strong: var(--slotted-text, CanvasText);
+    --_rest: var(--slotted-link-color, var(--slotted-tone-accent-text, LinkText));
+    --_hover: var(
+      --slotted-link-color-hover,
+      color-mix(in oklab, var(--_rest) 65%, var(--_strong))
+    );
+    --_active: var(
+      --slotted-link-color-active,
+      color-mix(in oklab, var(--_rest) 35%, var(--_strong))
+    );
+    --_visited: var(
+      --slotted-link-color-visited,
+      color-mix(in oklab, var(--_rest) 40%, var(--slotted-text-muted, GrayText))
+    );
+    /**
+     * The underline at rest is lighter than the text it belongs to, and
+     * reaches full strength from hover onward. That is what gives `inverse` a
+     * hover at all: on a solid surface the text colour is already the
+     * strongest one available, so the underline is the only property left that
+     * can answer the pointer.
+     */
+    --_underline: var(
+      --slotted-link-underline-color,
+      color-mix(in oklab, currentColor 55%, transparent)
+    );
+
+    border-radius: var(--slotted-link-radius, var(--slotted-control-radius, 4px));
+    color: var(--_rest);
+    /**
+     * A link inside a `Stack`, a grid cell or any other flex container is
+     * blockified by the layout — `display: inline` is not a choice a flex item
+     * gets to keep — and a blockified link stretches to the full inline size of
+     * the column. Nothing about the text changes, and then the focus ring is
+     * drawn around the whole column instead of around the words, which is what
+     * the first focus capture of this family showed. Shrinking to the content
+     * is inert for an inline link, where inline-size does not apply at all.
+     */
+    inline-size: fit-content;
+    /**
+     * A destination pasted as the link text is one unbroken token. Without
+     * this it widens the column it sits in rather than wrapping inside it,
+     * which is what a 240-pixel capture shows and a paragraph of ordinary
+     * prose never does.
+     */
+    overflow-wrap: anywhere;
+    text-decoration-color: var(--_underline);
+    text-decoration-line: underline;
+    text-decoration-thickness: var(--slotted-link-underline-thickness, from-font);
+    text-underline-offset: var(--slotted-link-underline-offset, 0.15em);
+    transition:
+      color var(--slotted-duration-short) var(--slotted-easing-standard),
+      text-decoration-color var(--slotted-duration-short) var(--slotted-easing-standard);
+  }
+
+  /**
+   * The link that takes the colour of the text it sits in — a title inside a
+   * card, a name inside a table row — and reaches the accent under the
+   * pointer. Fluent calls it `subtle`, Primer `muted`, Polaris `monochrome`,
+   * and all three describe the same two colours.
+   */
+  [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(
+      --slotted-link-color-active,
+      color-mix(in oklab, var(--slotted-tone-accent-text, LinkText) 65%, var(--_strong))
+    );
+  }
+
+  /**
+   * The link on a solid or inverse surface. The strong colour changes with the
+   * ground, so hover has nowhere further to go and the underline carries the
+   * state on its own.
+   */
+  [data-ui='link'][data-variant='inverse'] {
+    --_strong: var(--slotted-text-inverse, Canvas);
+    --_rest: var(--slotted-link-color, var(--slotted-text-inverse, Canvas));
+  }
+
+  /* ── Underline axis ─────────────────────────────────────────────────────
+   *
+   * `always` is the default because colour alone does not distinguish a link:
+   * the accent text colour clears 4.5:1 against the surface and not 3:1
+   * against the body text beside it, which is the ratio a link with no second
+   * cue has to meet. The other two values are for a link that stands alone,
+   * where there is no sentence for it to disappear into.
+   */
+
+  [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 {
+    text-decoration-line: underline;
+  }
+
+  /**
+   * A keyboard has no hover, so focus is where a deferred underline is owed.
+   * `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 {
+    text-decoration-line: underline;
+  }
+
+  /* ── Visited ────────────────────────────────────────────────────────────
+   *
+   * Opt-in, and declared before the interaction rules so hover still answers a
+   * link the reader has already followed. `:visited` accepts colour and
+   * nothing else — the restriction is deliberate, and it is also why no test
+   * in this repository can read this rule back.
+   */
+
+  [data-ui='link'][data-visited]:visited {
+    color: var(--_visited);
+  }
+
+  /* ── Hover and press, held back for disabled ────────────────────────────── */
+
+  [data-ui='link']:not([data-disabled]):hover {
+    --_underline: currentColor;
+
+    color: var(--_hover);
+  }
+
+  [data-ui='link']:not([data-disabled]):active {
+    --_underline: currentColor;
+
+    color: var(--_active);
+  }
+
+  /* ── Focus ──────────────────────────────────────────────────────────────
+   *
+   * The ring hugs the text at one pixel rather than the two a control uses: a
+   * link has no border for the ring to clear, and on a line of prose a wider
+   * offset reaches into the line above.
+   */
+
+  [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);
+  }
+
+  /* ── Disabled ───────────────────────────────────────────────────────────
+   *
+   * `[data-disabled]` rather than a pseudo-class, because an anchor has none:
+   * what makes the link unavailable is the destination the binding did not
+   * render, plus `aria-disabled`. The underline stays, so the element still
+   * reads as a link that is not available rather than as plain text.
+   */
+
+  [data-ui='link'][data-disabled] {
+    color: var(--slotted-link-color-disabled, var(--slotted-disabled-foreground, GrayText));
+    cursor: not-allowed;
+  }
+
+  /* ── The external marker ────────────────────────────────────────────────
+   *
+   * The arrow is the `Glyph` element inside an `icon` box, so it is the colour
+   * of the link at every step of the ramp, in every scheme and under forced
+   * colours, and mirrors in a right-to-left document through the box's own
+   * `directional`. A character would be a font's opinion of an arrow.
+   *
+   * The binding writes a word joiner before this element — U+2060, the
+   * zero-width character whose whole purpose is to forbid a line break without
+   * occupying anything — so the glyph cannot wrap onto the next line without
+   * the word it belongs to. A no-break space would do the same job and carry a
+   * full word space with it, and "published schedule ↗" then reads as three
+   * words rather than a link and its marker. The distance is a token instead.
+   *
+   * The part stays an inline wrapper around the box: the gap is an inline
+   * margin, and the box inside sets its own size and optical alignment from
+   * `--slotted-icon-size`, which the part states at the size of the text.
+   */
+
+  [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);
+  }
+
+  /* ── The current link ───────────────────────────────────────────────────
+   *
+   * Painted from the platform's own attribute, which is the one a React
+   * consumer writes by hand and the one Angular's `routerLinkActive` writes
+   * through `ariaCurrentWhenActive`. A mirrored `data-current` would need the
+   * family to observe an attribute a router sets at runtime, and would paint
+   * nothing at all for the consumer who never adopted the mirror.
+   *
+   * The destination of a current link is the page the reader is already on, so
+   * it stops being an invitation and takes the body colour. The underline
+   * stays, because it is still a link and colour alone would not say so. The
+   * weight does not change: a nav item that thickens shifts every item beside
+   * it.
+   */
+
+  [data-ui='link'][aria-current]:not([aria-current='false']) {
+    --_rest: var(--slotted-link-color-current, var(--slotted-text, CanvasText));
+  }
+
+  /* ── Forced colours ─────────────────────────────────────────────────────
+   *
+   * The theme remaps every token it owns, so this block covers only what the
+   * family paints itself: an underline the axis may have taken away, where a
+   * flattened palette leaves a link with nothing to be recognized by. The
+   * external marker is stroked with `currentColor` and follows the link.
+   */
+
+  @media (forced-colors: active) {
+    [data-ui='link'] {
+      text-decoration-line: underline;
+    }
+  }
+}

package/src/link/link.tokens.json

@@ -0,0 +1,25 @@
+[
+  "--slotted-control-radius",
+  "--slotted-disabled-foreground",
+  "--slotted-duration-short",
+  "--slotted-easing-standard",
+  "--slotted-focus-ring-color",
+  "--slotted-focus-ring-width",
+  "--slotted-link-color",
+  "--slotted-link-color-active",
+  "--slotted-link-color-current",
+  "--slotted-link-color-disabled",
+  "--slotted-link-color-hover",
+  "--slotted-link-color-visited",
+  "--slotted-link-external-icon-gap",
+  "--slotted-link-external-icon-size",
+  "--slotted-link-focus-ring-offset",
+  "--slotted-link-radius",
+  "--slotted-link-underline-color",
+  "--slotted-link-underline-offset",
+  "--slotted-link-underline-thickness",
+  "--slotted-text",
+  "--slotted-text-inverse",
+  "--slotted-text-muted",
+  "--slotted-tone-accent-text"
+]

package/src/list/list.css

@@ -0,0 +1,240 @@
+@layer slotted.components {
+  /**
+   * ── 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
+   * `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.
+   *
+   * The one thing the two sheets share is a counter name. `slotted-list-item`
+   * is reset here, on the root and on every nested group, and incremented by
+   * the row; a counter is not a selector, so neither family's DOM becomes part
+   * of the other's contract.
+   *
+   * The native marker is gone in every configuration, because a row is a
+   * content box beside its independent targets and CSS has no `display` that is
+   * both `list-item` and a grid. The bindings therefore write `role="list"`
+   * 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'] {
+    /* 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;
+    display: flex;
+    flex-direction: column;
+    list-style: none;
+    margin-block: 0;
+    margin-inline: 0;
+    /* A row's text column can only shrink below its content if every box above
+       it can, and a flex item's default `min-inline-size: auto` stops at the
+       longest word. Without this a title that is one unbroken token widens the
+       whole list instead of breaking inside the row. */
+    min-inline-size: 0;
+    padding-inline: 0;
+  }
+
+  [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. */
+    --_gap: var(--slotted-list-gap, var(--slotted-space-3, 0.375rem));
+    /* The frame `framed` draws, and the ground the sticky group heading needs.
+       Both are declared at the root so a theme retunes them once. */
+    --_frame-color: var(--slotted-list-border-color, var(--slotted-border-subtle, ButtonBorder));
+    --_frame-width: var(--slotted-list-border-width, var(--slotted-border-width-thin, 1px));
+    --_frame-radius: var(--slotted-list-radius, var(--slotted-radius-md, 6px));
+    --_surface: var(--slotted-list-background, var(--slotted-surface, Canvas));
+    /* The group heading's type and colour. It is a heading in the document,
+       so it takes the muted ink rather than a tone: a coloured heading over a
+       neutral list reads as a status the group does not have. */
+    --_section-color: var(--slotted-list-section-color, var(--slotted-text-muted, GrayText));
+    --_section-font-size: var(
+      --slotted-list-section-font-size,
+      var(--slotted-font-size-xs, 0.75rem)
+    );
+    --_section-weight: var(
+      --slotted-list-section-font-weight,
+      var(--slotted-font-weight-semibold, 600)
+    );
+    --_section-inset-block: var(
+      --slotted-list-section-padding-block,
+      var(--slotted-space-4, 0.5rem)
+    );
+    --_row-inset-inline: var(
+      --slotted-list-padding-inline,
+      var(--slotted-control-padding-inline-md, 13px)
+    );
+    --_empty-color: var(--slotted-list-empty-color, var(--slotted-text-muted, GrayText));
+    --_empty-inset: var(--slotted-list-empty-padding, var(--slotted-space-8, 1.5rem));
+  }
+
+  /**
+   * Size is this list's own step and density is the application's. The two
+   * scale different things — density retunes every control on the page, size
+   * says how much room this one list gives a row — so a dense inbox and a
+   * 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'] {
+    --_gap: var(--slotted-list-gap-sm, var(--slotted-space-2, 0.25rem));
+    --_section-inset-block: var(
+      --slotted-list-section-padding-block-sm,
+      var(--slotted-space-3, 0.375rem)
+    );
+    --_row-inset-inline: var(
+      --slotted-list-padding-inline-sm,
+      var(--slotted-control-padding-inline-sm, 10px)
+    );
+    --_empty-inset: var(--slotted-list-empty-padding-sm, var(--slotted-space-6, 1rem));
+  }
+
+  [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,
+      var(--slotted-space-5, 0.75rem)
+    );
+    --_row-inset-inline: var(
+      --slotted-list-padding-inline-lg,
+      var(--slotted-control-padding-inline-lg, 16px)
+    );
+    --_empty-inset: var(--slotted-list-empty-padding-lg, var(--slotted-space-9, 2rem));
+  }
+
+  /**
+   * ── How rows are told apart ────────────────────────────────────────────
+   *
+   * Four words, and they are `accordion`'s four so that two families cannot
+   * mean different things by one of them. Only two of them draw anything here:
+   * the line between rows and the surface of a separated row belong to the row,
+   * which is the only element that knows whether it is first, last or alone.
+   *
+   * `plain` and `ruled` draw nothing on the set.
+   */
+  [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);
+    /* The frame clips its own corners, so the first and last rows do not paint
+       a square hover fill over a rounded edge. `clip` rather than `hidden`: the
+       set is not a scroll container, and `hidden` would silently make it one. */
+    overflow: clip;
+  }
+
+  [data-ui='list'][data-part='root'][data-variant='separated'] {
+    row-gap: var(--_gap);
+  }
+
+  /**
+   * A group inside the set. It is an `li` holding a heading and a nested list,
+   * which is the grouping HTML already has; MUI, Angular Material, Primer and
+   * 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'] {
+    display: flex;
+    flex-direction: column;
+    min-inline-size: 0;
+  }
+
+  /* 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'] {
+    row-gap: var(--_gap);
+  }
+
+  /**
+   * The group's name. It shares the row's inline inset so the heading and the
+   * 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'] {
+    color: var(--_section-color);
+    font-size: var(--_section-font-size);
+    font-weight: var(--_section-weight);
+    letter-spacing: var(--slotted-list-section-letter-spacing, 0);
+    line-height: var(--slotted-line-height-sm, 1.45);
+    margin-block: 0;
+    min-inline-size: 0;
+    padding-block: var(--_section-inset-block);
+    /* The heading takes the row's own inline inset — the control padding scale,
+       not a space step — so the group's name and the titles under it stand in
+       one column. Reading a different scale left the two a pixel apart. */
+    padding-inline: var(--_row-inset-inline);
+  }
+
+  /**
+   * `inset` is for a list dropped into a box that already pads its own content
+   * — a `card` body, a `dialog`. It takes the row's inline padding away so the
+   * content lines up with the box around it, and the heading gives up the same
+   * padding so the column holds.
+   *
+   * The fill and the rule still run edge to edge, which is the half MUI's
+   * `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'] {
+    padding-inline: 0;
+  }
+
+  /**
+   * A heading that stays while its own rows scroll past. MUI ships it and is
+   * the only surveyed source that does; composing it needs the family's ground
+   * and its stack level, and a consumer writing `position: sticky` alone gets a
+   * heading with rows showing through it.
+   *
+   * The ground is the set's surface rather than `transparent`, and the stack
+   * 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] {
+    background-color: var(--_surface);
+    inset-block-start: 0;
+    position: sticky;
+    z-index: var(--slotted-z-index-sticky, 100);
+  }
+
+  /**
+   * What the set says when it holds nothing. It is an `li`, so the reader hears
+   * "list, one item" and then the message; a message outside the `ul` leaves
+   * them with "list, zero items" and silence, and leaves the words outside the
+   * box a framed set paints.
+   *
+   * 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'] {
+    align-items: center;
+    color: var(--_empty-color);
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    min-inline-size: 0;
+    padding-block: var(--_empty-inset);
+    padding-inline: var(--_row-inset-inline);
+    text-align: center;
+  }
+
+  /**
+   * ── Loading ────────────────────────────────────────────────────────────
+   *
+   * The binding writes `aria-busy="true"`, which ARIA 1.2 section 5.2.6 asks of
+   * a container whose required owned elements have not arrived yet. That is the
+   * capability; the picture is the page's.
+   *
+   * The family draws no spinner and no placeholder row. `skeleton` owns
+   * placeholder geometry and `progress-indicator` owns a spinner, and a second
+   * answer to either question is what `collapsible` already refused for a
+   * 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] {
+    cursor: progress;
+  }
+}

package/src/list/list.tokens.json

@@ -0,0 +1,42 @@
+[
+  "--slotted-border-subtle",
+  "--slotted-border-width-thin",
+  "--slotted-control-padding-inline-lg",
+  "--slotted-control-padding-inline-md",
+  "--slotted-control-padding-inline-sm",
+  "--slotted-font-size-xs",
+  "--slotted-font-weight-semibold",
+  "--slotted-line-height-sm",
+  "--slotted-list-background",
+  "--slotted-list-border-color",
+  "--slotted-list-border-width",
+  "--slotted-list-empty-color",
+  "--slotted-list-empty-padding",
+  "--slotted-list-empty-padding-lg",
+  "--slotted-list-empty-padding-sm",
+  "--slotted-list-gap",
+  "--slotted-list-gap-lg",
+  "--slotted-list-gap-sm",
+  "--slotted-list-padding-inline",
+  "--slotted-list-padding-inline-lg",
+  "--slotted-list-padding-inline-sm",
+  "--slotted-list-radius",
+  "--slotted-list-section-color",
+  "--slotted-list-section-font-size",
+  "--slotted-list-section-font-weight",
+  "--slotted-list-section-letter-spacing",
+  "--slotted-list-section-padding-block",
+  "--slotted-list-section-padding-block-lg",
+  "--slotted-list-section-padding-block-sm",
+  "--slotted-radius-md",
+  "--slotted-space-2",
+  "--slotted-space-3",
+  "--slotted-space-4",
+  "--slotted-space-5",
+  "--slotted-space-6",
+  "--slotted-space-8",
+  "--slotted-space-9",
+  "--slotted-surface",
+  "--slotted-text-muted",
+  "--slotted-z-index-sticky"
+]