@pathscale/ui 0.1.0 → 1.2.0

package/dist/components/toastcontainer/ToastStack.js

@@ -0,0 +1,181 @@
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web";
+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__alert_index_js_d9d6572d__ from "../alert/index.js";
+import * as __WEBPACK_EXTERNAL_MODULE__button_index_js_557db1f7__ from "../button/index.js";
+import * as __WEBPACK_EXTERNAL_MODULE__toast_index_js_78d3aea9__ from "../toast/index.js";
+import * as __WEBPACK_EXTERNAL_MODULE__motion_index_js_58495715__ from "../../motion/index.js";
+import * as __WEBPACK_EXTERNAL_MODULE__stores_toastStore_js_d4b6a69a__ from "../../stores/toastStore.js";
+var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div>");
+const TOAST_STATUS_MAP = {
+    info: "accent",
+    success: "success",
+    warning: "warning",
+    error: "danger"
+};
+const defaultRenderToast = (toast, dismiss)=>(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__alert_index_js_d9d6572d__["default"], {
+        get status () {
+            return TOAST_STATUS_MAP[toast.type];
+        },
+        style: {
+            "min-width": "20rem",
+            "max-width": "32rem"
+        },
+        get children () {
+            return [
+                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__alert_index_js_d9d6572d__["default"].Content, {
+                    get children () {
+                        return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__alert_index_js_d9d6572d__["default"].Title, {
+                            get children () {
+                                return toast.message;
+                            }
+                        });
+                    }
+                }),
+                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__button_index_js_557db1f7__["default"], {
+                    size: "sm",
+                    variant: "ghost",
+                    onClick: (event)=>{
+                        event.stopPropagation();
+                        dismiss();
+                    },
+                    class: "ml-2 opacity-70 hover:opacity-100",
+                    "aria-label": "Dismiss notification",
+                    children: "x"
+                })
+            ];
+        }
+    });
+const ToastStack_ToastStack = (props)=>{
+    const [local, rest] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "class",
+        "motionPreset",
+        "motionPresetName",
+        "reduceMotion",
+        "renderToast",
+        "max",
+        "expandOnClick",
+        "collapsedCount",
+        "collapsedOffset",
+        "collapsedScale"
+    ]);
+    const [expanded, setExpanded] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(false);
+    const resolvedPreset = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>{
+        if (local.motionPreset) return local.motionPreset;
+        const name = local.motionPresetName ?? "toast";
+        return (0, __WEBPACK_EXTERNAL_MODULE__motion_index_js_58495715__.resolvePreset)(name, {
+            reduceMotion: local.reduceMotion
+        });
+    });
+    const visibleToasts = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>{
+        const list = __WEBPACK_EXTERNAL_MODULE__stores_toastStore_js_d4b6a69a__.toastStore.toasts();
+        if (local.max && local.max > 0) return list.slice(-local.max);
+        return list;
+    });
+    const allowCollapse = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>{
+        if (false === local.expandOnClick) return false;
+        return visibleToasts().length > 1;
+    });
+    const isExpanded = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>{
+        if (!allowCollapse()) return true;
+        return expanded();
+    });
+    const collapsedCount = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>local.collapsedCount ?? 3);
+    const collapsedOffset = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>local.collapsedOffset ?? 10);
+    const collapsedScale = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>local.collapsedScale ?? 0.02);
+    const stackToasts = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>{
+        const list = visibleToasts();
+        if (isExpanded()) return list;
+        const count = collapsedCount();
+        if (count <= 0) return list;
+        return list.slice(-count);
+    });
+    const renderToast = ()=>local.renderToast ?? defaultRenderToast;
+    return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__toast_index_js_78d3aea9__["default"], (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(rest, {
+        get ["class"] () {
+            return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(local.class);
+        },
+        get children () {
+            var _el$ = _tmpl$();
+            (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__.For, {
+                get each () {
+                    return stackToasts();
+                },
+                children: (toast, index)=>{
+                    const isTop = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>index() === stackToasts().length - 1);
+                    const stackIndex = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>stackToasts().length - 1 - index());
+                    const onToggle = ()=>{
+                        if (!allowCollapse() || !isTop()) return;
+                        setExpanded((prev)=>!prev);
+                    };
+                    const stackStyle = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>{
+                        if (isExpanded()) return {};
+                        const offset = stackIndex() * collapsedOffset();
+                        const scale = 1 - stackIndex() * collapsedScale();
+                        return {
+                            position: "absolute",
+                            right: "0",
+                            bottom: `${offset}px`,
+                            transform: `scale(${scale})`,
+                            "transform-origin": "right bottom",
+                            "z-index": String(100 + index()),
+                            transition: "transform 160ms ease-out"
+                        };
+                    });
+                    return (()=>{
+                        var _el$2 = _tmpl$();
+                        _el$2.$$click = onToggle;
+                        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$2, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__motion_index_js_58495715__.MotionDiv, {
+                            get initial () {
+                                return resolvedPreset().initial;
+                            },
+                            get animate () {
+                                return resolvedPreset().animate;
+                            },
+                            get exit () {
+                                return resolvedPreset().exit;
+                            },
+                            get transition () {
+                                return resolvedPreset().transition;
+                            },
+                            get isExiting () {
+                                return toast.isExiting;
+                            },
+                            onExitComplete: ()=>__WEBPACK_EXTERNAL_MODULE__stores_toastStore_js_d4b6a69a__.toastStore.removeToast(toast.id),
+                            get children () {
+                                return renderToast()(toast, ()=>__WEBPACK_EXTERNAL_MODULE__stores_toastStore_js_d4b6a69a__.toastStore.dismissToast(toast.id));
+                            }
+                        }));
+                        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)((_p$)=>{
+                            var _v$3 = isTop() && !isExpanded() ? "cursor-pointer" : void 0, _v$4 = stackStyle();
+                            _v$3 !== _p$.e && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$2, _p$.e = _v$3);
+                            _p$.t = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.style)(_el$2, _v$4, _p$.t);
+                            return _p$;
+                        }, {
+                            e: void 0,
+                            t: void 0
+                        });
+                        return _el$2;
+                    })();
+                }
+            }));
+            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)((_p$)=>{
+                var _v$ = isExpanded() ? "flex flex-col gap-2" : "relative", _v$2 = isExpanded() ? void 0 : {
+                    "min-height": "3rem"
+                };
+                _v$ !== _p$.e && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$, _p$.e = _v$);
+                _p$.t = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.style)(_el$, _v$2, _p$.t);
+                return _p$;
+            }, {
+                e: void 0,
+                t: void 0
+            });
+            return _el$;
+        }
+    }));
+};
+const ToastStack = ToastStack_ToastStack;
+(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.delegateEvents)([
+    "click"
+]);
+export { ToastStack_ToastStack as ToastStack, ToastStack as default };

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

@@ -0,0 +1,3 @@
+export { ToastContainer } from "./ToastContainer";
+export { ToastStack } from "./ToastStack";
+export type { ToastStackProps, ToastRenderer } from "./ToastStack";

package/dist/components/toastcontainer/index.js

@@ -0,0 +1,5 @@
+import * as __WEBPACK_EXTERNAL_MODULE__ToastContainer_js_6b089da7__ from "./ToastContainer.js";
+import * as __WEBPACK_EXTERNAL_MODULE__ToastStack_js_7635dd78__ from "./ToastStack.js";
+var __webpack_exports__ToastContainer = __WEBPACK_EXTERNAL_MODULE__ToastContainer_js_6b089da7__.ToastContainer;
+var __webpack_exports__ToastStack = __WEBPACK_EXTERNAL_MODULE__ToastStack_js_7635dd78__.ToastStack;
+export { __webpack_exports__ToastContainer as ToastContainer, __webpack_exports__ToastStack as ToastStack };

package/dist/components/toggle/Toggle.d.ts

@@ -0,0 +1,16 @@
+import "./Toggle.css";
+import { type Component, type JSX } from "solid-js";
+import type { IComponentBaseProps } from "../types";
+export type ToggleColor = "default" | "accent" | "success" | "warning" | "danger";
+export type ToggleSize = "sm" | "md" | "lg";
+export type ToggleProps = Omit<JSX.InputHTMLAttributes<HTMLInputElement>, "type" | "children" | "color"> & IComponentBaseProps & {
+    defaultChecked?: boolean;
+    children?: JSX.Element;
+    description?: JSX.Element;
+    icon?: JSX.Element;
+    isDisabled?: boolean;
+    color?: ToggleColor;
+    size?: ToggleSize;
+};
+declare const Toggle: Component<ToggleProps>;
+export default Toggle;

package/dist/components/toggle/Toggle.js

@@ -0,0 +1,124 @@
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web";
+import "./Toggle.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)("<span class=toggle__icon data-slot=toggle-icon>"), _tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<span data-slot=label>"), _tmpl$3 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<span class=toggle__description data-slot=description>"), _tmpl$4 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<span class=toggle__content data-slot=toggle-content>"), _tmpl$5 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<label data-slot=toggle><input><span class=toggle__control data-slot=toggle-control aria-hidden=true><span class=toggle__thumb data-slot=toggle-thumb>");
+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);
+};
+const TOGGLE_COLOR_CLASS = {
+    default: "toggle--default",
+    accent: "toggle--accent",
+    success: "toggle--success",
+    warning: "toggle--warning",
+    danger: "toggle--danger"
+};
+const TOGGLE_SIZE_CLASS = {
+    sm: "toggle--sm",
+    md: "toggle--md",
+    lg: "toggle--lg"
+};
+const Toggle = (props)=>{
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "class",
+        "className",
+        "children",
+        "description",
+        "icon",
+        "isDisabled",
+        "color",
+        "size",
+        "checked",
+        "defaultChecked",
+        "disabled",
+        "onChange",
+        "dataTheme"
+    ]);
+    const [internalSelected, setInternalSelected] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(Boolean(local.defaultChecked));
+    const isControlled = ()=>void 0 !== local.checked;
+    const isSelected = ()=>isControlled() ? Boolean(local.checked) : internalSelected();
+    const isDisabled = ()=>Boolean(local.isDisabled) || Boolean(local.disabled);
+    const color = ()=>local.color ?? "accent";
+    const size = ()=>local.size ?? "md";
+    const hasContent = ()=>null != local.children || null != local.description;
+    const handleChange = (event)=>{
+        invokeEventHandler(local.onChange, event);
+        if (event.defaultPrevented) return;
+        if (isDisabled()) return;
+        if (!isControlled()) setInternalSelected(event.currentTarget.checked);
+    };
+    return (()=>{
+        var _el$ = _tmpl$5(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling, _el$4 = _el$3.firstChild;
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$2, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
+            type: "checkbox",
+            role: "switch",
+            class: "toggle__input",
+            "data-slot": "toggle-input",
+            get checked () {
+                return isSelected();
+            },
+            get disabled () {
+                return isDisabled();
+            },
+            onChange: handleChange
+        }), false, false);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$4, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
+            get when () {
+                return local.icon;
+            },
+            get children () {
+                var _el$5 = _tmpl$();
+                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$5, ()=>local.icon);
+                return _el$5;
+            }
+        }));
+        (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$6 = _tmpl$4();
+                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$6, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
+                    get when () {
+                        return local.children;
+                    },
+                    get children () {
+                        var _el$7 = _tmpl$2();
+                        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$7, ()=>local.children);
+                        return _el$7;
+                    }
+                }), null);
+                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$6, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
+                    get when () {
+                        return local.description;
+                    },
+                    get children () {
+                        var _el$8 = _tmpl$3();
+                        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$8, ()=>local.description);
+                        return _el$8;
+                    }
+                }), null);
+                return _el$6;
+            }
+        }), null);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)((_p$)=>{
+            var _v$ = (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("toggle", TOGGLE_SIZE_CLASS[size()], TOGGLE_COLOR_CLASS[color()], isDisabled() && "toggle--disabled", local.class, local.className), _v$2 = local.dataTheme, _v$3 = isSelected() ? "true" : "false", _v$4 = isDisabled() ? "true" : "false", _v$5 = 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$, "aria-disabled", _p$.i = _v$5);
+            return _p$;
+        }, {
+            e: void 0,
+            t: void 0,
+            a: void 0,
+            o: void 0,
+            i: void 0
+        });
+        return _el$;
+    })();
+};
+const toggle_Toggle = Toggle;
+export { toggle_Toggle as default };

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

@@ -0,0 +1 @@
+export { default, type ToggleProps, type ToggleColor, type ToggleSize } from "./Toggle";

package/dist/components/toggle/index.js

@@ -0,0 +1,3 @@
+import * as __WEBPACK_EXTERNAL_MODULE__Toggle_js_93f01922__ from "./Toggle.js";
+var __webpack_exports__default = __WEBPACK_EXTERNAL_MODULE__Toggle_js_93f01922__["default"];
+export { __webpack_exports__default as default };

package/dist/components/toggle/toggle.css

@@ -0,0 +1,228 @@
+@layer components {
+  .toggle {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    gap: 0.75rem;
+    color: var(--color-base-content);
+    cursor: pointer;
+    user-select: none;
+    -webkit-tap-highlight-color: transparent;
+
+    --switch-control-bg: var(--color-default);
+    --switch-control-bg-hover: color-mix(in oklab, var(--switch-control-bg), transparent 20%);
+    --switch-control-bg-pressed: var(--switch-control-bg-hover);
+    --switch-control-bg-checked: var(--color-accent);
+    --switch-control-bg-checked-hover: color-mix(in oklab, var(--switch-control-bg-checked), #000 8%);
+  }
+
+  .toggle__input {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    margin: -1px;
+    border: 0;
+    padding: 0;
+    overflow: hidden;
+    white-space: nowrap;
+    clip-path: inset(50%);
+  }
+
+  .toggle__control {
+    position: relative;
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    overflow: hidden;
+    border-radius: 9999px;
+    height: 1.25rem;
+    width: 2.5rem;
+    background-color: var(--switch-control-bg);
+    transition:
+      background-color 250ms ease,
+      box-shadow 150ms ease;
+  }
+
+  .toggle__thumb {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 9999px;
+    background-color: white;
+    margin-inline-start: 0.125rem;
+    height: 1rem;
+    width: 1.375rem;
+    box-shadow:
+      0 0 5px 0 oklch(0% 0 0 / 0.02),
+      0 2px 10px 0 oklch(0% 0 0 / 0.06),
+      0 0 1px 0 oklch(0% 0 0 / 0.3);
+    transition:
+      margin 300ms ease,
+      background-color 200ms ease;
+  }
+
+  .toggle__icon {
+    display: flex;
+    width: 100%;
+    height: 100%;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .toggle__content {
+    display: flex;
+    flex-direction: column;
+    gap: 0;
+  }
+
+  .toggle__description {
+    color: color-mix(in oklab, var(--color-base-content) 62%, transparent);
+    font-size: 0.75rem;
+    line-height: 1rem;
+  }
+
+  /* ── Focus state ── */
+
+  .toggle:focus-within .toggle__control,
+  .toggle__input:focus-visible + .toggle__control,
+  .toggle[data-focus-visible="true"] .toggle__control {
+    box-shadow: 0 0 0 3px color-mix(in oklab, var(--switch-control-bg-checked) 22%, transparent);
+  }
+
+  /* ── Hover state ── */
+
+  @media (hover: hover) {
+    .toggle:hover .toggle__control,
+    .toggle[data-hovered="true"] .toggle__control {
+      background-color: var(--switch-control-bg-hover);
+    }
+  }
+
+  /* ── Pressed state ── */
+
+  .toggle:active .toggle__control,
+  .toggle[data-pressed="true"] .toggle__control {
+    background-color: var(--switch-control-bg-pressed);
+  }
+
+  /* ── Checked state ── */
+
+  .toggle[data-selected="true"] .toggle__control {
+    background-color: var(--switch-control-bg-checked);
+  }
+
+  .toggle[data-selected="true"] .toggle__thumb {
+    margin-inline-start: calc(100% - 1.5rem);
+    box-shadow:
+      0 0 5px 0 oklch(0% 0 0 / 0.02),
+      0 2px 10px 0 oklch(0% 0 0 / 0.06),
+      0 0 1px 0 oklch(0% 0 0 / 0.3);
+  }
+
+  /* ── Checked + Hover ── */
+
+  @media (hover: hover) {
+    .toggle[data-selected="true"]:hover .toggle__control,
+    .toggle[data-selected="true"][data-hovered="true"] .toggle__control {
+      background-color: var(--switch-control-bg-checked-hover);
+    }
+  }
+
+  /* ── Checked + Pressed ── */
+
+  .toggle[data-selected="true"]:active .toggle__control,
+  .toggle[data-selected="true"][data-pressed="true"] .toggle__control {
+    background-color: var(--switch-control-bg-checked-hover);
+  }
+
+  /* ── Size: sm ── */
+
+  .toggle--sm .toggle__control {
+    height: 1rem;
+    width: 2rem;
+  }
+
+  .toggle--sm .toggle__thumb {
+    height: 0.75rem;
+    width: 1.03125rem;
+  }
+
+  .toggle--sm[data-selected="true"] .toggle__thumb {
+    margin-inline-start: calc(100% - 1.15625rem);
+  }
+
+  /* ── Size: md (default) ── */
+
+  .toggle--md {
+    /* Default size */
+  }
+
+  /* ── Size: lg ── */
+
+  .toggle--lg .toggle__control {
+    height: 1.5rem;
+    width: 3rem;
+  }
+
+  .toggle--lg .toggle__thumb {
+    height: 1.25rem;
+    width: 1.71875rem;
+  }
+
+  .toggle--lg[data-selected="true"] .toggle__thumb {
+    margin-inline-start: calc(100% - 1.84375rem);
+  }
+
+  /* ── Color: default ── */
+
+  .toggle--default {
+    --switch-control-bg-checked: var(--color-default-foreground);
+    --switch-control-bg-checked-hover: color-mix(in oklab, var(--switch-control-bg-checked), #000 8%);
+  }
+
+  /* ── Color: accent (default) ── */
+
+  .toggle--accent {
+    --switch-control-bg-checked: var(--color-accent);
+    --switch-control-bg-checked-hover: color-mix(in oklab, var(--switch-control-bg-checked), #000 8%);
+  }
+
+  /* ── Color: success ── */
+
+  .toggle--success {
+    --switch-control-bg-checked: var(--color-success);
+    --switch-control-bg-checked-hover: color-mix(in oklab, var(--switch-control-bg-checked), #000 8%);
+  }
+
+  /* ── Color: warning ── */
+
+  .toggle--warning {
+    --switch-control-bg-checked: var(--color-warning);
+    --switch-control-bg-checked-hover: color-mix(in oklab, var(--switch-control-bg-checked), #000 8%);
+  }
+
+  /* ── Color: danger ── */
+
+  .toggle--danger {
+    --switch-control-bg-checked: var(--color-danger);
+    --switch-control-bg-checked-hover: color-mix(in oklab, var(--switch-control-bg-checked), #000 8%);
+  }
+
+  /* ── Disabled state ── */
+
+  .toggle--disabled,
+  .toggle[data-disabled="true"] {
+    cursor: not-allowed;
+    opacity: 0.55;
+  }
+
+  .toggle--disabled .toggle__thumb,
+  .toggle[data-disabled="true"] .toggle__thumb {
+    background-color: color-mix(in oklab, var(--color-default-foreground) 20%, transparent);
+  }
+
+  .toggle--disabled[data-selected="true"] .toggle__thumb,
+  .toggle[data-disabled="true"][data-selected="true"] .toggle__thumb {
+    opacity: 0.4;
+  }
+}