actual-css 0.7.0 → 0.9.0

package/src/css/components/index.css

@@ -6,7 +6,6 @@
 
 /* Surfaces */
 @import "./card.css";
-@import "./surface.css";
 @import "./modal.css";
 @import "./drawer.css";
 

package/src/css/components/indicator.css

@@ -38,10 +38,31 @@
   inset-block-end: 0;
 }
 
+/* Safari before 16.4 has no :dir(); the ancestor-attribute path is the
+   Degraded-tier fallback and the :dir() rules are dropped on their own there.
+   :dir() follows inherited directionality, so the explicit ltr rules
+   neutralize an outer RTL fallback for a nested direction change. The rules
+   stay grouped by specificity so the fallback never follows the :dir() rules. */
+[dir="rtl"] .indicator-item {
+  --indicator-translate-x: -50%;
+}
+
+.indicator-item:dir(ltr) {
+  --indicator-translate-x: 50%;
+}
+
 .indicator-item:dir(rtl) {
   --indicator-translate-x: -50%;
 }
 
+[dir="rtl"] .indicator-item.start {
+  --indicator-translate-x: 50%;
+}
+
+.indicator-item.start:dir(ltr) {
+  --indicator-translate-x: -50%;
+}
+
 .indicator-item.start:dir(rtl) {
   --indicator-translate-x: 50%;
 }

package/src/css/components/key.css

@@ -27,3 +27,13 @@
   vertical-align: 0.08em;
 }
 /* @sync key-recipe */
+
+/* .key has a compact typographic default of its own, so its local size roles
+   step around that default instead of inheriting the generic mapping. */
+.key.sm {
+  font-size: var(--font-size-xs);
+}
+
+.key.lg {
+  font-size: var(--font-size-md);
+}

package/src/css/components/list.css

@@ -18,6 +18,7 @@
   --list-divider: var(--border-width) solid var(--border);
 
   display: grid;
+  grid-template-columns: minmax(0, 1fr);
   gap: 0;
   margin: 0;
   padding: 0;
@@ -29,10 +30,17 @@
   margin: 0;
 }
 
+/*
+ * Flex, not a three-track grid: the leading and trailing regions are optional,
+ * and a fixed `auto minmax(0, 1fr) auto` template gives an absent region a
+ * track anyway — the content of a row with no leading region lands in the
+ * leading track and the trailing control inherits the flexible one, which is
+ * the opposite of the intent. Flex drops both the track and its gap when a
+ * region is not there, so all four shapes work off one rule.
+ */
 .list > :where(.list-item),
 .list > li > .list-item {
-  display: grid;
-  grid-template-columns: auto minmax(0, 1fr) auto;
+  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;
@@ -48,6 +56,7 @@
 }
 
 a.list-item {
+  position: relative;
   color: inherit;
   text-decoration: none;
 }
@@ -56,7 +65,31 @@ 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.
+   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] {
+  background: var(--surface-subtle);
+}
+
+a.list-item[aria-current]::before {
+  content: "";
+  position: absolute;
+  inset-block: var(--list-item-pad-block);
+  inset-inline-start: 0;
+  border-inline-start: 2px solid var(--state-selected);
+}
+
+/* The content region is the one that flexes, whichever position it holds. */
 .list-item-content {
+  flex: 1 1 0;
   min-inline-size: 0;
 }
 
@@ -64,16 +97,19 @@ a.list-item:hover {
 .list-item-text {
   display: block;
   margin: 0;
+  overflow-wrap: anywhere;
 }
 
 .list-item-text {
   color: var(--text-muted);
   font-size: var(--font-size-sm);
-  overflow-wrap: anywhere;
 }
 
+/* The auto margin keeps the trailing region at the row's end even in a row
+   with no content region to absorb the free space. */
 .list-item-trailing {
-  justify-self: end;
+  flex: none;
+  margin-inline-start: auto;
   min-inline-size: 0;
 }
 

package/src/css/components/menu.css

@@ -44,6 +44,7 @@
   background: transparent;
   color: var(--intent, var(--text));
   font: inherit;
+  font-size: var(--control-font-size);
   text-align: start;
   text-decoration: none;
   white-space: nowrap;
@@ -124,7 +125,7 @@
   padding: var(--space-20);
   color: var(--text-muted);
   font-size: var(--font-size-xs);
-  font-weight: var(--font-weight-strong);
+  font-weight: var(--font-weight-semibold);
 }
 
 .menu-separator {

package/src/css/components/modal.css

@@ -12,21 +12,40 @@
  *
  * Internal:
  * --dialog-close-icon-size
+ * --dialog-viewport-block
+ * --dialog-viewport-gap-default
  * --dialog-viewport-gap-2x
  */
 dialog.modal {
-  --modal-size: 32rem;
-  --dialog-viewport-gap: var(--space-40);
-  /* calc() multiplication is not in the supported browser range, so the
+  /* --dialog-viewport-gap stays fallback-only for the same reason as
+     --modal-size below: declaring the public hook here would give it
+     type+class specificity that a single author class cannot outrank. The
+     responsive default lives in an internal token instead, so a media query
+     can still move it without closing the hook.
+
+     calc() multiplication is not in the supported browser range, so the
      doubled gap is spelled out with an additive calc. */
-  --dialog-viewport-gap-2x: calc(var(--dialog-viewport-gap) + var(--dialog-viewport-gap));
+  --dialog-viewport-gap-default: var(--space-40);
+  --dialog-viewport-gap-2x: calc(
+    var(--dialog-viewport-gap, var(--dialog-viewport-gap-default)) +
+    var(--dialog-viewport-gap, var(--dialog-viewport-gap-default))
+  );
 
   /* Keep the surface anchored to the viewport in the top layer. This also
      provides the containing block for the absolutely positioned close button. */
   position: fixed;
 
-  max-inline-size: min(calc(100% - var(--dialog-viewport-gap-2x)), var(--modal-size));
-  max-block-size: calc(var(--viewport-block) - var(--dialog-viewport-gap-2x));
+  /* --modal-size stays fallback-only: declaring it on dialog.modal gives it
+     type+class specificity, which a single author class cannot outrank, so the
+     public hook would silently keep this default. Same reason choice.css never
+     declares --choice-control-nudge. */
+  max-inline-size: min(calc(100% - var(--dialog-viewport-gap-2x)), var(--modal-size, 32rem));
+
+  /* Stable viewport cap for the panel: dvh tracks the dynamic browser toolbar
+     and makes the dialog reflow on mobile, svh does not. App shells keep the
+     dynamic token; only the modal pins the small viewport. */
+  --dialog-viewport-block: var(--viewport-block);
+  max-block-size: calc(var(--dialog-viewport-block) - var(--dialog-viewport-gap-2x));
   border: var(--border-width) solid var(--border);
   border-radius: var(--radius-lg);
   background: var(--surface-raised);
@@ -36,7 +55,7 @@ dialog.modal {
   overflow: visible;
   opacity: 0;
   /*
-   * Keep the open dialog root untransformed. Fixed overlays mounted inside a
+   * Keep the open dialog root untransformed. Fixed overlays authored inside a
    * modal dialog use viewport coordinates; transform/translate/scale on this
    * element would make them position against the dialog instead. The closed
    * state can still carry a small transform for enter/exit motion. The lift
@@ -53,16 +72,23 @@ dialog.modal > form,
 dialog.modal > .stack {
   display: grid;
   gap: var(--space-40);
-  max-block-size: calc(var(--viewport-block) - var(--dialog-viewport-gap-2x));
+  max-block-size: calc(var(--dialog-viewport-block) - var(--dialog-viewport-gap-2x));
   overflow: auto;
   overscroll-behavior: contain;
   padding: var(--space-40);
 }
 
-/* Keep the dialog off the viewport edges on small screens. */
+@supports (block-size: 100svh) {
+  dialog.modal {
+    --dialog-viewport-block: 100svh;
+  }
+}
+
+/* Keep the dialog off the viewport edges on small screens. Moves the internal
+   default, not the public hook, so an author override still wins here too. */
 @media (max-width: 30rem) {
   dialog.modal {
-    --dialog-viewport-gap: var(--space-30);
+    --dialog-viewport-gap-default: var(--space-30);
   }
 }
 
@@ -72,8 +98,8 @@ dialog.modal.scrollable > .stack {
   overflow: hidden;
 }
 
-dialog.modal.scrollable > form > :not(header, footer),
-dialog.modal.scrollable > .stack > :not(header, footer) {
+dialog.modal.scrollable > form > :not(:is(header, footer)),
+dialog.modal.scrollable > .stack > :not(:is(header, footer)) {
   min-block-size: 0;
   overflow: auto;
   overscroll-behavior: contain;
@@ -128,6 +154,7 @@ dialog.modal.dialog-confirmation > form > footer {
 :where(.dialog-icon) {
   --intent: initial;
   --intent-fg: initial;
+  --intent-soft-fg: initial;
   --ui-bg: initial;
   --ui-fg: initial;
 }
@@ -256,14 +283,11 @@ html.has-modal-open.had-scrollbar {
   }
 }
 
-/* Close controls. A close button is an action attached to a surface, so it
-   never participates in the content flow. The modal and the drawer share the
-   same simple placement — absolute at the panel's top inline-end, inside the
-   surface — so both close buttons look and behave identically. The glyph comes
-   from --icon-close, masked to currentColor, so no icon font or text glyph is
-   required in the markup. */
-.dialog-close,
-.drawer-close {
+/* Close control. A close button is an action attached to a surface, so it
+   never participates in the content flow — absolute at the panel's top
+   inline-end, inside the surface. The glyph comes from --icon-close, masked to
+   currentColor, so no icon font or text glyph is required in the markup. */
+.dialog-close {
   --dialog-close-icon-size: 1rem;
 
   display: inline-grid;
@@ -287,8 +311,7 @@ html.has-modal-open.had-scrollbar {
   background: var(--surface-subtle);
 }
 
-.dialog-close::before,
-.drawer-close::before {
+.dialog-close::before {
   content: "";
   inline-size: var(--dialog-close-icon-size);
   block-size: var(--dialog-close-icon-size);
@@ -298,25 +321,17 @@ html.has-modal-open.had-scrollbar {
 }
 
 @media (hover: hover) {
-  .dialog-close:hover,
-  .drawer-close:hover {
+  .dialog-close:hover {
     box-shadow: inset 0 0 0 999px var(--hover-overlay);
     color: var(--text);
   }
 }
 
-.dialog-close:active,
-.drawer-close:active {
+.dialog-close:active {
   box-shadow: inset 0 0 0 999px var(--hover-overlay);
 }
 
-.dialog-close:focus-visible,
-.drawer-close:focus-visible {
+.dialog-close:focus-visible {
   outline: 2px solid transparent;
   box-shadow: var(--focus-ring-shadow);
 }
-@media print {
-  dialog.modal[open] {
-    display: none !important;
-  }
-}

package/src/css/components/navbar.css

@@ -9,8 +9,15 @@
  * --gap (local value for the shared gap token)
  */
 /* Intent boundary — inherited intents do not tint this component.
-   Local intent classes still win because :where() has zero specificity. */
+   Local intent classes still win because :where() has zero specificity.
+   The intent tokens are reset alongside --ui-*: the shared variants
+   (.soft/.solid/.outline/.surface) read --intent / --intent-fg / --intent-soft-fg
+   when they paint this surface, so an ancestor intent would otherwise leak
+   through a variant that has no local intent class. */
 :where(.navbar) {
+  --intent: initial;
+  --intent-fg: initial;
+  --intent-soft-fg: initial;
   --ui-bg: initial;
   --ui-fg: initial;
   --ui-border: initial;
@@ -66,10 +73,15 @@
   text-decoration: none;
 }
 
-.nav-link:where([aria-current]:not([aria-current="false"])) {
+/* 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".
+   Selection never changes text metrics: the shared medium weight is kept and
+   the current link is carried by the selected accent. */
+.nav-link[aria-current] {
   background: var(--surface-subtle);
-  color: var(--text);
-  font-weight: var(--font-weight-bold);
+  color: var(--state-selected);
 }
 
 .nav-link:hover {
@@ -77,11 +89,18 @@
   color: var(--text);
 }
 
+/* A current link keeps its accent on hover: without this, the hover rule above
+   would drop it back to --text. The surface hover still applies. */
+.nav-link[aria-current]:hover {
+  color: var(--state-selected);
+}
+
 /* Nav list — a vertical navigation list. Used by .drawer for stacked links.
    Links fill each row so the whole line is an interactive target; the
    horizontal .navbar-nav links keep their intrinsic size. */
 .nav-list {
   display: grid;
+  grid-template-columns: minmax(0, 1fr);
   --gap: var(--space-20);
   gap: var(--gap);
   margin: 0;
@@ -94,5 +113,19 @@
 }
 
 .nav-list .nav-link {
+  position: relative;
   inline-size: 100%;
 }
+
+/* Vertical current indicator: inset inline-start trait in currentColor, so it
+   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 {
+  content: "";
+  position: absolute;
+  inset-block: var(--space-20);
+  inset-inline-start: 0;
+  border-inline-start: 2px solid currentColor;
+}

package/src/css/components/pagination.css

@@ -17,6 +17,7 @@
   margin: 0;
   padding: 0;
   list-style: none;
+  font-size: var(--control-font-size);
 
   /* Arrows, page numbers, and truncation ellipses share one geometric
      system: equal digit widths keep the row from re-flowing as numbers grow

package/src/css/components/skeleton.css

@@ -11,16 +11,24 @@
  * --skeleton-track
  * --skeleton-highlight
  */
+/* A placeholder fills its container up to --skeleton-width; the preset widths
+   are a cap, never an intrinsic size. Stated the other way round — a rem
+   `inline-size` capped by a percentage `max-inline-size` — the cap is ignored
+   during intrinsic sizing, so every shrink-to-fit ancestor inherits the
+   preset as a min-content floor: a card holding a title placeholder could not
+   go below 18rem and pushed a phone's layout sideways. A percentage
+   `inline-size` contributes nothing intrinsically and a rem cap only lowers
+   the contribution, so the same geometry costs no floor. */
 .skeleton {
   --skeleton-size: 1rem;
-  --skeleton-width: 100%;
+  --skeleton-width: none;
   --skeleton-radius: var(--radius);
   --skeleton-track: var(--surface-subtle);
   --skeleton-highlight: var(--surface-raised);
 
   display: block;
-  inline-size: var(--skeleton-width);
-  max-inline-size: 100%;
+  inline-size: 100%;
+  max-inline-size: var(--skeleton-width);
   block-size: var(--skeleton-size);
   border-radius: var(--skeleton-radius);
   background:
@@ -44,11 +52,14 @@
   --skeleton-width: 18rem;
 }
 
+/* The one preset with a real intrinsic width: a disc is square, so it sizes
+   rather than caps. The floor it does carry is the avatar size, which is small
+   enough never to widen a layout. */
 .skeleton[data-shape="avatar"] {
   --skeleton-size: var(--avatar-size, 2.25rem);
-  --skeleton-width: var(--skeleton-size);
   --skeleton-radius: var(--radius-full);
 
+  inline-size: var(--skeleton-size);
   flex: 0 0 auto;
 }
 

package/src/css/components/spinner.css

@@ -31,7 +31,6 @@
   border-inline-end-color: var(--spinner-value);
   border-radius: var(--radius-full);
   opacity: 0.85;
-  animation: actual-spin var(--duration-spin) linear infinite;
   vertical-align: text-bottom;
 }
 
@@ -52,13 +51,14 @@
   --spinner-width: 3px;
 }
 
+@media (prefers-reduced-motion: no-preference) {
+  .spinner {
+    animation: actual-spin var(--duration-spin) linear infinite;
+  }
+}
+
 @keyframes actual-spin {
   to {
     transform: rotate(360deg);
   }
 }
-@media print {
-  .spinner {
-    display: none !important;
-  }
-}

package/src/css/components/status-bar.css

@@ -86,8 +86,3 @@
     translate var(--duration-slow) var(--ease-enter),
     background-color var(--duration) ease;
 }
-@media print {
-  .status-bar {
-    display: none !important;
-  }
-}

package/src/css/components/steps.css

@@ -8,23 +8,16 @@
  *
  * `.steps` is what a step *is* — the counter, the marker, `.step-label`,
  * `.step-complete`, `aria-current="step"`. It carries no orientation, so it is
- * never written alone. `.steps-horizontal` and `.steps-vertical` are what a
- * sequence *looks like*, and they are peers: neither is the default the other
- * has to exclude, so no rule says `:not(...)` and no rule undoes another's
- * layout.
+ * never written alone. The two orientations are peers: no rule says
+ * `:not(...)` and no rule undoes another's layout.
  *
- * Orientation and labels are independent dimensions. `.step-label` is optional
- * in either orientation; when a sequence carries names, every step carries
- * one:
+ * Orientation and labels are independent. `.step-label` is optional in either;
+ * when a sequence carries names, every step carries one:
  *
  *                 empty steps           .step-label on every step
  *   horizontal    compact progression   named sequence, stacked or inline
  *   vertical      compact rail          named sequence, labels beside markers
  *
- * An empty step is a marker and nothing else, so it is compact by structure —
- * `> li:empty` in both orientations, no variant class, and nothing authored
- * only to be hidden again. The page around it owns the step name.
- *
  * A label may be an `a[href]`, which is the whole interactive surface: the
  * marker is never navigable, so navigating a flow means naming its
  * destinations. Anything else focusable in a step is out of contract.
@@ -95,7 +88,7 @@
   background: var(--step-marker-bg);
   color: var(--step-marker-fg);
   font-size: var(--font-size-sm);
-  font-weight: var(--font-weight-strong);
+  font-weight: var(--font-weight-semibold);
   line-height: 1;
 }
 
@@ -155,11 +148,9 @@
   border-width: calc(var(--border-width) * 2);
 }
 
-/* Weight marks "where I am now". Complete needs none: its filled disc already
-   reads as strongly. */
-.steps > [aria-current="step"] .step-label {
-  font-weight: var(--font-weight-strong);
-}
+/* No label weight change for current: the accented marker with its doubled
+   border already carries the state, and selection never changes text metrics.
+   Complete needs none either: its filled disc already reads as strongly. */
 
 .steps > .step-complete:not([aria-current="step"])::before {
   content: var(--step-complete-mark, counter(actual-step));
@@ -217,8 +208,8 @@
    `: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. It also predates `:has()` by a decade, so the compact
-   form reaches the Degraded tier and only the inline bonus needs `:has()`. */
+   floor and skew the row. `: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;
   justify-items: start;
@@ -249,48 +240,43 @@
 }
 
 /*
- * The one horizontal container query. Past 60rem a labelled row has the room
- * to put marker and label inline and still leave the connector a real region
- * between groups, rather than a stub. Calibrated on five steps — the widest
- * supported row, and therefore the binding case — and it counts nothing, so it
- * serves every count. Below it, stacked; a marker row is already the shape
- * this query produces and stays out of it.
+ * The one horizontal container query: past 60rem a labelled row can put marker
+ * and label inline and still leave the connector a real region between groups.
+ * It counts nothing, so it serves every count; below it, stacked. A marker row
+ * is already the shape this query produces and stays out of it.
  *
- * Horizontal is a 2-5 step component. Outside that domain the rule simply
- * applies as written, because a row that is out of contract is not owed a
- * curated fallback.
+ * Horizontal is a 2-5 step component. Outside that domain the rule applies as
+ * written — a row out of contract is not owed a curated fallback.
  */
-@supports (container-type: inline-size) {
-  @container actual-container (inline-size >= 60rem) {
-    .steps-horizontal:has(.step-label) > li {
-      display: flex;
-      flex: 1 1 auto;
-      align-items: center;
-      gap: var(--step-inline-gap);
-      min-inline-size: 0;
-      text-align: start;
-      white-space: nowrap;
-    }
-
-    .steps-horizontal:has(.step-label) > li::after {
-      position: static;
-      flex: 1 1 2rem;
-      inline-size: auto;
-      block-size: var(--step-size);
-      margin-inline-end: var(--step-inline-gap);
-      background: var(
-        --step-inline-connector,
-        var(
-          --step-connector,
-          linear-gradient(var(--step-line), var(--step-line)) center /
-          100% var(--step-line-size) no-repeat
-        )
-      );
-    }
-
-    .steps-horizontal:has(.step-label) > li:last-child {
-      flex: 0 0 auto;
-    }
+@container actual-container (inline-size >= 60rem) {
+  .steps-horizontal:has(.step-label) > li {
+    display: flex;
+    flex: 1 1 auto;
+    align-items: center;
+    gap: var(--step-inline-gap);
+    min-inline-size: 0;
+    text-align: start;
+    white-space: nowrap;
+  }
+
+  .steps-horizontal:has(.step-label) > li::after {
+    position: static;
+    flex: 1 1 2rem;
+    inline-size: auto;
+    block-size: var(--step-size);
+    margin-inline-end: var(--step-inline-gap);
+    background: var(
+      --step-inline-connector,
+      var(
+        --step-connector,
+        linear-gradient(var(--step-line), var(--step-line)) center /
+        100% var(--step-line-size) no-repeat
+      )
+    );
+  }
+
+  .steps-horizontal:has(.step-label) > li:last-child {
+    flex: 0 0 auto;
   }
 }