actual-css 0.1.0 → 0.3.0

package/src/css/components/alert.css

@@ -7,42 +7,48 @@
  * --alert-border-inline-start-color/-width are unset extension points, mirroring
  * --btn-border-block-end-* (button.css), for themes that give alerts a
  * callout-style colored flag on the leading edge instead of a uniform border.
+ *
+ * Public hooks:
+ * --alert-pad-block
+ * --alert-pad-inline
+ * --alert-font-size
+ * --alert-radius
+ * --alert-icon-size
+ * --alert-dismiss-size
+ *
+ * Internal:
+ * --alert-bg
+ * --alert-fg
+ * --alert-border
+ * --alert-dismiss-icon-size
  */
 /* Intent boundary — inherited intents do not tint this component.
    Local intent classes still win because :where() has zero specificity. */
 :where(.alert) {
-  /* @sync intent-boundary */
   --intent: initial;
   --intent-fg: initial;
   --ui-bg: initial;
   --ui-fg: initial;
   --ui-border: initial;
-  --ui-hover-bg: initial;
-  /* @sync intent-boundary */
 }
 
 .alert {
-  --alert-pad-block: var(--variant-pad-block, var(--space-4));
-  --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);
-  --alert-bg: var(--surface-subtle);
-  --alert-border: var(--border);
-  --ui-bg: var(--alert-bg);
-  --ui-border: var(--alert-border);
-  --ui-fg: var(--intent, var(--text));
+  --alert-pad-block: var(--space-30);
+  --alert-pad-inline: var(--space-40);
+  --alert-font-size: var(--font-size-md);
+  --alert-icon-size: 1.25rem;
+  --alert-bg: var(--ui-bg, var(--surface-subtle));
+  --alert-fg: var(--ui-fg, var(--intent, var(--text)));
+  --alert-border: var(--ui-border, var(--border));
 
   padding-block: var(--alert-pad-block);
   padding-inline: var(--alert-pad-inline);
-  background: var(--ui-bg, transparent);
-  color: var(--ui-fg, var(--text));
-  border: var(--border-width) solid var(--ui-border, var(--border));
-  border-inline-start-color: var(
-    --alert-border-inline-start-color,
-    var(--ui-border, var(--border))
-  );
+  background: var(--alert-bg);
+  color: var(--alert-fg);
+  border: var(--border-width) solid var(--alert-border);
+  border-inline-start-color: var(--alert-border-inline-start-color, var(--alert-border));
   border-inline-start-width: var(--alert-border-inline-start-width, var(--border-width));
-  border-radius: var(--radius-lg);
+  border-radius: var(--alert-radius, var(--radius-lg));
   font-size: var(--alert-font-size);
 }
 
@@ -58,21 +64,10 @@
   margin-block-end: 0;
 }
 
-/* Alerts are soft by default. Use .solid or .outline for stronger emphasis. */
-.alert.solid {
-  --ui-bg: var(--intent, var(--neutral));
-  --ui-fg: var(--intent-fg, var(--neutral-fg));
-  --ui-border: transparent;
-}
-
-.alert.outline {
-  --ui-bg: transparent;
-  --ui-fg: var(--intent, var(--text));
-  --ui-border: var(--intent, var(--border));
-}
-
+/* Alerts are soft by default. .solid and .outline need no local rules — the
+   shared variant plumbing in variants.css sets --ui-* that alert consumes. */
 @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(
@@ -84,8 +79,8 @@
   }
 }
 
-/* Decorative leading icon */
-.alert > :first-child[aria-hidden="true"] {
+/* Decorative leading icon — use .alert-icon on the icon element. */
+.alert > .alert-icon {
   display: inline-block;
   flex: none;
   inline-size: var(--alert-icon-size);
@@ -95,33 +90,84 @@
   vertical-align: -0.125em;
 }
 
+/* Dismiss — compact close button for inline alerts. Transparent at rest with
+   a reduced opacity glyph so it stays secondary inside an already-colored
+   alert; hover reinforces it via the shared overlay. Uses the shared
+   --icon-close mask, so no icon font or text glyph is required in the markup.
+   Standard alerts place it as a direct trailing child; admonitions place it
+   inside .alert-title (see below). */
+.alert-dismiss {
+  --alert-dismiss-size: 1.75rem;
+  --alert-dismiss-icon-size: 0.875rem;
+
+  display: inline-grid;
+  place-items: center;
+  inline-size: var(--alert-dismiss-size);
+  block-size: var(--alert-dismiss-size);
+  flex: none;
+  padding: 0;
+  border: 0;
+  border-radius: var(--radius);
+  background: transparent;
+  color: currentColor;
+  opacity: 0.65;
+  cursor: pointer;
+}
+
+.alert-dismiss::before {
+  content: "";
+  inline-size: var(--alert-dismiss-icon-size);
+  block-size: var(--alert-dismiss-icon-size);
+  background: currentColor;
+  -webkit-mask: var(--icon-close) center / contain no-repeat;
+  mask: var(--icon-close) center / contain no-repeat;
+}
+
+@media (hover: hover) {
+  .alert-dismiss:hover {
+    background: var(--hover-overlay);
+    opacity: 1;
+  }
+}
+
+/* Grid anatomy — activated by a leading icon, a trailing dismiss button, or
+   both. Icon and dismiss are pinned to the outer columns; anything else (the
+   message content) flows into the remaining text column. */
 @supports selector(.alert:has(> *)) {
-  .alert:has(> :first-child[aria-hidden="true"]) {
+  .alert:has(> .alert-icon, > .alert-dismiss) {
     display: grid;
-    grid-template-columns: auto minmax(0, 1fr);
+    grid-template-columns: minmax(0, 1fr);
     align-items: var(--items-align, start);
-    column-gap: var(--space-3);
+    column-gap: var(--space-30);
   }
 
-  .alert:has(> :first-child[aria-hidden="true"]) > :first-child {
+  .alert:has(> .alert-icon) {
+    grid-template-columns: auto minmax(0, 1fr);
+  }
+
+  .alert:has(> .alert-icon) > .alert-icon {
     grid-column: 1;
     grid-row: 1 / -1;
     display: inline-grid;
     place-items: center;
-    inline-size: var(--alert-icon-size);
-    block-size: var(--alert-icon-size);
     margin-block-start: 0.125em;
-    font-size: var(--alert-icon-size);
-    line-height: 1;
   }
 
-  .alert:has(> :first-child[aria-hidden="true"]) > :first-child:is(svg, i) {
-    inline-size: var(--alert-icon-size);
-    block-size: var(--alert-icon-size);
+  .alert:has(> .alert-icon) > :not(.alert-icon, .alert-dismiss) {
+    grid-column: 2;
   }
 
-  .alert:has(> :first-child[aria-hidden="true"]) > :not(:first-child) {
-    grid-column: 2;
+  .alert:has(> .alert-dismiss) {
+    grid-template-columns: minmax(0, 1fr) auto;
+  }
+
+  .alert:has(> .alert-icon):has(> .alert-dismiss) {
+    grid-template-columns: auto minmax(0, 1fr) auto;
+  }
+
+  .alert:has(> .alert-dismiss) > .alert-dismiss {
+    grid-column: -2 / -1;
+    grid-row: 1;
   }
 }
 
@@ -135,3 +181,70 @@
    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 a thick accent border on the leading edge.
+   The thickness follows the shared --alert-border-inline-start-width hook. */
+.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)));
+}
+
+/* Admonition — structured static box with a tinted title bar and a body
+   that rests on the page surface. Not collapsible — use .accordion inside
+   the body if the content needs to be expandable. */
+.alert.admonition {
+  padding: 0;
+  display: block;
+  overflow: clip;
+  border-color: var(--intent, var(--border));
+}
+
+.alert.admonition > .alert-title {
+  display: flex;
+  align-items: center;
+  gap: var(--space-20);
+  padding-block: var(--alert-pad-block);
+  padding-inline: var(--alert-pad-inline);
+  border-start-start-radius: calc(var(--alert-radius, var(--radius-lg)) - var(--border-width));
+  border-start-end-radius: calc(var(--alert-radius, var(--radius-lg)) - var(--border-width));
+}
+
+/* Dismiss inside an admonition title bar rides the inline end. */
+.alert.admonition > .alert-title > .alert-dismiss {
+  margin-inline-start: auto;
+}
+
+@supports (color: color-mix(in oklch, red, white)) {
+  .alert.admonition > .alert-title {
+    background: color-mix(
+      in oklch,
+      var(--surface) var(--soft-bg-mix),
+      var(--intent, var(--neutral))
+    );
+  }
+}
+
+@supports not (color: color-mix(in oklch, red, white)) {
+  .alert.admonition > .alert-title {
+    background: var(--intent, var(--neutral));
+    color: var(--intent-fg, var(--neutral-fg));
+  }
+}
+
+.alert.admonition > .alert-body {
+  padding-block: var(--alert-pad-block);
+  padding-inline: var(--alert-pad-inline);
+  background: var(--surface);
+  color: var(--text);
+}
+
+.alert.admonition > .alert-body > :first-child {
+  margin-block-start: 0;
+}
+
+.alert.admonition > .alert-body > :last-child {
+  margin-block-end: 0;
+}

package/src/css/components/avatar.css

@@ -4,18 +4,26 @@
  * The visual box stays the same across semantic elements. Grouping and status
  * dots (an empty .badge child) compose around the avatar without changing its
  * meaning.
+ *
+ * Public hooks:
+ * --avatar-size
+ * --avatar-radius
+ * --avatar-font-size
+ * --avatar-stack-size
+ * --avatar-stack-font-size
+ * --avatar-stack-overlap
+ * --avatar-stack-ring
+ *
+ * Internal:
+ * --avatar-bg
+ * --avatar-fg
+ * --avatar-status-translate-x
  */
 /* Intent boundary — inherited intents do not tint this component.
    Local intent classes still win because :where() has zero specificity. */
 :where(.avatar) {
-  /* @sync intent-boundary */
   --intent: initial;
   --intent-fg: initial;
-  --ui-bg: initial;
-  --ui-fg: initial;
-  --ui-border: initial;
-  --ui-hover-bg: initial;
-  /* @sync intent-boundary */
 }
 
 .avatar {
@@ -107,10 +115,8 @@ button.avatar {
   transition: opacity var(--duration);
 }
 
-@media (hover: hover) {
-  :where(a.avatar, button.avatar):not(:where(:disabled, [aria-disabled="true"])):hover::after {
-    opacity: 1;
-  }
+:where(a.avatar, button.avatar):not(:where(:disabled, [aria-disabled="true"])):hover::after {
+  opacity: 1;
 }
 
 :where(a.avatar, button.avatar):not(:where(:disabled, [aria-disabled="true"])):active {

package/src/css/components/badge.css

@@ -1,36 +1,49 @@
 /*
  * 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.
+ *
+ * Public hooks:
+ * --badge-size
+ * --badge-pad-x
+ * --badge-font-size
+ * --badge-dot-size
+ * --badge-radius
+ *
+ * Internal:
+ * --badge-bg
+ * --badge-fg
+ * --badge-border
  */
 /* Intent boundary — inherited intents do not tint this component.
    Local intent classes still win because :where() has zero specificity. */
 :where(.badge) {
-  /* @sync intent-boundary */
   --intent: initial;
   --intent-fg: initial;
   --ui-bg: initial;
   --ui-fg: initial;
   --ui-border: initial;
   --ui-hover-bg: initial;
-  /* @sync intent-boundary */
 }
 
 .badge {
-  --badge-size: var(--variant-compact-size, 1.5rem);
+  --badge-size: var(--density-compact-size);
   --badge-pad-x: 0.55em;
-  --badge-font-size: var(--variant-compact-font-size, 0.8125rem);
+  --badge-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-radius: 999px;
+  --badge-bg: var(--ui-bg, var(--surface-subtle));
+  --badge-fg: var(--ui-fg, var(--intent, var(--text)));
+  --badge-border: var(--ui-border, var(--border));
+  --badge-radius: var(--radius-full);
 
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 0.35em;
+  inline-size: fit-content;
+  max-inline-size: 100%;
   min-block-size: var(--badge-size);
   padding-inline: var(--badge-pad-x);
   border: var(--border-width) solid var(--badge-border);
@@ -49,8 +62,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);
@@ -76,28 +112,44 @@
   cursor: pointer;
 }
 
-@media (hover: hover) {
-  .badge > button:not(:disabled):hover {
-    background: var(--hover-overlay);
-  }
+.badge > button:not(:disabled):hover {
+  background: var(--hover-overlay);
+}
+
+/* Hover recipes — sets --ui-hover-bg consumed by the hover rule below.
+   Declared outside :hover like button.css for the same reason. */
+:is(a.badge, button.badge).outline {
+  --ui-hover-bg: var(--surface-subtle);
 }
 
-/* .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. */
-@media (hover: hover) {
-  :where(a.badge, button.badge):not(:where(:disabled, [aria-disabled="true"])):hover {
-    background: var(--ui-hover-bg, var(--badge-bg));
+@supports (color: color-mix(in oklch, red, white)) {
+  :is(a.badge, button.badge):is(.solid, :empty) {
+    --ui-hover-bg: color-mix(in oklch, var(--intent, var(--neutral)) 88%, black);
+  }
+
+  :is(a.badge, button.badge):where(:not(.solid, .outline, :empty)) {
+    --ui-hover-bg: color-mix(
+      in oklch,
+      var(--surface) calc(var(--soft-bg-mix) - var(--soft-hover-alpha)),
+      var(--intent, var(--neutral))
+    );
   }
 
-  :where(a.badge, button.badge):not(:where(:disabled, [aria-disabled="true"], .outline)):hover {
-    box-shadow: inset 0 0 0 999px var(--hover-overlay);
+  :is(a.badge, button.badge).outline {
+    --ui-hover-bg: color-mix(in oklch, var(--surface-subtle) 92%, var(--intent, var(--neutral)));
   }
 }
 
+:where(a.badge, button.badge):not(:where(:disabled, [aria-disabled="true"])):hover {
+  background: var(--ui-hover-bg, var(--badge-bg));
+}
+
+:where(a.badge, button.badge):not(:where(:disabled, [aria-disabled="true"], .outline)):hover {
+  box-shadow: inset 0 0 0 999px var(--hover-overlay);
+}
+
 button.badge {
   cursor: pointer;
-  font: inherit;
 }
 
 button.badge:disabled,
@@ -111,27 +163,18 @@ a.badge[aria-disabled="true"] {
 }
 
 @media (forced-colors: active) {
-  .badge {
-    border-color: ButtonText;
-    background: Canvas;
-    color: CanvasText;
-    box-shadow: none;
-  }
-
   .badge:empty {
     background: ButtonText;
   }
 
-  @media (hover: hover) {
-    :where(a.badge, button.badge):hover:not(:where(:disabled, [aria-disabled="true"])) {
-      outline: var(--border-width) solid ButtonText;
-      outline-offset: 2px;
-    }
+  :where(a.badge, button.badge):hover:not(:where(:disabled, [aria-disabled="true"])) {
+    outline: var(--border-width) solid ButtonText;
+    outline-offset: 2px;
+  }
 
-    .badge > button:not(:disabled):hover {
-      outline: var(--border-width) solid currentColor;
-      outline-offset: 1px;
-    }
+  .badge > button:not(:disabled):hover {
+    outline: var(--border-width) solid currentColor;
+    outline-offset: 1px;
   }
 
   button.badge:disabled,

package/src/css/components/breadcrumb.css

@@ -8,7 +8,7 @@
   display: flex;
   flex-wrap: wrap;
   align-items: center;
-  gap: var(--space-1);
+  gap: var(--space-10);
   margin: 0;
   padding: 0;
   color: var(--text-subtle);
@@ -19,7 +19,7 @@
 .breadcrumb li {
   display: inline-flex;
   align-items: center;
-  gap: var(--space-1);
+  gap: var(--space-10);
 }
 
 .breadcrumb li + li::before {
@@ -32,25 +32,17 @@
   text-decoration: none;
 }
 
-@media (hover: hover) {
-  .breadcrumb
-    li:not(:where([aria-current]:not([aria-current="false"])))
-    > a:hover:not(:where([aria-current]:not([aria-current="false"]))) {
-    color: var(--text);
-    text-decoration: underline;
-  }
+.breadcrumb a:not([aria-current]):hover,
+.breadcrumb a[aria-current="false"]:hover {
+  color: var(--text);
+  text-decoration: underline;
 }
 
 .breadcrumb a:focus-visible {
   border-radius: var(--radius-sm);
 }
 
-.breadcrumb a:where([aria-current]:not([aria-current="false"])) {
-  color: var(--text);
-  font-weight: var(--font-weight-medium);
-}
-
-.breadcrumb li:where([aria-current]:not([aria-current="false"])) > :where(a, span) {
+.breadcrumb :where(a, span):where([aria-current]:not([aria-current="false"])) {
   color: var(--text);
   font-weight: var(--font-weight-medium);
 }

package/src/css/components/busy.css

@@ -4,6 +4,12 @@
  * A non-button element with aria-busy="true" and a direct last-child .spinner
  * shows that spinner as a centered overlay over a faded surface. Buttons keep
  * their spinners inline (e.g. .btn[aria-busy] > .spinner stays inline-flex).
+ *
+ * Public hooks:
+ * --busy-overlay-bg
+ *
+ * Internal:
+ * --spinner-size (overlay copy of the shared spinner hook)
  */
 [aria-busy] > .spinner:last-child {
   display: none;
@@ -28,6 +34,7 @@
   }
 
   [aria-busy="true"]:not(.btn) > .spinner:last-child {
+    --spinner-size: 2rem;
     position: absolute;
     inset: 0;
     z-index: 2;