@adia-ai/web-components 0.0.28 → 0.0.33

package/components/feed/feed.js

@@ -12,12 +12,12 @@
  *     (no auto-dismiss when `duration` is null/0; close button
  *     surfaces when `dismissible` is set) but the action-required
  *     focus-trap is deferred.
- *   - Static API:  AdiaFeed.post() / .get() / .clear() / .purge()
+ *   - Static API:  UIFeed.post() / .get() / .clear() / .purge()
  *     — `purge()` directly addresses the audit's L-B4 container-leak
  *     finding by giving consumers a tear-down hook.
  *   - Global event channel:  window.dispatchEvent(new CustomEvent(
  *       'feed', { detail: { text, position, ... } })) — same shape as
- *     AdiaFeed.post() so any code can post without importing the
+ *     UIFeed.post() so any code can post without importing the
  *     module directly. Idempotent listener install (HMR-safe).
  *
  * Toast migration (spec § 2.5) is deferred — toast-ui keeps its own
@@ -25,11 +25,11 @@
  * surface has soaked.
  */
 
-import { AdiaElement, html } from '../../core/element.js';
+import { UIElement, html } from '../../core/element.js';
 
 /* ── Container — one per position, mounted into document.body ── */
 
-class AdiaFeedContainer extends AdiaElement {
+class UIFeedContainer extends UIElement {
   static properties = {
     position: { type: String, default: 'bottom-right', reflect: true },
     max:      { type: Number, default: 5,              reflect: true },
@@ -42,11 +42,11 @@ class AdiaFeedContainer extends AdiaElement {
   }
 }
 
-customElements.define('feed-ui', AdiaFeedContainer);
+customElements.define('feed-ui', UIFeedContainer);
 
 /* ── Item — one per posted message ── */
 
-class AdiaFeedItem extends AdiaElement {
+class UIFeedItem extends UIElement {
   #timer = null;
   #removing = false;
   #closeTimer = null;
@@ -59,6 +59,11 @@ class AdiaFeedItem extends AdiaElement {
     variant:     { type: String,  default: 'default',    reflect: true },
     duration:    { type: Number,  default: 4000,         reflect: true },
     dismissible: { type: Boolean, default: false,        reflect: true },
+    // Phase 2: action-required policy. When set, the item carries an
+    // action button that the user MUST click (or dismiss) before the
+    // item goes away. Spec §2.3 — action-required role=alertdialog,
+    // focus is trapped until choice is made.
+    action:      { type: String,  default: '',           reflect: true },
   };
 
   static parts = {
@@ -67,9 +72,21 @@ class AdiaFeedItem extends AdiaElement {
   static template = () => html``;
 
   #onPress = (e) => {
-    if (e.target.closest('[data-feed-close]')) this.dismiss();
+    if (e.target.closest('[data-feed-close]')) { this.dismiss(); return; }
+    // Phase 2: action button — fires the action callback (if registered
+    // via FeedHandle.update with onAction) then dismisses. The handle's
+    // .update({onAction: fn}) populates this.#onAction below.
+    if (e.target.closest('[data-feed-action]')) {
+      try { this.#onAction?.(); } catch (err) { console.warn('[feed-item] action handler threw:', err); }
+      this.dismiss();
+    }
   };
 
+  // Phase 2 focus-trap state — only used when the policy is action-required.
+  #onAction = null;
+  #focusTrapPrev = null;
+  #onTrapKeydown = null;
+
   connected() {
     this.addEventListener('press', this.#onPress);
   }
@@ -95,17 +112,22 @@ class AdiaFeedItem extends AdiaElement {
     }
 
     /* Inferred policy roles per spec §2.4. Auto-fade gets `status`;
-       sticky danger/warning gets `alert`; action-required gets
-       `alertdialog` (a future phase wires the focus trap). */
+       sticky danger/warning gets `alert`; action-required (sticky +
+       has [action]) gets `alertdialog` and a focus trap. */
     const isSticky = !this.duration || this.duration <= 0;
     const isLoud   = this.variant === 'danger' || this.variant === 'warning';
+    const isActionRequired = isSticky && !!this.action;
     let role = 'status';
-    if (isSticky && isLoud) role = 'alert';
+    if (isActionRequired) role = 'alertdialog';
+    else if (isSticky && isLoud) role = 'alert';
     this.setAttribute('role', role);
-    this.setAttribute('aria-live', role === 'alert' ? 'assertive' : 'polite');
+    this.setAttribute('aria-live', role === 'alert' || role === 'alertdialog' ? 'assertive' : 'polite');
+    if (isActionRequired) this.setAttribute('aria-modal', 'false'); // not page-blocking; focus-trap only
 
     /* Render dismiss button for sticky items (spec §2.2 — default true
-       for sticky, false for auto-fade). */
+       for sticky, false for auto-fade). Action-required items still
+       allow Escape to dismiss for safety; the action button is not the
+       only escape. */
     const wantsClose = this.dismissible || isSticky;
     let close = this.querySelector(':scope > [data-feed-close]');
     if (wantsClose && !close) {
@@ -120,6 +142,27 @@ class AdiaFeedItem extends AdiaElement {
       close.remove();
     }
 
+    /* Phase 2 — render the action button when [action] is set. Sits
+       between the body and the close button. */
+    let actionBtn = this.querySelector(':scope > [data-feed-action]');
+    if (this.action) {
+      if (!actionBtn) {
+        actionBtn = document.createElement('button-ui');
+        actionBtn.setAttribute('data-feed-action', '');
+        actionBtn.setAttribute('variant', 'ghost');
+        actionBtn.setAttribute('size', 'sm');
+        if (close && close.parentElement === this) this.insertBefore(actionBtn, close);
+        else                                       this.appendChild(actionBtn);
+      }
+      actionBtn.setAttribute('text', this.action);
+    } else if (actionBtn) {
+      actionBtn.remove();
+    }
+
+    /* Focus-trap activation for action-required. */
+    if (isActionRequired) this.#installFocusTrap();
+    else                  this.#uninstallFocusTrap();
+
     if (!this.hasAttribute('data-open') && !this.#removing) {
       this.#openRaf = requestAnimationFrame(() => {
         this.#openRaf = null;
@@ -147,31 +190,72 @@ class AdiaFeedItem extends AdiaElement {
       const container = this.parentElement;
       this.dispatchEvent(new Event('close', { bubbles: true }));
       this.remove();
-      if (container?.matches?.('feed-ui')) AdiaFeed.releaseContainerIfEmpty(container);
+      if (container?.matches?.('feed-ui')) UIFeed.releaseContainerIfEmpty(container);
     }, this.#getDuration());
   }
 
   update(patch) {
     if (!patch || typeof patch !== 'object') return;
     for (const k of Object.keys(patch)) {
-      if (k in AdiaFeedItem.properties) this[k] = patch[k];
+      if (k in UIFeedItem.properties) this[k] = patch[k];
     }
+    // Phase 2: handle is set via the FeedHandle's update(); not a
+    // reflected attribute, so it lives outside the property loop.
+    if (typeof patch.onAction === 'function') this.#onAction = patch.onAction;
     this.#scheduleAutoDismiss();
   }
 
+  // Phase 2 focus-trap. Installs on action-required items; saves the
+  // previously-focused element so we can return focus on dismiss; cycles
+  // Tab/Shift-Tab between focusable descendants; Escape dismisses.
+  #installFocusTrap() {
+    if (this.#onTrapKeydown) return; // already installed
+    this.#focusTrapPrev = document.activeElement;
+    const focusables = () => [...this.querySelectorAll('button, button-ui, [tabindex]:not([tabindex="-1"]), input, [data-feed-action], [data-feed-close]')]
+      .filter((el) => !el.hasAttribute('disabled') && el.offsetParent !== null);
+    this.#onTrapKeydown = (e) => {
+      if (e.key === 'Escape') { e.stopPropagation(); this.dismiss(); return; }
+      if (e.key !== 'Tab') return;
+      const els = focusables();
+      if (!els.length) return;
+      const first = els[0];
+      const last  = els[els.length - 1];
+      const active = document.activeElement;
+      if (e.shiftKey && active === first) { e.preventDefault(); last.focus(); }
+      else if (!e.shiftKey && active === last) { e.preventDefault(); first.focus(); }
+    };
+    this.addEventListener('keydown', this.#onTrapKeydown, true);
+    // Move focus into the item — prefer the action button.
+    queueMicrotask(() => {
+      const els = focusables();
+      const action = this.querySelector('[data-feed-action]');
+      (action || els[0])?.focus?.();
+    });
+  }
+
+  #uninstallFocusTrap() {
+    if (!this.#onTrapKeydown) return;
+    this.removeEventListener('keydown', this.#onTrapKeydown, true);
+    this.#onTrapKeydown = null;
+    // Restore focus to whatever had it before the trap engaged.
+    try { this.#focusTrapPrev?.focus?.(); } catch { /* element may have been removed */ }
+    this.#focusTrapPrev = null;
+  }
+
   disconnected() {
     this.removeEventListener('press', this.#onPress);
     if (this.#timer) { clearTimeout(this.#timer); this.#timer = null; }
     if (this.#closeTimer) { clearTimeout(this.#closeTimer); this.#closeTimer = null; }
     if (this.#openRaf != null) { cancelAnimationFrame(this.#openRaf); this.#openRaf = null; }
+    this.#uninstallFocusTrap();
   }
 }
 
-customElements.define('feed-item-ui', AdiaFeedItem);
+customElements.define('feed-item-ui', UIFeedItem);
 
-/* ── Static API — AdiaFeed ── */
+/* ── Static API — UIFeed ── */
 
-class AdiaFeed {
+class UIFeed {
   static #containers = new Map();
 
   /**
@@ -182,14 +266,14 @@ class AdiaFeed {
    * top-right + another in bottom-center) without collision.
    */
   static get(position = 'bottom-right') {
-    let el = AdiaFeed.#containers.get(position);
+    let el = UIFeed.#containers.get(position);
     if (el && el.isConnected) return el;
     el = document.createElement('feed-ui');
     el.setAttribute('position', position);
     if ('popover' in HTMLElement.prototype) el.setAttribute('popover', 'manual');
     document.body.appendChild(el);
     try { el.showPopover?.(); } catch { /* graceful fallback */ }
-    AdiaFeed.#containers.set(position, el);
+    UIFeed.#containers.set(position, el);
     return el;
   }
 
@@ -205,6 +289,12 @@ class AdiaFeed {
    * @param {string} [opts.position='bottom-right']
    * @param {boolean} [opts.dismissible]  override default (true for sticky, false for auto)
    * @param {string} [opts.id]
+   * @param {string} [opts.action]  Phase 2 — action button label. When set,
+   *                                duration is forced to null (sticky); the
+   *                                item gets role=alertdialog + focus trap.
+   * @param {function} [opts.onAction]  Phase 2 — callback invoked when the
+   *                                action button is pressed. Item dismisses
+   *                                after the callback returns.
    */
   static post(opts = {}) {
     const {
@@ -216,18 +306,30 @@ class AdiaFeed {
       position = 'bottom-right',
       dismissible,
       id,
+      action = '',
+      onAction,
     } = opts;
     const v = variant === 'error' ? 'danger' : variant;  // documented alias
-    const container = AdiaFeed.get(position);
+    const container = UIFeed.get(position);
+    // Phase 2 max-queue: items above [max] queue with [data-queued] and
+    // become visible as visible items dismiss.
+    const max = parseInt(container.getAttribute('max') || '5', 10);
+    const visibleCount = [...container.children].filter((c) =>
+      c.tagName === 'FEED-ITEM-UI' && !c.hasAttribute('data-queued')
+    ).length;
     const item = document.createElement('feed-item-ui');
     if (id) item.setAttribute('data-id', id);
     item.text = text;
     item.heading = heading;
     item.icon = icon;
     item.variant = v;
-    item.duration = duration;
+    // Action-required forces sticky.
+    item.duration = action ? 0 : duration;
     if (dismissible != null) item.dismissible = !!dismissible;
+    if (action) item.action = action;
+    if (visibleCount >= max) item.setAttribute('data-queued', '');
     container.appendChild(item);
+    if (typeof onAction === 'function') item.update({ onAction });
     return {
       id: id ?? null,
       dismiss: () => item.dismiss(),
@@ -237,7 +339,7 @@ class AdiaFeed {
 
   /** Clear all items in a single lane. */
   static clear(position = 'bottom-right') {
-    const el = AdiaFeed.#containers.get(position);
+    const el = UIFeed.#containers.get(position);
     if (!el) return;
     for (const item of [...el.children]) {
       if (item.tagName === 'FEED-ITEM-UI') item.dismiss?.();
@@ -246,31 +348,38 @@ class AdiaFeed {
 
   /** Tear down ALL containers. Test cleanup; addresses audit L-B4. */
   static purge() {
-    for (const el of AdiaFeed.#containers.values()) {
+    for (const el of UIFeed.#containers.values()) {
       try { el.hidePopover?.(); } catch { /* noop */ }
       el.remove();
     }
-    AdiaFeed.#containers.clear();
+    UIFeed.#containers.clear();
   }
 
-  /** Internal: drop a lane when its last item exits. */
+  /** Internal: drop a lane when its last item exits. Also rotates the
+   *  Phase 2 max-queue: when a visible item leaves, promote the oldest
+   *  queued sibling so the visible-count returns to [max]. */
   static releaseContainerIfEmpty(container) {
-    if (!container || container.children.length > 0) return;
+    if (!container) return;
+    // Promote the oldest queued sibling (if any) before deciding whether
+    // to release. The queue is FIFO; queued items live at the tail.
+    const queued = container.querySelector('feed-item-ui[data-queued]');
+    if (queued) queued.removeAttribute('data-queued');
+    if (container.children.length > 0) return;
     try { container.hidePopover?.(); } catch { /* noop */ }
     container.remove();
-    for (const [pos, el] of AdiaFeed.#containers) {
-      if (el === container) AdiaFeed.#containers.delete(pos);
+    for (const [pos, el] of UIFeed.#containers) {
+      if (el === container) UIFeed.#containers.delete(pos);
     }
   }
 }
 
-/* Global 'feed' CustomEvent listener — same shape as AdiaFeed.post().
+/* Global 'feed' CustomEvent listener — same shape as UIFeed.post().
    Idempotent (HMR-safe via window flag). */
 if (typeof window !== 'undefined' && !window.__adiaFeedListenerInstalled) {
   window.__adiaFeedListenerInstalled = true;
   window.addEventListener('feed', (e) => {
-    if (e?.detail && typeof e.detail === 'object') AdiaFeed.post(e.detail);
+    if (e?.detail && typeof e.detail === 'object') UIFeed.post(e.detail);
   });
 }
 
-export { AdiaFeedContainer, AdiaFeedItem, AdiaFeed };
+export { UIFeedContainer, UIFeedItem, UIFeed };

package/components/feed/feed.yaml

@@ -1,7 +1,7 @@
 # Generated alongside feed.js — kept in sync by hand for now (feed
 # is a Phase-1 skeleton; once it stabilizes, run the regen pipeline).
 $schema: ../../../../scripts/schemas/component.yaml.schema.json
-name: AdiaFeedContainer
+name: UIFeedContainer
 tag: feed-ui
 component: Feed
 category: container
@@ -10,7 +10,7 @@ description: >-
   Shared top-layer feed channel. Per docs/specs/feed-channel.md
   (SPEC-FEED-CHANNEL-001). Per-position singletons mounted lazily into
   document.body via Popover API; consumers post via the static API
-  (`AdiaFeed.post()`) or the global 'feed' CustomEvent.
+  (`UIFeed.post()`) or the global 'feed' CustomEvent.
 props:
   position:
     description: Lane the feed renders into

package/components/field/field.a2ui.json

@@ -64,7 +64,7 @@
       "input",
       "wrapper"
     ],
-    "name": "AdiaField",
+    "name": "UIField",
     "related": [
       "input",
       "select",

package/components/field/field.js

@@ -32,9 +32,9 @@
  * MutationObserver watches childList so a swapped-in control gets its
  * `for=` and `aria-describedby` rebound.
  */
-import { AdiaElement } from '../../core/element.js';
+import { UIElement } from '../../core/element.js';
 
-class AdiaField extends AdiaElement {
+class UIField extends UIElement {
   static properties = {
     label:    { type: String,  default: '',    reflect: true },
     hint:     { type: String,  default: '',    reflect: true },
@@ -42,7 +42,7 @@ class AdiaField extends AdiaElement {
     inline:   { type: Boolean, default: false, reflect: true },
   };
 
-  // The validation message lives on the child control (AdiaFormElement.error
+  // The validation message lives on the child control (UIFormElement.error
   // is the single source of truth — validity is a property of the value, not
   // of the layout wrapper). field-ui mirrors the child's error string into
   // its own [data-field-error] slot so the validation message renders below
@@ -184,7 +184,7 @@ class AdiaField extends AdiaElement {
     const el = document.createElement('div');
     el.setAttribute('slot', 'hint');
     el.setAttribute('data-field-hint', '');
-    el.setAttribute('id', AdiaField.#nextMsgId('hint'));
+    el.setAttribute('id', UIField.#nextMsgId('hint'));
     el.hidden = true;
     this.appendChild(el);
     this.#hintEl = el;
@@ -196,7 +196,7 @@ class AdiaField extends AdiaElement {
     const el = document.createElement('div');
     el.setAttribute('slot', 'error');
     el.setAttribute('data-field-error', '');
-    el.setAttribute('id', AdiaField.#nextMsgId('err'));
+    el.setAttribute('id', UIField.#nextMsgId('err'));
     el.setAttribute('role', 'alert');
     el.hidden = true;
     this.appendChild(el);
@@ -210,7 +210,7 @@ class AdiaField extends AdiaElement {
       this.#labelEl.removeAttribute('for');
       return;
     }
-    if (!control.id) control.id = AdiaField.#nextId();
+    if (!control.id) control.id = UIField.#nextId();
     this.#labelEl.setAttribute('for', control.id);
   }
 
@@ -247,10 +247,10 @@ class AdiaField extends AdiaElement {
   }
 
   static #idSeq = 0;
-  static #nextId() { return `field-ctl-${++AdiaField.#idSeq}`; }
+  static #nextId() { return `field-ctl-${++UIField.#idSeq}`; }
   static #msgSeq = 0;
-  static #nextMsgId(kind) { return `field-${kind}-${++AdiaField.#msgSeq}`; }
+  static #nextMsgId(kind) { return `field-${kind}-${++UIField.#msgSeq}`; }
 }
 
-customElements.define('field-ui', AdiaField);
-export { AdiaField };
+customElements.define('field-ui', UIField);
+export { UIField };

package/components/field/field.yaml

@@ -1,6 +1,6 @@
 # Edit this file; run `npm run build:components` to regenerate a2ui.json.
 $schema: ../../../../scripts/schemas/component.yaml.schema.json
-name: AdiaField
+name: UIField
 tag: field-ui
 component: Field
 category: form
@@ -29,7 +29,7 @@ props:
     default: ""
     reflect: true
   # `error` is mirrored from the slotted control's `error` property.
-  # AdiaFormElement.error is the source of truth; field-ui renders the
+  # UIFormElement.error is the source of truth; field-ui renders the
   # message below the control in danger style, role="alert" so screen
   # readers announce changes. There is no field-level error attribute —
   # set the message on the control: `<field-ui><input-ui error="…"></input-ui></field-ui>`.

package/components/footer/footer.a2ui.json

@@ -51,7 +51,7 @@
     "keywords": [
       "footer"
     ],
-    "name": "AdiaFooter",
+    "name": "UIFooter",
     "related": [
       "avatar",
       "input",

package/components/footer/footer.yaml

@@ -1,7 +1,7 @@
 # Generated by scripts/migrate-yamls-to-v1.mjs — migrated to v1 contract.
 # Edit this file; run `npm run build:components` to regenerate a2ui.json.
 $schema: ../../../../scripts/schemas/component.yaml.schema.json
-name: AdiaFooter
+name: UIFooter
 tag: footer-ui
 component: Footer
 category: container

package/components/grid/grid.a2ui.json

@@ -69,7 +69,7 @@
       "portfolio",
       "responsive"
     ],
-    "name": "AdiaGrid",
+    "name": "UIGrid",
     "related": [
       "button",
       "badge",

package/components/grid/grid.js

@@ -5,9 +5,9 @@
  * <grid-ui columns="2" column-gap="2" row-gap="4">...</grid-ui>
  */
 
-import { AdiaElement } from '../../core/element.js';
+import { UIElement } from '../../core/element.js';
 
-class AdiaGrid extends AdiaElement {
+class UIGrid extends UIElement {
   static properties = {
     columns:   { type: String, default: '3',  reflect: true },
     gap:       { type: String, default: 'md', reflect: true },
@@ -16,6 +16,6 @@ class AdiaGrid extends AdiaElement {
   };
   static template = () => null;
 }
-customElements.define('grid-ui', AdiaGrid);
+customElements.define('grid-ui', UIGrid);
 
-export { AdiaGrid };
+export { UIGrid };

package/components/grid/grid.yaml

@@ -1,7 +1,7 @@
 # Generated by scripts/migrate-yamls-to-v1.mjs — migrated to v1 contract.
 # Edit this file; run `npm run build:components` to regenerate a2ui.json.
 $schema: ../../../../scripts/schemas/component.yaml.schema.json
-name: AdiaGrid
+name: UIGrid
 tag: grid-ui
 component: Grid
 category: layout

package/components/header/header.a2ui.json

@@ -45,7 +45,7 @@
     "keywords": [
       "header"
     ],
-    "name": "AdiaHeader",
+    "name": "UIHeader",
     "related": [
       "avatar",
       "input",

package/components/header/header.yaml

@@ -1,7 +1,7 @@
 # Generated by scripts/migrate-yamls-to-v1.mjs — migrated to v1 contract.
 # Edit this file; run `npm run build:components` to regenerate a2ui.json.
 $schema: ../../../../scripts/schemas/component.yaml.schema.json
-name: AdiaHeader
+name: UIHeader
 tag: header-ui
 component: Header
 category: container

package/components/heatmap/heatmap.a2ui.json

@@ -110,7 +110,7 @@
       "intensity",
       "activity"
     ],
-    "name": "AdiaHeatmap",
+    "name": "UIHeatmap",
     "related": [
       "chart",
       "calendar-picker"

package/components/heatmap/heatmap.js

@@ -20,11 +20,11 @@
  *   title — optional header title
  */
 
-import { AdiaElement } from '../../core/element.js';
+import { UIElement } from '../../core/element.js';
 
 const MONTHS = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
 
-class AdiaHeatmap extends AdiaElement {
+class UIHeatmap extends UIElement {
   static properties = {
     type:        { type: String,  default: 'matrix',    reflect: true },
     rows:        { type: Number,  default: 7,           reflect: true },
@@ -291,5 +291,5 @@ class AdiaHeatmap extends AdiaElement {
   };
 }
 
-customElements.define('heatmap-ui', AdiaHeatmap);
-export { AdiaHeatmap };
+customElements.define('heatmap-ui', UIHeatmap);
+export { UIHeatmap };

package/components/heatmap/heatmap.yaml

@@ -1,7 +1,7 @@
 # Generated by scripts/migrate-yamls-to-v1.mjs — migrated to v1 contract.
 # Edit this file; run `npm run build:components` to regenerate a2ui.json.
 $schema: ../../../../scripts/schemas/component.yaml.schema.json
-name: AdiaHeatmap
+name: UIHeatmap
 tag: heatmap-ui
 component: Heatmap
 category: data-display

package/components/icon/icon.a2ui.json

@@ -68,7 +68,7 @@
     "keywords": [
       "icon"
     ],
-    "name": "AdiaIcon",
+    "name": "UIIcon",
     "related": [
       "input",
       "empty-state",

package/components/icon/icon.js

@@ -1,7 +1,7 @@
-import { AdiaElement, signal, html } from '../../core/element.js';
+import { UIElement, signal, html } from '../../core/element.js';
 import { getIcon } from '../../core/icons.js';
 
-class AdiaIcon extends AdiaElement {
+class UIIcon extends UIElement {
   static properties = {
     name:   { type: String, default: '',        reflect: true },
     size:   { type: String, default: '',        reflect: true },
@@ -39,6 +39,6 @@ class AdiaIcon extends AdiaElement {
     return /^\d+(\.\d+)?$/.test(s) ? `${s}px` : s;
   }
 }
-customElements.define('icon-ui', AdiaIcon);
+customElements.define('icon-ui', UIIcon);
 
-export { AdiaIcon };
+export { UIIcon };

package/components/icon/icon.yaml

@@ -1,7 +1,7 @@
 # Generated by scripts/migrate-yamls-to-v1.mjs — migrated to v1 contract.
 # Edit this file; run `npm run build:components` to regenerate a2ui.json.
 $schema: ../../../../scripts/schemas/component.yaml.schema.json
-name: AdiaIcon
+name: UIIcon
 tag: icon-ui
 component: Icon
 category: display

package/components/image/image.a2ui.json

@@ -113,7 +113,7 @@
       "instagram",
       "assets"
     ],
-    "name": "AdiaImage",
+    "name": "UIImage",
     "related": [
       "button",
       "select",

package/components/image/image.js

@@ -14,9 +14,9 @@
  * Raw:    strips chrome (no background, no radius) for edge-to-edge rendering
  */
 
-import { AdiaElement } from '../../core/element.js';
+import { UIElement } from '../../core/element.js';
 
-class AdiaImage extends AdiaElement {
+class UIImage extends UIElement {
   static properties = {
     src:      { type: String,  default: '',      reflect: true },
     alt:      { type: String,  default: '',      reflect: true },
@@ -97,6 +97,6 @@ class AdiaImage extends AdiaElement {
     this.#skeleton = null;
   }
 }
-customElements.define('image-ui', AdiaImage);
+customElements.define('image-ui', UIImage);
 
-export { AdiaImage };
+export { UIImage };

package/components/image/image.yaml

@@ -1,7 +1,7 @@
 # Generated by scripts/migrate-yamls-to-v1.mjs — migrated to v1 contract.
 # Edit this file; run `npm run build:components` to regenerate a2ui.json.
 $schema: ../../../../scripts/schemas/component.yaml.schema.json
-name: AdiaImage
+name: UIImage
 tag: image-ui
 component: Image
 category: display