actual-css 0.9.2 → 0.11.0

package/src/css/components/table.css

@@ -6,6 +6,12 @@
  * .table-wrap provides the scroll container and outer chrome; .table owns row
  * and cell rules. Tokens are sourced from the shared scale.
  *
+ * Responsive strategy is horizontal overflow: the wrap scrolls, the table
+ * keeps its columns. Restructuring rows into cards would destroy the
+ * column scanability tables exist for, and needs data-label duplication
+ * because CSS cannot join a cell to its header — that representation choice
+ * belongs to the application, not the framework.
+ *
  * Public hooks:
  * --table-min
  * --table-cell-pad

package/src/css/components/tooltip.css

@@ -22,7 +22,7 @@
  */
 .tooltip {
   --tooltip-bg: var(--surface-solid);
-  --tooltip-fg: var(--surface);
+  --tooltip-fg: var(--surface-solid-fg);
   --tooltip-arrow-size: 5px;
 
   position: fixed;

package/src/css/core/focus.css

@@ -3,9 +3,25 @@
    pointer/mouse focus and interactive components layer their ring on top.
 
    Invariant: an interactive component must never rely on box-shadow alone
-   for its keyboard focus indicator. Components that remove the native
-   outline on :focus-visible replace it with a transparent outline — invisible
-   normally, forced to the system focus color under forced-colors. */
+   for its keyboard focus indicator; forced colors keep outlines and drop
+   shadows.
+
+   Two contracts share the job, both --focus-ring-width wide. Text-like
+   elements, whose ink is the thing being focused (links, summary, .nav-link,
+   .menu-item, breadcrumb links, .navbar-brand), declare no outline and take
+   the generic fallback below: a currentColor line that follows whatever the
+   application painted. Boxed components, with a fill or border of their own,
+   draw the themed ring instead — a solid line in --focus: inset on fields
+   (inside their border box), offset by --focus-outline-offset on discrete
+   actions. The color never derives from an intent or a local
+   surface — the theme guarantees --focus at 3:1 against both --surface and
+   --surface-solid, so one token reads on the page, on a solid band and on
+   any nested surface.
+
+   Documented exception: an invalid field focuses in --form-invalid-border
+   (danger), so the error stays visible at the point of correction. The border
+   carries the same hook; report:theme-contrast measures that line at 3:1
+   against the field's background alongside --focus. */
 :focus {
   outline: var(--focus-outline);
   outline-offset: var(--focus-outline-offset);

package/src/css/core/theme.css

@@ -7,6 +7,8 @@
  * Shadow color, Focus ring derivation.
  * Derived: "Theme-derived aliases", Tone subsystem, Backdrop fill — reference
  * other tokens; hard-coded overrides on a custom theme will break the intent.
+ * Exception: --surface-opaque and --surface-solid-fg are public; a theme with
+ * translucent surfaces overrides them with opaque values.
  * Internal: --hgroup-gap.
  */
 :root {
@@ -72,10 +74,10 @@
 
   /* Lines and focus */
   --border: hsl(260 15% 88%);
-  --focus: var(--neutral);
-  /* Pre-color-mix fallback only — superseded below by a derivation from
-     --focus so overriding --neutral/--focus never leaves a stale ring. */
-  --focus-ring: hsl(258 7% 43% / 0.3);
+  /* A primary-hued mid-tone on purpose, one value for both schemes: focus
+     lines must hold 3:1 against --surface and --surface-solid alike (page,
+     fields, a solid band), which rules out the primary itself. */
+  --focus: hsl(268 30% 55%);
   --hover-overlay: hsl(260 20% 10% / 0.04);
 
   /* Radius scale — themes may override the whole scale (e.g. [data-theme="square"]) */
@@ -98,7 +100,12 @@
   --heading: var(--text);
   --selection-bg: var(--primary);
   --selection-fg: var(--primary-fg);
-  --focus-ring-shadow: 0 0 0 var(--focus-ring-width) var(--focus-ring);
+  /* Surface roles that must stay opaque when a theme paints translucent
+     surfaces; both equal --surface on an opaque palette. --surface-opaque
+     hides or separates what is painted beneath a ring, separator or marker —
+     never a fill. --surface-solid-fg is the ink on --surface-solid. */
+  --surface-opaque: var(--surface);
+  --surface-solid-fg: var(--surface);
 }
 
 /* Soft foreground hooks — the soft ink is the intent rebated toward the local
@@ -107,18 +114,17 @@
    default theme: a custom property bakes its var() references where it is
    declared, so these resolve against root/light/dark tokens on every boundary.
    Presets and custom islands keep their --soft-fg-mix / raw-intent ink unless
-   they declare hooks themselves — :where() keeps this reset from outranking a
-   theme's own declaration (e.g. brutalist's 45% soft-fg-mix). */
-:where([data-theme]:not([data-theme="light"]):not([data-theme="dark"])) {
-  --primary-soft-fg: initial;
-  --secondary-soft-fg: initial;
-  --success-soft-fg: initial;
-  --warning-soft-fg: initial;
-  --danger-soft-fg: initial;
-  --neutral-soft-fg: initial;
-}
-
-:root,
+   they declare hooks themselves.
+
+   Why :where(:root) and why the reset comes second: both rules match when a
+   custom theme sits on <html> itself. A bare :root is (0,1,0) and would
+   outrank the zero-specificity reset, so the same theme resolved a calibrated
+   Ink & Terra ink on <html data-theme="brand"> and the raw --soft-fg-mix ink
+   on <div data-theme="brand"> — one attribute, two soft palettes. Levelling
+   both rules to zero specificity makes source order the tiebreaker, so the
+   reset must stay below. Zero specificity is also what lets a theme declare
+   its own hooks (e.g. brutalist's 45% soft-fg-mix) and win at (0,1,0). */
+:where(:root),
 [data-theme="light"],
 [data-theme="dark"] {
   --secondary-soft-fg: color-mix(in oklab, var(--text) 10%, var(--secondary) 90%);
@@ -128,6 +134,15 @@
   --neutral-soft-fg: color-mix(in oklab, var(--text) 20%, var(--neutral) 80%);
 }
 
+:where([data-theme]:not([data-theme="light"]):not([data-theme="dark"])) {
+  --primary-soft-fg: initial;
+  --secondary-soft-fg: initial;
+  --success-soft-fg: initial;
+  --warning-soft-fg: initial;
+  --danger-soft-fg: initial;
+  --neutral-soft-fg: initial;
+}
+
 /* 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
@@ -149,20 +164,6 @@
   --tone-fg: var(--text);
 }
 
-/* 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. 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] {
-    --focus-ring: color-mix(in oklch, var(--focus) 30%, transparent);
-  }
-}
-
 /* Auto dark mode via light-dark(). Resolves based on the element's color-scheme:
     :root (light dark) follows the OS, [data-theme="light"] forces light,
     [data-theme="dark"] forces dark by overriding color-scheme.
@@ -199,22 +200,11 @@
     --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(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%));
   }
 }
 
-@supports (color: color-mix(in oklch, red, white)) and (color: light-dark(red, blue)) {
-  :root,
-  [data-theme] {
-    --focus-ring: light-dark(
-      color-mix(in oklch, var(--focus) 30%, transparent),
-      color-mix(in oklch, var(--focus) 28%, transparent)
-    );
-  }
-}
-
 @media (prefers-contrast: more) {
   :root,
   /* The repeated attribute intentionally outranks single-attribute preset
@@ -222,7 +212,7 @@
   [data-theme][data-theme] {
     --border-width: 2px;
     --focus-outline-offset: 3px;
-    --focus-ring-width: 4px;
+    --focus-ring-width: 3px;
     --text-muted: var(--text);
     --text-subtle: var(--text);
   }

package/src/css/core/tokens.css

@@ -78,11 +78,15 @@
   --ease-enter: cubic-bezier(0.2, 0, 0, 1);
   --ease-exit: cubic-bezier(0.4, 0, 1, 1);
 
-  /* Focus ring — shared by every interactive component's :focus-visible */
+  /* Generic focus fallback — an adaptive currentColor line for elements
+     without a component ring (links, summary, plain items). Components draw
+     the themed ring instead: --focus-ring-width solid --focus. See focus.css
+     for the two contracts. Both share --focus-ring-width: they differ in
+     color only. */
   --focus-outline-color: currentColor;
-  --focus-outline: calc(var(--border-width) * 2) solid var(--focus-outline-color);
+  --focus-outline: var(--focus-ring-width) solid var(--focus-outline-color);
   --focus-outline-offset: 2px;
-  --focus-ring-width: 3px;
+  --focus-ring-width: 2px;
 
   /* Status dot positioning — used by .avatar > .badge:empty. The offset is
      the circle-aware inset (1 - 1/√2) / 2 ≈ 14.65%; the ring surrounds the
@@ -143,8 +147,8 @@
   --state-selected-fg: var(--primary-fg);
   --state-disabled: var(--text-subtle);
 
-  /* Status dot ring — follows the island's surface. */
-  --indicator-ring: var(--surface);
+  /* Status dot ring — cuts the dot out of what it overlaps. */
+  --indicator-ring: var(--surface-opaque);
 }
 
 :root {

package/src/css/core/variants.css

@@ -2,13 +2,9 @@
  * Cross-cutting variant token mapping.
  *
  * Variant scope: .solid/.soft/.outline/.surface set --ui-* for components that
- * opt into shared variants. .inverted is a surface modifier, not a variant: it paints
- * the element directly (background/color/border-color) so it works on any bare
- * block, and remaps the shared --ui-* tokens so participating components
- * (.card, .navbar, .alert, .badge) invert through their own rules. Loaded
- * before components, so a component with its own explicit surface (e.g.
- * .accordion) naturally keeps that surface — .inverted never forces a
- * non-participant.
+ * opt into shared variants. A subtree that needs another palette or scheme is
+ * a data-theme island, never a variant: only an island recomputes every token
+ * (fields, states, intents), where a remap of a few --ui-* tokens cannot.
  * Component-specific defaults (.btn solid-by-default, .badge
  * soft-by-default, .alert soft-by-default) live with their components:
  *   components/button.css — .btn default solid + .btn.ghost + .btn.link
@@ -64,28 +60,6 @@
   --ui-border: var(--border);
 }
 
-/* Inverse surface treatment. Paints the element directly (so it works on any
-   bare block) and remaps the shared --ui-* tokens so opt-in components
-   (.card, .navbar) invert through their own rules. Because this loads before
-   component base surfaces, components with their own explicit surface
-   (e.g. .accordion) keep it — participation is opt-in, never forced. --heading
-   is set so global headings (var(--heading, inherit)) do not inherit an outside
-   heading color onto the dark surface; surface-owning descendants derive
-   their contextual aliases from their own local surface. */
-.inverted {
-  --ui-bg: var(--surface-solid);
-  --ui-fg: var(--surface);
-  --ui-border: transparent;
-  --ui-hover-bg: var(--surface-solid);
-
-  --heading: var(--surface);
-  --busy-overlay-bg: var(--surface-solid);
-
-  background: var(--ui-bg);
-  color: var(--ui-fg);
-  border-color: var(--ui-border);
-}
-
 .compact {
   --gap: var(--space-20);
   --density-space: var(--space-20);
@@ -103,7 +77,8 @@
 /* Shared control scale. Wrappers are listed when their descendants form one
    component (field, choice-card, floating-field, input-icon, join, pagination,
    tabs, flyout). A local size declaration beats inherited density because it
-   is declared on the sized component itself. */
+   is declared on the sized component itself. Guarded by check:sync
+   (size-scale-participants): .sm and .lg must list the same components. */
 :where(
   .btn,
   .input,
@@ -169,10 +144,6 @@
     );
     /* @sync soft-recipe */
   }
-
-  .inverted {
-    --ui-hover-bg: color-mix(in oklch, var(--surface-solid) 88%, black);
-  }
 }
 
 /* Interactive hover recipes live in the components that consume them:

package/src/css/effects/aura.css

@@ -35,36 +35,55 @@
 
 .aura {
   --aura-color: var(--intent, var(--primary));
-  --aura-width: 2px;
+  --aura-width: 1px;
   --aura-blur: 0.25rem;
-  --aura-intensity: 1;
+  --aura-intensity: 0.4;
   --aura-radius: var(--radius-lg);
   --aura-duration: 6s;
 
   position: relative;
   isolation: isolate;
   display: inline-grid;
-  padding: var(--aura-width);
   border-radius: calc(var(--aura-radius) + var(--aura-width));
-  border: var(--border-width) solid transparent;
+
+  /* The frame is the border itself, so --aura-width is the painted thickness.
+     A transparent border stays for forced colors, where it becomes the visible
+     boundary; a padding frame inside it would paint both, doubling the line. */
+  border: var(--aura-width) solid transparent;
   background: var(--aura-color);
 
   /* A short feathered accent rather than a long wedge with a hard edge, which
      reads as one lit side. Nothing tints the frame outside it: a constant tint
-     across 2px draws an outline, the opposite of the effect. */
+     across the frame draws an outline, the opposite of the effect. `border-box`
+     sizes the gradient to the border box: the default padding-box origin would
+     tile a neighbouring copy of the gradient into the border, which is now the
+     whole frame. */
   background: conic-gradient(
-    from var(--aura-angle),
-    transparent 0 78%,
-    var(--aura-color) 93%,
-    transparent
-  );
+      from var(--aura-angle),
+      transparent 0 78%,
+      var(--aura-color) 93%,
+      transparent
+    )
+    border-box;
+
+  /* Far halo — flat and static. At this blur the rotating detail is no longer
+     legible, so there is nothing to gain from animating a second wide blurred
+     layer. This is the layer that stays lit at all times, so it — not the
+     frame — is what keeps the object present between two passes of the
+     accent. An outer shadow never paints under the box, so it stays out of a
+     translucent child. min() because a color-mix() share above 100% is
+     invalid, where the opacity it replaces clamped. */
+  box-shadow: 0 0 calc(var(--aura-blur) * 8) var(--aura-blur)
+    color-mix(in oklab, var(--aura-color) min(100%, calc(15% * var(--aura-intensity))), transparent);
 }
 
-/* Near halo — inherits the frame gradient, so it tracks the lit accent. */
+/* Near halo — inherits the frame gradient, so it tracks the lit accent. An
+   absolute inset starts at the padding edge, inside the border that is the
+   frame, so the negative inset puts the halo back on the frame. */
 .aura::before {
   position: absolute;
   z-index: -1;
-  inset: 0;
+  inset: calc(-1 * var(--aura-width));
   border-radius: inherit;
   background: inherit;
   filter: blur(var(--aura-blur));
@@ -73,29 +92,22 @@
   content: "";
 }
 
-/* Far halo — flat and static. At this blur the rotating detail is no longer
-   legible, so there is nothing to gain from animating a second wide blurred
-   layer. It outgrows the frame, otherwise the child covers it and the whole
-   effect reads as a drop shadow. This is the layer that stays lit at all
-   times, so it — not the frame — is what keeps the object present between two
-   passes of the accent. */
+/* Occlusion — the frame and the near halo paint across the whole box, and only
+   their edge is meant to show. This mask sits above both, under the child, so
+   a transparent or translucent child (an .outline alert, a glass surface) is
+   framed rather than filled with the frame color. It follows the child's
+   shape through --aura-radius. */
 .aura::after {
   position: absolute;
   z-index: -1;
-  inset: calc(-1 * var(--aura-blur));
-  border-radius: calc(var(--aura-radius) + var(--aura-width) + var(--aura-blur));
-  background: var(--aura-color);
-  filter: blur(calc(var(--aura-blur) * 4));
-  opacity: calc(0.15 * var(--aura-intensity));
+  inset: 0;
+  border-radius: var(--aura-radius);
+  background: var(--surface-opaque);
   pointer-events: none;
   content: "";
 }
 
-/* Lifts the child above both halos. It also has to be opaque: the frame paints
-   across the whole box and only its edge is meant to show, so a transparent
-   child (an .outline alert, a .ghost button) is filled with the frame color
-   rather than framed by it. Documented as a constraint, not worked around —
-   masking a ring would cost more than the case is worth. */
+/* Lifts the child above the halo and the mask. */
 .aura > * {
   position: relative;
 }
@@ -118,7 +130,7 @@
     animation: aura-breathe-near var(--aura-duration) ease-in-out infinite;
   }
 
-  .aura-glow::after {
+  .aura-glow {
     animation: aura-breathe-far var(--aura-duration) ease-in-out infinite;
   }
 }
@@ -130,8 +142,8 @@
 @media (prefers-reduced-motion: reduce) {
   .aura:not(.aura-glow) {
     background:
-      radial-gradient(4rem 4rem at 0% 0%, var(--aura-color), transparent 70%),
-      radial-gradient(4rem 4rem at 100% 100%, var(--aura-color), transparent 70%);
+      radial-gradient(4rem 4rem at 0% 0%, var(--aura-color), transparent 70%) border-box,
+      radial-gradient(4rem 4rem at 100% 100%, var(--aura-color), transparent 70%) border-box;
   }
 }
 
@@ -152,10 +164,16 @@
   }
 }
 
+/* The far halo is the element's own shadow: opening its spread and share
+   breathes it without scaling the child. */
 @keyframes aura-breathe-far {
   50% {
-    opacity: calc(0.28 * var(--aura-intensity));
-    transform: scale(1.07);
+    box-shadow: 0 0 calc(var(--aura-blur) * 10) calc(var(--aura-blur) * 2)
+      color-mix(
+        in oklab,
+        var(--aura-color) min(100%, calc(28% * var(--aura-intensity))),
+        transparent
+      );
   }
 }
 

package/src/css/effects/index.css

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

package/src/css/effects/shimmer.css

@@ -0,0 +1,57 @@
+/*
+ * Highlight sweeping across a text label — an activity in progress.
+ *
+ * Docs: docs/pages/components/shimmer.md
+ *
+ * Presentation only: it carries no state and selects no ARIA attribute, so the
+ * label stays whatever the author makes it (a role="status" message, a list
+ * item, a heading).
+ *
+ * Public hooks:
+ * --shimmer-color
+ * --shimmer-highlight
+ */
+.shimmer {
+  --shimmer-color: var(--text-muted);
+  --shimmer-highlight: var(--text);
+
+  color: var(--shimmer-color);
+}
+
+/* The sweep paints the glyphs through a clipped background, which needs the
+   glyph fill transparent. Without background-clip: text that would erase the
+   label, so the transparency lives under the same query as the clip. It is
+   the fill, not `color`: a label class that sets its own color (.muted, a
+   caption style) would otherwise win the cascade and paint opaque glyphs over
+   the sweep. Reduced motion keeps the plain label — a frozen band would read
+   as a random tint. */
+@supports (background-clip: text) {
+  @media (prefers-reduced-motion: no-preference) {
+    .shimmer {
+      -webkit-text-fill-color: transparent;
+      background:
+        linear-gradient(
+          90deg,
+          var(--shimmer-color) 40%,
+          var(--shimmer-highlight) 50%,
+          var(--shimmer-color) 60%
+        )
+        0 0 / 300% 100%;
+      background-clip: text;
+      animation: actual-shimmer var(--duration-shimmer) linear infinite;
+    }
+  }
+}
+
+/* The band occupies the middle third of a background three times the label's
+   width, so each pass leaves the end of the label before the next one enters
+   at the start. */
+@keyframes actual-shimmer {
+  from {
+    background-position: 100% 0;
+  }
+
+  to {
+    background-position: 0% 0;
+  }
+}