@krollins/blueprint 0.1.11 → 0.1.13

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