@pathscale/ui 1.1.40 → 1.1.43

package/dist/components/popover/Popover.js

@@ -0,0 +1,310 @@
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web";
+import "./Popover.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__Popover_classes_js_917d7621__ from "./Popover.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)('<svg aria-hidden=true data-slot=popover-arrow-svg height=12 viewBox="0 0 12 12"width=12 xmlns=http://www.w3.org/2000/svg><path d="M0 0C5.48483 8 6.5 8 12 0Z"fill=currentColor>'), _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)("<h3>");
+const PopoverContext = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createContext)();
+const usePopoverContext = ()=>{
+    const ctx = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.useContext)(PopoverContext);
+    if (!ctx) throw new Error("Popover compound components must be used within <Popover>");
+    return ctx;
+};
+const PopoverRoot = (props)=>{
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "children",
+        "class",
+        "className",
+        "dataTheme",
+        "style",
+        "isOpen",
+        "defaultOpen",
+        "onOpenChange",
+        "placement",
+        "offset",
+        "closeOnOutsideClick",
+        "closeOnEscape",
+        "onInteractOutside"
+    ]);
+    const [internalOpen, setInternalOpen] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(Boolean(local.defaultOpen));
+    const [triggerRef, setTriggerRef] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)();
+    const [contentRef, setContentRef] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)();
+    const [triggerId] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(`popover-trigger-${Math.random().toString(36).slice(2, 8)}`);
+    const [contentId] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(`popover-content-${Math.random().toString(36).slice(2, 8)}`);
+    const isControlled = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>void 0 !== local.isOpen);
+    const isOpen = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>isControlled() ? Boolean(local.isOpen) : internalOpen());
+    const setIsOpen = (next, options)=>{
+        if (!isControlled()) setInternalOpen(next);
+        if (isOpen() !== next) local.onOpenChange?.(next);
+        if (!next && options?.focusTrigger) triggerRef()?.focus();
+    };
+    const placement = ()=>local.placement ?? "bottom";
+    const offset = ()=>local.offset ?? 8;
+    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.onMount)(()=>{
+        const handlePointerDown = (event)=>{
+            if (!isOpen()) return;
+            if (false === local.closeOnOutsideClick) return;
+            const content = contentRef();
+            const trigger = triggerRef();
+            if (content?.contains(event.target)) return;
+            if (trigger?.contains(event.target)) return;
+            local.onInteractOutside?.(event);
+            setIsOpen(false, {
+                focusTrigger: false
+            });
+        };
+        const handleKeyDown = (event)=>{
+            if (!isOpen()) return;
+            if (false === local.closeOnEscape) return;
+            if ("Escape" !== event.key) return;
+            event.preventDefault();
+            setIsOpen(false, {
+                focusTrigger: true
+            });
+        };
+        document.addEventListener("pointerdown", handlePointerDown);
+        document.addEventListener("keydown", handleKeyDown);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.onCleanup)(()=>{
+            document.removeEventListener("pointerdown", handlePointerDown);
+            document.removeEventListener("keydown", handleKeyDown);
+        });
+    });
+    const ctx = {
+        isOpen,
+        setIsOpen,
+        placement,
+        triggerRef,
+        setTriggerRef,
+        contentRef,
+        setContentRef,
+        triggerId,
+        contentId,
+        offset,
+        onInteractOutside: local.onInteractOutside
+    };
+    return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(PopoverContext.Provider, {
+        value: ctx,
+        get children () {
+            var _el$ = _tmpl$();
+            (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__Popover_classes_js_917d7621__.CLASSES.slot.root, local.class, local.className)
+                }), {
+                "data-slot": "popover-root",
+                get ["data-theme"] () {
+                    return local.dataTheme;
+                },
+                get style () {
+                    return local.style;
+                }
+            }), false, true);
+            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, ()=>local.children);
+            return _el$;
+        }
+    });
+};
+const PopoverTrigger = (props)=>{
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "children",
+        "class",
+        "className",
+        "dataTheme",
+        "style",
+        "onClick",
+        "onKeyDown"
+    ]);
+    const ctx = usePopoverContext();
+    const handleClick = (event)=>{
+        if ("function" == typeof local.onClick) local.onClick(event);
+        if (event.defaultPrevented) return;
+        ctx.setIsOpen(!ctx.isOpen());
+    };
+    const handleKeyDown = (event)=>{
+        if ("function" == typeof local.onKeyDown) local.onKeyDown(event);
+        if (event.defaultPrevented) return;
+        if ("Enter" === event.key || " " === event.key) {
+            event.preventDefault();
+            ctx.setIsOpen(!ctx.isOpen());
+        }
+        if ("Escape" === event.key && ctx.isOpen()) {
+            event.preventDefault();
+            ctx.setIsOpen(false, {
+                focusTrigger: true
+            });
+        }
+    };
+    return (()=>{
+        var _el$2 = _tmpl$();
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.use)((el)=>ctx.setTriggerRef(el), _el$2);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$2, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
+            get id () {
+                return ctx.triggerId();
+            },
+            role: "button",
+            tabIndex: 0
+        }, ()=>({
+                class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__Popover_classes_js_917d7621__.CLASSES.slot.trigger, local.class, local.className)
+            }), {
+            "data-slot": "popover-trigger",
+            get ["data-theme"] () {
+                return local.dataTheme;
+            },
+            get style () {
+                return local.style;
+            },
+            "aria-haspopup": "dialog",
+            get ["aria-expanded"] () {
+                return ctx.isOpen() ? "true" : "false";
+            },
+            get ["aria-controls"] () {
+                return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.memo)(()=>!!ctx.isOpen())() ? ctx.contentId() : void 0;
+            },
+            onClick: handleClick,
+            onKeyDown: handleKeyDown
+        }), false, true);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$2, ()=>local.children);
+        return _el$2;
+    })();
+};
+const PopoverContent = (props)=>{
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "children",
+        "class",
+        "className",
+        "dataTheme",
+        "style",
+        "sideOffset"
+    ]);
+    const ctx = usePopoverContext();
+    const style = ()=>{
+        if ("string" == typeof local.style) return `${local.style}; --popover-offset: ${local.sideOffset ?? ctx.offset()}px;`;
+        return {
+            ...local.style ?? {},
+            "--popover-offset": `${local.sideOffset ?? ctx.offset()}px`
+        };
+    };
+    return (()=>{
+        var _el$3 = _tmpl$();
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.use)((el)=>ctx.setContentRef(el), _el$3);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$3, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
+            get id () {
+                return ctx.contentId();
+            },
+            role: "dialog"
+        }, ()=>({
+                class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__Popover_classes_js_917d7621__.CLASSES.base, local.class, local.className)
+            }), {
+            "data-slot": "popover-content",
+            get ["data-open"] () {
+                return ctx.isOpen() ? "true" : "false";
+            },
+            get ["data-placement"] () {
+                return ctx.placement();
+            },
+            get ["data-theme"] () {
+                return local.dataTheme;
+            },
+            get style () {
+                return style();
+            },
+            get ["aria-labelledby"] () {
+                return ctx.triggerId();
+            },
+            get ["aria-hidden"] () {
+                return ctx.isOpen() ? "false" : "true";
+            }
+        }), false, true);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$3, ()=>local.children);
+        return _el$3;
+    })();
+};
+const PopoverDialog = (props)=>{
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "children",
+        "class",
+        "className",
+        "dataTheme",
+        "style"
+    ]);
+    return (()=>{
+        var _el$4 = _tmpl$();
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$4, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, ()=>({
+                class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__Popover_classes_js_917d7621__.CLASSES.slot.dialog, local.class, local.className)
+            }), {
+            "data-slot": "popover-dialog",
+            get ["data-theme"] () {
+                return local.dataTheme;
+            },
+            get style () {
+                return local.style;
+            }
+        }), false, true);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$4, ()=>local.children);
+        return _el$4;
+    })();
+};
+const PopoverArrow = (props)=>{
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "children",
+        "class",
+        "className",
+        "dataTheme",
+        "style"
+    ]);
+    const ctx = usePopoverContext();
+    const defaultArrow = _tmpl$2();
+    return (()=>{
+        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)(others, ()=>({
+                class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__Popover_classes_js_917d7621__.CLASSES.slot.arrow, local.class, local.className)
+            }), {
+            "data-slot": "popover-arrow",
+            get ["data-placement"] () {
+                return ctx.placement();
+            },
+            get ["data-theme"] () {
+                return local.dataTheme;
+            },
+            get style () {
+                return local.style;
+            },
+            "aria-hidden": "true"
+        }), false, true);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$6, ()=>local.children ?? defaultArrow);
+        return _el$6;
+    })();
+};
+const PopoverHeading = (props)=>{
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "children",
+        "class",
+        "className",
+        "dataTheme",
+        "style"
+    ]);
+    return (()=>{
+        var _el$7 = _tmpl$4();
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$7, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, ()=>({
+                class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__Popover_classes_js_917d7621__.CLASSES.slot.heading, local.class, local.className)
+            }), {
+            "data-slot": "popover-heading",
+            get ["data-theme"] () {
+                return local.dataTheme;
+            },
+            get style () {
+                return local.style;
+            }
+        }), false, true);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$7, ()=>local.children);
+        return _el$7;
+    })();
+};
+const Popover = Object.assign(PopoverRoot, {
+    Root: PopoverRoot,
+    Trigger: PopoverTrigger,
+    Content: PopoverContent,
+    Dialog: PopoverDialog,
+    Arrow: PopoverArrow,
+    Heading: PopoverHeading
+});
+const popover_Popover = Popover;
+export { PopoverArrow, PopoverContent, PopoverDialog, PopoverHeading, PopoverRoot, PopoverTrigger, popover_Popover as default };

package/dist/components/popover/index.d.ts

@@ -0,0 +1,11 @@
+import type { ComponentProps } from "solid-js";
+import Popover, { PopoverRoot, PopoverTrigger, PopoverContent, PopoverDialog, PopoverArrow, PopoverHeading } from "./Popover";
+export type PopoverProps = ComponentProps<typeof PopoverRoot>;
+export type PopoverRootProps = ComponentProps<typeof PopoverRoot>;
+export type PopoverTriggerProps = ComponentProps<typeof PopoverTrigger>;
+export type PopoverContentProps = ComponentProps<typeof PopoverContent>;
+export type PopoverDialogProps = ComponentProps<typeof PopoverDialog>;
+export type PopoverArrowProps = ComponentProps<typeof PopoverArrow>;
+export type PopoverHeadingProps = ComponentProps<typeof PopoverHeading>;
+export { PopoverRoot, PopoverTrigger, PopoverContent, PopoverDialog, PopoverArrow, PopoverHeading, };
+export default Popover;

package/dist/components/popover/index.js

@@ -0,0 +1,9 @@
+import * as __WEBPACK_EXTERNAL_MODULE__Popover_js_1c9672de__ from "./Popover.js";
+const popover = __WEBPACK_EXTERNAL_MODULE__Popover_js_1c9672de__["default"];
+var __webpack_exports__PopoverArrow = __WEBPACK_EXTERNAL_MODULE__Popover_js_1c9672de__.PopoverArrow;
+var __webpack_exports__PopoverContent = __WEBPACK_EXTERNAL_MODULE__Popover_js_1c9672de__.PopoverContent;
+var __webpack_exports__PopoverDialog = __WEBPACK_EXTERNAL_MODULE__Popover_js_1c9672de__.PopoverDialog;
+var __webpack_exports__PopoverHeading = __WEBPACK_EXTERNAL_MODULE__Popover_js_1c9672de__.PopoverHeading;
+var __webpack_exports__PopoverRoot = __WEBPACK_EXTERNAL_MODULE__Popover_js_1c9672de__.PopoverRoot;
+var __webpack_exports__PopoverTrigger = __WEBPACK_EXTERNAL_MODULE__Popover_js_1c9672de__.PopoverTrigger;
+export { popover as default, __webpack_exports__PopoverArrow as PopoverArrow, __webpack_exports__PopoverContent as PopoverContent, __webpack_exports__PopoverDialog as PopoverDialog, __webpack_exports__PopoverHeading as PopoverHeading, __webpack_exports__PopoverRoot as PopoverRoot, __webpack_exports__PopoverTrigger as PopoverTrigger };

package/dist/components/progress-bar/ProgressBar.js

@@ -39,10 +39,10 @@ const ProgressBar = (props)=>{
     return (()=>{
         var _el$ = _tmpl$(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild;
         (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
-            role: "progressbar",
-            get ["class"] () {
-                return classes();
-            },
+            role: "progressbar"
+        }, ()=>({
+                class: classes()
+            }), {
             get ["data-theme"] () {
                 return local.dataTheme;
             },
@@ -75,8 +75,10 @@ const ProgressBar = (props)=>{
             var _c$ = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.memo)(()=>!!local.label);
             return ()=>_c$() && (()=>{
                     var _el$4 = _tmpl$2();
+                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$4, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
+                            class: __WEBPACK_EXTERNAL_MODULE__ProgressBar_classes_js_54b1a4d7__.CLASSES.label
+                        })), false, true);
                     (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$4, ()=>local.label);
-                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)(()=>(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$4, __WEBPACK_EXTERNAL_MODULE__ProgressBar_classes_js_54b1a4d7__.CLASSES.label));
                     return _el$4;
                 })();
         })(), _el$2);
@@ -84,24 +86,25 @@ const ProgressBar = (props)=>{
             var _c$2 = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.memo)(()=>!!shouldShowValue());
             return ()=>_c$2() && (()=>{
                     var _el$5 = _tmpl$2();
+                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$5, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
+                            class: __WEBPACK_EXTERNAL_MODULE__ProgressBar_classes_js_54b1a4d7__.CLASSES.output
+                        })), false, true);
                     (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$5, valueText);
-                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)(()=>(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$5, __WEBPACK_EXTERNAL_MODULE__ProgressBar_classes_js_54b1a4d7__.CLASSES.output));
                     return _el$5;
                 })();
         })(), _el$2);
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)((_p$)=>{
-            var _v$ = __WEBPACK_EXTERNAL_MODULE__ProgressBar_classes_js_54b1a4d7__.CLASSES.track, _v$2 = __WEBPACK_EXTERNAL_MODULE__ProgressBar_classes_js_54b1a4d7__.CLASSES.indicator, _v$3 = isIndeterminate() ? void 0 : {
-                width: `${percentage()}%`
-            };
-            _v$ !== _p$.e && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$2, _p$.e = _v$);
-            _v$2 !== _p$.t && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$3, _p$.t = _v$2);
-            _p$.a = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.style)(_el$3, _v$3, _p$.a);
-            return _p$;
-        }, {
-            e: void 0,
-            t: void 0,
-            a: void 0
-        });
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$2, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
+                class: __WEBPACK_EXTERNAL_MODULE__ProgressBar_classes_js_54b1a4d7__.CLASSES.track
+            })), false, true);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$3, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
+                class: __WEBPACK_EXTERNAL_MODULE__ProgressBar_classes_js_54b1a4d7__.CLASSES.indicator
+            }), {
+            get style () {
+                return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.memo)(()=>!!isIndeterminate())() ? void 0 : {
+                    width: `${percentage()}%`
+                };
+            }
+        }), false, false);
         return _el$;
     })();
 };

package/dist/components/progress-circle/ProgressCircle.js

@@ -3,7 +3,7 @@ import "./ProgressCircle.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__ProgressCircle_classes_js_9616c884__ from "./ProgressCircle.classes.js";
-var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<span><svg fill=none viewBox="0 0 36 36"><circle cx=18 cy=18 r=16 stroke-width=4></circle><circle cx=18 cy=18 r=16 stroke-linecap=round stroke-width=4 transform="rotate(-90 18 18)">');
+var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<span><svg><circle></circle><circle>");
 const STROKE_WIDTH = 4;
 const CENTER = 18;
 const RADIUS = CENTER - STROKE_WIDTH / 2;
@@ -42,10 +42,10 @@ const ProgressCircle = (props)=>{
     return (()=>{
         var _el$ = _tmpl$(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$3.nextSibling;
         (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
-            role: "progressbar",
-            get ["class"] () {
-                return classes();
-            },
+            role: "progressbar"
+        }, ()=>({
+                class: classes()
+            }), {
             get ["data-theme"] () {
                 return local.dataTheme;
             },
@@ -74,20 +74,34 @@ const ProgressCircle = (props)=>{
                 return local.isDisabled ? "true" : void 0;
             }
         }), false, true);
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$4, "stroke-dasharray", `${CIRCUMFERENCE}`);
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)((_p$)=>{
-            var _v$ = __WEBPACK_EXTERNAL_MODULE__ProgressCircle_classes_js_9616c884__.CLASSES.svg, _v$2 = __WEBPACK_EXTERNAL_MODULE__ProgressCircle_classes_js_9616c884__.CLASSES.trackCircle, _v$3 = __WEBPACK_EXTERNAL_MODULE__ProgressCircle_classes_js_9616c884__.CLASSES.indicator, _v$4 = `${isIndeterminate() ? 0.75 * CIRCUMFERENCE : strokeDashoffset()}`;
-            _v$ !== _p$.e && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$2, "class", _p$.e = _v$);
-            _v$2 !== _p$.t && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$3, "class", _p$.t = _v$2);
-            _v$3 !== _p$.a && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$4, "class", _p$.a = _v$3);
-            _v$4 !== _p$.o && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$4, "stroke-dashoffset", _p$.o = _v$4);
-            return _p$;
-        }, {
-            e: void 0,
-            t: void 0,
-            a: void 0,
-            o: void 0
-        });
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$2, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
+                class: __WEBPACK_EXTERNAL_MODULE__ProgressCircle_classes_js_9616c884__.CLASSES.svg
+            }), {
+            fill: "none",
+            viewBox: `0 0 ${2 * CENTER} ${2 * CENTER}`
+        }), true, true);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$3, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
+                class: __WEBPACK_EXTERNAL_MODULE__ProgressCircle_classes_js_9616c884__.CLASSES.trackCircle
+            }), {
+            cx: CENTER,
+            cy: CENTER,
+            r: RADIUS,
+            "stroke-width": STROKE_WIDTH
+        }), true, false);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$4, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
+                class: __WEBPACK_EXTERNAL_MODULE__ProgressCircle_classes_js_9616c884__.CLASSES.indicator
+            }), {
+            cx: CENTER,
+            cy: CENTER,
+            r: RADIUS,
+            "stroke-dasharray": `${CIRCUMFERENCE}`,
+            get ["stroke-dashoffset"] () {
+                return `${isIndeterminate() ? 0.75 * CIRCUMFERENCE : strokeDashoffset()}`;
+            },
+            "stroke-linecap": "round",
+            "stroke-width": STROKE_WIDTH,
+            transform: `rotate(-90 ${CENTER} ${CENTER})`
+        }), true, false);
         return _el$;
     })();
 };

package/dist/components/radio/Radio.classes.d.ts

@@ -0,0 +1,13 @@
+export declare const CLASSES: {
+    readonly base: "radio";
+    readonly slot: {
+        readonly input: "radio__input";
+        readonly control: "radio__control";
+        readonly indicator: "radio__indicator";
+        readonly content: "radio__content";
+        readonly description: "radio__description";
+    };
+    readonly flag: {
+        readonly disabled: "radio--disabled";
+    };
+};

package/dist/components/radio/Radio.classes.js

@@ -0,0 +1,14 @@
+const CLASSES = {
+    base: "radio",
+    slot: {
+        input: "radio__input",
+        control: "radio__control",
+        indicator: "radio__indicator",
+        content: "radio__content",
+        description: "radio__description"
+    },
+    flag: {
+        disabled: "radio--disabled"
+    }
+};
+export { CLASSES };

package/dist/components/radio/Radio.js

@@ -3,7 +3,8 @@ import "./Radio.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__radio_group_context_js_9a625e67__ from "../radio-group/context.js";
-var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<span data-slot=label>"), _tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<span class=radio__description data-slot=description>"), _tmpl$3 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<span class=radio__content data-slot=radio-content>"), _tmpl$4 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<label data-slot=radio><input><span class=radio__control data-slot=radio-control aria-hidden=true><span class=radio__indicator data-slot=radio-indicator>");
+import * as __WEBPACK_EXTERNAL_MODULE__Radio_classes_js_adb15be7__ from "./Radio.classes.js";
+var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<span data-slot=label>"), _tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<span>"), _tmpl$3 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<label><input><span><span>");
 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);
@@ -40,7 +41,27 @@ const Radio = (props)=>{
         if (event.currentTarget.checked && group && void 0 !== value()) group.selectValue(value(), event);
     };
     return (()=>{
-        var _el$ = _tmpl$4(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling, _el$4 = _el$3.firstChild;
+        var _el$ = _tmpl$3(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling, _el$4 = _el$3.firstChild;
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
+                class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__Radio_classes_js_adb15be7__.CLASSES.base, isDisabled() && __WEBPACK_EXTERNAL_MODULE__Radio_classes_js_adb15be7__.CLASSES.flag.disabled, local.class, local.className)
+            }), {
+            get ["data-theme"] () {
+                return local.dataTheme;
+            },
+            "data-slot": "radio",
+            get ["data-selected"] () {
+                return isSelected() ? "true" : "false";
+            },
+            get ["data-disabled"] () {
+                return isDisabled() ? "true" : "false";
+            },
+            get ["data-invalid"] () {
+                return isInvalid() ? "true" : "false";
+            },
+            get ["aria-disabled"] () {
+                return isDisabled() ? "true" : "false";
+            }
+        }), false, true);
         (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$2, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
             type: "radio",
             get value () {
@@ -54,21 +75,39 @@ const Radio = (props)=>{
             },
             get disabled () {
                 return isDisabled();
-            },
-            class: "radio__input",
+            }
+        }, ()=>({
+                class: __WEBPACK_EXTERNAL_MODULE__Radio_classes_js_adb15be7__.CLASSES.slot.input
+            }), {
             "data-slot": "radio-input",
             get ["aria-invalid"] () {
                 return ariaInvalid();
             },
             onChange: handleChange
         }), false, false);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$3, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
+                class: __WEBPACK_EXTERNAL_MODULE__Radio_classes_js_adb15be7__.CLASSES.slot.control
+            }), {
+            "data-slot": "radio-control",
+            "aria-hidden": "true"
+        }), false, true);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$4, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
+                class: __WEBPACK_EXTERNAL_MODULE__Radio_classes_js_adb15be7__.CLASSES.slot.indicator
+            }), {
+            "data-slot": "radio-indicator"
+        }), false, true);
         (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$4, ()=>local.indicator);
         (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
             get when () {
                 return hasContent();
             },
             get children () {
-                var _el$5 = _tmpl$3();
+                var _el$5 = _tmpl$2();
+                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$5, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
+                        class: __WEBPACK_EXTERNAL_MODULE__Radio_classes_js_adb15be7__.CLASSES.slot.content
+                    }), {
+                    "data-slot": "radio-content"
+                }), false, true);
                 (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$5, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
                     get when () {
                         return local.children;
@@ -85,6 +124,11 @@ const Radio = (props)=>{
                     },
                     get children () {
                         var _el$7 = _tmpl$2();
+                        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$7, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
+                                class: __WEBPACK_EXTERNAL_MODULE__Radio_classes_js_adb15be7__.CLASSES.slot.description
+                            }), {
+                            "data-slot": "description"
+                        }), false, true);
                         (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$7, ()=>local.description);
                         return _el$7;
                     }
@@ -92,23 +136,6 @@ const Radio = (props)=>{
                 return _el$5;
             }
         }), null);
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)((_p$)=>{
-            var _v$ = (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("radio", isDisabled() && "radio--disabled", local.class, local.className), _v$2 = local.dataTheme, _v$3 = isSelected() ? "true" : "false", _v$4 = isDisabled() ? "true" : "false", _v$5 = isInvalid() ? "true" : "false", _v$6 = isDisabled() ? "true" : "false";
-            _v$ !== _p$.e && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$, _p$.e = _v$);
-            _v$2 !== _p$.t && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$, "data-theme", _p$.t = _v$2);
-            _v$3 !== _p$.a && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$, "data-selected", _p$.a = _v$3);
-            _v$4 !== _p$.o && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$, "data-disabled", _p$.o = _v$4);
-            _v$5 !== _p$.i && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$, "data-invalid", _p$.i = _v$5);
-            _v$6 !== _p$.n && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$, "aria-disabled", _p$.n = _v$6);
-            return _p$;
-        }, {
-            e: void 0,
-            t: void 0,
-            a: void 0,
-            o: void 0,
-            i: void 0,
-            n: void 0
-        });
         return _el$;
     })();
 };

package/dist/components/radio-group/RadioGroup.classes.d.ts

@@ -0,0 +1,21 @@
+export declare const CLASSES: {
+    readonly base: "radio-group";
+    readonly slot: {
+        readonly label: "radio-group__label";
+        readonly description: "radio-group__description";
+        readonly error: "radio-group__error";
+        readonly items: "radio-group__items";
+    };
+    readonly orientation: {
+        readonly vertical: "radio-group--vertical";
+        readonly horizontal: "radio-group--horizontal";
+    };
+    readonly variant: {
+        readonly primary: "radio-group--primary";
+        readonly secondary: "radio-group--secondary";
+    };
+    readonly flag: {
+        readonly disabled: "radio-group--disabled";
+        readonly invalid: "radio-group--invalid";
+    };
+};