@adia-ai/web-components 0.6.33 → 0.6.35

package/components/icon/icon.css

@@ -1,6 +1,6 @@
 @scope (icon-ui) {
   :where(:scope) {
-    --icon-size: var(--a-icon-size, calc(1em + 0.125rem));
+    --icon-size-default: var(--a-icon-size, calc(1em + 0.125rem));
   }
 
   :scope {
@@ -8,8 +8,8 @@
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    width: var(--icon-size);
-    height: var(--icon-size);
+    width: var(--icon-size, var(--icon-size-default));
+    height: var(--icon-size, var(--icon-size-default));
     flex-shrink: 0;
     line-height: 0;
   }
@@ -24,13 +24,13 @@
      icon-ui set its own size locally. xs / xl / 2xl / 3xl / 4xl
      extend the scale beyond the universal range for hero placeholder
      contexts. `fill` matches the parent box. */
-  :scope[size="xs"]   { --icon-size: 0.75rem; }   /* 12px */
-  :scope[size="sm"]   { --icon-size: 0.875rem; }  /* 14px */
-  :scope[size="md"]   { --icon-size: 1rem; }      /* 16px */
-  :scope[size="lg"]   { --icon-size: 1.25rem; }   /* 20px */
-  :scope[size="xl"]   { --icon-size: 2rem; }      /* 32px */
-  :scope[size="2xl"]  { --icon-size: 3rem; }      /* 48px */
-  :scope[size="3xl"]  { --icon-size: 4rem; }      /* 64px */
-  :scope[size="4xl"]  { --icon-size: 6rem; }      /* 96px */
-  :scope[size="fill"] { --icon-size: 100%; }
+  :scope[size="xs"]   { --icon-size-default: 0.75rem; }   /* 12px */
+  :scope[size="sm"]   { --icon-size-default: 0.875rem; }  /* 14px */
+  :scope[size="md"]   { --icon-size-default: 1rem; }      /* 16px */
+  :scope[size="lg"]   { --icon-size-default: 1.25rem; }   /* 20px */
+  :scope[size="xl"]   { --icon-size-default: 2rem; }      /* 32px */
+  :scope[size="2xl"]  { --icon-size-default: 3rem; }      /* 48px */
+  :scope[size="3xl"]  { --icon-size-default: 4rem; }      /* 64px */
+  :scope[size="4xl"]  { --icon-size-default: 6rem; }      /* 96px */
+  :scope[size="fill"] { --icon-size-default: 100%; }
 }

package/components/icon/icon.js

@@ -10,7 +10,7 @@
  */
 
 import { defineIfFree } from '../../core/register.js';
-import { UIIcon } from './class.js';
+import { UIIcon } from './icon.class.js';
 
 defineIfFree('icon-ui', UIIcon);
 

package/components/image/image.css

@@ -1,14 +1,14 @@
 @scope (image-ui) {
   :where(:scope) {
     /* ── Layout ── */
-    --image-radius: 0;
+    --image-radius-default: 0;
 
     /* ── Colors ── */
-    --image-bg:       var(--a-bg-muted);
+    --image-bg-default:       var(--a-bg-muted);
 
     /* ── Transition ── */
-    --image-duration: var(--a-duration);
-    --image-easing:   var(--a-easing);
+    --image-duration-default: var(--a-duration);
+    --image-easing-default:   var(--a-easing);
   }
 
   :scope {
@@ -17,8 +17,8 @@
     display: inline-block;
     position: relative;
     overflow: hidden;
-    background: var(--image-bg);
-    border-radius: var(--image-radius);
+    background: var(--image-bg, var(--image-bg-default));
+    border-radius: var(--image-radius, var(--image-radius-default));
   }
 
   /* ── Image ── */
@@ -28,7 +28,7 @@
     height: 100%;
     object-fit: cover;
     opacity: 0;
-    transition: opacity var(--image-duration) var(--image-easing);
+    transition: opacity var(--image-duration, var(--image-duration-default)) var(--image-easing, var(--image-easing-default));
   }
 
   :scope[data-loaded] [slot="image"] {
@@ -45,7 +45,7 @@
   [slot="skeleton"] {
     position: absolute;
     inset: 0;
-    transition: opacity var(--image-duration) var(--image-easing);
+    transition: opacity var(--image-duration, var(--image-duration-default)) var(--image-easing, var(--image-easing-default));
   }
 
   :scope[data-loaded] [slot="skeleton"] {
@@ -54,10 +54,10 @@
   }
 
   /* ── 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); }
+  :scope[radius="sm"]   { --image-radius-default: var(--a-radius-sm); }
+  :scope[radius="md"]   { --image-radius-default: var(--a-radius-md); }
+  :scope[radius="lg"]   { --image-radius-default: var(--a-radius-lg); }
+  :scope[radius="full"] { --image-radius-default: var(--a-radius-full); }
 
   /* ── Size mode — fills the container.
      Layout-changing attribute; sanctioned in component-token-contract.md. */
@@ -70,7 +70,7 @@
   /* ── Raw — strips chrome (background + radius) for edge-to-edge rendering.
      Comes after radius variants so it overrides them by source order. */
   :scope[raw] {
-    --image-bg: transparent;
-    --image-radius: 0;
+    --image-bg-default: transparent;
+    --image-radius-default: 0;
   }
 }

package/components/image/image.js

@@ -10,7 +10,7 @@
  */
 
 import { defineIfFree } from '../../core/register.js';
-import { UIImage } from './class.js';
+import { UIImage } from './image.class.js';
 
 defineIfFree('image-ui', UIImage);
 

package/components/index.js

@@ -25,6 +25,7 @@ export { UITextarea } from './textarea/textarea.js';
 export { UICheck } from './check/check.js';
 export { UIRadio } from './radio/radio.js';
 export { UIOptionCard } from './option-card/option-card.js';
+export { UIIntegrationCard } from './integration-card/integration-card.js';
 export { UISwitch } from './switch/switch.js';
 export { UISlider } from './slider/slider.js';
 export { UISelect } from './select/select.js';
@@ -60,7 +61,10 @@ export { UIAvatar, UIAvatarGroup } from './avatar/avatar.js';
 export { UIProgress } from './progress/progress.js';
 export { UIStepProgress } from './step-progress/step-progress.js';
 export { UISkeleton } from './skeleton/skeleton.js';
+export { UISpinner } from './spinner/spinner.js';
+export { UILoadingOverlay } from './loading-overlay/loading-overlay.js';
 export { UIAlert } from './alert/alert.js';
+export { UIInlineMessage } from './inline-message/inline-message.js';
 export { UIKbd } from './kbd/kbd.js';
 export { UITag } from './tag/tag.js';
 export { UISwatch } from './swatch/swatch.js';
@@ -78,6 +82,7 @@ export { UIDivider } from './divider/divider.js';
 export { UIPagination } from './pagination/pagination.js';
 export { UICode } from './code/code.js';
 export { UIList, UIListItem } from './list/list.js';
+export { UIListWindow } from './list-window/list-window.js';
 export { UIMenu, UIMenuItem, UIMenuDivider } from './menu/menu.js';
 export { UIToolbar, UIToolbarGroup } from './toolbar/toolbar.js';
 export { UINav } from './nav/nav.js';
@@ -86,11 +91,17 @@ export { UINavItem } from './nav-item/nav-item.js';
 export { UIOtpInput } from './otp-input/otp-input.js';
 export { UIImage } from './image/image.js';
 export { UISearch } from './search/search.js';
+export { UICombobox } from './combobox/combobox.js';
+export { UITagsInput } from './tags-input/tags-input.js';
 export { UIStat } from './stat/stat.js';
 export { UIProgressRow } from './progress-row/progress-row.js';
 export { UIActionList, UIActionItem } from './action-list/action-list.js';
 export { UIEmptyState } from './empty-state/empty-state.js';
+export { UICalendarGrid } from './calendar-grid/calendar-grid.js';
 export { UICalendarPicker } from './calendar-picker/calendar-picker.js';
+export { UIDateRangePicker } from './date-range-picker/date-range-picker.js';
+export { UITimePicker } from './time-picker/time-picker.js';
+export { UIDatetimePicker } from './datetime-picker/datetime-picker.js';
 export { UIEmbed } from './embed/embed.js';
 export { UIBlock } from './block/block.js';
 export { UIText } from './text/text.js';

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

@@ -0,0 +1,143 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://adiaui.dev/a2ui/v0_9/components/InlineMessage.json",
+  "title": "InlineMessage",
+  "description": "In-flow message glyph + text used in form-field rows for validation\nfeedback, hint copy, and inline confirmations. Distinguished from\n<alert-ui> (banner / surface-bearing notice) by carrying no surface\nfill, no border, no padding box — severity is foreground color +\nicon only. Variants map to severity (info / success / warning /\ndanger). Nests inside <field-ui>, <col-ui>, <row-ui> without\nbreaking field rhythm. Non-interactive annotation only.\n",
+  "type": "object",
+  "allOf": [
+    {
+      "$ref": "common_types.json#/$defs/ComponentCommon"
+    },
+    {
+      "$ref": "common_types.json#/$defs/CatalogComponentCommon"
+    }
+  ],
+  "properties": {
+    "component": {
+      "const": "InlineMessage"
+    },
+    "icon": {
+      "description": "Phosphor glyph override; each [variant] ships a sensible default (info / check-circle / warning / x-circle).",
+      "$ref": "common_types.json#/$defs/DynamicString"
+    },
+    "live": {
+      "description": "Sets `aria-live` on the host for dynamic message updates. Empty = no live region (static annotation).",
+      "type": "string",
+      "enum": [
+        "",
+        "polite",
+        "assertive"
+      ],
+      "default": ""
+    },
+    "text": {
+      "description": "Single-line message text. Default-slot content wins when present.",
+      "$ref": "common_types.json#/$defs/DynamicString"
+    },
+    "variant": {
+      "description": "Semantic severity tone — drives icon + foreground color. Default carries no leading icon (pure hint copy).",
+      "$ref": "common_types.json#/$defs/DynamicString"
+    }
+  },
+  "required": [
+    "component"
+  ],
+  "unevaluatedProperties": false,
+  "x-adiaui": {
+    "anti_patterns": [],
+    "category": "feedback",
+    "composes": [
+      "icon-ui"
+    ],
+    "events": {},
+    "examples": [
+      {
+        "description": "Email field with a danger inline-message under the input.",
+        "a2ui": "[\n  {\n    \"id\": \"root\",\n    \"component\": \"Field\",\n    \"label\": \"Email\",\n    \"children\": [\n      \"input\",\n      \"msg\"\n    ]\n  },\n  {\n    \"id\": \"input\",\n    \"component\": \"Input\",\n    \"type\": \"email\"\n  },\n  {\n    \"id\": \"msg\",\n    \"component\": \"InlineMessage\",\n    \"variant\": \"danger\",\n    \"text\": \"Email address is required\"\n  }\n]",
+        "name": "field-validation"
+      },
+      {
+        "description": "Password field with a muted hint (default variant, no icon).",
+        "a2ui": "[\n  {\n    \"id\": \"root\",\n    \"component\": \"Field\",\n    \"label\": \"Password\",\n    \"children\": [\n      \"input\",\n      \"hint\"\n    ]\n  },\n  {\n    \"id\": \"input\",\n    \"component\": \"Input\",\n    \"type\": \"password\"\n  },\n  {\n    \"id\": \"hint\",\n    \"component\": \"InlineMessage\",\n    \"text\": \"At least 8 characters\"\n  }\n]",
+        "name": "password-hint"
+      },
+      {
+        "description": "Username field with a polite live-region success confirmation.",
+        "a2ui": "[\n  {\n    \"id\": \"root\",\n    \"component\": \"Field\",\n    \"label\": \"Username\",\n    \"children\": [\n      \"input\",\n      \"msg\"\n    ]\n  },\n  {\n    \"id\": \"input\",\n    \"component\": \"Input\"\n  },\n  {\n    \"id\": \"msg\",\n    \"component\": \"InlineMessage\",\n    \"variant\": \"success\",\n    \"live\": \"polite\",\n    \"text\": \"Username is available\"\n  }\n]",
+        "name": "username-success"
+      }
+    ],
+    "keywords": [
+      "inline",
+      "message",
+      "hint",
+      "helper",
+      "validation",
+      "error",
+      "field-error",
+      "helper-text",
+      "error-text",
+      "form-feedback",
+      "status",
+      "notice"
+    ],
+    "name": "UIInlineMessage",
+    "related": [
+      "alert",
+      "field",
+      "input",
+      "text"
+    ],
+    "slots": {
+      "default": {
+        "description": "Message body — text or inline DOM (e.g. <link-ui>, <kbd-ui>). Wins over the [text] attribute when present. Stays inline so the message reads as one annotation line under the field."
+      },
+      "leading": {
+        "description": "Leading icon slot. Stamped automatically from [icon] or the variant's default glyph. Consumer-provided <icon-ui slot=\"leading\"> is preserved across [variant] changes (never overwritten)."
+      }
+    },
+    "states": [
+      {
+        "description": "Default, ready for screen-reader pickup.",
+        "name": "idle"
+      }
+    ],
+    "status": "stable",
+    "synonyms": {
+      "error": [
+        "error",
+        "alert",
+        "validation"
+      ],
+      "helper": [
+        "hint",
+        "help",
+        "tooltip"
+      ],
+      "hint": [
+        "hint",
+        "tooltip",
+        "help"
+      ],
+      "message": [
+        "alert",
+        "notification",
+        "hint"
+      ],
+      "notice": [
+        "alert",
+        "banner",
+        "hint"
+      ],
+      "validation": [
+        "validation",
+        "error",
+        "alert"
+      ]
+    },
+    "tag": "inline-message-ui",
+    "tokens": {},
+    "traits": [],
+    "version": 1
+  }
+}

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

@@ -0,0 +1,169 @@
+/**
+ * Non-side-effect class export for `<inline-message-ui>`.
+ *
+ * Importing this file gives you the class without auto-registering the tag.
+ * Useful for test isolation, subclassing with tag-name override, or selective
+ * composition.
+ *
+ * The auto-register path stays at `@adia-ai/web-components/components/inline-message`
+ * (which imports this file + calls `defineIfFree()`).
+ *
+ * @see ../../USAGE.md#registration--auto-vs-explicit
+ */
+
+/**
+ * <inline-message-ui text="Email address is required" variant="danger"></inline-message-ui>
+ * <inline-message-ui text="At least 8 characters"></inline-message-ui>          ← default hint
+ * <inline-message-ui variant="success" live="polite" text="Saved"></inline-message-ui>
+ *
+ * In-flow message glyph + text for form-field rows. Distinguished from
+ * <alert-ui>: no surface fill, no border, no padding box — severity is
+ * foreground color + icon only.
+ *
+ * Variants: default (muted, no icon) | info | success | warning | danger
+ * Slots:    leading (icon — auto-stamped from variant), default (text body)
+ *
+ * The host carries no role of its own (transparent inline annotation).
+ * Screen-reader pickup happens through the surrounding <field-ui>'s
+ * `aria-describedby` wiring. For dynamic message updates, opt into
+ * a live region with [live="polite"] or [live="assertive"].
+ */
+
+import { UIElement } from '../../core/element.js';
+
+// variant → default icon name. Pure default carries no icon (muted hint).
+const VARIANT_ICON = {
+  info:    'info',
+  success: 'check-circle',
+  warning: 'warning',
+  danger:  'x-circle',
+};
+
+export class UIInlineMessage extends UIElement {
+  static properties = {
+    text:    { type: String, default: '',        reflect: false },
+    variant: { type: String, default: 'default', reflect: true },
+    icon:    { type: String, default: '',        reflect: true },
+    live:    { type: String, default: '',        reflect: true },
+  };
+
+  // Static parts — single `parts.leading` for the auto-stamped icon
+  // (per SPEC-033 §8). render() re-runs ensure/drop based on current
+  // variant + icon + the absence of consumer-provided slotted icon.
+  static parts = {
+    leading: '<icon-ui slot="leading"></icon-ui>',
+  };
+
+  static requiredIcons = ['info', 'check-circle', 'warning', 'x-circle'];
+
+  static template = () => null;
+
+  /**
+   * Was the current leading icon consumer-provided (preserve across
+   * variant changes) or auto-stamped by us (re-stamp on variant change)?
+   * Detected by the `_uiPart` marker that `ensure()` sets on stamped
+   * parts plus our own `data-im-auto` tag so a consumer-replaced node
+   * doesn't get clobbered. See `ensure()` in core/element.js.
+   */
+  #ownsLeading(node) {
+    return !!(node && (node._uiPart || node.hasAttribute('data-im-auto')));
+  }
+
+  connected() {
+    // Stamp leading icon if variant supplies one and consumer hasn't
+    // already slotted their own. render() will mirror this on changes.
+  }
+
+  render() {
+    // ── aria-live wiring ──
+    // [live=""] → strip aria-live. [live=polite|assertive] → reflect.
+    if (this.live) {
+      this.setAttribute('aria-live', this.live);
+    } else if (this.hasAttribute('aria-live')) {
+      this.removeAttribute('aria-live');
+    }
+
+    // ── default-slot text body ──
+    // If [text] is set and the consumer hasn't slotted body content,
+    // mirror [text] into textContent of the host so CSS lays it out
+    // alongside the leading icon. Detection of "consumer slotted body":
+    // any non-slotted child text/element survives across renders.
+    //
+    // NOTE: we never overwrite consumer-provided body content. We tag
+    // our own text node so we can replace it on subsequent renders
+    // without touching the consumer's nodes.
+    this.#syncBodyText();
+
+    // ── leading icon stamping ──
+    // Resolve which icon to show: explicit [icon] wins, then the
+    // variant's default. Default variant has no icon (pure hint).
+    const resolvedIcon = this.icon || VARIANT_ICON[this.variant] || '';
+
+    // Inspect the current `[slot="leading"]` child. If consumer-provided
+    // (no _uiPart flag, no data-im-auto), leave it untouched — they
+    // own it across variant changes.
+    const existingLeading = this.querySelector(':scope > [slot="leading"]');
+    if (existingLeading && !this.#ownsLeading(existingLeading)) {
+      // Consumer owns the leading slot; do nothing.
+      return;
+    }
+
+    if (resolvedIcon) {
+      const leading = this.ensure('leading');
+      if (leading) {
+        // Mark as auto-stamped so subsequent renders / variant changes
+        // re-stamp without prompting "is this consumer-owned?" ambiguity.
+        leading.setAttribute('data-im-auto', '');
+        if (leading.getAttribute('name') !== resolvedIcon) {
+          leading.setAttribute('name', resolvedIcon);
+        }
+      }
+    } else {
+      this.drop('leading');
+    }
+  }
+
+  /**
+   * Mirror [text] into the host body without clobbering consumer-slotted
+   * nodes. We anchor our text node with a `data-im-text` marker on a
+   * `<span>` wrapper; on subsequent renders we update that span's
+   * textContent. Any non-marked child (including the leading slot) is
+   * left untouched.
+   */
+  #syncBodyText() {
+    // Find our auto-stamped text span, if any.
+    let bodySpan = this.querySelector(':scope > [data-im-text]');
+
+    // Detect any consumer-provided body content: child nodes that
+    // are NOT the leading slot and NOT our text span. If present,
+    // we drop our text span entirely (consumer wins).
+    const hasConsumerBody = Array.from(this.childNodes).some((n) => {
+      if (n === bodySpan) return false;
+      if (n.nodeType === Node.ELEMENT_NODE) {
+        if (n.getAttribute && n.getAttribute('slot') === 'leading') return false;
+        return true;
+      }
+      // Non-empty text node from author markup
+      if (n.nodeType === Node.TEXT_NODE && n.textContent.trim()) return true;
+      return false;
+    });
+
+    if (hasConsumerBody) {
+      if (bodySpan) bodySpan.remove();
+      return;
+    }
+
+    if (this.text) {
+      if (!bodySpan) {
+        bodySpan = document.createElement('span');
+        bodySpan.setAttribute('data-im-text', '');
+        this.appendChild(bodySpan);
+      }
+      if (bodySpan.textContent !== this.text) {
+        bodySpan.textContent = this.text;
+      }
+    } else if (bodySpan) {
+      bodySpan.remove();
+    }
+  }
+}

package/components/inline-message/inline-message.css

@@ -0,0 +1,75 @@
+@scope (inline-message-ui) {
+  :where(:scope) {
+    /* ── Colors ──
+       Default is muted hint copy (no fill behind, so use the on-canvas
+       `--a-fg-muted`). Severity variants drop in `--a-{family}-text`
+       (light-dark(20-shade, 20-tint)) — the on-canvas text family, not
+       `--a-{family}-fg` (which is on-fill / on-strong-bg). */
+    --inline-message-fg-default:        var(--a-fg-muted);
+    --inline-message-icon-fg-default:   currentColor;
+
+    /* ── Layout ── */
+    --inline-message-gap-default:       var(--a-space-1);
+    --inline-message-icon-size-default: var(--a-ui-sm);
+
+    /* ── Typography ── */
+    --inline-message-font-size-default: var(--a-ui-sm);
+    --inline-message-line-height-default: var(--a-leading-snug);
+  }
+
+  :scope {
+    /* ── Base ──
+       inline-flex so the message reads as a single inline-flow annotation
+       (icon + text on one row), with baseline alignment so the icon optically
+       sits on the text baseline. No background, no border, no padding box —
+       SPEC-033 §3 principle 1: in-flow not surface-bearing.  */
+    box-sizing: border-box;
+    display: inline-flex;
+    align-items: baseline;
+    gap: var(--inline-message-gap, var(--inline-message-gap-default));
+    color: var(--inline-message-fg, var(--inline-message-fg-default));
+    font-size: var(--inline-message-font-size, var(--inline-message-font-size-default));
+    line-height: var(--inline-message-line-height, var(--inline-message-line-height-default));
+  }
+
+  /* ── Leading icon ──
+     `align-self: center` so the icon optically centers against the first
+     text line (baseline alignment on the parent would otherwise drop the
+     icon below the text baseline). The icon inherits foreground via
+     `color: currentColor` so it tracks the variant's color shift without
+     a second token wiring.
+
+     `order: -1` is the visual-lead anchor: `ensure()` always appends the
+     stamped leading slot AFTER the body text-span (because #syncBodyText
+     runs first in render()), so DOM order is [text, icon]. The flex
+     `order` flips visual order back to [icon, text] without requiring
+     us to splice nodes ahead of consumer-provided body content. Same
+     pattern used by alert.css. */
+  :scope > [slot="leading"] {
+    flex-shrink: 0;
+    align-self: center;
+    color: var(--inline-message-icon-fg, var(--inline-message-icon-fg-default));
+    --a-icon-size: var(--inline-message-icon-size, var(--inline-message-icon-size-default));
+    order: -1;
+  }
+
+  /* ── Variants ──
+     Token-only: severity changes foreground color (matched icon comes from
+     the variant's default in inline-message.class.js). No padding / display / layout
+     changes — these are variants, not modes (per css-patterns.md). */
+  :scope[variant="info"] {
+    --inline-message-fg-default: var(--a-info-text);
+  }
+
+  :scope[variant="success"] {
+    --inline-message-fg-default: var(--a-success-text);
+  }
+
+  :scope[variant="warning"] {
+    --inline-message-fg-default: var(--a-warning-text);
+  }
+
+  :scope[variant="danger"] {
+    --inline-message-fg-default: var(--a-danger-text);
+  }
+}

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

@@ -0,0 +1,31 @@
+/**
+ * `<inline-message-ui>` — In-flow message glyph + text used in form-field rows for validation
+feedback, hint copy, and inline confirmations. Distinguished from
+<alert-ui> (banner / surface-bearing notice) by carrying no surface
+fill, no border, no padding box — severity is foreground color +
+icon only. Variants map to severity (info / success / warning /
+danger). Nests inside <field-ui>, <col-ui>, <row-ui> without
+breaking field rhythm. Non-interactive annotation only.
+
+ *
+ * @see https://ui-kit.exe.xyz/site/components/inline-message
+ *
+ * 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 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';
+  /** 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). */
+  variant: string;
+}

package/components/inline-message/inline-message.examples.md

@@ -0,0 +1,19 @@
+# inline-message — Examples
+
+## variant
+
+```html
+<inline-message-ui text="At least 8 characters"></inline-message-ui>
+```
+
+## icon
+
+```html
+<inline-message-ui icon="lightbulb" text="Tip: use a passphrase, not a password"></inline-message-ui>
+```
+
+## live
+
+```html
+<inline-message-ui variant="success" live="polite" text="Saved"></inline-message-ui>
+```

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

@@ -0,0 +1,17 @@
+/**
+ * `<inline-message-ui>` — auto-registers the tag on import.
+ *
+ * For non-side-effect class import (test isolation, tag override), use
+ * the `class` subpath:
+ *
+ *   import { UIInlineMessage } from '@adia-ai/web-components/components/inline-message/class';
+ *
+ * @see ../../USAGE.md#registration--auto-vs-explicit
+ */
+
+import { defineIfFree } from '../../core/register.js';
+import { UIInlineMessage } from './inline-message.class.js';
+
+defineIfFree('inline-message-ui', UIInlineMessage);
+
+export { UIInlineMessage };