@pathscale/ui 2.5.0 → 2.6.0

package/dist/components/combo-box/ComboBox.generated.js

@@ -1,11 +1,11 @@
-import { createComponent, effect, insert, memo, mergeProps, setAttribute, spread, template, use } from "solid-js/web";
-import { defineComponent } from "solid-layouts/application-boundary";
+import { createComponent, effect, insert, memo, mergeProps, ref, setAttribute, spread, template } from "@solidjs/web";
+import { defineComponent } from "solid-layouts/solid-2/application-boundary";
 import "./ComboBox.css";
-import { For, Show, createContext, createEffect, createMemo, createSignal, createUniqueId, onCleanup, onMount, splitProps, useContext } from "solid-js";
-import { twMerge } from "tailwind-merge";
+import { For, Show, createContext, createEffect, createMemo, createSignal, createUniqueId, omit, onCleanup, onSettled, useContext } from "solid-js";
+import { twMerge } from "../../lib/twMerge.js";
 import { CLASSES, componentRecipe } from "./ComboBox.recipe.js";
 import { resolveState } from "../vocabulary.js";
-var _tmpl$ = /*#__PURE__*/ template("<input type=hidden>"), _tmpl$2 = /*#__PURE__*/ template("<div>"), _tmpl$3 = /*#__PURE__*/ template("<span>"), _tmpl$4 = /*#__PURE__*/ template("<input>"), _tmpl$5 = /*#__PURE__*/ template("<button>"), _tmpl$6 = /*#__PURE__*/ template("<div>No matching options"), _tmpl$7 = /*#__PURE__*/ template("<div role=option tabindex=-1 data-slot=combobox-option><span>"), _tmpl$8 = /*#__PURE__*/ template("<span><span>");
+var _tmpl$ = /*#__PURE__*/ template("<input type=hidden>"), _tmpl$2 = /*#__PURE__*/ template("<div><!><!>"), _tmpl$3 = /*#__PURE__*/ template("<span>"), _tmpl$4 = /*#__PURE__*/ template("<div>"), _tmpl$5 = /*#__PURE__*/ template("<input>"), _tmpl$6 = /*#__PURE__*/ template("<button><!><!><!>"), _tmpl$7 = /*#__PURE__*/ template("<div>No matching options"), _tmpl$8 = /*#__PURE__*/ template("<div><span>"), _tmpl$9 = /*#__PURE__*/ template("<span><span>");
 const ComboBoxContext = createContext();
 const invokeEventHandler = (handler, event)=>{
     if ("function" == typeof handler) return void handler(event);
@@ -41,60 +41,27 @@ const extractItemDisabled = (item)=>{
     return Boolean(item.disabled);
 };
 const __solidLayoutComboBoxRoot = (_stable, p)=>{
-    const [local, others] = splitProps(p, [
-        "children",
-        "startIcon",
-        "endIcon",
-        "class",
-        "dataTheme",
-        "style",
-        "items",
-        "selectedKey",
-        "defaultSelectedKey",
-        "onSelectionChange",
-        "inputValue",
-        "defaultInputValue",
-        "onInputChange",
-        "open",
-        "defaultOpen",
-        "onOpenChange",
-        "fullWidth",
-        "variant",
-        "menuTrigger",
-        "state",
-        "disabled",
-        "issues",
-        "allowsCustomValue",
-        "placeholder",
-        "name",
-        "required",
-        "defaultFilter",
-        "itemKey",
-        "itemTextValue",
-        "itemDisabled",
-        "onFocusOut",
-        "ref"
-    ]);
+    const others = omit(p, "children", "startIcon", "endIcon", "class", "dataTheme", "style", "items", "selectedKey", "defaultSelectedKey", "onSelectionChange", "inputValue", "defaultInputValue", "onInputChange", "open", "defaultOpen", "onOpenChange", "fullWidth", "variant", "menuTrigger", "state", "disabled", "issues", "allowsCustomValue", "placeholder", "name", "required", "defaultFilter", "itemKey", "itemTextValue", "itemDisabled", "onFocusOut", "ref");
     const listBoxId = `${createUniqueId()}-listbox`;
-    const [internalSelectedKey, setInternalSelectedKey] = createSignal(normalizeKey(local.defaultSelectedKey));
-    const [internalInputValue, setInternalInputValue] = createSignal(local.defaultInputValue ?? "");
-    const [internalOpen, setInternalOpen] = createSignal(Boolean(local.defaultOpen));
+    const [internalSelectedKey, setInternalSelectedKey] = createSignal(normalizeKey(p.defaultSelectedKey));
+    const [internalInputValue, setInternalInputValue] = createSignal(p.defaultInputValue ?? "");
+    const [internalOpen, setInternalOpen] = createSignal(Boolean(p.defaultOpen));
     const [activeKey, setActiveKeySignal] = createSignal(null);
     let rootRef;
     let inputRef;
-    const variant = ()=>local.variant ?? "primary";
-    const menuTrigger = ()=>local.menuTrigger ?? "focus";
-    const fullWidth = ()=>Boolean(local.fullWidth);
-    const isDisabled = ()=>Boolean("disabled" === local.state) || Boolean(local.disabled);
-    const isInvalid = ()=>Boolean("invalid" === resolveState(local.state, local.issues));
-    const isRequired = ()=>Boolean(local.required) || Boolean(local.required);
-    const isOpen = ()=>void 0 !== local.open ? Boolean(local.open) : internalOpen();
-    const selectedKey = createMemo(()=>void 0 !== local.selectedKey ? normalizeKey(local.selectedKey) : internalSelectedKey());
-    const inputValue = createMemo(()=>void 0 !== local.inputValue ? local.inputValue : internalInputValue());
-    const normalizedItems = createMemo(()=>(local.items ?? []).map((item, index)=>{
-            const baseKey = null != local.itemKey ? String(local.itemKey(item, index)) : extractItemKey(item, index);
-            const textValue = null != local.itemTextValue ? local.itemTextValue(item, index) : extractItemText(item, baseKey);
-            const disabled = null != local.itemDisabled ? Boolean(local.itemDisabled(item, index)) : extractItemDisabled(item);
+    const variant = ()=>p.variant ?? "primary";
+    const menuTrigger = ()=>p.menuTrigger ?? "focus";
+    const fullWidth = ()=>Boolean(p.fullWidth);
+    const isDisabled = ()=>Boolean("disabled" === p.state) || Boolean(p.disabled);
+    const isInvalid = ()=>Boolean("invalid" === resolveState(p.state, p.issues));
+    const isRequired = ()=>Boolean(p.required) || Boolean(p.required);
+    const isOpen = ()=>void 0 !== p.open ? Boolean(p.open) : internalOpen();
+    const selectedKey = createMemo(()=>void 0 !== p.selectedKey ? normalizeKey(p.selectedKey) : internalSelectedKey());
+    const inputValue = createMemo(()=>void 0 !== p.inputValue ? p.inputValue : internalInputValue());
+    const normalizedItems = createMemo(()=>(p.items ?? []).map((item, index)=>{
+            const baseKey = null != p.itemKey ? String(p.itemKey(item, index)) : extractItemKey(item, index);
+            const textValue = null != p.itemTextValue ? p.itemTextValue(item, index) : extractItemText(item, baseKey);
+            const disabled = null != p.itemDisabled ? Boolean(p.itemDisabled(item, index)) : extractItemDisabled(item);
             return {
                 key: baseKey,
                 textValue,
@@ -109,22 +76,22 @@ const __solidLayoutComboBoxRoot = (_stable, p)=>{
     });
     const filteredItems = createMemo(()=>{
         const query = inputValue();
-        const filter = local.defaultFilter ?? defaultFilter;
+        const filter = p.defaultFilter ?? defaultFilter;
         return normalizedItems().filter((item)=>filter(item.textValue, query));
     });
     const getEnabledItems = ()=>filteredItems().filter((item)=>!item.disabled);
     const setSelectedKey = (nextKey)=>{
-        if (void 0 === local.selectedKey) setInternalSelectedKey(nextKey);
-        local.onSelectionChange?.(nextKey);
+        if (void 0 === p.selectedKey) setInternalSelectedKey(nextKey);
+        p.onSelectionChange?.(nextKey);
     };
     const setInputValue = (nextValue)=>{
-        if (void 0 === local.inputValue) setInternalInputValue(nextValue);
-        local.onInputChange?.(nextValue);
+        if (void 0 === p.inputValue) setInternalInputValue(nextValue);
+        p.onInputChange?.(nextValue);
     };
     const setOpen = (next, options)=>{
         if (next && isDisabled()) return;
-        if (void 0 === local.open) setInternalOpen(next);
-        local.onOpenChange?.(next);
+        if (void 0 === p.open) setInternalOpen(next);
+        p.onOpenChange?.(next);
         if (!next && options?.focusInput) queueMicrotask(()=>{
             inputRef?.focus();
         });
@@ -161,13 +128,13 @@ const __solidLayoutComboBoxRoot = (_stable, p)=>{
     const closeAndCommit = ()=>{
         setOpen(false);
         setActiveKeySignal(null);
-        if (!local.allowsCustomValue) {
+        if (!p.allowsCustomValue) {
             const selected = selectedItem();
             setInputValue(selected?.textValue ?? "");
         }
     };
     const handleFocusOut = (event)=>{
-        invokeEventHandler(local.onFocusOut, event);
+        invokeEventHandler(p.onFocusOut, event);
         if (event.defaultPrevented) return;
         const nextTarget = event.relatedTarget;
         if (rootRef?.contains(nextTarget)) return;
@@ -175,7 +142,7 @@ const __solidLayoutComboBoxRoot = (_stable, p)=>{
     };
     const getOptionId = (key)=>`${listBoxId}-${toOptionKey(key, 0)}`;
     createEffect(()=>{
-        if (void 0 !== local.inputValue) return;
+        if (void 0 !== p.inputValue) return;
         const selected = selectedItem();
         if (!selected) return;
         if (internalInputValue() !== selected.textValue) setInternalInputValue(selected.textValue);
@@ -189,7 +156,7 @@ const __solidLayoutComboBoxRoot = (_stable, p)=>{
         const selected = enabledItems.find((item)=>item.key === selectedKey());
         setActiveKeySignal((selected ?? enabledItems[0]).key);
     });
-    onMount(()=>{
+    onSettled(()=>{
         const handlePointerDown = (event)=>{
             if (!rootRef) return;
             if (rootRef.contains(event.target)) return;
@@ -203,10 +170,10 @@ const __solidLayoutComboBoxRoot = (_stable, p)=>{
     const hiddenValue = createMemo(()=>{
         const currentKey = selectedKey();
         if (currentKey) return currentKey;
-        if (local.allowsCustomValue) return inputValue();
+        if (p.allowsCustomValue) return inputValue();
         return "";
     });
-    return createComponent(ComboBoxContext.Provider, {
+    return createComponent(ComboBoxContext, {
         value: {
             variant,
             fullWidth,
@@ -235,13 +202,13 @@ const __solidLayoutComboBoxRoot = (_stable, p)=>{
             }
         },
         get children () {
-            var _el$ = _tmpl$2();
-            use((node)=>{
-                rootRef = node;
-                if ("function" == typeof local.ref) local.ref(node);
-            }, _el$);
+            var _el$ = _tmpl$2(), _el$3 = _el$.firstChild, _el$4 = _el$3.nextSibling;
+            ref(()=>(node)=>{
+                    rootRef = node;
+                    if ("function" == typeof p.ref) p.ref(node);
+                }, _el$);
             spread(_el$, mergeProps(others, ()=>({
-                    class: twMerge(CLASSES.Root.base, CLASSES.Root.variant[variant()], fullWidth() && CLASSES.Root.flag.fullWidth, local.class)
+                    class: twMerge(CLASSES.Root.base, CLASSES.Root.variant[variant()], fullWidth() && CLASSES.Root.flag.fullWidth, p.class)
                 }), {
                 "data-slot": "combobox",
                 get ["data-open"] () {
@@ -260,46 +227,51 @@ const __solidLayoutComboBoxRoot = (_stable, p)=>{
                     return isDisabled() ? "true" : void 0;
                 },
                 get ["data-theme"] () {
-                    return local.dataTheme;
+                    return p.dataTheme;
                 },
                 get style () {
-                    return local.style;
+                    return p.style;
                 },
                 onFocusOut: handleFocusOut
-            }), false, true);
+            }), true);
             insert(_el$, createComponent(Show, {
                 get when () {
-                    return local.name;
+                    return p.name;
                 },
                 get children () {
                     var _el$2 = _tmpl$();
-                    effect(()=>setAttribute(_el$2, "name", local.name));
-                    effect(()=>_el$2.value = hiddenValue());
+                    effect(()=>({
+                            e: p.name,
+                            t: hiddenValue()
+                        }), ({ e, t }, _p$)=>{
+                        e !== _p$?.e && setAttribute(_el$2, "name", e);
+                        _el$2.value = t ?? "";
+                    });
                     return _el$2;
                 }
-            }), null);
-            insert(_el$, ()=>local.children ?? [
+            }), _el$3);
+            insert(_el$, ()=>p.children ?? [
                     createComponent(ComboBoxInputGroup, {
                         get children () {
                             return [
                                 createComponent(Show, {
                                     get when () {
-                                        return local.startIcon;
+                                        return p.startIcon;
                                     },
                                     get children () {
-                                        var _el$3 = _tmpl$3();
-                                        spread(_el$3, mergeProps(()=>({
+                                        var _el$5 = _tmpl$3();
+                                        spread(_el$5, mergeProps(()=>({
                                                 class: twMerge(CLASSES.Icon.base, CLASSES.Icon.start)
                                             }), {
                                             "data-slot": "combobox-start-icon"
-                                        }), false, true);
-                                        insert(_el$3, ()=>local.startIcon);
-                                        return _el$3;
+                                        }), true);
+                                        insert(_el$5, ()=>p.startIcon);
+                                        return _el$5;
                                     }
                                 }),
                                 createComponent(ComboBoxInput, {
                                     get placeholder () {
-                                        return local.placeholder;
+                                        return p.placeholder;
                                     },
                                     get required () {
                                         return isRequired();
@@ -307,7 +279,7 @@ const __solidLayoutComboBoxRoot = (_stable, p)=>{
                                 }),
                                 createComponent(ComboBoxTrigger, {
                                     get endIcon () {
-                                        return local.endIcon;
+                                        return p.endIcon;
                                     }
                                 })
                             ];
@@ -318,7 +290,7 @@ const __solidLayoutComboBoxRoot = (_stable, p)=>{
                             return createComponent(ComboBoxList, {});
                         }
                     })
-                ], null);
+                ], _el$4);
             return _el$;
         }
     });
@@ -330,34 +302,27 @@ const ComboBoxRoot = defineComponent({
 });
 const __solidLayoutComboBoxInputGroup = (_stable, p)=>{
     const context = useContext(ComboBoxContext);
-    const [local, others] = splitProps(p, [
-        "children",
-        "class",
-        "dataTheme",
-        "style"
-    ]);
-    return (()=>{
-        var _el$4 = _tmpl$2();
-        spread(_el$4, mergeProps(others, ()=>({
-                class: twMerge(CLASSES.InputGroup.base, context?.fullWidth() && CLASSES.InputGroup.flag.fullWidth, local.class)
-            }), {
-            "data-slot": "combobox-input-group",
-            get ["data-disabled"] () {
-                return context?.isDisabled() ? "true" : void 0;
-            },
-            get ["data-invalid"] () {
-                return context?.isInvalid() ? "true" : void 0;
-            },
-            get ["data-theme"] () {
-                return local.dataTheme;
-            },
-            get style () {
-                return local.style;
-            }
-        }), false, true);
-        insert(_el$4, ()=>local.children);
-        return _el$4;
-    })();
+    const others = omit(p, "children", "class", "dataTheme", "style");
+    var _el$6 = _tmpl$4();
+    spread(_el$6, mergeProps(others, ()=>({
+            class: twMerge(CLASSES.InputGroup.base, context?.fullWidth() && CLASSES.InputGroup.flag.fullWidth, p.class)
+        }), {
+        "data-slot": "combobox-input-group",
+        get ["data-disabled"] () {
+            return context?.isDisabled() ? "true" : void 0;
+        },
+        get ["data-invalid"] () {
+            return context?.isInvalid() ? "true" : void 0;
+        },
+        get ["data-theme"] () {
+            return p.dataTheme;
+        },
+        get style () {
+            return p.style;
+        }
+    }), true);
+    insert(_el$6, ()=>p.children);
+    return _el$6;
 };
 const ComboBoxInputGroup = defineComponent({
     recipe: componentRecipe,
@@ -366,19 +331,9 @@ const ComboBoxInputGroup = defineComponent({
 });
 const __solidLayoutComboBoxInput = (_stable, p)=>{
     const context = useContext(ComboBoxContext);
-    const [local, others] = splitProps(p, [
-        "class",
-        "dataTheme",
-        "style",
-        "onInput",
-        "onKeyDown",
-        "onFocus",
-        "onBlur",
-        "ref",
-        "required"
-    ]);
+    const others = omit(p, "class", "dataTheme", "style", "onInput", "onKeyDown", "onFocus", "onBlur", "ref", "required");
     const handleInput = (event)=>{
-        invokeEventHandler(local.onInput, event);
+        invokeEventHandler(p.onInput, event);
         if (event.defaultPrevented) return;
         const nextValue = event.currentTarget.value;
         context?.setInputValue(nextValue);
@@ -387,12 +342,12 @@ const __solidLayoutComboBoxInput = (_stable, p)=>{
         if ((context?.menuTrigger() ?? "focus") !== "manual") context?.setOpen(true);
     };
     const handleFocus = (event)=>{
-        invokeEventHandler(local.onFocus, event);
+        invokeEventHandler(p.onFocus, event);
         if (event.defaultPrevented) return;
         if ((context?.menuTrigger() ?? "focus") === "focus") context?.setOpen(true);
     };
     const handleKeyDown = (event)=>{
-        invokeEventHandler(local.onKeyDown, event);
+        invokeEventHandler(p.onKeyDown, event);
         if (event.defaultPrevented) return;
         const isOpen = context?.isOpen() ?? false;
         if ("ArrowDown" === event.key) {
@@ -444,57 +399,55 @@ const __solidLayoutComboBoxInput = (_stable, p)=>{
         if (!context?.isOpen() || !activeKey) return;
         return context.getOptionId(activeKey);
     };
-    return (()=>{
-        var _el$5 = _tmpl$4();
-        use((node)=>{
+    var _el$7 = _tmpl$5();
+    ref(()=>(node)=>{
             context?.attachInputRef(node);
-            if ("function" == typeof local.ref) local.ref(node);
-        }, _el$5);
-        spread(_el$5, mergeProps(others, {
-            role: "combobox",
-            "aria-haspopup": "listbox",
-            get ["aria-controls"] () {
-                return context?.listBoxId;
-            },
-            get ["aria-expanded"] () {
-                return context?.isOpen() ? "true" : "false";
-            },
-            "aria-autocomplete": "list",
-            get ["aria-activedescendant"] () {
-                return activeOptionId();
-            },
-            get ["aria-disabled"] () {
-                return context?.isDisabled() ? "true" : void 0;
-            },
-            get ["aria-invalid"] () {
-                return context?.isInvalid() ? "true" : void 0;
-            }
-        }, ()=>({
-                class: twMerge(CLASSES.Input.base, local.class)
-            }), {
-            "data-slot": "combobox-input",
-            get ["data-theme"] () {
-                return local.dataTheme;
-            },
-            get style () {
-                return local.style;
-            },
-            get value () {
-                return context?.inputValue() ?? "";
-            },
-            get disabled () {
-                return context?.isDisabled();
-            },
-            get required () {
-                return local.required ?? context?.isRequired();
-            },
-            onInput: handleInput,
-            onFocus: handleFocus,
-            onBlur: (event)=>invokeEventHandler(local.onBlur, event),
-            onKeyDown: handleKeyDown
-        }), false, false);
-        return _el$5;
-    })();
+            if ("function" == typeof p.ref) p.ref(node);
+        }, _el$7);
+    spread(_el$7, mergeProps(others, {
+        role: "combobox",
+        "aria-haspopup": "listbox",
+        get ["aria-controls"] () {
+            return context?.listBoxId;
+        },
+        get ["aria-expanded"] () {
+            return context?.isOpen() ? "true" : "false";
+        },
+        "aria-autocomplete": "list",
+        get ["aria-activedescendant"] () {
+            return activeOptionId();
+        },
+        get ["aria-disabled"] () {
+            return context?.isDisabled() ? "true" : void 0;
+        },
+        get ["aria-invalid"] () {
+            return context?.isInvalid() ? "true" : void 0;
+        }
+    }, ()=>({
+            class: twMerge(CLASSES.Input.base, p.class)
+        }), {
+        "data-slot": "combobox-input",
+        get ["data-theme"] () {
+            return p.dataTheme;
+        },
+        get style () {
+            return p.style;
+        },
+        get value () {
+            return context?.inputValue() ?? "";
+        },
+        get disabled () {
+            return context?.isDisabled();
+        },
+        get required () {
+            return p.required ?? context?.isRequired();
+        },
+        onInput: handleInput,
+        onFocus: handleFocus,
+        onBlur: (event)=>invokeEventHandler(p.onBlur, event),
+        onKeyDown: handleKeyDown
+    }), false);
+    return _el$7;
 };
 const ComboBoxInput = defineComponent({
     recipe: componentRecipe,
@@ -503,82 +456,72 @@ const ComboBoxInput = defineComponent({
 });
 const __solidLayoutComboBoxTrigger = (_stable, p)=>{
     const context = useContext(ComboBoxContext);
-    const [local, others] = splitProps(p, [
-        "children",
-        "class",
-        "dataTheme",
-        "style",
-        "startIcon",
-        "endIcon",
-        "onClick"
-    ]);
+    const others = omit(p, "children", "class", "dataTheme", "style", "startIcon", "endIcon", "onClick");
     const handleClick = (event)=>{
-        invokeEventHandler(local.onClick, event);
+        invokeEventHandler(p.onClick, event);
         if (event.defaultPrevented) return;
         context?.toggleOpen();
     };
-    return (()=>{
-        var _el$6 = _tmpl$5();
-        spread(_el$6, mergeProps(others, {
-            type: "button"
-        }, ()=>({
-                class: twMerge(CLASSES.Trigger.base, local.class)
-            }), {
-            "data-slot": "combobox-trigger",
-            get ["data-open"] () {
-                return context?.isOpen() ? "true" : "false";
-            },
-            get ["data-theme"] () {
-                return local.dataTheme;
-            },
-            get style () {
-                return local.style;
-            },
-            get disabled () {
-                return context?.isDisabled();
-            },
-            get ["aria-disabled"] () {
-                return context?.isDisabled() ? "true" : void 0;
-            },
-            "aria-haspopup": "listbox",
-            get ["aria-expanded"] () {
-                return context?.isOpen() ? "true" : "false";
-            },
-            get ["aria-controls"] () {
-                return context?.listBoxId;
-            },
-            "aria-label": "Toggle options",
-            onClick: handleClick
-        }), false, true);
-        insert(_el$6, (()=>{
-            var _c$ = memo(()=>!!local.startIcon);
-            return ()=>_c$() ? (()=>{
-                    var _el$7 = _tmpl$3();
-                    spread(_el$7, mergeProps(()=>({
-                            class: twMerge(CLASSES.Icon.base, CLASSES.Icon.start)
-                        }), {
-                        "data-slot": "combobox-trigger-start-icon"
-                    }), false, true);
-                    insert(_el$7, ()=>local.startIcon);
-                    return _el$7;
-                })() : null;
-        })(), null);
-        insert(_el$6, ()=>local.children, null);
-        insert(_el$6, (()=>{
-            var _c$2 = memo(()=>!!local.endIcon);
-            return ()=>_c$2() ? (()=>{
-                    var _el$8 = _tmpl$3();
-                    spread(_el$8, mergeProps(()=>({
-                            class: twMerge(CLASSES.Icon.base, CLASSES.Icon.end, CLASSES.Trigger.icon)
-                        }), {
-                        "data-slot": "combobox-trigger-end-icon"
-                    }), false, true);
-                    insert(_el$8, ()=>local.endIcon);
-                    return _el$8;
-                })() : null;
-        })(), null);
-        return _el$6;
-    })();
+    var _el$8 = _tmpl$6(), _el$9 = _el$8.firstChild, _el$0 = _el$9.nextSibling, _el$1 = _el$0.nextSibling;
+    spread(_el$8, mergeProps(others, {
+        type: "button"
+    }, ()=>({
+            class: twMerge(CLASSES.Trigger.base, p.class)
+        }), {
+        "data-slot": "combobox-trigger",
+        get ["data-open"] () {
+            return context?.isOpen() ? "true" : "false";
+        },
+        get ["data-theme"] () {
+            return p.dataTheme;
+        },
+        get style () {
+            return p.style;
+        },
+        get disabled () {
+            return context?.isDisabled();
+        },
+        get ["aria-disabled"] () {
+            return context?.isDisabled() ? "true" : void 0;
+        },
+        "aria-haspopup": "listbox",
+        get ["aria-expanded"] () {
+            return context?.isOpen() ? "true" : "false";
+        },
+        get ["aria-controls"] () {
+            return context?.listBoxId;
+        },
+        "aria-label": "Toggle options",
+        onClick: handleClick
+    }), true);
+    insert(_el$8, (()=>{
+        var _c$ = memo(()=>!!p.startIcon);
+        return ()=>_c$() ? (()=>{
+                var _el$10 = _tmpl$3();
+                spread(_el$10, mergeProps(()=>({
+                        class: twMerge(CLASSES.Icon.base, CLASSES.Icon.start)
+                    }), {
+                    "data-slot": "combobox-trigger-start-icon"
+                }), true);
+                insert(_el$10, ()=>p.startIcon);
+                return _el$10;
+            })() : null;
+    })(), _el$9);
+    insert(_el$8, ()=>p.children, _el$0);
+    insert(_el$8, (()=>{
+        var _c$2 = memo(()=>!!p.endIcon);
+        return ()=>_c$2() ? (()=>{
+                var _el$11 = _tmpl$3();
+                spread(_el$11, mergeProps(()=>({
+                        class: twMerge(CLASSES.Icon.base, CLASSES.Icon.end, CLASSES.Trigger.icon)
+                    }), {
+                    "data-slot": "combobox-trigger-end-icon"
+                }), true);
+                insert(_el$11, ()=>p.endIcon);
+                return _el$11;
+            })() : null;
+    })(), _el$1);
+    return _el$8;
 };
 const ComboBoxTrigger = defineComponent({
     recipe: componentRecipe,
@@ -587,31 +530,24 @@ const ComboBoxTrigger = defineComponent({
 });
 const __solidLayoutComboBoxPopover = (_stable, p)=>{
     const context = useContext(ComboBoxContext);
-    const [local, others] = splitProps(p, [
-        "children",
-        "class",
-        "dataTheme",
-        "style"
-    ]);
-    return (()=>{
-        var _el$9 = _tmpl$2();
-        spread(_el$9, mergeProps(others, ()=>({
-                class: twMerge(CLASSES.Popover.base, local.class)
-            }), {
-            "data-slot": "combobox-popover",
-            get ["data-open"] () {
-                return context?.isOpen() ? "true" : "false";
-            },
-            get ["data-theme"] () {
-                return local.dataTheme;
-            },
-            get style () {
-                return local.style;
-            }
-        }), false, true);
-        insert(_el$9, ()=>local.children ?? createComponent(ComboBoxList, {}));
-        return _el$9;
-    })();
+    const others = omit(p, "children", "class", "dataTheme", "style");
+    var _el$12 = _tmpl$4();
+    spread(_el$12, mergeProps(others, ()=>({
+            class: twMerge(CLASSES.Popover.base, p.class)
+        }), {
+        "data-slot": "combobox-popover",
+        get ["data-open"] () {
+            return context?.isOpen() ? "true" : "false";
+        },
+        get ["data-theme"] () {
+            return p.dataTheme;
+        },
+        get style () {
+            return p.style;
+        }
+    }), true);
+    insert(_el$12, ()=>p.children ?? createComponent(ComboBoxList, {}));
+    return _el$12;
 };
 const ComboBoxPopover = defineComponent({
     recipe: componentRecipe,
@@ -620,134 +556,126 @@ const ComboBoxPopover = defineComponent({
 });
 const __solidLayoutComboBoxList = (_stable, p)=>{
     const context = useContext(ComboBoxContext);
-    const [local, others] = splitProps(p, [
-        "children",
-        "class",
-        "dataTheme",
-        "style",
-        "renderEmpty",
-        "endIcon"
-    ]);
+    const others = omit(p, "children", "class", "dataTheme", "style", "renderEmpty", "endIcon");
     const items = ()=>context?.filteredItems() ?? [];
-    return (()=>{
-        var _el$0 = _tmpl$2();
-        spread(_el$0, mergeProps(others, {
-            get id () {
-                return context?.listBoxId;
-            },
-            role: "listbox"
-        }, ()=>({
-                class: twMerge(CLASSES.List.base, local.class)
-            }), {
-            "data-slot": "combobox-list",
-            get ["data-theme"] () {
-                return local.dataTheme;
-            },
-            get style () {
-                return local.style;
-            }
-        }), false, true);
-        insert(_el$0, createComponent(Show, {
-            get when () {
-                return items().length > 0;
-            },
-            get fallback () {
-                return local.renderEmpty?.() ?? (()=>{
-                    var _el$1 = _tmpl$6();
-                    spread(_el$1, mergeProps(()=>({
-                            class: CLASSES.List.empty
+    var _el$13 = _tmpl$4();
+    spread(_el$13, mergeProps(others, {
+        get id () {
+            return context?.listBoxId;
+        },
+        role: "listbox"
+    }, ()=>({
+            class: twMerge(CLASSES.List.base, p.class)
+        }), {
+        "data-slot": "combobox-list",
+        get ["data-theme"] () {
+            return p.dataTheme;
+        },
+        get style () {
+            return p.style;
+        }
+    }), true);
+    insert(_el$13, createComponent(Show, {
+        get when () {
+            return items().length > 0;
+        },
+        get fallback () {
+            return p.renderEmpty?.() ?? (()=>{
+                var _el$14 = _tmpl$7();
+                spread(_el$14, mergeProps(()=>({
+                        class: CLASSES.List.empty
+                    }), {
+                    "data-slot": "combobox-empty-state"
+                }), true);
+                return _el$14;
+            })();
+        },
+        get children () {
+            return createComponent(For, {
+                get each () {
+                    return items();
+                },
+                children: (item)=>{
+                    const selected = ()=>context?.selectedKey() === item.key;
+                    const active = ()=>context?.activeKey() === item.key;
+                    const state = {
+                        key: item.key,
+                        textValue: item.textValue,
+                        isSelected: selected(),
+                        isActive: active(),
+                        isDisabled: item.disabled,
+                        item: item.item
+                    };
+                    var _el$15 = _tmpl$8(), _el$16 = _el$15.firstChild;
+                    spread(_el$15, mergeProps({
+                        get id () {
+                            return context?.getOptionId(item.key);
+                        },
+                        role: "option",
+                        tabindex: -1,
+                        get ["aria-selected"] () {
+                            return selected() ? "true" : "false";
+                        },
+                        get ["aria-disabled"] () {
+                            return item.disabled ? "true" : void 0;
+                        },
+                        "data-slot": "combobox-option",
+                        get ["data-key"] () {
+                            return item.key;
+                        },
+                        get ["data-selected"] () {
+                            return selected() ? "true" : "false";
+                        },
+                        get ["data-active"] () {
+                            return active() ? "true" : "false";
+                        },
+                        get ["data-disabled"] () {
+                            return item.disabled ? "true" : "false";
+                        }
+                    }, ()=>({
+                            class: CLASSES.Option.base
                         }), {
-                        "data-slot": "combobox-empty-state"
-                    }), false, true);
-                    return _el$1;
-                })();
-            },
-            get children () {
-                return createComponent(For, {
-                    get each () {
-                        return items();
-                    },
-                    children: (item)=>{
-                        const selected = ()=>context?.selectedKey() === item.key;
-                        const active = ()=>context?.activeKey() === item.key;
-                        const state = {
-                            key: item.key,
-                            textValue: item.textValue,
-                            isSelected: selected(),
-                            isActive: active(),
-                            isDisabled: item.disabled,
-                            item: item.item
-                        };
-                        return (()=>{
-                            var _el$10 = _tmpl$7(), _el$11 = _el$10.firstChild;
-                            spread(_el$10, mergeProps({
-                                get id () {
-                                    return context?.getOptionId(item.key);
-                                },
-                                get ["aria-selected"] () {
-                                    return selected() ? "true" : "false";
-                                },
-                                get ["aria-disabled"] () {
-                                    return item.disabled ? "true" : void 0;
-                                },
-                                get ["data-key"] () {
-                                    return item.key;
-                                },
-                                get ["data-selected"] () {
-                                    return selected() ? "true" : "false";
-                                },
-                                get ["data-active"] () {
-                                    return active() ? "true" : "false";
-                                },
-                                get ["data-disabled"] () {
-                                    return item.disabled ? "true" : "false";
-                                }
-                            }, ()=>({
-                                    class: CLASSES.Option.base
-                                }), {
-                                onMouseDown: (event)=>event.preventDefault(),
-                                onMouseEnter: ()=>{
-                                    if (item.disabled) return;
-                                    context?.setActiveKey(item.key);
-                                },
-                                onClick: ()=>{
-                                    if (item.disabled) return;
-                                    context?.selectKey(item.key);
-                                }
-                            }), false, true);
-                            spread(_el$11, mergeProps(()=>({
-                                    class: CLASSES.Option.label
-                                })), false, true);
-                            insert(_el$11, (()=>{
-                                var _c$3 = memo(()=>"function" == typeof local.children);
-                                return ()=>_c$3() ? local.children(state) : item.textValue;
-                            })());
-                            insert(_el$10, (()=>{
-                                var _c$4 = memo(()=>!!local.endIcon);
-                                return ()=>_c$4() ? (()=>{
-                                        var _el$12 = _tmpl$8(), _el$13 = _el$12.firstChild;
-                                        spread(_el$12, mergeProps(()=>({
-                                                class: CLASSES.Option.indicator
-                                            }), {
-                                            "aria-hidden": "true"
-                                        }), false, true);
-                                        spread(_el$13, mergeProps(()=>({
-                                                class: twMerge(CLASSES.Icon.base, CLASSES.Icon.end)
-                                            }), {
-                                            "data-slot": "combobox-option-end-icon"
-                                        }), false, true);
-                                        insert(_el$13, ()=>local.endIcon);
-                                        return _el$12;
-                                    })() : null;
-                            })(), null);
-                            return _el$10;
-                        })();
-                    }
-                });
-            }
-        }));
-        return _el$0;
-    })();
+                        onMouseDown: (event)=>event.preventDefault(),
+                        onMouseEnter: ()=>{
+                            if (item.disabled) return;
+                            context?.setActiveKey(item.key);
+                        },
+                        onClick: ()=>{
+                            if (item.disabled) return;
+                            context?.selectKey(item.key);
+                        }
+                    }), true);
+                    spread(_el$16, mergeProps(()=>({
+                            class: CLASSES.Option.label
+                        })), true);
+                    insert(_el$16, (()=>{
+                        var _c$3 = memo(()=>"function" == typeof p.children);
+                        return ()=>_c$3() ? p.children(state) : item.textValue;
+                    })());
+                    insert(_el$15, (()=>{
+                        var _c$4 = memo(()=>!!p.endIcon);
+                        return ()=>_c$4() ? (()=>{
+                                var _el$17 = _tmpl$9(), _el$18 = _el$17.firstChild;
+                                spread(_el$17, mergeProps(()=>({
+                                        class: CLASSES.Option.indicator
+                                    }), {
+                                    "aria-hidden": "true"
+                                }), true);
+                                spread(_el$18, mergeProps(()=>({
+                                        class: twMerge(CLASSES.Icon.base, CLASSES.Icon.end)
+                                    }), {
+                                    "data-slot": "combobox-option-end-icon"
+                                }), true);
+                                insert(_el$18, ()=>p.endIcon);
+                                return _el$17;
+                            })() : null;
+                    })(), null);
+                    return _el$15;
+                }
+            });
+        }
+    }));
+    return _el$13;
 };
 const ComboBoxList = defineComponent({
     recipe: componentRecipe,