actual-css 0.12.0 → 0.14.0

package/src/css/components/join.css

@@ -40,7 +40,7 @@
 }
 
 .join-addon {
-  --control-border: var(--border);
+  --control-border: var(--border-control);
   --control-bg: var(--surface-subtle);
   --control-fg: var(--text-muted);
 
@@ -145,5 +145,5 @@
    The second :has() covers a control nested one wrapper level deep. */
 .join:has(> :is(.input, .textarea, .select)) > .btn.outline,
 .join:has(> * > :is(.input, .textarea, .select)) > .btn.outline {
-  --btn-border-color: var(--intent, var(--border));
+  --btn-border-color: var(--intent, var(--border-control));
 }

package/src/css/components/list.css

@@ -43,9 +43,13 @@
 .list > :where(.list-item),
 .list > li > .list-item {
   display: flex;
-  /* Regions align to the first line, so leading, title, and trailing controls
-     share one horizontal line while supporting text wraps beneath. */
-  align-items: start;
+  /* A trailing control that no longer fits beside the content's longest word
+     moves to its own line instead of breaking that word. */
+  flex-wrap: wrap;
+  /* Centered fits the short rows lists mostly hold. Read through
+     --items-align so .items-start on the row or the list wins without
+     outranking this selector — the opt-out for long supporting text. */
+  align-items: var(--items-align, center);
   gap: var(--list-item-gap);
   min-block-size: var(--list-item-min-size);
   padding-block: var(--list-item-pad-block);
@@ -67,21 +71,20 @@ a.list-item:hover {
   background: var(--surface-subtle);
 }
 
-/* Current row in a navigational list (master/detail). Generic by design: the
-   visual treatment only cares that the row is current, so presence is the
-   contract — the attribute is set on the current row and removed everywhere
-   else, never serialized as aria-current="false". The value (page, location,
-   …) stays free for assistive technology.
+/* Current row in a navigational list: aria-current="page" when the row opens
+   a page, "true" when it is the current item of a master/detail view (a
+   conversation, a thread, a record) that is no page of its own. Any other
+   value, "false" included, is inert.
    Calm by design: the row keeps its normal text metrics and color on a subtle
    surface, and the selected accent lives on an inset inline-start trait only.
    The trait is a real border, so it survives forced colors without a repaint
    block. The positioning context lives on every row link, so becoming current
    never moves an app-positioned decoration to a new containing block. */
-a.list-item[aria-current] {
+a.list-item:is([aria-current="page"], [aria-current="true"]) {
   background: var(--surface-subtle);
 }
 
-a.list-item[aria-current]::before {
+a.list-item:is([aria-current="page"], [aria-current="true"])::before {
   content: "";
   position: absolute;
   inset-block: var(--list-item-pad-block);
@@ -89,17 +92,29 @@ a.list-item[aria-current]::before {
   border-inline-start: 2px solid var(--state-selected);
 }
 
-/* The content region is the one that flexes, whichever position it holds. */
+/* The content region is the one that flexes, whichever position it holds.
+   Its automatic minimum is its longest word, which is what wraps the row; the
+   max size caps that minimum at the row, so a long token breaks rather than
+   widening the page. A zero minimum shrank it until words broke mid-way. */
 .list-item-content {
   flex: 1 1 0;
-  min-inline-size: 0;
+  max-inline-size: 100%;
 }
 
+/* break-word, not anywhere: anywhere also lowers the min-content to a single
+   character, and the row would never wrap. */
 .list-item-title,
 .list-item-text {
   display: block;
   margin: 0;
-  overflow-wrap: anywhere;
+  overflow-wrap: break-word;
+}
+
+/* Truncated text gives up its width by design: without containment its
+   unbreakable line would become the content's minimum and push the trailing
+   region onto a line of its own. */
+.list-item-content .truncate {
+  contain: inline-size;
 }
 
 .list-item-text {

package/src/css/components/modal.css

@@ -131,6 +131,12 @@
   background: var(--surface-subtle);
 }
 
+/* The chrome header is a centered row, so prose margins on a bare title only
+   push the band taller and pull the title off the close axis. */
+:where(dialog).modal > header > :is(h1, h2, h3, h4, h5, h6) {
+  margin-block: 0;
+}
+
 :where(dialog).modal > header > .media {
   flex: 1 1 auto;
   min-inline-size: 0;
@@ -194,19 +200,20 @@
 
 :where(dialog).modal.scrollable > form > :not(:is(header, footer)),
 :where(dialog).modal.scrollable > .stack > :not(:is(header, footer)) {
-  --dialog-focus-bleed: calc(
-    var(--focus-outline-offset) +
-    max(var(--focus-ring-width), var(--border-width) * 2)
-  );
+  /* Declared here, not as a :root alias: an inherited alias arrives already
+     computed, so a --focus-ring-width override on the dialog would not reach
+     it. */
+  --dialog-focus-bleed: calc(var(--focus-outline-offset) + var(--focus-ring-width));
 
   flex: 1 1 auto;
   min-block-size: 0;
-  /* Keep focus paint inside the clip without moving the body off the fixed
-     header and footer edges. The reserve covers the thicker of the two
-     outside indicators: the :focus baseline (2 × border) and the component
-     line (--focus-ring-width, 3px in bootstrap-v6). */
-  margin-inline: calc(var(--dialog-focus-bleed) * -1);
-  padding-inline: var(--dialog-focus-bleed);
+  /* Keep focus paint inside the clip, on all four sides (overflow: auto clips
+     both axes), without moving the content. Every outside indicator is
+     --focus-ring-width wide (core/focus.css). On the block axis the reserve
+     reaches into the slot gap, which is wider, so the scrollport never slides
+     under the header or footer. */
+  margin: calc(var(--dialog-focus-bleed) * -1);
+  padding: var(--dialog-focus-bleed);
   overflow: auto;
   overscroll-behavior: contain;
 }

package/src/css/components/navbar.css

@@ -7,6 +7,9 @@
  * links are a .cluster using .nav-link items. .nav-list is the vertical nav
  * list shared with .drawer, fed by the shared --gap token.
  *
+ * Public hooks:
+ * --state-selected-text (fallback-only: current-link ink, see tokens.css)
+ *
  * Internal:
  * --gap (local value for the shared gap token)
  */
@@ -71,8 +74,7 @@
 
 /* nav-link serves two contracts: plain page navigation (aria-current="page")
    and scrollspy, which toggles aria-current="location" on the active link.
-   Presence is the contract: the attribute is set on the current link and
-   removed everywhere else, never serialized as aria-current="false".
+   Those two values are the contract; any other, "false" included, is inert.
    Selection never changes text metrics: the shared medium weight is kept and
    the current link is carried by the selected accent. */
 .nav-link:hover {
@@ -83,9 +85,9 @@
 /* Current last, equal specificity to :hover (0,2,0): a hovered current link
    keeps the selected accent instead of dropping to --text. The surface fill is
    shared with the hover rule above. */
-.nav-link[aria-current] {
+.nav-link:is([aria-current="page"], [aria-current="location"]) {
   background: var(--surface-subtle);
-  color: var(--state-selected);
+  color: var(--state-selected-text, var(--state-selected));
 }
 
 /* On a bar with its own --ui-bg/--ui-fg the fill is a tint of the link's own
@@ -96,7 +98,7 @@
    above keeps the light chip where color-mix is missing, with ink that is
    legible on it. */
 @supports (color: color-mix(in oklch, red, white)) {
-  .nav-link:is(:hover, [aria-current]) {
+  .nav-link:is(:hover, [aria-current="page"], [aria-current="location"]) {
     background: color-mix(in oklch, currentColor 10%, transparent);
   }
 
@@ -105,8 +107,8 @@
   }
 
   /* After :hover so a hovered current link keeps the selected accent. */
-  .nav-link[aria-current] {
-    color: var(--ui-fg, var(--state-selected));
+  .nav-link:is([aria-current="page"], [aria-current="location"]) {
+    color: var(--ui-fg, var(--state-selected-text, var(--state-selected)));
   }
 }
 
@@ -139,11 +141,14 @@
    follows the forced palette without a forced-colors block and never touches
    the row separators. Navbar horizontal links keep color + surface only. The
    positioning context lives on every row link, so becoming current never moves
-   an app-positioned decoration to a new containing block. */
-.nav-list .nav-link[aria-current]::before {
+   an app-positioned decoration to a new containing block.
+   The trait sits centered in the link's inline padding with rounded ends: flush
+   on the edge, a square line read as pasted onto the rounded fill. */
+.nav-list .nav-link:is([aria-current="page"], [aria-current="location"])::before {
   content: "";
   position: absolute;
   inset-block: var(--space-20);
-  inset-inline-start: 0;
+  inset-inline-start: calc((var(--space-20) - 2px) / 2);
   border-inline-start: 2px solid currentColor;
+  border-radius: var(--radius-full);
 }

package/src/css/components/pagination.css

@@ -10,6 +10,11 @@
  * Truncated ranges are plain text (`.muted`, `aria-hidden="true"`), not .btn
  * — they are decorative, not actionable. They still get the same box sizing
  * as .btn below so the row stays visually aligned.
+ *
+ * The row wraps when it does not fit: every page stays visible and
+ * clickable. A strip that scrolled hid pages behind a scrollbar that clicking
+ * cannot move, since a click changes the page. Keeping the rendered range
+ * compact is the application's job.
  */
 .pagination {
   display: flex;

package/src/css/components/scrollspy.css

@@ -8,7 +8,7 @@
  * <nav class="scrollspy">
  * containing <a href="#section"> links and toggles aria-current="location" on
  * the link whose target is in view. Pair with .nav-list and .nav-link, or style
- * [aria-current] yourself.
+ * [aria-current="location"] yourself.
  *
  * Progressive enhancement: on browsers that support :target-current,
  * this file enables the native target group and marks the active link.

package/src/css/components/segmented.css

@@ -0,0 +1,186 @@
+/*
+ * Segmented control — one compact choice among a few, on a shared track.
+ *
+ * Docs: docs/pages/components/segmented.md
+ *
+ * .segmented is the track, each .segment a direct child. The look is shared;
+ * the semantics stay with the markup, and the selected state is read from it:
+ *   radios    <label class="segment"><input type="radio">   :checked
+ *   tabs      <button class="segment" role="tab">           aria-selected="true"
+ *   links     <a class="segment">                           aria-current="page"
+ * No script of its own: radios bring their arrow keys, a tablist takes
+ * data-enhance="tabs". Without :has() the radio anatomy loses its selected
+ * fill and focus ring, and the native radio stays visible to carry both.
+ *
+ * One row of equal shares (grid-auto-columns: 1fr), at least --control-size
+ * tall so it lines up with .btn and .input. Labels wrap instead of truncating;
+ * a word longer than its share breaks, so the control never overflows its
+ * container. A strip too long for one row is .tabs, which scrolls.
+ *
+ * Focus is drawn inside the segment, unlike other discrete actions
+ * (focus.css): an offset ring would cross the track's padding and cover the
+ * neighbouring segment.
+ *
+ * Public hooks:
+ * --segmented-bg
+ * --segmented-pad
+ * --segmented-radius
+ * --segmented-fg
+ * --segmented-selected-bg
+ * --segmented-selected-border
+ */
+.segmented {
+  --segmented-bg: var(--surface-subtle);
+  --segmented-pad: var(--space-10);
+  --segmented-radius: var(--radius);
+  --segmented-fg: var(--text-muted);
+  --segmented-selected-bg: var(--surface-raised);
+  /* The edge is what separates the selected segment where --surface-raised
+     is darker than --surface-subtle (the default dark palette). */
+  --segmented-selected-border: var(--border);
+
+  display: inline-grid;
+  grid-auto-flow: column;
+  grid-auto-columns: 1fr;
+  gap: var(--segmented-pad);
+  /* why: margin and border also reset <fieldset>, the radio anatomy's
+     element. The border is transparent, not 0: forced colors paint it, which
+     outlines the track once its fill is gone. */
+  margin: 0;
+  padding: var(--segmented-pad);
+  border: var(--border-width) solid transparent;
+  border-radius: var(--segmented-radius);
+  background: var(--segmented-bg);
+  font-size: var(--control-font-size);
+  vertical-align: middle;
+}
+
+.segment {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.375em;
+  /* The track is --control-size tall through its segments, not through its
+     own min-block-size: a <fieldset> lays its content in an anonymous box
+     sized to the content, so a minimum on the track left the segments short.
+     A minimum, not a height: a wrapped label grows the whole row. */
+  min-block-size: calc(var(--control-size) - 2 * (var(--segmented-pad) + var(--border-width)));
+  padding: calc(var(--space-10) / 2) var(--space-30);
+  border: 0;
+  border-radius: calc(var(--segmented-radius) - var(--segmented-pad));
+  background: transparent;
+  color: var(--segmented-fg);
+  font: inherit;
+  /* Constant across states: a heavier selected label would resize its share. */
+  font-weight: var(--font-weight-medium);
+  line-height: 1.2;
+  text-align: center;
+  text-decoration: none;
+  /* why: also shrinks the min-content contribution, so 1fr keeps equal
+     shares under constraint instead of widening one around a long word. */
+  overflow-wrap: anywhere;
+  cursor: pointer;
+  transition:
+    background-color var(--duration),
+    color var(--duration),
+    box-shadow var(--duration);
+}
+
+.segment > input {
+  margin: 0;
+}
+
+/* The radio is visually hidden but stays focusable, submitted and arrow-key
+   navigable (sr-only pattern). Guarded: without :has() the segment cannot
+   mirror :checked, so the visible native radio is the fallback. */
+@supports selector(:has(*)) {
+  .segment > input {
+    position: absolute;
+    inline-size: 1px;
+    block-size: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+  }
+}
+
+.segment:hover {
+  color: var(--text);
+}
+
+/* Separate rules from the :has() forms below: an engine without :has() would
+   discard a shared selector list, ARIA states included. */
+.segment:is([aria-selected="true"], [aria-current="page"], [aria-current="true"]) {
+  background: var(--segmented-selected-bg);
+  color: var(--text);
+  box-shadow:
+    0 0 0 var(--border-width) var(--segmented-selected-border),
+    var(--shadow);
+}
+
+.segment:has(> input:checked) {
+  background: var(--segmented-selected-bg);
+  color: var(--text);
+  box-shadow:
+    0 0 0 var(--border-width) var(--segmented-selected-border),
+    var(--shadow);
+}
+
+.segment:focus-visible {
+  outline: var(--focus-ring-width) solid var(--focus);
+  outline-offset: calc(var(--focus-ring-width) * -1);
+}
+
+.segment:has(> input:focus-visible) {
+  outline: var(--focus-ring-width) solid var(--focus);
+  outline-offset: calc(var(--focus-ring-width) * -1);
+}
+
+.segment:is(:disabled, [aria-disabled="true"]) {
+  opacity: var(--disabled-opacity);
+  cursor: not-allowed;
+}
+
+.segment:has(> input:disabled) {
+  opacity: var(--disabled-opacity);
+  cursor: not-allowed;
+}
+
+/* Forced colors drop the raised fill and its edge. The selected segment
+   takes the system highlight — a background, so the outline stays the focus
+   channel alone. forced-color-adjust: none is required, not cosmetic: the UA
+   otherwise paints a Canvas backplate behind the label, which hid the text on
+   the highlight. Opting out also stops the forcing of the rest, so the shadow
+   is dropped here and the focus line takes the highlight's text color. */
+@media (forced-colors: active) {
+  .segment:is([aria-selected="true"], [aria-current="page"], [aria-current="true"]) {
+    --focus: HighlightText;
+
+    forced-color-adjust: none;
+    background: Highlight;
+    color: HighlightText;
+    box-shadow: none;
+  }
+
+  .segment:has(> input:checked) {
+    --focus: HighlightText;
+
+    forced-color-adjust: none;
+    background: Highlight;
+    color: HighlightText;
+    box-shadow: none;
+  }
+
+  /* --disabled-opacity is 1 here (tokens.css): the dimming needs a color. */
+  .segment:is(:disabled, [aria-disabled="true"]) {
+    color: GrayText;
+  }
+
+  .segment:has(> input:disabled) {
+    color: GrayText;
+  }
+}

package/src/css/components/steps.css

@@ -25,7 +25,8 @@
  * destinations. Anything else focusable in a step is out of contract.
  *
  * The framework never hides an authored label to solve a layout problem. A
- * labelled row that outgrows its space scrolls. An `actual-container` size
+ * labelled row wraps its labels, then scrolls if its markers or authored item
+ * minimum outgrow the available space. An `actual-container` size
  * context buys it one thing: the wide representation, marker beside label.
  *
  * See docs/design-notes/steps.md for the threshold, the selector shapes, the
@@ -136,11 +137,14 @@
 
 /* Complete owns the accented connector that reaches the current step, so the
    connector leaving current goes back to neutral. Declared after
-   .step-complete at equal specificity: current wins on every channel. */
+   .step-complete at equal specificity: current wins on every channel. The
+   current marker is a regular surface, so its number and ring are selected
+   ink on a surface, not a selected fill; they are held to different ratios
+   (4.5:1 for the number, 3:1 for the ring) by report:theme-contrast. */
 .steps > [aria-current="step"] {
   --step-marker-bg: var(--surface-opaque);
-  --step-marker-border: var(--state-selected);
-  --step-marker-fg: var(--state-selected);
+  --step-marker-border: var(--state-selected-text, var(--state-selected));
+  --step-marker-fg: var(--state-selected-text, var(--state-selected));
   --step-line: var(--border);
 
   color: var(--text);
@@ -161,10 +165,11 @@
 /* Horizontal ------------------------------------------------------------- */
 
 .steps-horizontal {
-  --step-min: 7rem;
+  --step-min: var(--step-size);
   --step-gap: var(--space-20);
 
   inline-size: 100%;
+  column-gap: var(--step-gap);
   overflow-x: auto;
   /* Stated, never left to `overflow-x` alone: one scrolling axis computes the
      other to `auto`, and a row hugs fractional content closely enough that a
@@ -173,11 +178,22 @@
   overscroll-behavior-inline: contain;
 }
 
+/* A row that loads mid-flow starts scrolled to its current step; engines
+   without the property start at the first. */
+.steps-horizontal > [aria-current="step"] {
+  /* biome-ignore lint/correctness/noUnknownProperty: CSS Scroll Snap 2 property that Biome's list predates; an engine without it drops the declaration. */
+  scroll-initial-target: nearest;
+}
+
 /* A scroll container clips at the padding edge, so a navigable row reserves the
-   focus ring's own width and offset. Only this composition scrolls, and only a
-   link has a ring to protect. */
+   focus ring's own width and offset, and focus scrolls a link in that far from
+   the inline clip. Only this composition scrolls, and only a link has a ring to
+   protect. */
 .steps-horizontal:has(a[href]) {
+  /* Wrapped names can fill their cell right up to either inline clip edge. */
+  padding-inline: calc(var(--focus-outline-offset) + var(--focus-ring-width));
   padding-block: calc(var(--focus-outline-offset) + var(--focus-ring-width));
+  scroll-padding-inline: calc(var(--focus-outline-offset) + var(--focus-ring-width));
 }
 
 /* One explicit row, the marker's: a `.step-label` is auto-placed into an
@@ -189,6 +205,8 @@
 .steps-horizontal > li {
   display: grid;
   flex: 1 0 var(--step-min);
+  /* Bound each label to its share so it cannot change the marker pitch. */
+  grid-template-columns: minmax(0, 1fr);
   grid-template-rows: var(--step-size);
   gap: var(--step-gap);
   justify-items: center;
@@ -196,9 +214,42 @@
   text-align: center;
 }
 
-/* An empty step is a marker and nothing else, so it needs a marker's width
-   rather than a reading width. That is what lets five of them fit a phone with
-   no size context and no variant class.
+.steps-horizontal .step-label {
+  /* Even an unbroken name must fit its share instead of overlapping a peer.
+     Hyphenation, when `lang` allows it, is tried before an arbitrary break. */
+  overflow-wrap: anywhere;
+  hyphens: auto;
+}
+
+/* Half end cells put the outer markers on the row's edges without changing
+   their pitch, so the track lines up with the text around it, as the compact
+   and inline forms do. The marker's half-width keeps the first connector equal
+   to its peers.
+
+   Source order is load-bearing: these tie the `:empty` rules below and the
+   inline query on specificity, and both must win over them. */
+.steps-horizontal > li:is(:first-child, :last-child) {
+  flex: 0.5 0 calc((var(--step-min) + var(--step-size)) / 2);
+  min-inline-size: max(var(--step-size), calc((var(--step-min) + var(--step-size)) / 2));
+}
+
+.steps-horizontal > li:first-child {
+  justify-items: start;
+  text-align: start;
+}
+
+.steps-horizontal > li:first-child::after {
+  inset-inline-start: var(--step-size);
+  inline-size: calc(200% - var(--step-size) * 2 + var(--step-gap));
+}
+
+.steps-horizontal > li:last-child {
+  justify-items: end;
+  text-align: end;
+}
+
+/* An empty step ignores any authored reading-width floor and needs only its
+   marker. That lets five of them fit a phone without a size context.
 
    `justify-items` is not an override of the row's centring: the marker is
    centred because a label sits under it and the two share a centre, and with no
@@ -208,9 +259,8 @@
    the text around it, the way the inline representation does.
 
    `:empty` says exactly what the markup says, the way `.badge:empty` does, and
-   it reads the item's own content: bare text in an `<li>` keeps a reading width
-   like its wrapped peers, where `> li:has(.step-label)` would give it a marker
-   floor and skew the row. `:empty` also keeps the compact form reachable on the
+   it reads the item's own content: bare text keeps the same authored floor as
+   its wrapped peers. `:empty` also keeps the compact form reachable on the
    Degraded tier, where only the inline bonus needs `:has()`. */
 .steps-horizontal > li:empty {
   flex: 1 1 0;
@@ -220,6 +270,8 @@
 
 .steps-horizontal > li:empty::after {
   inset-inline-start: var(--step-size);
+  /* Marker-only end cells keep full shares, unlike labelled end cells. */
+  inline-size: calc(100% - var(--step-size) + var(--step-gap));
 }
 
 .steps-horizontal > li:empty:last-child {
@@ -227,12 +279,12 @@
 }
 
 /* The pseudo-element is marker-height so --step-connector may be any complete
-   background value. */
+   background value; its length also crosses the gap to the next equal track. */
 .steps-horizontal > li::after {
   position: absolute;
   inset-block-start: 0;
   inset-inline-start: calc(50% + var(--step-size) / 2);
-  inline-size: calc(100% - var(--step-size));
+  inline-size: calc(100% - var(--step-size) + var(--step-gap));
   block-size: var(--step-size);
   background: var(
     --step-connector,
@@ -251,6 +303,11 @@
  * written — a row out of contract is not owed a curated fallback.
  */
 @container actual-container (inline-size >= 60rem) {
+  .steps-horizontal:has(.step-label) {
+    /* Inline connectors already own the spacing between marker-label groups. */
+    column-gap: 0;
+  }
+
   .steps-horizontal:has(.step-label) > li {
     display: flex;
     flex: 1 1 auto;