actual-css 0.6.0 → 0.8.0

package/{scripts/reserved-classes.json → reserved-classes.json}

@@ -106,19 +106,17 @@
   "flex-nowrap",
   "flex-wrap",
   "floating-field",
+  "flush",
   "flyout",
   "flyout-trigger",
   "font-weight-bold",
   "font-weight-medium",
   "font-weight-normal",
-  "font-weight-strong",
+  "font-weight-semibold",
   "form-actions",
   "frame",
   "gap-context",
-  "gap-lg",
-  "gap-md",
   "gap-none",
-  "gap-sm",
   "ghost",
   "grid",
   "grid-2",
@@ -137,7 +135,6 @@
   "intent-color",
   "inverted",
   "is-open",
-  "is-sheet",
   "is-static",
   "items-center",
   "items-end",
@@ -229,6 +226,7 @@
   "scrollspy",
   "secondary",
   "select",
+  "separated",
   "shadow-context",
   "shadow-popout-context",
   "sidebar-layout",
@@ -236,6 +234,7 @@
   "sm",
   "soft",
   "solid",
+  "spacious",
   "spinner",
   "sr-only",
   "stable-gutter",
@@ -252,7 +251,6 @@
   "subtle",
   "success",
   "surface",
-  "surface-backdrop",
   "switch",
   "switcher",
   "tab",

package/src/css/components/accordion.css

@@ -5,6 +5,12 @@
  * or demo styles. Decorative palettes and custom markers belong outside the
  * base component.
  *
+ * Container treatments (structural chrome, not skins):
+ * - default — the common raised shell;
+ * - .flush — the shell removed, only the item separators remain, so the group
+ *   can sit directly inside an existing surface (card, drawer, page section);
+ * - .separated — each item becomes its own card.
+ *
  * Public hooks:
  * --accordion-radius
  * --accordion-marker-color
@@ -30,11 +36,14 @@
   list-style: none;
   padding: var(--space-40);
   color: var(--text);
-  font-weight: var(--font-weight-bold);
+  font-weight: var(--font-weight-medium);
 }
 
-.accordion summary:hover {
-  color: var(--primary);
+.accordion summary:hover::after {
+  /* The whole row is one focus target; reinforcing only the end marker keeps
+     the affordance on the disclosure control instead of making the whole
+     label read as a link. */
+  --accordion-marker-color: currentColor;
 }
 
 .accordion summary::-webkit-details-marker {
@@ -78,6 +87,36 @@
   padding-inline-start: 2rem;
 }
 
+/* Flush — the shell is dropped and only the shared item separators remain.
+   Zero inline padding puts the group edge to edge inside the surface that
+   already frames it, so no override is repeated per embedding. */
+.accordion.flush {
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+}
+
+.accordion.flush summary,
+.accordion.flush details > summary + * {
+  padding-inline: 0;
+}
+
+/* Separated — each item owns a full card. The item's own border beats the
+   shared details + details separator on specificity alone, so nothing needs
+   undoing for the second item onwards. */
+.accordion.separated {
+  display: grid;
+  gap: var(--space-20);
+  border: 0;
+  background: transparent;
+}
+
+.accordion.separated > details {
+  border: var(--border-width) solid var(--border);
+  border-radius: var(--accordion-radius);
+  background: var(--surface-raised);
+}
+
 @media (forced-colors: active) {
   .accordion {
     --accordion-marker-color: CanvasText;

package/src/css/components/alert.css

@@ -32,6 +32,7 @@
 :where(.alert) {
   --intent: initial;
   --intent-fg: initial;
+  --intent-soft-fg: initial;
   --ui-bg: initial;
   --ui-fg: initial;
   --ui-border: initial;
@@ -64,12 +65,23 @@
   min-inline-size: 0;
 }
 
-.alert > :first-child {
-  margin-block-start: 0;
+/* The alert owns the block spacing between its direct content blocks, the way
+   .stack and .prose own theirs, so a title and a description are plain
+   siblings instead of a wrapper carrying an inline --gap. What made that pair
+   read as detached is the UA paragraph margin: trimming only the outer edges
+   left it in place between them. Content keeps its own internal rhythm — a
+   nested list keeps its bullets and padding, a .prose child keeps its flow.
+   The slots are excluded because they are anatomy, not content: an
+   admonition's title bar has to stay flush against its body. The list follows
+   the anatomy, so it grows with it. */
+.alert > :not(:where(.alert-icon, .alert-dismiss, .alert-title, .alert-body)) {
+  margin-block: 0;
 }
 
-.alert > :last-child {
-  margin-block-end: 0;
+.alert
+  > :not(:where(.alert-icon, .alert-dismiss, .alert-title, .alert-body))
+  + :not(:where(.alert-icon, .alert-dismiss, .alert-title, .alert-body)) {
+  margin-block-start: var(--space-10);
 }
 
 /* Alerts are soft by default. The recipe writes local defaults rather than
@@ -87,10 +99,9 @@
       var(--surface) var(--soft-border-mix),
       var(--intent, var(--neutral))
     );
-    --alert-default-fg: color-mix(
-      in oklab,
-      var(--text),
-      var(--intent, var(--text)) var(--soft-fg-mix)
+    --alert-default-fg: var(
+      --intent-soft-fg,
+      color-mix(in oklab, var(--text), var(--intent, var(--text)) var(--soft-fg-mix))
     );
     /* @sync soft-recipe */
   }
@@ -191,7 +202,7 @@
 /* Links */
 .alert :where(a:not(.btn)) {
   color: inherit;
-  font-weight: var(--font-weight-strong);
+  font-weight: var(--font-weight-semibold);
 }
 
 /* Forced colors: no override needed. The always-on border gets a forced
@@ -199,11 +210,12 @@
    Canvas backplate (unreadable) — so .solid intentionally falls back to the
    default look. */
 
-/* Callout — neutral surface with a thick accent border on the leading edge.
-   The thickness follows the shared --alert-border-inline-start-width hook. */
+/* Callout — leading-edge flag treatment. It owns the border geometry only, so
+   the surface and the ink stay with the alert's own intent and shared
+   treatment: bare is the soft panel, .surface the page surface, .solid a
+   filled one, and .outline has no fill and no other side. Thickness and color
+   follow the --alert-border-inline-start-* hooks. */
 .alert.callout {
-  --alert-bg: var(--surface-subtle);
-  --alert-fg: var(--text);
   border: 0;
   border-inline-start: var(--alert-border-inline-start-width, 4px) solid
     var(--alert-border-inline-start-color, var(--intent, var(--neutral)));

package/src/css/components/app-nav.css

@@ -6,8 +6,12 @@
  * Public hooks:
  * --app-nav-size
  * --app-nav-gap
+ * --app-nav-icon-size
  */
 :where(.app-nav) {
+  --intent: initial;
+  --intent-fg: initial;
+  --intent-soft-fg: initial;
   --ui-bg: initial;
   --ui-fg: initial;
   --ui-border: initial;
@@ -16,6 +20,7 @@
 .app-nav {
   --app-nav-size: 4rem;
   --app-nav-gap: var(--space-10);
+  --app-nav-icon-size: 1.5rem;
 
   position: sticky;
   inset-block-end: 0;
@@ -52,9 +57,9 @@
 }
 
 .app-nav > a > :where(svg, img, [aria-hidden="true"]) {
-  inline-size: 1.5rem;
-  block-size: 1.5rem;
-  font-size: 1.5rem;
+  inline-size: var(--app-nav-icon-size);
+  block-size: var(--app-nav-icon-size);
+  font-size: var(--app-nav-icon-size);
   line-height: 1;
 }
 
@@ -63,14 +68,19 @@
   color: var(--text);
 }
 
-.app-nav > a:where([aria-current]:not([aria-current="false"])) {
+/* Current tile is already a full selected surface. Selection never changes
+   text metrics: the shared medium weight is kept, no permanent indicator is
+   added here. */
+.app-nav > a[aria-current="page"] {
   background: var(--state-selected);
   color: var(--state-selected-fg);
-  font-weight: var(--font-weight-bold);
 }
 
-@media print {
-  .app-nav {
-    display: none;
+@media (forced-colors: active) {
+  /* --state-selected flattens to a UA color that no longer distinguishes the
+     current tile from the rest of the bar, so paint the system Highlight pair. */
+  .app-nav > a[aria-current="page"] {
+    background: Highlight;
+    color: HighlightText;
   }
 }

package/src/css/components/avatar.css

@@ -46,7 +46,7 @@
   color: var(--avatar-fg);
   font: inherit;
   font-size: var(--avatar-font-size);
-  font-weight: var(--font-weight-strong);
+  font-weight: var(--font-weight-semibold);
   line-height: 1;
   text-decoration: none;
   vertical-align: middle;
@@ -160,6 +160,18 @@ a.avatar[aria-disabled="true"] {
   transform: translate(var(--avatar-status-translate-x), 50%);
 }
 
+/* Safari before 16.4 has no :dir(); the ancestor-attribute path is the
+   Degraded-tier fallback and the :dir() rules are dropped on their own there.
+   :dir() follows inherited directionality, so the explicit ltr rule
+   neutralizes an outer RTL fallback for a nested direction change. */
+[dir="rtl"] .avatar > .badge:empty {
+  --avatar-status-translate-x: -50%;
+}
+
+.avatar:dir(ltr) > .badge:empty {
+  --avatar-status-translate-x: 50%;
+}
+
 .avatar:dir(rtl) > .badge:empty {
   --avatar-status-translate-x: -50%;
 }

package/src/css/components/badge.css

@@ -9,8 +9,10 @@
  * --badge-size
  * --badge-pad-x
  * --badge-font-size
+ * --badge-icon-size
  * --badge-dot-size
  * --badge-radius
+ * --badge-dismiss-icon-size
  *
  * Internal:
  * --badge-default-bg
@@ -26,6 +28,7 @@
 :where(.badge) {
   --intent: initial;
   --intent-fg: initial;
+  --intent-soft-fg: initial;
   --ui-bg: initial;
   --ui-fg: initial;
   --ui-border: initial;
@@ -33,10 +36,14 @@
 }
 
 .badge {
-  --badge-size: var(--density-compact-size);
-  --badge-pad-x: 0.55em;
-  --badge-font-size: var(--font-size-xs);
+  --badge-size: 1.5rem;
+  /* A third of the height keeps the pill proportional across local sizes
+     without coupling it to the label typography. */
+  --badge-pad-x: calc(var(--badge-size) / 3);
+  --badge-font-size: var(--font-size-sm);
+  --badge-icon-size: 1em;
   --badge-dot-size: 0.5rem;
+  --badge-dismiss-icon-size: 0.875em;
   --badge-default-bg: var(--surface-subtle);
   --badge-default-fg: var(--intent, var(--text));
   --badge-default-border: var(--border);
@@ -49,7 +56,11 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
+  vertical-align: middle;
   gap: 0.35em;
+  /* Content-sized: a flex parent must not squeeze the pill and push its
+     nowrap label outside the background. */
+  flex: none;
   inline-size: fit-content;
   max-inline-size: 100%;
   min-block-size: var(--badge-size);
@@ -59,7 +70,7 @@
   background: var(--badge-bg);
   color: var(--badge-fg);
   font-size: var(--badge-font-size);
-  font-weight: var(--font-weight-strong);
+  font-weight: var(--font-weight-medium);
   line-height: 1;
   text-decoration: none;
   white-space: nowrap;
@@ -70,6 +81,31 @@
     box-shadow var(--duration);
 }
 
+.badge.sm {
+  --badge-size: 1.25rem;
+  --badge-font-size: var(--font-size-xs);
+  --badge-dot-size: 0.375rem;
+}
+
+.badge.lg {
+  --badge-size: 1.875rem;
+  --badge-font-size: var(--font-size-md);
+  --badge-dot-size: 0.625rem;
+}
+
+/* Decorative children follow the badge's optical size. Text and interactive
+   dismiss buttons retain their own boxes. */
+.badge > :where(svg, img, [aria-hidden="true"]:not(.dot)) {
+  flex: none;
+  /* The shared rule maps --badge-icon-size onto font-size. One em is therefore
+     the requested optical size; reusing the em-valued hook here would apply its
+     factor a second time. */
+  inline-size: 1em;
+  block-size: 1em;
+  font-size: var(--badge-icon-size);
+  line-height: 1;
+}
+
 /* Soft by default. Local defaults remain behind --ui-* in the resolution
    chain, so explicit shared treatments compose without selector exclusions. */
 @supports (color: color-mix(in oklch, red, white)) {
@@ -85,10 +121,9 @@
       var(--surface) var(--soft-border-mix),
       var(--intent, var(--neutral))
     );
-    --badge-default-fg: color-mix(
-      in oklab,
-      var(--text),
-      var(--intent, var(--text)) var(--soft-fg-mix)
+    --badge-default-fg: var(
+      --intent-soft-fg,
+      color-mix(in oklab, var(--text), var(--intent, var(--text)) var(--soft-fg-mix))
     );
     /* @sync soft-recipe */
   }
@@ -105,12 +140,22 @@
   block-size: var(--badge-size);
 }
 
+/* The shared .dot separator doubles as a status dot inside a badge.
+   currentColor follows the badge's resolved ink, so the dot matches a soft
+   intent without repeating the intent class on it. */
+.badge > .dot {
+  background-color: currentColor;
+}
+
 .badge > button {
   display: inline-grid;
   place-items: center;
   flex: 0 0 auto;
-  min-inline-size: var(--density-compact-size);
-  min-block-size: var(--density-compact-size);
+  /* WCAG 2.5.8 floors pointer targets at 24 CSS px. Density and local size may
+     keep the badge visually compact through the negative margins, but never
+     shrink its action target below that literal floor. */
+  min-inline-size: max(var(--badge-size), 24px);
+  min-block-size: max(var(--badge-size), 24px);
   margin-block: -0.25rem;
   margin-inline-start: -0.15em;
   margin-inline-end: -0.45em;
@@ -124,6 +169,21 @@
   cursor: pointer;
 }
 
+/* Dismiss mark — an empty dismiss button paints its own X from the shared
+   --icon-close mask, so no icon font or text glyph is required in the markup
+   (same contract as .alert-dismiss and .dialog-close). A mask box is a block
+   box, so place-items centers the ink itself; a text glyph would only center
+   its line box and land the ink low, because a lowercase x has no descender
+   and only x-height of ascent. A button with its own content keeps it. */
+.badge > button:empty::before {
+  content: "";
+  inline-size: var(--badge-dismiss-icon-size);
+  block-size: var(--badge-dismiss-icon-size);
+  background: currentColor;
+  -webkit-mask: var(--icon-close) center / contain no-repeat;
+  mask: var(--icon-close) center / contain no-repeat;
+}
+
 .badge > button:not(:disabled):hover {
   background: var(--hover-overlay);
 }
@@ -156,7 +216,14 @@
   background: var(--ui-hover-bg, var(--badge-default-hover-bg));
 }
 
-:where(a.badge, button.badge):not(:where(:disabled, [aria-disabled="true"], .outline)):hover {
+/* Solid and empty badges keep the overlay darkening on hover; soft badges do
+   not — their hover fill (--soft-hover-alpha) is already the state change, and
+   stacking a second darkening drags the soft ink below its resting contrast.
+   Soft here means :not(.solid, .outline, :empty), mirroring the soft hover-bg
+   recipe above. */
+:where(a.badge, button.badge):is(.solid, :empty):not(
+  :where(:disabled, [aria-disabled="true"])
+):hover {
   /* Huge inset spread paints the overlay over the pill radius (see button.css). */
   box-shadow: inset 0 0 0 999px var(--hover-overlay);
 }
@@ -188,6 +255,5 @@ a.badge[aria-disabled="true"] {
 @media print {
   .badge {
     border: var(--border-width) solid CanvasText;
-    break-inside: avoid;
   }
 }

package/src/css/components/breadcrumb.css

@@ -33,8 +33,7 @@
   text-decoration: none;
 }
 
-.breadcrumb a:not([aria-current]):hover,
-.breadcrumb a[aria-current="false"]:hover {
+.breadcrumb a:not([aria-current="page"]):hover {
   color: var(--text);
   text-decoration: underline;
 }
@@ -43,7 +42,7 @@
   border-radius: var(--radius-sm);
 }
 
-.breadcrumb :where(li, a, span):where([aria-current]:not([aria-current="false"])) {
+.breadcrumb :where(li, a, span)[aria-current="page"] {
   color: var(--text);
   font-weight: var(--font-weight-medium);
 }

package/src/css/components/button.css

@@ -39,6 +39,7 @@
 :where(.btn) {
   --intent: initial;
   --intent-fg: initial;
+  --intent-soft-fg: initial;
   --ui-bg: initial;
   --ui-fg: initial;
   --ui-border: initial;
@@ -110,13 +111,16 @@
   --ui-border: transparent;
 }
 
-/* Solid/soft get the overlay darkening on hover; outline/ghost/link stay flat.
-   Routed through a variable instead of a :not(.outline, .ghost, .link)
-   exclusion so the hover rule below only has to state the interactive
-   element list once. */
+/* Solid keeps the overlay darkening on hover; soft/outline/ghost/link stay
+   flat. The soft hover is its own fill change (--soft-hover-alpha) — a second
+   overlay on top would double the fill step and drag its ink below the resting
+   contrast on every intent. Routed through a variable instead of a
+   :not(.outline, .ghost, .link) exclusion so the hover rule below only has to
+   state the interactive element list once. */
 .btn.outline,
 .btn.ghost,
-.btn.link {
+.btn.link,
+.btn.soft {
   --btn-hover-overlay: transparent;
 }
 
@@ -239,14 +243,3 @@ a.btn[aria-disabled="true"] {
     border-color: GrayText;
   }
 }
-
-@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

@@ -26,8 +26,15 @@
  * --busy-overlay-bg
  */
 /* Intent boundary — inherited intents do not tint this component.
-   Local intent classes still win because :where() has zero specificity. */
+   Local intent classes still win because :where() has zero specificity.
+   The intent tokens are reset alongside --ui-*: the shared variants
+   (.soft/.solid/.outline/.surface) read --intent / --intent-fg / --intent-soft-fg
+   when they paint this surface, so an ancestor intent would otherwise leak
+   through a variant that has no local intent class. */
 :where(.card) {
+  --intent: initial;
+  --intent-fg: initial;
+  --intent-soft-fg: initial;
   --ui-bg: initial;
   --ui-fg: initial;
   --ui-border: initial;
@@ -100,7 +107,7 @@
   box-shadow: var(--shadow);
 }
 .card.subtle {
-  background: var(--surface-subtle);
+  --card-bg: var(--surface-subtle);
 }
 .card.compact {
   --card-pad: var(--space-20);

package/src/css/components/chat.css

@@ -62,6 +62,7 @@
 :where(.chat-bubble) {
   --intent: initial;
   --intent-fg: initial;
+  --intent-soft-fg: initial;
   --ui-bg: initial;
   --ui-fg: initial;
   --ui-border: initial;

package/src/css/components/data-list.css

@@ -18,7 +18,7 @@
 .data-list > dt {
   min-inline-size: 0;
   margin-block-start: 0;
-  font-weight: var(--font-weight-strong);
+  font-weight: var(--font-weight-semibold);
 }
 
 .data-list > dd {