@hilum/ui 3.8.6 → 3.10.0

package/src/components/search-input.tsx

@@ -0,0 +1,98 @@
+"use client";
+
+import * as React from "react";
+import { Search, X } from "lucide-react";
+import { cn } from "../lib/utils";
+import { Input, type InputProps } from "./input";
+import { Spinner } from "./spinner";
+
+interface SearchInputProps extends Omit<InputProps, "type" | "onChange" | "value"> {
+  value: string;
+  /** Called with the new string (not the event) on every keystroke and on clear. */
+  onValueChange: (value: string) => void;
+  /** Show a spinner in place of the clear button (e.g. while results load). */
+  loading?: boolean;
+  /** Accessible name when there is no visible label. Default: placeholder or "Search". */
+  "aria-label"?: string;
+  /** Classes for the wrapper (width, margins). `className` targets the input. */
+  containerClassName?: string;
+}
+
+/**
+ * Search field with a leading magnifier, clear button and Escape-to-clear.
+ * Replaces the hand-built "Input + absolutely positioned Search icon" pattern.
+ */
+const SearchInput = React.forwardRef<HTMLInputElement, SearchInputProps>(
+  (
+    {
+      value,
+      onValueChange,
+      loading = false,
+      placeholder = "Search",
+      className,
+      containerClassName,
+      onKeyDown,
+      "aria-label": ariaLabel,
+      ...props
+    },
+    ref,
+  ) => {
+    const innerRef = React.useRef<HTMLInputElement>(null);
+    React.useImperativeHandle(ref, () => innerRef.current as HTMLInputElement);
+
+    return (
+      <div
+        className={cn("relative w-full min-w-0", containerClassName)}
+        data-slot="search-input"
+      >
+        <Search
+          className="pointer-events-none absolute top-1/2 left-3 size-4 -translate-y-1/2 text-muted-foreground compact:left-2 compact:size-3.5"
+          aria-hidden="true"
+        />
+        <Input
+          ref={innerRef}
+          type="search"
+          role="searchbox"
+          value={value}
+          placeholder={placeholder}
+          aria-label={ariaLabel ?? placeholder}
+          onChange={(event) => onValueChange(event.target.value)}
+          onKeyDown={(event) => {
+            if (event.key === "Escape" && value) {
+              event.preventDefault();
+              onValueChange("");
+            }
+            onKeyDown?.(event);
+          }}
+          className={cn(
+            "pl-9 pr-9 compact:pl-7 compact:pr-7 [&::-webkit-search-cancel-button]:appearance-none",
+            className,
+          )}
+          {...props}
+        />
+        <div className="absolute top-1/2 right-1.5 flex -translate-y-1/2 items-center">
+          {loading ? (
+            <Spinner size="sm" aria-label="Searching" />
+          ) : value ? (
+            <button
+              type="button"
+              aria-label="Clear search"
+              onClick={() => {
+                onValueChange("");
+                innerRef.current?.focus();
+              }}
+              className="flex size-6 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring compact:size-5"
+            >
+              <X className="size-3.5" aria-hidden="true" />
+            </button>
+          ) : null}
+        </div>
+      </div>
+    );
+  },
+);
+
+SearchInput.displayName = "SearchInput";
+
+export { SearchInput };
+export type { SearchInputProps };

package/src/components/searchable-table.tsx

@@ -3,7 +3,7 @@
 import * as React from "react";
 import { ArrowDown, ArrowUp, ChevronsUpDown, Filter, Search } from "lucide-react";
 import { Button } from "./button";
-import { EmptyState } from "./empty-state";
+import { EmptyState, type EmptyStateProps } from "./empty-state";
 import { InputGroup } from "./input-group";
 import {
   Pagination,
@@ -48,16 +48,14 @@ interface SearchableTableProps<T extends { id: string | number }> {
       placeholder: string;
     }
   >;
-  emptyState?: {
-    icon?: React.ReactNode;
-    title: string;
-    description: string;
-    action?: {
-      label: string;
-      href?: string;
-      onClick?: () => void;
-    };
-  };
+  /**
+   * Shown when there are no rows. Give first-run states a primary `action`
+   * ("Add product"); give filtered-empty states a "Clear filters" action.
+   */
+  emptyState?: Pick<
+    EmptyStateProps,
+    "icon" | "title" | "description" | "action" | "secondaryAction"
+  >;
   actions?: (item: T) => React.ReactNode;
   mobileCard?: (item: T) => React.ReactNode;
   tableClassName?: string;
@@ -182,6 +180,7 @@ function SearchableTable<T extends { id: string | number }>({
       {...(className ? { className } : {})}
       {...(emptyState?.icon ? { icon: normalizeEmptyStateIcon(emptyState.icon) } : {})}
       {...(emptyState?.action ? { action: emptyState.action } : {})}
+      {...(emptyState?.secondaryAction ? { secondaryAction: emptyState.secondaryAction } : {})}
     />
   );
 

package/src/components/select.tsx

@@ -6,6 +6,7 @@ import {
   useEffect,
   useState,
   useCallback,
+  useId,
   createContext,
   useContext,
   Children,
@@ -19,6 +20,7 @@ import { motion, AnimatePresence } from "framer-motion";
 import { cva, type VariantProps } from "class-variance-authority";
 import type { IconComponent } from "../lib/icon-context";
 import { cn } from "../lib/utils";
+import { useDensityAttributes } from "../lib/density-context";
 import { spring } from "../lib/springs";
 import { useProximityHover } from "../hooks/use-proximity-hover";
 import { useShape } from "../lib/shape-context";
@@ -37,6 +39,10 @@ interface SelectContextValue {
   setOpen: (open: boolean) => void;
   disabled: boolean;
   triggerRef: React.RefObject<HTMLButtonElement | null>;
+  /** Ref callback that attaches the trigger node to `triggerRef`. */
+  registerTrigger: (node: HTMLButtonElement | null) => void;
+  /** id of the listbox, referenced by the trigger's aria-controls. */
+  listboxId: string;
   labelMap: React.MutableRefObject<Map<string, string>>;
 }
 
@@ -85,6 +91,10 @@ function Select({
   const currentValue = value !== undefined ? value : internalValue;
   const triggerRef = useRef<HTMLButtonElement>(null);
   const labelMap = useRef(new Map<string, string>());
+  const listboxId = useId();
+  const registerTrigger = useCallback((node: HTMLButtonElement | null) => {
+    triggerRef.current = node;
+  }, []);
 
   const onChange = useCallback(
     (v: string) => {
@@ -105,6 +115,8 @@ function Select({
         setOpen,
         disabled,
         triggerRef,
+        registerTrigger,
+        listboxId,
         labelMap,
       }}
     >
@@ -126,12 +138,14 @@ const triggerVariants = cva(
     "text-[13px] h-9 px-3 min-w-[160px]",
     "transition-all duration-80",
     "disabled:opacity-50 disabled:pointer-events-none",
-    "focus-visible:ring-1 focus-visible:ring-[#6B97FF]",
+    "focus-visible:ring-2 focus-visible:ring-ring",
+    "compact:h-6 compact:min-w-0 compact:gap-1 compact:px-2 compact:text-[12px] compact:rounded-[5px]",
   ],
   {
     variants: {
       variant: {
-        bordered: "border border-border bg-transparent text-foreground hover:bg-hover",
+        bordered:
+          "border border-border bg-transparent text-foreground hover:bg-hover hover:border-border-strong",
         borderless: "border border-transparent bg-transparent text-foreground hover:bg-hover",
       },
     },
@@ -183,7 +197,8 @@ const SelectTrigger = forwardRef<HTMLButtonElement, SelectTriggerProps>(
     },
     ref,
   ) => {
-    const { value, open, setOpen, disabled, triggerRef, labelMap } = useSelectContext();
+    const { value, open, setOpen, disabled, registerTrigger, listboxId, labelMap } =
+      useSelectContext();
     const shape = useShape();
     const label = value ? (labelMap.current.get(value) ?? value) : undefined;
 
@@ -191,13 +206,14 @@ const SelectTrigger = forwardRef<HTMLButtonElement, SelectTriggerProps>(
       <div className="flex flex-col gap-1">
         <button
           ref={(node) => {
-            (triggerRef as React.MutableRefObject<HTMLButtonElement | null>).current = node;
+            registerTrigger(node);
             if (typeof ref === "function") ref(node);
             else if (ref) (ref as React.MutableRefObject<HTMLButtonElement | null>).current = node;
           }}
           type="button"
           role="combobox"
           aria-expanded={open}
+          aria-controls={open ? listboxId : undefined}
           aria-haspopup="listbox"
           disabled={disabled}
           onClick={() => setOpen(!open)}
@@ -274,8 +290,9 @@ interface SelectContentProps {
 
 const SelectContent = forwardRef<HTMLDivElement, SelectContentProps>(
   ({ className, children, scrollFade = true }, ref) => {
-    const { open, setOpen, value, triggerRef } = useSelectContext();
+    const { open, setOpen, value, triggerRef, listboxId } = useSelectContext();
     const shape = useShape();
+    const densityAttributes = useDensityAttributes();
     const containerRef = useRef<HTMLDivElement>(null);
     const [triggerRect, setTriggerRect] = useState<DOMRect | null>(null);
 
@@ -311,9 +328,8 @@ const SelectContent = forwardRef<HTMLDivElement, SelectContentProps>(
     useEffect(() => {
       if (!open || !triggerRect) return;
       // Double rAF: first waits for React commit, second for layout
-      let outer: number;
       let inner: number;
-      outer = requestAnimationFrame(() => {
+      const outer = requestAnimationFrame(() => {
         inner = requestAnimationFrame(() => {
           measureItems();
           const container = containerRef.current;
@@ -437,6 +453,7 @@ const SelectContent = forwardRef<HTMLDivElement, SelectContentProps>(
         }
       >
         <div
+          {...densityAttributes}
           style={{
             position: "fixed",
             top: triggerRect.bottom + 6,
@@ -459,6 +476,7 @@ const SelectContent = forwardRef<HTMLDivElement, SelectContentProps>(
                 if (typeof ref === "function") ref(node);
                 else if (ref) (ref as React.MutableRefObject<HTMLDivElement | null>).current = node;
               }}
+              id={listboxId}
               role="listbox"
               data-hilum-mobile-sheet="true"
               tabIndex={-1}
@@ -544,7 +562,7 @@ const SelectContent = forwardRef<HTMLDivElement, SelectContentProps>(
               <AnimatePresence>
                 {focusRect && (
                   <motion.div
-                    className={`absolute ${shape.focusRing} pointer-events-none z-20 border border-[#6B97FF]`}
+                    className={`absolute ${shape.focusRing} pointer-events-none z-20 border-2 border-ring`}
                     initial={false}
                     animate={{
                       left: focusRect.left - 2,
@@ -644,6 +662,7 @@ const SelectItem = forwardRef<HTMLDivElement, SelectItemProps>(
         }}
         className={cn(
           `relative z-10 flex items-center gap-2 ${shape.item} px-2 py-2 text-[13px] cursor-pointer outline-none select-none`,
+          "compact:min-h-7 compact:py-1 compact:rounded-[4px]",
           "transition-[color] duration-80",
           isActive || isChecked ? "text-foreground" : "text-muted-foreground",
           disabled && "opacity-50 pointer-events-none",
@@ -731,7 +750,7 @@ const SelectSeparator = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement
     <div
       ref={ref}
       role="separator"
-      className={cn("my-1 -mx-1 h-px bg-border/60", className)}
+      className={cn("my-1 -mx-1 h-px bg-border", className)}
       {...props}
     />
   ),

package/src/components/sidebar.tsx

@@ -446,7 +446,7 @@ function SidebarGroupAction({
       className={cn(
         "absolute right-2 top-2 flex size-8 items-center justify-center",
         "rounded-md text-muted-foreground hover:bg-muted hover:text-foreground",
-        "outline-none focus-visible:ring-2 focus-visible:ring-brand-primary/30",
+        "outline-none focus-visible:ring-2 focus-visible:ring-ring",
         className,
       )}
       {...props}
@@ -509,7 +509,7 @@ function SidebarMenuButton({
         "outline-none ring-ring",
         "transition-[width,height,padding] duration-150",
         "hover:bg-muted hover:text-foreground",
-        "focus-visible:ring-2 focus-visible:ring-brand-primary/30",
+        "focus-visible:ring-2 focus-visible:ring-ring",
         "active:bg-muted",
         "disabled:pointer-events-none disabled:opacity-50",
         "[&>svg]:size-4 [&>svg]:shrink-0",
@@ -580,7 +580,7 @@ function SidebarMenuAction({
       className={cn(
         "absolute right-1 top-1/2 flex size-8 -translate-y-1/2 items-center justify-center",
         "rounded-md text-muted-foreground hover:bg-muted hover:text-foreground",
-        "outline-none focus-visible:ring-2 focus-visible:ring-brand-primary/30",
+        "outline-none focus-visible:ring-2 focus-visible:ring-ring",
         showOnHover && [
           "opacity-0 transition-opacity",
           "group-hover/menu-item:opacity-100",
@@ -699,7 +699,7 @@ function SidebarMenuSubButton({
         "body text-muted-foreground outline-none",
         "transition-colors duration-150",
         "hover:text-foreground hover:bg-muted",
-        "focus-visible:ring-2 focus-visible:ring-brand-primary/30",
+        "focus-visible:ring-2 focus-visible:ring-ring",
         "disabled:pointer-events-none disabled:opacity-50",
         "[&>svg]:size-3.5 [&>svg]:shrink-0",
         isActive && "text-brand-primary hover:text-brand-primary",

package/src/components/slider.tsx

@@ -24,6 +24,7 @@ import { cn } from "../lib/utils";
 import { spring } from "../lib/springs";
 import { fontWeights } from "../lib/font-weight";
 import { useShape } from "../lib/shape-context";
+import { useDensity } from "../lib/density-context";
 
 // ---------------------------------------------------------------------------
 // Types
@@ -53,19 +54,35 @@ interface SliderProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange" |
   hideFill?: boolean;
   thumbColor?: string;
   thumbBorderColor?: string;
+  /**
+   * Track thickness in px. Default 4 (thin track + filled range). Thick tracks
+   * (≥ 8px, e.g. colour-picker hue / alpha strips) keep the thumb inside the
+   * rounded ends instead of overhanging them.
+   */
+  trackSize?: number;
 }
 
 // ---------------------------------------------------------------------------
 // Constants
 // ---------------------------------------------------------------------------
 
+// THUMB_SIZE is the thumb's layout / hit box; the visible knob is smaller.
 const THUMB_SIZE = 20;
-const THUMB_SIZE_REST = 16;
-const TRACK_BG_HEIGHT = 18;
+const THUMB_SIZE_REST = 14;
+const THUMB_SIZE_REST_COMPACT = 12;
+const THUMB_SIZE_ACTIVE = 16;
+// Thin 4px track (Figma / Linear style) with a filled range.
+const TRACK_BG_HEIGHT = 4;
 const DOT_SIZE = 4;
 const PIP_SIZE = 5;
-// Inset track BG so its rounded-end centers align with thumb centers at min/max
-const TRACK_INSET = (THUMB_SIZE - TRACK_BG_HEIGHT) / 2;
+// Step pips are only drawn when they stay legible; beyond this the track
+// turns into a dotted texture (e.g. 0–100 step 2 = 50 pips).
+const MAX_STEP_DOTS = 10;
+// Inset the track so its ends line up with the thumb centres at min / max.
+const TRACK_INSET = THUMB_SIZE / 2;
+// Vertical padding around the thumb box (hit-area slop) per density.
+const TRACK_PAD = 8;
+const TRACK_PAD_COMPACT = 4;
 
 // ---------------------------------------------------------------------------
 // Helpers
@@ -112,6 +129,7 @@ interface ValueDisplayProps {
   label?: string;
   isRange: boolean;
   isInteracting: boolean;
+  disabled?: boolean;
 }
 
 function ValueDisplay({
@@ -127,6 +145,7 @@ function ValueDisplay({
   label,
   isRange,
   isInteracting,
+  disabled,
 }: ValueDisplayProps) {
   const shape = useShape();
   const [inputValue, setInputValue] = useState("");
@@ -194,9 +213,17 @@ function ValueDisplay({
     }
 
     return (
-      <span className="cursor-text select-none" onClick={() => onStartEdit(index)}>
+      // A real button so the "click to type a value" affordance is also
+      // reachable by keyboard (Tab + Enter/Space), not just by pointer.
+      <button
+        type="button"
+        className="cursor-text select-none rounded-sm outline-none focus-visible:ring-2 focus-visible:ring-ring"
+        aria-label={`Edit slider value${isRange ? (index === 0 ? " (start)" : " (end)") : ""}: ${formatValue(values[index])}`}
+        disabled={disabled}
+        onClick={() => onStartEdit(index)}
+      >
         {formatValue(values[index])}
-      </span>
+      </button>
     );
   };
 
@@ -308,11 +335,16 @@ const Slider = forwardRef<HTMLDivElement, SliderProps>(
       hideFill = false,
       thumbColor,
       thumbBorderColor,
+      trackSize = TRACK_BG_HEIGHT,
       className,
       ...props
     },
     ref,
   ) => {
+    const trackHeight = Math.max(2, Math.min(THUMB_SIZE, trackSize));
+    // Thin tracks run centre-to-centre between the extreme thumb positions;
+    // thick tracks wrap the thumb so its centre sits in the rounded end cap.
+    const trackInset = trackHeight >= 8 ? (THUMB_SIZE - trackHeight) / 2 : TRACK_INSET;
     const [uncontrolledValue, setUncontrolledValue] = useState<SliderValue>(() => {
       const initial = defaultValue ?? [min];
       return initial.length > 1
@@ -338,6 +370,8 @@ const Slider = forwardRef<HTMLDivElement, SliderProps>(
     const isRange = Array.isArray(resolvedValue);
     const values = toRadixValue(resolvedValue);
     const shape = useShape();
+    const compact = useDensity() === "compact";
+    const trackPad = compact ? TRACK_PAD_COMPACT : TRACK_PAD;
 
     // --- Refs ---
     const trackRef = useRef<HTMLDivElement>(null);
@@ -384,9 +418,9 @@ const Slider = forwardRef<HTMLDivElement, SliderProps>(
 
     // --- Derived motion values for fill ---
     const fillLeft = useTransform(motionX0, (x) =>
-      isRange ? x + THUMB_SIZE / 2 - TRACK_INSET : 0,
+      isRange ? x + THUMB_SIZE / 2 - trackInset : 0,
     );
-    const fillWidthSingle = useTransform(motionX0, (x) => x + THUMB_SIZE / 2 - TRACK_INSET);
+    const fillWidthSingle = useTransform(motionX0, (x) => x + THUMB_SIZE / 2 - trackInset);
     const fillWidthRange = useTransform(
       [motionX0, motionX1] as MotionValue<number>[],
       ([x0, x1]) => (x1 as number) - (x0 as number),
@@ -650,16 +684,17 @@ const Slider = forwardRef<HTMLDivElement, SliderProps>(
     }, []);
 
     // --- Step dots ---
+    const stepCount = step > 0 ? Math.round((max - min) / step) : 0;
     const stepDots = useMemo(
       () =>
-        showSteps
+        showSteps && stepCount > 0 && stepCount <= MAX_STEP_DOTS
           ? Array.from({ length: Math.round((max - min) / step) + 1 }, (_, i) => {
               const v = min + i * step;
               const percent = (v - min) / (max - min);
               return { value: v, percent };
             })
           : [],
-      [showSteps, min, max, step],
+      [showSteps, stepCount, min, max, step],
     );
 
     // --- Interaction state for tooltip ---
@@ -680,9 +715,12 @@ const Slider = forwardRef<HTMLDivElement, SliderProps>(
         {...(label !== undefined ? { label } : {})}
         isRange={isRange}
         isInteracting={isInteracting}
+        disabled={disabled}
       />
     );
 
+    const thumbRest = compact ? THUMB_SIZE_REST_COMPACT : THUMB_SIZE_REST;
+
     // --- Render visual thumb (not Radix — purely visual) ---
     const renderVisualThumb = (index: number) => {
       const motionX = index === 0 ? motionX0 : motionX1;
@@ -706,19 +744,19 @@ const Slider = forwardRef<HTMLDivElement, SliderProps>(
             className="block rounded-full"
             initial={false}
             animate={{
-              width: THUMB_SIZE_REST,
-              height: THUMB_SIZE_REST,
+              width: isPressed ? THUMB_SIZE_ACTIVE : thumbRest,
+              height: isPressed ? THUMB_SIZE_ACTIVE : thumbRest,
             }}
             transition={spring.fast}
             style={{
-              backgroundColor: thumbColor ?? "white",
-              boxShadow: "0 1px 2px rgba(0,0,0,0.1)",
-              border: thumbBorderColor ? `1px solid ${thumbBorderColor}` : undefined,
+              backgroundColor: thumbColor ?? "#ffffff",
+              boxShadow: "0 1px 3px rgba(0,0,0,0.22), 0 0 0 0.5px rgba(0,0,0,0.06)",
+              border: `1px solid ${thumbBorderColor ?? "var(--border-strong)"}`,
             }}
           />
           {/* Focus ring */}
           <motion.span
-            className="absolute rounded-full border border-[#6B97FF] pointer-events-none"
+            className="absolute rounded-full border-2 border-ring pointer-events-none"
             initial={false}
             animate={{
               opacity: focusedThumb === index ? 1 : 0,
@@ -737,7 +775,7 @@ const Slider = forwardRef<HTMLDivElement, SliderProps>(
         className={cn(
           "flex flex-col gap-0 w-full select-none touch-none overflow-visible",
           valuePosition === "left" || valuePosition === "right"
-            ? "flex-row items-center gap-2 mb-2"
+            ? "flex-row items-center gap-2 mb-2 compact:mb-0"
             : "flex-col",
           disabled && "opacity-50 pointer-events-none",
           className,
@@ -753,7 +791,7 @@ const Slider = forwardRef<HTMLDivElement, SliderProps>(
           style={{
             height:
               valuePosition === "left" || valuePosition === "right"
-                ? THUMB_SIZE + 16
+                ? THUMB_SIZE + trackPad * 2
                 : THUMB_SIZE + (valuePosition === "tooltip" ? 16 : 0),
             paddingTop: valuePosition === "tooltip" ? 16 : 0,
           }}
@@ -838,8 +876,13 @@ const Slider = forwardRef<HTMLDivElement, SliderProps>(
           {/* Visual track with pointer handlers */}
           <div
             ref={trackRef}
-            className="relative w-full cursor-ew-resize py-2"
-            style={{ height: THUMB_SIZE + 16, opacity: ready ? 1 : 0 }}
+            className="relative w-full cursor-ew-resize"
+            style={{
+              height: THUMB_SIZE + trackPad * 2,
+              paddingTop: trackPad,
+              paddingBottom: trackPad,
+              opacity: ready ? 1 : 0,
+            }}
             onPointerDown={handlePointerDown}
             onPointerMove={handlePointerMove}
             onPointerUp={handlePointerUp}
@@ -883,20 +926,19 @@ const Slider = forwardRef<HTMLDivElement, SliderProps>(
             {/* Track background */}
             <motion.div
               className={cn(
-                "absolute border border-border overflow-hidden rounded-full",
+                "absolute overflow-hidden rounded-full bg-foreground/[0.12]",
                 trackClassName,
               )}
               initial={false}
               animate={{
-                height: TRACK_BG_HEIGHT,
-                top: 8 + (THUMB_SIZE - TRACK_BG_HEIGHT) / 2,
+                height: trackHeight,
+                top: trackPad + (THUMB_SIZE - trackHeight) / 2,
               }}
               transition={spring.fast}
               style={
                 {
-                  left: TRACK_INSET,
-                  right: TRACK_INSET,
-                  backgroundColor: "transparent",
+                  left: trackInset,
+                  right: trackInset,
                   ...trackStyle,
                 } as any
               }
@@ -904,7 +946,7 @@ const Slider = forwardRef<HTMLDivElement, SliderProps>(
               {/* Filled range */}
               {!hideFill && (
                 <motion.div
-                  className={cn("absolute h-full bg-selected/50 dark:bg-accent/40", fillClassName)}
+                  className={cn("absolute h-full rounded-full bg-foreground", fillClassName)}
                   style={
                     {
                       left: fillLeft,
@@ -926,13 +968,13 @@ const Slider = forwardRef<HTMLDivElement, SliderProps>(
                   opacity: { duration: 0.15 },
                 }}
                 style={{
-                  left: hoverPreview ? hoverPreview.left - TRACK_INSET : 0,
+                  left: hoverPreview ? hoverPreview.left - trackInset : 0,
                   width: hoverPreview ? hoverPreview.width : 0,
                   borderRadius:
                     hoverPreview && hoverPreview.cursorX > hoverPreview.left
                       ? "0 9999px 9999px 0"
                       : "9999px 0 0 9999px",
-                  backgroundColor: "color-mix(in srgb, var(--color-accent) 40%, transparent)",
+                  backgroundColor: "color-mix(in srgb, var(--foreground) 22%, transparent)",
                 }}
               />
             </motion.div>
@@ -942,8 +984,8 @@ const Slider = forwardRef<HTMLDivElement, SliderProps>(
               <motion.div
                 className="absolute left-0 right-0 pointer-events-none"
                 style={{
-                  top: 8 + (THUMB_SIZE - TRACK_BG_HEIGHT) / 2,
-                  height: TRACK_BG_HEIGHT,
+                  top: trackPad + (THUMB_SIZE - trackHeight) / 2,
+                  height: trackHeight,
                   WebkitMaskImage: stepDotsMask,
                   maskImage: stepDotsMask,
                 }}
@@ -969,7 +1011,7 @@ const Slider = forwardRef<HTMLDivElement, SliderProps>(
                       transition={spring.moderate}
                       style={{
                         backgroundColor: "var(--muted-foreground)",
-                        opacity: 0.3,
+                        opacity: 0.55,
                       }}
                     />
                   </div>
@@ -1346,7 +1388,7 @@ const SliderComfortable = forwardRef<HTMLDivElement, SliderComfortableProps>(
           )}
           initial={false}
           animate={{
-            outline: isFocused ? "1px solid #6B97FF" : "1px solid transparent",
+            outline: isFocused ? "2px solid var(--ring)" : "1px solid transparent",
           }}
           transition={spring.fast}
           style={style as any}
@@ -1388,12 +1430,12 @@ const SliderComfortable = forwardRef<HTMLDivElement, SliderComfortableProps>(
             style={{
               left: hoverPreview ? hoverPreview.left : 0,
               width: hoverPreview ? hoverPreview.width : 0,
-              backgroundColor: "color-mix(in srgb, var(--color-accent) 40%, transparent)",
+              backgroundColor: "var(--hover)",
             }}
           />
 
-          {/* Pips: dots layer — z-[1] */}
-          {variant === "pips" && (
+          {/* Pips: dots layer — z-[1]. Only drawn while pips stay legible. */}
+          {variant === "pips" && pipCount <= MAX_STEP_DOTS + 1 && (
             <motion.div
               className="absolute inset-0 flex justify-between items-center px-3 pointer-events-none z-[1]"
               style={{ WebkitMaskImage: pipsMaskStyle, maskImage: pipsMaskStyle }}

package/src/components/sonner.tsx

@@ -1,14 +1,27 @@
 "use client";
 
 import * as React from "react";
-import { Toaster as SonnerToaster } from "sonner";
+import { Toaster as SonnerToaster, toast, useSonner } from "sonner";
 
 type ToasterProps = React.ComponentProps<typeof SonnerToaster>;
+type ToastOptions = NonNullable<Parameters<typeof toast>[1]>;
 
-function Toaster({ ...props }: ToasterProps) {
+/**
+ * Toast host. Mount once near the app root; fire toasts with the re-exported
+ * `toast()` API so apps never import `sonner` directly:
+ *
+ *   import { Toaster, toast } from "@hilum/ui";
+ *   toast.success("Product saved");
+ *   toast.promise(save(), { loading: "Saving…", success: "Saved", error: "Could not save" });
+ *
+ * Colours come from Hilum tokens, so the default `theme="system"` only
+ * affects Sonner's built-in icons and close button.
+ */
+function Toaster({ theme = "system", position = "bottom-right", ...props }: ToasterProps) {
   return (
     <SonnerToaster
-      theme="light"
+      theme={theme}
+      position={position}
       className="toaster group"
       toastOptions={{
         classNames: {
@@ -32,4 +45,5 @@ function Toaster({ ...props }: ToasterProps) {
   );
 }
 
-export { Toaster };
+export { Toaster, toast, useSonner };
+export type { ToasterProps, ToastOptions };