actual-css 0.6.0 → 0.8.0

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-offset. */
+  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/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;
   }
 }
 

package/src/css/components/tab.css

@@ -5,6 +5,11 @@
  * and arrow-key navigation. CSS owns the tab strip appearance and
  * active indicator.
  *
+ * aria-orientation is matched inside :where() so it keeps describing which
+ * arrow keys move between tabs without also carrying cascade weight: an
+ * author class can then adjust a vertical strip without restating the
+ * attribute to reach its specificity.
+ *
  * Public hooks:
  * --tab-gap
  */
@@ -25,7 +30,7 @@
   list-style: none;
 }
 
-.tabs[aria-orientation="vertical"] {
+.tabs:where([aria-orientation="vertical"]) {
   display: grid;
   align-content: start;
   justify-items: stretch;
@@ -46,12 +51,15 @@
   background: transparent;
   color: var(--text-muted);
   font: inherit;
-  font-weight: var(--font-weight-strong);
+  font-size: var(--control-font-size);
+  /* Selection must not change text metrics: a heavier active label would shift
+     the strip. The active state is carried by color and the indicator line. */
+  font-weight: var(--font-weight-semibold);
   text-decoration: none;
   cursor: pointer;
 }
 
-.tabs[aria-orientation="vertical"] .tab {
+.tabs:where([aria-orientation="vertical"]) .tab {
   justify-content: flex-start;
   padding-inline-end: var(--space-40);
 }
@@ -65,6 +73,8 @@
   color: var(--text);
 }
 
+/* The ring is square on the edge the tab is attached to, so it reads as part
+   of the strip rather than a floating chip. */
 .tab:focus-visible {
   outline: var(--focus-outline);
   outline-color: var(--focus);
@@ -72,18 +82,27 @@
   border-radius: var(--radius-sm) var(--radius-sm) 0 0;
 }
 
-.tab[aria-selected="true"] {
+/* A vertical tab is attached along its inline end, not its block end, so the
+   horizontal geometry above would round the wrong pair of corners. Logical
+   corners keep it correct in RTL. */
+.tabs:where([aria-orientation="vertical"]) .tab:focus-visible {
+  border-start-start-radius: var(--radius-sm);
+  border-start-end-radius: 0;
+  border-end-start-radius: var(--radius-sm);
+  border-end-end-radius: 0;
+}
+
+.tab[aria-selected="true"],
+.tab[aria-current="page"] {
   color: var(--intent, var(--state-selected));
-  /* Second, layout-free selected cue — the underline alone is color-only in
-     forced colors. */
-  font-weight: var(--font-weight-bold);
 }
 
 /* The selected indicator lives on a positioned pseudo so that only the active
    tab owns an underline: a transparent border on every tab would surface in
    forced colors and erase the distinction. currentColor follows the palette the
    UA forces, so no forced-colors block is needed. */
-.tab[aria-selected="true"]::after {
+.tab[aria-selected="true"]::after,
+.tab[aria-current="page"]::after {
   content: "";
   position: absolute;
   inset-inline: 0;
@@ -91,7 +110,8 @@
   border-block-end: 2px solid currentColor;
 }
 
-.tabs[aria-orientation="vertical"] .tab[aria-selected="true"]::after {
+.tabs:where([aria-orientation="vertical"]) .tab[aria-selected="true"]::after,
+.tabs:where([aria-orientation="vertical"]) .tab[aria-current="page"]::after {
   inset-block: 0;
   inset-inline: auto 0;
   border-block-end: 0;

package/src/css/components/table.css

@@ -43,13 +43,13 @@
   vertical-align: baseline;
 }
 
-.table thead th {
-  vertical-align: bottom;
-}
-
 .table th {
   color: var(--text-muted);
-  font-weight: var(--font-weight-strong);
+  font-weight: var(--font-weight-semibold);
+}
+
+.table thead th {
+  vertical-align: bottom;
 }
 
 .table thead {

package/src/css/components/tooltip.css

@@ -1,9 +1,13 @@
 /*
  * Tooltip — supplemental label overlaid near a trigger.
  *
- * Position, placement, and arrow position are managed by JavaScript
- * via position: fixed, left, top, data-placement, and --arrow-x.
- * Visibility is managed with hidden; CSS owns entry and exit animation.
+ * Position, placement, and arrow position are managed by JavaScript via left,
+ * top, data-placement, and --arrow-x. The runtime also owns `position`: it
+ * writes `absolute` for a tip whose trigger scrolls with the page, so the
+ * browser carries the tip along instead of the positioner correcting it a
+ * frame later, and `fixed` — the declaration below — for every other trigger.
+ * Visibility is the Popover lifecycle: tooltip.js promotes the tip to the top
+ * layer with popover="manual". CSS owns entry and exit animation.
  *
  * Public hooks:
  * --tooltip-bg
@@ -11,8 +15,8 @@
  * --tooltip-arrow-size
  *
  * Internal:
- * --arrow-x (arrow position, written by floating.js)
- * --arrow-y (arrow position, written by floating.js)
+ * --arrow-x (arrow position, written by the positioner)
+ * --arrow-y (arrow position, written by the positioner)
  */
 .tooltip {
   --tooltip-bg: var(--surface-solid);
@@ -20,7 +24,6 @@
   --tooltip-arrow-size: 5px;
 
   position: fixed;
-  z-index: var(--z-tooltip);
   max-inline-size: min(24rem, calc(var(--viewport-inline) - 2rem));
   padding: 0.25em 0.6em;
   border-radius: var(--radius-sm);
@@ -39,21 +42,56 @@
   transition: opacity var(--duration-fast) ease;
 }
 
+/* Neutralize only the native geometry that conflicts with a positioned
+   tooltip. In particular, the UA overflow would turn the arrow into scroll
+   overflow instead of letting it project beyond the bubble.
+
+   One rule for both lifecycles: the runtime writes popover="manual" on the
+   tips it manages, and an application driving a .tooltip[popover] itself lands
+   on the same declarations. Who owns which is in
+   docs/pages/enhancements/overview.md. */
+.tooltip[popover] {
+  inset: auto;
+  margin: 0;
+  overflow: visible;
+}
+
+/* The closed state, for either lifecycle. .tooltip declares no display of its
+   own so the UA would already hide it, but the opacity target is what makes
+   the exit fade at all — see the overlay note below. */
+.tooltip[popover]:not(:popover-open) {
+  display: none;
+  opacity: 0;
+}
+
+/* The state before enhancement, and the author's to write — not the runtime's.
+   Wiring is lazy: tooltip.js adopts an explicit tip on its trigger's first
+   hover, so a tooltip nobody hovers keeps [hidden] for the whole life of the
+   page. Without this rule it would sit on screen at full opacity until then.
+   The runtime removes the attribute at the moment it takes the lifecycle over,
+   because an author declaration outranks the platform's own hidden state. */
 .tooltip[hidden] {
   display: none;
   opacity: 0;
 }
 
+/* Entry opacity, for either lifecycle — both are :popover-open.
+   @starting-style is above the floor (Safari 17.5); where it is missing the
+   tip simply appears at full opacity. */
 @starting-style {
-  .tooltip:not([hidden]) {
+  .tooltip:popover-open {
     opacity: 0;
   }
 }
 
+/* overlay is the native popover counterpart of display: it holds the tip in
+   the top layer until the fade finishes, instead of letting hidePopover()
+   demote it on the first frame. Ignored where unsupported. */
 @supports (transition-behavior: allow-discrete) {
   .tooltip {
     transition:
       opacity var(--duration-fast) ease,
+      overlay var(--duration-fast) allow-discrete,
       display var(--duration-fast) allow-discrete;
   }
 }
@@ -99,9 +137,3 @@
   translate: 0 -50%;
   clip-path: polygon(0 50%, 100% 0, 100% 100%);
 }
-
-@media print {
-  .tooltip {
-    display: none !important;
-  }
-}