@zentauri-ui/zentauri-components 1.4.6 → 1.4.7

package/src/ui/select/types.ts

@@ -40,6 +40,7 @@ export type SelectContextType = {
   registerOption: (option: SelectOption) => void;
   options: SelectOption[];
   multiple: boolean;
+  listboxId: string;
 };
 
 export type SelectProps = {

package/src/ui/select/variants.ts

@@ -1,7 +1,7 @@
 import { cva } from "class-variance-authority";
 
 export const selectTriggerVariants = cva(
-  "flex items-center justify-between rounded-md border transition-all focus:outline-none",
+  "flex items-center justify-between rounded-md border transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-gray-400 focus-visible:ring-offset-2",
   {
     variants: {
       variant: {
@@ -19,23 +19,23 @@ export const selectTriggerVariants = cva(
         emerald: "border-emerald-600 text-emerald-600",
         glass: "border-white/15 bg-white/10 text-white backdrop-blur-md",
         "gradient-blue":
-          "bg-linear-to-r from-blue-600 to-purple-600 bg-gradient-to-r from-blue-950/70 to-purple-950/70 backdrop-blur-xl text-white",
+          "bg-linear-to-r from-blue-600 to-purple-600 backdrop-blur-xl text-white",
         "gradient-green":
-          "bg-linear-to-r from-green-600 to-lime-600 bg-gradient-to-r from-green-950/70 to-lime-950/70 backdrop-blur-xl text-white",
+          "bg-linear-to-r from-green-600 to-lime-600 backdrop-blur-xl text-white",
         "gradient-red":
-          "bg-linear-to-r from-red-600 to-pink-600 bg-gradient-to-r from-red-950/70 to-pink-950/70 backdrop-blur-xl text-white",
+          "bg-linear-to-r from-red-600 to-pink-600 backdrop-blur-xl text-white",
         "gradient-yellow":
-          "bg-linear-to-r from-yellow-600 to-orange-600 bg-gradient-to-r from-yellow-950/70 to-orange-950/70 backdrop-blur-xl text-white",
+          "bg-linear-to-r from-yellow-600 to-orange-600 backdrop-blur-xl text-white",
         "gradient-purple":
-          "bg-linear-to-r from-purple-600 to-pink-600 bg-gradient-to-r from-purple-950/70 to-pink-950/70 backdrop-blur-xl text-white",
+          "bg-linear-to-r from-purple-600 to-pink-600 backdrop-blur-xl text-white",
         "gradient-teal":
-          "bg-linear-to-r from-teal-600 to-cyan-600 bg-gradient-to-r from-teal-950/70 to-cyan-950/70 backdrop-blur-xl text-white",
+          "bg-linear-to-r from-teal-600 to-cyan-600 backdrop-blur-xl text-white",
         "gradient-indigo":
-          "bg-linear-to-r from-indigo-600 to-purple-600 bg-gradient-to-r from-indigo-950/70 to-purple-950/70 backdrop-blur-xl text-white",
+          "bg-linear-to-r from-indigo-600 to-purple-600 backdrop-blur-xl text-white",
         "gradient-pink":
-          "bg-linear-to-r from-pink-600 to-rose-600 bg-gradient-to-r from-pink-950/70 to-rose-950/70 backdrop-blur-xl text-white",
+          "bg-linear-to-r from-pink-600 to-rose-600 backdrop-blur-xl text-white",
         "gradient-orange":
-          "bg-linear-to-r from-orange-600 to-red-600 bg-gradient-to-r from-orange-950/70 to-red-950/70 backdrop-blur-xl text-white",
+          "bg-linear-to-r from-orange-600 to-red-600 backdrop-blur-xl text-white",
       },
       size: {
         sm: "px-2 py-1 text-sm",
@@ -50,58 +50,61 @@ export const selectTriggerVariants = cva(
   },
 );
 
-export const selectItemVariants = cva("cursor-pointer px-3 py-2 rounded-md", {
-  variants: {
-    appearance: {
-      default:
-        "bg-white text-gray-900 data-[selected=true]:bg-gray-200 data-[selected=true]:text-gray-900",
-      glass:
-        "bg-white/10 text-gray-100 data-[selected=true]:bg-white/10 data-[selected=true]:text-gray-100",
-      outline:
-        "border-2 border-gray-500 text-gray-900 data-[selected=true]:border-2 data-[selected=true]:border-gray-500 data-[selected=true]:bg-gray-200 data-[selected=true]:text-gray-900",
-      ghost:
-        "border-transparent text-gray-900 data-[selected=true]:border-transparent data-[selected=true]:bg-transparent data-[selected=true]:text-gray-900",
-      sky: "border-sky-600 text-sky-800 data-[selected=true]:border-sky-600 data-[selected=true]:bg-sky-200 data-[selected=true]:text-sky-800",
-      rose: "border-rose-600 text-rose-800 data-[selected=true]:border-rose-600 data-[selected=true]:bg-rose-200 data-[selected=true]:text-rose-800",
-      purple:
-        "border-purple-600 text-purple-800 data-[selected=true]:border-purple-600 data-[selected=true]:bg-purple-200 data-[selected=true]:text-purple-800",
-      pink: "border-pink-600 text-pink-800 data-[selected=true]:border-pink-600 data-[selected=true]:bg-pink-200 data-[selected=true]:text-pink-800",
-      orange:
-        "border-orange-600 text-orange-800 data-[selected=true]:border-orange-600 data-[selected=true]:bg-orange-200 data-[selected=true]:text-orange-800",
-      yellow:
-        "border-yellow-600 text-yellow-800 data-[selected=true]:border-yellow-600 data-[selected=true]:bg-yellow-200 data-[selected=true]:text-yellow-800",
-      teal: "border-teal-600 text-teal-800 data-[selected=true]:border-teal-600 data-[selected=true]:bg-teal-200 data-[selected=true]:text-teal-800",
-      indigo:
-        "border-indigo-600 text-indigo-800 data-[selected=true]:border-indigo-600 data-[selected=true]:bg-indigo-200 data-[selected=true]:text-indigo-800",
-      emerald:
-        "border-emerald-600 text-emerald-800 data-[selected=true]:border-emerald-600 data-[selected=true]:bg-emerald-200 data-[selected=true]:text-emerald-800",
-      "gradient-blue":
-        "bg-gradient-to-r from-blue-600 to-purple-600 bg-gradient-to-r from-blue-950/70 to-purple-950/70 backdrop-blur-xl text-blue-50 data-[selected=true]:bg-gradient-to-r from-blue-600 to-purple-600 bg-gradient-to-r from-blue-950/70 to-purple-950/70 backdrop-blur-xl data-[selected=true]:text-blue-100",
-      "gradient-green":
-        "bg-gradient-to-r from-green-600 to-lime-600 bg-gradient-to-r from-green-950/70 to-lime-950/70 backdrop-blur-xl text-green-50 data-[selected=true]:bg-gradient-to-r from-green-600 to-lime-600 bg-gradient-to-r from-green-950/70 to-lime-950/70 backdrop-blur-xl data-[selected=true]:text-green-100",
-      "gradient-red":
-        "bg-gradient-to-r from-red-600 to-pink-600 bg-gradient-to-r from-red-950/70 to-pink-950/70 backdrop-blur-xl text-red-50 data-[selected=true]:bg-gradient-to-r from-red-600 to-pink-600 bg-gradient-to-r from-red-950/70 to-pink-950/70 backdrop-blur-xl data-[selected=true]:text-red-100",
-      "gradient-yellow":
-        "bg-gradient-to-r from-yellow-600 to-orange-600 bg-gradient-to-r from-yellow-950/70 to-orange-950/70 backdrop-blur-xl text-yellow-50 data-[selected=true]:bg-gradient-to-r from-yellow-600 to-orange-600 bg-gradient-to-r from-yellow-950/70 to-orange-950/70 backdrop-blur-xl data-[selected=true]:text-yellow-100",
-      "gradient-purple":
-        "bg-gradient-to-r from-purple-600 to-pink-600 bg-gradient-to-r from-purple-950/70 to-pink-950/70 backdrop-blur-xl text-purple-50 data-[selected=true]:bg-gradient-to-r from-purple-600 to-pink-600 bg-gradient-to-r from-purple-950/70 to-pink-950/70 backdrop-blur-xl data-[selected=true]:text-purple-100",
-      "gradient-teal":
-        "bg-gradient-to-r from-teal-600 to-cyan-600 bg-gradient-to-r from-teal-950/70 to-cyan-950/70 backdrop-blur-xl text-teal-50 data-[selected=true]:bg-gradient-to-r from-teal-600 to-cyan-600 bg-gradient-to-r from-teal-950/70 to-cyan-950/70 backdrop-blur-xl data-[selected=true]:text-teal-100",
-      "gradient-indigo":
-        "bg-gradient-to-r from-indigo-600 to-purple-600 bg-gradient-to-r from-indigo-950/70 to-purple-950/70 backdrop-blur-xl text-indigo-50 data-[selected=true]:bg-gradient-to-r from-indigo-600 to-purple-600 bg-gradient-to-r from-indigo-950/70 to-purple-950/70 backdrop-blur-xl data-[selected=true]:text-indigo-100",
-      "gradient-pink":
-        "bg-gradient-to-r from-pink-600 to-rose-600 bg-gradient-to-r from-pink-950/70 to-rose-950/70 backdrop-blur-xl text-pink-50 data-[selected=true]:bg-gradient-to-r from-pink-600 to-rose-600 bg-gradient-to-r from-pink-950/70 to-rose-950/70 backdrop-blur-xl data-[selected=true]:text-pink-100",
-      "gradient-orange":
-        "bg-gradient-to-r from-orange-600 to-red-600 bg-gradient-to-r from-orange-950/70 to-red-950/70 backdrop-blur-xl text-orange-50 data-[selected=true]:bg-gradient-to-r from-orange-600 to-red-600 bg-gradient-to-r from-orange-950/70 to-red-950/70 backdrop-blur-xl data-[selected=true]:text-orange-100",
+export const selectItemVariants = cva(
+  "cursor-pointer px-3 py-2 rounded-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-gray-400 focus-visible:ring-inset",
+  {
+    variants: {
+      appearance: {
+        default:
+          "bg-white text-gray-900 data-[selected=true]:bg-gray-200 data-[selected=true]:text-gray-900",
+        glass:
+          "bg-white/10 text-gray-100 data-[selected=true]:bg-white/10 data-[selected=true]:text-gray-100",
+        outline:
+          "border-2 border-gray-500 text-gray-900 data-[selected=true]:border-2 data-[selected=true]:border-gray-500 data-[selected=true]:bg-gray-200 data-[selected=true]:text-gray-900",
+        ghost:
+          "border-transparent text-gray-900 data-[selected=true]:border-transparent data-[selected=true]:bg-transparent data-[selected=true]:text-gray-900",
+        sky: "border-sky-600 text-sky-800 data-[selected=true]:border-sky-600 data-[selected=true]:bg-sky-200 data-[selected=true]:text-sky-800",
+        rose: "border-rose-600 text-rose-800 data-[selected=true]:border-rose-600 data-[selected=true]:bg-rose-200 data-[selected=true]:text-rose-800",
+        purple:
+          "border-purple-600 text-purple-800 data-[selected=true]:border-purple-600 data-[selected=true]:bg-purple-200 data-[selected=true]:text-purple-800",
+        pink: "border-pink-600 text-pink-800 data-[selected=true]:border-pink-600 data-[selected=true]:bg-pink-200 data-[selected=true]:text-pink-800",
+        orange:
+          "border-orange-600 text-orange-800 data-[selected=true]:border-orange-600 data-[selected=true]:bg-orange-200 data-[selected=true]:text-orange-800",
+        yellow:
+          "border-yellow-600 text-yellow-800 data-[selected=true]:border-yellow-600 data-[selected=true]:bg-yellow-200 data-[selected=true]:text-yellow-800",
+        teal: "border-teal-600 text-teal-800 data-[selected=true]:border-teal-600 data-[selected=true]:bg-teal-200 data-[selected=true]:text-teal-800",
+        indigo:
+          "border-indigo-600 text-indigo-800 data-[selected=true]:border-indigo-600 data-[selected=true]:bg-indigo-200 data-[selected=true]:text-indigo-800",
+        emerald:
+          "border-emerald-600 text-emerald-800 data-[selected=true]:border-emerald-600 data-[selected=true]:bg-emerald-200 data-[selected=true]:text-emerald-800",
+        "gradient-blue":
+          "bg-linear-to-r from-blue-950/70 to-purple-950/70 backdrop-blur-xl text-blue-50 data-[selected=true]:bg-linear-to-r data-[selected=true]:from-blue-600 data-[selected=true]:to-purple-600 data-[selected=true]:text-blue-100",
+        "gradient-green":
+          "bg-linear-to-r from-green-950/70 to-lime-950/70 backdrop-blur-xl text-green-50 data-[selected=true]:bg-linear-to-r data-[selected=true]:from-green-600 data-[selected=true]:to-lime-600 data-[selected=true]:text-green-100",
+        "gradient-red":
+          "bg-linear-to-r from-red-950/70 to-pink-950/70 backdrop-blur-xl text-red-50 data-[selected=true]:bg-linear-to-r data-[selected=true]:from-red-600 data-[selected=true]:to-pink-600 data-[selected=true]:text-red-100",
+        "gradient-yellow":
+          "bg-linear-to-r from-yellow-950/70 to-orange-950/70 backdrop-blur-xl text-yellow-50 data-[selected=true]:bg-linear-to-r data-[selected=true]:from-yellow-600 data-[selected=true]:to-orange-600 data-[selected=true]:text-yellow-100",
+        "gradient-purple":
+          "bg-linear-to-r from-purple-950/70 to-pink-950/70 backdrop-blur-xl text-purple-50 data-[selected=true]:bg-linear-to-r data-[selected=true]:from-purple-600 data-[selected=true]:to-pink-600 data-[selected=true]:text-purple-100",
+        "gradient-teal":
+          "bg-linear-to-r from-teal-950/70 to-cyan-950/70 backdrop-blur-xl text-teal-50 data-[selected=true]:bg-linear-to-r data-[selected=true]:from-teal-600 data-[selected=true]:to-cyan-600 data-[selected=true]:text-teal-100",
+        "gradient-indigo":
+          "bg-linear-to-r from-indigo-950/70 to-purple-950/70 backdrop-blur-xl text-indigo-50 data-[selected=true]:bg-linear-to-r data-[selected=true]:from-indigo-600 data-[selected=true]:to-purple-600 data-[selected=true]:text-indigo-100",
+        "gradient-pink":
+          "bg-linear-to-r from-pink-950/70 to-rose-950/70 backdrop-blur-xl text-pink-50 data-[selected=true]:bg-linear-to-r data-[selected=true]:from-pink-600 data-[selected=true]:to-rose-600 data-[selected=true]:text-pink-100",
+        "gradient-orange":
+          "bg-linear-to-r from-orange-950/70 to-red-950/70 backdrop-blur-xl text-orange-50 data-[selected=true]:bg-linear-to-r data-[selected=true]:from-orange-600 data-[selected=true]:to-red-600 data-[selected=true]:text-orange-100",
+      },
+      disabled: {
+        true: "opacity-50 cursor-not-allowed",
+      },
     },
-    disabled: {
-      true: "opacity-50 cursor-not-allowed",
+    defaultVariants: {
+      appearance: "default",
     },
   },
-  defaultVariants: {
-    appearance: "default",
-  },
-});
+);
 
 export const selectContentVariants = cva(
   "absolute z-10 mt-2 w-full rounded-md border bg-white shadow-md",
@@ -122,23 +125,23 @@ export const selectContentVariants = cva(
         indigo: "border-indigo-600",
         emerald: "border-emerald-600",
         "gradient-blue":
-          "bg-gradient-to-r from-blue-600 to-purple-600 bg-gradient-to-r from-blue-950/70 to-purple-950/70 backdrop-blur-xl",
+          "bg-linear-to-r from-blue-600 to-purple-600 backdrop-blur-xl",
         "gradient-green":
-          "bg-gradient-to-r from-green-600 to-lime-600 bg-gradient-to-r from-green-950/70 to-lime-950/70 backdrop-blur-xl",
+          "bg-linear-to-r from-green-600 to-lime-600 backdrop-blur-xl",
         "gradient-red":
-          "bg-gradient-to-r from-red-600 to-pink-600 bg-gradient-to-r from-red-950/70 to-pink-950/70 backdrop-blur-xl",
+          "bg-linear-to-r from-red-600 to-pink-600 backdrop-blur-xl",
         "gradient-yellow":
-          "bg-gradient-to-r from-yellow-600 to-orange-600 bg-gradient-to-r from-yellow-950/70 to-orange-950/70 backdrop-blur-xl",
+          "bg-linear-to-r from-yellow-600 to-orange-600 backdrop-blur-xl",
         "gradient-purple":
-          "bg-gradient-to-r from-purple-600 to-pink-600 bg-gradient-to-r from-purple-950/70 to-pink-950/70 backdrop-blur-xl",
+          "bg-linear-to-r from-purple-600 to-pink-600 backdrop-blur-xl",
         "gradient-teal":
-          "bg-gradient-to-r from-teal-600 to-cyan-600 bg-gradient-to-r from-teal-950/70 to-cyan-950/70 backdrop-blur-xl",
+          "bg-linear-to-r from-teal-600 to-cyan-600 backdrop-blur-xl",
         "gradient-indigo":
-          "bg-gradient-to-r from-indigo-600 to-purple-600 bg-gradient-to-r from-indigo-950/70 to-purple-950/70 backdrop-blur-xl",
+          "bg-linear-to-r from-indigo-600 to-purple-600 backdrop-blur-xl",
         "gradient-pink":
-          "bg-gradient-to-r from-pink-600 to-rose-600 bg-gradient-to-r from-pink-950/70 to-rose-950/70 backdrop-blur-xl",
+          "bg-linear-to-r from-pink-600 to-rose-600 backdrop-blur-xl",
         "gradient-orange":
-          "bg-gradient-to-r from-orange-600 to-red-600 bg-gradient-to-r from-orange-950/70 to-red-950/70 backdrop-blur-xl",
+          "bg-linear-to-r from-orange-600 to-red-600 backdrop-blur-xl",
       },
       size: {
         sm: "px-2 py-1 text-sm",

package/src/ui/skeleton/animated/skeleton-animated.tsx

@@ -35,7 +35,14 @@ export function SkeletonTextAnimated(props: SkeletonTextAnimatedProps) {
   const effectiveAnimation = useSkeletonAnimation(animation);
   const motionProps = skeletonAnimationPresets[effectiveAnimation];
 
-  return <SkeletonTextBase {...props} as={motion.div} initial={false} {...motionProps} />;
+  return (
+    <SkeletonTextBase
+      {...props}
+      as={motion.div}
+      initial={false}
+      {...motionProps}
+    />
+  );
 }
 
 SkeletonTextAnimated.displayName = "SkeletonText";
@@ -44,7 +51,14 @@ export function SkeletonAvatarAnimated(props: SkeletonAvatarAnimatedProps) {
   const { animation = "shimmer" } = props;
   const effectiveAnimation = useSkeletonAnimation(animation);
   const motionProps = skeletonAnimationPresets[effectiveAnimation];
-  return <SkeletonAvatarBase {...props} as={motion.div} initial={false} {...motionProps} />;
+  return (
+    <SkeletonAvatarBase
+      {...props}
+      as={motion.div}
+      initial={false}
+      {...motionProps}
+    />
+  );
 }
 
 SkeletonAvatarAnimated.displayName = "SkeletonAvatar";
@@ -113,7 +127,14 @@ export function SkeletonButtonAnimated(props: SkeletonButtonAnimatedProps) {
   const { animation = "shimmer" } = props;
   const effectiveAnimation = useSkeletonAnimation(animation);
   const motionProps = skeletonAnimationPresets[effectiveAnimation];
-  return <SkeletonButtonBase {...props} as={motion.div} initial={false} {...motionProps} />;
+  return (
+    <SkeletonButtonBase
+      {...props}
+      as={motion.div}
+      initial={false}
+      {...motionProps}
+    />
+  );
 }
 
-SkeletonButtonAnimated.displayName = "SkeletonButton";
+SkeletonButtonAnimated.displayName = "SkeletonButton";

package/src/ui/skeleton/animated/types.ts

@@ -17,7 +17,6 @@ export type SkeletonAnimationPresets = Record<
   SkeletonPresetMotionProps
 >;
 
-
 export type SkeletonAnimatedProps = SkeletonVariantProps &
   Omit<HTMLMotionProps<"div">, "children"> & {
     animation?: SkeletonAnimation;

package/src/ui/skeleton/skeleton-base.tsx

@@ -43,7 +43,7 @@ export function SkeletonBase(props: SkeletonProps) {
     busy,
     children,
     ref,
-    as:Wrapper = "div",
+    as: Wrapper = "div",
     ...rest
   } = props;
   const ctx = useMemo(() => animation, [animation]);
@@ -87,7 +87,7 @@ export function SkeletonTextBase(props: SkeletonTextProps) {
     shimmerTone,
     busy,
     ref,
-    as:Wrapper = "div",
+    as: Wrapper = "div",
   } = props;
   const effectiveAnimation = useSkeletonAnimation(animation);
   const motionClass = skeletonMotionClass(effectiveAnimation);
@@ -146,7 +146,7 @@ export function SkeletonAvatarBase(props: SkeletonAvatarProps) {
     shimmerTone,
     busy,
     ref,
-    as:Wrapper = "div",
+    as: Wrapper = "div",
     ...rest
   } = props;
   const effectiveAnimation = useSkeletonAnimation(animation ?? "shimmer");

package/src/ui/skeleton/variants.ts

@@ -52,15 +52,15 @@ export const skeletonVariants = cva(
         gray: "bg-gray-500/10",
         amber: "bg-amber-500/10",
         violet: "bg-violet-500/10",
-        "gradient-blue": "bg-gradient-to-r from-blue-600 to-purple-600",
-        "gradient-green": "bg-gradient-to-r from-green-600 to-lime-600",
-        "gradient-red": "bg-gradient-to-r from-red-600 to-pink-600",
-        "gradient-yellow": "bg-gradient-to-r from-yellow-600 to-orange-600",
-        "gradient-purple": "bg-gradient-to-r from-purple-600 to-pink-600",
-        "gradient-teal": "bg-gradient-to-r from-teal-600 to-cyan-600",
-        "gradient-indigo": "bg-gradient-to-r from-indigo-600 to-purple-600",
-        "gradient-pink": "bg-gradient-to-r from-pink-600 to-rose-600",
-        "gradient-orange": "bg-gradient-to-r from-orange-600 to-red-600",
+        "gradient-blue": "bg-linear-to-r from-blue-600 to-purple-600",
+        "gradient-green": "bg-linear-to-r from-green-600 to-lime-600",
+        "gradient-red": "bg-linear-to-r from-red-600 to-pink-600",
+        "gradient-yellow": "bg-linear-to-r from-yellow-600 to-orange-600",
+        "gradient-purple": "bg-linear-to-r from-purple-600 to-pink-600",
+        "gradient-teal": "bg-linear-to-r from-teal-600 to-cyan-600",
+        "gradient-indigo": "bg-linear-to-r from-indigo-600 to-purple-600",
+        "gradient-pink": "bg-linear-to-r from-pink-600 to-rose-600",
+        "gradient-orange": "bg-linear-to-r from-orange-600 to-red-600",
       },
       size: {
         sm: "min-h-3",

package/src/ui/slider/slider.test.tsx

@@ -41,7 +41,9 @@ describe("Slider", () => {
         </SliderTrack>
       </Slider>,
     );
-    expect(screen.getByRole("slider")).toHaveAttribute("aria-valuenow", "25");
+    const thumb = screen.getByRole("slider");
+    expect(thumb).toHaveAttribute("aria-valuenow", "25");
+    expect(thumb).toHaveAttribute("aria-label", "Level");
   });
 
   it("should adjust value with keyboard", async () => {
@@ -76,19 +78,31 @@ describe("Slider", () => {
 
 describe("RangeSlider", () => {
   it("should stamp data-slot on range slider", () => {
-    render(
-      <RangeSlider
-        aria-label="Budget"
-        defaultValue={[20, 80]}
-      />,
-    );
+    render(<RangeSlider aria-label="Budget" defaultValue={[20, 80]} />);
     expect(document.querySelector('[data-slot="range-slider"]')).toBeTruthy();
   });
 
   it("should render two slider thumbs", () => {
+    render(<RangeSlider defaultValue={[10, 90]} aria-label="Range" />);
+    expect(screen.getAllByRole("slider")).toHaveLength(2);
+  });
+
+  it("should give each thumb an accessible name when aria-label is set", () => {
+    render(<RangeSlider defaultValue={[10, 90]} aria-label="Budget" />);
+    const thumbs = screen.getAllByRole("slider");
+    expect(thumbs[0]).toHaveAttribute("aria-label", "Budget, minimum");
+    expect(thumbs[1]).toHaveAttribute("aria-label", "Budget, maximum");
+  });
+
+  it("should mirror aria-labelledby onto thumbs when aria-label is omitted", () => {
     render(
-      <RangeSlider defaultValue={[10, 90]} aria-label="Range" />,
+      <>
+        <span id="range-lbl">Volume band</span>
+        <RangeSlider defaultValue={[10, 90]} aria-labelledby="range-lbl" />
+      </>,
     );
-    expect(screen.getAllByRole("slider")).toHaveLength(2);
+    const thumbs = screen.getAllByRole("slider");
+    expect(thumbs[0]).toHaveAttribute("aria-labelledby", "range-lbl");
+    expect(thumbs[1]).toHaveAttribute("aria-labelledby", "range-lbl");
   });
 });

package/src/ui/slider/slider.tsx

@@ -208,8 +208,21 @@ export function Slider({
       size: size ?? "md",
       appearance: appearance ?? "default",
       trackRef,
+      "aria-label": ariaLabel,
+      "aria-labelledby": ariaLabelledBy,
     }),
-    [appearance, disabled, max, min, setValue, size, step, value],
+    [
+      appearance,
+      ariaLabel,
+      ariaLabelledBy,
+      disabled,
+      max,
+      min,
+      setValue,
+      size,
+      step,
+      value,
+    ],
   );
 
   return (
@@ -303,8 +316,18 @@ export function SliderThumb({
   ref: refProp,
   ...rest
 }: SliderThumbProps & { ref?: Ref<HTMLDivElement> }) {
-  const { min, max, value, step, setValue, disabled, size, trackRef } =
-    useSliderContext("SliderThumb");
+  const {
+    min,
+    max,
+    value,
+    step,
+    setValue,
+    disabled,
+    size,
+    trackRef,
+    "aria-label": sliderAriaLabel,
+    "aria-labelledby": sliderAriaLabelledBy,
+  } = useSliderContext("SliderThumb");
   /** Horizontal thumb position; same mapping as `SliderRange` width uses. */
   const pct = max === min ? 0 : ((value - min) / (max - min)) * 100;
 
@@ -414,6 +437,8 @@ export function SliderThumb({
       role="slider"
       tabIndex={disabled ? -1 : 0}
       data-slot="slider-thumb"
+      aria-label={sliderAriaLabel}
+      aria-labelledby={sliderAriaLabelledBy}
       aria-valuemin={min}
       aria-valuemax={max}
       aria-valuenow={value}
@@ -561,6 +586,13 @@ export function RangeSlider({
 
   const resolvedSize = size ?? "md";
 
+  const lowThumbAriaLabel =
+    ariaLabel !== undefined ? `${ariaLabel}, minimum` : undefined;
+  const highThumbAriaLabel =
+    ariaLabel !== undefined ? `${ariaLabel}, maximum` : undefined;
+  const thumbAriaLabelledBy =
+    ariaLabel === undefined ? ariaLabelledBy : undefined;
+
   return (
     <div
       ref={ref}
@@ -568,7 +600,6 @@ export function RangeSlider({
       role="group"
       aria-label={ariaLabel}
       aria-labelledby={ariaLabelledBy}
-      aria-valuetext={`${lo} – ${hi}`}
       className={cn(sliderRootVariants({ size: resolvedSize }), className)}
       {...rest}
     >
@@ -596,6 +627,8 @@ export function RangeSlider({
           trackRef={trackRef}
           onMoveClientX={(x) => moveThumb(0, x)}
           onNudge={(delta) => setPair([lo + delta, hi])}
+          aria-label={lowThumbAriaLabel}
+          aria-labelledby={thumbAriaLabelledBy}
         />
         <RangeThumb
           disabled={disabled}
@@ -608,6 +641,8 @@ export function RangeSlider({
           trackRef={trackRef}
           onMoveClientX={(x) => moveThumb(1, x)}
           onNudge={(delta) => setPair([lo, hi + delta])}
+          aria-label={highThumbAriaLabel}
+          aria-labelledby={thumbAriaLabelledBy}
         />
       </div>
     </div>
@@ -629,6 +664,8 @@ type RangeThumbProps = {
   onMoveClientX: (clientX: number) => void;
   /** Relative keyboard adjustment in value units; parent merges into the pair. */
   onNudge: (delta: number) => void;
+  "aria-label"?: string;
+  "aria-labelledby"?: string;
 };
 
 /** Private thumb implementation shared by the low and high endpoints. */
@@ -643,6 +680,8 @@ function RangeThumb({
   trackRef,
   onMoveClientX,
   onNudge,
+  "aria-label": thumbAriaLabel,
+  "aria-labelledby": thumbAriaLabelledBy,
 }: RangeThumbProps) {
   const onPointerDown = useCallback(
     (event: ReactPointerEvent<HTMLDivElement>) => {
@@ -712,6 +751,8 @@ function RangeThumb({
       role="slider"
       tabIndex={disabled ? -1 : 0}
       data-slot="range-slider-thumb"
+      aria-label={thumbAriaLabel}
+      aria-labelledby={thumbAriaLabelledBy}
       aria-valuemin={min}
       aria-valuemax={max}
       aria-valuenow={value}

package/src/ui/slider/types.ts

@@ -20,9 +20,9 @@ export type SliderProps = SliderRootVariantProps & {
   onValueChange?: (value: number) => void;
   disabled?: boolean;
   appearance?: VariantProps<typeof sliderRangeVariants>["appearance"];
-  /** Label for the slider group (accessibility). */
+  /** Accessible name for the slider (applied to the focusable thumb). */
   "aria-label"?: string;
-  /** Optional visible label id */
+  /** Visible label element id (`aria-labelledby` on the focusable thumb). */
   "aria-labelledby"?: string;
   children?: ReactNode;
 } & Omit<ComponentPropsWithoutRef<"div">, "children" | "defaultValue">;
@@ -45,7 +45,9 @@ export type RangeSliderProps = SliderRootVariantProps & {
   onValueChange?: (value: [number, number]) => void;
   disabled?: boolean;
   appearance?: VariantProps<typeof sliderRangeVariants>["appearance"];
+  /** Accessible name for the range control (each thumb gets a distinct suffix). */
   "aria-label"?: string;
+  /** Visible label element id for each thumb when `aria-label` is not used. */
   "aria-labelledby"?: string;
 } & Omit<ComponentPropsWithoutRef<"div">, "children" | "defaultValue">;
 
@@ -63,4 +65,8 @@ export type SliderCtx = {
   size: NonNullable<SliderProps["size"]>;
   appearance: SliderAppearance;
   trackRef: RefObject<HTMLDivElement | null>;
-};
+  /** Mirrored from `<Slider>` so the focusable thumb exposes an accessible name. */
+  "aria-label"?: string;
+  /** Mirrored from `<Slider>` so the focusable thumb exposes an accessible name. */
+  "aria-labelledby"?: string;
+};

package/src/ui/slider/variants.ts

@@ -30,7 +30,7 @@ export const sliderTrackVariants = cva(
 );
 
 export const sliderRangeVariants = cva(
-  "absolute h-full rounded-full bg-gradient-to-r from-violet-500 to-indigo-400",
+  "absolute h-full rounded-full bg-linear-to-r from-violet-500 to-indigo-400",
   {
     variants: {
       appearance: {

package/src/ui/spinner/animated/spinner.tsx

@@ -33,6 +33,7 @@ export function Spinner(props: SpinnerProps) {
         initial={false}
         {...rest}
       >
+        <span className="sr-only">{ariaLabel}</span>
         <motion.span
           className="block size-full rounded-full border-2 border-current border-t-transparent"
           animate={{ rotate: 360 }}
@@ -62,6 +63,7 @@ export function Spinner(props: SpinnerProps) {
         initial={false}
         {...rest}
       >
+        <span className="sr-only">{ariaLabel}</span>
         {[0, 1, 2].map((index) => (
           <motion.span
             key={index}
@@ -91,6 +93,7 @@ export function Spinner(props: SpinnerProps) {
         initial={false}
         {...rest}
       >
+        <span className="sr-only">{ariaLabel}</span>
         <motion.span
           className="block size-full rounded-full bg-current"
           animate={{ scale: [0.75, 1, 0.75], opacity: [0.45, 1, 0.45] }}
@@ -109,9 +112,8 @@ export function Spinner(props: SpinnerProps) {
     xl: "w-2",
   };
 
-  const barWidth =
-    barWidths[size as keyof typeof barWidths];
-    
+  const barWidth = barWidths[size as keyof typeof barWidths];
+
   return (
     <motion.span
       ref={ref}
@@ -122,6 +124,7 @@ export function Spinner(props: SpinnerProps) {
       initial={false}
       {...rest}
     >
+      <span className="sr-only">{ariaLabel}</span>
       {[0, 1, 2, 3].map((index) => (
         <motion.span
           key={index}

package/src/ui/stepper/stepper.test.tsx

@@ -19,7 +19,7 @@ describe("Stepper", () => {
     expect(StepperDescription.displayName).toBe("StepperDescription");
   });
 
-  it("should stamp data-slot on stepper root and use list semantics", () => {
+  it("should stamp data-slot on stepper root and use ordered list markup", () => {
     render(
       <Stepper>
         <StepperItem>
@@ -30,10 +30,9 @@ describe("Stepper", () => {
     );
     const root = document.querySelector('[data-slot="stepper"]');
     expect(root).toBeTruthy();
-    expect(root).toHaveAttribute("role", "list");
-    expect(document.querySelector('[data-slot="stepper-item"]')).toHaveAttribute(
-      "role",
-      "listitem",
+    expect(root?.tagName).toBe("OL");
+    expect(document.querySelector('[data-slot="stepper-item"]')?.tagName).toBe(
+      "LI",
     );
   });
 
@@ -153,7 +152,7 @@ describe("Stepper", () => {
   });
 
   it("should forward ref on Stepper", () => {
-    const ref = createRef<HTMLDivElement>();
+    const ref = createRef<HTMLOListElement>();
     render(
       <Stepper ref={ref}>
         <StepperItem>