@pathscale/ui 1.1.39 → 1.1.42

package/dist/components/select/Select.classes.d.ts

@@ -0,0 +1,24 @@
+export declare const CLASSES: {
+    readonly base: "ui-select";
+    readonly flag: {
+        readonly fullWidth: "ui-select--full-width";
+    };
+    readonly variant: {
+        readonly primary: "ui-select--primary";
+        readonly secondary: "ui-select--secondary";
+    };
+    readonly slot: {
+        readonly trigger: "ui-select__trigger";
+        readonly triggerFullWidth: "ui-select__trigger--full-width";
+        readonly value: "ui-select__value";
+        readonly indicator: "ui-select__indicator";
+        readonly icon: "ui-select__icon";
+        readonly iconStart: "ui-select__icon--start";
+        readonly iconEnd: "ui-select__icon--end";
+        readonly popover: "ui-select__popover";
+        readonly listbox: "ui-select__listbox";
+        readonly option: "ui-select__option";
+        readonly optionLabel: "ui-select__option-label";
+        readonly optionIndicator: "ui-select__option-indicator";
+    };
+};

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

@@ -0,0 +1,25 @@
+const CLASSES = {
+    base: "ui-select",
+    flag: {
+        fullWidth: "ui-select--full-width"
+    },
+    variant: {
+        primary: "ui-select--primary",
+        secondary: "ui-select--secondary"
+    },
+    slot: {
+        trigger: "ui-select__trigger",
+        triggerFullWidth: "ui-select__trigger--full-width",
+        value: "ui-select__value",
+        indicator: "ui-select__indicator",
+        icon: "ui-select__icon",
+        iconStart: "ui-select__icon--start",
+        iconEnd: "ui-select__icon--end",
+        popover: "ui-select__popover",
+        listbox: "ui-select__listbox",
+        option: "ui-select__option",
+        optionLabel: "ui-select__option-label",
+        optionIndicator: "ui-select__option-indicator"
+    }
+};
+export { CLASSES };

package/dist/components/select/Select.js

@@ -2,12 +2,9 @@ import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web
 import "./Select.css";
 import * as __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__ from "solid-js";
 import * as __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__ from "tailwind-merge";
-var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div>"), _tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<button>"), _tmpl$3 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<span class="ui-select__icon ui-select__icon--start"data-slot=ui-select-trigger-start-icon>'), _tmpl$4 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<span class="ui-select__icon ui-select__icon--end"data-slot=ui-select-trigger-end-icon>'), _tmpl$5 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<span>"), _tmpl$6 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<span class="ui-select__icon ui-select__icon--start"data-slot=ui-select-indicator-start-icon>'), _tmpl$7 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<span class="ui-select__icon ui-select__icon--end"data-slot=ui-select-indicator-end-icon>'), _tmpl$8 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<span class="ui-select__icon ui-select__icon--start"data-slot=ui-select-option-start-icon>'), _tmpl$9 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<span class=ui-select__option-indicator data-slot=ui-select-option-indicator aria-hidden=true><span class="ui-select__icon ui-select__icon--end"data-slot=ui-select-option-end-icon>'), _tmpl$0 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<button><span class=ui-select__option-label data-slot=ui-select-option-label>");
+import * as __WEBPACK_EXTERNAL_MODULE__Select_classes_js_98857364__ from "./Select.classes.js";
+var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div>"), _tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<button>"), _tmpl$3 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<span>"), _tmpl$4 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<span><span>"), _tmpl$5 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<button><span>");
 const SelectContext = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createContext)();
-const SELECT_VARIANT_CLASS_MAP = {
-    primary: "ui-select--primary",
-    secondary: "ui-select--secondary"
-};
 const invokeEventHandler = (handler, event)=>{
     if ("function" == typeof handler) return void handler(event);
     if (Array.isArray(handler) && "function" == typeof handler[0]) handler[0](handler[1], event);
@@ -227,10 +224,9 @@ const SelectRoot = (props)=>{
         get children () {
             var _el$ = _tmpl$();
             (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.use)(setRootRef, _el$);
-            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
-                get ["class"] () {
-                    return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("ui-select", SELECT_VARIANT_CLASS_MAP[variant()], fullWidth() && "ui-select--full-width", local.class, local.className);
-                },
+            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, ()=>({
+                    class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__Select_classes_js_98857364__.CLASSES.base, __WEBPACK_EXTERNAL_MODULE__Select_classes_js_98857364__.CLASSES.variant[variant()], fullWidth() && __WEBPACK_EXTERNAL_MODULE__Select_classes_js_98857364__.CLASSES.flag.fullWidth, local.class, local.className)
+                }), {
                 get ["data-theme"] () {
                     return local.dataTheme;
                 },
@@ -267,10 +263,9 @@ const SelectTrigger = (props)=>{
     ]);
     if (!ctx) return (()=>{
         var _el$2 = _tmpl$2();
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$2, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
-            get ["class"] () {
-                return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("ui-select__trigger", local.class, local.className);
-            },
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$2, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, ()=>({
+                class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__Select_classes_js_98857364__.CLASSES.slot.trigger, local.class, local.className)
+            }), {
             get ["data-theme"] () {
                 return local.dataTheme;
             },
@@ -282,6 +277,11 @@ const SelectTrigger = (props)=>{
             var _c$ = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.memo)(()=>!!local.startIcon);
             return ()=>_c$() ? (()=>{
                     var _el$3 = _tmpl$3();
+                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$3, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
+                            class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__Select_classes_js_98857364__.CLASSES.slot.icon, __WEBPACK_EXTERNAL_MODULE__Select_classes_js_98857364__.CLASSES.slot.iconStart)
+                        }), {
+                        "data-slot": "ui-select-trigger-start-icon"
+                    }), false, true);
                     (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$3, ()=>local.startIcon);
                     return _el$3;
                 })() : null;
@@ -290,7 +290,12 @@ const SelectTrigger = (props)=>{
         (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$2, (()=>{
             var _c$2 = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.memo)(()=>!!local.endIcon);
             return ()=>_c$2() ? (()=>{
-                    var _el$4 = _tmpl$4();
+                    var _el$4 = _tmpl$3();
+                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$4, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
+                            class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__Select_classes_js_98857364__.CLASSES.slot.icon, __WEBPACK_EXTERNAL_MODULE__Select_classes_js_98857364__.CLASSES.slot.iconEnd)
+                        }), {
+                        "data-slot": "ui-select-trigger-end-icon"
+                    }), false, true);
                     (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$4, ()=>local.endIcon);
                     return _el$4;
                 })() : null;
@@ -347,10 +352,10 @@ const SelectTrigger = (props)=>{
             },
             get type () {
                 return local.type ?? "button";
-            },
-            get ["class"] () {
-                return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("ui-select__trigger", ctx.fullWidth() && "ui-select__trigger--full-width", local.class, local.className);
-            },
+            }
+        }, ()=>({
+                class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__Select_classes_js_98857364__.CLASSES.slot.trigger, ctx.fullWidth() && __WEBPACK_EXTERNAL_MODULE__Select_classes_js_98857364__.CLASSES.slot.triggerFullWidth, local.class, local.className)
+            }), {
             get ["data-theme"] () {
                 return local.dataTheme;
             },
@@ -378,6 +383,11 @@ const SelectTrigger = (props)=>{
             var _c$3 = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.memo)(()=>!!local.startIcon);
             return ()=>_c$3() ? (()=>{
                     var _el$6 = _tmpl$3();
+                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$6, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
+                            class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__Select_classes_js_98857364__.CLASSES.slot.icon, __WEBPACK_EXTERNAL_MODULE__Select_classes_js_98857364__.CLASSES.slot.iconStart)
+                        }), {
+                        "data-slot": "ui-select-trigger-start-icon"
+                    }), false, true);
                     (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$6, ()=>local.startIcon);
                     return _el$6;
                 })() : null;
@@ -386,7 +396,12 @@ const SelectTrigger = (props)=>{
         (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$5, (()=>{
             var _c$4 = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.memo)(()=>!!local.endIcon);
             return ()=>_c$4() ? (()=>{
-                    var _el$7 = _tmpl$4();
+                    var _el$7 = _tmpl$3();
+                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$7, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
+                            class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__Select_classes_js_98857364__.CLASSES.slot.icon, __WEBPACK_EXTERNAL_MODULE__Select_classes_js_98857364__.CLASSES.slot.iconEnd)
+                        }), {
+                        "data-slot": "ui-select-trigger-end-icon"
+                    }), false, true);
                     (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$7, ()=>local.endIcon);
                     return _el$7;
                 })() : null;
@@ -406,11 +421,10 @@ const SelectValue = (props)=>{
     const text = ()=>ctx?.selectedText() ?? "";
     const isPlaceholder = ()=>0 === text().length;
     return (()=>{
-        var _el$8 = _tmpl$5();
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$8, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
-            get ["class"] () {
-                return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("ui-select__value", local.class, local.className);
-            },
+        var _el$8 = _tmpl$3();
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$8, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, ()=>({
+                class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__Select_classes_js_98857364__.CLASSES.slot.value, local.class, local.className)
+            }), {
             get ["data-theme"] () {
                 return local.dataTheme;
             },
@@ -434,11 +448,10 @@ const SelectIndicator = (props)=>{
         "endIcon"
     ]);
     return (()=>{
-        var _el$9 = _tmpl$5();
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$9, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
-            get ["class"] () {
-                return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("ui-select__indicator", local.class, local.className);
-            },
+        var _el$9 = _tmpl$3();
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$9, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, ()=>({
+                class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__Select_classes_js_98857364__.CLASSES.slot.indicator, local.class, local.className)
+            }), {
             get ["data-theme"] () {
                 return local.dataTheme;
             },
@@ -451,7 +464,12 @@ const SelectIndicator = (props)=>{
         (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$9, (()=>{
             var _c$5 = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.memo)(()=>!!local.startIcon);
             return ()=>_c$5() ? (()=>{
-                    var _el$0 = _tmpl$6();
+                    var _el$0 = _tmpl$3();
+                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$0, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
+                            class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__Select_classes_js_98857364__.CLASSES.slot.icon, __WEBPACK_EXTERNAL_MODULE__Select_classes_js_98857364__.CLASSES.slot.iconStart)
+                        }), {
+                        "data-slot": "ui-select-indicator-start-icon"
+                    }), false, true);
                     (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$0, ()=>local.startIcon);
                     return _el$0;
                 })() : null;
@@ -460,7 +478,12 @@ const SelectIndicator = (props)=>{
         (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$9, (()=>{
             var _c$6 = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.memo)(()=>!!local.endIcon);
             return ()=>_c$6() ? (()=>{
-                    var _el$1 = _tmpl$7();
+                    var _el$1 = _tmpl$3();
+                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$1, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
+                            class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__Select_classes_js_98857364__.CLASSES.slot.icon, __WEBPACK_EXTERNAL_MODULE__Select_classes_js_98857364__.CLASSES.slot.iconEnd)
+                        }), {
+                        "data-slot": "ui-select-indicator-end-icon"
+                    }), false, true);
                     (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$1, ()=>local.endIcon);
                     return _el$1;
                 })() : null;
@@ -478,10 +501,9 @@ const SelectPopover = (props)=>{
     ]);
     return (()=>{
         var _el$10 = _tmpl$();
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$10, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
-            get ["class"] () {
-                return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("ui-select__popover", local.class, local.className);
-            },
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$10, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, ()=>({
+                class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__Select_classes_js_98857364__.CLASSES.slot.popover, local.class, local.className)
+            }), {
             get ["data-theme"] () {
                 return local.dataTheme;
             },
@@ -507,10 +529,10 @@ const SelectListbox = (props)=>{
         (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$11, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
             get id () {
                 return ctx?.listboxId;
-            },
-            get ["class"] () {
-                return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("ui-select__listbox", local.class, local.className);
-            },
+            }
+        }, ()=>({
+                class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__Select_classes_js_98857364__.CLASSES.slot.listbox, local.class, local.className)
+            }), {
             get ["data-theme"] () {
                 return local.dataTheme;
             },
@@ -546,10 +568,9 @@ const SelectOption = (props)=>{
     ]);
     if (!ctx) return (()=>{
         var _el$12 = _tmpl$2();
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$12, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
-            get ["class"] () {
-                return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("ui-select__option", local.class, local.className);
-            },
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$12, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, ()=>({
+                class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__Select_classes_js_98857364__.CLASSES.slot.option, local.class, local.className)
+            }), {
             get ["data-theme"] () {
                 return local.dataTheme;
             },
@@ -560,7 +581,12 @@ const SelectOption = (props)=>{
         (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$12, (()=>{
             var _c$7 = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.memo)(()=>!!local.startIcon);
             return ()=>_c$7() ? (()=>{
-                    var _el$13 = _tmpl$8();
+                    var _el$13 = _tmpl$3();
+                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$13, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
+                            class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__Select_classes_js_98857364__.CLASSES.slot.icon, __WEBPACK_EXTERNAL_MODULE__Select_classes_js_98857364__.CLASSES.slot.iconStart)
+                        }), {
+                        "data-slot": "ui-select-option-start-icon"
+                    }), false, true);
                     (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$13, ()=>local.startIcon);
                     return _el$13;
                 })() : null;
@@ -569,7 +595,18 @@ const SelectOption = (props)=>{
         (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$12, (()=>{
             var _c$8 = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.memo)(()=>!!local.endIcon);
             return ()=>_c$8() ? (()=>{
-                    var _el$14 = _tmpl$9(), _el$15 = _el$14.firstChild;
+                    var _el$14 = _tmpl$4(), _el$15 = _el$14.firstChild;
+                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$14, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
+                            class: __WEBPACK_EXTERNAL_MODULE__Select_classes_js_98857364__.CLASSES.slot.optionIndicator
+                        }), {
+                        "data-slot": "ui-select-option-indicator",
+                        "aria-hidden": "true"
+                    }), false, true);
+                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$15, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
+                            class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__Select_classes_js_98857364__.CLASSES.slot.icon, __WEBPACK_EXTERNAL_MODULE__Select_classes_js_98857364__.CLASSES.slot.iconEnd)
+                        }), {
+                        "data-slot": "ui-select-option-end-icon"
+                    }), false, true);
                     (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$15, ()=>local.endIcon);
                     return _el$14;
                 })() : null;
@@ -654,15 +691,15 @@ const SelectOption = (props)=>{
         if ("Tab" === event.key) ctx.setOpen(false);
     };
     return (()=>{
-        var _el$16 = _tmpl$0(), _el$17 = _el$16.firstChild;
+        var _el$16 = _tmpl$5(), _el$17 = _el$16.firstChild;
         (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.use)(setRef, _el$16);
         (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$16, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
             get type () {
                 return local.type ?? "button";
-            },
-            get ["class"] () {
-                return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("ui-select__option", local.class, local.className);
-            },
+            }
+        }, ()=>({
+                class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__Select_classes_js_98857364__.CLASSES.slot.option, local.class, local.className)
+            }), {
             get ["data-theme"] () {
                 return local.dataTheme;
             },
@@ -695,16 +732,37 @@ const SelectOption = (props)=>{
         (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$16, (()=>{
             var _c$9 = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.memo)(()=>!!local.startIcon);
             return ()=>_c$9() ? (()=>{
-                    var _el$18 = _tmpl$8();
+                    var _el$18 = _tmpl$3();
+                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$18, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
+                            class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__Select_classes_js_98857364__.CLASSES.slot.icon, __WEBPACK_EXTERNAL_MODULE__Select_classes_js_98857364__.CLASSES.slot.iconStart)
+                        }), {
+                        "data-slot": "ui-select-option-start-icon"
+                    }), false, true);
                     (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$18, ()=>local.startIcon);
                     return _el$18;
                 })() : null;
         })(), _el$17);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$17, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
+                class: __WEBPACK_EXTERNAL_MODULE__Select_classes_js_98857364__.CLASSES.slot.optionLabel
+            }), {
+            "data-slot": "ui-select-option-label"
+        }), false, true);
         (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$17, ()=>local.children);
         (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$16, (()=>{
             var _c$0 = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.memo)(()=>!!local.endIcon);
             return ()=>_c$0() ? (()=>{
-                    var _el$19 = _tmpl$9(), _el$20 = _el$19.firstChild;
+                    var _el$19 = _tmpl$4(), _el$20 = _el$19.firstChild;
+                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$19, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
+                            class: __WEBPACK_EXTERNAL_MODULE__Select_classes_js_98857364__.CLASSES.slot.optionIndicator
+                        }), {
+                        "data-slot": "ui-select-option-indicator",
+                        "aria-hidden": "true"
+                    }), false, true);
+                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$20, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
+                            class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__Select_classes_js_98857364__.CLASSES.slot.icon, __WEBPACK_EXTERNAL_MODULE__Select_classes_js_98857364__.CLASSES.slot.iconEnd)
+                        }), {
+                        "data-slot": "ui-select-option-end-icon"
+                    }), false, true);
                     (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$20, ()=>local.endIcon);
                     return _el$19;
                 })() : null;

package/dist/components/size-picker/SizePicker.classes.d.ts

@@ -0,0 +1,3 @@
+export declare const CLASSES: {
+    readonly base: "inline-flex gap-1";
+};

package/dist/components/size-picker/SizePicker.classes.js

@@ -0,0 +1,4 @@
+const CLASSES = {
+    base: "inline-flex gap-1"
+};
+export { CLASSES };

package/dist/components/size-picker/SizePicker.js

@@ -4,7 +4,8 @@ import * as __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__ from "tailwind-m
 import * as __WEBPACK_EXTERNAL_MODULE_clsx__ from "clsx";
 import * as __WEBPACK_EXTERNAL_MODULE__button_index_js_557db1f7__ from "../button/index.js";
 import * as __WEBPACK_EXTERNAL_MODULE__sizeStore_js_308b1735__ from "./sizeStore.js";
-var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div role=radiogroup>");
+import * as __WEBPACK_EXTERNAL_MODULE__SizePicker_classes_js_e21f4008__ from "./SizePicker.classes.js";
+var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div>");
 const PRESETS = [
     "M",
     "L",
@@ -25,16 +26,16 @@ const SizePicker_SizePicker = (props)=>{
         store().setSize(preset);
         local.onSizeChange?.(preset);
     };
-    const classes = ()=>(0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("inline-flex gap-1", (0, __WEBPACK_EXTERNAL_MODULE_clsx__.clsx)(local.class, local.className));
+    const classes = ()=>(0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__SizePicker_classes_js_e21f4008__.CLASSES.base, (0, __WEBPACK_EXTERNAL_MODULE_clsx__.clsx)(local.class, local.className));
     return (()=>{
         var _el$ = _tmpl$();
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)({
-            get ["class"] () {
-                return classes();
-            },
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
+                class: classes()
+            }), {
             get style () {
                 return local.style;
             },
+            role: "radiogroup",
             get ["aria-label"] () {
                 return local["aria-label"] ?? "Change text size";
             }

package/dist/components/skeleton/Skeleton.classes.d.ts

@@ -0,0 +1,8 @@
+export declare const CLASSES: {
+    readonly base: "skeleton";
+    readonly animation: {
+        readonly shimmer: "skeleton--shimmer";
+        readonly pulse: "skeleton--pulse";
+        readonly none: "skeleton--none";
+    };
+};

package/dist/components/skeleton/Skeleton.classes.js

@@ -0,0 +1,9 @@
+const CLASSES = {
+    base: "skeleton",
+    animation: {
+        shimmer: "skeleton--shimmer",
+        pulse: "skeleton--pulse",
+        none: "skeleton--none"
+    }
+};
+export { CLASSES };

package/dist/components/skeleton/Skeleton.js

@@ -2,12 +2,8 @@ import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web
 import "./Skeleton.css";
 import * as __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__ from "solid-js";
 import * as __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__ from "tailwind-merge";
+import * as __WEBPACK_EXTERNAL_MODULE__Skeleton_classes_js_44948e04__ from "./Skeleton.classes.js";
 var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div>");
-const ANIMATION_CLASS_MAP = {
-    shimmer: "skeleton--shimmer",
-    pulse: "skeleton--pulse",
-    none: "skeleton--none"
-};
 const Skeleton = (props)=>{
     const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
         "class",
@@ -19,10 +15,9 @@ const Skeleton = (props)=>{
     const animation = ()=>local.animationType ?? "shimmer";
     return (()=>{
         var _el$ = _tmpl$();
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
-            get ["class"] () {
-                return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("skeleton", ANIMATION_CLASS_MAP[animation()], local.class, local.className);
-            },
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, ()=>({
+                class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__Skeleton_classes_js_44948e04__.CLASSES.base, __WEBPACK_EXTERNAL_MODULE__Skeleton_classes_js_44948e04__.CLASSES.animation[animation()], local.class, local.className)
+            }), {
             "data-slot": "skeleton",
             get ["data-theme"] () {
                 return local.dataTheme;