actual-css 0.7.0 → 0.9.0

package/package.json

@@ -1,149 +1,159 @@
-{
-  "name": "actual-css",
-  "version": "0.7.0",
-  "description": "Plain CSS component framework with semantic classes, universal variants, small tokens, theme hooks, and progressive enhancements.",
-  "type": "module",
-  "packageManager": "bun@1.4.1",
-  "license": "MIT",
-  "author": "Thomas <thomas@lekoala.be>",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/lekoala/actual-css.git"
-  },
-  "homepage": "https://github.com/lekoala/actual-css",
-  "bugs": {
-    "url": "https://github.com/lekoala/actual-css/issues"
-  },
-  "keywords": [
-    "css",
-    "css-framework",
-    "component-library",
-    "semantic",
-    "accessibility",
-    "dark-mode",
-    "themable",
-    "no-build",
-    "progressive-enhancement"
-  ],
-  "exports": {
-    ".": "./dist/actual.min.css",
-    "./full": "./dist/actual.full.min.css",
-    "./css": "./src/css/actual.css",
-    "./css/components": "./src/css/components/index.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/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",
-    "./js/events": "./src/js/events.js",
-    "./js/filter": "./src/js/filter.js",
-    "./js/flyout": "./src/js/flyout.js",
-    "./js/focus": "./src/js/focus.js",
-    "./js/focus-group": "./src/js/focus-group.js",
-    "./js/input": "./src/js/input.js",
-    "./js/keys": "./src/js/keys.js",
-    "./js/mask": "./src/js/mask.js",
-    "./js/menu": "./src/js/menu.js",
-    "./js/password": "./src/js/password.js",
-    "./js/scrollspy": "./src/js/scrollspy.js",
-    "./js/selectors": "./src/js/selectors.js",
-    "./js/tab": "./src/js/tab.js",
-    "./js/tooltip": "./src/js/tooltip.js",
-    "./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",
-  "jsdelivr": "./dist/actual.min.css",
-  "sideEffects": true,
-  "files": [
-    "dist",
-    "src/css/*.css",
-    "src/css/core",
-    "src/css/layout",
-    "src/css/typography",
-    "src/css/forms",
-    "src/css/components",
-    "src/css/effects",
-    "src/css/utilities",
-    "src/cli",
-    "src/js",
-    "src/tooling",
-    "scripts/reserved-classes.json",
-    "docs",
-    "CHANGELOG.md",
-    "llms.txt",
-    "LICENSE",
-    "README.md"
-  ],
-  "engines": {
-    "bun": ">=1.4.0",
-    "node": ">=18"
-  },
-  "scripts": {
-    "lint": "biome check",
-    "lint:fix": "biome check --write",
-    "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",
-    "format:docs": "bun scripts/format-doc-tables.js",
-    "check:doc-classes": "bun scripts/check-doc-classes.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",
-    "shot:forced": "bun scripts/forced-colors-shot.js",
-    "shot:multi": "bun scripts/multi-shot.js",
-    "shot:page": "bun scripts/page-shot.js",
-    "probe": "bun scripts/probe.js",
-    "check:sync": "bun scripts/check-sync.js",
-    "test": "bun test",
-    "test:changed": "bun test --changed=master",
-    "build:all": "bun run lint && bun run build:dist && bun run build:js && bun run format:docs && bun run build:docs && bun run check:docs && bun run check:doc-classes && 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": {
-    "@biomejs/biome": "^2.5",
-    "happy-dom": "^20.11"
-  },
-  "dependencies": {
-    "@lekoala/floating": "^0.1.0"
-  }
-}
+{
+  "name": "actual-css",
+  "version": "0.9.0",
+  "description": "Plain CSS component framework with semantic classes, universal variants, small tokens, theme hooks, and progressive enhancements.",
+  "type": "module",
+  "packageManager": "bun@1.4.2",
+  "license": "MIT",
+  "author": "Thomas <thomas@lekoala.be>",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/lekoala/actual-css.git"
+  },
+  "homepage": "https://github.com/lekoala/actual-css",
+  "bugs": {
+    "url": "https://github.com/lekoala/actual-css/issues"
+  },
+  "keywords": [
+    "css",
+    "css-framework",
+    "component-library",
+    "semantic",
+    "accessibility",
+    "dark-mode",
+    "themable",
+    "no-build",
+    "progressive-enhancement"
+  ],
+  "exports": {
+    ".": "./dist/actual.min.css",
+    "./full": "./dist/actual.full.min.css",
+    "./css": "./src/css/actual.css",
+    "./css/components": "./src/css/components/index.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/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",
+    "./js/events": "./src/js/events.js",
+    "./js/filter": "./src/js/filter.js",
+    "./js/flyout": "./src/js/flyout.js",
+    "./js/focus": "./src/js/focus.js",
+    "./js/focus-group": "./src/js/focus-group.js",
+    "./js/input": "./src/js/input.js",
+    "./js/keys": "./src/js/keys.js",
+    "./js/mask": "./src/js/mask.js",
+    "./js/menu": "./src/js/menu.js",
+    "./js/password": "./src/js/password.js",
+    "./js/scrollspy": "./src/js/scrollspy.js",
+    "./js/selectors": "./src/js/selectors.js",
+    "./js/tab": "./src/js/tab.js",
+    "./js/tooltip": "./src/js/tooltip.js",
+    "./js/validation": "./src/js/validation.js",
+    "./js/status": "./src/js/status.js",
+    "./js/surface": "./src/js/surface.js",
+    "./reserved-classes.json": "./reserved-classes.json",
+    "./components.json": "./components.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",
+  "jsdelivr": "./dist/actual.min.css",
+  "sideEffects": true,
+  "files": [
+    "dist",
+    "src/css/*.css",
+    "src/css/core",
+    "src/css/layout",
+    "src/css/typography",
+    "src/css/forms",
+    "src/css/components",
+    "src/css/effects",
+    "src/css/utilities",
+    "src/cli",
+    "src/js",
+    "src/tooling",
+    "reserved-classes.json",
+    "components.json",
+    "docs",
+    "CHANGELOG.md",
+    "llms.txt",
+    "LICENSE",
+    "README.md"
+  ],
+  "engines": {
+    "bun": ">=1.4.0",
+    "node": ">=18"
+  },
+  "scripts": {
+    "lint": "biome check",
+    "lint:fix": "biome check --write",
+    "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",
+    "format:docs": "bun scripts/format-doc-tables.js",
+    "check:doc-classes": "bun scripts/check-doc-classes.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",
+    "report:theme-contrast": "bun scripts/report-theme-contrast.js",
+    "report:neutral-ramp": "bun scripts/report-neutral-ramp.js",
+    "report:dead-css": "bun scripts/report-dead-css.js",
+    "report:overflow": "bun scripts/report-overflow.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",
+    "generate:catalog": "bun scripts/build-catalog.js",
+    "check:catalog": "bun scripts/check-catalog.js",
+    "check:links": "bun scripts/check-doc-links.js",
+    "check:templates": "bun scripts/check-templates.js",
+    "check:markup": "bun scripts/check-markup.js",
+    "shot:forced": "bun scripts/forced-colors-shot.js",
+    "shot:multi": "bun scripts/multi-shot.js",
+    "shot:page": "bun scripts/page-shot.js",
+    "probe": "bun scripts/probe.js",
+    "serve": "bun scripts/serve.js",
+    "check:sync": "bun scripts/check-sync.js",
+    "test": "bun test",
+    "test:changed": "bun test --changed=master",
+    "build:all": "bun run lint && bun run build:dist && bun run build:js && bun run build:size && bun run format:docs && bun run build:docs && bun run check:docs && bun run check:doc-classes && 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 generate:catalog && bun run check:catalog && bun run check:sync && bun run check:links && bun run check:templates && bun run check:markup && bun run test",
+    "prepublishOnly": "bun run build:all"
+  },
+  "devDependencies": {
+    "@biomejs/biome": "^2.5.12",
+    "happy-dom": "^20.14.0"
+  },
+  "dependencies": {
+    "@lekoala/floating": "^0.2.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%;
 }