@krollins/blueprint 0.2.2 → 0.2.3

package/dist/components/accordion/accordion.d.ts

@@ -1,5 +1,5 @@
 import { LitElement } from 'lit';
-import '../icon/icon.js';
+import { BpIcon } from '../icon/icon.js';
 /**
  * A container component that groups accordion items.
  * Controls single or multiple expansion behavior.
@@ -18,6 +18,11 @@ import '../icon/icon.js';
  * @csspart accordion - The main accordion container
  */
 export declare class BpAccordion extends LitElement {
+    /**
+     * Child components that self-register as custom elements on import.
+     * Value imports prevent bundler tree-shaking of the registration side effect.
+     */
+    static dependencies: (typeof BpIcon)[];
     /** Whether multiple items can be expanded simultaneously */
     multiple: boolean;
     /** Array of expanded item IDs */

package/dist/components/accordion/accordion.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"accordion.d.ts","sourceRoot":"","sources":["../../../source/components/accordion/accordion.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAKvC,OAAO,iBAAiB,CAAC;AAEzB;;;;;;;;;;;;;;;;GAgBG;AACH,qBACa,WAAY,SAAQ,UAAU;IACzC,4DAA4D;IACR,QAAQ,EAAE,OAAO,CAAC;IAEtE,iCAAiC;IACE,aAAa,EAAE,MAAM,EAAE,CAAC;IAE3D,qCAAqC;IACe,QAAQ,EAAE,OAAO,CAAC;IAEtE,MAAM,CAAC,MAAM,4BAAqB;;IASlC,iBAAiB,IAAI,IAAI;IAKzB,oBAAoB,IAAI,IAAI;IAK5B;;;OAGG;IACH,OAAO,CAAC,gBAAgB,CA8BtB;IAEF;;;OAGG;IACH,OAAO,CAAC,gBAAgB;IAYxB;;;OAGG;IACH,OAAO,CAAC,uBAAuB;IAiB/B,YAAY,IAAI,IAAI;IAMpB,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAStD,2BAA2B;IAC3B,MAAM,CAAC,EAAE,EAAE,MAAM;IAkBjB,6BAA6B;IAC7B,QAAQ,CAAC,EAAE,EAAE,MAAM;IAcnB,qDAAqD;IACrD,SAAS;IAcT,yBAAyB;IACzB,WAAW;IAKX;;;OAGG;IACH,OAAO,CAAC,gBAAgB;IASxB,MAAM;CAYP;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,qBACa,eAAgB,SAAQ,UAAU;IAC7C,sCAAsC;IAE9B,MAAM,EAAE,MAAM,CAAC;IAEvB,kDAAkD;IACd,MAAM,EAAE,MAAM,CAAC;IAEnD,sCAAsC;IACc,QAAQ,EAAE,OAAO,CAAC;IAEtE,oCAAoC;IACgB,QAAQ,EAAE,OAAO,CAAC;IAEtE,MAAM,CAAC,MAAM,4BAAqB;;IAUlC,iBAAiB,IAAI,IAAI;IAQzB;;;OAGG;IACH,OAAO,CAAC,YAAY;IAoBpB;;;OAGG;IACH,OAAO,CAAC,aAAa;IASrB,MAAM;CA6CP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,WAAW,CAAC;QAC5B,mBAAmB,EAAE,eAAe,CAAC;KACtC;CACF"}
+{"version":3,"file":"accordion.d.ts","sourceRoot":"","sources":["../../../source/components/accordion/accordion.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAKvC,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AAEzC;;;;;;;;;;;;;;;;GAgBG;AACH,qBACa,WAAY,SAAQ,UAAU;IACzC;;;OAGG;IACH,MAAM,CAAC,YAAY,oBAAY;IAE/B,4DAA4D;IACR,QAAQ,EAAE,OAAO,CAAC;IAEtE,iCAAiC;IACE,aAAa,EAAE,MAAM,EAAE,CAAC;IAE3D,qCAAqC;IACe,QAAQ,EAAE,OAAO,CAAC;IAEtE,MAAM,CAAC,MAAM,4BAAqB;;IASlC,iBAAiB,IAAI,IAAI;IAKzB,oBAAoB,IAAI,IAAI;IAK5B;;;OAGG;IACH,OAAO,CAAC,gBAAgB,CA8BtB;IAEF;;;OAGG;IACH,OAAO,CAAC,gBAAgB;IAYxB;;;OAGG;IACH,OAAO,CAAC,uBAAuB;IAiB/B,YAAY,IAAI,IAAI;IAMpB,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAStD,2BAA2B;IAC3B,MAAM,CAAC,EAAE,EAAE,MAAM;IAkBjB,6BAA6B;IAC7B,QAAQ,CAAC,EAAE,EAAE,MAAM;IAcnB,qDAAqD;IACrD,SAAS;IAcT,yBAAyB;IACzB,WAAW;IAKX;;;OAGG;IACH,OAAO,CAAC,gBAAgB;IASxB,MAAM;CAYP;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,qBACa,eAAgB,SAAQ,UAAU;IAC7C,sCAAsC;IAE9B,MAAM,EAAE,MAAM,CAAC;IAEvB,kDAAkD;IACd,MAAM,EAAE,MAAM,CAAC;IAEnD,sCAAsC;IACc,QAAQ,EAAE,OAAO,CAAC;IAEtE,oCAAoC;IACgB,QAAQ,EAAE,OAAO,CAAC;IAEtE,MAAM,CAAC,MAAM,4BAAqB;;IAUlC,iBAAiB,IAAI,IAAI;IAQzB;;;OAGG;IACH,OAAO,CAAC,YAAY;IAoBpB;;;OAGG;IACH,OAAO,CAAC,aAAa;IASrB,MAAM;CA6CP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,WAAW,CAAC;QAC5B,mBAAmB,EAAE,eAAe,CAAC;KACtC;CACF"}

package/dist/components/accordion.js

@@ -1,7 +1,8 @@
 import { css as f, LitElement as c, html as m } from "lit";
-import { property as n, customElement as h } from "lit/decorators.js";
+import { property as r, customElement as h } from "lit/decorators.js";
 import { classMap as b } from "lit/directives/class-map.js";
 import { chevronDownSvg as v } from "../icons/chevron-down.js";
+import { BpIcon as y } from "./icon.js";
 const u = f`
   /* ===== ACCORDION CONTAINER ===== */
 
@@ -176,12 +177,12 @@ const u = f`
     }
   }
 `;
-var y = Object.defineProperty, g = Object.getOwnPropertyDescriptor, o = (e, t, i, a) => {
-  for (var s = a > 1 ? void 0 : a ? g(t, i) : t, l = e.length - 1, p; l >= 0; l--)
+var g = Object.defineProperty, x = Object.getOwnPropertyDescriptor, o = (e, t, i, a) => {
+  for (var s = a > 1 ? void 0 : a ? x(t, i) : t, l = e.length - 1, p; l >= 0; l--)
     (p = e[l]) && (s = (a ? p(t, i, s) : p(s)) || s);
-  return a && s && y(t, i, s), s;
+  return a && s && g(t, i, s), s;
 };
-let r = class extends c {
+let d = class extends c {
   constructor() {
     super(), this.handleItemToggle = (e) => {
       const t = e, { id: i, expanded: a } = t.detail;
@@ -285,20 +286,21 @@ let r = class extends c {
     `;
   }
 };
-r.styles = [u];
+d.dependencies = [y];
+d.styles = [u];
 o([
-  n({ type: Boolean, reflect: !0 })
-], r.prototype, "multiple", 2);
+  r({ type: Boolean, reflect: !0 })
+], d.prototype, "multiple", 2);
 o([
-  n({ type: Array })
-], r.prototype, "expandedItems", 2);
+  r({ type: Array })
+], d.prototype, "expandedItems", 2);
 o([
-  n({ type: Boolean, reflect: !0 })
-], r.prototype, "disabled", 2);
-r = o([
+  r({ type: Boolean, reflect: !0 })
+], d.prototype, "disabled", 2);
+d = o([
   h("bp-accordion")
-], r);
-let d = class extends c {
+], d);
+let n = class extends c {
   constructor() {
     super(), this.itemId = "", this.header = "", this.expanded = !1, this.disabled = !1;
   }
@@ -371,24 +373,24 @@ let d = class extends c {
     `;
   }
 };
-d.styles = [u];
+n.styles = [u];
 o([
-  n({ type: String, attribute: "item-id", reflect: !0 })
-], d.prototype, "itemId", 2);
+  r({ type: String, attribute: "item-id", reflect: !0 })
+], n.prototype, "itemId", 2);
 o([
-  n({ type: String })
-], d.prototype, "header", 2);
+  r({ type: String })
+], n.prototype, "header", 2);
 o([
-  n({ type: Boolean, reflect: !0 })
-], d.prototype, "expanded", 2);
+  r({ type: Boolean, reflect: !0 })
+], n.prototype, "expanded", 2);
 o([
-  n({ type: Boolean, reflect: !0 })
-], d.prototype, "disabled", 2);
-d = o([
+  r({ type: Boolean, reflect: !0 })
+], n.prototype, "disabled", 2);
+n = o([
   h("bp-accordion-item")
-], d);
+], n);
 export {
-  r as BpAccordion,
-  d as BpAccordionItem
+  d as BpAccordion,
+  n as BpAccordionItem
 };
 //# sourceMappingURL=accordion.js.map

package/dist/components/accordion.js.map

@@ -1 +1 @@
-{"version":3,"file":"accordion.js","sources":["../../source/components/accordion/accordion.style.ts","../../source/components/accordion/accordion.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const accordionStyles = css`\n  /* ===== ACCORDION CONTAINER ===== */\n\n  :host {\n    display: block;\n  }\n\n  .accordion {\n    font-family: var(--bp-font-family);\n    display: flex;\n    flex-direction: column;\n    border: var(--bp-border-width) solid var(--bp-color-border);\n    border-radius: var(--bp-border-radius);\n    overflow: hidden;\n  }\n\n  /* Disabled state */\n  .accordion--disabled {\n    opacity: var(--bp-opacity-disabled);\n    pointer-events: none;\n  }\n\n  /* ===== ACCORDION ITEM ===== */\n\n  /* Separators between items */\n  :host(:not(:first-of-type)) {\n    border-top: var(--bp-border-width) solid var(--bp-color-border);\n  }\n\n  .item {\n    display: flex;\n    flex-direction: column;\n  }\n\n  /* Header button */\n  .item__header {\n    /* Reset */\n    appearance: none;\n    border: none;\n    background: transparent;\n    margin: 0;\n\n    /* Layout */\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    width: 100%;\n    padding: var(--bp-spacing-4) var(--bp-spacing-4);\n    gap: var(--bp-spacing-3);\n\n    /* Typography */\n    font-family: var(--bp-font-family);\n    font-size: var(--bp-font-size-base);\n    font-weight: var(--bp-font-weight-medium);\n    text-align: left;\n    color: var(--bp-color-text);\n    line-height: var(--bp-line-height-normal);\n\n    /* Interaction */\n    cursor: pointer;\n    transition: background-color var(--bp-transition-fast);\n  }\n\n  .item__header:hover:not(:disabled) {\n    background-color: var(--bp-color-surface);\n  }\n\n  .item__header:focus {\n    outline: none;\n  }\n\n  .item__header:focus-visible {\n    outline: var(--bp-focus-width) var(--bp-focus-style) var(--bp-color-focus);\n    outline-offset: var(--bp-focus-offset);\n  }\n  .item__header:active:not(:disabled) {\n    background-color: var(--bp-color-surface-hover);\n    transform: translateY(1px);\n  }\n  .item__header-content {\n    display: flex;\n    align-items: center;\n    gap: var(--bp-spacing-3);\n    flex: 1;\n  }\n\n  /* Expand/collapse icon */\n  .item__icon {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n    color: var(--bp-color-text-muted);\n    transition: transform var(--bp-transition-fast);\n  }\n\n  /* Icon is sized by bp-icon component */\n\n  /* Rotate icon when expanded */\n  .item--expanded .item__icon {\n    transform: rotate(180deg);\n  }\n\n  /* Collapsible content */\n  .item__content {\n    display: grid;\n    grid-template-rows: 0fr;\n    overflow: hidden;\n    transition: grid-template-rows var(--bp-transition-base);\n    content-visibility: hidden;\n  }\n\n  .item--expanded .item__content {\n    grid-template-rows: 1fr;\n    content-visibility: visible;\n  }\n\n  .item__body {\n    min-height: 0;\n    padding: 0 var(--bp-spacing-4) var(--bp-spacing-4) var(--bp-spacing-4);\n    color: var(--bp-color-text);\n    font-size: var(--bp-font-size-sm);\n    line-height: var(--bp-line-height-relaxed);\n    overflow: hidden;\n    opacity: 0;\n    transition: opacity var(--bp-transition-fast);\n  }\n\n  .item--expanded .item__body {\n    opacity: 1;\n    transition-delay: 100ms;\n  }\n\n  .item:not(.item--expanded) .item__body {\n    padding-top: 0;\n    padding-bottom: 0;\n    opacity: 0;\n    transition-delay: 0ms;\n  }\n\n  /* Disabled state */\n  .item--disabled .item__header {\n    cursor: not-allowed;\n    opacity: var(--bp-opacity-disabled);\n  }\n\n  .item--disabled .item__icon {\n    opacity: 1;\n  }\n\n  .item--disabled .item__header:hover {\n    background-color: transparent;\n  }\n\n  /* Reduced motion */\n  @media (prefers-reduced-motion: reduce) {\n    .item__icon {\n      transition: none;\n    }\n\n    .item__content {\n      transition: none;\n    }\n\n    .item__body {\n      transition: none;\n      opacity: 1;\n    }\n\n    .item__header:active:not(:disabled) {\n      transform: none;\n    }\n  }\n`;\n","import { LitElement, html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { accordionStyles } from './accordion.style.js';\nimport { chevronDownSvg } from '../icon/icons/entries/chevron-down.js';\nimport '../icon/icon.js';\n\n/**\n * A container component that groups accordion items.\n * Controls single or multiple expansion behavior.\n *\n * @element bp-accordion\n *\n * @property {boolean} multiple - Whether multiple items can be expanded simultaneously\n * @property {string[]} expandedItems - Array of expanded item IDs\n * @property {boolean} disabled - Whether all items are disabled\n *\n * @fires bp-expand - Fired when an item is expanded\n * @fires bp-collapse - Fired when an item is collapsed\n *\n * @slot - Default slot for bp-accordion-item elements\n *\n * @csspart accordion - The main accordion container\n */\n@customElement('bp-accordion')\nexport class BpAccordion extends LitElement {\n  /** Whether multiple items can be expanded simultaneously */\n  @property({ type: Boolean, reflect: true }) declare multiple: boolean;\n\n  /** Array of expanded item IDs */\n  @property({ type: Array }) declare expandedItems: string[];\n\n  /** Whether all items are disabled */\n  @property({ type: Boolean, reflect: true }) declare disabled: boolean;\n\n  static styles = [accordionStyles];\n\n  constructor() {\n    super();\n    this.multiple = false;\n    this.expandedItems = [];\n    this.disabled = false;\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.addEventListener('bp-item-toggle', this.handleItemToggle);\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.removeEventListener('bp-item-toggle', this.handleItemToggle);\n  }\n\n  /**\n   * Handles item toggle events from child accordion items.\n   * Updates expandedItems array based on multiple mode and dispatches expand/collapse events.\n   */\n  private handleItemToggle = (event: Event) => {\n    const customEvent = event as CustomEvent<{ id: string; expanded: boolean }>;\n    const { id, expanded } = customEvent.detail;\n\n    if (expanded) {\n      if (this.multiple) {\n        this.expandedItems = [...this.expandedItems, id];\n      } else {\n        // Close other items when not in multiple mode\n        this.expandedItems = [id];\n      }\n      this.dispatchEvent(\n        new CustomEvent('bp-expand', {\n          detail: { id },\n          bubbles: true,\n          composed: true,\n        })\n      );\n    } else {\n      this.expandedItems = this.expandedItems.filter((itemId) => itemId !== id);\n      this.dispatchEvent(\n        new CustomEvent('bp-collapse', {\n          detail: { id },\n          bubbles: true,\n          composed: true,\n        })\n      );\n    }\n\n    this.updateChildItems();\n  };\n\n  /**\n   * Synchronizes child accordion items with the expandedItems state.\n   * Also applies disabled state to all items when accordion is disabled.\n   */\n  private updateChildItems() {\n    const items = this.querySelectorAll('bp-accordion-item');\n    items.forEach((item) => {\n      const accordionItem = item as BpAccordionItem;\n      const isExpanded = this.expandedItems.includes(accordionItem.itemId);\n      accordionItem.expanded = isExpanded;\n      if (this.disabled) {\n        accordionItem.disabled = true;\n      }\n    });\n  }\n\n  /**\n   * Initializes expandedItems array from children with expanded attribute.\n   * Called on first render to respect items marked as expanded in HTML.\n   */\n  private initializeExpandedItems() {\n    const items = this.querySelectorAll('bp-accordion-item');\n    const expandedIds: string[] = [];\n\n    items.forEach((item) => {\n      const accordionItem = item as BpAccordionItem;\n      if (accordionItem.expanded && accordionItem.itemId) {\n        expandedIds.push(accordionItem.itemId);\n      }\n    });\n\n    if (expandedIds.length > 0) {\n      // In single mode, only keep the first expanded item\n      this.expandedItems = this.multiple ? expandedIds : [expandedIds[0]];\n    }\n  }\n\n  firstUpdated(): void {\n    // Initialize expanded items from children on first render\n    this.initializeExpandedItems();\n    this.updateChildItems();\n  }\n\n  updated(changedProperties: Map<string, unknown>): void {\n    if (\n      changedProperties.has('expandedItems') ||\n      changedProperties.has('disabled')\n    ) {\n      this.updateChildItems();\n    }\n  }\n\n  /** Expand an item by ID */\n  expand(id: string) {\n    if (!this.expandedItems.includes(id)) {\n      if (this.multiple) {\n        this.expandedItems = [...this.expandedItems, id];\n      } else {\n        this.expandedItems = [id];\n      }\n      this.updateChildItems();\n      this.dispatchEvent(\n        new CustomEvent('bp-expand', {\n          detail: { id },\n          bubbles: true,\n          composed: true,\n        })\n      );\n    }\n  }\n\n  /** Collapse an item by ID */\n  collapse(id: string) {\n    if (this.expandedItems.includes(id)) {\n      this.expandedItems = this.expandedItems.filter((itemId) => itemId !== id);\n      this.updateChildItems();\n      this.dispatchEvent(\n        new CustomEvent('bp-collapse', {\n          detail: { id },\n          bubbles: true,\n          composed: true,\n        })\n      );\n    }\n  }\n\n  /** Expand all items (only works in multiple mode) */\n  expandAll() {\n    if (!this.multiple) return;\n    const items = this.querySelectorAll('bp-accordion-item');\n    const ids: string[] = [];\n    items.forEach((item) => {\n      const accordionItem = item as BpAccordionItem;\n      if (!accordionItem.disabled) {\n        ids.push(accordionItem.itemId);\n      }\n    });\n    this.expandedItems = ids;\n    this.updateChildItems();\n  }\n\n  /** Collapse all items */\n  collapseAll() {\n    this.expandedItems = [];\n    this.updateChildItems();\n  }\n\n  /**\n   * Handles slot changes - when children are added or removed.\n   * Initializes expanded state from new children.\n   */\n  private handleSlotChange() {\n    // Only initialize from children if expandedItems is empty\n    // Otherwise respect the parent's state\n    if (this.expandedItems.length === 0) {\n      this.initializeExpandedItems();\n    }\n    this.updateChildItems();\n  }\n\n  render() {\n    const classes = {\n      accordion: true,\n      'accordion--disabled': this.disabled,\n    };\n\n    return html`\n      <div class=${classMap(classes)} part=\"accordion\" role=\"presentation\">\n        <slot @slotchange=${this.handleSlotChange}></slot>\n      </div>\n    `;\n  }\n}\n\n/**\n * An individual accordion item with header and collapsible content.\n *\n * @element bp-accordion-item\n *\n * @property {string} itemId - Unique identifier for this item\n * @property {string} header - Header text displayed in the trigger button\n * @property {boolean} expanded - Whether the content is expanded\n * @property {boolean} disabled - Whether this item is disabled\n *\n * @slot - Default slot for the collapsible content\n * @slot header - Custom header content (overrides header property)\n * @slot icon - Custom icon for the header\n *\n * @csspart item - The accordion item container\n * @csspart header - The header/trigger button\n * @csspart icon - The expand/collapse icon\n * @csspart content - The collapsible content wrapper\n * @csspart body - The inner content container\n */\n@customElement('bp-accordion-item')\nexport class BpAccordionItem extends LitElement {\n  /** Unique identifier for this item */\n  @property({ type: String, attribute: 'item-id', reflect: true })\n  declare itemId: string;\n\n  /** Header text displayed in the trigger button */\n  @property({ type: String }) declare header: string;\n\n  /** Whether the content is expanded */\n  @property({ type: Boolean, reflect: true }) declare expanded: boolean;\n\n  /** Whether this item is disabled */\n  @property({ type: Boolean, reflect: true }) declare disabled: boolean;\n\n  static styles = [accordionStyles];\n\n  constructor() {\n    super();\n    this.itemId = '';\n    this.header = '';\n    this.expanded = false;\n    this.disabled = false;\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    // Generate ID if not provided\n    if (!this.itemId) {\n      this.itemId = `accordion-item-${Math.random().toString(36).slice(2, 9)}`;\n    }\n  }\n\n  /**\n   * Handles toggle action and dispatches bp-item-toggle event.\n   * Also manages focus on the header button after expansion.\n   */\n  private handleToggle() {\n    if (this.disabled) return;\n\n    this.dispatchEvent(\n      new CustomEvent('bp-item-toggle', {\n        detail: { id: this.itemId, expanded: !this.expanded },\n        bubbles: true,\n        composed: true,\n      })\n    );\n\n    // Focus management: focus header after toggle completes\n    this.updateComplete.then(() => {\n      const header = this.shadowRoot?.querySelector(\n        '.item__header'\n      ) as HTMLElement;\n      header?.focus();\n    });\n  }\n\n  /**\n   * Handles keyboard navigation.\n   * Triggers toggle on Enter or Space key press.\n   */\n  private handleKeyDown(event: KeyboardEvent) {\n    if (this.disabled) return;\n\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault();\n      this.handleToggle();\n    }\n  }\n\n  render() {\n    const itemClasses = {\n      item: true,\n      'item--expanded': this.expanded,\n      'item--disabled': this.disabled,\n    };\n\n    const headerId = `${this.itemId}-header`;\n    const contentId = `${this.itemId}-content`;\n\n    return html`\n      <div class=${classMap(itemClasses)} part=\"item\">\n        <button\n          class=\"item__header\"\n          part=\"header\"\n          id=${headerId}\n          aria-expanded=${this.expanded}\n          aria-controls=${contentId}\n          aria-disabled=${this.disabled}\n          ?disabled=${this.disabled}\n          @click=${this.handleToggle}\n          @keydown=${this.handleKeyDown}\n        >\n          <span class=\"item__header-content\">\n            <slot name=\"icon\"></slot>\n            <slot name=\"header\">${this.header}</slot>\n          </span>\n          <span class=\"item__icon\" part=\"icon\" aria-hidden=\"true\">\n            <bp-icon .svg=${chevronDownSvg} size=\"md\"></bp-icon>\n          </span>\n        </button>\n        <div\n          class=\"item__content\"\n          part=\"content\"\n          id=${contentId}\n          role=\"region\"\n          aria-labelledby=${headerId}\n        >\n          <div class=\"item__body\" part=\"body\">\n            <slot></slot>\n          </div>\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'bp-accordion': BpAccordion;\n    'bp-accordion-item': BpAccordionItem;\n  }\n}\n"],"names":["accordionStyles","css","BpAccordion","LitElement","event","customEvent","id","expanded","itemId","item","accordionItem","isExpanded","items","expandedIds","changedProperties","ids","classes","html","classMap","__decorateClass","property","customElement","BpAccordionItem","itemClasses","headerId","contentId","chevronDownSvg"],"mappings":";;;;AAEO,MAAMA,IAAkBC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;;;ACuBxB,IAAMC,IAAN,cAA0BC,EAAW;AAAA,EAY1C,cAAc;AACZ,UAAA,GAoBF,KAAQ,mBAAmB,CAACC,MAAiB;AAC3C,YAAMC,IAAcD,GACd,EAAE,IAAAE,GAAI,UAAAC,EAAA,IAAaF,EAAY;AAErC,MAAIE,KACE,KAAK,WACP,KAAK,gBAAgB,CAAC,GAAG,KAAK,eAAeD,CAAE,IAG/C,KAAK,gBAAgB,CAACA,CAAE,GAE1B,KAAK;AAAA,QACH,IAAI,YAAY,aAAa;AAAA,UAC3B,QAAQ,EAAE,IAAAA,EAAA;AAAA,UACV,SAAS;AAAA,UACT,UAAU;AAAA,QAAA,CACX;AAAA,MAAA,MAGH,KAAK,gBAAgB,KAAK,cAAc,OAAO,CAACE,MAAWA,MAAWF,CAAE,GACxE,KAAK;AAAA,QACH,IAAI,YAAY,eAAe;AAAA,UAC7B,QAAQ,EAAE,IAAAA,EAAA;AAAA,UACV,SAAS;AAAA,UACT,UAAU;AAAA,QAAA,CACX;AAAA,MAAA,IAIL,KAAK,iBAAA;AAAA,IACP,GAjDE,KAAK,WAAW,IAChB,KAAK,gBAAgB,CAAA,GACrB,KAAK,WAAW;AAAA,EAClB;AAAA,EAEA,oBAA0B;AACxB,UAAM,kBAAA,GACN,KAAK,iBAAiB,kBAAkB,KAAK,gBAAgB;AAAA,EAC/D;AAAA,EAEA,uBAA6B;AAC3B,UAAM,qBAAA,GACN,KAAK,oBAAoB,kBAAkB,KAAK,gBAAgB;AAAA,EAClE;AAAA;AAAA;AAAA;AAAA;AAAA,EA0CQ,mBAAmB;AAEzB,IADc,KAAK,iBAAiB,mBAAmB,EACjD,QAAQ,CAACG,MAAS;AACtB,YAAMC,IAAgBD,GAChBE,IAAa,KAAK,cAAc,SAASD,EAAc,MAAM;AACnE,MAAAA,EAAc,WAAWC,GACrB,KAAK,aACPD,EAAc,WAAW;AAAA,IAE7B,CAAC;AAAA,EACH;AAAA;AAAA;AAAA;AAAA;AAAA,EAMQ,0BAA0B;AAChC,UAAME,IAAQ,KAAK,iBAAiB,mBAAmB,GACjDC,IAAwB,CAAA;AAE9B,IAAAD,EAAM,QAAQ,CAACH,MAAS;AACtB,YAAMC,IAAgBD;AACtB,MAAIC,EAAc,YAAYA,EAAc,UAC1CG,EAAY,KAAKH,EAAc,MAAM;AAAA,IAEzC,CAAC,GAEGG,EAAY,SAAS,MAEvB,KAAK,gBAAgB,KAAK,WAAWA,IAAc,CAACA,EAAY,CAAC,CAAC;AAAA,EAEtE;AAAA,EAEA,eAAqB;AAEnB,SAAK,wBAAA,GACL,KAAK,iBAAA;AAAA,EACP;AAAA,EAEA,QAAQC,GAA+C;AACrD,KACEA,EAAkB,IAAI,eAAe,KACrCA,EAAkB,IAAI,UAAU,MAEhC,KAAK,iBAAA;AAAA,EAET;AAAA;AAAA,EAGA,OAAOR,GAAY;AACjB,IAAK,KAAK,cAAc,SAASA,CAAE,MAC7B,KAAK,WACP,KAAK,gBAAgB,CAAC,GAAG,KAAK,eAAeA,CAAE,IAE/C,KAAK,gBAAgB,CAACA,CAAE,GAE1B,KAAK,iBAAA,GACL,KAAK;AAAA,MACH,IAAI,YAAY,aAAa;AAAA,QAC3B,QAAQ,EAAE,IAAAA,EAAA;AAAA,QACV,SAAS;AAAA,QACT,UAAU;AAAA,MAAA,CACX;AAAA,IAAA;AAAA,EAGP;AAAA;AAAA,EAGA,SAASA,GAAY;AACnB,IAAI,KAAK,cAAc,SAASA,CAAE,MAChC,KAAK,gBAAgB,KAAK,cAAc,OAAO,CAACE,MAAWA,MAAWF,CAAE,GACxE,KAAK,iBAAA,GACL,KAAK;AAAA,MACH,IAAI,YAAY,eAAe;AAAA,QAC7B,QAAQ,EAAE,IAAAA,EAAA;AAAA,QACV,SAAS;AAAA,QACT,UAAU;AAAA,MAAA,CACX;AAAA,IAAA;AAAA,EAGP;AAAA;AAAA,EAGA,YAAY;AACV,QAAI,CAAC,KAAK,SAAU;AACpB,UAAMM,IAAQ,KAAK,iBAAiB,mBAAmB,GACjDG,IAAgB,CAAA;AACtB,IAAAH,EAAM,QAAQ,CAACH,MAAS;AACtB,YAAMC,IAAgBD;AACtB,MAAKC,EAAc,YACjBK,EAAI,KAAKL,EAAc,MAAM;AAAA,IAEjC,CAAC,GACD,KAAK,gBAAgBK,GACrB,KAAK,iBAAA;AAAA,EACP;AAAA;AAAA,EAGA,cAAc;AACZ,SAAK,gBAAgB,CAAA,GACrB,KAAK,iBAAA;AAAA,EACP;AAAA;AAAA;AAAA;AAAA;AAAA,EAMQ,mBAAmB;AAGzB,IAAI,KAAK,cAAc,WAAW,KAChC,KAAK,wBAAA,GAEP,KAAK,iBAAA;AAAA,EACP;AAAA,EAEA,SAAS;AACP,UAAMC,IAAU;AAAA,MACd,WAAW;AAAA,MACX,uBAAuB,KAAK;AAAA,IAAA;AAG9B,WAAOC;AAAA,mBACQC,EAASF,CAAO,CAAC;AAAA,4BACR,KAAK,gBAAgB;AAAA;AAAA;AAAA,EAG/C;AACF;AArMad,EAUJ,SAAS,CAACF,CAAe;AARoBmB,EAAA;AAAA,EAAnDC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAF/BlB,EAEyC,WAAA,YAAA,CAAA;AAGjBiB,EAAA;AAAA,EAAlCC,EAAS,EAAE,MAAM,MAAA,CAAO;AAAA,GALdlB,EAKwB,WAAA,iBAAA,CAAA;AAGiBiB,EAAA;AAAA,EAAnDC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAR/BlB,EAQyC,WAAA,YAAA,CAAA;AARzCA,IAANiB,EAAA;AAAA,EADNE,EAAc,cAAc;AAAA,GAChBnB,CAAA;AA4NN,IAAMoB,IAAN,cAA8BnB,EAAW;AAAA,EAgB9C,cAAc;AACZ,UAAA,GACA,KAAK,SAAS,IACd,KAAK,SAAS,IACd,KAAK,WAAW,IAChB,KAAK,WAAW;AAAA,EAClB;AAAA,EAEA,oBAA0B;AACxB,UAAM,kBAAA,GAED,KAAK,WACR,KAAK,SAAS,kBAAkB,KAAK,OAAA,EAAS,SAAS,EAAE,EAAE,MAAM,GAAG,CAAC,CAAC;AAAA,EAE1E;AAAA;AAAA;AAAA;AAAA;AAAA,EAMQ,eAAe;AACrB,IAAI,KAAK,aAET,KAAK;AAAA,MACH,IAAI,YAAY,kBAAkB;AAAA,QAChC,QAAQ,EAAE,IAAI,KAAK,QAAQ,UAAU,CAAC,KAAK,SAAA;AAAA,QAC3C,SAAS;AAAA,QACT,UAAU;AAAA,MAAA,CACX;AAAA,IAAA,GAIH,KAAK,eAAe,KAAK,MAAM;AAI7B,MAHe,KAAK,YAAY;AAAA,QAC9B;AAAA,MAAA,GAEM,MAAA;AAAA,IACV,CAAC;AAAA,EACH;AAAA;AAAA;AAAA;AAAA;AAAA,EAMQ,cAAcC,GAAsB;AAC1C,IAAI,KAAK,aAELA,EAAM,QAAQ,WAAWA,EAAM,QAAQ,SACzCA,EAAM,eAAA,GACN,KAAK,aAAA;AAAA,EAET;AAAA,EAEA,SAAS;AACP,UAAMmB,IAAc;AAAA,MAClB,MAAM;AAAA,MACN,kBAAkB,KAAK;AAAA,MACvB,kBAAkB,KAAK;AAAA,IAAA,GAGnBC,IAAW,GAAG,KAAK,MAAM,WACzBC,IAAY,GAAG,KAAK,MAAM;AAEhC,WAAOR;AAAA,mBACQC,EAASK,CAAW,CAAC;AAAA;AAAA;AAAA;AAAA,eAIzBC,CAAQ;AAAA,0BACG,KAAK,QAAQ;AAAA,0BACbC,CAAS;AAAA,0BACT,KAAK,QAAQ;AAAA,sBACjB,KAAK,QAAQ;AAAA,mBAChB,KAAK,YAAY;AAAA,qBACf,KAAK,aAAa;AAAA;AAAA;AAAA;AAAA,kCAIL,KAAK,MAAM;AAAA;AAAA;AAAA,4BAGjBC,CAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAM3BD,CAAS;AAAA;AAAA,4BAEID,CAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQlC;AACF;AAlHaF,EAcJ,SAAS,CAACtB,CAAe;AAXxBmB,EAAA;AAAA,EADPC,EAAS,EAAE,MAAM,QAAQ,WAAW,WAAW,SAAS,IAAM;AAAA,GAFpDE,EAGH,WAAA,UAAA,CAAA;AAG4BH,EAAA;AAAA,EAAnCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GANfE,EAMyB,WAAA,UAAA,CAAA;AAGgBH,EAAA;AAAA,EAAnDC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAT/BE,EASyC,WAAA,YAAA,CAAA;AAGAH,EAAA;AAAA,EAAnDC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAZ/BE,EAYyC,WAAA,YAAA,CAAA;AAZzCA,IAANH,EAAA;AAAA,EADNE,EAAc,mBAAmB;AAAA,GACrBC,CAAA;"}
+{"version":3,"file":"accordion.js","sources":["../../source/components/accordion/accordion.style.ts","../../source/components/accordion/accordion.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const accordionStyles = css`\n  /* ===== ACCORDION CONTAINER ===== */\n\n  :host {\n    display: block;\n  }\n\n  .accordion {\n    font-family: var(--bp-font-family);\n    display: flex;\n    flex-direction: column;\n    border: var(--bp-border-width) solid var(--bp-color-border);\n    border-radius: var(--bp-border-radius);\n    overflow: hidden;\n  }\n\n  /* Disabled state */\n  .accordion--disabled {\n    opacity: var(--bp-opacity-disabled);\n    pointer-events: none;\n  }\n\n  /* ===== ACCORDION ITEM ===== */\n\n  /* Separators between items */\n  :host(:not(:first-of-type)) {\n    border-top: var(--bp-border-width) solid var(--bp-color-border);\n  }\n\n  .item {\n    display: flex;\n    flex-direction: column;\n  }\n\n  /* Header button */\n  .item__header {\n    /* Reset */\n    appearance: none;\n    border: none;\n    background: transparent;\n    margin: 0;\n\n    /* Layout */\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    width: 100%;\n    padding: var(--bp-spacing-4) var(--bp-spacing-4);\n    gap: var(--bp-spacing-3);\n\n    /* Typography */\n    font-family: var(--bp-font-family);\n    font-size: var(--bp-font-size-base);\n    font-weight: var(--bp-font-weight-medium);\n    text-align: left;\n    color: var(--bp-color-text);\n    line-height: var(--bp-line-height-normal);\n\n    /* Interaction */\n    cursor: pointer;\n    transition: background-color var(--bp-transition-fast);\n  }\n\n  .item__header:hover:not(:disabled) {\n    background-color: var(--bp-color-surface);\n  }\n\n  .item__header:focus {\n    outline: none;\n  }\n\n  .item__header:focus-visible {\n    outline: var(--bp-focus-width) var(--bp-focus-style) var(--bp-color-focus);\n    outline-offset: var(--bp-focus-offset);\n  }\n  .item__header:active:not(:disabled) {\n    background-color: var(--bp-color-surface-hover);\n    transform: translateY(1px);\n  }\n  .item__header-content {\n    display: flex;\n    align-items: center;\n    gap: var(--bp-spacing-3);\n    flex: 1;\n  }\n\n  /* Expand/collapse icon */\n  .item__icon {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n    color: var(--bp-color-text-muted);\n    transition: transform var(--bp-transition-fast);\n  }\n\n  /* Icon is sized by bp-icon component */\n\n  /* Rotate icon when expanded */\n  .item--expanded .item__icon {\n    transform: rotate(180deg);\n  }\n\n  /* Collapsible content */\n  .item__content {\n    display: grid;\n    grid-template-rows: 0fr;\n    overflow: hidden;\n    transition: grid-template-rows var(--bp-transition-base);\n    content-visibility: hidden;\n  }\n\n  .item--expanded .item__content {\n    grid-template-rows: 1fr;\n    content-visibility: visible;\n  }\n\n  .item__body {\n    min-height: 0;\n    padding: 0 var(--bp-spacing-4) var(--bp-spacing-4) var(--bp-spacing-4);\n    color: var(--bp-color-text);\n    font-size: var(--bp-font-size-sm);\n    line-height: var(--bp-line-height-relaxed);\n    overflow: hidden;\n    opacity: 0;\n    transition: opacity var(--bp-transition-fast);\n  }\n\n  .item--expanded .item__body {\n    opacity: 1;\n    transition-delay: 100ms;\n  }\n\n  .item:not(.item--expanded) .item__body {\n    padding-top: 0;\n    padding-bottom: 0;\n    opacity: 0;\n    transition-delay: 0ms;\n  }\n\n  /* Disabled state */\n  .item--disabled .item__header {\n    cursor: not-allowed;\n    opacity: var(--bp-opacity-disabled);\n  }\n\n  .item--disabled .item__icon {\n    opacity: 1;\n  }\n\n  .item--disabled .item__header:hover {\n    background-color: transparent;\n  }\n\n  /* Reduced motion */\n  @media (prefers-reduced-motion: reduce) {\n    .item__icon {\n      transition: none;\n    }\n\n    .item__content {\n      transition: none;\n    }\n\n    .item__body {\n      transition: none;\n      opacity: 1;\n    }\n\n    .item__header:active:not(:disabled) {\n      transform: none;\n    }\n  }\n`;\n","import { LitElement, html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { accordionStyles } from './accordion.style.js';\nimport { chevronDownSvg } from '../icon/icons/entries/chevron-down.js';\nimport { BpIcon } from '../icon/icon.js';\n\n/**\n * A container component that groups accordion items.\n * Controls single or multiple expansion behavior.\n *\n * @element bp-accordion\n *\n * @property {boolean} multiple - Whether multiple items can be expanded simultaneously\n * @property {string[]} expandedItems - Array of expanded item IDs\n * @property {boolean} disabled - Whether all items are disabled\n *\n * @fires bp-expand - Fired when an item is expanded\n * @fires bp-collapse - Fired when an item is collapsed\n *\n * @slot - Default slot for bp-accordion-item elements\n *\n * @csspart accordion - The main accordion container\n */\n@customElement('bp-accordion')\nexport class BpAccordion extends LitElement {\n  /**\n   * Child components that self-register as custom elements on import.\n   * Value imports prevent bundler tree-shaking of the registration side effect.\n   */\n  static dependencies = [BpIcon];\n\n  /** Whether multiple items can be expanded simultaneously */\n  @property({ type: Boolean, reflect: true }) declare multiple: boolean;\n\n  /** Array of expanded item IDs */\n  @property({ type: Array }) declare expandedItems: string[];\n\n  /** Whether all items are disabled */\n  @property({ type: Boolean, reflect: true }) declare disabled: boolean;\n\n  static styles = [accordionStyles];\n\n  constructor() {\n    super();\n    this.multiple = false;\n    this.expandedItems = [];\n    this.disabled = false;\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.addEventListener('bp-item-toggle', this.handleItemToggle);\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.removeEventListener('bp-item-toggle', this.handleItemToggle);\n  }\n\n  /**\n   * Handles item toggle events from child accordion items.\n   * Updates expandedItems array based on multiple mode and dispatches expand/collapse events.\n   */\n  private handleItemToggle = (event: Event) => {\n    const customEvent = event as CustomEvent<{ id: string; expanded: boolean }>;\n    const { id, expanded } = customEvent.detail;\n\n    if (expanded) {\n      if (this.multiple) {\n        this.expandedItems = [...this.expandedItems, id];\n      } else {\n        // Close other items when not in multiple mode\n        this.expandedItems = [id];\n      }\n      this.dispatchEvent(\n        new CustomEvent('bp-expand', {\n          detail: { id },\n          bubbles: true,\n          composed: true,\n        })\n      );\n    } else {\n      this.expandedItems = this.expandedItems.filter((itemId) => itemId !== id);\n      this.dispatchEvent(\n        new CustomEvent('bp-collapse', {\n          detail: { id },\n          bubbles: true,\n          composed: true,\n        })\n      );\n    }\n\n    this.updateChildItems();\n  };\n\n  /**\n   * Synchronizes child accordion items with the expandedItems state.\n   * Also applies disabled state to all items when accordion is disabled.\n   */\n  private updateChildItems() {\n    const items = this.querySelectorAll('bp-accordion-item');\n    items.forEach((item) => {\n      const accordionItem = item as BpAccordionItem;\n      const isExpanded = this.expandedItems.includes(accordionItem.itemId);\n      accordionItem.expanded = isExpanded;\n      if (this.disabled) {\n        accordionItem.disabled = true;\n      }\n    });\n  }\n\n  /**\n   * Initializes expandedItems array from children with expanded attribute.\n   * Called on first render to respect items marked as expanded in HTML.\n   */\n  private initializeExpandedItems() {\n    const items = this.querySelectorAll('bp-accordion-item');\n    const expandedIds: string[] = [];\n\n    items.forEach((item) => {\n      const accordionItem = item as BpAccordionItem;\n      if (accordionItem.expanded && accordionItem.itemId) {\n        expandedIds.push(accordionItem.itemId);\n      }\n    });\n\n    if (expandedIds.length > 0) {\n      // In single mode, only keep the first expanded item\n      this.expandedItems = this.multiple ? expandedIds : [expandedIds[0]];\n    }\n  }\n\n  firstUpdated(): void {\n    // Initialize expanded items from children on first render\n    this.initializeExpandedItems();\n    this.updateChildItems();\n  }\n\n  updated(changedProperties: Map<string, unknown>): void {\n    if (\n      changedProperties.has('expandedItems') ||\n      changedProperties.has('disabled')\n    ) {\n      this.updateChildItems();\n    }\n  }\n\n  /** Expand an item by ID */\n  expand(id: string) {\n    if (!this.expandedItems.includes(id)) {\n      if (this.multiple) {\n        this.expandedItems = [...this.expandedItems, id];\n      } else {\n        this.expandedItems = [id];\n      }\n      this.updateChildItems();\n      this.dispatchEvent(\n        new CustomEvent('bp-expand', {\n          detail: { id },\n          bubbles: true,\n          composed: true,\n        })\n      );\n    }\n  }\n\n  /** Collapse an item by ID */\n  collapse(id: string) {\n    if (this.expandedItems.includes(id)) {\n      this.expandedItems = this.expandedItems.filter((itemId) => itemId !== id);\n      this.updateChildItems();\n      this.dispatchEvent(\n        new CustomEvent('bp-collapse', {\n          detail: { id },\n          bubbles: true,\n          composed: true,\n        })\n      );\n    }\n  }\n\n  /** Expand all items (only works in multiple mode) */\n  expandAll() {\n    if (!this.multiple) return;\n    const items = this.querySelectorAll('bp-accordion-item');\n    const ids: string[] = [];\n    items.forEach((item) => {\n      const accordionItem = item as BpAccordionItem;\n      if (!accordionItem.disabled) {\n        ids.push(accordionItem.itemId);\n      }\n    });\n    this.expandedItems = ids;\n    this.updateChildItems();\n  }\n\n  /** Collapse all items */\n  collapseAll() {\n    this.expandedItems = [];\n    this.updateChildItems();\n  }\n\n  /**\n   * Handles slot changes - when children are added or removed.\n   * Initializes expanded state from new children.\n   */\n  private handleSlotChange() {\n    // Only initialize from children if expandedItems is empty\n    // Otherwise respect the parent's state\n    if (this.expandedItems.length === 0) {\n      this.initializeExpandedItems();\n    }\n    this.updateChildItems();\n  }\n\n  render() {\n    const classes = {\n      accordion: true,\n      'accordion--disabled': this.disabled,\n    };\n\n    return html`\n      <div class=${classMap(classes)} part=\"accordion\" role=\"presentation\">\n        <slot @slotchange=${this.handleSlotChange}></slot>\n      </div>\n    `;\n  }\n}\n\n/**\n * An individual accordion item with header and collapsible content.\n *\n * @element bp-accordion-item\n *\n * @property {string} itemId - Unique identifier for this item\n * @property {string} header - Header text displayed in the trigger button\n * @property {boolean} expanded - Whether the content is expanded\n * @property {boolean} disabled - Whether this item is disabled\n *\n * @slot - Default slot for the collapsible content\n * @slot header - Custom header content (overrides header property)\n * @slot icon - Custom icon for the header\n *\n * @csspart item - The accordion item container\n * @csspart header - The header/trigger button\n * @csspart icon - The expand/collapse icon\n * @csspart content - The collapsible content wrapper\n * @csspart body - The inner content container\n */\n@customElement('bp-accordion-item')\nexport class BpAccordionItem extends LitElement {\n  /** Unique identifier for this item */\n  @property({ type: String, attribute: 'item-id', reflect: true })\n  declare itemId: string;\n\n  /** Header text displayed in the trigger button */\n  @property({ type: String }) declare header: string;\n\n  /** Whether the content is expanded */\n  @property({ type: Boolean, reflect: true }) declare expanded: boolean;\n\n  /** Whether this item is disabled */\n  @property({ type: Boolean, reflect: true }) declare disabled: boolean;\n\n  static styles = [accordionStyles];\n\n  constructor() {\n    super();\n    this.itemId = '';\n    this.header = '';\n    this.expanded = false;\n    this.disabled = false;\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    // Generate ID if not provided\n    if (!this.itemId) {\n      this.itemId = `accordion-item-${Math.random().toString(36).slice(2, 9)}`;\n    }\n  }\n\n  /**\n   * Handles toggle action and dispatches bp-item-toggle event.\n   * Also manages focus on the header button after expansion.\n   */\n  private handleToggle() {\n    if (this.disabled) return;\n\n    this.dispatchEvent(\n      new CustomEvent('bp-item-toggle', {\n        detail: { id: this.itemId, expanded: !this.expanded },\n        bubbles: true,\n        composed: true,\n      })\n    );\n\n    // Focus management: focus header after toggle completes\n    this.updateComplete.then(() => {\n      const header = this.shadowRoot?.querySelector(\n        '.item__header'\n      ) as HTMLElement;\n      header?.focus();\n    });\n  }\n\n  /**\n   * Handles keyboard navigation.\n   * Triggers toggle on Enter or Space key press.\n   */\n  private handleKeyDown(event: KeyboardEvent) {\n    if (this.disabled) return;\n\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault();\n      this.handleToggle();\n    }\n  }\n\n  render() {\n    const itemClasses = {\n      item: true,\n      'item--expanded': this.expanded,\n      'item--disabled': this.disabled,\n    };\n\n    const headerId = `${this.itemId}-header`;\n    const contentId = `${this.itemId}-content`;\n\n    return html`\n      <div class=${classMap(itemClasses)} part=\"item\">\n        <button\n          class=\"item__header\"\n          part=\"header\"\n          id=${headerId}\n          aria-expanded=${this.expanded}\n          aria-controls=${contentId}\n          aria-disabled=${this.disabled}\n          ?disabled=${this.disabled}\n          @click=${this.handleToggle}\n          @keydown=${this.handleKeyDown}\n        >\n          <span class=\"item__header-content\">\n            <slot name=\"icon\"></slot>\n            <slot name=\"header\">${this.header}</slot>\n          </span>\n          <span class=\"item__icon\" part=\"icon\" aria-hidden=\"true\">\n            <bp-icon .svg=${chevronDownSvg} size=\"md\"></bp-icon>\n          </span>\n        </button>\n        <div\n          class=\"item__content\"\n          part=\"content\"\n          id=${contentId}\n          role=\"region\"\n          aria-labelledby=${headerId}\n        >\n          <div class=\"item__body\" part=\"body\">\n            <slot></slot>\n          </div>\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'bp-accordion': BpAccordion;\n    'bp-accordion-item': BpAccordionItem;\n  }\n}\n"],"names":["accordionStyles","css","BpAccordion","LitElement","event","customEvent","id","expanded","itemId","item","accordionItem","isExpanded","items","expandedIds","changedProperties","ids","classes","html","classMap","BpIcon","__decorateClass","property","customElement","BpAccordionItem","itemClasses","headerId","contentId","chevronDownSvg"],"mappings":"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"}

package/dist/components/alert/alert.d.ts

@@ -1,5 +1,5 @@
 import { LitElement } from 'lit';
-import '../icon/icon.js';
+import { BpIcon } from '../icon/icon.js';
 export type AlertVariant = 'info' | 'success' | 'warning' | 'error';
 /**
  * An alert component for displaying notification messages to users.
@@ -11,6 +11,11 @@ export type AlertVariant = 'info' | 'success' | 'warning' | 'error';
  * @fires bp-close - Fired when the alert is dismissed (cancelable)
  */
 export declare class BpAlert extends LitElement {
+    /**
+     * Child components that self-register as custom elements on import.
+     * Value imports prevent bundler tree-shaking of the registration side effect.
+     */
+    static dependencies: (typeof BpIcon)[];
     /**
      * Visual variant indicating the type of alert
      */

package/dist/components/alert/alert.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"alert.d.ts","sourceRoot":"","sources":["../../../source/components/alert/alert.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAQvC,OAAO,iBAAiB,CAAC;AAEzB,MAAM,MAAM,YAAY,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;AASpE;;;;;;;;GAQG;AACH,qBACa,OAAQ,SAAQ,UAAU;IACrC;;OAEG;IACgD,OAAO,EAAE,YAAY,CAAC;IAEzE;;OAEG;IACiD,WAAW,EAAE,OAAO,CAAC;IAEzE;;OAEG;IACiD,QAAQ,EAAE,OAAO,CAAC;IAEtE,MAAM,CAAC,MAAM,4BAAiB;;IAS9B,OAAO,CAAC,WAAW;IAmBnB,OAAO,CAAC,iBAAiB;IAIzB,MAAM;CAsCP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,OAAO,CAAC;KACrB;CACF"}
+{"version":3,"file":"alert.d.ts","sourceRoot":"","sources":["../../../source/components/alert/alert.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAQvC,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AAEzC,MAAM,MAAM,YAAY,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;AASpE;;;;;;;;GAQG;AACH,qBACa,OAAQ,SAAQ,UAAU;IACrC;;;OAGG;IACH,MAAM,CAAC,YAAY,oBAAY;IAE/B;;OAEG;IACgD,OAAO,EAAE,YAAY,CAAC;IAEzE;;OAEG;IACiD,WAAW,EAAE,OAAO,CAAC;IAEzE;;OAEG;IACiD,QAAQ,EAAE,OAAO,CAAC;IAEtE,MAAM,CAAC,MAAM,4BAAiB;;IAS9B,OAAO,CAAC,WAAW;IAmBnB,OAAO,CAAC,iBAAiB;IAIzB,MAAM;CAsCP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,OAAO,CAAC;KACrB;CACF"}

package/dist/components/alert.js

@@ -5,7 +5,8 @@ import { checkCircleSvg as g } from "../icons/check-circle.js";
 import { warningCircleSvg as m } from "../icons/warning-circle.js";
 import { crossCircleSvg as h } from "../icons/cross-circle.js";
 import { crossSvg as u } from "../icons/cross.js";
-const y = b`
+import { BpIcon as y } from "./icon.js";
+const w = b`
   /* Base styles */
   :host {
     display: block;
@@ -135,12 +136,12 @@ const y = b`
     box-shadow: var(--bp-shadow-sm);
   }
 `;
-var w = Object.defineProperty, x = Object.getOwnPropertyDescriptor, s = (t, o, i, a) => {
-  for (var r = a > 1 ? void 0 : a ? x(o, i) : o, l = t.length - 1, n; l >= 0; l--)
+var x = Object.defineProperty, C = Object.getOwnPropertyDescriptor, s = (t, o, i, a) => {
+  for (var r = a > 1 ? void 0 : a ? C(o, i) : o, l = t.length - 1, n; l >= 0; l--)
     (n = t[l]) && (r = (a ? n(o, i, r) : n(r)) || r);
-  return a && r && w(o, i, r), r;
+  return a && r && x(o, i, r), r;
 };
-const C = {
+const k = {
   info: f,
   success: g,
   warning: m,
@@ -163,7 +164,7 @@ let e = class extends d {
     this.dispatchEvent(t), t.defaultPrevented || this.remove();
   }
   getVariantIconSvg() {
-    return C[this.variant];
+    return k[this.variant];
   }
   render() {
     return c`
@@ -200,7 +201,8 @@ let e = class extends d {
     `;
   }
 };
-e.styles = [y];
+e.dependencies = [y];
+e.styles = [w];
 s([
   p({ type: String, reflect: !0 })
 ], e.prototype, "variant", 2);

package/dist/components/alert.js.map

@@ -1 +1 @@
-{"version":3,"file":"alert.js","sources":["../../source/components/alert/alert.style.ts","../../source/components/alert/alert.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const alertStyles = css`\n  /* Base styles */\n  :host {\n    display: block;\n    animation: slideIn var(--bp-transition-base) ease-out;\n  }\n\n  @keyframes slideIn {\n    from {\n      opacity: 0;\n      transform: translateY(calc(-1 * var(--bp-spacing-md)));\n    }\n    to {\n      opacity: 1;\n      transform: translateY(0);\n    }\n  }\n\n  .alert {\n    position: relative;\n    display: flex;\n    align-items: flex-start;\n    gap: var(--bp-spacing-md);\n    padding: var(--bp-spacing-sm) var(--bp-spacing-md);\n    font-family: var(--bp-font-family);\n    font-size: var(--bp-font-size-base);\n    line-height: var(--bp-line-height-relaxed);\n    border-radius: var(--bp-border-radius-md);\n    border-width: var(--bp-border-width);\n    border-style: solid;\n  }\n\n  @media (min-width: var(--bp-breakpoint-sm)) {\n    .alert {\n      padding: var(--bp-spacing-md) var(--bp-spacing-lg);\n    }\n  }\n\n  .alert-content {\n    display: flex;\n    align-items: flex-start;\n    gap: var(--bp-spacing-md);\n    flex: 1;\n  }\n\n  .alert-icon {\n    display: flex;\n    align-items: flex-start;\n    padding-top: var(--bp-spacing-0-5);\n    flex-shrink: 0;\n  }\n\n  .alert-icon svg {\n    width: var(--bp-spacing-5);\n    height: var(--bp-spacing-5);\n    flex-shrink: 0;\n  }\n\n  .alert-message {\n    flex: 1;\n  }\n\n  ::slotted([slot='title']) {\n    display: block;\n    font-weight: var(--bp-font-weight-semibold);\n    line-height: var(--bp-line-height-tight);\n    margin-bottom: var(--bp-spacing-xs);\n  }\n\n  .alert-close {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: none;\n    border: none;\n    cursor: pointer;\n    padding: var(--bp-spacing-2xs);\n    border-radius: var(--bp-border-radius-sm);\n    color: inherit;\n    opacity: 0.8;\n    transition: all var(--bp-transition-fast);\n    flex-shrink: 0;\n  }\n\n  .alert-close:hover {\n    opacity: 1;\n    background-color: currentColor;\n    opacity: 0.1;\n  }\n\n  .alert-close:active {\n    opacity: 0.15;\n  }\n\n  .alert-close:focus-visible {\n    outline: var(--bp-focus-ring);\n    outline-offset: var(--bp-focus-offset);\n  }\n\n  /* Variants */\n  .alert--info {\n    background-color: var(--bp-color-surface-elevated);\n    border-color: var(--bp-color-info);\n    border-left-width: var(--bp-spacing-1);\n    color: var(--bp-color-text);\n  }\n\n  .alert--success {\n    background-color: var(--bp-color-surface-elevated);\n    border-color: var(--bp-color-success);\n    border-left-width: var(--bp-spacing-1);\n    color: var(--bp-color-text);\n  }\n\n  .alert--warning {\n    background-color: var(--bp-color-surface-elevated);\n    border-color: var(--bp-color-warning);\n    border-left-width: var(--bp-spacing-1);\n    color: var(--bp-color-text);\n    box-shadow: var(--bp-shadow-sm);\n  }\n\n  .alert--error {\n    background-color: var(--bp-color-surface-elevated);\n    border-color: var(--bp-color-error);\n    border-left-width: var(--bp-spacing-1);\n    color: var(--bp-color-text);\n    box-shadow: var(--bp-shadow-sm);\n  }\n`;\n","import { LitElement, html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { alertStyles } from './alert.style.js';\nimport { infoCircleSvg } from '../icon/icons/entries/info-circle.js';\nimport { checkCircleSvg } from '../icon/icons/entries/check-circle.js';\nimport { warningCircleSvg } from '../icon/icons/entries/warning-circle.js';\nimport { crossCircleSvg } from '../icon/icons/entries/cross-circle.js';\nimport { crossSvg } from '../icon/icons/entries/cross.js';\nimport '../icon/icon.js';\n\nexport type AlertVariant = 'info' | 'success' | 'warning' | 'error';\n\nconst VARIANT_ICONS: Record<AlertVariant, string> = {\n  info: infoCircleSvg,\n  success: checkCircleSvg,\n  warning: warningCircleSvg,\n  error: crossCircleSvg,\n};\n\n/**\n * An alert component for displaying notification messages to users.\n *\n * @slot - Message content\n * @slot title - Optional title/heading for the alert\n * @slot icon - Optional custom icon (replaces default icon)\n *\n * @fires bp-close - Fired when the alert is dismissed (cancelable)\n */\n@customElement('bp-alert')\nexport class BpAlert extends LitElement {\n  /**\n   * Visual variant indicating the type of alert\n   */\n  @property({ type: String, reflect: true }) declare variant: AlertVariant;\n\n  /**\n   * Whether the alert can be dismissed by the user\n   */\n  @property({ type: Boolean, reflect: true }) declare dismissible: boolean;\n\n  /**\n   * Whether to show a default icon for the variant\n   */\n  @property({ type: Boolean, reflect: true }) declare showIcon: boolean;\n\n  static styles = [alertStyles];\n\n  constructor() {\n    super();\n    this.variant = 'info';\n    this.dismissible = false;\n    this.showIcon = false;\n  }\n\n  private handleClose() {\n    const event = new CustomEvent('bp-close', {\n      detail: {\n        variant: this.variant,\n        timestamp: Date.now(),\n      },\n      bubbles: true,\n      composed: true,\n      cancelable: true,\n    });\n\n    this.dispatchEvent(event);\n\n    // Only remove if event wasn't prevented\n    if (!event.defaultPrevented) {\n      this.remove();\n    }\n  }\n\n  private getVariantIconSvg(): string {\n    return VARIANT_ICONS[this.variant];\n  }\n\n  render() {\n    return html`\n      <div\n        class=\"alert alert--${this.variant}\"\n        part=\"alert\"\n        role=\"alert\"\n        aria-live=\"polite\"\n      >\n        <div class=\"alert-content\">\n          ${this.showIcon\n            ? html`\n                <div class=\"alert-icon\" part=\"icon\">\n                  <slot name=\"icon\">\n                    <bp-icon .svg=${this.getVariantIconSvg()}></bp-icon>\n                  </slot>\n                </div>\n              `\n            : null}\n          <div class=\"alert-message\" part=\"message\">\n            <slot name=\"title\"></slot>\n            <slot></slot>\n          </div>\n        </div>\n        ${this.dismissible\n          ? html`\n              <button\n                class=\"alert-close\"\n                part=\"close-button\"\n                @click=${this.handleClose}\n                aria-label=\"Close alert\"\n              >\n                <bp-icon .svg=${crossSvg}></bp-icon>\n              </button>\n            `\n          : null}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'bp-alert': BpAlert;\n  }\n}\n"],"names":["alertStyles","css","VARIANT_ICONS","infoCircleSvg","checkCircleSvg","warningCircleSvg","crossCircleSvg","BpAlert","LitElement","event","html","crossSvg","__decorateClass","property","customElement"],"mappings":";;;;;;;AAEO,MAAMA,IAAcC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;;;ACU3B,MAAMC,IAA8C;AAAA,EAClD,MAAMC;AAAA,EACN,SAASC;AAAA,EACT,SAASC;AAAA,EACT,OAAOC;AACT;AAYO,IAAMC,IAAN,cAAsBC,EAAW;AAAA,EAkBtC,cAAc;AACZ,UAAA,GACA,KAAK,UAAU,QACf,KAAK,cAAc,IACnB,KAAK,WAAW;AAAA,EAClB;AAAA,EAEQ,cAAc;AACpB,UAAMC,IAAQ,IAAI,YAAY,YAAY;AAAA,MACxC,QAAQ;AAAA,QACN,SAAS,KAAK;AAAA,QACd,WAAW,KAAK,IAAA;AAAA,MAAI;AAAA,MAEtB,SAAS;AAAA,MACT,UAAU;AAAA,MACV,YAAY;AAAA,IAAA,CACb;AAED,SAAK,cAAcA,CAAK,GAGnBA,EAAM,oBACT,KAAK,OAAA;AAAA,EAET;AAAA,EAEQ,oBAA4B;AAClC,WAAOP,EAAc,KAAK,OAAO;AAAA,EACnC;AAAA,EAEA,SAAS;AACP,WAAOQ;AAAA;AAAA,8BAEmB,KAAK,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAM9B,KAAK,WACHA;AAAA;AAAA;AAAA,oCAGsB,KAAK,mBAAmB;AAAA;AAAA;AAAA,kBAI9C,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAMR,KAAK,cACHA;AAAA;AAAA;AAAA;AAAA,yBAIa,KAAK,WAAW;AAAA;AAAA;AAAA,gCAGTC,CAAQ;AAAA;AAAA,gBAG5B,IAAI;AAAA;AAAA;AAAA,EAGd;AACF;AAtFaJ,EAgBJ,SAAS,CAACP,CAAW;AAZuBY,EAAA;AAAA,EAAlDC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAJ9BN,EAIwC,WAAA,WAAA,CAAA;AAKCK,EAAA;AAAA,EAAnDC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAT/BN,EASyC,WAAA,eAAA,CAAA;AAKAK,EAAA;AAAA,EAAnDC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAd/BN,EAcyC,WAAA,YAAA,CAAA;AAdzCA,IAANK,EAAA;AAAA,EADNE,EAAc,UAAU;AAAA,GACZP,CAAA;"}
+{"version":3,"file":"alert.js","sources":["../../source/components/alert/alert.style.ts","../../source/components/alert/alert.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const alertStyles = css`\n  /* Base styles */\n  :host {\n    display: block;\n    animation: slideIn var(--bp-transition-base) ease-out;\n  }\n\n  @keyframes slideIn {\n    from {\n      opacity: 0;\n      transform: translateY(calc(-1 * var(--bp-spacing-md)));\n    }\n    to {\n      opacity: 1;\n      transform: translateY(0);\n    }\n  }\n\n  .alert {\n    position: relative;\n    display: flex;\n    align-items: flex-start;\n    gap: var(--bp-spacing-md);\n    padding: var(--bp-spacing-sm) var(--bp-spacing-md);\n    font-family: var(--bp-font-family);\n    font-size: var(--bp-font-size-base);\n    line-height: var(--bp-line-height-relaxed);\n    border-radius: var(--bp-border-radius-md);\n    border-width: var(--bp-border-width);\n    border-style: solid;\n  }\n\n  @media (min-width: var(--bp-breakpoint-sm)) {\n    .alert {\n      padding: var(--bp-spacing-md) var(--bp-spacing-lg);\n    }\n  }\n\n  .alert-content {\n    display: flex;\n    align-items: flex-start;\n    gap: var(--bp-spacing-md);\n    flex: 1;\n  }\n\n  .alert-icon {\n    display: flex;\n    align-items: flex-start;\n    padding-top: var(--bp-spacing-0-5);\n    flex-shrink: 0;\n  }\n\n  .alert-icon svg {\n    width: var(--bp-spacing-5);\n    height: var(--bp-spacing-5);\n    flex-shrink: 0;\n  }\n\n  .alert-message {\n    flex: 1;\n  }\n\n  ::slotted([slot='title']) {\n    display: block;\n    font-weight: var(--bp-font-weight-semibold);\n    line-height: var(--bp-line-height-tight);\n    margin-bottom: var(--bp-spacing-xs);\n  }\n\n  .alert-close {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: none;\n    border: none;\n    cursor: pointer;\n    padding: var(--bp-spacing-2xs);\n    border-radius: var(--bp-border-radius-sm);\n    color: inherit;\n    opacity: 0.8;\n    transition: all var(--bp-transition-fast);\n    flex-shrink: 0;\n  }\n\n  .alert-close:hover {\n    opacity: 1;\n    background-color: currentColor;\n    opacity: 0.1;\n  }\n\n  .alert-close:active {\n    opacity: 0.15;\n  }\n\n  .alert-close:focus-visible {\n    outline: var(--bp-focus-ring);\n    outline-offset: var(--bp-focus-offset);\n  }\n\n  /* Variants */\n  .alert--info {\n    background-color: var(--bp-color-surface-elevated);\n    border-color: var(--bp-color-info);\n    border-left-width: var(--bp-spacing-1);\n    color: var(--bp-color-text);\n  }\n\n  .alert--success {\n    background-color: var(--bp-color-surface-elevated);\n    border-color: var(--bp-color-success);\n    border-left-width: var(--bp-spacing-1);\n    color: var(--bp-color-text);\n  }\n\n  .alert--warning {\n    background-color: var(--bp-color-surface-elevated);\n    border-color: var(--bp-color-warning);\n    border-left-width: var(--bp-spacing-1);\n    color: var(--bp-color-text);\n    box-shadow: var(--bp-shadow-sm);\n  }\n\n  .alert--error {\n    background-color: var(--bp-color-surface-elevated);\n    border-color: var(--bp-color-error);\n    border-left-width: var(--bp-spacing-1);\n    color: var(--bp-color-text);\n    box-shadow: var(--bp-shadow-sm);\n  }\n`;\n","import { LitElement, html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { alertStyles } from './alert.style.js';\nimport { infoCircleSvg } from '../icon/icons/entries/info-circle.js';\nimport { checkCircleSvg } from '../icon/icons/entries/check-circle.js';\nimport { warningCircleSvg } from '../icon/icons/entries/warning-circle.js';\nimport { crossCircleSvg } from '../icon/icons/entries/cross-circle.js';\nimport { crossSvg } from '../icon/icons/entries/cross.js';\nimport { BpIcon } from '../icon/icon.js';\n\nexport type AlertVariant = 'info' | 'success' | 'warning' | 'error';\n\nconst VARIANT_ICONS: Record<AlertVariant, string> = {\n  info: infoCircleSvg,\n  success: checkCircleSvg,\n  warning: warningCircleSvg,\n  error: crossCircleSvg,\n};\n\n/**\n * An alert component for displaying notification messages to users.\n *\n * @slot - Message content\n * @slot title - Optional title/heading for the alert\n * @slot icon - Optional custom icon (replaces default icon)\n *\n * @fires bp-close - Fired when the alert is dismissed (cancelable)\n */\n@customElement('bp-alert')\nexport class BpAlert extends LitElement {\n  /**\n   * Child components that self-register as custom elements on import.\n   * Value imports prevent bundler tree-shaking of the registration side effect.\n   */\n  static dependencies = [BpIcon];\n\n  /**\n   * Visual variant indicating the type of alert\n   */\n  @property({ type: String, reflect: true }) declare variant: AlertVariant;\n\n  /**\n   * Whether the alert can be dismissed by the user\n   */\n  @property({ type: Boolean, reflect: true }) declare dismissible: boolean;\n\n  /**\n   * Whether to show a default icon for the variant\n   */\n  @property({ type: Boolean, reflect: true }) declare showIcon: boolean;\n\n  static styles = [alertStyles];\n\n  constructor() {\n    super();\n    this.variant = 'info';\n    this.dismissible = false;\n    this.showIcon = false;\n  }\n\n  private handleClose() {\n    const event = new CustomEvent('bp-close', {\n      detail: {\n        variant: this.variant,\n        timestamp: Date.now(),\n      },\n      bubbles: true,\n      composed: true,\n      cancelable: true,\n    });\n\n    this.dispatchEvent(event);\n\n    // Only remove if event wasn't prevented\n    if (!event.defaultPrevented) {\n      this.remove();\n    }\n  }\n\n  private getVariantIconSvg(): string {\n    return VARIANT_ICONS[this.variant];\n  }\n\n  render() {\n    return html`\n      <div\n        class=\"alert alert--${this.variant}\"\n        part=\"alert\"\n        role=\"alert\"\n        aria-live=\"polite\"\n      >\n        <div class=\"alert-content\">\n          ${this.showIcon\n            ? html`\n                <div class=\"alert-icon\" part=\"icon\">\n                  <slot name=\"icon\">\n                    <bp-icon .svg=${this.getVariantIconSvg()}></bp-icon>\n                  </slot>\n                </div>\n              `\n            : null}\n          <div class=\"alert-message\" part=\"message\">\n            <slot name=\"title\"></slot>\n            <slot></slot>\n          </div>\n        </div>\n        ${this.dismissible\n          ? html`\n              <button\n                class=\"alert-close\"\n                part=\"close-button\"\n                @click=${this.handleClose}\n                aria-label=\"Close alert\"\n              >\n                <bp-icon .svg=${crossSvg}></bp-icon>\n              </button>\n            `\n          : null}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'bp-alert': BpAlert;\n  }\n}\n"],"names":["alertStyles","css","VARIANT_ICONS","infoCircleSvg","checkCircleSvg","warningCircleSvg","crossCircleSvg","BpAlert","LitElement","event","html","crossSvg","BpIcon","__decorateClass","property","customElement"],"mappings":";;;;;;;;AAEO,MAAMA,IAAcC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;;;ACU3B,MAAMC,IAA8C;AAAA,EAClD,MAAMC;AAAA,EACN,SAASC;AAAA,EACT,SAASC;AAAA,EACT,OAAOC;AACT;AAYO,IAAMC,IAAN,cAAsBC,EAAW;AAAA,EAwBtC,cAAc;AACZ,UAAA,GACA,KAAK,UAAU,QACf,KAAK,cAAc,IACnB,KAAK,WAAW;AAAA,EAClB;AAAA,EAEQ,cAAc;AACpB,UAAMC,IAAQ,IAAI,YAAY,YAAY;AAAA,MACxC,QAAQ;AAAA,QACN,SAAS,KAAK;AAAA,QACd,WAAW,KAAK,IAAA;AAAA,MAAI;AAAA,MAEtB,SAAS;AAAA,MACT,UAAU;AAAA,MACV,YAAY;AAAA,IAAA,CACb;AAED,SAAK,cAAcA,CAAK,GAGnBA,EAAM,oBACT,KAAK,OAAA;AAAA,EAET;AAAA,EAEQ,oBAA4B;AAClC,WAAOP,EAAc,KAAK,OAAO;AAAA,EACnC;AAAA,EAEA,SAAS;AACP,WAAOQ;AAAA;AAAA,8BAEmB,KAAK,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAM9B,KAAK,WACHA;AAAA;AAAA;AAAA,oCAGsB,KAAK,mBAAmB;AAAA;AAAA;AAAA,kBAI9C,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAMR,KAAK,cACHA;AAAA;AAAA;AAAA;AAAA,yBAIa,KAAK,WAAW;AAAA;AAAA;AAAA,gCAGTC,CAAQ;AAAA;AAAA,gBAG5B,IAAI;AAAA;AAAA;AAAA,EAGd;AACF;AA5FaJ,EAKJ,eAAe,CAACK,CAAM;AALlBL,EAsBJ,SAAS,CAACP,CAAW;AAZuBa,EAAA;AAAA,EAAlDC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAV9BP,EAUwC,WAAA,WAAA,CAAA;AAKCM,EAAA;AAAA,EAAnDC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAf/BP,EAeyC,WAAA,eAAA,CAAA;AAKAM,EAAA;AAAA,EAAnDC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GApB/BP,EAoByC,WAAA,YAAA,CAAA;AApBzCA,IAANM,EAAA;AAAA,EADNE,EAAc,UAAU;AAAA,GACZR,CAAA;"}

package/dist/components/avatar/avatar.d.ts

@@ -1,5 +1,5 @@
 import { LitElement } from 'lit';
-import '../icon/icon.js';
+import { BpIcon } from '../icon/icon.js';
 export type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 export type AvatarShape = 'circle' | 'square';
 export type AvatarStatus = 'online' | 'offline' | 'busy' | 'away';
@@ -8,6 +8,11 @@ export type AvatarStatus = 'online' | 'offline' | 'busy' | 'away';
  * Supports multiple sizes, shapes, status indicators, and interactive states.
  */
 export declare class BpAvatar extends LitElement {
+    /**
+     * Child components that self-register as custom elements on import.
+     * Value imports prevent bundler tree-shaking of the registration side effect.
+     */
+    static dependencies: (typeof BpIcon)[];
     /**
      * Image source URL for the avatar.
      * @type {string}

package/dist/components/avatar/avatar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"avatar.d.ts","sourceRoot":"","sources":["../../../source/components/avatar/avatar.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAIvC,OAAO,iBAAiB,CAAC;AAEzB,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAC1D,MAAM,MAAM,WAAW,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAC9C,MAAM,MAAM,YAAY,GAAG,QAAQ,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,CAAC;AAElE;;;GAGG;AACH,qBACa,QAAS,SAAQ,UAAU;IACtC;;;;OAIG;IACgD,GAAG,EAAE,MAAM,CAAC;IAE/D;;;;OAIG;IACgD,GAAG,EAAE,MAAM,CAAC;IAE/D;;;;OAIG;IACgD,QAAQ,EAAE,MAAM,CAAC;IAEpE;;;;OAIG;IACgD,IAAI,EAAE,UAAU,CAAC;IAEpE;;;;OAIG;IACgD,KAAK,EAAE,WAAW,CAAC;IAEtE;;;;OAIG;IACgD,MAAM,CAAC,EAAE,YAAY,CAAC;IAEzE;;;;OAIG;IACiD,SAAS,EAAE,OAAO,CAAC;IAEvE;;;;OAIG;IACiC,IAAI,EAAE,MAAM,CAAC;IAEjD;;;OAGG;IACM,OAAO,CAAC,UAAU,CAAS;IAEpC,MAAM,CAAC,MAAM,4BAAkB;;IAa/B,OAAO,CAAC,gBAAgB;IAKxB,MAAM;IAmDN,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;CAMhD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}
+{"version":3,"file":"avatar.d.ts","sourceRoot":"","sources":["../../../source/components/avatar/avatar.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAIvC,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AAEzC,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAC1D,MAAM,MAAM,WAAW,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAC9C,MAAM,MAAM,YAAY,GAAG,QAAQ,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,CAAC;AAElE;;;GAGG;AACH,qBACa,QAAS,SAAQ,UAAU;IACtC;;;OAGG;IACH,MAAM,CAAC,YAAY,oBAAY;IAE/B;;;;OAIG;IACgD,GAAG,EAAE,MAAM,CAAC;IAE/D;;;;OAIG;IACgD,GAAG,EAAE,MAAM,CAAC;IAE/D;;;;OAIG;IACgD,QAAQ,EAAE,MAAM,CAAC;IAEpE;;;;OAIG;IACgD,IAAI,EAAE,UAAU,CAAC;IAEpE;;;;OAIG;IACgD,KAAK,EAAE,WAAW,CAAC;IAEtE;;;;OAIG;IACgD,MAAM,CAAC,EAAE,YAAY,CAAC;IAEzE;;;;OAIG;IACiD,SAAS,EAAE,OAAO,CAAC;IAEvE;;;;OAIG;IACiC,IAAI,EAAE,MAAM,CAAC;IAEjD;;;OAGG;IACM,OAAO,CAAC,UAAU,CAAS;IAEpC,MAAM,CAAC,MAAM,4BAAkB;;IAa/B,OAAO,CAAC,gBAAgB;IAKxB,MAAM;IAmDN,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;CAMhD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}

package/dist/components/avatar.js

@@ -1,7 +1,8 @@
-import { css as c, LitElement as h, html as l } from "lit";
+import { css as v, LitElement as h, html as l } from "lit";
 import { property as r, state as b, customElement as f } from "lit/decorators.js";
 import { usersSvg as g } from "../icons/users.js";
-const u = c`
+import { BpIcon as u } from "./icon.js";
+const d = v`
   /* Base styles */
   :host {
     display: inline-flex;
@@ -148,10 +149,10 @@ const u = c`
     background: var(--bp-color-warning);
   }
 `;
-var d = Object.defineProperty, m = Object.getOwnPropertyDescriptor, t = (i, e, o, n) => {
-  for (var s = n > 1 ? void 0 : n ? m(e, o) : e, p = i.length - 1, v; p >= 0; p--)
-    (v = i[p]) && (s = (n ? v(e, o, s) : v(s)) || s);
-  return n && s && d(e, o, s), s;
+var m = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, t = (i, e, o, n) => {
+  for (var s = n > 1 ? void 0 : n ? _(e, o) : e, p = i.length - 1, c; p >= 0; p--)
+    (c = i[p]) && (s = (n ? c(e, o, s) : c(s)) || s);
+  return n && s && m(e, o, s), s;
 };
 let a = class extends h {
   constructor() {
@@ -201,7 +202,8 @@ let a = class extends h {
     i.has("src") && (this.imageError = !1);
   }
 };
-a.styles = [u];
+a.dependencies = [u];
+a.styles = [d];
 t([
   r({ type: String, reflect: !0 })
 ], a.prototype, "src", 2);

package/dist/components/avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"avatar.js","sources":["../../source/components/avatar/avatar.style.ts","../../source/components/avatar/avatar.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const avatarStyles = css`\n  /* Base styles */\n  :host {\n    display: inline-flex;\n    position: relative;\n  }\n\n  .avatar {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    overflow: hidden;\n    background: var(--bp-color-primary);\n    color: var(--bp-color-text-inverse);\n    font-family: var(--bp-font-family);\n    font-weight: var(--bp-font-weight-semibold);\n    user-select: none;\n    flex-shrink: 0;\n    box-shadow: var(--bp-shadow-sm);\n    position: relative;\n  }\n\n  /* Image avatars have different background */\n  .avatar:has(.avatar__image) {\n    background: var(--bp-color-surface);\n    color: var(--bp-color-text);\n  }\n\n  .avatar__image {\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n    display: block;\n  }\n\n  .avatar__initials {\n    text-transform: uppercase;\n    line-height: 1;\n    letter-spacing: 0.02em;\n  }\n\n  .avatar__fallback {\n    opacity: 0.8;\n  }\n\n  /* Shapes */\n  .avatar--circle {\n    border-radius: var(--bp-border-radius-full);\n  }\n\n  .avatar--square {\n    border-radius: var(--bp-border-radius-sm);\n  }\n\n  /* Sizes */\n  .avatar--xs {\n    width: var(--bp-spacing-6);\n    height: var(--bp-spacing-6);\n  }\n\n  .avatar--xs .avatar__initials {\n    font-size: var(--bp-font-size-xs);\n  }\n\n  .avatar--sm {\n    width: var(--bp-spacing-8);\n    height: var(--bp-spacing-8);\n  }\n\n  .avatar--sm .avatar__initials {\n    font-size: var(--bp-font-size-sm);\n  }\n\n  .avatar--md {\n    width: var(--bp-spacing-10);\n    height: var(--bp-spacing-10);\n  }\n\n  .avatar--md .avatar__initials {\n    font-size: var(--bp-font-size-base);\n  }\n\n  .avatar--lg {\n    width: var(--bp-spacing-12);\n    height: var(--bp-spacing-12);\n  }\n\n  .avatar--lg .avatar__initials {\n    font-size: var(--bp-font-size-lg);\n  }\n\n  .avatar--xl {\n    width: var(--bp-spacing-16);\n    height: var(--bp-spacing-16);\n  }\n\n  .avatar--xl .avatar__initials {\n    font-size: var(--bp-font-size-2xl);\n  }\n\n  /* States - Interactive */\n  :host([clickable]) .avatar {\n    cursor: pointer;\n    transition:\n      transform var(--bp-duration-fast),\n      box-shadow var(--bp-duration-fast);\n  }\n\n  :host([clickable]) .avatar:hover {\n    transform: translateY(calc(-1 * var(--bp-spacing-0-5)));\n    box-shadow: var(--bp-shadow-md);\n  }\n\n  :host([clickable]:focus-within) .avatar {\n    outline: var(--bp-focus-width) solid var(--bp-color-focus);\n    outline-offset: var(--bp-focus-offset);\n  }\n\n  /* Status indicator */\n  .avatar__status {\n    position: absolute;\n    bottom: 0;\n    right: 0;\n    width: 25%;\n    height: 25%;\n    min-width: var(--bp-spacing-2);\n    min-height: var(--bp-spacing-2);\n    border-radius: var(--bp-border-radius-full);\n    border: var(--bp-focus-width) solid var(--bp-color-surface-elevated);\n  }\n\n  .avatar__status--online {\n    background: var(--bp-color-success);\n  }\n\n  .avatar__status--offline {\n    background: var(--bp-color-border-strong);\n  }\n\n  .avatar__status--busy {\n    background: var(--bp-color-error);\n  }\n\n  .avatar__status--away {\n    background: var(--bp-color-warning);\n  }\n`;\n","import { LitElement, html } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { avatarStyles } from './avatar.style.js';\nimport { usersSvg } from '../icon/icons/entries/users.js';\nimport '../icon/icon.js';\n\nexport type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';\nexport type AvatarShape = 'circle' | 'square';\nexport type AvatarStatus = 'online' | 'offline' | 'busy' | 'away';\n\n/**\n * An avatar component that displays user profile images with fallback to initials.\n * Supports multiple sizes, shapes, status indicators, and interactive states.\n */\n@customElement('bp-avatar')\nexport class BpAvatar extends LitElement {\n  /**\n   * Image source URL for the avatar.\n   * @type {string}\n   * @default ''\n   */\n  @property({ type: String, reflect: true }) declare src: string;\n\n  /**\n   * Alt text for the avatar image (accessibility).\n   * @type {string}\n   * @default ''\n   */\n  @property({ type: String, reflect: true }) declare alt: string;\n\n  /**\n   * Initials to display when no image is provided.\n   * @type {string}\n   * @default ''\n   */\n  @property({ type: String, reflect: true }) declare initials: string;\n\n  /**\n   * Size of the avatar.\n   * @type {'xs' | 'sm' | 'md' | 'lg' | 'xl'}\n   * @default 'md'\n   */\n  @property({ type: String, reflect: true }) declare size: AvatarSize;\n\n  /**\n   * Shape of the avatar.\n   * @type {'circle' | 'square'}\n   * @default 'circle'\n   */\n  @property({ type: String, reflect: true }) declare shape: AvatarShape;\n\n  /**\n   * Status indicator for the avatar.\n   * @type {'online' | 'offline' | 'busy' | 'away' | undefined}\n   * @default undefined\n   */\n  @property({ type: String, reflect: true }) declare status?: AvatarStatus;\n\n  /**\n   * Makes the avatar interactive with hover/focus states.\n   * @type {boolean}\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true }) declare clickable: boolean;\n\n  /**\n   * Name for tooltip display on hover.\n   * @type {string}\n   * @default ''\n   */\n  @property({ type: String }) declare name: string;\n\n  /**\n   * Internal state to track if image failed to load.\n   * @private\n   */\n  @state() private imageError = false;\n\n  static styles = [avatarStyles];\n\n  constructor() {\n    super();\n    this.src = '';\n    this.alt = '';\n    this.initials = '';\n    this.size = 'md';\n    this.shape = 'circle';\n    this.clickable = false;\n    this.name = '';\n  }\n\n  private handleImageError() {\n    // Track image error state to show fallback\n    this.imageError = true;\n  }\n\n  render() {\n    const hasImage = this.src.length > 0 && !this.imageError;\n    const hasInitials = this.initials.length > 0;\n    const titleText = this.name || this.alt;\n\n    return html`\n      <div\n        class=\"avatar avatar--${this.size} avatar--${this.shape}\"\n        part=\"avatar\"\n        title=\"${titleText}\"\n      >\n        ${hasImage\n          ? html`\n              <img\n                class=\"avatar__image\"\n                src=\"${this.src}\"\n                alt=\"${this.alt}\"\n                @error=\"${this.handleImageError}\"\n                part=\"image\"\n              />\n            `\n          : hasInitials\n            ? html`<span\n                class=\"avatar__initials\"\n                part=\"initials\"\n                role=\"img\"\n                aria-label=\"${this.alt || 'User avatar'}\"\n                >${this.initials}</span\n              >`\n            : html`<bp-icon\n                class=\"avatar__fallback\"\n                .svg=${usersSvg}\n                size=\"${this.size === 'xs'\n                  ? 'xs'\n                  : this.size === 'xl'\n                    ? 'lg'\n                    : this.size}\"\n                part=\"fallback\"\n                aria-label=\"User avatar\"\n              ></bp-icon>`}\n        ${this.status\n          ? html`<span\n              class=\"avatar__status avatar__status--${this.status}\"\n              part=\"status\"\n              aria-label=\"${this.status}\"\n            ></span>`\n          : ''}\n      </div>\n    `;\n  }\n\n  updated(changedProperties: Map<string, unknown>) {\n    // Reset image error state when src changes\n    if (changedProperties.has('src')) {\n      this.imageError = false;\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'bp-avatar': BpAvatar;\n  }\n}\n"],"names":["avatarStyles","css","BpAvatar","LitElement","hasImage","hasInitials","titleText","html","usersSvg","changedProperties","__decorateClass","property","state","customElement"],"mappings":"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"}
+{"version":3,"file":"avatar.js","sources":["../../source/components/avatar/avatar.style.ts","../../source/components/avatar/avatar.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const avatarStyles = css`\n  /* Base styles */\n  :host {\n    display: inline-flex;\n    position: relative;\n  }\n\n  .avatar {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    overflow: hidden;\n    background: var(--bp-color-primary);\n    color: var(--bp-color-text-inverse);\n    font-family: var(--bp-font-family);\n    font-weight: var(--bp-font-weight-semibold);\n    user-select: none;\n    flex-shrink: 0;\n    box-shadow: var(--bp-shadow-sm);\n    position: relative;\n  }\n\n  /* Image avatars have different background */\n  .avatar:has(.avatar__image) {\n    background: var(--bp-color-surface);\n    color: var(--bp-color-text);\n  }\n\n  .avatar__image {\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n    display: block;\n  }\n\n  .avatar__initials {\n    text-transform: uppercase;\n    line-height: 1;\n    letter-spacing: 0.02em;\n  }\n\n  .avatar__fallback {\n    opacity: 0.8;\n  }\n\n  /* Shapes */\n  .avatar--circle {\n    border-radius: var(--bp-border-radius-full);\n  }\n\n  .avatar--square {\n    border-radius: var(--bp-border-radius-sm);\n  }\n\n  /* Sizes */\n  .avatar--xs {\n    width: var(--bp-spacing-6);\n    height: var(--bp-spacing-6);\n  }\n\n  .avatar--xs .avatar__initials {\n    font-size: var(--bp-font-size-xs);\n  }\n\n  .avatar--sm {\n    width: var(--bp-spacing-8);\n    height: var(--bp-spacing-8);\n  }\n\n  .avatar--sm .avatar__initials {\n    font-size: var(--bp-font-size-sm);\n  }\n\n  .avatar--md {\n    width: var(--bp-spacing-10);\n    height: var(--bp-spacing-10);\n  }\n\n  .avatar--md .avatar__initials {\n    font-size: var(--bp-font-size-base);\n  }\n\n  .avatar--lg {\n    width: var(--bp-spacing-12);\n    height: var(--bp-spacing-12);\n  }\n\n  .avatar--lg .avatar__initials {\n    font-size: var(--bp-font-size-lg);\n  }\n\n  .avatar--xl {\n    width: var(--bp-spacing-16);\n    height: var(--bp-spacing-16);\n  }\n\n  .avatar--xl .avatar__initials {\n    font-size: var(--bp-font-size-2xl);\n  }\n\n  /* States - Interactive */\n  :host([clickable]) .avatar {\n    cursor: pointer;\n    transition:\n      transform var(--bp-duration-fast),\n      box-shadow var(--bp-duration-fast);\n  }\n\n  :host([clickable]) .avatar:hover {\n    transform: translateY(calc(-1 * var(--bp-spacing-0-5)));\n    box-shadow: var(--bp-shadow-md);\n  }\n\n  :host([clickable]:focus-within) .avatar {\n    outline: var(--bp-focus-width) solid var(--bp-color-focus);\n    outline-offset: var(--bp-focus-offset);\n  }\n\n  /* Status indicator */\n  .avatar__status {\n    position: absolute;\n    bottom: 0;\n    right: 0;\n    width: 25%;\n    height: 25%;\n    min-width: var(--bp-spacing-2);\n    min-height: var(--bp-spacing-2);\n    border-radius: var(--bp-border-radius-full);\n    border: var(--bp-focus-width) solid var(--bp-color-surface-elevated);\n  }\n\n  .avatar__status--online {\n    background: var(--bp-color-success);\n  }\n\n  .avatar__status--offline {\n    background: var(--bp-color-border-strong);\n  }\n\n  .avatar__status--busy {\n    background: var(--bp-color-error);\n  }\n\n  .avatar__status--away {\n    background: var(--bp-color-warning);\n  }\n`;\n","import { LitElement, html } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { avatarStyles } from './avatar.style.js';\nimport { usersSvg } from '../icon/icons/entries/users.js';\nimport { BpIcon } from '../icon/icon.js';\n\nexport type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';\nexport type AvatarShape = 'circle' | 'square';\nexport type AvatarStatus = 'online' | 'offline' | 'busy' | 'away';\n\n/**\n * An avatar component that displays user profile images with fallback to initials.\n * Supports multiple sizes, shapes, status indicators, and interactive states.\n */\n@customElement('bp-avatar')\nexport class BpAvatar extends LitElement {\n  /**\n   * Child components that self-register as custom elements on import.\n   * Value imports prevent bundler tree-shaking of the registration side effect.\n   */\n  static dependencies = [BpIcon];\n\n  /**\n   * Image source URL for the avatar.\n   * @type {string}\n   * @default ''\n   */\n  @property({ type: String, reflect: true }) declare src: string;\n\n  /**\n   * Alt text for the avatar image (accessibility).\n   * @type {string}\n   * @default ''\n   */\n  @property({ type: String, reflect: true }) declare alt: string;\n\n  /**\n   * Initials to display when no image is provided.\n   * @type {string}\n   * @default ''\n   */\n  @property({ type: String, reflect: true }) declare initials: string;\n\n  /**\n   * Size of the avatar.\n   * @type {'xs' | 'sm' | 'md' | 'lg' | 'xl'}\n   * @default 'md'\n   */\n  @property({ type: String, reflect: true }) declare size: AvatarSize;\n\n  /**\n   * Shape of the avatar.\n   * @type {'circle' | 'square'}\n   * @default 'circle'\n   */\n  @property({ type: String, reflect: true }) declare shape: AvatarShape;\n\n  /**\n   * Status indicator for the avatar.\n   * @type {'online' | 'offline' | 'busy' | 'away' | undefined}\n   * @default undefined\n   */\n  @property({ type: String, reflect: true }) declare status?: AvatarStatus;\n\n  /**\n   * Makes the avatar interactive with hover/focus states.\n   * @type {boolean}\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true }) declare clickable: boolean;\n\n  /**\n   * Name for tooltip display on hover.\n   * @type {string}\n   * @default ''\n   */\n  @property({ type: String }) declare name: string;\n\n  /**\n   * Internal state to track if image failed to load.\n   * @private\n   */\n  @state() private imageError = false;\n\n  static styles = [avatarStyles];\n\n  constructor() {\n    super();\n    this.src = '';\n    this.alt = '';\n    this.initials = '';\n    this.size = 'md';\n    this.shape = 'circle';\n    this.clickable = false;\n    this.name = '';\n  }\n\n  private handleImageError() {\n    // Track image error state to show fallback\n    this.imageError = true;\n  }\n\n  render() {\n    const hasImage = this.src.length > 0 && !this.imageError;\n    const hasInitials = this.initials.length > 0;\n    const titleText = this.name || this.alt;\n\n    return html`\n      <div\n        class=\"avatar avatar--${this.size} avatar--${this.shape}\"\n        part=\"avatar\"\n        title=\"${titleText}\"\n      >\n        ${hasImage\n          ? html`\n              <img\n                class=\"avatar__image\"\n                src=\"${this.src}\"\n                alt=\"${this.alt}\"\n                @error=\"${this.handleImageError}\"\n                part=\"image\"\n              />\n            `\n          : hasInitials\n            ? html`<span\n                class=\"avatar__initials\"\n                part=\"initials\"\n                role=\"img\"\n                aria-label=\"${this.alt || 'User avatar'}\"\n                >${this.initials}</span\n              >`\n            : html`<bp-icon\n                class=\"avatar__fallback\"\n                .svg=${usersSvg}\n                size=\"${this.size === 'xs'\n                  ? 'xs'\n                  : this.size === 'xl'\n                    ? 'lg'\n                    : this.size}\"\n                part=\"fallback\"\n                aria-label=\"User avatar\"\n              ></bp-icon>`}\n        ${this.status\n          ? html`<span\n              class=\"avatar__status avatar__status--${this.status}\"\n              part=\"status\"\n              aria-label=\"${this.status}\"\n            ></span>`\n          : ''}\n      </div>\n    `;\n  }\n\n  updated(changedProperties: Map<string, unknown>) {\n    // Reset image error state when src changes\n    if (changedProperties.has('src')) {\n      this.imageError = false;\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'bp-avatar': BpAvatar;\n  }\n}\n"],"names":["avatarStyles","css","BpAvatar","LitElement","hasImage","hasInitials","titleText","html","usersSvg","changedProperties","BpIcon","__decorateClass","property","state","customElement"],"mappings":"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"}

package/dist/components/breadcrumb/breadcrumb.d.ts

@@ -1,6 +1,6 @@
 import { LitElement } from 'lit';
 import type { IconName } from '../icon/icons/icon-name.generated.js';
-import '../icon/icon.js';
+import { BpIcon } from '../icon/icon.js';
 export type BreadcrumbSize = 'sm' | 'md' | 'lg';
 export type BreadcrumbSeparator = 'slash' | 'chevron' | 'arrow' | 'dot';
 /**
@@ -42,6 +42,11 @@ export interface BreadcrumbItem {
  * @csspart ellipsis - The ellipsis button when items are collapsed
  */
 export declare class BpBreadcrumb extends LitElement {
+    /**
+     * Child components that self-register as custom elements on import.
+     * Value imports prevent bundler tree-shaking of the registration side effect.
+     */
+    static dependencies: (typeof BpIcon)[];
     /**
      * Array of breadcrumb items
      */

package/dist/components/breadcrumb/breadcrumb.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"breadcrumb.d.ts","sourceRoot":"","sources":["../../../source/components/breadcrumb/breadcrumb.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAiB,MAAM,KAAK,CAAC;AAMhD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,sCAAsC,CAAC;AACrE,OAAO,iBAAiB,CAAC;AAEzB,MAAM,MAAM,cAAc,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAChD,MAAM,MAAM,mBAAmB,GAAG,OAAO,GAAG,SAAS,GAAG,OAAO,GAAG,KAAK,CAAC;AAExE;;GAEG;AACH,MAAM,WAAW,cAAc;IAC7B,4CAA4C;IAC5C,KAAK,EAAE,MAAM,CAAC;IACd,0DAA0D;IAC1D,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,4CAA4C;IAC5C,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,8CAA8C;IAC9C,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,qBACa,YAAa,SAAQ,UAAU;IAC1C;;OAEG;IACgC,KAAK,EAAE,cAAc,EAAE,CAAC;IAE3D;;OAEG;IACgD,IAAI,EAAE,cAAc,CAAC;IAExE;;OAEG;IAEK,SAAS,EAAE,mBAAmB,CAAC;IAEvC;;OAEG;IAEK,SAAS,EAAE,MAAM,CAAC;IAE1B;;OAEG;IAEK,gBAAgB,EAAE,OAAO,CAAC;IAElC;;OAEG;IACyD,QAAQ,EAAE,MAAM,CAAC;IAE7E,MAAM,CAAC,MAAM,4BAAsB;;IAYnC,OAAO,CAAC,eAAe;IAevB,OAAO,CAAC,aAAa;IAmBrB,OAAO,CAAC,eAAe;IAmCvB,OAAO,CAAC,UAAU;IAoDlB,OAAO,CAAC,cAAc;IAgBtB,OAAO,CAAC,eAAe;IAqBvB,MAAM;CAkEP;AAED;;;;;;;;;;;;GAYG;AACH,qBACa,gBAAiB,SAAQ,UAAU;IAC9C;;OAEG;IACiC,IAAI,EAAE,MAAM,CAAC;IAEjD;;OAEG;IACiD,OAAO,EAAE,OAAO,CAAC;IAErE,MAAM,CAAC,MAAM,4BAAsB;;IAQnC,MAAM;CA8BP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,YAAY,CAAC;QAC9B,oBAAoB,EAAE,gBAAgB,CAAC;KACxC;CACF"}
+{"version":3,"file":"breadcrumb.d.ts","sourceRoot":"","sources":["../../../source/components/breadcrumb/breadcrumb.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAiB,MAAM,KAAK,CAAC;AAMhD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,sCAAsC,CAAC;AACrE,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AAEzC,MAAM,MAAM,cAAc,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAChD,MAAM,MAAM,mBAAmB,GAAG,OAAO,GAAG,SAAS,GAAG,OAAO,GAAG,KAAK,CAAC;AAExE;;GAEG;AACH,MAAM,WAAW,cAAc;IAC7B,4CAA4C;IAC5C,KAAK,EAAE,MAAM,CAAC;IACd,0DAA0D;IAC1D,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,4CAA4C;IAC5C,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,8CAA8C;IAC9C,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,qBACa,YAAa,SAAQ,UAAU;IAC1C;;;OAGG;IACH,MAAM,CAAC,YAAY,oBAAY;IAE/B;;OAEG;IACgC,KAAK,EAAE,cAAc,EAAE,CAAC;IAE3D;;OAEG;IACgD,IAAI,EAAE,cAAc,CAAC;IAExE;;OAEG;IAEK,SAAS,EAAE,mBAAmB,CAAC;IAEvC;;OAEG;IAEK,SAAS,EAAE,MAAM,CAAC;IAE1B;;OAEG;IAEK,gBAAgB,EAAE,OAAO,CAAC;IAElC;;OAEG;IACyD,QAAQ,EAAE,MAAM,CAAC;IAE7E,MAAM,CAAC,MAAM,4BAAsB;;IAYnC,OAAO,CAAC,eAAe;IAevB,OAAO,CAAC,aAAa;IAmBrB,OAAO,CAAC,eAAe;IAmCvB,OAAO,CAAC,UAAU;IAoDlB,OAAO,CAAC,cAAc;IAgBtB,OAAO,CAAC,eAAe;IAqBvB,MAAM;CAkEP;AAED;;;;;;;;;;;;GAYG;AACH,qBACa,gBAAiB,SAAQ,UAAU;IAC9C;;OAEG;IACiC,IAAI,EAAE,MAAM,CAAC;IAEjD;;OAEG;IACiD,OAAO,EAAE,OAAO,CAAC;IAErE,MAAM,CAAC,MAAM,4BAAsB;;IAQnC,MAAM;CA8BP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,YAAY,CAAC;QAC9B,oBAAoB,EAAE,gBAAgB,CAAC;KACxC;CACF"}

package/dist/components/breadcrumb.js

@@ -3,6 +3,7 @@ import { property as p, customElement as f } from "lit/decorators.js";
 import { classMap as b } from "lit/directives/class-map.js";
 import { repeat as u } from "lit/directives/repeat.js";
 import { ifDefined as v } from "lit/directives/if-defined.js";
+import { BpIcon as _ } from "./icon.js";
 const g = y`
   /* Base styles */
   :host {
@@ -230,12 +231,12 @@ const g = y`
     /* Reserved for future container query support */
   }
 `;
-var _ = Object.defineProperty, x = Object.getOwnPropertyDescriptor, n = (e, t, a, o) => {
-  for (var i = o > 1 ? void 0 : o ? x(t, a) : t, r = e.length - 1, m; r >= 0; r--)
+var x = Object.defineProperty, z = Object.getOwnPropertyDescriptor, l = (e, t, a, o) => {
+  for (var i = o > 1 ? void 0 : o ? z(t, a) : t, r = e.length - 1, m; r >= 0; r--)
     (m = e[r]) && (i = (o ? m(t, a, i) : m(i)) || i);
-  return o && i && _(t, a, i), i;
+  return o && i && x(t, a, i), i;
 };
-let l = class extends d {
+let n = class extends d {
   constructor() {
     super(), this.items = [], this.size = "md", this.separator = "slash", this.ariaLabel = "Breadcrumb", this.collapseOnMobile = !1, this.maxItems = 0;
   }
@@ -410,28 +411,29 @@ let l = class extends d {
     `;
   }
 };
-l.styles = [g];
-n([
+n.dependencies = [_];
+n.styles = [g];
+l([
   p({ type: Array })
-], l.prototype, "items", 2);
-n([
+], n.prototype, "items", 2);
+l([
   p({ type: String, reflect: !0 })
-], l.prototype, "size", 2);
-n([
+], n.prototype, "size", 2);
+l([
   p({ type: String, reflect: !0 })
-], l.prototype, "separator", 2);
-n([
+], n.prototype, "separator", 2);
+l([
   p({ type: String, attribute: "aria-label" })
-], l.prototype, "ariaLabel", 2);
-n([
+], n.prototype, "ariaLabel", 2);
+l([
   p({ type: Boolean, attribute: "collapse-on-mobile" })
-], l.prototype, "collapseOnMobile", 2);
-n([
+], n.prototype, "collapseOnMobile", 2);
+l([
   p({ type: Number, attribute: "max-items" })
-], l.prototype, "maxItems", 2);
-l = n([
+], n.prototype, "maxItems", 2);
+n = l([
   f("bp-breadcrumb")
-], l);
+], n);
 let c = class extends d {
   constructor() {
     super(), this.href = "", this.current = !1;
@@ -465,17 +467,17 @@ let c = class extends d {
   }
 };
 c.styles = [g];
-n([
+l([
   p({ type: String })
 ], c.prototype, "href", 2);
-n([
+l([
   p({ type: Boolean, reflect: !0 })
 ], c.prototype, "current", 2);
-c = n([
+c = l([
   f("bp-breadcrumb-item")
 ], c);
 export {
-  l as BpBreadcrumb,
+  n as BpBreadcrumb,
   c as BpBreadcrumbItem
 };
 //# sourceMappingURL=breadcrumb.js.map