@adia-ai/web-components 0.8.40 → 0.8.41

package/components/image/image.a2ui.json

@@ -21,6 +21,17 @@
     "component": {
       "const": "Image"
     },
+    "cornerRadius": {
+      "description": "Border radius token. Renamed from `[radius]` (gh#1335) — a preset-enum can't share a name with the global Enum·preset `[radius]` attribute (`sharp`/`rounded`/`round`), whose vocabulary is unrelated (ADR-0053); mirrors chart-ui's own `[corner-radius]` fix (ADR-0054) and skeleton-ui's matching rename (image-ui composes skeleton-ui for its loading fallback).",
+      "type": "string",
+      "enum": [
+        "sm",
+        "md",
+        "lg",
+        "full"
+      ],
+      "default": ""
+    },
     "fallback": {
       "description": "Fallback image URL on error",
       "type": "string",
@@ -42,17 +53,6 @@
       "type": "string",
       "default": ""
     },
-    "radius": {
-      "description": "Border radius token",
-      "type": "string",
-      "enum": [
-        "sm",
-        "md",
-        "lg",
-        "full"
-      ],
-      "default": ""
-    },
     "raw": {
       "description": "Strip chrome (no background, no radius) for edge-to-edge rendering.",
       "type": "boolean",
@@ -93,7 +93,7 @@
       },
       {
         "description": "Image upload card with drag-and-drop zone and a 3-column preview grid of placeholder image cards. Footer holds cancel and upload action buttons.",
-        "a2ui": "[\n  {\n    \"id\": \"root\",\n    \"component\": \"Card\",\n    \"children\": [\n      \"hdr\",\n      \"sec\",\n      \"ftr\"\n    ]\n  },\n  {\n    \"id\": \"hdr\",\n    \"component\": \"Header\",\n    \"children\": [\n      \"title\"\n    ]\n  },\n  {\n    \"id\": \"title\",\n    \"component\": \"Text\",\n    \"slot\": \"heading\",\n    \"variant\": \"section\",\n    \"textContent\": \"Upload Images\"\n  },\n  {\n    \"id\": \"sec\",\n    \"component\": \"Section\",\n    \"children\": [\n      \"col\"\n    ]\n  },\n  {\n    \"id\": \"col\",\n    \"component\": \"Column\",\n    \"gap\": \"4\",\n    \"children\": [\n      \"uploader\",\n      \"preview-grid\"\n    ]\n  },\n  {\n    \"id\": \"uploader\",\n    \"component\": \"Upload\",\n    \"accept\": \"image/*\",\n    \"multiple\": true,\n    \"hint\": \"Drag images here or click to browse\"\n  },\n  {\n    \"id\": \"preview-grid\",\n    \"component\": \"Grid\",\n    \"columns\": \"3\",\n    \"gap\": \"3\",\n    \"children\": [\n      \"preview-1\",\n      \"preview-2\",\n      \"preview-3\"\n    ]\n  },\n  {\n    \"id\": \"preview-1\",\n    \"component\": \"Card\",\n    \"variant\": \"outlined\",\n    \"children\": [\n      \"img-1\"\n    ]\n  },\n  {\n    \"id\": \"img-1\",\n    \"component\": \"Image\",\n    \"src\": \"\",\n    \"alt\": \"Preview 1\",\n    \"height\": \"120px\",\n    \"fit\": \"cover\",\n    \"radius\": \"sm\"\n  },\n  {\n    \"id\": \"preview-2\",\n    \"component\": \"Card\",\n    \"variant\": \"outlined\",\n    \"children\": [\n      \"img-2\"\n    ]\n  },\n  {\n    \"id\": \"img-2\",\n    \"component\": \"Image\",\n    \"src\": \"\",\n    \"alt\": \"Preview 2\",\n    \"height\": \"120px\",\n    \"fit\": \"cover\",\n    \"radius\": \"sm\"\n  },\n  {\n    \"id\": \"preview-3\",\n    \"component\": \"Card\",\n    \"variant\": \"outlined\",\n    \"children\": [\n      \"img-3\"\n    ]\n  },\n  {\n    \"id\": \"img-3\",\n    \"component\": \"Image\",\n    \"src\": \"\",\n    \"alt\": \"Preview 3\",\n    \"height\": \"120px\",\n    \"fit\": \"cover\",\n    \"radius\": \"sm\"\n  },\n  {\n    \"id\": \"ftr\",\n    \"component\": \"Footer\",\n    \"children\": [\n      \"ftr-actions\"\n    ]\n  },\n  {\n    \"id\": \"ftr-actions\",\n    \"component\": \"Row\",\n    \"gap\": \"2\",\n    \"children\": [\n      \"cancel-btn\",\n      \"upload-btn\"\n    ]\n  },\n  {\n    \"id\": \"cancel-btn\",\n    \"component\": \"Button\",\n    \"text\": \"Cancel\",\n    \"variant\": \"ghost\"\n  },\n  {\n    \"id\": \"upload-btn\",\n    \"component\": \"Button\",\n    \"text\": \"Upload\",\n    \"variant\": \"primary\"\n  }\n]",
+        "a2ui": "[\n  {\n    \"id\": \"root\",\n    \"component\": \"Card\",\n    \"children\": [\n      \"hdr\",\n      \"sec\",\n      \"ftr\"\n    ]\n  },\n  {\n    \"id\": \"hdr\",\n    \"component\": \"Header\",\n    \"children\": [\n      \"title\"\n    ]\n  },\n  {\n    \"id\": \"title\",\n    \"component\": \"Text\",\n    \"slot\": \"heading\",\n    \"variant\": \"section\",\n    \"textContent\": \"Upload Images\"\n  },\n  {\n    \"id\": \"sec\",\n    \"component\": \"Section\",\n    \"children\": [\n      \"col\"\n    ]\n  },\n  {\n    \"id\": \"col\",\n    \"component\": \"Column\",\n    \"gap\": \"4\",\n    \"children\": [\n      \"uploader\",\n      \"preview-grid\"\n    ]\n  },\n  {\n    \"id\": \"uploader\",\n    \"component\": \"Upload\",\n    \"accept\": \"image/*\",\n    \"multiple\": true,\n    \"hint\": \"Drag images here or click to browse\"\n  },\n  {\n    \"id\": \"preview-grid\",\n    \"component\": \"Grid\",\n    \"columns\": \"3\",\n    \"gap\": \"3\",\n    \"children\": [\n      \"preview-1\",\n      \"preview-2\",\n      \"preview-3\"\n    ]\n  },\n  {\n    \"id\": \"preview-1\",\n    \"component\": \"Card\",\n    \"variant\": \"outlined\",\n    \"children\": [\n      \"img-1\"\n    ]\n  },\n  {\n    \"id\": \"img-1\",\n    \"component\": \"Image\",\n    \"src\": \"\",\n    \"alt\": \"Preview 1\",\n    \"height\": \"120px\",\n    \"fit\": \"cover\",\n    \"cornerRadius\": \"sm\"\n  },\n  {\n    \"id\": \"preview-2\",\n    \"component\": \"Card\",\n    \"variant\": \"outlined\",\n    \"children\": [\n      \"img-2\"\n    ]\n  },\n  {\n    \"id\": \"img-2\",\n    \"component\": \"Image\",\n    \"src\": \"\",\n    \"alt\": \"Preview 2\",\n    \"height\": \"120px\",\n    \"fit\": \"cover\",\n    \"cornerRadius\": \"sm\"\n  },\n  {\n    \"id\": \"preview-3\",\n    \"component\": \"Card\",\n    \"variant\": \"outlined\",\n    \"children\": [\n      \"img-3\"\n    ]\n  },\n  {\n    \"id\": \"img-3\",\n    \"component\": \"Image\",\n    \"src\": \"\",\n    \"alt\": \"Preview 3\",\n    \"height\": \"120px\",\n    \"fit\": \"cover\",\n    \"cornerRadius\": \"sm\"\n  },\n  {\n    \"id\": \"ftr\",\n    \"component\": \"Footer\",\n    \"children\": [\n      \"ftr-actions\"\n    ]\n  },\n  {\n    \"id\": \"ftr-actions\",\n    \"component\": \"Row\",\n    \"gap\": \"2\",\n    \"children\": [\n      \"cancel-btn\",\n      \"upload-btn\"\n    ]\n  },\n  {\n    \"id\": \"cancel-btn\",\n    \"component\": \"Button\",\n    \"text\": \"Cancel\",\n    \"variant\": \"ghost\"\n  },\n  {\n    \"id\": \"upload-btn\",\n    \"component\": \"Button\",\n    \"text\": \"Upload\",\n    \"variant\": \"primary\"\n  }\n]",
         "name": "file-upload-gallery"
       }
     ],
@@ -117,6 +117,7 @@
       "assets"
     ],
     "name": "UIImage",
+    "parts": {},
     "related": [
       "button",
       "select",
@@ -125,14 +126,27 @@
       "upload"
     ],
     "slots": {
-      "img": {
-        "description": "Stamped <img> element"
+      "image": {
+        "description": "The <img> element. Adopt-or-stamp (gh#1461): an author-supplied [slot=\"image\"] child is adopted as-is; otherwise a lazy-loading <img> is created. Renamed from the yaml's prior `img` key, which matched neither this real attribute value nor any DOM element image-ui stamps."
+      },
+      "skeleton": {
+        "description": "Loading-state placeholder shown until the image loads or errors. Adopt-or-stamp: an author-supplied [slot=\"skeleton\"] child is adopted; otherwise a <skeleton-ui> is created."
       }
     },
     "states": [
       {
         "description": "Default, ready for interaction.",
         "name": "idle"
+      },
+      {
+        "description": "The `[slot=\"image\"]` element's `load` event has fired (or it was already `complete` with a non-zero `naturalWidth` at connect — the gh#999 missed-load guard). Reveals the image and hides the skeleton via opacity transition.",
+        "attribute": "loaded",
+        "name": "loaded"
+      },
+      {
+        "description": "The image failed to load and either no `[fallback]` was set or the fallback URL itself also failed. The skeleton stays visible (no built-in visual error affordance beyond this attribute today — consumers style `[error]` themselves).",
+        "attribute": "error",
+        "name": "error"
       }
     ],
     "status": "stable",

package/components/image/image.class.js

@@ -13,7 +13,7 @@
 
 /**
  * <image-ui src="/photo.jpg" alt="Photo" width="300" height="200"></image-ui>
- * <image-ui src="/avatar.jpg" fit="cover" radius="full"></image-ui>
+ * <image-ui src="/avatar.jpg" fit="cover" corner-radius="full"></image-ui>
  * <image-ui src="/hero.jpg" size="full"></image-ui>
  * <image-ui src="/pixel.png" raw></image-ui>
  *
@@ -21,25 +21,25 @@
  * Shows skeleton-ui while loading, swaps to img on load.
  * Falls back to fallback URL or keeps skeleton on error.
  *
- * Size:   full (fills container width and height)
- * Radius: sm, md, lg, full
- * Fit:    cover (default), contain, fill, none
- * Raw:    strips chrome (no background, no radius) for edge-to-edge rendering
+ * Size:          full (fills container width and height)
+ * Corner radius: sm, md, lg, full. Renamed from `[radius]` (gh#1335).
+ * Fit:           cover (default), contain, fill, none
+ * Raw:           strips chrome (no background, no radius) for edge-to-edge rendering
  */
 
 import { UIElement } from '../../core/element.js';
 
 export class UIImage extends UIElement {
   static properties = {
-    src:      { type: String,  default: '',      reflect: true },
-    alt:      { type: String,  default: '',      reflect: true },
-    width:    { type: String,  default: '',      reflect: true },
-    height:   { type: String,  default: '',      reflect: true },
-    size:     { type: String,  default: '',      reflect: true },
-    fit:      { type: String,  default: 'cover', reflect: true },
-    radius:   { type: String,  default: '',      reflect: true },
-    raw:      { type: Boolean, default: false,   reflect: true },
-    fallback: { type: String,  default: '',      reflect: true },
+    src:          { type: String,  default: '',      reflect: true },
+    alt:          { type: String,  default: '',      reflect: true },
+    width:        { type: String,  default: '',      reflect: true },
+    height:       { type: String,  default: '',      reflect: true },
+    size:         { type: String,  default: '',      reflect: true },
+    fit:          { type: String,  default: 'cover', reflect: true },
+    cornerRadius: { type: String,  default: '',      reflect: true, attribute: 'corner-radius' },
+    raw:          { type: Boolean, default: false,   reflect: true },
+    fallback:     { type: String,  default: '',      reflect: true },
   };
 
   static template = () => null;
@@ -56,6 +56,19 @@ export class UIImage extends UIElement {
       this.#skeleton.setAttribute('height', '100%');
       this.appendChild(this.#skeleton);
     }
+    // gh#1362 — @scope proximity: skeleton-ui's own `position: relative`
+    // (its scoping root IS the element — proximity 0) always beats
+    // image-ui's `[slot="skeleton"] { position: absolute }` overlay rule
+    // (image-ui's scoping root is the PARENT — proximity 1), per CSS
+    // Cascade & Inheritance L6 — proximity is resolved before specificity
+    // or source order, so raising image-ui's specificity can't fix this.
+    // Stamp an attribute skeleton-ui's OWN `@scope` block opts into overlay
+    // mode on (skeleton.css `:scope[data-overlay]`) — that rule competes at
+    // skeleton-ui's own proximity (0), not image-ui's (1), so it wins.
+    // Set on whichever skeleton is in use (found OR just created) so an
+    // author-supplied `[slot="skeleton"]` child gets the same fix as the
+    // auto-created path.
+    this.#skeleton.setAttribute('data-overlay', '');
 
     this.#img = this.querySelector(':scope > [slot="image"]');
     if (!this.#img) {
@@ -69,10 +82,12 @@ export class UIImage extends UIElement {
     // Missed-load guard (gh#999): an image already complete when these
     // listeners attach — a parse-time-loaded authored [slot="image"], or a
     // cache hit racing the upgrade — fired `load` before we were listening.
-    // Without this check [data-loaded] never stamps and the reveal
-    // (skeleton → img opacity 1) never happens: the permanent blank box
-    // gh#988 reported. naturalWidth guards the broken-image case, which
-    // fires `error` (still listened) rather than a false reveal.
+    // Without this check [loaded] never stamps and the reveal (skeleton →
+    // img opacity 1) never happens: the permanent blank box gh#988
+    // reported. naturalWidth guards the broken-image case, which fires
+    // `error` (still listened) rather than a false reveal. (Attribute
+    // renamed from `data-loaded`/`data-error` to bare `[loaded]`/`[error]`
+    // — gh#1464, declared host states per the #1463 convention.)
     if (this.#img.complete && this.#img.naturalWidth > 0) this.#onLoad();
 
     this.#applySize();
@@ -82,8 +97,8 @@ export class UIImage extends UIElement {
     if (!this.#img) return;
 
     if (this.#img.getAttribute('src') !== this.src) {
-      this.removeAttribute('data-loaded');
-      this.removeAttribute('data-error');
+      this.removeAttribute('loaded');
+      this.removeAttribute('error');
       this.#img.src = this.src || '';
     }
 
@@ -97,15 +112,15 @@ export class UIImage extends UIElement {
   }
 
   #onLoad = () => {
-    this.setAttribute('data-loaded', '');
-    this.removeAttribute('data-error');
+    this.setAttribute('loaded', '');
+    this.removeAttribute('error');
   };
 
   #onError = () => {
     if (this.fallback && this.#img.src !== this.fallback) {
       this.#img.src = this.fallback;
     } else {
-      this.setAttribute('data-error', '');
+      this.setAttribute('error', '');
     }
   };
 

package/components/image/image.css

@@ -34,7 +34,7 @@
     transition: opacity var(--image-duration) var(--image-easing);
   }
 
-  :scope[data-loaded] [slot="image"] {
+  :scope[loaded] [slot="image"] {
     opacity: 1;
   }
 
@@ -44,23 +44,33 @@
   :scope[fit="fill"]    [slot="image"] { object-fit: fill; }
   :scope[fit="none"]    [slot="image"] { object-fit: none; }
 
-  /* ── Skeleton placeholder ── */
+  /* ── Skeleton placeholder ──
+     `position: absolute` here only reaches a slotted element with NO
+     competing `@scope` of its own. A real `skeleton-ui` child carries its
+     own `@scope (skeleton-ui) { :scope { position: relative } }` at
+     proximity 0 (its scoping root IS the element) vs. this rule's
+     proximity 1 (this scope's root is the PARENT) — proximity is resolved
+     before specificity, so that inner rule always wins here regardless
+     (gh#1362). image.class.js stamps `[data-overlay]` on the skeleton it
+     wires up; skeleton.css's own `:scope[data-overlay]` rule is what
+     actually wins the overlay for a real skeleton-ui. This rule stays as
+     the fallback for a non-skeleton-ui element authored into the slot. */
   [slot="skeleton"] {
     position: absolute;
     inset: 0;
     transition: opacity var(--image-duration) var(--image-easing);
   }
 
-  :scope[data-loaded] [slot="skeleton"] {
+  :scope[loaded] [slot="skeleton"] {
     opacity: 0;
     pointer-events: none;
   }
 
-  /* ── Radius variants ── */
-  :scope[radius="sm"]   { --image-radius: var(--a-radius-sm); }
-  :scope[radius="md"]   { --image-radius: var(--a-radius-md); }
-  :scope[radius="lg"]   { --image-radius: var(--a-radius-lg); }
-  :scope[radius="full"] { --image-radius: var(--a-radius-full); }
+  /* ── Corner-radius variants (attribute renamed from [radius], gh#1335) ── */
+  :scope[corner-radius="sm"]   { --image-radius: var(--a-radius-sm); }
+  :scope[corner-radius="md"]   { --image-radius: var(--a-radius-md); }
+  :scope[corner-radius="lg"]   { --image-radius: var(--a-radius-lg); }
+  :scope[corner-radius="full"] { --image-radius: var(--a-radius-full); }
 
   /* ── Size mode — fills the container.
      Layout-changing attribute; sanctioned in component-token-contract.md. */

package/components/image/image.d.ts

@@ -15,14 +15,14 @@ import { UIElement } from '../../core/element.js';
 export class UIImage extends UIElement {
   /** Alt text for the image. */
   alt: string;
+  /** Border radius token. Renamed from `[radius]` (gh#1335) — a preset-enum can't share a name with the global Enum·preset `[radius]` attribute (`sharp`/`rounded`/`round`), whose vocabulary is unrelated (ADR-0053); mirrors chart-ui's own `[corner-radius]` fix (ADR-0054) and skeleton-ui's matching rename (image-ui composes skeleton-ui for its loading fallback). */
+  cornerRadius: 'sm' | 'md' | 'lg' | 'full';
   /** Fallback image URL on error */
   fallback: string;
   /** Object-fit mode */
   fit: 'cover' | 'contain' | 'fill' | 'none';
   /** CSS height */
   height: string;
-  /** Border radius token */
-  radius: 'sm' | 'md' | 'lg' | 'full';
   /** Strip chrome (no background, no radius) for edge-to-edge rendering. */
   raw: boolean;
   /** Size preset — e.g. 'full' fills the container width and height. */

package/components/image/image.examples.md

@@ -6,14 +6,14 @@
 <image-ui src="https://picsum.photos/seed/img-demo/300/200" alt="Sample landscape" width="300" height="200"></image-ui>
 ```
 
-## radius
+## corner-radius
 
 ```html
-<image-ui src="https://picsum.photos/seed/r-sm/150/150" alt="Small radius" width="150" height="150" radius="sm"></image-ui>
+<image-ui src="https://picsum.photos/seed/r-sm/150/150" alt="Small radius" width="150" height="150" corner-radius="sm"></image-ui>
 ```
 
 ## fit
 
 ```html
-<image-ui src="https://picsum.photos/seed/fit-cover/400/200" alt="Cover" width="200" height="200" fit="cover" radius="md"></image-ui>
+<image-ui src="https://picsum.photos/seed/fit-cover/400/200" alt="Cover" width="200" height="200" fit="cover" corner-radius="md"></image-ui>
 ```

package/components/image/image.yaml

@@ -44,10 +44,11 @@ props:
     type: string
     default: ""
     reflect: true
-  radius:
-    description: Border radius token
+  cornerRadius:
+    description: Border radius token. Renamed from `[radius]` (gh#1335) — a preset-enum can't share a name with the global Enum·preset `[radius]` attribute (`sharp`/`rounded`/`round`), whose vocabulary is unrelated (ADR-0053); mirrors chart-ui's own `[corner-radius]` fix (ADR-0054) and skeleton-ui's matching rename (image-ui composes skeleton-ui for its loading fallback).
     type: string
     default: ""
+    attribute: corner-radius
     enum:
       - sm
       - md
@@ -63,11 +64,26 @@ props:
     default: ""
 events: {}
 slots:
-  img:
-    description: Stamped <img> element
+  image:
+    description: >-
+      The <img> element. Adopt-or-stamp (gh#1461): an author-supplied
+      [slot="image"] child is adopted as-is; otherwise a lazy-loading <img>
+      is created. Renamed from the yaml's prior `img` key, which matched
+      neither this real attribute value nor any DOM element image-ui stamps.
+  skeleton:
+    description: >-
+      Loading-state placeholder shown until the image loads or errors.
+      Adopt-or-stamp: an author-supplied [slot="skeleton"] child is adopted;
+      otherwise a <skeleton-ui> is created.
 states:
   - name: idle
     description: Default, ready for interaction.
+  - name: loaded
+    description: The `[slot="image"]` element's `load` event has fired (or it was already `complete` with a non-zero `naturalWidth` at connect — the gh#999 missed-load guard). Reveals the image and hides the skeleton via opacity transition.
+    attribute: loaded
+  - name: error
+    description: The image failed to load and either no `[fallback]` was set or the fallback URL itself also failed. The skeleton stays visible (no built-in visual error affordance beyond this attribute today — consumers style `[error]` themselves).
+    attribute: error
 traits: []
 tokens: {}
 a2ui:
@@ -296,7 +312,7 @@ examples:
           "alt": "Preview 1",
           "height": "120px",
           "fit": "cover",
-          "radius": "sm"
+          "cornerRadius": "sm"
         },
         {
           "id": "preview-2",
@@ -313,7 +329,7 @@ examples:
           "alt": "Preview 2",
           "height": "120px",
           "fit": "cover",
-          "radius": "sm"
+          "cornerRadius": "sm"
         },
         {
           "id": "preview-3",
@@ -330,7 +346,7 @@ examples:
           "alt": "Preview 3",
           "height": "120px",
           "fit": "cover",
-          "radius": "sm"
+          "cornerRadius": "sm"
         },
         {
           "id": "ftr",

package/components/inline-edit/inline-edit.a2ui.json

@@ -85,6 +85,7 @@
       "edit-in-place"
     ],
     "name": "UIInlineEdit",
+    "parts": {},
     "related": [
       "input",
       "field",

package/components/inline-message/inline-message.a2ui.json

@@ -21,10 +21,11 @@
       "$ref": "common_types.json#/$defs/DynamicString"
     },
     "live": {
-      "description": "Sets `aria-live` on the host for dynamic message updates. Empty = no live region (static annotation).",
+      "description": "Sets `aria-live` on the host for dynamic message updates. `off` = no live region (static annotation) — the A2UI v1.0 vocabulary (off | polite | assertive, SPEC REQ-013); empty string is the legacy alias for `off`, kept for existing consumers.",
       "type": "string",
       "enum": [
         "",
+        "off",
         "polite",
         "assertive"
       ],
@@ -82,6 +83,7 @@
       "notice"
     ],
     "name": "UIInlineMessage",
+    "parts": {},
     "related": [
       "alert",
       "field",

package/components/inline-message/inline-message.class.js

@@ -76,7 +76,9 @@ export class UIInlineMessage extends UIElement {
 
   render() {
     // ── aria-live wiring ──
-    // [live=""] → strip aria-live. [live=polite|assertive] → reflect.
+    // [live=""] → strip aria-live. [live=off|polite|assertive] → reflect
+    // (aria-live="off" is the A2UI v1.0 canonical "not a live region",
+    // SPEC REQ-013 — same semantics as the stripped legacy "" alias).
     if (this.live) {
       this.setAttribute('aria-live', this.live);
     } else if (this.hasAttribute('aria-live')) {

package/components/inline-message/inline-message.d.ts

@@ -22,8 +22,8 @@ import { UIElement } from '../../core/element.js';
 export class UIInlineMessage extends UIElement {
   /** Phosphor glyph override; each [variant] ships a sensible default (info / check-circle / warning / x-circle). */
   icon: string;
-  /** Sets `aria-live` on the host for dynamic message updates. Empty = no live region (static annotation). */
-  live: '' | 'polite' | 'assertive';
+  /** Sets `aria-live` on the host for dynamic message updates. `off` = no live region (static annotation) — the A2UI v1.0 vocabulary (off | polite | assertive, SPEC REQ-013); empty string is the legacy alias for `off`, kept for existing consumers. */
+  live: '' | 'off' | 'polite' | 'assertive';
   /** Single-line message text. Default-slot content wins when present. */
   text: string;
   /** Semantic severity tone — drives icon + foreground color. Default carries no leading icon (pure hint copy). */

package/components/inline-message/inline-message.yaml

@@ -44,12 +44,13 @@ props:
     default: ""
     dynamic: true
   live:
-    description: Sets `aria-live` on the host for dynamic message updates. Empty = no live region (static annotation).
+    description: Sets `aria-live` on the host for dynamic message updates. `off` = no live region (static annotation) — the A2UI v1.0 vocabulary (off | polite | assertive, SPEC REQ-013); empty string is the legacy alias for `off`, kept for existing consumers.
     type: string
     default: ""
     reflect: true
     enum:
       - ""
+      - off
       - polite
       - assertive
 events: {}

package/components/input/input.a2ui.json

@@ -14,7 +14,7 @@
   ],
   "properties": {
     "type": {
-      "description": "Input type. `password` wraps a native `<input>` for disc masking; `number` renders a contenteditable + stepper buttons (no native input). All other types use plain contenteditable.",
+      "description": "Input type. `password` wraps a native `<input>` for disc masking; `number` renders a contenteditable + stepper buttons (no native input). `text`/`email`/`tel`/`url` use plain contenteditable. input-ui does NOT implement date/time/color/search affordances — those HTML5 type values render as a plain contenteditable with no calendar, clock, swatch, or search affordance (first-pass-VALID against this enum historically, but functionally broken generation output). Use the owning primitive instead — CalendarPicker for date (+ month/week, no dedicated granularity primitive exists), DatetimePicker for datetime-local, TimePicker for time, ColorInput/ColorPicker for color, Search for search. See anti_patterns.",
       "type": "string",
       "enum": [
         "text",
@@ -22,14 +22,7 @@
         "password",
         "number",
         "tel",
-        "url",
-        "search",
-        "date",
-        "datetime-local",
-        "time",
-        "month",
-        "week",
-        "color"
+        "url"
       ],
       "default": "text"
     },
@@ -71,22 +64,34 @@
     },
     "max": {
       "description": "Maximum numeric value. Applies when `type=\"number\"`. Clamps + drives aria-valuemax + the [+] button's disabled state.",
-      "type": "number",
+      "type": [
+        "number",
+        "null"
+      ],
       "default": null
     },
     "maxlength": {
       "description": "Maximum character length for validation",
-      "type": "number",
+      "type": [
+        "number",
+        "null"
+      ],
       "default": null
     },
     "min": {
       "description": "Minimum numeric value. Applies when `type=\"number\"`. Clamps + drives aria-valuemin + the [-] button's disabled state.",
-      "type": "number",
+      "type": [
+        "number",
+        "null"
+      ],
       "default": null
     },
     "minlength": {
       "description": "Minimum character length for validation",
-      "type": "number",
+      "type": [
+        "number",
+        "null"
+      ],
       "default": null
     },
     "name": {
@@ -106,7 +111,10 @@
     },
     "precision": {
       "description": "Decimal places to display + clamp to, when `type=\"number\"`. Overrides the implicit decimal-count from `step` — e.g. `step=1 precision=2` formats \"10.00\".",
-      "type": "number",
+      "type": [
+        "number",
+        "null"
+      ],
       "default": null
     },
     "prefix": {
@@ -150,7 +158,43 @@
   ],
   "unevaluatedProperties": false,
   "x-adiaui": {
-    "anti_patterns": [],
+    "anti_patterns": [
+      {
+        "fix": "{\"component\": \"CalendarPicker\"}\n",
+        "why": "input-ui's `type` enum no longer includes \"date\" (gh#1363\nB10) — it never rendered a native date picker, just a plain\ncontenteditable surface with no calendar affordance. Use\nCalendarPicker for single-date input.\n",
+        "wrong": "{\"component\": \"Input\", \"type\": \"date\"}\n"
+      },
+      {
+        "fix": "{\"component\": \"DatetimePicker\"}\n",
+        "why": "Same gap as \"date\" — no native datetime picker rendered. Use\nDatetimePicker for combined date + time input.\n",
+        "wrong": "{\"component\": \"Input\", \"type\": \"datetime-local\"}\n"
+      },
+      {
+        "fix": "{\"component\": \"TimePicker\"}\n",
+        "why": "Same gap as \"date\" — no native time picker rendered. Use\nTimePicker for time-of-day input.\n",
+        "wrong": "{\"component\": \"Input\", \"type\": \"time\"}\n"
+      },
+      {
+        "fix": "{\"component\": \"CalendarPicker\"}\n",
+        "why": "No native month picker rendered, and no dedicated month-granularity\nprimitive exists in the catalog. CalendarPicker (day granularity)\nis the closest routed primitive.\n",
+        "wrong": "{\"component\": \"Input\", \"type\": \"month\"}\n"
+      },
+      {
+        "fix": "{\"component\": \"CalendarPicker\"}\n",
+        "why": "No native week picker rendered, and no dedicated week-granularity\nprimitive exists in the catalog. CalendarPicker (day granularity)\nis the closest routed primitive.\n",
+        "wrong": "{\"component\": \"Input\", \"type\": \"week\"}\n"
+      },
+      {
+        "fix": "{\"component\": \"ColorInput\"}\n",
+        "why": "No native color swatch/picker rendered — just a plain text\nsurface. Use ColorInput for a compact form-bearing swatch +\npopover, or ColorPicker directly for the full OKLCH picker\nsurface.\n",
+        "wrong": "{\"component\": \"Input\", \"type\": \"color\"}\n"
+      },
+      {
+        "fix": "{\"component\": \"Search\"}\n",
+        "why": "No search icon or clear affordance rendered — plain\ncontenteditable, functionally identical to the default text\ntype. Use Search for the dedicated magnifying-glass + clear +\ndebounced-search-event primitive.\n",
+        "wrong": "{\"component\": \"Input\", \"type\": \"search\"}\n"
+      }
+    ],
     "category": "input",
     "composes": [
       "button-ui",
@@ -211,12 +255,18 @@
       "tag"
     ],
     "name": "UIInput",
+    "parts": {},
     "related": [
       "avatar",
       "button",
       "table",
       "pagination",
-      "check-box"
+      "check-box",
+      "search",
+      "calendar-picker",
+      "datetime-picker",
+      "time-picker",
+      "color-input"
     ],
     "slots": {
       "leading": {