actual-css 0.3.1 → 0.4.0

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "actual-css",
-  "version": "0.3.1",
+  "version": "0.4.0",
   "description": "Plain CSS component framework with semantic classes, universal variants, small tokens, theme hooks, and progressive enhancements.",
   "type": "module",
-  "packageManager": "bun@1.3.14",
+  "packageManager": "bun@1.4.0",
   "license": "MIT",
   "author": "Thomas <thomas@lekoala.be>",
   "repository": {
@@ -27,19 +27,32 @@
   ],
   "exports": {
     ".": "./dist/actual.min.css",
+    "./full": "./dist/actual.full.min.css",
     "./css": "./src/css/actual.css",
-    "./css/layer": "./src/css/actual.layer.css",
     "./css/components": "./src/css/components/index.css",
-    "./css/forms": "./src/css/forms/index.css",
-    "./css/optional": "./dist/optional.min.css",
+    "./css/components/*": "./src/css/components/*.css",
+    "./css/effects": "./src/css/effects/index.css",
+    "./css/effects/*": "./src/css/effects/*.css",
+    "./css/forms": "./src/css/forms/base.css",
+    "./css/forms/all": "./src/css/forms/index.css",
+    "./css/forms/*": "./src/css/forms/*.css",
+    "./css/full": "./src/css/actual.full.css",
+    "./css/layer": "./src/css/actual.layer.css",
+    "./css/layout": "./src/css/layout/index.css",
+    "./css/layout/*": "./src/css/layout/*.css",
     "./css/themes": null,
     "./css/themes/*": null,
-    "./css/*": "./src/css/*.css",
+    "./css/typography": "./src/css/typography/index.css",
+    "./css/typography/*": "./src/css/typography/*.css",
+    "./css/utilities": "./src/css/utilities/index.css",
+    "./css/utilities/*": "./src/css/utilities/*.css",
     "./js": "./src/js/index.js",
+    "./js/full": "./src/js/full.js",
     "./js/command": "./src/js/command.js",
     "./js/context-menu": "./src/js/context-menu.js",
     "./js/dialog": "./src/js/dialog.js",
     "./js/dismiss": "./src/js/dismiss.js",
+    "./js/escape": "./src/js/escape.js",
     "./js/enhance": "./src/js/enhance.js",
     "./js/enhancement-loader": "./src/js/enhancement-loader.js",
     "./js/parse-config": "./src/js/parse-config.js",
@@ -61,8 +74,12 @@
     "./js/validation": "./src/js/validation.js",
     "./js/status": "./src/js/status.js",
     "./js/surface": "./src/js/surface.js",
+    "./reserved-classes.json": "./scripts/reserved-classes.json",
     "./package.json": "./package.json"
   },
+  "bin": {
+    "actual-css": "./src/cli/actual-css.js"
+  },
   "main": "./dist/actual.js",
   "style": "./dist/actual.min.css",
   "unpkg": "./dist/actual.min.css",
@@ -71,11 +88,17 @@
   "files": [
     "dist",
     "src/css/*.css",
-    "src/css/components",
+    "src/css/core",
+    "src/css/layout",
+    "src/css/typography",
     "src/css/forms",
-    "src/css/optional",
-    "src/css/themes",
+    "src/css/components",
+    "src/css/effects",
+    "src/css/utilities",
+    "src/cli",
     "src/js",
+    "src/tooling",
+    "scripts/reserved-classes.json",
     "docs",
     "CHANGELOG.md",
     "llms.txt",
@@ -83,20 +106,25 @@
     "README.md"
   ],
   "engines": {
-    "bun": ">=1.3.14"
+    "bun": ">=1.4.0",
+    "node": ">=18"
   },
   "scripts": {
     "lint": "biome check",
     "lint:fix": "biome check --write",
-    "build:docs": "bun scripts/build-docs.js",
-    "watch:docs": "bun scripts/build-docs.js --watch",
+    "build:docs": "bun run build:themes && bun scripts/build-docs.js",
+    "watch:docs": "bun run build:themes && bun scripts/build-docs.js --watch",
     "check:docs": "bun scripts/check-docs.js",
     "check:compat": "bun scripts/check-compat.js",
     "check:css-api": "bun scripts/check-css-api.js",
+    "check:color-space": "bun scripts/check-color-space.js",
+    "check:architecture": "bun scripts/check-css-architecture.js",
     "build:dist": "bun scripts/build-dist.js",
     "build:js": "bun scripts/build-js.js",
+    "build:themes": "bun scripts/build-themes.js",
     "build:size": "bun scripts/build-size.js",
     "check:enhance": "bun run scripts/check-enhance.js",
+    "generate:reserved": "bun scripts/generate-reserved-classes.js",
     "check:reserved": "bun scripts/check-reserved.js",
     "check:links": "bun scripts/check-doc-links.js",
     "check:templates": "bun scripts/check-templates.js",
@@ -106,7 +134,8 @@
     "probe": "bun scripts/probe.js",
     "check:sync": "bun scripts/check-sync.js",
     "test": "bun test",
-    "build:all": "bun run build:dist && bun run build:js && bun run build:docs && bun run check:docs && bun run check:compat && bun run check:css-api && bun run check:enhance && bun run check:reserved && bun run check:sync && bun run check:links && bun run check:templates && bun run test && bun run build:size",
+    "test:changed": "bun test --changed=master",
+    "build:all": "bun run lint && bun run build:dist && bun run build:js && bun run build:docs && bun run check:docs && bun run check:compat && bun run check:css-api && bun run check:color-space && bun run check:architecture && bun run check:enhance && bun run generate:reserved && bun run check:reserved && bun run check:sync && bun run check:links && bun run check:templates && bun run test && bun run build:size",
     "prepublishOnly": "bun run build:all"
   },
   "devDependencies": {

package/scripts/reserved-classes.json

@@ -0,0 +1,261 @@
+[
+  "accordion",
+  "actions",
+  "admonition",
+  "alert",
+  "alert-body",
+  "alert-dismiss",
+  "alert-icon",
+  "alert-title",
+  "align-self-center",
+  "align-self-end",
+  "align-self-start",
+  "app-shell",
+  "aura",
+  "aura-glow",
+  "avatar",
+  "avatar-stack",
+  "background-raised",
+  "background-subtle",
+  "background-surface",
+  "badge",
+  "bleed",
+  "block-size-full",
+  "border-block-end",
+  "border-block-start",
+  "border-context",
+  "border-inline-end",
+  "border-inline-start",
+  "breadcrumb",
+  "btn",
+  "callout",
+  "card",
+  "center",
+  "chat",
+  "chat-avatar",
+  "chat-bubble",
+  "chat-end",
+  "chat-footer",
+  "chat-header",
+  "chat-start",
+  "check",
+  "choice",
+  "choice-card",
+  "circle",
+  "cluster",
+  "color",
+  "column-gap-context",
+  "column-layout",
+  "column-span-1",
+  "column-span-10",
+  "column-span-11",
+  "column-span-12",
+  "column-span-2",
+  "column-span-3",
+  "column-span-4",
+  "column-span-5",
+  "column-span-6",
+  "column-span-7",
+  "column-span-8",
+  "column-span-9",
+  "column-start-1",
+  "column-start-10",
+  "column-start-11",
+  "column-start-12",
+  "column-start-2",
+  "column-start-3",
+  "column-start-4",
+  "column-start-5",
+  "column-start-6",
+  "column-start-7",
+  "column-start-8",
+  "column-start-9",
+  "compact",
+  "container-query",
+  "cursor-pointer",
+  "danger",
+  "dialog-close",
+  "dialog-confirmation",
+  "dialog-icon",
+  "display-block",
+  "display-flex",
+  "display-grid",
+  "display-inline",
+  "display-inline-block",
+  "display-inline-flex",
+  "display-none",
+  "dot",
+  "drawer",
+  "drawer-close",
+  "fab",
+  "fab-action",
+  "fab-actions",
+  "fab-label",
+  "field",
+  "field-error",
+  "field-group",
+  "field-help",
+  "field-label",
+  "file",
+  "fit",
+  "flex-nowrap",
+  "flex-wrap",
+  "floating-field",
+  "flyout",
+  "flyout-trigger",
+  "font-weight-bold",
+  "font-weight-medium",
+  "font-weight-normal",
+  "font-weight-strong",
+  "form-actions",
+  "frame",
+  "gap-context",
+  "gap-lg",
+  "gap-md",
+  "gap-none",
+  "gap-sm",
+  "ghost",
+  "grid",
+  "grid-2",
+  "grid-3",
+  "grid-4",
+  "grid-6",
+  "grow",
+  "had-scrollbar",
+  "has-modal-open",
+  "icon-only",
+  "inline-size-full",
+  "input",
+  "input-icon",
+  "inverted",
+  "is-open",
+  "is-sheet",
+  "is-static",
+  "items-center",
+  "items-end",
+  "items-start",
+  "join",
+  "join-addon",
+  "justify-content-center",
+  "justify-content-end",
+  "justify-content-space-between",
+  "justify-content-start",
+  "key",
+  "lead",
+  "lg",
+  "link",
+  "link-muted",
+  "link-plain",
+  "list-reset",
+  "margin-block-end-auto",
+  "margin-block-start-auto",
+  "margin-inline-auto",
+  "margin-inline-end-auto",
+  "margin-inline-start-auto",
+  "max-inline-size-none",
+  "mbe",
+  "mbs",
+  "measure",
+  "media",
+  "menu",
+  "menu-item",
+  "menu-item-end",
+  "menu-item-icon",
+  "menu-item-text",
+  "menu-label",
+  "menu-separator",
+  "meter",
+  "min-block-size-0",
+  "min-inline-size-0",
+  "modal",
+  "muted",
+  "native",
+  "nav-link",
+  "nav-list",
+  "navbar",
+  "navbar-brand",
+  "navbar-nav",
+  "needs-validation",
+  "neutral",
+  "otp",
+  "outline",
+  "overflow-auto",
+  "overflow-clip",
+  "overflow-hidden",
+  "overflow-x-auto",
+  "overflow-y-auto",
+  "overline",
+  "padding-context",
+  "pagination",
+  "pill",
+  "pointer-events-none",
+  "position-absolute",
+  "position-fixed",
+  "position-relative",
+  "position-sticky",
+  "primary",
+  "progress",
+  "prose",
+  "px",
+  "py",
+  "radio",
+  "radius-context",
+  "radius-lg-context",
+  "radius-sm-context",
+  "raised",
+  "range",
+  "required-mark",
+  "row-gap-context",
+  "scroll-snap",
+  "scroll-target",
+  "scrollable",
+  "scroller",
+  "scrollspy",
+  "secondary",
+  "select",
+  "shadow-context",
+  "shadow-popout-context",
+  "sidebar-layout",
+  "skeleton",
+  "sm",
+  "soft",
+  "solid",
+  "spinner",
+  "sr-only",
+  "stable-gutter",
+  "stack",
+  "status-bar",
+  "sticky",
+  "stretch",
+  "subtle",
+  "success",
+  "surface-backdrop",
+  "switch",
+  "switcher",
+  "tab",
+  "table",
+  "table-wrap",
+  "tabs",
+  "text-balance",
+  "text-break",
+  "text-capitalize",
+  "text-center",
+  "text-display",
+  "text-end",
+  "text-lead",
+  "text-lowercase",
+  "text-nowrap",
+  "text-pretty",
+  "text-start",
+  "text-title",
+  "text-uppercase",
+  "textarea",
+  "tooltip",
+  "topbar",
+  "truncate",
+  "user-select-none",
+  "visibility-hidden",
+  "warning",
+  "was-validated",
+  "white-space-normal"
+]

package/src/cli/actual-css.js

@@ -0,0 +1,133 @@
+#!/usr/bin/env node
+
+import { mkdir, readFile, writeFile } from "node:fs/promises";
+import { dirname, resolve } from "node:path";
+import { inlineImports, minifyCss } from "../tooling/css-bundle.js";
+
+function usage() {
+  return [
+    "actual-css bundle INPUT --out FILE [--minify]",
+    "",
+    "  -o, --out FILE   write the bundle to FILE (required)",
+    "      --minify     collapse comments and whitespace",
+    "  -h, --help       show this message",
+    "      --version    print the actual-css version",
+    "",
+    "Bundle plain CSS @import chains from relative files and actual-css/css/* subpaths.",
+    "A layer or layer(name) import is flattened into the @layer block it stands for.",
+    "Remote imports are kept and hoisted to the top of the bundle.",
+    "Leaves modern CSS syntax untouched; this is a bundler, not a transpiler.",
+  ].join("\n");
+}
+
+async function version() {
+  const pkg = await readFile(new URL("../../package.json", import.meta.url), "utf8");
+  return JSON.parse(pkg).version;
+}
+
+function parseArgs(argv) {
+  const [command, ...rest] = argv;
+
+  if (!command || command === "--help" || command === "-h") {
+    return { help: true };
+  }
+
+  if (command === "--version" || command === "-v") {
+    return { version: true };
+  }
+
+  if (command !== "bundle") {
+    throw new Error(`Unknown command: ${command}`);
+  }
+
+  let input = "";
+  let out = "";
+  let minify = false;
+
+  for (let i = 0; i < rest.length; i += 1) {
+    const arg = rest[i];
+
+    if (arg === "--help" || arg === "-h") {
+      return { help: true };
+    }
+
+    if (arg === "--minify") {
+      minify = true;
+      continue;
+    }
+
+    if (arg === "--out" || arg === "-o") {
+      const value = rest[i + 1];
+
+      if (!value) {
+        throw new Error("Missing value for --out.");
+      }
+
+      out = value;
+      i += 1;
+      continue;
+    }
+
+    if (arg.startsWith("-")) {
+      throw new Error(`Unknown option: ${arg}`);
+    }
+
+    if (input) {
+      throw new Error(`Unexpected extra argument: ${arg}`);
+    }
+
+    input = arg;
+  }
+
+  if (!input) {
+    throw new Error("Missing input file.");
+  }
+
+  if (!out) {
+    throw new Error("Missing required --out FILE option.");
+  }
+
+  return { help: false, input, out, minify };
+}
+
+async function bundle({ input, out, minify }) {
+  const inputPath = resolve(input);
+  const outputPath = resolve(out);
+  const css = await inlineImports(inputPath);
+  const code = minify ? minifyCss(css) : css;
+
+  await mkdir(dirname(outputPath), { recursive: true });
+  await writeFile(outputPath, code);
+
+  console.log(`Bundled ${inputPath} -> ${outputPath}${minify ? " (minified)" : ""}`);
+}
+
+async function main() {
+  let args;
+
+  try {
+    args = parseArgs(process.argv.slice(2));
+  } catch (error) {
+    console.error(error.message);
+    console.error("");
+    console.error(usage());
+    process.exit(1);
+  }
+
+  if (args.help) {
+    console.log(usage());
+    return;
+  }
+
+  if (args.version) {
+    console.log(await version());
+    return;
+  }
+
+  await bundle(args);
+}
+
+main().catch((error) => {
+  console.error(error.message);
+  process.exit(1);
+});

package/src/css/actual.css

@@ -1,31 +1 @@
-@import "./reset.css";
-@import "./tokens.css";
-@import "./theme.css";
-@import "./base.css";
-@import "./intents.css";
-/* Prose before layout: layout primitives (.stack, .cluster) reset child
-   margins and must win over .prose's flow margins at equal specificity —
-   source order is the tie-breaker, so prose loads first. */
-@import "./prose.css";
-@import "./layout.css";
-@import "./grid.css";
-@import "./variants.css";
-@import "./components/index.css";
-@import "./forms/index.css";
-@import "./utilities.css";
-/* Joined controls are a component, but must load after the controls it groups. */
-@import "./components/join.css";
-@import "./focus.css";
-@import "./print.css";
-
-/*
- * NOTE: The 'optional/' directory contains layout and utility extensions
- * (such as optional grids, split, visual effects, and extra utility classes
- * like .gap-sm, .flex-nowrap, .shadow-sm, etc.). These are intentionally not
- * bundled here. Two entry points ship them:
- *
- *   actual-css/css/optional/index   optional layer only
- *   actual-css/css/actual.full      core + optional
- *
- * Import one of these paths in your project when you need them.
- */
+@import "./core/index.css";

package/src/css/actual.full.css

@@ -1,2 +1,11 @@
-@import "actual.css";
-@import "optional/index.css";
+/* Core, then every shipped functional family in cascade order. Typography
+   precedes Layout because direct-child layout resets intentionally win over
+   equal-specificity prose flow margins. Forms precede Components because of
+   join. Do not alphabetize these top-level imports. */
+@import "./actual.css";
+@import "./typography/index.css";
+@import "./layout/index.css";
+@import "./forms/index.css";
+@import "./components/index.css";
+@import "./effects/index.css";
+@import "./utilities/index.css";

package/src/css/components/alert.css

@@ -20,6 +20,7 @@
  *
  * Internal:
  * --alert-default-bg
+ * --alert-default-fg
  * --alert-default-border
  * --alert-bg
  * --alert-fg
@@ -42,9 +43,10 @@
   --alert-font-size: var(--font-size-md);
   --alert-icon-size: 1.25rem;
   --alert-default-bg: var(--surface-subtle);
+  --alert-default-fg: var(--intent, var(--text));
   --alert-default-border: var(--border);
   --alert-bg: var(--ui-bg, var(--alert-default-bg));
-  --alert-fg: var(--ui-fg, var(--intent, var(--text)));
+  --alert-fg: var(--ui-fg, var(--alert-default-fg));
   --alert-border: var(--ui-border, var(--alert-default-border));
 
   padding-block: var(--alert-pad-block);
@@ -76,15 +78,20 @@
   .alert {
     /* @sync soft-recipe */
     --alert-default-bg: color-mix(
-      in oklch,
+      in oklab,
       var(--surface) var(--soft-bg-mix),
       var(--intent, var(--neutral))
     );
     --alert-default-border: color-mix(
-      in oklch,
+      in oklab,
       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)
+    );
     /* @sync soft-recipe */
   }
 }
@@ -230,7 +237,7 @@
 @supports (color: color-mix(in oklch, red, white)) {
   .alert.admonition > .alert-title {
     background: color-mix(
-      in oklch,
+      in oklab,
       var(--surface) var(--soft-bg-mix),
       var(--intent, var(--neutral))
     );
@@ -258,3 +265,9 @@
 .alert.admonition > .alert-body > :last-child {
   margin-block-end: 0;
 }
+@media print {
+  .alert {
+    border: var(--border-width) solid CanvasText;
+    break-inside: avoid;
+  }
+}

package/src/css/components/badge.css

@@ -35,7 +35,7 @@
 .badge {
   --badge-size: var(--density-compact-size);
   --badge-pad-x: 0.55em;
-  --badge-font-size: 0.8125rem;
+  --badge-font-size: var(--font-size-xs);
   --badge-dot-size: 0.5rem;
   --badge-default-bg: var(--surface-subtle);
   --badge-default-fg: var(--intent, var(--text));
@@ -76,15 +76,20 @@
   .badge {
     /* @sync soft-recipe */
     --badge-default-bg: color-mix(
-      in oklch,
+      in oklab,
       var(--surface) var(--soft-bg-mix),
       var(--intent, var(--neutral))
     );
     --badge-default-border: color-mix(
-      in oklch,
+      in oklab,
       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)
+    );
     /* @sync soft-recipe */
   }
 }
@@ -104,8 +109,8 @@
   display: inline-grid;
   place-items: center;
   flex: 0 0 auto;
-  min-inline-size: 1.5rem;
-  min-block-size: 1.5rem;
+  min-inline-size: var(--density-compact-size);
+  min-block-size: var(--density-compact-size);
   margin-block: -0.25rem;
   margin-inline-start: -0.15em;
   margin-inline-end: -0.45em;
@@ -136,7 +141,7 @@
 
   :is(a.badge, button.badge):where(:not(.solid, .outline, :empty)) {
     --badge-default-hover-bg: color-mix(
-      in oklch,
+      in oklab,
       var(--surface) calc(var(--soft-bg-mix) - var(--soft-hover-alpha)),
       var(--intent, var(--neutral))
     );
@@ -152,6 +157,7 @@
 }
 
 :where(a.badge, button.badge):not(:where(:disabled, [aria-disabled="true"], .outline)):hover {
+  /* Huge inset spread paints the overlay over the pill radius (see button.css). */
   box-shadow: inset 0 0 0 999px var(--hover-overlay);
 }
 
@@ -191,3 +197,9 @@ a.badge[aria-disabled="true"] {
     color: GrayText;
   }
 }
+@media print {
+  .badge {
+    border: var(--border-width) solid CanvasText;
+    break-inside: avoid;
+  }
+}