@krollins/blueprint 0.1.12 → 0.1.13

package/dist/components/multi-select.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"multi-select.js","sources":["../../source/components/multi-select/multi-select.style.ts","../../source/components/multi-select/multi-select.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const multiSelectStyles = css`\n  /* Base styles */\n  :host {\n    display: block;\n    font-family: var(--bp-font-family);\n  }\n\n  .multi-select {\n    position: relative;\n    width: 100%;\n  }\n\n  .multi-select__control {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: var(--bp-spacing-sm);\n    min-height: var(--bp-spacing-10);\n    padding: var(--bp-spacing-xs) var(--bp-spacing-sm);\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    cursor: pointer;\n    transition: border-color var(--bp-transition-fast);\n  }\n\n  .multi-select__control:hover:not(\n      .multi-select--disabled .multi-select__control\n    ) {\n    border-color: var(--bp-color-primary);\n  }\n\n  .multi-select__control:focus-visible {\n    outline: var(--bp-focus-width) solid var(--bp-color-focus);\n    outline-offset: var(--bp-focus-width);\n  }\n\n  .multi-select__value-container {\n    display: flex;\n    flex-wrap: wrap;\n    gap: var(--bp-spacing-xs);\n    flex: 1;\n    min-width: 0;\n  }\n\n  .multi-select__placeholder {\n    color: var(--bp-color-text-muted);\n    user-select: none;\n  }\n\n  .multi-select__tag {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--bp-spacing-xs);\n    padding: var(--bp-spacing-2xs) var(--bp-spacing-xs);\n    background-color: color-mix(\n      in srgb,\n      var(--bp-color-primary) 8%,\n      transparent\n    );\n    color: var(--bp-color-primary);\n    border: none;\n    border-radius: var(--bp-border-radius-md);\n    font-size: var(--bp-font-size-sm);\n    max-width: 100%;\n  }\n\n  .multi-select__tag-label {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  .multi-select__tag-remove {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: var(--bp-spacing-4);\n    height: var(--bp-spacing-4);\n    padding: 0;\n    background: transparent;\n    border: none;\n    border-radius: var(--bp-border-radius-sm);\n    color: var(--bp-color-primary);\n    cursor: pointer;\n    font-size: var(--bp-font-size-lg);\n    line-height: 1;\n    transition: all var(--bp-transition-fast);\n  }\n\n  .multi-select__tag-remove:hover {\n    background-color: color-mix(\n      in srgb,\n      var(--bp-color-primary) 15%,\n      transparent\n    );\n    color: var(--bp-color-primary);\n  }\n\n  .multi-select__tag-remove:disabled {\n    cursor: not-allowed;\n    opacity: 0.5;\n  }\n\n  .multi-select__indicators {\n    display: flex;\n    align-items: center;\n    gap: var(--bp-spacing-xs);\n    flex-shrink: 0;\n  }\n\n  .multi-select__clear {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: var(--bp-spacing-6);\n    height: var(--bp-spacing-6);\n    padding: 0;\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    font-size: var(--bp-font-size-xl);\n    line-height: 1;\n    transition: all var(--bp-transition-fast);\n  }\n\n  .multi-select__clear:hover {\n    background-color: var(--bp-color-surface-subdued);\n    color: var(--bp-color-text);\n  }\n\n  .multi-select__clear:disabled {\n    cursor: not-allowed;\n    opacity: 0.5;\n  }\n\n  .multi-select__dropdown-indicator {\n    color: var(--bp-color-text-muted);\n    font-size: var(--bp-font-size-xs);\n    transition: transform var(--bp-transition-fast);\n    user-select: none;\n  }\n\n  .multi-select--open .multi-select__dropdown-indicator {\n    transform: rotate(180deg);\n  }\n\n  .multi-select__dropdown {\n    position: absolute;\n    top: calc(100% + var(--bp-spacing-xs));\n    left: 0;\n    right: 0;\n    z-index: var(--bp-z-dropdown);\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    box-shadow: var(--bp-shadow-md);\n    max-height: calc(var(--bp-spacing-10) * 6);\n    overflow-y: auto;\n    opacity: 0;\n    visibility: hidden;\n    transform: translateY(calc(-1 * var(--bp-spacing-md)));\n    transition:\n      opacity var(--bp-transition-fast),\n      transform var(--bp-transition-fast),\n      visibility var(--bp-transition-fast);\n    contain: layout style paint;\n  }\n\n  .multi-select--open .multi-select__dropdown {\n    opacity: 1;\n    visibility: visible;\n    transform: translateY(0);\n  }\n\n  .multi-select__options {\n    list-style: none;\n    margin: 0;\n    padding: var(--bp-spacing-2xs);\n  }\n\n  .multi-select__option {\n    display: flex;\n    align-items: center;\n    gap: var(--bp-spacing-sm);\n    padding: var(--bp-spacing-sm) var(--bp-spacing-md);\n    cursor: pointer;\n    border-radius: var(--bp-border-radius-md);\n    transition:\n      background-color var(--bp-transition-fast),\n      color var(--bp-transition-fast);\n  }\n\n  .multi-select__option:hover {\n    background-color: var(--bp-color-surface-elevated);\n  }\n\n  .multi-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  .multi-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  }\n\n  .multi-select__option--selected:hover {\n    background-color: color-mix(\n      in srgb,\n      var(--bp-color-primary) 12%,\n      transparent\n    );\n  }\n\n  .multi-select__option--empty {\n    color: var(--bp-color-text-muted);\n    cursor: default;\n    text-align: center;\n    padding: var(--bp-spacing-xl) var(--bp-spacing-lg);\n    font-style: italic;\n  }\n\n  .multi-select__checkbox {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: var(--bp-spacing-4);\n    height: var(--bp-spacing-4);\n    border: var(--bp-border-width) solid var(--bp-color-border);\n    border-radius: var(--bp-border-radius-sm);\n    font-size: var(--bp-font-size-xs);\n    flex-shrink: 0;\n    transition: all var(--bp-transition-fast);\n  }\n\n  .multi-select__option--selected .multi-select__checkbox {\n    border-color: var(--bp-color-primary);\n    background-color: var(--bp-color-primary);\n    color: var(--bp-color-text-inverse);\n  }\n\n  .multi-select__option-label {\n    flex: 1;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  /* Sizes */\n  .multi-select--sm .multi-select__control {\n    min-height: var(--bp-spacing-8);\n    padding: var(--bp-spacing-2xs) var(--bp-spacing-xs);\n    font-size: var(--bp-font-size-sm);\n  }\n\n  .multi-select--sm .multi-select__tag {\n    padding: var(--bp-spacing-0-5) var(--bp-spacing-2xs);\n    font-size: var(--bp-font-size-xs);\n  }\n\n  .multi-select--lg .multi-select__control {\n    min-height: var(--bp-spacing-12);\n    padding: var(--bp-spacing-sm) var(--bp-spacing-md);\n    font-size: var(--bp-font-size-lg);\n  }\n\n  .multi-select--lg .multi-select__tag {\n    padding: var(--bp-spacing-xs) var(--bp-spacing-sm);\n    font-size: var(--bp-font-size-base);\n  }\n\n  /* Variants */\n  .multi-select--default .multi-select__control {\n    border-color: var(--bp-color-border);\n  }\n\n  .multi-select--success .multi-select__control {\n    border-color: var(--bp-color-success);\n  }\n\n  .multi-select--error .multi-select__control {\n    border-color: var(--bp-color-error);\n  }\n\n  .multi-select--warning .multi-select__control {\n    border-color: var(--bp-color-warning);\n  }\n\n  .multi-select--info .multi-select__control {\n    border-color: var(--bp-color-info);\n  }\n\n  .multi-select--success\n    .multi-select__control:hover:not(\n      .multi-select--disabled .multi-select__control\n    ) {\n    border-color: var(--bp-color-success);\n  }\n\n  .multi-select--error\n    .multi-select__control:hover:not(\n      .multi-select--disabled .multi-select__control\n    ) {\n    border-color: var(--bp-color-error);\n  }\n\n  .multi-select--warning\n    .multi-select__control:hover:not(\n      .multi-select--disabled .multi-select__control\n    ) {\n    border-color: var(--bp-color-warning);\n  }\n\n  .multi-select--info\n    .multi-select__control:hover:not(\n      .multi-select--disabled .multi-select__control\n    ) {\n    border-color: var(--bp-color-info);\n  }\n\n  /* States */\n  .multi-select--disabled .multi-select__control {\n    background-color: var(--bp-color-surface-subdued);\n    cursor: not-allowed;\n    opacity: 0.6;\n  }\n\n  .multi-select--disabled .multi-select__placeholder {\n    color: var(--bp-color-text-muted);\n  }\n\n  /* Hide slot */\n  slot {\n    display: none;\n  }\n\n  /* Hide hidden inputs */\n  input[type='hidden'] {\n    display: none;\n  }\n`;\n","import { LitElement, html, nothing } from 'lit';\r\nimport { customElement, property, state } from 'lit/decorators.js';\r\nimport { classMap } from 'lit/directives/class-map.js';\r\nimport { repeat } from 'lit/directives/repeat.js';\r\nimport { multiSelectStyles } from './multi-select.style.js';\r\nimport { memoizeOne } from '../../utilities/memoize.js';\r\nimport { booleanConverter } from '../../utilities/boolean-converter.js';\r\n\r\nexport type MultiSelectSize = 'sm' | 'md' | 'lg';\r\nexport type MultiSelectVariant =\r\n  | 'default'\r\n  | 'success'\r\n  | 'error'\r\n  | 'warning'\r\n  | 'info';\r\n\r\nexport interface MultiSelectOption {\r\n  value: string;\r\n  label: string;\r\n}\r\n\r\n@customElement('bp-multi-select')\r\nexport class BpMultiSelect extends LitElement {\r\n  /** The current selected values as an array */\r\n  @property({ type: Array }) declare value: string[];\r\n\r\n  /** Name attribute for form submission */\r\n  @property({ type: String }) declare name: string;\r\n\r\n  /** Placeholder text when no values are selected */\r\n  @property({ type: String }) declare placeholder: string;\r\n\r\n  /** Whether the multi-select is disabled */\r\n  @property({ type: Boolean, reflect: true }) declare disabled: boolean;\r\n\r\n  /** Whether the multi-select is required */\r\n  @property({ type: Boolean, reflect: true }) declare required: boolean;\r\n\r\n  /** Size variant of the multi-select */\r\n  @property({ type: String, reflect: true }) declare size: MultiSelectSize;\r\n\r\n  /** Visual variant for validation states */\r\n  @property({ type: String, reflect: true })\r\n  declare variant: MultiSelectVariant;\r\n\r\n  /** Maximum number of selections allowed (0 = unlimited) */\r\n  @property({ type: Number, attribute: 'max-selections' })\r\n  declare maxSelections: number;\r\n\r\n  /** Whether to show a clear all button */\r\n  @property({ converter: booleanConverter }) declare clearable: boolean;\r\n\r\n  /** Whether the dropdown is currently open */\r\n  @state() private isOpen = false;\r\n\r\n  /** Index of the focused option for keyboard navigation */\r\n  @state() private focusedIndex = -1;\r\n\r\n  /** Cached options from slotted elements */\r\n  @state() private cachedOptions: MultiSelectOption[] = [];\r\n\r\n  /**\r\n   * Memoized label lookup map for efficient tag rendering.\r\n   * Only recomputes when cachedOptions reference changes.\r\n   */\r\n  private computeLabelMap = memoizeOne(\r\n    (options: MultiSelectOption[]): Map<string, string> => {\r\n      const map = new Map<string, string>();\r\n      for (const opt of options) {\r\n        map.set(opt.value, opt.label);\r\n      }\r\n      return map;\r\n    }\r\n  );\r\n\r\n  static styles = [multiSelectStyles];\r\n\r\n  constructor() {\r\n    super();\r\n    this.value = [];\r\n    this.name = '';\r\n    this.placeholder = 'Select options';\r\n    this.disabled = false;\r\n    this.required = false;\r\n    this.size = 'md';\r\n    this.variant = 'default';\r\n    this.maxSelections = 0;\r\n    this.clearable = true;\r\n  }\r\n\r\n  connectedCallback() {\r\n    super.connectedCallback();\r\n    document.addEventListener('click', this.handleDocumentClick, {\r\n      passive: true,\r\n    });\r\n    // Initialize cached options and pre-selected values after first render\r\n    this.updateComplete.then(() => {\r\n      this.cachedOptions = this.getOptions();\r\n      this.initializeSelectedValues();\r\n    });\r\n  }\r\n\r\n  disconnectedCallback() {\r\n    super.disconnectedCallback();\r\n    document.removeEventListener('click', this.handleDocumentClick, {\r\n      passive: true,\r\n    } as EventListenerOptions);\r\n  }\r\n\r\n  private handleDocumentClick = (event: MouseEvent) => {\r\n    if (!this.contains(event.target as globalThis.Node)) {\r\n      this.isOpen = false;\r\n      this.focusedIndex = -1;\r\n    }\r\n  };\r\n\r\n  private handleToggle = (event?: Event) => {\r\n    event?.stopPropagation();\r\n    if (this.disabled) return;\r\n    this.isOpen = !this.isOpen;\r\n    if (this.isOpen) {\r\n      this.focusedIndex = 0;\r\n    }\r\n  };\r\n\r\n  private getOptions(): MultiSelectOption[] {\r\n    const slot = this.shadowRoot?.querySelector('slot');\r\n    const assignedElements = slot?.assignedElements() || [];\r\n    const options = assignedElements.filter(\r\n      (el): el is globalThis.HTMLOptionElement => el.tagName === 'OPTION'\r\n    );\r\n\r\n    return options.map((option) => ({\r\n      value: option.value || option.textContent || '',\r\n      label: option.textContent || '',\r\n    }));\r\n  }\r\n\r\n  /**\r\n   * Handle slot changes by refreshing the cached options.\r\n   */\r\n  private handleSlotChange = () => {\r\n    this.cachedOptions = this.getOptions();\r\n    this.initializeSelectedValues();\r\n  };\r\n\r\n  /**\r\n   * Read the `selected` attribute from slotted <option> elements\r\n   * and set the initial value array if no values are already set.\r\n   */\r\n  private initializeSelectedValues() {\r\n    if (this.value.length > 0) return;\r\n\r\n    const slot = this.shadowRoot?.querySelector('slot');\r\n    const assignedElements = slot?.assignedElements() || [];\r\n    const selectedValues = assignedElements\r\n      .filter(\r\n        (el): el is globalThis.HTMLOptionElement =>\r\n          el.tagName === 'OPTION' && el.hasAttribute('selected')\r\n      )\r\n      .map((el) => el.value || el.textContent || '');\r\n\r\n    if (selectedValues.length > 0) {\r\n      this.value = selectedValues;\r\n    }\r\n  }\r\n\r\n  private isSelected(value: string): boolean {\r\n    return this.value.includes(value);\r\n  }\r\n\r\n  private dispatchChangeEvent(newValue: string[], previousValue: string[]) {\r\n    this.dispatchEvent(\r\n      new CustomEvent('bp-change', {\r\n        detail: {\r\n          value: newValue,\r\n          previousValue,\r\n        },\r\n        bubbles: true,\r\n        composed: true,\r\n      })\r\n    );\r\n  }\r\n\r\n  private handleOptionClick = (option: MultiSelectOption) => {\r\n    if (this.disabled) return;\r\n\r\n    const previousValue = [...this.value];\r\n    let newValue: string[];\r\n\r\n    if (this.isSelected(option.value)) {\r\n      // Deselect — but prevent removing the last item when not clearable\r\n      newValue = this.value.filter((v) => v !== option.value);\r\n      if (!this.clearable && newValue.length === 0) {\r\n        return;\r\n      }\r\n    } else {\r\n      // Select (check max selections)\r\n      if (this.maxSelections > 0 && this.value.length >= this.maxSelections) {\r\n        return;\r\n      }\r\n      newValue = [...this.value, option.value];\r\n    }\r\n\r\n    this.value = newValue;\r\n    this.dispatchChangeEvent(newValue, previousValue);\r\n  };\r\n\r\n  private handleRemoveTag = (value: string, event: Event) => {\r\n    event.stopPropagation();\r\n    if (this.disabled) return;\r\n\r\n    const previousValue = [...this.value];\r\n    const newValue = this.value.filter((v) => v !== value);\r\n    this.value = newValue;\r\n    this.dispatchChangeEvent(newValue, previousValue);\r\n  };\r\n\r\n  private handleClearAll = (event: Event) => {\r\n    event.stopPropagation();\r\n    if (this.disabled) return;\r\n\r\n    const previousValue = [...this.value];\r\n    const newValue: string[] = [];\r\n    this.value = newValue;\r\n    this.dispatchChangeEvent(newValue, previousValue);\r\n  };\r\n\r\n  private handleKeyDown = (event: globalThis.KeyboardEvent) => {\r\n    if (this.disabled) return;\r\n\r\n    const options = this.cachedOptions;\r\n\r\n    switch (event.key) {\r\n      case 'Enter':\r\n      case ' ':\r\n        event.preventDefault();\r\n        if (this.isOpen && this.focusedIndex >= 0) {\r\n          const option = options[this.focusedIndex];\r\n          if (option) {\r\n            this.handleOptionClick(option);\r\n          }\r\n        } else {\r\n          this.handleToggle();\r\n        }\r\n        break;\r\n      case 'Escape':\r\n        event.preventDefault();\r\n        this.isOpen = false;\r\n        this.focusedIndex = -1;\r\n        break;\r\n      case 'ArrowDown':\r\n        event.preventDefault();\r\n        if (!this.isOpen) {\r\n          this.isOpen = true;\r\n          this.focusedIndex = 0;\r\n        } else {\r\n          this.focusedIndex = Math.min(\r\n            this.focusedIndex + 1,\r\n            options.length - 1\r\n          );\r\n        }\r\n        break;\r\n      case 'ArrowUp':\r\n        event.preventDefault();\r\n        if (!this.isOpen) {\r\n          this.isOpen = true;\r\n          this.focusedIndex = options.length - 1;\r\n        } else {\r\n          this.focusedIndex = Math.max(this.focusedIndex - 1, 0);\r\n        }\r\n        break;\r\n    }\r\n  };\r\n\r\n  private getLabelForValue(value: string): string {\r\n    const labelMap = this.computeLabelMap(this.cachedOptions);\r\n    return labelMap.get(value) || value;\r\n  }\r\n\r\n  private renderDropdown() {\r\n    const options = this.cachedOptions;\r\n\r\n    return html`\r\n      <div class=\"multi-select__dropdown\" part=\"dropdown\">\r\n        <ul\r\n          class=\"multi-select__options\"\r\n          role=\"listbox\"\r\n          aria-multiselectable=\"true\"\r\n        >\r\n          ${options.length === 0\r\n            ? html`<li class=\"multi-select__option multi-select__option--empty\">\r\n                No options available\r\n              </li>`\r\n            : repeat(\r\n                options,\r\n                (opt) => opt.value,\r\n                (opt, index) => {\r\n                  const selected = this.isSelected(opt.value);\r\n                  const focused = index === this.focusedIndex;\r\n                  return html`\r\n                    <li\r\n                      class=${classMap({\r\n                        'multi-select__option': true,\r\n                        'multi-select__option--selected': selected,\r\n                        'multi-select__option--focused': focused,\r\n                      })}\r\n                      role=\"option\"\r\n                      aria-selected=${selected}\r\n                      @click=${() => this.handleOptionClick(opt)}\r\n                      part=\"option ${selected ? 'option-selected' : ''}\"\r\n                    >\r\n                      <span class=\"multi-select__checkbox\">\r\n                        ${selected ? '\\u2713' : ''}\r\n                      </span>\r\n                      <span class=\"multi-select__option-label\"\r\n                        >${opt.label}</span\r\n                      >\r\n                    </li>\r\n                  `;\r\n                }\r\n              )}\r\n        </ul>\r\n      </div>\r\n    `;\r\n  }\r\n\r\n  render() {\r\n    const hasSelection = this.value.length > 0;\r\n\r\n    return html`\r\n      <div\r\n        class=${classMap({\r\n          'multi-select': true,\r\n          'multi-select--open': this.isOpen,\r\n          'multi-select--disabled': this.disabled,\r\n          [`multi-select--${this.size}`]: true,\r\n          [`multi-select--${this.variant}`]: true,\r\n        })}\r\n      >\r\n        <div\r\n          class=\"multi-select__control\"\r\n          @click=${this.handleToggle}\r\n          @keydown=${this.handleKeyDown}\r\n          tabindex=${this.disabled ? '-1' : '0'}\r\n          role=\"combobox\"\r\n          aria-haspopup=\"listbox\"\r\n          aria-expanded=${this.isOpen}\r\n          aria-disabled=${this.disabled}\r\n          part=\"control\"\r\n        >\r\n          <div class=\"multi-select__value-container\">\r\n            ${hasSelection\r\n              ? repeat(\r\n                  this.value,\r\n                  (v) => v,\r\n                  (v) => html`\r\n                    <span class=\"multi-select__tag\" part=\"tag\">\r\n                      <span class=\"multi-select__tag-label\">\r\n                        ${this.getLabelForValue(v)}\r\n                      </span>\r\n                      ${this.clearable\r\n                        ? html`<button\r\n                            type=\"button\"\r\n                            class=\"multi-select__tag-remove\"\r\n                            @click=${(e: Event) => this.handleRemoveTag(v, e)}\r\n                            aria-label=\"Remove ${this.getLabelForValue(v)}\"\r\n                            tabindex=\"-1\"\r\n                            ?disabled=${this.disabled}\r\n                          >\r\n                            ×\r\n                          </button>`\r\n                        : nothing}\r\n                    </span>\r\n                  `\r\n                )\r\n              : html`<span class=\"multi-select__placeholder\"\r\n                  >${this.placeholder}</span\r\n                >`}\r\n          </div>\r\n\r\n          <div class=\"multi-select__indicators\">\r\n            ${this.clearable && hasSelection\r\n              ? html`\r\n                  <button\r\n                    type=\"button\"\r\n                    class=\"multi-select__clear\"\r\n                    @click=${this.handleClearAll}\r\n                    aria-label=\"Clear all selections\"\r\n                    tabindex=\"-1\"\r\n                    ?disabled=${this.disabled}\r\n                    part=\"clear-button\"\r\n                  >\r\n                    ×\r\n                  </button>\r\n                `\r\n              : ''}\r\n            <span class=\"multi-select__dropdown-indicator\" part=\"indicator\">\r\n              ▼\r\n            </span>\r\n          </div>\r\n        </div>\r\n\r\n        ${this.isOpen ? this.renderDropdown() : nothing}\r\n\r\n        <!-- Hidden slot for options -->\r\n        <slot @slotchange=${this.handleSlotChange}></slot>\r\n\r\n        <!-- Hidden inputs for form submission -->\r\n        ${this.value.map(\r\n          (v) => html`\r\n            <input type=\"hidden\" name=\"${this.name}\" value=\"${v}\" />\r\n          `\r\n        )}\r\n      </div>\r\n    `;\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    'bp-multi-select': BpMultiSelect;\r\n  }\r\n}\r\n"],"names":["multiSelectStyles","css","BpMultiSelect","LitElement","memoizeOne","options","map","opt","event","option","previousValue","newValue","v","value","el","selectedValues","html","repeat","index","selected","focused","classMap","hasSelection","e","nothing","__decorateClass","property","booleanConverter","state","customElement"],"mappings":";;;;;;AAEO,MAAMA,IAAoBC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;A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"}

package/dist/components/notification.js

@@ -0,0 +1,429 @@
+import { css as h, LitElement as d, html as s, nothing as u } from "lit";
+import { property as n, state as c, customElement as m } from "lit/decorators.js";
+import { b } from "../shared/boolean-converter-XDGfS9LC.js";
+const v = h`
+  /* Base styles */
+  :host {
+    display: block;
+  }
+
+  .notification {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--bp-spacing-3);
+    padding: var(--bp-spacing-4);
+    background-color: var(--bp-color-surface-elevated);
+    border: var(--bp-border-width) solid var(--bp-color-border);
+    border-radius: var(--bp-border-radius-lg);
+    box-shadow: var(--bp-shadow-lg);
+    font-family: var(--bp-font-sans);
+    font-size: var(--bp-font-size-sm);
+    line-height: var(--bp-line-height-normal);
+    color: var(--bp-color-text);
+    max-width: 400px;
+    min-width: 300px;
+    animation: notification-slide-in var(--bp-duration-fast) var(--bp-ease-out);
+  }
+
+  @keyframes notification-slide-in {
+    from {
+      opacity: 0;
+      transform: translateY(calc(-1 * var(--bp-spacing-2)));
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  @keyframes notification-slide-out {
+    from {
+      opacity: 1;
+      transform: translateY(0);
+    }
+    to {
+      opacity: 0;
+      transform: translateY(calc(-1 * var(--bp-spacing-2)));
+    }
+  }
+
+  .notification--exiting {
+    animation: notification-slide-out var(--bp-duration-fast) var(--bp-ease-in)
+      forwards;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .notification {
+      animation: none;
+    }
+
+    .notification--exiting {
+      animation: none;
+      opacity: 0;
+    }
+  }
+
+  /* Icon */
+  .notification__icon {
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .notification__icon svg {
+    width: 100%;
+    height: 100%;
+  }
+
+  /* Content */
+  .notification__content {
+    flex: 1;
+    min-width: 0;
+  }
+
+  .notification__title {
+    font-weight: var(--bp-font-weight-semibold);
+    margin-bottom: var(--bp-spacing-1);
+    color: var(--bp-color-text-strong);
+  }
+
+  .notification__message {
+    color: var(--bp-color-text-muted);
+  }
+
+  /* Action */
+  .notification__action {
+    display: flex;
+    align-items: center;
+    gap: var(--bp-spacing-1);
+  }
+
+  .notification__action:empty {
+    display: none;
+  }
+
+  /* Close button */
+  .notification__close {
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--bp-spacing-11);
+    height: var(--bp-spacing-11);
+    padding: 0;
+    margin: calc(-1 * var(--bp-spacing-2));
+    background: none;
+    border: none;
+    border-radius: var(--bp-border-radius-sm);
+    color: var(--bp-color-text-muted);
+    cursor: pointer;
+    transition:
+      color var(--bp-transition-fast),
+      background-color var(--bp-transition-fast);
+  }
+
+  .notification__close:hover {
+    color: var(--bp-color-text);
+    background-color: var(--bp-color-surface-subdued);
+  }
+
+  .notification__close:focus-visible {
+    outline: var(--bp-focus-width) var(--bp-focus-style) var(--bp-color-focus);
+    outline-offset: var(--bp-focus-offset);
+  }
+
+  .notification__close svg {
+    width: var(--bp-spacing-4);
+    height: var(--bp-spacing-4);
+  }
+
+  /* Variants */
+  .notification--info {
+    border-left: var(--bp-spacing-1) solid var(--bp-color-info);
+  }
+
+  .notification--info .notification__icon {
+    color: var(--bp-color-info);
+  }
+
+  .notification--success {
+    border-left: var(--bp-spacing-1) solid var(--bp-color-success);
+  }
+
+  .notification--success .notification__icon {
+    color: var(--bp-color-success);
+  }
+
+  .notification--warning {
+    border-left: var(--bp-spacing-1) solid var(--bp-color-warning);
+  }
+
+  .notification--warning .notification__icon {
+    color: var(--bp-color-warning);
+  }
+
+  .notification--error {
+    border-left: var(--bp-spacing-1) solid var(--bp-color-error);
+  }
+
+  .notification--error .notification__icon {
+    color: var(--bp-color-error);
+  }
+
+  /* Position variants */
+  .notification--top-left,
+  .notification--top-center,
+  .notification--top-right,
+  .notification--bottom-left,
+  .notification--bottom-center,
+  .notification--bottom-right {
+    position: fixed;
+    z-index: 10000;
+    margin: var(--bp-spacing-4);
+  }
+
+  .notification--top-left {
+    top: 0;
+    left: 0;
+  }
+
+  .notification--top-center {
+    top: 0;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+
+  .notification--top-right {
+    top: 0;
+    right: 0;
+  }
+
+  .notification--bottom-left {
+    bottom: 0;
+    left: 0;
+  }
+
+  .notification--bottom-center {
+    bottom: 0;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+
+  .notification--bottom-right {
+    bottom: 0;
+    right: 0;
+  }
+`;
+var g = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, o = (t, r, l, a) => {
+  for (var e = a > 1 ? void 0 : a ? _(r, l) : r, p = t.length - 1, f; p >= 0; p--)
+    (f = t[p]) && (e = (a ? f(r, l, e) : f(e)) || e);
+  return a && e && g(r, l, e), e;
+};
+let i = class extends d {
+  constructor() {
+    super(), this.autoCloseTimer = null, this.remainingTime = 0, this.timerPaused = !1, this.isExiting = !1, this.variant = "info", this.open = !1, this.closable = !0, this.duration = 0, this.title = "", this.message = "", this.position = "top-right";
+  }
+  updated(t) {
+    t.has("open") && (this.open ? this.handleOpen() : this.handleClose()), t.has("duration") && this.open && this.startAutoCloseTimer();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.clearAutoCloseTimer();
+  }
+  /** Show the notification */
+  show() {
+    this.open || (this.open = !0);
+  }
+  /** Hide the notification */
+  hide() {
+    this.open && (this.open = !1);
+  }
+  /**
+   * Handles the notification opening.
+   * Dispatches bp-show event, starts auto-close timer, and manages focus.
+   */
+  handleOpen() {
+    this.isExiting = !1, this.dispatchEvent(
+      new CustomEvent("bp-show", { bubbles: !0, composed: !0 })
+    ), this.startAutoCloseTimer(), this.updateComplete.then(() => {
+      this.closable && this.shadowRoot?.querySelector(
+        ".notification__close"
+      )?.focus();
+    });
+  }
+  /**
+   * Handles the notification closing.
+   * Clears auto-close timer and dispatches bp-hide event.
+   */
+  handleClose() {
+    this.clearAutoCloseTimer(), this.dispatchEvent(
+      new CustomEvent("bp-hide", { bubbles: !0, composed: !0 })
+    );
+  }
+  /**
+   * Starts the auto-close timer based on the duration property.
+   * Timer can be paused/resumed with pauseAutoCloseTimer/resumeAutoCloseTimer.
+   */
+  startAutoCloseTimer() {
+    this.clearAutoCloseTimer(), this.duration > 0 && !this.timerPaused && (this.remainingTime = this.duration, this.autoCloseTimer = window.setTimeout(() => {
+      this.hide();
+    }, this.duration));
+  }
+  /**
+   * Clears the auto-close timer if it exists.
+   */
+  clearAutoCloseTimer() {
+    this.autoCloseTimer && (window.clearTimeout(this.autoCloseTimer), this.autoCloseTimer = null);
+  }
+  /**
+   * Pauses the auto-close timer when user hovers or focuses.
+   * Allows users to read content or interact with actions.
+   */
+  pauseAutoCloseTimer() {
+    this.autoCloseTimer && this.duration > 0 && (this.timerPaused = !0, window.clearTimeout(this.autoCloseTimer), this.autoCloseTimer = null);
+  }
+  /**
+   * Resumes the auto-close timer with remaining time.
+   */
+  resumeAutoCloseTimer() {
+    this.timerPaused && this.duration > 0 && (this.timerPaused = !1, this.autoCloseTimer = window.setTimeout(() => {
+      this.hide();
+    }, this.remainingTime));
+  }
+  /**
+   * Handles close button click.
+   * Hides notification and dispatches bp-close event.
+   */
+  handleCloseClick() {
+    this.hide(), this.dispatchEvent(
+      new CustomEvent("bp-close", { bubbles: !0, composed: !0 })
+    );
+  }
+  /**
+   * Handles keyboard events.
+   * Closes notification on Escape key if closable.
+   */
+  handleKeydown(t) {
+    t.key === "Escape" && this.closable && this.handleCloseClick();
+  }
+  /**
+   * Returns the default icon for the notification variant.
+   * Uses the bp-icon component for consistency with the design system.
+   */
+  getDefaultIcon() {
+    return s`<bp-icon name=${{
+      success: "check",
+      warning: "warning-circle",
+      error: "cross",
+      info: "info-circle"
+    }[this.variant]} size="md"></bp-icon>`;
+  }
+  render() {
+    return this.open ? s`
+      <div
+        class="notification notification--${this.variant} notification--${this.position} ${this.isExiting ? "notification--exiting" : "notification--entering"}"
+        part="base"
+        role="alert"
+        aria-live=${this.variant === "error" ? "assertive" : "polite"}
+        @keydown=${this.handleKeydown}
+        @mouseenter=${this.pauseAutoCloseTimer}
+        @mouseleave=${this.resumeAutoCloseTimer}
+        @focusin=${this.pauseAutoCloseTimer}
+        @focusout=${this.resumeAutoCloseTimer}
+      >
+        <div class="notification__icon" part="icon">
+          <slot name="icon">${this.getDefaultIcon()}</slot>
+        </div>
+
+        <div class="notification__content" part="content">
+          ${this.title ? s`<div class="notification__title">${this.title}</div>` : u}
+          <div class="notification__message" part="message">
+            ${this.message || s`<slot></slot>`}
+          </div>
+        </div>
+
+        <div class="notification__action" part="action">
+          <slot name="action"></slot>
+        </div>
+
+        ${this.closable ? s`
+              <button
+                type="button"
+                class="notification__close"
+                part="close-button"
+                aria-label="Close notification"
+                @click=${this.handleCloseClick}
+              >
+                <svg
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2"
+                >
+                  <path d="M18 6L6 18M6 6l12 12" />
+                </svg>
+              </button>
+            ` : u}
+      </div>
+    ` : u;
+  }
+};
+i.styles = [v];
+o([
+  n({
+    type: String,
+    reflect: !0,
+    converter: {
+      fromAttribute: (t) => t && ["info", "success", "warning", "error"].includes(t) ? t : "info"
+    }
+  })
+], i.prototype, "variant", 2);
+o([
+  n({ type: Boolean, reflect: !0 })
+], i.prototype, "open", 2);
+o([
+  n({ converter: b, reflect: !0 })
+], i.prototype, "closable", 2);
+o([
+  n({ type: Number })
+], i.prototype, "duration", 2);
+o([
+  n({ type: String })
+], i.prototype, "title", 2);
+o([
+  n({ type: String })
+], i.prototype, "message", 2);
+o([
+  n({
+    type: String,
+    converter: {
+      fromAttribute: (t) => t && [
+        "top-left",
+        "top-center",
+        "top-right",
+        "bottom-left",
+        "bottom-center",
+        "bottom-right"
+      ].includes(t) ? t : "top-right"
+    }
+  })
+], i.prototype, "position", 2);
+o([
+  c()
+], i.prototype, "autoCloseTimer", 2);
+o([
+  c()
+], i.prototype, "remainingTime", 2);
+o([
+  c()
+], i.prototype, "timerPaused", 2);
+o([
+  c()
+], i.prototype, "isExiting", 2);
+i = o([
+  m("bp-notification")
+], i);
+export {
+  i as BpNotification
+};
+//# sourceMappingURL=notification.js.map

package/dist/components/notification.js.map

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