solid-ui 3.1.3-6 → 3.1.3-7

package/dist/components/combobox/Combobox.esm.js

@@ -4,35 +4,36 @@ import n from "../../lib/components/traits/InputTrait.esm.js";
 import "../../lib/components/index.esm.js";
 import "../../_virtual/~icons/lucide/chevron-down.esm.js";
 import r from "./Combobox.styles.esm.js";
-import { html as i } from "lit";
-import { property as a, query as o, state as s } from "lit/decorators.js";
+import { html as i, nothing as a } from "lit";
+import { property as o, query as s, state as c } from "lit/decorators.js";
+import "@awesome.me/webawesome/dist/components/popup/popup.js";
 //#region src/components/combobox/Combobox.ts
-var c, l, u, d, f, p, m, h, g, _, v, y, b, x, S, C, w, T, E, D, O, k, A, j, M, N, P, F, I, L, R;
-function z(e, t, n) {
-	B(e, t), t.set(e, n);
+var l, u, d, f, p, m, h, g, _, v, y, b, x, S, C, w, T, E, D, O, k, A, j, M, N, P, F, I, L, R, z, B, V, H;
+function U(e, t, n) {
+	W(e, t), t.set(e, n);
 }
-function B(e, t) {
+function W(e, t) {
 	if (t.has(e)) throw TypeError("Cannot initialize the same private elements twice on an object");
 }
-function V(e, t, n) {
-	return e.set(U(e, t), n), n;
+function G(e, t, n) {
+	return e.set(q(e, t), n), n;
 }
-function H(e, t) {
-	return e.get(U(e, t));
+function K(e, t) {
+	return e.get(q(e, t));
 }
-function U(e, t, n) {
+function q(e, t, n) {
 	if (typeof e == "function" ? e === t : e.has(t)) return arguments.length < 3 ? t : n;
 	throw TypeError("Private element is not present on this object");
 }
-function W(e, t, n) {
-	return (t = K(t)) in e ? Object.defineProperty(e, t, {
+function J(e, t, n) {
+	return (t = X(t)) in e ? Object.defineProperty(e, t, {
 		value: n,
 		enumerable: !0,
 		configurable: !0,
 		writable: !0
 	}) : e[t] = n, e;
 }
-function G(e, t, n, r, i, a) {
+function Y(e, t, n, r, i, a) {
 	function o(e, t, n) {
 		return function(r, i) {
 			return n && n(r), e[t].call(r, i);
@@ -55,13 +56,13 @@ function G(e, t, n, r, i, a) {
 			n || Array.isArray(_) || (_ = [_]);
 			var b = {}, x = [], S = i === 3 ? "get" : i === 4 || p ? "set" : "value";
 			d ? (f || p ? b = {
-				get: J(function() {
+				get: Q(function() {
 					return v(this);
 				}, r, "get"),
 				set: function(e) {
 					t[4](this, e);
 				}
-			} : b[S] = v, f || J(b[S], r, i === 2 ? "" : S)) : f || (b = Object.getOwnPropertyDescriptor(e, r));
+			} : b[S] = v, f || Q(b[S], r, i === 2 ? "" : S)) : f || (b = Object.getOwnPropertyDescriptor(e, r));
 		}
 		for (var C = e, w = _.length - 1; w >= 0; w -= n ? 2 : 1) {
 			var T = _[w], E = n ? _[w - 1] : void 0, D = {}, O = {
@@ -121,7 +122,7 @@ function G(e, t, n, r, i, a) {
 	if (arguments.length >= 6) var d = a[Symbol.metadata || Symbol.for("Symbol.metadata")];
 	var f = Object.create(d ?? null), p = function(e, t, n, r) {
 		var i, a, o = [], c = function(t) {
-			return Y(t) === e;
+			return ee(t) === e;
 		}, u = /* @__PURE__ */ new Map();
 		function d(e) {
 			e && o.push(s.bind(null, e));
@@ -135,7 +136,7 @@ function G(e, t, n, r, i, a) {
 					if (!0 === x || x === 3 && m !== 4 || x === 4 && m !== 3) throw Error("Attempted to decorate a public method/accessor that has the same name as a previously decorated public method/accessor. This is not currently supported by the decorators plugin. Property name was: " + h);
 					u.set(b, !(m > 2) || m);
 				}
-				l(v ? e : e.prototype, p, _, g ? "#" + h : K(h), m, r, v ? a ||= [] : i ||= [], o, v, g, y, m === 1, v && g ? c : n);
+				l(v ? e : e.prototype, p, _, g ? "#" + h : X(h), m, r, v ? a ||= [] : i ||= [], o, v, g, y, m === 1, v && g ? c : n);
 			}
 		}
 		return d(i), d(a), o;
@@ -148,11 +149,11 @@ function G(e, t, n, r, i, a) {
 		}
 	};
 }
-function K(e) {
-	var t = q(e, "string");
+function X(e) {
+	var t = Z(e, "string");
 	return typeof t == "symbol" ? t : t + "";
 }
-function q(e, t) {
+function Z(e, t) {
 	if (typeof e != "object" || !e) return e;
 	var n = e[Symbol.toPrimitive];
 	if (n !== void 0) {
@@ -162,7 +163,7 @@ function q(e, t) {
 	}
 	return (t === "string" ? String : Number)(e);
 }
-function J(e, t, n) {
+function Q(e, t, n) {
 	typeof t == "symbol" && (t = (t = t.description) ? "[" + t + "]" : "");
 	try {
 		Object.defineProperty(e, "name", {
@@ -172,167 +173,275 @@ function J(e, t, n) {
 	} catch {}
 	return e;
 }
-function Y(e) {
+function ee(e) {
 	if (Object(e) !== e) throw TypeError("right-hand side of 'in' should be an object, got " + (e === null ? "null" : typeof e));
 	return e;
 }
-function X(e) {
+function te(e) {
 	return e;
 }
-b = [e("solid-ui-combobox")];
-var Z;
-new (L = (u = /*#__PURE__*/ new WeakMap(), d = /*#__PURE__*/ new WeakMap(), f = /*#__PURE__*/ new WeakMap(), p = /*#__PURE__*/ new WeakMap(), m = /*#__PURE__*/ new WeakMap(), h = /*#__PURE__*/ new WeakMap(), g = /*#__PURE__*/ new WeakMap(), _ = /*#__PURE__*/ new WeakMap(), R = (x = a({
+S = [e("solid-ui-combobox")];
+var $;
+new (V = (d = /*#__PURE__*/ new WeakMap(), f = /*#__PURE__*/ new WeakMap(), p = /*#__PURE__*/ new WeakMap(), m = /*#__PURE__*/ new WeakMap(), h = /*#__PURE__*/ new WeakMap(), g = /*#__PURE__*/ new WeakMap(), _ = /*#__PURE__*/ new WeakMap(), v = /*#__PURE__*/ new WeakMap(), y = /*#__PURE__*/ new WeakMap(), H = (C = o({
 	type: String,
 	reflect: !0
-}), C = a({
+}), T = o({
 	type: String,
 	reflect: !0
-}), T = a({ type: String }), D = a({
+}), D = o({ type: String }), k = o({
 	type: String,
 	reflect: !0
-}), k = a({
+}), j = o({
 	type: Boolean,
 	reflect: !0
-}), j = o("[popover]"), N = o("input"), F = s(), "label"), l = class extends t {
-	get [R]() {
-		return H(u, this);
+}), N = s("input"), F = c(), L = c(), z = c(), "label"), u = class extends t {
+	get [H]() {
+		return K(d, this);
 	}
 	set label(e) {
-		V(u, this, e);
+		G(d, this, e);
 	}
 	get name() {
-		return H(d, this);
+		return K(f, this);
 	}
 	set name(e) {
-		V(d, this, e);
+		G(f, this, e);
 	}
 	get value() {
-		return H(f, this);
+		return K(p, this);
 	}
 	set value(e) {
-		V(f, this, e);
+		G(p, this, e);
 	}
 	get placeholder() {
-		return H(p, this);
+		return K(m, this);
 	}
 	set placeholder(e) {
-		V(p, this, e);
+		G(m, this, e);
 	}
 	get required() {
-		return H(m, this);
+		return K(h, this);
 	}
 	set required(e) {
-		V(m, this, e);
-	}
-	get popoverElement() {
-		return H(h, this);
-	}
-	set popoverElement(e) {
-		V(h, this, e);
+		G(h, this, e);
 	}
 	get inputElement() {
-		return H(g, this);
+		return K(g, this);
 	}
 	set inputElement(e) {
-		V(g, this, e);
+		G(g, this, e);
 	}
 	get filter() {
-		return H(_, this);
+		return K(_, this);
 	}
 	set filter(e) {
-		V(_, this, e);
+		G(_, this, e);
+	}
+	get open() {
+		return K(v, this);
+	}
+	set open(e) {
+		G(v, this, e);
+	}
+	get activeIndex() {
+		return K(y, this);
+	}
+	set activeIndex(e) {
+		G(y, this, e);
 	}
 	constructor() {
-		super(), z(this, u, (v(this), S(this, ""))), z(this, d, w(this, "")), z(this, f, E(this, "")), z(this, p, O(this, "")), z(this, m, A(this, !1)), z(this, h, M(this, null)), z(this, g, P(this, null)), z(this, _, I(this, "")), W(this, "inputTrait", void 0), this.inputTrait = this.addTrait(new n(this, {
+		super(), U(this, d, (b(this), w(this, ""))), U(this, f, E(this, "")), U(this, p, O(this, "")), U(this, m, A(this, "")), U(this, h, M(this, !1)), U(this, g, P(this, null)), U(this, _, I(this, "")), U(this, v, R(this, !1)), U(this, y, B(this, -1)), J(this, "inputTrait", void 0), J(this, "openListenersAttached", !1), J(this, "listboxId", void 0), J(this, "handleDocumentFocusIn", (e) => {
+			e.composedPath().includes(this) || this.hide();
+		}), J(this, "handleDocumentMouseDown", (e) => {
+			e.composedPath().includes(this) || this.hide();
+		}), this.inputTrait = this.addTrait(new n(this, {
 			getInputElement: () => this.inputElement,
 			getInternals: () => this.getInternals(),
 			onValueChanged: (e) => {
 				this.filter = e.toLowerCase();
+				let t = this.getFilteredOptions();
+				if (t.length === 0) {
+					this.hide();
+					return;
+				}
+				this.open && (this.activeIndex = this.getInitialActiveIndex(t));
 			}
-		}));
+		})), this.listboxId = `listbox-${this.inputTrait.inputId}`;
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback(), this.removeOpenListeners();
 	}
 	render() {
-		let e = this.getOptions().filter((e) => e.label.toLowerCase().includes(this.filter));
+		let e = this.getFilteredOptions(), t = (this.open && this.activeIndex >= 0 ? e[this.activeIndex] : void 0) === void 0 ? void 0 : this.getOptionId(this.activeIndex), n = this.placeholder || "Combobox";
 		return i`
       ${this.inputTrait.renderLabel()}
-      <div class="input-wrapper">
-        <input
-          id="${this.inputTrait.inputId}"
-          type="text"
-          name=${this.name}
-          ?placeholder=${this.placeholder}
-          ?required=${this.required}
-          .value=${this.value}
-          @keydown=${this.onInputKeyDown}
-          @click=${this.onInputClick}
-          @input=${() => this.inputTrait.onInput()}
-        />
-        <icon-lucide-chevron-down></icon-lucide-chevron-down>
-      </div>
-      <div role="listbox" aria-labelledby="${this.inputTrait.inputId}" popover>
-        ${e.map((e) => i`<div
-              role="option"
-              aria-selected="false"
-              @click=${() => this.onOptionClick(e.value)}
-            >
-              ${e.label}
-            </div>`)}
-      </div>
+      <wa-popup
+        placement="bottom"
+        flip
+        shift
+        sync="width"
+        auto-size="vertical"
+        auto-size-padding="10"
+        ?active=${this.open}
+      >
+        <div class="input-wrapper" slot="anchor" @mousedown=${this.onAnchorMouseDown}>
+          <input
+            id="${this.inputTrait.inputId}"
+            type="text"
+            name=${this.name}
+            placeholder=${this.placeholder}
+            role="combobox"
+            aria-autocomplete="list"
+            aria-haspopup="listbox"
+            aria-expanded=${this.open ? "true" : "false"}
+            aria-controls=${this.listboxId}
+            aria-activedescendant=${t ?? a}
+            aria-labelledby=${this.label ? this.inputTrait.labelId : a}
+            aria-label=${this.label ? a : n}
+            aria-required=${this.required ? "true" : a}
+            autocomplete="off"
+            spellcheck="false"
+            ?required=${this.required}
+            .value=${this.value}
+            @keydown=${this.onInputKeyDown}
+            @focus=${this.onInputFocus}
+            @input=${() => this.inputTrait.onInput()}
+          />
+          <icon-lucide-chevron-down></icon-lucide-chevron-down>
+        </div>
+        <div
+          id=${this.listboxId}
+          class="listbox"
+          role="listbox"
+          aria-orientation="vertical"
+          aria-labelledby=${this.label ? this.inputTrait.labelId : a}
+          aria-label=${this.label ? a : n}
+          ?hidden=${!this.open}
+          @mouseup=${this.onListboxMouseUp}
+        >
+          ${e.map((e, t) => i`<div
+                id=${this.getOptionId(t)}
+                role="option"
+                aria-selected=${this.open && t === this.activeIndex ? "true" : "false"}
+                data-active=${t === this.activeIndex || a}
+                @mousemove=${() => this.setActiveIndex(t)}
+              >
+                ${e.label}
+              </div>`)}
+        </div>
+      </wa-popup>
     `;
 	}
+	getFilteredOptions() {
+		return this.getOptions().filter((e) => e.label.toLowerCase().includes(this.filter));
+	}
 	getOptions() {
 		let e = this.querySelectorAll("solid-ui-combobox-option");
 		return Array.from(e).map((e) => ({
 			value: e.value,
-			label: e.textContent
+			label: e.textContent ?? ""
 		}));
 	}
+	getOptionId(e) {
+		return `${this.listboxId}-option-${e}`;
+	}
+	getInitialActiveIndex(e) {
+		let t = e.findIndex((e) => e.value === this.value);
+		return t >= 0 ? t : e.length > 0 ? 0 : -1;
+	}
+	getNextIndex(e, t, n) {
+		return t.length === 0 ? -1 : (e + n + t.length) % t.length;
+	}
+	setActiveIndex(e) {
+		this.activeIndex = e;
+	}
+	show(e) {
+		if (this.open) return;
+		let t = this.getFilteredOptions();
+		t.length !== 0 && (this.open = !0, this.activeIndex = e?.focusLast ? t.length - 1 : this.getInitialActiveIndex(t), this.addOpenListeners(), requestAnimationFrame(() => this.scrollActiveOptionIntoView()));
+	}
+	hide() {
+		this.open && (this.open = !1, this.activeIndex = -1, this.removeOpenListeners());
+	}
+	selectOption(e) {
+		this.inputTrait.setValue(e), this.hide(), this.inputElement?.focus({ preventScroll: !0 });
+	}
+	scrollActiveOptionIntoView() {
+		this.activeIndex < 0 || this.shadowRoot?.querySelector(`#${this.getOptionId(this.activeIndex)}`)?.scrollIntoView({ block: "nearest" });
+	}
+	addOpenListeners() {
+		if (this.openListenersAttached) return;
+		document.addEventListener("focusin", this.handleDocumentFocusIn), document.addEventListener("mousedown", this.handleDocumentMouseDown);
+		let e = this.getRootNode();
+		e !== document && e.addEventListener("focusin", this.handleDocumentFocusIn), this.openListenersAttached = !0;
+	}
+	removeOpenListeners() {
+		if (!this.openListenersAttached) return;
+		document.removeEventListener("focusin", this.handleDocumentFocusIn), document.removeEventListener("mousedown", this.handleDocumentMouseDown);
+		let e = this.getRootNode();
+		e !== document && e.removeEventListener("focusin", this.handleDocumentFocusIn), this.openListenersAttached = !1;
+	}
+	onAnchorMouseDown(e) {
+		e.preventDefault(), this.inputElement?.focus({ preventScroll: !0 });
+	}
+	onInputFocus() {
+		this.show();
+	}
+	openPopupFromKey(e) {
+		this.open || this.show({ focusLast: e });
+	}
 	onInputKeyDown(e) {
+		let t = this.getFilteredOptions();
 		switch (e.key) {
 			case "ArrowDown":
-				e.preventDefault(), this.popoverElement?.showPopover();
+				e.preventDefault(), this.open ? (this.activeIndex = this.getNextIndex(this.activeIndex, t, 1), this.scrollActiveOptionIntoView()) : this.openPopupFromKey(!1);
+				break;
+			case "ArrowUp":
+				e.preventDefault(), this.open ? (this.activeIndex = this.getNextIndex(this.activeIndex, t, -1), this.scrollActiveOptionIntoView()) : this.openPopupFromKey(!0);
 				break;
 			case "Enter":
-				this.popoverElement?.matches(":popover-open") || (e.preventDefault(), this.inputTrait.onSubmit());
+				this.open && this.activeIndex >= 0 && t[this.activeIndex] ? (e.preventDefault(), this.selectOption(t[this.activeIndex].value)) : this.open || (e.preventDefault(), this.inputTrait.onSubmit());
+				break;
+			case "Escape":
+				this.open && (e.preventDefault(), e.stopPropagation(), this.hide(), this.inputElement?.focus({ preventScroll: !0 }));
+				break;
+			case "Tab":
+				this.hide();
 				break;
 		}
 	}
-	onInputClick(e) {
-		e.preventDefault(), this.popoverElement?.showPopover();
-	}
-	onOptionClick(e) {
-		this.inputTrait.setValue(e), this.popoverElement?.hidePopover();
+	onListboxMouseUp(e) {
+		if (!(e.target instanceof HTMLElement)) return;
+		let t = e.target.closest("[role=\"option\"]");
+		if (!t) return;
+		let n = t.id, r = Number.parseInt(n.replace(`${this.listboxId}-option-`, ""), 10), i = this.getFilteredOptions()[r];
+		i && this.selectOption(i.value);
 	}
-}, {e: [S, w, E, O, A, M, P, I, v], c: [Z, y]} = G(l, [
-	[
-		x,
-		1,
-		"label"
-	],
+}, {e: [w, E, O, A, M, P, I, R, B, b], c: [$, x]} = Y(u, [
 	[
 		C,
 		1,
-		"name"
+		"label"
 	],
 	[
 		T,
 		1,
-		"value"
+		"name"
 	],
 	[
 		D,
 		1,
-		"placeholder"
+		"value"
 	],
 	[
 		k,
 		1,
-		"required"
+		"placeholder"
 	],
 	[
 		j,
 		1,
-		"popoverElement"
+		"required"
 	],
 	[
 		N,
@@ -343,13 +452,23 @@ new (L = (u = /*#__PURE__*/ new WeakMap(), d = /*#__PURE__*/ new WeakMap(), f =
 		F,
 		1,
 		"filter"
+	],
+	[
+		L,
+		1,
+		"open"
+	],
+	[
+		z,
+		1,
+		"activeIndex"
 	]
-], b, 0, void 0, t), l), c = class extends X {
+], S, 0, void 0, t), u), l = class extends te {
 	constructor() {
-		super(Z), W(this, "styles", r), W(this, "formAssociated", !0), y();
+		super($), J(this, "styles", r), J(this, "formAssociated", !0), x();
 	}
-}, W(c, L, void 0), c)();
+}, J(l, V, void 0), l)();
 //#endregion
-export { Z as _Combobox };
+export { $ as default };
 
 //# sourceMappingURL=Combobox.esm.js.map

package/dist/components/combobox/Combobox.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"Combobox.esm.js","names":["customElement","WebComponent","html","property","query","state","InputTrait","styles","_classDecs","_Combobox","_Combobox2","_A","WeakMap","_B","_C","_D","_E","_F","_G","_H","_ref","_labelDecs","type","String","reflect","_nameDecs","_valueDecs","_placeholderDecs","_requiredDecs","Boolean","_popoverElementDecs","_inputElementDecs","_filterDecs","_Combobox3","Combobox","_classPrivateFieldGet","label","v","_classPrivateFieldSet","name","value","placeholder","required","popoverElement","inputElement","filter","constructor","_classPrivateFieldInitSpec","_initProto","_init_label","_init_name","_init_value","_init_placeholder","_init_required","_init_popoverElement","_init_inputElement","_init_filter","_defineProperty","inputTrait","addTrait","getInputElement","getInternals","onValueChanged","toLowerCase","render","options","getOptions","option","includes","renderLabel","inputId","onInputKeyDown","onInputClick","onInput","map","onOptionClick","querySelectorAll","Array","from","textContent","e","key","preventDefault","showPopover","matches","onSubmit","setValue","hidePopover","c","_initClass","_applyDecs","_Class","_identity","default"],"sources":["../../../src/components/combobox/Combobox.ts"],"sourcesContent":["import { customElement, WebComponent } from '@/lib/components'\nimport { html } from 'lit'\nimport { property, query, state } from 'lit/decorators.js'\nimport InputTrait from '@/lib/components/traits/InputTrait'\nimport type ComboboxOption from '@/components/combobox-option/ComboboxOption'\n\nimport '~icons/lucide/chevron-down'\n\nimport styles from './Combobox.styles.css'\n\n@customElement('solid-ui-combobox')\nexport default class Combobox extends WebComponent {\n  static styles = styles\n  static formAssociated = true\n\n  @property({ type: String, reflect: true })\n  accessor label = ''\n\n  @property({ type: String, reflect: true })\n  accessor name = ''\n\n  @property({ type: String })\n  accessor value = ''\n\n  @property({ type: String, reflect: true })\n  accessor placeholder = ''\n\n  @property({ type: Boolean, reflect: true })\n  accessor required = false\n\n  @query('[popover]')\n  private accessor popoverElement: HTMLDivElement | null = null\n\n  @query('input')\n  private accessor inputElement: HTMLInputElement | null = null\n\n  @state()\n  private accessor filter = ''\n\n  private inputTrait: InputTrait\n\n  constructor () {\n    super()\n\n    this.inputTrait = this.addTrait(\n      new InputTrait(this, {\n        getInputElement: () => this.inputElement,\n        getInternals: () => this.getInternals(),\n        onValueChanged: (value) => {\n          this.filter = value.toLowerCase()\n        },\n      })\n    )\n  }\n\n  protected render () {\n    const options = this.getOptions().filter((option) =>\n      option.label.toLowerCase().includes(this.filter)\n    )\n\n    return html`\n      ${this.inputTrait.renderLabel()}\n      <div class=\"input-wrapper\">\n        <input\n          id=\"${this.inputTrait.inputId}\"\n          type=\"text\"\n          name=${this.name}\n          ?placeholder=${this.placeholder}\n          ?required=${this.required}\n          .value=${this.value}\n          @keydown=${this.onInputKeyDown}\n          @click=${this.onInputClick}\n          @input=${() => this.inputTrait.onInput()}\n        />\n        <icon-lucide-chevron-down></icon-lucide-chevron-down>\n      </div>\n      <div role=\"listbox\" aria-labelledby=\"${this.inputTrait.inputId}\" popover>\n        ${options.map(\n          (option) =>\n            html`<div\n              role=\"option\"\n              aria-selected=\"false\"\n              @click=${() => this.onOptionClick(option.value)}\n            >\n              ${option.label}\n            </div>`\n        )}\n      </div>\n    `\n  }\n\n  private getOptions (): { value: string; label: string }[] {\n    const options = this.querySelectorAll<ComboboxOption>(\n      'solid-ui-combobox-option'\n    )\n\n    return Array.from(options).map((option) => ({\n      value: option.value,\n      label: option.textContent,\n    }))\n  }\n\n  private onInputKeyDown (e: KeyboardEvent) {\n    switch (e.key) {\n      case 'ArrowDown':\n        e.preventDefault()\n        this.popoverElement?.showPopover()\n        break\n      case 'Enter':\n        if (!this.popoverElement?.matches(':popover-open')) {\n          e.preventDefault()\n\n          this.inputTrait.onSubmit()\n        }\n        break\n    }\n  }\n\n  private onInputClick (e: MouseEvent) {\n    e.preventDefault()\n\n    this.popoverElement?.showPopover()\n  }\n\n  private onOptionClick (option: string) {\n    this.inputTrait.setValue(option)\n\n    this.popoverElement?.hidePopover()\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"Combobox.esm.js","names":["customElement","WebComponent","html","nothing","property","query","state","InputTrait","styles","_classDecs","_Combobox","_Combobox2","_A","WeakMap","_B","_C","_D","_E","_F","_G","_H","_I","_ref","_labelDecs","type","String","reflect","_nameDecs","_valueDecs","_placeholderDecs","_requiredDecs","Boolean","_inputElementDecs","_filterDecs","_openDecs","_activeIndexDecs","_Combobox3","Combobox","_classPrivateFieldGet","label","v","_classPrivateFieldSet","name","value","placeholder","required","inputElement","filter","open","activeIndex","constructor","_classPrivateFieldInitSpec","_initProto","_init_label","_init_name","_init_value","_init_placeholder","_init_required","_init_inputElement","_init_filter","_init_open","_init_activeIndex","_defineProperty","event","path","composedPath","includes","hide","inputTrait","addTrait","getInputElement","getInternals","onValueChanged","toLowerCase","options","getFilteredOptions","length","getInitialActiveIndex","listboxId","inputId","disconnectedCallback","removeOpenListeners","render","activeOption","undefined","activeDescendant","getOptionId","accessibleName","renderLabel","onAnchorMouseDown","labelId","onInputKeyDown","onInputFocus","onInput","onListboxMouseUp","map","option","index","setActiveIndex","getOptions","querySelectorAll","Array","from","textContent","selectedIndex","findIndex","getNextIndex","currentIndex","direction","show","filteredOptions","focusLast","addOpenListeners","requestAnimationFrame","scrollActiveOptionIntoView","selectOption","setValue","focus","preventScroll","shadowRoot","querySelector","scrollIntoView","block","openListenersAttached","document","addEventListener","handleDocumentFocusIn","handleDocumentMouseDown","root","getRootNode","removeEventListener","preventDefault","openPopupFromKey","key","onSubmit","stopPropagation","target","HTMLElement","optionElement","closest","optionId","id","Number","parseInt","replace","e","c","_initClass","_applyDecs","_Class","_identity","default"],"sources":["../../../src/components/combobox/Combobox.ts"],"sourcesContent":["import { customElement, WebComponent } from '@/lib/components'\nimport { html, nothing } from 'lit'\nimport { property, query, state } from 'lit/decorators.js'\nimport InputTrait from '@/lib/components/traits/InputTrait'\nimport type ComboboxOption from '@/components/combobox-option/ComboboxOption'\n\nimport '~icons/lucide/chevron-down'\nimport '@awesome.me/webawesome/dist/components/popup/popup.js'\n\nimport styles from './Combobox.styles.css'\n\ntype ComboboxOptionData = { value: string; label: string }\n\n@customElement('solid-ui-combobox')\nexport default class Combobox extends WebComponent {\n  static styles = styles\n  static formAssociated = true\n\n  @property({ type: String, reflect: true })\n  accessor label = ''\n\n  @property({ type: String, reflect: true })\n  accessor name = ''\n\n  @property({ type: String })\n  accessor value = ''\n\n  @property({ type: String, reflect: true })\n  accessor placeholder = ''\n\n  @property({ type: Boolean, reflect: true })\n  accessor required = false\n\n  @query('input')\n  private accessor inputElement: HTMLInputElement | null = null\n\n  @state()\n  private accessor filter = ''\n\n  @state()\n  private accessor open = false\n\n  @state()\n  private accessor activeIndex = -1\n\n  private inputTrait: InputTrait\n  private openListenersAttached = false\n  private readonly listboxId: string\n\n  constructor () {\n    super()\n\n    this.inputTrait = this.addTrait(\n      new InputTrait(this, {\n        getInputElement: () => this.inputElement,\n        getInternals: () => this.getInternals(),\n        onValueChanged: (value) => {\n          this.filter = value.toLowerCase()\n\n          const options = this.getFilteredOptions()\n\n          if (options.length === 0) {\n            this.hide()\n            return\n          }\n\n          if (this.open) {\n            this.activeIndex = this.getInitialActiveIndex(options)\n          }\n        },\n      })\n    )\n\n    this.listboxId = `listbox-${this.inputTrait.inputId}`\n  }\n\n  disconnectedCallback () {\n    super.disconnectedCallback()\n\n    this.removeOpenListeners()\n  }\n\n  protected render () {\n    const options = this.getFilteredOptions()\n    const activeOption =\n      this.open && this.activeIndex >= 0 ? options[this.activeIndex] : undefined\n    const activeDescendant =\n      activeOption !== undefined ? this.getOptionId(this.activeIndex) : undefined\n    const accessibleName = this.placeholder || 'Combobox'\n\n    return html`\n      ${this.inputTrait.renderLabel()}\n      <wa-popup\n        placement=\"bottom\"\n        flip\n        shift\n        sync=\"width\"\n        auto-size=\"vertical\"\n        auto-size-padding=\"10\"\n        ?active=${this.open}\n      >\n        <div class=\"input-wrapper\" slot=\"anchor\" @mousedown=${this.onAnchorMouseDown}>\n          <input\n            id=\"${this.inputTrait.inputId}\"\n            type=\"text\"\n            name=${this.name}\n            placeholder=${this.placeholder}\n            role=\"combobox\"\n            aria-autocomplete=\"list\"\n            aria-haspopup=\"listbox\"\n            aria-expanded=${this.open ? 'true' : 'false'}\n            aria-controls=${this.listboxId}\n            aria-activedescendant=${activeDescendant ?? nothing}\n            aria-labelledby=${this.label ? this.inputTrait.labelId : nothing}\n            aria-label=${this.label ? nothing : accessibleName}\n            aria-required=${this.required ? 'true' : nothing}\n            autocomplete=\"off\"\n            spellcheck=\"false\"\n            ?required=${this.required}\n            .value=${this.value}\n            @keydown=${this.onInputKeyDown}\n            @focus=${this.onInputFocus}\n            @input=${() => this.inputTrait.onInput()}\n          />\n          <icon-lucide-chevron-down></icon-lucide-chevron-down>\n        </div>\n        <div\n          id=${this.listboxId}\n          class=\"listbox\"\n          role=\"listbox\"\n          aria-orientation=\"vertical\"\n          aria-labelledby=${this.label ? this.inputTrait.labelId : nothing}\n          aria-label=${this.label ? nothing : accessibleName}\n          ?hidden=${!this.open}\n          @mouseup=${this.onListboxMouseUp}\n        >\n          ${options.map(\n            (option, index) =>\n              html`<div\n                id=${this.getOptionId(index)}\n                role=\"option\"\n                aria-selected=${this.open && index === this.activeIndex\n                  ? 'true'\n                  : 'false'}\n                data-active=${index === this.activeIndex || nothing}\n                @mousemove=${() => this.setActiveIndex(index)}\n              >\n                ${option.label}\n              </div>`\n          )}\n        </div>\n      </wa-popup>\n    `\n  }\n\n  private getFilteredOptions (): ComboboxOptionData[] {\n    return this.getOptions().filter((option) =>\n      option.label.toLowerCase().includes(this.filter)\n    )\n  }\n\n  private getOptions (): ComboboxOptionData[] {\n    const options = this.querySelectorAll<ComboboxOption>(\n      'solid-ui-combobox-option'\n    )\n\n    return Array.from(options).map((option) => ({\n      value: option.value,\n      label: option.textContent ?? '',\n    }))\n  }\n\n  private getOptionId (index: number): string {\n    return `${this.listboxId}-option-${index}`\n  }\n\n  private getInitialActiveIndex (options: ComboboxOptionData[]): number {\n    const selectedIndex = options.findIndex((option) => option.value === this.value)\n\n    if (selectedIndex >= 0) {\n      return selectedIndex\n    }\n\n    return options.length > 0 ? 0 : -1\n  }\n\n  private getNextIndex (\n    currentIndex: number,\n    options: ComboboxOptionData[],\n    direction: 1 | -1\n  ): number {\n    if (options.length === 0) {\n      return -1\n    }\n\n    return (currentIndex + direction + options.length) % options.length\n  }\n\n  private setActiveIndex (index: number) {\n    this.activeIndex = index\n  }\n\n  private show (options?: { focusLast?: boolean }) {\n    if (this.open) {\n      return\n    }\n\n    const filteredOptions = this.getFilteredOptions()\n\n    if (filteredOptions.length === 0) {\n      return\n    }\n\n    this.open = true\n    this.activeIndex = options?.focusLast\n      ? filteredOptions.length - 1\n      : this.getInitialActiveIndex(filteredOptions)\n    this.addOpenListeners()\n\n    requestAnimationFrame(() => this.scrollActiveOptionIntoView())\n  }\n\n  private hide () {\n    if (!this.open) {\n      return\n    }\n\n    this.open = false\n    this.activeIndex = -1\n    this.removeOpenListeners()\n  }\n\n  private selectOption (value: string) {\n    this.inputTrait.setValue(value)\n    this.hide()\n    this.inputElement?.focus({ preventScroll: true })\n  }\n\n  private scrollActiveOptionIntoView () {\n    if (this.activeIndex < 0) {\n      return\n    }\n\n    this.shadowRoot\n      ?.querySelector(`#${this.getOptionId(this.activeIndex)}`)\n      ?.scrollIntoView({ block: 'nearest' })\n  }\n\n  private addOpenListeners () {\n    if (this.openListenersAttached) {\n      return\n    }\n\n    document.addEventListener('focusin', this.handleDocumentFocusIn)\n    document.addEventListener('mousedown', this.handleDocumentMouseDown)\n\n    const root = this.getRootNode()\n\n    if (root !== document) {\n      root.addEventListener('focusin', this.handleDocumentFocusIn)\n    }\n\n    this.openListenersAttached = true\n  }\n\n  private removeOpenListeners () {\n    if (!this.openListenersAttached) {\n      return\n    }\n\n    document.removeEventListener('focusin', this.handleDocumentFocusIn)\n    document.removeEventListener('mousedown', this.handleDocumentMouseDown)\n\n    const root = this.getRootNode()\n\n    if (root !== document) {\n      root.removeEventListener('focusin', this.handleDocumentFocusIn)\n    }\n\n    this.openListenersAttached = false\n  }\n\n  private handleDocumentFocusIn = (event: Event) => {\n    const path = event.composedPath()\n\n    if (!path.includes(this)) {\n      this.hide()\n    }\n  }\n\n  private handleDocumentMouseDown = (event: MouseEvent) => {\n    const path = event.composedPath()\n\n    if (!path.includes(this)) {\n      this.hide()\n    }\n  }\n\n  private onAnchorMouseDown (event: MouseEvent) {\n    event.preventDefault()\n    this.inputElement?.focus({ preventScroll: true })\n  }\n\n  private onInputFocus () {\n    this.show()\n  }\n\n  private openPopupFromKey (focusLast: boolean) {\n    if (!this.open) {\n      this.show({ focusLast })\n    }\n  }\n\n  private onInputKeyDown (event: KeyboardEvent) {\n    const options = this.getFilteredOptions()\n\n    switch (event.key) {\n      case 'ArrowDown':\n        event.preventDefault()\n\n        if (!this.open) {\n          this.openPopupFromKey(false)\n        } else {\n          this.activeIndex = this.getNextIndex(this.activeIndex, options, 1)\n          this.scrollActiveOptionIntoView()\n        }\n        break\n      case 'ArrowUp':\n        event.preventDefault()\n\n        if (!this.open) {\n          this.openPopupFromKey(true)\n        } else {\n          this.activeIndex = this.getNextIndex(this.activeIndex, options, -1)\n          this.scrollActiveOptionIntoView()\n        }\n        break\n      case 'Enter':\n        if (this.open && this.activeIndex >= 0 && options[this.activeIndex]) {\n          event.preventDefault()\n          this.selectOption(options[this.activeIndex].value)\n        } else if (!this.open) {\n          event.preventDefault()\n          this.inputTrait.onSubmit()\n        }\n        break\n      case 'Escape':\n        if (this.open) {\n          event.preventDefault()\n          event.stopPropagation()\n          this.hide()\n          this.inputElement?.focus({ preventScroll: true })\n        }\n        break\n      case 'Tab':\n        this.hide()\n        break\n    }\n  }\n\n  private onListboxMouseUp (event: MouseEvent) {\n    if (!(event.target instanceof HTMLElement)) {\n      return\n    }\n\n    const optionElement = event.target.closest('[role=\"option\"]')\n\n    if (!optionElement) {\n      return\n    }\n\n    const optionId = optionElement.id\n    const index = Number.parseInt(optionId.replace(`${this.listboxId}-option-`, ''), 10)\n    const option = this.getFilteredOptions()[index]\n\n    if (option) {\n      this.selectOption(option.value)\n    }\n  }\n}\n"],"mappings":"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"}

package/dist/components/combobox/Combobox.styles.cjs.js

@@ -1,2 +1,2 @@
-var e=require("lit").css`:host{flex-direction:column;align-items:flex-start;gap:5px;display:inline-flex}:host label{color:var(--solid-ui-color-gray-600);font-size:var(--solid-ui-font-size-sm);font-weight:400}:host .input-wrapper{anchor-name:--combobox-anchor;width:100%;position:relative}:host .input-wrapper input{border:1px solid var(--solid-ui-color-gray-400);border-radius:5px;width:100%;padding:10px 40px 10px 10px}:host .input-wrapper icon-lucide-chevron-down{color:var(--solid-ui-color-gray-500);width:var(--solid-ui-font-size-lg);height:var(--solid-ui-font-size-lg);pointer-events:none;position:absolute;top:50%;right:15px;transform:translateY(-50%)}:host [popover]:popover-open{top:calc(anchor(bottom) + 5px);left:anchor(left);min-width:anchor-size(width);position-try-fallbacks:flip-block, flip-inline;position-anchor:--combobox-anchor;border:1px solid var(--solid-ui-color-gray-100);background:#fff;border-radius:5px;flex-direction:column;display:flex;position:fixed;bottom:auto;right:auto;overflow:visible;box-shadow:0 4px 16px #00000059}:host [popover]:popover-open [role=option]{color:var(--solid-ui-color-gray-700);border-bottom:1px solid var(--solid-ui-color-gray-100);padding:12px 8px}:host [popover]:popover-open [role=option]:hover{background:#0000000d}`;exports.default=e;
+var e=require("lit").css`:host{flex-direction:column;align-items:flex-start;gap:5px;display:inline-flex}:host label{color:var(--solid-ui-color-gray-600);font-size:var(--solid-ui-font-size-sm);font-weight:400}:host wa-popup{width:100%;display:block}:host wa-popup::part(popup){border:1px solid var(--solid-ui-color-gray-100);background:#fff;border-radius:5px;overflow:hidden;box-shadow:0 4px 16px #00000059}:host .input-wrapper{width:100%;position:relative}:host .input-wrapper input{border:1px solid var(--solid-ui-color-gray-400);border-radius:5px;width:100%;padding:10px 40px 10px 10px}:host .input-wrapper icon-lucide-chevron-down{color:var(--solid-ui-color-gray-500);width:var(--solid-ui-font-size-lg);height:var(--solid-ui-font-size-lg);pointer-events:none;position:absolute;top:50%;right:15px;transform:translateY(-50%)}:host .listbox{max-height:inherit;flex-direction:column;display:flex;overflow:auto}:host .listbox [role=option]{color:var(--solid-ui-color-gray-700);border-bottom:1px solid var(--solid-ui-color-gray-100);cursor:pointer;padding:12px 8px}:host .listbox [role=option]:hover,:host .listbox [role=option][data-active]{background:#0000000d}`;exports.default=e;
 //# sourceMappingURL=Combobox.styles.cjs.js.map

package/dist/components/combobox/Combobox.styles.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Combobox.styles.cjs.js","names":[],"sources":["../../../src/components/combobox/Combobox.styles.css"],"sourcesContent":[":host {\n    display: inline-flex;\n    flex-direction: column;\n    align-items: flex-start;\n    gap: 5px;\n\n    label {\n        color: var(--solid-ui-color-gray-600);\n        font-size: var(--solid-ui-font-size-sm);\n        font-weight: 400;\n    }\n\n    .input-wrapper {\n        position: relative;\n        anchor-name: --combobox-anchor;\n        width: 100%;\n\n        input {\n            border: 1px solid var(--solid-ui-color-gray-400);\n            border-radius: 5px;\n            padding: 10px;\n            padding-right: 40px;\n            width: 100%;\n        }\n\n        icon-lucide-chevron-down {\n            position: absolute;\n            right: 15px;\n            top: 50%;\n            transform: translateY(-50%);\n            color: var(--solid-ui-color-gray-500);\n            width: var(--solid-ui-font-size-lg);\n            height: var(--solid-ui-font-size-lg);\n            pointer-events: none;\n        }\n    }\n\n    [popover]:popover-open {\n        position: fixed;\n        top: calc(anchor(bottom) + 5px);\n        left: anchor(left);\n        right: auto;\n        bottom: auto;\n        min-width: anchor-size(width);\n        overflow: visible;\n        position-try-fallbacks: flip-block, flip-inline;\n        position-anchor: --combobox-anchor;\n        background: white;\n        border: 1px solid var(--solid-ui-color-gray-100);\n        border-radius: 5px;\n        box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.35);\n        display: flex;\n        flex-direction: column;\n\n        [role=\"option\"] {\n            padding: 12px 8px;\n            color: var(--solid-ui-color-gray-700);\n            border-bottom: 1px solid var(--solid-ui-color-gray-100);\n\n            &:hover {\n                background: rgba(0, 0, 0, 0.05);\n            }\n        }\n    }\n\n}\n"],"mappings":""}
+{"version":3,"file":"Combobox.styles.cjs.js","names":[],"sources":["../../../src/components/combobox/Combobox.styles.css"],"sourcesContent":[":host {\n    display: inline-flex;\n    flex-direction: column;\n    align-items: flex-start;\n    gap: 5px;\n\n    label {\n        color: var(--solid-ui-color-gray-600);\n        font-size: var(--solid-ui-font-size-sm);\n        font-weight: 400;\n    }\n\n    wa-popup {\n        display: block;\n        width: 100%;\n    }\n\n    wa-popup::part(popup) {\n        background: white;\n        border: 1px solid var(--solid-ui-color-gray-100);\n        border-radius: 5px;\n        box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.35);\n        overflow: hidden;\n    }\n\n    .input-wrapper {\n        position: relative;\n        width: 100%;\n\n        input {\n            border: 1px solid var(--solid-ui-color-gray-400);\n            border-radius: 5px;\n            padding: 10px;\n            padding-right: 40px;\n            width: 100%;\n        }\n\n        icon-lucide-chevron-down {\n            position: absolute;\n            right: 15px;\n            top: 50%;\n            transform: translateY(-50%);\n            color: var(--solid-ui-color-gray-500);\n            width: var(--solid-ui-font-size-lg);\n            height: var(--solid-ui-font-size-lg);\n            pointer-events: none;\n        }\n    }\n\n    .listbox {\n        display: flex;\n        flex-direction: column;\n        max-height: inherit;\n        overflow: auto;\n\n        [role=\"option\"] {\n            padding: 12px 8px;\n            color: var(--solid-ui-color-gray-700);\n            border-bottom: 1px solid var(--solid-ui-color-gray-100);\n            cursor: pointer;\n\n            &:hover,\n            &[data-active] {\n                background: rgba(0, 0, 0, 0.05);\n            }\n        }\n    }\n}\n"],"mappings":""}

package/dist/components/combobox/Combobox.styles.esm.js

@@ -1,6 +1,6 @@
 import { css as e } from "lit";
 //#region src/components/combobox/Combobox.styles.css
-var t = e`:host{flex-direction:column;align-items:flex-start;gap:5px;display:inline-flex}:host label{color:var(--solid-ui-color-gray-600);font-size:var(--solid-ui-font-size-sm);font-weight:400}:host .input-wrapper{anchor-name:--combobox-anchor;width:100%;position:relative}:host .input-wrapper input{border:1px solid var(--solid-ui-color-gray-400);border-radius:5px;width:100%;padding:10px 40px 10px 10px}:host .input-wrapper icon-lucide-chevron-down{color:var(--solid-ui-color-gray-500);width:var(--solid-ui-font-size-lg);height:var(--solid-ui-font-size-lg);pointer-events:none;position:absolute;top:50%;right:15px;transform:translateY(-50%)}:host [popover]:popover-open{top:calc(anchor(bottom) + 5px);left:anchor(left);min-width:anchor-size(width);position-try-fallbacks:flip-block, flip-inline;position-anchor:--combobox-anchor;border:1px solid var(--solid-ui-color-gray-100);background:#fff;border-radius:5px;flex-direction:column;display:flex;position:fixed;bottom:auto;right:auto;overflow:visible;box-shadow:0 4px 16px #00000059}:host [popover]:popover-open [role=option]{color:var(--solid-ui-color-gray-700);border-bottom:1px solid var(--solid-ui-color-gray-100);padding:12px 8px}:host [popover]:popover-open [role=option]:hover{background:#0000000d}`;
+var t = e`:host{flex-direction:column;align-items:flex-start;gap:5px;display:inline-flex}:host label{color:var(--solid-ui-color-gray-600);font-size:var(--solid-ui-font-size-sm);font-weight:400}:host wa-popup{width:100%;display:block}:host wa-popup::part(popup){border:1px solid var(--solid-ui-color-gray-100);background:#fff;border-radius:5px;overflow:hidden;box-shadow:0 4px 16px #00000059}:host .input-wrapper{width:100%;position:relative}:host .input-wrapper input{border:1px solid var(--solid-ui-color-gray-400);border-radius:5px;width:100%;padding:10px 40px 10px 10px}:host .input-wrapper icon-lucide-chevron-down{color:var(--solid-ui-color-gray-500);width:var(--solid-ui-font-size-lg);height:var(--solid-ui-font-size-lg);pointer-events:none;position:absolute;top:50%;right:15px;transform:translateY(-50%)}:host .listbox{max-height:inherit;flex-direction:column;display:flex;overflow:auto}:host .listbox [role=option]{color:var(--solid-ui-color-gray-700);border-bottom:1px solid var(--solid-ui-color-gray-100);cursor:pointer;padding:12px 8px}:host .listbox [role=option]:hover,:host .listbox [role=option][data-active]{background:#0000000d}`;
 //#endregion
 export { t as default };
 

package/dist/components/combobox/Combobox.styles.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"Combobox.styles.esm.js","names":[],"sources":["../../../src/components/combobox/Combobox.styles.css"],"sourcesContent":[":host {\n    display: inline-flex;\n    flex-direction: column;\n    align-items: flex-start;\n    gap: 5px;\n\n    label {\n        color: var(--solid-ui-color-gray-600);\n        font-size: var(--solid-ui-font-size-sm);\n        font-weight: 400;\n    }\n\n    .input-wrapper {\n        position: relative;\n        anchor-name: --combobox-anchor;\n        width: 100%;\n\n        input {\n            border: 1px solid var(--solid-ui-color-gray-400);\n            border-radius: 5px;\n            padding: 10px;\n            padding-right: 40px;\n            width: 100%;\n        }\n\n        icon-lucide-chevron-down {\n            position: absolute;\n            right: 15px;\n            top: 50%;\n            transform: translateY(-50%);\n            color: var(--solid-ui-color-gray-500);\n            width: var(--solid-ui-font-size-lg);\n            height: var(--solid-ui-font-size-lg);\n            pointer-events: none;\n        }\n    }\n\n    [popover]:popover-open {\n        position: fixed;\n        top: calc(anchor(bottom) + 5px);\n        left: anchor(left);\n        right: auto;\n        bottom: auto;\n        min-width: anchor-size(width);\n        overflow: visible;\n        position-try-fallbacks: flip-block, flip-inline;\n        position-anchor: --combobox-anchor;\n        background: white;\n        border: 1px solid var(--solid-ui-color-gray-100);\n        border-radius: 5px;\n        box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.35);\n        display: flex;\n        flex-direction: column;\n\n        [role=\"option\"] {\n            padding: 12px 8px;\n            color: var(--solid-ui-color-gray-700);\n            border-bottom: 1px solid var(--solid-ui-color-gray-100);\n\n            &:hover {\n                background: rgba(0, 0, 0, 0.05);\n            }\n        }\n    }\n\n}\n"],"mappings":""}
+{"version":3,"file":"Combobox.styles.esm.js","names":[],"sources":["../../../src/components/combobox/Combobox.styles.css"],"sourcesContent":[":host {\n    display: inline-flex;\n    flex-direction: column;\n    align-items: flex-start;\n    gap: 5px;\n\n    label {\n        color: var(--solid-ui-color-gray-600);\n        font-size: var(--solid-ui-font-size-sm);\n        font-weight: 400;\n    }\n\n    wa-popup {\n        display: block;\n        width: 100%;\n    }\n\n    wa-popup::part(popup) {\n        background: white;\n        border: 1px solid var(--solid-ui-color-gray-100);\n        border-radius: 5px;\n        box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.35);\n        overflow: hidden;\n    }\n\n    .input-wrapper {\n        position: relative;\n        width: 100%;\n\n        input {\n            border: 1px solid var(--solid-ui-color-gray-400);\n            border-radius: 5px;\n            padding: 10px;\n            padding-right: 40px;\n            width: 100%;\n        }\n\n        icon-lucide-chevron-down {\n            position: absolute;\n            right: 15px;\n            top: 50%;\n            transform: translateY(-50%);\n            color: var(--solid-ui-color-gray-500);\n            width: var(--solid-ui-font-size-lg);\n            height: var(--solid-ui-font-size-lg);\n            pointer-events: none;\n        }\n    }\n\n    .listbox {\n        display: flex;\n        flex-direction: column;\n        max-height: inherit;\n        overflow: auto;\n\n        [role=\"option\"] {\n            padding: 12px 8px;\n            color: var(--solid-ui-color-gray-700);\n            border-bottom: 1px solid var(--solid-ui-color-gray-100);\n            cursor: pointer;\n\n            &:hover,\n            &[data-active] {\n                background: rgba(0, 0, 0, 0.05);\n            }\n        }\n    }\n}\n"],"mappings":""}

package/dist/components/combobox/index.cjs.js

@@ -1,2 +1,2 @@
-Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require("./Combobox.cjs.js");var t=e._Combobox;Object.defineProperty(exports,"Combobox",{enumerable:!0,get:function(){return e._Combobox}}),exports.default=t;
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require("./Combobox.cjs.js");var t=e.default;Object.defineProperty(exports,"Combobox",{enumerable:!0,get:function(){return e.default}}),exports.default=t;
 //# sourceMappingURL=index.cjs.js.map

package/dist/components/combobox/index.esm.js

@@ -1,4 +1,4 @@
-import { _Combobox as e } from "./Combobox.esm.js";
+import e from "./Combobox.esm.js";
 //#region src/components/combobox/index.ts
 var t = e;
 //#endregion