actual-css 0.3.1 → 0.4.1

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/list.css

@@ -0,0 +1,83 @@
+/*
+ * Application list — repeated rows with optional leading and trailing regions.
+ * Content determines the number of lines; the component only owns the row
+ * geometry, dividers, and supporting-text treatment.
+ *
+ * Public hooks:
+ * --list-item-min-size
+ * --list-item-pad-block
+ * --list-item-pad-inline
+ * --list-item-gap
+ * --list-divider
+ */
+.list {
+  --list-item-min-size: var(--control-size-lg);
+  --list-item-pad-block: var(--space-30);
+  --list-item-pad-inline: 0;
+  --list-item-gap: var(--gap);
+  --list-divider: var(--border-width) solid var(--border);
+
+  display: grid;
+  gap: 0;
+  margin: 0;
+  padding: 0;
+  border-block-start: var(--list-divider);
+  list-style: none;
+}
+
+.list > li {
+  margin: 0;
+}
+
+.list > :where(.list-item),
+.list > li > .list-item {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  align-items: center;
+  gap: var(--list-item-gap);
+  min-block-size: var(--list-item-min-size);
+  padding-block: var(--list-item-pad-block);
+  padding-inline: var(--list-item-pad-inline);
+}
+
+.list > .list-item + .list-item,
+.list > li + li {
+  border-block-start: var(--list-divider);
+}
+
+a.list-item {
+  color: inherit;
+  text-decoration: none;
+}
+
+a.list-item:hover {
+  background: var(--surface-subtle);
+}
+
+.list-item-content {
+  min-inline-size: 0;
+}
+
+.list-item-title,
+.list-item-text {
+  display: block;
+  margin: 0;
+}
+
+.list-item-text {
+  color: var(--text-muted);
+  font-size: var(--font-size-sm);
+  overflow-wrap: anywhere;
+}
+
+.list-item-trailing {
+  justify-self: end;
+  min-inline-size: 0;
+}
+
+@media print {
+  .list > :where(.list-item),
+  .list > li > .list-item {
+    break-inside: avoid;
+  }
+}

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;
@@ -116,10 +126,3 @@
   border: 0;
   border-block-start: var(--border-width) solid var(--border);
 }
-
-@media (forced-colors: active) {
-  .menu-item:focus-visible {
-    outline: var(--border-width) solid ButtonText;
-    outline-offset: -1px;
-  }
-}

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

@@ -239,23 +239,6 @@ html.has-modal-open.had-scrollbar {
   }
 }
 
-@media (forced-colors: active) {
-  dialog.modal {
-    border-color: ButtonText;
-    background: Canvas;
-    color: CanvasText;
-    box-shadow: none;
-  }
-
-  dialog.modal::backdrop {
-    background: Canvas;
-  }
-
-  .dialog-icon {
-    border: var(--border-width) solid CanvasText;
-  }
-}
-
 /* 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
@@ -315,3 +298,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

@@ -67,6 +67,7 @@
 .nav-link:where([aria-current]:not([aria-current="false"])) {
   background: var(--surface-subtle);
   color: var(--text);
+  font-weight: var(--font-weight-bold);
 }
 
 .nav-link:hover {
@@ -74,7 +75,9 @@
   color: var(--text);
 }
 
-/* Nav list — a vertical navigation list. Used by .drawer for stacked links. */
+/* 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;
   --gap: var(--space-20);
@@ -88,18 +91,6 @@
   margin: 0;
 }
 
-@media (forced-colors: active) {
-  .nav-link:where([aria-current]:not([aria-current="false"])) {
-    outline: var(--border-width) solid Highlight;
-    background: Highlight;
-    color: HighlightText;
-    forced-color-adjust: none;
-  }
-
-  .nav-link:hover:not(:where([aria-current]:not([aria-current="false"]))) {
-    outline: var(--border-width) solid ButtonText;
-    outline-offset: 2px;
-    background: Canvas;
-    color: CanvasText;
-  }
+.nav-list .nav-link {
+  inline-size: 100%;
 }

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/rating.css

@@ -0,0 +1,101 @@
+/*
+ * Rating — integer star rating drawn on native radio inputs.
+ *
+ * The checked radio remains the functional baseline. :has() progressively
+ * fills preceding stars without reversing DOM or keyboard order. Forced
+ * colors restores the platform radio presentation.
+ *
+ * Public hooks:
+ * --rating-size
+ * --rating-gap
+ * --rating-color
+ * --rating-empty
+ * --rating-star
+ */
+:where(.rating) {
+  --intent: initial;
+}
+
+.rating {
+  --rating-size: 1.25rem;
+  --rating-gap: 0.1rem;
+  --rating-color: var(--intent, var(--warning));
+  --rating-empty: var(--border);
+  --rating-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='2 2 16 16'%3E%3Cpath d='M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 0 0 .95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 0 0-.364 1.118l1.07 3.292c.3.922-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 0 0-1.175 0l-2.8 2.034c-.783.57-1.838-.196-1.539-1.118l1.07-3.292a1 1 0 0 0-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 0 0 .951-.69l1.07-3.292Z'/%3E%3C/svg%3E");
+
+  display: inline-flex;
+  gap: 0;
+  color: var(--rating-color);
+}
+
+.rating > input[type="radio"] {
+  appearance: none;
+  flex: 0 0 auto;
+  inline-size: calc(var(--rating-size) + var(--rating-gap));
+  block-size: var(--rating-size);
+  margin: 0;
+  border: 0;
+  background: var(--rating-empty);
+  /* Contiguous radio boxes own hit-testing; the centered mask preserves the
+     star's proportions while leaving a purely visual gap between values. */
+  -webkit-mask: var(--rating-star) center / var(--rating-size) var(--rating-size) no-repeat;
+  mask: var(--rating-star) center / var(--rating-size) var(--rating-size) no-repeat;
+  cursor: pointer;
+  transition: background-color var(--duration);
+}
+
+.rating > input[type="radio"]:checked {
+  background: var(--rating-color);
+}
+
+.rating > input[type="radio"]:disabled {
+  cursor: not-allowed;
+  opacity: var(--disabled-opacity);
+}
+
+.rating > input[type="radio"]:focus-visible {
+  outline: var(--focus-outline);
+  outline-offset: var(--focus-outline-offset);
+  background: var(--rating-color);
+}
+
+/* Browsers without :has() still show the selected native radio as one filled
+   star. The enhancement only adds cumulative checked and hover previews. */
+@supports selector(:has(*)) {
+  .rating > input[type="radio"]:has(~ input[type="radio"]:checked) {
+    background: var(--rating-color);
+  }
+
+  @media (hover: hover) {
+    .rating > input[type="radio"]:not(:disabled):hover,
+    .rating > input[type="radio"]:has(~ input[type="radio"]:not(:disabled):hover) {
+      background: var(--rating-color);
+    }
+
+    /* A hovered value previews exactly that value: later stars are emptied,
+       including a previously checked star beyond the pointer. */
+    .rating > input[type="radio"]:not(:disabled):hover ~ input[type="radio"] {
+      background: var(--rating-empty);
+    }
+  }
+}
+
+.rating.sm {
+  --rating-size: 1rem;
+}
+
+.rating.lg {
+  --rating-size: 1.75rem;
+}
+
+@media (forced-colors: active) {
+  .rating > input[type="radio"] {
+    appearance: auto;
+    inline-size: auto;
+    block-size: auto;
+    background: Canvas;
+    -webkit-mask: none;
+    mask: none;
+    opacity: 1;
+  }
+}

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/steps.css

@@ -0,0 +1,122 @@
+/*
+ * Steps — semantic ordered-list progression. One intrinsic layout: items fill
+ * the row when they fit and hold a minimum width otherwise, so the sequence
+ * scrolls horizontally only when it genuinely cannot fit. No breakpoint decides
+ * this — the item minimum tracks the real content, not an arbitrary width.
+ *
+ * Markers come from the list counter; state stays in .complete and
+ * aria-current="step", so the component needs no runtime.
+ *
+ * Public hooks:
+ * --step-size
+ * --step-min
+ * --step-gap
+ * --step-line-size
+ * --step-marker-radius
+ * --step-complete-mark
+ * --step-connector
+ *
+ * Internal:
+ * --step-marker-bg
+ * --step-marker-border
+ * --step-marker-fg
+ * --step-line
+ */
+.steps {
+  --step-size: 1.75rem;
+  --step-min: 7rem;
+  --step-gap: var(--space-20);
+  --step-line-size: var(--border-width);
+  --step-marker-bg: var(--surface);
+  --step-marker-border: var(--border);
+  --step-marker-fg: var(--text-muted);
+  --step-marker-radius: var(--radius-full);
+  --step-line: var(--border);
+
+  counter-reset: actual-step;
+  display: flex;
+  inline-size: 100%;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  /* Fill when it fits, scroll when it cannot: items never shrink below
+     --step-min, so labels keep a readable width and the sequence scrolls
+     horizontally instead of squishing. overscroll-behavior keeps the scroll
+     from chaining to the page. */
+  overflow-x: auto;
+  overscroll-behavior-inline: contain;
+}
+
+.steps > li {
+  position: relative;
+  display: grid;
+  flex: 1 0 var(--step-min);
+  grid-template-rows: var(--step-size) auto;
+  gap: var(--step-gap);
+  justify-items: center;
+  min-inline-size: max(var(--step-size), var(--step-min));
+  color: var(--text-muted);
+  text-align: center;
+  counter-increment: actual-step;
+}
+
+.steps > li::before {
+  content: counter(actual-step);
+  position: relative;
+  z-index: 1;
+  display: inline-grid;
+  place-items: center;
+  inline-size: var(--step-size);
+  block-size: var(--step-size);
+  border: var(--border-width) solid var(--step-marker-border);
+  border-radius: var(--step-marker-radius);
+  background: var(--step-marker-bg);
+  color: var(--step-marker-fg);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-strong);
+  line-height: 1;
+}
+
+.steps > li::after {
+  content: "";
+  position: absolute;
+  inset-block-start: calc((var(--step-size) - var(--step-line-size)) / 2);
+  inset-inline-start: calc(50% + var(--step-size) / 2);
+  inline-size: calc(100% - var(--step-size));
+  block-size: var(--step-line-size);
+  /* A custom property resolves its var() before inheritance, so a default
+     --step-connector: var(--step-line) on .steps would freeze the parent line
+     color and a .complete child's connector would never follow its own line.
+     Falling back to the local --step-line here keeps each connector in sync;
+     an explicit --step-connector still wins when the author sets one. */
+  background: var(--step-connector, var(--step-line));
+}
+
+.steps > li:last-child::after {
+  content: none;
+}
+
+.steps > :is(.complete, [aria-current="step"]) {
+  --step-marker-bg: var(--state-selected);
+  --step-marker-border: var(--state-selected);
+  --step-marker-fg: var(--state-selected-fg);
+
+  color: var(--text);
+}
+
+/* Thicker border is the selected affordance in every mode — structural, and it
+   never competes with the outline channel owned by focus. */
+.steps > :is(.complete, [aria-current="step"])::before {
+  border-width: calc(var(--border-width) * 2);
+}
+
+.steps > .complete {
+  --step-line: var(--state-selected);
+}
+
+/* A finished step may replace its number with a mark (e.g. a check glyph):
+   --step-complete-mark accepts any content value and falls back to the
+   counter, so existing numbered steppers are unchanged. */
+.steps > .complete::before {
+  content: var(--step-complete-mark, counter(actual-step));
+}

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/tab.css

@@ -33,13 +33,14 @@
 }
 
 .tab {
+  /* Positioning context for the selected indicator pseudo. */
+  position: relative;
   display: inline-flex;
   align-items: center;
   gap: var(--tab-gap, 0.375em);
   min-block-size: var(--control-size);
   padding-inline: var(--space-30);
   border: 0;
-  border-block-end: 2px solid transparent;
   border-radius: 0;
   background: transparent;
   color: var(--text-muted);
@@ -51,8 +52,6 @@
 
 .tabs[aria-orientation="vertical"] .tab {
   justify-content: flex-start;
-  border-block-end: 0;
-  border-inline-end: 2px solid transparent;
   padding-inline-end: var(--space-40);
 }
 
@@ -73,28 +72,27 @@
 }
 
 .tab[aria-selected="true"] {
-  border-block-end-color: var(--intent, var(--state-selected));
   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);
 }
 
-.tabs[aria-orientation="vertical"] .tab[aria-selected="true"] {
-  border-block-end-color: transparent;
-  border-inline-end-color: var(--intent, var(--state-selected));
+/* 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 {
+  content: "";
+  position: absolute;
+  inset-inline: 0;
+  inset-block-end: 0;
+  border-block-end: 2px solid currentColor;
 }
 
-@media (forced-colors: active) {
-  .tab:hover:not(:where(:disabled, [aria-disabled="true"])) {
-    text-decoration: underline;
-    text-underline-offset: 0.18em;
-  }
-
-  .tab[aria-selected="true"] {
-    border-block-end-color: Highlight;
-    color: Highlight;
-  }
-
-  .tabs[aria-orientation="vertical"] .tab[aria-selected="true"] {
-    border-block-end-color: transparent;
-    border-inline-end-color: Highlight;
-  }
+.tabs[aria-orientation="vertical"] .tab[aria-selected="true"]::after {
+  inset-block: 0;
+  inset-inline: auto 0;
+  border-block-end: 0;
+  border-inline-end: 2px solid currentColor;
 }

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

@@ -24,6 +24,7 @@
   max-inline-size: min(24rem, calc(var(--viewport-inline) - 2rem));
   padding: 0.25em 0.6em;
   border-radius: var(--radius-sm);
+  border: var(--border-width) solid transparent;
   background: var(--tooltip-bg);
   color: var(--tooltip-fg);
   font-size: var(--font-size-xs);
@@ -102,13 +103,8 @@
   clip-path: polygon(0 50%, 100% 0, 100% 100%);
 }
 
-@media (forced-colors: active) {
+@media print {
   .tooltip {
-    --tooltip-bg: Canvas;
-    --tooltip-fg: CanvasText;
-  }
-
-  .tooltip::before {
-    display: none;
+    display: none !important;
   }
 }

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

@@ -15,12 +15,4 @@
   :focus:not(:focus-visible) {
     outline: none;
   }
-
-  /* Pointer focus must still signal in high-contrast mode, where the shared
-     box-shadow rings are disabled (--focus-ring-shadow: none). */
-  @media (forced-colors: active) {
-    :focus:not(:focus-visible) {
-      outline: var(--focus-outline);
-    }
-  }
 }

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;
+  }
+}