actual-css 0.1.0 → 0.2.0

package/src/css/components/alert.css

@@ -22,7 +22,7 @@
 }
 
 .alert {
-  --alert-pad-block: var(--variant-pad-block, var(--space-4));
+  --alert-pad-block: var(--variant-pad-block, var(--space-3));
   --alert-pad-inline: var(--space-4);
   --alert-font-size: var(--variant-font-size, var(--font-size-md));
   --alert-icon-size: var(--variant-icon-size, 1.25rem);
@@ -72,7 +72,7 @@
 }
 
 @supports (color: color-mix(in oklch, red, white)) {
-  .alert:where(:not(.solid, .outline)) {
+  .alert:where(:not(.solid, .outline, .callout)) {
     /* @sync soft-recipe */
     --ui-bg: color-mix(in oklch, var(--surface) var(--soft-bg-mix), var(--intent, var(--neutral)));
     --ui-border: color-mix(
@@ -135,3 +135,89 @@
    readable color, and text on a Highlight surface would trigger Chromium's
    Canvas backplate (unreadable) — so .solid intentionally falls back to the
    default look. */
+
+/* Callout — neutral surface with an inset accent band on the leading edge.
+   The ::before pseudo is absolutely positioned and inset to respect the
+   outer border-radius, so it never needs its own radius. */
+.alert.callout {
+  --alert-bg: var(--surface-subtle);
+  --ui-bg: var(--alert-bg);
+  --ui-fg: var(--text);
+  --ui-border: var(--border);
+  position: relative;
+  padding-inline-start: calc(var(--alert-pad-inline) + var(--space-3));
+}
+
+.alert.callout::before {
+  content: "";
+  position: absolute;
+  inset-block: var(--space-2);
+  inset-inline-start: var(--space-2);
+  inline-size: 0.25rem;
+  border-radius: var(--radius-full);
+  background: var(--intent, var(--neutral));
+}
+
+/* Admonition — structured title/body anatomy with a tinted title band.
+   The root is layout-neutralized: no padding, no gap, no icon grid. */
+.alert.admonition {
+  padding: 0;
+  gap: 0;
+  display: block;
+  overflow: clip;
+}
+
+.alert-title {
+  padding-block: var(--alert-pad-block);
+  padding-inline: var(--alert-pad-inline);
+
+  @supports (color: color-mix(in oklch, red, white)) {
+    background: color-mix(
+      in oklch,
+      var(--surface) var(--soft-bg-mix),
+      var(--intent, var(--neutral))
+    );
+  }
+
+  @supports not (color: color-mix(in oklch, red, white)) {
+    background: var(--intent, var(--neutral));
+  }
+
+  border-start-start-radius: calc(var(--radius-lg) - var(--border-width));
+  border-start-end-radius: calc(var(--radius-lg) - var(--border-width));
+}
+
+.alert-title:where(summary) {
+  cursor: pointer;
+  user-select: none;
+  list-style: none;
+}
+
+.alert-title:where(summary)::-webkit-details-marker {
+  display: none;
+}
+
+.alert-title[aria-hidden] {
+  display: inline-flex;
+  gap: var(--space-2);
+  align-items: center;
+}
+
+.alert-body {
+  padding-block: var(--alert-pad-block);
+  padding-inline: var(--alert-pad-inline);
+  color: var(--text);
+}
+
+.alert-body > :first-child {
+  margin-block-start: 0;
+}
+
+.alert-body > :last-child {
+  margin-block-end: 0;
+}
+
+details.alert.admonition[open] .alert-title {
+  border-end-start-radius: 0;
+  border-end-end-radius: 0;
+}

package/src/css/components/badge.css

@@ -1,8 +1,9 @@
 /*
  * Badges for compact labels, counts, and state hints.
  *
- * Solid by default. Shared .soft/.outline variants stay available for quieter
- * tags without adding a badge-specific color API.
+ * Soft by default. .solid for counters and notification badges. The dot
+ * (.badge:empty) stays solid regardless — a soft dot is pointless.
+ * Shared .outline variant stays available.
  */
 /* Intent boundary — inherited intents do not tint this component.
    Local intent classes still win because :where() has zero specificity. */
@@ -22,9 +23,9 @@
   --badge-pad-x: 0.55em;
   --badge-font-size: var(--variant-compact-font-size, 0.8125rem);
   --badge-dot-size: 0.5rem;
-  --badge-bg: var(--ui-bg, var(--intent, var(--neutral)));
-  --badge-fg: var(--ui-fg, var(--intent-fg, var(--neutral-fg)));
-  --badge-border: var(--ui-border, transparent);
+  --badge-bg: var(--ui-bg, transparent);
+  --badge-fg: var(--ui-fg, var(--intent, var(--text)));
+  --badge-border: var(--ui-border, var(--intent, var(--border)));
   --badge-radius: 999px;
 
   display: inline-flex;
@@ -49,8 +50,31 @@
     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. */
+@supports (color: color-mix(in oklch, red, white)) {
+  .badge:where(:not(.solid, .outline)) {
+    /* @sync soft-recipe */
+    --badge-bg: color-mix(
+      in oklch,
+      var(--surface) var(--soft-bg-mix),
+      var(--intent, var(--neutral))
+    );
+    --badge-fg: var(--intent, var(--text));
+    --badge-border: color-mix(
+      in oklch,
+      var(--surface) var(--soft-border-mix),
+      var(--intent, var(--neutral))
+    );
+    /* @sync soft-recipe */
+  }
+}
+
 .badge:empty {
   --badge-size: var(--badge-dot-size);
+  --badge-bg: var(--intent, var(--neutral));
+  --badge-fg: var(--intent-fg, var(--neutral-fg));
+  --badge-border: transparent;
   padding: 0;
   border: 0;
   inline-size: var(--badge-size);
@@ -83,8 +107,7 @@
 }
 
 /* .solid/.soft/.outline are shared via variants.css, including the
-   .soft/.outline hover recipe (--ui-hover-bg). The --badge-* fallbacks make
-   .badge solid by default. */
+   .soft/.outline hover recipe (--ui-hover-bg). */
 @media (hover: hover) {
   :where(a.badge, button.badge):not(:where(:disabled, [aria-disabled="true"])):hover {
     background: var(--ui-hover-bg, var(--badge-bg));

package/src/css/components/busy.css

@@ -28,6 +28,7 @@
   }
 
   [aria-busy="true"]:not(.btn) > .spinner:last-child {
+    --spinner-size: 2rem;
     position: absolute;
     inset: 0;
     z-index: 2;

package/src/css/components/button.css

@@ -33,7 +33,6 @@
   --btn-border: var(--ui-border, var(--btn-default-border, transparent));
   --btn-radius: var(--radius);
   --btn-focus-color: var(--intent, var(--focus));
-  --btn-focus-outline-width: calc(var(--border-width) * 2);
   --btn-hover-bg: var(--ui-hover-bg, var(--btn-bg));
   --btn-hover-overlay: var(--hover-overlay, rgb(0 0 0 / 0.08));
 
@@ -41,7 +40,7 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  gap: 0.5em;
+  gap: 0.375em;
   min-block-size: var(--btn-min-size);
   padding-block: var(--space-2);
   padding-block: max(var(--space-1), calc((var(--btn-min-size) - 1lh) / 2));
@@ -57,7 +56,7 @@
   color: var(--btn-fg);
   font: inherit;
   font-size: var(--btn-font-size);
-  font-weight: var(--font-weight-strong);
+  font-weight: var(--font-weight-medium);
   line-height: 1;
   text-decoration: none;
   cursor: pointer;
@@ -133,14 +132,14 @@
 }
 
 .btn:focus-visible {
-  outline: var(--btn-focus-outline-width) solid var(--btn-focus-color);
-  outline-offset: var(--focus-outline-offset);
-  box-shadow: 0 0 0 3px var(--btn-focus-ring-color, var(--focus-ring));
+  outline: none;
+  box-shadow: 0 0 0 var(--focus-ring-width) var(--btn-focus-ring-color, var(--focus-ring));
 }
 
 .btn.link:focus-visible {
-  outline-color: currentColor;
+  outline: var(--focus-outline);
   outline-offset: 0.2em;
+  box-shadow: none;
 }
 
 .btn:disabled {
@@ -164,7 +163,6 @@ a.btn[aria-disabled="true"] {
 }
 
 .btn[aria-busy="true"] > .spinner {
-  --spinner-size: 1em;
   --spinner-width: 0.15em;
 }
 

package/src/css/components/flyout.css

@@ -186,7 +186,6 @@
   background: var(--surface-subtle);
   outline: var(--focus-outline);
   outline-offset: var(--focus-outline-offset);
-  box-shadow: var(--focus-ring-shadow);
 }
 
 :is(.flyout, .flyout :where(li))

package/src/css/components/join.css

@@ -95,8 +95,7 @@
    focus, and unsupported :has() browsers retain the control's normal ring. */
 .join:has(> :is(.input, .textarea, .select):focus-visible) {
   border-radius: var(--join-radius);
-  outline: var(--focus-outline);
-  outline-offset: var(--focus-outline-offset);
+  outline: none;
   box-shadow: var(--focus-ring-shadow);
 }
 

package/src/css/components/scrollspy.css

@@ -11,8 +11,8 @@
  * Progressive enhancement: on browsers that support :target-current,
  * this file enables the native target group and marks the active link.
  *
- * Falls back gracefully: links still work when IntersectionObserver or
- * :target-current is unavailable.
+ * Falls back gracefully: links still work when :target-current is unavailable
+ * and when the JavaScript enhancer is not loaded at all.
  */
 
 @supports selector(.scrollspy a:target-current) {

package/src/css/components/spinner.css

@@ -18,8 +18,8 @@
 }
 
 .spinner {
-  --spinner-size: 1.5rem;
-  --spinner-width: 2px;
+  --spinner-size: 1em;
+  --spinner-width: 0.125em;
   --spinner-track: currentColor;
   --spinner-value: transparent;
 
@@ -45,11 +45,11 @@
 }
 
 .spinner.sm {
-  --spinner-size: 1rem;
+  --spinner-size: 0.75em;
 }
 
 .spinner.lg {
-  --spinner-size: 3rem;
+  --spinner-size: 2rem;
   --spinner-width: 3px;
 }
 

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

@@ -10,10 +10,9 @@
  * the coloring via --intent / --intent-fg. status.js applies these as plain
  * classes on the target; it does not know their names or that they exist.
  *
- * Public API: .status-bar + [data-status], both required — status.js reads
- * the class name from js/selectors.js rather than hardcoding it, but still
- * needs it to scope its document-wide lookup away from unrelated elements
- * that carry their own generic `data-status`.
+ * CSS API:            .status-bar
+ * JS target contract:  [data-status][role="status"]
+ * Normally combined, but they describe separate concerns.
  */
 
 /* Intent boundary — inherited intents do not tint this component.

package/src/css/components/tab.css

@@ -72,6 +72,7 @@
 
 .tab:focus-visible {
   outline: var(--focus-outline);
+  outline-color: var(--focus);
   outline-offset: -2px;
   border-radius: var(--radius-sm) var(--radius-sm) 0 0;
 }

package/src/css/focus.css

@@ -11,3 +11,40 @@
     outline: none;
   }
 }
+
+/*
+ * Forced-colors focus — centralised so individual components do not need
+ * their own fallback.  The double :focus keeps specificity high enough
+ * (0,0,2,0) to beat a single :focus-visible; against a class selector like
+ * .input:focus-visible it ties, but this file loads last so it wins on
+ * source order.
+ *
+ * .choice-card and .join receive focus indirectly (:has on a wrapper that
+ * never matches :focus), so they are listed explicitly.
+ *
+ * .range is excluded from the rectangular fallback: its focus is drawn on
+ * the thumb pseudo-element, which is the manipulated surface.
+ *
+ * box-shadow: none is redundant when forced-color-adjust is auto, but safe
+ * when a component uses forced-color-adjust: none (e.g. checked switches /
+ * checkboxes).
+ */
+@media (forced-colors: active) {
+  :focus:focus-visible:not(.range),
+  .choice-card:has(:focus-visible),
+  .join:has(> :is(.input, .textarea, .select):focus-visible) {
+    outline: var(--focus-outline);
+    outline-offset: var(--focus-outline-offset);
+    box-shadow: none;
+  }
+
+  .range:focus-visible::-webkit-slider-thumb {
+    outline: var(--focus-outline);
+    outline-offset: var(--focus-outline-offset);
+  }
+
+  .range:focus-visible::-moz-range-thumb {
+    outline: var(--focus-outline);
+    outline-offset: var(--focus-outline-offset);
+  }
+}

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

@@ -63,8 +63,7 @@
 
 /* Focus ring on the label follows the hidden input's focus. */
 .choice-card:has(:focus-visible) {
-  outline: var(--focus-outline);
-  outline-offset: var(--focus-outline-offset);
+  outline: none;
   box-shadow: var(--focus-ring-shadow);
 }
 

package/src/css/forms/choice.css

@@ -156,8 +156,7 @@
 .check:focus-visible,
 .radio:focus-visible {
   --choice-border: var(--focus);
-  outline: var(--focus-outline);
-  outline-offset: var(--focus-outline-offset);
+  outline: none;
   box-shadow: var(--focus-ring-shadow);
 }
 

package/src/css/forms/control.css

@@ -71,8 +71,7 @@
 .textarea:focus-visible,
 .select:focus-visible {
   --control-border: var(--focus);
-  outline: var(--focus-outline);
-  outline-offset: var(--focus-outline-offset);
+  outline: none;
   box-shadow: var(--focus-ring-shadow);
 }
 
@@ -96,11 +95,3 @@
 .textarea::placeholder {
   color: var(--text-muted);
 }
-
-@media (forced-colors: active) {
-  .input:focus-visible,
-  .textarea:focus-visible,
-  .select:focus-visible {
-    box-shadow: none;
-  }
-}

package/src/css/forms/index.css

@@ -10,6 +10,7 @@
 @import "./select.css";
 @import "./custom-select.css";
 @import "./native.css";
+@import "./range.css";
 @import "./switch.css";
 @import "./validation.css";
 @import "./form-actions.css";

package/src/css/forms/native.css

@@ -1,21 +1,11 @@
 /*
- * Native-only control polish: file and range inputs that defeat most custom
- * styling, so the framework stays out of their way and just keeps them readable
- * and theme-aware.
+ * Native-only control polish: file input that mostly defeats custom styling,
+ * so the framework stays out of the way and just keeps it readable and
+ * theme-aware.
+ *
+ * Range has its own custom-styled file (range.css) so the focus ring can
+ * target the thumb pseudo-element rather than the rectangular CSS box.
  */
-/* Intent boundary — inherited intents do not tint this component.
-   Local intent classes still win because :where() has zero specificity. */
-:where(.range) {
-  /* @sync intent-boundary */
-  --intent: initial;
-  --intent-fg: initial;
-  --ui-bg: initial;
-  --ui-fg: initial;
-  --ui-border: initial;
-  --ui-hover-bg: initial;
-  /* @sync intent-boundary */
-}
-
 .file {
   color: var(--text-muted);
 }
@@ -48,21 +38,7 @@
   }
 }
 
-.range {
-  inline-size: 100%;
-  accent-color: var(--intent, var(--primary));
-}
-
-.file:focus-visible,
-.range:focus-visible {
-  outline: var(--focus-outline);
-  outline-offset: var(--focus-outline-offset);
+.file:focus-visible {
+  outline: none;
   box-shadow: var(--focus-ring-shadow);
 }
-
-@media (forced-colors: active) {
-  .file:focus-visible,
-  .range:focus-visible {
-    box-shadow: none;
-  }
-}

package/src/css/forms/range.css

@@ -0,0 +1,95 @@
+/*
+ * Range slider — custom-styled so the focus ring always targets the
+ * user-manipulated surface (the thumb) rather than the CSS box.
+ *
+ * appearance: none gives us full control over track and thumb; without it,
+ * pseudo-element rules for ::-webkit-slider-thumb and ::-moz-range-thumb
+ * are not reliably applied across browsers.
+ */
+
+/* Intent boundary — inherited intents do not tint this component.
+   Local intent classes still win because :where() has zero specificity. */
+:where(.range) {
+  /* @sync intent-boundary */
+  --intent: initial;
+  --intent-fg: initial;
+  --ui-bg: initial;
+  --ui-fg: initial;
+  --ui-border: initial;
+  --ui-hover-bg: initial;
+  /* @sync intent-boundary */
+}
+
+.range {
+  --range-thumb-size: 1.25rem;
+  --range-track-height: 0.25rem;
+  --range-thumb-bg: var(--intent, var(--primary));
+  --range-track-bg: var(--border);
+
+  appearance: none;
+  inline-size: 100%;
+  block-size: var(--range-thumb-size);
+  background: transparent;
+  cursor: pointer;
+}
+
+.range::-webkit-slider-runnable-track {
+  block-size: var(--range-track-height);
+  border-radius: var(--radius-full);
+  background: var(--range-track-bg);
+}
+
+.range::-moz-range-track {
+  block-size: var(--range-track-height);
+  border-radius: var(--radius-full);
+  background: var(--range-track-bg);
+}
+
+.range::-webkit-slider-thumb {
+  appearance: none;
+  inline-size: var(--range-thumb-size);
+  block-size: var(--range-thumb-size);
+  border-radius: var(--radius-full);
+  border: 0;
+  background: var(--range-thumb-bg);
+  margin-block-start: calc((var(--range-track-height) - var(--range-thumb-size)) / 2);
+  cursor: inherit;
+  transition: box-shadow var(--duration);
+}
+
+.range::-moz-range-thumb {
+  inline-size: var(--range-thumb-size);
+  block-size: var(--range-thumb-size);
+  border-radius: var(--radius-full);
+  border: 0;
+  background: var(--range-thumb-bg);
+  cursor: inherit;
+  transition: box-shadow var(--duration);
+}
+
+.range:focus-visible {
+  outline: none;
+}
+
+/*
+ * The 1px surface-coloured separator keeps the ring visually distinct from
+ * the small, coloured thumb — unlike a full-size input where the same gap
+ * would read as an unwanted void.
+ */
+.range:focus-visible::-webkit-slider-thumb {
+  box-shadow:
+    0 0 0 1px var(--surface),
+    0 0 0 calc(1px + var(--focus-ring-width)) var(--focus-ring);
+}
+
+.range:focus-visible::-moz-range-thumb {
+  box-shadow:
+    0 0 0 1px var(--surface),
+    0 0 0 calc(1px + var(--focus-ring-width)) var(--focus-ring);
+}
+
+.range:disabled {
+  --range-thumb-bg: var(--text-subtle);
+  cursor: not-allowed;
+  opacity: var(--disabled-opacity);
+}

package/src/css/forms/switch.css

@@ -86,8 +86,7 @@
 
 .switch:focus-visible {
   --switch-border: var(--focus);
-  outline: var(--focus-outline);
-  outline-offset: var(--focus-outline-offset);
+  outline: none;
   box-shadow: var(--focus-ring-shadow);
 }
 

package/src/css/optional/scroller.css

@@ -16,6 +16,12 @@
   scrollbar-width: thin;
 }
 
+/* Opt-in gutter: reserves space so the layout does not shift when
+   the scrollbar appears. Use alongside a known-overflow container. */
+.scroller.stable-gutter {
+  scrollbar-gutter: stable;
+}
+
 .scroller::-webkit-scrollbar {
   width: var(--scroller-size);
   height: var(--scroller-size);

package/src/css/theme.css

@@ -61,11 +61,11 @@
 
   /* Lines and focus */
   --border: hsl(260 15% 88%);
-  --focus: var(--primary);
+  --focus: var(--neutral);
   /* Pre-color-mix fallback only — superseded below by a derivation from
-     --focus so overriding --primary/--focus never leaves a stale ring. */
-  --focus-ring: hsl(268 32% 33% / 0.22);
-  --focus-ring-shadow: 0 0 0 3px var(--focus-ring);
+     --focus so overriding --neutral/--focus never leaves a stale ring. */
+  --focus-ring: hsl(258 7% 43% / 0.3);
+  --focus-ring-shadow: 0 0 0 var(--focus-ring-width) var(--focus-ring);
   --hover-overlay: hsl(260 20% 10% / 0.04);
 
   /* Radius scale — themes may override the whole scale (e.g. [data-theme="square"]) */
@@ -106,7 +106,7 @@
   :root,
   [data-theme="light"],
   [data-theme="dark"] {
-    --focus-ring: color-mix(in oklch, var(--focus) 22%, transparent);
+    --focus-ring: color-mix(in oklch, var(--focus) 30%, transparent);
   }
 }
 
@@ -146,7 +146,7 @@
     --text-subtle: light-dark(hsl(258 7% 57%), hsl(258 7% 54%));
 
     --border: light-dark(hsl(260 15% 88%), hsl(262 12% 24%));
-    --focus-ring: light-dark(hsl(268 32% 33% / 0.22), hsl(268 42% 76% / 0.28));
+    --focus-ring: light-dark(hsl(258 7% 43% / 0.3), hsl(258 10% 72% / 0.28));
     --hover-overlay: light-dark(hsl(260 20% 10% / 0.04), hsl(0 0% 100% / 0.06));
     --shadow-color: light-dark(hsl(260 25% 10%), hsl(262 40% 2%));
   }
@@ -156,7 +156,7 @@
   :root,
   [data-theme="light"] {
     --focus-ring: light-dark(
-      color-mix(in oklch, var(--focus) 22%, transparent),
+      color-mix(in oklch, var(--focus) 30%, transparent),
       color-mix(in oklch, var(--focus) 28%, transparent)
     );
   }
@@ -166,7 +166,7 @@
   :root,
   [data-theme="light"],
   [data-theme="dark"] {
-    --focus-outline: calc(var(--border-width) * 2) solid Highlight;
+    --focus-outline-color: Highlight;
     --focus-ring-shadow: none;
 
     --backdrop-fill: Canvas;
@@ -179,7 +179,7 @@
   [data-theme="dark"] {
     --border-width: 2px;
     --focus-outline-offset: 3px;
-    --focus-ring-shadow: 0 0 0 4px var(--focus-ring);
+    --focus-ring-width: 4px;
     --text-muted: var(--text);
     --text-subtle: var(--text);
   }