@krollins/blueprint 0.1.12 → 0.1.14

package/dist/components/select.js

@@ -0,0 +1,498 @@
+import { css as v, LitElement as f, html as p } from "lit";
+import { property as c, state as h, customElement as g } from "lit/decorators.js";
+import { classMap as m } from "lit/directives/class-map.js";
+import { ifDefined as b } from "lit/directives/if-defined.js";
+import { repeat as w } from "lit/directives/repeat.js";
+const x = v`
+  /* Base styles */
+  :host {
+    display: inline-block;
+    width: 100%;
+    box-sizing: border-box;
+  }
+
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
+
+  .select {
+    position: relative;
+    font-family: var(--bp-font-family);
+  }
+
+  .select-label {
+    display: block;
+    font-family: var(--bp-font-family);
+    font-size: var(--bp-font-size-sm);
+    font-weight: var(--bp-font-weight-medium);
+    color: var(--bp-color-text);
+    line-height: var(--bp-line-height-normal);
+    margin-bottom: var(--bp-spacing-xs);
+  }
+
+  .select-required {
+    color: var(--bp-color-error);
+    margin-left: var(--bp-spacing-xs);
+  }
+
+  .select-trigger {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    padding: var(--bp-spacing-sm) var(--bp-spacing-md);
+    background-color: var(--bp-color-background);
+    border: var(--bp-border-width) solid var(--bp-color-border);
+    border-radius: var(--bp-border-radius-md);
+    font-size: var(--bp-font-size-base);
+    line-height: var(--bp-line-height-normal);
+    color: var(--bp-color-text);
+    cursor: pointer;
+    box-shadow: inset 0 1px 2px oklch(0 0 0 / 0.05);
+    transition:
+      border-color var(--bp-transition-fast),
+      box-shadow var(--bp-transition-fast);
+  }
+
+  .select-value {
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    position: relative;
+  }
+
+  /* Hidden sizer keeps the trigger width stable across placeholder/option changes */
+  .select-value__sizer {
+    display: block;
+    height: 0;
+    overflow: hidden;
+    visibility: hidden;
+    white-space: nowrap;
+  }
+
+  .select-value__display {
+    display: block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  /* Placeholder state - when no value is selected */
+  .select-trigger:not([aria-label]) .select-value:empty {
+    opacity: 0.6;
+  }
+
+  .select-icon {
+    width: var(--bp-spacing-4);
+    height: var(--bp-spacing-4);
+    flex-shrink: 0;
+    margin-left: var(--bp-spacing-xs);
+    transition:
+      transform var(--bp-transition-base),
+      color var(--bp-transition-fast);
+  }
+
+  .select-dropdown {
+    position: absolute;
+    top: calc(100% + var(--bp-spacing-2xs));
+    left: 0;
+    right: 0;
+    overflow-y: auto;
+    background-color: var(--bp-color-background);
+    border: var(--bp-border-width) solid var(--bp-color-border);
+    border-radius: var(--bp-border-radius-md);
+    box-shadow: var(--bp-shadow-lg);
+    z-index: var(--bp-z-dropdown);
+    animation: slideDown 150ms ease-out;
+    transform-origin: top;
+    contain: layout style paint;
+  }
+
+  @keyframes slideDown {
+    from {
+      opacity: 0;
+      transform: translateY(calc(-1 * var(--bp-spacing-2)));
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  .select-option {
+    padding: var(--bp-spacing-sm) var(--bp-spacing-md);
+    cursor: pointer;
+    transition: background-color var(--bp-transition-fast);
+  }
+
+  .select-option:hover:not(.select-option--focused) {
+    background-color: var(--bp-color-surface-elevated);
+  }
+
+  .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));
+  }
+
+  .select-option--selected {
+    background-color: color-mix(
+      in srgb,
+      var(--bp-color-primary) 8%,
+      transparent
+    );
+    color: var(--bp-color-primary);
+    font-weight: var(--bp-font-weight-semibold);
+    position: relative;
+    padding-right: var(--bp-spacing-2xl);
+  }
+
+  /* Checkmark for selected option */
+  .select-option--selected::after {
+    content: '✓';
+    position: absolute;
+    right: var(--bp-spacing-md);
+    color: var(--bp-color-primary);
+    font-weight: var(--bp-font-weight-bold);
+    font-size: var(--bp-font-size-lg);
+  }
+
+  /* Sizes */
+  .select--sm .select-trigger {
+    padding: var(--bp-spacing-xs) var(--bp-spacing-sm);
+    font-size: var(--bp-font-size-sm);
+  }
+
+  .select--sm .select-option {
+    padding: var(--bp-spacing-xs) var(--bp-spacing-sm);
+    font-size: var(--bp-font-size-sm);
+  }
+
+  .select--md .select-trigger {
+    padding: var(--bp-spacing-sm) var(--bp-spacing-md);
+    font-size: var(--bp-font-size-base);
+  }
+
+  .select--md .select-option {
+    padding: var(--bp-spacing-sm) var(--bp-spacing-md);
+    font-size: var(--bp-font-size-base);
+  }
+
+  .select--lg .select-trigger {
+    padding: var(--bp-spacing-md) var(--bp-spacing-lg);
+    font-size: var(--bp-font-size-lg);
+  }
+
+  .select--lg .select-option {
+    padding: var(--bp-spacing-md) var(--bp-spacing-lg);
+    font-size: var(--bp-font-size-lg);
+  }
+
+  /* States */
+  .select-trigger:hover:not(.select--disabled .select-trigger) {
+    border-color: var(--bp-color-primary);
+  }
+
+  .select-trigger:focus {
+    outline: none;
+  }
+
+  .select-trigger:focus-visible {
+    outline: var(--bp-focus-width) solid var(--bp-color-primary);
+    outline-offset: var(--bp-focus-offset);
+    border-color: var(--bp-color-primary);
+  }
+
+  .select--open .select-trigger {
+    border-color: var(--bp-color-primary);
+  }
+
+  .select--open .select-icon {
+    transform: rotate(180deg);
+    color: var(--bp-color-primary);
+  }
+
+  .select--disabled .select-trigger {
+    opacity: 0.5;
+    cursor: not-allowed;
+    background-color: var(--bp-color-surface-subdued);
+  }
+
+  /* iOS zoom prevention: ensure 16px minimum on touch devices */
+  @media (max-width: 768px) {
+    .select--sm .select-trigger {
+      font-size: 16px;
+    }
+
+    .select--sm .select-option {
+      font-size: 16px;
+    }
+  }
+`;
+var y = Object.defineProperty, O = Object.getOwnPropertyDescriptor, n = (t, s, o, e) => {
+  for (var i = e > 1 ? void 0 : e ? O(s, o) : s, r = t.length - 1, l; r >= 0; r--)
+    (l = t[r]) && (i = (e ? l(s, o, i) : l(i)) || i);
+  return e && i && y(s, o, i), i;
+};
+let a = class extends f {
+  constructor() {
+    super(), this.isOpen = !1, this.selectedLabel = "", this.focusedIndex = -1, this.handleSlotChange = () => {
+      this.updateSelectedLabel();
+    }, this.handleDocumentClick = (t) => {
+      this.contains(t.target) || (this.isOpen = !1);
+    }, this.handleToggle = (t) => {
+      t?.stopPropagation(), !this.disabled && (this.isOpen = !this.isOpen);
+    }, this.handleOptionClick = (t) => {
+      if (this.disabled) return;
+      const s = t.currentTarget, o = s.dataset.value || "", e = s.dataset.label || "", i = this.value;
+      this.value = o, this.selectedLabel = e, this.isOpen = !1, this.focusedIndex = -1, this.dispatchEvent(
+        new CustomEvent("bp-change", {
+          detail: {
+            value: this.value,
+            label: this.selectedLabel,
+            previousValue: i
+          },
+          bubbles: !0,
+          composed: !0
+        })
+      );
+      const r = this.shadowRoot?.querySelector('input[type="hidden"]');
+      r && (r.value = this.value, r.dispatchEvent(new Event("change", { bubbles: !0 })));
+    }, this.handleKeyDown = (t) => {
+      if (this.disabled) return;
+      const s = this.getOptions();
+      switch (t.key) {
+        case "Enter":
+        case " ":
+          if (t.preventDefault(), this.isOpen && this.focusedIndex >= 0) {
+            const o = s[this.focusedIndex];
+            if (o) {
+              const e = o.value || o.textContent || "", i = o.textContent || "", r = this.value;
+              this.value = e, this.selectedLabel = i, this.isOpen = !1, this.focusedIndex = -1, this.dispatchEvent(
+                new CustomEvent("bp-change", {
+                  detail: {
+                    value: this.value,
+                    label: this.selectedLabel,
+                    previousValue: r
+                  },
+                  bubbles: !0,
+                  composed: !0
+                })
+              );
+              const l = this.shadowRoot?.querySelector(
+                'input[type="hidden"]'
+              );
+              l && (l.value = this.value, l.dispatchEvent(new Event("change", { bubbles: !0 })));
+            }
+          } else
+            this.handleToggle();
+          break;
+        case "Escape":
+          this.isOpen = !1, this.focusedIndex = -1;
+          break;
+        case "ArrowDown":
+          t.preventDefault(), this.isOpen ? this.focusedIndex = Math.min(
+            this.focusedIndex + 1,
+            s.length - 1
+          ) : (this.isOpen = !0, this.focusedIndex = 0), this.scrollFocusedOptionIntoView();
+          break;
+        case "ArrowUp":
+          t.preventDefault(), this.isOpen ? this.focusedIndex = Math.max(this.focusedIndex - 1, 0) : (this.isOpen = !0, this.focusedIndex = s.length - 1), this.scrollFocusedOptionIntoView();
+          break;
+        case "Home":
+          this.isOpen && (t.preventDefault(), this.focusedIndex = 0, this.scrollFocusedOptionIntoView());
+          break;
+        case "End":
+          this.isOpen && (t.preventDefault(), this.focusedIndex = s.length - 1, this.scrollFocusedOptionIntoView());
+          break;
+      }
+    }, this.getOptionElements = () => {
+      const o = (this.shadowRoot?.querySelector("slot")?.assignedElements() || []).filter(
+        (e) => e.tagName === "OPTION"
+      );
+      return w(
+        o,
+        (e) => e.value || e.textContent || "",
+        (e, i) => {
+          const r = e.value || e.textContent || "", l = e.textContent || "", d = this.value === r, u = this.focusedIndex === i;
+          return d && !this.selectedLabel && (this.selectedLabel = l), p`
+          <div
+            class="select-option ${d ? "select-option--selected" : ""} ${u ? "select-option--focused" : ""}"
+            part="option"
+            role="option"
+            aria-selected="${d ? "true" : "false"}"
+            data-value="${r}"
+            data-label="${l}"
+            tabindex="-1"
+            @click=${this.handleOptionClick}
+          >
+            ${l}
+          </div>
+        `;
+        }
+      );
+    }, this.value = "", this.name = "", this.label = "", this.placeholder = "Select an option", this.disabled = !1, this.required = !1, this.size = "md";
+  }
+  connectedCallback() {
+    super.connectedCallback(), document.addEventListener("click", this.handleDocumentClick, {
+      passive: !0
+    }), this.updateComplete.then(() => this.updateSelectedLabel());
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), document.removeEventListener("click", this.handleDocumentClick, {
+      passive: !0
+    });
+  }
+  updateSelectedLabel() {
+    if (!this.value) return;
+    (this.shadowRoot?.querySelector("slot")?.assignedElements() || []).filter(
+      (e) => e.tagName === "OPTION"
+    ).forEach((e) => {
+      (e.value || e.textContent) === this.value && (this.selectedLabel = e.textContent || "");
+    });
+  }
+  getOptions() {
+    return (this.shadowRoot?.querySelector("slot")?.assignedElements() || []).filter(
+      (e) => e.tagName === "OPTION"
+    ).map((e) => ({
+      value: e.value || e.textContent || "",
+      textContent: e.textContent || ""
+    }));
+  }
+  scrollFocusedOptionIntoView() {
+    this.updateComplete.then(() => {
+      const t = this.shadowRoot?.querySelector(
+        ".select-option--focused"
+      );
+      t && t.scrollIntoView({ block: "nearest", behavior: "smooth" });
+    });
+  }
+  /**
+   * Returns the longest text among all options and the placeholder.
+   * Used by a hidden sizer element to keep the trigger width stable.
+   */
+  getSizerText() {
+    const t = this.getOptions();
+    let s = this.placeholder || "";
+    for (const o of t) {
+      const e = o.textContent || "";
+      e.length > s.length && (s = e);
+    }
+    return s;
+  }
+  render() {
+    const t = {
+      select: !0,
+      [`select--${this.size}`]: !0,
+      "select--disabled": this.disabled,
+      "select--open": this.isOpen
+    }, s = this.selectedLabel || this.placeholder, o = this.label ? "select-label" : void 0;
+    return p`
+      <div class=${m(t)} part="container">
+        ${this.label ? p`
+              <label class="select-label" id="select-label" part="label">
+                ${this.label}
+                ${this.required ? p`<span class="select-required">*</span>` : ""}
+              </label>
+            ` : ""}
+        <!-- Hidden input for form integration (using input instead of select to avoid Firefox conflict) -->
+        <input
+          type="hidden"
+          name=${b(this.name || void 0)}
+          .value=${this.value}
+        />
+
+        <!-- Slot for option elements (not rendered, just for content projection) -->
+        <slot
+          @slotchange=${this.handleSlotChange}
+          style="display: none;"
+        ></slot>
+
+        <!-- Custom select trigger -->
+        <div
+          class="select-trigger"
+          part="trigger"
+          role="combobox"
+          aria-expanded="${this.isOpen ? "true" : "false"}"
+          aria-haspopup="listbox"
+          aria-labelledby="${b(o)}"
+          aria-disabled="${this.disabled ? "true" : "false"}"
+          aria-required="${this.required ? "true" : "false"}"
+          tabindex="${this.disabled ? "-1" : "0"}"
+          @click=${this.handleToggle}
+          @keydown=${this.handleKeyDown}
+        >
+          <span class="select-value" part="display">
+            <span class="select-value__sizer" aria-hidden="true"
+              >${this.getSizerText()}</span
+            >
+            <span class="select-value__display">${s}</span>
+          </span>
+          <svg
+            class="select-icon"
+            part="icon"
+            viewBox="0 0 16 16"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M4 6L8 10L12 6"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            />
+          </svg>
+        </div>
+
+        <!-- Dropdown menu -->
+        ${this.isOpen ? p`
+              <div class="select-dropdown" part="dropdown" role="listbox">
+                ${this.getOptionElements()}
+              </div>
+            ` : null}
+      </div>
+    `;
+  }
+};
+a.styles = [x];
+n([
+  c({ type: String, reflect: !0 })
+], a.prototype, "value", 2);
+n([
+  c({ type: String })
+], a.prototype, "name", 2);
+n([
+  c({ type: String, reflect: !0 })
+], a.prototype, "label", 2);
+n([
+  c({ type: String })
+], a.prototype, "placeholder", 2);
+n([
+  c({ type: Boolean, reflect: !0 })
+], a.prototype, "disabled", 2);
+n([
+  c({ type: Boolean, reflect: !0 })
+], a.prototype, "required", 2);
+n([
+  c({ type: String, reflect: !0 })
+], a.prototype, "size", 2);
+n([
+  h()
+], a.prototype, "isOpen", 2);
+n([
+  h()
+], a.prototype, "selectedLabel", 2);
+n([
+  h()
+], a.prototype, "focusedIndex", 2);
+a = n([
+  g("bp-select")
+], a);
+export {
+  a as BpSelect
+};
+//# sourceMappingURL=select.js.map

package/dist/components/select.js.map

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