@pathscale/ui 2.4.0 → 2.6.0

package/dist/components/select/Select.generated.js

@@ -1,11 +1,11 @@
-import { Portal, createComponent, insert, memo, mergeProps, spread, template, use } from "solid-js/web";
-import { defineComponent } from "solid-layouts/application-boundary";
+import { Portal, createComponent, insert, memo, mergeProps, ref, spread, template } from "@solidjs/web";
+import { defineComponent } from "solid-layouts/solid-2/application-boundary";
 import "./Select.css";
-import { createContext, createEffect, createMemo, createSignal, createUniqueId, onCleanup, onMount, splitProps, useContext } from "solid-js";
-import { twMerge } from "tailwind-merge";
+import { createContext, createEffect, createMemo, createSignal, createUniqueId, omit, onCleanup, onSettled, useContext } from "solid-js";
+import { twMerge } from "../../lib/twMerge.js";
 import { createOverlayPosition } from "../_shared/overlayPosition.js";
 import { CLASSES, componentRecipe } from "./Select.recipe.js";
-var _tmpl$ = /*#__PURE__*/ template("<div>"), _tmpl$2 = /*#__PURE__*/ template("<button>"), _tmpl$3 = /*#__PURE__*/ template("<span>"), _tmpl$4 = /*#__PURE__*/ template("<span><span>"), _tmpl$5 = /*#__PURE__*/ template("<button><span>");
+var _tmpl$ = /*#__PURE__*/ template("<div>"), _tmpl$2 = /*#__PURE__*/ template("<button><!><!><!>"), _tmpl$3 = /*#__PURE__*/ template("<span>"), _tmpl$4 = /*#__PURE__*/ template("<span><!><!><!>"), _tmpl$5 = /*#__PURE__*/ template("<span><span>"), _tmpl$6 = /*#__PURE__*/ template("<button><span></span><!>");
 const SelectContext = createContext();
 const invokeEventHandler = (handler, event)=>{
     if ("function" == typeof handler) return void handler(event);
@@ -35,39 +35,17 @@ const sortOptionsByDomOrder = (options)=>[
         return 0;
     });
 const __solidLayoutSelectRoot = (_stable, p)=>{
-    const [local, others] = splitProps(p, [
-        "children",
-        "class",
-        "dataTheme",
-        "placeholder",
-        "value",
-        "defaultValue",
-        "selectedKeys",
-        "defaultSelectedKeys",
-        "onChange",
-        "onSelectionChange",
-        "state",
-        "disabled",
-        "fullWidth",
-        "variant",
-        "selectionMode",
-        "placement",
-        "autoFlip",
-        "open",
-        "defaultOpen",
-        "onOpenChange",
-        "ref"
-    ]);
+    const others = omit(p, "children", "class", "dataTheme", "placeholder", "value", "defaultValue", "selectedKeys", "defaultSelectedKeys", "onChange", "onSelectionChange", "state", "disabled", "fullWidth", "variant", "selectionMode", "placement", "autoFlip", "open", "defaultOpen", "onOpenChange", "ref");
     const baseId = createUniqueId();
     const triggerId = `${baseId}-trigger`;
     const listboxId = `${baseId}-listbox`;
-    const selectionMode = ()=>local.selectionMode ?? "single";
-    const variant = ()=>local.variant ?? "primary";
-    const fullWidth = ()=>Boolean(local.fullWidth);
-    const disabled = ()=>Boolean("disabled" === local.state) || Boolean(local.disabled);
-    const initialSelected = normalizeSelection(selectionMode(), local.defaultSelectedKeys ?? local.defaultValue);
+    const selectionMode = ()=>p.selectionMode ?? "single";
+    const variant = ()=>p.variant ?? "primary";
+    const fullWidth = ()=>Boolean(p.fullWidth);
+    const disabled = ()=>Boolean("disabled" === p.state) || Boolean(p.disabled);
+    const initialSelected = normalizeSelection(selectionMode(), p.defaultSelectedKeys ?? p.defaultValue);
     const [internalSelectedKeys, setInternalSelectedKeys] = createSignal(initialSelected);
-    const [internalOpen, setInternalOpen] = createSignal(Boolean(local.defaultOpen));
+    const [internalOpen, setInternalOpen] = createSignal(Boolean(p.defaultOpen));
     const [options, setOptions] = createSignal([]);
     const [optionTextByKey, setOptionTextByKey] = createSignal(new Map());
     const [focusedKey, setFocusedKey] = createSignal();
@@ -75,11 +53,11 @@ const __solidLayoutSelectRoot = (_stable, p)=>{
     const [triggerRef, setTriggerRefSignal] = createSignal();
     const [popoverRef, setPopoverRefSignal] = createSignal();
     const [rootRef, setRootRefSignal] = createSignal();
-    const open = ()=>void 0 !== local.open ? Boolean(local.open) : internalOpen();
-    const placement = ()=>local.placement ?? "bottom";
-    const autoFlip = ()=>local.autoFlip ?? true;
+    const open = ()=>void 0 !== p.open ? Boolean(p.open) : internalOpen();
+    const placement = ()=>p.placement ?? "bottom";
+    const autoFlip = ()=>p.autoFlip ?? true;
     const selectedKeys = createMemo(()=>{
-        const controlledValue = void 0 !== local.selectedKeys ? local.selectedKeys : local.value;
+        const controlledValue = void 0 !== p.selectedKeys ? p.selectedKeys : p.value;
         if (void 0 !== controlledValue) return normalizeSelection(selectionMode(), controlledValue);
         return normalizeSelection(selectionMode(), internalSelectedKeys());
     });
@@ -115,14 +93,14 @@ const __solidLayoutSelectRoot = (_stable, p)=>{
         focusOption(enabled[nextIndex]);
     };
     const emitSelectionChange = (nextKeys)=>{
-        if (void 0 === local.selectedKeys && void 0 === local.value) setInternalSelectedKeys(nextKeys);
-        local.onSelectionChange?.(new Set(nextKeys));
-        local.onChange?.("multiple" === selectionMode() ? nextKeys : nextKeys[0] ?? null);
+        if (void 0 === p.selectedKeys && void 0 === p.value) setInternalSelectedKeys(nextKeys);
+        p.onSelectionChange?.(new Set(nextKeys));
+        p.onChange?.("multiple" === selectionMode() ? nextKeys : nextKeys[0] ?? null);
     };
     const setOpen = (next, options)=>{
         if (next && disabled()) return;
-        if (void 0 === local.open) setInternalOpen(next);
-        local.onOpenChange?.(next);
+        if (void 0 === p.open) setInternalOpen(next);
+        p.onOpenChange?.(next);
         if (!next) {
             setFocusRequest(null);
             if (options?.focusTrigger) triggerRef()?.focus();
@@ -176,7 +154,7 @@ const __solidLayoutSelectRoot = (_stable, p)=>{
     };
     const setRootRef = (el)=>{
         setRootRefSignal(el);
-        if ("function" == typeof local.ref) local.ref(el);
+        if ("function" == typeof p.ref) p.ref(el);
     };
     createEffect(()=>{
         if (!open()) return;
@@ -194,7 +172,7 @@ const __solidLayoutSelectRoot = (_stable, p)=>{
             setFocusedKey(selected?.key ?? currentOptions.find((option)=>!option.disabled)?.key);
         }
     });
-    onMount(()=>{
+    onSettled(()=>{
         const handlePointerDown = (event)=>{
             if (!open()) return;
             const target = event.target;
@@ -208,14 +186,14 @@ const __solidLayoutSelectRoot = (_stable, p)=>{
             document.removeEventListener("pointerdown", handlePointerDown);
         });
     });
-    return createComponent(SelectContext.Provider, {
+    return createComponent(SelectContext, {
         value: {
             open,
             variant,
             fullWidth,
             disabled,
             selectionMode,
-            placeholder: ()=>local.placeholder ?? "Select an option",
+            placeholder: ()=>p.placeholder ?? "Select an option",
             triggerId,
             listboxId,
             placement,
@@ -241,12 +219,12 @@ const __solidLayoutSelectRoot = (_stable, p)=>{
         },
         get children () {
             var _el$ = _tmpl$();
-            use(setRootRef, _el$);
+            ref(()=>setRootRef, _el$);
             spread(_el$, mergeProps(others, ()=>({
-                    class: twMerge(CLASSES.base, CLASSES.variant[variant()], fullWidth() && CLASSES.flag.fullWidth, local.class)
+                    class: twMerge(CLASSES.base, CLASSES.variant[variant()], fullWidth() && CLASSES.flag.fullWidth, p.class)
                 }), {
                 get ["data-theme"] () {
-                    return local.dataTheme;
+                    return p.dataTheme;
                 },
                 "data-slot": "ui-select",
                 get ["data-open"] () {
@@ -258,8 +236,8 @@ const __solidLayoutSelectRoot = (_stable, p)=>{
                 get ["data-selection-mode"] () {
                     return selectionMode();
                 }
-            }), false, true);
-            insert(_el$, ()=>local.children);
+            }), true);
+            insert(_el$, ()=>p.children);
             return _el$;
         }
     });
@@ -271,72 +249,61 @@ const SelectRoot = defineComponent({
 });
 const __solidLayoutSelectTrigger = (_stable, p)=>{
     const ctx = useContext(SelectContext);
-    const [local, others] = splitProps(p, [
-        "children",
-        "class",
-        "dataTheme",
-        "disabled",
-        "startIcon",
-        "endIcon",
-        "onClick",
-        "onKeyDown",
-        "ref",
-        "type"
-    ]);
-    if (!ctx) return (()=>{
-        var _el$2 = _tmpl$2();
+    const others = omit(p, "children", "class", "dataTheme", "disabled", "startIcon", "endIcon", "onClick", "onKeyDown", "ref", "type");
+    if (!ctx) {
+        var _el$2 = _tmpl$2(), _el$3 = _el$2.firstChild, _el$4 = _el$3.nextSibling, _el$5 = _el$4.nextSibling;
         spread(_el$2, mergeProps(others, ()=>({
-                class: twMerge(CLASSES.slot.trigger, local.class)
+                class: twMerge(CLASSES.slot.trigger, p.class)
             }), {
             get ["data-theme"] () {
-                return local.dataTheme;
+                return p.dataTheme;
             },
             get type () {
-                return local.type ?? "button";
+                return p.type ?? "button";
             }
-        }), false, true);
+        }), true);
         insert(_el$2, (()=>{
-            var _c$ = memo(()=>!!local.startIcon);
+            var _c$ = memo(()=>!!p.startIcon);
             return ()=>_c$() ? (()=>{
-                    var _el$3 = _tmpl$3();
-                    spread(_el$3, mergeProps(()=>({
+                    var _el$6 = _tmpl$3();
+                    spread(_el$6, mergeProps(()=>({
                             class: twMerge(CLASSES.slot.icon, CLASSES.slot.iconStart)
                         }), {
                         "data-slot": "ui-select-trigger-start-icon"
-                    }), false, true);
-                    insert(_el$3, ()=>local.startIcon);
-                    return _el$3;
+                    }), true);
+                    insert(_el$6, ()=>p.startIcon);
+                    return _el$6;
                 })() : null;
-        })(), null);
-        insert(_el$2, ()=>local.children, null);
+        })(), _el$3);
+        insert(_el$2, ()=>p.children, _el$4);
         insert(_el$2, (()=>{
-            var _c$2 = memo(()=>!!local.endIcon);
+            var _c$2 = memo(()=>!!p.endIcon);
             return ()=>_c$2() ? (()=>{
-                    var _el$4 = _tmpl$3();
-                    spread(_el$4, mergeProps(()=>({
+                    var _el$7 = _tmpl$3();
+                    spread(_el$7, mergeProps(()=>({
                             class: twMerge(CLASSES.slot.icon, CLASSES.slot.iconEnd)
                         }), {
                         "data-slot": "ui-select-trigger-end-icon"
-                    }), false, true);
-                    insert(_el$4, ()=>local.endIcon);
-                    return _el$4;
+                    }), true);
+                    insert(_el$7, ()=>p.endIcon);
+                    return _el$7;
                 })() : null;
-        })(), null);
+        })(), _el$5);
         return _el$2;
-    })();
-    const isDisabled = ()=>Boolean(local.disabled) || ctx.disabled();
+    }
+    const isDisabled = ()=>Boolean(p.disabled) || ctx.disabled();
     const setRef = (el)=>{
         ctx.setTriggerRef(el);
-        if ("function" == typeof local.ref) local.ref(el);
+        if ("function" == typeof p.ref) p.ref(el);
     };
     const handleClick = (event)=>{
-        invokeEventHandler(local.onClick, event);
+        invokeEventHandler(p.onClick, event);
         if (event.defaultPrevented) return;
         if (isDisabled()) return;
         ctx.toggleOpen();
     };
     const handleKeyDown = (event)=>{
-        invokeEventHandler(local.onKeyDown, event);
+        invokeEventHandler(p.onKeyDown, event);
         if (event.defaultPrevented) return;
         if (isDisabled()) return;
         if ("ArrowDown" === event.key) {
@@ -365,71 +332,69 @@ const __solidLayoutSelectTrigger = (_stable, p)=>{
             ctx.setOpen(false);
         }
     };
-    return (()=>{
-        var _el$5 = _tmpl$2();
-        use(setRef, _el$5);
-        spread(_el$5, mergeProps(others, {
-            get id () {
-                return ctx.triggerId;
-            },
-            get type () {
-                return local.type ?? "button";
-            }
-        }, ()=>({
-                class: twMerge(CLASSES.slot.trigger, ctx.fullWidth() && CLASSES.slot.triggerFullWidth, local.class)
-            }), {
-            get ["data-theme"] () {
-                return local.dataTheme;
-            },
-            "data-slot": "ui-select-trigger",
-            get ["data-open"] () {
-                return ctx.open() ? "true" : "false";
-            },
-            "aria-haspopup": "listbox",
-            get ["aria-expanded"] () {
-                return ctx.open();
-            },
-            get ["aria-controls"] () {
-                return ctx.listboxId;
-            },
-            get ["aria-disabled"] () {
-                return isDisabled() ? "true" : "false";
-            },
-            get disabled () {
-                return isDisabled();
-            },
-            onClick: handleClick,
-            onKeyDown: handleKeyDown
-        }), false, true);
-        insert(_el$5, (()=>{
-            var _c$3 = memo(()=>!!local.startIcon);
-            return ()=>_c$3() ? (()=>{
-                    var _el$6 = _tmpl$3();
-                    spread(_el$6, mergeProps(()=>({
-                            class: twMerge(CLASSES.slot.icon, CLASSES.slot.iconStart)
-                        }), {
-                        "data-slot": "ui-select-trigger-start-icon"
-                    }), false, true);
-                    insert(_el$6, ()=>local.startIcon);
-                    return _el$6;
-                })() : null;
-        })(), null);
-        insert(_el$5, ()=>local.children, null);
-        insert(_el$5, (()=>{
-            var _c$4 = memo(()=>!!local.endIcon);
-            return ()=>_c$4() ? (()=>{
-                    var _el$7 = _tmpl$3();
-                    spread(_el$7, mergeProps(()=>({
-                            class: twMerge(CLASSES.slot.icon, CLASSES.slot.iconEnd)
-                        }), {
-                        "data-slot": "ui-select-trigger-end-icon"
-                    }), false, true);
-                    insert(_el$7, ()=>local.endIcon);
-                    return _el$7;
-                })() : null;
-        })(), null);
-        return _el$5;
-    })();
+    var _el$8 = _tmpl$2(), _el$9 = _el$8.firstChild, _el$0 = _el$9.nextSibling, _el$1 = _el$0.nextSibling;
+    ref(()=>setRef, _el$8);
+    spread(_el$8, mergeProps(others, {
+        get id () {
+            return ctx.triggerId;
+        },
+        get type () {
+            return p.type ?? "button";
+        }
+    }, ()=>({
+            class: twMerge(CLASSES.slot.trigger, ctx.fullWidth() && CLASSES.slot.triggerFullWidth, p.class)
+        }), {
+        get ["data-theme"] () {
+            return p.dataTheme;
+        },
+        "data-slot": "ui-select-trigger",
+        get ["data-open"] () {
+            return ctx.open() ? "true" : "false";
+        },
+        "aria-haspopup": "listbox",
+        get ["aria-expanded"] () {
+            return ctx.open() ? "true" : "false";
+        },
+        get ["aria-controls"] () {
+            return ctx.listboxId;
+        },
+        get ["aria-disabled"] () {
+            return isDisabled() ? "true" : "false";
+        },
+        get disabled () {
+            return isDisabled();
+        },
+        onClick: handleClick,
+        onKeyDown: handleKeyDown
+    }), true);
+    insert(_el$8, (()=>{
+        var _c$3 = memo(()=>!!p.startIcon);
+        return ()=>_c$3() ? (()=>{
+                var _el$10 = _tmpl$3();
+                spread(_el$10, mergeProps(()=>({
+                        class: twMerge(CLASSES.slot.icon, CLASSES.slot.iconStart)
+                    }), {
+                    "data-slot": "ui-select-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$4 = memo(()=>!!p.endIcon);
+        return ()=>_c$4() ? (()=>{
+                var _el$11 = _tmpl$3();
+                spread(_el$11, mergeProps(()=>({
+                        class: twMerge(CLASSES.slot.icon, CLASSES.slot.iconEnd)
+                    }), {
+                    "data-slot": "ui-select-trigger-end-icon"
+                }), true);
+                insert(_el$11, ()=>p.endIcon);
+                return _el$11;
+            })() : null;
+    })(), _el$1);
+    return _el$8;
 };
 const SelectTrigger = defineComponent({
     recipe: componentRecipe,
@@ -438,30 +403,24 @@ const SelectTrigger = defineComponent({
 });
 const __solidLayoutSelectValue = (_stable, p)=>{
     const ctx = useContext(SelectContext);
-    const [local, others] = splitProps(p, [
-        "children",
-        "class",
-        "dataTheme"
-    ]);
+    const others = omit(p, "children", "class", "dataTheme");
     const placeholder = ()=>ctx?.placeholder() ?? "";
     const text = ()=>ctx?.selectedText() ?? "";
     const isPlaceholder = ()=>(ctx?.selectedKeys().length ?? 0) === 0;
-    return (()=>{
-        var _el$8 = _tmpl$3();
-        spread(_el$8, mergeProps(others, ()=>({
-                class: twMerge(CLASSES.slot.value, local.class)
-            }), {
-            get ["data-theme"] () {
-                return local.dataTheme;
-            },
-            "data-slot": "ui-select-value",
-            get ["data-placeholder"] () {
-                return isPlaceholder() ? "true" : "false";
-            }
-        }), false, true);
-        insert(_el$8, ()=>local.children ?? (isPlaceholder() ? placeholder() : text()));
-        return _el$8;
-    })();
+    var _el$12 = _tmpl$3();
+    spread(_el$12, mergeProps(others, ()=>({
+            class: twMerge(CLASSES.slot.value, p.class)
+        }), {
+        get ["data-theme"] () {
+            return p.dataTheme;
+        },
+        "data-slot": "ui-select-value",
+        get ["data-placeholder"] () {
+            return isPlaceholder() ? "true" : "false";
+        }
+    }), true);
+    insert(_el$12, ()=>p.children ?? (isPlaceholder() ? placeholder() : text()));
+    return _el$12;
 };
 const SelectValue = defineComponent({
     recipe: componentRecipe,
@@ -470,56 +429,48 @@ const SelectValue = defineComponent({
 });
 const __solidLayoutSelectIndicator = (_stable, p)=>{
     const ctx = useContext(SelectContext);
-    const [local, others] = splitProps(p, [
-        "children",
-        "class",
-        "dataTheme",
-        "startIcon",
-        "endIcon"
-    ]);
-    return (()=>{
-        var _el$9 = _tmpl$3();
-        spread(_el$9, mergeProps(others, ()=>({
-                class: twMerge(CLASSES.slot.indicator, local.class)
-            }), {
-            get ["data-theme"] () {
-                return local.dataTheme;
-            },
-            "data-slot": "ui-select-indicator",
-            get ["data-open"] () {
-                return ctx?.open() ? "true" : "false";
-            },
-            "aria-hidden": "true"
-        }), false, true);
-        insert(_el$9, (()=>{
-            var _c$5 = memo(()=>!!local.startIcon);
-            return ()=>_c$5() ? (()=>{
-                    var _el$0 = _tmpl$3();
-                    spread(_el$0, mergeProps(()=>({
-                            class: twMerge(CLASSES.slot.icon, CLASSES.slot.iconStart)
-                        }), {
-                        "data-slot": "ui-select-indicator-start-icon"
-                    }), false, true);
-                    insert(_el$0, ()=>local.startIcon);
-                    return _el$0;
-                })() : null;
-        })(), null);
-        insert(_el$9, ()=>local.children, null);
-        insert(_el$9, (()=>{
-            var _c$6 = memo(()=>!!local.endIcon);
-            return ()=>_c$6() ? (()=>{
-                    var _el$1 = _tmpl$3();
-                    spread(_el$1, mergeProps(()=>({
-                            class: twMerge(CLASSES.slot.icon, CLASSES.slot.iconEnd)
-                        }), {
-                        "data-slot": "ui-select-indicator-end-icon"
-                    }), false, true);
-                    insert(_el$1, ()=>local.endIcon);
-                    return _el$1;
-                })() : null;
-        })(), null);
-        return _el$9;
-    })();
+    const others = omit(p, "children", "class", "dataTheme", "startIcon", "endIcon");
+    var _el$13 = _tmpl$4(), _el$14 = _el$13.firstChild, _el$15 = _el$14.nextSibling, _el$16 = _el$15.nextSibling;
+    spread(_el$13, mergeProps(others, ()=>({
+            class: twMerge(CLASSES.slot.indicator, p.class)
+        }), {
+        get ["data-theme"] () {
+            return p.dataTheme;
+        },
+        "data-slot": "ui-select-indicator",
+        get ["data-open"] () {
+            return ctx?.open() ? "true" : "false";
+        },
+        "aria-hidden": "true"
+    }), true);
+    insert(_el$13, (()=>{
+        var _c$5 = memo(()=>!!p.startIcon);
+        return ()=>_c$5() ? (()=>{
+                var _el$17 = _tmpl$3();
+                spread(_el$17, mergeProps(()=>({
+                        class: twMerge(CLASSES.slot.icon, CLASSES.slot.iconStart)
+                    }), {
+                    "data-slot": "ui-select-indicator-start-icon"
+                }), true);
+                insert(_el$17, ()=>p.startIcon);
+                return _el$17;
+            })() : null;
+    })(), _el$14);
+    insert(_el$13, ()=>p.children, _el$15);
+    insert(_el$13, (()=>{
+        var _c$6 = memo(()=>!!p.endIcon);
+        return ()=>_c$6() ? (()=>{
+                var _el$18 = _tmpl$3();
+                spread(_el$18, mergeProps(()=>({
+                        class: twMerge(CLASSES.slot.icon, CLASSES.slot.iconEnd)
+                    }), {
+                    "data-slot": "ui-select-indicator-end-icon"
+                }), true);
+                insert(_el$18, ()=>p.endIcon);
+                return _el$18;
+            })() : null;
+    })(), _el$16);
+    return _el$13;
 };
 const SelectIndicator = defineComponent({
     recipe: componentRecipe,
@@ -528,13 +479,7 @@ const SelectIndicator = defineComponent({
 });
 const __solidLayoutSelectPopover = (_stable, p)=>{
     const ctx = useContext(SelectContext);
-    const [local, others] = splitProps(p, [
-        "children",
-        "class",
-        "dataTheme",
-        "style",
-        "onPointerDown"
-    ]);
+    const others = omit(p, "children", "class", "dataTheme", "style", "onPointerDown");
     const overlayPosition = createOverlayPosition({
         open: ()=>ctx?.open() ?? false,
         triggerRef: ()=>ctx?.triggerRef(),
@@ -548,25 +493,25 @@ const __solidLayoutSelectPopover = (_stable, p)=>{
     });
     const popoverStyle = ()=>{
         const overlayStyle = overlayPosition.style();
-        if ("string" == typeof local.style) return [
-            local.style,
+        if ("string" == typeof p.style) return [
+            p.style,
             Object.entries(overlayStyle).map(([key, value])=>`${key}: ${String(value)}`).join("; ")
         ].filter(Boolean).join("; ");
         return {
-            ...local.style ?? {},
+            ...p.style ?? {},
             ...overlayStyle
         };
     };
     return createComponent(Portal, {
         get children () {
-            var _el$10 = _tmpl$();
+            var _el$19 = _tmpl$();
             var _ref$ = ctx?.setPopoverRef;
-            "function" == typeof _ref$ && use(_ref$, _el$10);
-            spread(_el$10, mergeProps(others, ()=>({
-                    class: twMerge(CLASSES.slot.popover, local.class)
+            ("function" == typeof _ref$ || Array.isArray(_ref$)) && ref(()=>_ref$, _el$19);
+            spread(_el$19, mergeProps(others, ()=>({
+                    class: twMerge(CLASSES.slot.popover, p.class)
                 }), {
                 get ["data-theme"] () {
-                    return local.dataTheme;
+                    return p.dataTheme;
                 },
                 "data-slot": "ui-select-popover",
                 get ["data-open"] () {
@@ -578,13 +523,13 @@ const __solidLayoutSelectPopover = (_stable, p)=>{
                 get style () {
                     return popoverStyle();
                 },
-                "on:pointerdown": (event)=>{
-                    invokeEventHandler(local.onPointerDown, event);
+                onPointerDown: (event)=>{
+                    invokeEventHandler(p.onPointerDown, event);
                     if (!event.defaultPrevented) event.stopPropagation();
                 }
-            }), false, true);
-            insert(_el$10, ()=>local.children);
-            return _el$10;
+            }), true);
+            insert(_el$19, ()=>p.children);
+            return _el$19;
         }
     });
 };
@@ -595,33 +540,27 @@ const SelectPopover = defineComponent({
 });
 const __solidLayoutSelectListbox = (_stable, p)=>{
     const ctx = useContext(SelectContext);
-    const [local, others] = splitProps(p, [
-        "children",
-        "class",
-        "dataTheme"
-    ]);
-    return (()=>{
-        var _el$11 = _tmpl$();
-        spread(_el$11, mergeProps(others, {
-            get id () {
-                return ctx?.listboxId;
-            }
-        }, ()=>({
-                class: twMerge(CLASSES.slot.listbox, local.class)
-            }), {
-            get ["data-theme"] () {
-                return local.dataTheme;
-            },
-            "data-slot": "ui-select-listbox",
-            role: "listbox",
-            get ["aria-multiselectable"] () {
-                return ctx?.selectionMode() === "multiple" ? "true" : void 0;
-            },
-            tabindex: -1
-        }), false, true);
-        insert(_el$11, ()=>local.children);
-        return _el$11;
-    })();
+    const others = omit(p, "children", "class", "dataTheme");
+    var _el$20 = _tmpl$();
+    spread(_el$20, mergeProps(others, {
+        get id () {
+            return ctx?.listboxId;
+        }
+    }, ()=>({
+            class: twMerge(CLASSES.slot.listbox, p.class)
+        }), {
+        get ["data-theme"] () {
+            return p.dataTheme;
+        },
+        "data-slot": "ui-select-listbox",
+        role: "listbox",
+        get ["aria-multiselectable"] () {
+            return ctx?.selectionMode() === "multiple" ? "true" : void 0;
+        },
+        tabindex: -1
+    }), true);
+    insert(_el$20, ()=>p.children);
+    return _el$20;
 };
 const SelectListbox = defineComponent({
     recipe: componentRecipe,
@@ -630,71 +569,56 @@ const SelectListbox = defineComponent({
 });
 const __solidLayoutSelectOption = (_stable, p)=>{
     const ctx = useContext(SelectContext);
-    const [local, others] = splitProps(p, [
-        "children",
-        "class",
-        "dataTheme",
-        "value",
-        "textValue",
-        "state",
-        "disabled",
-        "startIcon",
-        "endIcon",
-        "onClick",
-        "onKeyDown",
-        "onMouseEnter",
-        "ref",
-        "type"
-    ]);
-    if (!ctx) return (()=>{
-        var _el$12 = _tmpl$2();
-        spread(_el$12, mergeProps(others, ()=>({
-                class: twMerge(CLASSES.slot.option, local.class)
+    const others = omit(p, "children", "class", "dataTheme", "value", "textValue", "state", "disabled", "startIcon", "endIcon", "onClick", "onKeyDown", "onMouseEnter", "ref", "type");
+    if (!ctx) {
+        var _el$21 = _tmpl$2(), _el$22 = _el$21.firstChild, _el$23 = _el$22.nextSibling, _el$24 = _el$23.nextSibling;
+        spread(_el$21, mergeProps(others, ()=>({
+                class: twMerge(CLASSES.slot.option, p.class)
             }), {
             get ["data-theme"] () {
-                return local.dataTheme;
+                return p.dataTheme;
             },
             get type () {
-                return local.type ?? "button";
+                return p.type ?? "button";
             }
-        }), false, true);
-        insert(_el$12, (()=>{
-            var _c$7 = memo(()=>!!local.startIcon);
+        }), true);
+        insert(_el$21, (()=>{
+            var _c$7 = memo(()=>!!p.startIcon);
             return ()=>_c$7() ? (()=>{
-                    var _el$13 = _tmpl$3();
-                    spread(_el$13, mergeProps(()=>({
+                    var _el$25 = _tmpl$3();
+                    spread(_el$25, mergeProps(()=>({
                             class: twMerge(CLASSES.slot.icon, CLASSES.slot.iconStart)
                         }), {
                         "data-slot": "ui-select-option-start-icon"
-                    }), false, true);
-                    insert(_el$13, ()=>local.startIcon);
-                    return _el$13;
+                    }), true);
+                    insert(_el$25, ()=>p.startIcon);
+                    return _el$25;
                 })() : null;
-        })(), null);
-        insert(_el$12, ()=>local.children, null);
-        insert(_el$12, (()=>{
-            var _c$8 = memo(()=>!!local.endIcon);
+        })(), _el$22);
+        insert(_el$21, ()=>p.children, _el$23);
+        insert(_el$21, (()=>{
+            var _c$8 = memo(()=>!!p.endIcon);
             return ()=>_c$8() ? (()=>{
-                    var _el$14 = _tmpl$4(), _el$15 = _el$14.firstChild;
-                    spread(_el$14, mergeProps(()=>({
+                    var _el$26 = _tmpl$5(), _el$27 = _el$26.firstChild;
+                    spread(_el$26, mergeProps(()=>({
                             class: CLASSES.slot.optionIndicator
                         }), {
                         "data-slot": "ui-select-option-indicator",
                         "aria-hidden": "true"
-                    }), false, true);
-                    spread(_el$15, mergeProps(()=>({
+                    }), true);
+                    spread(_el$27, mergeProps(()=>({
                             class: twMerge(CLASSES.slot.icon, CLASSES.slot.iconEnd)
                         }), {
                         "data-slot": "ui-select-option-end-icon"
-                    }), false, true);
-                    insert(_el$15, ()=>local.endIcon);
-                    return _el$14;
+                    }), true);
+                    insert(_el$27, ()=>p.endIcon);
+                    return _el$26;
                 })() : null;
-        })(), null);
-        return _el$12;
-    })();
-    const key = ()=>String(local.value);
-    const isDisabled = ()=>Boolean("disabled" === local.state) || Boolean(local.disabled) || ctx.disabled();
+        })(), _el$24);
+        return _el$21;
+    }
+    const key = ()=>String(p.value);
+    const isDisabled = ()=>Boolean("disabled" === p.state) || Boolean(p.disabled) || ctx.disabled();
     const isSelected = ()=>ctx.isSelected(key());
     const isFocused = ()=>ctx.focusedKey() === key();
     let optionRef;
@@ -702,17 +626,17 @@ const __solidLayoutSelectOption = (_stable, p)=>{
         optionRef = el;
         ctx.registerOption({
             key: key(),
-            textValue: local.textValue ?? ("string" == typeof local.children ? local.children : key()),
+            textValue: p.textValue ?? ("string" == typeof p.children ? p.children : key()),
             disabled: isDisabled(),
             ref: el
         });
-        if ("function" == typeof local.ref) local.ref(el);
+        if ("function" == typeof p.ref) p.ref(el);
     };
     createEffect(()=>{
         if (!optionRef) return;
         ctx.registerOption({
             key: key(),
-            textValue: local.textValue ?? ("string" == typeof local.children ? local.children : key()),
+            textValue: p.textValue ?? ("string" == typeof p.children ? p.children : key()),
             disabled: isDisabled(),
             ref: optionRef
         });
@@ -721,19 +645,19 @@ const __solidLayoutSelectOption = (_stable, p)=>{
         ctx.unregisterOption(key());
     });
     const handleClick = (event)=>{
-        invokeEventHandler(local.onClick, event);
+        invokeEventHandler(p.onClick, event);
         if (event.defaultPrevented) return;
         if (isDisabled()) return;
         ctx.selectKey(key());
     };
     const handleMouseEnter = (event)=>{
-        invokeEventHandler(local.onMouseEnter, event);
+        invokeEventHandler(p.onMouseEnter, event);
         if (event.defaultPrevented) return;
         if (isDisabled()) return;
         ctx.setFocusedKey(key());
     };
     const handleKeyDown = (event)=>{
-        invokeEventHandler(local.onKeyDown, event);
+        invokeEventHandler(p.onKeyDown, event);
         if (event.defaultPrevented) return;
         if (isDisabled()) return;
         if ("ArrowDown" === event.key) {
@@ -770,85 +694,83 @@ const __solidLayoutSelectOption = (_stable, p)=>{
         }
         if ("Tab" === event.key) ctx.setOpen(false);
     };
-    return (()=>{
-        var _el$16 = _tmpl$5(), _el$17 = _el$16.firstChild;
-        use(setRef, _el$16);
-        spread(_el$16, mergeProps(others, {
-            get type () {
-                return local.type ?? "button";
-            }
-        }, ()=>({
-                class: twMerge(CLASSES.slot.option, local.class)
-            }), {
-            get ["data-theme"] () {
-                return local.dataTheme;
-            },
-            "data-slot": "ui-select-option",
-            get ["data-selected"] () {
-                return isSelected() ? "true" : "false";
-            },
-            get ["data-focused"] () {
-                return isFocused() ? "true" : "false";
-            },
-            get ["data-disabled"] () {
-                return isDisabled() ? "true" : "false";
-            },
-            role: "option",
-            get ["aria-selected"] () {
-                return isSelected();
-            },
-            get ["aria-disabled"] () {
-                return isDisabled() ? "true" : "false";
-            },
-            get disabled () {
-                return isDisabled();
-            },
-            tabindex: -1,
-            onClick: handleClick,
-            onMouseEnter: handleMouseEnter,
-            onFocus: ()=>ctx.setFocusedKey(key()),
-            onKeyDown: handleKeyDown
-        }), false, true);
-        insert(_el$16, (()=>{
-            var _c$9 = memo(()=>!!local.startIcon);
-            return ()=>_c$9() ? (()=>{
-                    var _el$18 = _tmpl$3();
-                    spread(_el$18, mergeProps(()=>({
-                            class: twMerge(CLASSES.slot.icon, CLASSES.slot.iconStart)
-                        }), {
-                        "data-slot": "ui-select-option-start-icon"
-                    }), false, true);
-                    insert(_el$18, ()=>local.startIcon);
-                    return _el$18;
-                })() : null;
-        })(), _el$17);
-        spread(_el$17, mergeProps(()=>({
-                class: CLASSES.slot.optionLabel
-            }), {
-            "data-slot": "ui-select-option-label"
-        }), false, true);
-        insert(_el$17, ()=>local.children);
-        insert(_el$16, (()=>{
-            var _c$0 = memo(()=>!!local.endIcon);
-            return ()=>_c$0() ? (()=>{
-                    var _el$19 = _tmpl$4(), _el$20 = _el$19.firstChild;
-                    spread(_el$19, mergeProps(()=>({
-                            class: CLASSES.slot.optionIndicator
-                        }), {
-                        "data-slot": "ui-select-option-indicator",
-                        "aria-hidden": "true"
-                    }), false, true);
-                    spread(_el$20, mergeProps(()=>({
-                            class: twMerge(CLASSES.slot.icon, CLASSES.slot.iconEnd)
-                        }), {
-                        "data-slot": "ui-select-option-end-icon"
-                    }), false, true);
-                    insert(_el$20, ()=>local.endIcon);
-                    return _el$19;
-                })() : null;
-        })(), null);
-        return _el$16;
-    })();
+    var _el$28 = _tmpl$6(), _el$29 = _el$28.firstChild, _el$30 = _el$29.nextSibling;
+    ref(()=>setRef, _el$28);
+    spread(_el$28, mergeProps(others, {
+        get type () {
+            return p.type ?? "button";
+        }
+    }, ()=>({
+            class: twMerge(CLASSES.slot.option, p.class)
+        }), {
+        get ["data-theme"] () {
+            return p.dataTheme;
+        },
+        "data-slot": "ui-select-option",
+        get ["data-selected"] () {
+            return isSelected() ? "true" : "false";
+        },
+        get ["data-focused"] () {
+            return isFocused() ? "true" : "false";
+        },
+        get ["data-disabled"] () {
+            return isDisabled() ? "true" : "false";
+        },
+        role: "option",
+        get ["aria-selected"] () {
+            return isSelected() ? "true" : "false";
+        },
+        get ["aria-disabled"] () {
+            return isDisabled() ? "true" : "false";
+        },
+        get disabled () {
+            return isDisabled();
+        },
+        tabindex: -1,
+        onClick: handleClick,
+        onMouseEnter: handleMouseEnter,
+        onFocus: ()=>ctx.setFocusedKey(key()),
+        onKeyDown: handleKeyDown
+    }), true);
+    insert(_el$28, (()=>{
+        var _c$9 = memo(()=>!!p.startIcon);
+        return ()=>_c$9() ? (()=>{
+                var _el$31 = _tmpl$3();
+                spread(_el$31, mergeProps(()=>({
+                        class: twMerge(CLASSES.slot.icon, CLASSES.slot.iconStart)
+                    }), {
+                    "data-slot": "ui-select-option-start-icon"
+                }), true);
+                insert(_el$31, ()=>p.startIcon);
+                return _el$31;
+            })() : null;
+    })(), _el$29);
+    spread(_el$29, mergeProps(()=>({
+            class: CLASSES.slot.optionLabel
+        }), {
+        "data-slot": "ui-select-option-label"
+    }), true);
+    insert(_el$29, ()=>p.children);
+    insert(_el$28, (()=>{
+        var _c$0 = memo(()=>!!p.endIcon);
+        return ()=>_c$0() ? (()=>{
+                var _el$32 = _tmpl$5(), _el$33 = _el$32.firstChild;
+                spread(_el$32, mergeProps(()=>({
+                        class: CLASSES.slot.optionIndicator
+                    }), {
+                    "data-slot": "ui-select-option-indicator",
+                    "aria-hidden": "true"
+                }), true);
+                spread(_el$33, mergeProps(()=>({
+                        class: twMerge(CLASSES.slot.icon, CLASSES.slot.iconEnd)
+                    }), {
+                    "data-slot": "ui-select-option-end-icon"
+                }), true);
+                insert(_el$33, ()=>p.endIcon);
+                return _el$32;
+            })() : null;
+    })(), _el$30);
+    return _el$28;
 };
 const SelectOption = defineComponent({
     recipe: componentRecipe,