@adia-ai/web-components 0.7.12 → 0.7.14

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog — @adia-ai/web-components
 
+## [0.7.14] — 2026-06-08
+
+### Fixed
+- **`input-ui`/`textarea-ui` `.value` property binding set before upgrade is no longer dropped.** A `.value=${x}` (or any reactive property) assigned during template stamp *before* the element upgrades landed as a pre-upgrade own data-property that `installProps`' `Object.defineProperty` clobbered with the signal default — so the field rendered blank while `value="${x}"` (attribute) worked, and `<select-ui>` was unaffected (inconsistent). `installProps` now captures + reifies the pre-upgrade value (WHATWG upgrade-a-property pattern), fixing it for `value` and every UIElement property. (color-app FEEDBACK-99; covered by `core/element.test.js`.)
+
+## [0.7.13] — 2026-06-06
+
+### Fixed
+- **`./css/sheet` subpath export now resolves TS types.** The 0.7.12 `.sheet.js` twin (constructable-`CSSStyleSheet` mirror of `web-components.min.css`) shipped its `./css/sheet` export with `import`/`default` but no `types` — TS consumers got no types for `constructSheet()`. Added `web-components.sheet.d.ts` (`export function constructSheet(): CSSStyleSheet | null`), the `types` condition (types-first), and the `.d.ts` to `files[]` so the tarball packs it. Caught by `verify:exports-conditionals`.
+- **`button-ui[color=warning]` hover contrast** — the warning fill's hover surface now uses `--a-warning-bg` (the -20 tint) instead of `--a-warning-strong`, whose mid-tone read muddy under the dark `--a-warning-fg`. Demo (`theme-provider.html`) card header wrapped in `<header>` for canonical structure. (dogfood-audit: warning-strong-vs-bg; check:card-structure.)
+
+### Docs
+- README CDN snippets refreshed to the current line: `@0.6` → `@0.7`, primitive count 95 → 122, pin example → `@adia-ai/web-components@0.7.13`.
+
 ## [0.7.12] — 2026-06-04
 
 ### Added
@@ -3002,7 +3016,7 @@ The future non-side-effect `class` subpath per component (allowing class import
 
 All `change` / `input` event dispatches across form-bearing components now emit a `CustomEvent` carrying `detail: { value: this.value }` (value-semantic primitives) or `detail: { value: this.value, checked: this.checked }` (boolean-semantic — switch / check / radio / option-card). Backwards-compatible — `e.target.value` still works since the host's `value` property is updated before dispatch.
 
-Driven by [consumer feedback](/Users/kimba/Projects/adia/color-app/docs/outbound/FEEDBACK-adia-packages.md) from Design Tokens Studio (2026-05-12) — eliminates the `(e.target as any).value` pattern in TypeScript consumers.
+Driven by consumer feedback from Design Tokens Studio (2026-05-12) — eliminates the `(e.target as any).value` pattern in TypeScript consumers.
 
 **Value-semantic primitives swept** (`detail: { value }`):
 - `<input-ui>` (input.js — 9 dispatch sites)
@@ -3208,7 +3222,7 @@ Lockstep version bump only — source byte-identical to v0.3.4. Internal `@adia-
 Lockstep version bump only — source byte-identical to v0.3.3. Internal `@adia-ai/*` dep ranges remain at `^0.3.0`. See root [CHANGELOG.md `## [0.3.4]`](../../CHANGELOG.md) for the cut narrative.
 ## [0.3.3] - 2026-05-07
 
-**Lockstep cut.** All 9 published `@adia-ai/*` packages now share version `0.3.3`, governed by [`docs/specs/package-architecture.md` § 15](../../../docs/specs/package-architecture.md#15-versioning-policy).
+**Lockstep cut.** All 9 published `@adia-ai/*` packages now share version `0.3.3`, governed by [`docs/specs/package-architecture.md` § 15](../../docs/specs/package-architecture.md#15-versioning-policy).
 
 ### Changed
 
@@ -3221,7 +3235,7 @@ Lockstep version bump only — source byte-identical to v0.3.3. Internal `@adia-
 ## [0.3.2] - 2026-05-06
 
 **9-package lockstep patch cut to v0.3.2.** All lockstep members share
-one version per [`docs/specs/package-architecture.md` § 15](../../../docs/specs/package-architecture.md#15-versioning-policy).
+one version per [`docs/specs/package-architecture.md` § 15](../../docs/specs/package-architecture.md#15-versioning-policy).
 Internal `@adia-ai/*` dep ranges unchanged at `^0.3.0`.
 
 ### No source changes

package/README.md

@@ -38,13 +38,13 @@ Since **v0.6.30**, this package ships pre-flattened + minified bundles under `di
 
 ```html
 <!-- CSS: all primitives, tokens, resets (443 KB raw / ~50 KB gzipped) -->
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@adia-ai/web-components@0.6/dist/web-components.min.css">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@adia-ai/web-components@0.7/dist/web-components.min.css">
 
-<!-- JS: registers all 95 primitives (~250 KB gzipped via Brotli) -->
-<script type="module" src="https://cdn.jsdelivr.net/npm/@adia-ai/web-components@0.6/dist/web-components.min.js"></script>
+<!-- JS: registers all 122 primitives (~250 KB gzipped via Brotli) -->
+<script type="module" src="https://cdn.jsdelivr.net/npm/@adia-ai/web-components@0.7/dist/web-components.min.js"></script>
 ```
 
-The `@0.6` range tracks the latest `0.6.x` patch automatically (won't jump to a breaking `0.7`). For reproducible builds, pin an exact version instead — e.g. `@adia-ai/web-components@0.6.45/dist/web-components.min.css`.
+The `@0.7` range tracks the latest `0.6.x` patch automatically (won't jump to a breaking `0.8`). For reproducible builds, pin an exact version instead — e.g. `@adia-ai/web-components@0.7.13/dist/web-components.min.css`.
 
 For composite shells, add the corresponding bundle from `@adia-ai/web-modules` — see [its README](../web-modules/#cdn-no-bundler--codepen-marketing-pages-static-html) or the [CDN usage guide](https://ui-kit.exe.xyz/site/cdn-usage). The kitchen-sink path is `@adia-ai/web-modules/dist/everything.min.js` (all primitives + all 4 shells; ~190 KB gzipped) — one tag for CodePen demos.
 
@@ -59,7 +59,7 @@ For composite shells, add the corresponding bundle from `@adia-ai/web-modules`
 ESM-only — bundlers (Vite, esbuild, webpack 5+, Rollup) resolve `import` for both `.js` and `.css`; in plain HTML use `<script type="module">` + `<link rel="stylesheet">`.
 
 ```js
-import '@adia-ai/web-components';          // registers every *-ui tag (95 primitives)
+import '@adia-ai/web-components';          // registers every *-ui tag (122 primitives)
 import '@adia-ai/web-components/css';      // every primitive's CSS (one stylesheet)
 ```
 

package/components/button/button.css

@@ -23,9 +23,10 @@ button-ui[variant="primary"]:not([disabled]):hover { --button-bg: var(--a-accent
 button-ui[color="danger"]:not([disabled]):hover     { --button-bg: var(--a-danger-strong); }
 button-ui[color="success"]:not([disabled]):hover    { --button-bg: var(--a-success-strong); }
 button-ui[color="info"]:not([disabled]):hover       { --button-bg: var(--a-info-strong); }
-/* warning fill → -strong like the rest; its mid-tone can read muddy under
-   the dark --a-warning-fg — revisit the warning ramp upstream if so. */
-button-ui[color="warning"]:not([disabled]):hover    { --button-bg: var(--a-warning-strong); }
+/* warning fill → -bg (NOT -strong like the rest): warning's -strong mid-tone
+   reads muddy under the dark --a-warning-fg, so the hover surface uses the
+   -20 tint (--a-warning-bg) for clean contrast. (dogfood-audit: warning-strong-vs-bg) */
+button-ui[color="warning"]:not([disabled]):hover    { --button-bg: var(--a-warning-bg); }
 
 /* Outline / ghost — no fill on hover; fg goes rest-color → `-strong`.
    Ghost reads --button-fg-ghost-hover (default --a-fg-strong) so consumers

package/components/frame/frame.a2ui.json

@@ -52,7 +52,17 @@
       "Modal",
       "Col"
     ],
-    "slots": {},
+    "slots": {
+      "body": {
+        "description": "The scrolling region — the only one with overflow. The native `<section>` child takes this role by tag + DOM order; any element can opt in via `slot=\"body\"`. Scrolls between the pinned header and footer (requires a definite-height parent)."
+      },
+      "footer": {
+        "description": "Pinned bottom region — typically an action bar kept visible while the body scrolls. The native `<footer>` child takes this role by tag + DOM order; any element can opt in via `slot=\"footer\"`. Optional."
+      },
+      "header": {
+        "description": "Pinned top region — stays fixed while the body scrolls. The native `<header>` child takes this role by tag + DOM order; any element can opt in via `slot=\"header\"` (a CSS [slot] match in Light DOM, not native projection — ADR-0033), e.g. `<section slot=\"header\">` as a pinned rail. Optional."
+      }
+    },
     "states": [
       {
         "description": "Default, ready for interaction.",

package/components/frame/frame.yaml

@@ -25,7 +25,25 @@ description: |
   not broken).
 props: {}
 events: {}
-slots: {}
+slots:
+  header:
+    description: >-
+      Pinned top region — stays fixed while the body scrolls. The native
+      `<header>` child takes this role by tag + DOM order; any element can opt
+      in via `slot="header"` (a CSS [slot] match in Light DOM, not native
+      projection — ADR-0033), e.g. `<section slot="header">` as a pinned rail.
+      Optional.
+  body:
+    description: >-
+      The scrolling region — the only one with overflow. The native `<section>`
+      child takes this role by tag + DOM order; any element can opt in via
+      `slot="body"`. Scrolls between the pinned header and footer (requires a
+      definite-height parent).
+  footer:
+    description: >-
+      Pinned bottom region — typically an action bar kept visible while the body
+      scrolls. The native `<footer>` child takes this role by tag + DOM order;
+      any element can opt in via `slot="footer"`. Optional.
 states:
   - name: idle
     description: Default, ready for interaction.

package/core/element.js

@@ -34,6 +34,19 @@ function installProps(el, props) {
   for (const [key, cfg] of Object.entries(props)) {
     const attr = cfg.attribute ?? key.toLowerCase();
     const type = cfg.type ?? String;
+    // Lazy property upgrade: a property assigned on the instance BEFORE it
+    // upgraded (a template engine sets `.prop=${v}` during stamp — possibly
+    // before the element is defined; see the property-binding path in
+    // template.js which sets `el[name] = v` regardless of upgrade state)
+    // lives as an own data-property. The defineProperty below would clobber it
+    // with the signal default. Capture it and reify it into the signal so the
+    // value survives upgrade (WHATWG upgrade-a-property pattern). Fixes
+    // input-ui/textarea-ui `.value=${x}`. (A reflect:true prop set pre-upgrade
+    // reifies its value but won't update its attribute until the next set —
+    // setAttribute is a no-op in the upgrade constructor; a rare, fine corner.)
+    const hasPre = Object.prototype.hasOwnProperty.call(el, key);
+    const preValue = hasPre ? el[key] : undefined;
+    if (hasPre) delete el[key];
     const sig = signal(cfg.default ?? undefined);
     el[SIG].set(key, sig);
     Object.defineProperty(el, key, {
@@ -47,6 +60,7 @@ function installProps(el, props) {
       },
       configurable: true,
     });
+    if (hasPre) sig.value = preValue;
   }
 }
 

package/core/element.test.js

@@ -63,6 +63,23 @@ describe('UIElement — properties', () => {
     expect(el.label).toBe('hi');
   });
 
+  // FEEDBACK-99 (color-app, 2026-06-07): a property assigned on the instance
+  // BEFORE upgrade — template engines set `.prop=${v}` during stamp, possibly
+  // before the element is defined (see template.js property-binding path) —
+  // must survive upgrade, not be clobbered by the signal default. WHATWG
+  // "upgrade a property" pattern, here in installProps. Fixes input-ui `.value`.
+  it('reifies a property set on the instance before upgrade (lazy upgrade)', () => {
+    const tag = `test-el-${++registrationCounter}`;
+    const el = document.createElement(tag);   // undefined tag → un-upgraded
+    document.body.appendChild(el);
+    el.value = 'pre-upgrade';                  // own data-property, no accessor yet
+    class El extends UIElement {
+      static properties = { value: { type: String, default: '' } };
+    }
+    customElements.define(tag, El);            // upgrade → installProps runs
+    expect(el.value).toBe('pre-upgrade');      // reified, not clobbered to ''
+  });
+
   it('reflects Boolean properties to HTML attributes when reflect: true', () => {
     class El extends UIElement {
       static properties = { disabled: { type: Boolean, default: false, reflect: true } };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adia-ai/web-components",
-  "version": "0.7.12",
+  "version": "0.7.14",
   "description": "AdiaUI web components \u2014 vanilla custom elements. A2UI runtime (renderer, registry, streams, wiring) lives in @adia-ai/a2ui-runtime.",
   "type": "module",
   "types": "./index.d.ts",
@@ -22,6 +22,7 @@
       "default": "./dist/web-components.min.css"
     },
     "./css/sheet": {
+      "types": "./web-components.sheet.d.ts",
       "import": "./dist/web-components.sheet.js",
       "default": "./dist/web-components.sheet.js"
     },
@@ -105,6 +106,7 @@
     "index.css",
     "index.d.ts",
     "css-module.d.ts",
+    "web-components.sheet.d.ts",
     "bin/",
     "custom-elements.json",
     "USAGE.md",

package/web-components.sheet.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Type declarations for the `@adia-ai/web-components/css/sheet` subpath — the
+ * constructable-`CSSStyleSheet` twin of `web-components.min.css` (byte-identical to the
+ * CDN bundle), adopted via `document.adoptedStyleSheets`.
+ */
+export function constructSheet(): CSSStyleSheet | null;
+export default constructSheet;