@krollins/blueprint 0.1.11 → 0.1.13

package/dist/components/modal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"modal.js","sources":["../../source/components/modal/modal.style.ts","../../source/components/modal/modal.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const modalStyles = css`\n  /* Base styles */\n  :host {\n    display: block;\n  }\n\n  :host([open]) {\n    display: block;\n  }\n\n  :host(:not([open])) {\n    display: none;\n  }\n\n  /* Backdrop */\n  .modal-backdrop {\n    position: fixed;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    z-index: var(--bp-z-modal);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background-color: var(--bp-color-backdrop);\n    animation: fadeIn var(--bp-duration-fast) var(--bp-ease-out);\n  }\n\n  @keyframes fadeIn {\n    from {\n      opacity: 0;\n    }\n    to {\n      opacity: 1;\n    }\n  }\n\n  @keyframes slideUp {\n    from {\n      transform: translateY(var(--bp-spacing-8));\n      opacity: 0;\n    }\n    to {\n      transform: translateY(0);\n      opacity: 1;\n    }\n  }\n\n  /* Dialog */\n  .modal-dialog {\n    position: relative;\n    background-color: var(--bp-color-surface-elevated);\n    border-radius: var(--bp-border-radius-lg);\n    box-shadow: var(--bp-shadow-xl);\n    max-height: 90vh;\n    display: flex;\n    flex-direction: column;\n    overflow: hidden;\n    animation: slideUp var(--bp-duration-normal) var(--bp-ease-out);\n    outline: none;\n  }\n\n  /* Header */\n  .modal-header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: var(--bp-spacing-md);\n    padding: var(--bp-spacing-6);\n    border-bottom: var(--bp-border-width) solid var(--bp-color-border);\n    font-family: var(--bp-font-family);\n  }\n\n  ::slotted([slot='header']) {\n    flex: 1;\n    font-size: var(--bp-font-size-xl);\n    font-weight: var(--bp-font-weight-semibold);\n    color: var(--bp-color-text-strong);\n    line-height: var(--bp-line-height-tight);\n    margin: 0;\n  }\n\n  /* Close button */\n  .modal-close {\n    appearance: none;\n    background: transparent;\n    border: none;\n    padding: var(--bp-spacing-2);\n    cursor: pointer;\n    color: var(--bp-color-text-muted);\n    border-radius: var(--bp-border-radius-md);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    transition: all var(--bp-transition-fast);\n    flex-shrink: 0;\n  }\n\n  .modal-close:hover {\n    background-color: var(--bp-color-surface);\n    color: var(--bp-color-text);\n  }\n\n  .modal-close:focus-visible {\n    outline: var(--bp-focus-ring);\n    outline-offset: var(--bp-focus-offset);\n  }\n\n  .modal-close svg {\n    display: block;\n  }\n\n  /* Body */\n  .modal-body {\n    flex: 1;\n    padding: var(--bp-spacing-6);\n    overflow-y: auto;\n    font-family: var(--bp-font-family);\n    font-size: var(--bp-font-size-base);\n    line-height: var(--bp-line-height-relaxed);\n    color: var(--bp-color-text);\n  }\n\n  /* Footer */\n  .modal-footer {\n    padding: var(--bp-spacing-6);\n    border-top: var(--bp-border-width) solid var(--bp-color-border);\n    display: flex;\n    gap: var(--bp-spacing-3);\n    justify-content: flex-end;\n    align-items: center;\n  }\n\n  .modal-footer:empty {\n    display: none;\n  }\n\n  /* Sizes */\n  .modal-dialog--sm {\n    width: 90%;\n    max-width: calc(var(--bp-spacing-24) * 4 + var(--bp-spacing-16));\n  }\n\n  .modal-dialog--md {\n    width: 90%;\n    max-width: var(--bp-breakpoint-sm);\n  }\n\n  .modal-dialog--lg {\n    width: 90%;\n    max-width: var(--bp-breakpoint-md);\n  }\n\n  /* States */\n  .modal-dialog:focus {\n    outline: none;\n  }\n`;\n","import { LitElement, html } from 'lit';\nimport { customElement, property, state, query } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { modalStyles } from './modal.style.js';\n\nexport type ModalSize = 'sm' | 'md' | 'lg';\n\n@customElement('bp-modal')\nexport class BpModal extends LitElement {\n  /** Whether the modal is currently open */\n  @property({ type: Boolean, reflect: true }) declare open: boolean;\n\n  /** Size variant of the modal */\n  @property({ type: String, reflect: true }) declare size: ModalSize;\n\n  /** ID for aria-labelledby attribute - should match header content */\n  @property({ type: String, attribute: 'aria-labelledby' })\n  declare ariaLabelledby: string;\n\n  /** Dialog element reference for focus management */\n  @query('.modal-dialog') private dialogElement!: HTMLElement;\n\n  /** Store the element that had focus before modal opened */\n  @state() private previouslyFocusedElement: HTMLElement | null = null;\n\n  /** Track if body scroll is prevented */\n  @state() private bodyScrollPrevented = false;\n\n  static styles = [modalStyles];\n\n  constructor() {\n    super();\n    this.open = false;\n    this.size = 'md';\n    this.ariaLabelledby = '';\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.addEventListener('keydown', this.handleKeyDown);\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.removeEventListener('keydown', this.handleKeyDown);\n    this.restoreFocus();\n    this.restoreBodyScroll();\n  }\n\n  updated(changedProperties: Map<string, unknown>) {\n    if (changedProperties.has('open')) {\n      if (this.open) {\n        this.handleOpen();\n      } else {\n        this.handleClose();\n      }\n    }\n  }\n\n  private handleOpen() {\n    // Store previously focused element\n    this.previouslyFocusedElement = document.activeElement as HTMLElement;\n\n    // Prevent body scroll\n    this.preventBodyScroll();\n\n    // Set focus to dialog after it's rendered\n    this.updateComplete.then(() => {\n      this.setFocusToDialog();\n    });\n  }\n\n  private handleClose() {\n    this.restoreFocus();\n    this.restoreBodyScroll();\n  }\n\n  private preventBodyScroll() {\n    if (!this.bodyScrollPrevented) {\n      document.body.style.overflow = 'hidden';\n      this.bodyScrollPrevented = true;\n    }\n  }\n\n  private restoreBodyScroll() {\n    if (this.bodyScrollPrevented) {\n      document.body.style.overflow = '';\n      this.bodyScrollPrevented = false;\n    }\n  }\n\n  private setFocusToDialog() {\n    if (this.dialogElement) {\n      this.dialogElement.focus();\n    }\n  }\n\n  private restoreFocus() {\n    if (this.previouslyFocusedElement) {\n      this.previouslyFocusedElement.focus();\n      this.previouslyFocusedElement = null;\n    }\n  }\n\n  private handleKeyDown = (event: globalThis.KeyboardEvent) => {\n    if (event.key === 'Escape' && this.open) {\n      event.preventDefault();\n      this.close();\n    }\n\n    // Trap focus within modal\n    if (event.key === 'Tab' && this.open) {\n      this.trapFocus(event);\n    }\n  };\n\n  private trapFocus(event: globalThis.KeyboardEvent) {\n    const focusableElements = this.getFocusableElements();\n    if (focusableElements.length === 0) return;\n\n    const firstElement = focusableElements[0];\n    const lastElement = focusableElements[focusableElements.length - 1];\n\n    if (event.shiftKey) {\n      // Shift + Tab\n      if (document.activeElement === firstElement) {\n        event.preventDefault();\n        lastElement.focus();\n      }\n    } else {\n      // Tab\n      if (document.activeElement === lastElement) {\n        event.preventDefault();\n        firstElement.focus();\n      }\n    }\n  }\n\n  private getFocusableElements(): HTMLElement[] {\n    if (!this.shadowRoot) return [];\n\n    const focusableSelectors = [\n      'button:not([disabled])',\n      'a[href]',\n      'input:not([disabled])',\n      'select:not([disabled])',\n      'textarea:not([disabled])',\n      '[tabindex]:not([tabindex=\"-1\"])',\n    ];\n\n    const elements = this.shadowRoot.querySelectorAll(\n      focusableSelectors.join(',')\n    );\n    return Array.from(elements) as HTMLElement[];\n  }\n\n  private handleBackdropClick = (event: MouseEvent) => {\n    // Only close if clicking directly on backdrop (not bubbled from dialog)\n    if (event.target === event.currentTarget) {\n      this.close();\n    }\n  };\n\n  private handleCloseButtonClick = () => {\n    this.close();\n  };\n\n  private close() {\n    this.open = false;\n    this.dispatchEvent(\n      new CustomEvent('bp-close', {\n        bubbles: true,\n        composed: true,\n      })\n    );\n  }\n\n  render() {\n    if (!this.open) {\n      return html``;\n    }\n\n    const dialogClasses = {\n      'modal-dialog': true,\n      [`modal-dialog--${this.size}`]: true,\n    };\n\n    return html`\n      <div\n        class=\"modal-backdrop\"\n        part=\"backdrop\"\n        @click=${this.handleBackdropClick}\n      >\n        <div\n          class=${classMap(dialogClasses)}\n          part=\"dialog\"\n          role=\"dialog\"\n          aria-modal=\"true\"\n          aria-labelledby=${this.ariaLabelledby || 'modal-header'}\n          tabindex=\"-1\"\n        >\n          <div class=\"modal-header\" part=\"header\">\n            <slot name=\"header\"></slot>\n            <button\n              class=\"modal-close\"\n              part=\"close-button\"\n              type=\"button\"\n              aria-label=\"Close\"\n              @click=${this.handleCloseButtonClick}\n            >\n              <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                width=\"20\"\n                height=\"20\"\n                viewBox=\"0 0 24 24\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                stroke-width=\"2\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n              >\n                <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\n                <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\n              </svg>\n            </button>\n          </div>\n          <div class=\"modal-body\" part=\"body\">\n            <slot></slot>\n          </div>\n          <div class=\"modal-footer\" part=\"footer\">\n            <slot name=\"footer\"></slot>\n          </div>\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'bp-modal': BpModal;\n  }\n}\n"],"names":["modalStyles","css","BpModal","LitElement","event","changedProperties","focusableElements","firstElement","lastElement","focusableSelectors","elements","html","dialogClasses","classMap","__decorateClass","property","query","state","customElement"],"mappings":"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"}

package/dist/components/multi-select.js

@@ -0,0 +1,642 @@
+import { css as m, LitElement as v, html as a, nothing as u } from "lit";
+import { property as n, state as d, customElement as g } from "lit/decorators.js";
+import { classMap as b } from "lit/directives/class-map.js";
+import { repeat as h } from "lit/directives/repeat.js";
+import { m as f } from "../shared/memoize-DlOFy-92.js";
+import { b as _ } from "../shared/boolean-converter-XDGfS9LC.js";
+const x = m`
+  /* Base styles */
+  :host {
+    display: block;
+    font-family: var(--bp-font-family);
+  }
+
+  .multi-select {
+    position: relative;
+    width: 100%;
+  }
+
+  .multi-select__control {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--bp-spacing-sm);
+    min-height: var(--bp-spacing-10);
+    padding: var(--bp-spacing-xs) var(--bp-spacing-sm);
+    background-color: var(--bp-color-surface);
+    border: var(--bp-border-width) solid var(--bp-color-border);
+    border-radius: var(--bp-border-radius-md);
+    cursor: pointer;
+    transition: border-color var(--bp-transition-fast);
+  }
+
+  .multi-select__control:hover:not(
+      .multi-select--disabled .multi-select__control
+    ) {
+    border-color: var(--bp-color-primary);
+  }
+
+  .multi-select__control:focus-visible {
+    outline: var(--bp-focus-width) solid var(--bp-color-focus);
+    outline-offset: var(--bp-focus-width);
+  }
+
+  .multi-select__value-container {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--bp-spacing-xs);
+    flex: 1;
+    min-width: 0;
+  }
+
+  .multi-select__placeholder {
+    color: var(--bp-color-text-muted);
+    user-select: none;
+  }
+
+  .multi-select__tag {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--bp-spacing-xs);
+    padding: var(--bp-spacing-2xs) var(--bp-spacing-xs);
+    background-color: color-mix(
+      in srgb,
+      var(--bp-color-primary) 8%,
+      transparent
+    );
+    color: var(--bp-color-primary);
+    border: none;
+    border-radius: var(--bp-border-radius-md);
+    font-size: var(--bp-font-size-sm);
+    max-width: 100%;
+  }
+
+  .multi-select__tag-label {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .multi-select__tag-remove {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--bp-spacing-4);
+    height: var(--bp-spacing-4);
+    padding: 0;
+    background: transparent;
+    border: none;
+    border-radius: var(--bp-border-radius-sm);
+    color: var(--bp-color-primary);
+    cursor: pointer;
+    font-size: var(--bp-font-size-lg);
+    line-height: 1;
+    transition: all var(--bp-transition-fast);
+  }
+
+  .multi-select__tag-remove:hover {
+    background-color: color-mix(
+      in srgb,
+      var(--bp-color-primary) 15%,
+      transparent
+    );
+    color: var(--bp-color-primary);
+  }
+
+  .multi-select__tag-remove:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
+  .multi-select__indicators {
+    display: flex;
+    align-items: center;
+    gap: var(--bp-spacing-xs);
+    flex-shrink: 0;
+  }
+
+  .multi-select__clear {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--bp-spacing-6);
+    height: var(--bp-spacing-6);
+    padding: 0;
+    background: transparent;
+    border: none;
+    border-radius: var(--bp-border-radius-sm);
+    color: var(--bp-color-text-muted);
+    cursor: pointer;
+    font-size: var(--bp-font-size-xl);
+    line-height: 1;
+    transition: all var(--bp-transition-fast);
+  }
+
+  .multi-select__clear:hover {
+    background-color: var(--bp-color-surface-subdued);
+    color: var(--bp-color-text);
+  }
+
+  .multi-select__clear:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
+  .multi-select__dropdown-indicator {
+    color: var(--bp-color-text-muted);
+    font-size: var(--bp-font-size-xs);
+    transition: transform var(--bp-transition-fast);
+    user-select: none;
+  }
+
+  .multi-select--open .multi-select__dropdown-indicator {
+    transform: rotate(180deg);
+  }
+
+  .multi-select__dropdown {
+    position: absolute;
+    top: calc(100% + var(--bp-spacing-xs));
+    left: 0;
+    right: 0;
+    z-index: var(--bp-z-dropdown);
+    background-color: var(--bp-color-surface);
+    border: var(--bp-border-width) solid var(--bp-color-border);
+    border-radius: var(--bp-border-radius-md);
+    box-shadow: var(--bp-shadow-md);
+    max-height: calc(var(--bp-spacing-10) * 6);
+    overflow-y: auto;
+    opacity: 0;
+    visibility: hidden;
+    transform: translateY(calc(-1 * var(--bp-spacing-md)));
+    transition:
+      opacity var(--bp-transition-fast),
+      transform var(--bp-transition-fast),
+      visibility var(--bp-transition-fast);
+    contain: layout style paint;
+  }
+
+  .multi-select--open .multi-select__dropdown {
+    opacity: 1;
+    visibility: visible;
+    transform: translateY(0);
+  }
+
+  .multi-select__options {
+    list-style: none;
+    margin: 0;
+    padding: var(--bp-spacing-2xs);
+  }
+
+  .multi-select__option {
+    display: flex;
+    align-items: center;
+    gap: var(--bp-spacing-sm);
+    padding: var(--bp-spacing-sm) var(--bp-spacing-md);
+    cursor: pointer;
+    border-radius: var(--bp-border-radius-md);
+    transition:
+      background-color var(--bp-transition-fast),
+      color var(--bp-transition-fast);
+  }
+
+  .multi-select__option:hover {
+    background-color: var(--bp-color-surface-elevated);
+  }
+
+  .multi-select__option--focused {
+    background-color: var(--bp-color-surface-subdued);
+    outline: var(--bp-focus-width) solid var(--bp-color-primary);
+    outline-offset: calc(-1 * var(--bp-focus-width));
+  }
+
+  .multi-select__option--selected {
+    background-color: color-mix(
+      in srgb,
+      var(--bp-color-primary) 8%,
+      transparent
+    );
+    color: var(--bp-color-primary);
+  }
+
+  .multi-select__option--selected:hover {
+    background-color: color-mix(
+      in srgb,
+      var(--bp-color-primary) 12%,
+      transparent
+    );
+  }
+
+  .multi-select__option--empty {
+    color: var(--bp-color-text-muted);
+    cursor: default;
+    text-align: center;
+    padding: var(--bp-spacing-xl) var(--bp-spacing-lg);
+    font-style: italic;
+  }
+
+  .multi-select__checkbox {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--bp-spacing-4);
+    height: var(--bp-spacing-4);
+    border: var(--bp-border-width) solid var(--bp-color-border);
+    border-radius: var(--bp-border-radius-sm);
+    font-size: var(--bp-font-size-xs);
+    flex-shrink: 0;
+    transition: all var(--bp-transition-fast);
+  }
+
+  .multi-select__option--selected .multi-select__checkbox {
+    border-color: var(--bp-color-primary);
+    background-color: var(--bp-color-primary);
+    color: var(--bp-color-text-inverse);
+  }
+
+  .multi-select__option-label {
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  /* Sizes */
+  .multi-select--sm .multi-select__control {
+    min-height: var(--bp-spacing-8);
+    padding: var(--bp-spacing-2xs) var(--bp-spacing-xs);
+    font-size: var(--bp-font-size-sm);
+  }
+
+  .multi-select--sm .multi-select__tag {
+    padding: var(--bp-spacing-0-5) var(--bp-spacing-2xs);
+    font-size: var(--bp-font-size-xs);
+  }
+
+  .multi-select--lg .multi-select__control {
+    min-height: var(--bp-spacing-12);
+    padding: var(--bp-spacing-sm) var(--bp-spacing-md);
+    font-size: var(--bp-font-size-lg);
+  }
+
+  .multi-select--lg .multi-select__tag {
+    padding: var(--bp-spacing-xs) var(--bp-spacing-sm);
+    font-size: var(--bp-font-size-base);
+  }
+
+  /* Variants */
+  .multi-select--default .multi-select__control {
+    border-color: var(--bp-color-border);
+  }
+
+  .multi-select--success .multi-select__control {
+    border-color: var(--bp-color-success);
+  }
+
+  .multi-select--error .multi-select__control {
+    border-color: var(--bp-color-error);
+  }
+
+  .multi-select--warning .multi-select__control {
+    border-color: var(--bp-color-warning);
+  }
+
+  .multi-select--info .multi-select__control {
+    border-color: var(--bp-color-info);
+  }
+
+  .multi-select--success
+    .multi-select__control:hover:not(
+      .multi-select--disabled .multi-select__control
+    ) {
+    border-color: var(--bp-color-success);
+  }
+
+  .multi-select--error
+    .multi-select__control:hover:not(
+      .multi-select--disabled .multi-select__control
+    ) {
+    border-color: var(--bp-color-error);
+  }
+
+  .multi-select--warning
+    .multi-select__control:hover:not(
+      .multi-select--disabled .multi-select__control
+    ) {
+    border-color: var(--bp-color-warning);
+  }
+
+  .multi-select--info
+    .multi-select__control:hover:not(
+      .multi-select--disabled .multi-select__control
+    ) {
+    border-color: var(--bp-color-info);
+  }
+
+  /* States */
+  .multi-select--disabled .multi-select__control {
+    background-color: var(--bp-color-surface-subdued);
+    cursor: not-allowed;
+    opacity: 0.6;
+  }
+
+  .multi-select--disabled .multi-select__placeholder {
+    color: var(--bp-color-text-muted);
+  }
+
+  /* Hide slot */
+  slot {
+    display: none;
+  }
+
+  /* Hide hidden inputs */
+  input[type='hidden'] {
+    display: none;
+  }
+`;
+var y = Object.defineProperty, w = Object.getOwnPropertyDescriptor, o = (e, t, s, i) => {
+  for (var r = i > 1 ? void 0 : i ? w(t, s) : t, c = e.length - 1, p; c >= 0; c--)
+    (p = e[c]) && (r = (i ? p(t, s, r) : p(r)) || r);
+  return i && r && y(t, s, r), r;
+};
+let l = class extends v {
+  constructor() {
+    super(), this.isOpen = !1, this.focusedIndex = -1, this.cachedOptions = [], this.computeLabelMap = f(
+      (e) => {
+        const t = /* @__PURE__ */ new Map();
+        for (const s of e)
+          t.set(s.value, s.label);
+        return t;
+      }
+    ), this.handleDocumentClick = (e) => {
+      this.contains(e.target) || (this.isOpen = !1, this.focusedIndex = -1);
+    }, this.handleToggle = (e) => {
+      e?.stopPropagation(), !this.disabled && (this.isOpen = !this.isOpen, this.isOpen && (this.focusedIndex = 0));
+    }, this.handleSlotChange = () => {
+      this.cachedOptions = this.getOptions(), this.initializeSelectedValues();
+    }, this.handleOptionClick = (e) => {
+      if (this.disabled) return;
+      const t = [...this.value];
+      let s;
+      if (this.isSelected(e.value)) {
+        if (s = this.value.filter((i) => i !== e.value), !this.clearable && s.length === 0)
+          return;
+      } else {
+        if (this.maxSelections > 0 && this.value.length >= this.maxSelections)
+          return;
+        s = [...this.value, e.value];
+      }
+      this.value = s, this.dispatchChangeEvent(s, t);
+    }, this.handleRemoveTag = (e, t) => {
+      if (t.stopPropagation(), this.disabled) return;
+      const s = [...this.value], i = this.value.filter((r) => r !== e);
+      this.value = i, this.dispatchChangeEvent(i, s);
+    }, this.handleClearAll = (e) => {
+      if (e.stopPropagation(), this.disabled) return;
+      const t = [...this.value], s = [];
+      this.value = s, this.dispatchChangeEvent(s, t);
+    }, this.handleKeyDown = (e) => {
+      if (this.disabled) return;
+      const t = this.cachedOptions;
+      switch (e.key) {
+        case "Enter":
+        case " ":
+          if (e.preventDefault(), this.isOpen && this.focusedIndex >= 0) {
+            const s = t[this.focusedIndex];
+            s && this.handleOptionClick(s);
+          } else
+            this.handleToggle();
+          break;
+        case "Escape":
+          e.preventDefault(), this.isOpen = !1, this.focusedIndex = -1;
+          break;
+        case "ArrowDown":
+          e.preventDefault(), this.isOpen ? this.focusedIndex = Math.min(
+            this.focusedIndex + 1,
+            t.length - 1
+          ) : (this.isOpen = !0, this.focusedIndex = 0);
+          break;
+        case "ArrowUp":
+          e.preventDefault(), this.isOpen ? this.focusedIndex = Math.max(this.focusedIndex - 1, 0) : (this.isOpen = !0, this.focusedIndex = t.length - 1);
+          break;
+      }
+    }, this.value = [], this.name = "", this.placeholder = "Select options", this.disabled = !1, this.required = !1, this.size = "md", this.variant = "default", this.maxSelections = 0, this.clearable = !0;
+  }
+  connectedCallback() {
+    super.connectedCallback(), document.addEventListener("click", this.handleDocumentClick, {
+      passive: !0
+    }), this.updateComplete.then(() => {
+      this.cachedOptions = this.getOptions(), this.initializeSelectedValues();
+    });
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), document.removeEventListener("click", this.handleDocumentClick, {
+      passive: !0
+    });
+  }
+  getOptions() {
+    return (this.shadowRoot?.querySelector("slot")?.assignedElements() || []).filter(
+      (i) => i.tagName === "OPTION"
+    ).map((i) => ({
+      value: i.value || i.textContent || "",
+      label: i.textContent || ""
+    }));
+  }
+  /**
+   * Read the `selected` attribute from slotted <option> elements
+   * and set the initial value array if no values are already set.
+   */
+  initializeSelectedValues() {
+    if (this.value.length > 0) return;
+    const s = (this.shadowRoot?.querySelector("slot")?.assignedElements() || []).filter(
+      (i) => i.tagName === "OPTION" && i.hasAttribute("selected")
+    ).map((i) => i.value || i.textContent || "");
+    s.length > 0 && (this.value = s);
+  }
+  isSelected(e) {
+    return this.value.includes(e);
+  }
+  dispatchChangeEvent(e, t) {
+    this.dispatchEvent(
+      new CustomEvent("bp-change", {
+        detail: {
+          value: e,
+          previousValue: t
+        },
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  getLabelForValue(e) {
+    return this.computeLabelMap(this.cachedOptions).get(e) || e;
+  }
+  renderDropdown() {
+    const e = this.cachedOptions;
+    return a`
+      <div class="multi-select__dropdown" part="dropdown">
+        <ul
+          class="multi-select__options"
+          role="listbox"
+          aria-multiselectable="true"
+        >
+          ${e.length === 0 ? a`<li class="multi-select__option multi-select__option--empty">
+                No options available
+              </li>` : h(
+      e,
+      (t) => t.value,
+      (t, s) => {
+        const i = this.isSelected(t.value), r = s === this.focusedIndex;
+        return a`
+                    <li
+                      class=${b({
+          "multi-select__option": !0,
+          "multi-select__option--selected": i,
+          "multi-select__option--focused": r
+        })}
+                      role="option"
+                      aria-selected=${i}
+                      @click=${() => this.handleOptionClick(t)}
+                      part="option ${i ? "option-selected" : ""}"
+                    >
+                      <span class="multi-select__checkbox">
+                        ${i ? "✓" : ""}
+                      </span>
+                      <span class="multi-select__option-label"
+                        >${t.label}</span
+                      >
+                    </li>
+                  `;
+      }
+    )}
+        </ul>
+      </div>
+    `;
+  }
+  render() {
+    const e = this.value.length > 0;
+    return a`
+      <div
+        class=${b({
+      "multi-select": !0,
+      "multi-select--open": this.isOpen,
+      "multi-select--disabled": this.disabled,
+      [`multi-select--${this.size}`]: !0,
+      [`multi-select--${this.variant}`]: !0
+    })}
+      >
+        <div
+          class="multi-select__control"
+          @click=${this.handleToggle}
+          @keydown=${this.handleKeyDown}
+          tabindex=${this.disabled ? "-1" : "0"}
+          role="combobox"
+          aria-haspopup="listbox"
+          aria-expanded=${this.isOpen}
+          aria-disabled=${this.disabled}
+          part="control"
+        >
+          <div class="multi-select__value-container">
+            ${e ? h(
+      this.value,
+      (t) => t,
+      (t) => a`
+                    <span class="multi-select__tag" part="tag">
+                      <span class="multi-select__tag-label">
+                        ${this.getLabelForValue(t)}
+                      </span>
+                      ${this.clearable ? a`<button
+                            type="button"
+                            class="multi-select__tag-remove"
+                            @click=${(s) => this.handleRemoveTag(t, s)}
+                            aria-label="Remove ${this.getLabelForValue(t)}"
+                            tabindex="-1"
+                            ?disabled=${this.disabled}
+                          >
+                            ×
+                          </button>` : u}
+                    </span>
+                  `
+    ) : a`<span class="multi-select__placeholder"
+                  >${this.placeholder}</span
+                >`}
+          </div>
+
+          <div class="multi-select__indicators">
+            ${this.clearable && e ? a`
+                  <button
+                    type="button"
+                    class="multi-select__clear"
+                    @click=${this.handleClearAll}
+                    aria-label="Clear all selections"
+                    tabindex="-1"
+                    ?disabled=${this.disabled}
+                    part="clear-button"
+                  >
+                    ×
+                  </button>
+                ` : ""}
+            <span class="multi-select__dropdown-indicator" part="indicator">
+              ▼
+            </span>
+          </div>
+        </div>
+
+        ${this.isOpen ? this.renderDropdown() : u}
+
+        <!-- Hidden slot for options -->
+        <slot @slotchange=${this.handleSlotChange}></slot>
+
+        <!-- Hidden inputs for form submission -->
+        ${this.value.map(
+      (t) => a`
+            <input type="hidden" name="${this.name}" value="${t}" />
+          `
+    )}
+      </div>
+    `;
+  }
+};
+l.styles = [x];
+o([
+  n({ type: Array })
+], l.prototype, "value", 2);
+o([
+  n({ type: String })
+], l.prototype, "name", 2);
+o([
+  n({ type: String })
+], l.prototype, "placeholder", 2);
+o([
+  n({ type: Boolean, reflect: !0 })
+], l.prototype, "disabled", 2);
+o([
+  n({ type: Boolean, reflect: !0 })
+], l.prototype, "required", 2);
+o([
+  n({ type: String, reflect: !0 })
+], l.prototype, "size", 2);
+o([
+  n({ type: String, reflect: !0 })
+], l.prototype, "variant", 2);
+o([
+  n({ type: Number, attribute: "max-selections" })
+], l.prototype, "maxSelections", 2);
+o([
+  n({ converter: _ })
+], l.prototype, "clearable", 2);
+o([
+  d()
+], l.prototype, "isOpen", 2);
+o([
+  d()
+], l.prototype, "focusedIndex", 2);
+o([
+  d()
+], l.prototype, "cachedOptions", 2);
+l = o([
+  g("bp-multi-select")
+], l);
+export {
+  l as BpMultiSelect
+};
+//# sourceMappingURL=multi-select.js.map