solid-ui 3.1.3-5 → 3.1.3-7

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

@@ -1 +1 @@
-{"version":3,"file":"Combobox.cjs.js","names":["html","property","query","state","generateId","WebComponent","customElement","styles","_classDecs","_Combobox","_Combobox2","_A","WeakMap","_B","_C","_D","_E","_ref","_labelDecs","type","String","reflect","_valueDecs","_popoverElementDecs","_inputElementDecs","_filterDecs","_Combobox3","Combobox","constructor","args","_classPrivateFieldInitSpec","_initProto","_init_label","_init_value","_init_popoverElement","_init_inputElement","_init_filter","_defineProperty","_classPrivateFieldGet","label","v","_classPrivateFieldSet","value","popoverElement","inputElement","filter","render","options","getOptions","option","toLowerCase","includes","inputId","onInputKeyDown","onInputClick","onInputChange","map","onOptionClick","querySelectorAll","Array","from","setValue","getInternals","setFormValue","dispatchEvent","InputEvent","bubbles","composed","e","key","preventDefault","showPopover","matches","form","requestSubmit","hidePopover","c","_initClass","_applyDecs","_Class","_identity","default"],"sources":["../../../src/components/combobox/Combobox.ts"],"sourcesContent":["import { html } from 'lit'\nimport { property, query, state } from 'lit/decorators.js'\nimport { generateId, WebComponent, customElement } from '@/lib/components'\nimport 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 })\n  accessor value = ''\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 inputId = `combobox-${generateId()}`\n\n  protected render () {\n    const options = this.getOptions().filter(option => option.toLowerCase().includes(this.filter))\n\n    return html`\n        ${this.label ? html`<label for=\"${this.inputId}\">${this.label}</label>` : ''}\n        <div class=\"input-wrapper\">\n            <input\n                id=\"${this.inputId}\"\n                .value=${this.value}\n                type=\"text\"\n                @keydown=${this.onInputKeyDown}\n                @click=${this.onInputClick}\n                @input=${this.onInputChange}\n            />\n            <icon-lucide-chevron-down></icon-lucide-chevron-down>\n        </div>\n        <div role=\"listbox\" aria-labelledby=\"${this.inputId}\" popover>\n          ${options.map(option => html`<div role=\"option\" aria-selected=\"false\" @click=${() => this.onOptionClick(option)}>${option}</div>`)}\n        </div>\n    `\n  }\n\n  private getOptions (): string[] {\n    const options = this.querySelectorAll<ComboboxOption>('solid-ui-combobox-option')\n\n    return Array.from(options).map(option => option.value)\n  }\n\n  private setValue (value: string) {\n    this.filter = value.toLowerCase()\n    this.value = value\n\n    this.getInternals().setFormValue(value)\n    this.dispatchEvent(new InputEvent('input', { bubbles: true, composed: true }))\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.getInternals().form?.requestSubmit()\n        }\n        break\n    }\n  }\n\n  private onInputClick (e: MouseEvent) {\n    e.preventDefault()\n\n    this.popoverElement?.showPopover()\n  }\n\n  private onInputChange () {\n    this.setValue(this.inputElement?.value ?? '')\n  }\n\n  private onOptionClick (option: string) {\n    this.setValue(option)\n\n    this.popoverElement?.hidePopover()\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"Combobox.cjs.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.d.ts

@@ -3,17 +3,38 @@ export default class Combobox extends WebComponent {
     static styles: import('lit').CSSResult;
     static formAssociated: boolean;
     accessor label: string;
+    accessor name: string;
     accessor value: string;
-    private accessor popoverElement;
+    accessor placeholder: string;
+    accessor required: boolean;
     private accessor inputElement;
     private accessor filter;
-    private inputId;
+    private accessor open;
+    private accessor activeIndex;
+    private inputTrait;
+    private openListenersAttached;
+    private readonly listboxId;
+    constructor();
+    disconnectedCallback(): void;
     protected render(): import('lit-html').TemplateResult<1>;
+    private getFilteredOptions;
     private getOptions;
-    private setValue;
+    private getOptionId;
+    private getInitialActiveIndex;
+    private getNextIndex;
+    private setActiveIndex;
+    private show;
+    private hide;
+    private selectOption;
+    private scrollActiveOptionIntoView;
+    private addOpenListeners;
+    private removeOpenListeners;
+    private handleDocumentFocusIn;
+    private handleDocumentMouseDown;
+    private onAnchorMouseDown;
+    private onInputFocus;
+    private openPopupFromKey;
     private onInputKeyDown;
-    private onInputClick;
-    private onInputChange;
-    private onOptionClick;
+    private onListboxMouseUp;
 }
 //# sourceMappingURL=Combobox.d.ts.map

package/dist/components/combobox/Combobox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Combobox.d.ts","sourceRoot":"","sources":["../../../src/components/combobox/Combobox.ts"],"names":[],"mappings":"AAEA,OAAO,EAAc,YAAY,EAAiB,MAAM,kBAAkB,CAAA;AAG1E,OAAO,4BAA4B,CAAA;AAKnC,MAAM,CAAC,OAAO,OAAO,QAAS,SAAQ,YAAY;IAChD,MAAM,CAAC,MAAM,0BAAS;IACtB,MAAM,CAAC,cAAc,UAAO;IAG5B,QAAQ,CAAC,KAAK,SAAK;IAGnB,QAAQ,CAAC,KAAK,SAAK;IAGnB,OAAO,CAAC,QAAQ,CAAC,cAAc,CAA8B;IAG7D,OAAO,CAAC,QAAQ,CAAC,YAAY,CAAgC;IAG7D,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAK;IAE5B,OAAO,CAAC,OAAO,CAA6B;IAE5C,SAAS,CAAC,MAAM;IAsBhB,OAAO,CAAC,UAAU;IAMlB,OAAO,CAAC,QAAQ;IAQhB,OAAO,CAAC,cAAc;IAgBtB,OAAO,CAAC,YAAY;IAMpB,OAAO,CAAC,aAAa;IAIrB,OAAO,CAAC,aAAa;CAKtB"}
+{"version":3,"file":"Combobox.d.ts","sourceRoot":"","sources":["../../../src/components/combobox/Combobox.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,YAAY,EAAE,MAAM,kBAAkB,CAAA;AAM9D,OAAO,4BAA4B,CAAA;AACnC,OAAO,uDAAuD,CAAA;AAO9D,MAAM,CAAC,OAAO,OAAO,QAAS,SAAQ,YAAY;IAChD,MAAM,CAAC,MAAM,0BAAS;IACtB,MAAM,CAAC,cAAc,UAAO;IAG5B,QAAQ,CAAC,KAAK,SAAK;IAGnB,QAAQ,CAAC,IAAI,SAAK;IAGlB,QAAQ,CAAC,KAAK,SAAK;IAGnB,QAAQ,CAAC,WAAW,SAAK;IAGzB,QAAQ,CAAC,QAAQ,UAAQ;IAGzB,OAAO,CAAC,QAAQ,CAAC,YAAY,CAAgC;IAG7D,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAK;IAG5B,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAQ;IAG7B,OAAO,CAAC,QAAQ,CAAC,WAAW,CAAK;IAEjC,OAAO,CAAC,UAAU,CAAY;IAC9B,OAAO,CAAC,qBAAqB,CAAQ;IACrC,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAQ;;IA6BlC,oBAAoB;IAMpB,SAAS,CAAC,MAAM;IAyEhB,OAAO,CAAC,kBAAkB;IAM1B,OAAO,CAAC,UAAU;IAWlB,OAAO,CAAC,WAAW;IAInB,OAAO,CAAC,qBAAqB;IAU7B,OAAO,CAAC,YAAY;IAYpB,OAAO,CAAC,cAAc;IAItB,OAAO,CAAC,IAAI;IAoBZ,OAAO,CAAC,IAAI;IAUZ,OAAO,CAAC,YAAY;IAMpB,OAAO,CAAC,0BAA0B;IAUlC,OAAO,CAAC,gBAAgB;IAiBxB,OAAO,CAAC,mBAAmB;IAiB3B,OAAO,CAAC,qBAAqB,CAM5B;IAED,OAAO,CAAC,uBAAuB,CAM9B;IAED,OAAO,CAAC,iBAAiB;IAKzB,OAAO,CAAC,YAAY;IAIpB,OAAO,CAAC,gBAAgB;IAMxB,OAAO,CAAC,cAAc;IA+CtB,OAAO,CAAC,gBAAgB;CAmBzB"}

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

@@ -1,38 +1,39 @@
 import { customElement as e } from "../../lib/components/decorators.esm.js";
-import { generateId as t } from "../../lib/components/ids.esm.js";
-import n from "../../lib/components/web-component/WebComponent.esm.js";
+import t from "../../lib/components/web-component/WebComponent.esm.js";
+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;
-function A(e, t, n) {
-	j(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 j(e, t) {
+function W(e, t) {
 	if (t.has(e)) throw TypeError("Cannot initialize the same private elements twice on an object");
 }
-function M(e, t, n) {
-	return e.set(P(e, t), n), n;
+function G(e, t, n) {
+	return e.set(q(e, t), n), n;
 }
-function N(e, t) {
-	return e.get(P(e, t));
+function K(e, t) {
+	return e.get(q(e, t));
 }
-function P(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 F(e, t, n) {
-	return (t = L(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 I(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 I(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: z(function() {
+				get: Q(function() {
 					return v(this);
 				}, r, "get"),
 				set: function(e) {
 					t[4](this, e);
 				}
-			} : b[S] = v, f || z(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 I(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 B(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 I(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 : L(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 I(e, t, n, r, i, a) {
 		}
 	};
 }
-function L(e) {
-	var t = R(e, "string");
+function X(e) {
+	var t = Z(e, "string");
 	return typeof t == "symbol" ? t : t + "";
 }
-function R(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 R(e, t) {
 	}
 	return (t === "string" ? String : Number)(e);
 }
-function z(e, t, n) {
+function Q(e, t, n) {
 	typeof t == "symbol" && (t = (t = t.description) ? "[" + t + "]" : "");
 	try {
 		Object.defineProperty(e, "name", {
@@ -172,133 +173,302 @@ function z(e, t, n) {
 	} catch {}
 	return e;
 }
-function B(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 V(e) {
+function te(e) {
 	return e;
 }
-_ = [e("solid-ui-combobox")];
-var H;
-new (O = (u = /*#__PURE__*/ new WeakMap(), d = /*#__PURE__*/ new WeakMap(), f = /*#__PURE__*/ new WeakMap(), p = /*#__PURE__*/ new WeakMap(), m = /*#__PURE__*/ new WeakMap(), k = (v = 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
-}), b = a({ type: String }), S = o("[popover]"), w = o("input"), E = s(), "label"), l = class extends n {
-	constructor(...e) {
-		super(...e), A(this, u, (h(this), y(this, ""))), A(this, d, x(this, "")), A(this, f, C(this, null)), A(this, p, T(this, null)), A(this, m, D(this, "")), F(this, "inputId", `combobox-${t()}`);
-	}
-	get [k]() {
-		return N(u, this);
+}), T = o({
+	type: String,
+	reflect: !0
+}), D = o({ type: String }), k = o({
+	type: String,
+	reflect: !0
+}), j = o({
+	type: Boolean,
+	reflect: !0
+}), N = s("input"), F = c(), L = c(), z = c(), "label"), u = class extends t {
+	get [H]() {
+		return K(d, this);
 	}
 	set label(e) {
-		M(u, this, e);
+		G(d, this, e);
+	}
+	get name() {
+		return K(f, this);
+	}
+	set name(e) {
+		G(f, this, e);
 	}
 	get value() {
-		return N(d, this);
+		return K(p, this);
 	}
 	set value(e) {
-		M(d, this, e);
+		G(p, this, e);
+	}
+	get placeholder() {
+		return K(m, this);
+	}
+	set placeholder(e) {
+		G(m, this, e);
 	}
-	get popoverElement() {
-		return N(f, this);
+	get required() {
+		return K(h, this);
 	}
-	set popoverElement(e) {
-		M(f, this, e);
+	set required(e) {
+		G(h, this, e);
 	}
 	get inputElement() {
-		return N(p, this);
+		return K(g, this);
 	}
 	set inputElement(e) {
-		M(p, this, e);
+		G(g, this, e);
 	}
 	get filter() {
-		return N(m, this);
+		return K(_, this);
 	}
 	set filter(e) {
-		M(m, 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(), 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.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.label ? i`<label for="${this.inputId}">${this.label}</label>` : ""}
-        <div class="input-wrapper">
-            <input
-                id="${this.inputId}"
-                .value=${this.value}
-                type="text"
-                @keydown=${this.onInputKeyDown}
-                @click=${this.onInputClick}
-                @input=${this.onInputChange}
-            />
-            <icon-lucide-chevron-down></icon-lucide-chevron-down>
+      ${this.inputTrait.renderLabel()}
+      <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 role="listbox" aria-labelledby="${this.inputId}" popover>
-          ${e.map((e) => i`<div role="option" aria-selected="false" @click=${() => this.onOptionClick(e)}>${e}</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) => e.value);
-	}
-	setValue(e) {
-		this.filter = e.toLowerCase(), this.value = e, this.getInternals().setFormValue(e), this.dispatchEvent(new InputEvent("input", {
-			bubbles: !0,
-			composed: !0
+		return Array.from(e).map((e) => ({
+			value: e.value,
+			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.getInternals().form?.requestSubmit());
+				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();
-	}
-	onInputChange() {
-		this.setValue(this.inputElement?.value ?? "");
-	}
-	onOptionClick(e) {
-		this.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: [y, x, C, T, D, h], c: [H, g]} = I(l, [
+}, {e: [w, E, O, A, M, P, I, R, B, b], c: [$, x]} = Y(u, [
 	[
-		v,
+		C,
 		1,
 		"label"
 	],
 	[
-		b,
+		T,
+		1,
+		"name"
+	],
+	[
+		D,
 		1,
 		"value"
 	],
 	[
-		S,
+		k,
+		1,
+		"placeholder"
+	],
+	[
+		j,
 		1,
-		"popoverElement"
+		"required"
 	],
 	[
-		w,
+		N,
 		1,
 		"inputElement"
 	],
 	[
-		E,
+		F,
 		1,
 		"filter"
+	],
+	[
+		L,
+		1,
+		"open"
+	],
+	[
+		z,
+		1,
+		"activeIndex"
 	]
-], _, 0, void 0, n), l), c = class extends V {
+], S, 0, void 0, t), u), l = class extends te {
 	constructor() {
-		super(H), F(this, "styles", r), F(this, "formAssociated", !0), g();
+		super($), J(this, "styles", r), J(this, "formAssociated", !0), x();
 	}
-}, F(c, O, void 0), c)();
+}, J(l, V, void 0), l)();
 //#endregion
-export { H as _Combobox };
+export { $ as default };
 
 //# sourceMappingURL=Combobox.esm.js.map