@krollins/blueprint 0.1.15 → 0.2.0

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/registry.generated.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;;;;;;ACiDzB,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 '../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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"}

package/dist/components/code-block/code-block.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"code-block.d.ts","sourceRoot":"","sources":["../../../source/components/code-block/code-block.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAiB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAMrE;;GAEG;AACH,MAAM,WAAW,eAAe;IAC9B,8CAA8C;IAC9C,IAAI,EAAE,MAAM,CAAC;IACb,+EAA+E;IAC/E,aAAa,EAAE,OAAO,CAAC;CACxB;AAED;;GAEG;AACH,MAAM,WAAW,yBAAyB;IACxC;;;;OAIG;IACH,UAAU,CAAC,IAAI,OAAO,CAAC,OAAO,CAAC,CAAC;IAEhC;;;OAGG;IACH,SAAS,CAAC,OAAO,EAAE;QACjB,IAAI,EAAE,MAAM,CAAC;QACb,QAAQ,EAAE,MAAM,CAAC;QACjB,OAAO,EAAE,OAAO,CAAC;KAClB,GAAG,eAAe,CAAC;CACrB;AAkBD;;;GAGG;AACH,eAAO,MAAM,gBAAgB,EAAE,yBAO9B,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,qBACa,WAAY,SAAQ,UAAU;IACzC;;OAEG;IACiC,IAAI,EAAE,MAAM,CAAC;IAEjD;;;OAGG;IACiC,QAAQ,EAAE,MAAM,CAAC;IAErD;;;OAGG;IACiC,KAAK,EAAE,MAAM,CAAC;IAElD;;OAEG;IAEK,eAAe,EAAE,OAAO,CAAC;IAEjC;;OAEG;IACgC,cAAc,EAAE,MAAM,EAAE,CAAC;IAE5D;;OAEG;IAEK,SAAS,EAAE,OAAO,CAAC;IAE3B;;OAEG;IAEK,cAAc,EAAE,OAAO,CAAC;IAEhC;;OAEG;IAEK,QAAQ,EAAE,MAAM,GAAG,SAAS,CAAC;IAErC;;OAEG;IAEK,UAAU,EAAE,OAAO,CAAC;IAE5B;;;OAGG;IAEK,gBAAgB,EAAE,yBAAyB,CAAC;IAEpD;;OAEG;IACH,MAAM,CAAC,cAAc,EAAE,yBAAyB,CAAoB;IAE3D,OAAO,CAAC,UAAU,CAAuC;IACzD,OAAO,CAAC,SAAS,CAAS;IAC1B,OAAO,CAAC,gBAAgB,CAAM;IAC9B,OAAO,CAAC,eAAe,CAAsB;IAC7C,OAAO,CAAC,mBAAmB,CAAS;IACpC,OAAO,CAAC,UAAU,CAAK;IACvB,OAAO,CAAC,aAAa,CAA0B;IAC/C,OAAO,CAAC,iBAAiB,CAAgB;IAElD,OAAO,CAAC,eAAe,CAA8C;IAErE,MAAM,CAAC,MAAM,4BAAqB;;IAgBlC,oBAAoB,IAAI,IAAI;cAQT,UAAU,CAAC,iBAAiB,EAAE,cAAc,GAAG,IAAI;IA2BtE,iBAAiB,IAAI,IAAI;YAKX,kBAAkB;IAmBhC,OAAO,CAAC,uBAAuB;IAkB/B,OAAO,CAAC,WAAW,CAiCjB;IAEF,OAAO,CAAC,aAAa;IAiBrB,OAAO,CAAC,eAAe;IAIvB,OAAO,KAAK,eAAe,GAM1B;IAED,OAAO,KAAK,YAAY,GAEvB;IAED,OAAO,KAAK,YAAY,GAEvB;IAED,OAAO,CAAC,iBAAiB;IAMzB,OAAO,CAAC,eAAe;IAyCvB,OAAO,CAAC,iBAAiB;IAezB,OAAO,CAAC,aAAa;IAgBrB,OAAO,CAAC,yBAAyB;IAQjC,OAAO,CAAC,WAAW;IAgCnB,OAAO,CAAC,gBAAgB;IAiBxB,OAAO,CAAC,mBAAmB;IAe3B,MAAM;CAwCP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,WAAW,CAAC;KAC9B;CACF"}
+{"version":3,"file":"code-block.d.ts","sourceRoot":"","sources":["../../../source/components/code-block/code-block.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAiB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAMrE;;GAEG;AACH,MAAM,WAAW,eAAe;IAC9B,8CAA8C;IAC9C,IAAI,EAAE,MAAM,CAAC;IACb,+EAA+E;IAC/E,aAAa,EAAE,OAAO,CAAC;CACxB;AAED;;GAEG;AACH,MAAM,WAAW,yBAAyB;IACxC;;;;OAIG;IACH,UAAU,CAAC,IAAI,OAAO,CAAC,OAAO,CAAC,CAAC;IAEhC;;;OAGG;IACH,SAAS,CAAC,OAAO,EAAE;QACjB,IAAI,EAAE,MAAM,CAAC;QACb,QAAQ,EAAE,MAAM,CAAC;QACjB,OAAO,EAAE,OAAO,CAAC;KAClB,GAAG,eAAe,CAAC;CACrB;AAkBD;;;GAGG;AACH,eAAO,MAAM,gBAAgB,EAAE,yBAO9B,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,qBACa,WAAY,SAAQ,UAAU;IACzC;;OAEG;IACiC,IAAI,EAAE,MAAM,CAAC;IAEjD;;;OAGG;IACiC,QAAQ,EAAE,MAAM,CAAC;IAErD;;;OAGG;IACiC,KAAK,EAAE,MAAM,CAAC;IAElD;;OAEG;IAEK,eAAe,EAAE,OAAO,CAAC;IAEjC;;OAEG;IACgC,cAAc,EAAE,MAAM,EAAE,CAAC;IAE5D;;OAEG;IAEK,SAAS,EAAE,OAAO,CAAC;IAE3B;;OAEG;IAEK,cAAc,EAAE,OAAO,CAAC;IAEhC;;OAEG;IAEK,QAAQ,EAAE,MAAM,GAAG,SAAS,CAAC;IAErC;;OAEG;IAEK,UAAU,EAAE,OAAO,CAAC;IAE5B;;;OAGG;IAEK,gBAAgB,EAAE,yBAAyB,CAAC;IAEpD;;OAEG;IACH,MAAM,CAAC,cAAc,EAAE,yBAAyB,CAAoB;IAE3D,OAAO,CAAC,UAAU,CAAuC;IACzD,OAAO,CAAC,SAAS,CAAS;IAC1B,OAAO,CAAC,gBAAgB,CAAM;IAC9B,OAAO,CAAC,eAAe,CAAsB;IAC7C,OAAO,CAAC,mBAAmB,CAAS;IACpC,OAAO,CAAC,UAAU,CAAK;IACvB,OAAO,CAAC,aAAa,CAA0B;IAC/C,OAAO,CAAC,iBAAiB,CAAgB;IAElD,OAAO,CAAC,eAAe,CAA8C;IAErE,MAAM,CAAC,MAAM,4BAAqB;;IAgBlC,oBAAoB,IAAI,IAAI;cAQT,UAAU,CAAC,iBAAiB,EAAE,cAAc,GAAG,IAAI;IA2BtE,iBAAiB,IAAI,IAAI;YAKX,kBAAkB;IAmBhC,OAAO,CAAC,uBAAuB;IAkB/B,OAAO,CAAC,WAAW,CAiCjB;IAEF,OAAO,CAAC,aAAa;IAiBrB,OAAO,CAAC,eAAe;IAIvB,OAAO,KAAK,eAAe,GAM1B;IAED,OAAO,KAAK,YAAY,GAEvB;IAED,OAAO,KAAK,YAAY,GAEvB;IAED,OAAO,CAAC,iBAAiB;IAMzB,OAAO,CAAC,eAAe;IAyCvB,OAAO,CAAC,iBAAiB;IAezB,OAAO,CAAC,aAAa;IAgBrB,OAAO,CAAC,yBAAyB;IAQjC,OAAO,CAAC,WAAW;IAgCnB,OAAO,CAAC,gBAAgB;IAqBxB,OAAO,CAAC,mBAAmB;IAe3B,MAAM;CAwCP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,WAAW,CAAC;KAC9B;CACF"}

package/dist/components/code-block.js

@@ -458,18 +458,22 @@ let t = class extends y {
             aria-current=${_(s ? "true" : void 0)}
             >${b(e)}</span
           >` : r`<span
-            part="line"
-            class="code-block__line ${s ? "code-block__line--highlighted" : ""}"
-            aria-current=${_(s ? "true" : void 0)}
-            >${b(e)}</span
-          >`;
+          part="line"
+          class="code-block__line ${s ? "code-block__line--highlighted" : ""}"
+          aria-current=${_(s ? "true" : void 0)}
+          >${b(e)}</span
+        >`;
   }
   _renderCodeLines() {
-    return this.showLineNumbers ? r`<div class="code-block__lines">${this._highlightedLines.map(
+    return this.showLineNumbers ? r`<div class="code-block__lines">
+        ${this._highlightedLines.map(
       (e, o) => this._renderLine(e, o + 1, !0)
-    )}</div>` : this.highlightLines.length > 0 ? r`<div class="code-block__lines code-block__lines--no-gutter">${this._highlightedLines.map(
+    )}
+      </div>` : this.highlightLines.length > 0 ? r`<div class="code-block__lines code-block__lines--no-gutter">
+        ${this._highlightedLines.map(
       (e, o) => this._renderLine(e, o + 1, !1)
-    )}</div>` : b(this._highlightedHtml);
+    )}
+      </div>` : b(this._highlightedHtml);
   }
   _renderExpandButton() {
     return this._shouldCollapse ? r`

package/dist/components/code-block.js.map

@@ -1 +1 @@
-{"version":3,"file":"code-block.js","sources":["../../source/components/code-block/code-block.style.ts","../../source/components/code-block/code-block.ts"],"sourcesContent":["import { css } from 'lit';\r\n\r\nexport const codeBlockStyles = css`\r\n  /* Base styles */\r\n  :host {\r\n    display: block;\r\n    container-type: inline-size;\r\n  }\r\n\r\n  .code-block {\r\n    position: relative;\r\n    border: var(--bp-border-width) solid var(--bp-color-border);\r\n    border-radius: var(--bp-border-radius-lg);\r\n    overflow: hidden;\r\n    background-color: var(--bp-color-surface);\r\n    font-family: var(--bp-font-family-mono);\r\n    font-size: var(--bp-font-size-sm);\r\n    line-height: var(--bp-line-height-relaxed);\r\n  }\r\n\r\n  /* Header */\r\n  .code-block__header {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: space-between;\r\n    gap: var(--bp-spacing-sm);\r\n    padding: var(--bp-spacing-xs) var(--bp-spacing-md);\r\n    background-color: var(--bp-color-surface-elevated);\r\n    border-bottom: var(--bp-border-width) solid var(--bp-color-border);\r\n    min-height: var(--bp-spacing-10);\r\n  }\r\n\r\n  .code-block__title {\r\n    font-family: var(--bp-font-family);\r\n    font-size: var(--bp-font-size-xs);\r\n    font-weight: var(--bp-font-weight-medium);\r\n    color: var(--bp-color-text-muted);\r\n    overflow: hidden;\r\n    text-overflow: ellipsis;\r\n    white-space: nowrap;\r\n    min-width: 0;\r\n    text-transform: uppercase;\r\n    letter-spacing: 0.05em; /* Intentional one-off for header label readability */\r\n  }\r\n\r\n  .code-block__controls {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: var(--bp-spacing-xs);\r\n    flex-shrink: 0;\r\n  }\r\n\r\n  /* Copy button */\r\n  .code-block__copy {\r\n    display: inline-flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    background: none;\r\n    border: none;\r\n    padding: var(--bp-spacing-2xs);\r\n    border-radius: var(--bp-border-radius-md);\r\n    color: var(--bp-color-text-muted);\r\n    cursor: pointer;\r\n    transition:\r\n      color var(--bp-transition-fast),\r\n      background-color var(--bp-transition-fast);\r\n  }\r\n\r\n  .code-block__copy:hover {\r\n    color: var(--bp-color-text);\r\n    background-color: var(--bp-color-hover-overlay);\r\n  }\r\n\r\n  .code-block__copy:active {\r\n    background-color: var(--bp-color-active-overlay);\r\n  }\r\n\r\n  .code-block__copy:focus-visible {\r\n    outline: var(--bp-focus-ring);\r\n    outline-offset: var(--bp-focus-offset);\r\n  }\r\n\r\n  .code-block__copy--copied {\r\n    color: var(--bp-color-success);\r\n  }\r\n\r\n  .code-block__copy--error {\r\n    color: var(--bp-color-error);\r\n  }\r\n\r\n  .code-block__icon {\r\n    width: var(--bp-icon-size-sm);\r\n    height: var(--bp-icon-size-sm);\r\n  }\r\n\r\n  /* Floating copy button (when header is hidden) */\r\n  .code-block__floating-copy {\r\n    position: absolute;\r\n    top: var(--bp-spacing-xs);\r\n    right: var(--bp-spacing-xs);\r\n    z-index: var(--bp-z-base);\r\n    opacity: 0;\r\n    transition: opacity var(--bp-transition-fast);\r\n  }\r\n\r\n  .code-block__body:hover .code-block__floating-copy,\r\n  .code-block__body:focus-within .code-block__floating-copy {\r\n    opacity: 1;\r\n  }\r\n\r\n  /* Ensure floating copy button is reachable on touch devices (no hover) */\r\n  @media (hover: none) {\r\n    .code-block__floating-copy {\r\n      opacity: 0.7;\r\n    }\r\n  }\r\n\r\n  .code-block__floating-copy .code-block__copy {\r\n    background-color: var(--bp-color-surface-elevated);\r\n    border: var(--bp-border-width) solid var(--bp-color-border);\r\n    box-shadow: var(--bp-shadow-sm);\r\n  }\r\n\r\n  /* Body */\r\n  .code-block__body {\r\n    position: relative;\r\n    overflow: hidden;\r\n  }\r\n\r\n  .code-block__body--scroll {\r\n    overflow-x: auto;\r\n  }\r\n\r\n  /* Pre / Code */\r\n  .code-block__pre {\r\n    margin: 0;\r\n    padding: var(--bp-spacing-md);\r\n    overflow: visible;\r\n  }\r\n\r\n  .code-block__body--wrap .code-block__pre {\r\n    white-space: pre-wrap;\r\n    word-break: break-all;\r\n    overflow-wrap: break-word;\r\n  }\r\n\r\n  .code-block__body--scroll .code-block__pre {\r\n    white-space: pre;\r\n    overflow-x: auto;\r\n  }\r\n\r\n  .code-block__code {\r\n    font-family: inherit;\r\n    font-size: inherit;\r\n    line-height: inherit;\r\n    color: var(--bp-color-text);\r\n  }\r\n\r\n  /* Line numbers grid layout */\r\n  .code-block__lines {\r\n    display: grid;\r\n    grid-template-columns: auto 1fr;\r\n  }\r\n\r\n  .code-block__lines--no-gutter {\r\n    grid-template-columns: 1fr;\r\n  }\r\n\r\n  .code-block__line-number {\r\n    align-self: start;\r\n    text-align: right;\r\n    padding-right: var(--bp-spacing-md);\r\n    color: var(--bp-color-text-muted);\r\n    user-select: none;\r\n    min-width: var(--bp-spacing-8);\r\n    opacity: var(--bp-opacity-subtle);\r\n  }\r\n\r\n  .code-block__line {\r\n    display: block;\r\n    padding-left: var(--bp-spacing-2xs);\r\n    border-left: var(--bp-spacing-0-5) solid transparent;\r\n  }\r\n\r\n  .code-block__line--highlighted {\r\n    background-color: var(--bp-color-selected-bg);\r\n    border-left-color: var(--bp-color-primary);\r\n  }\r\n\r\n  /* Collapsed / expand */\r\n  /* max-height = (line count × line-height × font-size) + vertical padding */\r\n  .code-block__body--collapsed {\r\n    max-height: calc(\r\n      var(--_max-lines, 10) * var(--bp-line-height-relaxed) * 1em +\r\n        var(--bp-spacing-md) * 2\r\n    );\r\n    overflow: hidden;\r\n  }\r\n\r\n  .code-block__gradient {\r\n    position: absolute;\r\n    bottom: 0;\r\n    left: 0;\r\n    right: 0;\r\n    height: var(--bp-spacing-16);\r\n    background: linear-gradient(transparent, var(--bp-color-surface));\r\n    pointer-events: none;\r\n  }\r\n\r\n  .code-block__expand {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    width: 100%;\r\n    padding: var(--bp-spacing-xs) var(--bp-spacing-md);\r\n    background: none;\r\n    border: none;\r\n    border-top: var(--bp-border-width) solid var(--bp-color-border);\r\n    color: var(--bp-color-primary);\r\n    font-family: var(--bp-font-family);\r\n    font-size: var(--bp-font-size-xs);\r\n    font-weight: var(--bp-font-weight-medium);\r\n    cursor: pointer;\r\n    transition: background-color var(--bp-transition-fast);\r\n  }\r\n\r\n  .code-block__expand:hover {\r\n    background-color: var(--bp-color-hover-overlay);\r\n  }\r\n\r\n  .code-block__expand:active {\r\n    background-color: var(--bp-color-active-overlay);\r\n  }\r\n\r\n  .code-block__expand:focus-visible {\r\n    outline: var(--bp-focus-ring);\r\n    outline-offset: calc(-1 * var(--bp-focus-offset));\r\n  }\r\n\r\n  /* Visually hidden status for screen readers.\r\n     Uses --bp-spacing-0-5 (2px) instead of the typical 1px sr-only pattern\r\n     to stay consistent with design tokens throughout. */\r\n  .code-block__status {\r\n    position: absolute;\r\n    width: var(--bp-spacing-0-5);\r\n    height: var(--bp-spacing-0-5);\r\n    padding: var(--bp-spacing-0);\r\n    margin: calc(-1 * var(--bp-spacing-0-5));\r\n    overflow: hidden;\r\n    clip: rect(0, 0, 0, 0);\r\n    white-space: nowrap;\r\n    border: var(--bp-spacing-0);\r\n  }\r\n\r\n  /* Container queries for responsive behavior */\r\n  @container (max-width: 480px) {\r\n    /* stylelint-disable-line -- container queries cannot use var() */\r\n    .code-block__header {\r\n      flex-wrap: wrap;\r\n    }\r\n\r\n    .code-block__pre {\r\n      padding: var(--bp-spacing-sm);\r\n      font-size: var(--bp-font-size-xs);\r\n    }\r\n\r\n    .code-block__line-number {\r\n      min-width: var(--bp-spacing-6);\r\n      padding-right: var(--bp-spacing-sm);\r\n    }\r\n  }\r\n`;\r\n","import { LitElement, html, nothing, type PropertyValues } from 'lit';\r\nimport { customElement, property, state } from 'lit/decorators.js';\r\nimport { ifDefined } from 'lit/directives/if-defined.js';\r\nimport { unsafeHTML } from 'lit/directives/unsafe-html.js';\r\nimport { codeBlockStyles } from './code-block.style.js';\r\n\r\n/**\r\n * Result returned by a highlight adapter.\r\n */\r\nexport interface HighlightResult {\r\n  /** The highlighted code as an HTML string. */\r\n  html: string;\r\n  /** Whether highlighting was actually applied (false = plain text fallback). */\r\n  isHighlighted: boolean;\r\n}\r\n\r\n/**\r\n * Adapter interface for pluggable syntax highlighting.\r\n */\r\nexport interface CodeBlockHighlightAdapter {\r\n  /**\r\n   * Called once when the adapter is first used.\r\n   * Use this for async initialization (loading Shiki, registering languages, etc).\r\n   * Return value is passed to `highlight()` as context.\r\n   */\r\n  initialize?(): Promise<unknown>;\r\n\r\n  /**\r\n   * Return highlighted HTML for the given code and language.\r\n   * `context` is the resolved value from `initialize()`.\r\n   */\r\n  highlight(options: {\r\n    code: string;\r\n    language: string;\r\n    context: unknown;\r\n  }): HighlightResult;\r\n}\r\n\r\n/** Maps HTML special characters to their entity equivalents for XSS prevention. */\r\nconst htmlEscapeMap: Record<string, string> = {\r\n  '&': '&amp;',\r\n  '<': '&lt;',\r\n  '>': '&gt;',\r\n  '\"': '&quot;',\r\n  \"'\": '&#039;',\r\n};\r\n\r\n/**\r\n * Escapes HTML special characters in a single pass to prevent XSS when rendering plain text.\r\n */\r\nfunction escapeHtml(text: string): string {\r\n  return text.replace(/[&<>\"']/g, (char) => htmlEscapeMap[char] ?? char);\r\n}\r\n\r\n/**\r\n * Built-in plain text adapter that escapes HTML and renders monospace text.\r\n * Zero dependencies, zero bundle cost.\r\n */\r\nexport const plainTextAdapter: CodeBlockHighlightAdapter = {\r\n  highlight({ code }) {\r\n    return {\r\n      html: escapeHtml(code),\r\n      isHighlighted: false,\r\n    };\r\n  },\r\n};\r\n\r\n/**\r\n * A code block component for displaying syntax-highlighted code with\r\n * copy-to-clipboard, line numbers, line highlighting, and expand/collapse.\r\n *\r\n * @slot title - Custom title content. Overrides the `title` attribute.\r\n * @slot controls - Additional control buttons placed before the copy button.\r\n * @slot copy-icon - Custom icon for the copy button (default state).\r\n * @slot copied-icon - Custom icon for the copy button (success state).\r\n *\r\n * @fires bp-copy - Fired after a copy attempt. Detail: `{ code: string, success: boolean }`\r\n *\r\n * @csspart base - Outer wrapper\r\n * @csspart header - Header bar\r\n * @csspart title - Title text area\r\n * @csspart controls - Controls container\r\n * @csspart copy-button - The copy button\r\n * @csspart body - Scrollable code container\r\n * @csspart pre - The `<pre>` element\r\n * @csspart code - The `<code>` element\r\n * @csspart line-number - Individual line number cell\r\n * @csspart line - Individual line of code\r\n */\r\n@customElement('bp-code-block')\r\nexport class BpCodeBlock extends LitElement {\r\n  /**\r\n   * The source code to display.\r\n   */\r\n  @property({ type: String }) declare code: string;\r\n\r\n  /**\r\n   * Language identifier for syntax highlighting (e.g. 'typescript', 'html', 'python').\r\n   * Also displayed as a label when no title is set.\r\n   */\r\n  @property({ type: String }) declare language: string;\r\n\r\n  /**\r\n   * Optional title displayed in the header (e.g. a filename like `index.ts`).\r\n   * Overrides the language label.\r\n   */\r\n  @property({ type: String }) declare title: string;\r\n\r\n  /**\r\n   * Show line number gutter.\r\n   */\r\n  @property({ type: Boolean, attribute: 'show-line-numbers', reflect: true })\r\n  declare showLineNumbers: boolean;\r\n\r\n  /**\r\n   * Array of 1-based line numbers to visually highlight.\r\n   */\r\n  @property({ type: Array }) declare highlightLines: number[];\r\n\r\n  /**\r\n   * Wrap long lines instead of horizontal scroll.\r\n   */\r\n  @property({ type: Boolean, attribute: 'wrap-lines', reflect: true })\r\n  declare wrapLines: boolean;\r\n\r\n  /**\r\n   * Show the copy-to-clipboard button.\r\n   */\r\n  @property({ type: Boolean, attribute: 'show-copy-button', reflect: true })\r\n  declare showCopyButton: boolean;\r\n\r\n  /**\r\n   * When set, collapse the code block to this many visible lines with a \"Show more\" toggle.\r\n   */\r\n  @property({ type: Number, attribute: 'max-lines' })\r\n  declare maxLines: number | undefined;\r\n\r\n  /**\r\n   * Show/hide the header bar. When false, the copy button floats over the code.\r\n   */\r\n  @property({ type: Boolean, attribute: 'show-header', reflect: true })\r\n  declare showHeader: boolean;\r\n\r\n  /**\r\n   * The syntax highlight adapter to use for this instance.\r\n   * Defaults to `BpCodeBlock.defaultAdapter` which is the plainTextAdapter.\r\n   */\r\n  @property({ attribute: false })\r\n  declare highlightAdapter: CodeBlockHighlightAdapter;\r\n\r\n  /**\r\n   * Global default adapter used when no per-instance adapter is set.\r\n   */\r\n  static defaultAdapter: CodeBlockHighlightAdapter = plainTextAdapter;\r\n\r\n  @state() private _copyState: 'idle' | 'copied' | 'error' = 'idle';\r\n  @state() private _expanded = false;\r\n  @state() private _highlightedHtml = '';\r\n  @state() private _adapterContext: unknown = undefined;\r\n  @state() private _adapterInitialized = false;\r\n  @state() private _lineCount = 0;\r\n  @state() private _highlightSet: Set<number> = new Set();\r\n  @state() private _highlightedLines: string[] = [];\r\n\r\n  private _copyResetTimer: ReturnType<typeof setTimeout> | null = null;\r\n\r\n  static styles = [codeBlockStyles];\r\n\r\n  constructor() {\r\n    super();\r\n    this.code = '';\r\n    this.language = 'text';\r\n    this.title = '';\r\n    this.showLineNumbers = false;\r\n    this.highlightLines = [];\r\n    this.wrapLines = true;\r\n    this.showCopyButton = true;\r\n    this.maxLines = undefined;\r\n    this.showHeader = true;\r\n    this.highlightAdapter = BpCodeBlock.defaultAdapter;\r\n  }\r\n\r\n  disconnectedCallback(): void {\r\n    super.disconnectedCallback();\r\n    if (this._copyResetTimer) {\r\n      clearTimeout(this._copyResetTimer);\r\n      this._copyResetTimer = null;\r\n    }\r\n  }\r\n\r\n  protected override willUpdate(changedProperties: PropertyValues): void {\r\n    super.willUpdate(changedProperties);\r\n\r\n    if (changedProperties.has('highlightAdapter')) {\r\n      this._adapterInitialized = false;\r\n      this._adapterContext = undefined;\r\n      this._initializeAdapter();\r\n    }\r\n\r\n    if (changedProperties.has('code')) {\r\n      this._lineCount = this.code.split('\\n').length;\r\n    }\r\n\r\n    if (changedProperties.has('highlightLines')) {\r\n      this._highlightSet = new Set(this.highlightLines);\r\n    }\r\n\r\n    const needsRehighlight =\r\n      changedProperties.has('code') ||\r\n      changedProperties.has('language') ||\r\n      changedProperties.has('highlightAdapter');\r\n\r\n    if (needsRehighlight) {\r\n      this._updateHighlightingSync();\r\n    }\r\n  }\r\n\r\n  connectedCallback(): void {\r\n    super.connectedCallback();\r\n    this._initializeAdapter();\r\n  }\r\n\r\n  private async _initializeAdapter(): Promise<void> {\r\n    const adapter = this.highlightAdapter;\r\n    if (!this._adapterInitialized && adapter.initialize) {\r\n      try {\r\n        const context = await adapter.initialize();\r\n        // Bail if adapter changed while awaiting\r\n        if (this.highlightAdapter !== adapter) return;\r\n        this._adapterContext = context;\r\n      } catch {\r\n        if (this.highlightAdapter !== adapter) return;\r\n        this._adapterContext = undefined;\r\n      }\r\n      this._adapterInitialized = true;\r\n      // Re-highlight with context after async init\r\n      this._updateHighlightingSync();\r\n      this.requestUpdate();\r\n    }\r\n  }\r\n\r\n  private _updateHighlightingSync(): void {\r\n    const adapter = this.highlightAdapter;\r\n\r\n    try {\r\n      const result = adapter.highlight({\r\n        code: this.code,\r\n        language: this.language,\r\n        context: this._adapterContext,\r\n      });\r\n      this._highlightedHtml = result.html;\r\n    } catch {\r\n      // Fallback to plain text on adapter error\r\n      this._highlightedHtml = escapeHtml(this.code);\r\n    }\r\n\r\n    this._highlightedLines = this._highlightedHtml.split('\\n');\r\n  }\r\n\r\n  private _handleCopy = async (): Promise<void> => {\r\n    let success: boolean;\r\n\r\n    try {\r\n      if (navigator.clipboard) {\r\n        await navigator.clipboard.writeText(this.code);\r\n        success = true;\r\n      } else {\r\n        // Fallback for insecure contexts\r\n        success = this._fallbackCopy();\r\n      }\r\n    } catch {\r\n      success = this._fallbackCopy();\r\n    }\r\n\r\n    this._copyState = success ? 'copied' : 'error';\r\n\r\n    this.dispatchEvent(\r\n      new CustomEvent('bp-copy', {\r\n        detail: { code: this.code, success },\r\n        bubbles: true,\r\n        composed: true,\r\n      })\r\n    );\r\n\r\n    // Reset after 2 seconds\r\n    if (this._copyResetTimer) {\r\n      clearTimeout(this._copyResetTimer);\r\n    }\r\n    this._copyResetTimer = setTimeout(() => {\r\n      this._copyState = 'idle';\r\n      this._copyResetTimer = null;\r\n    }, 2000);\r\n  };\r\n\r\n  private _fallbackCopy(): boolean {\r\n    try {\r\n      const textarea = document.createElement('textarea');\r\n      textarea.value = this.code;\r\n      textarea.style.position = 'fixed';\r\n      textarea.style.left = '-9999px';\r\n      textarea.style.top = '-9999px';\r\n      document.body.appendChild(textarea);\r\n      textarea.select();\r\n      const result = document.execCommand('copy');\r\n      document.body.removeChild(textarea);\r\n      return result;\r\n    } catch {\r\n      return false;\r\n    }\r\n  }\r\n\r\n  private _toggleExpanded(): void {\r\n    this._expanded = !this._expanded;\r\n  }\r\n\r\n  private get _shouldCollapse(): boolean {\r\n    return (\r\n      this.maxLines !== undefined &&\r\n      this.maxLines > 0 &&\r\n      this._lineCount > this.maxLines\r\n    );\r\n  }\r\n\r\n  private get _isCollapsed(): boolean {\r\n    return this._shouldCollapse && !this._expanded;\r\n  }\r\n\r\n  private get _headerLabel(): string {\r\n    return this.title || this.language;\r\n  }\r\n\r\n  private _getCopyAriaLabel(): string {\r\n    if (this._copyState === 'copied') return 'Copied!';\r\n    if (this._copyState === 'error') return 'Failed to copy';\r\n    return 'Copy code';\r\n  }\r\n\r\n  private _renderCopyIcon() {\r\n    if (this._copyState === 'copied') {\r\n      return html`\r\n        <slot name=\"copied-icon\">\r\n          <svg\r\n            class=\"code-block__icon\"\r\n            viewBox=\"0 0 24 24\"\r\n            fill=\"none\"\r\n            stroke=\"currentColor\"\r\n            stroke-width=\"2\"\r\n            stroke-linecap=\"round\"\r\n            stroke-linejoin=\"round\"\r\n            aria-hidden=\"true\"\r\n          >\r\n            <polyline points=\"20 6 9 17 4 12\"></polyline>\r\n          </svg>\r\n        </slot>\r\n      `;\r\n    }\r\n\r\n    return html`\r\n      <slot name=\"copy-icon\">\r\n        <svg\r\n          class=\"code-block__icon\"\r\n          viewBox=\"0 0 24 24\"\r\n          fill=\"none\"\r\n          stroke=\"currentColor\"\r\n          stroke-width=\"2\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n          aria-hidden=\"true\"\r\n        >\r\n          <rect x=\"9\" y=\"9\" width=\"13\" height=\"13\" rx=\"2\" ry=\"2\"></rect>\r\n          <path\r\n            d=\"M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1\"\r\n          ></path>\r\n        </svg>\r\n      </slot>\r\n    `;\r\n  }\r\n\r\n  private _renderCopyButton() {\r\n    if (!this.showCopyButton) return nothing;\r\n\r\n    return html`\r\n      <button\r\n        part=\"copy-button\"\r\n        class=\"code-block__copy code-block__copy--${this._copyState}\"\r\n        aria-label=${this._getCopyAriaLabel()}\r\n        @click=${this._handleCopy}\r\n      >\r\n        ${this._renderCopyIcon()}\r\n      </button>\r\n    `;\r\n  }\r\n\r\n  private _renderHeader() {\r\n    if (!this.showHeader) return nothing;\r\n\r\n    return html`\r\n      <div part=\"header\" class=\"code-block__header\">\r\n        <span part=\"title\" class=\"code-block__title\">\r\n          <slot name=\"title\">${this._headerLabel}</slot>\r\n        </span>\r\n        <div part=\"controls\" class=\"code-block__controls\">\r\n          <slot name=\"controls\"></slot>\r\n          ${this._renderCopyButton()}\r\n        </div>\r\n      </div>\r\n    `;\r\n  }\r\n\r\n  private _renderFloatingCopyButton() {\r\n    if (this.showHeader || !this.showCopyButton) return nothing;\r\n\r\n    return html`\r\n      <div class=\"code-block__floating-copy\">${this._renderCopyButton()}</div>\r\n    `;\r\n  }\r\n\r\n  private _renderLine(\r\n    lineHtml: string,\r\n    lineNumber: number,\r\n    showNumber: boolean\r\n  ) {\r\n    const isHighlighted = this._highlightSet.has(lineNumber);\r\n    // Template kept tight to avoid whitespace text nodes inside the CSS grid.\r\n    // Anonymous text nodes in a grid become extra rows, adding visual gaps.\r\n    return showNumber\r\n      ? html`<span\r\n            part=\"line-number\"\r\n            class=\"code-block__line-number\"\r\n            aria-hidden=\"true\"\r\n            >${lineNumber}</span\r\n          ><span\r\n            part=\"line\"\r\n            class=\"code-block__line ${isHighlighted\r\n              ? 'code-block__line--highlighted'\r\n              : ''}\"\r\n            aria-current=${ifDefined(isHighlighted ? 'true' : undefined)}\r\n            >${unsafeHTML(lineHtml)}</span\r\n          >`\r\n      : html`<span\r\n            part=\"line\"\r\n            class=\"code-block__line ${isHighlighted\r\n              ? 'code-block__line--highlighted'\r\n              : ''}\"\r\n            aria-current=${ifDefined(isHighlighted ? 'true' : undefined)}\r\n            >${unsafeHTML(lineHtml)}</span\r\n          >`;\r\n  }\r\n\r\n  private _renderCodeLines() {\r\n    // Templates kept tight to avoid whitespace text nodes inside CSS grids.\r\n    if (this.showLineNumbers) {\r\n      return html`<div class=\"code-block__lines\">${this._highlightedLines.map(\r\n        (lineHtml, index) => this._renderLine(lineHtml, index + 1, true)\r\n      )}</div>`;\r\n    }\r\n\r\n    if (this.highlightLines.length > 0) {\r\n      return html`<div class=\"code-block__lines code-block__lines--no-gutter\">${this._highlightedLines.map(\r\n        (lineHtml, index) => this._renderLine(lineHtml, index + 1, false)\r\n      )}</div>`;\r\n    }\r\n\r\n    return unsafeHTML(this._highlightedHtml);\r\n  }\r\n\r\n  private _renderExpandButton() {\r\n    if (!this._shouldCollapse) return nothing;\r\n\r\n    return html`\r\n      <button\r\n        part=\"expand-button\"\r\n        class=\"code-block__expand\"\r\n        @click=${this._toggleExpanded}\r\n        aria-expanded=${this._expanded}\r\n      >\r\n        ${this._expanded ? 'Show less' : 'Show more'}\r\n      </button>\r\n    `;\r\n  }\r\n\r\n  render() {\r\n    const bodyClasses = [\r\n      'code-block__body',\r\n      this.wrapLines ? 'code-block__body--wrap' : 'code-block__body--scroll',\r\n      this._isCollapsed ? 'code-block__body--collapsed' : '',\r\n    ]\r\n      .filter(Boolean)\r\n      .join(' ');\r\n\r\n    return html`\r\n      <div\r\n        part=\"base\"\r\n        class=\"code-block\"\r\n        role=\"region\"\r\n        aria-label=${this.title\r\n          ? `Code example: ${this.title}`\r\n          : 'Code example'}\r\n        style=${this._isCollapsed && this.maxLines\r\n          ? `--_max-lines: ${this.maxLines}`\r\n          : ''}\r\n      >\r\n        ${this._renderHeader()}\r\n        <div part=\"body\" class=${bodyClasses}>\r\n          ${this._renderFloatingCopyButton()}\r\n          <pre\r\n            part=\"pre\"\r\n            class=\"code-block__pre\"\r\n          ><code part=\"code\" class=\"code-block__code\">${this._renderCodeLines()}</code></pre>\r\n          ${this._isCollapsed\r\n            ? html`<div class=\"code-block__gradient\"></div>`\r\n            : nothing}\r\n        </div>\r\n        ${this._renderExpandButton()}\r\n        <div class=\"code-block__status\" role=\"status\" aria-live=\"polite\">\r\n          ${this._copyState === 'copied' ? 'Copied to clipboard' : ''}\r\n          ${this._copyState === 'error' ? 'Failed to copy' : ''}\r\n        </div>\r\n      </div>\r\n    `;\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    'bp-code-block': BpCodeBlock;\r\n  }\r\n}\r\n"],"names":["codeBlockStyles","css","htmlEscapeMap","escapeHtml","text","char","plainTextAdapter","code","BpCodeBlock","LitElement","success","changedProperties","adapter","context","result","textarea","html","nothing","lineHtml","lineNumber","showNumber","isHighlighted","ifDefined","unsafeHTML","index","bodyClasses","__decorateClass","property","state","customElement"],"mappings":";;;;AAEO,MAAMA,IAAkBC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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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"}
+{"version":3,"file":"code-block.js","sources":["../../source/components/code-block/code-block.style.ts","../../source/components/code-block/code-block.ts"],"sourcesContent":["import { css } from 'lit';\r\n\r\nexport const codeBlockStyles = css`\r\n  /* Base styles */\r\n  :host {\r\n    display: block;\r\n    container-type: inline-size;\r\n  }\r\n\r\n  .code-block {\r\n    position: relative;\r\n    border: var(--bp-border-width) solid var(--bp-color-border);\r\n    border-radius: var(--bp-border-radius-lg);\r\n    overflow: hidden;\r\n    background-color: var(--bp-color-surface);\r\n    font-family: var(--bp-font-family-mono);\r\n    font-size: var(--bp-font-size-sm);\r\n    line-height: var(--bp-line-height-relaxed);\r\n  }\r\n\r\n  /* Header */\r\n  .code-block__header {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: space-between;\r\n    gap: var(--bp-spacing-sm);\r\n    padding: var(--bp-spacing-xs) var(--bp-spacing-md);\r\n    background-color: var(--bp-color-surface-elevated);\r\n    border-bottom: var(--bp-border-width) solid var(--bp-color-border);\r\n    min-height: var(--bp-spacing-10);\r\n  }\r\n\r\n  .code-block__title {\r\n    font-family: var(--bp-font-family);\r\n    font-size: var(--bp-font-size-xs);\r\n    font-weight: var(--bp-font-weight-medium);\r\n    color: var(--bp-color-text-muted);\r\n    overflow: hidden;\r\n    text-overflow: ellipsis;\r\n    white-space: nowrap;\r\n    min-width: 0;\r\n    text-transform: uppercase;\r\n    letter-spacing: 0.05em; /* Intentional one-off for header label readability */\r\n  }\r\n\r\n  .code-block__controls {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: var(--bp-spacing-xs);\r\n    flex-shrink: 0;\r\n  }\r\n\r\n  /* Copy button */\r\n  .code-block__copy {\r\n    display: inline-flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    background: none;\r\n    border: none;\r\n    padding: var(--bp-spacing-2xs);\r\n    border-radius: var(--bp-border-radius-md);\r\n    color: var(--bp-color-text-muted);\r\n    cursor: pointer;\r\n    transition:\r\n      color var(--bp-transition-fast),\r\n      background-color var(--bp-transition-fast);\r\n  }\r\n\r\n  .code-block__copy:hover {\r\n    color: var(--bp-color-text);\r\n    background-color: var(--bp-color-hover-overlay);\r\n  }\r\n\r\n  .code-block__copy:active {\r\n    background-color: var(--bp-color-active-overlay);\r\n  }\r\n\r\n  .code-block__copy:focus-visible {\r\n    outline: var(--bp-focus-ring);\r\n    outline-offset: var(--bp-focus-offset);\r\n  }\r\n\r\n  .code-block__copy--copied {\r\n    color: var(--bp-color-success);\r\n  }\r\n\r\n  .code-block__copy--error {\r\n    color: var(--bp-color-error);\r\n  }\r\n\r\n  .code-block__icon {\r\n    width: var(--bp-icon-size-sm);\r\n    height: var(--bp-icon-size-sm);\r\n  }\r\n\r\n  /* Floating copy button (when header is hidden) */\r\n  .code-block__floating-copy {\r\n    position: absolute;\r\n    top: var(--bp-spacing-xs);\r\n    right: var(--bp-spacing-xs);\r\n    z-index: var(--bp-z-base);\r\n    opacity: 0;\r\n    transition: opacity var(--bp-transition-fast);\r\n  }\r\n\r\n  .code-block__body:hover .code-block__floating-copy,\r\n  .code-block__body:focus-within .code-block__floating-copy {\r\n    opacity: 1;\r\n  }\r\n\r\n  /* Ensure floating copy button is reachable on touch devices (no hover) */\r\n  @media (hover: none) {\r\n    .code-block__floating-copy {\r\n      opacity: 0.7;\r\n    }\r\n  }\r\n\r\n  .code-block__floating-copy .code-block__copy {\r\n    background-color: var(--bp-color-surface-elevated);\r\n    border: var(--bp-border-width) solid var(--bp-color-border);\r\n    box-shadow: var(--bp-shadow-sm);\r\n  }\r\n\r\n  /* Body */\r\n  .code-block__body {\r\n    position: relative;\r\n    overflow: hidden;\r\n  }\r\n\r\n  .code-block__body--scroll {\r\n    overflow-x: auto;\r\n  }\r\n\r\n  /* Pre / Code */\r\n  .code-block__pre {\r\n    margin: 0;\r\n    padding: var(--bp-spacing-md);\r\n    overflow: visible;\r\n  }\r\n\r\n  .code-block__body--wrap .code-block__pre {\r\n    white-space: pre-wrap;\r\n    word-break: break-all;\r\n    overflow-wrap: break-word;\r\n  }\r\n\r\n  .code-block__body--scroll .code-block__pre {\r\n    white-space: pre;\r\n    overflow-x: auto;\r\n  }\r\n\r\n  .code-block__code {\r\n    font-family: inherit;\r\n    font-size: inherit;\r\n    line-height: inherit;\r\n    color: var(--bp-color-text);\r\n  }\r\n\r\n  /* Line numbers grid layout */\r\n  .code-block__lines {\r\n    display: grid;\r\n    grid-template-columns: auto 1fr;\r\n  }\r\n\r\n  .code-block__lines--no-gutter {\r\n    grid-template-columns: 1fr;\r\n  }\r\n\r\n  .code-block__line-number {\r\n    align-self: start;\r\n    text-align: right;\r\n    padding-right: var(--bp-spacing-md);\r\n    color: var(--bp-color-text-muted);\r\n    user-select: none;\r\n    min-width: var(--bp-spacing-8);\r\n    opacity: var(--bp-opacity-subtle);\r\n  }\r\n\r\n  .code-block__line {\r\n    display: block;\r\n    padding-left: var(--bp-spacing-2xs);\r\n    border-left: var(--bp-spacing-0-5) solid transparent;\r\n  }\r\n\r\n  .code-block__line--highlighted {\r\n    background-color: var(--bp-color-selected-bg);\r\n    border-left-color: var(--bp-color-primary);\r\n  }\r\n\r\n  /* Collapsed / expand */\r\n  /* max-height = (line count × line-height × font-size) + vertical padding */\r\n  .code-block__body--collapsed {\r\n    max-height: calc(\r\n      var(--_max-lines, 10) * var(--bp-line-height-relaxed) * 1em +\r\n        var(--bp-spacing-md) * 2\r\n    );\r\n    overflow: hidden;\r\n  }\r\n\r\n  .code-block__gradient {\r\n    position: absolute;\r\n    bottom: 0;\r\n    left: 0;\r\n    right: 0;\r\n    height: var(--bp-spacing-16);\r\n    background: linear-gradient(transparent, var(--bp-color-surface));\r\n    pointer-events: none;\r\n  }\r\n\r\n  .code-block__expand {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    width: 100%;\r\n    padding: var(--bp-spacing-xs) var(--bp-spacing-md);\r\n    background: none;\r\n    border: none;\r\n    border-top: var(--bp-border-width) solid var(--bp-color-border);\r\n    color: var(--bp-color-primary);\r\n    font-family: var(--bp-font-family);\r\n    font-size: var(--bp-font-size-xs);\r\n    font-weight: var(--bp-font-weight-medium);\r\n    cursor: pointer;\r\n    transition: background-color var(--bp-transition-fast);\r\n  }\r\n\r\n  .code-block__expand:hover {\r\n    background-color: var(--bp-color-hover-overlay);\r\n  }\r\n\r\n  .code-block__expand:active {\r\n    background-color: var(--bp-color-active-overlay);\r\n  }\r\n\r\n  .code-block__expand:focus-visible {\r\n    outline: var(--bp-focus-ring);\r\n    outline-offset: calc(-1 * var(--bp-focus-offset));\r\n  }\r\n\r\n  /* Visually hidden status for screen readers.\r\n     Uses --bp-spacing-0-5 (2px) instead of the typical 1px sr-only pattern\r\n     to stay consistent with design tokens throughout. */\r\n  .code-block__status {\r\n    position: absolute;\r\n    width: var(--bp-spacing-0-5);\r\n    height: var(--bp-spacing-0-5);\r\n    padding: var(--bp-spacing-0);\r\n    margin: calc(-1 * var(--bp-spacing-0-5));\r\n    overflow: hidden;\r\n    clip: rect(0, 0, 0, 0);\r\n    white-space: nowrap;\r\n    border: var(--bp-spacing-0);\r\n  }\r\n\r\n  /* Container queries for responsive behavior */\r\n  @container (max-width: 480px) {\r\n    /* stylelint-disable-line -- container queries cannot use var() */\r\n    .code-block__header {\r\n      flex-wrap: wrap;\r\n    }\r\n\r\n    .code-block__pre {\r\n      padding: var(--bp-spacing-sm);\r\n      font-size: var(--bp-font-size-xs);\r\n    }\r\n\r\n    .code-block__line-number {\r\n      min-width: var(--bp-spacing-6);\r\n      padding-right: var(--bp-spacing-sm);\r\n    }\r\n  }\r\n`;\r\n","import { LitElement, html, nothing, type PropertyValues } from 'lit';\r\nimport { customElement, property, state } from 'lit/decorators.js';\r\nimport { ifDefined } from 'lit/directives/if-defined.js';\r\nimport { unsafeHTML } from 'lit/directives/unsafe-html.js';\r\nimport { codeBlockStyles } from './code-block.style.js';\r\n\r\n/**\r\n * Result returned by a highlight adapter.\r\n */\r\nexport interface HighlightResult {\r\n  /** The highlighted code as an HTML string. */\r\n  html: string;\r\n  /** Whether highlighting was actually applied (false = plain text fallback). */\r\n  isHighlighted: boolean;\r\n}\r\n\r\n/**\r\n * Adapter interface for pluggable syntax highlighting.\r\n */\r\nexport interface CodeBlockHighlightAdapter {\r\n  /**\r\n   * Called once when the adapter is first used.\r\n   * Use this for async initialization (loading Shiki, registering languages, etc).\r\n   * Return value is passed to `highlight()` as context.\r\n   */\r\n  initialize?(): Promise<unknown>;\r\n\r\n  /**\r\n   * Return highlighted HTML for the given code and language.\r\n   * `context` is the resolved value from `initialize()`.\r\n   */\r\n  highlight(options: {\r\n    code: string;\r\n    language: string;\r\n    context: unknown;\r\n  }): HighlightResult;\r\n}\r\n\r\n/** Maps HTML special characters to their entity equivalents for XSS prevention. */\r\nconst htmlEscapeMap: Record<string, string> = {\r\n  '&': '&amp;',\r\n  '<': '&lt;',\r\n  '>': '&gt;',\r\n  '\"': '&quot;',\r\n  \"'\": '&#039;',\r\n};\r\n\r\n/**\r\n * Escapes HTML special characters in a single pass to prevent XSS when rendering plain text.\r\n */\r\nfunction escapeHtml(text: string): string {\r\n  return text.replace(/[&<>\"']/g, (char) => htmlEscapeMap[char] ?? char);\r\n}\r\n\r\n/**\r\n * Built-in plain text adapter that escapes HTML and renders monospace text.\r\n * Zero dependencies, zero bundle cost.\r\n */\r\nexport const plainTextAdapter: CodeBlockHighlightAdapter = {\r\n  highlight({ code }) {\r\n    return {\r\n      html: escapeHtml(code),\r\n      isHighlighted: false,\r\n    };\r\n  },\r\n};\r\n\r\n/**\r\n * A code block component for displaying syntax-highlighted code with\r\n * copy-to-clipboard, line numbers, line highlighting, and expand/collapse.\r\n *\r\n * @slot title - Custom title content. Overrides the `title` attribute.\r\n * @slot controls - Additional control buttons placed before the copy button.\r\n * @slot copy-icon - Custom icon for the copy button (default state).\r\n * @slot copied-icon - Custom icon for the copy button (success state).\r\n *\r\n * @fires bp-copy - Fired after a copy attempt. Detail: `{ code: string, success: boolean }`\r\n *\r\n * @csspart base - Outer wrapper\r\n * @csspart header - Header bar\r\n * @csspart title - Title text area\r\n * @csspart controls - Controls container\r\n * @csspart copy-button - The copy button\r\n * @csspart body - Scrollable code container\r\n * @csspart pre - The `<pre>` element\r\n * @csspart code - The `<code>` element\r\n * @csspart line-number - Individual line number cell\r\n * @csspart line - Individual line of code\r\n */\r\n@customElement('bp-code-block')\r\nexport class BpCodeBlock extends LitElement {\r\n  /**\r\n   * The source code to display.\r\n   */\r\n  @property({ type: String }) declare code: string;\r\n\r\n  /**\r\n   * Language identifier for syntax highlighting (e.g. 'typescript', 'html', 'python').\r\n   * Also displayed as a label when no title is set.\r\n   */\r\n  @property({ type: String }) declare language: string;\r\n\r\n  /**\r\n   * Optional title displayed in the header (e.g. a filename like `index.ts`).\r\n   * Overrides the language label.\r\n   */\r\n  @property({ type: String }) declare title: string;\r\n\r\n  /**\r\n   * Show line number gutter.\r\n   */\r\n  @property({ type: Boolean, attribute: 'show-line-numbers', reflect: true })\r\n  declare showLineNumbers: boolean;\r\n\r\n  /**\r\n   * Array of 1-based line numbers to visually highlight.\r\n   */\r\n  @property({ type: Array }) declare highlightLines: number[];\r\n\r\n  /**\r\n   * Wrap long lines instead of horizontal scroll.\r\n   */\r\n  @property({ type: Boolean, attribute: 'wrap-lines', reflect: true })\r\n  declare wrapLines: boolean;\r\n\r\n  /**\r\n   * Show the copy-to-clipboard button.\r\n   */\r\n  @property({ type: Boolean, attribute: 'show-copy-button', reflect: true })\r\n  declare showCopyButton: boolean;\r\n\r\n  /**\r\n   * When set, collapse the code block to this many visible lines with a \"Show more\" toggle.\r\n   */\r\n  @property({ type: Number, attribute: 'max-lines' })\r\n  declare maxLines: number | undefined;\r\n\r\n  /**\r\n   * Show/hide the header bar. When false, the copy button floats over the code.\r\n   */\r\n  @property({ type: Boolean, attribute: 'show-header', reflect: true })\r\n  declare showHeader: boolean;\r\n\r\n  /**\r\n   * The syntax highlight adapter to use for this instance.\r\n   * Defaults to `BpCodeBlock.defaultAdapter` which is the plainTextAdapter.\r\n   */\r\n  @property({ attribute: false })\r\n  declare highlightAdapter: CodeBlockHighlightAdapter;\r\n\r\n  /**\r\n   * Global default adapter used when no per-instance adapter is set.\r\n   */\r\n  static defaultAdapter: CodeBlockHighlightAdapter = plainTextAdapter;\r\n\r\n  @state() private _copyState: 'idle' | 'copied' | 'error' = 'idle';\r\n  @state() private _expanded = false;\r\n  @state() private _highlightedHtml = '';\r\n  @state() private _adapterContext: unknown = undefined;\r\n  @state() private _adapterInitialized = false;\r\n  @state() private _lineCount = 0;\r\n  @state() private _highlightSet: Set<number> = new Set();\r\n  @state() private _highlightedLines: string[] = [];\r\n\r\n  private _copyResetTimer: ReturnType<typeof setTimeout> | null = null;\r\n\r\n  static styles = [codeBlockStyles];\r\n\r\n  constructor() {\r\n    super();\r\n    this.code = '';\r\n    this.language = 'text';\r\n    this.title = '';\r\n    this.showLineNumbers = false;\r\n    this.highlightLines = [];\r\n    this.wrapLines = true;\r\n    this.showCopyButton = true;\r\n    this.maxLines = undefined;\r\n    this.showHeader = true;\r\n    this.highlightAdapter = BpCodeBlock.defaultAdapter;\r\n  }\r\n\r\n  disconnectedCallback(): void {\r\n    super.disconnectedCallback();\r\n    if (this._copyResetTimer) {\r\n      clearTimeout(this._copyResetTimer);\r\n      this._copyResetTimer = null;\r\n    }\r\n  }\r\n\r\n  protected override willUpdate(changedProperties: PropertyValues): void {\r\n    super.willUpdate(changedProperties);\r\n\r\n    if (changedProperties.has('highlightAdapter')) {\r\n      this._adapterInitialized = false;\r\n      this._adapterContext = undefined;\r\n      this._initializeAdapter();\r\n    }\r\n\r\n    if (changedProperties.has('code')) {\r\n      this._lineCount = this.code.split('\\n').length;\r\n    }\r\n\r\n    if (changedProperties.has('highlightLines')) {\r\n      this._highlightSet = new Set(this.highlightLines);\r\n    }\r\n\r\n    const needsRehighlight =\r\n      changedProperties.has('code') ||\r\n      changedProperties.has('language') ||\r\n      changedProperties.has('highlightAdapter');\r\n\r\n    if (needsRehighlight) {\r\n      this._updateHighlightingSync();\r\n    }\r\n  }\r\n\r\n  connectedCallback(): void {\r\n    super.connectedCallback();\r\n    this._initializeAdapter();\r\n  }\r\n\r\n  private async _initializeAdapter(): Promise<void> {\r\n    const adapter = this.highlightAdapter;\r\n    if (!this._adapterInitialized && adapter.initialize) {\r\n      try {\r\n        const context = await adapter.initialize();\r\n        // Bail if adapter changed while awaiting\r\n        if (this.highlightAdapter !== adapter) return;\r\n        this._adapterContext = context;\r\n      } catch {\r\n        if (this.highlightAdapter !== adapter) return;\r\n        this._adapterContext = undefined;\r\n      }\r\n      this._adapterInitialized = true;\r\n      // Re-highlight with context after async init\r\n      this._updateHighlightingSync();\r\n      this.requestUpdate();\r\n    }\r\n  }\r\n\r\n  private _updateHighlightingSync(): void {\r\n    const adapter = this.highlightAdapter;\r\n\r\n    try {\r\n      const result = adapter.highlight({\r\n        code: this.code,\r\n        language: this.language,\r\n        context: this._adapterContext,\r\n      });\r\n      this._highlightedHtml = result.html;\r\n    } catch {\r\n      // Fallback to plain text on adapter error\r\n      this._highlightedHtml = escapeHtml(this.code);\r\n    }\r\n\r\n    this._highlightedLines = this._highlightedHtml.split('\\n');\r\n  }\r\n\r\n  private _handleCopy = async (): Promise<void> => {\r\n    let success: boolean;\r\n\r\n    try {\r\n      if (navigator.clipboard) {\r\n        await navigator.clipboard.writeText(this.code);\r\n        success = true;\r\n      } else {\r\n        // Fallback for insecure contexts\r\n        success = this._fallbackCopy();\r\n      }\r\n    } catch {\r\n      success = this._fallbackCopy();\r\n    }\r\n\r\n    this._copyState = success ? 'copied' : 'error';\r\n\r\n    this.dispatchEvent(\r\n      new CustomEvent('bp-copy', {\r\n        detail: { code: this.code, success },\r\n        bubbles: true,\r\n        composed: true,\r\n      })\r\n    );\r\n\r\n    // Reset after 2 seconds\r\n    if (this._copyResetTimer) {\r\n      clearTimeout(this._copyResetTimer);\r\n    }\r\n    this._copyResetTimer = setTimeout(() => {\r\n      this._copyState = 'idle';\r\n      this._copyResetTimer = null;\r\n    }, 2000);\r\n  };\r\n\r\n  private _fallbackCopy(): boolean {\r\n    try {\r\n      const textarea = document.createElement('textarea');\r\n      textarea.value = this.code;\r\n      textarea.style.position = 'fixed';\r\n      textarea.style.left = '-9999px';\r\n      textarea.style.top = '-9999px';\r\n      document.body.appendChild(textarea);\r\n      textarea.select();\r\n      const result = document.execCommand('copy');\r\n      document.body.removeChild(textarea);\r\n      return result;\r\n    } catch {\r\n      return false;\r\n    }\r\n  }\r\n\r\n  private _toggleExpanded(): void {\r\n    this._expanded = !this._expanded;\r\n  }\r\n\r\n  private get _shouldCollapse(): boolean {\r\n    return (\r\n      this.maxLines !== undefined &&\r\n      this.maxLines > 0 &&\r\n      this._lineCount > this.maxLines\r\n    );\r\n  }\r\n\r\n  private get _isCollapsed(): boolean {\r\n    return this._shouldCollapse && !this._expanded;\r\n  }\r\n\r\n  private get _headerLabel(): string {\r\n    return this.title || this.language;\r\n  }\r\n\r\n  private _getCopyAriaLabel(): string {\r\n    if (this._copyState === 'copied') return 'Copied!';\r\n    if (this._copyState === 'error') return 'Failed to copy';\r\n    return 'Copy code';\r\n  }\r\n\r\n  private _renderCopyIcon() {\r\n    if (this._copyState === 'copied') {\r\n      return html`\r\n        <slot name=\"copied-icon\">\r\n          <svg\r\n            class=\"code-block__icon\"\r\n            viewBox=\"0 0 24 24\"\r\n            fill=\"none\"\r\n            stroke=\"currentColor\"\r\n            stroke-width=\"2\"\r\n            stroke-linecap=\"round\"\r\n            stroke-linejoin=\"round\"\r\n            aria-hidden=\"true\"\r\n          >\r\n            <polyline points=\"20 6 9 17 4 12\"></polyline>\r\n          </svg>\r\n        </slot>\r\n      `;\r\n    }\r\n\r\n    return html`\r\n      <slot name=\"copy-icon\">\r\n        <svg\r\n          class=\"code-block__icon\"\r\n          viewBox=\"0 0 24 24\"\r\n          fill=\"none\"\r\n          stroke=\"currentColor\"\r\n          stroke-width=\"2\"\r\n          stroke-linecap=\"round\"\r\n          stroke-linejoin=\"round\"\r\n          aria-hidden=\"true\"\r\n        >\r\n          <rect x=\"9\" y=\"9\" width=\"13\" height=\"13\" rx=\"2\" ry=\"2\"></rect>\r\n          <path\r\n            d=\"M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1\"\r\n          ></path>\r\n        </svg>\r\n      </slot>\r\n    `;\r\n  }\r\n\r\n  private _renderCopyButton() {\r\n    if (!this.showCopyButton) return nothing;\r\n\r\n    return html`\r\n      <button\r\n        part=\"copy-button\"\r\n        class=\"code-block__copy code-block__copy--${this._copyState}\"\r\n        aria-label=${this._getCopyAriaLabel()}\r\n        @click=${this._handleCopy}\r\n      >\r\n        ${this._renderCopyIcon()}\r\n      </button>\r\n    `;\r\n  }\r\n\r\n  private _renderHeader() {\r\n    if (!this.showHeader) return nothing;\r\n\r\n    return html`\r\n      <div part=\"header\" class=\"code-block__header\">\r\n        <span part=\"title\" class=\"code-block__title\">\r\n          <slot name=\"title\">${this._headerLabel}</slot>\r\n        </span>\r\n        <div part=\"controls\" class=\"code-block__controls\">\r\n          <slot name=\"controls\"></slot>\r\n          ${this._renderCopyButton()}\r\n        </div>\r\n      </div>\r\n    `;\r\n  }\r\n\r\n  private _renderFloatingCopyButton() {\r\n    if (this.showHeader || !this.showCopyButton) return nothing;\r\n\r\n    return html`\r\n      <div class=\"code-block__floating-copy\">${this._renderCopyButton()}</div>\r\n    `;\r\n  }\r\n\r\n  private _renderLine(\r\n    lineHtml: string,\r\n    lineNumber: number,\r\n    showNumber: boolean\r\n  ) {\r\n    const isHighlighted = this._highlightSet.has(lineNumber);\r\n    // Template kept tight to avoid whitespace text nodes inside the CSS grid.\r\n    // Anonymous text nodes in a grid become extra rows, adding visual gaps.\r\n    return showNumber\r\n      ? html`<span\r\n            part=\"line-number\"\r\n            class=\"code-block__line-number\"\r\n            aria-hidden=\"true\"\r\n            >${lineNumber}</span\r\n          ><span\r\n            part=\"line\"\r\n            class=\"code-block__line ${isHighlighted\r\n              ? 'code-block__line--highlighted'\r\n              : ''}\"\r\n            aria-current=${ifDefined(isHighlighted ? 'true' : undefined)}\r\n            >${unsafeHTML(lineHtml)}</span\r\n          >`\r\n      : html`<span\r\n          part=\"line\"\r\n          class=\"code-block__line ${isHighlighted\r\n            ? 'code-block__line--highlighted'\r\n            : ''}\"\r\n          aria-current=${ifDefined(isHighlighted ? 'true' : undefined)}\r\n          >${unsafeHTML(lineHtml)}</span\r\n        >`;\r\n  }\r\n\r\n  private _renderCodeLines() {\r\n    // Templates kept tight to avoid whitespace text nodes inside CSS grids.\r\n    if (this.showLineNumbers) {\r\n      return html`<div class=\"code-block__lines\">\r\n        ${this._highlightedLines.map((lineHtml, index) =>\r\n          this._renderLine(lineHtml, index + 1, true)\r\n        )}\r\n      </div>`;\r\n    }\r\n\r\n    if (this.highlightLines.length > 0) {\r\n      return html`<div class=\"code-block__lines code-block__lines--no-gutter\">\r\n        ${this._highlightedLines.map((lineHtml, index) =>\r\n          this._renderLine(lineHtml, index + 1, false)\r\n        )}\r\n      </div>`;\r\n    }\r\n\r\n    return unsafeHTML(this._highlightedHtml);\r\n  }\r\n\r\n  private _renderExpandButton() {\r\n    if (!this._shouldCollapse) return nothing;\r\n\r\n    return html`\r\n      <button\r\n        part=\"expand-button\"\r\n        class=\"code-block__expand\"\r\n        @click=${this._toggleExpanded}\r\n        aria-expanded=${this._expanded}\r\n      >\r\n        ${this._expanded ? 'Show less' : 'Show more'}\r\n      </button>\r\n    `;\r\n  }\r\n\r\n  render() {\r\n    const bodyClasses = [\r\n      'code-block__body',\r\n      this.wrapLines ? 'code-block__body--wrap' : 'code-block__body--scroll',\r\n      this._isCollapsed ? 'code-block__body--collapsed' : '',\r\n    ]\r\n      .filter(Boolean)\r\n      .join(' ');\r\n\r\n    return html`\r\n      <div\r\n        part=\"base\"\r\n        class=\"code-block\"\r\n        role=\"region\"\r\n        aria-label=${this.title\r\n          ? `Code example: ${this.title}`\r\n          : 'Code example'}\r\n        style=${this._isCollapsed && this.maxLines\r\n          ? `--_max-lines: ${this.maxLines}`\r\n          : ''}\r\n      >\r\n        ${this._renderHeader()}\r\n        <div part=\"body\" class=${bodyClasses}>\r\n          ${this._renderFloatingCopyButton()}\r\n          <pre\r\n            part=\"pre\"\r\n            class=\"code-block__pre\"\r\n          ><code part=\"code\" class=\"code-block__code\">${this._renderCodeLines()}</code></pre>\r\n          ${this._isCollapsed\r\n            ? html`<div class=\"code-block__gradient\"></div>`\r\n            : nothing}\r\n        </div>\r\n        ${this._renderExpandButton()}\r\n        <div class=\"code-block__status\" role=\"status\" aria-live=\"polite\">\r\n          ${this._copyState === 'copied' ? 'Copied to clipboard' : ''}\r\n          ${this._copyState === 'error' ? 'Failed to copy' : ''}\r\n        </div>\r\n      </div>\r\n    `;\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    'bp-code-block': BpCodeBlock;\r\n  }\r\n}\r\n"],"names":["codeBlockStyles","css","htmlEscapeMap","escapeHtml","text","char","plainTextAdapter","code","BpCodeBlock","LitElement","success","changedProperties","adapter","context","result","textarea","html","nothing","lineHtml","lineNumber","showNumber","isHighlighted","ifDefined","unsafeHTML","index","bodyClasses","__decorateClass","property","state","customElement"],"mappings":";;;;AAEO,MAAMA,IAAkBC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;;;ACqC/B,MAAMC,IAAwC;AAAA,EAC5C,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AACP;AAKA,SAASC,EAAWC,GAAsB;AACxC,SAAOA,EAAK,QAAQ,YAAY,CAACC,MAASH,EAAcG,CAAI,KAAKA,CAAI;AACvE;AAMO,MAAMC,IAA8C;AAAA,EACzD,UAAU,EAAE,MAAAC,KAAQ;AAClB,WAAO;AAAA,MACL,MAAMJ,EAAWI,CAAI;AAAA,MACrB,eAAe;AAAA,IAAA;AAAA,EAEnB;AACF;AAyBO,IAAMC,IAAN,cAA0BC,EAAW;AAAA,EA8E1C,cAAc;AACZ,UAAA,GAdO,KAAQ,aAA0C,QAClD,KAAQ,YAAY,IACpB,KAAQ,mBAAmB,IAC3B,KAAQ,kBAA2B,QACnC,KAAQ,sBAAsB,IAC9B,KAAQ,aAAa,GACrB,KAAQ,oCAAiC,IAAA,GACzC,KAAQ,oBAA8B,CAAA,GAE/C,KAAQ,kBAAwD,MA+FhE,KAAQ,cAAc,YAA2B;AAC/C,UAAIC;AAEJ,UAAI;AACF,QAAI,UAAU,aACZ,MAAM,UAAU,UAAU,UAAU,KAAK,IAAI,GAC7CA,IAAU,MAGVA,IAAU,KAAK,cAAA;AAAA,MAEnB,QAAQ;AACN,QAAAA,IAAU,KAAK,cAAA;AAAA,MACjB;AAEA,WAAK,aAAaA,IAAU,WAAW,SAEvC,KAAK;AAAA,QACH,IAAI,YAAY,WAAW;AAAA,UACzB,QAAQ,EAAE,MAAM,KAAK,MAAM,SAAAA,EAAA;AAAA,UAC3B,SAAS;AAAA,UACT,UAAU;AAAA,QAAA,CACX;AAAA,MAAA,GAIC,KAAK,mBACP,aAAa,KAAK,eAAe,GAEnC,KAAK,kBAAkB,WAAW,MAAM;AACtC,aAAK,aAAa,QAClB,KAAK,kBAAkB;AAAA,MACzB,GAAG,GAAI;AAAA,IACT,GA1HE,KAAK,OAAO,IACZ,KAAK,WAAW,QAChB,KAAK,QAAQ,IACb,KAAK,kBAAkB,IACvB,KAAK,iBAAiB,CAAA,GACtB,KAAK,YAAY,IACjB,KAAK,iBAAiB,IACtB,KAAK,WAAW,QAChB,KAAK,aAAa,IAClB,KAAK,mBAAmBF,EAAY;AAAA,EACtC;AAAA,EAEA,uBAA6B;AAC3B,UAAM,qBAAA,GACF,KAAK,oBACP,aAAa,KAAK,eAAe,GACjC,KAAK,kBAAkB;AAAA,EAE3B;AAAA,EAEmB,WAAWG,GAAyC;AACrE,UAAM,WAAWA,CAAiB,GAE9BA,EAAkB,IAAI,kBAAkB,MAC1C,KAAK,sBAAsB,IAC3B,KAAK,kBAAkB,QACvB,KAAK,mBAAA,IAGHA,EAAkB,IAAI,MAAM,MAC9B,KAAK,aAAa,KAAK,KAAK,MAAM;AAAA,CAAI,EAAE,SAGtCA,EAAkB,IAAI,gBAAgB,MACxC,KAAK,gBAAgB,IAAI,IAAI,KAAK,cAAc,KAIhDA,EAAkB,IAAI,MAAM,KAC5BA,EAAkB,IAAI,UAAU,KAChCA,EAAkB,IAAI,kBAAkB,MAGxC,KAAK,wBAAA;AAAA,EAET;AAAA,EAEA,oBAA0B;AACxB,UAAM,kBAAA,GACN,KAAK,mBAAA;AAAA,EACP;AAAA,EAEA,MAAc,qBAAoC;AAChD,UAAMC,IAAU,KAAK;AACrB,QAAI,CAAC,KAAK,uBAAuBA,EAAQ,YAAY;AACnD,UAAI;AACF,cAAMC,IAAU,MAAMD,EAAQ,WAAA;AAE9B,YAAI,KAAK,qBAAqBA,EAAS;AACvC,aAAK,kBAAkBC;AAAA,MACzB,QAAQ;AACN,YAAI,KAAK,qBAAqBD,EAAS;AACvC,aAAK,kBAAkB;AAAA,MACzB;AACA,WAAK,sBAAsB,IAE3B,KAAK,wBAAA,GACL,KAAK,cAAA;AAAA,IACP;AAAA,EACF;AAAA,EAEQ,0BAAgC;AACtC,UAAMA,IAAU,KAAK;AAErB,QAAI;AACF,YAAME,IAASF,EAAQ,UAAU;AAAA,QAC/B,MAAM,KAAK;AAAA,QACX,UAAU,KAAK;AAAA,QACf,SAAS,KAAK;AAAA,MAAA,CACf;AACD,WAAK,mBAAmBE,EAAO;AAAA,IACjC,QAAQ;AAEN,WAAK,mBAAmBX,EAAW,KAAK,IAAI;AAAA,IAC9C;AAEA,SAAK,oBAAoB,KAAK,iBAAiB,MAAM;AAAA,CAAI;AAAA,EAC3D;AAAA,EAqCQ,gBAAyB;AAC/B,QAAI;AACF,YAAMY,IAAW,SAAS,cAAc,UAAU;AAClD,MAAAA,EAAS,QAAQ,KAAK,MACtBA,EAAS,MAAM,WAAW,SAC1BA,EAAS,MAAM,OAAO,WACtBA,EAAS,MAAM,MAAM,WACrB,SAAS,KAAK,YAAYA,CAAQ,GAClCA,EAAS,OAAA;AACT,YAAMD,IAAS,SAAS,YAAY,MAAM;AAC1C,sBAAS,KAAK,YAAYC,CAAQ,GAC3BD;AAAA,IACT,QAAQ;AACN,aAAO;AAAA,IACT;AAAA,EACF;AAAA,EAEQ,kBAAwB;AAC9B,SAAK,YAAY,CAAC,KAAK;AAAA,EACzB;AAAA,EAEA,IAAY,kBAA2B;AACrC,WACE,KAAK,aAAa,UAClB,KAAK,WAAW,KAChB,KAAK,aAAa,KAAK;AAAA,EAE3B;AAAA,EAEA,IAAY,eAAwB;AAClC,WAAO,KAAK,mBAAmB,CAAC,KAAK;AAAA,EACvC;AAAA,EAEA,IAAY,eAAuB;AACjC,WAAO,KAAK,SAAS,KAAK;AAAA,EAC5B;AAAA,EAEQ,oBAA4B;AAClC,WAAI,KAAK,eAAe,WAAiB,YACrC,KAAK,eAAe,UAAgB,mBACjC;AAAA,EACT;AAAA,EAEQ,kBAAkB;AACxB,WAAI,KAAK,eAAe,WACfE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAkBFA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAmBT;AAAA,EAEQ,oBAAoB;AAC1B,WAAK,KAAK,iBAEHA;AAAA;AAAA;AAAA,oDAGyC,KAAK,UAAU;AAAA,qBAC9C,KAAK,mBAAmB;AAAA,iBAC5B,KAAK,WAAW;AAAA;AAAA,UAEvB,KAAK,iBAAiB;AAAA;AAAA,QATKC;AAAA,EAYnC;AAAA,EAEQ,gBAAgB;AACtB,WAAK,KAAK,aAEHD;AAAA;AAAA;AAAA,+BAGoB,KAAK,YAAY;AAAA;AAAA;AAAA;AAAA,YAIpC,KAAK,mBAAmB;AAAA;AAAA;AAAA,QATHC;AAAA,EAa/B;AAAA,EAEQ,4BAA4B;AAClC,WAAI,KAAK,cAAc,CAAC,KAAK,iBAAuBA,IAE7CD;AAAA,+CACoC,KAAK,mBAAmB;AAAA;AAAA,EAErE;AAAA,EAEQ,YACNE,GACAC,GACAC,GACA;AACA,UAAMC,IAAgB,KAAK,cAAc,IAAIF,CAAU;AAGvD,WAAOC,IACHJ;AAAA;AAAA;AAAA;AAAA,eAIOG,CAAU;AAAA;AAAA;AAAA,sCAGaE,IACtB,kCACA,EAAE;AAAA,2BACSC,EAAUD,IAAgB,SAAS,MAAS,CAAC;AAAA,eACzDE,EAAWL,CAAQ,CAAC;AAAA,eAE3BF;AAAA;AAAA,oCAE4BK,IACtB,kCACA,EAAE;AAAA,yBACSC,EAAUD,IAAgB,SAAS,MAAS,CAAC;AAAA,aACzDE,EAAWL,CAAQ,CAAC;AAAA;AAAA,EAE/B;AAAA,EAEQ,mBAAmB;AAEzB,WAAI,KAAK,kBACAF;AAAA,UACH,KAAK,kBAAkB;AAAA,MAAI,CAACE,GAAUM,MACtC,KAAK,YAAYN,GAAUM,IAAQ,GAAG,EAAI;AAAA,IAAA,CAC3C;AAAA,gBAID,KAAK,eAAe,SAAS,IACxBR;AAAA,UACH,KAAK,kBAAkB;AAAA,MAAI,CAACE,GAAUM,MACtC,KAAK,YAAYN,GAAUM,IAAQ,GAAG,EAAK;AAAA,IAAA,CAC5C;AAAA,gBAIED,EAAW,KAAK,gBAAgB;AAAA,EACzC;AAAA,EAEQ,sBAAsB;AAC5B,WAAK,KAAK,kBAEHP;AAAA;AAAA;AAAA;AAAA,iBAIM,KAAK,eAAe;AAAA,wBACb,KAAK,SAAS;AAAA;AAAA,UAE5B,KAAK,YAAY,cAAc,WAAW;AAAA;AAAA,QATdC;AAAA,EAYpC;AAAA,EAEA,SAAS;AACP,UAAMQ,IAAc;AAAA,MAClB;AAAA,MACA,KAAK,YAAY,2BAA2B;AAAA,MAC5C,KAAK,eAAe,gCAAgC;AAAA,IAAA,EAEnD,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,WAAOT;AAAA;AAAA;AAAA;AAAA;AAAA,qBAKU,KAAK,QACd,iBAAiB,KAAK,KAAK,KAC3B,cAAc;AAAA,gBACV,KAAK,gBAAgB,KAAK,WAC9B,iBAAiB,KAAK,QAAQ,KAC9B,EAAE;AAAA;AAAA,UAEJ,KAAK,eAAe;AAAA,iCACGS,CAAW;AAAA,YAChC,KAAK,2BAA2B;AAAA;AAAA;AAAA;AAAA,wDAIY,KAAK,kBAAkB;AAAA,YACnE,KAAK,eACHT,8CACAC,CAAO;AAAA;AAAA,UAEX,KAAK,qBAAqB;AAAA;AAAA,YAExB,KAAK,eAAe,WAAW,wBAAwB,EAAE;AAAA,YACzD,KAAK,eAAe,UAAU,mBAAmB,EAAE;AAAA;AAAA;AAAA;AAAA,EAI7D;AACF;AAnbaT,EA+DJ,iBAA4CF;AA/DxCE,EA4EJ,SAAS,CAACR,CAAe;AAxEI0B,EAAA;AAAA,EAAnCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAJfnB,EAIyB,WAAA,QAAA,CAAA;AAMAkB,EAAA;AAAA,EAAnCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAVfnB,EAUyB,WAAA,YAAA,CAAA;AAMAkB,EAAA;AAAA,EAAnCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAhBfnB,EAgByB,WAAA,SAAA,CAAA;AAM5BkB,EAAA;AAAA,EADPC,EAAS,EAAE,MAAM,SAAS,WAAW,qBAAqB,SAAS,IAAM;AAAA,GArB/DnB,EAsBH,WAAA,mBAAA,CAAA;AAK2BkB,EAAA;AAAA,EAAlCC,EAAS,EAAE,MAAM,MAAA,CAAO;AAAA,GA3BdnB,EA2BwB,WAAA,kBAAA,CAAA;AAM3BkB,EAAA;AAAA,EADPC,EAAS,EAAE,MAAM,SAAS,WAAW,cAAc,SAAS,IAAM;AAAA,GAhCxDnB,EAiCH,WAAA,aAAA,CAAA;AAMAkB,EAAA;AAAA,EADPC,EAAS,EAAE,MAAM,SAAS,WAAW,oBAAoB,SAAS,IAAM;AAAA,GAtC9DnB,EAuCH,WAAA,kBAAA,CAAA;AAMAkB,EAAA;AAAA,EADPC,EAAS,EAAE,MAAM,QAAQ,WAAW,aAAa;AAAA,GA5CvCnB,EA6CH,WAAA,YAAA,CAAA;AAMAkB,EAAA;AAAA,EADPC,EAAS,EAAE,MAAM,SAAS,WAAW,eAAe,SAAS,IAAM;AAAA,GAlDzDnB,EAmDH,WAAA,cAAA,CAAA;AAOAkB,EAAA;AAAA,EADPC,EAAS,EAAE,WAAW,GAAA,CAAO;AAAA,GAzDnBnB,EA0DH,WAAA,oBAAA,CAAA;AAOSkB,EAAA;AAAA,EAAhBE,EAAA;AAAM,GAjEIpB,EAiEM,WAAA,cAAA,CAAA;AACAkB,EAAA;AAAA,EAAhBE,EAAA;AAAM,GAlEIpB,EAkEM,WAAA,aAAA,CAAA;AACAkB,EAAA;AAAA,EAAhBE,EAAA;AAAM,GAnEIpB,EAmEM,WAAA,oBAAA,CAAA;AACAkB,EAAA;AAAA,EAAhBE,EAAA;AAAM,GApEIpB,EAoEM,WAAA,mBAAA,CAAA;AACAkB,EAAA;AAAA,EAAhBE,EAAA;AAAM,GArEIpB,EAqEM,WAAA,uBAAA,CAAA;AACAkB,EAAA;AAAA,EAAhBE,EAAA;AAAM,GAtEIpB,EAsEM,WAAA,cAAA,CAAA;AACAkB,EAAA;AAAA,EAAhBE,EAAA;AAAM,GAvEIpB,EAuEM,WAAA,iBAAA,CAAA;AACAkB,EAAA;AAAA,EAAhBE,EAAA;AAAM,GAxEIpB,EAwEM,WAAA,qBAAA,CAAA;AAxENA,IAANkB,EAAA;AAAA,EADNG,EAAc,eAAe;AAAA,GACjBrB,CAAA;"}

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

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

package/dist/components/drawer.js

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

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 '../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 name=\"close\" 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","__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 '../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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"}

package/dist/components/icon/icon-registry.d.ts

@@ -0,0 +1,27 @@
+/**
+ * Shared icon registry — runtime singleton.
+ *
+ * Consumers can register icons by name so that `<bp-icon name="...">` can
+ * look them up at render time. The `all.ts` barrel imports every icon entry
+ * and registers them all (used in Storybook / dev tools).
+ *
+ * Internal Blueprint components do NOT use this registry. They import SVG
+ * data as value bindings and pass it directly to `<bp-icon>` via the `svg`
+ * property, which guarantees the data survives bundler tree-shaking.
+ */
+/**
+ * Register an icon's SVG content by name.
+ * Duplicate registrations silently overwrite (idempotent).
+ */
+export declare function registerIcon(name: string, svg: string): void;
+/**
+ * Retrieve the raw SVG string for a registered icon.
+ * Returns undefined if the icon has not been registered.
+ */
+export declare function getIconSvg(name: string): string | undefined;
+/**
+ * Get all currently registered icon names.
+ * Useful for Storybook and dev-tool enumeration.
+ */
+export declare function getRegisteredIconNames(): string[];
+//# sourceMappingURL=icon-registry.d.ts.map

package/dist/components/icon/icon-registry.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon-registry.d.ts","sourceRoot":"","sources":["../../../source/components/icon/icon-registry.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAIH;;;GAGG;AACH,wBAAgB,YAAY,CAAC,IAAI,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,GAAG,IAAI,CAE5D;AAED;;;GAGG;AACH,wBAAgB,UAAU,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAE3D;AAED;;;GAGG;AACH,wBAAgB,sBAAsB,IAAI,MAAM,EAAE,CAEjD"}

package/dist/components/icon/icon.d.ts

@@ -1,5 +1,6 @@
 import { LitElement } from 'lit';
-import { type IconName } from './icons/registry.generated.js';
+import type { IconName } from './icons/icon-name.generated.js';
+export type { IconName } from './icons/icon-name.generated.js';
 export type IconSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | 'full';
 export type IconColor = 'default' | 'primary' | 'success' | 'warning' | 'error' | 'muted';
 /**
@@ -26,10 +27,20 @@ export type IconColor = 'default' | 'primary' | 'success' | 'warning' | 'error'
  */
 export declare class BpIcon extends LitElement {
     /**
-     * Name of the icon from the System UI Icons library
+     * Name of the icon from the System UI Icons library.
+     * Looks up the SVG from the runtime registry (icons must be registered
+     * first via `registerIcon()` or by importing `all.ts`).
+     * Ignored when the `svg` property is set.
      * @type {IconName}
      */
     name: IconName | '';
+    /**
+     * Raw SVG string to render directly. When set, the `name` property is
+     * ignored. This is the preferred way for internal Blueprint components
+     * to supply icon data because it survives bundler tree-shaking.
+     * @type {string}
+     */
+    svg: string;
     /**
      * Size variant of the icon
      * @type {IconSize}

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

@@ -1 +1 @@
-{"version":3,"file":"icon.d.ts","sourceRoot":"","sources":["../../../source/components/icon/icon.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAIvC,OAAO,EAAW,KAAK,QAAQ,EAAE,MAAM,+BAA+B,CAAC;AAEvE,MAAM,MAAM,QAAQ,GAChB,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,KAAK,GACL,KAAK,GACL,KAAK,GACL,MAAM,CAAC;AACX,MAAM,MAAM,SAAS,GACjB,SAAS,GACT,SAAS,GACT,SAAS,GACT,SAAS,GACT,OAAO,GACP,OAAO,CAAC;AAEZ;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,qBACa,MAAO,SAAQ,UAAU;IACpC;;;OAGG;IACiC,IAAI,EAAE,QAAQ,GAAG,EAAE,CAAC;IAExD;;;OAGG;IACgD,IAAI,EAAE,QAAQ,CAAC;IAElE;;;OAGG;IACiC,KAAK,EAAE,SAAS,CAAC;IAErD;;;OAGG;IAEK,SAAS,EAAE,MAAM,CAAC;;IAU1B,MAAM,CAAC,MAAM,4BAAgB;IAE7B,MAAM;CAmBP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,MAAM,CAAC;KACnB;CACF"}
+{"version":3,"file":"icon.d.ts","sourceRoot":"","sources":["../../../source/components/icon/icon.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAMvC,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAE/D,YAAY,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAE/D,MAAM,MAAM,QAAQ,GAChB,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,KAAK,GACL,KAAK,GACL,KAAK,GACL,MAAM,CAAC;AACX,MAAM,MAAM,SAAS,GACjB,SAAS,GACT,SAAS,GACT,SAAS,GACT,SAAS,GACT,OAAO,GACP,OAAO,CAAC;AAEZ;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,qBACa,MAAO,SAAQ,UAAU;IACpC;;;;;;OAMG;IACiC,IAAI,EAAE,QAAQ,GAAG,EAAE,CAAC;IAExD;;;;;OAKG;IACiC,GAAG,EAAE,MAAM,CAAC;IAEhD;;;OAGG;IACgD,IAAI,EAAE,QAAQ,CAAC;IAElE;;;OAGG;IACiC,KAAK,EAAE,SAAS,CAAC;IAErD;;;OAGG;IAEK,SAAS,EAAE,MAAM,CAAC;;IAW1B,MAAM,CAAC,MAAM,4BAAgB;IAE7B,MAAM;CAmBP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,MAAM,CAAC;KACnB;CACF"}

package/dist/components/icon/icons/all.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=all.d.ts.map

package/dist/components/icon/icons/all.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"all.d.ts","sourceRoot":"","sources":["../../../../source/components/icon/icons/all.ts"],"names":[],"mappings":""}