actual-css 0.10.0 → 0.11.1

package/src/css/components/modal.css

@@ -8,6 +8,8 @@
  *
  * Public hooks:
  * --modal-size
+ * --modal-pad
+ * --modal-header-bg
  * --dialog-viewport-gap
  * --dialog-icon-size
  * --dialog-icon-glyph-size
@@ -15,6 +17,7 @@
  * The corner close control is .close (components/close.css).
  *
  * Internal:
+ * --dialog-inner-radius
  * --dialog-focus-bleed
  * --dialog-viewport-block
  * --dialog-viewport-gap-default
@@ -33,6 +36,11 @@
     var(--dialog-viewport-gap, var(--dialog-viewport-gap-default))
   );
 
+  /* The panel is borderless, so its inner and outer radius are the same. Kept
+     as one name for the padded wrapper and any edge band (header,
+     confirmation footer) so none of them drifts from the corner. */
+  --dialog-inner-radius: var(--radius-lg);
+
   /* Keep the surface anchored to the viewport in the top layer. This also
      provides the containing block for the absolutely positioned close button. */
   position: fixed;
@@ -46,7 +54,9 @@
      dynamic token; only the modal pins the small viewport. */
   --dialog-viewport-block: var(--viewport-block);
   max-block-size: calc(var(--dialog-viewport-block) - var(--dialog-viewport-gap-2x));
-  border: var(--border-width) solid var(--border);
+  /* Zero rather than absent: the UA stylesheet draws `border: solid` on
+     dialog, and an authored edge reads as a hard seam against .bleed bands. */
+  border: 0;
   border-radius: var(--radius-lg);
   background: var(--surface-raised);
   color: var(--text);
@@ -68,14 +78,73 @@
     transform var(--duration) var(--ease-exit);
 }
 
+@media (forced-colors: active) {
+  /* With no authored border the panel edge disappears once colors collapse.
+     The browser forces the border color, so only the width is authored. */
+  :where(dialog).modal {
+    border: var(--border-width) solid CanvasText;
+  }
+}
+
 :where(dialog).modal > form,
 :where(dialog).modal > .stack {
+  --surface-pad: var(--modal-pad, var(--space-40));
+
   display: grid;
   gap: var(--space-40);
   max-block-size: calc(var(--dialog-viewport-block) - var(--dialog-viewport-gap-2x));
+  border-radius: var(--dialog-inner-radius);
   overflow: auto;
   overscroll-behavior: contain;
-  padding: var(--space-40);
+  padding: var(--surface-pad);
+}
+
+/* Optional dialog chrome lives beside the padded body wrapper. Its leading
+   region and trailing controls share one center axis; wrapping the close in
+   the trailing cluster keeps it in flow instead of invoking the absolute
+   corner treatment from close.css. */
+:where(dialog).modal > header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-30);
+  min-block-size: var(--close-size, var(--control-size));
+  padding: var(--modal-pad, var(--space-40));
+  border-start-start-radius: var(--dialog-inner-radius);
+  border-start-end-radius: var(--dialog-inner-radius);
+  background: var(--modal-header-bg, var(--surface-subtle));
+}
+
+:where(dialog).modal > header > .media {
+  flex: 1 1 auto;
+  min-inline-size: 0;
+}
+
+:where(dialog).modal > header > .media > :is(h1, h2, h3, h4, h5, h6) {
+  display: flex;
+  align-items: center;
+  min-block-size: var(--close-size, var(--control-size));
+  margin-block: 0;
+}
+
+:where(dialog).modal > header > .cluster {
+  --cluster-wrap: nowrap;
+
+  flex: none;
+}
+
+@supports selector(dialog:has(> header)) {
+  /* The header stays fixed while the body wrapper owns overflow. Without
+     :has(), compact dialogs keep ordinary block flow as the fallback. */
+  :where(dialog).modal[open]:has(> header) {
+    display: grid;
+    grid-template-rows: auto minmax(0, 1fr);
+  }
+
+  :where(dialog).modal:has(> header) > :is(form, .stack) {
+    min-block-size: 0;
+    max-block-size: none;
+  }
 }
 
 @supports (block-size: 100svh) {
@@ -127,12 +196,32 @@
   margin-block-end: 0;
 }
 
+/* A media row inside the structural header is title anatomy, so its heading
+   does not bring prose margins into the icon alignment. */
+:where(dialog).modal > :where(form, .stack) > header > .media > :is(h1, h2, h3, h4, h5, h6) {
+  margin-block: 0;
+}
+
 /* The close button is anchored to the dialog at top inline-end, out of the
    content flow; headers reserve inline room so titles never run under it.
    The form/.stack anatomy is structural, so it stays in :where() and never
    lends .stack's specificity to a bare <form>. */
 :where(dialog).modal > :where(form, .stack) > header {
-  padding-inline-end: calc(var(--close-size, var(--control-size)) + var(--space-30));
+  padding-inline-end: calc(
+    var(--close-size, var(--control-size)) +
+    var(--space-20) +
+    var(--space-30)
+  );
+}
+
+/* A corner .close that is a direct child of the chrome header needs the same
+   reserve, but never below the header's own pad. Kept as its own rule so an
+   unsupported :has() drops only this geometry, not the wrapper reserve. */
+:where(dialog).modal > header:has(> .close) {
+  padding-inline-end: max(
+    var(--modal-pad, var(--space-40)),
+    calc(var(--close-size, var(--control-size)) + var(--space-20) + var(--space-30))
+  );
 }
 
 :where(dialog).modal > :where(form, .stack) > footer {
@@ -146,19 +235,25 @@
    action band. The media primitive owns icon/content alignment; this variant
    only removes the standard form inset so both regions can own their padding. */
 :where(dialog).modal.dialog-confirmation > form {
+  --surface-pad: 0px;
+
   gap: 0;
   padding: 0;
 }
 
-:where(dialog).modal.dialog-confirmation > form > .media {
+:where(dialog).modal.dialog-confirmation > form > :is(.media, header) {
   gap: var(--space-40);
   padding: var(--space-50);
 }
 
+/* The action band splits a decision pair: the cancel-style action holds the
+   leading edge and the committing action the trailing one, so the destructive
+   choice is never adjacent to the dismiss. */
 :where(dialog).modal.dialog-confirmation > form > footer {
+  justify-content: space-between;
   padding: var(--space-40) var(--space-50);
-  border-end-start-radius: calc(var(--radius-lg) - var(--border-width));
-  border-end-end-radius: calc(var(--radius-lg) - var(--border-width));
+  border-end-start-radius: var(--dialog-inner-radius);
+  border-end-end-radius: var(--dialog-inner-radius);
   background: var(--surface-subtle);
 }
 
@@ -195,8 +290,29 @@
   line-height: 1;
 }
 
+:where(dialog).modal.dialog-confirmation > form > .media > header {
+  display: grid;
+  gap: var(--space-20);
+}
+
+:where(dialog).modal.dialog-confirmation > form > .media > header > * {
+  margin-block: 0;
+}
+
+/* The first heading occupies the icon row, so its text centers on the icon
+   without a font-relative nudge. Following copy stays in the same column. */
+:where(dialog).modal.dialog-confirmation
+  > form
+  > .media
+  > header
+  > :is(h1, h2, h3, h4, h5, h6):first-child {
+  display: flex;
+  align-items: center;
+  min-block-size: var(--dialog-icon-size, 3rem);
+}
+
 @media (max-width: 30rem) {
-  :where(dialog).modal.dialog-confirmation > form > .media,
+  :where(dialog).modal.dialog-confirmation > form > :is(.media, header),
   :where(dialog).modal.dialog-confirmation > form > footer {
     padding: var(--space-40);
   }

package/src/css/components/pagination.css

@@ -3,8 +3,9 @@
  *
  * Docs: docs/pages/components/pagination.md
  *
- * Render .btn elements inside a .pagination list. The active page is marked
- * with aria-current="page"; .btn owns the active state styling.
+ * Render .btn.ghost elements inside a .pagination list. The active page is
+ * marked with aria-current="page"; .btn owns the active state styling, so the
+ * current page is the only filled item.
  *
  * Truncated ranges are plain text (`.muted`, `aria-hidden="true"`), not .btn
  * — they are decorative, not actionable. They still get the same box sizing

package/src/css/components/rating.css

@@ -56,7 +56,7 @@
 }
 
 .rating > input[type="radio"]:focus-visible {
-  outline: var(--focus-outline);
+  outline: var(--focus-ring-width) solid var(--focus);
   outline-offset: var(--focus-outline-offset);
   background: var(--rating-color);
 }

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

@@ -33,8 +33,8 @@
 }
 
 .status-bar {
-  --status-bg: var(--intent, var(--text));
-  --status-fg: var(--intent-fg, var(--surface));
+  --status-bg: var(--intent, var(--surface-solid));
+  --status-fg: var(--intent-fg, var(--surface-solid-fg));
 
   position: fixed;
   /* Fixed positioning tracks the layout viewport, which the mobile software

package/src/css/components/steps.css

@@ -58,7 +58,7 @@
   --step-size: 1.75rem;
   --step-inline-gap: var(--space-20);
   --step-line-size: var(--border-width);
-  --step-marker-bg: var(--surface);
+  --step-marker-bg: var(--surface-opaque);
   --step-marker-border: var(--border);
   --step-marker-fg: var(--text-muted);
   --step-marker-radius: var(--radius-full);
@@ -138,7 +138,7 @@
    connector leaving current goes back to neutral. Declared after
    .step-complete at equal specificity: current wins on every channel. */
 .steps > [aria-current="step"] {
-  --step-marker-bg: var(--surface);
+  --step-marker-bg: var(--surface-opaque);
   --step-marker-border: var(--state-selected);
   --step-marker-fg: var(--state-selected);
   --step-line: var(--border);
@@ -177,7 +177,7 @@
    focus ring's own width and offset. Only this composition scrolls, and only a
    link has a ring to protect. */
 .steps-horizontal:has(a[href]) {
-  padding-block: calc(var(--focus-outline-offset) + var(--border-width) * 2);
+  padding-block: calc(var(--focus-outline-offset) + var(--focus-ring-width));
 }
 
 /* One explicit row, the marker's: a `.step-label` is auto-placed into an

package/src/css/components/tab.css

@@ -76,10 +76,10 @@
 }
 
 /* The ring is square on the edge the tab is attached to, so it reads as part
-   of the strip rather than a floating chip. */
+   of the strip rather than a floating chip. Color and width follow the
+   component ring contract (focus.css); only the geometry is tab-specific. */
 .tab:focus-visible {
-  outline: var(--focus-outline);
-  outline-color: var(--focus);
+  outline: var(--focus-ring-width) solid var(--focus);
   outline-offset: -2px;
   border-radius: var(--radius-sm) var(--radius-sm) 0 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

@@ -6,12 +6,22 @@
    for its keyboard focus indicator; forced colors keep outlines and drop
    shadows.
 
-   Component indicators are a solid --focus-ring-width 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
+   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. */
+   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 {
@@ -98,6 +100,12 @@
   --heading: var(--text);
   --selection-bg: var(--primary);
   --selection-fg: var(--primary-fg);
+  /* 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

package/src/css/core/tokens.css

@@ -78,9 +78,13 @@
   --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: 2px;
 
@@ -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

@@ -77,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,

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