@krollins/blueprint 0.2.2 → 0.2.3

package/dist/components/breadcrumb.js.map

@@ -1 +1 @@
-{"version":3,"file":"breadcrumb.js","sources":["../../source/components/breadcrumb/breadcrumb.style.ts","../../source/components/breadcrumb/breadcrumb.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const breadcrumbStyles = css`\n  /* Base styles */\n  :host {\n    display: block;\n  }\n\n  /* Separator variants - set custom properties on host to cross shadow boundaries */\n  :host([separator='slash']) {\n    --bp-breadcrumb-separator-content: '/';\n  }\n\n  :host([separator='chevron']) {\n    --bp-breadcrumb-separator-content: '›';\n    --bp-breadcrumb-separator-size: 1.2em;\n  }\n\n  :host([separator='arrow']) {\n    --bp-breadcrumb-separator-content: '→';\n  }\n\n  :host([separator='dot']) {\n    --bp-breadcrumb-separator-content: '•';\n    --bp-breadcrumb-separator-size: var(--bp-font-size-lg);\n  }\n\n  /* Size variants - set custom properties on host to cross shadow boundaries */\n  :host([size='sm']) {\n    --bp-breadcrumb-font-size: var(--bp-font-size-sm);\n    --bp-breadcrumb-line-height: var(--bp-line-height-tight);\n  }\n\n  :host([size='md']) {\n    --bp-breadcrumb-font-size: var(--bp-font-size-base);\n    --bp-breadcrumb-line-height: var(--bp-line-height-normal);\n  }\n\n  :host([size='lg']) {\n    --bp-breadcrumb-font-size: var(--bp-font-size-lg);\n    --bp-breadcrumb-line-height: var(--bp-line-height-normal);\n  }\n\n  .breadcrumb {\n    font-family: var(--bp-font-family);\n  }\n\n  .list {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    list-style: none;\n    margin: 0;\n    padding: 0;\n    gap: 0;\n  }\n\n  .item {\n    display: inline-flex;\n    align-items: center;\n    gap: 0;\n    font-size: var(--bp-breadcrumb-font-size, var(--bp-font-size-base));\n    line-height: var(--bp-breadcrumb-line-height, var(--bp-line-height-normal));\n  }\n\n  .item__icon {\n    flex-shrink: 0;\n  }\n\n  .item__label {\n    white-space: nowrap;\n  }\n\n  /* Link styles */\n  .link {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--bp-spacing-xs);\n    color: var(--bp-color-text-muted);\n    text-decoration: none;\n    transition: color var(--bp-transition-fast);\n    outline: none;\n    border-radius: var(--bp-border-radius);\n  }\n\n  .link:hover {\n    color: var(--bp-color-primary);\n    text-decoration: underline;\n  }\n\n  .link:active {\n    transform: translateY(1px);\n  }\n\n  .link: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\n  /* Text (non-link) styles */\n  .text {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--bp-spacing-xs);\n    color: var(--bp-color-text);\n    font-weight: var(--bp-font-weight-medium);\n  }\n\n  /* Current item */\n  .item--current .text {\n    color: var(--bp-color-text);\n  }\n\n  /* Separator styles */\n  .separator {\n    display: inline-flex;\n    align-items: center;\n    color: var(--bp-color-text-muted);\n    margin: 0 var(--bp-spacing-2xs);\n    user-select: none;\n  }\n\n  /* Hide separator on last item */\n  :host(:last-of-type) .separator {\n    display: none;\n  }\n\n  /* Separator content via ::before - uses custom properties from parent */\n  .separator::before {\n    content: var(--bp-breadcrumb-separator-content, '/');\n    font-size: var(--bp-breadcrumb-separator-size, inherit);\n  }\n\n  .separator__icon {\n    width: var(--bp-spacing-md);\n    height: var(--bp-spacing-md);\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n  }\n\n  .separator__icon--dot {\n    font-size: var(--bp-font-size-lg);\n    line-height: 1;\n  }\n\n  /* Ellipsis button */\n  .ellipsis-button {\n    appearance: none;\n    border: none;\n    background: transparent;\n    padding: var(--bp-spacing-xs);\n    margin: calc(-1 * var(--bp-spacing-xs));\n    cursor: pointer;\n    color: var(--bp-color-text-muted);\n    border-radius: var(--bp-border-radius);\n    transition: all var(--bp-transition-fast);\n    outline: none;\n  }\n\n  .ellipsis-button:hover {\n    color: var(--bp-color-primary);\n    background: var(--bp-color-surface);\n  }\n\n  .ellipsis-button:active {\n    transform: scale(0.95);\n  }\n\n  .ellipsis-button: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\n  .ellipsis-dots {\n    font-size: var(--bp-font-size-base);\n    letter-spacing: var(--bp-spacing-0-5);\n  }\n\n  /* Sizes */\n  .breadcrumb--sm {\n    font-size: var(--bp-font-size-sm);\n    line-height: var(--bp-line-height-tight);\n  }\n\n  .breadcrumb--sm .separator__icon {\n    width: var(--bp-spacing-sm);\n    height: var(--bp-spacing-sm);\n  }\n\n  .breadcrumb--md {\n    font-size: var(--bp-font-size-base);\n    line-height: var(--bp-line-height-normal);\n  }\n\n  .breadcrumb--md .separator__icon {\n    width: var(--bp-spacing-md);\n    height: var(--bp-spacing-md);\n  }\n\n  .breadcrumb--lg {\n    font-size: var(--bp-font-size-lg);\n    line-height: var(--bp-line-height-normal);\n  }\n\n  .breadcrumb--lg .separator__icon {\n    width: var(--bp-spacing-lg);\n    height: var(--bp-spacing-lg);\n  }\n\n  /* Separator variants */\n  .breadcrumb--slash .separator__icon {\n    font-size: inherit;\n  }\n\n  .breadcrumb--dot .separator__icon {\n    font-size: inherit;\n  }\n\n  /* Item ellipsis */\n  .item--ellipsis {\n    display: inline-flex;\n  }\n\n  /* Collapse on mobile - handled via maxItems property instead of CSS */\n  .breadcrumb--collapse-mobile {\n    /* Reserved for future container query support */\n  }\n`;\n","import { LitElement, html, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { repeat } from 'lit/directives/repeat.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { breadcrumbStyles } from './breadcrumb.style.js';\nimport type { IconName } from '../icon/icons/icon-name.generated.js';\nimport '../icon/icon.js';\n\nexport type BreadcrumbSize = 'sm' | 'md' | 'lg';\nexport type BreadcrumbSeparator = 'slash' | 'chevron' | 'arrow' | 'dot';\n\n/**\n * Breadcrumb item interface for programmatic configuration\n */\nexport interface BreadcrumbItem {\n  /** Display label for the breadcrumb item */\n  label: string;\n  /** URL for the breadcrumb link (omit for current page) */\n  href?: string;\n  /** Icon name to display before the label */\n  icon?: IconName;\n  /** Whether this is the current/active page */\n  current?: boolean;\n}\n\n/**\n * A breadcrumb navigation component showing the user's location in a hierarchy.\n *\n * @element bp-breadcrumb\n *\n * @property {BreadcrumbItem[]} items - Array of breadcrumb items\n * @property {BreadcrumbSize} size - The size of the breadcrumb\n * @property {BreadcrumbSeparator} separator - The separator style between items\n * @property {string} ariaLabel - Accessible label for the navigation\n * @property {boolean} collapseOnMobile - Whether to collapse middle items on small screens\n * @property {number} maxItems - Maximum visible items before collapsing (0 = no limit)\n *\n * @slot - Default slot for custom breadcrumb items\n * @slot separator - Custom separator content\n *\n * @fires bp-breadcrumb-click - Fired when a breadcrumb item is clicked\n *\n * @csspart nav - The nav element wrapper\n * @csspart list - The ordered list element\n * @csspart item - Individual breadcrumb item\n * @csspart item-current - The current/active breadcrumb item\n * @csspart link - Breadcrumb link element\n * @csspart separator - Separator between items\n * @csspart ellipsis - The ellipsis button when items are collapsed\n */\n@customElement('bp-breadcrumb')\nexport class BpBreadcrumb extends LitElement {\n  /**\n   * Array of breadcrumb items\n   */\n  @property({ type: Array }) declare items: BreadcrumbItem[];\n\n  /**\n   * The size of the breadcrumb\n   */\n  @property({ type: String, reflect: true }) declare size: BreadcrumbSize;\n\n  /**\n   * The separator style between items\n   */\n  @property({ type: String, reflect: true })\n  declare separator: BreadcrumbSeparator;\n\n  /**\n   * Accessible label for the navigation landmark\n   */\n  @property({ type: String, attribute: 'aria-label' })\n  declare ariaLabel: string;\n\n  /**\n   * Whether to collapse middle items on small screens\n   */\n  @property({ type: Boolean, attribute: 'collapse-on-mobile' })\n  declare collapseOnMobile: boolean;\n\n  /**\n   * Maximum visible items before collapsing (0 = no limit)\n   */\n  @property({ type: Number, attribute: 'max-items' }) declare maxItems: number;\n\n  static styles = [breadcrumbStyles];\n\n  constructor() {\n    super();\n    this.items = [];\n    this.size = 'md';\n    this.separator = 'slash';\n    this.ariaLabel = 'Breadcrumb';\n    this.collapseOnMobile = false;\n    this.maxItems = 0;\n  }\n\n  private handleItemClick(\n    _event: MouseEvent,\n    item: BreadcrumbItem,\n    index: number\n  ) {\n    // Don't prevent default for actual navigation\n    this.dispatchEvent(\n      new CustomEvent('bp-breadcrumb-click', {\n        detail: { item, index },\n        bubbles: true,\n        composed: true,\n      })\n    );\n  }\n\n  private handleKeyDown(\n    event: KeyboardEvent,\n    item: BreadcrumbItem,\n    index: number\n  ) {\n    if (event.key === 'Enter' || event.key === ' ') {\n      if (!item.href) {\n        event.preventDefault();\n      }\n      this.dispatchEvent(\n        new CustomEvent('bp-breadcrumb-click', {\n          detail: { item, index },\n          bubbles: true,\n          composed: true,\n        })\n      );\n    }\n  }\n\n  private renderSeparator() {\n    const separatorIcons = {\n      slash: html`<span class=\"separator__icon\">/</span>`,\n      chevron: html`\n        <svg\n          class=\"separator__icon\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"2\"\n        >\n          <path d=\"M9 18l6-6-6-6\" />\n        </svg>\n      `,\n      arrow: html`\n        <svg\n          class=\"separator__icon\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"2\"\n        >\n          <path d=\"M5 12h14M12 5l7 7-7 7\" />\n        </svg>\n      `,\n      dot: html`<span class=\"separator__icon separator__icon--dot\">•</span>`,\n    };\n\n    return html`\n      <span class=\"separator\" part=\"separator\" aria-hidden=\"true\">\n        <slot name=\"separator\">${separatorIcons[this.separator]}</slot>\n      </span>\n    `;\n  }\n\n  private renderItem(item: BreadcrumbItem, index: number, isLast: boolean) {\n    const isCurrent = item.current || isLast;\n    const itemClasses = {\n      item: true,\n      'item--current': isCurrent,\n    };\n\n    return html`\n      <li\n        class=${classMap(itemClasses)}\n        part=\"item ${isCurrent ? 'item-current' : ''}\"\n      >\n        ${item.href && !isCurrent\n          ? html`\n              <a\n                class=\"link\"\n                part=\"link\"\n                href=${item.href}\n                @click=${(e: MouseEvent) =>\n                  this.handleItemClick(e, item, index)}\n                @keydown=${(e: KeyboardEvent) =>\n                  this.handleKeyDown(e, item, index)}\n              >\n                ${item.icon\n                  ? html`<bp-icon\n                      name=${item.icon}\n                      class=\"item__icon\"\n                    ></bp-icon>`\n                  : nothing}\n                <span class=\"item__label\">${item.label}</span>\n              </a>\n            `\n          : html`\n              <span\n                class=\"text\"\n                part=\"text\"\n                aria-current=${ifDefined(isCurrent ? 'page' : undefined)}\n              >\n                ${item.icon\n                  ? html`<bp-icon\n                      name=${item.icon}\n                      class=\"item__icon\"\n                    ></bp-icon>`\n                  : nothing}\n                <span class=\"item__label\">${item.label}</span>\n              </span>\n            `}\n        ${!isLast ? this.renderSeparator() : nothing}\n      </li>\n    `;\n  }\n\n  private renderEllipsis(hiddenCount: number) {\n    return html`\n      <li class=\"item item--ellipsis\" part=\"item ellipsis\">\n        <button\n          class=\"ellipsis-button\"\n          part=\"ellipsis-button\"\n          aria-label=\"Show ${hiddenCount} more items\"\n          title=\"Show ${hiddenCount} more items\"\n        >\n          <span class=\"ellipsis-dots\">…</span>\n        </button>\n        ${this.renderSeparator()}\n      </li>\n    `;\n  }\n\n  private getVisibleItems(): {\n    items: BreadcrumbItem[];\n    hiddenCount: number;\n    showEllipsis: boolean;\n  } {\n    if (this.maxItems <= 0 || this.items.length <= this.maxItems) {\n      return { items: this.items, hiddenCount: 0, showEllipsis: false };\n    }\n\n    // Show first item, ellipsis, and last (maxItems - 1) items\n    const firstItem = this.items[0];\n    const lastItems = this.items.slice(-(this.maxItems - 1));\n    const hiddenCount = this.items.length - this.maxItems;\n\n    return {\n      items: [firstItem, ...lastItems],\n      hiddenCount,\n      showEllipsis: true,\n    };\n  }\n\n  render() {\n    const containerClasses = {\n      breadcrumb: true,\n      [`breadcrumb--${this.size}`]: true,\n      [`breadcrumb--separator-${this.separator}`]: true,\n      'breadcrumb--collapse-mobile': this.collapseOnMobile,\n    };\n\n    const {\n      items: visibleItems,\n      hiddenCount,\n      showEllipsis,\n    } = this.getVisibleItems();\n\n    // If using programmatic items\n    if (this.items.length > 0) {\n      return html`\n        <nav\n          class=${classMap(containerClasses)}\n          part=\"nav\"\n          aria-label=${this.ariaLabel}\n        >\n          <ol class=\"list\" part=\"list\">\n            ${showEllipsis\n              ? html`\n                  ${this.renderItem(visibleItems[0], 0, false)}\n                  ${this.renderEllipsis(hiddenCount)}\n                  ${repeat(\n                    visibleItems.slice(1),\n                    (_item, index) => index,\n                    (item, index) =>\n                      this.renderItem(\n                        item,\n                        this.items.length - visibleItems.length + 1 + index,\n                        index === visibleItems.length - 2\n                      )\n                  )}\n                `\n              : repeat(\n                  visibleItems,\n                  (_item, index) => index,\n                  (item, index) =>\n                    this.renderItem(\n                      item,\n                      index,\n                      index === visibleItems.length - 1\n                    )\n                )}\n          </ol>\n        </nav>\n      `;\n    }\n\n    // Slotted content fallback\n    return html`\n      <nav\n        class=${classMap(containerClasses)}\n        part=\"nav\"\n        aria-label=${this.ariaLabel}\n      >\n        <ol class=\"list\" part=\"list\">\n          <slot></slot>\n        </ol>\n      </nav>\n    `;\n  }\n}\n\n/**\n * A breadcrumb item component for use with bp-breadcrumb.\n *\n * @element bp-breadcrumb-item\n *\n * @property {string} href - URL for the breadcrumb link\n * @property {boolean} current - Whether this is the current page\n *\n * @slot - Content of the breadcrumb item\n *\n * @csspart item - The item container\n * @csspart link - The link element (when href is provided)\n */\n@customElement('bp-breadcrumb-item')\nexport class BpBreadcrumbItem extends LitElement {\n  /**\n   * URL for the breadcrumb link (omit for current page)\n   */\n  @property({ type: String }) declare href: string;\n\n  /**\n   * Whether this is the current/active page\n   */\n  @property({ type: Boolean, reflect: true }) declare current: boolean;\n\n  static styles = [breadcrumbStyles];\n\n  constructor() {\n    super();\n    this.href = '';\n    this.current = false;\n  }\n\n  render() {\n    const itemClasses = {\n      item: true,\n      'item--current': this.current,\n    };\n\n    return html`\n      <li\n        class=${classMap(itemClasses)}\n        part=\"item ${this.current ? 'item-current' : ''}\"\n      >\n        ${this.href && !this.current\n          ? html`\n              <a class=\"link\" part=\"link\" href=${this.href}>\n                <slot></slot>\n              </a>\n            `\n          : html`\n              <span\n                class=\"text\"\n                part=\"text\"\n                aria-current=${ifDefined(this.current ? 'page' : undefined)}\n              >\n                <slot></slot>\n              </span>\n            `}\n        <span class=\"separator\" part=\"separator\" aria-hidden=\"true\"></span>\n      </li>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'bp-breadcrumb': BpBreadcrumb;\n    'bp-breadcrumb-item': BpBreadcrumbItem;\n  }\n}\n"],"names":["breadcrumbStyles","css","BpBreadcrumb","LitElement","_event","item","index","event","separatorIcons","html","isLast","isCurrent","classMap","e","nothing","ifDefined","hiddenCount","firstItem","lastItems","containerClasses","visibleItems","showEllipsis","repeat","_item","__decorateClass","property","customElement","BpBreadcrumbItem","itemClasses"],"mappings":";;;;;AAEO,MAAMA,IAAmBC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;;;ACkDzB,IAAMC,IAAN,cAA2BC,EAAW;AAAA,EAoC3C,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"}
+{"version":3,"file":"breadcrumb.js","sources":["../../source/components/breadcrumb/breadcrumb.style.ts","../../source/components/breadcrumb/breadcrumb.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const breadcrumbStyles = css`\n  /* Base styles */\n  :host {\n    display: block;\n  }\n\n  /* Separator variants - set custom properties on host to cross shadow boundaries */\n  :host([separator='slash']) {\n    --bp-breadcrumb-separator-content: '/';\n  }\n\n  :host([separator='chevron']) {\n    --bp-breadcrumb-separator-content: '›';\n    --bp-breadcrumb-separator-size: 1.2em;\n  }\n\n  :host([separator='arrow']) {\n    --bp-breadcrumb-separator-content: '→';\n  }\n\n  :host([separator='dot']) {\n    --bp-breadcrumb-separator-content: '•';\n    --bp-breadcrumb-separator-size: var(--bp-font-size-lg);\n  }\n\n  /* Size variants - set custom properties on host to cross shadow boundaries */\n  :host([size='sm']) {\n    --bp-breadcrumb-font-size: var(--bp-font-size-sm);\n    --bp-breadcrumb-line-height: var(--bp-line-height-tight);\n  }\n\n  :host([size='md']) {\n    --bp-breadcrumb-font-size: var(--bp-font-size-base);\n    --bp-breadcrumb-line-height: var(--bp-line-height-normal);\n  }\n\n  :host([size='lg']) {\n    --bp-breadcrumb-font-size: var(--bp-font-size-lg);\n    --bp-breadcrumb-line-height: var(--bp-line-height-normal);\n  }\n\n  .breadcrumb {\n    font-family: var(--bp-font-family);\n  }\n\n  .list {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    list-style: none;\n    margin: 0;\n    padding: 0;\n    gap: 0;\n  }\n\n  .item {\n    display: inline-flex;\n    align-items: center;\n    gap: 0;\n    font-size: var(--bp-breadcrumb-font-size, var(--bp-font-size-base));\n    line-height: var(--bp-breadcrumb-line-height, var(--bp-line-height-normal));\n  }\n\n  .item__icon {\n    flex-shrink: 0;\n  }\n\n  .item__label {\n    white-space: nowrap;\n  }\n\n  /* Link styles */\n  .link {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--bp-spacing-xs);\n    color: var(--bp-color-text-muted);\n    text-decoration: none;\n    transition: color var(--bp-transition-fast);\n    outline: none;\n    border-radius: var(--bp-border-radius);\n  }\n\n  .link:hover {\n    color: var(--bp-color-primary);\n    text-decoration: underline;\n  }\n\n  .link:active {\n    transform: translateY(1px);\n  }\n\n  .link: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\n  /* Text (non-link) styles */\n  .text {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--bp-spacing-xs);\n    color: var(--bp-color-text);\n    font-weight: var(--bp-font-weight-medium);\n  }\n\n  /* Current item */\n  .item--current .text {\n    color: var(--bp-color-text);\n  }\n\n  /* Separator styles */\n  .separator {\n    display: inline-flex;\n    align-items: center;\n    color: var(--bp-color-text-muted);\n    margin: 0 var(--bp-spacing-2xs);\n    user-select: none;\n  }\n\n  /* Hide separator on last item */\n  :host(:last-of-type) .separator {\n    display: none;\n  }\n\n  /* Separator content via ::before - uses custom properties from parent */\n  .separator::before {\n    content: var(--bp-breadcrumb-separator-content, '/');\n    font-size: var(--bp-breadcrumb-separator-size, inherit);\n  }\n\n  .separator__icon {\n    width: var(--bp-spacing-md);\n    height: var(--bp-spacing-md);\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n  }\n\n  .separator__icon--dot {\n    font-size: var(--bp-font-size-lg);\n    line-height: 1;\n  }\n\n  /* Ellipsis button */\n  .ellipsis-button {\n    appearance: none;\n    border: none;\n    background: transparent;\n    padding: var(--bp-spacing-xs);\n    margin: calc(-1 * var(--bp-spacing-xs));\n    cursor: pointer;\n    color: var(--bp-color-text-muted);\n    border-radius: var(--bp-border-radius);\n    transition: all var(--bp-transition-fast);\n    outline: none;\n  }\n\n  .ellipsis-button:hover {\n    color: var(--bp-color-primary);\n    background: var(--bp-color-surface);\n  }\n\n  .ellipsis-button:active {\n    transform: scale(0.95);\n  }\n\n  .ellipsis-button: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\n  .ellipsis-dots {\n    font-size: var(--bp-font-size-base);\n    letter-spacing: var(--bp-spacing-0-5);\n  }\n\n  /* Sizes */\n  .breadcrumb--sm {\n    font-size: var(--bp-font-size-sm);\n    line-height: var(--bp-line-height-tight);\n  }\n\n  .breadcrumb--sm .separator__icon {\n    width: var(--bp-spacing-sm);\n    height: var(--bp-spacing-sm);\n  }\n\n  .breadcrumb--md {\n    font-size: var(--bp-font-size-base);\n    line-height: var(--bp-line-height-normal);\n  }\n\n  .breadcrumb--md .separator__icon {\n    width: var(--bp-spacing-md);\n    height: var(--bp-spacing-md);\n  }\n\n  .breadcrumb--lg {\n    font-size: var(--bp-font-size-lg);\n    line-height: var(--bp-line-height-normal);\n  }\n\n  .breadcrumb--lg .separator__icon {\n    width: var(--bp-spacing-lg);\n    height: var(--bp-spacing-lg);\n  }\n\n  /* Separator variants */\n  .breadcrumb--slash .separator__icon {\n    font-size: inherit;\n  }\n\n  .breadcrumb--dot .separator__icon {\n    font-size: inherit;\n  }\n\n  /* Item ellipsis */\n  .item--ellipsis {\n    display: inline-flex;\n  }\n\n  /* Collapse on mobile - handled via maxItems property instead of CSS */\n  .breadcrumb--collapse-mobile {\n    /* Reserved for future container query support */\n  }\n`;\n","import { LitElement, html, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { repeat } from 'lit/directives/repeat.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { breadcrumbStyles } from './breadcrumb.style.js';\nimport type { IconName } from '../icon/icons/icon-name.generated.js';\nimport { BpIcon } from '../icon/icon.js';\n\nexport type BreadcrumbSize = 'sm' | 'md' | 'lg';\nexport type BreadcrumbSeparator = 'slash' | 'chevron' | 'arrow' | 'dot';\n\n/**\n * Breadcrumb item interface for programmatic configuration\n */\nexport interface BreadcrumbItem {\n  /** Display label for the breadcrumb item */\n  label: string;\n  /** URL for the breadcrumb link (omit for current page) */\n  href?: string;\n  /** Icon name to display before the label */\n  icon?: IconName;\n  /** Whether this is the current/active page */\n  current?: boolean;\n}\n\n/**\n * A breadcrumb navigation component showing the user's location in a hierarchy.\n *\n * @element bp-breadcrumb\n *\n * @property {BreadcrumbItem[]} items - Array of breadcrumb items\n * @property {BreadcrumbSize} size - The size of the breadcrumb\n * @property {BreadcrumbSeparator} separator - The separator style between items\n * @property {string} ariaLabel - Accessible label for the navigation\n * @property {boolean} collapseOnMobile - Whether to collapse middle items on small screens\n * @property {number} maxItems - Maximum visible items before collapsing (0 = no limit)\n *\n * @slot - Default slot for custom breadcrumb items\n * @slot separator - Custom separator content\n *\n * @fires bp-breadcrumb-click - Fired when a breadcrumb item is clicked\n *\n * @csspart nav - The nav element wrapper\n * @csspart list - The ordered list element\n * @csspart item - Individual breadcrumb item\n * @csspart item-current - The current/active breadcrumb item\n * @csspart link - Breadcrumb link element\n * @csspart separator - Separator between items\n * @csspart ellipsis - The ellipsis button when items are collapsed\n */\n@customElement('bp-breadcrumb')\nexport class BpBreadcrumb 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   * Array of breadcrumb items\n   */\n  @property({ type: Array }) declare items: BreadcrumbItem[];\n\n  /**\n   * The size of the breadcrumb\n   */\n  @property({ type: String, reflect: true }) declare size: BreadcrumbSize;\n\n  /**\n   * The separator style between items\n   */\n  @property({ type: String, reflect: true })\n  declare separator: BreadcrumbSeparator;\n\n  /**\n   * Accessible label for the navigation landmark\n   */\n  @property({ type: String, attribute: 'aria-label' })\n  declare ariaLabel: string;\n\n  /**\n   * Whether to collapse middle items on small screens\n   */\n  @property({ type: Boolean, attribute: 'collapse-on-mobile' })\n  declare collapseOnMobile: boolean;\n\n  /**\n   * Maximum visible items before collapsing (0 = no limit)\n   */\n  @property({ type: Number, attribute: 'max-items' }) declare maxItems: number;\n\n  static styles = [breadcrumbStyles];\n\n  constructor() {\n    super();\n    this.items = [];\n    this.size = 'md';\n    this.separator = 'slash';\n    this.ariaLabel = 'Breadcrumb';\n    this.collapseOnMobile = false;\n    this.maxItems = 0;\n  }\n\n  private handleItemClick(\n    _event: MouseEvent,\n    item: BreadcrumbItem,\n    index: number\n  ) {\n    // Don't prevent default for actual navigation\n    this.dispatchEvent(\n      new CustomEvent('bp-breadcrumb-click', {\n        detail: { item, index },\n        bubbles: true,\n        composed: true,\n      })\n    );\n  }\n\n  private handleKeyDown(\n    event: KeyboardEvent,\n    item: BreadcrumbItem,\n    index: number\n  ) {\n    if (event.key === 'Enter' || event.key === ' ') {\n      if (!item.href) {\n        event.preventDefault();\n      }\n      this.dispatchEvent(\n        new CustomEvent('bp-breadcrumb-click', {\n          detail: { item, index },\n          bubbles: true,\n          composed: true,\n        })\n      );\n    }\n  }\n\n  private renderSeparator() {\n    const separatorIcons = {\n      slash: html`<span class=\"separator__icon\">/</span>`,\n      chevron: html`\n        <svg\n          class=\"separator__icon\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"2\"\n        >\n          <path d=\"M9 18l6-6-6-6\" />\n        </svg>\n      `,\n      arrow: html`\n        <svg\n          class=\"separator__icon\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"2\"\n        >\n          <path d=\"M5 12h14M12 5l7 7-7 7\" />\n        </svg>\n      `,\n      dot: html`<span class=\"separator__icon separator__icon--dot\">•</span>`,\n    };\n\n    return html`\n      <span class=\"separator\" part=\"separator\" aria-hidden=\"true\">\n        <slot name=\"separator\">${separatorIcons[this.separator]}</slot>\n      </span>\n    `;\n  }\n\n  private renderItem(item: BreadcrumbItem, index: number, isLast: boolean) {\n    const isCurrent = item.current || isLast;\n    const itemClasses = {\n      item: true,\n      'item--current': isCurrent,\n    };\n\n    return html`\n      <li\n        class=${classMap(itemClasses)}\n        part=\"item ${isCurrent ? 'item-current' : ''}\"\n      >\n        ${item.href && !isCurrent\n          ? html`\n              <a\n                class=\"link\"\n                part=\"link\"\n                href=${item.href}\n                @click=${(e: MouseEvent) =>\n                  this.handleItemClick(e, item, index)}\n                @keydown=${(e: KeyboardEvent) =>\n                  this.handleKeyDown(e, item, index)}\n              >\n                ${item.icon\n                  ? html`<bp-icon\n                      name=${item.icon}\n                      class=\"item__icon\"\n                    ></bp-icon>`\n                  : nothing}\n                <span class=\"item__label\">${item.label}</span>\n              </a>\n            `\n          : html`\n              <span\n                class=\"text\"\n                part=\"text\"\n                aria-current=${ifDefined(isCurrent ? 'page' : undefined)}\n              >\n                ${item.icon\n                  ? html`<bp-icon\n                      name=${item.icon}\n                      class=\"item__icon\"\n                    ></bp-icon>`\n                  : nothing}\n                <span class=\"item__label\">${item.label}</span>\n              </span>\n            `}\n        ${!isLast ? this.renderSeparator() : nothing}\n      </li>\n    `;\n  }\n\n  private renderEllipsis(hiddenCount: number) {\n    return html`\n      <li class=\"item item--ellipsis\" part=\"item ellipsis\">\n        <button\n          class=\"ellipsis-button\"\n          part=\"ellipsis-button\"\n          aria-label=\"Show ${hiddenCount} more items\"\n          title=\"Show ${hiddenCount} more items\"\n        >\n          <span class=\"ellipsis-dots\">…</span>\n        </button>\n        ${this.renderSeparator()}\n      </li>\n    `;\n  }\n\n  private getVisibleItems(): {\n    items: BreadcrumbItem[];\n    hiddenCount: number;\n    showEllipsis: boolean;\n  } {\n    if (this.maxItems <= 0 || this.items.length <= this.maxItems) {\n      return { items: this.items, hiddenCount: 0, showEllipsis: false };\n    }\n\n    // Show first item, ellipsis, and last (maxItems - 1) items\n    const firstItem = this.items[0];\n    const lastItems = this.items.slice(-(this.maxItems - 1));\n    const hiddenCount = this.items.length - this.maxItems;\n\n    return {\n      items: [firstItem, ...lastItems],\n      hiddenCount,\n      showEllipsis: true,\n    };\n  }\n\n  render() {\n    const containerClasses = {\n      breadcrumb: true,\n      [`breadcrumb--${this.size}`]: true,\n      [`breadcrumb--separator-${this.separator}`]: true,\n      'breadcrumb--collapse-mobile': this.collapseOnMobile,\n    };\n\n    const {\n      items: visibleItems,\n      hiddenCount,\n      showEllipsis,\n    } = this.getVisibleItems();\n\n    // If using programmatic items\n    if (this.items.length > 0) {\n      return html`\n        <nav\n          class=${classMap(containerClasses)}\n          part=\"nav\"\n          aria-label=${this.ariaLabel}\n        >\n          <ol class=\"list\" part=\"list\">\n            ${showEllipsis\n              ? html`\n                  ${this.renderItem(visibleItems[0], 0, false)}\n                  ${this.renderEllipsis(hiddenCount)}\n                  ${repeat(\n                    visibleItems.slice(1),\n                    (_item, index) => index,\n                    (item, index) =>\n                      this.renderItem(\n                        item,\n                        this.items.length - visibleItems.length + 1 + index,\n                        index === visibleItems.length - 2\n                      )\n                  )}\n                `\n              : repeat(\n                  visibleItems,\n                  (_item, index) => index,\n                  (item, index) =>\n                    this.renderItem(\n                      item,\n                      index,\n                      index === visibleItems.length - 1\n                    )\n                )}\n          </ol>\n        </nav>\n      `;\n    }\n\n    // Slotted content fallback\n    return html`\n      <nav\n        class=${classMap(containerClasses)}\n        part=\"nav\"\n        aria-label=${this.ariaLabel}\n      >\n        <ol class=\"list\" part=\"list\">\n          <slot></slot>\n        </ol>\n      </nav>\n    `;\n  }\n}\n\n/**\n * A breadcrumb item component for use with bp-breadcrumb.\n *\n * @element bp-breadcrumb-item\n *\n * @property {string} href - URL for the breadcrumb link\n * @property {boolean} current - Whether this is the current page\n *\n * @slot - Content of the breadcrumb item\n *\n * @csspart item - The item container\n * @csspart link - The link element (when href is provided)\n */\n@customElement('bp-breadcrumb-item')\nexport class BpBreadcrumbItem extends LitElement {\n  /**\n   * URL for the breadcrumb link (omit for current page)\n   */\n  @property({ type: String }) declare href: string;\n\n  /**\n   * Whether this is the current/active page\n   */\n  @property({ type: Boolean, reflect: true }) declare current: boolean;\n\n  static styles = [breadcrumbStyles];\n\n  constructor() {\n    super();\n    this.href = '';\n    this.current = false;\n  }\n\n  render() {\n    const itemClasses = {\n      item: true,\n      'item--current': this.current,\n    };\n\n    return html`\n      <li\n        class=${classMap(itemClasses)}\n        part=\"item ${this.current ? 'item-current' : ''}\"\n      >\n        ${this.href && !this.current\n          ? html`\n              <a class=\"link\" part=\"link\" href=${this.href}>\n                <slot></slot>\n              </a>\n            `\n          : html`\n              <span\n                class=\"text\"\n                part=\"text\"\n                aria-current=${ifDefined(this.current ? 'page' : undefined)}\n              >\n                <slot></slot>\n              </span>\n            `}\n        <span class=\"separator\" part=\"separator\" aria-hidden=\"true\"></span>\n      </li>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'bp-breadcrumb': BpBreadcrumb;\n    'bp-breadcrumb-item': BpBreadcrumbItem;\n  }\n}\n"],"names":["breadcrumbStyles","css","BpBreadcrumb","LitElement","_event","item","index","event","separatorIcons","html","isLast","isCurrent","classMap","e","nothing","ifDefined","hiddenCount","firstItem","lastItems","containerClasses","visibleItems","showEllipsis","repeat","_item","BpIcon","__decorateClass","property","customElement","BpBreadcrumbItem","itemClasses"],"mappings":";;;;;;AAEO,MAAMA,IAAmBC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;;;ACkDzB,IAAMC,IAAN,cAA2BC,EAAW;AAAA,EA0C3C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"}

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

@@ -1,5 +1,5 @@
 import { LitElement } from 'lit';
-import '../icon/icon.js';
+import { BpIcon } from '../icon/icon.js';
 export type DrawerPlacement = 'left' | 'right' | 'top' | 'bottom';
 export type DrawerSize = 'sm' | 'md' | 'lg' | 'full';
 /**
@@ -23,6 +23,11 @@ export type DrawerSize = 'sm' | 'md' | 'lg' | 'full';
  * @csspart close-button - The close button
  */
 export declare class BpDrawer 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 the drawer is open */
     open: boolean;
     /** Which edge the drawer slides in from */

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;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"}
+{"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,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AAEzC,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;;;OAGG;IACH,MAAM,CAAC,YAAY,oBAAY;IAE/B,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

@@ -2,7 +2,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";
 import { closeSvg as w } from "../icons/close.js";
-const v = b`
+import { BpIcon as v } from "./icon.js";
+const m = b`
   /* Base styles */
   :host {
     display: contents;
@@ -311,10 +312,10 @@ const v = b`
     }
   }
 `;
-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--)
+var g = Object.defineProperty, y = Object.getOwnPropertyDescriptor, o = (e, t, p, i) => {
+  for (var s = i > 1 ? void 0 : i ? y(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 && m(t, p, s), s;
+  return i && s && g(t, p, s), s;
 };
 let r = class extends u {
   constructor() {
@@ -498,7 +499,8 @@ let r = class extends u {
     `;
   }
 };
-r.styles = [v];
+r.dependencies = [v];
+r.styles = [m];
 o([
   a({ type: Boolean, reflect: !0 })
 ], r.prototype, "open", 2);

package/dist/components/drawer.js.map

@@ -1 +1 @@
-{"version":3,"file":"drawer.js","sources":["../../source/components/drawer/drawer.style.ts","../../source/components/drawer/drawer.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const drawerStyles = css`\n  /* Base styles */\n  :host {\n    display: contents;\n  }\n\n  .drawer {\n    font-family: var(--bp-font-family);\n    font-size: var(--bp-font-size-base);\n    color: var(--bp-color-text);\n  }\n\n  /* Overlay mode */\n  .drawer--overlay {\n    position: fixed;\n    inset: 0;\n    z-index: var(--bp-z-modal);\n    pointer-events: none;\n  }\n\n  .drawer--overlay.drawer--open {\n    pointer-events: auto;\n  }\n\n  /* Backdrop */\n  .backdrop {\n    position: absolute;\n    inset: 0;\n    background-color: oklch(from var(--bp-color-text) l c h / 0.5);\n    opacity: 0;\n    transition: opacity var(--bp-transition-base) ease-out;\n  }\n\n  .backdrop--visible {\n    opacity: 1;\n  }\n\n  /* Panel base */\n  .panel {\n    position: absolute;\n    display: flex;\n    flex-direction: column;\n    background-color: var(--bp-color-surface);\n    box-shadow: var(--bp-shadow-xl);\n    transition: transform var(--bp-transition-base) ease-out;\n    overflow: hidden;\n  }\n\n  .drawer--overlay .panel:focus {\n    outline: none;\n  }\n\n  /* Horizontal drawers (left/right) */\n  .drawer--horizontal .panel {\n    top: 0;\n    bottom: 0;\n    height: 100%;\n  }\n\n  .drawer--left .panel {\n    left: 0;\n    transform: translateX(-100%);\n  }\n\n  .drawer--left .panel--open {\n    transform: translateX(0);\n  }\n\n  .drawer--right .panel {\n    right: 0;\n    transform: translateX(100%);\n  }\n\n  .drawer--right .panel--open {\n    transform: translateX(0);\n  }\n\n  /* Vertical drawers (top/bottom) */\n  .drawer--vertical .panel {\n    left: 0;\n    right: 0;\n    width: 100%;\n  }\n\n  .drawer--top .panel {\n    top: 0;\n    transform: translateY(-100%);\n  }\n\n  .drawer--top .panel--open {\n    transform: translateY(0);\n  }\n\n  .drawer--bottom .panel {\n    bottom: 0;\n    transform: translateY(100%);\n  }\n\n  .drawer--bottom .panel--open {\n    transform: translateY(0);\n  }\n\n  /* Sizes - horizontal (width) */\n  .drawer--horizontal.drawer--sm .panel {\n    width: calc(var(--bp-spacing-24) * 3);\n  }\n\n  .drawer--horizontal.drawer--md .panel {\n    width: calc(var(--bp-spacing-24) * 4 + var(--bp-spacing-16));\n  }\n\n  .drawer--horizontal.drawer--lg .panel {\n    width: var(--bp-breakpoint-sm);\n  }\n\n  .drawer--horizontal.drawer--full .panel {\n    width: 100%;\n  }\n\n  /* Sizes - vertical (height) */\n  .drawer--vertical.drawer--sm .panel {\n    height: calc(var(--bp-spacing-24) * 2);\n  }\n\n  .drawer--vertical.drawer--md .panel {\n    height: calc(var(--bp-spacing-24) * 3 + var(--bp-spacing-8));\n  }\n\n  .drawer--vertical.drawer--lg .panel {\n    height: calc(var(--bp-spacing-24) * 5);\n  }\n\n  .drawer--vertical.drawer--full .panel {\n    height: 100%;\n  }\n\n  /* Header */\n  .header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: var(--bp-spacing-4);\n    padding: var(--bp-spacing-4) var(--bp-spacing-5);\n    border-bottom: var(--bp-border-width) solid var(--bp-color-border);\n    flex-shrink: 0;\n  }\n\n  .header--empty {\n    display: none;\n  }\n\n  .header ::slotted(*) {\n    margin: 0;\n    font-size: var(--bp-font-size-lg);\n    font-weight: var(--bp-font-weight-semibold);\n  }\n\n  /* Body */\n  .body {\n    flex: 1;\n    overflow-y: auto;\n    padding: var(--bp-spacing-5);\n  }\n\n  /* Footer */\n  .footer {\n    display: flex;\n    align-items: center;\n    gap: var(--bp-spacing-4);\n    padding: var(--bp-spacing-4) var(--bp-spacing-5);\n    border-top: var(--bp-border-width) solid var(--bp-color-border);\n    flex-shrink: 0;\n  }\n\n  /* Close button */\n  .close-button {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 44px;\n    height: 44px;\n    padding: 0;\n    margin-left: auto;\n    background: transparent;\n    border: none;\n    border-radius: var(--bp-border-radius-sm);\n    color: var(--bp-color-text-muted);\n    cursor: pointer;\n    transition:\n      background-color var(--bp-transition-fast),\n      color var(--bp-transition-fast),\n      transform var(--bp-transition-fast);\n  }\n\n  .close-button:hover {\n    background-color: var(--bp-color-surface-subdued);\n    color: var(--bp-color-text);\n  }\n\n  .close-button:active {\n    background-color: var(--bp-color-surface-pressed);\n    transform: translateY(1px);\n  }\n\n  .close-button:focus {\n    outline: var(--bp-focus-width) var(--bp-focus-style) var(--bp-color-focus);\n    outline-offset: var(--bp-focus-offset);\n  }\n\n  .close-button:focus:not(:focus-visible) {\n    outline: none;\n  }\n\n  .close-button: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\n  /* Inline mode - static sidebar */\n  .drawer--inline {\n    display: block;\n  }\n\n  .drawer--inline .panel {\n    position: relative;\n    transform: none;\n    box-shadow: none;\n    border: var(--bp-border-width) solid var(--bp-color-border);\n    border-radius: var(--bp-border-radius-md);\n  }\n\n  .drawer--inline.drawer--horizontal {\n    height: 100%;\n  }\n\n  .drawer--inline.drawer--vertical {\n    width: 100%;\n  }\n\n  /* Inline sizes - horizontal */\n  .drawer--inline.drawer--horizontal.drawer--small {\n    width: calc(var(--bp-spacing-24) * 3);\n  }\n\n  .drawer--inline.drawer--horizontal.drawer--medium {\n    width: calc(var(--bp-spacing-24) * 4 + var(--bp-spacing-16));\n  }\n\n  .drawer--inline.drawer--horizontal.drawer--large {\n    width: var(--bp-breakpoint-sm);\n  }\n\n  .drawer--inline.drawer--horizontal.drawer--full {\n    width: 100%;\n  }\n\n  /* Inline sizes - vertical */\n  .drawer--inline.drawer--vertical.drawer--small .panel {\n    height: calc(var(--bp-spacing-24) * 2);\n  }\n\n  .drawer--inline.drawer--vertical.drawer--medium .panel {\n    height: calc(var(--bp-spacing-24) * 3 + var(--bp-spacing-8));\n  }\n\n  .drawer--inline.drawer--vertical.drawer--large .panel {\n    height: calc(var(--bp-spacing-24) * 5);\n  }\n\n  .drawer--inline.drawer--vertical.drawer--full .panel {\n    height: auto;\n  }\n\n  /* Border positioning for inline drawers */\n  .drawer--inline.drawer--left .panel {\n    border-left: none;\n    border-top-left-radius: 0;\n    border-bottom-left-radius: 0;\n  }\n\n  .drawer--inline.drawer--right .panel {\n    border-right: none;\n    border-top-right-radius: 0;\n    border-bottom-right-radius: 0;\n  }\n\n  .drawer--inline.drawer--top .panel {\n    border-top: none;\n    border-top-left-radius: 0;\n    border-top-right-radius: 0;\n  }\n\n  .drawer--inline.drawer--bottom .panel {\n    border-bottom: none;\n    border-bottom-left-radius: 0;\n    border-bottom-right-radius: 0;\n  }\n\n  /* Reduced motion */\n  @media (prefers-reduced-motion: reduce) {\n    .panel {\n      transition: none;\n    }\n\n    .backdrop {\n      transition: none;\n    }\n  }\n`;\n","import { LitElement, html, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { drawerStyles } from './drawer.style.js';\nimport { booleanConverter } from '../../utilities/boolean-converter.js';\nimport { closeSvg } from '../icon/icons/entries/close.js';\nimport '../icon/icon.js';\n\nexport type DrawerPlacement = 'left' | 'right' | 'top' | 'bottom';\nexport type DrawerSize = 'sm' | 'md' | 'lg' | 'full';\n\n/**\n * A slide-in panel component that can appear from any edge of the viewport.\n *\n * @fires bp-open - Fired when the drawer opens\n * @fires bp-close - Fired when the drawer closes (includes reason: 'escape' | 'backdrop' | 'close-button' | 'api')\n * @fires bp-after-open - Fired after open animation completes\n * @fires bp-after-close - Fired after close animation completes\n *\n * @slot - Default slot for drawer content\n * @slot header - Optional header content\n * @slot footer - Optional footer content\n *\n * @csspart drawer - The drawer container\n * @csspart backdrop - The backdrop overlay (when not inline)\n * @csspart panel - The drawer panel\n * @csspart header - The header section\n * @csspart body - The body/content section\n * @csspart footer - The footer section\n * @csspart close-button - The close button\n */\n@customElement('bp-drawer')\nexport class BpDrawer extends LitElement {\n  /** Whether the drawer is open */\n  @property({ type: Boolean, reflect: true }) declare open: boolean;\n\n  /** Which edge the drawer slides in from */\n  @property({\n    type: String,\n    reflect: true,\n    converter: {\n      fromAttribute: (value: string | null) => {\n        const valid = ['left', 'right', 'top', 'bottom'];\n        return value && valid.includes(value)\n          ? (value as DrawerPlacement)\n          : 'left';\n      },\n    },\n  })\n  declare placement: DrawerPlacement;\n\n  /** Size of the drawer (width for left/right, height for top/bottom) */\n  @property({\n    type: String,\n    reflect: true,\n    converter: {\n      fromAttribute: (value: string | null) => {\n        const valid = ['sm', 'md', 'lg', 'full'];\n        return value && valid.includes(value) ? (value as DrawerSize) : 'md';\n      },\n    },\n  })\n  declare size: DrawerSize;\n\n  /** Whether to show the close button */\n  @property({\n    converter: booleanConverter,\n    attribute: 'show-close',\n    reflect: true,\n  })\n  declare showClose: boolean;\n\n  /** Whether clicking the backdrop closes the drawer */\n  @property({\n    converter: booleanConverter,\n    attribute: 'close-on-backdrop',\n    reflect: true,\n  })\n  declare closeOnBackdrop: boolean;\n\n  /** Whether pressing Escape closes the drawer */\n  @property({\n    converter: booleanConverter,\n    attribute: 'close-on-escape',\n    reflect: true,\n  })\n  declare closeOnEscape: boolean;\n\n  /** Whether to show the backdrop overlay */\n  @property({\n    converter: booleanConverter,\n    attribute: 'show-backdrop',\n    reflect: true,\n  })\n  declare showBackdrop: boolean;\n\n  /** Accessible label for the drawer */\n  @property({ type: String }) declare label: string;\n\n  /**\n   * Whether the drawer is rendered inline (always visible, part of document flow).\n   * When true, the drawer acts as a static sidebar without overlay behavior.\n   */\n  @property({ type: Boolean, reflect: true }) declare inline: boolean;\n\n  /** Whether the drawer has a header slot content */\n  @property({ type: Boolean, attribute: false }) private hasHeader = false;\n\n  /** Whether the drawer has a footer slot content */\n  @property({ type: Boolean, attribute: false }) private hasFooter = false;\n\n  private previouslyFocusedElement: HTMLElement | null = null;\n\n  static styles = [drawerStyles];\n\n  constructor() {\n    super();\n    this.open = false;\n    this.placement = 'left';\n    this.size = 'md';\n    this.showClose = true;\n    this.closeOnBackdrop = true;\n    this.closeOnEscape = true;\n    this.showBackdrop = true;\n    this.label = '';\n    this.inline = false;\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.addEventListener('keydown', this.handleKeyDown);\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.removeEventListener('keydown', this.handleKeyDown);\n  }\n\n  /**\n   * Open the drawer.\n   * Sets open property to true and manages focus/scroll behavior.\n   *\n   * @fires bp-open - Emitted when the drawer opens\n   * @fires bp-after-open - Emitted after open animation completes\n   */\n  show(): void {\n    if (this.open) return;\n    this.open = true;\n  }\n\n  /**\n   * Close the drawer.\n   * Sets open property to false if bp-close event is not prevented.\n   *\n   * @param reason - The reason the drawer was closed\n   * @fires bp-close - Emitted when the drawer closes (cancelable)\n   * @fires bp-after-close - Emitted after close animation completes\n   */\n  hide(reason: 'escape' | 'backdrop' | 'close-button' | 'api' = 'api'): void {\n    if (!this.open) return;\n\n    const event = new CustomEvent('bp-close', {\n      detail: { reason },\n      bubbles: true,\n      composed: true,\n      cancelable: true,\n    });\n\n    this.dispatchEvent(event);\n\n    if (!event.defaultPrevented) {\n      this.open = false;\n    }\n  }\n\n  /**\n   * Toggle the drawer open/closed state.\n   * Calls hide() if open, show() if closed.\n   */\n  toggle(): void {\n    if (this.open) {\n      this.hide('api');\n    } else {\n      this.show();\n    }\n  }\n\n  protected updated(changedProperties: Map<string, unknown>): void {\n    if (changedProperties.has('open')) {\n      if (this.open) {\n        this.handleOpen();\n      } else {\n        this.handleClose();\n      }\n    }\n  }\n\n  private handleOpen(): void {\n    if (!this.inline) {\n      // Store currently focused element\n      this.previouslyFocusedElement = document.activeElement as HTMLElement;\n\n      // Prevent body scroll\n      document.body.style.overflow = 'hidden';\n    }\n\n    this.dispatchEvent(\n      new CustomEvent('bp-open', {\n        bubbles: true,\n        composed: true,\n      })\n    );\n\n    // Focus the drawer panel for accessibility\n    this.updateComplete.then(() => {\n      const panel = this.shadowRoot?.querySelector('.panel') as HTMLElement;\n      panel?.focus();\n\n      this.dispatchEvent(\n        new CustomEvent('bp-after-open', {\n          bubbles: true,\n          composed: true,\n        })\n      );\n    });\n  }\n\n  private handleClose(): void {\n    if (!this.inline) {\n      // Restore body scroll\n      document.body.style.overflow = '';\n\n      // Restore focus\n      if (this.previouslyFocusedElement) {\n        this.previouslyFocusedElement.focus();\n        this.previouslyFocusedElement = null;\n      }\n    }\n\n    this.updateComplete.then(() => {\n      this.dispatchEvent(\n        new CustomEvent('bp-after-close', {\n          bubbles: true,\n          composed: true,\n        })\n      );\n    });\n  }\n\n  private handleKeyDown = (event: KeyboardEvent): void => {\n    if (\n      event.key === 'Escape' &&\n      this.closeOnEscape &&\n      this.open &&\n      !this.inline\n    ) {\n      event.preventDefault();\n      this.hide('escape');\n    }\n  };\n\n  /**\n   * Handles click events on the backdrop overlay.\n   * Closes the drawer if closeOnBackdrop is true.\n   */\n  private handleBackdropClick = (): void => {\n    if (this.closeOnBackdrop) {\n      this.hide('backdrop');\n    }\n  };\n\n  /**\n   * Handles click events on the close button.\n   * Closes the drawer with reason 'close-button'.\n   */\n  private handleCloseClick = (): void => {\n    this.hide('close-button');\n  };\n\n  /**\n   * Handles slot change events for the header slot.\n   * Updates hasHeader state to control header visibility.\n   *\n   * @param event - The slotchange event\n   */\n  private handleHeaderSlotChange = (event: Event): void => {\n    const slot = event.target as HTMLElement & {\n      assignedNodes: (options?: { flatten?: boolean }) => Node[];\n    };\n    this.hasHeader = slot.assignedNodes({ flatten: true }).length > 0;\n  };\n\n  /**\n   * Handles slot change events for the footer slot.\n   * Updates hasFooter state to control footer visibility.\n   *\n   * @param event - The slotchange event\n   */\n  private handleFooterSlotChange = (event: Event): void => {\n    const slot = event.target as HTMLElement & {\n      assignedNodes: (options?: { flatten?: boolean }) => Node[];\n    };\n    this.hasFooter = slot.assignedNodes({ flatten: true }).length > 0;\n  };\n\n  render() {\n    const isHorizontal =\n      this.placement === 'left' || this.placement === 'right';\n\n    // Inline mode: always visible, no backdrop, no overlay behavior\n    if (this.inline) {\n      return html`\n        <aside\n          class=\"drawer drawer--inline drawer--${this.placement} drawer--${this\n            .size} ${isHorizontal ? 'drawer--horizontal' : 'drawer--vertical'}\"\n          part=\"drawer\"\n          role=\"complementary\"\n          aria-label=${this.label || nothing}\n        >\n          <div class=\"panel\" part=\"panel\">\n            ${this.hasHeader || this.showClose\n              ? html`\n                  <header class=\"header\" part=\"header\">\n                    <slot\n                      name=\"header\"\n                      @slotchange=${this.handleHeaderSlotChange}\n                    ></slot>\n                  </header>\n                `\n              : html`<slot\n                  name=\"header\"\n                  @slotchange=${this.handleHeaderSlotChange}\n                ></slot>`}\n            <div class=\"body\" part=\"body\">\n              <slot></slot>\n            </div>\n            ${this.hasFooter\n              ? html`\n                  <footer class=\"footer\" part=\"footer\">\n                    <slot\n                      name=\"footer\"\n                      @slotchange=${this.handleFooterSlotChange}\n                    ></slot>\n                  </footer>\n                `\n              : html`<slot\n                  name=\"footer\"\n                  @slotchange=${this.handleFooterSlotChange}\n                ></slot>`}\n          </div>\n        </aside>\n      `;\n    }\n\n    // Overlay mode: slide-in panel with backdrop\n    return html`\n      <div\n        class=\"drawer drawer--overlay drawer--${this.placement} drawer--${this\n          .size} ${isHorizontal\n          ? 'drawer--horizontal'\n          : 'drawer--vertical'} ${this.open ? 'drawer--open' : ''}\"\n        part=\"drawer\"\n      >\n        ${this.showBackdrop\n          ? html`\n              <div\n                class=\"backdrop ${this.open ? 'backdrop--visible' : ''}\"\n                part=\"backdrop\"\n                @click=${this.handleBackdropClick}\n                aria-hidden=\"true\"\n              ></div>\n            `\n          : nothing}\n        <aside\n          class=\"panel ${this.open ? 'panel--open' : ''}\"\n          part=\"panel\"\n          role=\"dialog\"\n          aria-modal=\"true\"\n          aria-label=${this.label || nothing}\n          tabindex=\"-1\"\n        >\n          <header\n            class=\"header ${this.hasHeader || this.showClose\n              ? ''\n              : 'header--empty'}\"\n            part=\"header\"\n          >\n            <slot\n              name=\"header\"\n              @slotchange=${this.handleHeaderSlotChange}\n            ></slot>\n            ${this.showClose\n              ? html`\n                  <button\n                    class=\"close-button\"\n                    part=\"close-button\"\n                    type=\"button\"\n                    aria-label=\"Close drawer\"\n                    @click=${this.handleCloseClick}\n                  >\n                    <bp-icon .svg=${closeSvg} size=\"sm\"></bp-icon>\n                  </button>\n                `\n              : nothing}\n          </header>\n          <div class=\"body\" part=\"body\">\n            <slot></slot>\n          </div>\n          ${this.hasFooter\n            ? html`\n                <footer class=\"footer\" part=\"footer\">\n                  <slot\n                    name=\"footer\"\n                    @slotchange=${this.handleFooterSlotChange}\n                  ></slot>\n                </footer>\n              `\n            : html`<slot\n                name=\"footer\"\n                @slotchange=${this.handleFooterSlotChange}\n              ></slot>`}\n        </aside>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'bp-drawer': BpDrawer;\n  }\n}\n"],"names":["drawerStyles","css","BpDrawer","LitElement","event","slot","reason","changedProperties","isHorizontal","html","nothing","closeSvg","__decorateClass","property","value","booleanConverter","customElement"],"mappings":";;;;AAEO,MAAMA,IAAeC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA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"}
+{"version":3,"file":"drawer.js","sources":["../../source/components/drawer/drawer.style.ts","../../source/components/drawer/drawer.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const drawerStyles = css`\n  /* Base styles */\n  :host {\n    display: contents;\n  }\n\n  .drawer {\n    font-family: var(--bp-font-family);\n    font-size: var(--bp-font-size-base);\n    color: var(--bp-color-text);\n  }\n\n  /* Overlay mode */\n  .drawer--overlay {\n    position: fixed;\n    inset: 0;\n    z-index: var(--bp-z-modal);\n    pointer-events: none;\n  }\n\n  .drawer--overlay.drawer--open {\n    pointer-events: auto;\n  }\n\n  /* Backdrop */\n  .backdrop {\n    position: absolute;\n    inset: 0;\n    background-color: oklch(from var(--bp-color-text) l c h / 0.5);\n    opacity: 0;\n    transition: opacity var(--bp-transition-base) ease-out;\n  }\n\n  .backdrop--visible {\n    opacity: 1;\n  }\n\n  /* Panel base */\n  .panel {\n    position: absolute;\n    display: flex;\n    flex-direction: column;\n    background-color: var(--bp-color-surface);\n    box-shadow: var(--bp-shadow-xl);\n    transition: transform var(--bp-transition-base) ease-out;\n    overflow: hidden;\n  }\n\n  .drawer--overlay .panel:focus {\n    outline: none;\n  }\n\n  /* Horizontal drawers (left/right) */\n  .drawer--horizontal .panel {\n    top: 0;\n    bottom: 0;\n    height: 100%;\n  }\n\n  .drawer--left .panel {\n    left: 0;\n    transform: translateX(-100%);\n  }\n\n  .drawer--left .panel--open {\n    transform: translateX(0);\n  }\n\n  .drawer--right .panel {\n    right: 0;\n    transform: translateX(100%);\n  }\n\n  .drawer--right .panel--open {\n    transform: translateX(0);\n  }\n\n  /* Vertical drawers (top/bottom) */\n  .drawer--vertical .panel {\n    left: 0;\n    right: 0;\n    width: 100%;\n  }\n\n  .drawer--top .panel {\n    top: 0;\n    transform: translateY(-100%);\n  }\n\n  .drawer--top .panel--open {\n    transform: translateY(0);\n  }\n\n  .drawer--bottom .panel {\n    bottom: 0;\n    transform: translateY(100%);\n  }\n\n  .drawer--bottom .panel--open {\n    transform: translateY(0);\n  }\n\n  /* Sizes - horizontal (width) */\n  .drawer--horizontal.drawer--sm .panel {\n    width: calc(var(--bp-spacing-24) * 3);\n  }\n\n  .drawer--horizontal.drawer--md .panel {\n    width: calc(var(--bp-spacing-24) * 4 + var(--bp-spacing-16));\n  }\n\n  .drawer--horizontal.drawer--lg .panel {\n    width: var(--bp-breakpoint-sm);\n  }\n\n  .drawer--horizontal.drawer--full .panel {\n    width: 100%;\n  }\n\n  /* Sizes - vertical (height) */\n  .drawer--vertical.drawer--sm .panel {\n    height: calc(var(--bp-spacing-24) * 2);\n  }\n\n  .drawer--vertical.drawer--md .panel {\n    height: calc(var(--bp-spacing-24) * 3 + var(--bp-spacing-8));\n  }\n\n  .drawer--vertical.drawer--lg .panel {\n    height: calc(var(--bp-spacing-24) * 5);\n  }\n\n  .drawer--vertical.drawer--full .panel {\n    height: 100%;\n  }\n\n  /* Header */\n  .header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: var(--bp-spacing-4);\n    padding: var(--bp-spacing-4) var(--bp-spacing-5);\n    border-bottom: var(--bp-border-width) solid var(--bp-color-border);\n    flex-shrink: 0;\n  }\n\n  .header--empty {\n    display: none;\n  }\n\n  .header ::slotted(*) {\n    margin: 0;\n    font-size: var(--bp-font-size-lg);\n    font-weight: var(--bp-font-weight-semibold);\n  }\n\n  /* Body */\n  .body {\n    flex: 1;\n    overflow-y: auto;\n    padding: var(--bp-spacing-5);\n  }\n\n  /* Footer */\n  .footer {\n    display: flex;\n    align-items: center;\n    gap: var(--bp-spacing-4);\n    padding: var(--bp-spacing-4) var(--bp-spacing-5);\n    border-top: var(--bp-border-width) solid var(--bp-color-border);\n    flex-shrink: 0;\n  }\n\n  /* Close button */\n  .close-button {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 44px;\n    height: 44px;\n    padding: 0;\n    margin-left: auto;\n    background: transparent;\n    border: none;\n    border-radius: var(--bp-border-radius-sm);\n    color: var(--bp-color-text-muted);\n    cursor: pointer;\n    transition:\n      background-color var(--bp-transition-fast),\n      color var(--bp-transition-fast),\n      transform var(--bp-transition-fast);\n  }\n\n  .close-button:hover {\n    background-color: var(--bp-color-surface-subdued);\n    color: var(--bp-color-text);\n  }\n\n  .close-button:active {\n    background-color: var(--bp-color-surface-pressed);\n    transform: translateY(1px);\n  }\n\n  .close-button:focus {\n    outline: var(--bp-focus-width) var(--bp-focus-style) var(--bp-color-focus);\n    outline-offset: var(--bp-focus-offset);\n  }\n\n  .close-button:focus:not(:focus-visible) {\n    outline: none;\n  }\n\n  .close-button: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\n  /* Inline mode - static sidebar */\n  .drawer--inline {\n    display: block;\n  }\n\n  .drawer--inline .panel {\n    position: relative;\n    transform: none;\n    box-shadow: none;\n    border: var(--bp-border-width) solid var(--bp-color-border);\n    border-radius: var(--bp-border-radius-md);\n  }\n\n  .drawer--inline.drawer--horizontal {\n    height: 100%;\n  }\n\n  .drawer--inline.drawer--vertical {\n    width: 100%;\n  }\n\n  /* Inline sizes - horizontal */\n  .drawer--inline.drawer--horizontal.drawer--small {\n    width: calc(var(--bp-spacing-24) * 3);\n  }\n\n  .drawer--inline.drawer--horizontal.drawer--medium {\n    width: calc(var(--bp-spacing-24) * 4 + var(--bp-spacing-16));\n  }\n\n  .drawer--inline.drawer--horizontal.drawer--large {\n    width: var(--bp-breakpoint-sm);\n  }\n\n  .drawer--inline.drawer--horizontal.drawer--full {\n    width: 100%;\n  }\n\n  /* Inline sizes - vertical */\n  .drawer--inline.drawer--vertical.drawer--small .panel {\n    height: calc(var(--bp-spacing-24) * 2);\n  }\n\n  .drawer--inline.drawer--vertical.drawer--medium .panel {\n    height: calc(var(--bp-spacing-24) * 3 + var(--bp-spacing-8));\n  }\n\n  .drawer--inline.drawer--vertical.drawer--large .panel {\n    height: calc(var(--bp-spacing-24) * 5);\n  }\n\n  .drawer--inline.drawer--vertical.drawer--full .panel {\n    height: auto;\n  }\n\n  /* Border positioning for inline drawers */\n  .drawer--inline.drawer--left .panel {\n    border-left: none;\n    border-top-left-radius: 0;\n    border-bottom-left-radius: 0;\n  }\n\n  .drawer--inline.drawer--right .panel {\n    border-right: none;\n    border-top-right-radius: 0;\n    border-bottom-right-radius: 0;\n  }\n\n  .drawer--inline.drawer--top .panel {\n    border-top: none;\n    border-top-left-radius: 0;\n    border-top-right-radius: 0;\n  }\n\n  .drawer--inline.drawer--bottom .panel {\n    border-bottom: none;\n    border-bottom-left-radius: 0;\n    border-bottom-right-radius: 0;\n  }\n\n  /* Reduced motion */\n  @media (prefers-reduced-motion: reduce) {\n    .panel {\n      transition: none;\n    }\n\n    .backdrop {\n      transition: none;\n    }\n  }\n`;\n","import { LitElement, html, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { drawerStyles } from './drawer.style.js';\nimport { booleanConverter } from '../../utilities/boolean-converter.js';\nimport { closeSvg } from '../icon/icons/entries/close.js';\nimport { BpIcon } from '../icon/icon.js';\n\nexport type DrawerPlacement = 'left' | 'right' | 'top' | 'bottom';\nexport type DrawerSize = 'sm' | 'md' | 'lg' | 'full';\n\n/**\n * A slide-in panel component that can appear from any edge of the viewport.\n *\n * @fires bp-open - Fired when the drawer opens\n * @fires bp-close - Fired when the drawer closes (includes reason: 'escape' | 'backdrop' | 'close-button' | 'api')\n * @fires bp-after-open - Fired after open animation completes\n * @fires bp-after-close - Fired after close animation completes\n *\n * @slot - Default slot for drawer content\n * @slot header - Optional header content\n * @slot footer - Optional footer content\n *\n * @csspart drawer - The drawer container\n * @csspart backdrop - The backdrop overlay (when not inline)\n * @csspart panel - The drawer panel\n * @csspart header - The header section\n * @csspart body - The body/content section\n * @csspart footer - The footer section\n * @csspart close-button - The close button\n */\n@customElement('bp-drawer')\nexport class BpDrawer 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 the drawer is open */\n  @property({ type: Boolean, reflect: true }) declare open: boolean;\n\n  /** Which edge the drawer slides in from */\n  @property({\n    type: String,\n    reflect: true,\n    converter: {\n      fromAttribute: (value: string | null) => {\n        const valid = ['left', 'right', 'top', 'bottom'];\n        return value && valid.includes(value)\n          ? (value as DrawerPlacement)\n          : 'left';\n      },\n    },\n  })\n  declare placement: DrawerPlacement;\n\n  /** Size of the drawer (width for left/right, height for top/bottom) */\n  @property({\n    type: String,\n    reflect: true,\n    converter: {\n      fromAttribute: (value: string | null) => {\n        const valid = ['sm', 'md', 'lg', 'full'];\n        return value && valid.includes(value) ? (value as DrawerSize) : 'md';\n      },\n    },\n  })\n  declare size: DrawerSize;\n\n  /** Whether to show the close button */\n  @property({\n    converter: booleanConverter,\n    attribute: 'show-close',\n    reflect: true,\n  })\n  declare showClose: boolean;\n\n  /** Whether clicking the backdrop closes the drawer */\n  @property({\n    converter: booleanConverter,\n    attribute: 'close-on-backdrop',\n    reflect: true,\n  })\n  declare closeOnBackdrop: boolean;\n\n  /** Whether pressing Escape closes the drawer */\n  @property({\n    converter: booleanConverter,\n    attribute: 'close-on-escape',\n    reflect: true,\n  })\n  declare closeOnEscape: boolean;\n\n  /** Whether to show the backdrop overlay */\n  @property({\n    converter: booleanConverter,\n    attribute: 'show-backdrop',\n    reflect: true,\n  })\n  declare showBackdrop: boolean;\n\n  /** Accessible label for the drawer */\n  @property({ type: String }) declare label: string;\n\n  /**\n   * Whether the drawer is rendered inline (always visible, part of document flow).\n   * When true, the drawer acts as a static sidebar without overlay behavior.\n   */\n  @property({ type: Boolean, reflect: true }) declare inline: boolean;\n\n  /** Whether the drawer has a header slot content */\n  @property({ type: Boolean, attribute: false }) private hasHeader = false;\n\n  /** Whether the drawer has a footer slot content */\n  @property({ type: Boolean, attribute: false }) private hasFooter = false;\n\n  private previouslyFocusedElement: HTMLElement | null = null;\n\n  static styles = [drawerStyles];\n\n  constructor() {\n    super();\n    this.open = false;\n    this.placement = 'left';\n    this.size = 'md';\n    this.showClose = true;\n    this.closeOnBackdrop = true;\n    this.closeOnEscape = true;\n    this.showBackdrop = true;\n    this.label = '';\n    this.inline = false;\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.addEventListener('keydown', this.handleKeyDown);\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.removeEventListener('keydown', this.handleKeyDown);\n  }\n\n  /**\n   * Open the drawer.\n   * Sets open property to true and manages focus/scroll behavior.\n   *\n   * @fires bp-open - Emitted when the drawer opens\n   * @fires bp-after-open - Emitted after open animation completes\n   */\n  show(): void {\n    if (this.open) return;\n    this.open = true;\n  }\n\n  /**\n   * Close the drawer.\n   * Sets open property to false if bp-close event is not prevented.\n   *\n   * @param reason - The reason the drawer was closed\n   * @fires bp-close - Emitted when the drawer closes (cancelable)\n   * @fires bp-after-close - Emitted after close animation completes\n   */\n  hide(reason: 'escape' | 'backdrop' | 'close-button' | 'api' = 'api'): void {\n    if (!this.open) return;\n\n    const event = new CustomEvent('bp-close', {\n      detail: { reason },\n      bubbles: true,\n      composed: true,\n      cancelable: true,\n    });\n\n    this.dispatchEvent(event);\n\n    if (!event.defaultPrevented) {\n      this.open = false;\n    }\n  }\n\n  /**\n   * Toggle the drawer open/closed state.\n   * Calls hide() if open, show() if closed.\n   */\n  toggle(): void {\n    if (this.open) {\n      this.hide('api');\n    } else {\n      this.show();\n    }\n  }\n\n  protected updated(changedProperties: Map<string, unknown>): void {\n    if (changedProperties.has('open')) {\n      if (this.open) {\n        this.handleOpen();\n      } else {\n        this.handleClose();\n      }\n    }\n  }\n\n  private handleOpen(): void {\n    if (!this.inline) {\n      // Store currently focused element\n      this.previouslyFocusedElement = document.activeElement as HTMLElement;\n\n      // Prevent body scroll\n      document.body.style.overflow = 'hidden';\n    }\n\n    this.dispatchEvent(\n      new CustomEvent('bp-open', {\n        bubbles: true,\n        composed: true,\n      })\n    );\n\n    // Focus the drawer panel for accessibility\n    this.updateComplete.then(() => {\n      const panel = this.shadowRoot?.querySelector('.panel') as HTMLElement;\n      panel?.focus();\n\n      this.dispatchEvent(\n        new CustomEvent('bp-after-open', {\n          bubbles: true,\n          composed: true,\n        })\n      );\n    });\n  }\n\n  private handleClose(): void {\n    if (!this.inline) {\n      // Restore body scroll\n      document.body.style.overflow = '';\n\n      // Restore focus\n      if (this.previouslyFocusedElement) {\n        this.previouslyFocusedElement.focus();\n        this.previouslyFocusedElement = null;\n      }\n    }\n\n    this.updateComplete.then(() => {\n      this.dispatchEvent(\n        new CustomEvent('bp-after-close', {\n          bubbles: true,\n          composed: true,\n        })\n      );\n    });\n  }\n\n  private handleKeyDown = (event: KeyboardEvent): void => {\n    if (\n      event.key === 'Escape' &&\n      this.closeOnEscape &&\n      this.open &&\n      !this.inline\n    ) {\n      event.preventDefault();\n      this.hide('escape');\n    }\n  };\n\n  /**\n   * Handles click events on the backdrop overlay.\n   * Closes the drawer if closeOnBackdrop is true.\n   */\n  private handleBackdropClick = (): void => {\n    if (this.closeOnBackdrop) {\n      this.hide('backdrop');\n    }\n  };\n\n  /**\n   * Handles click events on the close button.\n   * Closes the drawer with reason 'close-button'.\n   */\n  private handleCloseClick = (): void => {\n    this.hide('close-button');\n  };\n\n  /**\n   * Handles slot change events for the header slot.\n   * Updates hasHeader state to control header visibility.\n   *\n   * @param event - The slotchange event\n   */\n  private handleHeaderSlotChange = (event: Event): void => {\n    const slot = event.target as HTMLElement & {\n      assignedNodes: (options?: { flatten?: boolean }) => Node[];\n    };\n    this.hasHeader = slot.assignedNodes({ flatten: true }).length > 0;\n  };\n\n  /**\n   * Handles slot change events for the footer slot.\n   * Updates hasFooter state to control footer visibility.\n   *\n   * @param event - The slotchange event\n   */\n  private handleFooterSlotChange = (event: Event): void => {\n    const slot = event.target as HTMLElement & {\n      assignedNodes: (options?: { flatten?: boolean }) => Node[];\n    };\n    this.hasFooter = slot.assignedNodes({ flatten: true }).length > 0;\n  };\n\n  render() {\n    const isHorizontal =\n      this.placement === 'left' || this.placement === 'right';\n\n    // Inline mode: always visible, no backdrop, no overlay behavior\n    if (this.inline) {\n      return html`\n        <aside\n          class=\"drawer drawer--inline drawer--${this.placement} drawer--${this\n            .size} ${isHorizontal ? 'drawer--horizontal' : 'drawer--vertical'}\"\n          part=\"drawer\"\n          role=\"complementary\"\n          aria-label=${this.label || nothing}\n        >\n          <div class=\"panel\" part=\"panel\">\n            ${this.hasHeader || this.showClose\n              ? html`\n                  <header class=\"header\" part=\"header\">\n                    <slot\n                      name=\"header\"\n                      @slotchange=${this.handleHeaderSlotChange}\n                    ></slot>\n                  </header>\n                `\n              : html`<slot\n                  name=\"header\"\n                  @slotchange=${this.handleHeaderSlotChange}\n                ></slot>`}\n            <div class=\"body\" part=\"body\">\n              <slot></slot>\n            </div>\n            ${this.hasFooter\n              ? html`\n                  <footer class=\"footer\" part=\"footer\">\n                    <slot\n                      name=\"footer\"\n                      @slotchange=${this.handleFooterSlotChange}\n                    ></slot>\n                  </footer>\n                `\n              : html`<slot\n                  name=\"footer\"\n                  @slotchange=${this.handleFooterSlotChange}\n                ></slot>`}\n          </div>\n        </aside>\n      `;\n    }\n\n    // Overlay mode: slide-in panel with backdrop\n    return html`\n      <div\n        class=\"drawer drawer--overlay drawer--${this.placement} drawer--${this\n          .size} ${isHorizontal\n          ? 'drawer--horizontal'\n          : 'drawer--vertical'} ${this.open ? 'drawer--open' : ''}\"\n        part=\"drawer\"\n      >\n        ${this.showBackdrop\n          ? html`\n              <div\n                class=\"backdrop ${this.open ? 'backdrop--visible' : ''}\"\n                part=\"backdrop\"\n                @click=${this.handleBackdropClick}\n                aria-hidden=\"true\"\n              ></div>\n            `\n          : nothing}\n        <aside\n          class=\"panel ${this.open ? 'panel--open' : ''}\"\n          part=\"panel\"\n          role=\"dialog\"\n          aria-modal=\"true\"\n          aria-label=${this.label || nothing}\n          tabindex=\"-1\"\n        >\n          <header\n            class=\"header ${this.hasHeader || this.showClose\n              ? ''\n              : 'header--empty'}\"\n            part=\"header\"\n          >\n            <slot\n              name=\"header\"\n              @slotchange=${this.handleHeaderSlotChange}\n            ></slot>\n            ${this.showClose\n              ? html`\n                  <button\n                    class=\"close-button\"\n                    part=\"close-button\"\n                    type=\"button\"\n                    aria-label=\"Close drawer\"\n                    @click=${this.handleCloseClick}\n                  >\n                    <bp-icon .svg=${closeSvg} size=\"sm\"></bp-icon>\n                  </button>\n                `\n              : nothing}\n          </header>\n          <div class=\"body\" part=\"body\">\n            <slot></slot>\n          </div>\n          ${this.hasFooter\n            ? html`\n                <footer class=\"footer\" part=\"footer\">\n                  <slot\n                    name=\"footer\"\n                    @slotchange=${this.handleFooterSlotChange}\n                  ></slot>\n                </footer>\n              `\n            : html`<slot\n                name=\"footer\"\n                @slotchange=${this.handleFooterSlotChange}\n              ></slot>`}\n        </aside>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'bp-drawer': BpDrawer;\n  }\n}\n"],"names":["drawerStyles","css","BpDrawer","LitElement","event","slot","reason","changedProperties","isHorizontal","html","nothing","closeSvg","BpIcon","__decorateClass","property","value","booleanConverter","customElement"],"mappings":";;;;;AAEO,MAAMA,IAAeC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAA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"}

package/dist/components/notification/notification.d.ts

@@ -1,5 +1,5 @@
 import { LitElement, nothing } from 'lit';
-import '../icon/icon.js';
+import { BpIcon } from '../icon/icon.js';
 /**
  * A notification/toast component for displaying non-blocking messages.
  * Notifications can be dismissed manually or auto-close after a duration.
@@ -20,6 +20,11 @@ import '../icon/icon.js';
  * @csspart close-button - The close button
  */
 export declare class BpNotification 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)[];
     /** The notification variant */
     variant: 'info' | 'success' | 'warning' | 'error';
     /** Whether the notification is visible */

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

@@ -1 +1 @@
-{"version":3,"file":"notification.d.ts","sourceRoot":"","sources":["../../../source/components/notification/notification.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,OAAO,EAAE,MAAM,KAAK,CAAC;AAQhD,OAAO,iBAAiB,CAAC;AAEzB;;;;;;;;;;;;;;;;;;GAkBG;AACH,qBACa,cAAe,SAAQ,UAAU;IAC5C,+BAA+B;IAWvB,OAAO,EAAE,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;IAE1D,0CAA0C;IACU,IAAI,EAAE,OAAO,CAAC;IAElE,gDAAgD;IAExC,QAAQ,EAAE,OAAO,CAAC;IAE1B,qEAAqE;IACjC,QAAQ,EAAE,MAAM,CAAC;IAErD,gCAAgC;IACI,KAAK,EAAE,MAAM,CAAC;IAElD,0CAA0C;IACN,OAAO,EAAE,MAAM,CAAC;IAEpD;;;OAGG;IAiBK,QAAQ,EACZ,UAAU,GACV,YAAY,GACZ,WAAW,GACX,aAAa,GACb,eAAe,GACf,cAAc,CAAC;IAEV,OAAO,CAAC,cAAc,CAAuB;IAC7C,OAAO,CAAC,aAAa,CAAa;IAClC,OAAO,CAAC,WAAW,CAAkB;IACrC,OAAO,CAAC,SAAS,CAAkB;IAE5C,MAAM,CAAC,MAAM,4BAAwB;;IAarC,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAc/C,oBAAoB;IAKpB,4BAA4B;IAC5B,IAAI;IAKJ,4BAA4B;IAC5B,IAAI;IAKJ;;;OAGG;IACH,OAAO,CAAC,UAAU;IAkBlB;;;OAGG;IACH,OAAO,CAAC,WAAW;IAOnB;;;OAGG;IACH,OAAO,CAAC,mBAAmB;IAW3B;;OAEG;IACH,OAAO,CAAC,mBAAmB;IAO3B;;;OAGG;IACH,OAAO,CAAC,mBAAmB;IAQ3B;;OAEG;IACH,OAAO,CAAC,oBAAoB;IAS5B;;;OAGG;IACH,OAAO,CAAC,gBAAgB;IAOxB;;;OAGG;IACH,OAAO,CAAC,aAAa;IAMrB;;;OAGG;IACH,OAAO,CAAC,cAAc;IAatB,MAAM;CA4DP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,cAAc,CAAC;KACnC;CACF"}
+{"version":3,"file":"notification.d.ts","sourceRoot":"","sources":["../../../source/components/notification/notification.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,OAAO,EAAE,MAAM,KAAK,CAAC;AAQhD,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AAEzC;;;;;;;;;;;;;;;;;;GAkBG;AACH,qBACa,cAAe,SAAQ,UAAU;IAC5C;;;OAGG;IACH,MAAM,CAAC,YAAY,oBAAY;IAE/B,+BAA+B;IAWvB,OAAO,EAAE,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;IAE1D,0CAA0C;IACU,IAAI,EAAE,OAAO,CAAC;IAElE,gDAAgD;IAExC,QAAQ,EAAE,OAAO,CAAC;IAE1B,qEAAqE;IACjC,QAAQ,EAAE,MAAM,CAAC;IAErD,gCAAgC;IACI,KAAK,EAAE,MAAM,CAAC;IAElD,0CAA0C;IACN,OAAO,EAAE,MAAM,CAAC;IAEpD;;;OAGG;IAiBK,QAAQ,EACZ,UAAU,GACV,YAAY,GACZ,WAAW,GACX,aAAa,GACb,eAAe,GACf,cAAc,CAAC;IAEV,OAAO,CAAC,cAAc,CAAuB;IAC7C,OAAO,CAAC,aAAa,CAAa;IAClC,OAAO,CAAC,WAAW,CAAkB;IACrC,OAAO,CAAC,SAAS,CAAkB;IAE5C,MAAM,CAAC,MAAM,4BAAwB;;IAarC,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAc/C,oBAAoB;IAKpB,4BAA4B;IAC5B,IAAI;IAKJ,4BAA4B;IAC5B,IAAI;IAKJ;;;OAGG;IACH,OAAO,CAAC,UAAU;IAkBlB;;;OAGG;IACH,OAAO,CAAC,WAAW;IAOnB;;;OAGG;IACH,OAAO,CAAC,mBAAmB;IAW3B;;OAEG;IACH,OAAO,CAAC,mBAAmB;IAO3B;;;OAGG;IACH,OAAO,CAAC,mBAAmB;IAQ3B;;OAEG;IACH,OAAO,CAAC,oBAAoB;IAS5B;;;OAGG;IACH,OAAO,CAAC,gBAAgB;IAOxB;;;OAGG;IACH,OAAO,CAAC,aAAa;IAMrB;;;OAGG;IACH,OAAO,CAAC,cAAc;IAatB,MAAM;CA4DP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,cAAc,CAAC;KACnC;CACF"}

package/dist/components/notification.js

@@ -5,7 +5,8 @@ import { checkSvg as v } from "../icons/check.js";
 import { warningCircleSvg as g } from "../icons/warning-circle.js";
 import { crossSvg as _ } from "../icons/cross.js";
 import { infoCircleSvg as y } from "../icons/info-circle.js";
-const C = h`
+import { BpIcon as C } from "./icon.js";
+const w = h`
   /* Base styles */
   :host {
     display: block;
@@ -219,10 +220,10 @@ const C = h`
     right: 0;
   }
 `;
-var w = Object.defineProperty, T = Object.getOwnPropertyDescriptor, o = (t, r, l, a) => {
-  for (var e = a > 1 ? void 0 : a ? T(r, l) : r, p = t.length - 1, f; p >= 0; p--)
+var T = Object.defineProperty, x = Object.getOwnPropertyDescriptor, o = (t, r, l, a) => {
+  for (var e = a > 1 ? void 0 : a ? x(r, l) : r, p = t.length - 1, f; p >= 0; p--)
     (f = t[p]) && (e = (a ? f(r, l, e) : f(e)) || e);
-  return a && e && w(r, l, e), e;
+  return a && e && T(r, l, e), e;
 };
 let i = class extends d {
   constructor() {
@@ -375,7 +376,8 @@ let i = class extends d {
     ` : u;
   }
 };
-i.styles = [C];
+i.dependencies = [C];
+i.styles = [w];
 o([
   n({
     type: String,

package/dist/components/notification.js.map

@@ -1 +1 @@
-{"version":3,"file":"notification.js","sources":["../../source/components/notification/notification.style.ts","../../source/components/notification/notification.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const notificationStyles = css`\n  /* Base styles */\n  :host {\n    display: block;\n  }\n\n  .notification {\n    display: flex;\n    align-items: flex-start;\n    gap: var(--bp-spacing-3);\n    padding: var(--bp-spacing-4);\n    background-color: var(--bp-color-surface-elevated);\n    border: var(--bp-border-width) solid var(--bp-color-border);\n    border-radius: var(--bp-border-radius-lg);\n    box-shadow: var(--bp-shadow-lg);\n    font-family: var(--bp-font-sans);\n    font-size: var(--bp-font-size-sm);\n    line-height: var(--bp-line-height-normal);\n    color: var(--bp-color-text);\n    max-width: 400px;\n    min-width: 300px;\n    animation: notification-slide-in var(--bp-duration-fast) var(--bp-ease-out);\n  }\n\n  @keyframes notification-slide-in {\n    from {\n      opacity: 0;\n      transform: translateY(calc(-1 * var(--bp-spacing-2)));\n    }\n    to {\n      opacity: 1;\n      transform: translateY(0);\n    }\n  }\n\n  @keyframes notification-slide-out {\n    from {\n      opacity: 1;\n      transform: translateY(0);\n    }\n    to {\n      opacity: 0;\n      transform: translateY(calc(-1 * var(--bp-spacing-2)));\n    }\n  }\n\n  .notification--exiting {\n    animation: notification-slide-out var(--bp-duration-fast) var(--bp-ease-in)\n      forwards;\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .notification {\n      animation: none;\n    }\n\n    .notification--exiting {\n      animation: none;\n      opacity: 0;\n    }\n  }\n\n  /* Icon */\n  .notification__icon {\n    flex-shrink: 0;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n\n  .notification__icon svg {\n    width: 100%;\n    height: 100%;\n  }\n\n  /* Content */\n  .notification__content {\n    flex: 1;\n    min-width: 0;\n  }\n\n  .notification__title {\n    font-weight: var(--bp-font-weight-semibold);\n    margin-bottom: var(--bp-spacing-1);\n    color: var(--bp-color-text-strong);\n  }\n\n  .notification__message {\n    color: var(--bp-color-text-muted);\n  }\n\n  /* Action */\n  .notification__action {\n    display: flex;\n    align-items: center;\n    gap: var(--bp-spacing-1);\n  }\n\n  .notification__action:empty {\n    display: none;\n  }\n\n  /* Close button */\n  .notification__close {\n    flex-shrink: 0;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: var(--bp-spacing-11);\n    height: var(--bp-spacing-11);\n    padding: 0;\n    margin: calc(-1 * var(--bp-spacing-2));\n    background: none;\n    border: none;\n    border-radius: var(--bp-border-radius-sm);\n    color: var(--bp-color-text-muted);\n    cursor: pointer;\n    transition:\n      color var(--bp-transition-fast),\n      background-color var(--bp-transition-fast);\n  }\n\n  .notification__close:hover {\n    color: var(--bp-color-text);\n    background-color: var(--bp-color-surface-subdued);\n  }\n\n  .notification__close: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\n  .notification__close svg {\n    width: var(--bp-spacing-4);\n    height: var(--bp-spacing-4);\n  }\n\n  /* Variants */\n  .notification--info {\n    border-left: var(--bp-spacing-1) solid var(--bp-color-info);\n  }\n\n  .notification--info .notification__icon {\n    color: var(--bp-color-info);\n  }\n\n  .notification--success {\n    border-left: var(--bp-spacing-1) solid var(--bp-color-success);\n  }\n\n  .notification--success .notification__icon {\n    color: var(--bp-color-success);\n  }\n\n  .notification--warning {\n    border-left: var(--bp-spacing-1) solid var(--bp-color-warning);\n  }\n\n  .notification--warning .notification__icon {\n    color: var(--bp-color-warning);\n  }\n\n  .notification--error {\n    border-left: var(--bp-spacing-1) solid var(--bp-color-error);\n  }\n\n  .notification--error .notification__icon {\n    color: var(--bp-color-error);\n  }\n\n  /* Position variants */\n  .notification--top-left,\n  .notification--top-center,\n  .notification--top-right,\n  .notification--bottom-left,\n  .notification--bottom-center,\n  .notification--bottom-right {\n    position: fixed;\n    z-index: 10000;\n    margin: var(--bp-spacing-4);\n  }\n\n  .notification--top-left {\n    top: 0;\n    left: 0;\n  }\n\n  .notification--top-center {\n    top: 0;\n    left: 50%;\n    transform: translateX(-50%);\n  }\n\n  .notification--top-right {\n    top: 0;\n    right: 0;\n  }\n\n  .notification--bottom-left {\n    bottom: 0;\n    left: 0;\n  }\n\n  .notification--bottom-center {\n    bottom: 0;\n    left: 50%;\n    transform: translateX(-50%);\n  }\n\n  .notification--bottom-right {\n    bottom: 0;\n    right: 0;\n  }\n`;\n","import { LitElement, html, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { notificationStyles } from './notification.style.js';\nimport { booleanConverter } from '../../utilities/boolean-converter.js';\nimport { checkSvg } from '../icon/icons/entries/check.js';\nimport { warningCircleSvg } from '../icon/icons/entries/warning-circle.js';\nimport { crossSvg } from '../icon/icons/entries/cross.js';\nimport { infoCircleSvg } from '../icon/icons/entries/info-circle.js';\nimport '../icon/icon.js';\n\n/**\n * A notification/toast component for displaying non-blocking messages.\n * Notifications can be dismissed manually or auto-close after a duration.\n *\n * @fires bp-close - Dispatched when the notification is closed\n * @fires bp-show - Dispatched when the notification becomes visible\n * @fires bp-hide - Dispatched when the notification is hidden\n *\n * @slot - Default slot for notification content\n * @slot icon - Custom icon to display\n * @slot action - Action buttons or links\n *\n * @csspart base - The notification container\n * @csspart icon - The icon container\n * @csspart content - The content area\n * @csspart message - The message text container\n * @csspart action - The action slot container\n * @csspart close-button - The close button\n */\n@customElement('bp-notification')\nexport class BpNotification extends LitElement {\n  /** The notification variant */\n  @property({\n    type: String,\n    reflect: true,\n    converter: {\n      fromAttribute: (value: string | null) => {\n        const valid = ['info', 'success', 'warning', 'error'];\n        return value && valid.includes(value) ? value : 'info';\n      },\n    },\n  })\n  declare variant: 'info' | 'success' | 'warning' | 'error';\n\n  /** Whether the notification is visible */\n  @property({ type: Boolean, reflect: true }) declare open: boolean;\n\n  /** Whether the notification can be dismissed */\n  @property({ converter: booleanConverter, reflect: true })\n  declare closable: boolean;\n\n  /** Duration in milliseconds before auto-close (0 = no auto-close) */\n  @property({ type: Number }) declare duration: number;\n\n  /** Title of the notification */\n  @property({ type: String }) declare title: string;\n\n  /** Message content of the notification */\n  @property({ type: String }) declare message: string;\n\n  /**\n   * Position of the notification on screen.\n   * Note: For multiple notifications, consider using a container component.\n   */\n  @property({\n    type: String,\n    converter: {\n      fromAttribute: (value: string | null) => {\n        const valid = [\n          'top-left',\n          'top-center',\n          'top-right',\n          'bottom-left',\n          'bottom-center',\n          'bottom-right',\n        ];\n        return value && valid.includes(value) ? value : 'top-right';\n      },\n    },\n  })\n  declare position:\n    | 'top-left'\n    | 'top-center'\n    | 'top-right'\n    | 'bottom-left'\n    | 'bottom-center'\n    | 'bottom-right';\n\n  @state() private autoCloseTimer: number | null = null;\n  @state() private remainingTime: number = 0;\n  @state() private timerPaused: boolean = false;\n  @state() private isExiting: boolean = false;\n\n  static styles = [notificationStyles];\n\n  constructor() {\n    super();\n    this.variant = 'info';\n    this.open = false;\n    this.closable = true;\n    this.duration = 0;\n    this.title = '';\n    this.message = '';\n    this.position = 'top-right';\n  }\n\n  updated(changedProperties: Map<string, unknown>) {\n    if (changedProperties.has('open')) {\n      if (this.open) {\n        this.handleOpen();\n      } else {\n        this.handleClose();\n      }\n    }\n\n    if (changedProperties.has('duration') && this.open) {\n      this.startAutoCloseTimer();\n    }\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.clearAutoCloseTimer();\n  }\n\n  /** Show the notification */\n  show() {\n    if (this.open) return;\n    this.open = true;\n  }\n\n  /** Hide the notification */\n  hide() {\n    if (!this.open) return;\n    this.open = false;\n  }\n\n  /**\n   * Handles the notification opening.\n   * Dispatches bp-show event, starts auto-close timer, and manages focus.\n   */\n  private handleOpen() {\n    this.isExiting = false;\n    this.dispatchEvent(\n      new CustomEvent('bp-show', { bubbles: true, composed: true })\n    );\n    this.startAutoCloseTimer();\n\n    // Focus close button for accessibility\n    this.updateComplete.then(() => {\n      if (this.closable) {\n        const closeButton = this.shadowRoot?.querySelector(\n          '.notification__close'\n        ) as HTMLElement;\n        closeButton?.focus();\n      }\n    });\n  }\n\n  /**\n   * Handles the notification closing.\n   * Clears auto-close timer and dispatches bp-hide event.\n   */\n  private handleClose() {\n    this.clearAutoCloseTimer();\n    this.dispatchEvent(\n      new CustomEvent('bp-hide', { bubbles: true, composed: true })\n    );\n  }\n\n  /**\n   * Starts the auto-close timer based on the duration property.\n   * Timer can be paused/resumed with pauseAutoCloseTimer/resumeAutoCloseTimer.\n   */\n  private startAutoCloseTimer() {\n    this.clearAutoCloseTimer();\n\n    if (this.duration > 0 && !this.timerPaused) {\n      this.remainingTime = this.duration;\n      this.autoCloseTimer = window.setTimeout(() => {\n        this.hide();\n      }, this.duration);\n    }\n  }\n\n  /**\n   * Clears the auto-close timer if it exists.\n   */\n  private clearAutoCloseTimer() {\n    if (this.autoCloseTimer) {\n      window.clearTimeout(this.autoCloseTimer);\n      this.autoCloseTimer = null;\n    }\n  }\n\n  /**\n   * Pauses the auto-close timer when user hovers or focuses.\n   * Allows users to read content or interact with actions.\n   */\n  private pauseAutoCloseTimer() {\n    if (this.autoCloseTimer && this.duration > 0) {\n      this.timerPaused = true;\n      window.clearTimeout(this.autoCloseTimer);\n      this.autoCloseTimer = null;\n    }\n  }\n\n  /**\n   * Resumes the auto-close timer with remaining time.\n   */\n  private resumeAutoCloseTimer() {\n    if (this.timerPaused && this.duration > 0) {\n      this.timerPaused = false;\n      this.autoCloseTimer = window.setTimeout(() => {\n        this.hide();\n      }, this.remainingTime);\n    }\n  }\n\n  /**\n   * Handles close button click.\n   * Hides notification and dispatches bp-close event.\n   */\n  private handleCloseClick() {\n    this.hide();\n    this.dispatchEvent(\n      new CustomEvent('bp-close', { bubbles: true, composed: true })\n    );\n  }\n\n  /**\n   * Handles keyboard events.\n   * Closes notification on Escape key if closable.\n   */\n  private handleKeydown(event: KeyboardEvent) {\n    if (event.key === 'Escape' && this.closable) {\n      this.handleCloseClick();\n    }\n  }\n\n  /**\n   * Returns the default icon for the notification variant.\n   * Uses the bp-icon component for consistency with the design system.\n   */\n  private getDefaultIcon() {\n    const variantIconSvg: Record<string, string> = {\n      success: checkSvg,\n      warning: warningCircleSvg,\n      error: crossSvg,\n      info: infoCircleSvg,\n    };\n    return html`<bp-icon\n      .svg=${variantIconSvg[this.variant]}\n      size=\"md\"\n    ></bp-icon>`;\n  }\n\n  render() {\n    if (!this.open) {\n      return nothing;\n    }\n\n    return html`\n      <div\n        class=\"notification notification--${this.variant} notification--${this\n          .position} ${this.isExiting\n          ? 'notification--exiting'\n          : 'notification--entering'}\"\n        part=\"base\"\n        role=\"alert\"\n        aria-live=${this.variant === 'error' ? 'assertive' : 'polite'}\n        @keydown=${this.handleKeydown}\n        @mouseenter=${this.pauseAutoCloseTimer}\n        @mouseleave=${this.resumeAutoCloseTimer}\n        @focusin=${this.pauseAutoCloseTimer}\n        @focusout=${this.resumeAutoCloseTimer}\n      >\n        <div class=\"notification__icon\" part=\"icon\">\n          <slot name=\"icon\">${this.getDefaultIcon()}</slot>\n        </div>\n\n        <div class=\"notification__content\" part=\"content\">\n          ${this.title\n            ? html`<div class=\"notification__title\">${this.title}</div>`\n            : nothing}\n          <div class=\"notification__message\" part=\"message\">\n            ${this.message || html`<slot></slot>`}\n          </div>\n        </div>\n\n        <div class=\"notification__action\" part=\"action\">\n          <slot name=\"action\"></slot>\n        </div>\n\n        ${this.closable\n          ? html`\n              <button\n                type=\"button\"\n                class=\"notification__close\"\n                part=\"close-button\"\n                aria-label=\"Close notification\"\n                @click=${this.handleCloseClick}\n              >\n                <svg\n                  viewBox=\"0 0 24 24\"\n                  fill=\"none\"\n                  stroke=\"currentColor\"\n                  stroke-width=\"2\"\n                >\n                  <path d=\"M18 6L6 18M6 6l12 12\" />\n                </svg>\n              </button>\n            `\n          : nothing}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'bp-notification': BpNotification;\n  }\n}\n"],"names":["notificationStyles","css","BpNotification","LitElement","changedProperties","event","html","checkSvg","warningCircleSvg","crossSvg","infoCircleSvg","nothing","__decorateClass","property","value","booleanConverter","state","customElement"],"mappings":"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"}
+{"version":3,"file":"notification.js","sources":["../../source/components/notification/notification.style.ts","../../source/components/notification/notification.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const notificationStyles = css`\n  /* Base styles */\n  :host {\n    display: block;\n  }\n\n  .notification {\n    display: flex;\n    align-items: flex-start;\n    gap: var(--bp-spacing-3);\n    padding: var(--bp-spacing-4);\n    background-color: var(--bp-color-surface-elevated);\n    border: var(--bp-border-width) solid var(--bp-color-border);\n    border-radius: var(--bp-border-radius-lg);\n    box-shadow: var(--bp-shadow-lg);\n    font-family: var(--bp-font-sans);\n    font-size: var(--bp-font-size-sm);\n    line-height: var(--bp-line-height-normal);\n    color: var(--bp-color-text);\n    max-width: 400px;\n    min-width: 300px;\n    animation: notification-slide-in var(--bp-duration-fast) var(--bp-ease-out);\n  }\n\n  @keyframes notification-slide-in {\n    from {\n      opacity: 0;\n      transform: translateY(calc(-1 * var(--bp-spacing-2)));\n    }\n    to {\n      opacity: 1;\n      transform: translateY(0);\n    }\n  }\n\n  @keyframes notification-slide-out {\n    from {\n      opacity: 1;\n      transform: translateY(0);\n    }\n    to {\n      opacity: 0;\n      transform: translateY(calc(-1 * var(--bp-spacing-2)));\n    }\n  }\n\n  .notification--exiting {\n    animation: notification-slide-out var(--bp-duration-fast) var(--bp-ease-in)\n      forwards;\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .notification {\n      animation: none;\n    }\n\n    .notification--exiting {\n      animation: none;\n      opacity: 0;\n    }\n  }\n\n  /* Icon */\n  .notification__icon {\n    flex-shrink: 0;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n\n  .notification__icon svg {\n    width: 100%;\n    height: 100%;\n  }\n\n  /* Content */\n  .notification__content {\n    flex: 1;\n    min-width: 0;\n  }\n\n  .notification__title {\n    font-weight: var(--bp-font-weight-semibold);\n    margin-bottom: var(--bp-spacing-1);\n    color: var(--bp-color-text-strong);\n  }\n\n  .notification__message {\n    color: var(--bp-color-text-muted);\n  }\n\n  /* Action */\n  .notification__action {\n    display: flex;\n    align-items: center;\n    gap: var(--bp-spacing-1);\n  }\n\n  .notification__action:empty {\n    display: none;\n  }\n\n  /* Close button */\n  .notification__close {\n    flex-shrink: 0;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: var(--bp-spacing-11);\n    height: var(--bp-spacing-11);\n    padding: 0;\n    margin: calc(-1 * var(--bp-spacing-2));\n    background: none;\n    border: none;\n    border-radius: var(--bp-border-radius-sm);\n    color: var(--bp-color-text-muted);\n    cursor: pointer;\n    transition:\n      color var(--bp-transition-fast),\n      background-color var(--bp-transition-fast);\n  }\n\n  .notification__close:hover {\n    color: var(--bp-color-text);\n    background-color: var(--bp-color-surface-subdued);\n  }\n\n  .notification__close: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\n  .notification__close svg {\n    width: var(--bp-spacing-4);\n    height: var(--bp-spacing-4);\n  }\n\n  /* Variants */\n  .notification--info {\n    border-left: var(--bp-spacing-1) solid var(--bp-color-info);\n  }\n\n  .notification--info .notification__icon {\n    color: var(--bp-color-info);\n  }\n\n  .notification--success {\n    border-left: var(--bp-spacing-1) solid var(--bp-color-success);\n  }\n\n  .notification--success .notification__icon {\n    color: var(--bp-color-success);\n  }\n\n  .notification--warning {\n    border-left: var(--bp-spacing-1) solid var(--bp-color-warning);\n  }\n\n  .notification--warning .notification__icon {\n    color: var(--bp-color-warning);\n  }\n\n  .notification--error {\n    border-left: var(--bp-spacing-1) solid var(--bp-color-error);\n  }\n\n  .notification--error .notification__icon {\n    color: var(--bp-color-error);\n  }\n\n  /* Position variants */\n  .notification--top-left,\n  .notification--top-center,\n  .notification--top-right,\n  .notification--bottom-left,\n  .notification--bottom-center,\n  .notification--bottom-right {\n    position: fixed;\n    z-index: 10000;\n    margin: var(--bp-spacing-4);\n  }\n\n  .notification--top-left {\n    top: 0;\n    left: 0;\n  }\n\n  .notification--top-center {\n    top: 0;\n    left: 50%;\n    transform: translateX(-50%);\n  }\n\n  .notification--top-right {\n    top: 0;\n    right: 0;\n  }\n\n  .notification--bottom-left {\n    bottom: 0;\n    left: 0;\n  }\n\n  .notification--bottom-center {\n    bottom: 0;\n    left: 50%;\n    transform: translateX(-50%);\n  }\n\n  .notification--bottom-right {\n    bottom: 0;\n    right: 0;\n  }\n`;\n","import { LitElement, html, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { notificationStyles } from './notification.style.js';\nimport { booleanConverter } from '../../utilities/boolean-converter.js';\nimport { checkSvg } from '../icon/icons/entries/check.js';\nimport { warningCircleSvg } from '../icon/icons/entries/warning-circle.js';\nimport { crossSvg } from '../icon/icons/entries/cross.js';\nimport { infoCircleSvg } from '../icon/icons/entries/info-circle.js';\nimport { BpIcon } from '../icon/icon.js';\n\n/**\n * A notification/toast component for displaying non-blocking messages.\n * Notifications can be dismissed manually or auto-close after a duration.\n *\n * @fires bp-close - Dispatched when the notification is closed\n * @fires bp-show - Dispatched when the notification becomes visible\n * @fires bp-hide - Dispatched when the notification is hidden\n *\n * @slot - Default slot for notification content\n * @slot icon - Custom icon to display\n * @slot action - Action buttons or links\n *\n * @csspart base - The notification container\n * @csspart icon - The icon container\n * @csspart content - The content area\n * @csspart message - The message text container\n * @csspart action - The action slot container\n * @csspart close-button - The close button\n */\n@customElement('bp-notification')\nexport class BpNotification 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  /** The notification variant */\n  @property({\n    type: String,\n    reflect: true,\n    converter: {\n      fromAttribute: (value: string | null) => {\n        const valid = ['info', 'success', 'warning', 'error'];\n        return value && valid.includes(value) ? value : 'info';\n      },\n    },\n  })\n  declare variant: 'info' | 'success' | 'warning' | 'error';\n\n  /** Whether the notification is visible */\n  @property({ type: Boolean, reflect: true }) declare open: boolean;\n\n  /** Whether the notification can be dismissed */\n  @property({ converter: booleanConverter, reflect: true })\n  declare closable: boolean;\n\n  /** Duration in milliseconds before auto-close (0 = no auto-close) */\n  @property({ type: Number }) declare duration: number;\n\n  /** Title of the notification */\n  @property({ type: String }) declare title: string;\n\n  /** Message content of the notification */\n  @property({ type: String }) declare message: string;\n\n  /**\n   * Position of the notification on screen.\n   * Note: For multiple notifications, consider using a container component.\n   */\n  @property({\n    type: String,\n    converter: {\n      fromAttribute: (value: string | null) => {\n        const valid = [\n          'top-left',\n          'top-center',\n          'top-right',\n          'bottom-left',\n          'bottom-center',\n          'bottom-right',\n        ];\n        return value && valid.includes(value) ? value : 'top-right';\n      },\n    },\n  })\n  declare position:\n    | 'top-left'\n    | 'top-center'\n    | 'top-right'\n    | 'bottom-left'\n    | 'bottom-center'\n    | 'bottom-right';\n\n  @state() private autoCloseTimer: number | null = null;\n  @state() private remainingTime: number = 0;\n  @state() private timerPaused: boolean = false;\n  @state() private isExiting: boolean = false;\n\n  static styles = [notificationStyles];\n\n  constructor() {\n    super();\n    this.variant = 'info';\n    this.open = false;\n    this.closable = true;\n    this.duration = 0;\n    this.title = '';\n    this.message = '';\n    this.position = 'top-right';\n  }\n\n  updated(changedProperties: Map<string, unknown>) {\n    if (changedProperties.has('open')) {\n      if (this.open) {\n        this.handleOpen();\n      } else {\n        this.handleClose();\n      }\n    }\n\n    if (changedProperties.has('duration') && this.open) {\n      this.startAutoCloseTimer();\n    }\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.clearAutoCloseTimer();\n  }\n\n  /** Show the notification */\n  show() {\n    if (this.open) return;\n    this.open = true;\n  }\n\n  /** Hide the notification */\n  hide() {\n    if (!this.open) return;\n    this.open = false;\n  }\n\n  /**\n   * Handles the notification opening.\n   * Dispatches bp-show event, starts auto-close timer, and manages focus.\n   */\n  private handleOpen() {\n    this.isExiting = false;\n    this.dispatchEvent(\n      new CustomEvent('bp-show', { bubbles: true, composed: true })\n    );\n    this.startAutoCloseTimer();\n\n    // Focus close button for accessibility\n    this.updateComplete.then(() => {\n      if (this.closable) {\n        const closeButton = this.shadowRoot?.querySelector(\n          '.notification__close'\n        ) as HTMLElement;\n        closeButton?.focus();\n      }\n    });\n  }\n\n  /**\n   * Handles the notification closing.\n   * Clears auto-close timer and dispatches bp-hide event.\n   */\n  private handleClose() {\n    this.clearAutoCloseTimer();\n    this.dispatchEvent(\n      new CustomEvent('bp-hide', { bubbles: true, composed: true })\n    );\n  }\n\n  /**\n   * Starts the auto-close timer based on the duration property.\n   * Timer can be paused/resumed with pauseAutoCloseTimer/resumeAutoCloseTimer.\n   */\n  private startAutoCloseTimer() {\n    this.clearAutoCloseTimer();\n\n    if (this.duration > 0 && !this.timerPaused) {\n      this.remainingTime = this.duration;\n      this.autoCloseTimer = window.setTimeout(() => {\n        this.hide();\n      }, this.duration);\n    }\n  }\n\n  /**\n   * Clears the auto-close timer if it exists.\n   */\n  private clearAutoCloseTimer() {\n    if (this.autoCloseTimer) {\n      window.clearTimeout(this.autoCloseTimer);\n      this.autoCloseTimer = null;\n    }\n  }\n\n  /**\n   * Pauses the auto-close timer when user hovers or focuses.\n   * Allows users to read content or interact with actions.\n   */\n  private pauseAutoCloseTimer() {\n    if (this.autoCloseTimer && this.duration > 0) {\n      this.timerPaused = true;\n      window.clearTimeout(this.autoCloseTimer);\n      this.autoCloseTimer = null;\n    }\n  }\n\n  /**\n   * Resumes the auto-close timer with remaining time.\n   */\n  private resumeAutoCloseTimer() {\n    if (this.timerPaused && this.duration > 0) {\n      this.timerPaused = false;\n      this.autoCloseTimer = window.setTimeout(() => {\n        this.hide();\n      }, this.remainingTime);\n    }\n  }\n\n  /**\n   * Handles close button click.\n   * Hides notification and dispatches bp-close event.\n   */\n  private handleCloseClick() {\n    this.hide();\n    this.dispatchEvent(\n      new CustomEvent('bp-close', { bubbles: true, composed: true })\n    );\n  }\n\n  /**\n   * Handles keyboard events.\n   * Closes notification on Escape key if closable.\n   */\n  private handleKeydown(event: KeyboardEvent) {\n    if (event.key === 'Escape' && this.closable) {\n      this.handleCloseClick();\n    }\n  }\n\n  /**\n   * Returns the default icon for the notification variant.\n   * Uses the bp-icon component for consistency with the design system.\n   */\n  private getDefaultIcon() {\n    const variantIconSvg: Record<string, string> = {\n      success: checkSvg,\n      warning: warningCircleSvg,\n      error: crossSvg,\n      info: infoCircleSvg,\n    };\n    return html`<bp-icon\n      .svg=${variantIconSvg[this.variant]}\n      size=\"md\"\n    ></bp-icon>`;\n  }\n\n  render() {\n    if (!this.open) {\n      return nothing;\n    }\n\n    return html`\n      <div\n        class=\"notification notification--${this.variant} notification--${this\n          .position} ${this.isExiting\n          ? 'notification--exiting'\n          : 'notification--entering'}\"\n        part=\"base\"\n        role=\"alert\"\n        aria-live=${this.variant === 'error' ? 'assertive' : 'polite'}\n        @keydown=${this.handleKeydown}\n        @mouseenter=${this.pauseAutoCloseTimer}\n        @mouseleave=${this.resumeAutoCloseTimer}\n        @focusin=${this.pauseAutoCloseTimer}\n        @focusout=${this.resumeAutoCloseTimer}\n      >\n        <div class=\"notification__icon\" part=\"icon\">\n          <slot name=\"icon\">${this.getDefaultIcon()}</slot>\n        </div>\n\n        <div class=\"notification__content\" part=\"content\">\n          ${this.title\n            ? html`<div class=\"notification__title\">${this.title}</div>`\n            : nothing}\n          <div class=\"notification__message\" part=\"message\">\n            ${this.message || html`<slot></slot>`}\n          </div>\n        </div>\n\n        <div class=\"notification__action\" part=\"action\">\n          <slot name=\"action\"></slot>\n        </div>\n\n        ${this.closable\n          ? html`\n              <button\n                type=\"button\"\n                class=\"notification__close\"\n                part=\"close-button\"\n                aria-label=\"Close notification\"\n                @click=${this.handleCloseClick}\n              >\n                <svg\n                  viewBox=\"0 0 24 24\"\n                  fill=\"none\"\n                  stroke=\"currentColor\"\n                  stroke-width=\"2\"\n                >\n                  <path d=\"M18 6L6 18M6 6l12 12\" />\n                </svg>\n              </button>\n            `\n          : nothing}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'bp-notification': BpNotification;\n  }\n}\n"],"names":["notificationStyles","css","BpNotification","LitElement","changedProperties","event","html","checkSvg","warningCircleSvg","crossSvg","infoCircleSvg","nothing","BpIcon","__decorateClass","property","value","booleanConverter","state","customElement"],"mappings":"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"}

package/dist/components/popover/popover.d.ts

@@ -1,5 +1,5 @@
 import { LitElement } from 'lit';
-import '../icon/icon.js';
+import { BpIcon } from '../icon/icon.js';
 export type PopoverPlacement = 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end';
 export type PopoverTrigger = 'click' | 'hover' | 'focus' | 'manual';
 /**
@@ -25,6 +25,7 @@ export type PopoverTrigger = 'click' | 'hover' | 'focus' | 'manual';
  * @csspart close-button - The close button (when showClose is true)
  */
 export declare class BpPopover extends LitElement {
+    static dependencies: (typeof BpIcon)[];
     /** Whether the popover is currently open */
     open: boolean;
     /** Placement of the popover relative to the trigger */

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

@@ -1 +1 @@
-{"version":3,"file":"popover.d.ts","sourceRoot":"","sources":["../../../source/components/popover/popover.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAiB,MAAM,KAAK,CAAC;AAKhD,OAAO,iBAAiB,CAAC;AAEzB,MAAM,MAAM,gBAAgB,GACxB,KAAK,GACL,WAAW,GACX,SAAS,GACT,QAAQ,GACR,cAAc,GACd,YAAY,GACZ,MAAM,GACN,YAAY,GACZ,UAAU,GACV,OAAO,GACP,aAAa,GACb,WAAW,CAAC;AAEhB,MAAM,MAAM,cAAc,GAAG,OAAO,GAAG,OAAO,GAAG,OAAO,GAAG,QAAQ,CAAC;AAEpE;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,qBACa,SAAU,SAAQ,UAAU;IACvC,4CAA4C;IACQ,IAAI,EAAE,OAAO,CAAC;IAElE,uDAAuD;IA0B/C,SAAS,EAAE,gBAAgB,CAAC;IAEpC,mCAAmC;IAiB3B,OAAO,EAAE,cAAc,CAAC;IAEhC,uDAAuD;IAClB,KAAK,EAAE,OAAO,CAAC;IAEpD,oDAAoD;IAE5C,SAAS,EAAE,OAAO,CAAC;IAE3B,kDAAkD;IAM1C,mBAAmB,EAAE,OAAO,CAAC;IAErC,iDAAiD;IAMzC,aAAa,EAAE,OAAO,CAAC;IAE/B,2DAA2D;IACvB,QAAQ,EAAE,MAAM,CAAC;IAErD,+DAA+D;IAEvD,SAAS,EAAE,MAAM,CAAC;IAE1B,8DAA8D;IAEtD,SAAS,EAAE,MAAM,CAAC;IAE1B,sCAAsC;IACD,QAAQ,EAAE,OAAO,CAAC;IAEvD,6CAA6C;IACT,KAAK,EAAE,MAAM,CAAC;IAElD,kDAAkD;IACzC,OAAO,CAAC,SAAS,CAAS;IAEnC,kDAAkD;IACzC,OAAO,CAAC,SAAS,CAAS;IAEP,OAAO,CAAC,cAAc,CAAe;IAEjE,OAAO,CAAC,WAAW,CAAuB;IAC1C,OAAO,CAAC,WAAW,CAAuB;IAC1C,OAAO,CAAC,SAAS,CAA4D;IAE7E,MAAM,CAAC,MAAM,4BAAmB;;IAkBhC,iBAAiB,IAAI,IAAI;IAQzB,oBAAoB,IAAI,IAAI;IAS5B,uBAAuB;IACvB,IAAI,IAAI,IAAI;IAiBZ,uBAAuB;IACvB,IAAI,IAAI,IAAI;IAiBZ,qCAAqC;IACrC,MAAM,IAAI,IAAI;IAQd;;;OAGG;IACH,OAAO,CAAC,aAAa;IAWrB;;;;OAIG;IACH,OAAO,CAAC,kBAAkB,CAIxB;IAEF;;;;OAIG;IACH,OAAO,CAAC,oBAAoB,CAU1B;IAEF;;;OAGG;IACH,OAAO,CAAC,uBAAuB,CAO7B;IAEF;;;OAGG;IACH,OAAO,CAAC,uBAAuB,CAO7B;IAEF;;;OAGG;IACH,OAAO,CAAC,qBAAqB,CAG3B;IAEF;;;OAGG;IACH,OAAO,CAAC,qBAAqB,CAO3B;IAEF;;;OAGG;IACH,OAAO,CAAC,kBAAkB,CAGxB;IAEF;;;OAGG;IACH,OAAO,CAAC,iBAAiB,CAGvB;IAEF;;;;OAIG;IACH,OAAO,CAAC,mBAAmB,CAQzB;IAEF;;;;OAIG;IACH,OAAO,CAAC,qBAAqB,CAQ3B;IAEF;;;OAGG;IACH,OAAO,CAAC,gBAAgB,CAEtB;IAEF;;;;OAIG;IACH,OAAO,CAAC,sBAAsB,CAK5B;IAEF;;;;OAIG;IACH,OAAO,CAAC,sBAAsB,CAK5B;IAEF,MAAM;CAyFP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,SAAS,CAAC;KACzB;CACF"}
+{"version":3,"file":"popover.d.ts","sourceRoot":"","sources":["../../../source/components/popover/popover.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAiB,MAAM,KAAK,CAAC;AAKhD,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AAEzC,MAAM,MAAM,gBAAgB,GACxB,KAAK,GACL,WAAW,GACX,SAAS,GACT,QAAQ,GACR,cAAc,GACd,YAAY,GACZ,MAAM,GACN,YAAY,GACZ,UAAU,GACV,OAAO,GACP,aAAa,GACb,WAAW,CAAC;AAEhB,MAAM,MAAM,cAAc,GAAG,OAAO,GAAG,OAAO,GAAG,OAAO,GAAG,QAAQ,CAAC;AAEpE;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,qBACa,SAAU,SAAQ,UAAU;IAIvC,MAAM,CAAC,YAAY,oBAAY;IAC/B,4CAA4C;IACQ,IAAI,EAAE,OAAO,CAAC;IAElE,uDAAuD;IA0B/C,SAAS,EAAE,gBAAgB,CAAC;IAEpC,mCAAmC;IAiB3B,OAAO,EAAE,cAAc,CAAC;IAEhC,uDAAuD;IAClB,KAAK,EAAE,OAAO,CAAC;IAEpD,oDAAoD;IAE5C,SAAS,EAAE,OAAO,CAAC;IAE3B,kDAAkD;IAM1C,mBAAmB,EAAE,OAAO,CAAC;IAErC,iDAAiD;IAMzC,aAAa,EAAE,OAAO,CAAC;IAE/B,2DAA2D;IACvB,QAAQ,EAAE,MAAM,CAAC;IAErD,+DAA+D;IAEvD,SAAS,EAAE,MAAM,CAAC;IAE1B,8DAA8D;IAEtD,SAAS,EAAE,MAAM,CAAC;IAE1B,sCAAsC;IACD,QAAQ,EAAE,OAAO,CAAC;IAEvD,6CAA6C;IACT,KAAK,EAAE,MAAM,CAAC;IAElD,kDAAkD;IACzC,OAAO,CAAC,SAAS,CAAS;IAEnC,kDAAkD;IACzC,OAAO,CAAC,SAAS,CAAS;IAEP,OAAO,CAAC,cAAc,CAAe;IAEjE,OAAO,CAAC,WAAW,CAAuB;IAC1C,OAAO,CAAC,WAAW,CAAuB;IAC1C,OAAO,CAAC,SAAS,CAA4D;IAE7E,MAAM,CAAC,MAAM,4BAAmB;;IAkBhC,iBAAiB,IAAI,IAAI;IAQzB,oBAAoB,IAAI,IAAI;IAS5B,uBAAuB;IACvB,IAAI,IAAI,IAAI;IAiBZ,uBAAuB;IACvB,IAAI,IAAI,IAAI;IAiBZ,qCAAqC;IACrC,MAAM,IAAI,IAAI;IAQd;;;OAGG;IACH,OAAO,CAAC,aAAa;IAWrB;;;;OAIG;IACH,OAAO,CAAC,kBAAkB,CAIxB;IAEF;;;;OAIG;IACH,OAAO,CAAC,oBAAoB,CAU1B;IAEF;;;OAGG;IACH,OAAO,CAAC,uBAAuB,CAO7B;IAEF;;;OAGG;IACH,OAAO,CAAC,uBAAuB,CAO7B;IAEF;;;OAGG;IACH,OAAO,CAAC,qBAAqB,CAG3B;IAEF;;;OAGG;IACH,OAAO,CAAC,qBAAqB,CAO3B;IAEF;;;OAGG;IACH,OAAO,CAAC,kBAAkB,CAGxB;IAEF;;;OAGG;IACH,OAAO,CAAC,iBAAiB,CAGvB;IAEF;;;;OAIG;IACH,OAAO,CAAC,mBAAmB,CAQzB;IAEF;;;;OAIG;IACH,OAAO,CAAC,qBAAqB,CAQ3B;IAEF;;;OAGG;IACH,OAAO,CAAC,gBAAgB,CAEtB;IAEF;;;;OAIG;IACH,OAAO,CAAC,sBAAsB,CAK5B;IAEF;;;;OAIG;IACH,OAAO,CAAC,sBAAsB,CAK5B;IAEF,MAAM;CAyFP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,SAAS,CAAC;KACzB;CACF"}

package/dist/components/popover.js

@@ -2,7 +2,8 @@ import { css as b, LitElement as _, nothing as i, html as a } from "lit";
 import { property as r, state as c, query as u, customElement as g } from "lit/decorators.js";
 import { b as v } from "../shared/boolean-converter-XDGfS9LC.js";
 import { closeSvg as m } from "../icons/close.js";
-const f = b`
+import { BpIcon as f } from "./icon.js";
+const w = b`
   /* Base styles */
   :host {
     display: inline-block;
@@ -343,10 +344,10 @@ const f = b`
     }
   }
 `;
-var w = Object.defineProperty, y = Object.getOwnPropertyDescriptor, t = (e, p, l, n) => {
-  for (var s = n > 1 ? void 0 : n ? y(p, l) : p, h = e.length - 1, d; h >= 0; h--)
-    (d = e[h]) && (s = (n ? d(p, l, s) : d(s)) || s);
-  return n && s && w(p, l, s), s;
+var y = Object.defineProperty, T = Object.getOwnPropertyDescriptor, t = (e, p, l, n) => {
+  for (var s = n > 1 ? void 0 : n ? T(p, l) : p, d = e.length - 1, h; d >= 0; d--)
+    (h = e[d]) && (s = (n ? h(p, l, s) : h(s)) || s);
+  return n && s && y(p, l, s), s;
 };
 let o = class extends _ {
   constructor() {
@@ -506,7 +507,8 @@ let o = class extends _ {
     `;
   }
 };
-o.styles = [f];
+o.dependencies = [f];
+o.styles = [w];
 t([
   r({ type: Boolean, reflect: !0 })
 ], o.prototype, "open", 2);