actual-css 0.12.0 → 0.13.0

package/src/css/components/breadcrumb.css

@@ -4,14 +4,21 @@
  * Docs: docs/pages/components/breadcrumb.md
  *
  * Inline list separated by "/". Mark the current page with `aria-current="page"`
- * either on the item or on the current link.
+ * either on the item or on the current link. Ancestor labels sit in an <a> or a
+ * <span>, the box that truncates.
+ *
+ * Breadcrumbs are a single navigation hierarchy. Wrapping makes hierarchy look
+ * like separate rows and causes unstable header height, and scrolling hides the
+ * root behind a scrollbar. A trail that does not fit truncates instead:
+ * ancestors first, the current page last, each label behind an ellipsis.
  */
+
 .breadcrumb {
   display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
+  flex-wrap: nowrap;
   align-items: center;
   gap: var(--space-10);
+  min-inline-size: 0;
   margin: 0;
   padding: 0;
   color: var(--text-subtle);
@@ -19,15 +26,74 @@
   list-style: none;
 }
 
-.breadcrumb li {
-  display: inline-flex;
+/* The landmark around the trail must shrink with it in a flex or grid row, or
+   it keeps the trail's full width and the labels never get to truncate.
+   Without :has() the landmark keeps its width; min-inline-size: 0 on the
+   wrapper is the fallback. */
+:where(nav:has(> .breadcrumb)) {
+  min-inline-size: 0;
+}
+
+/* Grid, not flex: under a min-content constraint a grid track keeps its base
+   size, which is the label's minimum below, so the item's own minimum is
+   separator + label floor without anyone measuring a "/". A flex item would
+   report the full label as its minimum and never shrink.
+
+   Ancestors take the shrink before the current page, so the location is the
+   last thing to lose characters. The ratio is deliberately huge: at 1000 the
+   current page still took a fraction of a pixel, enough to trigger its
+   ellipsis while ancestors had room. Its own factor stays 1, because flex
+   distributes only a share of the deficit when the unfrozen factors sum below
+   one. Keyed on the last item, the current page by convention, so the order
+   holds without :has(). */
+.breadcrumb > li {
+  display: inline-grid;
+  flex: 0 1000000 auto;
+  grid-auto-flow: column;
   align-items: center;
-  gap: var(--space-10);
+  white-space: nowrap;
 }
 
-.breadcrumb li + li::before {
-  content: "/";
+.breadcrumb > li:last-child {
+  flex-shrink: 1;
+}
+
+/* A margin rather than a grid gap, so the separator keeps its space when the
+   current page below lays it out inline. The weight stays normal there, where
+   it would inherit the current page's. */
+.breadcrumb > li + li::before {
+  margin-inline-end: var(--space-10);
   color: var(--text-subtle);
+  font-weight: var(--font-weight-normal);
+  content: "/";
+}
+
+/* The ellipsis lives on the label, not on the item: an element never clips
+   its own outline, but an overflow-hidden item would clip its link's focus
+   line, which sits outside the link box.
+
+   The floor keeps a truncated label readable as a step ("Po…") instead of
+   collapsing to its separator. calc-size() lets a shorter label keep its own
+   width; without it, the plain 2em floor leaves a label under 2em a little
+   trailing room. */
+.breadcrumb > li > :is(a, span) {
+  min-inline-size: 2em;
+  min-inline-size: calc-size(max-content, min(size, 2em));
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* The current page written as bare text has no label box, so its item
+   truncates itself. Only with no element inside: an aria-current item that
+   holds a link would clip that link's focus line, and keeps the label rule
+   above instead. Its own rule, never merged with the one above: a browser
+   without :has() drops it alone, and bare text then keeps its full width. */
+.breadcrumb > li[aria-current="page"]:not(:has(> *)) {
+  display: block;
+  min-inline-size: 2em;
+  min-inline-size: calc-size(max-content, min(size, 2em));
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .breadcrumb a {

package/src/css/components/drawer.css

@@ -25,6 +25,7 @@
  * --drawer-close-reserve (header room for a corner close; zero without a close)
  * --drawer-motion-duration (shared by panel and ::backdrop so exit duration
  *   changes in one place; entry state redefines it longer)
+ * --drawer-motion-ease (panel easing owned by the open/closed state)
  */
 :where(dialog).drawer {
   --drawer-size: 20rem;
@@ -39,6 +40,7 @@
   /* Exit is shorter than entry so the panel clears quickly; the scrim reads
      the same variable through inheritance and never lags the panel. */
   --drawer-motion-duration: var(--duration);
+  --drawer-motion-ease: var(--ease-exit);
 
   /* Keep the surface anchored to the viewport in the top layer. This also
      provides the containing block for the absolutely positioned close button.
@@ -70,21 +72,21 @@
   box-shadow: var(--shadow);
   opacity: 0;
   transform: translateX(var(--drawer-closed-translate));
-  transition:
-    opacity var(--drawer-motion-duration) var(--ease-exit),
-    transform var(--drawer-motion-duration) var(--ease-exit);
+  /* Unsupported discrete behavior drops alone, preserving opacity/transform. */
+  transition-property: opacity, transform, overlay, display;
+  transition-duration: var(--drawer-motion-duration);
+  transition-timing-function: var(--drawer-motion-ease);
+  transition-behavior: allow-discrete;
 }
 
 :where(dialog).drawer[open] {
   --drawer-motion-duration: var(--duration-slow);
+  --drawer-motion-ease: var(--ease-enter);
   display: grid;
   grid-template-rows: auto minmax(0, 1fr) auto;
   gap: var(--space-40);
   opacity: 1;
   transform: translateX(0);
-  transition:
-    opacity var(--drawer-motion-duration) var(--ease-enter),
-    transform var(--drawer-motion-duration) var(--ease-enter);
 }
 
 /* A form is the drawer's content wrapper when actions need method="dialog".
@@ -104,7 +106,10 @@
   opacity: 0;
   /* Scrim curve stays neutral `ease`; only the panel's character curves
      apply. Duration follows --drawer-motion-duration through inheritance. */
-  transition: opacity var(--drawer-motion-duration) ease;
+  transition-property: opacity, overlay, display;
+  transition-duration: var(--drawer-motion-duration);
+  transition-timing-function: ease;
+  transition-behavior: allow-discrete;
 }
 
 :where(dialog).drawer[data-side="end"] {
@@ -138,47 +143,23 @@
    exclusion list is easier to trust than its `position: absolute`. */
 :where(dialog).drawer > :not(:is(header, footer, form, .close)),
 :where(dialog).drawer > form > :not(:is(header, footer, .close)) {
-  --drawer-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 drawer would not reach
+     it. */
+  --drawer-focus-bleed: calc(var(--focus-outline-offset) + var(--focus-ring-width));
 
   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(--drawer-focus-bleed) * -1);
-  padding-inline: var(--drawer-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(--drawer-focus-bleed) * -1);
+  padding: var(--drawer-focus-bleed);
   overflow: auto;
   overscroll-behavior: contain;
 }
 
-@supports (transition-behavior: allow-discrete) {
-  :where(dialog).drawer {
-    transition:
-      opacity var(--drawer-motion-duration) var(--ease-exit),
-      transform var(--drawer-motion-duration) var(--ease-exit),
-      overlay var(--drawer-motion-duration) allow-discrete,
-      display var(--drawer-motion-duration) allow-discrete;
-  }
-
-  :where(dialog).drawer[open] {
-    transition:
-      opacity var(--drawer-motion-duration) var(--ease-enter),
-      transform var(--drawer-motion-duration) var(--ease-enter),
-      overlay var(--drawer-motion-duration) allow-discrete,
-      display var(--drawer-motion-duration) allow-discrete;
-  }
-
-  :where(dialog).drawer::backdrop {
-    transition:
-      opacity var(--drawer-motion-duration) ease,
-      overlay var(--drawer-motion-duration) allow-discrete,
-      display var(--drawer-motion-duration) allow-discrete;
-  }
-}
-
 /* Safari before 16.4 does not support :dir(); keep the ancestor-attribute
    path as the Degraded-tier fallback. The :dir() rules are dropped on their
    own there, so they need no wrapper. :dir() follows inherited HTML

package/src/css/components/flyout.css

@@ -93,7 +93,6 @@
 .flyout[popover] {
   position: fixed;
   inset: auto;
-  margin: 0;
 }
 
 /* A presentation class may own its *visible* display type, but must not

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,10 @@
 .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;
+  /* 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 +68,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);

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

@@ -71,8 +71,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,7 +82,7 @@
 /* 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);
 }
@@ -96,7 +95,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,7 +104,7 @@
   }
 
   /* After :hover so a hovered current link keeps the selected accent. */
-  .nav-link[aria-current] {
+  .nav-link:is([aria-current="page"], [aria-current="location"]) {
     color: var(--ui-fg, var(--state-selected));
   }
 }
@@ -139,11 +138,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/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
@@ -161,10 +162,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 +175,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 +202,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 +211,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 +256,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 +267,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 +276,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 +300,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;