@adia-ai/web-components 0.6.36 → 0.6.38

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

@@ -0,0 +1,159 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://adiaui.dev/a2ui/v0_9/components/InlineEdit.json",
+  "title": "InlineEdit",
+  "description": "Click-to-edit text in place. Renders as static text until clicked /\nfocused + Enter, then becomes editable. Enter or blur commits; Escape\ncancels and restores the original value. Form-participating.\n\nUse for editable titles, breadcrumb labels, table-cell text fields,\ndraft document names — any case where a user expects to edit text\nwithout opening a separate dialog or input. Distinct from `<input-ui>`\n(always-editable chrome) and from `<field-ui>` (stacked label + input\ncomposition). inline-edit reads as text in static state.\n",
+  "type": "object",
+  "allOf": [
+    {
+      "$ref": "common_types.json#/$defs/ComponentCommon"
+    },
+    {
+      "$ref": "common_types.json#/$defs/CatalogComponentCommon"
+    }
+  ],
+  "properties": {
+    "commit": {
+      "description": "When to commit pending edits. `blur` (default) — saves on focusout\nor Enter. `enter` — Enter saves, blur cancels (returns to original).\n`manual` — only programmatic `commitEdit()` saves.\n",
+      "type": "string",
+      "enum": [
+        "blur",
+        "enter",
+        "manual"
+      ],
+      "default": "blur"
+    },
+    "component": {
+      "const": "InlineEdit"
+    },
+    "editing": {
+      "description": "Reflected state — `true` when the element is actively being edited.\nToggles automatically on click / Enter / blur / Escape; rarely set\nby consumers. Listen to `edit-start` / `edit-end` events instead.\n",
+      "type": "boolean",
+      "default": false
+    },
+    "placeholder": {
+      "description": "Hint text shown when the value is empty (inline-edit reads this in the static state).",
+      "type": "string",
+      "default": "Click to edit"
+    }
+  },
+  "required": [
+    "component"
+  ],
+  "unevaluatedProperties": false,
+  "x-adiaui": {
+    "anti_patterns": [
+      {
+        "fix": "<inline-edit-ui value=\"Title\" name=\"title\"> — reads as text in static state; chrome only appears while editing.",
+        "why": "Ghost variant still renders input chrome (border on focus). Looks like a control, not text.",
+        "wrong": "<input-ui value=\"Title\" name=\"title\" variant=\"ghost\">"
+      },
+      {
+        "fix": "<inline-edit-ui value=\"Title\">",
+        "why": "No state machine — no commit/cancel semantics, no form participation, no a11y wiring.",
+        "wrong": "<text-ui contenteditable>Title</text-ui>"
+      }
+    ],
+    "category": "form",
+    "composes": [],
+    "events": {
+      "cancel": {
+        "description": "Fired when Escape (or blur with commit=enter) restores the original. Bubbles."
+      },
+      "change": {
+        "description": "Fired after a successful commit. detail = { value, oldValue }. Bubbles."
+      },
+      "edit-end": {
+        "description": "Fired when leaving edit mode. detail = { committed: boolean }. Bubbles."
+      },
+      "edit-start": {
+        "description": "Fired when entering edit mode. Bubbles."
+      }
+    },
+    "examples": [
+      {
+        "description": "A draft document title that becomes editable on click.",
+        "a2ui": "[{ \"id\": \"title\", \"component\": \"InlineEdit\", \"value\": \"Untitled draft\" }]\n",
+        "name": "editable-title"
+      }
+    ],
+    "keywords": [
+      "inline-edit",
+      "editable",
+      "click-to-edit",
+      "rename",
+      "edit-in-place"
+    ],
+    "name": "UIInlineEdit",
+    "related": [
+      "input",
+      "field",
+      "text"
+    ],
+    "slots": {},
+    "states": [
+      {
+        "description": "Static — text reads as plain text with a hover hint.",
+        "name": "idle"
+      },
+      {
+        "description": "Hover affordance — subtle background tint signals editability.",
+        "name": "hover"
+      },
+      {
+        "description": "contenteditable — host is the input surface; outline + caret.",
+        "name": "editing"
+      },
+      {
+        "description": "Value is empty and not editing — placeholder text renders.",
+        "name": "empty"
+      },
+      {
+        "description": "Locked; click + keyboard activation are no-ops.",
+        "name": "disabled"
+      }
+    ],
+    "status": "stable",
+    "synonyms": {
+      "inline-edit": [
+        "editable",
+        "click-to-edit",
+        "edit-in-place",
+        "rename-in-place"
+      ]
+    },
+    "tag": "inline-edit-ui",
+    "tokens": {
+      "--inline-edit-bg-edit": {
+        "description": "Background while editing.",
+        "default": "var(--a-bg)"
+      },
+      "--inline-edit-bg-hover": {
+        "description": "Background tint on hover (idle state).",
+        "default": "var(--a-bg-muted)"
+      },
+      "--inline-edit-outline": {
+        "description": "Outline color in the editing state.",
+        "default": "var(--a-accent-strong)"
+      },
+      "--inline-edit-placeholder": {
+        "description": "Placeholder text color in empty-static state.",
+        "default": "var(--a-fg-subtle)"
+      },
+      "--inline-edit-px": {
+        "description": "Horizontal padding (inner gutter so hover tint reads as a pill, not a flush block).",
+        "default": "var(--a-space-1)"
+      },
+      "--inline-edit-py": {
+        "description": "Vertical padding.",
+        "default": "var(--a-space-0-5)"
+      },
+      "--inline-edit-radius": {
+        "description": "Border-radius for the hover / editing chrome.",
+        "default": "var(--a-radius-sm)"
+      }
+    },
+    "traits": [],
+    "version": 1
+  }
+}

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

@@ -0,0 +1,184 @@
+/**
+ * `<inline-edit-ui>` — click-to-edit text in place.
+ *
+ * Static state: textContent reads as plain text with a hover affordance.
+ * Editing state: host becomes `contenteditable=plaintext-only`. Enter or
+ * blur commits (configurable via `commit`); Escape always cancels.
+ *
+ * Form-participating via UIFormElement (name/value/required/disabled/
+ * readonly inherited). Pair with a `<form>` + `name=` to submit edits
+ * as a field.
+ *
+ * Architecture: no template (stamp-nothing). The element manages its
+ * own DOM imperatively — textContent IS the value, contenteditable
+ * attribute IS the editing state. This keeps the element trivial and
+ * lets the inherited UIFormElement value sync stay authoritative.
+ */
+
+import { UIFormElement } from '../../core/form.js';
+
+export class UIInlineEdit extends UIFormElement {
+  static properties = {
+    ...UIFormElement.properties,
+    placeholder: { type: String,  default: 'Click to edit', reflect: true },
+    editing:     { type: Boolean, default: false,           reflect: true },
+    commit:      { type: String,  default: 'blur',          reflect: true }, // blur | enter | manual
+  };
+
+  static template = () => null;
+
+  #originalValue = '';
+  #bound = false;
+  #suppressBlur = false;
+
+  connected() {
+    super.connected();
+    if (!this.hasAttribute('role')) this.setAttribute('role', 'textbox');
+    if (!this.hasAttribute('tabindex') && !this.disabled) {
+      this.setAttribute('tabindex', '0');
+    }
+    // Reflect the initial value to textContent (the source of truth for
+    // display while not editing). Setting via property triggers the
+    // reflection but not the textContent sync — do it explicitly.
+    if (this.value && this.textContent.trim() === '') {
+      this.textContent = this.value;
+    } else if (!this.value && this.textContent.trim()) {
+      // Author supplied text in the slot — treat it as the initial value.
+      this.value = this.textContent.trim();
+      this.syncValue();
+    }
+
+    if (!this.#bound) {
+      this.#bound = true;
+      this.addEventListener('click',    this.#onClick);
+      this.addEventListener('keydown',  this.#onKeydown);
+      this.addEventListener('focus',    this.#onFocus);
+      this.addEventListener('blur',     this.#onBlur);
+    }
+  }
+
+  disconnected() {
+    super.disconnected();
+    this.removeEventListener('click',    this.#onClick);
+    this.removeEventListener('keydown',  this.#onKeydown);
+    this.removeEventListener('focus',    this.#onFocus);
+    this.removeEventListener('blur',     this.#onBlur);
+    this.#bound = false;
+  }
+
+  /* ── Public API ──────────────────────────────────────────────────── */
+
+  startEdit() {
+    if (this.editing || this.disabled || this.readonly) return;
+    this.#originalValue = this.value || '';
+    this.editing = true;
+    this.setAttribute('contenteditable', 'plaintext-only');
+    this.dispatchEvent(new CustomEvent('edit-start', { bubbles: true }));
+    // Defer focus/selection — setting contenteditable in the same tick
+    // as a click can race with the browser's own caret placement.
+    queueMicrotask(() => {
+      this.focus();
+      this.#selectAll();
+    });
+  }
+
+  commitEdit() {
+    if (!this.editing) return;
+    const newValue = (this.textContent || '').trim();
+    const oldValue = this.#originalValue;
+    this.editing = false;
+    this.removeAttribute('contenteditable');
+    // Keep the visible text in sync with the canonical value (normalizes
+    // trailing whitespace + restores the source-of-truth string).
+    if (this.textContent !== newValue) this.textContent = newValue;
+    if (newValue !== oldValue) {
+      this.value = newValue;
+      this.syncValue(newValue);
+      this.dispatchEvent(new CustomEvent('change', {
+        bubbles: true,
+        detail: { value: newValue, oldValue },
+      }));
+    }
+    this.dispatchEvent(new CustomEvent('edit-end', {
+      bubbles: true,
+      detail: { committed: true },
+    }));
+  }
+
+  cancelEdit() {
+    if (!this.editing) return;
+    this.editing = false;
+    this.removeAttribute('contenteditable');
+    this.textContent = this.#originalValue;
+    this.dispatchEvent(new CustomEvent('cancel', { bubbles: true }));
+    this.dispatchEvent(new CustomEvent('edit-end', {
+      bubbles: true,
+      detail: { committed: false },
+    }));
+  }
+
+  /* ── Event handlers ──────────────────────────────────────────────── */
+
+  #onClick = (e) => {
+    if (this.disabled || this.readonly) return;
+    if (this.editing) return; // already editing, let caret behavior pass through
+    e.preventDefault();
+    this.startEdit();
+  };
+
+  #onKeydown = (e) => {
+    if (this.editing) {
+      if (e.key === 'Enter') {
+        e.preventDefault();
+        this.#suppressBlur = true; // commitEdit blurs us; don't recurse
+        this.commitEdit();
+        this.blur();
+      } else if (e.key === 'Escape') {
+        e.preventDefault();
+        this.#suppressBlur = true;
+        this.cancelEdit();
+        this.blur();
+      }
+    } else {
+      // Activate edit from keyboard (Enter or Space)
+      if (e.key === 'Enter' || e.key === ' ') {
+        if (this.disabled || this.readonly) return;
+        e.preventDefault();
+        this.startEdit();
+      }
+    }
+  };
+
+  #onFocus = () => {
+    // No-op — keyboard activation handled in #onKeydown to distinguish
+    // focus-via-Tab (don't edit) from focus-via-click (also don't edit
+    // here; the click handler does that). Focus alone never starts an
+    // edit — that would surprise tab-traversers.
+  };
+
+  #onBlur = () => {
+    if (!this.editing) return;
+    if (this.#suppressBlur) {
+      this.#suppressBlur = false;
+      return;
+    }
+    if (this.commit === 'blur') {
+      this.commitEdit();
+    } else if (this.commit === 'enter') {
+      // blur cancels under `commit=enter` semantics
+      this.cancelEdit();
+    }
+    // commit=manual: do nothing on blur; consumer must call commitEdit()
+  };
+
+  /* ── Helpers ─────────────────────────────────────────────────────── */
+
+  #selectAll() {
+    const range = document.createRange();
+    range.selectNodeContents(this);
+    const sel = window.getSelection();
+    if (!sel) return;
+    sel.removeAllRanges();
+    sel.addRange(range);
+  }
+}

package/components/inline-edit/inline-edit.css

@@ -0,0 +1,62 @@
+@scope (inline-edit-ui) {
+  :where(:scope) {
+    --inline-edit-bg-hover-default:    var(--a-bg-muted);
+    --inline-edit-bg-edit-default:     var(--a-bg);
+    --inline-edit-outline-default:     var(--a-accent-strong);
+    --inline-edit-placeholder-default: var(--a-fg-subtle);
+    --inline-edit-px-default:          var(--a-space-1);
+    --inline-edit-py-default:          var(--a-space-0-5);
+    --inline-edit-radius-default:      var(--a-radius-sm);
+  }
+
+  :scope {
+    /* Inline-block so padding works without breaking text flow when
+       embedded inside a paragraph or heading. Falls back to inline for
+       table cells (where the cell already contains the box). */
+    display: inline-block;
+    box-sizing: border-box;
+    padding-inline: var(--inline-edit-px, var(--inline-edit-px-default));
+    padding-block: var(--inline-edit-py, var(--inline-edit-py-default));
+    margin-inline: calc(-1 * var(--inline-edit-px, var(--inline-edit-px-default)));
+    margin-block: calc(-1 * var(--inline-edit-py, var(--inline-edit-py-default)));
+    border-radius: var(--inline-edit-radius, var(--inline-edit-radius-default));
+    cursor: text;
+    color: inherit;
+    font: inherit;
+    transition: background-color var(--a-duration-fast) var(--a-easing-out);
+    /* Make sure focus-visible outline can land on us (we set tabindex=0) */
+    outline-offset: 2px;
+  }
+
+  /* Hover affordance — subtle bg tint so the user sees this IS editable.
+     Suppressed when disabled / readonly / already editing. */
+  :scope:not([editing]):not([disabled]):not([readonly]):hover {
+    background: var(--inline-edit-bg-hover, var(--inline-edit-bg-hover-default));
+  }
+
+  /* Editing state — flat background + accent outline for focus clarity */
+  :scope[editing] {
+    background: var(--inline-edit-bg-edit, var(--inline-edit-bg-edit-default));
+    outline: 2px solid var(--inline-edit-outline, var(--inline-edit-outline-default));
+    outline-offset: 0;
+    cursor: text;
+  }
+
+  /* Empty-value placeholder — show the [placeholder] attr as faint text
+     when the host has no text content + isn't being edited. */
+  :scope:empty:not([editing])::before {
+    content: attr(placeholder);
+    color: var(--inline-edit-placeholder, var(--inline-edit-placeholder-default));
+    font-style: italic;
+  }
+
+  :scope[disabled],
+  :scope[readonly] {
+    cursor: default;
+    opacity: 0.6;
+  }
+
+  :scope[disabled] {
+    pointer-events: none;
+  }
+}

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

@@ -0,0 +1,52 @@
+/**
+ * `<inline-edit-ui>` — Click-to-edit text in place. Renders as static text until clicked /
+focused + Enter, then becomes editable. Enter or blur commits; Escape
+cancels and restores the original value. Form-participating.
+
+Use for editable titles, breadcrumb labels, table-cell text fields,
+draft document names — any case where a user expects to edit text
+without opening a separate dialog or input. Distinct from `<input-ui>`
+(always-editable chrome) and from `<field-ui>` (stacked label + input
+composition). inline-edit reads as text in static state.
+
+ *
+ * @see https://ui-kit.exe.xyz/site/components/inline-edit
+ *
+ * Type declarations generated by scripts/build/dts-codegen.mjs from
+ * the component's `.a2ui.json` sidecar(s). Edit the source `.yaml`,
+ * run `npm run build:components`, then `npm run codegen:dts` to
+ * regenerate; or hand-author this file fully if rich event types are
+ * needed beyond what the yaml `events:` block can express.
+ */
+
+import { UIElement } from '../../core/element.js';
+
+export type InlineEditCancelEvent = CustomEvent<unknown>;
+export type InlineEditChangeEvent = CustomEvent<unknown>;
+export type InlineEditEditEndEvent = CustomEvent<unknown>;
+export type InlineEditEditStartEvent = CustomEvent<unknown>;
+
+export class UIInlineEdit extends UIElement {
+  /** When to commit pending edits. `blur` (default) — saves on focusout
+or Enter. `enter` — Enter saves, blur cancels (returns to original).
+`manual` — only programmatic `commitEdit()` saves.
+ */
+  commit: 'blur' | 'enter' | 'manual';
+  /** Reflected state — `true` when the element is actively being edited.
+Toggles automatically on click / Enter / blur / Escape; rarely set
+by consumers. Listen to `edit-start` / `edit-end` events instead.
+ */
+  editing: boolean;
+  /** Hint text shown when the value is empty (inline-edit reads this in the static state). */
+  placeholder: string;
+
+  addEventListener<K extends keyof HTMLElementEventMap>(
+    type: K,
+    listener: (this: UIInlineEdit, ev: HTMLElementEventMap[K]) => unknown,
+    options?: boolean | AddEventListenerOptions,
+  ): void;
+  addEventListener(type: 'cancel', listener: (ev: InlineEditCancelEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
+  addEventListener(type: 'change', listener: (ev: InlineEditChangeEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
+  addEventListener(type: 'edit-end', listener: (ev: InlineEditEditEndEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
+  addEventListener(type: 'edit-start', listener: (ev: InlineEditEditStartEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
+}

package/components/inline-edit/inline-edit.js

@@ -0,0 +1,12 @@
+/**
+ * `<inline-edit-ui>` — auto-registers the tag on import.
+ *
+ * @see ../../USAGE.md#registration--auto-vs-explicit
+ */
+
+import { defineIfFree } from '../../core/register.js';
+import { UIInlineEdit } from './inline-edit.class.js';
+
+defineIfFree('inline-edit-ui', UIInlineEdit);
+
+export { UIInlineEdit };

package/components/inline-edit/inline-edit.yaml

@@ -0,0 +1,125 @@
+$schema: ../../../../scripts/schemas/component.yaml.schema.json
+name: UIInlineEdit
+tag: inline-edit-ui
+status: stable
+component: InlineEdit
+category: form
+version: 1
+description: |
+  Click-to-edit text in place. Renders as static text until clicked /
+  focused + Enter, then becomes editable. Enter or blur commits; Escape
+  cancels and restores the original value. Form-participating.
+
+  Use for editable titles, breadcrumb labels, table-cell text fields,
+  draft document names — any case where a user expects to edit text
+  without opening a separate dialog or input. Distinct from `<input-ui>`
+  (always-editable chrome) and from `<field-ui>` (stacked label + input
+  composition). inline-edit reads as text in static state.
+props:
+  placeholder:
+    description: Hint text shown when the value is empty (inline-edit reads this in the static state).
+    type: string
+    default: Click to edit
+    reflect: true
+  editing:
+    description: |
+      Reflected state — `true` when the element is actively being edited.
+      Toggles automatically on click / Enter / blur / Escape; rarely set
+      by consumers. Listen to `edit-start` / `edit-end` events instead.
+    type: boolean
+    default: false
+    reflect: true
+  commit:
+    description: |
+      When to commit pending edits. `blur` (default) — saves on focusout
+      or Enter. `enter` — Enter saves, blur cancels (returns to original).
+      `manual` — only programmatic `commitEdit()` saves.
+    type: string
+    default: blur
+    enum:
+      - blur
+      - enter
+      - manual
+    reflect: true
+events:
+  change:
+    description: 'Fired after a successful commit. detail = { value, oldValue }. Bubbles.'
+  cancel:
+    description: 'Fired when Escape (or blur with commit=enter) restores the original. Bubbles.'
+  edit-start:
+    description: 'Fired when entering edit mode. Bubbles.'
+  edit-end:
+    description: 'Fired when leaving edit mode. detail = { committed: boolean }. Bubbles.'
+slots: {}
+states:
+  - name: idle
+    description: Static — text reads as plain text with a hover hint.
+  - name: hover
+    description: Hover affordance — subtle background tint signals editability.
+  - name: editing
+    description: contenteditable — host is the input surface; outline + caret.
+  - name: empty
+    description: Value is empty and not editing — placeholder text renders.
+  - name: disabled
+    description: Locked; click + keyboard activation are no-ops.
+traits: []
+tokens:
+  --inline-edit-bg-hover:
+    description: Background tint on hover (idle state).
+    default: var(--a-bg-muted)
+  --inline-edit-bg-edit:
+    description: Background while editing.
+    default: var(--a-bg)
+  --inline-edit-outline:
+    description: Outline color in the editing state.
+    default: var(--a-accent-strong)
+  --inline-edit-placeholder:
+    description: Placeholder text color in empty-static state.
+    default: var(--a-fg-subtle)
+  --inline-edit-px:
+    description: Horizontal padding (inner gutter so hover tint reads as a pill, not a flush block).
+    default: var(--a-space-1)
+  --inline-edit-py:
+    description: Vertical padding.
+    default: var(--a-space-0-5)
+  --inline-edit-radius:
+    description: Border-radius for the hover / editing chrome.
+    default: var(--a-radius-sm)
+a2ui:
+  rules:
+    - rule: 'Use inline-edit-ui for click-to-edit titles, draft names, table-cell text, breadcrumb labels — anywhere the user expects to edit text without opening a dialog.'
+      reason: 'Primary use case — inline rename/edit.'
+    - rule: 'inline-edit-ui IS form-participating (extends UIFormElement). Pair with a hidden <form> + name="..." to submit edits as a field.'
+      reason: 'Form participation contract.'
+    - rule: 'Distinct from <input-ui> (always shows input chrome) and from <field-ui> (stacked label + input composition). inline-edit reads as text in the static state.'
+      reason: 'Sibling-component boundary.'
+    - rule: 'Listen to `change` event (detail.value, detail.oldValue) for commit; `cancel` for Escape. Default commit=blur saves on focusout + Enter.'
+      reason: 'Event-handling contract.'
+anti_patterns:
+  - wrong: '<input-ui value="Title" name="title" variant="ghost">'
+    why: 'Ghost variant still renders input chrome (border on focus). Looks like a control, not text.'
+    fix: '<inline-edit-ui value="Title" name="title"> — reads as text in static state; chrome only appears while editing.'
+  - wrong: '<text-ui contenteditable>Title</text-ui>'
+    why: 'No state machine — no commit/cancel semantics, no form participation, no a11y wiring.'
+    fix: '<inline-edit-ui value="Title">'
+examples:
+  - name: editable-title
+    description: A draft document title that becomes editable on click.
+    a2ui: |
+      [{ "id": "title", "component": "InlineEdit", "value": "Untitled draft" }]
+keywords:
+  - inline-edit
+  - editable
+  - click-to-edit
+  - rename
+  - edit-in-place
+synonyms:
+  inline-edit:
+    - editable
+    - click-to-edit
+    - edit-in-place
+    - rename-in-place
+related:
+  - input
+  - field
+  - text

package/components/integration-card/integration-card.class.js

@@ -229,6 +229,15 @@ export class UIIntegrationCard extends UIElement {
     if (!this.#logoEl) return;
     const logo = (this.logo || '').trim();
 
+    // Guard against unresolved AdiaUI template binding descriptors
+    // ({{p:N}} placeholders). The integration-card's connected() + render()
+    // fires synchronously when the parent template stamps the element, BEFORE
+    // the parent's reconciliation pass replaces {{p:N}} with the real value.
+    // Skipping here lets the second render (triggered by the reconciliation's
+    // property set) render the real logo. Without this guard, icon-ui fires
+    // a "not found" warn for every {{p:4}} it receives on first connect.
+    if (logo.startsWith('{{p:')) return;
+
     // No logo → strip any prior content and hide.
     if (!logo) {
       this.#logoEl.replaceChildren();

package/components/integration-card/integration-card.test.js

@@ -275,9 +275,10 @@ describe('integration-card-ui — CSS contract (source-grep)', () => {
 
     expect(CSS).toMatch(/@scope\s*\(\s*integration-card-ui\s*\)/);
     expect(CSS).toMatch(/:where\(:scope\)\s*\{/);
-    expect(CSS).toMatch(/--integration-card-bg:/);
-    expect(CSS).toMatch(/--integration-card-border:/);
-    expect(CSS).toMatch(/--integration-card-radius:/);
+    // OD-5 sweep: token declarations use -default suffix per component-token-contract.md
+    expect(CSS).toMatch(/--integration-card-bg-default:/);
+    expect(CSS).toMatch(/--integration-card-border-default:/);
+    expect(CSS).toMatch(/--integration-card-radius-default:/);
   });
 
   it('keeps status-driven border tint (status="connected") inside @scope', async () => {

package/components/list/list-item.a2ui.json

@@ -53,7 +53,14 @@
       "MenuItem",
       "TreeItem"
     ],
-    "slots": {},
+    "slots": {
+      "description": {
+        "description": "Override slot for richer description markup than the plain [description] attribute string (inline links, code spans, multiple lines). Renders beneath the primary text at body-subtle typography."
+      },
+      "icon": {
+        "description": "Override the [icon] glyph with a custom slotted element (e.g. a colored <icon-ui>, an image, or an avatar-ui). Mutually exclusive with the [icon] attribute — slot child wins if both are present."
+      }
+    },
     "states": [],
     "status": "stable",
     "synonyms": {

package/components/list/list-item.yaml

@@ -29,6 +29,18 @@ props:
     description: Secondary line below the primary text. Subtle color.
     type: string
 
+slots:
+  icon:
+    description: >-
+      Override the [icon] glyph with a custom slotted element (e.g. a colored
+      <icon-ui>, an image, or an avatar-ui). Mutually exclusive with the
+      [icon] attribute — slot child wins if both are present.
+  description:
+    description: >-
+      Override slot for richer description markup than the plain [description]
+      attribute string (inline links, code spans, multiple lines). Renders
+      beneath the primary text at body-subtle typography.
+
 keywords:
   - list-item
   - list-row