actual-css 0.13.0 → 0.14.0

package/CHANGELOG.md

@@ -2,6 +2,59 @@
 
 ## [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
 

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.13/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.13/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,
@@ -179,8 +179,8 @@ Actual CSS is before 1.0:
 * 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 `actual-css@0.13` CDN path takes patches automatically. Pin the exact
-version (`actual-css@0.13.0`) 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",
@@ -87,7 +97,12 @@
     "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",
@@ -308,7 +338,13 @@
     ],
     "states": [
       "open"
-    ]
+    ],
+    "pseudoElements": {
+      ".fab summary": [
+        "::after",
+        "::before"
+      ]
+    }
   },
   {
     "name": "flyout",
@@ -406,7 +442,12 @@
     ],
     "states": [
       "aria-current"
-    ]
+    ],
+    "pseudoElements": {
+      ".list-item": [
+        "::before"
+      ]
+    }
   },
   {
     "name": "menu",
@@ -430,6 +471,11 @@
       "aria-disabled",
       "disabled"
     ],
+    "pseudoElements": {
+      ".menu-item": [
+        "::before"
+      ]
+    },
     "jsImport": "actual-css/js/menu"
   },
   {
@@ -487,12 +533,20 @@
       "navbar",
       "navbar-brand"
     ],
+    "publicHooks": [
+      "--state-selected-text"
+    ],
     "internalHooks": [
       "--gap"
     ],
     "states": [
       "aria-current"
-    ]
+    ],
+    "pseudoElements": {
+      ".nav-link": [
+        "::before"
+      ]
+    }
   },
   {
     "name": "pagination",
@@ -555,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",
@@ -627,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",
@@ -652,6 +748,11 @@
       "aria-selected",
       "disabled"
     ],
+    "pseudoElements": {
+      ".tab": [
+        "::after"
+      ]
+    },
     "jsImport": "actual-css/js/tab",
     "enhancements": [
       "tabs"
@@ -690,6 +791,11 @@
       "hidden",
       "popover-open"
     ],
+    "pseudoElements": {
+      ".tooltip": [
+        "::before"
+      ]
+    },
     "jsImport": "actual-css/js/tooltip"
   }
 ]