@krollins/blueprint 0.2.2 → 0.3.0

package/dist/shared/radio-group-Cey9Yz5s.js

@@ -0,0 +1,163 @@
+import { t as e } from "./decorate-BJVyhdRd.js";
+import { t } from "./form-control-CBEBNz12.js";
+import { a as n, i as r, r as i } from "./field-message-CPXPLd6z.js";
+import { LitElement as a, css as o, html as s, nothing as c } from "lit";
+import { customElement as l, property as u } from "lit/decorators.js";
+import { classMap as d } from "lit/directives/class-map.js";
+//#region source/components/radio-group/radio-group.style.ts
+var f = o`
+  :host {
+    display: block;
+    font-family: var(--bp-font-family);
+  }
+
+  .radio-group__label {
+    margin-bottom: var(--bp-spacing-xs);
+    font-size: var(--bp-font-size-sm);
+    font-weight: var(--bp-font-weight-medium);
+    line-height: var(--bp-line-height-normal);
+    color: var(--bp-color-text);
+  }
+
+  .radio-group__required {
+    color: var(--bp-color-error);
+    margin-left: var(--bp-spacing-xs);
+  }
+
+  .radio-group__options {
+    display: flex;
+    flex-direction: column;
+    gap: var(--bp-spacing-sm);
+  }
+
+  .radio-group--horizontal .radio-group__options {
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--bp-spacing-sm) var(--bp-spacing-lg);
+  }
+`, p = ["ArrowDown", "ArrowRight"], m = ["ArrowUp", "ArrowLeft"], h = class extends t(a) {
+	static {
+		this.styles = [r, f];
+	}
+	constructor() {
+		super(), this.disabledByGroup = /* @__PURE__ */ new Set(), this.handleRadioChange = (e) => {
+			if (e.target === this) return;
+			let t = e.target;
+			if (t.localName === "bp-radio") {
+				if (e.stopImmediatePropagation(), !t.checked || t.value === this.value) {
+					this.syncRadios();
+					return;
+				}
+				this.value = t.value, this.dispatchEvent(new CustomEvent("bp-change", {
+					detail: { value: this.value },
+					bubbles: !0,
+					composed: !0
+				}));
+			}
+		}, this.handleKeyDown = (e) => {
+			let t = p.includes(e.key);
+			if (!t && !m.includes(e.key)) return;
+			let n = this.radios.filter((e) => !e.disabled);
+			if (n.length === 0) return;
+			let r = n[(n.findIndex((t) => t === e.target) + (t ? 1 : -1) + n.length) % n.length] ?? n[0];
+			e.preventDefault(), r.focus(), r.select();
+		}, this.label = "", this.description = "", this.helperText = "", this.errorMessage = "", this.name = "", this.value = "", this.required = !1, this.disabled = !1, this.orientation = "vertical", this.addEventListener("bp-change", this.handleRadioChange), this.addEventListener("keydown", this.handleKeyDown);
+	}
+	get radios() {
+		let e = this.renderRoot?.querySelector("slot");
+		if (!e) return [];
+		let t = [];
+		for (let n of e.assignedElements({ flatten: !0 })) n.localName === "bp-radio" && t.push(n), t.push(...Array.from(n.querySelectorAll("bp-radio")));
+		return t;
+	}
+	updated(e) {
+		super.updated(e), e.has("disabled") && this.syncDisabled(), this.syncRadios();
+	}
+	syncDisabled() {
+		if (this.disabled) for (let e of this.radios) e.disabled || (e.disabled = !0, this.disabledByGroup.add(e));
+		else {
+			for (let e of this.disabledByGroup) e.disabled = !1;
+			this.disabledByGroup.clear();
+		}
+	}
+	syncRadios() {
+		let e = this.radios;
+		for (let t of e) t.name &&= "", t.checked = this.value !== "" && t.value === this.value;
+		let t = e.filter((e) => !e.disabled), n = t.find((e) => e.checked) ?? t[0];
+		for (let t of e) t.tabIndex = t === n ? 0 : -1;
+	}
+	handleSlotChange() {
+		this.disabled && this.syncDisabled(), this.syncRadios();
+	}
+	getFormValue() {
+		return this.value || null;
+	}
+	getFormValidity() {
+		return this.required && !this.value ? {
+			flags: { valueMissing: !0 },
+			message: "Please select one of these options."
+		} : {
+			flags: {},
+			message: ""
+		};
+	}
+	getValidityAnchor() {
+		return this.radios.find((e) => e.tabIndex === 0) ?? null;
+	}
+	render() {
+		let e = {
+			helperText: this.helperText || this.description,
+			errorMessage: this.errorMessage
+		}, { invalid: t, describedBy: r } = i(e);
+		return s`
+      <div
+        class=${d({
+			"radio-group": !0,
+			[`radio-group--${this.orientation}`]: !0,
+			"radio-group--invalid": t
+		})}
+        part="group"
+        role="radiogroup"
+        aria-labelledby=${this.label ? "label" : c}
+        aria-describedby=${r ?? c}
+        aria-required=${this.required ? "true" : c}
+        aria-invalid=${t ? "true" : c}
+        aria-disabled=${this.disabled ? "true" : c}
+      >
+        ${this.label ? s`<div id="label" class="radio-group__label" part="label">
+                ${this.label}
+                ${this.required ? s`<span
+                        class="radio-group__required"
+                        aria-hidden="true"
+                        >*</span
+                      >` : c}
+              </div>` : c}
+        <div class="radio-group__options" part="options">
+          <slot @slotchange=${this.handleSlotChange}></slot>
+        </div>
+        ${n(e)}
+      </div>
+    `;
+	}
+};
+e([u({ type: String })], h.prototype, "label", void 0), e([u({ type: String })], h.prototype, "helperText", void 0), e([u({ type: String })], h.prototype, "errorMessage", void 0), e([u({ type: String })], h.prototype, "description", void 0), e([u({
+	type: String,
+	reflect: !0
+})], h.prototype, "name", void 0), e([u({
+	type: String,
+	reflect: !0
+})], h.prototype, "value", void 0), e([u({
+	type: Boolean,
+	reflect: !0
+})], h.prototype, "required", void 0), e([u({
+	type: Boolean,
+	reflect: !0
+})], h.prototype, "disabled", void 0), e([u({
+	type: String,
+	reflect: !0
+})], h.prototype, "orientation", void 0), h = e([l("bp-radio-group")], h);
+//#endregion
+export { h as t };
+
+//# sourceMappingURL=radio-group-Cey9Yz5s.js.map

package/dist/shared/radio-group-Cey9Yz5s.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio-group-Cey9Yz5s.js","names":["_decorate","__decorate","renderFieldMessage","fieldMessageStyles","fieldMessageState","radioGroupStyles","NEXT_KEYS","PREV_KEYS","BpRadioGroup","FormControlMixin","LitElement","event","radio","forward","enabled","r","next","slot","radios","el","changed","tabbable","message","classMap","invalid","nothing","describedBy","property","customElement"],"sources":["../../source/components/radio-group/radio-group.style.ts","../../source/components/radio-group/radio-group.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const radioGroupStyles = css`\n  :host {\n    display: block;\n    font-family: var(--bp-font-family);\n  }\n\n  .radio-group__label {\n    margin-bottom: var(--bp-spacing-xs);\n    font-size: var(--bp-font-size-sm);\n    font-weight: var(--bp-font-weight-medium);\n    line-height: var(--bp-line-height-normal);\n    color: var(--bp-color-text);\n  }\n\n  .radio-group__required {\n    color: var(--bp-color-error);\n    margin-left: var(--bp-spacing-xs);\n  }\n\n  .radio-group__options {\n    display: flex;\n    flex-direction: column;\n    gap: var(--bp-spacing-sm);\n  }\n\n  .radio-group--horizontal .radio-group__options {\n    flex-direction: row;\n    flex-wrap: wrap;\n    align-items: center;\n    gap: var(--bp-spacing-sm) var(--bp-spacing-lg);\n  }\n`;\n","import { LitElement, html, nothing, type PropertyValues } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { radioGroupStyles } from './radio-group.style.js';\nimport { FormControlMixin } from '../../utilities/form-control.js';\nimport {\n  fieldMessageState,\n  renderFieldMessage,\n  fieldMessageStyles,\n} from '../../utilities/field-message.js';\nimport type { BpRadio } from '../radio/radio.js';\n\nexport type RadioGroupOrientation = 'vertical' | 'horizontal';\n\nconst NEXT_KEYS = ['ArrowDown', 'ArrowRight'];\nconst PREV_KEYS = ['ArrowUp', 'ArrowLeft'];\n\n/**\n * Groups `<bp-radio>` elements into a single choice: one `value`, one\n * `name` for form submission, a visible label, and the keyboard model of a\n * native radio group (Tab enters at the selected radio, arrow keys move and\n * select).\n *\n * Put `name`, `value`, `required` and `disabled` on the group, not on the\n * radios: the group submits the selected value itself, so it clears `name`\n * on its radios to avoid submitting the value twice.\n *\n * @element bp-radio-group\n *\n * @slot - The `<bp-radio>` options\n *\n * @fires bp-change - When the selection changes. Detail: `{ value: string }`\n *\n * @csspart group - The element with role=\"radiogroup\"\n * @csspart label - The group label\n * @csspart helper-text - The helper text\n * @csspart options - The wrapper around the radios\n * @csspart error-message - The error message\n */\n@customElement('bp-radio-group')\nexport class BpRadioGroup extends FormControlMixin(LitElement) {\n  /** Visible group label */\n  @property({ type: String }) declare label: string;\n\n  /** Helper text displayed below the options */\n  @property({ type: String }) declare helperText: string;\n\n  /**\n   * Error text. When set, the group is invalid: the message replaces the\n   * helper text and is announced.\n   */\n  @property({ type: String }) declare errorMessage: string;\n\n  /** @deprecated Use `helperText`. */\n  @property({ type: String }) declare description: string;\n\n  /** Name submitted with the form */\n  @property({ type: String, reflect: true }) declare name: string;\n\n  /** Value of the selected radio ('' when none is selected) */\n  @property({ type: String, reflect: true }) declare value: string;\n\n  /** Requires a selection before the form can submit */\n  @property({ type: Boolean, reflect: true }) declare required: boolean;\n\n  /** Disables every radio in the group */\n  @property({ type: Boolean, reflect: true }) declare disabled: boolean;\n\n  /** Stack the radios vertically or lay them out in a wrapping row */\n  @property({ type: String, reflect: true })\n  declare orientation: RadioGroupOrientation;\n\n  /** Radios this group disabled, so re-enabling leaves the rest alone */\n  private disabledByGroup = new Set<BpRadio>();\n\n  static styles = [fieldMessageStyles, radioGroupStyles];\n\n  constructor() {\n    super();\n    this.label = '';\n    this.description = '';\n    this.helperText = '';\n    this.errorMessage = '';\n    this.name = '';\n    this.value = '';\n    this.required = false;\n    this.disabled = false;\n    this.orientation = 'vertical';\n    this.addEventListener('bp-change', this.handleRadioChange);\n    this.addEventListener('keydown', this.handleKeyDown);\n  }\n\n  /** The `<bp-radio>` elements in the group, in document order */\n  get radios(): BpRadio[] {\n    const slot = this.renderRoot?.querySelector<HTMLSlotElement>('slot');\n    if (!slot) return [];\n    const radios: BpRadio[] = [];\n    for (const el of slot.assignedElements({ flatten: true })) {\n      if (el.localName === 'bp-radio') radios.push(el as BpRadio);\n      radios.push(\n        ...(Array.from(el.querySelectorAll('bp-radio')) as BpRadio[])\n      );\n    }\n    return radios;\n  }\n\n  protected updated(changed: PropertyValues): void {\n    super.updated(changed);\n    if (changed.has('disabled')) this.syncDisabled();\n    this.syncRadios();\n  }\n\n  private syncDisabled(): void {\n    if (this.disabled) {\n      for (const radio of this.radios) {\n        if (!radio.disabled) {\n          radio.disabled = true;\n          this.disabledByGroup.add(radio);\n        }\n      }\n    } else {\n      for (const radio of this.disabledByGroup) radio.disabled = false;\n      this.disabledByGroup.clear();\n    }\n  }\n\n  /** Mirror `value` onto the radios and keep exactly one in the tab order */\n  private syncRadios(): void {\n    const radios = this.radios;\n    for (const radio of radios) {\n      if (radio.name) radio.name = '';\n      radio.checked = this.value !== '' && radio.value === this.value;\n    }\n    const enabled = radios.filter((r) => !r.disabled);\n    const tabbable = enabled.find((r) => r.checked) ?? enabled[0];\n    for (const radio of radios) {\n      radio.tabIndex = radio === tabbable ? 0 : -1;\n    }\n  }\n\n  private handleSlotChange(): void {\n    if (this.disabled) this.syncDisabled();\n    this.syncRadios();\n  }\n\n  private handleRadioChange = (event: Event): void => {\n    // A radio's own bp-change becomes the group's bp-change.\n    if (event.target === this) return;\n    const radio = event.target as BpRadio;\n    if (radio.localName !== 'bp-radio') return;\n    // Registered in the constructor, so this runs before any listener added\n    // later on the group: they only ever see the group's own event.\n    event.stopImmediatePropagation();\n    if (!radio.checked || radio.value === this.value) {\n      this.syncRadios();\n      return;\n    }\n    this.value = radio.value;\n    this.dispatchEvent(\n      new CustomEvent('bp-change', {\n        detail: { value: this.value },\n        bubbles: true,\n        composed: true,\n      })\n    );\n  };\n\n  private handleKeyDown = (event: KeyboardEvent): void => {\n    const forward = NEXT_KEYS.includes(event.key);\n    if (!forward && !PREV_KEYS.includes(event.key)) return;\n    const enabled = this.radios.filter((r) => !r.disabled);\n    if (enabled.length === 0) return;\n    const current = enabled.findIndex((r) => r === event.target);\n    const step = forward ? 1 : -1;\n    const next =\n      enabled[(current + step + enabled.length) % enabled.length] ?? enabled[0];\n    event.preventDefault();\n    next.focus();\n    next.select();\n  };\n\n  /** Like a native radio group, submit nothing until a radio is selected */\n  getFormValue(): string | null {\n    return this.value || null;\n  }\n\n  getFormValidity() {\n    if (this.required && !this.value) {\n      return {\n        flags: { valueMissing: true },\n        message: 'Please select one of these options.',\n      };\n    }\n    return { flags: {}, message: '' };\n  }\n\n  /** Point the browser's \"please select\" bubble at the group's tab stop */\n  getValidityAnchor(): HTMLElement | null {\n    return this.radios.find((r) => r.tabIndex === 0) ?? null;\n  }\n\n  render() {\n    const message = {\n      helperText: this.helperText || this.description,\n      errorMessage: this.errorMessage,\n    };\n    const { invalid, describedBy } = fieldMessageState(message);\n\n    return html`\n      <div\n        class=${classMap({\n          'radio-group': true,\n          [`radio-group--${this.orientation}`]: true,\n          'radio-group--invalid': invalid,\n        })}\n        part=\"group\"\n        role=\"radiogroup\"\n        aria-labelledby=${this.label ? 'label' : nothing}\n        aria-describedby=${describedBy ?? nothing}\n        aria-required=${this.required ? 'true' : nothing}\n        aria-invalid=${invalid ? 'true' : nothing}\n        aria-disabled=${this.disabled ? 'true' : nothing}\n      >\n        ${\n          this.label\n            ? html`<div id=\"label\" class=\"radio-group__label\" part=\"label\">\n                ${this.label}\n                ${\n                  this.required\n                    ? html`<span\n                        class=\"radio-group__required\"\n                        aria-hidden=\"true\"\n                        >*</span\n                      >`\n                    : nothing\n                }\n              </div>`\n            : nothing\n        }\n        <div class=\"radio-group__options\" part=\"options\">\n          <slot @slotchange=${this.handleSlotChange}></slot>\n        </div>\n        ${renderFieldMessage(message)}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'bp-radio-group': BpRadioGroup;\n  }\n}\n"],"mappings":"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"}

package/dist/shared/select-Dz52figi.js

@@ -0,0 +1,465 @@
+import { t as e } from "./decorate-BJVyhdRd.js";
+import { t } from "./form-control-CBEBNz12.js";
+import { a as n, i as r, r as i } from "./field-message-CPXPLd6z.js";
+import { LitElement as a, css as o, html as s, nothing as c } from "lit";
+import { customElement as l, property as u, state as d } from "lit/decorators.js";
+import { ifDefined as f } from "lit/directives/if-defined.js";
+import { classMap as p } from "lit/directives/class-map.js";
+import { repeat as m } from "lit/directives/repeat.js";
+//#region source/components/select/select.style.ts
+var h = o`
+  /* 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-input-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);
+  }
+
+  /* Invalid: error border, also while hovered, focused or open */
+  .select.select--invalid .select-trigger,
+  .select.select--invalid .select-trigger:hover,
+  .select.select--invalid .select-trigger:focus-visible {
+    border-color: var(--bp-color-error);
+  }
+
+  .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;
+    }
+  }
+`, g = class extends t(a) {
+	static {
+		this.styles = [r, h];
+	}
+	constructor() {
+		super(), this.isOpen = !1, this.selectedLabel = "", this.focusedIndex = -1, this.handleSlotChange = () => {
+			this.updateSelectedLabel();
+		}, this.handleDocumentClick = (e) => {
+			this.contains(e.target) || (this.isOpen = !1);
+		}, this.handleToggle = (e) => {
+			e?.stopPropagation(), !this.disabled && (this.isOpen = !this.isOpen);
+		}, this.handleOptionClick = (e) => {
+			if (this.disabled) return;
+			let t = e.currentTarget, n = t.dataset.value || "", r = t.dataset.label || "", i = this.value;
+			this.value = n, this.selectedLabel = r, 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
+			}));
+			let a = this.shadowRoot?.querySelector("input[type=\"hidden\"]");
+			a && (a.value = this.value, a.dispatchEvent(new Event("change", { bubbles: !0 })));
+		}, this.handleKeyDown = (e) => {
+			if (this.disabled) return;
+			let t = this.getOptions();
+			switch (e.key) {
+				case "Enter":
+				case " ":
+					if (e.preventDefault(), this.isOpen && this.focusedIndex >= 0) {
+						let e = t[this.focusedIndex];
+						if (e) {
+							let t = e.value || e.textContent || "", n = e.textContent || "", r = this.value;
+							this.value = t, this.selectedLabel = n, 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
+							}));
+							let i = this.shadowRoot?.querySelector("input[type=\"hidden\"]");
+							i && (i.value = this.value, i.dispatchEvent(new Event("change", { bubbles: !0 })));
+						}
+					} else this.handleToggle();
+					break;
+				case "Escape":
+					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), this.scrollFocusedOptionIntoView();
+					break;
+				case "ArrowUp":
+					e.preventDefault(), this.isOpen ? this.focusedIndex = Math.max(this.focusedIndex - 1, 0) : (this.isOpen = !0, this.focusedIndex = t.length - 1), this.scrollFocusedOptionIntoView();
+					break;
+				case "Home":
+					this.isOpen && (e.preventDefault(), this.focusedIndex = 0, this.scrollFocusedOptionIntoView());
+					break;
+				case "End": this.isOpen && (e.preventDefault(), this.focusedIndex = t.length - 1, this.scrollFocusedOptionIntoView());
+			}
+		}, this.getOptionElements = () => {
+			let e = ((this.shadowRoot?.querySelector("slot"))?.assignedElements() || []).filter((e) => e.tagName === "OPTION");
+			return m(e, (e) => e.value || e.textContent || "", (e, t) => {
+				let n = e.value || e.textContent || "", r = e.textContent || "", i = this.value === n, a = this.focusedIndex === t;
+				return i && !this.selectedLabel && (this.selectedLabel = r), s`
+          <div
+            class="select-option ${i ? "select-option--selected" : ""} ${a ? "select-option--focused" : ""}"
+            part="option"
+            role="option"
+            aria-selected="${i ? "true" : "false"}"
+            data-value="${n}"
+            data-label="${r}"
+            tabindex="-1"
+            @click=${this.handleOptionClick}
+          >
+            ${r}
+          </div>
+        `;
+			});
+		}, this.value = "", this.name = "", this.label = "", this.helperText = "", this.errorMessage = "", 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() {
+		this.value && ((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(() => {
+			let e = this.shadowRoot?.querySelector(".select-option--focused");
+			e && e.scrollIntoView({
+				block: "nearest",
+				behavior: "smooth"
+			});
+		});
+	}
+	getSizerText() {
+		let e = this.getOptions(), t = this.placeholder || "";
+		for (let n of e) {
+			let e = n.textContent || "";
+			e.length > t.length && (t = e);
+		}
+		return t;
+	}
+	render() {
+		let e = {
+			helperText: this.helperText,
+			errorMessage: this.errorMessage,
+			invalid: !1
+		}, { invalid: t, describedBy: r } = i(e), a = {
+			select: !0,
+			[`select--${this.size}`]: !0,
+			"select--disabled": this.disabled,
+			"select--open": this.isOpen,
+			"select--invalid": t
+		}, o = this.selectedLabel || this.placeholder, l = this.label ? "select-label" : void 0;
+		return s`
+      <div class=${p(a)} part="container">
+        ${this.label ? s`
+                <label class="select-label" id="select-label" part="label">
+                  ${this.label}
+                  ${this.required ? s`<span class="select-required">*</span>` : ""}
+                </label>
+              ` : ""}
+        <!-- Hidden input for form integration (using input instead of select to avoid Firefox conflict) -->
+        <input
+          type="hidden"
+          name=${f(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="${f(l)}"
+          aria-disabled="${this.disabled ? "true" : "false"}"
+          aria-required="${this.required ? "true" : "false"}"
+          aria-invalid=${t ? "true" : c}
+          aria-describedby=${r ?? c}
+          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">${o}</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 ? s`
+                <div class="select-dropdown" part="dropdown" role="listbox">
+                  ${this.getOptionElements()}
+                </div>
+              ` : null}
+      </div>
+      ${n(e)}
+    `;
+	}
+};
+e([u({
+	type: String,
+	reflect: !0
+})], g.prototype, "value", void 0), e([u({ type: String })], g.prototype, "name", void 0), e([u({
+	type: String,
+	reflect: !0
+})], g.prototype, "label", void 0), e([u({ type: String })], g.prototype, "helperText", void 0), e([u({ type: String })], g.prototype, "errorMessage", void 0), e([u({ type: String })], g.prototype, "placeholder", void 0), e([u({
+	type: Boolean,
+	reflect: !0
+})], g.prototype, "disabled", void 0), e([u({
+	type: Boolean,
+	reflect: !0
+})], g.prototype, "required", void 0), e([u({
+	type: String,
+	reflect: !0
+})], g.prototype, "size", void 0), e([d()], g.prototype, "isOpen", void 0), e([d()], g.prototype, "selectedLabel", void 0), e([d()], g.prototype, "focusedIndex", void 0), g = e([l("bp-select")], g);
+//#endregion
+export { g as t };
+
+//# sourceMappingURL=select-Dz52figi.js.map