actual-css 0.3.0 → 0.4.0

package/src/css/components/badge.css

@@ -13,6 +13,10 @@
  * --badge-radius
  *
  * Internal:
+ * --badge-default-bg
+ * --badge-default-fg
+ * --badge-default-border
+ * --badge-default-hover-bg
  * --badge-bg
  * --badge-fg
  * --badge-border
@@ -31,11 +35,15 @@
 .badge {
   --badge-size: var(--density-compact-size);
   --badge-pad-x: 0.55em;
-  --badge-font-size: 0.8125rem;
+  --badge-font-size: var(--font-size-xs);
   --badge-dot-size: 0.5rem;
-  --badge-bg: var(--ui-bg, var(--surface-subtle));
-  --badge-fg: var(--ui-fg, var(--intent, var(--text)));
-  --badge-border: var(--ui-border, var(--border));
+  --badge-default-bg: var(--surface-subtle);
+  --badge-default-fg: var(--intent, var(--text));
+  --badge-default-border: var(--border);
+  --badge-default-hover-bg: var(--badge-bg);
+  --badge-bg: var(--ui-bg, var(--badge-default-bg));
+  --badge-fg: var(--ui-fg, var(--badge-default-fg));
+  --badge-border: var(--ui-border, var(--badge-default-border));
   --badge-radius: var(--radius-full);
 
   display: inline-flex;
@@ -62,22 +70,26 @@
     box-shadow var(--duration);
 }
 
-/* Soft by default — duplicated here with @sync markers for check-sync.js
-   to guard, the same way alert.css guards its own soft recipe. */
+/* Soft by default. Local defaults remain behind --ui-* in the resolution
+   chain, so explicit shared treatments compose without selector exclusions. */
 @supports (color: color-mix(in oklch, red, white)) {
-  .badge:where(:not(.solid, .outline)) {
+  .badge {
     /* @sync soft-recipe */
-    --badge-bg: color-mix(
-      in oklch,
+    --badge-default-bg: color-mix(
+      in oklab,
       var(--surface) var(--soft-bg-mix),
       var(--intent, var(--neutral))
     );
-    --badge-fg: var(--intent, var(--text));
-    --badge-border: color-mix(
-      in oklch,
+    --badge-default-border: color-mix(
+      in oklab,
       var(--surface) var(--soft-border-mix),
       var(--intent, var(--neutral))
     );
+    --badge-default-fg: color-mix(
+      in oklab,
+      var(--text),
+      var(--intent, var(--text)) var(--soft-fg-mix)
+    );
     /* @sync soft-recipe */
   }
 }
@@ -97,8 +109,8 @@
   display: inline-grid;
   place-items: center;
   flex: 0 0 auto;
-  min-inline-size: 1.5rem;
-  min-block-size: 1.5rem;
+  min-inline-size: var(--density-compact-size);
+  min-block-size: var(--density-compact-size);
   margin-block: -0.25rem;
   margin-inline-start: -0.15em;
   margin-inline-end: -0.45em;
@@ -119,7 +131,7 @@
 /* Hover recipes — sets --ui-hover-bg consumed by the hover rule below.
    Declared outside :hover like button.css for the same reason. */
 :is(a.badge, button.badge).outline {
-  --ui-hover-bg: var(--surface-subtle);
+  --ui-hover-bg: transparent;
 }
 
 @supports (color: color-mix(in oklch, red, white)) {
@@ -128,23 +140,24 @@
   }
 
   :is(a.badge, button.badge):where(:not(.solid, .outline, :empty)) {
-    --ui-hover-bg: color-mix(
-      in oklch,
+    --badge-default-hover-bg: color-mix(
+      in oklab,
       var(--surface) calc(var(--soft-bg-mix) - var(--soft-hover-alpha)),
       var(--intent, var(--neutral))
     );
   }
 
   :is(a.badge, button.badge).outline {
-    --ui-hover-bg: color-mix(in oklch, var(--surface-subtle) 92%, var(--intent, var(--neutral)));
+    --ui-hover-bg: color-mix(in oklch, currentColor 10%, transparent);
   }
 }
 
 :where(a.badge, button.badge):not(:where(:disabled, [aria-disabled="true"])):hover {
-  background: var(--ui-hover-bg, var(--badge-bg));
+  background: var(--ui-hover-bg, var(--badge-default-hover-bg));
 }
 
 :where(a.badge, button.badge):not(:where(:disabled, [aria-disabled="true"], .outline)):hover {
+  /* Huge inset spread paints the overlay over the pill radius (see button.css). */
   box-shadow: inset 0 0 0 999px var(--hover-overlay);
 }
 
@@ -184,3 +197,9 @@ a.badge[aria-disabled="true"] {
     color: GrayText;
   }
 }
+@media print {
+  .badge {
+    border: var(--border-width) solid CanvasText;
+    break-inside: avoid;
+  }
+}

package/src/css/components/breadcrumb.css

@@ -42,7 +42,7 @@
   border-radius: var(--radius-sm);
 }
 
-.breadcrumb :where(a, span):where([aria-current]:not([aria-current="false"])) {
+.breadcrumb :where(li, a, span):where([aria-current]:not([aria-current="false"])) {
   color: var(--text);
   font-weight: var(--font-weight-medium);
 }

package/src/css/components/button.css

@@ -18,11 +18,16 @@
  * --btn-focus-color
  * --btn-gap
  * --btn-hover-overlay
+ * --btn-default-bg
+ * --btn-default-fg
+ * --btn-default-border
+ * --btn-border-color
  *
  * Internal:
  * --btn-bg
  * --btn-fg
  * --btn-border
+ * --btn-default-hover-bg
  * --btn-focus-ring-color
  * --btn-border-block-end-color
  * --btn-border-block-end-width
@@ -47,6 +52,7 @@
   --btn-bg: var(--ui-bg, var(--btn-default-bg, var(--intent, var(--neutral))));
   --btn-fg: var(--ui-fg, var(--btn-default-fg, var(--intent-fg, var(--neutral-fg))));
   --btn-border: var(--ui-border, var(--btn-default-border, transparent));
+  --btn-default-hover-bg: var(--btn-bg);
   --btn-radius: var(--radius);
   --btn-focus-color: var(--intent, var(--focus));
   --btn-hover-overlay: var(--hover-overlay, rgb(0 0 0 / 0.08));
@@ -99,7 +105,7 @@
    fallbacks make .btn solid by default; .ghost/.link are .btn-only variants. */
 .btn.ghost {
   --ui-bg: transparent;
-  --ui-fg: var(--intent, var(--text));
+  --ui-fg: var(--intent, currentColor);
   --ui-border: transparent;
 }
 
@@ -117,35 +123,35 @@
    Declared outside :hover: the variables resolve only when the hover rule
    reads them, so the values are inert until interaction. */
 .btn:is(.outline, .ghost) {
-  --ui-hover-bg: var(--surface-subtle);
+  --ui-hover-bg: transparent;
 }
 
 @supports (color: color-mix(in oklch, red, white)) {
-  .btn:not(:where(.soft, .outline, .ghost, .link)) {
-    --ui-hover-bg: color-mix(in oklch, var(--intent, var(--neutral)) 88%, black);
+  .btn {
+    --btn-default-hover-bg: color-mix(in oklch, var(--btn-bg) 88%, black);
   }
 
   .btn.soft {
     --ui-hover-bg: color-mix(
-      in oklch,
+      in oklab,
       var(--surface) calc(var(--soft-bg-mix) - var(--soft-hover-alpha)),
       var(--intent, var(--neutral))
     );
   }
 
-  .btn.outline {
-    --ui-hover-bg: color-mix(in oklch, var(--surface-subtle) 92%, var(--intent, var(--neutral)));
-  }
-
+  .btn.outline,
   .btn.ghost {
-    --ui-hover-bg: color-mix(in oklch, var(--intent, var(--text)) 8%, transparent);
+    --ui-hover-bg: color-mix(in oklch, currentColor 10%, transparent);
   }
 }
 
 /* The .soft/.outline/.ghost hover recipe (--ui-hover-bg) is set locally above;
    the overlay darkening for solid/soft is .btn-specific. */
 .btn:not(:where(:disabled, [aria-disabled="true"])):hover {
-  background: var(--ui-hover-bg, var(--btn-bg));
+  background: var(--ui-hover-bg, var(--btn-default-hover-bg));
+  /* Huge inset spread paints the overlay over any border-radius without a
+     pseudo-element; a plain background would replace the fill instead of
+     darkening it. */
   box-shadow: inset 0 0 0 999px var(--btn-hover-overlay);
 }
 
@@ -155,7 +161,7 @@
 
 .btn.link {
   --ui-bg: transparent;
-  --ui-fg: var(--intent, var(--text));
+  --ui-fg: var(--intent, currentColor);
   --ui-border: transparent;
   --btn-radius: var(--radius-sm);
   --btn-border-block-end-color: transparent;
@@ -163,6 +169,8 @@
 
   min-block-size: auto;
   padding-inline: 0;
+  inline-size: fit-content;
+  max-inline-size: 100%;
   border-color: transparent;
   text-decoration: underline;
   text-underline-offset: 0.18em;
@@ -173,7 +181,6 @@
 
 .btn.link:not(:where(:disabled, [aria-disabled="true"])):hover {
   background: transparent;
-  color: var(--intent, var(--text));
   text-decoration-thickness: 0.12em;
 }
 
@@ -245,6 +252,11 @@ a.btn[aria-disabled="true"] {
     forced-color-adjust: none;
   }
 
+  .btn:is([aria-pressed="true"], [aria-current="page"]):not(.link):focus-visible {
+    outline: var(--focus-outline);
+    box-shadow: none;
+  }
+
   .btn:hover:not(:where(:disabled, [aria-disabled="true"], .link)) {
     outline: var(--border-width) solid ButtonText;
     outline-offset: 2px;
@@ -258,3 +270,13 @@ a.btn[aria-disabled="true"] {
     forced-color-adjust: auto;
   }
 }
+@media print {
+  :is(button, input[type="button"], input[type="submit"], input[type="reset"]).btn {
+    display: none !important;
+  }
+
+  a.btn[href^="http"]::after {
+    content: " (" attr(href) ")";
+    font-size: 0.875em;
+  }
+}

package/src/css/components/card.css

@@ -2,8 +2,10 @@
  * Cards provide a neutral raised surface for grouped content.
  *
  * Surface, border, radius, padding, density, and elevation stay local here.
- * Direct header/footer children are structural slots. Page layout remains the
- * job of markup and layout primitives outside the card.
+ * Direct header/footer children are structural slots; a direct footer is
+ * anchored to the card's bottom edge when extra block space is available (so
+ * price/action rows align across equal-height cards in a grid). Page layout
+ * remains the job of markup and layout primitives outside the card.
  *
  * Public hooks:
  * --card-pad
@@ -15,6 +17,8 @@
  * edge children inherit the card corners. .bleed must be a direct child.
  *
  * Internal:
+ * --card-bg
+ * --card-fg
  * --heading
  * --busy-overlay-bg
  */
@@ -30,15 +34,32 @@
   --card-pad: var(--space-40);
   --card-radius: var(--radius-lg);
   --card-max-inline-size: none;
+  --card-bg: var(--ui-bg, var(--surface-raised));
+  --card-fg: var(--ui-fg, var(--text));
+
+  /* Keep contextual descendants tied to the surface this card actually owns. */
+  --heading: var(--card-fg);
+  --busy-overlay-bg: var(--card-bg);
 
   max-inline-size: var(--card-max-inline-size);
   padding: var(--card-pad);
-  background: var(--ui-bg, var(--surface-raised));
-  color: var(--ui-fg, var(--text));
+  background: var(--card-bg);
+  color: var(--card-fg);
   border: var(--border-width) solid var(--ui-border, var(--border));
   border-radius: var(--card-radius);
 }
 
+/* The box lives at zero specificity so a layout primitive applied to the same
+   element owns it. components/ is imported after layout/, so a plain .card
+   declaration would beat .media (and any other non-column primitive) on source
+   order alone and silently flatten `class="card media"` into a column. The
+   column is still the default a bare .card gets, and > footer's margin-auto
+   bottom-anchoring depends on it. */
+:where(.card) {
+  display: flex;
+  flex-direction: column;
+}
+
 .card > * {
   min-inline-size: 0;
 }
@@ -61,6 +82,12 @@
   align-items: var(--items-align, flex-start);
 }
 
+/* A direct footer is pinned to the bottom when the card has free space.
+   Specificity beats .stack > * so a .card.stack keeps this contract. */
+.card > footer {
+  margin-block-start: auto;
+}
+
 .card > :first-child {
   margin-block-start: 0;
 }
@@ -118,3 +145,9 @@
 .card > :where(header, footer, figure).bleed {
   padding: var(--card-pad);
 }
+@media print {
+  .card {
+    border: var(--border-width) solid CanvasText;
+    break-inside: avoid;
+  }
+}

package/src/css/components/drawer.css

@@ -108,8 +108,8 @@ dialog.drawer nav {
   }
 }
 
-/* RTL: swap closed transform directions so the drawer slides from the correct
-   inline side. */
+/* Safari before 16.4 does not support :dir(); keep the ancestor-attribute
+   path as the Minimal-tier fallback. */
 [dir="rtl"] dialog.drawer {
   --drawer-closed-translate: 100%;
 }
@@ -118,6 +118,26 @@ dialog.drawer nav {
   --drawer-closed-translate: -100%;
 }
 
+/* :dir() follows inherited HTML directionality and handles nested direction
+   changes. Explicit ltr rules neutralize an outer RTL fallback selector. */
+@supports selector(:dir(rtl)) {
+  dialog.drawer:dir(ltr) {
+    --drawer-closed-translate: -100%;
+  }
+
+  dialog.drawer[data-side="end"]:dir(ltr) {
+    --drawer-closed-translate: 100%;
+  }
+
+  dialog.drawer:dir(rtl) {
+    --drawer-closed-translate: 100%;
+  }
+
+  dialog.drawer[data-side="end"]:dir(rtl) {
+    --drawer-closed-translate: -100%;
+  }
+}
+
 @media (forced-colors: active) {
   dialog.drawer::backdrop {
     background: Canvas;
@@ -137,3 +157,8 @@ dialog.drawer > header,
 dialog.drawer > form > header {
   padding-inline-end: calc(var(--control-size) + var(--space-30));
 }
+@media print {
+  dialog.drawer[open] {
+    display: none !important;
+  }
+}

package/src/css/components/flyout.css

@@ -170,3 +170,8 @@
 /* Vertical dividers — .menu-separator (menu.css) is the canonical way to
    separate menu items. Flyout panels that are not menus use auto grid gap
    declared on .flyout itself. */
+@media print {
+  .flyout {
+    display: none !important;
+  }
+}

package/src/css/components/index.css

@@ -1,42 +1,47 @@
 /* Controls */
-@import "button.css";
-@import "badge.css";
-@import "alert.css";
-@import "actions.css";
+@import "./button.css";
+@import "./badge.css";
+@import "./alert.css";
+@import "./actions.css";
 
 /* Surfaces */
-@import "card.css";
-@import "surface.css";
-@import "modal.css";
-@import "drawer.css";
+@import "./card.css";
+@import "./surface.css";
+@import "./modal.css";
+@import "./drawer.css";
 
 /* Overlays */
-@import "flyout.css";
-@import "menu.css";
-@import "tooltip.css";
+@import "./flyout.css";
+@import "./menu.css";
+@import "./tooltip.css";
 
 /* Disclosure */
-@import "accordion.css";
+@import "./accordion.css";
 
 /* Feedback */
-@import "spinner.css";
-@import "skeleton.css";
-@import "busy.css";
-@import "progress.css";
-@import "status-bar.css";
+@import "./spinner.css";
+@import "./skeleton.css";
+@import "./busy.css";
+@import "./progress.css";
+@import "./status-bar.css";
 
 /* Display */
-@import "avatar.css";
-@import "key.css";
-@import "overline.css";
+@import "./avatar.css";
+@import "./key.css";
+@import "./chat.css";
+@import "./fab.css";
 
 /* Navigation */
-@import "navbar.css";
-@import "breadcrumb.css";
-@import "pagination.css";
-@import "tab.css";
-@import "scrollspy.css";
+@import "./navbar.css";
+@import "./breadcrumb.css";
+@import "./pagination.css";
+@import "./tab.css";
+@import "./scrollspy.css";
 
 /* Data */
-@import "table.css";
-@import "meter.css";
+@import "./table.css";
+@import "./meter.css";
+
+/* Composed controls — imported last so equal-specificity corner rules remain
+   later than the controls they group. */
+@import "./join.css";

package/src/css/components/join.css

@@ -91,7 +91,7 @@
 /* Keep an active focus ring above an adjacent hovered control. This matters
    on platforms where clicking a button does not move focus from the input. */
 .join > :is(:focus, :focus-within) {
-  z-index: 2;
+  z-index: 4;
 }
 
 /* An input's border must read as the "primary" edge against an attached
@@ -115,3 +115,10 @@
   outline: none;
   box-shadow: none;
 }
+
+/* A default outline action belongs to the composite field border. An explicit
+   intent still provides its own outline color — --intent is guaranteed-invalid
+   for a neutral button (the :where(.btn) boundary), so the fallback applies. */
+.join:has(> :is(.input, .textarea, .select)) > .btn.outline {
+  --btn-border-color: var(--intent, var(--border));
+}

package/src/css/components/key.css

@@ -6,6 +6,7 @@
  *
  * Visual twin of .prose kbd (prose.css) — keep the two recipes in sync.
  */
+/* @sync key-recipe */
 .key {
   display: inline-flex;
   align-items: center;
@@ -25,3 +26,4 @@
   white-space: nowrap;
   vertical-align: 0.08em;
 }
+/* @sync key-recipe */

package/src/css/components/menu.css

@@ -6,6 +6,9 @@
  *
  * Public hooks:
  * --menu-item-icon-size
+ *
+ * Intent: .menu-item consumes --intent as its text color, so intent classes
+ * (.danger, .success, …) tint an item without a per-intent variant.
  */
 
 .menu {
@@ -20,6 +23,13 @@
   margin: 0;
 }
 
+/* Intent boundary — inherited intents do not tint this component.
+   Local intent classes still win because :where() has zero specificity. */
+:where(.menu-item) {
+  --intent: initial;
+  --intent-fg: initial;
+}
+
 .menu-item {
   --menu-item-icon-size: 1.25em;
 
@@ -32,7 +42,7 @@
   border: 0;
   border-radius: var(--radius-sm);
   background: transparent;
-  color: var(--text);
+  color: var(--intent, var(--text));
   font: inherit;
   text-align: start;
   text-decoration: none;

package/src/css/components/meter.css

@@ -51,7 +51,10 @@
 @media (forced-colors: active) {
   .meter::-webkit-meter-optimum-value,
   .meter::-webkit-meter-suboptimum-value,
-  .meter::-webkit-meter-even-less-good-value,
+  .meter::-webkit-meter-even-less-good-value {
+    background: Highlight;
+  }
+
   .meter::-moz-meter-bar {
     background: Highlight;
   }

package/src/css/components/modal.css

@@ -315,3 +315,8 @@ html.has-modal-open.had-scrollbar {
   outline: 2px solid transparent;
   box-shadow: var(--focus-ring-shadow);
 }
+@media print {
+  dialog.modal[open] {
+    display: none !important;
+  }
+}

package/src/css/components/navbar.css

@@ -8,6 +8,14 @@
  * Internal:
  * --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. */
+:where(.navbar) {
+  --ui-bg: initial;
+  --ui-fg: initial;
+  --ui-border: initial;
+}
+
 .navbar {
   display: flex;
   flex-wrap: wrap;
@@ -16,17 +24,17 @@
   gap: var(--gap);
   padding-block: var(--space-30);
   padding-inline: var(--space-40);
-  border: var(--border-width) solid var(--border);
+  border: var(--border-width) solid var(--ui-border, var(--border));
   border-radius: var(--radius-lg);
-  background: var(--surface-raised);
-  color: var(--text);
+  background: var(--ui-bg, var(--surface-raised));
+  color: var(--ui-fg, var(--text));
 }
 
 .navbar-brand {
   display: inline-flex;
   align-items: center;
   gap: var(--space-20);
-  color: var(--text);
+  color: var(--ui-fg, var(--text));
   font-weight: var(--font-weight-bold);
   text-decoration: none;
 }
@@ -51,7 +59,7 @@
   min-block-size: var(--control-size-sm);
   padding-inline: var(--space-20);
   border-radius: var(--radius);
-  color: var(--text-muted);
+  color: var(--ui-fg, var(--text-muted));
   font-weight: var(--font-weight-medium);
   text-decoration: none;
 }

package/src/css/components/pagination.css

@@ -16,9 +16,20 @@
   margin: 0;
   padding: 0;
   list-style: none;
+
+  /* Arrows, page numbers, and truncation ellipses share one geometric
+     system: equal digit widths keep the row from re-flowing as numbers grow
+     (98 → 99 → 100). */
+  font-variant-numeric: tabular-nums;
 }
 
 .pagination .btn {
+  /* Every item gets the same min footprint; wider content (100, 1000,
+     text labels) grows past it naturally. The default 1em control padding
+     would let an icon-only arrow exceed the numbered items' footprint, so
+     the horizontal padding tightens here and the min size does the work. */
+  --btn-pad-x: var(--space-20);
+
   min-inline-size: var(--control-size);
 }
 

package/src/css/components/spinner.css

@@ -57,3 +57,8 @@
     transform: rotate(360deg);
   }
 }
+@media print {
+  .spinner {
+    display: none !important;
+  }
+}

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

@@ -70,3 +70,8 @@
   translate: 0 var(--space-20);
   pointer-events: none;
 }
+@media print {
+  .status-bar {
+    display: none !important;
+  }
+}

package/src/css/components/surface.css

@@ -40,3 +40,8 @@
       display var(--duration) allow-discrete;
   }
 }
+@media print {
+  .surface-backdrop {
+    display: none !important;
+  }
+}

package/src/css/components/table.css

@@ -64,3 +64,9 @@
 .table > :last-child > tr:last-child > * {
   border-block-end: 0;
 }
+
+/* Same compact vocabulary as .card.compact: one hook change, no selector
+   duplication. Density is padding only — typography never changes. */
+.table.compact {
+  --table-cell-pad: var(--space-20);
+}

package/src/css/components/tooltip.css

@@ -112,3 +112,8 @@
     display: none;
   }
 }
+@media print {
+  .tooltip {
+    display: none !important;
+  }
+}