@krollins/blueprint 0.2.3 → 0.3.0

package/dist/shared/multi-select-BuU5RFrR.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"multi-select-BuU5RFrR.js","names":["_decorate","__decorate","renderFieldMessage","fieldMessageStyles","fieldMessageState","booleanConverter","memoizeOne","multiSelectStyles","BpMultiSelect","FormControlMixin","LitElement","map","opt","options","event","previousValue","newValue","option","v","value","el","selectedValues","repeat","selected","focused","index","classMap","message","hasSelection","invalid","nothing","ifDefined","describedBy","e","property","state","customElement"],"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__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  .multi-select__required {\n    color: var(--bp-color-error);\n    margin-left: var(--bp-spacing-xs);\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-input-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-input-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-input-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';\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 { multiSelectStyles } from './multi-select.style.js';\nimport { memoizeOne } from '../../utilities/memoize.js';\nimport { booleanConverter } from '../../utilities/boolean-converter.js';\nimport { FormControlMixin } from '../../utilities/form-control.js';\nimport {\n  fieldMessageState,\n  renderFieldMessage,\n  fieldMessageStyles,\n} from '../../utilities/field-message.js';\n\nexport type MultiSelectSize = 'sm' | 'md' | 'lg';\nexport type MultiSelectVariant =\n  'default' | 'success' | 'error' | 'warning' | 'info';\n\nexport interface MultiSelectOption {\n  value: string;\n  label: string;\n}\n\n@customElement('bp-multi-select')\nexport class BpMultiSelect extends FormControlMixin(LitElement) {\n  /** The current selected values as an array */\n  @property({ type: Array }) 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 multi-select */\n  @property({ type: String, reflect: true }) declare label: string;\n\n  /** Helper text displayed below the multi-select */\n  @property({ type: String }) declare helperText: string;\n\n  /**\n   * Error text. When set, the multi-select is invalid: the message replaces the\n   * helper text, is announced, and the border turns to the error color.\n   */\n  @property({ type: String }) declare errorMessage: string;\n\n  /** Placeholder text when no values are selected */\n  @property({ type: String }) declare placeholder: string;\n\n  /** Whether the multi-select is disabled */\n  @property({ type: Boolean, reflect: true }) declare disabled: boolean;\n\n  /** Whether the multi-select is required */\n  @property({ type: Boolean, reflect: true }) declare required: boolean;\n\n  /** Size variant of the multi-select */\n  @property({ type: String, reflect: true }) declare size: MultiSelectSize;\n\n  /** Visual variant for validation states */\n  @property({ type: String, reflect: true })\n  declare variant: MultiSelectVariant;\n\n  /** Maximum number of selections allowed (0 = unlimited) */\n  @property({ type: Number, attribute: 'max-selections' })\n  declare maxSelections: number;\n\n  /** Whether to show a clear all button */\n  @property({ converter: booleanConverter }) declare clearable: boolean;\n\n  /** Whether the dropdown is currently open */\n  @state() private isOpen = false;\n\n  /** Index of the focused option for keyboard navigation */\n  @state() private focusedIndex = -1;\n\n  /** Cached options from slotted elements */\n  @state() private cachedOptions: MultiSelectOption[] = [];\n\n  /**\n   * Memoized label lookup map for efficient tag rendering.\n   * Only recomputes when cachedOptions reference changes.\n   */\n  private computeLabelMap = memoizeOne(\n    (options: MultiSelectOption[]): Map<string, string> => {\n      const map = new Map<string, string>();\n      for (const opt of options) {\n        map.set(opt.value, opt.label);\n      }\n      return map;\n    }\n  );\n\n  static styles = [fieldMessageStyles, multiSelectStyles];\n\n  constructor() {\n    super();\n    this.value = [];\n    this.name = '';\n    this.label = '';\n    this.helperText = '';\n    this.errorMessage = '';\n    this.placeholder = 'Select options';\n    this.disabled = false;\n    this.required = false;\n    this.size = 'md';\n    this.variant = 'default';\n    this.maxSelections = 0;\n    this.clearable = true;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    document.addEventListener('click', this.handleDocumentClick, {\n      passive: true,\n    });\n    // Initialize cached options and pre-selected values after first render\n    this.updateComplete.then(() => {\n      this.cachedOptions = this.getOptions();\n      this.initializeSelectedValues();\n    });\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    document.removeEventListener('click', this.handleDocumentClick, {\n      passive: true,\n    } as EventListenerOptions);\n  }\n\n  private handleDocumentClick = (event: MouseEvent) => {\n    if (!this.contains(event.target as globalThis.Node)) {\n      this.isOpen = false;\n      this.focusedIndex = -1;\n    }\n  };\n\n  private handleToggle = (event?: Event) => {\n    event?.stopPropagation();\n    if (this.disabled) return;\n    this.isOpen = !this.isOpen;\n    if (this.isOpen) {\n      this.focusedIndex = 0;\n    }\n  };\n\n  private getOptions(): MultiSelectOption[] {\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 options.map((option) => ({\n      value: option.value || option.textContent || '',\n      label: option.textContent || '',\n    }));\n  }\n\n  /**\n   * Handle slot changes by refreshing the cached options.\n   */\n  private handleSlotChange = () => {\n    this.cachedOptions = this.getOptions();\n    this.initializeSelectedValues();\n  };\n\n  /**\n   * Read the `selected` attribute from slotted <option> elements\n   * and set the initial value array if no values are already set.\n   */\n  private initializeSelectedValues() {\n    if (this.value.length > 0) return;\n\n    const slot = this.shadowRoot?.querySelector('slot');\n    const assignedElements = slot?.assignedElements() || [];\n    const selectedValues = assignedElements\n      .filter(\n        (el): el is globalThis.HTMLOptionElement =>\n          el.tagName === 'OPTION' && el.hasAttribute('selected')\n      )\n      .map((el) => el.value || el.textContent || '');\n\n    if (selectedValues.length > 0) {\n      this.value = selectedValues;\n    }\n  }\n\n  private isSelected(value: string): boolean {\n    return this.value.includes(value);\n  }\n\n  private dispatchChangeEvent(newValue: string[], previousValue: string[]) {\n    this.dispatchEvent(\n      new CustomEvent('bp-change', {\n        detail: {\n          value: newValue,\n          previousValue,\n        },\n        bubbles: true,\n        composed: true,\n      })\n    );\n  }\n\n  private handleOptionClick = (option: MultiSelectOption) => {\n    if (this.disabled) return;\n\n    const previousValue = [...this.value];\n    let newValue: string[];\n\n    if (this.isSelected(option.value)) {\n      // Deselect — but prevent removing the last item when not clearable\n      newValue = this.value.filter((v) => v !== option.value);\n      if (!this.clearable && newValue.length === 0) {\n        return;\n      }\n    } else {\n      // Select (check max selections)\n      if (this.maxSelections > 0 && this.value.length >= this.maxSelections) {\n        return;\n      }\n      newValue = [...this.value, option.value];\n    }\n\n    this.value = newValue;\n    this.dispatchChangeEvent(newValue, previousValue);\n  };\n\n  private handleRemoveTag = (value: string, event: Event) => {\n    event.stopPropagation();\n    if (this.disabled) return;\n\n    const previousValue = [...this.value];\n    const newValue = this.value.filter((v) => v !== value);\n    this.value = newValue;\n    this.dispatchChangeEvent(newValue, previousValue);\n  };\n\n  private handleClearAll = (event: Event) => {\n    event.stopPropagation();\n    if (this.disabled) return;\n\n    const previousValue = [...this.value];\n    const newValue: string[] = [];\n    this.value = newValue;\n    this.dispatchChangeEvent(newValue, previousValue);\n  };\n\n  private handleKeyDown = (event: globalThis.KeyboardEvent) => {\n    if (this.disabled) return;\n\n    const options = this.cachedOptions;\n\n    switch (event.key) {\n      case 'Enter':\n      case ' ':\n        event.preventDefault();\n        if (this.isOpen && this.focusedIndex >= 0) {\n          const option = options[this.focusedIndex];\n          if (option) {\n            this.handleOptionClick(option);\n          }\n        } else {\n          this.handleToggle();\n        }\n        break;\n      case 'Escape':\n        event.preventDefault();\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        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        break;\n    }\n  };\n\n  private getLabelForValue(value: string): string {\n    const labelMap = this.computeLabelMap(this.cachedOptions);\n    return labelMap.get(value) || value;\n  }\n\n  private renderDropdown() {\n    const options = this.cachedOptions;\n\n    return html`\n      <div class=\"multi-select__dropdown\" part=\"dropdown\">\n        <ul\n          class=\"multi-select__options\"\n          role=\"listbox\"\n          aria-multiselectable=\"true\"\n        >\n          ${\n            options.length === 0\n              ? html`<li\n                  class=\"multi-select__option multi-select__option--empty\"\n                >\n                  No options available\n                </li>`\n              : repeat(\n                  options,\n                  (opt) => opt.value,\n                  (opt, index) => {\n                    const selected = this.isSelected(opt.value);\n                    const focused = index === this.focusedIndex;\n                    return html`\n                      <li\n                        class=${classMap({\n                          'multi-select__option': true,\n                          'multi-select__option--selected': selected,\n                          'multi-select__option--focused': focused,\n                        })}\n                        role=\"option\"\n                        aria-selected=${selected}\n                        @click=${() => this.handleOptionClick(opt)}\n                        part=\"option ${selected ? 'option-selected' : ''}\"\n                      >\n                        <span class=\"multi-select__checkbox\">\n                          ${selected ? '\\u2713' : ''}\n                        </span>\n                        <span class=\"multi-select__option-label\"\n                          >${opt.label}</span\n                        >\n                      </li>\n                    `;\n                  }\n                )\n          }\n        </ul>\n      </div>\n    `;\n  }\n\n  /** Clicking the label focuses the control, like a native <label>. */\n  private focusControl() {\n    if (this.disabled) return;\n    this.shadowRoot\n      ?.querySelector<HTMLElement>('.multi-select__control')\n      ?.focus();\n  }\n\n  render() {\n    const message = {\n      helperText: this.helperText,\n      errorMessage: this.errorMessage,\n      invalid: this.variant === 'error',\n    };\n    const { invalid, describedBy } = fieldMessageState(message);\n    const hasSelection = this.value.length > 0;\n\n    return html`\n      <div\n        class=${classMap({\n          'multi-select': true,\n          'multi-select--open': this.isOpen,\n          'multi-select--disabled': this.disabled,\n          [`multi-select--${this.size}`]: true,\n          [`multi-select--${invalid ? 'error' : this.variant}`]: true,\n        })}\n      >\n        ${\n          this.label\n            ? html`\n                <label\n                  class=\"multi-select__label\"\n                  id=\"multi-select-label\"\n                  part=\"label\"\n                  @click=${this.focusControl}\n                >\n                  ${this.label}\n                  ${\n                    this.required\n                      ? html`<span\n                          class=\"multi-select__required\"\n                          aria-hidden=\"true\"\n                          >*</span\n                        >`\n                      : nothing\n                  }\n                </label>\n              `\n            : nothing\n        }\n        <div\n          class=\"multi-select__control\"\n          aria-labelledby=${ifDefined(this.label ? 'multi-select-label' : undefined)}\n          aria-required=${this.required ? 'true' : 'false'}\n          @click=${this.handleToggle}\n          @keydown=${this.handleKeyDown}\n          tabindex=${this.disabled ? '-1' : '0'}\n          role=\"combobox\"\n          aria-haspopup=\"listbox\"\n          aria-expanded=${this.isOpen}\n          aria-disabled=${this.disabled}\n          aria-invalid=${invalid ? 'true' : nothing}\n          aria-describedby=${describedBy ?? nothing}\n          part=\"control\"\n        >\n          <div class=\"multi-select__value-container\">\n            ${\n              hasSelection\n                ? repeat(\n                    this.value,\n                    (v) => v,\n                    (v) => html`\n                      <span class=\"multi-select__tag\" part=\"tag\">\n                        <span class=\"multi-select__tag-label\">\n                          ${this.getLabelForValue(v)}\n                        </span>\n                        ${\n                          this.clearable\n                            ? html`<button\n                                type=\"button\"\n                                class=\"multi-select__tag-remove\"\n                                @click=${(e: Event) => this.handleRemoveTag(v, e)}\n                                aria-label=\"Remove ${this.getLabelForValue(v)}\"\n                                tabindex=\"-1\"\n                                ?disabled=${this.disabled}\n                              >\n                                ×\n                              </button>`\n                            : nothing\n                        }\n                      </span>\n                    `\n                  )\n                : html`<span class=\"multi-select__placeholder\"\n                    >${this.placeholder}</span\n                  >`\n            }\n          </div>\n\n          <div class=\"multi-select__indicators\">\n            ${\n              this.clearable && hasSelection\n                ? html`\n                    <button\n                      type=\"button\"\n                      class=\"multi-select__clear\"\n                      @click=${this.handleClearAll}\n                      aria-label=\"Clear all selections\"\n                      tabindex=\"-1\"\n                      ?disabled=${this.disabled}\n                      part=\"clear-button\"\n                    >\n                      ×\n                    </button>\n                  `\n                : ''\n            }\n            <span class=\"multi-select__dropdown-indicator\" part=\"indicator\">\n              ▼\n            </span>\n          </div>\n        </div>\n\n        ${this.isOpen ? this.renderDropdown() : nothing}\n\n        <!-- Hidden slot for options -->\n        <slot @slotchange=${this.handleSlotChange}></slot>\n\n        <!-- Hidden inputs for form submission -->\n        ${this.value.map(\n          (v) => html`\n            <input type=\"hidden\" name=\"${this.name}\" value=\"${v}\" />\n          `\n        )}\n      </div>\n      ${renderFieldMessage(message)}\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'bp-multi-select': BpMultiSelect;\n  }\n}\n"],"mappings":"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"}

package/dist/shared/notification--jDZt64l.js

@@ -0,0 +1,385 @@
+import { t as e } from "./decorate-BJVyhdRd.js";
+import { t } from "./icon-SU3ebQcn.js";
+import n from "../icons/info-circle.js";
+import r from "../icons/warning-circle.js";
+import { crossSvg as i } from "../icons/cross.js";
+import { t as a } from "./boolean-converter-saxBDLhA.js";
+import { checkSvg as o } from "../icons/check.js";
+import { LitElement as s, css as c, html as l, nothing as u } from "lit";
+import { customElement as d, property as f, state as p } from "lit/decorators.js";
+//#region source/components/notification/notification.style.ts
+var m = c`
+  /* 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-family);
+    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;
+    box-sizing: border-box;
+    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;
+    }
+  }
+
+  /* In a stack, fill the stack's width instead of a fixed range */
+  :host([stacked]) .notification {
+    min-width: 0;
+    max-width: none;
+  }
+
+  /* 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: var(--bp-z-popover);
+    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;
+  }
+`, h = class extends s {
+	static {
+		this.dependencies = [t];
+	}
+	static {
+		this.styles = [m];
+	}
+	constructor() {
+		super(), this.autoCloseTimer = null, this.timerStartedAt = 0, 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", this.stacked = !1;
+	}
+	updated(e) {
+		e.has("open") && (this.open ? this.handleOpen() : e.get("open") !== void 0 && this.handleClose()), e.has("duration") && this.open && this.startAutoCloseTimer();
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback(), this.clearAutoCloseTimer();
+	}
+	show() {
+		this.open ||= !0;
+	}
+	hide() {
+		this.open &&= !1;
+	}
+	handleOpen() {
+		this.isExiting = !1, this.dispatchEvent(new CustomEvent("bp-show", {
+			bubbles: !0,
+			composed: !0
+		})), this.startAutoCloseTimer(), this.updateComplete.then(() => {
+			this.closable && !this.stacked && (this.shadowRoot?.querySelector(".notification__close"))?.focus();
+		});
+	}
+	handleClose() {
+		this.clearAutoCloseTimer(), this.dispatchEvent(new CustomEvent("bp-hide", {
+			bubbles: !0,
+			composed: !0
+		}));
+	}
+	startAutoCloseTimer() {
+		this.clearAutoCloseTimer(), this.duration > 0 && !this.timerPaused && (this.remainingTime = this.duration, this.timerStartedAt = Date.now(), this.autoCloseTimer = window.setTimeout(() => {
+			this.hide();
+		}, this.duration));
+	}
+	clearAutoCloseTimer() {
+		this.autoCloseTimer &&= (window.clearTimeout(this.autoCloseTimer), null);
+	}
+	pauseAutoCloseTimer() {
+		this.autoCloseTimer && this.duration > 0 && (this.timerPaused = !0, this.remainingTime = Math.max(0, this.remainingTime - (Date.now() - this.timerStartedAt)), window.clearTimeout(this.autoCloseTimer), this.autoCloseTimer = null);
+	}
+	resumeAutoCloseTimer() {
+		this.timerPaused && this.duration > 0 && (this.timerPaused = !1, this.timerStartedAt = Date.now(), this.autoCloseTimer = window.setTimeout(() => {
+			this.hide();
+		}, this.remainingTime));
+	}
+	handleCloseClick() {
+		this.hide(), this.dispatchEvent(new CustomEvent("bp-close", {
+			bubbles: !0,
+			composed: !0
+		}));
+	}
+	handleKeydown(e) {
+		e.key === "Escape" && this.closable && this.handleCloseClick();
+	}
+	getDefaultIcon() {
+		return l`<bp-icon
+      .svg=${{
+			success: o,
+			warning: r,
+			error: i,
+			info: n
+		}[this.variant]}
+      size="md"
+    ></bp-icon>`;
+	}
+	render() {
+		return this.open ? l`
+      <div
+        class="notification notification--${this.variant} ${this.stacked ? "" : `notification--${this.position}`} ${this.isExiting ? "notification--exiting" : "notification--entering"}"
+        part="base"
+        role=${this.variant === "error" ? "alert" : "status"}
+        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 ? l`<div class="notification__title">${this.title}</div>` : u}
+          <div class="notification__message" part="message">
+            ${this.message || l`<slot></slot>`}
+          </div>
+        </div>
+
+        <div class="notification__action" part="action">
+          <slot name="action"></slot>
+        </div>
+
+        ${this.closable ? l`
+                <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;
+	}
+};
+e([f({
+	type: String,
+	reflect: !0,
+	converter: { fromAttribute: (e) => e && [
+		"info",
+		"success",
+		"warning",
+		"error"
+	].includes(e) ? e : "info" }
+})], h.prototype, "variant", void 0), e([f({
+	type: Boolean,
+	reflect: !0
+})], h.prototype, "open", void 0), e([f({
+	converter: a,
+	reflect: !0
+})], h.prototype, "closable", void 0), e([f({ type: Number })], h.prototype, "duration", void 0), e([f({ type: String })], h.prototype, "title", void 0), e([f({ type: String })], h.prototype, "message", void 0), e([f({
+	type: String,
+	converter: { fromAttribute: (e) => e && [
+		"top-left",
+		"top-center",
+		"top-right",
+		"bottom-left",
+		"bottom-center",
+		"bottom-right"
+	].includes(e) ? e : "top-right" }
+})], h.prototype, "position", void 0), e([f({
+	type: Boolean,
+	reflect: !0
+})], h.prototype, "stacked", void 0), e([p()], h.prototype, "autoCloseTimer", void 0), e([p()], h.prototype, "remainingTime", void 0), e([p()], h.prototype, "timerPaused", void 0), e([p()], h.prototype, "isExiting", void 0), h = e([d("bp-notification")], h);
+//#endregion
+export { h as t };
+
+//# sourceMappingURL=notification--jDZt64l.js.map

package/dist/shared/notification--jDZt64l.js.map

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

package/dist/shared/notification-stack-iVG35x2L.js

@@ -0,0 +1,127 @@
+import { t as e } from "./decorate-BJVyhdRd.js";
+import { t } from "./notification--jDZt64l.js";
+import { LitElement as n, css as r, html as i } from "lit";
+import { customElement as a, property as o } from "lit/decorators.js";
+//#region source/components/notification-stack/notification-stack.style.ts
+var s = r`
+  :host {
+    position: fixed;
+    z-index: var(--bp-z-popover);
+    width: min(400px, calc(100vw - 2 * var(--bp-spacing-md)));
+    margin: var(--bp-spacing-md);
+    /* The empty region must not block clicks on the page beneath it */
+    pointer-events: none;
+  }
+
+  :host([hidden]) {
+    display: none;
+  }
+
+  .stack {
+    display: flex;
+    flex-direction: column;
+    gap: var(--bp-spacing-sm);
+  }
+
+  ::slotted(*) {
+    pointer-events: auto;
+  }
+
+  :host([position='top-left']) {
+    top: 0;
+    left: 0;
+  }
+  :host([position='top-center']) {
+    top: 0;
+    left: 50%;
+    transform: translateX(-50%);
+    margin-inline: 0;
+  }
+  :host([position='top-right']) {
+    top: 0;
+    right: 0;
+  }
+  :host([position='bottom-left']) {
+    bottom: 0;
+    left: 0;
+  }
+  :host([position='bottom-center']) {
+    bottom: 0;
+    left: 50%;
+    transform: translateX(-50%);
+    margin-inline: 0;
+  }
+  :host([position='bottom-right']) {
+    bottom: 0;
+    right: 0;
+  }
+`, c = class extends n {
+	static {
+		this.dependencies = [t];
+	}
+	static {
+		this.styles = [s];
+	}
+	constructor() {
+		super(), this.owned = /* @__PURE__ */ new WeakSet(), this.queue = [], this.handleHide = (e) => {
+			let n = e.target;
+			n instanceof t && n.parentElement === this && (this.owned.has(n) && n.remove(), this.drain());
+		}, this.position = "bottom-right", this.max = 3, this.duration = 5e3, this.label = "Notifications", this.addEventListener("bp-hide", this.handleHide);
+	}
+	get pending() {
+		return this.queue.length;
+	}
+	get visible() {
+		return this.notifications.filter((e) => e.open);
+	}
+	get notifications() {
+		return Array.from(this.children).filter((e) => e instanceof t);
+	}
+	get isTop() {
+		return this.position.startsWith("top");
+	}
+	notify(e) {
+		let t = typeof e == "string" ? { message: e } : e, n = document.createElement("bp-notification");
+		return n.variant = t.variant ?? "info", n.title = t.title ?? "", n.message = t.message ?? "", n.closable = t.closable ?? !0, n.duration = t.duration ?? (n.variant === "error" ? 0 : this.duration), n.stacked = !0, this.owned.add(n), this.queue.push(n), this.drain(), n;
+	}
+	clear() {
+		this.queue = [];
+		for (let e of this.notifications) e.hide();
+	}
+	drain() {
+		let e = Math.max(1, Math.floor(Number(this.max) || 1));
+		for (; this.queue.length && this.visible.length < e;) {
+			let e = this.queue.shift();
+			e.open = !0, this.isTop ? this.prepend(e) : this.append(e), this.dispatchEvent(new CustomEvent("bp-notify", {
+				detail: { notification: e },
+				bubbles: !0,
+				composed: !0
+			}));
+		}
+	}
+	handleSlotChange() {
+		for (let e of this.notifications) e.stacked = !0;
+	}
+	updated(e) {
+		super.updated(e), e.has("max") && this.drain();
+	}
+	render() {
+		return i`
+      <div class="stack" part="base" role="region" aria-label=${this.label}>
+        <slot @slotchange=${this.handleSlotChange}></slot>
+      </div>
+    `;
+	}
+};
+e([o({
+	type: String,
+	reflect: !0
+})], c.prototype, "position", void 0), e([o({ type: Number })], c.prototype, "max", void 0), e([o({ type: Number })], c.prototype, "duration", void 0), e([o({ type: String })], c.prototype, "label", void 0), c = e([a("bp-notification-stack")], c);
+function l(e) {
+	let t = document.querySelector("bp-notification-stack");
+	return t || (t = document.createElement("bp-notification-stack"), document.body.append(t)), t.notify(e);
+}
+//#endregion
+export { l as n, c as t };
+
+//# sourceMappingURL=notification-stack-iVG35x2L.js.map

package/dist/shared/notification-stack-iVG35x2L.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"notification-stack-iVG35x2L.js","names":["_decorate","__decorate","notificationStackStyles","BpNotificationStack","LitElement","BpNotification","el","event","n","opts","options","max","changed","property","customElement","notify","stack"],"sources":["../../source/components/notification-stack/notification-stack.style.ts","../../source/components/notification-stack/notification-stack.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const notificationStackStyles = css`\n  :host {\n    position: fixed;\n    z-index: var(--bp-z-popover);\n    width: min(400px, calc(100vw - 2 * var(--bp-spacing-md)));\n    margin: var(--bp-spacing-md);\n    /* The empty region must not block clicks on the page beneath it */\n    pointer-events: none;\n  }\n\n  :host([hidden]) {\n    display: none;\n  }\n\n  .stack {\n    display: flex;\n    flex-direction: column;\n    gap: var(--bp-spacing-sm);\n  }\n\n  ::slotted(*) {\n    pointer-events: auto;\n  }\n\n  :host([position='top-left']) {\n    top: 0;\n    left: 0;\n  }\n  :host([position='top-center']) {\n    top: 0;\n    left: 50%;\n    transform: translateX(-50%);\n    margin-inline: 0;\n  }\n  :host([position='top-right']) {\n    top: 0;\n    right: 0;\n  }\n  :host([position='bottom-left']) {\n    bottom: 0;\n    left: 0;\n  }\n  :host([position='bottom-center']) {\n    bottom: 0;\n    left: 50%;\n    transform: translateX(-50%);\n    margin-inline: 0;\n  }\n  :host([position='bottom-right']) {\n    bottom: 0;\n    right: 0;\n  }\n`;\n","import { LitElement, html, type PropertyValues } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { notificationStackStyles } from './notification-stack.style.js';\nimport { BpNotification } from '../notification/notification.js';\n\nexport type NotificationStackPosition =\n  | 'top-left'\n  | 'top-center'\n  | 'top-right'\n  | 'bottom-left'\n  | 'bottom-center'\n  | 'bottom-right';\n\nexport type NotificationVariant = 'info' | 'success' | 'warning' | 'error';\n\n/** Options for `notify()` */\nexport interface NotifyOptions {\n  /** Message text */\n  message?: string;\n  /** Optional bold title above the message */\n  title?: string;\n  /** Visual and semantic variant (default `info`) */\n  variant?: NotificationVariant;\n  /**\n   * Milliseconds before it dismisses itself. Defaults to the stack's\n   * `duration`, except `error`, which stays until dismissed. `0` never\n   * auto-dismisses.\n   */\n  duration?: number;\n  /** Show a close button (default `true`) */\n  closable?: boolean;\n}\n\n/**\n * A fixed screen region that shows `bp-notification` toasts one above\n * another. Call `notify()` to add one: the stack positions it, caps how many\n * are visible at once (queuing the rest), and removes each one when it closes.\n *\n * Notifications added as children in markup are stacked too, but they are\n * only hidden, not removed, when they close.\n *\n * @element bp-notification-stack\n *\n * @fires bp-notify - A notification from `notify()` became visible. `detail.notification` is the element\n *\n * @slot - `bp-notification` elements\n *\n * @csspart base - The region that lays the notifications out\n */\n@customElement('bp-notification-stack')\nexport class BpNotificationStack extends LitElement {\n  static dependencies = [BpNotification];\n\n  /** Corner or edge of the viewport the stack sits in */\n  @property({ type: String, reflect: true })\n  declare position: NotificationStackPosition;\n\n  /** Most notifications visible at once; the rest wait in a queue */\n  @property({ type: Number }) declare max: number;\n\n  /**\n   * Default auto-dismiss time in milliseconds for `notify()`. Errors ignore\n   * it and stay until dismissed. `0` turns auto-dismiss off.\n   */\n  @property({ type: Number }) declare duration: number;\n\n  /** Accessible name of the region */\n  @property({ type: String }) declare label: string;\n\n  static styles = [notificationStackStyles];\n\n  /** Notifications created by notify(), which the stack removes on close */\n  private owned = new WeakSet<BpNotification>();\n  private queue: BpNotification[] = [];\n\n  constructor() {\n    super();\n    this.position = 'bottom-right';\n    this.max = 3;\n    this.duration = 5000;\n    this.label = 'Notifications';\n    this.addEventListener('bp-hide', this.handleHide);\n  }\n\n  /** Notifications waiting for room in the stack */\n  get pending(): number {\n    return this.queue.length;\n  }\n\n  /** The open notifications currently in the stack */\n  get visible(): BpNotification[] {\n    return this.notifications.filter((n) => n.open);\n  }\n\n  private get notifications(): BpNotification[] {\n    return Array.from(this.children).filter(\n      (el): el is BpNotification => el instanceof BpNotification\n    );\n  }\n\n  private get isTop(): boolean {\n    return this.position.startsWith('top');\n  }\n\n  /**\n   * Show a notification. Pass a message string or `NotifyOptions`. Returns\n   * the `bp-notification` element, so you can add an `action` slot or close\n   * it with `hide()`.\n   */\n  notify(options: NotifyOptions | string): BpNotification {\n    const opts: NotifyOptions =\n      typeof options === 'string' ? { message: options } : options;\n    const el = document.createElement('bp-notification');\n    el.variant = opts.variant ?? 'info';\n    el.title = opts.title ?? '';\n    el.message = opts.message ?? '';\n    el.closable = opts.closable ?? true;\n    el.duration = opts.duration ?? (el.variant === 'error' ? 0 : this.duration);\n    el.stacked = true;\n    this.owned.add(el);\n    this.queue.push(el);\n    this.drain();\n    return el;\n  }\n\n  /** Close every notification and empty the queue */\n  clear(): void {\n    this.queue = [];\n    for (const n of this.notifications) n.hide();\n  }\n\n  /** Move queued notifications into the stack while there is room */\n  private drain() {\n    const max = Math.max(1, Math.floor(Number(this.max) || 1));\n    while (this.queue.length && this.visible.length < max) {\n      const el = this.queue.shift()!;\n      el.open = true;\n      // Newest sits nearest the screen edge, and DOM order matches.\n      if (this.isTop) this.prepend(el);\n      else this.append(el);\n      this.dispatchEvent(\n        new CustomEvent('bp-notify', {\n          detail: { notification: el },\n          bubbles: true,\n          composed: true,\n        })\n      );\n    }\n  }\n\n  private handleHide = (event: Event) => {\n    const el = event.target;\n    if (!(el instanceof BpNotification) || el.parentElement !== this) return;\n    if (this.owned.has(el)) el.remove();\n    this.drain();\n  };\n\n  private handleSlotChange() {\n    for (const n of this.notifications) n.stacked = true;\n  }\n\n  protected updated(changed: PropertyValues): void {\n    super.updated(changed);\n    if (changed.has('max')) this.drain();\n  }\n\n  render() {\n    return html`\n      <div class=\"stack\" part=\"base\" role=\"region\" aria-label=${this.label}>\n        <slot @slotchange=${this.handleSlotChange}></slot>\n      </div>\n    `;\n  }\n}\n\n/**\n * Show a notification in the page's first `bp-notification-stack`, creating\n * one at the end of `<body>` if there is none.\n */\nexport function notify(options: NotifyOptions | string): BpNotification {\n  let stack = document.querySelector('bp-notification-stack');\n  if (!stack) {\n    stack = document.createElement('bp-notification-stack');\n    document.body.append(stack);\n  }\n  return stack.notify(options);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'bp-notification-stack': BpNotificationStack;\n  }\n}\n"],"mappings":"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"}