@krollins/blueprint 0.1.16 → 0.2.1

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';\nimport '../icon/icons/entries/close.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

@@ -1,15 +1,19 @@
 /**
  * Shared icon registry — runtime singleton.
  *
- * Icons register themselves by calling registerIcon() as a side effect
- * when their entry module is imported. The bp-icon component reads from
- * this registry at render time via getIconSvg().
+ * Serves two roles:
+ * 1. **Lazy-load cache** — When `<bp-icon name="...">` dynamically imports
+ *    an icon entry module, the SVG is stored here so subsequent renders of
+ *    the same icon name are instant.
+ * 2. **Bulk registration** — `all.ts` imports every icon entry and calls
+ *    `registerIcon()` for each one (used by Storybook / dev tools).
  *
- * This module intentionally contains NO SVG data. It is the meeting point
- * between icon entry modules (writers) and the bp-icon component (reader).
+ * Internal Blueprint components bypass the registry entirely. They import
+ * SVG data as value bindings and pass them directly via the `svg` property,
+ * which guarantees the data survives bundler tree-shaking.
  */
 /**
- * Register an icon's SVG content. Called by per-icon entry modules.
+ * Register an icon's SVG content by name.
  * Duplicate registrations silently overwrite (idempotent).
  */
 export declare function registerIcon(name: string, svg: string): void;
@@ -18,9 +22,4 @@ export declare function registerIcon(name: string, svg: string): void;
  * 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

@@ -1 +1 @@
-{"version":3,"file":"icon-registry.d.ts","sourceRoot":"","sources":["../../../source/components/icon/icon-registry.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;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"}
+{"version":3,"file":"icon-registry.d.ts","sourceRoot":"","sources":["../../../source/components/icon/icon-registry.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;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"}

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

@@ -1,5 +1,6 @@
-import { LitElement } from 'lit';
+import { LitElement, type PropertyValues } from 'lit';
 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.
+     * When set (and `svg` is empty), the component lazy-loads the icon's
+     * entry module at runtime and caches the SVG for subsequent renders.
+     * 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}
@@ -45,11 +56,24 @@ export declare class BpIcon extends LitElement {
      * @type {string}
      */
     ariaLabel: string;
+    /** SVG content resolved by lazy-loading an icon entry module. */
+    private _loadedSvg;
+    /** Tracks which icon name is currently being loaded to avoid races. */
+    private _loadingName;
     constructor();
     static styles: import("lit").CSSResult[];
+    willUpdate(changedProps: PropertyValues): void;
+    /**
+     * Lazy-load an icon entry module by name.
+     *
+     * First checks the sync registry cache (populated by `all.ts` or a
+     * previous load). If the icon isn't cached, dynamically imports the
+     * per-icon entry module using `import.meta.url` to resolve the path
+     * relative to this file's location in `dist/`.
+     */
+    private _loadIcon;
     render(): import("lit-html").TemplateResult<1>;
 }
-export type { IconName } from './icons/icon-name.generated.js';
 declare global {
     interface HTMLElementTagNameMap {
         'bp-icon': BpIcon;

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;AAMvC,OAAO,KAAK,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;;;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,YAAY,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAE/D,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,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAM5D,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;IAE1B,iEAAiE;IACxD,OAAO,CAAC,UAAU,CAAM;IAEjC,uEAAuE;IACvE,OAAO,CAAC,YAAY,CAAM;;IAW1B,MAAM,CAAC,MAAM,4BAAgB;IAE7B,UAAU,CAAC,YAAY,EAAE,cAAc;IAgBvC;;;;;;;OAOG;YACW,SAAS;IAqCvB,MAAM;CAmBP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,MAAM,CAAC;KACnB;CACF"}