@adia-ai/web-components 0.8.39 → 0.8.41

package/components/header/header.yaml

@@ -9,8 +9,8 @@ category: container
 version: 1
 description: Header — styled by closest container parent (Card / Drawer / Modal / Page / AppShell). Contains heading text and optional action slot.
 props:
-  padding:
-    description: Bare attribute — enables default header padding. The container parent's own `padding` prop sets the scale.
+  padded:
+    description: Bare attribute — enables default header padding. The container parent's own `padding` prop sets the scale. Renamed from `[padding]` (gh#1335) — a boolean can't share a name with the global Scale-grammar `[padding]` attribute (ADR-0053).
     type: boolean
     default: false
     reflect: true
@@ -79,7 +79,7 @@ a2ui:
       default+icon+heading+description+action via slot vocabulary; extra
       layout primitives fight the chrome styling.
     - >-
-      The `padding` attribute is a bare boolean — it enables default
+      The `padded` attribute is a bare boolean — it enables default
       header padding, but the *scale* is set by the container parent's
       own `padding` prop. Do not pass numeric values.
 anti_patterns: []

package/components/heatmap/heatmap.a2ui.json

@@ -85,7 +85,7 @@
   "unevaluatedProperties": false,
   "x-adiaui": {
     "anti_patterns": [],
-    "category": "data-display",
+    "category": "data",
     "composes": [],
     "events": {
       "cell-click": {
@@ -123,6 +123,7 @@
       "activity"
     ],
     "name": "UIHeatmap",
+    "parts": {},
     "related": [
       "chart",
       "calendar-picker"

package/components/heatmap/heatmap.class.js

@@ -193,7 +193,7 @@ export class UIHeatmap extends UIElement {
     const isDayGrid = this.type === 'day-grid';
     const cellTrack = isDayGrid ? 'var(--heatmap-cell-min-size, 0.75rem)' : 'minmax(0, 1fr)';
     const grid = document.createElement('div');
-    grid.setAttribute('data-grid', '');
+    grid.setAttribute('data-heatmap-grid', '');
     grid.style.gridTemplateColumns = `repeat(${cols}, ${cellTrack})`;
     grid.style.gridTemplateRows = `repeat(${rows}, ${isDayGrid ? 'var(--heatmap-cell-min-size, 0.75rem)' : '1fr'})`;
     for (let r = 0; r < rows; r++) {

package/components/heatmap/heatmap.css

@@ -46,14 +46,14 @@
   /* day-grid: fixed-size cell tracks + intrinsic width so the host scrolls
      instead of squishing. (class.js writes the fixed gridTemplateColumns
      inline for day-grid; matrix/density keep minmax(0,1fr) to fit.) */
-  :scope[type="day-grid"] > [data-grid],
+  :scope[type="day-grid"] > [data-heatmap-grid],
   :scope[type="day-grid"] > [data-months] {
     width: max-content;
   }
 
   /* Title slot */
   :scope [slot="title"] {
-    font-weight: 600;
+    font-weight: var(--a-weight-semibold);
     margin: 0;
   }
 
@@ -66,20 +66,20 @@
   }
 
   :scope [data-month-label] {
-    line-height: 1;
+    line-height: var(--a-font-leading-none);
   }
 
   /* Grid of cells */
-  :scope > [data-grid] {
+  :scope > [data-heatmap-grid] {
     display: grid;
     gap: var(--heatmap-gap);
   }
 
-  :scope[aspect="square"] > [data-grid] {
+  :scope[aspect="square"] > [data-heatmap-grid] {
     aspect-ratio: 1 / 1;
   }
 
-  :scope[aspect="wide"] > [data-grid] {
+  :scope[aspect="wide"] > [data-heatmap-grid] {
     aspect-ratio: auto;
   }
 

package/components/heatmap/heatmap.yaml

@@ -5,7 +5,7 @@ name: UIHeatmap
 tag: heatmap-ui
 status: stable
 component: Heatmap
-category: data-display
+category: data
 version: 1
 description: Grid heatmap with 5-bucket data ramp — supports day-grid (GitHub contributions),
   matrix, and density modes.

package/components/icon/icon.a2ui.json

@@ -85,6 +85,7 @@
       "icon"
     ],
     "name": "UIIcon",
+    "parts": {},
     "related": [
       "input",
       "empty-state",

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.css

@@ -14,7 +14,7 @@
 
     /* ── Typography ── */
     --inline-message-font-size: var(--a-ui-sm);
-    --inline-message-line-height: var(--a-leading-snug);
+    --inline-message-line-height: var(--a-font-leading-normal);
   }
 
   :scope {

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: {}