actual-css 0.12.0 → 0.14.0

package/CHANGELOG.md

@@ -2,6 +2,108 @@
 
 ## [Unreleased]
 
+## [0.14.0] - 2026-10-13
+### Breaking changes
+
+- `--soft-border-mix` has no default: read it as `var(--soft-border-mix, 100%)` for the soft tint or `var(--soft-border-mix, 65%)` for the opaque `.soft` mix.
+
+### Added
+
+- `.color-swatch`: palette color on a native radio or checkbox, or a `<button>` opening a palette flyout, with `--color-swatch-value`, `--color-swatch-size` and `--color-swatch-radius`.
+- `.segmented` / `.segment`: segmented control for radios, a `role="tablist"` or navigation links, with `--segmented-bg`, `--segmented-pad`, `--segmented-radius`, `--segmented-fg`, `--segmented-selected-bg` and `--segmented-selected-border`.
+- `demo/templates/order-management.html`: one state at three levels — a badge in a selectable list, a contextual alert, and a notification with its own action — plus a critical alert, with no new framework API.
+- `prefers-reduced-transparency: reduce` paints `.topbar` and `.form-actions.sticky` opaque without backdrop blur.
+- The glass demo theme switches to opaque surfaces and drops its blur under `prefers-reduced-transparency: reduce`.
+- `shot:states` accepts a `transparency` state.
+- `--switch-knob-inline-size` sets the switch knob width for a capsule knob; the travel follows it.
+- `demo/templates/settings-ios.html`: iOS-like controls and grouped settings from unchanged markup, with the local CSS each gap needs.
+- `admin-neutral` demo theme: light-only business interface with a grey page, white cards, neutral actions and flat semantic tints.
+- `--state-selected-text`: selected ink on a regular surface (current `.nav-link`, selected `.tab`, current step number and ring), falling back to `--state-selected`.
+- `actual-css contrast` measures selected ink on each surface and the solid `-fg` pairs; a gradient fill reads n/a.
+- `components.json`: `pseudoElements` lists the `::before`/`::after` each component generates, keyed by the element that owns them (`.nav-link`, `.accordion summary`).
+- `actual-css design` writes a portable `dtcg/` token profile beside `figma/` and `penpot/`, with spec `$types` (`fontWeight`, `fontFamily`, `duration`, `cubicBezier`, `number`) and the font stacks, line heights and motion `figma/` drops.
+
+### Fixed
+
+- `.color` shows a round swatch the height of a `.switch` on a control-sized hit area, with the focus ring on the swatch; `--color-size` sets it.
+- A flyout no longer closes when the arrow keys or Space move through a radio group inside it.
+- Opening a flyout from the keyboard focuses a radio group at its checked radio, not its first one.
+- `.list-item` moves its trailing region to a new line when it no longer fits beside the longest word, instead of breaking `.list-item-title` mid-word.
+- `.truncate` inside `.list-item-content` keeps the trailing region on its line.
+- `actual-css design` writes DTCG colors with a 6-digit `hex` and `alpha` separate; Penpot still receives the alpha in its hex.
+- `.scroll-snap` keeps a focused item's ring inside its own clip on all four sides.
+- `.alert.compact` and `.alert.spacious` step `--alert-pad-block`.
+- `.close` stays visible in forced colors on a light-on-dark ink such as a `.solid` admonition title.
+- `.app-nav` frames the current tile in forced colors with a transparent border on a `::before` overlay, so selecting a tile never shifts its icon or label and no `Highlight` repaint is needed.
+- `--state-selected-text` resets on every theme boundary, so a nested theme island reads its own `--state-selected` instead of inheriting the parent's selected ink.
+- Demo themes clear 4.5:1 on their solid pairs: bootstrap-v6 primary, success and danger; spruce and petrol warning; petrol secondary; edge warning; brutalist secondary and danger.
+- Demo themes set `--state-selected-text` where the primary cannot be both fill and page text: bootstrap-v6, brutalist, cyberpunk, gradient, ocean, square, sunset.
+- bootstrap-v6 filled badges keep their fill on hover.
+- The edge demo theme's default button reads its intent through `--soft-fg-mix`.
+- The glass demo theme keeps the default `--soft-bg-mix` and sets `--soft-border-mix: 70%`, so soft tints show their intent.
+- `.alert.admonition` title bar follows `.solid`, `.surface` and `.outline`; `.solid` previously left white ink on the soft tint.
+
+### Changed
+
+- `admin-neutral` uses emerald success fills with white solid ink, amber warning fills with dark ink, lighter neutral badges and white admonition bodies with neutral frames.
+- `demo/templates/order-management.html` softens the address notice, makes New order secondary and tightens the Orders header.
+- `demo/templates/order-management.html` pins `admin-neutral` and adds an Orders-list composition beside the existing three-level narrative.
+- `.alert.admonition` `.alert-title` is semibold.
+- `.alert.admonition.solid` frames its body with the neutral `--border` instead of the intent.
+- `.badge`, `.alert` and `.btn.soft` paint a translucent intent tint with no rim; the shared `.soft` on `.card`, `.navbar`, `.app-nav` and `.chat-bubble` stays an opaque mix.
+- `--soft-hover-alpha` defaults to `6%`.
+- `actual-css contrast` measures soft pairs composited on `--surface`, `--surface-raised` and `--surface-subtle`.
+- Demo themes retune `--soft-fg-mix` (bootstrap-v6, corporate, cyberpunk, dim, edge, gradient, indigo, lavender, material, square) and `--soft-hover-alpha` (lavender, neon) for the soft tint.
+
+## [0.13.0] - 2026-10-06
+### Breaking changes
+
+- `--cluster-justify`, `--cluster-align` and `--cluster-wrap` no longer inherit into nested `.cluster` rows; set them on the row itself or select nested rows.
+- `--grid-columns` and `--grid-min` no longer inherit into a nested `.grid`.
+- `.avatar-stack` no longer infers its size from child `.avatar.sm`/`.lg`; set `.sm`/`.lg` on the stack and omit size classes on its avatars.
+- `--focus-outline` has no default value: it is a fallback-only hook that replaces the generic focus line; read `var(--focus-ring-width) solid var(--focus-outline-color)` instead.
+- `data-enhance="tabs"` needs `role="tablist"` on the same element; without it the runtime warns and wires nothing.
+- `.nav-link` shows its current state only for `aria-current="page"` or `"location"`, and `a.list-item` only for `"page"` or `"true"`; any other value, `"false"` included, is inert.
+
+### Added
+
+- `actual-css/js/full` now exposes `enhance`, `applyEnhancement`, and `registerEnhancement` from the same runtime that registers the built-ins.
+- `--tab-flex` on `.tabs` sets each tab's flex; `1 1 0` gives equal-width tabs.
+- In supporting browsers, an overflowing link `.tabs` strip or `.steps-horizontal` row starts scrolled to its `aria-current` item, with no runtime (`scroll-initial-target`).
+- `--border-control` sets the resting edge of fields, choices, switches, OTP cells, choice cards, `.join-addon` and the color and file inputs; it defaults to `--border`, which keeps separating surfaces.
+
+### Changed
+
+- `.steps-horizontal` fits short labels on a phone, wraps (and hyphenates) long names, and aligns its outer stacked steps with the row's edges at every width.
+- `.steps-horizontal` `--step-min` defaults to the marker width and only sets a wider budget; `--step-gap` also separates adjacent steps.
+- `forms/form-actions` no longer has to load after `layout/cluster`: `.form-actions` relays its hooks into the row's `--cluster-*`.
+- An overflowing horizontal `.tabs` strip shows its selected tab in full, at connect and whenever selection changes, scrolling the strip only.
+- `.floating-field` accepts its `.field-label` before or after the control; state is read through `:has()` on the cell.
+- `.list-item` regions center on the row by default; add `.items-start` to the row or the `.list` for rows with long supporting text.
+- A horizontal `.tabs` strip never wraps, nor do its labels: a strip that does not fit scrolls horizontally.
+- `.breadcrumb` never wraps: a trail that does not fit truncates its labels with an ellipsis, ancestors before the current page.
+- A navigation flyout `.tab` shows the current state with `aria-current="true"` while its panel holds the current page.
+- `.breadcrumb` ancestor labels truncate on their `<a>` or `<span>`; the current page also truncates as bare text in an `<li aria-current="page">`.
+- The current `.nav-list` link trait sits inside the row's inline padding with rounded ends, instead of flush on its rounded edge.
+- A horizontal `.tabs` strip hides its scrollbar; selecting or focusing the clipped tab scrolls it into view.
+- An overflowing horizontal `.tabs` strip fades the edges it can still scroll toward, where scroll-driven animations are supported.
+- `.scroller` no longer styles the scrollbar on touch screens, where the native overlay scrollbar, hidden at rest, stays.
+
+### Fixed
+
+- `actual-css contrast --theme FILE` and `actual-css design --theme FILE` accept a theme written on `:root` and measure its own values, not the default palette.
+- A default `.btn.outline` in a field `.join` takes `--border-control` like the field, not `--border`.
+- The scrolling body of a `dialog.modal.scrollable` and a `dialog.drawer` keeps the focus line of its first and last controls inside its clip.
+- `actual-css contrast` and `actual-css design` detect a theme written `[data-theme = "brand"]` or `[data-theme=brand]`, and ignore selectors quoted in comments.
+- `actual-css contrast` measures a theme whose name contains `&` or `<` under its own name, instead of an island the name had broken.
+- `actual-css contrast` and `actual-css design` reject a `--name` the theme file does not declare as `[data-theme]`, instead of measuring the framework defaults.
+- A bare heading in a `dialog.modal > header` drops its block margins, so the band no longer grows and the title centers on the close.
+- A `<nav>` around `.breadcrumb` or `.tabs` shrinks inside a flex or grid row, so the trail truncates or the strip scrolls instead of the page.
+- An enhanced tablist no longer operates the tabs of a nested `role="tablist"` that has no `data-enhance="tabs"`.
+- A tablist with `data-enhance="tabs"` sets its roving tabindex when a classic script in `<head>` connects it before its tabs are parsed.
+- The generic focus line of links, `summary` and nav items follows a `--focus-ring-width` set on a `[data-theme]` island or any region, like the `.btn` ring beside it.
+- The focus reserve of a scrolling dialog or drawer body is `--focus-outline-offset` + `--focus-ring-width`, no longer widened by `2 × --border-width`.
+
 ## [0.12.0] - 2026-10-02
 ### Breaking changes
 

package/README.md

@@ -64,7 +64,7 @@ size is not worth optimizing:
 ```
 
 ```html
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/actual-css@0.12/dist/actual.full.min.css">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/actual-css@0.14/dist/actual.full.min.css">
 ```
 
 ## Usage
@@ -137,7 +137,7 @@ registries:
 * **Full runtime, zero-config** — every built-in enhancer, compiled:
 
   ```html
-  <script src="https://cdn.jsdelivr.net/npm/actual-css@0.12/dist/actual.full.js" type="module"></script>
+  <script src="https://cdn.jsdelivr.net/npm/actual-css@0.14/dist/actual.full.js" type="module"></script>
   ```
 
 * **Your own build** — copy the package's `src/js/full.js` as your entry,
@@ -174,14 +174,13 @@ For more conservative fallbacks, import and compose the source entrypoints direc
 
 Actual CSS is before 1.0:
 
-* A minor release (`0.11` → `0.12`) may remove or rename classes and hooks. Each
-  one ships an upgrade guide; the current one is
-  [Upgrading to 0.12](docs/pages/guides/upgrading.md).
-* A patch release (`0.11.0` → `0.11.1`) keeps every class and hook. It fixes
+* A minor release (`0.12` → `0.13`) may remove or rename classes and hooks. Each
+  one adds a section to [Upgrading](docs/pages/guides/upgrading.md).
+* A patch release (`0.12.0` → `0.12.1`) keeps every class and hook. It fixes
   bugs and may add hooks, so a fix can still move a rendering by a few pixels.
 
-The floating `@0.11` CDN path takes patches automatically. Pin the exact
-version (`actual-css@0.12.1`) when the rendering must not change without a
+The floating `actual-css@0.14` CDN path takes patches automatically. Pin the exact
+version (`actual-css@0.14.0`) when the rendering must not change without a
 review.
 
 ## Browser support

package/components.json

@@ -16,7 +16,12 @@
     ],
     "states": [
       "open"
-    ]
+    ],
+    "pseudoElements": {
+      ".accordion summary": [
+        "::after"
+      ]
+    }
   },
   {
     "name": "alert",
@@ -60,7 +65,12 @@
     "states": [
       "aria-current",
       "aria-hidden"
-    ]
+    ],
+    "pseudoElements": {
+      ".app-nav a": [
+        "::before"
+      ]
+    }
   },
   {
     "name": "avatar",
@@ -74,20 +84,25 @@
       "--avatar-size",
       "--avatar-radius",
       "--avatar-font-size",
+      "--avatar-bg",
       "--avatar-stack-size",
       "--avatar-stack-font-size",
       "--avatar-stack-overlap",
       "--avatar-stack-ring"
     ],
     "internalHooks": [
-      "--avatar-bg",
       "--avatar-fg",
       "--avatar-status-translate-x"
     ],
     "states": [
       "aria-disabled",
       "disabled"
-    ]
+    ],
+    "pseudoElements": {
+      ".avatar": [
+        "::after"
+      ]
+    }
   },
   {
     "name": "badge",
@@ -143,7 +158,12 @@
     ],
     "states": [
       "aria-current"
-    ]
+    ],
+    "pseudoElements": {
+      ".breadcrumb li": [
+        "::before"
+      ]
+    }
   },
   {
     "name": "busy",
@@ -157,7 +177,12 @@
     ],
     "states": [
       "aria-busy"
-    ]
+    ],
+    "pseudoElements": {
+      "[aria-busy]": [
+        "::before"
+      ]
+    }
   },
   {
     "name": "button",
@@ -257,7 +282,12 @@
       "--close-color",
       "--close-hover-color",
       "--close-hover-overlay"
-    ]
+    ],
+    "pseudoElements": {
+      ".close": [
+        "::before"
+      ]
+    }
   },
   {
     "name": "data-list",
@@ -284,7 +314,8 @@
       "--drawer-closed-translate",
       "--drawer-focus-bleed",
       "--drawer-close-reserve",
-      "--drawer-motion-duration"
+      "--drawer-motion-duration",
+      "--drawer-motion-ease"
     ],
     "states": [
       "open"
@@ -307,7 +338,13 @@
     ],
     "states": [
       "open"
-    ]
+    ],
+    "pseudoElements": {
+      ".fab summary": [
+        "::after",
+        "::before"
+      ]
+    }
   },
   {
     "name": "flyout",
@@ -405,7 +442,12 @@
     ],
     "states": [
       "aria-current"
-    ]
+    ],
+    "pseudoElements": {
+      ".list-item": [
+        "::before"
+      ]
+    }
   },
   {
     "name": "menu",
@@ -429,6 +471,11 @@
       "aria-disabled",
       "disabled"
     ],
+    "pseudoElements": {
+      ".menu-item": [
+        "::before"
+      ]
+    },
     "jsImport": "actual-css/js/menu"
   },
   {
@@ -486,12 +533,20 @@
       "navbar",
       "navbar-brand"
     ],
+    "publicHooks": [
+      "--state-selected-text"
+    ],
     "internalHooks": [
       "--gap"
     ],
     "states": [
       "aria-current"
-    ]
+    ],
+    "pseudoElements": {
+      ".nav-link": [
+        "::before"
+      ]
+    }
   },
   {
     "name": "pagination",
@@ -554,6 +609,30 @@
       "scrollspy"
     ]
   },
+  {
+    "name": "segmented",
+    "source": "src/css/components/segmented.css",
+    "cssImport": "actual-css/css/components/segmented",
+    "classes": [
+      "segment",
+      "segmented"
+    ],
+    "publicHooks": [
+      "--segmented-bg",
+      "--segmented-pad",
+      "--segmented-radius",
+      "--segmented-fg",
+      "--segmented-selected-bg",
+      "--segmented-selected-border"
+    ],
+    "states": [
+      "aria-current",
+      "aria-disabled",
+      "aria-selected",
+      "checked",
+      "disabled"
+    ]
+  },
   {
     "name": "skeleton",
     "source": "src/css/components/skeleton.css",
@@ -626,7 +705,25 @@
     ],
     "states": [
       "aria-current"
-    ]
+    ],
+    "pseudoElements": {
+      ".step-complete": [
+        "::before"
+      ],
+      ".steps [aria-current]": [
+        "::before"
+      ],
+      ".steps li": [
+        "::after",
+        "::before"
+      ],
+      ".steps-horizontal li": [
+        "::after"
+      ],
+      ".steps-vertical li": [
+        "::after"
+      ]
+    }
   },
   {
     "name": "tab",
@@ -637,8 +734,13 @@
       "tabs"
     ],
     "publicHooks": [
+      "--tab-flex",
       "--tab-gap"
     ],
+    "internalHooks": [
+      "--tab-edge",
+      "--tab-fade-dir"
+    ],
     "states": [
       "aria-current",
       "aria-disabled",
@@ -646,6 +748,11 @@
       "aria-selected",
       "disabled"
     ],
+    "pseudoElements": {
+      ".tab": [
+        "::after"
+      ]
+    },
     "jsImport": "actual-css/js/tab",
     "enhancements": [
       "tabs"
@@ -684,6 +791,11 @@
       "hidden",
       "popover-open"
     ],
+    "pseudoElements": {
+      ".tooltip": [
+        "::before"
+      ]
+    },
     "jsImport": "actual-css/js/tooltip"
   }
 ]