@brijbyte/agentic-ui 0.0.1-beta → 0.0.2

package/src/select/parts.tsx

@@ -0,0 +1,171 @@
+/**
+ * Styled primitives for Select.
+ *
+ * @example
+ * ```tsx
+ * import { Select } from '@base-ui/react/select';
+ * import {
+ *   SelectTrigger, SelectValue, SelectPositioner,
+ *   SelectPopup, SelectList, SelectItem, SelectItemText,
+ *   SelectItemIndicator, SelectGroupLabel, SelectSeparator,
+ * } from '@brijbyte/agentic-ui/select';
+ *
+ * <Select.Root>
+ *   <SelectTrigger>
+ *     <SelectValue placeholder="Pick one…" />
+ *   </SelectTrigger>
+ *   <Select.Portal>
+ *     <SelectPositioner>
+ *       <SelectPopup>
+ *         <SelectList>
+ *           <SelectItem value="a">
+ *             <SelectItemText>Option A</SelectItemText>
+ *             <SelectItemIndicator />
+ *           </SelectItem>
+ *         </SelectList>
+ *       </SelectPopup>
+ *     </SelectPositioner>
+ *   </Select.Portal>
+ * </Select.Root>
+ * ```
+ */
+import { forwardRef } from "react";
+import type { ComponentRef, ComponentPropsWithoutRef, ReactNode } from "react";
+import { Select as BaseSelect } from "@base-ui/react/select";
+import styles from "./select.module.css";
+
+type BaseTriggerProps = ComponentPropsWithoutRef<typeof BaseSelect.Trigger>;
+type BaseValueProps = ComponentPropsWithoutRef<typeof BaseSelect.Value>;
+type BasePositionerProps = ComponentPropsWithoutRef<typeof BaseSelect.Positioner>;
+type BasePopupProps = ComponentPropsWithoutRef<typeof BaseSelect.Popup>;
+type BaseListProps = ComponentPropsWithoutRef<typeof BaseSelect.List>;
+type BaseItemProps = ComponentPropsWithoutRef<typeof BaseSelect.Item>;
+type BaseItemTextProps = ComponentPropsWithoutRef<typeof BaseSelect.ItemText>;
+type BaseItemIndicatorProps = ComponentPropsWithoutRef<typeof BaseSelect.ItemIndicator>;
+type BaseGroupProps = ComponentPropsWithoutRef<typeof BaseSelect.Group>;
+type BaseGroupLabelProps = ComponentPropsWithoutRef<typeof BaseSelect.GroupLabel>;
+type BaseSeparatorProps = ComponentPropsWithoutRef<typeof BaseSelect.Separator>;
+
+export interface SelectTriggerProps extends Omit<BaseTriggerProps, "className"> {
+  className?: string;
+}
+export interface SelectValueProps extends Omit<BaseValueProps, "className"> {
+  className?: string;
+}
+export interface SelectPositionerProps extends Omit<BasePositionerProps, "className"> {
+  className?: string;
+}
+export interface SelectPopupProps extends Omit<BasePopupProps, "className"> {
+  className?: string;
+}
+export interface SelectListProps extends Omit<BaseListProps, "className"> {
+  className?: string;
+}
+export interface SelectItemProps extends Omit<BaseItemProps, "className"> {
+  className?: string;
+}
+export interface SelectItemTextProps extends Omit<BaseItemTextProps, "className"> {
+  className?: string;
+}
+export interface SelectItemIndicatorProps extends Omit<BaseItemIndicatorProps, "className"> {
+  className?: string;
+  /** Custom icon. Defaults to a checkmark SVG. */
+  children?: ReactNode;
+}
+export interface SelectGroupProps extends Omit<BaseGroupProps, "className"> {
+  className?: string;
+}
+export interface SelectGroupLabelProps extends Omit<BaseGroupLabelProps, "className"> {
+  className?: string;
+}
+export interface SelectSeparatorProps extends Omit<BaseSeparatorProps, "className"> {
+  className?: string;
+}
+
+function DefaultCheckIcon() {
+  return (
+    <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
+      <path d="M2 6L4.5 8.5L10 3" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+  );
+}
+
+export const SelectTrigger = forwardRef<ComponentRef<typeof BaseSelect.Trigger>, SelectTriggerProps>(function SelectTrigger(
+  { className, ...props },
+  ref,
+) {
+  return <BaseSelect.Trigger ref={ref} className={`${styles.trigger} ${className ?? ""}`} {...props} />;
+});
+
+export const SelectValue = forwardRef<ComponentRef<typeof BaseSelect.Value>, SelectValueProps>(function SelectValue(
+  { className, ...props },
+  ref,
+) {
+  return <BaseSelect.Value ref={ref} className={`${styles["trigger-value"]} ${className ?? ""}`} {...props} />;
+});
+
+export const SelectPositioner = forwardRef<ComponentRef<typeof BaseSelect.Positioner>, SelectPositionerProps>(function SelectPositioner(
+  { className, sideOffset = 4, ...props },
+  ref,
+) {
+  return <BaseSelect.Positioner ref={ref} className={`${styles.positioner} ${className ?? ""}`} sideOffset={sideOffset} {...props} />;
+});
+
+export const SelectPopup = forwardRef<ComponentRef<typeof BaseSelect.Popup>, SelectPopupProps>(function SelectPopup(
+  { className, ...props },
+  ref,
+) {
+  return <BaseSelect.Popup ref={ref} className={`${styles.popup} ${className ?? ""}`} {...props} />;
+});
+
+export const SelectList = forwardRef<ComponentRef<typeof BaseSelect.List>, SelectListProps>(function SelectList(
+  { className, ...props },
+  ref,
+) {
+  return <BaseSelect.List ref={ref} className={`${styles.list ?? ""} ${className ?? ""}`} {...props} />;
+});
+
+export const SelectItem = forwardRef<ComponentRef<typeof BaseSelect.Item>, SelectItemProps>(function SelectItem(
+  { className, ...props },
+  ref,
+) {
+  return <BaseSelect.Item ref={ref} className={`${styles.item} ${className ?? ""}`} {...props} />;
+});
+
+export const SelectItemText = forwardRef<ComponentRef<typeof BaseSelect.ItemText>, SelectItemTextProps>(function SelectItemText(
+  { className, ...props },
+  ref,
+) {
+  return <BaseSelect.ItemText ref={ref} className={className} {...props} />;
+});
+
+export const SelectItemIndicator = forwardRef<ComponentRef<typeof BaseSelect.ItemIndicator>, SelectItemIndicatorProps>(
+  function SelectItemIndicator({ className, children, ...props }, ref) {
+    return (
+      <BaseSelect.ItemIndicator ref={ref} className={`${styles["item-indicator"]} ${className ?? ""}`} {...props}>
+        {children ?? <DefaultCheckIcon />}
+      </BaseSelect.ItemIndicator>
+    );
+  },
+);
+
+export const SelectGroup = forwardRef<ComponentRef<typeof BaseSelect.Group>, SelectGroupProps>(function SelectGroup(
+  { className, ...props },
+  ref,
+) {
+  return <BaseSelect.Group ref={ref} className={className} {...props} />;
+});
+
+export const SelectGroupLabel = forwardRef<ComponentRef<typeof BaseSelect.GroupLabel>, SelectGroupLabelProps>(function SelectGroupLabel(
+  { className, ...props },
+  ref,
+) {
+  return <BaseSelect.GroupLabel ref={ref} className={`${styles["group-label"]} ${className ?? ""}`} {...props} />;
+});
+
+export const SelectSeparator = forwardRef<ComponentRef<typeof BaseSelect.Separator>, SelectSeparatorProps>(function SelectSeparator(
+  { className, ...props },
+  ref,
+) {
+  return <BaseSelect.Separator ref={ref} className={`${styles.separator} ${className ?? ""}`} {...props} />;
+});

package/src/select/select.module.css

@@ -0,0 +1,146 @@
+@layer components {
+  .trigger {
+    display: inline-flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--space-2);
+    width: 100%;
+    font-family: var(--font-mono);
+    font-size: var(--font-size-sm);
+    color: var(--color-primary);
+    background-color: var(--color-surface-1);
+    border: var(--border-width-base) solid var(--color-line);
+    border-radius: var(--radius-md);
+    cursor: pointer;
+    outline: none;
+    transition:
+      border-color var(--duration-fast) var(--easing-standard),
+      box-shadow var(--duration-fast) var(--easing-standard);
+    appearance: none;
+    -webkit-appearance: none;
+    height: 30px;
+    padding-inline: var(--space-2-5);
+    text-align: left;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .trigger:hover:not([data-disabled]) {
+    border-color: var(--color-line-strong);
+  }
+  .trigger:focus-visible {
+    border-color: var(--color-accent);
+    box-shadow: var(--shadow-focus);
+  }
+  .trigger[data-disabled] {
+    opacity: 0.44;
+    cursor: not-allowed;
+  }
+  .trigger-value {
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .trigger-icon {
+    flex-shrink: 0;
+    color: var(--color-tertiary);
+    transition: transform var(--duration-normal) var(--easing-standard);
+  }
+  .trigger[data-popup-open] .trigger-icon {
+    transform: rotate(180deg);
+  }
+  /* ─── Popup / Listbox ───────────────────────────────── */
+  .positioner {
+    z-index: var(--z-dropdown);
+  }
+  .popup {
+    background-color: var(--color-overlay);
+    border: var(--border-width-base) solid var(--color-line);
+    border-radius: var(--radius-lg);
+    box-shadow: var(--shadow-popover);
+    padding: var(--space-1);
+    min-width: var(--anchor-width);
+    max-width: var(--available-width);
+    width: fit-content;
+    max-height: 280px;
+    overflow-y: auto;
+    outline: none;
+    transform-origin: var(--transform-origin);
+    transition:
+      opacity 150ms var(--easing-ease-out),
+      transform 150ms var(--easing-ease-out);
+  }
+  .popup[data-starting-style] {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+  .popup[data-ending-style] {
+    opacity: 0;
+    transform: scale(0.98);
+    transition:
+      opacity 75ms var(--easing-ease-in),
+      transform 75ms var(--easing-ease-in);
+  }
+  /* Backdrop blur for macOS feel */
+  @supports (backdrop-filter: blur(12px)) {
+    .popup {
+      backdrop-filter: blur(12px) saturate(1.5);
+      -webkit-backdrop-filter: blur(12px) saturate(1.5);
+    }
+  }
+  .item {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+    padding: var(--space-1-5) var(--space-2-5);
+    font-family: var(--font-mono);
+    font-size: var(--font-size-sm);
+    color: var(--color-primary);
+    border-radius: var(--radius-sm);
+    cursor: default;
+    outline: none;
+    transition: background-color var(--duration-fast) var(--easing-standard);
+    user-select: none;
+  }
+  .item:hover,
+  .item[data-highlighted] {
+    background-color: var(--color-accent);
+    color: var(--color-on-accent);
+  }
+  .item[data-selected] {
+    font-weight: var(--font-weight-medium);
+  }
+  .item[data-disabled] {
+    opacity: 0.44;
+    cursor: not-allowed;
+  }
+  .item-indicator {
+    margin-left: auto;
+    color: var(--color-accent);
+    display: flex;
+    align-items: center;
+  }
+  .item:hover .item-indicator,
+  .item[data-highlighted] .item-indicator {
+    color: var(--color-on-accent);
+  }
+  .group-label {
+    padding: var(--space-1) var(--space-2-5);
+    font-size: var(--font-size-xs);
+    font-weight: var(--font-weight-semibold);
+    color: var(--color-tertiary);
+    letter-spacing: var(--letter-spacing-wider);
+    text-transform: uppercase;
+  }
+  .separator {
+    height: var(--border-width-base);
+    background-color: var(--color-line-subtle);
+    margin: var(--space-1) 0;
+  }
+  /* List container — wraps items inside the popup */
+  .list {
+    display: flex;
+    flex-direction: column;
+    gap: 0;
+  }
+}

package/src/select/select.tsx

@@ -0,0 +1,98 @@
+import { useMemo, type ReactNode } from "react";
+import { Select as BaseSelect } from "@base-ui/react/select";
+import styles from "./select.module.css";
+
+export interface SelectOption {
+  value: string;
+  label: ReactNode;
+  disabled?: boolean;
+}
+
+export interface SelectGroup {
+  label?: ReactNode;
+  options: SelectOption[];
+}
+
+export interface SelectProps {
+  value?: string;
+  defaultValue?: string;
+  /** `eventDetails` is the base-ui event details object. Value may be null when cleared. */
+  onValueChange?: (value: string | null, eventDetails: unknown) => void;
+  disabled?: boolean;
+  required?: boolean;
+  name?: string;
+  placeholder?: string;
+  options?: SelectOption[];
+  groups?: SelectGroup[];
+  className?: string;
+  id?: string;
+}
+
+function ChevronIcon() {
+  return (
+    <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path d="M2.5 4.5L6 8L9.5 4.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+  );
+}
+
+function CheckIcon() {
+  return (
+    <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
+      <path d="M2 6L4.5 8.5L10 3" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+  );
+}
+
+function SelectItem({ option }: { option: SelectOption }) {
+  return (
+    <BaseSelect.Item className={styles.item} value={option.value} disabled={option.disabled}>
+      <BaseSelect.ItemText>{option.label}</BaseSelect.ItemText>
+      <BaseSelect.ItemIndicator className={styles["item-indicator"]}>
+        <CheckIcon />
+      </BaseSelect.ItemIndicator>
+    </BaseSelect.Item>
+  );
+}
+
+export function Select({ placeholder = "Select…", options, groups, className, onValueChange, value, defaultValue, ...props }: SelectProps) {
+  const allOptions = useMemo(() => [...(options ?? []), ...(groups?.flatMap((g) => g.options) ?? [])], [options, groups]);
+
+  return (
+    <BaseSelect.Root onValueChange={onValueChange as never} value={value} defaultValue={defaultValue} {...props}>
+      <BaseSelect.Trigger className={`${styles.trigger} ${className ?? ""}`}>
+        <BaseSelect.Value className={styles["trigger-value"]} placeholder={placeholder}>
+          {(currentValue: string | null) => {
+            if (!currentValue) return placeholder;
+            const match = allOptions.find((o) => o.value === currentValue);
+            return match ? match.label : currentValue;
+          }}
+        </BaseSelect.Value>
+        <span className={styles["trigger-icon"]}>
+          <ChevronIcon />
+        </span>
+      </BaseSelect.Trigger>
+      <BaseSelect.Portal>
+        <BaseSelect.Positioner className={styles.positioner} sideOffset={4}>
+          <BaseSelect.Popup className={styles.popup}>
+            <BaseSelect.List>
+              {options?.map((opt) => (
+                <SelectItem key={opt.value} option={opt} />
+              ))}
+              {groups?.map((group, i) => (
+                <BaseSelect.Group key={i}>
+                  {group.label && <BaseSelect.GroupLabel className={styles["group-label"]}>{group.label}</BaseSelect.GroupLabel>}
+                  {group.options.map((opt) => (
+                    <SelectItem key={opt.value} option={opt} />
+                  ))}
+                  {i < (groups?.length ?? 0) - 1 && <BaseSelect.Separator className={styles.separator} />}
+                </BaseSelect.Group>
+              ))}
+            </BaseSelect.List>
+          </BaseSelect.Popup>
+        </BaseSelect.Positioner>
+      </BaseSelect.Portal>
+    </BaseSelect.Root>
+  );
+}
+export { styles as SelectStyles };

package/src/separator/index.ts

@@ -0,0 +1,3 @@
+export { Separator } from "./separator";
+export type { SeparatorProps } from "./separator";
+export { SeparatorStyles } from "./separator";

package/src/separator/separator.module.css

@@ -0,0 +1,14 @@
+@layer components {
+  .separator {
+    background-color: var(--color-line);
+    flex-shrink: 0;
+  }
+  .separator[data-orientation="horizontal"] {
+    width: 100%;
+    height: var(--border-width-base, 1px);
+  }
+  .separator[data-orientation="vertical"] {
+    width: var(--border-width-base, 1px);
+    align-self: stretch;
+  }
+}

package/src/separator/separator.tsx

@@ -0,0 +1,20 @@
+import { forwardRef } from "react";
+import type { ComponentPropsWithoutRef, ComponentRef } from "react";
+import { Separator as BaseSeparator } from "@base-ui/react/separator";
+import styles from "./separator.module.css";
+
+type BaseSeparatorProps = ComponentPropsWithoutRef<typeof BaseSeparator>;
+
+export interface SeparatorProps extends Omit<BaseSeparatorProps, "className"> {
+  /** @default "horizontal" */
+  orientation?: "horizontal" | "vertical";
+  className?: string;
+}
+
+export const Separator = forwardRef<ComponentRef<typeof BaseSeparator>, SeparatorProps>(function Separator(
+  { className, orientation = "horizontal", ...props },
+  ref,
+) {
+  return <BaseSeparator ref={ref} orientation={orientation} className={`${styles.separator} ${className ?? ""}`} {...props} />;
+});
+export { styles as SeparatorStyles };

package/src/slider/index.ts

@@ -0,0 +1,14 @@
+export { Slider } from "./slider";
+export type { SliderProps } from "./slider";
+
+export { SliderControl, SliderTrack, SliderIndicator, SliderThumb, SliderLabel, SliderValue } from "./parts";
+export type {
+  SliderControlProps,
+  SliderTrackProps,
+  SliderIndicatorProps,
+  SliderThumbProps,
+  SliderLabelProps,
+  SliderValueProps,
+} from "./parts";
+
+export { SliderStyles } from "./slider";

package/src/slider/parts.tsx

@@ -0,0 +1,90 @@
+/**
+ * Styled primitives for Slider.
+ *
+ * @example
+ * ```tsx
+ * import { Slider as BaseSlider } from '@base-ui/react/slider';
+ * import { SliderControl, SliderTrack, SliderIndicator, SliderThumb } from '@brijbyte/agentic-ui/slider';
+ *
+ * <BaseSlider.Root defaultValue={50}>
+ *   <SliderControl>
+ *     <SliderTrack>
+ *       <SliderIndicator />
+ *       <SliderThumb aria-label="Volume" />
+ *     </SliderTrack>
+ *   </SliderControl>
+ * </BaseSlider.Root>
+ * ```
+ */
+import { forwardRef } from "react";
+import type { ComponentRef, ComponentPropsWithoutRef } from "react";
+import { Slider as BaseSlider } from "@base-ui/react/slider";
+import styles from "./slider.module.css";
+
+type BaseControlProps = ComponentPropsWithoutRef<typeof BaseSlider.Control>;
+type BaseTrackProps = ComponentPropsWithoutRef<typeof BaseSlider.Track>;
+type BaseIndicatorProps = ComponentPropsWithoutRef<typeof BaseSlider.Indicator>;
+type BaseThumbProps = ComponentPropsWithoutRef<typeof BaseSlider.Thumb>;
+type BaseLabelProps = ComponentPropsWithoutRef<typeof BaseSlider.Label>;
+type BaseValueProps = ComponentPropsWithoutRef<typeof BaseSlider.Value>;
+
+export interface SliderControlProps extends Omit<BaseControlProps, "className"> {
+  className?: string;
+}
+export interface SliderTrackProps extends Omit<BaseTrackProps, "className"> {
+  className?: string;
+}
+export interface SliderIndicatorProps extends Omit<BaseIndicatorProps, "className"> {
+  className?: string;
+}
+export interface SliderThumbProps extends Omit<BaseThumbProps, "className"> {
+  className?: string;
+}
+export interface SliderLabelProps extends Omit<BaseLabelProps, "className"> {
+  className?: string;
+}
+export interface SliderValueProps extends Omit<BaseValueProps, "className"> {
+  className?: string;
+}
+
+export const SliderControl = forwardRef<ComponentRef<typeof BaseSlider.Control>, SliderControlProps>(function SliderControl(
+  { className, ...props },
+  ref,
+) {
+  return <BaseSlider.Control ref={ref} className={`${styles.control} ${className ?? ""}`} {...props} />;
+});
+
+export const SliderTrack = forwardRef<ComponentRef<typeof BaseSlider.Track>, SliderTrackProps>(function SliderTrack(
+  { className, ...props },
+  ref,
+) {
+  return <BaseSlider.Track ref={ref} className={`${styles.track} ${className ?? ""}`} {...props} />;
+});
+
+export const SliderIndicator = forwardRef<ComponentRef<typeof BaseSlider.Indicator>, SliderIndicatorProps>(function SliderIndicator(
+  { className, ...props },
+  ref,
+) {
+  return <BaseSlider.Indicator ref={ref} className={`${styles.indicator} ${className ?? ""}`} {...props} />;
+});
+
+export const SliderThumb = forwardRef<ComponentRef<typeof BaseSlider.Thumb>, SliderThumbProps>(function SliderThumb(
+  { className, ...props },
+  ref,
+) {
+  return <BaseSlider.Thumb ref={ref} className={`${styles.thumb} ${className ?? ""}`} {...props} />;
+});
+
+export const SliderLabel = forwardRef<ComponentRef<typeof BaseSlider.Label>, SliderLabelProps>(function SliderLabel(
+  { className, ...props },
+  ref,
+) {
+  return <BaseSlider.Label ref={ref} className={`${styles.label} ${className ?? ""}`} {...props} />;
+});
+
+export const SliderValue = forwardRef<ComponentRef<typeof BaseSlider.Value>, SliderValueProps>(function SliderValue(
+  { className, ...props },
+  ref,
+) {
+  return <BaseSlider.Value ref={ref} className={`${styles.value} ${className ?? ""}`} {...props} />;
+});

package/src/slider/slider.module.css

@@ -0,0 +1,110 @@
+@layer components {
+  .root {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-2);
+    width: 100%;
+  }
+
+  /* ─── Label + Value row ──────────────────────────────────────── */
+
+  .header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--space-2);
+  }
+
+  .label {
+    font-family: var(--font-mono);
+    font-size: var(--font-size-xs);
+    font-weight: var(--font-weight-medium);
+    color: var(--color-secondary);
+    letter-spacing: var(--letter-spacing-wide);
+    text-transform: uppercase;
+    user-select: none;
+  }
+
+  .value {
+    font-family: var(--font-mono);
+    font-size: var(--font-size-xs);
+    color: var(--color-tertiary);
+    font-variant-numeric: tabular-nums;
+  }
+
+  /* ─── Control (hit area) ─────────────────────────────────────── */
+
+  .control {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    padding-block: var(--space-2);
+    touch-action: none;
+    user-select: none;
+    cursor: pointer;
+  }
+
+  .control[data-disabled] {
+    opacity: 0.44;
+    cursor: not-allowed;
+  }
+
+  /* ─── Track ──────────────────────────────────────────────────── */
+
+  .track {
+    position: relative;
+    width: 100%;
+    height: 4px;
+    border-radius: var(--radius-full);
+    background-color: var(--color-surface-3);
+    border: var(--border-width-base) solid var(--color-line-subtle);
+    user-select: none;
+  }
+
+  /* ─── Indicator (filled portion) ────────────────────────────── */
+
+  .indicator {
+    border-radius: var(--radius-full);
+    background-color: var(--color-accent);
+    user-select: none;
+    transition: background-color var(--duration-fast) var(--easing-standard);
+  }
+
+  .root[data-disabled] .indicator {
+    background-color: var(--color-tertiary);
+  }
+
+  /* ─── Thumb ──────────────────────────────────────────────────── */
+
+  .thumb {
+    width: 16px;
+    height: 16px;
+    border-radius: var(--radius-full);
+    background-color: var(--color-elevated);
+    border: var(--border-width-base) solid var(--color-line);
+    box-shadow: var(--shadow-sm);
+    user-select: none;
+    transition:
+      transform var(--duration-fast) var(--easing-spring),
+      box-shadow var(--duration-fast) var(--easing-standard),
+      border-color var(--duration-fast) var(--easing-standard);
+  }
+
+  /* Grow on drag — gives tactile feedback */
+  .thumb[data-dragging] {
+    transform: scale(1.2);
+    border-color: var(--color-accent);
+    box-shadow: var(--shadow-md);
+  }
+
+  /* Focus ring via the nested <input> */
+  .thumb:has(:focus-visible) {
+    border-color: var(--color-accent);
+    box-shadow: var(--shadow-focus);
+  }
+
+  .thumb[data-disabled] {
+    cursor: not-allowed;
+    background-color: var(--color-surface-3);
+  }
+}