actual-css 0.9.0 → 0.9.2

package/CHANGELOG.md

@@ -2,6 +2,51 @@
 
 ## [Unreleased]
 
+### Documentation and tooling
+
+- Pushing a version tag publishes the GitHub release: `.npmrc` keeps `npm version` on the bare tag format, `bun run release:notes` extracts (and validates) the dated changelog section, and the CI `release` job attaches `dist/`.
+
+
+## [0.9.2] - 2026-09-22
+
+### Added
+
+- `--font-width` and `--font-width-dense` typography hooks: `.compact` applies the denser width through `font-stretch` (variable `wdth` axis when available, width-face matching otherwise), `.spacious` restores the normal width. Themes without a useful width axis opt out with `--font-width-dense: 100%`.
+- `starts-with` and `ends-with` built-in `data-validation-rules` rules: the trimmed value must begin or end with one of the literal tokens, case-sensitive.
+- `tel-prefix` built-in `data-validation-rules` rule: dialing digits are required, local numbers pass, explicit international numbers (`+`, `00`) must match an allowed prefix, and no prefix means local-only. It is an origin policy, not phone validation, and never rewrites the value.
+
+### Fixed
+
+- `.field` packs its rows to the start (`align-content: start`), so a field stretched by a taller grid row — a neighbour revealing its `.field-error` — no longer inflates its own control.
+
+
+## [0.9.1] - 2026-09-16
+
+### Fixed
+
+- `.modal.scrollable` and `.drawer` body scrollports reserve inline focus-ring space without changing header, body, or footer alignment, so full-width controls no longer clip their focus indicator.
+- `:where(dialog).modal` and `:where(dialog).drawer` roots now have 0-1-0 specificity like other components, allowing a later application class to override their defaults and documented hooks normally.
+- `[data-context-menu]` resolves its menu per interaction: a target declared before its `<menu>` exists and a same-id menu replacement now open correctly instead of staying dead.
+- `escape.js` ignores `Escape` presses already consumed (`defaultPrevented`) or chorded with `metaKey`.
+- `isElementVisible()` in `focus.js` passes `visibilityProperty` to `checkVisibility()`, so `visibility:hidden` content is no longer reported focusable on modern engines.
+- A flyout `<a>` trigger calls `preventDefault()` once its panel resolved — clicking it no longer navigates, while an unresolved trigger still navigates and bubbles.
+- `data-tooltip` triggers containing focusable children now hide correctly: the non-bubbling `blur` listener was replaced by `focusout` with a `relatedTarget` containment check.
+- `--dismiss` on an open surface finalizes the surface lifecycle — `.is-open`, the Escape entry, position tracking — and restores focus to the opener; the surface consumes `actual:dismiss` itself, keeping `dismiss.js` generic.
+- `.link-muted:hover` and `.link-muted:focus-visible` are separate rules, so the hover color survives browsers without `:focus-visible`.
+- `.choice-card` and `.floating-field` participate in `.sm` / `.lg` (and `.choice-card` consumes `--control-font-size`), so their documented size modifiers actually work.
+- The `.floating-field` label rests on `--control-pad-x`, the same geometry as the control's text — both now share an inline start edge at every size.
+- `.modal` header/footer resets are bounded to the dialog's structural `form` / `.stack` slots, so a header or footer inside the content keeps its own rhythm.
+- `.otp` forced-colors styling covers the `:user-invalid` route.
+- `print.css` forces `[data-theme]` islands to `color-scheme: light` with a white background and black text, so a dark-themed section no longer prints dark.
+- The 11 paired themes declare `color-scheme: light` in their fallback block and `light dark` under `@supports (color: light-dark(...))` — dark UA controls no longer appear on the light fallback palette.
+
+### Documentation and tooling
+
+- Public CSS sources carry a `Docs:` pointer to their canonical usage page, verified by `check:architecture`.
+- `check:compat` rejects selector lists mixing an above-floor pseudo with baseline selectors.
+- Docs TOC and search headings decode HTML entities, so a heading like `Linting role="menu"` no longer shows `&quot;` in the sidebar.
+- `tokens.md` describes the actual forced-colors contract; `enhancement-loader` documents that manifests are trusted application configuration.
+
 
 ## [0.9.0] - 2026-09-13
 

package/README.md

@@ -69,7 +69,8 @@ Variants such as `.solid`, `.soft`, `.outline`, and `.surface` are shared by com
 
 Size variants `.sm` and `.lg` scale typography and participating component
 geometry consistently. Density contexts `.compact` and `.spacious` change
-spacing and geometry without changing typography or icons.
+spacing and geometry without changing font size or icons; `.compact` may
+slightly narrow typefaces that support a width axis.
 
 ## Public Class Grammar
 

package/components.json

@@ -266,6 +266,7 @@
     ],
     "internalHooks": [
       "--drawer-closed-translate",
+      "--drawer-focus-bleed",
       "--drawer-motion-duration"
     ],
     "states": [
@@ -446,6 +447,7 @@
     ],
     "internalHooks": [
       "--dialog-close-icon-size",
+      "--dialog-focus-bleed",
       "--dialog-viewport-block",
       "--dialog-viewport-gap-default",
       "--dialog-viewport-gap-2x"

package/dist/actual.css

@@ -67,6 +67,8 @@ select {
   /* Typography */
   --font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
   --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  --font-width: 100%;
+  --font-width-dense: 95%;
   --line-height: 1.5;
   --line-height-tight: 1.25;
   --line-height-relaxed: 1.75;
@@ -515,12 +517,14 @@ select {
  * Public hooks:
  * --link
  * --hr-space
+ * --font-width / --font-width-dense (see variants.css for the dense application)
  */
 
 body {
   background: var(--surface);
   color: var(--text);
   font-family: var(--font-sans);
+  font-stretch: var(--font-width);
   line-height: var(--line-height);
 }
 
@@ -668,9 +672,16 @@ small {
  *   components/alert.css   — .alert default soft behind explicit --ui-*
  *
  * .compact/.spacious set inherited density tokens: spacing rhythm and geometry
- * only. Density never changes typography or icon size. Controls consume
- * --control-size; non-control components may consume --density-* when the
- * context should affect their local rhythm.
+ * only, plus a slight typographic width bonus. Density never changes font size
+ * or icon size. Controls consume --control-size; 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%.
  *
  * .sm/.lg are local size roles, not shared measurements. Shared control
  * participants below map both typography and geometry; components with
@@ -735,18 +746,20 @@ small {
   --gap: var(--space-20);
   --density-space: var(--space-20);
   --control-size: var(--control-size-sm);
+  font-stretch: var(--font-width-dense);
 }
 
 .spacious {
   --gap: var(--space-50);
   --density-space: var(--space-50);
   --control-size: var(--control-size-lg);
+  font-stretch: var(--font-width);
 }
 
 /* Shared control scale. Wrappers are listed when their descendants form one
-   component (field, input-icon, join, pagination, tabs, flyout). A local size
-   declaration beats inherited density because it is declared on the sized
-   component itself. */
+   component (field, choice-card, floating-field, input-icon, join, pagination,
+   tabs, flyout). A local size declaration beats inherited density because it
+   is declared on the sized component itself. */
 :where(
   .btn,
   .input,
@@ -756,7 +769,9 @@ small {
   .file,
   .field,
   .choice,
+  .choice-card,
   .input-icon,
+  .floating-field,
   .otp,
   .join,
   .pagination,
@@ -778,7 +793,9 @@ small {
   .file,
   .field,
   .choice,
+  .choice-card,
   .input-icon,
+  .floating-field,
   .otp,
   .join,
   .pagination,
@@ -838,6 +855,9 @@ small {
 
 @media print {
   :root,
+  /* The doubled attribute intentionally outranks single-attribute preset
+     islands (data-theme="dark", paired themes) loaded after the core. */
+  [data-theme][data-theme],
   body {
     /* Save some ink in dark mode */
     color-scheme: light;