actual-css 0.1.0

package/src/css/components/actions.css

@@ -0,0 +1,21 @@
+/*
+ * Actions — a horizontal action-button cluster.
+ *
+ * Composes with .btn (or any inline element) and feeds layout via the shared
+ * --gap token.
+ */
+.actions {
+  --gap: var(--space-2);
+
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--gap);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.actions > li {
+  margin: 0;
+}

package/src/css/components/alert.css

@@ -0,0 +1,137 @@
+/*
+ * Alerts for inline feedback and status messages.
+ *
+ * Keeps alert defaults local while consuming the shared --ui-* variant
+ * plumbing for emphasis.
+ *
+ * --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.
+ */
+/* 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));
+
+  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))
+  );
+  border-inline-start-width: var(--alert-border-inline-start-width, var(--border-width));
+  border-radius: var(--radius-lg);
+  font-size: var(--alert-font-size);
+}
+
+.alert > * {
+  min-inline-size: 0;
+}
+
+.alert > :first-child {
+  margin-block-start: 0;
+}
+
+.alert > :last-child {
+  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));
+}
+
+@supports (color: color-mix(in oklch, red, white)) {
+  .alert:where(:not(.solid, .outline)) {
+    /* @sync soft-recipe */
+    --ui-bg: color-mix(in oklch, var(--surface) var(--soft-bg-mix), var(--intent, var(--neutral)));
+    --ui-border: color-mix(
+      in oklch,
+      var(--surface) var(--soft-border-mix),
+      var(--intent, var(--neutral))
+    );
+    /* @sync soft-recipe */
+  }
+}
+
+/* Decorative leading icon */
+.alert > :first-child[aria-hidden="true"] {
+  display: inline-block;
+  flex: none;
+  inline-size: var(--alert-icon-size);
+  block-size: var(--alert-icon-size);
+  font-size: var(--alert-icon-size);
+  line-height: 1;
+  vertical-align: -0.125em;
+}
+
+@supports selector(.alert:has(> *)) {
+  .alert:has(> :first-child[aria-hidden="true"]) {
+    display: grid;
+    grid-template-columns: auto minmax(0, 1fr);
+    align-items: var(--items-align, start);
+    column-gap: var(--space-3);
+  }
+
+  .alert:has(> :first-child[aria-hidden="true"]) > :first-child {
+    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(> :first-child[aria-hidden="true"]) > :not(:first-child) {
+    grid-column: 2;
+  }
+}
+
+/* Links */
+.alert :where(a:not(.btn)) {
+  color: inherit;
+  font-weight: var(--font-weight-strong);
+}
+
+/* Forced colors: no override needed. The always-on border gets a forced
+   readable color, and text on a Highlight surface would trigger Chromium's
+   Canvas backplate (unreadable) — so .solid intentionally falls back to the
+   default look. */

package/src/css/components/avatar.css

@@ -0,0 +1,199 @@
+/*
+ * Avatars for initials, images, links, and buttons.
+ *
+ * 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.
+ */
+/* 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 {
+  --avatar-size: var(--avatar-stack-size, 2.25rem);
+  --avatar-radius: var(--radius-full);
+  --avatar-font-size: var(--avatar-stack-font-size, var(--font-size-sm));
+  --avatar-bg: var(--intent, var(--surface-subtle));
+  --avatar-fg: var(--intent-fg, var(--tone-fg, var(--text-muted)));
+
+  position: relative;
+  display: inline-grid;
+  place-items: center;
+  inline-size: var(--avatar-size);
+  block-size: var(--avatar-size);
+  overflow: visible;
+  padding: 0;
+  border: 0;
+  border-radius: var(--avatar-radius);
+  background: var(--avatar-bg);
+  color: var(--avatar-fg);
+  font: inherit;
+  font-size: var(--avatar-font-size);
+  font-weight: var(--font-weight-strong);
+  line-height: 1;
+  text-decoration: none;
+  vertical-align: middle;
+  user-select: none;
+  transition:
+    box-shadow var(--duration),
+    opacity var(--duration),
+    transform var(--duration);
+}
+
+/* Forced colors wipe the background and the stack ring (box-shadow), so the
+   shape needs a real border to stay visible. */
+@media (forced-colors: active) {
+  .avatar {
+    border: var(--border-width) solid CanvasText;
+  }
+
+  :where(a.avatar, button.avatar)::after {
+    display: none;
+  }
+}
+
+.avatar > :first-child:not(:where(img, picture, .badge)) {
+  display: inline-grid;
+  place-items: center;
+  inline-size: 100%;
+  block-size: 100%;
+  overflow: hidden;
+  border-radius: inherit;
+}
+
+.avatar > img,
+.avatar > picture {
+  display: block;
+  inline-size: 100%;
+  block-size: 100%;
+  overflow: hidden;
+  border-radius: inherit;
+}
+
+.avatar > img,
+.avatar > picture > img {
+  inline-size: 100%;
+  block-size: 100%;
+  object-fit: cover;
+  border-radius: inherit;
+}
+
+.avatar > picture > img {
+  display: block;
+}
+
+button.avatar {
+  appearance: none;
+  cursor: pointer;
+}
+
+:where(a.avatar, button.avatar)::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  background: var(--hover-overlay);
+  opacity: 0;
+  pointer-events: none;
+  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"])):active {
+  transform: translateY(1px);
+}
+
+button.avatar:disabled,
+a.avatar[aria-disabled="true"] {
+  cursor: not-allowed;
+  opacity: var(--disabled-opacity);
+}
+
+a.avatar[aria-disabled="true"] {
+  pointer-events: none;
+}
+
+.avatar.sm {
+  --avatar-stack-size: 1.75rem;
+  --avatar-stack-font-size: var(--font-size-xs);
+}
+
+.avatar.lg {
+  --avatar-stack-size: 3rem;
+  --avatar-stack-font-size: var(--font-size-lg);
+}
+
+/* Status dot: an empty .badge positioned at the avatar's bottom-end corner.
+   The dot conveys no text — always pair it with an aria-label on the badge. */
+.avatar > .badge:empty {
+  --avatar-status-translate-x: 50%;
+
+  position: absolute;
+  inset-block-end: var(--indicator-offset);
+  inset-inline-end: var(--indicator-offset);
+  z-index: 1;
+  box-shadow: 0 0 0 2px var(--indicator-ring);
+  transform: translate(var(--avatar-status-translate-x), 50%);
+}
+
+.avatar:dir(rtl) > .badge:empty {
+  --avatar-status-translate-x: -50%;
+}
+
+/* Avatar stack — explicit class for overlapping avatar groups.
+   Does not rely on role="group" auto-detection. */
+.avatar-stack {
+  --avatar-stack-overlap: calc(var(--avatar-stack-size, 2.25rem) / -4);
+  --avatar-stack-ring: 2px;
+
+  display: inline-flex;
+  align-items: center;
+}
+
+.avatar-stack.sm {
+  --avatar-stack-size: 1.75rem;
+  --avatar-stack-font-size: var(--font-size-xs);
+}
+
+.avatar-stack.lg {
+  --avatar-stack-size: 3rem;
+  --avatar-stack-font-size: var(--font-size-lg);
+}
+
+@supports selector(:has(> .avatar)) {
+  .avatar-stack:has(> .avatar.sm) {
+    --avatar-stack-size: 1.75rem;
+    --avatar-stack-font-size: var(--font-size-xs);
+  }
+
+  .avatar-stack:has(> .avatar.lg) {
+    --avatar-stack-size: 3rem;
+    --avatar-stack-font-size: var(--font-size-lg);
+  }
+}
+
+.avatar-stack > .avatar {
+  box-shadow: 0 0 0 var(--avatar-stack-ring) var(--surface);
+}
+
+.avatar-stack > .avatar + .avatar {
+  margin-inline-start: var(--avatar-stack-overlap);
+}
+
+.avatar-stack > .avatar:is(:hover, :focus-visible) {
+  z-index: 1;
+}

package/src/css/components/badge.css

@@ -0,0 +1,143 @@
+/*
+ * 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.
+ */
+/* 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-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-radius: 999px;
+
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.35em;
+  min-block-size: var(--badge-size);
+  padding-inline: var(--badge-pad-x);
+  border: var(--border-width) solid var(--badge-border);
+  border-radius: var(--badge-radius);
+  background: var(--badge-bg);
+  color: var(--badge-fg);
+  font-size: var(--badge-font-size);
+  font-weight: var(--font-weight-strong);
+  line-height: 1;
+  text-decoration: none;
+  white-space: nowrap;
+  transition:
+    background-color var(--duration),
+    border-color var(--duration),
+    color var(--duration),
+    box-shadow var(--duration);
+}
+
+.badge:empty {
+  --badge-size: var(--badge-dot-size);
+  padding: 0;
+  border: 0;
+  inline-size: var(--badge-size);
+  block-size: var(--badge-size);
+}
+
+.badge > button {
+  display: inline-grid;
+  place-items: center;
+  flex: 0 0 auto;
+  min-inline-size: 1.5rem;
+  min-block-size: 1.5rem;
+  margin-block: -0.25rem;
+  margin-inline-start: -0.15em;
+  margin-inline-end: -0.45em;
+  padding: 0.25rem;
+  border: 0;
+  border-radius: var(--radius-full);
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  line-height: 1;
+  cursor: pointer;
+}
+
+@media (hover: hover) {
+  .badge > button:not(:disabled):hover {
+    background: var(--hover-overlay);
+  }
+}
+
+/* .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));
+  }
+
+  :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,
+.badge[aria-disabled="true"] {
+  opacity: var(--disabled-opacity);
+  cursor: not-allowed;
+}
+
+a.badge[aria-disabled="true"] {
+  pointer-events: none;
+}
+
+@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;
+    }
+
+    .badge > button:not(:disabled):hover {
+      outline: var(--border-width) solid currentColor;
+      outline-offset: 1px;
+    }
+  }
+
+  button.badge:disabled,
+  .badge[aria-disabled="true"] {
+    border-color: GrayText;
+    background: Canvas;
+    color: GrayText;
+  }
+}

package/src/css/components/breadcrumb.css

@@ -0,0 +1,56 @@
+/*
+ * Breadcrumb — current-location trail from the site root.
+ *
+ * Inline list separated by "/". Mark the current page with `aria-current="page"`
+ * either on the item or on the current link.
+ */
+.breadcrumb {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--space-1);
+  margin: 0;
+  padding: 0;
+  color: var(--text-subtle);
+  font-size: var(--font-size-sm);
+  list-style: none;
+}
+
+.breadcrumb li {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-1);
+}
+
+.breadcrumb li + li::before {
+  content: "/";
+  color: var(--text-subtle);
+}
+
+.breadcrumb a {
+  color: var(--text-muted);
+  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: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) {
+  color: var(--text);
+  font-weight: var(--font-weight-medium);
+}

package/src/css/components/busy.css

@@ -0,0 +1,44 @@
+/*
+ * Busy overlay — non-button loading state.
+ *
+ * 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).
+ */
+[aria-busy] > .spinner:last-child {
+  display: none;
+}
+
+[aria-busy="true"] > .spinner:last-child {
+  display: inline-block;
+}
+
+@supports selector([aria-busy="true"]:has(> .spinner:last-child)) {
+  [aria-busy="true"]:not(.btn):has(> .spinner:last-child) {
+    position: relative;
+  }
+
+  [aria-busy="true"]:not(.btn):has(> .spinner:last-child)::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    z-index: 1;
+    border-radius: inherit;
+    background: var(--busy-overlay-bg, var(--surface));
+  }
+
+  [aria-busy="true"]:not(.btn) > .spinner:last-child {
+    position: absolute;
+    inset: 0;
+    z-index: 2;
+    margin: auto;
+    display: block;
+  }
+}
+
+@supports (selector([aria-busy="true"]:has(> .spinner:last-child))) and
+  (color: color-mix(in oklch, red, white)) {
+  [aria-busy="true"]:not(.btn):has(> .spinner:last-child)::before {
+    background: color-mix(in oklch, var(--busy-overlay-bg, var(--surface)), transparent 20%);
+  }
+}