@adia-ai/web-components 0.4.5 → 0.4.7

package/components/avatar/avatar.js

@@ -1,168 +1,18 @@
 /**
- * <avatar-ui src="photo.jpg" text="Alice Smith" size="md" shape="circle"></avatar-ui>
+ * `<avatar-ui>` — auto-registers the tag on import.
  *
- * Fallback chain: image → initials → empty.
- * If src fails to load, falls back to initials derived from text.
- * `name` is a deprecated alias for `text` (warns on use).
+ * For non-side-effect class import (test isolation, tag override), use
+ * the `class` subpath:
  *
- * <avatar-group-ui max="4" size="md">
- *   <avatar-ui text="Alice"></avatar-ui>
- *   <avatar-ui text="Bob"></avatar-ui>
- *   ...
- * </avatar-group-ui>
+ *   import { UIAvatar, UIAvatarGroup } from '@adia-ai/web-components/components/avatar/class';
  *
- * Overlapping avatar stack with +N overflow counter.
+ * @see ../../USAGE.md#registration--auto-vs-explicit
  */
 
-import { UIElement } from '../../core/element.js';
+import { defineIfFree } from '../../core/register.js';
+import { UIAvatar, UIAvatarGroup } from './class.js';
 
-// ── Avatar ──────────────────────────────────────────────────
-
-class UIAvatar extends UIElement {
-  static properties = {
-    src:   { type: String,  default: '', reflect: true },
-    text:  { type: String,  default: '', reflect: true },
-    name:  { type: String,  default: '', reflect: true }, // backcompat alias for text
-    icon:  { type: String,  default: '', reflect: true },
-    size:  { type: String,  default: 'md', reflect: true },
-    shape: { type: String,  default: 'circle', reflect: true },
-  };
-
-  /** Display string — `text` takes priority, `name` is backcompat alias */
-  get displayName() { return this.text || this.name; }
-
-  static template = () => null;
-
-  static #nameWarned = false;
-
-  #imgEl = null;
-  #initialsEl = null;
-  #iconEl = null;
-
-  connected() {
-    this.setAttribute('role', 'img');
-    if (this.name && !this.text && !UIAvatar.#nameWarned) {
-      UIAvatar.#nameWarned = true;
-      // eslint-disable-next-line no-console
-      console.warn(
-        `[AdiaUI] <avatar-ui name="…"> is deprecated — use text="…" instead. ` +
-        `Docs: https://ui-kit.exe.xyz/site/components/avatar`
-      );
-    }
-  }
-
-  render() {
-    if (!this.src && !this.displayName && !this.icon) return;
-
-    if (this.src) {
-      if (!this.#imgEl) {
-        this.#imgEl = document.createElement('img');
-        this.#imgEl.setAttribute('slot', 'img');
-        this.#imgEl.onerror = () => {
-          this.#imgEl.remove();
-          this.#imgEl = null;
-          this.#showInitials();
-        };
-      }
-      this.#imgEl.src = this.src;
-      this.#imgEl.alt = this.name || '';
-      if (!this.#imgEl.parentElement) this.appendChild(this.#imgEl);
-
-      // Remove initials when image is showing
-      if (this.#initialsEl) {
-        this.#initialsEl.remove();
-        this.#initialsEl = null;
-      }
-    } else if (this.icon) {
-      // Icon avatar (system events, non-person rep)
-      if (this.#imgEl) { this.#imgEl.remove(); this.#imgEl = null; }
-      if (this.#initialsEl) { this.#initialsEl.remove(); this.#initialsEl = null; }
-      if (!this.#iconEl) {
-        this.#iconEl = document.createElement('icon-ui');
-        this.#iconEl.setAttribute('slot', 'icon');
-        this.appendChild(this.#iconEl);
-      }
-      this.#iconEl.setAttribute('name', this.icon);
-    } else {
-      // No src / no icon — show initials
-      if (this.#imgEl) { this.#imgEl.remove(); this.#imgEl = null; }
-      if (this.#iconEl) { this.#iconEl.remove(); this.#iconEl = null; }
-      this.#showInitials();
-    }
-
-    this.setAttribute('aria-label', this.displayName || this.icon || '');
-  }
-
-  #showInitials() {
-    if (!this.displayName) return;
-    const initials = this.displayName
-      .split(/\s+/)
-      .map(w => w[0])
-      .join('')
-      .slice(0, 2)
-      .toUpperCase();
-
-    if (!this.#initialsEl) {
-      this.#initialsEl = document.createElement('span');
-      this.#initialsEl.setAttribute('slot', 'initials');
-      this.appendChild(this.#initialsEl);
-    }
-    this.#initialsEl.textContent = initials;
-  }
-}
-
-customElements.define('avatar-ui', UIAvatar);
-
-// ── Avatar Group ────────────────────────────────────────────
-
-class UIAvatarGroup extends UIElement {
-  static properties = {
-    max:  { type: Number, default: 5, reflect: true },
-    size: { type: String, default: '', reflect: true },
-  };
-
-  static template = () => null;
-
-  connected() {
-    this.setAttribute('role', 'group');
-    if (!this.hasAttribute('aria-label')) {
-      this.setAttribute('aria-label', 'Avatar group');
-    }
-  }
-
-  render() {
-    const avatars = [...this.querySelectorAll('avatar-ui')];
-    const max = this.max;
-    const overflow = avatars.length - max;
-
-    // Propagate size
-    if (this.size) {
-      for (const av of avatars) av.setAttribute('size', this.size);
-    }
-
-    // Show/hide based on max
-    avatars.forEach((av, i) => {
-      av.style.display = i < max ? '' : 'none';
-      av.style.zIndex = String(avatars.length - i);
-    });
-
-    // Overflow counter
-    let counter = this.querySelector('[slot="overflow"]');
-    if (overflow > 0) {
-      if (!counter) {
-        counter = document.createElement('span');
-        counter.setAttribute('slot', 'overflow');
-        this.appendChild(counter);
-      }
-      counter.textContent = `+${overflow}`;
-      counter.setAttribute('aria-label', `${overflow} more`);
-      counter.style.zIndex = '0';
-    } else if (counter) {
-      counter.remove();
-    }
-  }
-}
-
-customElements.define('avatar-group-ui', UIAvatarGroup);
+defineIfFree('avatar-ui', UIAvatar);
+defineIfFree('avatar-group-ui', UIAvatarGroup);
 
 export { UIAvatar, UIAvatarGroup };

package/components/avatar/class.js

@@ -0,0 +1,173 @@
+/**
+ * Non-side-effect class export for `<avatar-ui>` (+ co-located primitives).
+ *
+ * Importing this file gives you the class(es) 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/avatar`
+ * (which imports this file + calls `defineIfFree()`).
+ *
+ * @see ../../USAGE.md#registration--auto-vs-explicit
+ */
+
+/**
+ * <avatar-ui src="photo.jpg" text="Alice Smith" size="md" shape="circle"></avatar-ui>
+ *
+ * Fallback chain: image → initials → empty.
+ * If src fails to load, falls back to initials derived from text.
+ * `name` is a deprecated alias for `text` (warns on use).
+ *
+ * <avatar-group-ui max="4" size="md">
+ *   <avatar-ui text="Alice"></avatar-ui>
+ *   <avatar-ui text="Bob"></avatar-ui>
+ *   ...
+ * </avatar-group-ui>
+ *
+ * Overlapping avatar stack with +N overflow counter.
+ */
+
+import { UIElement } from '../../core/element.js';
+
+// ── Avatar ──────────────────────────────────────────────────
+
+export class UIAvatar extends UIElement {
+  static properties = {
+    src:   { type: String,  default: '', reflect: true },
+    text:  { type: String,  default: '', reflect: true },
+    name:  { type: String,  default: '', reflect: true }, // backcompat alias for text
+    icon:  { type: String,  default: '', reflect: true },
+    size:  { type: String,  default: 'md', reflect: true },
+    shape: { type: String,  default: 'circle', reflect: true },
+  };
+
+  /** Display string — `text` takes priority, `name` is backcompat alias */
+  get displayName() { return this.text || this.name; }
+
+  static template = () => null;
+
+  static #nameWarned = false;
+
+  #imgEl = null;
+  #initialsEl = null;
+  #iconEl = null;
+
+  connected() {
+    this.setAttribute('role', 'img');
+    if (this.name && !this.text && !UIAvatar.#nameWarned) {
+      UIAvatar.#nameWarned = true;
+      // eslint-disable-next-line no-console
+      console.warn(
+        `[AdiaUI] <avatar-ui name="…"> is deprecated — use text="…" instead. ` +
+        `Docs: https://ui-kit.exe.xyz/site/components/avatar`
+      );
+    }
+  }
+
+  render() {
+    if (!this.src && !this.displayName && !this.icon) return;
+
+    if (this.src) {
+      if (!this.#imgEl) {
+        this.#imgEl = document.createElement('img');
+        this.#imgEl.setAttribute('slot', 'img');
+        this.#imgEl.onerror = () => {
+          this.#imgEl.remove();
+          this.#imgEl = null;
+          this.#showInitials();
+        };
+      }
+      this.#imgEl.src = this.src;
+      this.#imgEl.alt = this.name || '';
+      if (!this.#imgEl.parentElement) this.appendChild(this.#imgEl);
+
+      // Remove initials when image is showing
+      if (this.#initialsEl) {
+        this.#initialsEl.remove();
+        this.#initialsEl = null;
+      }
+    } else if (this.icon) {
+      // Icon avatar (system events, non-person rep)
+      if (this.#imgEl) { this.#imgEl.remove(); this.#imgEl = null; }
+      if (this.#initialsEl) { this.#initialsEl.remove(); this.#initialsEl = null; }
+      if (!this.#iconEl) {
+        this.#iconEl = document.createElement('icon-ui');
+        this.#iconEl.setAttribute('slot', 'icon');
+        this.appendChild(this.#iconEl);
+      }
+      this.#iconEl.setAttribute('name', this.icon);
+    } else {
+      // No src / no icon — show initials
+      if (this.#imgEl) { this.#imgEl.remove(); this.#imgEl = null; }
+      if (this.#iconEl) { this.#iconEl.remove(); this.#iconEl = null; }
+      this.#showInitials();
+    }
+
+    this.setAttribute('aria-label', this.displayName || this.icon || '');
+  }
+
+  #showInitials() {
+    if (!this.displayName) return;
+    const initials = this.displayName
+      .split(/\s+/)
+      .map(w => w[0])
+      .join('')
+      .slice(0, 2)
+      .toUpperCase();
+
+    if (!this.#initialsEl) {
+      this.#initialsEl = document.createElement('span');
+      this.#initialsEl.setAttribute('slot', 'initials');
+      this.appendChild(this.#initialsEl);
+    }
+    this.#initialsEl.textContent = initials;
+  }
+}
+
+export class UIAvatarGroup extends UIElement {
+  static properties = {
+    max:  { type: Number, default: 5, reflect: true },
+    size: { type: String, default: '', reflect: true },
+  };
+
+  static template = () => null;
+
+  connected() {
+    this.setAttribute('role', 'group');
+    if (!this.hasAttribute('aria-label')) {
+      this.setAttribute('aria-label', 'Avatar group');
+    }
+  }
+
+  render() {
+    const avatars = [...this.querySelectorAll('avatar-ui')];
+    const max = this.max;
+    const overflow = avatars.length - max;
+
+    // Propagate size
+    if (this.size) {
+      for (const av of avatars) av.setAttribute('size', this.size);
+    }
+
+    // Show/hide based on max
+    avatars.forEach((av, i) => {
+      av.style.display = i < max ? '' : 'none';
+      av.style.zIndex = String(avatars.length - i);
+    });
+
+    // Overflow counter
+    let counter = this.querySelector('[slot="overflow"]');
+    if (overflow > 0) {
+      if (!counter) {
+        counter = document.createElement('span');
+        counter.setAttribute('slot', 'overflow');
+        this.appendChild(counter);
+      }
+      counter.textContent = `+${overflow}`;
+      counter.setAttribute('aria-label', `${overflow} more`);
+      counter.style.zIndex = '0';
+    } else if (counter) {
+      counter.remove();
+    }
+  }
+}

package/components/badge/badge.d.ts

@@ -0,0 +1,27 @@
+/**
+ * `<badge-ui>` — Inline pill-shaped badge/tag. Text rendered via CSS attr().
+ *
+ * @see https://ui-kit.exe.xyz/site/components/badge
+ *
+ * Type declarations generated by scripts/build/dts-codegen.mjs from
+ * the component's `.a2ui.json` sidecar. Edit the source `.yaml`,
+ * run `npm run components`, then `npm run codegen:dts` to regenerate;
+ * or hand-author this file fully if rich event types are needed.
+ */
+
+import { UIElement } from '../../core/element.js';
+
+export class UIBadge extends UIElement {
+  /** Optional leading icon (any registered name). Use icon="dot" for chart-legend / status-pip chips. Inherits the variant's foreground color so the dot matches the label. */
+  icon: string;
+  /** Badge size */
+  size: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  /** Semantic status shorthand. Auto-maps to variant and sets text. `new` → success "New"; `updated` → info "Updated"; `deprecated` → warning "Deprecated"; `removed` → danger "Removed"; `beta` → accent "Beta". Use `variant` + `text` directly for custom chips. */
+  status: 'new' | 'updated' | 'deprecated' | 'removed' | 'beta';
+  /** Badge text content. Falls back to existing textContent. */
+  text: string;
+  /** Badge display text. Renderer routes this to the `text` attribute via CSS attr(text) on ::after. */
+  textContent: string;
+  /** Semantic color variant. */
+  variant: 'default' | 'accent' | 'info' | 'success' | 'warning' | 'danger' | 'primary' | 'muted' | 'neutral';
+}

package/components/badge/badge.js

@@ -1,83 +1,17 @@
 /**
- * <badge-ui text="New" variant="accent"></badge-ui>
- * <badge-ui text="3" variant="danger" size="sm"></badge-ui>
- * <badge-ui text="Organic" variant="accent" icon="dot"></badge-ui>  ← chart legend chip
- * <badge-ui status="beta"></badge-ui>                                ← status shorthand
+ * `<badge-ui>` — auto-registers the tag on import.
  *
- * Inline badge / tag. Pill-shaped, text rendered via CSS attr().
+ * For non-side-effect class import (test isolation, tag override), use
+ * the `class` subpath:
  *
- * Variants: default, accent, info, success, warning, danger, primary, muted, neutral
- * Sizes: sm, md (default)
- * Icon: optional leading icon (any registered icon name; "dot" for legend
- *       markers). Inherits the variant's foreground color so legend chips
- *       read as a single visual unit instead of icon + label collage.
- * Status: semantic shorthand that auto-maps variant + text.
+ *   import { UIBadge } from '@adia-ai/web-components/components/badge/class';
+ *
+ * @see ../../USAGE.md#registration--auto-vs-explicit
  */
 
-import { UIElement } from '../../core/element.js';
-
-const STATUS_MAP = {
-  new:        { variant: 'success', text: 'New' },
-  updated:    { variant: 'info',    text: 'Updated' },
-  deprecated: { variant: 'warning', text: 'Deprecated' },
-  removed:    { variant: 'danger',  text: 'Removed' },
-  beta:       { variant: 'accent',  text: 'Beta' },
-};
-
-class UIBadge extends UIElement {
-  static properties = {
-    text:    { type: String,  default: '', reflect: true },
-    textContent: { type: String, default: '' },
-    variant: { type: String,  default: 'default', reflect: true },
-    size:    { type: String,  default: 'md', reflect: true },
-    icon:    { type: String,  default: '',        reflect: true },
-    status:  { type: String,  default: '',        reflect: true },
-  };
-
-  static template = () => null;
-
-  connected() {
-    /* Default role is `status` (matches badge's "passive callout" semantic
-       — a screen reader announces the badge text as a state without
-       interrupting). Consumers that wire interactivity (e.g.
-       `<chart-legend-ui>` toggling series) are free to set
-       `role="button"` (or any other role) before connection — we don't
-       overwrite an explicit consumer choice. */
-    if (!this.hasAttribute('role')) {
-      this.setAttribute('role', 'status');
-    }
-  }
-
-  render() {
-    // Status shorthand wins over explicit variant/text while it's set —
-    // mixing is unsupported. Converges in one extra render pass.
-    if (this.status) {
-      const entry = STATUS_MAP[this.status];
-      if (entry) {
-        if (this.variant !== entry.variant) this.variant = entry.variant;
-        if (this.text !== entry.text) this.text = entry.text;
-      }
-    }
-
-    if (this.text) this.setAttribute('aria-label', this.text);
+import { defineIfFree } from '../../core/register.js';
+import { UIBadge } from './class.js';
 
-    // Stamp / update the leading icon. Pattern mirrors button-ui so the same
-    // icon-ui element handles loading + cleanup; we just `prepend` so the icon
-    // sits before the CSS-rendered text (text is `:scope::after { content }`).
-    if (this.icon) {
-      const existing = this.querySelector(':scope > icon-ui');
-      if (!existing || existing.getAttribute('name') !== this.icon) {
-        if (existing) existing.remove();
-        const iconEl = document.createElement('icon-ui');
-        iconEl.setAttribute('name', this.icon);
-        iconEl.setAttribute('size', 'sm');
-        this.prepend(iconEl);
-      }
-    } else {
-      this.querySelector(':scope > icon-ui')?.remove();
-    }
-  }
-}
-customElements.define('badge-ui', UIBadge);
+defineIfFree('badge-ui', UIBadge);
 
 export { UIBadge };

package/components/badge/class.js

@@ -0,0 +1,93 @@
+/**
+ * Non-side-effect class export for `<badge-ui>`.
+ *
+ * Importing this file gives you the class(es) 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/badge`
+ * (which imports this file + calls `defineIfFree()`).
+ *
+ * @see ../../USAGE.md#registration--auto-vs-explicit
+ */
+
+/**
+ * <badge-ui text="New" variant="accent"></badge-ui>
+ * <badge-ui text="3" variant="danger" size="sm"></badge-ui>
+ * <badge-ui text="Organic" variant="accent" icon="dot"></badge-ui>  ← chart legend chip
+ * <badge-ui status="beta"></badge-ui>                                ← status shorthand
+ *
+ * Inline badge / tag. Pill-shaped, text rendered via CSS attr().
+ *
+ * Variants: default, accent, info, success, warning, danger, primary, muted, neutral
+ * Sizes: sm, md (default)
+ * Icon: optional leading icon (any registered icon name; "dot" for legend
+ *       markers). Inherits the variant's foreground color so legend chips
+ *       read as a single visual unit instead of icon + label collage.
+ * Status: semantic shorthand that auto-maps variant + text.
+ */
+
+import { UIElement } from '../../core/element.js';
+
+const STATUS_MAP = {
+  new:        { variant: 'success', text: 'New' },
+  updated:    { variant: 'info',    text: 'Updated' },
+  deprecated: { variant: 'warning', text: 'Deprecated' },
+  removed:    { variant: 'danger',  text: 'Removed' },
+  beta:       { variant: 'accent',  text: 'Beta' },
+};
+
+export class UIBadge extends UIElement {
+  static properties = {
+    text:    { type: String,  default: '', reflect: true },
+    textContent: { type: String, default: '' },
+    variant: { type: String,  default: 'default', reflect: true },
+    size:    { type: String,  default: 'md', reflect: true },
+    icon:    { type: String,  default: '',        reflect: true },
+    status:  { type: String,  default: '',        reflect: true },
+  };
+
+  static template = () => null;
+
+  connected() {
+    /* Default role is `status` (matches badge's "passive callout" semantic
+       — a screen reader announces the badge text as a state without
+       interrupting). Consumers that wire interactivity (e.g.
+       `<chart-legend-ui>` toggling series) are free to set
+       `role="button"` (or any other role) before connection — we don't
+       overwrite an explicit consumer choice. */
+    if (!this.hasAttribute('role')) {
+      this.setAttribute('role', 'status');
+    }
+  }
+
+  render() {
+    // Status shorthand wins over explicit variant/text while it's set —
+    // mixing is unsupported. Converges in one extra render pass.
+    if (this.status) {
+      const entry = STATUS_MAP[this.status];
+      if (entry) {
+        if (this.variant !== entry.variant) this.variant = entry.variant;
+        if (this.text !== entry.text) this.text = entry.text;
+      }
+    }
+
+    if (this.text) this.setAttribute('aria-label', this.text);
+
+    // Stamp / update the leading icon. Pattern mirrors button-ui so the same
+    // icon-ui element handles loading + cleanup; we just `prepend` so the icon
+    // sits before the CSS-rendered text (text is `:scope::after { content }`).
+    if (this.icon) {
+      const existing = this.querySelector(':scope > icon-ui');
+      if (!existing || existing.getAttribute('name') !== this.icon) {
+        if (existing) existing.remove();
+        const iconEl = document.createElement('icon-ui');
+        iconEl.setAttribute('name', this.icon);
+        iconEl.setAttribute('size', 'sm');
+        this.prepend(iconEl);
+      }
+    } else {
+      this.querySelector(':scope > icon-ui')?.remove();
+    }
+  }
+}

package/components/block/block.d.ts

@@ -0,0 +1,19 @@
+/**
+ * `<block-ui>` — Generic padded/margined content wrapper.
+ *
+ * @see https://ui-kit.exe.xyz/site/components/block
+ *
+ * Type declarations generated by scripts/build/dts-codegen.mjs from
+ * the component's `.a2ui.json` sidecar. Edit the source `.yaml`,
+ * run `npm run components`, then `npm run codegen:dts` to regenerate;
+ * or hand-author this file fully if rich event types are needed.
+ */
+
+import { UIElement } from '../../core/element.js';
+
+export class UIBlock extends UIElement {
+  /** Margin size */
+  margin: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  /** Padding amount, maps to spacing tokens */
+  padding: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+}

package/components/block/block.js

@@ -1,23 +1,17 @@
 /**
- * <block-ui padding="md" margin="lg">Content here</block-ui>
+ * `<block-ui>` — auto-registers the tag on import.
  *
- * Generic padded/margined content wrapper. Pure CSS component.
+ * For non-side-effect class import (test isolation, tag override), use
+ * the `class` subpath:
  *
- * Properties:
- *   padding — none | xs | sm | md | lg | xl (default 'md')
- *   margin  — none | xs | sm | md | lg | xl (default 'none')
+ *   import { UIBlock } from '@adia-ai/web-components/components/block/class';
+ *
+ * @see ../../USAGE.md#registration--auto-vs-explicit
  */
 
-import { UIElement } from '../../core/element.js';
-
-class UIBlock extends UIElement {
-  static properties = {
-    padding: { type: String, default: 'md',   reflect: true },
-    margin:  { type: String, default: 'none', reflect: true },
-  };
+import { defineIfFree } from '../../core/register.js';
+import { UIBlock } from './class.js';
 
-  static template = () => null;
-}
-customElements.define('block-ui', UIBlock);
+defineIfFree('block-ui', UIBlock);
 
 export { UIBlock };

package/components/block/class.js

@@ -0,0 +1,33 @@
+/**
+ * Non-side-effect class export for `<block-ui>`.
+ *
+ * Importing this file gives you the class(es) 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/block`
+ * (which imports this file + calls `defineIfFree()`).
+ *
+ * @see ../../USAGE.md#registration--auto-vs-explicit
+ */
+
+/**
+ * <block-ui padding="md" margin="lg">Content here</block-ui>
+ *
+ * Generic padded/margined content wrapper. Pure CSS component.
+ *
+ * Properties:
+ *   padding — none | xs | sm | md | lg | xl (default 'md')
+ *   margin  — none | xs | sm | md | lg | xl (default 'none')
+ */
+
+import { UIElement } from '../../core/element.js';
+
+export class UIBlock extends UIElement {
+  static properties = {
+    padding: { type: String, default: 'md',   reflect: true },
+    margin:  { type: String, default: 'none', reflect: true },
+  };
+
+  static template = () => null;
+}

package/components/breadcrumb/breadcrumb.d.ts

@@ -0,0 +1,23 @@
+/**
+ * `<breadcrumb-ui>` — Breadcrumb trail with auto-inserted separators. Supports a leading icon (first child) and an overflow popover that collapses middle crumbs into a `…` menu.
+ *
+ * @see https://ui-kit.exe.xyz/site/components/breadcrumb
+ *
+ * Type declarations generated by scripts/build/dts-codegen.mjs from
+ * the component's `.a2ui.json` sidecar. Edit the source `.yaml`,
+ * run `npm run components`, then `npm run codegen:dts` to regenerate;
+ * or hand-author this file fully if rich event types are needed.
+ */
+
+import { UIElement } from '../../core/element.js';
+
+export class UIBreadcrumb extends UIElement {
+  /** Collapse middle crumbs into a `…` overflow popover when there are 4+ items. */
+  collapse: boolean;
+  /** Number of leading items to keep visible when [collapse] is active. The first item (often a home/icon link) sits before the overflow popover. */
+  collapseKeepLeading: number;
+  /** Number of trailing items to keep visible when [collapse] is active. The last item is always the current page. */
+  collapseKeepTrailing: number;
+  /** Character or string rendered between breadcrumb items via CSS ::before. */
+  separator: string;
+}