@krollins/blueprint 0.1.16 → 0.2.0

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

@@ -1,6 +1,5 @@
 import { LitElement } from 'lit';
 import '../icon/icon.js';
-import '../icon/icons/entries/chevron-down.js';
 /**
  * A container component that groups accordion items.
  * Controls single or multiple expansion behavior.

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;AAIvC,OAAO,iBAAiB,CAAC;AACzB,OAAO,uCAAuC,CAAC;AAE/C;;;;;;;;;;;;;;;;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,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"}

package/dist/components/accordion.js

@@ -1,6 +1,7 @@
 import { css as f, LitElement as c, html as m } from "lit";
 import { property as n, 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";
 const u = f`
   /* ===== ACCORDION CONTAINER ===== */
 
@@ -175,10 +176,10 @@ const u = f`
     }
   }
 `;
-var v = Object.defineProperty, y = Object.getOwnPropertyDescriptor, d = (e, t, i, a) => {
-  for (var s = a > 1 ? void 0 : a ? y(t, i) : t, l = e.length - 1, p; l >= 0; l--)
+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--)
     (p = e[l]) && (s = (a ? p(t, i, s) : p(s)) || s);
-  return a && s && v(t, i, s), s;
+  return a && s && y(t, i, s), s;
 };
 let r = class extends c {
   constructor() {
@@ -285,19 +286,19 @@ let r = class extends c {
   }
 };
 r.styles = [u];
-d([
+o([
   n({ type: Boolean, reflect: !0 })
 ], r.prototype, "multiple", 2);
-d([
+o([
   n({ type: Array })
 ], r.prototype, "expandedItems", 2);
-d([
+o([
   n({ type: Boolean, reflect: !0 })
 ], r.prototype, "disabled", 2);
-r = d([
+r = o([
   h("bp-accordion")
 ], r);
-let o = class extends c {
+let d = class extends c {
   constructor() {
     super(), this.itemId = "", this.header = "", this.expanded = !1, this.disabled = !1;
   }
@@ -352,7 +353,7 @@ let o = class extends c {
             <slot name="header">${this.header}</slot>
           </span>
           <span class="item__icon" part="icon" aria-hidden="true">
-            <bp-icon name="chevron-down" size="md"></bp-icon>
+            <bp-icon .svg=${v} size="md"></bp-icon>
           </span>
         </button>
         <div
@@ -370,24 +371,24 @@ let o = class extends c {
     `;
   }
 };
-o.styles = [u];
-d([
+d.styles = [u];
+o([
   n({ type: String, attribute: "item-id", reflect: !0 })
-], o.prototype, "itemId", 2);
-d([
+], d.prototype, "itemId", 2);
+o([
   n({ type: String })
-], o.prototype, "header", 2);
-d([
+], d.prototype, "header", 2);
+o([
   n({ type: Boolean, reflect: !0 })
-], o.prototype, "expanded", 2);
-d([
+], d.prototype, "expanded", 2);
+o([
   n({ type: Boolean, reflect: !0 })
-], o.prototype, "disabled", 2);
-o = d([
+], d.prototype, "disabled", 2);
+d = o([
   h("bp-accordion-item")
-], o);
+], d);
 export {
   r as BpAccordion,
-  o as BpAccordionItem
+  d 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 '../icon/icon.js';\nimport '../icon/icons/entries/chevron-down.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 name=\"chevron-down\" 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"],"mappings":"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"}
+{"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":"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"}

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

@@ -1,10 +1,5 @@
 import { LitElement } from 'lit';
 import '../icon/icon.js';
-import '../icon/icons/entries/info-circle.js';
-import '../icon/icons/entries/check-circle.js';
-import '../icon/icons/entries/warning-circle.js';
-import '../icon/icons/entries/cross-circle.js';
-import '../icon/icons/entries/cross.js';
 export type AlertVariant = 'info' | 'success' | 'warning' | 'error';
 /**
  * An alert component for displaying notification messages to users.
@@ -31,7 +26,7 @@ export declare class BpAlert extends LitElement {
     static styles: import("lit").CSSResult[];
     constructor();
     private handleClose;
-    private getIconName;
+    private getVariantIconSvg;
     render(): import("lit-html").TemplateResult<1>;
 }
 declare global {

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;AAIvC,OAAO,iBAAiB,CAAC;AACzB,OAAO,sCAAsC,CAAC;AAC9C,OAAO,uCAAuC,CAAC;AAC/C,OAAO,yCAAyC,CAAC;AACjD,OAAO,uCAAuC,CAAC;AAC/C,OAAO,gCAAgC,CAAC;AAExC,MAAM,MAAM,YAAY,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;AAQpE;;;;;;;;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,WAAW;IAUnB,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,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"}

package/dist/components/alert.js

@@ -1,6 +1,11 @@
 import { css as b, LitElement as d, html as c } from "lit";
 import { property as p, customElement as v } from "lit/decorators.js";
-const f = b`
+import { infoCircleSvg as f } from "../icons/info-circle.js";
+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`
   /* Base styles */
   :host {
     display: block;
@@ -130,17 +135,23 @@ const f = b`
     box-shadow: var(--bp-shadow-sm);
   }
 `;
-var g = Object.defineProperty, h = Object.getOwnPropertyDescriptor, s = (e, a, i, o) => {
-  for (var r = o > 1 ? void 0 : o ? h(a, i) : a, l = e.length - 1, n; l >= 0; l--)
-    (n = e[l]) && (r = (o ? n(a, i, r) : n(r)) || r);
-  return o && r && g(a, i, r), r;
+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--)
+    (n = t[l]) && (r = (a ? n(o, i, r) : n(r)) || r);
+  return a && r && w(o, i, r), r;
 };
-let t = class extends d {
+const C = {
+  info: f,
+  success: g,
+  warning: m,
+  error: h
+};
+let e = class extends d {
   constructor() {
     super(), this.variant = "info", this.dismissible = !1, this.showIcon = !1;
   }
   handleClose() {
-    const e = new CustomEvent("bp-close", {
+    const t = new CustomEvent("bp-close", {
       detail: {
         variant: this.variant,
         timestamp: Date.now()
@@ -149,15 +160,10 @@ let t = class extends d {
       composed: !0,
       cancelable: !0
     });
-    this.dispatchEvent(e), e.defaultPrevented || this.remove();
+    this.dispatchEvent(t), t.defaultPrevented || this.remove();
   }
-  getIconName() {
-    return {
-      info: "info-circle",
-      success: "check-circle",
-      warning: "warning-circle",
-      error: "cross-circle"
-    }[this.variant];
+  getVariantIconSvg() {
+    return C[this.variant];
   }
   render() {
     return c`
@@ -171,7 +177,7 @@ let t = class extends d {
           ${this.showIcon ? c`
                 <div class="alert-icon" part="icon">
                   <slot name="icon">
-                    <bp-icon name=${this.getIconName()}></bp-icon>
+                    <bp-icon .svg=${this.getVariantIconSvg()}></bp-icon>
                   </slot>
                 </div>
               ` : null}
@@ -187,27 +193,27 @@ let t = class extends d {
                 @click=${this.handleClose}
                 aria-label="Close alert"
               >
-                <bp-icon name="cross"></bp-icon>
+                <bp-icon .svg=${u}></bp-icon>
               </button>
             ` : null}
       </div>
     `;
   }
 };
-t.styles = [f];
+e.styles = [y];
 s([
   p({ type: String, reflect: !0 })
-], t.prototype, "variant", 2);
+], e.prototype, "variant", 2);
 s([
   p({ type: Boolean, reflect: !0 })
-], t.prototype, "dismissible", 2);
+], e.prototype, "dismissible", 2);
 s([
   p({ type: Boolean, reflect: !0 })
-], t.prototype, "showIcon", 2);
-t = s([
+], e.prototype, "showIcon", 2);
+e = s([
   v("bp-alert")
-], t);
+], e);
 export {
-  t as BpAlert
+  e as BpAlert
 };
 //# sourceMappingURL=alert.js.map

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 type { IconName } from '../icon/icons/icon-name.generated.js';\nimport '../icon/icon.js';\nimport '../icon/icons/entries/info-circle.js';\nimport '../icon/icons/entries/check-circle.js';\nimport '../icon/icons/entries/warning-circle.js';\nimport '../icon/icons/entries/cross-circle.js';\nimport '../icon/icons/entries/cross.js';\n\nexport type AlertVariant = 'info' | 'success' | 'warning' | 'error';\ninterface IconMap {\n  info: IconName;\n  success: IconName;\n  warning: IconName;\n  error: IconName;\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 getIconName(): IconName {\n    const iconMap: IconMap = {\n      info: 'info-circle',\n      success: 'check-circle',\n      warning: 'warning-circle',\n      error: 'cross-circle',\n    };\n    return iconMap[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 name=${this.getIconName()}></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 name=\"cross\"></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","BpAlert","LitElement","event","html","__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;;;;;;AC2BpB,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,cAAwB;AAO9B,WANyB;AAAA,MACvB,MAAM;AAAA,MACN,SAAS;AAAA,MACT,SAAS;AAAA,MACT,OAAO;AAAA,IAAA,EAEM,KAAK,OAAO;AAAA,EAC7B;AAAA,EAEA,SAAS;AACP,WAAOC;AAAA;AAAA,8BAEmB,KAAK,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAM9B,KAAK,WACHA;AAAA;AAAA;AAAA,oCAGsB,KAAK,aAAa;AAAA;AAAA;AAAA,kBAIxC,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAMR,KAAK,cACHA;AAAA;AAAA;AAAA;AAAA,yBAIa,KAAK,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA,gBAM7B,IAAI;AAAA;AAAA;AAAA,EAGd;AACF;AA5FaH,EAgBJ,SAAS,CAACF,CAAW;AAZuBM,EAAA;AAAA,EAAlDC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAJ9BL,EAIwC,WAAA,WAAA,CAAA;AAKCI,EAAA;AAAA,EAAnDC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAT/BL,EASyC,WAAA,eAAA,CAAA;AAKAI,EAAA;AAAA,EAAnDC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAd/BL,EAcyC,WAAA,YAAA,CAAA;AAdzCA,IAANI,EAAA;AAAA,EADNE,EAAc,UAAU;AAAA,GACZN,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 '../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;"}

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

@@ -1,6 +1,5 @@
 import { LitElement } from 'lit';
 import '../icon/icon.js';
-import '../icon/icons/entries/users.js';
 export type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 export type AvatarShape = 'circle' | 'square';
 export type AvatarStatus = 'online' | 'offline' | 'busy' | 'away';

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;AAGvC,OAAO,iBAAiB,CAAC;AACzB,OAAO,gCAAgC,CAAC;AAExC,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,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"}

package/dist/components/avatar.js

@@ -1,6 +1,7 @@
-import { css as v, LitElement as h, html as l } from "lit";
+import { css as c, LitElement as h, html as l } from "lit";
 import { property as r, state as b, customElement as f } from "lit/decorators.js";
-const g = v`
+import { usersSvg as g } from "../icons/users.js";
+const u = c`
   /* Base styles */
   :host {
     display: inline-flex;
@@ -147,10 +148,10 @@ const g = v`
     background: var(--bp-color-warning);
   }
 `;
-var u = Object.defineProperty, d = Object.getOwnPropertyDescriptor, t = (i, e, o, n) => {
-  for (var s = n > 1 ? void 0 : n ? d(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 && u(e, o, s), s;
+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;
 };
 let a = class extends h {
   constructor() {
@@ -183,7 +184,7 @@ let a = class extends h {
                 >${this.initials}</span
               >` : l`<bp-icon
                 class="avatar__fallback"
-                name="users"
+                .svg=${g}
                 size="${this.size === "xs" ? "xs" : this.size === "xl" ? "lg" : this.size}"
                 part="fallback"
                 aria-label="User avatar"
@@ -200,7 +201,7 @@ let a = class extends h {
     i.has("src") && (this.imageError = !1);
   }
 };
-a.styles = [g];
+a.styles = [u];
 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 '../icon/icon.js';\nimport '../icon/icons/entries/users.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                name=\"users\"\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","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 '../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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"}

package/dist/components/drawer/drawer.d.ts

@@ -1,6 +1,5 @@
 import { LitElement } from 'lit';
 import '../icon/icon.js';
-import '../icon/icons/entries/close.js';
 export type DrawerPlacement = 'left' | 'right' | 'top' | 'bottom';
 export type DrawerSize = 'sm' | 'md' | 'lg' | 'full';
 /**

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

@@ -1 +1 @@
-{"version":3,"file":"drawer.d.ts","sourceRoot":"","sources":["../../../source/components/drawer/drawer.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAiB,MAAM,KAAK,CAAC;AAIhD,OAAO,iBAAiB,CAAC;AACzB,OAAO,gCAAgC,CAAC;AAExC,MAAM,MAAM,eAAe,GAAG,MAAM,GAAG,OAAO,GAAG,KAAK,GAAG,QAAQ,CAAC;AAClE,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAC;AAErD;;;;;;;;;;;;;;;;;;;GAmBG;AACH,qBACa,QAAS,SAAQ,UAAU;IACtC,iCAAiC;IACmB,IAAI,EAAE,OAAO,CAAC;IAElE,2CAA2C;IAanC,SAAS,EAAE,eAAe,CAAC;IAEnC,uEAAuE;IAW/D,IAAI,EAAE,UAAU,CAAC;IAEzB,uCAAuC;IAM/B,SAAS,EAAE,OAAO,CAAC;IAE3B,sDAAsD;IAM9C,eAAe,EAAE,OAAO,CAAC;IAEjC,gDAAgD;IAMxC,aAAa,EAAE,OAAO,CAAC;IAE/B,2CAA2C;IAMnC,YAAY,EAAE,OAAO,CAAC;IAE9B,sCAAsC;IACF,KAAK,EAAE,MAAM,CAAC;IAElD;;;OAGG;IACiD,MAAM,EAAE,OAAO,CAAC;IAEpE,mDAAmD;IACJ,OAAO,CAAC,SAAS,CAAS;IAEzE,mDAAmD;IACJ,OAAO,CAAC,SAAS,CAAS;IAEzE,OAAO,CAAC,wBAAwB,CAA4B;IAE5D,MAAM,CAAC,MAAM,4BAAkB;;IAe/B,iBAAiB,IAAI,IAAI;IAKzB,oBAAoB,IAAI,IAAI;IAK5B;;;;;;OAMG;IACH,IAAI,IAAI,IAAI;IAKZ;;;;;;;OAOG;IACH,IAAI,CAAC,MAAM,GAAE,QAAQ,GAAG,UAAU,GAAG,cAAc,GAAG,KAAa,GAAG,IAAI;IAiB1E;;;OAGG;IACH,MAAM,IAAI,IAAI;IAQd,SAAS,CAAC,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAUhE,OAAO,CAAC,UAAU;IA8BlB,OAAO,CAAC,WAAW;IAsBnB,OAAO,CAAC,aAAa,CAUnB;IAEF;;;OAGG;IACH,OAAO,CAAC,mBAAmB,CAIzB;IAEF;;;OAGG;IACH,OAAO,CAAC,gBAAgB,CAEtB;IAEF;;;;;OAKG;IACH,OAAO,CAAC,sBAAsB,CAK5B;IAEF;;;;;OAKG;IACH,OAAO,CAAC,sBAAsB,CAK5B;IAEF,MAAM;CAwHP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}
+{"version":3,"file":"drawer.d.ts","sourceRoot":"","sources":["../../../source/components/drawer/drawer.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAiB,MAAM,KAAK,CAAC;AAKhD,OAAO,iBAAiB,CAAC;AAEzB,MAAM,MAAM,eAAe,GAAG,MAAM,GAAG,OAAO,GAAG,KAAK,GAAG,QAAQ,CAAC;AAClE,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAC;AAErD;;;;;;;;;;;;;;;;;;;GAmBG;AACH,qBACa,QAAS,SAAQ,UAAU;IACtC,iCAAiC;IACmB,IAAI,EAAE,OAAO,CAAC;IAElE,2CAA2C;IAanC,SAAS,EAAE,eAAe,CAAC;IAEnC,uEAAuE;IAW/D,IAAI,EAAE,UAAU,CAAC;IAEzB,uCAAuC;IAM/B,SAAS,EAAE,OAAO,CAAC;IAE3B,sDAAsD;IAM9C,eAAe,EAAE,OAAO,CAAC;IAEjC,gDAAgD;IAMxC,aAAa,EAAE,OAAO,CAAC;IAE/B,2CAA2C;IAMnC,YAAY,EAAE,OAAO,CAAC;IAE9B,sCAAsC;IACF,KAAK,EAAE,MAAM,CAAC;IAElD;;;OAGG;IACiD,MAAM,EAAE,OAAO,CAAC;IAEpE,mDAAmD;IACJ,OAAO,CAAC,SAAS,CAAS;IAEzE,mDAAmD;IACJ,OAAO,CAAC,SAAS,CAAS;IAEzE,OAAO,CAAC,wBAAwB,CAA4B;IAE5D,MAAM,CAAC,MAAM,4BAAkB;;IAe/B,iBAAiB,IAAI,IAAI;IAKzB,oBAAoB,IAAI,IAAI;IAK5B;;;;;;OAMG;IACH,IAAI,IAAI,IAAI;IAKZ;;;;;;;OAOG;IACH,IAAI,CAAC,MAAM,GAAE,QAAQ,GAAG,UAAU,GAAG,cAAc,GAAG,KAAa,GAAG,IAAI;IAiB1E;;;OAGG;IACH,MAAM,IAAI,IAAI;IAQd,SAAS,CAAC,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAUhE,OAAO,CAAC,UAAU;IA8BlB,OAAO,CAAC,WAAW;IAsBnB,OAAO,CAAC,aAAa,CAUnB;IAEF;;;OAGG;IACH,OAAO,CAAC,mBAAmB,CAIzB;IAEF;;;OAGG;IACH,OAAO,CAAC,gBAAgB,CAEtB;IAEF;;;;;OAKG;IACH,OAAO,CAAC,sBAAsB,CAK5B;IAEF;;;;;OAKG;IACH,OAAO,CAAC,sBAAsB,CAK5B;IAEF,MAAM;CAwHP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}

package/dist/components/drawer.js

@@ -1,7 +1,8 @@
 import { css as b, LitElement as u, nothing as l, html as n } from "lit";
 import { property as a, customElement as f } from "lit/decorators.js";
 import { b as d } from "../shared/boolean-converter-XDGfS9LC.js";
-const w = b`
+import { closeSvg as w } from "../icons/close.js";
+const v = b`
   /* Base styles */
   :host {
     display: contents;
@@ -310,10 +311,10 @@ const w = b`
     }
   }
 `;
-var v = Object.defineProperty, m = Object.getOwnPropertyDescriptor, o = (e, t, p, i) => {
-  for (var s = i > 1 ? void 0 : i ? m(t, p) : t, c = e.length - 1, h; c >= 0; c--)
+var m = Object.defineProperty, g = Object.getOwnPropertyDescriptor, o = (e, t, p, i) => {
+  for (var s = i > 1 ? void 0 : i ? g(t, p) : t, c = e.length - 1, h; c >= 0; c--)
     (h = e[c]) && (s = (i ? h(t, p, s) : h(s)) || s);
-  return i && s && v(t, p, s), s;
+  return i && s && m(t, p, s), s;
 };
 let r = class extends u {
   constructor() {
@@ -474,7 +475,7 @@ let r = class extends u {
                     aria-label="Close drawer"
                     @click=${this.handleCloseClick}
                   >
-                    <bp-icon name="close" size="sm"></bp-icon>
+                    <bp-icon .svg=${w} size="sm"></bp-icon>
                   </button>
                 ` : l}
           </header>
@@ -497,7 +498,7 @@ let r = class extends u {
     `;
   }
 };
-r.styles = [w];
+r.styles = [v];
 o([
   a({ type: Boolean, reflect: !0 })
 ], r.prototype, "open", 2);