@krollins/blueprint 0.2.2 → 0.3.0

package/dist/components/popover.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"popover.js","sources":["../../source/components/popover/popover.style.ts","../../source/components/popover/popover.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const popoverStyles = css`\n  /* Base styles */\n  :host {\n    display: inline-block;\n    position: relative;\n  }\n\n  .popover {\n    position: relative;\n    display: inline-block;\n    font-family: var(--bp-font-family);\n    font-size: var(--bp-font-size-base);\n    color: var(--bp-color-text);\n  }\n\n  /* Trigger */\n  .popover__trigger {\n    display: inline-flex;\n    align-items: center;\n    cursor: pointer;\n    outline: none;\n    user-select: none;\n  }\n\n  .popover__trigger:hover {\n    opacity: 0.8;\n  }\n\n  .popover__trigger:focus-visible {\n    outline: var(--bp-focus-width) var(--bp-focus-style) var(--bp-color-focus);\n    outline-offset: var(--bp-focus-offset);\n    border-radius: var(--bp-border-radius-sm);\n  }\n\n  .popover--disabled .popover__trigger {\n    cursor: not-allowed;\n    opacity: var(--bp-opacity-disabled);\n  }\n\n  /* Panel base */\n  .popover__panel {\n    position: absolute;\n    z-index: var(--bp-z-popover);\n    min-width: 160px;\n    max-width: 320px;\n    max-height: calc(100vh - 80px);\n    background-color: var(--bp-color-surface-elevated);\n    border: var(--bp-border-width) solid var(--bp-color-border);\n    border-radius: var(--bp-border-radius-lg);\n    box-shadow: var(--bp-shadow-lg);\n    opacity: 1;\n    animation: popover-fade-in var(--bp-transition-fast) ease-out;\n  }\n\n  @keyframes popover-fade-in {\n    from {\n      opacity: 0;\n      transform: scale(0.95);\n    }\n    to {\n      opacity: 1;\n      transform: scale(1);\n    }\n  }\n\n  /* Panel placements - Bottom */\n  .popover__panel--bottom,\n  .popover__panel--bottom-start,\n  .popover__panel--bottom-end {\n    top: 100%;\n    margin-top: var(--popover-distance);\n  }\n\n  .popover__panel--bottom {\n    left: 50%;\n    transform: translateX(-50%);\n  }\n\n  .popover__panel--bottom-start {\n    left: 0;\n  }\n\n  .popover__panel--bottom-end {\n    right: 0;\n  }\n\n  /* Panel placements - Top */\n  .popover__panel--top,\n  .popover__panel--top-start,\n  .popover__panel--top-end {\n    bottom: 100%;\n    margin-bottom: var(--popover-distance);\n  }\n\n  .popover__panel--top {\n    left: 50%;\n    transform: translateX(-50%);\n  }\n\n  .popover__panel--top-start {\n    left: 0;\n  }\n\n  .popover__panel--top-end {\n    right: 0;\n  }\n\n  /* Panel placements - Left */\n  .popover__panel--left,\n  .popover__panel--left-start,\n  .popover__panel--left-end {\n    right: 100%;\n    margin-right: var(--popover-distance);\n  }\n\n  .popover__panel--left {\n    top: 50%;\n    transform: translateY(-50%);\n  }\n\n  .popover__panel--left-start {\n    top: 0;\n  }\n\n  .popover__panel--left-end {\n    bottom: 0;\n  }\n\n  /* Panel placements - Right */\n  .popover__panel--right,\n  .popover__panel--right-start,\n  .popover__panel--right-end {\n    left: 100%;\n    margin-left: var(--popover-distance);\n  }\n\n  .popover__panel--right {\n    top: 50%;\n    transform: translateY(-50%);\n  }\n\n  .popover__panel--right-start {\n    top: 0;\n  }\n\n  .popover__panel--right-end {\n    bottom: 0;\n  }\n\n  /* Arrow */\n  .popover__arrow {\n    position: absolute;\n    width: var(--bp-spacing-5);\n    height: var(--bp-spacing-5);\n    background-color: var(--bp-color-surface-elevated);\n    border: var(--bp-border-width) solid var(--bp-color-border);\n    transform: rotate(45deg);\n    z-index: -1;\n  }\n\n  /* Arrow positions - bottom placements */\n  .popover__panel--bottom .popover__arrow,\n  .popover__panel--bottom-start .popover__arrow,\n  .popover__panel--bottom-end .popover__arrow {\n    top: calc(var(--bp-spacing-2) * -1);\n    border-bottom: none;\n    border-right: none;\n  }\n\n  .popover__panel--bottom .popover__arrow {\n    left: 50%;\n    transform: translateX(-50%) rotate(45deg);\n  }\n\n  .popover__panel--bottom-start .popover__arrow {\n    left: var(--bp-spacing-5);\n  }\n\n  .popover__panel--bottom-end .popover__arrow {\n    right: var(--bp-spacing-5);\n  }\n\n  /* Arrow positions - top placements */\n  .popover__panel--top .popover__arrow,\n  .popover__panel--top-start .popover__arrow,\n  .popover__panel--top-end .popover__arrow {\n    bottom: calc(var(--bp-spacing-2) * -1);\n    border-top: none;\n    border-left: none;\n  }\n\n  .popover__panel--top .popover__arrow {\n    left: 50%;\n    transform: translateX(-50%) rotate(45deg);\n  }\n\n  .popover__panel--top-start .popover__arrow {\n    left: var(--bp-spacing-5);\n  }\n\n  .popover__panel--top-end .popover__arrow {\n    right: var(--bp-spacing-5);\n  }\n\n  /* Arrow positions - left placements */\n  .popover__panel--left .popover__arrow,\n  .popover__panel--left-start .popover__arrow,\n  .popover__panel--left-end .popover__arrow {\n    right: calc(var(--bp-spacing-2) * -1);\n    border-left: none;\n    border-bottom: none;\n  }\n\n  .popover__panel--left .popover__arrow {\n    top: 50%;\n    transform: translateY(-50%) rotate(45deg);\n  }\n\n  .popover__panel--left-start .popover__arrow {\n    top: var(--bp-spacing-5);\n  }\n\n  .popover__panel--left-end .popover__arrow {\n    bottom: var(--bp-spacing-5);\n  }\n\n  /* Arrow positions - right placements */\n  .popover__panel--right .popover__arrow,\n  .popover__panel--right-start .popover__arrow,\n  .popover__panel--right-end .popover__arrow {\n    left: calc(var(--bp-spacing-2) * -1);\n    border-right: none;\n    border-top: none;\n  }\n\n  .popover__panel--right .popover__arrow {\n    top: 50%;\n    transform: translateY(-50%) rotate(45deg);\n  }\n\n  .popover__panel--right-start .popover__arrow {\n    top: var(--bp-spacing-5);\n  }\n\n  .popover__panel--right-end .popover__arrow {\n    bottom: var(--bp-spacing-5);\n  }\n\n  /* Header */\n  .popover__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  }\n\n  .popover__header ::slotted(*) {\n    margin: 0;\n    font-size: var(--bp-font-size-base);\n    font-weight: var(--bp-font-weight-semibold);\n    color: var(--bp-color-text-strong);\n  }\n\n  /* Body */\n  .popover__body {\n    padding: var(--bp-spacing-4) var(--bp-spacing-5);\n    overflow-y: auto;\n    max-height: calc(100vh - 160px);\n  }\n\n  /* Footer */\n  .popover__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  }\n\n  /* Close button */\n  .popover__close {\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  .popover__close:hover {\n    background-color: var(--bp-color-surface-subdued);\n    color: var(--bp-color-text);\n  }\n\n  .popover__close:active {\n    background-color: var(--bp-color-surface-pressed);\n    transform: translateY(1px);\n  }\n\n  .popover__close: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  .popover__close:focus:not(:focus-visible) {\n    outline: none;\n  }\n\n  .popover__close:focus-visible {\n    outline: var(--bp-focus-width) var(--bp-focus-style) var(--bp-color-focus);\n    outline-offset: var(--bp-focus-offset);\n  }\n\n  .popover__close bp-icon {\n    width: var(--bp-spacing-4);\n    height: var(--bp-spacing-4);\n  }\n\n  /* Reduced motion */\n  @media (prefers-reduced-motion: reduce) {\n    .popover__panel {\n      animation: none;\n    }\n\n    .popover__close {\n      transition: none;\n    }\n  }\n`;\n","import { LitElement, html, nothing } from 'lit';\nimport { customElement, property, state, query } from 'lit/decorators.js';\nimport { popoverStyles } from './popover.style.js';\nimport { booleanConverter } from '../../utilities/boolean-converter.js';\nimport { closeSvg } from '../icon/icons/entries/close.js';\nimport '../icon/icon.js';\n\nexport type PopoverPlacement =\n  | 'top'\n  | 'top-start'\n  | 'top-end'\n  | 'bottom'\n  | 'bottom-start'\n  | 'bottom-end'\n  | 'left'\n  | 'left-start'\n  | 'left-end'\n  | 'right'\n  | 'right-start'\n  | 'right-end';\n\nexport type PopoverTrigger = 'click' | 'hover' | 'focus' | 'manual';\n\n/**\n * A popover component that displays rich content in a floating panel.\n * Supports multiple trigger modes: click, hover, focus, or manual control.\n *\n * @fires bp-show - Fired when the popover opens\n * @fires bp-hide - Fired when the popover closes\n * @fires bp-after-show - Fired after the popover open animation completes\n * @fires bp-after-hide - Fired after the popover close animation completes\n *\n * @slot - The trigger element that controls the popover\n * @slot content - The rich content to display in the popover panel\n * @slot header - Optional header content for the popover\n * @slot footer - Optional footer content for the popover\n *\n * @csspart trigger - The trigger wrapper element\n * @csspart panel - The popover panel container\n * @csspart header - The header section\n * @csspart body - The body/content section\n * @csspart footer - The footer section\n * @csspart arrow - The arrow pointing to the trigger\n * @csspart close-button - The close button (when showClose is true)\n */\n@customElement('bp-popover')\nexport class BpPopover extends LitElement {\n  /** Whether the popover is currently open */\n  @property({ type: Boolean, reflect: true }) declare open: boolean;\n\n  /** Placement of the popover relative to the trigger */\n  @property({\n    type: String,\n    reflect: true,\n    converter: {\n      fromAttribute: (value: string | null): PopoverPlacement => {\n        const validPlacements: PopoverPlacement[] = [\n          'top',\n          'top-start',\n          'top-end',\n          'bottom',\n          'bottom-start',\n          'bottom-end',\n          'left',\n          'left-start',\n          'left-end',\n          'right',\n          'right-start',\n          'right-end',\n        ];\n        return validPlacements.includes(value as PopoverPlacement)\n          ? (value as PopoverPlacement)\n          : 'bottom';\n      },\n    },\n  })\n  declare placement: PopoverPlacement;\n\n  /** How the popover is triggered */\n  @property({\n    type: String,\n    converter: {\n      fromAttribute: (value: string | null): PopoverTrigger => {\n        const validTriggers: PopoverTrigger[] = [\n          'click',\n          'hover',\n          'focus',\n          'manual',\n        ];\n        return validTriggers.includes(value as PopoverTrigger)\n          ? (value as PopoverTrigger)\n          : 'click';\n      },\n    },\n  })\n  declare trigger: PopoverTrigger;\n\n  /** Whether to show an arrow pointing to the trigger */\n  @property({ type: Boolean }) declare arrow: boolean;\n\n  /** Whether to show a close button in the popover */\n  @property({ type: Boolean, attribute: 'show-close' })\n  declare showClose: boolean;\n\n  /** Whether clicking outside closes the popover */\n  @property({\n    converter: booleanConverter,\n    attribute: 'close-on-outside-click',\n    reflect: true,\n  })\n  declare closeOnOutsideClick: boolean;\n\n  /** Whether pressing Escape closes the popover */\n  @property({\n    converter: booleanConverter,\n    attribute: 'close-on-escape',\n    reflect: true,\n  })\n  declare closeOnEscape: boolean;\n\n  /** Distance in pixels between the trigger and the panel */\n  @property({ type: Number }) declare distance: number;\n\n  /** Delay in milliseconds before showing (for hover trigger) */\n  @property({ type: Number, attribute: 'show-delay' })\n  declare showDelay: number;\n\n  /** Delay in milliseconds before hiding (for hover trigger) */\n  @property({ type: Number, attribute: 'hide-delay' })\n  declare hideDelay: number;\n\n  /** Whether the popover is disabled */\n  @property({ type: Boolean }) declare disabled: boolean;\n\n  /** Accessible label for the popover panel */\n  @property({ type: String }) declare label: string;\n\n  /** Whether the popover has header slot content */\n  @state() private hasHeader = false;\n\n  /** Whether the popover has footer slot content */\n  @state() private hasFooter = false;\n\n  @query('.popover__trigger') private triggerElement!: HTMLElement;\n\n  private showTimeout: number | null = null;\n  private hideTimeout: number | null = null;\n  private popoverId = `popover-${Math.random().toString(36).substring(2, 11)}`;\n\n  static styles = [popoverStyles];\n\n  constructor() {\n    super();\n    this.open = false;\n    this.placement = 'bottom';\n    this.trigger = 'click';\n    this.arrow = false;\n    this.showClose = false;\n    this.closeOnOutsideClick = true;\n    this.closeOnEscape = true;\n    this.distance = 8;\n    this.showDelay = 200;\n    this.hideDelay = 200;\n    this.disabled = false;\n    this.label = '';\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    document.addEventListener('click', this.handleDocumentClick, {\n      passive: true,\n    });\n    document.addEventListener('keydown', this.handleDocumentKeydown);\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n    document.removeEventListener('click', this.handleDocumentClick, {\n      passive: true,\n    } as EventListenerOptions);\n    document.removeEventListener('keydown', this.handleDocumentKeydown);\n    this.clearTimeouts();\n  }\n\n  /** Show the popover */\n  show(): void {\n    if (this.disabled || this.open) return;\n\n    this.clearTimeouts();\n    this.open = true;\n\n    this.dispatchEvent(\n      new CustomEvent('bp-show', { bubbles: true, composed: true })\n    );\n\n    this.updateComplete.then(() => {\n      this.dispatchEvent(\n        new CustomEvent('bp-after-show', { bubbles: true, composed: true })\n      );\n    });\n  }\n\n  /** Hide the popover */\n  hide(): void {\n    if (!this.open) return;\n\n    this.clearTimeouts();\n    this.open = false;\n\n    this.dispatchEvent(\n      new CustomEvent('bp-hide', { bubbles: true, composed: true })\n    );\n\n    this.updateComplete.then(() => {\n      this.dispatchEvent(\n        new CustomEvent('bp-after-hide', { bubbles: true, composed: true })\n      );\n    });\n  }\n\n  /** Toggle the popover open/closed */\n  toggle(): void {\n    if (this.open) {\n      this.hide();\n    } else {\n      this.show();\n    }\n  }\n\n  /**\n   * Clears any pending show/hide timeout operations.\n   * Prevents race conditions with rapid trigger interactions.\n   */\n  private clearTimeouts(): void {\n    if (this.showTimeout !== null) {\n      window.clearTimeout(this.showTimeout);\n      this.showTimeout = null;\n    }\n    if (this.hideTimeout !== null) {\n      window.clearTimeout(this.hideTimeout);\n      this.hideTimeout = null;\n    }\n  }\n\n  /**\n   * Handles click events on the trigger element.\n   * Toggles popover state for click trigger mode.\n   * @param event - The mouse click event\n   */\n  private handleTriggerClick = (event: MouseEvent): void => {\n    if (this.disabled || this.trigger !== 'click') return;\n    event.stopPropagation();\n    this.toggle();\n  };\n\n  /**\n   * Handles keyboard events on the trigger element.\n   * Toggles popover on Enter or Space key for click trigger mode.\n   * @param event - The keyboard event\n   */\n  private handleTriggerKeydown = (event: KeyboardEvent): void => {\n    if (this.disabled) return;\n\n    if (\n      this.trigger === 'click' &&\n      (event.key === 'Enter' || event.key === ' ')\n    ) {\n      event.preventDefault();\n      this.toggle();\n    }\n  };\n\n  /**\n   * Handles mouse enter events on the trigger element.\n   * Starts the show delay timer for hover trigger mode.\n   */\n  private handleTriggerMouseEnter = (): void => {\n    if (this.disabled || this.trigger !== 'hover') return;\n\n    this.clearTimeouts();\n    this.showTimeout = window.setTimeout(() => {\n      this.show();\n    }, this.showDelay);\n  };\n\n  /**\n   * Handles mouse leave events on the trigger element.\n   * Starts the hide delay timer for hover trigger mode.\n   */\n  private handleTriggerMouseLeave = (): void => {\n    if (this.trigger !== 'hover') return;\n\n    this.clearTimeouts();\n    this.hideTimeout = window.setTimeout(() => {\n      this.hide();\n    }, this.hideDelay);\n  };\n\n  /**\n   * Handles mouse enter events on the popover panel.\n   * Prevents the popover from hiding when hovering over panel content in hover trigger mode.\n   */\n  private handlePanelMouseEnter = (): void => {\n    if (this.trigger !== 'hover') return;\n    this.clearTimeouts();\n  };\n\n  /**\n   * Handles mouse leave events on the popover panel.\n   * Starts the hide delay timer when leaving panel in hover trigger mode.\n   */\n  private handlePanelMouseLeave = (): void => {\n    if (this.trigger !== 'hover') return;\n\n    this.clearTimeouts();\n    this.hideTimeout = window.setTimeout(() => {\n      this.hide();\n    }, this.hideDelay);\n  };\n\n  /**\n   * Handles focus events on the trigger element.\n   * Shows popover immediately for focus trigger mode.\n   */\n  private handleTriggerFocus = (): void => {\n    if (this.disabled || this.trigger !== 'focus') return;\n    this.show();\n  };\n\n  /**\n   * Handles blur events on the trigger element.\n   * Hides popover immediately for focus trigger mode.\n   */\n  private handleTriggerBlur = (): void => {\n    if (this.trigger !== 'focus') return;\n    this.hide();\n  };\n\n  /**\n   * Handles click events on the document.\n   * Closes popover when clicking outside if closeOnOutsideClick is true.\n   * @param event - The mouse click event\n   */\n  private handleDocumentClick = (event: MouseEvent): void => {\n    if (!this.closeOnOutsideClick || !this.open) return;\n    if (this.trigger === 'manual') return;\n\n    const path = event.composedPath();\n    if (!path.includes(this)) {\n      this.hide();\n    }\n  };\n\n  /**\n   * Handles keyboard events on the document.\n   * Closes popover on Escape key if closeOnEscape is true and returns focus to trigger.\n   * @param event - The keyboard event\n   */\n  private handleDocumentKeydown = (event: KeyboardEvent): void => {\n    if (!this.closeOnEscape || !this.open) return;\n\n    if (event.key === 'Escape') {\n      event.preventDefault();\n      this.hide();\n      this.triggerElement?.focus();\n    }\n  };\n\n  /**\n   * Handles click events on the close button.\n   * Closes the popover immediately.\n   */\n  private handleCloseClick = (): void => {\n    this.hide();\n  };\n\n  /**\n   * Handles changes to the header slot.\n   * Updates internal state to conditionally render header wrapper.\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 changes to the footer slot.\n   * Updates internal state to conditionally render footer wrapper.\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    return html`\n      <div\n        class=\"popover ${this.open ? 'popover--open' : ''} ${this.disabled\n          ? 'popover--disabled'\n          : ''}\"\n      >\n        <div\n          class=\"popover__trigger\"\n          part=\"trigger\"\n          tabindex=${this.disabled ? -1 : 0}\n          role=\"button\"\n          aria-haspopup=\"dialog\"\n          aria-expanded=${this.open}\n          aria-controls=${this.open ? this.popoverId : nothing}\n          aria-disabled=${this.disabled}\n          @click=${this.handleTriggerClick}\n          @keydown=${this.handleTriggerKeydown}\n          @mouseenter=${this.handleTriggerMouseEnter}\n          @mouseleave=${this.handleTriggerMouseLeave}\n          @focus=${this.handleTriggerFocus}\n          @blur=${this.handleTriggerBlur}\n        >\n          <slot></slot>\n        </div>\n        ${this.open\n          ? html`\n              <div\n                id=${this.popoverId}\n                class=\"popover__panel popover__panel--${this.placement}\"\n                part=\"panel\"\n                role=\"dialog\"\n                aria-label=${this.label || nothing}\n                aria-modal=\"false\"\n                style=\"--popover-distance: ${this.distance}px;\"\n                @mouseenter=${this.handlePanelMouseEnter}\n                @mouseleave=${this.handlePanelMouseLeave}\n              >\n                ${this.arrow\n                  ? html`<div class=\"popover__arrow\" part=\"arrow\"></div>`\n                  : nothing}\n                ${this.hasHeader || this.showClose\n                  ? html`\n                      <div class=\"popover__header\" part=\"header\">\n                        <slot\n                          name=\"header\"\n                          @slotchange=${this.handleHeaderSlotChange}\n                        ></slot>\n                        ${this.showClose\n                          ? html`\n                              <button\n                                class=\"popover__close\"\n                                part=\"close-button\"\n                                type=\"button\"\n                                aria-label=\"Close popover\"\n                                @click=${this.handleCloseClick}\n                              >\n                                <bp-icon .svg=${closeSvg} size=\"sm\"></bp-icon>\n                              </button>\n                            `\n                          : nothing}\n                      </div>\n                    `\n                  : html`<slot\n                      name=\"header\"\n                      @slotchange=${this.handleHeaderSlotChange}\n                    ></slot>`}\n                <div class=\"popover__body\" part=\"body\">\n                  <slot name=\"content\"></slot>\n                </div>\n                ${this.hasFooter\n                  ? html`\n                      <div class=\"popover__footer\" part=\"footer\">\n                        <slot\n                          name=\"footer\"\n                          @slotchange=${this.handleFooterSlotChange}\n                        ></slot>\n                      </div>\n                    `\n                  : html`<slot\n                      name=\"footer\"\n                      @slotchange=${this.handleFooterSlotChange}\n                    ></slot>`}\n              </div>\n            `\n          : nothing}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'bp-popover': BpPopover;\n  }\n}\n"],"names":["popoverStyles","css","BpPopover","LitElement","event","slot","html","nothing","closeSvg","__decorateClass","property","value","booleanConverter","state","query","customElement"],"mappings":";;;;AAEO,MAAMA,IAAgBC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAA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"}

package/dist/components/progress.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"progress.js","sources":["../../source/components/progress/progress.style.ts","../../source/components/progress/progress.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const progressStyles = css`\n  /* Base styles */\n  :host {\n    display: block;\n  }\n\n  .progress-container {\n    width: 100%;\n  }\n\n  .progress-header {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    margin-bottom: var(--bp-spacing-sm);\n    font-family: var(--bp-font-family);\n    font-size: var(--bp-font-size-sm);\n    color: var(--bp-color-text);\n  }\n\n  .progress-label {\n    font-weight: var(--bp-font-weight-medium);\n  }\n\n  .progress-value {\n    color: var(--bp-color-text);\n    opacity: 0.85;\n    font-feature-settings: 'tnum';\n    font-variant-numeric: tabular-nums;\n  }\n\n  .progress {\n    position: relative;\n    width: 100%;\n    background-color: var(--bp-color-border);\n    opacity: 0.3;\n    border-radius: var(--bp-border-radius-full);\n    overflow: hidden;\n  }\n\n  .progress-bar {\n    height: 100%;\n    border-radius: var(--bp-border-radius-full);\n    transition:\n      width var(--bp-transition-base),\n      background-color var(--bp-transition-base);\n    opacity: 1;\n  }\n\n  /* Sizes */\n  .progress--sm {\n    height: var(--bp-spacing-2);\n  }\n\n  .progress--md {\n    height: var(--bp-spacing-3);\n  }\n\n  .progress--lg {\n    height: var(--bp-spacing-4);\n  }\n\n  /* Variants */\n  .progress--primary .progress-bar {\n    background-color: var(--bp-color-primary);\n  }\n\n  .progress--success .progress-bar {\n    background-color: var(--bp-color-success);\n  }\n\n  .progress--warning .progress-bar {\n    background-color: var(--bp-color-warning);\n  }\n\n  .progress--error .progress-bar {\n    background-color: var(--bp-color-error);\n  }\n\n  .progress--info .progress-bar {\n    background-color: var(--bp-color-info);\n  }\n\n  /* Indeterminate state */\n  .progress--indeterminate .progress-bar {\n    width: 40%;\n    animation: indeterminate 1.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;\n    transform-origin: 0 0;\n  }\n\n  @keyframes indeterminate {\n    0% {\n      transform: translateX(-100%) scaleX(1);\n    }\n    40% {\n      transform: translateX(-10%) scaleX(1.5);\n    }\n    100% {\n      transform: translateX(250%) scaleX(0.5);\n    }\n  }\n\n  /* States */\n  .progress:focus-visible {\n    outline: var(--bp-focus-ring);\n    outline-offset: var(--bp-focus-offset);\n  }\n\n  .progress--complete .progress-bar {\n    animation: complete-pulse 600ms ease-out;\n  }\n\n  @keyframes complete-pulse {\n    0%,\n    100% {\n      transform: scaleY(1);\n    }\n    50% {\n      transform: scaleY(1.15);\n    }\n  }\n\n  .progress--complete.progress--primary .progress-bar {\n    background-color: var(--bp-color-success);\n  }\n`;\n","import { LitElement, html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { progressStyles } from './progress.style.js';\n\nexport type ProgressVariant =\n  | 'primary'\n  | 'success'\n  | 'warning'\n  | 'error'\n  | 'info';\nexport type ProgressSize = 'sm' | 'md' | 'lg';\n\n/**\n * A progress bar component for displaying task completion or loading status.\n *\n * @fires bp-complete - Fired when progress reaches 100%\n */\n@customElement('bp-progress')\nexport class BpProgress extends LitElement {\n  /**\n   * Current progress value\n   */\n  @property({ type: Number }) declare value: number;\n\n  /**\n   * Maximum value for progress (value will be clamped to 0-max)\n   */\n  @property({ type: Number }) declare max: number;\n\n  /**\n   * Visual variant of the progress bar\n   */\n  @property({ type: String, reflect: true }) declare variant: ProgressVariant;\n\n  /**\n   * Size of the progress bar\n   */\n  @property({ type: String, reflect: true }) declare size: ProgressSize;\n\n  /**\n   * Optional label text displayed above the progress bar\n   */\n  @property({ type: String }) declare label: string;\n\n  /**\n   * Whether to show percentage text\n   */\n  @property({ type: Boolean }) declare showValue: boolean;\n\n  /**\n   * Whether the progress bar is indeterminate (loading state)\n   */\n  @property({ type: Boolean }) declare indeterminate: boolean;\n\n  static styles = [progressStyles];\n\n  constructor() {\n    super();\n    this.value = 0;\n    this.max = 100;\n    this.variant = 'primary';\n    this.size = 'md';\n    this.label = '';\n    this.showValue = false;\n    this.indeterminate = false;\n  }\n\n  private get percentage(): number {\n    if (this.max <= 0) return 0;\n    const percent = (this.value / this.max) * 100;\n    return Math.min(100, Math.max(0, percent));\n  }\n\n  private get complete(): boolean {\n    return this.percentage >= 100 && !this.indeterminate;\n  }\n\n  updated(changedProperties: Map<string, unknown>) {\n    super.updated(changedProperties);\n\n    if (changedProperties.has('value') && this.percentage >= 100) {\n      this.dispatchEvent(\n        new CustomEvent('bp-complete', {\n          detail: {\n            value: this.value,\n            max: this.max,\n            percentage: this.percentage,\n          },\n          bubbles: true,\n          composed: true,\n        })\n      );\n    }\n  }\n\n  render() {\n    return html`\n      <div class=\"progress-container\">\n        ${this.label || this.showValue\n          ? html`\n              <div class=\"progress-header\" part=\"header\">\n                ${this.label\n                  ? html`<span class=\"progress-label\">${this.label}</span>`\n                  : null}\n                ${this.showValue && !this.indeterminate\n                  ? html`<span class=\"progress-value\"\n                      >${Math.round(this.percentage)}%</span\n                    >`\n                  : null}\n              </div>\n            `\n          : null}\n        <div\n          class=\"progress progress--${this.variant} progress--${this\n            .size} ${this.indeterminate ? 'progress--indeterminate' : ''} ${this\n            .complete\n            ? 'progress--complete'\n            : ''}\"\n          part=\"track\"\n          role=\"progressbar\"\n          aria-valuemin=\"0\"\n          aria-valuemax=\"${this.max}\"\n          aria-valuenow=\"${this.indeterminate ? undefined : this.value}\"\n          aria-label=\"${this.label || 'Progress'}\"\n          aria-live=\"polite\"\n          aria-atomic=\"false\"\n        >\n          <div\n            class=\"progress-bar\"\n            part=\"bar\"\n            style=\"width: ${this.indeterminate\n              ? '100%'\n              : this.percentage + '%'}\"\n          ></div>\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'bp-progress': BpProgress;\n  }\n}\n"],"names":["progressStyles","css","BpProgress","LitElement","percent","changedProperties","html","__decorateClass","property","customElement"],"mappings":"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"}

package/dist/components/radio.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"radio.js","sources":["../../source/components/radio/radio.style.ts","../../source/components/radio/radio.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const radioStyles = css`\n  /* Base styles */\n  :host {\n    display: inline-block;\n  }\n\n  .radio {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--bp-spacing-sm);\n    cursor: pointer;\n    font-family: var(--bp-font-family);\n    font-size: var(--bp-font-size-base);\n    color: var(--bp-color-text);\n    user-select: none;\n  }\n\n  .radio__input {\n    position: absolute;\n    opacity: 0;\n    width: 0;\n    height: 0;\n    margin: 0;\n    padding: 0;\n  }\n\n  .radio__circle {\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n    border: var(--bp-border-width) solid var(--bp-color-border-strong);\n    border-radius: 50%;\n    background-color: var(--bp-color-surface);\n    transition: all var(--bp-transition-fast);\n  }\n\n  .radio__circle-inner {\n    width: 50%;\n    height: 50%;\n    border-radius: 50%;\n    background-color: var(--bp-color-text-inverse);\n    opacity: 0;\n    transform: scale(0);\n    transition:\n      opacity var(--bp-duration-fast) var(--bp-ease-out),\n      transform var(--bp-duration-fast) var(--bp-ease-bounce);\n  }\n\n  .radio__label {\n    line-height: var(--bp-line-height-normal);\n  }\n\n  /* Sizes */\n  .radio--sm .radio__circle {\n    width: var(--bp-spacing-4);\n    height: var(--bp-spacing-4);\n  }\n\n  .radio--sm .radio__label {\n    font-size: var(--bp-font-size-sm);\n  }\n\n  .radio--md .radio__circle {\n    width: var(--bp-spacing-5);\n    height: var(--bp-spacing-5);\n  }\n\n  .radio--md .radio__label {\n    font-size: var(--bp-font-size-base);\n  }\n\n  .radio--lg .radio__circle {\n    width: var(--bp-spacing-6);\n    height: var(--bp-spacing-6);\n  }\n\n  .radio--lg .radio__label {\n    font-size: var(--bp-font-size-lg);\n  }\n\n  /* States - Checked */\n  .radio__input:checked ~ .radio__circle {\n    background-color: var(--bp-color-primary);\n    border-color: var(--bp-color-primary);\n  }\n\n  .radio__input:checked ~ .radio__circle .radio__circle-inner {\n    opacity: 1;\n    transform: scale(1);\n  }\n\n  /* States - Focus */\n  .radio--focused .radio__circle {\n    outline: var(--bp-focus-width) var(--bp-focus-style) var(--bp-color-focus);\n    outline-offset: var(--bp-focus-offset);\n    z-index: 1;\n  }\n\n  /* States - Hover */\n  .radio:hover:not(.radio--disabled) .radio__circle {\n    border-color: var(--bp-color-primary);\n    background-color: color-mix(\n      in srgb,\n      var(--bp-color-primary) 8%,\n      transparent\n    );\n  }\n\n  .radio:hover:not(.radio--disabled) .radio__input:checked ~ .radio__circle {\n    background-color: var(--bp-color-primary-hover);\n    border-color: var(--bp-color-primary-hover);\n  }\n\n  /* States - Active */\n  .radio:active:not(.radio--disabled) .radio__circle {\n    transform: scale(0.95);\n  }\n\n  /* States - Error */\n  .radio--error .radio__circle {\n    border-color: var(--bp-color-error);\n  }\n\n  .radio--error.radio--focused .radio__circle {\n    outline-color: var(--bp-color-error);\n  }\n\n  .radio--error .radio__input:checked ~ .radio__circle {\n    background-color: var(--bp-color-error);\n    border-color: var(--bp-color-error);\n  }\n\n  /* States - Disabled */\n  .radio--disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n\n  /* Touch target size: ensure 44x44px minimum on touch devices */\n  @media (pointer: coarse) {\n    .radio {\n      min-height: 44px;\n      padding: var(--bp-spacing-xs) 0;\n    }\n\n    .radio__circle {\n      position: relative;\n    }\n\n    /* Expand touch target with pseudo-element */\n    .radio__circle::before {\n      content: '';\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      transform: translate(-50%, -50%);\n      width: 44px;\n      height: 44px;\n    }\n  }\n`;\n","import { LitElement, html } from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { live } from 'lit/directives/live.js';\nimport { radioStyles } from './radio.style.js';\n\nexport type RadioSize = 'sm' | 'md' | 'lg';\n\n/**\n * A form radio input with label support and group functionality.\n *\n * @element bp-radio\n *\n * @property {boolean} checked - Whether the radio is checked\n * @property {boolean} disabled - Whether the radio is disabled\n * @property {boolean} required - Whether the radio is required\n * @property {string} name - The name of the radio for form submission and grouping\n * @property {string} value - The value of the radio for form submission\n * @property {RadioSize} size - The size of the radio\n * @property {boolean} error - Whether the radio has an error state\n *\n * @slot - The radio label text\n *\n * @fires bp-change - Fired when the checked state changes\n * @fires bp-focus - Fired when the radio receives focus\n * @fires bp-blur - Fired when the radio loses focus\n *\n * @csspart radio - The radio container\n * @csspart input - The native radio input element\n * @csspart circle - The visual circle indicator\n * @csspart label - The label text container\n */\n@customElement('bp-radio')\nexport class BpRadio extends LitElement {\n  @query('input[type=\"radio\"]') declare input: HTMLInputElement;\n\n  /**\n   * Whether the radio is checked.\n   */\n  @property({ type: Boolean, reflect: true }) declare checked: boolean;\n\n  /**\n   * Whether the radio is disabled.\n   */\n  @property({ type: Boolean, reflect: true }) declare disabled: boolean;\n\n  /**\n   * Whether the radio is required.\n   */\n  @property({ type: Boolean, reflect: true }) declare required: boolean;\n\n  /**\n   * The name of the radio for form submission and grouping.\n   * Radios with the same name form a group where only one can be selected.\n   */\n  @property({ type: String, reflect: true }) declare name: string;\n\n  /**\n   * The value of the radio for form submission.\n   */\n  @property({ type: String }) declare value: string;\n\n  /**\n   * The size of the radio.\n   */\n  @property({ type: String, reflect: true }) declare size: RadioSize;\n\n  /**\n   * Whether the radio has an error state.\n   */\n  @property({ type: Boolean, reflect: true }) declare error: boolean;\n\n  @state() private hasFocus = false;\n\n  static styles = [radioStyles];\n\n  static formAssociated = true;\n  private internals: globalThis.ElementInternals | null = null;\n\n  constructor() {\n    super();\n    this.checked = false;\n    this.disabled = false;\n    this.required = false;\n    this.name = '';\n    this.value = '';\n    this.size = 'md';\n    this.error = false;\n\n    if ('attachInternals' in this) {\n      this.internals = (this as HTMLElement).attachInternals();\n    }\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.setAttribute('role', 'radio');\n    this.updateAriaAttributes();\n  }\n\n  updated(changedProperties: Map<string, unknown>): void {\n    super.updated(changedProperties);\n\n    if (\n      changedProperties.has('checked') ||\n      changedProperties.has('disabled') ||\n      changedProperties.has('required') ||\n      changedProperties.has('error')\n    ) {\n      this.updateAriaAttributes();\n      this.updateFormValue();\n    }\n  }\n\n  private updateAriaAttributes(): void {\n    this.setAttribute('aria-checked', this.checked.toString());\n    this.setAttribute('aria-disabled', this.disabled.toString());\n\n    if (this.required) {\n      this.setAttribute('aria-required', 'true');\n    } else {\n      this.removeAttribute('aria-required');\n    }\n\n    if (this.error) {\n      this.setAttribute('aria-invalid', 'true');\n    } else {\n      this.removeAttribute('aria-invalid');\n    }\n  }\n\n  private updateFormValue(): void {\n    if (!this.internals) return;\n\n    if (this.checked) {\n      this.internals.setFormValue(this.value || 'on');\n    } else {\n      this.internals.setFormValue(null);\n    }\n  }\n\n  private handleChange(event: Event): void {\n    const inputElement = event.target as HTMLInputElement;\n    this.checked = inputElement.checked;\n\n    // Uncheck other radios in the same group\n    if (this.checked && this.name) {\n      this.uncheckOtherRadios();\n    }\n\n    this.dispatchEvent(\n      new CustomEvent('bp-change', {\n        detail: { checked: this.checked, value: this.value },\n        bubbles: true,\n        composed: true,\n      })\n    );\n  }\n\n  private handleFocus(): void {\n    this.hasFocus = true;\n    this.dispatchEvent(\n      new CustomEvent('bp-focus', {\n        bubbles: true,\n        composed: true,\n      })\n    );\n  }\n\n  private handleBlur(): void {\n    this.hasFocus = false;\n    this.dispatchEvent(\n      new CustomEvent('bp-blur', {\n        bubbles: true,\n        composed: true,\n      })\n    );\n  }\n\n  private handleClick(): void {\n    if (!this.disabled) {\n      this.input?.focus();\n    }\n  }\n\n  private uncheckOtherRadios(): void {\n    if (!this.name) return;\n\n    // Find all radios with the same name in the document\n    const root = this.getRootNode() as\n      | globalThis.Document\n      | globalThis.ShadowRoot;\n    const radios = Array.from(\n      root.querySelectorAll(`bp-radio[name=\"${this.name}\"]`)\n    ) as BpRadio[];\n\n    radios.forEach((radio) => {\n      if (radio !== this && radio.checked && !radio.disabled) {\n        radio.checked = false;\n      }\n    });\n  }\n\n  /**\n   * Sets focus on the radio.\n   */\n  focus(options?: globalThis.FocusOptions): void {\n    this.input?.focus(options);\n  }\n\n  /**\n   * Removes focus from the radio.\n   */\n  blur(): void {\n    this.input?.blur();\n  }\n\n  /**\n   * Checks if the radio satisfies its required constraint.\n   */\n  checkValidity(): boolean {\n    return this.input?.checkValidity() ?? true;\n  }\n\n  /**\n   * Checks validity and shows validation message if invalid.\n   */\n  reportValidity(): boolean {\n    return this.input?.reportValidity() ?? true;\n  }\n\n  render() {\n    const classes = [\n      'radio',\n      `radio--${this.size}`,\n      this.disabled ? 'radio--disabled' : '',\n      this.error ? 'radio--error' : '',\n      this.hasFocus ? 'radio--focused' : '',\n    ]\n      .filter(Boolean)\n      .join(' ');\n\n    return html`\n      <label class=${classes} part=\"radio\" @click=${this.handleClick}>\n        <input\n          class=\"radio__input\"\n          part=\"input\"\n          type=\"radio\"\n          name=${ifDefined(this.name || undefined)}\n          value=${ifDefined(this.value || undefined)}\n          .checked=${live(this.checked)}\n          ?disabled=${this.disabled}\n          ?required=${this.required}\n          @change=${this.handleChange}\n          @focus=${this.handleFocus}\n          @blur=${this.handleBlur}\n          aria-hidden=\"true\"\n          tabindex=\"-1\"\n        />\n        <span class=\"radio__circle\" part=\"circle\">\n          <span class=\"radio__circle-inner\"></span>\n        </span>\n        <span class=\"radio__label\" part=\"label\">\n          <slot></slot>\n        </span>\n      </label>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'bp-radio': BpRadio;\n  }\n}\n"],"names":["radioStyles","css","BpRadio","LitElement","changedProperties","event","inputElement","root","radio","options","classes","html","ifDefined","live","__decorateClass","query","property","state","customElement"],"mappings":"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"}

package/dist/components/select.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"select.js","sources":["../../source/components/select/select.style.ts","../../source/components/select/select.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const selectStyles = css`\n  /* Base styles */\n  :host {\n    display: inline-block;\n    width: 100%;\n    box-sizing: border-box;\n  }\n\n  *,\n  *::before,\n  *::after {\n    box-sizing: border-box;\n  }\n\n  .select {\n    position: relative;\n    font-family: var(--bp-font-family);\n  }\n\n  .select-label {\n    display: block;\n    font-family: var(--bp-font-family);\n    font-size: var(--bp-font-size-sm);\n    font-weight: var(--bp-font-weight-medium);\n    color: var(--bp-color-text);\n    line-height: var(--bp-line-height-normal);\n    margin-bottom: var(--bp-spacing-xs);\n  }\n\n  .select-required {\n    color: var(--bp-color-error);\n    margin-left: var(--bp-spacing-xs);\n  }\n\n  .select-trigger {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    width: 100%;\n    padding: var(--bp-spacing-sm) var(--bp-spacing-md);\n    background-color: var(--bp-color-background);\n    border: var(--bp-border-width) solid var(--bp-color-border);\n    border-radius: var(--bp-border-radius-md);\n    font-size: var(--bp-font-size-base);\n    line-height: var(--bp-line-height-normal);\n    color: var(--bp-color-text);\n    cursor: pointer;\n    box-shadow: inset 0 1px 2px oklch(0 0 0 / 0.05);\n    transition:\n      border-color var(--bp-transition-fast),\n      box-shadow var(--bp-transition-fast);\n  }\n\n  .select-value {\n    flex: 1;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    position: relative;\n  }\n\n  /* Hidden sizer keeps the trigger width stable across placeholder/option changes */\n  .select-value__sizer {\n    display: block;\n    height: 0;\n    overflow: hidden;\n    visibility: hidden;\n    white-space: nowrap;\n  }\n\n  .select-value__display {\n    display: block;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  /* Placeholder state - when no value is selected */\n  .select-trigger:not([aria-label]) .select-value:empty {\n    opacity: 0.6;\n  }\n\n  .select-icon {\n    width: var(--bp-spacing-4);\n    height: var(--bp-spacing-4);\n    flex-shrink: 0;\n    margin-left: var(--bp-spacing-xs);\n    transition:\n      transform var(--bp-transition-base),\n      color var(--bp-transition-fast);\n  }\n\n  .select-dropdown {\n    position: absolute;\n    top: calc(100% + var(--bp-spacing-2xs));\n    left: 0;\n    right: 0;\n    overflow-y: auto;\n    background-color: var(--bp-color-background);\n    border: var(--bp-border-width) solid var(--bp-color-border);\n    border-radius: var(--bp-border-radius-md);\n    box-shadow: var(--bp-shadow-lg);\n    z-index: var(--bp-z-dropdown);\n    animation: slideDown 150ms ease-out;\n    transform-origin: top;\n    contain: layout style paint;\n  }\n\n  @keyframes slideDown {\n    from {\n      opacity: 0;\n      transform: translateY(calc(-1 * var(--bp-spacing-2)));\n    }\n    to {\n      opacity: 1;\n      transform: translateY(0);\n    }\n  }\n\n  .select-option {\n    padding: var(--bp-spacing-sm) var(--bp-spacing-md);\n    cursor: pointer;\n    transition: background-color var(--bp-transition-fast);\n  }\n\n  .select-option:hover:not(.select-option--focused) {\n    background-color: var(--bp-color-surface-elevated);\n  }\n\n  .select-option--focused {\n    background-color: var(--bp-color-surface-subdued);\n    outline: var(--bp-focus-width) solid var(--bp-color-primary);\n    outline-offset: calc(-1 * var(--bp-focus-width));\n  }\n\n  .select-option--selected {\n    background-color: color-mix(\n      in srgb,\n      var(--bp-color-primary) 8%,\n      transparent\n    );\n    color: var(--bp-color-primary);\n    font-weight: var(--bp-font-weight-semibold);\n    position: relative;\n    padding-right: var(--bp-spacing-2xl);\n  }\n\n  /* Checkmark for selected option */\n  .select-option--selected::after {\n    content: '✓';\n    position: absolute;\n    right: var(--bp-spacing-md);\n    color: var(--bp-color-primary);\n    font-weight: var(--bp-font-weight-bold);\n    font-size: var(--bp-font-size-lg);\n  }\n\n  /* Sizes */\n  .select--sm .select-trigger {\n    padding: var(--bp-spacing-xs) var(--bp-spacing-sm);\n    font-size: var(--bp-font-size-sm);\n  }\n\n  .select--sm .select-option {\n    padding: var(--bp-spacing-xs) var(--bp-spacing-sm);\n    font-size: var(--bp-font-size-sm);\n  }\n\n  .select--md .select-trigger {\n    padding: var(--bp-spacing-sm) var(--bp-spacing-md);\n    font-size: var(--bp-font-size-base);\n  }\n\n  .select--md .select-option {\n    padding: var(--bp-spacing-sm) var(--bp-spacing-md);\n    font-size: var(--bp-font-size-base);\n  }\n\n  .select--lg .select-trigger {\n    padding: var(--bp-spacing-md) var(--bp-spacing-lg);\n    font-size: var(--bp-font-size-lg);\n  }\n\n  .select--lg .select-option {\n    padding: var(--bp-spacing-md) var(--bp-spacing-lg);\n    font-size: var(--bp-font-size-lg);\n  }\n\n  /* States */\n  .select-trigger:hover:not(.select--disabled .select-trigger) {\n    border-color: var(--bp-color-primary);\n  }\n\n  .select-trigger:focus {\n    outline: none;\n  }\n\n  .select-trigger:focus-visible {\n    outline: var(--bp-focus-width) solid var(--bp-color-primary);\n    outline-offset: var(--bp-focus-offset);\n    border-color: var(--bp-color-primary);\n  }\n\n  .select--open .select-trigger {\n    border-color: var(--bp-color-primary);\n  }\n\n  .select--open .select-icon {\n    transform: rotate(180deg);\n    color: var(--bp-color-primary);\n  }\n\n  .select--disabled .select-trigger {\n    opacity: 0.5;\n    cursor: not-allowed;\n    background-color: var(--bp-color-surface-subdued);\n  }\n\n  /* iOS zoom prevention: ensure 16px minimum on touch devices */\n  @media (max-width: 768px) {\n    .select--sm .select-trigger {\n      font-size: 16px;\n    }\n\n    .select--sm .select-option {\n      font-size: 16px;\n    }\n  }\n`;\n","import { LitElement, html } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { repeat } from 'lit/directives/repeat.js';\nimport { selectStyles } from './select.style.js';\n\nexport type SelectSize = 'sm' | 'md' | 'lg';\n\n@customElement('bp-select')\nexport class BpSelect extends LitElement {\n  /** The current value of the select */\n  @property({ type: String, reflect: true }) declare value: string;\n\n  /** Name attribute for form submission */\n  @property({ type: String }) declare name: string;\n\n  /** Visible label text displayed above the select */\n  @property({ type: String, reflect: true }) declare label: string;\n\n  /** Placeholder text when no value is selected */\n  @property({ type: String }) declare placeholder: string;\n\n  /** Whether the select is disabled */\n  @property({ type: Boolean, reflect: true }) declare disabled: boolean;\n\n  /** Whether the select is required */\n  @property({ type: Boolean, reflect: true }) declare required: boolean;\n\n  /** Size variant of the select */\n  @property({ type: String, reflect: true }) declare size: SelectSize;\n\n  /** Whether the dropdown is currently open */\n  @state() private isOpen = false;\n\n  /** Label for the selected option */\n  @state() private selectedLabel = '';\n\n  /** Index of the focused option for keyboard navigation */\n  @state() private focusedIndex = -1;\n\n  static styles = [selectStyles];\n\n  constructor() {\n    super();\n    this.value = '';\n    this.name = '';\n    this.label = '';\n    this.placeholder = 'Select an option';\n    this.disabled = false;\n    this.required = false;\n    this.size = 'md';\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    document.addEventListener('click', this.handleDocumentClick, {\n      passive: true,\n    });\n    // Update selected label on initial load\n    this.updateComplete.then(() => this.updateSelectedLabel());\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    document.removeEventListener('click', this.handleDocumentClick, {\n      passive: true,\n    } as EventListenerOptions);\n  }\n\n  private handleSlotChange = () => {\n    this.updateSelectedLabel();\n  };\n\n  private updateSelectedLabel() {\n    if (!this.value) return;\n\n    const slot = this.shadowRoot?.querySelector('slot');\n    const assignedElements = slot?.assignedElements() || [];\n    const options = assignedElements.filter(\n      (el): el is globalThis.HTMLOptionElement => el.tagName === 'OPTION'\n    );\n\n    options.forEach((option) => {\n      if ((option.value || option.textContent) === this.value) {\n        this.selectedLabel = option.textContent || '';\n      }\n    });\n  }\n\n  private handleDocumentClick = (event: MouseEvent) => {\n    if (!this.contains(event.target as unknown as globalThis.Node)) {\n      this.isOpen = false;\n    }\n  };\n\n  private handleToggle = (event?: Event) => {\n    event?.stopPropagation();\n    if (this.disabled) return;\n    this.isOpen = !this.isOpen;\n  };\n\n  private handleOptionClick = (event: Event) => {\n    if (this.disabled) return;\n\n    const target = event.currentTarget as HTMLElement;\n    const optionValue = target.dataset.value || '';\n    const optionLabel = target.dataset.label || '';\n\n    const previousValue = this.value;\n    this.value = optionValue;\n    this.selectedLabel = optionLabel;\n    this.isOpen = false;\n    this.focusedIndex = -1;\n\n    // Dispatch change event\n    this.dispatchEvent(\n      new CustomEvent('bp-change', {\n        detail: {\n          value: this.value,\n          label: this.selectedLabel,\n          previousValue,\n        },\n        bubbles: true,\n        composed: true,\n      })\n    );\n\n    // Update the underlying hidden input for form integration\n    const hiddenInput = this.shadowRoot?.querySelector('input[type=\"hidden\"]');\n    if (hiddenInput) {\n      (hiddenInput as HTMLInputElement).value = this.value;\n      hiddenInput.dispatchEvent(new Event('change', { bubbles: true }));\n    }\n  };\n\n  private handleKeyDown = (event: globalThis.KeyboardEvent) => {\n    if (this.disabled) return;\n\n    const options = this.getOptions();\n\n    switch (event.key) {\n      case 'Enter':\n      case ' ':\n        event.preventDefault();\n        if (this.isOpen && this.focusedIndex >= 0) {\n          // Select the focused option\n          const option = options[this.focusedIndex];\n          if (option) {\n            const optionValue = option.value || option.textContent || '';\n            const optionLabel = option.textContent || '';\n            const previousValue = this.value;\n            this.value = optionValue;\n            this.selectedLabel = optionLabel;\n            this.isOpen = false;\n            this.focusedIndex = -1;\n\n            this.dispatchEvent(\n              new CustomEvent('bp-change', {\n                detail: {\n                  value: this.value,\n                  label: this.selectedLabel,\n                  previousValue,\n                },\n                bubbles: true,\n                composed: true,\n              })\n            );\n\n            const hiddenInput = this.shadowRoot?.querySelector(\n              'input[type=\"hidden\"]'\n            );\n            if (hiddenInput) {\n              (hiddenInput as HTMLInputElement).value = this.value;\n              hiddenInput.dispatchEvent(new Event('change', { bubbles: true }));\n            }\n          }\n        } else {\n          this.handleToggle();\n        }\n        break;\n      case 'Escape':\n        this.isOpen = false;\n        this.focusedIndex = -1;\n        break;\n      case 'ArrowDown':\n        event.preventDefault();\n        if (!this.isOpen) {\n          this.isOpen = true;\n          this.focusedIndex = 0;\n        } else {\n          this.focusedIndex = Math.min(\n            this.focusedIndex + 1,\n            options.length - 1\n          );\n        }\n        this.scrollFocusedOptionIntoView();\n        break;\n      case 'ArrowUp':\n        event.preventDefault();\n        if (!this.isOpen) {\n          this.isOpen = true;\n          this.focusedIndex = options.length - 1;\n        } else {\n          this.focusedIndex = Math.max(this.focusedIndex - 1, 0);\n        }\n        this.scrollFocusedOptionIntoView();\n        break;\n      case 'Home':\n        if (this.isOpen) {\n          event.preventDefault();\n          this.focusedIndex = 0;\n          this.scrollFocusedOptionIntoView();\n        }\n        break;\n      case 'End':\n        if (this.isOpen) {\n          event.preventDefault();\n          this.focusedIndex = options.length - 1;\n          this.scrollFocusedOptionIntoView();\n        }\n        break;\n    }\n  };\n\n  private getOptions(): Array<{ value: string; textContent: string }> {\n    const slot = this.shadowRoot?.querySelector('slot');\n    const assignedElements = slot?.assignedElements() || [];\n    const options = assignedElements.filter(\n      (el): el is globalThis.HTMLOptionElement => el.tagName === 'OPTION'\n    );\n    return options.map((option) => ({\n      value: option.value || option.textContent || '',\n      textContent: option.textContent || '',\n    }));\n  }\n\n  private scrollFocusedOptionIntoView() {\n    this.updateComplete.then(() => {\n      const focusedOption = this.shadowRoot?.querySelector(\n        '.select-option--focused'\n      ) as HTMLElement;\n      if (focusedOption) {\n        focusedOption.scrollIntoView({ block: 'nearest', behavior: 'smooth' });\n      }\n    });\n  }\n\n  /**\n   * Returns the longest text among all options and the placeholder.\n   * Used by a hidden sizer element to keep the trigger width stable.\n   */\n  private getSizerText(): string {\n    const options = this.getOptions();\n    let longestText = this.placeholder || '';\n\n    for (const option of options) {\n      const text = option.textContent || '';\n      if (text.length > longestText.length) {\n        longestText = text;\n      }\n    }\n\n    return longestText;\n  }\n\n  private getOptionElements = () => {\n    const slot = this.shadowRoot?.querySelector('slot');\n    const assignedElements = slot?.assignedElements() || [];\n    const options = assignedElements.filter(\n      (el): el is globalThis.HTMLOptionElement => el.tagName === 'OPTION'\n    );\n\n    return repeat(\n      options,\n      (option) => option.value || option.textContent || '',\n      (option, index) => {\n        const optionValue = option.value || option.textContent || '';\n        const optionLabel = option.textContent || '';\n        const isSelected = this.value === optionValue;\n        const isFocused = this.focusedIndex === index;\n\n        if (isSelected && !this.selectedLabel) {\n          this.selectedLabel = optionLabel;\n        }\n\n        return html`\n          <div\n            class=\"select-option ${isSelected\n              ? 'select-option--selected'\n              : ''} ${isFocused ? 'select-option--focused' : ''}\"\n            part=\"option\"\n            role=\"option\"\n            aria-selected=\"${isSelected ? 'true' : 'false'}\"\n            data-value=\"${optionValue}\"\n            data-label=\"${optionLabel}\"\n            tabindex=\"-1\"\n            @click=${this.handleOptionClick}\n          >\n            ${optionLabel}\n          </div>\n        `;\n      }\n    );\n  };\n\n  render() {\n    const selectClasses = {\n      select: true,\n      [`select--${this.size}`]: true,\n      'select--disabled': this.disabled,\n      'select--open': this.isOpen,\n    };\n\n    const displayLabel = this.selectedLabel || this.placeholder;\n\n    const labelId = this.label ? 'select-label' : undefined;\n\n    return html`\n      <div class=${classMap(selectClasses)} part=\"container\">\n        ${this.label\n          ? html`\n              <label class=\"select-label\" id=\"select-label\" part=\"label\">\n                ${this.label}\n                ${this.required\n                  ? html`<span class=\"select-required\">*</span>`\n                  : ''}\n              </label>\n            `\n          : ''}\n        <!-- Hidden input for form integration (using input instead of select to avoid Firefox conflict) -->\n        <input\n          type=\"hidden\"\n          name=${ifDefined(this.name || undefined)}\n          .value=${this.value}\n        />\n\n        <!-- Slot for option elements (not rendered, just for content projection) -->\n        <slot\n          @slotchange=${this.handleSlotChange}\n          style=\"display: none;\"\n        ></slot>\n\n        <!-- Custom select trigger -->\n        <div\n          class=\"select-trigger\"\n          part=\"trigger\"\n          role=\"combobox\"\n          aria-expanded=\"${this.isOpen ? 'true' : 'false'}\"\n          aria-haspopup=\"listbox\"\n          aria-labelledby=\"${ifDefined(labelId)}\"\n          aria-disabled=\"${this.disabled ? 'true' : 'false'}\"\n          aria-required=\"${this.required ? 'true' : 'false'}\"\n          tabindex=\"${this.disabled ? '-1' : '0'}\"\n          @click=${this.handleToggle}\n          @keydown=${this.handleKeyDown}\n        >\n          <span class=\"select-value\" part=\"display\">\n            <span class=\"select-value__sizer\" aria-hidden=\"true\"\n              >${this.getSizerText()}</span\n            >\n            <span class=\"select-value__display\">${displayLabel}</span>\n          </span>\n          <svg\n            class=\"select-icon\"\n            part=\"icon\"\n            viewBox=\"0 0 16 16\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <path\n              d=\"M4 6L8 10L12 6\"\n              stroke=\"currentColor\"\n              stroke-width=\"2\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n            />\n          </svg>\n        </div>\n\n        <!-- Dropdown menu -->\n        ${this.isOpen\n          ? html`\n              <div class=\"select-dropdown\" part=\"dropdown\" role=\"listbox\">\n                ${this.getOptionElements()}\n              </div>\n            `\n          : null}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'bp-select': BpSelect;\n  }\n}\n"],"names":["selectStyles","css","BpSelect","LitElement","event","target","optionValue","optionLabel","previousValue","hiddenInput","options","option","el","repeat","index","isSelected","isFocused","html","focusedOption","longestText","text","selectClasses","displayLabel","labelId","classMap","ifDefined","__decorateClass","property","state","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;;;;;;ACQrB,IAAMC,IAAN,cAAuBC,EAAW;AAAA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"}

package/dist/components/skeleton.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"skeleton.js","sources":["../../source/components/skeleton/skeleton.style.ts","../../source/components/skeleton/skeleton.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const skeletonStyles = css`\n  /* Base styles */\n  :host {\n    display: block;\n  }\n\n  .skeleton {\n    background-color: var(--bp-color-surface-subdued);\n    overflow: hidden;\n    position: relative;\n    width: var(--skeleton-width, auto);\n    height: var(--skeleton-height, auto);\n  }\n\n  /* Animation */\n  .skeleton--animated::after {\n    content: '';\n    position: absolute;\n    inset: 0;\n    background: linear-gradient(\n      90deg,\n      transparent 0%,\n      rgba(255, 255, 255, 0.6) 50%,\n      transparent 100%\n    );\n    animation: skeleton-shimmer 1.5s infinite linear;\n    transform: translateX(-100%);\n  }\n\n  @keyframes skeleton-shimmer {\n    0% {\n      transform: translateX(-100%);\n    }\n    100% {\n      transform: translateX(100%);\n    }\n  }\n\n  /* Respect user motion preferences */\n  @media (prefers-reduced-motion: reduce) {\n    .skeleton--animated::after {\n      animation: none;\n      opacity: 0.7;\n    }\n  }\n\n  /* Variants */\n  .skeleton--text {\n    border-radius: var(--bp-border-radius-sm);\n    width: 100%;\n  }\n\n  .skeleton--circular {\n    border-radius: var(--bp-border-radius-full);\n  }\n\n  .skeleton--rectangular {\n    border-radius: 2px;\n  }\n\n  .skeleton--rounded {\n    border-radius: var(--bp-border-radius-lg);\n  }\n\n  /* Sizes for text variant */\n  .skeleton--text.skeleton--sm {\n    height: var(--bp-spacing-3);\n  }\n\n  .skeleton--text.skeleton--md {\n    height: var(--bp-spacing-4);\n  }\n\n  .skeleton--text.skeleton--lg {\n    height: var(--bp-spacing-6);\n  }\n\n  /* Sizes for circular variant */\n  .skeleton--circular.skeleton--sm {\n    width: var(--bp-spacing-8);\n    height: var(--bp-spacing-8);\n  }\n\n  .skeleton--circular.skeleton--md {\n    width: var(--bp-spacing-10);\n    height: var(--bp-spacing-10);\n  }\n\n  .skeleton--circular.skeleton--lg {\n    width: var(--bp-spacing-12);\n    height: var(--bp-spacing-12);\n  }\n\n  /* Sizes for rectangular/rounded variants */\n  .skeleton--rectangular.skeleton--sm,\n  .skeleton--rounded.skeleton--sm {\n    height: var(--bp-spacing-10);\n  }\n\n  .skeleton--rectangular.skeleton--md,\n  .skeleton--rounded.skeleton--md {\n    height: var(--bp-spacing-16);\n  }\n\n  .skeleton--rectangular.skeleton--lg,\n  .skeleton--rounded.skeleton--lg {\n    height: var(--bp-spacing-24);\n  }\n\n  /* Text lines container */\n  .skeleton__lines {\n    display: flex;\n    flex-direction: column;\n    gap: var(--bp-spacing-3);\n  }\n\n  /* Last line in multi-line text is shorter */\n  .skeleton--last-line {\n    width: 75%;\n  }\n\n  /* Static state (no animation) */\n  :host([animated='false']) .skeleton::after,\n  .skeleton:not(.skeleton--animated)::after {\n    display: none;\n  }\n\n  :host([animated='false']) .skeleton,\n  .skeleton:not(.skeleton--animated) {\n    opacity: 0.6;\n  }\n`;\n","import { LitElement, html, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { skeletonStyles } from './skeleton.style.js';\nimport { booleanConverter } from '../../utilities/boolean-converter.js';\n\n/**\n * A skeleton loading placeholder that indicates content is loading.\n * Use skeletons to reduce perceived loading time and provide visual feedback.\n *\n * @slot - Optional slot for custom skeleton content\n *\n * @csspart base - The skeleton container element\n */\n@customElement('bp-skeleton')\nexport class BpSkeleton extends LitElement {\n  /** The visual variant of the skeleton */\n  @property({\n    type: String,\n    reflect: true,\n    converter: {\n      fromAttribute: (value: string | null) => {\n        const valid = ['text', 'circular', 'rectangular', 'rounded'];\n        return value && valid.includes(value) ? value : 'text';\n      },\n    },\n  })\n  declare variant: 'text' | 'circular' | 'rectangular' | 'rounded';\n\n  /** Width of the skeleton. Can be any valid CSS value. */\n  @property({ type: String }) declare width: string;\n\n  /** Height of the skeleton. Can be any valid CSS value. */\n  @property({ type: String }) declare height: string;\n\n  /** Whether to animate the skeleton with a shimmer effect */\n  @property({ converter: booleanConverter, reflect: true })\n  declare animated: boolean;\n\n  /** Number of lines to display (only for text variant) */\n  @property({\n    type: Number,\n    converter: (value: string | null) => {\n      const num = Number(value);\n      return num > 0 ? num : 1;\n    },\n  })\n  declare lines: number;\n\n  /** The size preset (affects default dimensions) */\n  @property({ type: String }) declare size: 'sm' | 'md' | 'lg';\n\n  static styles = [skeletonStyles];\n\n  constructor() {\n    super();\n    this.variant = 'text';\n    this.width = '';\n    this.height = '';\n    this.animated = true;\n    this.lines = 1;\n    this.size = 'md';\n  }\n\n  /**\n   * Generates CSS custom properties for width and height.\n   * Uses custom properties instead of inline styles for CSP compliance.\n   * @returns CSS string with custom property declarations\n   */\n  private getCustomProperties(): string {\n    const props: string[] = [];\n\n    if (this.width) {\n      props.push(`--skeleton-width: ${this.width}`);\n    }\n\n    if (this.height) {\n      props.push(`--skeleton-height: ${this.height}`);\n    }\n\n    return props.join('; ');\n  }\n\n  /**\n   * Renders a single skeleton element with appropriate classes and styles.\n   * @returns Template result for a single skeleton\n   */\n  private renderSingleSkeleton() {\n    const classes = [\n      'skeleton',\n      `skeleton--${this.variant}`,\n      `skeleton--${this.size}`,\n      this.animated ? 'skeleton--animated' : '',\n    ]\n      .filter(Boolean)\n      .join(' ');\n\n    const customProps = this.getCustomProperties();\n\n    return html`\n      <div class=${classes} part=\"base\" style=${customProps || nothing}>\n        <slot></slot>\n      </div>\n    `;\n  }\n\n  /**\n   * Renders text skeleton lines.\n   * If variant is text and lines > 1, renders multiple lines with a container.\n   * Otherwise delegates to renderSingleSkeleton.\n   * @returns Template result for text lines or single skeleton\n   */\n  private renderTextLines() {\n    if (this.variant !== 'text' || this.lines <= 1) {\n      return this.renderSingleSkeleton();\n    }\n\n    const customProps = this.getCustomProperties();\n    const lineElements = [];\n    for (let i = 0; i < this.lines; i++) {\n      const isLastLine = i === this.lines - 1;\n      const classes = [\n        'skeleton',\n        'skeleton--text',\n        `skeleton--${this.size}`,\n        this.animated ? 'skeleton--animated' : '',\n        isLastLine ? 'skeleton--last-line' : '',\n      ]\n        .filter(Boolean)\n        .join(' ');\n\n      lineElements.push(\n        html`<div\n          class=${classes}\n          part=\"base\"\n          style=${customProps || nothing}\n        ></div>`\n      );\n    }\n\n    return html`<div class=\"skeleton__lines\">${lineElements}</div>`;\n  }\n\n  render() {\n    return this.renderTextLines();\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'bp-skeleton': BpSkeleton;\n  }\n}\n"],"names":["skeletonStyles","css","BpSkeleton","LitElement","props","classes","customProps","html","nothing","lineElements","i","isLastLine","__decorateClass","property","value","booleanConverter","num","customElement"],"mappings":"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"}

package/dist/components/slider.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"slider.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;"}

package/dist/components/spinner.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"spinner.js","sources":["../../source/components/spinner/spinner.style.ts","../../source/components/spinner/spinner.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const spinnerStyles = css`\n  /* Base styles */\n  :host {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n  }\n\n  .spinner {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n  }\n\n  .spinner__circle {\n    border-radius: var(--bp-border-radius-full);\n    border-style: solid;\n    border-color: transparent;\n    animation: bp-spinner-rotate var(--bp-ease-linear) infinite;\n    will-change: transform;\n  }\n\n  /* Variants */\n  .spinner--primary .spinner__circle {\n    border-top-color: var(--bp-color-primary);\n    border-right-color: var(--bp-color-primary);\n  }\n\n  .spinner--success .spinner__circle {\n    border-top-color: var(--bp-color-success);\n    border-right-color: var(--bp-color-success);\n  }\n\n  .spinner--error .spinner__circle {\n    border-top-color: var(--bp-color-error);\n    border-right-color: var(--bp-color-error);\n  }\n\n  .spinner--warning .spinner__circle {\n    border-top-color: var(--bp-color-warning);\n    border-right-color: var(--bp-color-warning);\n  }\n\n  .spinner--inverse .spinner__circle {\n    border-top-color: var(--bp-color-text-inverse);\n    border-right-color: var(--bp-color-text-inverse);\n  }\n\n  .spinner--neutral .spinner__circle {\n    border-top-color: var(--bp-color-text-muted);\n    border-right-color: var(--bp-color-text-muted);\n  }\n\n  /* Sizes */\n  .spinner--sm .spinner__circle {\n    width: var(--bp-spacing-4);\n    height: var(--bp-spacing-4);\n    border-width: var(--bp-spacing-xs);\n    animation-duration: var(--bp-duration-normal);\n  }\n\n  .spinner--md .spinner__circle {\n    width: var(--bp-spacing-6);\n    height: var(--bp-spacing-6);\n    border-width: var(--bp-spacing-xs);\n    animation-duration: var(--bp-duration-slow);\n  }\n\n  .spinner--lg .spinner__circle {\n    width: var(--bp-spacing-8);\n    height: var(--bp-spacing-8);\n    border-width: var(--bp-spacing-xs);\n    animation-duration: 600ms;\n  }\n\n  /* Animation */\n  @keyframes bp-spinner-rotate {\n    from {\n      transform: rotate(0deg);\n    }\n    to {\n      transform: rotate(360deg);\n    }\n  }\n\n  /* Respect user's motion preferences */\n  @media (prefers-reduced-motion: reduce) {\n    .spinner__circle {\n      animation-duration: 2s;\n    }\n  }\n`;\n","import { LitElement, html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { spinnerStyles } from './spinner.style.js';\n\nexport type SpinnerSize = 'sm' | 'md' | 'lg';\nexport type SpinnerVariant =\n  | 'primary'\n  | 'success'\n  | 'error'\n  | 'warning'\n  | 'inverse'\n  | 'neutral';\n\n/**\n * A loading spinner component that indicates content is being loaded or processed.\n * Supports multiple sizes, variants, and an optional label for accessibility.\n */\n@customElement('bp-spinner')\nexport class BpSpinner extends LitElement {\n  /**\n   * Size of the spinner.\n   * @type {'sm' | 'md' | 'lg'}\n   * @default 'md'\n   */\n  @property({ type: String, reflect: true }) declare size: SpinnerSize;\n\n  /**\n   * Visual variant of the spinner.\n   * @type {'primary' | 'success' | 'error' | 'warning' | 'inverse' | 'neutral'}\n   * @default 'primary'\n   */\n  @property({ type: String, reflect: true }) declare variant: SpinnerVariant;\n\n  /**\n   * Accessible label for screen readers.\n   * @type {string}\n   * @default 'Loading...'\n   */\n  @property({ type: String, reflect: true }) declare label: string;\n\n  static styles = [spinnerStyles];\n\n  constructor() {\n    super();\n    this.size = 'md';\n    this.variant = 'primary';\n    this.label = 'Loading...';\n  }\n\n  render() {\n    return html`\n      <div\n        class=\"spinner spinner--${this.size} spinner--${this.variant}\"\n        role=\"status\"\n        aria-label=\"${this.label}\"\n        part=\"spinner\"\n      >\n        <div class=\"spinner__circle\" part=\"circle\"></div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'bp-spinner': BpSpinner;\n  }\n}\n"],"names":["spinnerStyles","css","BpSpinner","LitElement","html","__decorateClass","property","customElement"],"mappings":";;AAEO,MAAMA,IAAgBC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;;;ACgBtB,IAAMC,IAAN,cAAwBC,EAAW;AAAA,EAwBxC,cAAc;AACZ,UAAA,GACA,KAAK,OAAO,MACZ,KAAK,UAAU,WACf,KAAK,QAAQ;AAAA,EACf;AAAA,EAEA,SAAS;AACP,WAAOC;AAAA;AAAA,kCAEuB,KAAK,IAAI,aAAa,KAAK,OAAO;AAAA;AAAA,sBAE9C,KAAK,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAM9B;AACF;AA3CaF,EAsBJ,SAAS,CAACF,CAAa;AAhBqBK,EAAA;AAAA,EAAlDC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAN9BJ,EAMwC,WAAA,QAAA,CAAA;AAOAG,EAAA;AAAA,EAAlDC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAb9BJ,EAawC,WAAA,WAAA,CAAA;AAOAG,EAAA;AAAA,EAAlDC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GApB9BJ,EAoBwC,WAAA,SAAA,CAAA;AApBxCA,IAANG,EAAA;AAAA,EADNE,EAAc,YAAY;AAAA,GACdL,CAAA;"}

package/dist/components/stepper.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"stepper.js","sources":["../../source/components/stepper/stepper.style.ts","../../source/components/stepper/stepper.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const stepperStyles = css`\n  /* ─────────────────────────────────────────────────────────────────────────────\n   * Base Styles\n   * ───────────────────────────────────────────────────────────────────────────── */\n\n  :host {\n    display: block;\n    font-family: var(--bp-font-family);\n  }\n\n  :host([disabled]) {\n    opacity: var(--bp-opacity-disabled);\n    pointer-events: none;\n  }\n\n  .stepper {\n    display: flex;\n    flex-direction: column;\n    gap: var(--bp-spacing-lg);\n  }\n\n  /* ─────────────────────────────────────────────────────────────────────────────\n   * Step List\n   * ───────────────────────────────────────────────────────────────────────────── */\n\n  .step-list {\n    display: flex;\n    gap: var(--bp-spacing-xs);\n  }\n\n  /* ─────────────────────────────────────────────────────────────────────────────\n   * Individual Step\n   * ───────────────────────────────────────────────────────────────────────────── */\n\n  .step {\n    display: flex;\n    align-items: flex-start;\n    flex: 1;\n    position: relative;\n    outline: none;\n  }\n\n  .step--clickable {\n    cursor: pointer;\n  }\n\n  .step--clickable:focus-visible .step-indicator {\n    outline: var(--bp-focus-width) var(--bp-focus-style) var(--bp-color-focus);\n    outline-offset: var(--bp-focus-offset);\n  }\n\n  .step--disabled {\n    cursor: not-allowed;\n  }\n\n  /* ─────────────────────────────────────────────────────────────────────────────\n   * Step Indicator (Number Circle)\n   * ───────────────────────────────────────────────────────────────────────────── */\n\n  .step-indicator {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n    width: var(--bp-spacing-xl);\n    height: var(--bp-spacing-xl);\n    border-radius: 50%;\n    border: var(--bp-border-width) solid var(--bp-color-border);\n    background-color: var(--bp-color-surface);\n    color: var(--bp-color-text-muted);\n    font-size: var(--bp-font-size-sm);\n    font-weight: var(--bp-font-weight-medium);\n    position: relative;\n    transition:\n      background-color var(--bp-transition-fast),\n      border-color var(--bp-transition-fast),\n      color var(--bp-transition-fast);\n  }\n\n  /* Expand touch target to 44×44px for WCAG 2.2 AA compliance */\n  .step--clickable .step-indicator::after {\n    content: '';\n    position: absolute;\n    inset: calc((var(--bp-spacing-11) - var(--bp-spacing-xl)) / -2);\n  }\n\n  .step-indicator--current {\n    background-color: var(--bp-color-primary);\n    border-color: var(--bp-color-primary);\n    color: var(--bp-color-text-inverse);\n  }\n\n  .step-indicator--complete {\n    background-color: var(--bp-color-success);\n    border-color: var(--bp-color-success);\n    color: var(--bp-color-text-inverse);\n  }\n\n  .step-indicator--error {\n    background-color: var(--bp-color-error);\n    border-color: var(--bp-color-error);\n    color: var(--bp-color-text-inverse);\n  }\n\n  .step-number {\n    line-height: 1;\n  }\n\n  .step-icon {\n    width: var(--bp-spacing-md);\n    height: var(--bp-spacing-md);\n  }\n\n  /* ─────────────────────────────────────────────────────────────────────────────\n   * Step Content (Label & Description)\n   * ───────────────────────────────────────────────────────────────────────────── */\n\n  .step-content {\n    display: flex;\n    flex-direction: column;\n    gap: var(--bp-spacing-2xs);\n    padding-left: var(--bp-spacing-sm);\n    padding-right: var(--bp-spacing-md);\n  }\n\n  .step-label {\n    font-size: var(--bp-font-size-sm);\n    font-weight: var(--bp-font-weight-medium);\n    color: var(--bp-color-text);\n    line-height: var(--bp-line-height-tight);\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  .step--current .step-label {\n    color: var(--bp-color-primary);\n  }\n\n  .step--complete .step-label {\n    color: var(--bp-color-text);\n  }\n\n  .step--error .step-label {\n    color: var(--bp-color-error);\n  }\n\n  .step--disabled .step-label {\n    color: var(--bp-color-text-muted);\n  }\n\n  .step--pending .step-label {\n    color: var(--bp-color-text-muted);\n  }\n\n  .step-description {\n    font-size: var(--bp-font-size-xs);\n    color: var(--bp-color-text-muted);\n    line-height: var(--bp-line-height-normal);\n  }\n\n  .step-error {\n    font-size: var(--bp-font-size-xs);\n    color: var(--bp-color-error);\n    line-height: var(--bp-line-height-normal);\n  }\n\n  /* ─────────────────────────────────────────────────────────────────────────────\n   * Connector Lines\n   * ───────────────────────────────────────────────────────────────────────────── */\n\n  .connector {\n    flex: 1;\n    height: calc(var(--bp-border-width) * 2);\n    background-color: var(--bp-color-border);\n    margin-top: calc(var(--bp-spacing-xl) / 2);\n    margin-left: var(--bp-spacing-sm);\n    margin-right: var(--bp-spacing-sm);\n    transition: background-color var(--bp-transition-fast);\n  }\n\n  .step--complete .connector {\n    background-color: var(--bp-color-success);\n  }\n\n  .step--error .connector {\n    background-color: var(--bp-color-error);\n  }\n\n  /* ─────────────────────────────────────────────────────────────────────────────\n   * Horizontal Orientation (Default)\n   * ───────────────────────────────────────────────────────────────────────────── */\n\n  .stepper--horizontal .step-list {\n    flex-direction: row;\n  }\n\n  .stepper--horizontal .step {\n    flex-direction: row;\n    align-items: flex-start;\n  }\n\n  .stepper--horizontal .step-content {\n    max-width: var(--bp-spacing-24);\n  }\n\n  /* ─────────────────────────────────────────────────────────────────────────────\n   * Vertical Orientation\n   * ───────────────────────────────────────────────────────────────────────────── */\n\n  .stepper--vertical .step-list {\n    flex-direction: column;\n    gap: 0;\n  }\n\n  .stepper--vertical .step {\n    flex-direction: row;\n    padding-bottom: var(--bp-spacing-lg);\n  }\n\n  .stepper--vertical .step:last-child {\n    padding-bottom: 0;\n  }\n\n  .stepper--vertical .step-content {\n    flex: 1;\n    padding-right: 0;\n  }\n\n  .stepper--vertical .connector {\n    position: absolute;\n    left: calc(var(--bp-spacing-xl) / 2);\n    top: calc(var(--bp-spacing-xl) + var(--bp-spacing-xs));\n    bottom: 0;\n    width: calc(var(--bp-border-width) * 2);\n    height: auto;\n    margin: 0;\n  }\n\n  /* ─────────────────────────────────────────────────────────────────────────────\n   * Size Variants\n   * ───────────────────────────────────────────────────────────────────────────── */\n\n  /* Small */\n  .stepper--sm .step-indicator {\n    width: var(--bp-spacing-lg);\n    height: var(--bp-spacing-lg);\n    font-size: var(--bp-font-size-xs);\n  }\n\n  .stepper--sm .step--clickable .step-indicator::after {\n    inset: calc((var(--bp-spacing-11) - var(--bp-spacing-lg)) / -2);\n  }\n\n  .stepper--sm .step-icon {\n    width: var(--bp-spacing-sm);\n    height: var(--bp-spacing-sm);\n  }\n\n  .stepper--sm .step-label {\n    font-size: var(--bp-font-size-xs);\n  }\n\n  .stepper--sm .step-description {\n    font-size: var(--bp-font-size-xs);\n  }\n\n  .stepper--sm .connector {\n    margin-top: calc(var(--bp-spacing-lg) / 2);\n  }\n\n  .stepper--sm.stepper--vertical .connector {\n    left: calc(var(--bp-spacing-lg) / 2);\n    top: calc(var(--bp-spacing-lg) + var(--bp-spacing-xs));\n  }\n\n  /* Large */\n  .stepper--lg .step-indicator {\n    width: var(--bp-spacing-2xl);\n    height: var(--bp-spacing-2xl);\n    font-size: var(--bp-font-size-base);\n  }\n\n  .stepper--lg .step--clickable .step-indicator::after {\n    inset: calc((var(--bp-spacing-11) - var(--bp-spacing-2xl)) / -2);\n  }\n\n  .stepper--lg .step-icon {\n    width: var(--bp-spacing-lg);\n    height: var(--bp-spacing-lg);\n  }\n\n  .stepper--lg .step-label {\n    font-size: var(--bp-font-size-base);\n  }\n\n  .stepper--lg .step-description {\n    font-size: var(--bp-font-size-sm);\n  }\n\n  .stepper--lg .connector {\n    margin-top: calc(var(--bp-spacing-2xl) / 2);\n  }\n\n  .stepper--lg.stepper--vertical .connector {\n    left: calc(var(--bp-spacing-2xl) / 2);\n    top: calc(var(--bp-spacing-2xl) + var(--bp-spacing-xs));\n  }\n\n  /* ─────────────────────────────────────────────────────────────────────────────\n   * Panel\n   * ───────────────────────────────────────────────────────────────────────────── */\n\n  .panel {\n    padding: var(--bp-spacing-md);\n    background-color: var(--bp-color-surface);\n    border: var(--bp-border-width) solid var(--bp-color-border);\n    border-radius: var(--bp-border-radius-md);\n  }\n\n  .panel:not(.panel--has-content) {\n    display: none;\n  }\n\n  /* ─────────────────────────────────────────────────────────────────────────────\n   * Actions\n   * ───────────────────────────────────────────────────────────────────────────── */\n\n  .actions {\n    display: flex;\n    gap: var(--bp-spacing-sm);\n    justify-content: flex-end;\n  }\n\n  .actions:empty {\n    display: none;\n  }\n\n  /* ─────────────────────────────────────────────────────────────────────────────\n   * Navigation Buttons\n   * ───────────────────────────────────────────────────────────────────────────── */\n\n  .nav-button {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    padding: var(--bp-spacing-sm) var(--bp-spacing-md);\n    font-family: var(--bp-font-family);\n    font-size: var(--bp-font-size-sm);\n    font-weight: var(--bp-font-weight-medium);\n    line-height: var(--bp-line-height-tight);\n    border-radius: var(--bp-border-radius-md);\n    cursor: pointer;\n    transition:\n      background-color var(--bp-transition-fast),\n      border-color var(--bp-transition-fast),\n      color var(--bp-transition-fast);\n  }\n\n  .nav-button--previous {\n    background-color: var(--bp-color-surface);\n    border: var(--bp-border-width) solid var(--bp-color-border);\n    color: var(--bp-color-text);\n  }\n\n  .nav-button--previous:hover:not(:disabled) {\n    background-color: var(--bp-color-surface-hover);\n    border-color: var(--bp-color-border-strong);\n  }\n\n  .nav-button--next {\n    background-color: var(--bp-color-primary);\n    border: var(--bp-border-width) solid var(--bp-color-primary);\n    color: var(--bp-color-text-inverse);\n  }\n\n  .nav-button--next:hover:not(:disabled) {\n    background-color: var(--bp-color-primary-hover);\n    border-color: var(--bp-color-primary-hover);\n  }\n\n  .nav-button:disabled {\n    opacity: var(--bp-opacity-disabled);\n    cursor: not-allowed;\n  }\n\n  .nav-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  /* ─────────────────────────────────────────────────────────────────────────────\n   * Hover States\n   * ───────────────────────────────────────────────────────────────────────────── */\n\n  .step--clickable:hover .step-indicator--pending {\n    border-color: var(--bp-color-border-strong);\n  }\n\n  .step--clickable:hover .step-indicator--complete {\n    background-color: var(--bp-color-success-hover);\n    border-color: var(--bp-color-success-hover);\n  }\n\n  .step--clickable:hover .step-indicator--current {\n    background-color: var(--bp-color-primary-hover);\n    border-color: var(--bp-color-primary-hover);\n  }\n\n  /* ─────────────────────────────────────────────────────────────────────────────\n   * Reduced Motion\n   * ───────────────────────────────────────────────────────────────────────────── */\n\n  @media (prefers-reduced-motion: reduce) {\n    .step-indicator,\n    .connector {\n      transition: none;\n    }\n  }\n`;\n","import { LitElement, html, nothing, PropertyValues } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { stepperStyles } from './stepper.style.js';\nimport { booleanConverter } from '../../utilities/boolean-converter.js';\n\n/**\n * Step status\n */\nexport type StepStatus = 'pending' | 'current' | 'complete' | 'error';\n\n/**\n * Stepper orientation\n */\nexport type StepperOrientation = 'horizontal' | 'vertical';\n\n/**\n * Stepper size\n */\nexport type StepperSize = 'sm' | 'md' | 'lg';\n\n/**\n * Step configuration interface\n */\nexport interface Step {\n  /** Unique identifier for the step */\n  id: string;\n  /** Display label for the step */\n  label: string;\n  /** Optional description text */\n  description?: string;\n  /** Whether the step is disabled */\n  disabled?: boolean;\n  /** Optional icon name (uses step number if not provided) */\n  icon?: string;\n  /** Optional error message when step has error status */\n  error?: string;\n}\n\n/**\n * A stepper component for multi-step workflows and wizards.\n * Provides visual progress indication through a series of numbered or labeled steps.\n *\n * @element bp-stepper\n *\n * @property {Step[]} steps - Array of step configurations\n * @property {number} currentStep - Zero-based index of the current step\n * @property {StepperOrientation} orientation - Layout orientation\n * @property {StepperSize} size - Component size variant\n * @property {boolean} linear - Whether steps must be completed in order\n * @property {boolean} disabled - Whether the entire stepper is disabled\n * @property {boolean} hideLabels - Hide step labels (show only indicators)\n * @property {boolean} clickable - Whether completed steps are clickable to navigate\n *\n * @slot step-{id} - Custom content for a specific step panel\n * @slot actions - Navigation buttons (next/prev)\n *\n * @fires bp-step-change - Fired when the current step changes\n * @fires bp-step-complete - Fired when a step is marked complete\n * @fires bp-step-click - Fired when a step indicator is clicked\n *\n * @csspart stepper - The main stepper container\n * @csspart step-list - The step indicators container\n * @csspart step - Individual step container\n * @csspart step-indicator - The step number/icon circle\n * @csspart step-content - The step label and description area\n * @csspart step-label - The step label text\n * @csspart step-description - The step description text\n * @csspart connector - The line connecting steps\n * @csspart panel - The content panel for the current step\n * @csspart actions - The navigation actions container\n */\n@customElement('bp-stepper')\nexport class BpStepper extends LitElement {\n  /**\n   * Array of step configurations\n   */\n  @property({ type: Array }) declare steps: Step[];\n\n  /**\n   * Zero-based index of the current step\n   */\n  @property({ type: Number, reflect: true, attribute: 'current-step' })\n  declare currentStep: number;\n\n  /**\n   * Layout orientation\n   */\n  @property({ type: String, reflect: true })\n  declare orientation: StepperOrientation;\n\n  /**\n   * Component size variant\n   */\n  @property({ type: String, reflect: true }) declare size: StepperSize;\n\n  /**\n   * Whether steps must be completed in order\n   */\n  @property({ converter: booleanConverter, reflect: true })\n  declare linear: boolean;\n\n  /**\n   * Whether the entire stepper is disabled\n   */\n  @property({ type: Boolean, reflect: true }) declare disabled: boolean;\n\n  /**\n   * Hide step labels (show only indicators)\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'hide-labels' })\n  declare hideLabels: boolean;\n\n  /**\n   * Whether completed steps are clickable to navigate back\n   */\n  @property({ converter: booleanConverter, reflect: true })\n  declare clickable: boolean;\n\n  /**\n   * Show built-in navigation buttons (Previous/Next)\n   */\n  @property({\n    converter: booleanConverter,\n    reflect: true,\n    attribute: 'show-navigation',\n  })\n  declare showNavigation: boolean;\n\n  /**\n   * Tracks which steps have been completed\n   */\n  @state() private completedSteps: Set<number> = new Set();\n\n  /**\n   * Tracks which steps have errors\n   */\n  @state() private errorSteps: Set<number> = new Set();\n\n  /**\n   * Tracks whether the panel slot has any assigned content\n   */\n  @state() private panelHasContent = false;\n\n  static styles = [stepperStyles];\n\n  constructor() {\n    super();\n    this.steps = [];\n    this.currentStep = 0;\n    this.orientation = 'horizontal';\n    this.size = 'md';\n    this.linear = true;\n    this.disabled = false;\n    this.hideLabels = false;\n    this.clickable = true;\n    this.showNavigation = true;\n  }\n\n  protected willUpdate(changedProperties: PropertyValues): void {\n    super.willUpdate(changedProperties);\n\n    // Sync errorSteps from step config error properties\n    if (changedProperties.has('steps')) {\n      const errors = new Set<number>();\n      this.steps.forEach((step, index) => {\n        if (step.error) {\n          errors.add(index);\n        }\n      });\n      this.errorSteps = errors;\n    }\n\n    // Auto-mark previous steps as complete when advancing\n    if (changedProperties.has('currentStep')) {\n      const prevStep = changedProperties.get('currentStep') as\n        | number\n        | undefined;\n      if (prevStep !== undefined && this.currentStep > prevStep) {\n        // Mark all steps before current as complete\n        const updated = new Set(this.completedSteps);\n        for (let i = 0; i < this.currentStep; i++) {\n          if (!this.errorSteps.has(i)) {\n            updated.add(i);\n          }\n        }\n        this.completedSteps = updated;\n      }\n    }\n  }\n\n  /**\n   * Get the status of a step based on index\n   * @param index Zero-based step index\n   * @returns Step status (pending, current, complete, or error)\n   */\n  private _getStepStatus(index: number): StepStatus {\n    if (this.errorSteps.has(index)) {\n      return 'error';\n    }\n    // Check explicit completion first (allows marking current step complete)\n    if (this.completedSteps.has(index)) {\n      return 'complete';\n    }\n    if (index === this.currentStep) {\n      return 'current';\n    }\n    if (index < this.currentStep) {\n      return 'complete';\n    }\n    return 'pending';\n  }\n\n  /**\n   * Check if a step is clickable based on linear mode and step state\n   * @param index Zero-based step index\n   * @param step Step configuration\n   * @returns True if the step can be clicked to navigate\n   */\n  private _isStepClickable(index: number, step: Step): boolean {\n    if (this.disabled || step.disabled) return false;\n    if (!this.clickable) return false;\n\n    const status = this._getStepStatus(index);\n\n    if (this.linear) {\n      // In linear mode, can only click completed steps or current step\n      return status === 'complete' || index === this.currentStep;\n    }\n\n    // In non-linear mode, can click any non-disabled step\n    return true;\n  }\n\n  /**\n   * Handle click events on step indicators\n   * Validates clickability and emits bp-step-click event before navigating\n   * @param index Zero-based step index that was clicked\n   * @param step Step configuration\n   */\n  private _handleStepClick(index: number, step: Step): void {\n    if (!this._isStepClickable(index, step)) return;\n\n    const detail = {\n      step: index,\n      stepId: step.id,\n      previousStep: this.currentStep,\n    };\n\n    const clickEvent = new CustomEvent('bp-step-click', {\n      detail,\n      bubbles: true,\n      composed: true,\n    });\n    this.dispatchEvent(clickEvent);\n\n    if (index !== this.currentStep) {\n      // When navigating backward, clear completion for steps at and after target\n      if (index < this.currentStep) {\n        for (let i = index; i < this.steps.length; i++) {\n          this.completedSteps.delete(i);\n        }\n      }\n      this.currentStep = index;\n      this._emitStepChange(index, step);\n    }\n  }\n\n  /**\n   * Handle keyboard navigation on step indicators\n   * Supports Enter/Space for activation and Arrow keys for focus movement\n   * @param event Keyboard event\n   * @param index Zero-based step index\n   * @param step Step configuration\n   */\n  private _handleStepKeydown(\n    event: KeyboardEvent,\n    index: number,\n    step: Step\n  ): void {\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault();\n      this._handleStepClick(index, step);\n    }\n\n    // Arrow key navigation\n    const isHorizontal = this.orientation === 'horizontal';\n    const prevKey = isHorizontal ? 'ArrowLeft' : 'ArrowUp';\n    const nextKey = isHorizontal ? 'ArrowRight' : 'ArrowDown';\n\n    if (event.key === prevKey && index > 0) {\n      event.preventDefault();\n      this._focusStep(index - 1);\n    } else if (event.key === nextKey && index < this.steps.length - 1) {\n      event.preventDefault();\n      this._focusStep(index + 1);\n    }\n  }\n\n  /**\n   * Focus a specific step indicator element\n   * @param index Zero-based step index to focus\n   */\n  private _focusStep(index: number): void {\n    const stepEl = this.shadowRoot?.querySelector(\n      `[data-step-index=\"${index}\"]`\n    ) as HTMLElement;\n    stepEl?.focus();\n  }\n\n  /**\n   * Emit bp-step-change event when navigating between steps\n   * @param index Zero-based step index navigated to\n   * @param step Step configuration\n   */\n  private _emitStepChange(index: number, step: Step): void {\n    const event = new CustomEvent('bp-step-change', {\n      detail: { step: index, stepId: step.id },\n      bubbles: true,\n      composed: true,\n    });\n    this.dispatchEvent(event);\n  }\n\n  /**\n   * Navigate to the next step\n   */\n  public next(): boolean {\n    if (this.currentStep >= this.steps.length - 1) return false;\n    if (this.disabled) return false;\n\n    const currentStepConfig = this.steps[this.currentStep];\n    if (this.errorSteps.has(this.currentStep)) return false;\n\n    // Mark current step as complete\n    this.completedSteps.add(this.currentStep);\n    this.currentStep++;\n\n    this._emitStepChange(this.currentStep, this.steps[this.currentStep]);\n\n    const completeEvent = new CustomEvent('bp-step-complete', {\n      detail: { step: this.currentStep - 1, stepId: currentStepConfig.id },\n      bubbles: true,\n      composed: true,\n    });\n    this.dispatchEvent(completeEvent);\n\n    return true;\n  }\n\n  /**\n   * Navigate to the previous step\n   */\n  public previous(): boolean {\n    if (this.currentStep <= 0) return false;\n    if (this.disabled) return false;\n\n    // Remove completed status from steps at and after the new current position\n    for (let i = this.currentStep - 1; i < this.steps.length; i++) {\n      this.completedSteps.delete(i);\n    }\n\n    this.currentStep--;\n    this._emitStepChange(this.currentStep, this.steps[this.currentStep]);\n    return true;\n  }\n\n  /**\n   * Go to a specific step\n   */\n  public goToStep(index: number): boolean {\n    if (index < 0 || index >= this.steps.length) return false;\n    if (this.disabled) return false;\n\n    const step = this.steps[index];\n    if (step.disabled) return false;\n\n    if (this.linear && index > this.currentStep) {\n      // Can't skip ahead in linear mode\n      return false;\n    }\n\n    // When navigating backward, clear completion for steps at and after target\n    if (index < this.currentStep) {\n      for (let i = index; i < this.steps.length; i++) {\n        this.completedSteps.delete(i);\n      }\n    }\n\n    this.currentStep = index;\n    this._emitStepChange(index, step);\n    return true;\n  }\n\n  /**\n   * Mark a step as having an error\n   */\n  public setStepError(index: number, hasError: boolean): void {\n    if (hasError) {\n      this.errorSteps.add(index);\n      this.completedSteps.delete(index);\n    } else {\n      this.errorSteps.delete(index);\n    }\n    this.requestUpdate();\n  }\n\n  /**\n   * Mark a step as complete\n   */\n  public setStepComplete(index: number, complete: boolean): void {\n    if (complete) {\n      this.completedSteps.add(index);\n      this.errorSteps.delete(index);\n    } else {\n      this.completedSteps.delete(index);\n    }\n    this.requestUpdate();\n  }\n\n  /**\n   * Reset the stepper to the first step\n   */\n  public reset(): void {\n    this.currentStep = 0;\n    this.completedSteps.clear();\n    this.errorSteps.clear();\n    this.requestUpdate();\n  }\n\n  /**\n   * Check if we're on the first step\n   */\n  public get isFirstStep(): boolean {\n    return this.currentStep === 0;\n  }\n\n  /**\n   * Check if we're on the last step\n   */\n  public get isLastStep(): boolean {\n    return this.currentStep === this.steps.length - 1;\n  }\n\n  /**\n   * Get the current step configuration\n   */\n  public get currentStepConfig(): Step | undefined {\n    return this.steps[this.currentStep];\n  }\n\n  /**\n   * Render the step indicator (number circle with optional icon)\n   * Shows checkmark for complete, X for error, or step number for other states\n   * @param index Zero-based step index\n   * @param status Current step status\n   * @returns TemplateResult for step indicator\n   */\n  private _renderStepIndicator(index: number, status: StepStatus) {\n    const showCheckmark = status === 'complete';\n    const showError = status === 'error';\n\n    /* Inline SVG icons for step states - functional indicators, not themed */\n    /* stylelint-disable blueprint/no-hardcoded-values */\n    return html`\n      <div\n        class=${classMap({\n          'step-indicator': true,\n          [`step-indicator--${status}`]: true,\n        })}\n        part=\"step-indicator\"\n      >\n        ${showCheckmark\n          ? html`<svg\n              class=\"step-icon\"\n              viewBox=\"0 0 24 24\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              stroke-width=\"3\"\n              aria-hidden=\"true\"\n            >\n              <polyline points=\"20 6 9 17 4 12\"></polyline>\n            </svg>`\n          : showError\n            ? html`<svg\n                class=\"step-icon\"\n                viewBox=\"0 0 24 24\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                stroke-width=\"2\"\n                aria-hidden=\"true\"\n              >\n                <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\n                <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\n              </svg>`\n            : html`<span class=\"step-number\">${index + 1}</span>`}\n      </div>\n    `;\n    /* stylelint-enable blueprint/no-hardcoded-values */\n  }\n\n  /**\n   * Render a complete step with indicator, label, description, and connector\n   * @param step Step configuration\n   * @param index Zero-based step index\n   * @returns TemplateResult for step\n   */\n  private _renderStep(step: Step, index: number) {\n    const status = this._getStepStatus(index);\n    const isClickable = this._isStepClickable(index, step);\n    const isLast = index === this.steps.length - 1;\n\n    return html`\n      <div\n        class=${classMap({\n          step: true,\n          [`step--${status}`]: true,\n          'step--disabled': step.disabled || this.disabled,\n          'step--clickable': isClickable,\n        })}\n        part=\"step\"\n        role=\"listitem\"\n        data-step-index=${index}\n        tabindex=${isClickable ? 0 : -1}\n        aria-current=${status === 'current' ? 'step' : 'false'}\n        aria-disabled=${step.disabled || this.disabled ? 'true' : 'false'}\n        @click=${() => this._handleStepClick(index, step)}\n        @keydown=${(e: KeyboardEvent) =>\n          this._handleStepKeydown(e, index, step)}\n      >\n        ${this._renderStepIndicator(index, status)}\n        ${!this.hideLabels\n          ? html`\n              <div class=\"step-content\" part=\"step-content\">\n                <span class=\"step-label\" part=\"step-label\" title=${step.label}\n                  >${step.label}</span\n                >\n                ${step.description\n                  ? html`<span class=\"step-description\" part=\"step-description\"\n                      >${step.description}</span\n                    >`\n                  : nothing}\n                ${status === 'error' && step.error\n                  ? html`<span class=\"step-error\">${step.error}</span>`\n                  : nothing}\n              </div>\n            `\n          : nothing}\n        ${!isLast\n          ? html`<div class=\"connector\" part=\"connector\"></div>`\n          : nothing}\n      </div>\n    `;\n  }\n\n  /**\n   * Handle slotchange on the panel slot to track whether content is provided\n   */\n  private _handlePanelSlotChange(event: Event): void {\n    const slot = event.target as HTMLSlotElement;\n    this.panelHasContent = slot.assignedNodes({ flatten: true }).length > 0;\n  }\n\n  /**\n   * Render the content panel for the current step\n   * Shows slotted content via step-{id} slot\n   * @returns TemplateResult for panel or nothing if no current step\n   */\n  private _renderPanel() {\n    const currentStepConfig = this.steps[this.currentStep];\n    if (!currentStepConfig) return nothing;\n\n    return html`\n      <div\n        class=${classMap({\n          panel: true,\n          'panel--has-content': this.panelHasContent,\n        })}\n        part=\"panel\"\n        role=\"tabpanel\"\n      >\n        <slot\n          name=\"step-${currentStepConfig.id}\"\n          @slotchange=${this._handlePanelSlotChange}\n        ></slot>\n      </div>\n    `;\n  }\n\n  render() {\n    return html`\n      <div\n        class=${classMap({\n          stepper: true,\n          [`stepper--${this.orientation}`]: true,\n          [`stepper--${this.size}`]: true,\n          'stepper--disabled': this.disabled,\n        })}\n        part=\"stepper\"\n      >\n        <div\n          class=\"step-list\"\n          part=\"step-list\"\n          role=\"list\"\n          aria-label=\"Progress steps\"\n        >\n          ${this.steps.map((step, index) => this._renderStep(step, index))}\n        </div>\n        ${this._renderPanel()}\n        <div class=\"actions\" part=\"actions\">\n          <slot name=\"actions\">\n            ${this.showNavigation ? this._renderDefaultNavigation() : nothing}\n          </slot>\n        </div>\n      </div>\n    `;\n  }\n\n  /**\n   * Render default navigation buttons (Previous/Next)\n   * Only shown when showNavigation is true and no custom actions are slotted\n   */\n  private _renderDefaultNavigation() {\n    return html`\n      <button\n        class=\"nav-button nav-button--previous\"\n        part=\"nav-button-previous\"\n        ?disabled=${this.isFirstStep || this.disabled}\n        @click=${() => this.previous()}\n      >\n        Previous\n      </button>\n      <button\n        class=\"nav-button nav-button--next\"\n        part=\"nav-button-next\"\n        ?disabled=${this.isLastStep || this.disabled}\n        @click=${() => this.next()}\n      >\n        ${this.isLastStep ? 'Finish' : 'Next'}\n      </button>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'bp-stepper': BpStepper;\n  }\n}\n"],"names":["stepperStyles","css","BpStepper","LitElement","changedProperties","errors","step","index","prevStep","updated","i","status","detail","clickEvent","event","isHorizontal","prevKey","nextKey","currentStepConfig","completeEvent","hasError","complete","showCheckmark","showError","html","classMap","isClickable","isLast","e","nothing","slot","__decorateClass","property","booleanConverter","state","customElement"],"mappings":";;;;AAEO,MAAMA,IAAgBC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAA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"}

package/dist/components/switch.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"switch.js","sources":["../../source/components/switch/switch.style.ts","../../source/components/switch/switch.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const switchStyles = css`\n  /* ─────────────────────────────────────────────────────────────────────────────\n   * Base\n   * ───────────────────────────────────────────────────────────────────────────── */\n\n  :host {\n    display: inline-block;\n  }\n\n  .switch {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--bp-spacing-sm);\n    cursor: pointer;\n    user-select: none;\n    font-family: var(--bp-font-family);\n    font-size: var(--bp-font-size-base);\n    line-height: var(--bp-line-height-normal);\n    color: var(--bp-color-text);\n    -webkit-tap-highlight-color: transparent;\n  }\n\n  .switch__input {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    margin: -1px;\n    padding: 0;\n    overflow: hidden;\n    clip: rect(0, 0, 0, 0);\n    white-space: nowrap;\n    border: 0;\n  }\n\n  .switch__label {\n    flex: 1;\n  }\n\n  /* ─────────────────────────────────────────────────────────────────────────────\n   * Track\n   * ───────────────────────────────────────────────────────────────────────────── */\n\n  .switch__track {\n    position: relative;\n    display: flex;\n    align-items: center;\n    flex-shrink: 0;\n    border-radius: var(--bp-border-radius-full);\n    background-color: var(--bp-color-border-strong);\n    transition: background-color 200ms cubic-bezier(0.2, 0, 0, 1);\n  }\n\n  /* ─────────────────────────────────────────────────────────────────────────────\n   * Thumb\n   * ───────────────────────────────────────────────────────────────────────────── */\n\n  .switch__thumb {\n    position: absolute;\n    border-radius: var(--bp-border-radius-full);\n    background-color: var(--bp-color-surface-elevated);\n    box-shadow:\n      0 1px 2px oklch(0 0 0 / 0.2),\n      0 1px 3px oklch(0 0 0 / 0.1);\n    transition:\n      transform 200ms cubic-bezier(0.2, 0, 0, 1),\n      width 200ms cubic-bezier(0.2, 0, 0, 1),\n      box-shadow 200ms cubic-bezier(0.2, 0, 0, 1);\n    will-change: transform, width;\n  }\n\n  /* ─────────────────────────────────────────────────────────────────────────────\n   * Sizes — proportional track + thumb dimensions\n   *\n   *   sm: track 32×18, thumb 14, pad 2\n   *   md: track 40×22, thumb 18, pad 2\n   *   lg: track 48×28, thumb 22, pad 3\n   * ───────────────────────────────────────────────────────────────────────────── */\n\n  /* Small */\n  .switch--sm .switch__track {\n    width: var(--bp-spacing-8);\n    height: 18px;\n    padding: var(--bp-spacing-0-5);\n  }\n  .switch--sm .switch__thumb {\n    width: 14px;\n    height: 14px;\n    left: var(--bp-spacing-0-5);\n  }\n  .switch--sm .switch__input:checked + .switch__track .switch__thumb {\n    transform: translateX(14px);\n  }\n\n  /* Medium */\n  .switch--md .switch__track {\n    width: var(--bp-spacing-10);\n    height: 22px;\n    padding: var(--bp-spacing-0-5);\n  }\n  .switch--md .switch__thumb {\n    width: 18px;\n    height: 18px;\n    left: var(--bp-spacing-0-5);\n  }\n  .switch--md .switch__input:checked + .switch__track .switch__thumb {\n    transform: translateX(18px);\n  }\n\n  /* Large */\n  .switch--lg .switch__track {\n    width: var(--bp-spacing-12);\n    height: 28px;\n    padding: var(--bp-spacing-1);\n  }\n  .switch--lg .switch__thumb {\n    width: 22px;\n    height: 22px;\n    left: var(--bp-spacing-1);\n  }\n  .switch--lg .switch__input:checked + .switch__track .switch__thumb {\n    transform: translateX(22px);\n  }\n\n  /* ─────────────────────────────────────────────────────────────────────────────\n   * Checked state\n   * ───────────────────────────────────────────────────────────────────────────── */\n\n  .switch__input:checked + .switch__track {\n    background-color: var(--bp-color-primary);\n  }\n\n  /* ─────────────────────────────────────────────────────────────────────────────\n   * Hover\n   * ───────────────────────────────────────────────────────────────────────────── */\n\n  .switch:hover:not(.switch--disabled) .switch__track {\n    background-color: var(--bp-color-text-muted);\n  }\n\n  .switch:hover:not(.switch--disabled) .switch__input:checked + .switch__track {\n    background-color: var(--bp-color-primary-hover);\n  }\n\n  .switch:hover:not(.switch--disabled) .switch__thumb {\n    box-shadow:\n      0 1px 3px oklch(0 0 0 / 0.25),\n      0 2px 6px oklch(0 0 0 / 0.1);\n  }\n\n  /* ─────────────────────────────────────────────────────────────────────────────\n   * Active / Pressed — thumb stretches toward the direction of travel\n   * ───────────────────────────────────────────────────────────────────────────── */\n\n  .switch:active:not(.switch--disabled) .switch--sm .switch__thumb,\n  .switch--sm .switch__input:active + .switch__track .switch__thumb {\n    width: 18px;\n  }\n  .switch--sm .switch__input:checked:active + .switch__track .switch__thumb {\n    width: 18px;\n    transform: translateX(10px);\n  }\n\n  .switch:active:not(.switch--disabled) .switch--md .switch__thumb,\n  .switch--md .switch__input:active + .switch__track .switch__thumb {\n    width: 22px;\n  }\n  .switch--md .switch__input:checked:active + .switch__track .switch__thumb {\n    width: 22px;\n    transform: translateX(14px);\n  }\n\n  .switch:active:not(.switch--disabled) .switch--lg .switch__thumb,\n  .switch--lg .switch__input:active + .switch__track .switch__thumb {\n    width: 26px;\n  }\n  .switch--lg .switch__input:checked:active + .switch__track .switch__thumb {\n    width: 26px;\n    transform: translateX(18px);\n  }\n\n  /* ─────────────────────────────────────────────────────────────────────────────\n   * Focus\n   * ───────────────────────────────────────────────────────────────────────────── */\n\n  .switch--focus .switch__track {\n    outline: var(--bp-focus-width) var(--bp-focus-style) var(--bp-color-focus);\n    outline-offset: var(--bp-focus-offset);\n  }\n\n  /* ─────────────────────────────────────────────────────────────────────────────\n   * Disabled\n   * ───────────────────────────────────────────────────────────────────────────── */\n\n  .switch--disabled {\n    opacity: 0.4;\n    cursor: not-allowed;\n  }\n\n  /* ─────────────────────────────────────────────────────────────────────────────\n   * Error\n   * ───────────────────────────────────────────────────────────────────────────── */\n\n  .switch--error .switch__track {\n    background-color: var(--bp-color-error);\n  }\n\n  .switch--error .switch__input:checked + .switch__track {\n    background-color: var(--bp-color-error);\n  }\n\n  .switch:hover:not(.switch--disabled).switch--error .switch__track {\n    background-color: var(--bp-color-error-hover);\n  }\n\n  .switch:hover:not(.switch--disabled).switch--error\n    .switch__input:checked\n    + .switch__track {\n    background-color: var(--bp-color-error-hover);\n  }\n\n  /* ─────────────────────────────────────────────────────────────────────────────\n   * Touch target — ensure 44×44px minimum on touch devices\n   * ───────────────────────────────────────────────────────────────────────────── */\n\n  @media (pointer: coarse) {\n    .switch {\n      min-height: 44px;\n      padding: var(--bp-spacing-xs) 0;\n    }\n\n    .switch__track::before {\n      content: '';\n      position: absolute;\n      inset: -8px -4px;\n    }\n  }\n`;\n","import { LitElement, html } from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { switchStyles } from './switch.style.js';\nimport { live } from 'lit/directives/live.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\n\nexport type SwitchSize = 'sm' | 'md' | 'lg';\n\n/**\n * A toggle switch component for binary on/off states with form integration.\n *\n * @element bp-switch\n *\n * @fires {CustomEvent} bp-change - Fired when the checked state changes\n * @fires {CustomEvent} bp-focus - Fired when the switch receives focus\n * @fires {CustomEvent} bp-blur - Fired when the switch loses focus\n *\n * @slot - The label text for the switch\n *\n * @csspart switch - The switch container (label)\n * @csspart input - The native checkbox input element\n * @csspart track - The switch track background\n * @csspart thumb - The switch thumb/handle\n * @csspart label - The label text container\n */\n@customElement('bp-switch')\nexport class BpSwitch extends LitElement {\n  /**\n   * Whether the switch is in the on (checked) position\n   */\n  @property({ type: Boolean, reflect: true })\n  declare checked: boolean;\n\n  /**\n   * Whether the switch is disabled\n   */\n  @property({ type: Boolean, reflect: true })\n  declare disabled: boolean;\n\n  /**\n   * Whether the switch is required\n   */\n  @property({ type: Boolean, reflect: true })\n  declare required: boolean;\n\n  /**\n   * The name attribute for form submission\n   */\n  @property({ type: String })\n  declare name: string;\n\n  /**\n   * The value attribute for form submission\n   */\n  @property({ type: String })\n  declare value: string;\n\n  /**\n   * The size of the switch\n   */\n  @property({ type: String, reflect: true })\n  declare size: SwitchSize;\n\n  /**\n   * Whether the switch has an error state\n   */\n  @property({ type: Boolean, reflect: true })\n  declare error: boolean;\n\n  @state()\n  private hasFocus = false;\n\n  @query('input[type=\"checkbox\"]')\n  private input!: HTMLInputElement;\n\n  static styles = [switchStyles];\n\n  static formAssociated = true;\n\n  private internals: ElementInternals | null = null;\n\n  constructor() {\n    super();\n    this.checked = false;\n    this.disabled = false;\n    this.required = false;\n    this.name = '';\n    this.value = 'on';\n    this.size = 'md';\n    this.error = false;\n\n    // Attach internals for form integration (with safety check for tests)\n    if (typeof this.attachInternals === 'function') {\n      this.internals = this.attachInternals();\n    }\n  }\n\n  /**\n   * Handle input change events\n   */\n  private handleChange(event: Event): void {\n    const target = event.target as HTMLInputElement;\n    this.checked = target.checked;\n\n    // Update form value\n    if (!this.disabled && this.internals) {\n      this.internals.setFormValue(this.checked ? this.value : null);\n    }\n\n    // Emit custom change event\n    this.dispatchEvent(\n      new CustomEvent('bp-change', {\n        detail: { checked: this.checked },\n        bubbles: true,\n        composed: true,\n      })\n    );\n  }\n\n  /**\n   * Handle focus events\n   */\n  private handleFocus(): void {\n    this.hasFocus = true;\n    this.dispatchEvent(\n      new CustomEvent('bp-focus', {\n        bubbles: true,\n        composed: true,\n      })\n    );\n  }\n\n  /**\n   * Handle blur events\n   */\n  private handleBlur(): void {\n    this.hasFocus = false;\n    this.dispatchEvent(\n      new CustomEvent('bp-blur', {\n        bubbles: true,\n        composed: true,\n      })\n    );\n  }\n\n  /**\n   * Handle label click to toggle the switch\n   */\n  private handleLabelClick(event: MouseEvent): void {\n    if (this.disabled) {\n      event.preventDefault();\n      return;\n    }\n  }\n\n  /**\n   * Sets focus on the switch.\n   */\n\n  focus(options?: FocusOptions) {\n    this.input?.focus(options);\n  }\n\n  /**\n   * Removes focus from the switch.\n   */\n  blur() {\n    this.input?.blur();\n  }\n\n  /**\n   * Lifecycle callback when properties change\n   */\n  updated(changedProperties: Map<string, unknown>) {\n    if (changedProperties.has('checked') && this.internals) {\n      this.internals.setFormValue(this.checked ? this.value : null);\n    }\n  }\n\n  render() {\n    return html`\n      <label\n        part=\"switch\"\n        class=\"switch switch--${this.size} ${this.disabled\n          ? 'switch--disabled'\n          : ''} ${this.error ? 'switch--error' : ''} ${this.hasFocus\n          ? 'switch--focus'\n          : ''}\"\n        @click=${this.handleLabelClick}\n      >\n        <input\n          part=\"input\"\n          type=\"checkbox\"\n          class=\"switch__input\"\n          .checked=${live(this.checked)}\n          ?disabled=${this.disabled}\n          ?required=${this.required}\n          name=${ifDefined(this.name || undefined)}\n          value=${this.value}\n          aria-checked=${this.checked ? 'true' : 'false'}\n          @change=${this.handleChange}\n          @focus=${this.handleFocus}\n          @blur=${this.handleBlur}\n        />\n        <span part=\"track\" class=\"switch__track\">\n          <span part=\"thumb\" class=\"switch__thumb\"></span>\n        </span>\n        <span part=\"label\" class=\"switch__label\">\n          <slot></slot>\n        </span>\n      </label>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'bp-switch': BpSwitch;\n  }\n}\n"],"names":["switchStyles","css","BpSwitch","LitElement","event","target","options","changedProperties","html","live","ifDefined","__decorateClass","property","state","query","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/table.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"table.js","sources":["../../source/components/table/table.style.ts","../../source/components/table/table.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const tableStyles = css`\n  /* Base styles */\n  :host {\n    display: block;\n  }\n\n  .table-wrapper {\n    overflow-x: auto;\n    border-radius: var(--bp-border-radius);\n  }\n\n  .table {\n    width: 100%;\n    border-collapse: collapse;\n    font-family: var(--bp-font-family);\n    font-size: var(--bp-font-size-sm);\n    color: var(--bp-color-text);\n    background: var(--bp-color-surface);\n  }\n\n  /* Header styles */\n  .header-row {\n    background: var(--bp-color-surface-subdued);\n    border-bottom: var(--bp-border-width) solid var(--bp-color-border);\n  }\n\n  .header-cell {\n    font-weight: var(--bp-font-weight-semibold);\n    text-align: left;\n    color: var(--bp-color-text);\n  }\n\n  .header-cell--sortable {\n    cursor: pointer;\n    user-select: none;\n    transition: background-color var(--bp-transition-fast);\n    position: relative;\n  }\n\n  .header-cell--sortable::after {\n    content: '';\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    height: 2px;\n    background: transparent;\n    transition: background var(--bp-transition-fast);\n  }\n\n  .header-cell--sortable:hover::after {\n    background: var(--bp-color-primary);\n    opacity: 0.3;\n  }\n\n  .header-cell--sortable:hover {\n    background: var(--bp-color-surface);\n  }\n\n  .header-cell--sortable:active {\n    background: var(--bp-color-surface-subdued);\n    transform: translateY(1px);\n  }\n\n  .header-cell__content {\n    display: flex;\n    align-items: center;\n    gap: var(--bp-spacing-1);\n  }\n\n  .header-cell__label {\n    flex: 1;\n  }\n\n  /* Sort icon */\n  .sort-icon {\n    display: flex;\n    align-items: center;\n    color: var(--bp-color-text-muted);\n    transition: color var(--bp-transition-fast);\n  }\n\n  .sort-icon--active {\n    color: var(--bp-color-primary);\n  }\n\n  /* Cell styles */\n  .cell {\n    padding: var(--bp-spacing-3) var(--bp-spacing-4);\n    border-bottom: var(--bp-border-width) solid var(--bp-color-border);\n    vertical-align: middle;\n  }\n\n  .cell--checkbox {\n    width: var(--bp-spacing-10);\n    text-align: center;\n    padding-left: var(--bp-spacing-3);\n    padding-right: 0;\n  }\n\n  .cell--checkbox input[type='checkbox'] {\n    width: var(--bp-spacing-6);\n    height: var(--bp-spacing-6);\n    cursor: pointer;\n  }\n\n  /* Row styles */\n  .row {\n    transition: background-color var(--bp-transition-fast);\n    content-visibility: auto;\n    contain-intrinsic-size: auto 48px;\n  }\n\n  .row--hoverable:hover {\n    background: var(--bp-color-surface-subdued);\n  }\n\n  .row--selected {\n    background: oklch(from var(--bp-color-primary) l c h / 0.15);\n  }\n\n  .row--selected:hover {\n    background: oklch(from var(--bp-color-primary) l c h / 0.2);\n  }\n\n  /* Remove border from last row */\n  tbody tr:last-child .cell {\n    border-bottom: none;\n  }\n\n  /* Variants */\n  .table--striped tbody tr:nth-child(even) {\n    background: var(--bp-color-surface-subdued);\n  }\n\n  .table--striped tbody tr:nth-child(even):hover {\n    background: var(--bp-color-surface);\n  }\n\n  .table--striped .row--selected {\n    background: oklch(from var(--bp-color-primary) l c h / 0.15) !important;\n  }\n\n  .table--striped .row--selected:hover {\n    background: oklch(from var(--bp-color-primary) l c h / 0.2) !important;\n  }\n\n  .table--bordered {\n    border: var(--bp-border-width) solid var(--bp-color-border);\n  }\n\n  .table--bordered .cell {\n    border: var(--bp-border-width) solid var(--bp-color-border);\n  }\n\n  /* Sizes */\n  .table--sm .cell {\n    padding: var(--bp-spacing-1) var(--bp-spacing-3);\n    font-size: var(--bp-font-size-xs);\n  }\n\n  .table--sm .row {\n    contain-intrinsic-size: auto 36px;\n  }\n\n  .table--md .cell {\n    padding: var(--bp-spacing-3) var(--bp-spacing-4);\n    font-size: var(--bp-font-size-sm);\n  }\n\n  .table--md .row {\n    contain-intrinsic-size: auto 48px;\n  }\n\n  .table--lg .cell {\n    padding: var(--bp-spacing-4) var(--bp-spacing-5);\n    font-size: var(--bp-font-size-base);\n  }\n\n  .table--lg .row {\n    contain-intrinsic-size: auto 56px;\n  }\n\n  /* Sticky header */\n  .table--sticky-header thead {\n    position: sticky;\n    top: 0;\n    z-index: 1;\n  }\n\n  .table--sticky-header .header-row {\n    box-shadow: var(--bp-shadow-sm);\n  }\n\n  /* Selectable - add pointer cursor */\n  .table--selectable .row {\n    cursor: pointer;\n  }\n\n  /* Loading state */\n  .table--loading {\n    opacity: var(--bp-opacity-disabled);\n    pointer-events: none;\n  }\n\n  /* Empty state */\n  .empty-state {\n    text-align: center;\n    padding: var(--bp-spacing-10);\n    color: var(--bp-color-text-muted);\n    background: var(--bp-color-surface-subdued);\n  }\n\n  .state-content {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    gap: var(--bp-spacing-3);\n    padding: var(--bp-spacing-5);\n  }\n\n  .sort-icon--inactive {\n    opacity: 0.4;\n  }\n\n  /* Focus styles for keyboard navigation */\n  .header-cell--sortable: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  .row:focus-visible {\n    outline: var(--bp-focus-width) var(--bp-focus-style) var(--bp-color-focus);\n    outline-offset: calc(-1 * var(--bp-focus-offset));\n  }\n\n  .cell--checkbox input[type='checkbox']: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  /* Reduced motion */\n  @media (prefers-reduced-motion: reduce) {\n    .row,\n    .header-cell--sortable,\n    .sort-icon {\n      transition: none;\n    }\n\n    .header-cell--sortable:active {\n      transform: none;\n    }\n\n    .header-cell--sortable::after {\n      transition: none;\n    }\n  }\n`;\n","import { LitElement, html, nothing, TemplateResult, PropertyValues } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { repeat } from 'lit/directives/repeat.js';\nimport { tableStyles } from './table.style.js';\nimport { memoizeOne } from '../../utilities/memoize.js';\nimport { booleanConverter } from '../../utilities/boolean-converter.js';\nimport { chevronUpSvg } from '../icon/icons/entries/chevron-up.js';\nimport { chevronDownSvg } from '../icon/icons/entries/chevron-down.js';\nimport '../icon/icon.js';\n\nexport type TableVariant = 'default' | 'striped' | 'bordered';\nexport type TableSize = 'sm' | 'md' | 'lg';\nexport type TableSortDirection = 'asc' | 'desc' | 'none';\n\n/**\n * Column definition for the table\n */\nexport interface TableColumn {\n  /** Unique key for the column (matches data property) */\n  key: string;\n  /** Header label for the column */\n  label: string;\n  /** Whether this column is sortable */\n  sortable?: boolean;\n  /** Text alignment */\n  align?: 'left' | 'center' | 'right';\n  /** Fixed width for the column */\n  width?: string;\n  /** Custom render function for cell content */\n  render?: (value: unknown, row: TableRow) => TemplateResult | string;\n}\n\n/**\n * Row data for the table\n */\nexport interface TableRow {\n  /** Unique identifier for the row */\n  id: string | number;\n  /** Row data keyed by column key */\n  [key: string]: unknown;\n}\n\n/**\n * Sort state for the table\n */\nexport interface TableSortState {\n  /** Column key being sorted */\n  column: string;\n  /** Sort direction */\n  direction: TableSortDirection;\n}\n\n/**\n * A data table component for displaying tabular data with sorting and selection.\n *\n * @element bp-table\n *\n * @property {TableColumn[]} columns - Array of column definitions\n * @property {TableRow[]} rows - Array of row data objects\n * @property {TableVariant} variant - Visual style variant\n * @property {TableSize} size - Size of the table cells\n * @property {boolean} selectable - Whether rows can be selected\n * @property {boolean} multiSelect - Whether multiple rows can be selected\n * @property {(string|number)[]} selectedRows - Array of selected row IDs\n * @property {TableSortState} sortState - Current sort state\n * @property {boolean} stickyHeader - Whether the header sticks on scroll\n * @property {boolean} hoverable - Whether rows highlight on hover\n * @property {boolean} loading - Whether the table is in loading state\n *\n * @fires bp-sort - Fired when a sortable column header is clicked\n * @fires bp-select - Fired when row selection changes\n * @fires bp-row-click - Fired when a row is clicked\n *\n * @slot empty - Content to show when table has no data\n * @slot loading - Content to show when table is loading\n *\n * @csspart table - The table element\n * @csspart thead - The table header section\n * @csspart tbody - The table body section\n * @csspart header-row - A header row\n * @csspart header-cell - A header cell\n * @csspart row - A data row\n * @csspart cell - A data cell\n * @csspart checkbox - Selection checkbox\n * @csspart sort-icon - Sort direction icon\n * @csspart empty-state - Empty state container\n */\n@customElement('bp-table')\nexport class BpTable extends LitElement {\n  /** Array of column definitions */\n  @property({ type: Array }) declare columns: TableColumn[];\n\n  /** Array of row data objects */\n  @property({ type: Array }) declare rows: TableRow[];\n\n  /** Visual style variant */\n  @property({\n    type: String,\n    reflect: true,\n    converter: {\n      fromAttribute: (value: string | null) => {\n        const valid: TableVariant[] = ['default', 'striped', 'bordered'];\n        return value && valid.includes(value as TableVariant)\n          ? (value as TableVariant)\n          : 'default';\n      },\n    },\n  })\n  declare variant: TableVariant;\n\n  /** Size of the table cells */\n  @property({\n    type: String,\n    reflect: true,\n    converter: {\n      fromAttribute: (value: string | null) => {\n        const valid: TableSize[] = ['sm', 'md', 'lg'];\n        return value && valid.includes(value as TableSize)\n          ? (value as TableSize)\n          : 'md';\n      },\n    },\n  })\n  declare size: TableSize;\n\n  /** Whether rows can be selected */\n  @property({ type: Boolean, reflect: true }) declare selectable: boolean;\n\n  /** Whether multiple rows can be selected */\n  @property({ type: Boolean, reflect: true }) declare multiSelect: boolean;\n\n  /** Array of selected row IDs */\n  @property({ type: Array }) declare selectedRows: (string | number)[];\n\n  /** Current sort state */\n  @property({ type: Object }) declare sortState: TableSortState | null;\n\n  /** Whether the header sticks on scroll */\n  @property({ type: Boolean, reflect: true, attribute: 'sticky-header' })\n  declare stickyHeader: boolean;\n\n  /** Whether rows highlight on hover */\n  @property({ converter: booleanConverter, reflect: true })\n  declare hoverable: boolean;\n\n  /** Whether the table is in loading state */\n  @property({ type: Boolean, reflect: true }) declare loading: boolean;\n\n  @state() private allSelected = false;\n\n  /**\n   * Properties that only affect visual styling, not rendered structure.\n   * Changes to only these properties can skip a full re-render.\n   */\n  private static readonly VISUAL_ONLY_PROPS = new Set([\n    'hoverable',\n    'stickyHeader',\n  ]);\n\n  static styles = [tableStyles];\n\n  constructor() {\n    super();\n    this.columns = [];\n    this.rows = [];\n    this.variant = 'default';\n    this.size = 'md';\n    this.selectable = false;\n    this.multiSelect = false;\n    this.selectedRows = [];\n    this.sortState = null;\n    this.stickyHeader = false;\n    this.hoverable = true;\n    this.loading = false;\n  }\n\n  protected shouldUpdate(changedProperties: PropertyValues): boolean {\n    // If all changed properties are visual-only, skip the update.\n    // Be conservative: return true if any non-visual property changed.\n    for (const key of changedProperties.keys()) {\n      if (!BpTable.VISUAL_ONLY_PROPS.has(key as string)) {\n        return true;\n      }\n    }\n    // All changes are visual-only — still need to update for CSS class changes\n    return true;\n  }\n\n  updated(changedProperties: Map<string, unknown>): void {\n    if (\n      changedProperties.has('selectedRows') ||\n      changedProperties.has('rows')\n    ) {\n      this.allSelected =\n        this.rows.length > 0 && this.selectedRows.length === this.rows.length;\n    }\n  }\n\n  /**\n   * Memoized sorted rows computation.\n   * Only recomputes when rows or sortState references change.\n   */\n  private computeSortedRows = memoizeOne(\n    (rows: TableRow[], sortState: TableSortState | null): TableRow[] => {\n      if (!sortState || sortState.direction === 'none') {\n        return rows;\n      }\n\n      const { column, direction } = sortState;\n      return [...rows].sort((a, b) => {\n        const aVal = a[column];\n        const bVal = b[column];\n\n        if (aVal === bVal) return 0;\n        if (aVal === null || aVal === undefined) return 1;\n        if (bVal === null || bVal === undefined) return -1;\n\n        let comparison = 0;\n        if (typeof aVal === 'string' && typeof bVal === 'string') {\n          comparison = aVal.localeCompare(bVal);\n        } else if (typeof aVal === 'number' && typeof bVal === 'number') {\n          comparison = aVal - bVal;\n        } else {\n          comparison = String(aVal).localeCompare(String(bVal));\n        }\n\n        return direction === 'desc' ? -comparison : comparison;\n      });\n    }\n  );\n\n  /**\n   * Get sorted rows based on current sort state (memoized).\n   */\n  private get sortedRows(): TableRow[] {\n    return this.computeSortedRows(this.rows, this.sortState);\n  }\n\n  /**\n   * Handles click on sortable column header.\n   * Cycles through sort directions: asc → desc → none.\n   * Manages focus on header after sort completes.\n   */\n  private handleHeaderClick(column: TableColumn, event: Event) {\n    if (!column.sortable) return;\n\n    let direction: TableSortDirection = 'asc';\n    if (this.sortState?.column === column.key) {\n      if (this.sortState.direction === 'asc') {\n        direction = 'desc';\n      } else if (this.sortState.direction === 'desc') {\n        direction = 'none';\n      }\n    }\n\n    this.sortState = { column: column.key, direction };\n    this.dispatchEvent(\n      new CustomEvent('bp-sort', {\n        detail: { column: column.key, direction },\n        bubbles: true,\n        composed: true,\n      })\n    );\n\n    // Focus management: focus header after sort completes\n    this.updateComplete.then(() => {\n      (event.target as HTMLElement)?.focus();\n    });\n  }\n\n  /**\n   * Handles click events on table rows.\n   * Dispatches bp-row-click event and toggles selection if selectable.\n   */\n  private handleRowClick(row: TableRow, event: Event) {\n    this.dispatchEvent(\n      new CustomEvent('bp-row-click', {\n        detail: { row, originalEvent: event },\n        bubbles: true,\n        composed: true,\n      })\n    );\n\n    if (this.selectable) {\n      this.toggleRowSelection(row);\n    }\n  }\n\n  /**\n   * Handles keyboard events on table rows.\n   * Triggers selection on Enter or Space key press when selectable.\n   */\n  private handleRowKeyDown(row: TableRow, event: KeyboardEvent) {\n    if (!this.selectable) return;\n\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault();\n      this.toggleRowSelection(row);\n    }\n  }\n\n  /**\n   * Toggles selection state for a row.\n   * Respects multiSelect setting for single vs multiple selection.\n   */\n  private toggleRowSelection(row: TableRow) {\n    const rowId = row.id;\n    const isSelected = this.selectedRows.includes(rowId);\n\n    let newSelection: (string | number)[];\n    if (this.multiSelect) {\n      newSelection = isSelected\n        ? this.selectedRows.filter((id) => id !== rowId)\n        : [...this.selectedRows, rowId];\n    } else {\n      newSelection = isSelected ? [] : [rowId];\n    }\n\n    this.selectedRows = newSelection;\n    this.dispatchEvent(\n      new CustomEvent('bp-select', {\n        detail: { selectedRows: newSelection, row, selected: !isSelected },\n        bubbles: true,\n        composed: true,\n      })\n    );\n  }\n\n  /**\n   * Handles select all checkbox toggle.\n   * Selects or deselects all rows based on current state.\n   */\n  private handleSelectAll() {\n    if (this.allSelected) {\n      this.selectedRows = [];\n    } else {\n      this.selectedRows = this.rows.map((row) => row.id);\n    }\n    this.dispatchEvent(\n      new CustomEvent('bp-select', {\n        detail: {\n          selectedRows: this.selectedRows,\n          selectAll: !this.allSelected,\n        },\n        bubbles: true,\n        composed: true,\n      })\n    );\n  }\n\n  /**\n   * Handles checkbox click events.\n   * Stops propagation only on the checkbox itself to prevent row click.\n   */\n  private handleCheckboxClick(event: Event, row?: TableRow) {\n    // Only stop propagation on the checkbox to prevent triggering row click\n    if (event.target instanceof HTMLInputElement) {\n      event.stopPropagation();\n    }\n    if (row) {\n      this.toggleRowSelection(row);\n    } else {\n      this.handleSelectAll();\n    }\n  }\n\n  /** Select all rows */\n  selectAll() {\n    this.selectedRows = this.rows.map((row) => row.id);\n    this.dispatchEvent(\n      new CustomEvent('bp-select', {\n        detail: { selectedRows: this.selectedRows, selectAll: true },\n        bubbles: true,\n        composed: true,\n      })\n    );\n  }\n\n  /** Deselect all rows */\n  deselectAll() {\n    this.selectedRows = [];\n    this.dispatchEvent(\n      new CustomEvent('bp-select', {\n        detail: { selectedRows: [], selectAll: false },\n        bubbles: true,\n        composed: true,\n      })\n    );\n  }\n\n  /** Clear sort state */\n  clearSort() {\n    this.sortState = null;\n  }\n\n  /**\n   * Renders the sort icon for sortable columns.\n   * Shows chevron-up for ascending, chevron-down for descending, unsorted icon otherwise.\n   */\n  private renderSortIcon(column: TableColumn) {\n    if (!column.sortable) return nothing;\n\n    const isActive = this.sortState?.column === column.key;\n    const direction = isActive ? this.sortState?.direction : 'none';\n\n    const iconSvg =\n      direction === 'asc'\n        ? chevronUpSvg\n        : direction === 'desc'\n          ? chevronDownSvg\n          : chevronUpSvg;\n\n    const iconClasses = {\n      'sort-icon': true,\n      'sort-icon--active': isActive && direction !== 'none',\n      'sort-icon--inactive': direction === 'none',\n    };\n\n    return html`\n      <span class=${classMap(iconClasses)} part=\"sort-icon\" aria-hidden=\"true\">\n        <bp-icon .svg=${iconSvg} size=\"sm\"></bp-icon>\n      </span>\n    `;\n  }\n\n  /**\n   * Renders the table header with column labels and sort icons.\n   */\n  private renderHeader() {\n    return html`\n      <thead part=\"thead\">\n        <tr class=\"header-row\" part=\"header-row\">\n          ${this.selectable && this.multiSelect\n            ? html`\n                <th class=\"cell cell--checkbox\" part=\"header-cell\">\n                  <input\n                    type=\"checkbox\"\n                    part=\"checkbox\"\n                    .checked=${this.allSelected}\n                    .indeterminate=${this.selectedRows.length > 0 &&\n                    !this.allSelected}\n                    @click=${(e: Event) => this.handleCheckboxClick(e)}\n                    aria-label=\"Select all rows\"\n                  />\n                </th>\n              `\n            : this.selectable\n              ? html`<th class=\"cell cell--checkbox\" part=\"header-cell\"></th>`\n              : nothing}\n          ${repeat(\n            this.columns,\n            (column) => column.key,\n            (column) => html`\n              <th\n                class=\"cell header-cell ${column.sortable\n                  ? 'header-cell--sortable'\n                  : ''}\"\n                part=\"header-cell\"\n                style=${column.width ? `width: ${column.width}` : ''}\n                @click=${(e: Event) => this.handleHeaderClick(column, e)}\n                tabindex=${column.sortable ? 0 : -1}\n                @keydown=${(e: KeyboardEvent) => {\n                  if (column.sortable && (e.key === 'Enter' || e.key === ' ')) {\n                    e.preventDefault();\n                    this.handleHeaderClick(column, e);\n                  }\n                }}\n                aria-sort=${this.sortState?.column === column.key\n                  ? this.sortState.direction === 'asc'\n                    ? 'ascending'\n                    : this.sortState.direction === 'desc'\n                      ? 'descending'\n                      : 'none'\n                  : 'none'}\n              >\n                <span\n                  class=\"header-cell__content\"\n                  style=\"justify-content: ${column.align === 'center'\n                    ? 'center'\n                    : column.align === 'right'\n                      ? 'flex-end'\n                      : 'flex-start'}\"\n                >\n                  <span class=\"header-cell__label\">${column.label}</span>\n                  ${this.renderSortIcon(column)}\n                </span>\n              </th>\n            `\n          )}\n        </tr>\n      </thead>\n    `;\n  }\n\n  /**\n   * Renders the table body with rows and cells.\n   * Handles loading and empty states.\n   */\n  private renderBody() {\n    const sortedRows = this.sortedRows;\n\n    if (this.loading) {\n      return html`\n        <tbody part=\"tbody\">\n          <tr>\n            <td\n              colspan=${this.columns.length + (this.selectable ? 1 : 0)}\n              class=\"empty-state\"\n              part=\"empty-state\"\n            >\n              <slot name=\"loading\">\n                <div class=\"state-content\">Loading...</div>\n              </slot>\n            </td>\n          </tr>\n        </tbody>\n      `;\n    }\n\n    if (sortedRows.length === 0) {\n      return html`\n        <tbody part=\"tbody\">\n          <tr>\n            <td\n              colspan=${this.columns.length + (this.selectable ? 1 : 0)}\n              class=\"empty-state\"\n              part=\"empty-state\"\n            >\n              <slot name=\"empty\">\n                <div class=\"state-content\">No data available</div>\n              </slot>\n            </td>\n          </tr>\n        </tbody>\n      `;\n    }\n\n    return html`\n      <tbody part=\"tbody\">\n        ${repeat(\n          sortedRows,\n          (row) => row.id,\n          (row) => {\n            const isSelected = this.selectedRows.includes(row.id);\n            const rowClasses = {\n              row: true,\n              'row--selected': isSelected,\n              'row--hoverable': this.hoverable,\n            };\n\n            return html`\n              <tr\n                class=${classMap(rowClasses)}\n                part=\"row\"\n                @click=${(e: Event) => this.handleRowClick(row, e)}\n                @keydown=${(e: KeyboardEvent) => this.handleRowKeyDown(row, e)}\n                tabindex=${this.selectable ? 0 : -1}\n                aria-selected=${ifDefined(\n                  this.selectable ? (isSelected ? 'true' : 'false') : undefined\n                )}\n              >\n                ${this.selectable\n                  ? html`\n                      <td class=\"cell cell--checkbox\" part=\"cell\">\n                        <input\n                          type=\"checkbox\"\n                          part=\"checkbox\"\n                          .checked=${isSelected}\n                          @click=${(e: Event) =>\n                            this.handleCheckboxClick(e, row)}\n                          aria-label=\"Select row\"\n                        />\n                      </td>\n                    `\n                  : nothing}\n                ${repeat(\n                  this.columns,\n                  (column) => column.key,\n                  (column) => {\n                    const value = row[column.key];\n                    const content = column.render\n                      ? column.render(value, row)\n                      : value;\n\n                    return html`\n                      <td\n                        class=\"cell\"\n                        part=\"cell\"\n                        style=\"text-align: ${column.align || 'left'}\"\n                      >\n                        ${content}\n                      </td>\n                    `;\n                  }\n                )}\n              </tr>\n            `;\n          }\n        )}\n      </tbody>\n    `;\n  }\n\n  render() {\n    const tableClasses = {\n      table: true,\n      [`table--${this.variant}`]: true,\n      [`table--${this.size}`]: true,\n      'table--sticky-header': this.stickyHeader,\n      'table--selectable': this.selectable,\n      'table--loading': this.loading,\n    };\n\n    return html`\n      <div class=\"table-wrapper\">\n        <table\n          class=${classMap(tableClasses)}\n          part=\"table\"\n          role=\"grid\"\n          aria-busy=${this.loading}\n        >\n          ${this.renderHeader()} ${this.renderBody()}\n        </table>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'bp-table': BpTable;\n  }\n}\n"],"names":["tableStyles","css","BpTable","LitElement","memoizeOne","rows","sortState","column","direction","a","b","aVal","bVal","comparison","changedProperties","key","event","row","rowId","isSelected","newSelection","id","nothing","isActive","iconSvg","chevronUpSvg","chevronDownSvg","html","classMap","repeat","e","sortedRows","rowClasses","ifDefined","value","content","tableClasses","__decorateClass","property","booleanConverter","state","customElement"],"mappings":";;;;;;;;;AAEO,MAAMA,IAAcC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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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"}