@pathscale/ui 2.1.0 → 2.2.0

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

@@ -38,7 +38,6 @@ const __solidLayoutSelectRoot = (_stable, p)=>{
     const [local, others] = splitProps(p, [
         "children",
         "class",
-        "className",
         "dataTheme",
         "placeholder",
         "value",
@@ -47,14 +46,14 @@ const __solidLayoutSelectRoot = (_stable, p)=>{
         "defaultSelectedKeys",
         "onChange",
         "onSelectionChange",
-        "isDisabled",
+        "state",
         "disabled",
         "fullWidth",
         "variant",
         "selectionMode",
         "placement",
         "autoFlip",
-        "isOpen",
+        "open",
         "defaultOpen",
         "onOpenChange",
         "ref"
@@ -65,7 +64,7 @@ const __solidLayoutSelectRoot = (_stable, p)=>{
     const selectionMode = ()=>local.selectionMode ?? "single";
     const variant = ()=>local.variant ?? "primary";
     const fullWidth = ()=>Boolean(local.fullWidth);
-    const disabled = ()=>Boolean(local.isDisabled) || Boolean(local.disabled);
+    const disabled = ()=>Boolean("disabled" === local.state) || Boolean(local.disabled);
     const initialSelected = normalizeSelection(selectionMode(), local.defaultSelectedKeys ?? local.defaultValue);
     const [internalSelectedKeys, setInternalSelectedKeys] = createSignal(initialSelected);
     const [internalOpen, setInternalOpen] = createSignal(Boolean(local.defaultOpen));
@@ -76,7 +75,7 @@ const __solidLayoutSelectRoot = (_stable, p)=>{
     const [triggerRef, setTriggerRefSignal] = createSignal();
     const [popoverRef, setPopoverRefSignal] = createSignal();
     const [rootRef, setRootRefSignal] = createSignal();
-    const open = ()=>void 0 !== local.isOpen ? Boolean(local.isOpen) : internalOpen();
+    const open = ()=>void 0 !== local.open ? Boolean(local.open) : internalOpen();
     const placement = ()=>local.placement ?? "bottom";
     const autoFlip = ()=>local.autoFlip ?? true;
     const selectedKeys = createMemo(()=>{
@@ -122,7 +121,7 @@ const __solidLayoutSelectRoot = (_stable, p)=>{
     };
     const setOpen = (next, options)=>{
         if (next && disabled()) return;
-        if (void 0 === local.isOpen) setInternalOpen(next);
+        if (void 0 === local.open) setInternalOpen(next);
         local.onOpenChange?.(next);
         if (!next) {
             setFocusRequest(null);
@@ -244,7 +243,7 @@ const __solidLayoutSelectRoot = (_stable, p)=>{
             var _el$ = _tmpl$();
             use(setRootRef, _el$);
             spread(_el$, mergeProps(others, ()=>({
-                    class: twMerge(CLASSES.base, CLASSES.variant[variant()], fullWidth() && CLASSES.flag.fullWidth, local.class, local.className)
+                    class: twMerge(CLASSES.base, CLASSES.variant[variant()], fullWidth() && CLASSES.flag.fullWidth, local.class)
                 }), {
                 get ["data-theme"] () {
                     return local.dataTheme;
@@ -275,7 +274,6 @@ const __solidLayoutSelectTrigger = (_stable, p)=>{
     const [local, others] = splitProps(p, [
         "children",
         "class",
-        "className",
         "dataTheme",
         "disabled",
         "startIcon",
@@ -288,7 +286,7 @@ const __solidLayoutSelectTrigger = (_stable, p)=>{
     if (!ctx) return (()=>{
         var _el$2 = _tmpl$2();
         spread(_el$2, mergeProps(others, ()=>({
-                class: twMerge(CLASSES.slot.trigger, local.class, local.className)
+                class: twMerge(CLASSES.slot.trigger, local.class)
             }), {
             get ["data-theme"] () {
                 return local.dataTheme;
@@ -378,7 +376,7 @@ const __solidLayoutSelectTrigger = (_stable, p)=>{
                 return local.type ?? "button";
             }
         }, ()=>({
-                class: twMerge(CLASSES.slot.trigger, ctx.fullWidth() && CLASSES.slot.triggerFullWidth, local.class, local.className)
+                class: twMerge(CLASSES.slot.trigger, ctx.fullWidth() && CLASSES.slot.triggerFullWidth, local.class)
             }), {
             get ["data-theme"] () {
                 return local.dataTheme;
@@ -443,7 +441,6 @@ const __solidLayoutSelectValue = (_stable, p)=>{
     const [local, others] = splitProps(p, [
         "children",
         "class",
-        "className",
         "dataTheme"
     ]);
     const placeholder = ()=>ctx?.placeholder() ?? "";
@@ -452,7 +449,7 @@ const __solidLayoutSelectValue = (_stable, p)=>{
     return (()=>{
         var _el$8 = _tmpl$3();
         spread(_el$8, mergeProps(others, ()=>({
-                class: twMerge(CLASSES.slot.value, local.class, local.className)
+                class: twMerge(CLASSES.slot.value, local.class)
             }), {
             get ["data-theme"] () {
                 return local.dataTheme;
@@ -476,7 +473,6 @@ const __solidLayoutSelectIndicator = (_stable, p)=>{
     const [local, others] = splitProps(p, [
         "children",
         "class",
-        "className",
         "dataTheme",
         "startIcon",
         "endIcon"
@@ -484,7 +480,7 @@ const __solidLayoutSelectIndicator = (_stable, p)=>{
     return (()=>{
         var _el$9 = _tmpl$3();
         spread(_el$9, mergeProps(others, ()=>({
-                class: twMerge(CLASSES.slot.indicator, local.class, local.className)
+                class: twMerge(CLASSES.slot.indicator, local.class)
             }), {
             get ["data-theme"] () {
                 return local.dataTheme;
@@ -535,7 +531,6 @@ const __solidLayoutSelectPopover = (_stable, p)=>{
     const [local, others] = splitProps(p, [
         "children",
         "class",
-        "className",
         "dataTheme",
         "style",
         "onPointerDown"
@@ -568,7 +563,7 @@ const __solidLayoutSelectPopover = (_stable, p)=>{
             var _ref$ = ctx?.setPopoverRef;
             "function" == typeof _ref$ && use(_ref$, _el$10);
             spread(_el$10, mergeProps(others, ()=>({
-                    class: twMerge(CLASSES.slot.popover, local.class, local.className)
+                    class: twMerge(CLASSES.slot.popover, local.class)
                 }), {
                 get ["data-theme"] () {
                     return local.dataTheme;
@@ -603,7 +598,6 @@ const __solidLayoutSelectListbox = (_stable, p)=>{
     const [local, others] = splitProps(p, [
         "children",
         "class",
-        "className",
         "dataTheme"
     ]);
     return (()=>{
@@ -613,7 +607,7 @@ const __solidLayoutSelectListbox = (_stable, p)=>{
                 return ctx?.listboxId;
             }
         }, ()=>({
-                class: twMerge(CLASSES.slot.listbox, local.class, local.className)
+                class: twMerge(CLASSES.slot.listbox, local.class)
             }), {
             get ["data-theme"] () {
                 return local.dataTheme;
@@ -639,11 +633,10 @@ const __solidLayoutSelectOption = (_stable, p)=>{
     const [local, others] = splitProps(p, [
         "children",
         "class",
-        "className",
         "dataTheme",
         "value",
         "textValue",
-        "isDisabled",
+        "state",
         "disabled",
         "startIcon",
         "endIcon",
@@ -656,7 +649,7 @@ const __solidLayoutSelectOption = (_stable, p)=>{
     if (!ctx) return (()=>{
         var _el$12 = _tmpl$2();
         spread(_el$12, mergeProps(others, ()=>({
-                class: twMerge(CLASSES.slot.option, local.class, local.className)
+                class: twMerge(CLASSES.slot.option, local.class)
             }), {
             get ["data-theme"] () {
                 return local.dataTheme;
@@ -701,7 +694,7 @@ const __solidLayoutSelectOption = (_stable, p)=>{
         return _el$12;
     })();
     const key = ()=>String(local.value);
-    const isDisabled = ()=>Boolean(local.isDisabled) || Boolean(local.disabled) || ctx.disabled();
+    const isDisabled = ()=>Boolean("disabled" === local.state) || Boolean(local.disabled) || ctx.disabled();
     const isSelected = ()=>ctx.isSelected(key());
     const isFocused = ()=>ctx.focusedKey() === key();
     let optionRef;
@@ -785,7 +778,7 @@ const __solidLayoutSelectOption = (_stable, p)=>{
                 return local.type ?? "button";
             }
         }, ()=>({
-                class: twMerge(CLASSES.slot.option, local.class, local.className)
+                class: twMerge(CLASSES.slot.option, local.class)
             }), {
             get ["data-theme"] () {
                 return local.dataTheme;

package/dist/components/separator/Separator.generated.d.ts

@@ -1,10 +1,10 @@
 import type { Component as __LayoutComponent } from "solid-js";
 import "./Separator.css";
 import { type JSX } from "solid-js";
-import type { IComponentBaseProps } from "../types";
+import type { UIBaseProps } from "../vocabulary";
 export type SeparatorOrientation = "horizontal" | "vertical";
 export type SeparatorVariant = "default" | "secondary" | "tertiary";
-export type SeparatorProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> & IComponentBaseProps & {
+export type SeparatorProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> & UIBaseProps & {
     orientation?: SeparatorOrientation;
     variant?: SeparatorVariant;
 };

package/dist/components/separator/Separator.generated.js

@@ -8,7 +8,6 @@ var _tmpl$ = /*#__PURE__*/ template("<div>");
 const __solidLayoutSeparator = (_stable, p)=>{
     const [local, others] = splitProps(p, [
         "class",
-        "className",
         "dataTheme",
         "style",
         "orientation",
@@ -34,7 +33,7 @@ const __solidLayoutSeparator = (_stable, p)=>{
                 return variant();
             },
             get ["class"] () {
-                return twMerge(CLASSES.base, CLASSES.orientation[orientation()], CLASSES.variant[variant()], local.class, local.className);
+                return twMerge(CLASSES.base, CLASSES.orientation[orientation()], CLASSES.variant[variant()], local.class);
             },
             get ["data-theme"] () {
                 return local.dataTheme;

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

@@ -1,7 +1,7 @@
 import type { Component as __LayoutComponent } from "solid-js";
-import type { IComponentBaseProps } from "../types";
+import type { UIBaseProps } from "../vocabulary";
 import { type SizePreset } from "./sizeStore";
-export interface SizePickerProps extends IComponentBaseProps {
+export interface SizePickerProps extends UIBaseProps {
     storagePrefix?: string;
     onSizeChange?: (size: SizePreset) => void;
     "aria-label"?: string;

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

@@ -18,7 +18,6 @@ const __solidLayoutSizePicker = (_stable, p)=>{
         "onSizeChange",
         "aria-label",
         "class",
-        "className",
         "style",
         "dataTheme"
     ]);
@@ -27,7 +26,7 @@ const __solidLayoutSizePicker = (_stable, p)=>{
         store().setSize(preset);
         local.onSizeChange?.(preset);
     };
-    const classes = ()=>twMerge(CLASSES.base, clsx(local.class, local.className));
+    const classes = ()=>twMerge(CLASSES.base, clsx(local.class));
     return (()=>{
         var _el$ = _tmpl$();
         spread(_el$, mergeProps(()=>({
@@ -47,7 +46,10 @@ const __solidLayoutSizePicker = (_stable, p)=>{
                     type: "button",
                     size: "sm",
                     get variant () {
-                        return store().size() === preset ? "primary" : "ghost";
+                        return store().size() === preset ? "solid" : "ghost";
+                    },
+                    get flavor () {
+                        return store().size() === preset ? "primary" : "neutral";
                     },
                     onClick: ()=>handleClick(preset),
                     role: "radio",

package/dist/components/skeleton/Skeleton.css

@@ -93,3 +93,74 @@
     }
   }
 }
+
+@layer components {
+  /* -----------------------------------------------------------------------
+   * Shape, size, width, radius — the API it never had
+   * --------------------------------------------------------------------- */
+  .skeleton--line {
+    width: 100%;
+  }
+
+  .skeleton--circle {
+    border-radius: var(--radius-pill, 9999px);
+    aspect-ratio: 1;
+    width: auto;
+  }
+
+  .skeleton--rect {
+    width: 100%;
+  }
+
+  .skeleton--xs { height: 0.5rem; }
+  .skeleton--sm { height: 0.75rem; }
+  .skeleton--md { height: 1rem; }
+  .skeleton--lg { height: 1.5rem; }
+  .skeleton--xl { height: 2rem; }
+
+  .skeleton--circle.skeleton--xs { width: 1.5rem; height: 1.5rem; }
+  .skeleton--circle.skeleton--sm { width: 2rem; height: 2rem; }
+  .skeleton--circle.skeleton--md { width: 2.5rem; height: 2.5rem; }
+  .skeleton--circle.skeleton--lg { width: 3rem; height: 3rem; }
+  .skeleton--circle.skeleton--xl { width: 4rem; height: 4rem; }
+
+  .skeleton--rect.skeleton--xs { height: 4rem; }
+  .skeleton--rect.skeleton--sm { height: 6rem; }
+  .skeleton--rect.skeleton--md { height: 8rem; }
+  .skeleton--rect.skeleton--lg { height: 12rem; }
+  .skeleton--rect.skeleton--xl { height: 16rem; }
+
+  .skeleton--width-full { width: 100%; }
+  .skeleton--width-fit { width: fit-content; }
+  .skeleton--width-screen { width: 100vw; }
+
+  .skeleton--radius-none { border-radius: 0; }
+  .skeleton--radius-sm { border-radius: 0.25rem; }
+  .skeleton--radius-md { border-radius: 0.5rem; }
+  .skeleton--radius-lg { border-radius: 0.75rem; }
+  .skeleton--radius-full { border-radius: var(--radius-pill, 9999px); }
+
+  /* -----------------------------------------------------------------------
+   * Multi-line text placeholder
+   * --------------------------------------------------------------------- */
+  .skeleton:has(.skeleton__line) {
+    background-color: transparent;
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    height: auto;
+  }
+
+  .skeleton__line {
+    display: block;
+    height: 1rem;
+    width: 100%;
+    border-radius: inherit;
+    background-color: color-mix(in oklab, var(--color-base-300) 70%, transparent);
+  }
+
+  /* A short last line is what makes a stack read as a paragraph. */
+  .skeleton__line[data-last="true"] {
+    width: 60%;
+  }
+}

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

@@ -1,9 +1,18 @@
 import type { Component as __LayoutComponent } from "solid-js";
 import "./Skeleton.css";
-import type { JSX } from "solid-js";
-import type { IComponentBaseProps } from "../types";
+import { type JSX } from "solid-js";
+import type { Radius, Size, UIBaseProps, Width } from "../vocabulary";
+export type SkeletonShape = "line" | "circle" | "rect";
 export type SkeletonAnimation = "shimmer" | "pulse" | "none";
-export type SkeletonProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> & IComponentBaseProps & {
-    animationType?: SkeletonAnimation;
+export type SkeletonProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> & UIBaseProps & {
+    shape?: SkeletonShape;
+    /** Token, or a raw number of pixels for the cases a scale cannot cover. */
+    width?: Width | number;
+    height?: Size | number;
+    size?: Size;
+    radius?: Radius;
+    animation?: SkeletonAnimation;
+    /** Renders a stack of lines for a multi-line text placeholder. */
+    lines?: number;
 };
 export declare const SkeletonLayout: __LayoutComponent<SkeletonProps>;

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

@@ -1,15 +1,45 @@
-import { mergeProps, spread, template } from "solid-js/web";
+import { createComponent, insert, memo, mergeProps, spread, template } from "solid-js/web";
 import { defineComponent } from "solid-layouts/application-boundary";
 import "./Skeleton.css";
+import { Index, Show } from "solid-js";
 import { skeleton } from "./Skeleton.recipe.js";
-var _tmpl$ = /*#__PURE__*/ template("<div>");
-const __solidLayoutSkeletonLayout = ({ slot, children }, p)=>(()=>{
+var _tmpl$ = /*#__PURE__*/ template("<div>"), _tmpl$2 = /*#__PURE__*/ template("<span>");
+const px = (v)=>"number" == typeof v ? `${v}px` : void 0;
+const __solidLayoutSkeletonLayout = (_stable, p)=>(()=>{
         var _el$ = _tmpl$();
-        spread(_el$, mergeProps(()=>slot.root, {
+        spread(_el$, mergeProps(()=>_stable.slot.root, {
             get style () {
-                return p.style;
+                return {
+                    ..."object" == typeof p.style ? p.style : {},
+                    width: px(p.width),
+                    height: px(p.height)
+                };
+            },
+            "aria-hidden": "true"
+        }), false, true);
+        insert(_el$, createComponent(Show, {
+            get when () {
+                return memo(()=>!!p.lines)() && p.lines > 1;
+            },
+            get children () {
+                return createComponent(Index, {
+                    get each () {
+                        return Array.from({
+                            length: p.lines ?? 0
+                        });
+                    },
+                    children: (_, index)=>(()=>{
+                            var _el$2 = _tmpl$2();
+                            spread(_el$2, mergeProps(()=>_stable.slot.line, {
+                                get ["data-last"] () {
+                                    return index === (p.lines ?? 0) - 1 ? "true" : "false";
+                                }
+                            }), false, false);
+                            return _el$2;
+                        })()
+                });
             }
-        }), false, false);
+        }));
         return _el$;
     })();
 const SkeletonLayout = defineComponent({

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

@@ -1,11 +1,8 @@
-export declare const CLASSES: {
-    readonly base: "skeleton";
-    readonly animation: {
-        readonly shimmer: "skeleton--shimmer";
-        readonly pulse: "skeleton--pulse";
-        readonly none: "skeleton--none";
-    };
-};
+/**
+ * Skeleton had no API at all: 340 call sites across 3 apps, every one styled
+ * by `class`, and not one declared parameter ever passed anywhere in the
+ * fleet. Its size and shape are the whole point of it, and it had neither.
+ */
 export declare const skeleton: import("solid-layouts").Recipe<{
     readonly component: "skeleton";
     readonly element: "div";
@@ -13,15 +10,47 @@ export declare const skeleton: import("solid-layouts").Recipe<{
         readonly root: {
             readonly base: "skeleton";
         };
+        readonly line: {
+            readonly base: "skeleton__line";
+        };
     };
     readonly props: {
-        readonly animationType: {
+        readonly shape: {
+            readonly line: "skeleton--line";
+            readonly circle: "skeleton--circle";
+            readonly rect: "skeleton--rect";
+        };
+        readonly width: {
+            readonly auto: "";
+            readonly full: "skeleton--width-full";
+            readonly fit: "skeleton--width-fit";
+            readonly screen: "skeleton--width-screen";
+        };
+        readonly size: {
+            readonly xs: "skeleton--xs";
+            readonly sm: "skeleton--sm";
+            readonly md: "skeleton--md";
+            readonly lg: "skeleton--lg";
+            readonly xl: "skeleton--xl";
+        };
+        readonly radius: {
+            readonly none: "skeleton--radius-none";
+            readonly sm: "skeleton--radius-sm";
+            readonly md: "skeleton--radius-md";
+            readonly lg: "skeleton--radius-lg";
+            readonly full: "skeleton--radius-full";
+        };
+        readonly animation: {
             readonly shimmer: "skeleton--shimmer";
             readonly pulse: "skeleton--pulse";
             readonly none: "skeleton--none";
         };
     };
     readonly defaults: {
-        readonly animationType: "shimmer";
+        readonly shape: "line";
+        readonly width: "full";
+        readonly size: "md";
+        readonly radius: "sm";
+        readonly animation: "shimmer";
     };
 }>;

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

@@ -1,25 +1,101 @@
 import { recipe } from "../../lib/layouts/index.js";
-const CLASSES = {
-    base: "skeleton",
-    animation: {
-        shimmer: "skeleton--shimmer",
-        pulse: "skeleton--pulse",
-        none: "skeleton--none"
-    }
-};
 const skeleton = recipe({
     component: "skeleton",
     element: "div",
     slots: {
         root: {
-            base: CLASSES.base
+            base: "skeleton"
+        },
+        line: {
+            base: "skeleton__line"
         }
     },
     props: {
-        animationType: CLASSES.animation
+        shape: {
+            line: "skeleton--line",
+            circle: "skeleton--circle",
+            rect: "skeleton--rect"
+        },
+        width: {
+            auto: "",
+            full: "skeleton--width-full",
+            fit: "skeleton--width-fit",
+            screen: "skeleton--width-screen"
+        },
+        size: {
+            xs: "skeleton--xs",
+            sm: "skeleton--sm",
+            md: "skeleton--md",
+            lg: "skeleton--lg",
+            xl: "skeleton--xl"
+        },
+        radius: {
+            none: "skeleton--radius-none",
+            sm: "skeleton--radius-sm",
+            md: "skeleton--radius-md",
+            lg: "skeleton--radius-lg",
+            full: "skeleton--radius-full"
+        },
+        animation: {
+            shimmer: "skeleton--shimmer",
+            pulse: "skeleton--pulse",
+            none: "skeleton--none"
+        }
     },
     defaults: {
-        animationType: "shimmer"
+        shape: "line",
+        width: "full",
+        size: "md",
+        radius: "sm",
+        animation: "shimmer"
+    },
+    _layouts: {
+        slots: {
+            root: {
+                base: "skeleton",
+                axes: {
+                    shape: {
+                        line: "skeleton--line",
+                        circle: "skeleton--circle",
+                        rect: "skeleton--rect"
+                    },
+                    width: {
+                        auto: "",
+                        full: "skeleton--width-full",
+                        fit: "skeleton--width-fit",
+                        screen: "skeleton--width-screen"
+                    },
+                    size: {
+                        xs: "skeleton--xs",
+                        sm: "skeleton--sm",
+                        md: "skeleton--md",
+                        lg: "skeleton--lg",
+                        xl: "skeleton--xl"
+                    },
+                    radius: {
+                        none: "skeleton--radius-none",
+                        sm: "skeleton--radius-sm",
+                        md: "skeleton--radius-md",
+                        lg: "skeleton--radius-lg",
+                        full: "skeleton--radius-full"
+                    },
+                    animation: {
+                        shimmer: "skeleton--shimmer",
+                        pulse: "skeleton--pulse",
+                        none: "skeleton--none"
+                    }
+                }
+            },
+            line: {
+                base: "skeleton__line",
+                axes: {}
+            }
+        },
+        stateKeys: [],
+        slotIds: {
+            root: 1,
+            line: 0
+        }
     }
 });
-export { CLASSES, skeleton };
+export { skeleton };

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

@@ -1,2 +1,3 @@
-export { SkeletonLayout as default } from "./Skeleton.generated";
-export type { SkeletonProps, SkeletonAnimation } from "./Skeleton.generated";
+export { SkeletonLayout as default, SkeletonLayout as Skeleton } from "./Skeleton.generated";
+export type { SkeletonProps, SkeletonShape, SkeletonAnimation } from "./Skeleton.generated";
+export { skeleton } from "./Skeleton.recipe";

package/dist/components/skeleton/index.js

@@ -1 +1,2 @@
-export { SkeletonLayout as default } from "./Skeleton.generated.js";
+export { SkeletonLayout as Skeleton, SkeletonLayout as default } from "./Skeleton.generated.js";
+export { skeleton } from "./Skeleton.recipe.js";

package/dist/components/slider/Slider.css

@@ -36,7 +36,7 @@
     grid-area: track;
     position: relative;
     height: var(--slider-h);
-    border-radius: 9999px;
+    border-radius: var(--radius-pill, 9999px);
     background-color: var(--slider-track-bg);
     cursor: pointer;
   }
@@ -46,7 +46,7 @@
     left: 0;
     top: 0;
     height: 100%;
-    border-radius: 9999px;
+    border-radius: var(--radius-pill, 9999px);
     pointer-events: none;
     background-color: var(--slider-fill-bg);
   }
@@ -55,16 +55,16 @@
     position: absolute;
     top: 50%;
     z-index: 1;
-    border-radius: 9999px;
+    border-radius: var(--radius-pill, 9999px);
     background-color: var(--slider-thumb-bg);
     cursor: grab;
     width: var(--slider-thumb-w);
     height: var(--slider-thumb-h);
     transform: translate(-50%, -50%);
     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);
+      0 0 5px 0 rgb(var(--shadow-color, 0 0 0) / 2%),
+      0 2px 10px 0 rgb(var(--shadow-color, 0 0 0) / 6%),
+      0 0 1px 0 rgb(var(--shadow-color, 0 0 0) / 30%);
     transition:
       transform 250ms ease,
       box-shadow 150ms ease;
@@ -78,8 +78,8 @@
   .slider__thumb[data-focus-visible="true"] {
     box-shadow:
       0 0 0 3px color-mix(in oklab, var(--color-accent) 22%, transparent),
-      0 0 5px 0 oklch(0% 0 0 / 0.02),
-      0 2px 10px 0 oklch(0% 0 0 / 0.06);
+      0 0 5px 0 rgb(var(--shadow-color, 0 0 0) / 2%),
+      0 2px 10px 0 rgb(var(--shadow-color, 0 0 0) / 6%);
   }
 
   .slider__thumb[data-disabled="true"] {

package/dist/components/slider/Slider.generated.d.ts

@@ -1,7 +1,7 @@
 import type { Component as __LayoutComponent } from "solid-js";
 import "./Slider.css";
 import { type JSX } from "solid-js";
-import type { IComponentBaseProps } from "../types";
+import type { UIBaseProps } from "../vocabulary";
 export type SliderSize = "sm" | "md" | "lg";
 type SliderBaseProps = {
     label?: string;
@@ -15,9 +15,8 @@ type SliderBaseProps = {
     size?: SliderSize;
     dataTheme?: string;
     class?: string;
-    className?: string;
     style?: JSX.CSSProperties;
 };
-export type SliderProps = SliderBaseProps & IComponentBaseProps & Omit<JSX.InputHTMLAttributes<HTMLInputElement>, keyof SliderBaseProps>;
+export type SliderProps = SliderBaseProps & UIBaseProps & Omit<JSX.InputHTMLAttributes<HTMLInputElement>, keyof SliderBaseProps>;
 declare const Slider: __LayoutComponent<SliderProps>;
 export default Slider;