actual-css 0.11.1 → 0.12.0

package/src/css/core/variants.css

@@ -11,17 +11,21 @@
  *   components/badge.css   — .badge default soft behind explicit --ui-*
  *   components/alert.css   — .alert default soft behind explicit --ui-*
  *
- * .compact/.spacious set inherited density tokens: spacing rhythm and geometry
- * only, plus a slight typographic width bonus. Density never changes font size
- * or icon size. Controls consume --control-size; non-control components may
+ * Three axes, each predictable on its own:
+ *   .sm/.lg            size    — typography + geometry, local to a component
+ *   .compact/.spacious density — rhythm + geometry, inherited by a region
+ *   .tight/.loose      rhythm  — --gap only, inherited by a region
+ *
+ * Density never touches typography: no font size, icon size or font width.
+ * A width bonus through font-stretch only showed on typefaces with a wdth axis,
+ * so .compact meant something different per OS and font; a condensed table is
+ * a typographic decision for the application. Controls consume --control-size
+ * and --control-pad-x, so a compact control is shorter and narrower (a height
+ * change alone read as the same control squashed); non-control components may
  * consume --density-* when the context should affect their local rhythm.
- * .compact applies --font-width-dense through font-stretch (a variable wdth
- * axis when available, otherwise normal width-face matching); layout must
- * never depend on the narrowing being available. .spacious restores
- * --font-width, so a spacious island inside a compact context returns to the
- * normal width exactly as it restores its own gap, spacing, and control size.
- * Themes whose typeface has no useful width axis opt out with
- * --font-width-dense: 100%.
+ *
+ * .tight/.loose reuse the density --gap steps, so a tight row and a compact
+ * one share one rhythm.
  *
  * .sm/.lg are local size roles, not shared measurements. Shared control
  * participants below map both typography and geometry; components with
@@ -60,18 +64,35 @@
   --ui-border: var(--border);
 }
 
+/* Each boundary selects a control step twice: the values, resolved here, and
+   the 0/1 step weights a nested [data-theme] island rebuilds them from
+   (tokens.css). */
 .compact {
   --gap: var(--space-20);
   --density-space: var(--space-20);
   --control-size: var(--control-size-sm);
-  font-stretch: var(--font-width-dense);
+  --control-pad-x: var(--control-pad-x-sm);
+  --control-step-sm: 1;
+  --control-step-md: 0;
+  --control-step-lg: 0;
 }
 
 .spacious {
   --gap: var(--space-50);
   --density-space: var(--space-50);
   --control-size: var(--control-size-lg);
-  font-stretch: var(--font-width);
+  --control-pad-x: var(--control-pad-x-lg);
+  --control-step-sm: 0;
+  --control-step-md: 0;
+  --control-step-lg: 1;
+}
+
+.tight {
+  --gap: var(--space-20);
+}
+
+.loose {
+  --gap: var(--space-50);
 }
 
 /* Shared control scale. Wrappers are listed when their descendants form one
@@ -100,7 +121,10 @@
 ).sm {
   --control-size: var(--control-size-sm);
   --control-font-size: var(--font-size-sm);
-  --control-pad-x: var(--font-size-sm);
+  --control-pad-x: var(--control-pad-x-sm);
+  --control-step-sm: 1;
+  --control-step-md: 0;
+  --control-step-lg: 0;
 }
 
 :where(
@@ -124,7 +148,10 @@
 ).lg {
   --control-size: var(--control-size-lg);
   --control-font-size: var(--font-size-lg);
-  --control-pad-x: var(--font-size-lg);
+  --control-pad-x: var(--control-pad-x-lg);
+  --control-step-sm: 0;
+  --control-step-md: 0;
+  --control-step-lg: 1;
 }
 
 /* Modern color enhancement. Baseline variant values above remain usable

package/src/css/forms/form-actions.css

@@ -1,30 +1,35 @@
 /*
- * Form actions — bottom form bar with sticky variant.
+ * Form actions — the role of a .cluster action row that closes a form.
  *
  * Docs: docs/pages/forms/form-actions.md
  *
- * A flex cluster of buttons/actions that closes a form. The sticky variant
- * docks to the viewport bottom with a translucent blur where supported; at
- * rest it stays visually neutral so it does not double as a separator.
+ * Markup: `<div class="cluster form-actions">`. The cluster owns the row
+ * (flex, wrap, gap); this role owns the form-specific alignment policy and the
+ * opt-in sticky variant. The distance to the fields above belongs to the
+ * parent layout (.stack on the form), never to a margin here: a margin would
+ * add to a stack's gap. The sticky variant docks to the viewport bottom with a
+ * translucent blur where supported; at rest it stays visually neutral so it
+ * does not double as a separator.
  *
  * Public hooks:
  * --form-actions-align
  * --form-actions-justify
- * --form-actions-margin-block-start
  *
  * Internal:
  * --form-actions-sticky-block-offset (owned by .form-actions.sticky)
  * --form-actions-sticky-inline-offset (owned by .form-actions.sticky)
  * --form-actions-sticky-padding (owned by .form-actions.sticky)
  */
+
+/* The policy hooks write the properties themselves rather than relaying
+   --cluster-*: a relay would inherit into any .cluster nested in the row.
+   These are equal-specificity overrides of .cluster, so they win only because
+   forms load after layout in the official bundle (tests/css-audit.test.js
+   guards the order); utilities load later and keep the author's last word. On
+   this row --cluster-justify/--cluster-align have no effect. */
 .form-actions {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  gap: var(--gap);
   align-items: var(--form-actions-align, center);
   justify-content: var(--form-actions-justify, flex-start);
-  margin-block-start: var(--form-actions-margin-block-start, var(--space-50));
 }
 
 /* Opt-in sticky variant. When the bar is not stuck (at rest) the translucent

package/src/css/layout/cluster.css

@@ -9,6 +9,7 @@
  * --cluster-wrap
  *
  * Child contract: direct-child margins are reset, spacing comes from --gap.
+ * A ul/ol/menu keeps its semantics but loses list chrome (see below).
  */
 .cluster {
   display: flex;
@@ -22,3 +23,13 @@
 .cluster > * {
   margin: 0;
 }
+
+/* Horizontal, wrapping layout is incompatible with list markers and native
+   indentation: a ul/ol/menu applied with .cluster stays a list in the DOM, but
+   its visual chrome would be accidental. .stack intentionally leaves this
+   alone — a vertical list can keep its numbers. */
+:where(ul, ol, menu).cluster {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}

package/src/css/layout/topbar.css

@@ -1,8 +1,9 @@
 /*
  * Sticky, frosted top bar shell for app/dashboard shells (persistent
  * sidebar + topbar layouts). Owns positioning, stacking, and the frosted
- * background only — row content (search, breadcrumb, actions) stays local
- * to the page.
+ * background; it also lays its children out as a default row that a layout
+ * primitive on the same element (such as .cluster) replaces. Row content
+ * (search, breadcrumb, actions) stays local to the page.
  *
  * Docs: docs/pages/layout/topbar.md
  *
@@ -16,16 +17,21 @@
   inset-block-start: 0;
   z-index: var(--z-sticky);
   isolation: isolate;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  gap: var(--gap);
   padding-block: var(--space-30);
   padding-inline: var(--space-40);
   border-block-end: var(--border-width) solid var(--border);
   background: var(--surface);
 }
 
+/* The row is a default at zero specificity: .topbar and the primitives share
+   layout/, so at class weight their file order alone would pick the winner. */
+:where(.topbar) {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: var(--gap);
+}
+
 /* Both conditions are required: the translucent background contains var(),
    so a browser with backdrop-filter but not color-mix (e.g. Safari < 16.2)
    would accept the declaration at parse time, fail it at computed-value

package/src/css/utilities/base.css

@@ -74,6 +74,11 @@
   align-items: end;
 }
 
+.items-baseline {
+  --items-align: baseline;
+  align-items: baseline;
+}
+
 .muted {
   color: var(--text-muted);
 }

package/src/css/utilities/extra.css

@@ -10,9 +10,6 @@
  * - utilities consume the current context instead of defining their own -sm/-lg scale.
  * - optional utilities extend core utilities, they do not re-express them.
  * - follow verbose .{property}-{value} naming.
- *
- * Internal:
- * --cluster-justify (local relay consumed by .cluster)
  */
 
 /* Display */
@@ -87,23 +84,22 @@
   flex-wrap: nowrap;
 }
 
+/* The property is written directly, never relayed through the cluster hook:
+   a relay would inherit into every .cluster nested inside. Utilities load last,
+   so the direct declaration already beats .cluster at equal specificity. */
 .justify-content-start {
-  --cluster-justify: flex-start;
   justify-content: flex-start;
 }
 
 .justify-content-center {
-  --cluster-justify: center;
   justify-content: center;
 }
 
 .justify-content-end {
-  --cluster-justify: flex-end;
   justify-content: flex-end;
 }
 
 .justify-content-space-between {
-  --cluster-justify: space-between;
   justify-content: space-between;
 }
 

package/src/tooling/color.js

@@ -0,0 +1,65 @@
+/*
+ * sRGB color math shared by `actual-css contrast`, the repository reports and
+ * the browser tests.
+ * Colors are [r, g, b, a] byte arrays as returned by RASTERIZE in the page;
+ * plain [r, g, b] triplets are accepted and treated as opaque.
+ */
+
+/*
+ * Page-side rasterizer, injected into a view.evaluate() program as
+ * `const rgba = ${RASTERIZE};`. getComputedStyle returns color-mix() and
+ * light-dark() results as oklab() or color(), so a 1x1 canvas turns any
+ * computed color into sRGB bytes. Alpha is kept so contrast() can refuse a
+ * translucent color instead of measuring it as if it were opaque.
+ */
+export const RASTERIZE = `(() => {
+  const canvas = Object.assign(document.createElement("canvas"), { width: 1, height: 1 });
+  const ctx = canvas.getContext("2d", { willReadFrequently: true });
+  return (value) => {
+    ctx.clearRect(0, 0, 1, 1);
+    ctx.fillStyle = value;
+    ctx.fillRect(0, 0, 1, 1);
+    return [...ctx.getImageData(0, 0, 1, 1).data];
+  };
+})()`;
+
+/* 0.04045 is the sRGB (IEC 61966-2-1) threshold and the one WCAG 2.2 defines.
+   WCAG 2.0/2.1 printed 0.03928, from an older sRGB draft. No 8-bit channel
+   falls between the two (10/255 = 0.0392, 11/255 = 0.0431), so ratios are
+   identical either way. */
+const toLinear = (byte) => {
+  const c = byte / 255;
+  return c <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;
+};
+
+/* WCAG 2 relative luminance. */
+export const luminance = ([r, g, b]) =>
+  0.2126 * toLinear(r) + 0.7152 * toLinear(g) + 0.0722 * toLinear(b);
+
+/* WCAG 2 contrast ratio, 1 to 21. The formula has no alpha: a translucent
+   color must be composited over its real background before it is measured. */
+export function contrast(a, b) {
+  if (a[3] < 255 || b[3] < 255) {
+    throw new Error(`contrast() needs opaque colors, got [${a}] and [${b}]`);
+  }
+  const [hi, lo] = [luminance(a), luminance(b)].sort((x, y) => y - x);
+  return (hi + 0.05) / (lo + 0.05);
+}
+
+/* OKLCH of an sRGB color: L 0-1, C chroma, h degrees. */
+export function oklch([r, g, b]) {
+  const [lr, lg, lb] = [r, g, b].map(toLinear);
+  const l = Math.cbrt(0.4122214708 * lr + 0.5363325363 * lg + 0.0514459929 * lb);
+  const m = Math.cbrt(0.2119034982 * lr + 0.6806995451 * lg + 0.1073969566 * lb);
+  const s = Math.cbrt(0.0883024619 * lr + 0.2817188376 * lg + 0.6299787005 * lb);
+  const L = 0.2104542553 * l + 0.793617785 * m - 0.0040720468 * s;
+  const A = 1.9779984951 * l - 2.428592205 * m + 0.4505937099 * s;
+  const B = 0.0259040371 * l + 0.7827717662 * m - 0.808675766 * s;
+  return { L, C: Math.hypot(A, B), h: ((Math.atan2(B, A) * 180) / Math.PI + 360) % 360 };
+}
+
+/* Shortest arc between two hues, in degrees. */
+export const hueDistance = (a, b) => {
+  const d = Math.abs(a - b) % 360;
+  return d > 180 ? 360 - d : d;
+};

package/src/tooling/design-tokens.js

@@ -44,6 +44,7 @@ export const THEME_COLORS = [
   "border",
   "focus",
   "hover-overlay",
+  "hover-overlay-solid",
   "shadow-color",
   "selection-bg",
   "selection-fg",
@@ -65,6 +66,9 @@ export const FOUNDATIONS = {
     "space-50",
     "space-60",
     "gap",
+    "control-pad-x-sm",
+    "control-pad-x-md",
+    "control-pad-x-lg",
     "control-pad-x",
   ],
   radius: ["radius-sm", "radius", "radius-lg", "radius-full"],
@@ -91,9 +95,13 @@ export const FOUNDATIONS = {
    stay out of the design tools. */
 export const NOT_EXPORTED = {
   "font stack; a design tool font token holds one family": ["font-sans", "font-mono"],
+  "internal 0/1 weights selecting a control step; the steps are exported": [
+    "control-step-sm",
+    "control-step-md",
+    "control-step-lg",
+  ],
   "no design tool equivalent": [
     "font-width",
-    "font-width-dense",
     "line-height",
     "line-height-tight",
     "line-height-relaxed",

package/src/tooling/theme-contrast.js

@@ -0,0 +1,209 @@
+/*
+ * Theme contrast report: the pairs a theme author tunes by hand, measured in
+ * headless Chrome on the theme's own boundaries. Shared by the CLI
+ * (`actual-css contrast`) and the repository report over the presets
+ * (`bun run report:theme-contrast`).
+ *
+ * Measured per island (one per color scheme the theme declares):
+ *   - soft ink against the resting and the hovered soft fill (4.5:1)
+ *   - the focus line against --surface and --surface-solid (3:1)
+ *   - the invalid-field focus line against the field's own background (3:1)
+ *   - --surface-solid-fg on --surface-solid (4.5:1)
+ * A pair involving a translucent color has no ratio until it is composited
+ * over its backdrop, so it reads n/a instead of a number.
+ *
+ * Bun only: Bun.WebView drives the browser.
+ */
+import { fileURLToPath } from "node:url";
+import { contrast, RASTERIZE } from "./color.js";
+import { inlineImports } from "./css-bundle.js";
+import { themeNameOf } from "./design-tokens.js";
+
+const FRAMEWORK = fileURLToPath(new URL("../css/actual.full.css", import.meta.url));
+
+export const INTENTS = ["primary", "secondary", "success", "warning", "danger", "neutral"];
+
+/* Badges state .soft explicitly: a theme may fill badges by default
+   (bootstrap-v6), which would measure a solid pair against the soft hover. */
+function islandMarkup(id, attribute, scheme) {
+  const style = scheme ? ` style="color-scheme: ${scheme}"` : "";
+  return `<div data-theme="${attribute}"${style} id="${id}">
+    ${INTENTS.map((i) => `<span class="badge soft ${i}" data-badge="${i}">t</span>`).join("")}
+    ${INTENTS.map((i) => `<button class="btn soft ${i}" data-hover="${i}" type="button">t</button>`).join("")}
+    <span data-pair="focus-surface" style="color: var(--focus); background: var(--surface)"></span>
+    <span data-pair="focus-solid" style="color: var(--focus); background: var(--surface-solid)"></span>
+    <span data-pair="inverse" style="color: var(--surface-solid-fg); background: var(--surface-solid)"></span>
+    <input class="input" aria-invalid="true" data-pair="invalid-field" aria-label="t">
+  </div>`;
+}
+
+const ratio = (fg, bg) => (fg[3] < 255 || bg[3] < 255 ? null : contrast(fg, bg));
+
+/*
+ * Measures each theme of `themes` (data-theme values) in `css`, the full
+ * stylesheet with imports inlined. `null` stands for the default theme, read
+ * through its light and dark boundaries; a named theme is read in each scheme
+ * its `color-scheme` declares. Returns one row per island.
+ */
+export async function measureContrast({ css, themes }) {
+  await using view = new Bun.WebView({ backend: "chrome" });
+  await view.navigate("about:blank");
+
+  // Transitions off: a forced :hover must compute its end state at once.
+  const islands = await view.evaluate(`((css, themes) => {
+    const style = document.createElement("style");
+    style.textContent = css + "\\n* { transition-duration: 0s !important; }";
+    document.head.append(style);
+
+    const schemesOf = (attribute) => {
+      const probe = document.createElement("div");
+      probe.dataset.theme = attribute;
+      document.body.append(probe);
+      const declared = getComputedStyle(probe).colorScheme.split(/\\s+/);
+      probe.remove();
+      const schemes = declared.filter((s) => s === "light" || s === "dark");
+      return schemes.length > 0 ? schemes : ["light"];
+    };
+
+    return themes.flatMap((theme) =>
+      theme === null
+        ? ["light", "dark"].map((scheme) => ({ theme: "default", scheme, attribute: scheme, pin: false }))
+        : schemesOf(theme).map((scheme, _, all) => ({ theme, scheme, attribute: theme, pin: all.length > 1 })),
+    );
+  })(${JSON.stringify(css)}, ${JSON.stringify(themes)})`);
+
+  const markup = islands
+    .map((island, i) =>
+      islandMarkup(`island-${i}`, island.attribute, island.pin ? island.scheme : null),
+    )
+    .join("\n");
+  await view.evaluate(`document.body.insertAdjacentHTML("beforeend", ${JSON.stringify(markup)})`);
+
+  await view.cdp("DOM.enable");
+  await view.cdp("CSS.enable");
+  const { root } = await view.cdp("DOM.getDocument");
+  const { nodeIds } = await view.cdp("DOM.querySelectorAll", {
+    nodeId: root.nodeId,
+    selector: "[data-hover]",
+  });
+  for (const nodeId of nodeIds) {
+    await view.cdp("CSS.forcePseudoState", { nodeId, forcedPseudoClasses: ["hover"] });
+  }
+
+  const colors = await view.evaluate(`(() => {
+    const rgba = ${RASTERIZE};
+    return [...document.querySelectorAll("[id^=island-]")].map((island) => {
+      const cs = (el) => getComputedStyle(el);
+      const pairs = {};
+      for (const el of island.querySelectorAll("[data-pair]")) {
+        // The invalid field's block-end border carries --form-invalid-border,
+        // the hook its focus outline reads, even on an underline-only theme
+        // (material) whose other sides are clear.
+        const fg = el.dataset.pair === "invalid-field" ? cs(el).borderBlockEndColor : cs(el).color;
+        pairs[el.dataset.pair] = { fg: rgba(fg), bg: rgba(cs(el).backgroundColor) };
+      }
+      const soft = {};
+      for (const el of island.querySelectorAll("[data-badge]")) {
+        const hover = island.querySelector('[data-hover="' + el.dataset.badge + '"]');
+        soft[el.dataset.badge] = {
+          fg: rgba(cs(el).color),
+          rest: rgba(cs(el).backgroundColor),
+          hover: rgba(cs(hover).backgroundColor),
+        };
+      }
+      return { pairs, soft };
+    });
+  })()`);
+
+  return islands.map(({ theme, scheme }, i) => {
+    const { pairs, soft } = colors[i];
+    const pair = (key) => ratio(pairs[key].fg, pairs[key].bg);
+    return {
+      theme,
+      scheme,
+      soft: INTENTS.map((intent) => ({
+        intent,
+        rest: ratio(soft[intent].fg, soft[intent].rest),
+        hover: ratio(soft[intent].fg, soft[intent].hover),
+      })),
+      focusSurface: pair("focus-surface"),
+      focusSolid: pair("focus-solid"),
+      invalidFocus: pair("invalid-field"),
+      inverse: pair("inverse"),
+    };
+  });
+}
+
+/*
+ * Measures one theme file over the framework, or the default theme without
+ * `themeFile`. `name` overrides the data-theme name read from the file.
+ */
+export async function measureThemeFile({ themeFile, name }) {
+  const themeCss = themeFile ? await inlineImports(themeFile) : "";
+  const theme = themeFile ? (name ?? themeNameOf(themeCss)) : null;
+  const css = `${await inlineImports(FRAMEWORK)}\n${themeCss}`;
+  return measureContrast({ css, themes: [theme] });
+}
+
+/* Text tables for `rows`, and the number of pairs under their threshold. */
+export function formatContrast(rows) {
+  let misses = 0;
+  const cell = (value, min) => {
+    if (value === null) return { text: "n/a", miss: false };
+    const miss = value < min;
+    if (miss) misses += 1;
+    return { text: `${value.toFixed(2)}:1`, miss };
+  };
+  const width = Math.max(5, ...rows.map((row) => row.theme.length));
+  const head = (row) => `${row.theme.padEnd(width)}  ${row.scheme.padEnd(6)}`;
+  const flag = (cells, min) => (cells.some((c) => c.miss) ? `  <-- under ${min}` : "");
+  const lines = [];
+
+  lines.push("Soft pair contrast (ink vs resting / hovered fill), needs 4.5:1.", "");
+  lines.push(`${"theme".padEnd(width)}  scheme  intent       rest     hover`);
+  for (const row of rows) {
+    for (const { intent, rest, hover } of row.soft) {
+      // Both states gate: the hovered fill is usually the closer one, but a
+      // theme can invert that, and a 1:1 resting pair once passed silently.
+      const cells = [cell(rest, 4.5), cell(hover, 4.5)];
+      lines.push(
+        `${head(row)}  ${intent.padEnd(9)} ${cells[0].text.padStart(8)}  ${cells[1].text.padStart(8)}${flag(cells, 4.5)}`,
+      );
+    }
+  }
+
+  const single = (title, key, min) => {
+    lines.push("", title, "");
+    lines.push(`${"theme".padEnd(width)}  scheme   ratio`);
+    for (const row of rows) {
+      const c = cell(row[key], min);
+      lines.push(`${head(row)}  ${c.text.padStart(8)}${flag([c], min)}`);
+    }
+  };
+
+  lines.push("", "Focus line contrast (--focus vs --surface / --surface-solid), needs 3:1.", "");
+  lines.push(`${"theme".padEnd(width)}  scheme   surface     solid`);
+  for (const row of rows) {
+    const cells = [cell(row.focusSurface, 3), cell(row.focusSolid, 3)];
+    lines.push(
+      `${head(row)}  ${cells[0].text.padStart(8)}  ${cells[1].text.padStart(8)}${flag(cells, 3)}`,
+    );
+  }
+
+  // Documented exception (focus.css): an invalid field focuses in
+  // --form-invalid-border. The line is inset, so it reads against the
+  // field's own background, not the surface around it.
+  single(
+    "Invalid focus line contrast (--form-invalid-border vs field), needs 3:1.",
+    "invalidFocus",
+    3,
+  );
+  // Tooltip and status-bar text sit on this pair.
+  single(
+    "Inverse text contrast (--surface-solid-fg vs --surface-solid), needs 4.5:1.",
+    "inverse",
+    4.5,
+  );
+
+  return { text: lines.join("\n"), misses };
+}

package/docs/pages/patterns/actions.md

@@ -1,52 +0,0 @@
-# Actions
-
-Use `.actions` for a semantic list of actions.
-
-It removes native list chrome and provides a baseline row layout (`display: flex`, wrap, shared gap). Compose with layout primitives only when you need a different direction or distribution.
-
-```html demo
-<div class="stack">
-  <menu class="actions cluster">
-    <li><button class="btn primary" type="button">Save</button></li>
-    <li><button class="btn outline" type="button">Cancel</button></li>
-  </menu>
-
-  <menu class="actions stack">
-    <li><a class="btn primary" href="/billing">Update billing</a></li>
-    <li><a href="/support">Contact support</a></li>
-  </menu>
-</div>
-```
-
-Use `.actions` for:
-
-- dialog actions
-- alert actions
-- card actions
-- toolbar actions
-- form submit/cancel groups
-
-Use layout primitives for contextual spacing.
-
-```html demo
-<div class="alert warning stack">
-  <p>Your billing method has expired.</p>
-
-  <menu class="actions cluster">
-    <li><a class="btn danger sm" href="/billing">Update billing</a></li>
-    <li><a href="/support">Contact support</a></li>
-  </menu>
-</div>
-```
-
-Prefer composition over making each component reimplement action-list layout.
-
-```css
-/* Avoid */
-.alert > menu {
-  display: flex;
-  gap: var(--space-20);
-  padding: 0;
-  list-style: none;
-}
-```

package/src/css/components/actions.css

@@ -1,27 +0,0 @@
-/*
- * Actions — a horizontal action-button cluster.
- *
- * Docs: docs/pages/patterns/actions.md
- *
- * Composes with .btn (or any inline element) and feeds layout via the shared
- * --gap token.
- *
- * Internal:
- * --gap (local value for the shared gap token)
- */
-.actions {
-  --gap: var(--space-20);
-
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: var(--gap);
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-
-.actions > li {
-  margin: 0;
-}