actual-css 0.8.0 → 0.9.0

package/docs/pages/components/alert.md

@@ -106,8 +106,13 @@ trailing link or button is content, not anatomy, so it lives in the text column:
 wrap the row in a `.cluster` and push the two ends apart. Same recipe as any
 split / spread row — there is no `.alert-action` class.
 
+The alert aligns its columns to the block start, so a multi-line message keeps
+its icon on the first line. A trailing control makes that row taller than a line
+of text: add `.items-center` to put the icon, the text and the button on one
+center.
+
 ```html demo
-<div class="alert surface">
+<div class="alert surface items-center">
   <i class="ti ti-info-circle alert-icon" aria-hidden="true"></i>
   <div class="cluster justify-content-space-between">
     <strong>New message!</strong>

package/docs/pages/components/dialog.md

@@ -170,6 +170,11 @@ hidden` (and reserves the scrollbar gutter with `scrollbar-gutter: stable` when
 one was present). The height cap follows the small viewport, so the panel keeps
 a stable size while mobile browser chrome expands or collapses.
 
+The scrolling body is a scroll container, and browsers make one
+keyboard-focusable so it can be scrolled without a pointer — it takes a focus
+ring like any other focusable element, and it can claim initial focus when
+nothing focusable precedes it. Mark the control you want focused `autofocus`.
+
 ```html demo
 <button class="btn"
         type="button"

package/docs/pages/components/drawer.md

@@ -21,8 +21,21 @@
 - Use `closedby="none"` when the drawer must not be dismissed by the user at all
   (e.g. a form with unsaved changes): no backdrop close and no Escape close.
 - Use `[data-side="end"]` for a right-side drawer.
+- Put the body between a `header` and a `footer`: the panel is a three-row grid
+  whose middle region scrolls, so the footer stays reachable however long the
+  content gets.
 - Permanent desktop sidebars belong in layout, not here.
 
+The panel is `--viewport-block` tall, so it follows the space a mobile browser
+actually leaves on screen as its URL bar collapses. A shell that fakes a
+viewport (an embedded preview) overrides that token rather than the drawer.
+
+The body region is a scroll container, and browsers make one keyboard-focusable
+so it can be scrolled without a pointer — it takes a focus ring like any other
+focusable element. `showModal()` focuses the first focusable thing in the
+drawer, so put the close button in the `header` (as both examples do) or mark
+your intended target `autofocus`; otherwise the body claims initial focus.
+
 ```html demo
 <button class="btn ghost"
         type="button"

package/docs/pages/components/skeleton.md

@@ -37,4 +37,6 @@
 - `--skeleton-highlight` — sweeping highlight color.
 - `--skeleton-radius` — corner radius; `data-shape` presets override it.
 - `--skeleton-size` — block size; `data-shape` presets override it.
-- `--skeleton-width` — inline size; `data-shape` presets override it.
+- `--skeleton-width` — maximum inline size. A placeholder fills its container
+  and stops here, so it never gives an ancestor a width floor. `data-shape`
+  presets set it; `avatar` ignores it and stays square.

package/docs/pages/enhancements/flyout.md

@@ -506,8 +506,22 @@ delay; a number sets the delay in milliseconds.
 
 ## CSS hooks
 
-- `--flyout-inline-size` — panel width.
-- `--flyout-max-inline-size` — panel width cap.
+- `--flyout-inline-size` — preferred width. Takes intrinsic values such as
+  `max-content`, its default.
+- `--flyout-max-inline-size` — width cap, a `<length-percentage>` the runtime
+  also clamps to the viewport. Defaults to `20rem`, independently of the
+  preferred width — the same way `width: 42rem; max-width: 20rem` renders at
+  20rem. A panel wider than the cap therefore sets both:
+
+  ```css
+  .mega-panel {
+    --flyout-inline-size: 42rem;
+    --flyout-max-inline-size: 42rem;
+  }
+  ```
+
+  The repetition is the point: the two hooks are different contracts, and only
+  the cap may enter the runtime's `min()`.
 - `--menu-item-size` — minimum row height of `.menu-item`.
 - `--menu-item-icon-size` — shared leading-column width for icons and checked-state indicators.
 

package/docs/pages/forms/choice-cards.md

@@ -105,7 +105,8 @@ Plain `.check` / `.radio` controls expose two hooks:
   type. The switch track derives from it too, so a checkbox and a switch on the
   same line stay proportionate. A `.choice.sm` or `.choice.lg` scales it through
   the surrounding typography.
-- `--choice-control-offset` — top offset that aligns the control with the first
-  line of a multi-line label. Left unset, each control derives its own offset
-  from its height and the line box, which keeps a checkbox and a taller switch
-  level with each other. Setting one constant applies it to both.
+- `--choice-control-nudge` — block correction added to the derived first-line
+  offset, for every control in the row. Left unset, each control centres itself
+  on the first line's cap height, measured from its own block size — so a
+  checkbox and a taller switch stay level with each other, and with the text,
+  whatever the font, line-height or control size.

package/package.json

@@ -1,158 +1,159 @@
-{
-  "name": "actual-css",
-  "version": "0.8.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",
-    "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 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 && bun run build:size",
-    "prepublishOnly": "bun run build:all"
-  },
-  "devDependencies": {
-    "@biomejs/biome": "^2.5.12",
-    "happy-dom": "^20.14.0"
-  },
-  "dependencies": {
-    "@lekoala/floating": "^0.2.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/src/css/components/drawer.css

@@ -26,15 +26,24 @@ dialog.drawer {
 
   /* Keep the surface anchored to the viewport in the top layer. This also
      provides the containing block for the absolutely positioned close button.
-     A percentage height resolves against the fixed containing viewport, while
-     dynamic viewport units can be stale in embedded previews. */
+
+     The panel reaches both viewport edges, so it has to follow the space that
+     is actually on screen: --viewport-block resolves to 100dvh and tracks a
+     mobile browser's collapsing URL bar. A percentage resolves against the
+     layout viewport instead, which those browsers size as if the bar were
+     hidden — that put the footer below the fold for as long as it showed. The
+     modal pins the small viewport for the opposite reason: it floats, so a
+     stable height beats a panel that breathes while the bar moves.
+
+     An embedded preview that fakes a viewport overrides --viewport-block on
+     its own shell; the component does not degrade to a percentage for it. */
   position: fixed;
   inset-block-start: 0;
 
   inline-size: min(calc(var(--viewport-inline) * 0.9), var(--drawer-size));
-  block-size: 100%;
+  block-size: var(--viewport-block);
   max-inline-size: none;
-  max-block-size: 100%;
+  max-block-size: var(--viewport-block);
   margin: 0;
   padding: var(--drawer-pad);
   border: 0;
@@ -106,10 +115,16 @@ dialog.drawer[open]::backdrop {
   }
 }
 
-/* Scrollable navigation region inside the drawer. */
-dialog.drawer nav {
+/* The body region absorbs the panel's height and scrolls. A drawer is a
+   full-height shell by definition, so it always scrolls its body — unlike the
+   modal, which sizes to its content and opts in with .scrollable. Header and
+   footer keep their own tracks; .drawer-close is named because a generic
+   exclusion list is easier to trust than its `position: absolute`. */
+dialog.drawer > :not(:is(header, footer, form, .drawer-close)),
+dialog.drawer > form > :not(:is(header, footer, .drawer-close)) {
   min-block-size: 0;
-  overflow-y: auto;
+  overflow: auto;
+  overscroll-behavior: contain;
 }
 
 @supports (transition-behavior: allow-discrete) {

package/src/css/components/modal.css

@@ -38,7 +38,7 @@ dialog.modal {
   /* --modal-size stays fallback-only: declaring it on dialog.modal gives it
      type+class specificity, which a single author class cannot outrank, so the
      public hook would silently keep this default. Same reason choice.css never
-     declares --choice-control-offset. */
+     declares --choice-control-nudge. */
   max-inline-size: min(calc(100% - var(--dialog-viewport-gap-2x)), var(--modal-size, 32rem));
 
   /* Stable viewport cap for the panel: dvh tracks the dynamic browser toolbar

package/src/css/components/skeleton.css

@@ -11,16 +11,24 @@
  * --skeleton-track
  * --skeleton-highlight
  */
+/* A placeholder fills its container up to --skeleton-width; the preset widths
+   are a cap, never an intrinsic size. Stated the other way round — a rem
+   `inline-size` capped by a percentage `max-inline-size` — the cap is ignored
+   during intrinsic sizing, so every shrink-to-fit ancestor inherits the
+   preset as a min-content floor: a card holding a title placeholder could not
+   go below 18rem and pushed a phone's layout sideways. A percentage
+   `inline-size` contributes nothing intrinsically and a rem cap only lowers
+   the contribution, so the same geometry costs no floor. */
 .skeleton {
   --skeleton-size: 1rem;
-  --skeleton-width: 100%;
+  --skeleton-width: none;
   --skeleton-radius: var(--radius);
   --skeleton-track: var(--surface-subtle);
   --skeleton-highlight: var(--surface-raised);
 
   display: block;
-  inline-size: var(--skeleton-width);
-  max-inline-size: 100%;
+  inline-size: 100%;
+  max-inline-size: var(--skeleton-width);
   block-size: var(--skeleton-size);
   border-radius: var(--skeleton-radius);
   background:
@@ -44,11 +52,14 @@
   --skeleton-width: 18rem;
 }
 
+/* The one preset with a real intrinsic width: a disc is square, so it sizes
+   rather than caps. The floor it does carry is the avatar size, which is small
+   enough never to widen a layout. */
 .skeleton[data-shape="avatar"] {
   --skeleton-size: var(--avatar-size, 2.25rem);
-  --skeleton-width: var(--skeleton-size);
   --skeleton-radius: var(--radius-full);
 
+  inline-size: var(--skeleton-size);
   flex: 0 0 auto;
 }
 

package/src/css/components/table.css

@@ -9,6 +9,14 @@
  * --table-cell-pad
  */
 .table-wrap {
+  /* Containing block for anything absolutely positioned inside the table —
+     `.sr-only` on a column header above all. Without it that box resolves
+     against the initial containing block, so it keeps the static position of a
+     cell that may be a thousand pixels along the scrolled row, escapes this
+     scroller, and extends the *document's* scrollable width. The page then
+     scrolls sideways on a phone with nothing painted out there. */
+  position: relative;
+
   inline-size: 100%;
   max-inline-size: 100%;
   min-inline-size: 0;