actual-css 0.3.1 → 0.4.0

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

@@ -133,7 +133,7 @@
 
   .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))
     );
@@ -149,6 +149,9 @@
    the overlay darkening for solid/soft is .btn-specific. */
 .btn:not(:where(:disabled, [aria-disabled="true"])):hover {
   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);
 }
 
@@ -249,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;
@@ -262,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
@@ -47,6 +49,17 @@
   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;
 }
@@ -69,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;
 }
@@ -126,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/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;
+  }
+}

package/src/css/core/index.css

@@ -0,0 +1,9 @@
+/* Core — the minimal Actual language. Every module depends on this order. */
+@import "./reset.css";
+@import "./tokens.css";
+@import "./theme.css";
+@import "./base.css";
+@import "./intents.css";
+@import "./variants.css";
+@import "./focus.css";
+@import "./print.css";

package/src/css/core/print.css

@@ -0,0 +1,18 @@
+@media print {
+  :root,
+  body {
+    /* Save some ink in dark mode */
+    color-scheme: light;
+    background: #fff;
+    color: #000;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    break-after: avoid;
+  }
+}

package/src/css/{theme.css → core/theme.css}

@@ -101,6 +101,16 @@
   --focus-ring-shadow: 0 0 0 var(--focus-ring-width) var(--focus-ring);
 }
 
+/* Native platform controls (checkbox, radio, range, progress) that are not
+   restyled by a component class still follow the theme accent. Declared on
+   every island: accent-color inherits as a computed value, so islands must
+   recompute it from their own --primary (same resolution rule as above).
+   Unsupported browsers ignore it; forced-colors keeps browser control. */
+:root,
+[data-theme] {
+  accent-color: var(--primary);
+}
+
 /* Tone subsystem — fixed-backdrop foreground for components placed over media
    or other surfaces outside the theme token stack. Use data-theme islands for
    full dark/light subtree inversion. */
@@ -115,13 +125,13 @@
 /* Focus ring derivation — color-mix tier. Runs whether or not light-dark()
    is also supported, so it covers the color-mix-without-light-dark browser
    tier on its own; the light-dark block below refines it further with the
-   light/dark alpha split once both features are available. Deriving from
-   --focus (not a literal) means overriding --primary/--focus, in the
-   default theme or any custom one, keeps the ring in sync automatically. */
+   light/dark alpha split once both features are available. Declared on every
+   [data-theme] island (not just the built-in light/dark pair) so custom
+   islands recolor the ring for free; a preset that re-declares --focus-ring
+   later in source order intentionally pins its own ring instead. */
 @supports (color: color-mix(in oklch, red, white)) {
   :root,
-  [data-theme="light"],
-  [data-theme="dark"] {
+  [data-theme] {
     --focus-ring: color-mix(in oklch, var(--focus) 30%, transparent);
   }
 }
@@ -170,7 +180,7 @@
 
 @supports (color: color-mix(in oklch, red, white)) and (color: light-dark(red, blue)) {
   :root,
-  [data-theme="light"] {
+  [data-theme] {
     --focus-ring: light-dark(
       color-mix(in oklch, var(--focus) 30%, transparent),
       color-mix(in oklch, var(--focus) 28%, transparent)
@@ -180,8 +190,7 @@
 
 @media (forced-colors: active) {
   :root,
-  [data-theme="light"],
-  [data-theme="dark"] {
+  [data-theme] {
     --focus-outline-color: Highlight;
     --focus-ring-shadow: none;
 
@@ -191,8 +200,9 @@
 
 @media (prefers-contrast: more) {
   :root,
-  [data-theme="light"],
-  [data-theme="dark"] {
+  /* The repeated attribute intentionally outranks single-attribute preset
+     palettes, including a preset stylesheet loaded after the core. */
+  [data-theme][data-theme] {
     --border-width: 2px;
     --focus-outline-offset: 3px;
     --focus-ring-width: 4px;

package/src/css/{tokens.css → core/tokens.css}

@@ -83,13 +83,21 @@
 
   /* Controls — inputs and buttons share --control-size so heights always match.
      .sm/.lg (variants.css) switch --control-size; --control-font-size stays
-     at its baseline because density does not change typography. */
+     at its baseline because density does not change typography.
+
+     Inline choices (checkbox, radio, switch) are typographic, not field-sized:
+     they sit on a line of text, so they follow --control-font-size through
+     --choice-control-size instead of --control-size. Being an em value in
+     :root is deliberate — an unregistered custom property resolves its units
+     at the element that consumes it, so one declaration tracks whatever font
+     size the choice actually renders at. */
   --control-size-sm: 2rem;
   --control-size-md: 2.375rem;
   --control-size-lg: 2.75rem;
   --control-size: var(--control-size-md);
   --control-pad-x: 1em;
   --control-font-size: var(--font-size-md);
+  --choice-control-size: 1.125em;
   --disabled-opacity: 0.65;
 }
 
@@ -118,6 +126,10 @@
   --soft-bg-mix: 88%;
   --soft-border-mix: 65%;
   --soft-hover-alpha: 12%;
+  /* Soft foreground: the share of raw intent in soft text. 100% keeps the
+     pure intent color; lower values rebate it toward --text, which vivid or
+     light intent palettes need to stay legible on their own soft surface. */
+  --soft-fg-mix: 100%;
 
   /* Shared icon assets. Override these URLs when a strict CSP disallows data:. */
   --icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%238a8594' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
@@ -142,7 +154,8 @@
 }
 
 @media (forced-colors: active) {
-  :root {
+  :root,
+  [data-theme] {
     --state-selected: Highlight;
     --state-selected-fg: HighlightText;
     --state-disabled: GrayText;

package/src/css/{variants.css → core/variants.css}

@@ -85,12 +85,13 @@
 @supports (color: color-mix(in oklch, red, white)) {
   .soft {
     /* @sync soft-recipe */
-    --ui-bg: color-mix(in oklch, var(--surface) var(--soft-bg-mix), var(--intent, var(--neutral)));
+    --ui-bg: color-mix(in oklab, var(--surface) var(--soft-bg-mix), var(--intent, var(--neutral)));
     --ui-border: color-mix(
-      in oklch,
+      in oklab,
       var(--surface) var(--soft-border-mix),
       var(--intent, var(--neutral))
     );
+    --ui-fg: color-mix(in oklab, var(--text), var(--intent, var(--text)) var(--soft-fg-mix));
     /* @sync soft-recipe */
   }
 

package/src/css/effects/index.css

@@ -0,0 +1,2 @@
+/* Effects — purely visual enrichments. */
+@import "./aura.css";

package/src/css/forms/base.css

@@ -0,0 +1,8 @@
+/* Forms base — the ordinary native controls bundle. */
+@import "./form.css";
+@import "./control.css";
+@import "./choice.css";
+@import "./select.css";
+@import "./native.css";
+@import "./validation.css";
+@import "./form-actions.css";

package/src/css/forms/choice-card.css

@@ -85,7 +85,7 @@
 /* Subtle background tint on checked — modern browsers only */
 @supports (color: color-mix(in oklch, red, white)) {
   .choice-card:has(:checked) {
-    --choice-card-bg: color-mix(in oklch, var(--surface) 96%, var(--intent, var(--primary)));
+    --choice-card-bg: color-mix(in oklab, var(--surface) 96%, var(--intent, var(--primary)));
   }
 }
 
@@ -139,18 +139,19 @@
 
   .choice-card:has(:checked) {
     --choice-card-border: Highlight;
-    /* Pin the background: with forced-color-adjust: none the color-mix tint
-       above would actually render, uncontrolled in high-contrast themes. */
+    /* Pin the selected surface to the system canvas: only the essential
+       marker pseudos opt out of remapping, never the interactive card host. */
     --choice-card-bg: Canvas;
-    forced-color-adjust: none;
   }
 
   .choice-card:has(:checked)::before {
     background: Highlight;
     box-shadow: 0 0 0 2px Canvas;
+    forced-color-adjust: none;
   }
 
   .choice-card:has(:checked)::after {
     background: HighlightText;
+    forced-color-adjust: none;
   }
 }