@zakkster/lite-ui-fx 1.10.0 → 1.11.0

package/CHANGELOG.md

@@ -5,6 +5,50 @@ All notable changes to `@zakkster/lite-ui-fx` are documented here.
 The format follows Keep a Changelog; this project adheres to Semantic
 Versioning.
 
+## [1.11.0] -- 2026-09-08
+
+Enrichment session E1b (decisions/0009): seven bespoke headless skins continuing the
+E1 adapter -- the select trigger (resolving the dropdown decision toward a V4 skin),
+a tri-state checkbox + checkbox-group master, and meter/steps/accordion/skeleton.
+Single-host, no new dependency; the 57-recipe registry is byte-identical.
+
+### Added
+
+- Seven headless skins on the `./headless` subpath, registered in the sibling
+  `HEADLESS_SKINS` / `SKIN_META` / `SKIN_NAMES` (4 -> 11 skins; RECIPES / RECIPE_META
+  and the 57-recipe count unchanged). Each is single-host, themeable, and allocates
+  zero bytes per frame, gated by the t6 torture tier (now gating 11 skins):
+  - `CheckboxSkin` -- tri-state from `aria-checked` (`true`|`false`|`mixed`) or the
+    `data-checked` / `data-indeterminate` presence pair, onto the existing `toggled`
+    / `indeterminate` state slots.
+  - `CheckboxGroupSkin` -- the same body over a checkbox-group master (identical
+    3-state contract; "mixed" reads as partial members).
+  - `SelectSkin` -- the select TRIGGER: `aria-expanded` drives an open/close chevron,
+    the handle `value()` fast path drives a selected-value dot. The portaled listbox
+    open-state is a recorded follow-on (decisions/0009).
+  - `MeterSkin` -- `aria-valuenow`/`min`/`max` fill, zone-tinted from `data-zone`.
+  - `StepsSkin` -- a node rail from `data-step-count` / `data-current-index` /
+    `data-complete`.
+  - `AccordionSkin` -- a header chevron + underline from `aria-expanded` / `data-open`.
+  - `SkeletonSkin` -- a zero-allocation `globalAlpha` shimmer from `data-loading` /
+    `aria-busy`.
+  `@zakkster/lite-headless` is imported nowhere and is not a dependency; no dependency
+  was added.
+
+### Changed
+
+- `llms.txt` and `README.md`: the `./headless` skin catalog lists all 11 skins, and
+  the sibling primitive count is corrected ("59" -> 62, the `@zakkster/lite-headless`
+  1.9.1 catalog). Documentation only; no code path changed.
+
+### Fixed
+
+none
+
+### Removed
+
+none
+
 ## [1.10.0] -- 2026-09-08
 
 Enrichment session E1: skinHeadless, a fourth mount adapter that paints a
@@ -41,7 +85,11 @@ byte-identical.
 
 ### Fixed
 
-none
+- ReactionPicker: paints a hairline ring around each disc and seeds the discs at
+  rest radius, so the row is visible on the first frame and where colour-emoji
+  glyphs do not render. Previously only the 4%-alpha discs and the emoji drew, so
+  an un-ticked or emoji-less environment showed an empty card. No added per-frame
+  allocation; the torture alloc baseline is unchanged.
 
 ### Removed
 

package/README.md

@@ -213,7 +213,7 @@ The fourth mount adapter, on the `./headless` subpath: **skin a `@zakkster/lite-
 
 `options`: `host` (the element the primitive paints on, **required**) plus `padding`, `seed`, `colors`, `theme`, `text`, `font`, `ticker`, `driven`. `setValue`/`setChecked` throw -- a skin reflects the primitive, it does not drive it.
 
-A skin is an ordinary recipe plus a descriptor -- `recipe.headless = { attrs, read(host, handle, state) }`. `skinHeadless` observes `attrs` and calls `read()` at **event time** (never per frame) to parse the painted state into preallocated slots. A painted attribute is truthy when present with any value but `"false"` (so both a boolean `data-disabled` and a value `data-checked="true"` work). The four E1 skins live in a registry (`HEADLESS_SKINS` / `SKIN_META`) separate from the 57 recipes.
+A skin is an ordinary recipe plus a descriptor -- `recipe.headless = { attrs, read(host, handle, state) }`. `skinHeadless` observes `attrs` and calls `read()` at **event time** (never per frame) to parse the painted state into preallocated slots. A painted attribute is truthy when present with any value but `"false"` (so both a boolean `data-disabled` and a value `data-checked="true"` work). The 11 skins live in a registry (`HEADLESS_SKINS` / `SKIN_META`) separate from the 57 recipes.
 
 ```js
 import { skinHeadless, SwitchSkin } from '@zakkster/lite-ui-fx/headless';
@@ -231,7 +231,7 @@ const skin = skinHeadless(sw, SwitchSkin, {
 skin.destroy();                                         // host + handle left untouched
 ```
 
-E1 skins: `SwitchSkin` (`data-checked`), `SliderSkin` (`aria-valuenow`/`min`/`max`), `ProgressSkin` (`aria-valuenow`/`max` + `data-complete`/`data-loading`), `RatingSkin` (`aria-valuenow`/`max`). See [0008](decisions/0008-headless-skins.md).
+E1 skins: `SwitchSkin` (`data-checked`), `SliderSkin` (`aria-valuenow`/`min`/`max`), `ProgressSkin` (`aria-valuenow`/`max` + `data-complete`/`data-loading`), `RatingSkin` (`aria-valuenow`/`max`). E1b skins: `CheckboxSkin` (tri-state `aria-checked` `true`|`false`|`mixed`), `CheckboxGroupSkin` (the same body over a checkbox-group master), `SelectSkin` (the select **trigger** -- `aria-expanded` + `handle.value()`; the portaled listbox open-state is a follow-on), `MeterSkin` (`aria-valuenow`/`min`/`max` + `data-zone`), `StepsSkin` (`data-step-count`/`data-current-index`), `AccordionSkin` (`aria-expanded`/`data-open`), `SkeletonSkin` (`data-loading`/`aria-busy`). See [0008](decisions/0008-headless-skins.md) + [0009](decisions/0009-headless-skins-select.md).
 
 ### The recipe registry
 
@@ -377,6 +377,7 @@ Each is an ADR under [`decisions/`](decisions/):
 - **[0006](decisions/0006-docs-and-demo.md) -- Blueprint docs + a demo that consumes the package.** This README on the blueprint spine, and one demo generated from `RECIPE_META` that imports only public exports (no more inline reimplementation).
 - **[0007](decisions/0007-group-contract.md) -- Grouped controls: one canvas, N native elements.** A third mount mode (`mountUIFXGroup`) for radio/tabs/stepper/rating; `onSelect` is a ninth, group-only hook and group state a superset of scalar state, so the single-element API is byte-identical (additive, 1.9.0).
 - **[0008](decisions/0008-headless-skins.md) -- Headless skins: paint a lite-headless primitive.** `skinHeadless` couples through the painted-attribute contract (one `MutationObserver`, parsed at event time), never an import -- so lite-headless is a compose-target, never a dependency. The four skins live in a registry separate from the 57 recipes (additive, 1.10.0).
+- **[0009](decisions/0009-headless-skins-select.md) -- Headless skins II: the select + tri-state pack.** Adds seven bespoke skins (checkbox tri-state + checkbox-group master, select trigger, meter, steps, accordion, skeleton), all single-host and mapping onto the existing state slots (no state-shape change). `SelectSkin` resolves the `<select>`/dropdown decision toward a V4 skin of the trigger; the portaled listbox open-state is a recorded follow-on. No new dependency (additive, 1.11.0).
 
 ---
 
@@ -399,7 +400,7 @@ The suite covers the a11y state machine (one Space press = one `onToggle`, state
 - **Not a component framework.** It paints controls; it does not do layout, routing, or state management. Bring your own.
 - **Not a worker-mode renderer.** A 200x48 UI canvas does not amortise a worker hop; the shared main-thread ticker is the right tool. (`@zakkster/lite-ambient-fx` is the worker-mode fullscreen backdrop.)
 - **Not a chart or data-viz library.** These are interactive *controls*, not plots. Charts are `@zakkster/lite-charts`.
-- **Not an ARIA behaviour engine.** It renders. The one keyboard behaviour it writes is the tablist roving-tabindex for a `TABS` group (radio/rating/stepper selection is the browser's own); it does not own focus traps, dismiss stacks, or listbox/combobox/menu patterns. `@zakkster/lite-headless` owns behaviour, permanently -- and its 59 primitives are a decorate-mode skin target.
+- **Not an ARIA behaviour engine.** It renders. The one keyboard behaviour it writes is the tablist roving-tabindex for a `TABS` group (radio/rating/stepper selection is the browser's own); it does not own focus traps, dismiss stacks, or listbox/combobox/menu patterns. `@zakkster/lite-headless` owns behaviour, permanently -- and its 62 primitives are a headless-skin target.
 
 ---
 
@@ -412,7 +413,7 @@ Part of the **@zakkster** zero-GC stack:
 - [`lite-random`](https://www.npmjs.com/package/@zakkster/lite-random) -- seeded Mulberry32 RNG (deterministic particle recipes)
 - [`lite-scratch-fx`](https://www.npmjs.com/package/@zakkster/lite-scratch-fx) -- canvas scratch-reveal recipes; shares the `{ light, mid, dark }` theme shape
 - [`lite-ambient-fx`](https://www.npmjs.com/package/@zakkster/lite-ambient-fx) -- fullscreen ambient backdrops (the worker-mode sibling)
-- [`lite-headless`](https://www.npmjs.com/package/@zakkster/lite-headless) -- 59 ARIA-correct primitives; a decorate-mode skin target
+- [`lite-headless`](https://www.npmjs.com/package/@zakkster/lite-headless) -- 62 ARIA-correct primitives; a headless-skin target (`skinHeadless`)
 - **`lite-ui-fx`** -- this package
 
 ---

package/UIFXController.js

@@ -22,7 +22,7 @@ import { Ticker } from '@zakkster/lite-ticker';
 
 // Three-place version sync: this constant, package.json "version", and the
 // VERSION line in llms.txt must always match. /release keeps them locked.
-export const VERSION = '1.10.0';
+export const VERSION = '1.11.0';
 
 // ---------------------------------------------------------
 //  SHARED TICKER (ref-counted, one RAF for all UI components)

package/UIFXHeadless.d.ts

@@ -16,6 +16,13 @@ export {
     SliderSkin,
     ProgressSkin,
     RatingSkin,
+    CheckboxSkin,
+    CheckboxGroupSkin,
+    SelectSkin,
+    MeterSkin,
+    StepsSkin,
+    AccordionSkin,
+    SkeletonSkin,
     HEADLESS_SKINS,
     SKIN_META,
     SKIN_NAMES,

package/UIFXHeadless.js

@@ -17,6 +17,13 @@ export {
     SliderSkin,
     ProgressSkin,
     RatingSkin,
+    CheckboxSkin,
+    CheckboxGroupSkin,
+    SelectSkin,
+    MeterSkin,
+    StepsSkin,
+    AccordionSkin,
+    SkeletonSkin,
     HEADLESS_SKINS,
     SKIN_META,
     SKIN_NAMES,

package/UIFXRecipes.d.ts

@@ -348,6 +348,13 @@ export declare function SwitchSkin(options?: RecipeOptions): HeadlessSkinRecipe;
 export declare function SliderSkin(options?: RecipeOptions): HeadlessSkinRecipe;
 export declare function ProgressSkin(options?: RecipeOptions): HeadlessSkinRecipe;
 export declare function RatingSkin(options?: RecipeOptions): HeadlessSkinRecipe;
+export declare function CheckboxSkin(options?: RecipeOptions): HeadlessSkinRecipe;
+export declare function CheckboxGroupSkin(options?: RecipeOptions): HeadlessSkinRecipe;
+export declare function SelectSkin(options?: RecipeOptions): HeadlessSkinRecipe;
+export declare function MeterSkin(options?: RecipeOptions): HeadlessSkinRecipe;
+export declare function StepsSkin(options?: RecipeOptions): HeadlessSkinRecipe;
+export declare function AccordionSkin(options?: RecipeOptions): HeadlessSkinRecipe;
+export declare function SkeletonSkin(options?: RecipeOptions): HeadlessSkinRecipe;
 
 /** A headless-skin meta row. `primitive` names the lite-headless primitive the
  *  skin is designed to paint. */

package/UIFXRecipes.js

@@ -2548,13 +2548,15 @@ export function DayNightToggle(o = {}) {
 
 /** 13. Reaction Picker -- 5 emoji-style circles that inflate on hover region. */
 export function ReactionPicker(o = {}) {
-    let sizes=new Float32Array(5), selected=-1;
+    let sizes=new Float32Array(5).fill(10), selected=-1;   // seed at the rest radius so frame 0 draws full discs, not radius-0 nothing
     const emojis=['\u{1F610}','\u{1F642}','\u{1F60A}','\u{1F604}','\u{1F929}'];
     // `colors` is the 5-reaction palette; `theme` seeds it. Normalised to 5.
     const base = o.colors ? o.colors
         : (o.theme ? [o.theme.light,o.theme.mid,o.theme.dark,o.theme.light,o.theme.mid] : ['#9999b8','#fbbf24','#fb923c','#f472b6','#ff6b6b']);
     const colors = base.length>=5 ? base : Array.from({length:5},(_,i)=>base[i%base.length]);
     const colors30=colors.map((col)=>col+'30');                  // active fill (was `${color}30`)
+    const REST_FILL='rgba(255,255,255,.10)';                     // at-rest disc: was 4% (near-invisible); 10% so the row always reads
+    const RING='rgba(255,255,255,.22)';                          // hairline ring, theme-invariant: keeps the control legible even if the emoji glyph never paints
     const REACT_LABELS=['MEH','OK','NICE','GREAT','LOVE'];        // was a per-frame array literal
     const FONTS=[]; for(let i=0;i<=48;i++)FONTS[i]=i+'px sans-serif'; // emoji font by rounded size
     return {
@@ -2562,21 +2564,25 @@ export function ReactionPicker(o = {}) {
             const gap=st.w/5;
             const hoverIdx=st.hover?clamp(Math.floor(ptr.x/gap),0,4):-1;
 
+            c.lineWidth=1;c.strokeStyle=RING;   // ring state is constant across the 5 discs -- set once per frame
             for(let i=0;i<5;i++){
                 const active=i===hoverIdx;
                 sizes[i]=lerp(sizes[i],active?16:10,dt*12);
                 const cx=gap*i+gap/2,cy=st.h/2;
 
-                // Circle
-                c.fillStyle=active?colors30[i]:'rgba(255,255,255,.04)';
-                c.beginPath();c.arc(cx,cy-sizes[i]+10,sizes[i],0,PI2);c.fill();
+                // Disc + hairline ring. The ring is the robustness net: the disc
+                // fill is faint and the emoji may not paint at all (a colour-emoji
+                // font draws its own glyph; a mono/absent font leaves almost
+                // nothing), but a stroked ring always renders, so the control never
+                // reads blank -- on frame 0 or in an emoji-less environment.
+                c.fillStyle=active?colors30[i]:REST_FILL;
+                c.beginPath();c.arc(cx,cy-sizes[i]+10,sizes[i],0,PI2);c.fill();c.stroke();
 
                 // Emoji face -- font from a const-string LUT. Set an OPAQUE fill
-                // first: the circle's fillStyle above is translucent (4% at rest),
-                // and a colour glyph inherits that alpha, so without this the faces
-                // are invisible until hover. colors[i] keeps a mono-emoji fallback
-                // tinted per reaction; a colour-emoji font ignores the hue and only
-                // takes the full alpha. Precomputed array read -- zero alloc.
+                // first: the disc + ring above are translucent, and a colour glyph
+                // inherits that alpha, so without this the faces are dim. colors[i]
+                // keeps a mono-emoji fallback tinted per reaction; a colour-emoji
+                // font ignores the hue and only takes the full alpha. Array read -- zero alloc.
                 c.font=FONTS[Math.round(sizes[i]*1.2)]||FONTS[48];c.textAlign='center';c.textBaseline='middle';
                 c.fillStyle=colors[i];
                 c.fillText(emojis[i],cx,cy-sizes[i]+10);
@@ -3615,6 +3621,251 @@ export function RatingSkin(o = {}) {
     };
 }
 
+/** Checkbox skin (E1b, decisions/0009) -- a box that draws a tick when checked
+ *  and a dash when indeterminate ("mixed"). Tri-state read from aria-checked (the
+ *  VALUE form true|false|mixed) or the data-* presence pair -- both map onto the
+ *  EXISTING toggled + indeterminate slots (no state-shape change). CheckboxGroupSkin
+ *  aliases this: a checkbox-group master paints the identical 3-state contract, so
+ *  "mixed" just reads as "some members". Zero per-frame alloc. */
+export function CheckboxSkin(o = {}) {
+    const P = resolveTheme(o, { accent: '#38bdf8', dim: '#3a3a4a', dim2: '#e2e2f0' });
+    let on = 0;   // eased box fill (checked or mixed)
+    let mk = 0;   // eased mark draw
+    return {
+        headless: {
+            attrs: ['aria-checked', 'data-checked', 'data-indeterminate', 'data-disabled', 'aria-disabled'],
+            read(host, handle, st) {
+                const ac = host.getAttribute('aria-checked');       // value form: true|false|mixed
+                st.indeterminate = ac === 'mixed' || _skinBool(host, 'data-indeterminate');
+                st.toggled = !st.indeterminate && (ac === 'true' || _skinBool(host, 'data-checked'));
+                st.disabled = _skinBool(host, 'data-disabled') || _ariaTrue(host, 'aria-disabled');
+            },
+        },
+        tick(c, dt, now, st) {
+            const s = st.w < st.h ? st.w : st.h;
+            const bx = (st.w - s) / 2, by = (st.h - s) / 2, rr = s * 0.22;
+            const filled = st.toggled || st.indeterminate;
+            const k = dt * 14;
+            on += ((filled ? 1 : 0) - on) * (k > 1 ? 1 : k);
+            mk += ((filled ? 1 : 0) - mk) * (k > 1 ? 1 : k);
+            const base = st.disabled ? 0.4 : 1;
+            c.globalAlpha = base;
+            c.strokeStyle = P.dim; c.lineWidth = 2;
+            roundRect(c, bx + 1, by + 1, s - 2, s - 2, rr); c.stroke();
+            if (on > 0.01) {
+                c.globalAlpha = base * on;
+                c.fillStyle = P.accent; roundRect(c, bx + 1, by + 1, s - 2, s - 2, rr); c.fill();
+            }
+            if (mk > 0.01) {
+                c.globalAlpha = base * mk;
+                c.strokeStyle = P.dim2; c.lineWidth = s * 0.1; c.lineCap = 'round';
+                c.beginPath();
+                if (st.indeterminate) {
+                    c.moveTo(bx + s * 0.28, by + s * 0.5); c.lineTo(bx + s * 0.72, by + s * 0.5);
+                } else {
+                    c.moveTo(bx + s * 0.26, by + s * 0.52);
+                    c.lineTo(bx + s * 0.44, by + s * 0.70);
+                    c.lineTo(bx + s * 0.76, by + s * 0.32);
+                }
+                c.stroke(); c.lineCap = 'butt';
+            }
+            c.globalAlpha = 1;
+            if (st.focused) fr(c, st.w, st.h, rr);
+        },
+    };
+}
+export const CheckboxGroupSkin = CheckboxSkin;
+
+/** Select skin (E1b, decisions/0009) -- the closed/expanded TRIGGER of a
+ *  lite-headless select (the item-6 dropdown resolution). A rounded field with a
+ *  chevron that flips on aria-expanded and a dot when a value is selected (handle
+ *  value() fast path). The portaled listbox is NOT painted -- the single-host
+ *  adapter places one overlay over the trigger box; the open-state popup is the
+ *  recorded follow-on (decisions/0009). Zero per-frame alloc. */
+export function SelectSkin(o = {}) {
+    const P = resolveTheme(o, { accent: '#a78bfa', dim: '#3a3a4a', dim2: '#e2e2f0' });
+    let op = 0;   // eased open
+    return {
+        headless: {
+            attrs: ['aria-expanded', 'data-disabled', 'aria-disabled'],
+            read(host, handle, st) {
+                st.toggled = _ariaTrue(host, 'aria-expanded');
+                st.disabled = _skinBool(host, 'data-disabled') || _ariaTrue(host, 'aria-disabled');
+                st.complete = !!(handle && typeof handle.value === 'function' && handle.value() != null);
+            },
+        },
+        tick(c, dt, now, st) {
+            const w = st.w, h = st.h, rr = h * 0.28;
+            const k = dt * 12; op += ((st.toggled ? 1 : 0) - op) * (k > 1 ? 1 : k);
+            const base = st.disabled ? 0.4 : 1;
+            c.globalAlpha = base;
+            c.strokeStyle = st.toggled ? P.accent : P.dim; c.lineWidth = 2;
+            roundRect(c, 1, 1, w - 2, h - 2, rr); c.stroke();
+            if (op > 0.01) {
+                c.globalAlpha = base * 0.12 * op;
+                c.fillStyle = P.accent; roundRect(c, 1, 1, w - 2, h - 2, rr); c.fill();
+                c.globalAlpha = base;
+            }
+            if (st.complete) {
+                c.fillStyle = P.accent;
+                c.beginPath(); c.arc(h * 0.5, h * 0.5, h * 0.14, 0, PI2); c.fill();
+            }
+            const cx = w - h * 0.5, cy = h * 0.5, s = h * 0.16, dir = 1 - 2 * op;
+            c.strokeStyle = P.dim2; c.lineWidth = 2; c.lineCap = 'round';
+            c.beginPath();
+            c.moveTo(cx - s, cy - s * 0.5 * dir); c.lineTo(cx, cy + s * 0.5 * dir); c.lineTo(cx + s, cy - s * 0.5 * dir);
+            c.stroke(); c.lineCap = 'butt';
+            c.globalAlpha = 1;
+            if (st.focused) fr(c, w, h, rr);
+        },
+    };
+}
+
+/** Meter skin (E1b) -- a horizontal gauge from aria-valuenow/min/max, zone-tinted
+ *  from data-zone (optimum|sub-optimum|low). Zero per-frame alloc. */
+export function MeterSkin(o = {}) {
+    const P = resolveTheme(o, { accent: '#6ee7b6', accent2: '#fbbf24', dim: '#9999b8', dim2: '#f87171' });
+    let dv = 0;
+    return {
+        headless: {
+            attrs: ['aria-valuenow', 'aria-valuemin', 'aria-valuemax', 'data-zone', 'data-disabled'],
+            read(host, handle, st) {
+                const mn = _skinNum(host, 'aria-valuemin', 0);
+                const mx = _skinNum(host, 'aria-valuemax', 100);
+                const nw = _skinNum(host, 'aria-valuenow', mn);
+                const span = mx - mn;
+                let v = span > 0 ? (nw - mn) / span : 0;
+                st.val = v < 0 ? 0 : (v > 1 ? 1 : v);
+                const zone = host.getAttribute('data-zone');
+                st.complete = zone === 'optimum';
+                st.error = zone === 'low';
+                st.disabled = _skinBool(host, 'data-disabled');
+            },
+        },
+        tick(c, dt, now, st) {
+            const w = st.w, cy = st.h / 2, bh = st.h < 12 ? st.h : 12;
+            const k = dt * 8; dv += (st.val - dv) * (k > 1 ? 1 : k);
+            const col = st.error ? P.dim2 : (st.complete ? P.accent : P.accent2);
+            c.globalAlpha = st.disabled ? 0.2 : 0.25;
+            c.fillStyle = P.dim; roundRect(c, 0, cy - bh / 2, w, bh, bh / 2); c.fill();
+            c.globalAlpha = st.disabled ? 0.4 : 1;
+            const fx = dv * w;
+            c.fillStyle = col; roundRect(c, 0, cy - bh / 2, fx > 0 ? fx : 0, bh, bh / 2); c.fill();
+            c.globalAlpha = 1;
+            if (st.focused) fr(c, w, st.h, bh / 2);
+        },
+    };
+}
+
+/** Steps skin (E1b) -- a rail of N nodes filled up to data-current-index (count
+ *  from data-step-count), the current node on the leading edge; data-complete
+ *  fills all. count/val slots reused (val carries the raw current index). Fixed
+ *  loop bounded to 12, zero per-frame alloc. */
+export function StepsSkin(o = {}) {
+    const P = resolveTheme(o, { accent: '#a78bfa', dim: '#3a3a4a', dim2: '#e2e2f0' });
+    let dv = 0;   // eased current index
+    return {
+        headless: {
+            attrs: ['data-step-count', 'data-current-index', 'data-complete', 'data-disabled'],
+            read(host, handle, st) {
+                let n = _skinNum(host, 'data-step-count', 3) | 0;
+                st.count = n < 2 ? 2 : (n > 12 ? 12 : n);
+                st.val = _skinNum(host, 'data-current-index', 0);   // raw current index (0-based)
+                st.complete = _skinBool(host, 'data-complete');
+                st.disabled = _skinBool(host, 'data-disabled');
+            },
+        },
+        tick(c, dt, now, st) {
+            const n = st.count > 1 ? st.count : 3;
+            const cur = st.complete ? n - 1 : (st.val < 0 ? 0 : st.val);
+            const k = dt * 10; dv += (cur - dv) * (k > 1 ? 1 : k);
+            const cy = st.h / 2, gap = st.w / n, rad = (st.h < gap ? st.h : gap) * 0.22;
+            const base = st.disabled ? 0.4 : 1;
+            const x0 = gap * 0.5, xN = gap * (n - 0.5);
+            c.globalAlpha = base * 0.25; c.strokeStyle = P.dim; c.lineWidth = 3;
+            c.beginPath(); c.moveTo(x0, cy); c.lineTo(xN, cy); c.stroke();
+            c.globalAlpha = base; c.strokeStyle = P.accent;
+            const fx = x0 + gap * dv;
+            c.beginPath(); c.moveTo(x0, cy); c.lineTo(fx > xN ? xN : (fx < x0 ? x0 : fx), cy); c.stroke();
+            for (let i = 0; i < n; i++) {
+                const cx = gap * (i + 0.5);
+                c.globalAlpha = base; c.fillStyle = (i <= dv + 0.001) ? P.accent : P.dim;
+                c.beginPath(); c.arc(cx, cy, rad, 0, PI2); c.fill();
+            }
+            c.globalAlpha = 1;
+            if (st.focused) fr(c, st.w, st.h, rad);
+        },
+    };
+}
+
+/** Accordion skin (E1b) -- a header chevron that flips on aria-expanded /
+ *  data-open plus an underline hint that grows with open. Single trigger host,
+ *  zero per-frame alloc. */
+export function AccordionSkin(o = {}) {
+    const P = resolveTheme(o, { accent: '#38bdf8', dim: '#3a3a4a', dim2: '#e2e2f0' });
+    let op = 0;
+    return {
+        headless: {
+            attrs: ['aria-expanded', 'data-open', 'data-disabled', 'aria-disabled'],
+            read(host, handle, st) {
+                st.toggled = _ariaTrue(host, 'aria-expanded') || _skinBool(host, 'data-open');
+                st.disabled = _skinBool(host, 'data-disabled') || _ariaTrue(host, 'aria-disabled');
+            },
+        },
+        tick(c, dt, now, st) {
+            const w = st.w, h = st.h;
+            const k = dt * 12; op += ((st.toggled ? 1 : 0) - op) * (k > 1 ? 1 : k);
+            const base = st.disabled ? 0.4 : 1;
+            const cx = w - h * 0.5, cy = h * 0.5, s = h * 0.16, dir = 1 - 2 * op;
+            c.globalAlpha = base;
+            c.strokeStyle = st.toggled ? P.accent : P.dim2; c.lineWidth = 2; c.lineCap = 'round';
+            c.beginPath();
+            c.moveTo(cx - s, cy - s * 0.5 * dir); c.lineTo(cx, cy + s * 0.5 * dir); c.lineTo(cx + s, cy - s * 0.5 * dir);
+            c.stroke(); c.lineCap = 'butt';
+            c.globalAlpha = base * 0.5;
+            c.strokeStyle = P.accent; c.lineWidth = 2;
+            const uw = (w - h) * op;
+            c.beginPath(); c.moveTo(2, h - 3); c.lineTo(2 + (uw > 0 ? uw : 0), h - 3); c.stroke();
+            c.globalAlpha = 1;
+            if (st.focused) fr(c, w, h, 4);
+        },
+    };
+}
+
+/** Skeleton skin (E1b) -- a shimmer sweep over a rounded placeholder while
+ *  data-loading / aria-busy; fades out when ready. Zero per-frame alloc: a moving
+ *  highlight band via globalAlpha, never a per-frame gradient. */
+export function SkeletonSkin(o = {}) {
+    const P = resolveTheme(o, { accent: '#e2e2f0', dim: '#3a3a4a' });
+    let ph = 0;    // shimmer phase 0..1
+    let vis = 0;   // eased placeholder visibility (1 loading, 0 ready)
+    return {
+        headless: {
+            attrs: ['data-loading', 'aria-busy'],
+            read(host, handle, st) {
+                st.indeterminate = _skinBool(host, 'data-loading') || _ariaTrue(host, 'aria-busy');
+                st.complete = !st.indeterminate;
+            },
+        },
+        tick(c, dt, now, st) {
+            const w = st.w, h = st.h, rr = (h < 10 ? h : 10) * 0.5;
+            const loading = st.indeterminate;
+            const k = dt * 6; vis += ((loading ? 1 : 0) - vis) * (k > 1 ? 1 : k);
+            if (vis < 0.01) { c.globalAlpha = 1; return; }
+            if (loading) { ph += dt * 0.8; if (ph > 1) ph -= 1; }
+            c.globalAlpha = vis * 0.5;
+            c.fillStyle = P.dim; roundRect(c, 0, 0, w, h, rr); c.fill();
+            const bw = w * 0.28, bx = -bw + ph * (w + bw);
+            const bx0 = bx < 0 ? 0 : bx, bx1 = bx + bw > w ? w : bx + bw;
+            if (bx1 > bx0) {
+                c.globalAlpha = vis * 0.18;
+                c.fillStyle = P.accent; roundRect(c, bx0, 0, bx1 - bx0, h, rr); c.fill();
+            }
+            c.globalAlpha = 1;
+        },
+    };
+}
+
 /**
  * The headless-skin registry -- a SIBLING of RECIPES, not part of it (decisions/
  * 0008 decision 4). id -> factory (null-prototype), the meta rows a picker/demo
@@ -3626,6 +3877,13 @@ export const HEADLESS_SKINS = Object.assign(Object.create(null), {
     sliderSkin: SliderSkin,
     progressSkin: ProgressSkin,
     ratingSkin: RatingSkin,
+    checkboxSkin: CheckboxSkin,
+    checkboxGroupSkin: CheckboxGroupSkin,
+    selectSkin: SelectSkin,
+    meterSkin: MeterSkin,
+    stepsSkin: StepsSkin,
+    accordionSkin: AccordionSkin,
+    skeletonSkin: SkeletonSkin,
 });
 
 export const SKIN_META = [
@@ -3633,6 +3891,13 @@ export const SKIN_META = [
     { id: 'sliderSkin', name: 'Slider Skin', primitive: 'slider', themeable: true, motionSafe: false },
     { id: 'progressSkin', name: 'Progress Skin', primitive: 'progress', themeable: true, motionSafe: false },
     { id: 'ratingSkin', name: 'Rating Skin', primitive: 'rating', themeable: true, motionSafe: false },
+    { id: 'checkboxSkin', name: 'Checkbox Skin', primitive: 'checkbox', themeable: true, motionSafe: false },
+    { id: 'checkboxGroupSkin', name: 'Checkbox Group Skin', primitive: 'checkbox-group', themeable: true, motionSafe: false },
+    { id: 'selectSkin', name: 'Select Skin', primitive: 'select', themeable: true, motionSafe: false },
+    { id: 'meterSkin', name: 'Meter Skin', primitive: 'meter', themeable: true, motionSafe: false },
+    { id: 'stepsSkin', name: 'Steps Skin', primitive: 'steps', themeable: true, motionSafe: false },
+    { id: 'accordionSkin', name: 'Accordion Skin', primitive: 'accordion', themeable: true, motionSafe: false },
+    { id: 'skeletonSkin', name: 'Skeleton Skin', primitive: 'skeleton', themeable: true, motionSafe: false },
 ];
 
 export const SKIN_NAMES = Object.freeze(Object.keys(HEADLESS_SKINS));

package/llms.txt

@@ -1,7 +1,7 @@
 # @zakkster/lite-ui-fx
 > Canvas-hijacked UI components with pluggable recipe system. 57 built-in recipes.
 
-VERSION 1.10.0
+VERSION 1.11.0
 
 ## Install
 npm i @zakkster/lite-ui-fx
@@ -96,6 +96,7 @@ driven    // U5 host clock: boolean; true = no ticker/RAF, the host calls instan
 // identical, one overlay canvas + one MutationObserver removed on destroy; the
 // lite-headless handle is never destroyed (the caller owns it).
 import { skinHeadless, SwitchSkin, SliderSkin, ProgressSkin, RatingSkin } from '@zakkster/lite-ui-fx/headless';
+import { CheckboxSkin, CheckboxGroupSkin, SelectSkin, MeterSkin, StepsSkin, AccordionSkin, SkeletonSkin } from '@zakkster/lite-ui-fx/headless'; // E1b
 import { HEADLESS_SKINS, SKIN_META, SKIN_NAMES } from '@zakkster/lite-ui-fx/headless';
 const skin = skinHeadless(handle, SwitchSkin, { host: switchThumbEl, theme });
 skin.el          // the skinned host (unchanged)
@@ -108,12 +109,19 @@ skin.destroy()   // remove overlay + observer + listeners; host + handle untouch
 //   EVENT time (never per frame) to parse painted state into preallocated slots.
 // options: { host(REQUIRED), padding, seed, colors, theme, text, font, ticker, driven };
 //   hijack-only keys throw. setValue/setChecked throw (a skin reflects the primitive).
-// E1 skins (SKIN_META, a registry SEPARATE from RECIPES -- the 57-recipe count is
-//   unchanged): SwitchSkin (data-checked/aria-checked), SliderSkin (aria-valuenow/
-//   min/max + data-dragging), ProgressSkin (aria-valuenow/max + data-complete/
-//   data-loading), RatingSkin (aria-valuenow/max over N items). Each themeable, born
-//   zero-alloc + t6-gated. A painted attr is truthy when PRESENT with any value but
-//   "false" (handles boolean data-disabled and value data-checked="true").
+// Skins (SKIN_META, a registry SEPARATE from RECIPES -- the 57-recipe count is
+//   unchanged). E1: SwitchSkin (data-checked/aria-checked), SliderSkin (aria-
+//   valuenow/min/max + data-dragging), ProgressSkin (aria-valuenow/max + data-
+//   complete/data-loading), RatingSkin (aria-valuenow/max over N). E1b (0009):
+//   CheckboxSkin (tri-state aria-checked true|false|mixed + data-checked/data-
+//   indeterminate), CheckboxGroupSkin (same body over a checkbox-group master),
+//   SelectSkin (the select TRIGGER: aria-expanded + handle.value(); the portaled
+//   listbox open-state is a follow-on), MeterSkin (aria-valuenow/min/max + data-zone),
+//   StepsSkin (data-step-count/data-current-index/data-complete), AccordionSkin
+//   (aria-expanded/data-open), SkeletonSkin (data-loading/aria-busy shimmer). 11
+//   total, each themeable, born zero-alloc + t6-gated. A painted attr is truthy when
+//   PRESENT with any value but "false" (handles boolean data-disabled and value
+//   data-checked="true").
 
 ## Host clock (U5) -- three mutually-exclusive modes, both mount modes
 // default (neither option): the shared ref-counted ticker -- one RAF for all
@@ -250,7 +258,11 @@ See UIFX-RECIPE-GUIDE.md (included in package).
   paints a @zakkster/lite-headless primitive by OBSERVING its painted state
   attributes (one MutationObserver; parsed at event time, never per frame) --
   lite-ui-fx paints, lite-headless behaves. lite-headless is a compose-target, NEVER
-  a dependency (the package imports it nowhere). 4 skins (switch/slider/progress/
-  rating) live in a registry (HEADLESS_SKINS/SKIN_META) SEPARATE from the 57 recipes;
-  each themeable + zero per-frame alloc (t6-gated). setValue/setChecked throw (a skin
-  reflects the primitive); destroy leaves the host + handle untouched. See 0008.
+  a dependency (the package imports it nowhere). 11 skins live in a registry
+  (HEADLESS_SKINS/SKIN_META) SEPARATE from the 57 recipes: E1 switch/slider/progress/
+  rating; E1b (decisions/0009) checkbox (tri-state) + checkbox-group master, select
+  (the trigger -- resolving the dropdown/item-6 decision toward a V4 skin; the
+  portaled listbox open-state is a follow-on), meter, steps, accordion, skeleton --
+  still bespoke (no lite-particles). Each themeable + zero per-frame alloc (t6-gated).
+  setValue/setChecked throw (a skin reflects the primitive); destroy leaves the host
+  + handle untouched. See 0008 + 0009.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zakkster/lite-ui-fx",
-  "version": "1.10.0",
+  "version": "1.11.0",
   "description": "Canvas-hijacked UI components with a pluggable recipe system: 57 built-in recipes across toggles, buttons, sliders, knobs, loaders, checkboxes, counters and ratings, in three mount modes (hijack, decorate, grouped controls) plus a lite-headless skin adapter.",
   "author": "Zahary Shinikchiev <shinikchiev@yahoo.com>",
   "license": "MIT",