@rovula/ui 0.1.18 → 0.1.21

package/src/components/DropdownMenu/DropdownMenu.tsx

@@ -27,8 +27,7 @@ const DropdownMenuSubTrigger = React.forwardRef<
   <DropdownMenuPrimitive.SubTrigger
     ref={ref}
     className={cn(
-      // "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-primary data-[state=open]:bg-primary",
-      "relative flex gap-3 cursor-pointer select-none box-border items-center py-4 pl-9 pr-4 typography-subtitle4 outline-none transition-colors data-[disabled]:pointer-events-none",
+      "relative flex gap-4 cursor-pointer select-none box-border items-center py-4 pl-9 pr-4 typography-subtitle4 outline-none transition-colors data-[disabled]:pointer-events-none",
       "bg-[var(--dropdown-menu-default-bg)] text-[var(--dropdown-menu-default-text)]",
       "active:opacity-75",
       "focus:!bg-[var(--dropdown-menu-hover-bg)] focus:!text-[var(--dropdown-menu-hover-text)]",
@@ -52,7 +51,7 @@ const DropdownMenuSubContent = React.forwardRef<
   <DropdownMenuPrimitive.SubContent
     ref={ref}
     className={cn(
-      "z-50 min-w-[154px] overflow-hidden rounded-md bg-modal-surface text-text-contrast-low data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      "z-50 min-w-[154px] overflow-hidden rounded-lg bg-modal-surface text-text-contrast-low data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
       className
     )}
     {...props}
@@ -74,7 +73,7 @@ const DropdownMenuContent = React.forwardRef<
       ref={ref}
       sideOffset={sideOffset}
       className={cn(
-        "z-50 min-w-[154px] overflow-hidden rounded-md bg-modal-surface text-text-contrast-low data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        "z-50 min-w-[154px] overflow-hidden rounded-lg bg-modal-surface text-text-contrast-low data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
         className
       )}
       {...props}
@@ -96,7 +95,7 @@ const DropdownMenuItem = React.forwardRef<
   <DropdownMenuPrimitive.Item
     ref={ref}
     className={cn(
-      "relative flex gap-3 cursor-pointer select-none box-border items-center py-4 pl-9 pr-xxl typography-subtitle4 outline-none transition-colors data-[disabled]:pointer-events-none",
+      "relative flex gap-4 cursor-pointer select-none box-border items-center py-4 pl-9 pr-xxl typography-subtitle4 outline-none transition-colors data-[disabled]:pointer-events-none",
       "bg-[var(--dropdown-menu-default-bg)] text-[var(--dropdown-menu-default-text)]",
       "active:opacity-75",
       "focus:!bg-[var(--dropdown-menu-hover-bg)] focus:!text-[var(--dropdown-menu-hover-text)]",
@@ -116,7 +115,7 @@ const DropdownMenuCheckboxItem = React.forwardRef<
   <DropdownMenuPrimitive.CheckboxItem
     ref={ref}
     className={cn(
-      "relative flex gap-3 cursor-pointer select-none box-border items-center py-4 pl-9 pr-xxl typography-subtitle4 outline-none transition-colors data-[disabled]:pointer-events-none",
+      "relative flex gap-4 cursor-pointer select-none box-border items-center py-4 pl-9 pr-xxl typography-subtitle4 outline-none transition-colors data-[disabled]:pointer-events-none",
       "bg-[var(--dropdown-menu-default-bg)] text-[var(--dropdown-menu-default-text)]",
       "active:opacity-75",
       "focus:!bg-[var(--dropdown-menu-hover-bg)] focus:!text-[var(--dropdown-menu-hover-text)]",
@@ -145,7 +144,7 @@ const DropdownMenuRadioItem = React.forwardRef<
   <DropdownMenuPrimitive.RadioItem
     ref={ref}
     className={cn(
-      "relative flex gap-3 cursor-pointer select-none box-border items-center py-4 pl-9 pr-xxl typography-subtitle4 outline-none transition-colors data-[disabled]:pointer-events-none",
+      "relative flex gap-4 cursor-pointer select-none box-border items-center py-4 pl-9 pr-xxl typography-subtitle4 outline-none transition-colors data-[disabled]:pointer-events-none",
       "bg-[var(--dropdown-menu-default-bg)] text-[var(--dropdown-menu-default-text)]",
       "active:opacity-75",
       "focus:!bg-[var(--dropdown-menu-hover-bg)] focus:!text-[var(--dropdown-menu-hover-text)]",
@@ -174,7 +173,7 @@ const DropdownMenuLabel = React.forwardRef<
   <DropdownMenuPrimitive.Label
     ref={ref}
     className={cn(
-      "px-3 py-2 typography-small4 text-text-g-contrast-medium",
+      "px-3 pt-4 pb-2 typography-small4 text-text-g-contrast-high",
       inset && "pl-8",
       className
     )}

package/src/components/Form/Form.stories.tsx

@@ -362,6 +362,76 @@ export const RenderPropsCodeControl = {
   },
 } satisfies Story;
 
+export const FormStateChangeCallback = {
+  args: {},
+  render: () => {
+    const [isFormValid, setIsFormValid] = useState(false);
+    const [isDirty, setIsDirty] = useState(false);
+    const [submitCount, setSubmitCount] = useState(0);
+
+    const schema = yup.object({
+      title: yup.string().required("Title is required"),
+      description: yup
+        .string()
+        .required("Description is required")
+        .min(10, "Description must be at least 10 characters"),
+    });
+
+    return (
+      <div className="flex flex-col gap-4">
+        {/* Simulates a parent component (e.g. modal footer) that controls the submit button */}
+        <div className="rounded-md border border-bg-stroke1 bg-bg-bg2 p-3 text-xs text-text-g-contrast-medium space-y-1">
+          <div>
+            Validity:{" "}
+            <span className={isFormValid ? "text-state-success-default" : "text-state-error-default"}>
+              {isFormValid ? "valid" : "invalid"}
+            </span>
+          </div>
+          <div>Dirty: {isDirty ? "yes" : "no"}</div>
+          <div>Submit count: {submitCount}</div>
+        </div>
+
+        <Form<CodeControlFormValues>
+          className="flex flex-col gap-3"
+          defaultValues={{ title: "", description: "" }}
+          mode="onTouched"
+          reValidateMode="onChange"
+          validationSchema={schema}
+          onSubmit={(values) => {
+            setSubmitCount((prev) => prev + 1);
+            // eslint-disable-next-line no-console
+            console.log("Submitted:", values);
+          }}
+          onFormStateChange={(formState) => {
+            setIsFormValid(formState.isValid);
+            setIsDirty(formState.isDirty);
+          }}
+        >
+          <Field<CodeControlFormValues, "title">
+            name="title"
+            component={TextInput}
+            componentProps={{ label: "Title", required: true }}
+          />
+          <Field<CodeControlFormValues, "description">
+            name="description"
+            component={TextInput}
+            componentProps={{
+              label: "Description",
+              helperText: "At least 10 characters",
+              required: true,
+            }}
+          />
+
+          {/* Submit button lives inside Form — receives isFormValid from parent state */}
+          <Button type="submit" disabled={!isFormValid}>
+            Submit
+          </Button>
+        </Form>
+      </div>
+    );
+  },
+} satisfies Story;
+
 export const HigherLayerCodeControl = {
   args: {},
   render: () => {

package/src/components/Form/Form.tsx

@@ -3,11 +3,13 @@ import {
   DefaultValues,
   FieldValues,
   FormProvider,
+  FormState,
   Mode,
   Resolver,
   SubmitErrorHandler,
   SubmitHandler,
   useForm,
+  useFormContext,
   UseFormReturn,
 } from "react-hook-form";
 import { yupResolver } from "@hookform/resolvers/yup";
@@ -35,6 +37,7 @@ export type FormProps<TFieldValues extends FieldValues> = Omit<
   controllerRef?: React.MutableRefObject<FormController<TFieldValues> | null>;
   onSubmit: SubmitHandler<TFieldValues>;
   onInvalidSubmit?: SubmitErrorHandler<TFieldValues>;
+  onFormStateChange?: (formState: FormState<TFieldValues>) => void;
   resolver?: Resolver<TFieldValues>;
   validationSchema?: yup.ObjectSchema<any>;
   mode?: Mode;
@@ -132,6 +135,20 @@ export const useControlledForm = <TFieldValues extends FieldValues>({
   };
 };
 
+const FormStateObserver = <TFieldValues extends FieldValues>({
+  onFormStateChange,
+}: {
+  onFormStateChange: (formState: FormState<TFieldValues>) => void;
+}) => {
+  const { formState } = useFormContext<TFieldValues>();
+
+  React.useEffect(() => {
+    onFormStateChange(formState);
+  }, [formState, onFormStateChange]);
+
+  return null;
+};
+
 const FormInner = <TFieldValues extends FieldValues>(
   {
     children,
@@ -140,6 +157,7 @@ const FormInner = <TFieldValues extends FieldValues>(
     controllerRef,
     onSubmit,
     onInvalidSubmit,
+    onFormStateChange,
     resolver,
     validationSchema,
     mode = "onSubmit",
@@ -195,6 +213,11 @@ const FormInner = <TFieldValues extends FieldValues>(
         noValidate={noValidate}
         onSubmit={methods.handleSubmit(onSubmit, onInvalidSubmit)}
       >
+        {onFormStateChange && (
+          <FormStateObserver<TFieldValues>
+            onFormStateChange={onFormStateChange}
+          />
+        )}
         {typeof children === "function" ? children(methods) : children}
       </form>
     </FormProvider>

package/src/components/ScrollArea/ScrollArea.stories.tsx

@@ -0,0 +1,229 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { ScrollArea } from "./ScrollArea";
+
+const meta = {
+  title: "Components/ScrollArea",
+  component: ScrollArea,
+  parameters: {
+    layout: "fullscreen",
+  },
+  decorators: [
+    (Story) => (
+      <div className="p-10 flex gap-8 flex-wrap bg-workspace-surface min-h-screen">
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof ScrollArea>;
+
+export default meta;
+
+const ITEMS = Array.from({ length: 12 }, (_, i) => `Option Description ${i + 1}`);
+
+// ---------------------------------------------------------------------------
+// Size variants  (Figma: Size=M / S / XS)
+// ---------------------------------------------------------------------------
+export const Sizes = {
+  name: "Size Variants",
+  render: () => (
+    <div className="flex gap-10 items-start">
+      {(["m", "s", "xs"] as const).map((size) => (
+        <div key={size}>
+          <p className="typography-small4 text-text-g-contrast-medium mb-2 uppercase">
+            Size {size}
+          </p>
+          <ScrollArea
+            scrollbarSize={size}
+            className="max-h-[270px] w-[200px] rounded-lg bg-modal-surface"
+          >
+            {ITEMS.map((label) => (
+              <div
+                key={label}
+                className="px-4 py-3 typography-subtitle4 text-text-g-contrast-high"
+              >
+                {label}
+              </div>
+            ))}
+          </ScrollArea>
+        </div>
+      ))}
+    </div>
+  ),
+} satisfies StoryObj;
+
+// ---------------------------------------------------------------------------
+// Vertical scroll  (Figma: Can Scroll)
+// ---------------------------------------------------------------------------
+export const VerticalScroll = {
+  name: "Vertical Scroll",
+  render: () => (
+    <div>
+      <p className="typography-small4 text-text-g-contrast-medium mb-2">
+        Single scrollable list — use{" "}
+        <code className="text-xs">&lt;ScrollArea className="max-h-[...]"&gt;</code>
+      </p>
+      <ScrollArea className="max-h-[270px] w-[230px] rounded-lg bg-modal-surface">
+        {ITEMS.map((label) => (
+          <div
+            key={label}
+            className="px-4 py-3 typography-subtitle4 text-text-g-contrast-high"
+          >
+            {label}
+          </div>
+        ))}
+      </ScrollArea>
+    </div>
+  ),
+} satisfies StoryObj;
+
+// ---------------------------------------------------------------------------
+// Horizontal scroll  (Figma: Horizontal=Yes)
+// ---------------------------------------------------------------------------
+export const HorizontalScroll = {
+  name: "Horizontal Scroll",
+  render: () => (
+    <div>
+      <p className="typography-small4 text-text-g-contrast-medium mb-2">
+        Horizontal — pass{" "}
+        <code className="text-xs">direction="horizontal"</code>
+      </p>
+      <ScrollArea
+        direction="horizontal"
+        className="max-w-[300px] rounded-lg bg-modal-surface"
+      >
+        <div className="flex">
+          {ITEMS.map((label) => (
+            <div
+              key={label}
+              className="shrink-0 w-[140px] px-4 py-3 typography-subtitle4 text-text-g-contrast-high border-r border-[var(--dropdown-menu-seperator-bg)]"
+            >
+              {label}
+            </div>
+          ))}
+        </div>
+      </ScrollArea>
+    </div>
+  ),
+} satisfies StoryObj;
+
+// ---------------------------------------------------------------------------
+// Double scroll  (Figma: Double Scroll — two independent sections)
+// ---------------------------------------------------------------------------
+export const DoubleScroll = {
+  name: "Double Scroll",
+  render: () => (
+    <div>
+      <p className="typography-small4 text-text-g-contrast-medium mb-4">
+        Two independent scrollable sections inside one container.
+        <br />
+        Wrap each section in its own{" "}
+        <code className="text-xs">&lt;ScrollArea&gt;</code>.
+      </p>
+      <div className="w-[230px] rounded-lg bg-modal-surface overflow-hidden">
+        {/* Section A */}
+        <div className="px-3 pt-4 pb-2 typography-small4 text-text-g-contrast-high">
+          Section A
+        </div>
+        <ScrollArea className="max-h-[160px]">
+          {ITEMS.slice(0, 8).map((label) => (
+            <div
+              key={label}
+              className="px-4 py-3 typography-subtitle4 text-text-g-contrast-high"
+            >
+              {label}
+            </div>
+          ))}
+        </ScrollArea>
+
+        {/* Separator */}
+        <div className="h-px bg-[var(--dropdown-menu-seperator-bg)] my-2" />
+
+        {/* Section B */}
+        <div className="px-3 pt-2 pb-2 typography-small4 text-text-g-contrast-high">
+          Section B
+        </div>
+        <ScrollArea className="max-h-[160px]">
+          {ITEMS.slice(0, 8).map((label) => (
+            <div
+              key={label}
+              className="px-4 py-3 typography-subtitle4 text-text-g-contrast-high"
+            >
+              {label}
+            </div>
+          ))}
+        </ScrollArea>
+      </div>
+    </div>
+  ),
+} satisfies StoryObj;
+
+// ---------------------------------------------------------------------------
+// Usage with DropdownMenu  (Figma: Can Scroll / Double Scroll in dropdown)
+// ---------------------------------------------------------------------------
+export const WithDropdownMenu = {
+  name: "Usage with DropdownMenu",
+  render: () => {
+    // Inline-import to avoid circular storybook deps — client should import from "@core/ui"
+    const {
+      DropdownMenu,
+      DropdownMenuContent,
+      DropdownMenuItem,
+      DropdownMenuLabel,
+      DropdownMenuSeparator,
+      DropdownMenuTrigger,
+      // eslint-disable-next-line @typescript-eslint/no-require-imports
+    } = require("../DropdownMenu/DropdownMenu");
+    const Button = require("../Button/Button").default;
+
+    return (
+      <div className="flex gap-8 items-start flex-wrap">
+        {/* Single scrollable dropdown */}
+        <div>
+          <p className="typography-small4 text-text-g-contrast-medium mb-2">
+            Can Scroll
+          </p>
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button variant="outline">Open Menu</Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent>
+              <ScrollArea className="max-h-[270px]">
+                {ITEMS.map((label) => (
+                  <DropdownMenuItem key={label}>{label}</DropdownMenuItem>
+                ))}
+              </ScrollArea>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
+
+        {/* Double scroll dropdown */}
+        <div>
+          <p className="typography-small4 text-text-g-contrast-medium mb-2">
+            Double Scroll
+          </p>
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button variant="outline">Open Menu</Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent>
+              <DropdownMenuLabel>Section A</DropdownMenuLabel>
+              <ScrollArea className="max-h-[160px]">
+                {ITEMS.slice(0, 8).map((label) => (
+                  <DropdownMenuItem key={label}>{label}</DropdownMenuItem>
+                ))}
+              </ScrollArea>
+              <DropdownMenuSeparator />
+              <DropdownMenuLabel>Section B</DropdownMenuLabel>
+              <ScrollArea className="max-h-[160px]">
+                {ITEMS.slice(0, 8).map((label) => (
+                  <DropdownMenuItem key={label}>{label}</DropdownMenuItem>
+                ))}
+              </ScrollArea>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
+      </div>
+    );
+  },
+} satisfies StoryObj;

package/src/components/ScrollArea/ScrollArea.tsx

@@ -0,0 +1,72 @@
+import * as React from "react";
+import { cn } from "@/utils/cn";
+
+export type ScrollbarSize = "m" | "s" | "xs";
+
+export interface ScrollAreaProps extends React.HTMLAttributes<HTMLDivElement> {
+  /**
+   * Scrollbar thickness.
+   * - `m`  — 12 px  (shows track border)
+   * - `s`  — 6 px   (default, shows no track border)
+   * - `xs` — 2 px   (shows no track border)
+   */
+  scrollbarSize?: ScrollbarSize;
+  /**
+   * Direction(s) the area can scroll.
+   * Defaults to `"vertical"`.
+   */
+  direction?: "vertical" | "horizontal" | "both";
+}
+
+const sizeClass: Record<ScrollbarSize, string> = {
+  m: "ui-scrollbar ui-scrollbar-m",
+  s: "ui-scrollbar ui-scrollbar-s",
+  xs: "ui-scrollbar ui-scrollbar-xs",
+};
+
+const directionClass: Record<NonNullable<ScrollAreaProps["direction"]>, string> = {
+  vertical: "overflow-y-auto overflow-x-hidden",
+  horizontal: "overflow-x-auto overflow-y-hidden",
+  both: "overflow-auto",
+};
+
+/**
+ * ScrollArea
+ *
+ * A thin wrapper that applies the design-system scrollbar style to any
+ * scrollable container. Use `scrollbarSize` to pick the Figma size variant
+ * and `direction` to control which axis scrolls.
+ *
+ * **Client usage:**
+ * ```tsx
+ * <ScrollArea className="max-h-[270px]">
+ *   {items.map(item => <div key={item.id}>{item.label}</div>)}
+ * </ScrollArea>
+ * ```
+ *
+ * For a double-scroll layout (two independent sections inside one dropdown),
+ * wrap each section individually:
+ * ```tsx
+ * <ScrollArea className="max-h-[160px]">...section A items...</ScrollArea>
+ * <ScrollArea className="max-h-[160px]">...section B items...</ScrollArea>
+ * ```
+ */
+export const ScrollArea = React.forwardRef<HTMLDivElement, ScrollAreaProps>(
+  (
+    { className, scrollbarSize = "s", direction = "vertical", children, ...props },
+    ref
+  ) => (
+    <div
+      ref={ref}
+      className={cn(
+        directionClass[direction],
+        sizeClass[scrollbarSize],
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </div>
+  )
+);
+ScrollArea.displayName = "ScrollArea";

package/src/index.ts

@@ -49,6 +49,7 @@ export * from "./components/Toast/Toaster";
 export * from "./components/Toast/useToast";
 export * from "./components/Tree";
 export * from "./components/FocusedScrollView/FocusedScrollView";
+export * from "./components/ScrollArea/ScrollArea";
 export * from "./components/RadioGroup/RadioGroup";
 export * from "./components/Form";
 

package/src/patterns/confirm-dialog/ConfirmDialog.tsx

@@ -21,6 +21,7 @@ export type ConfirmDialogProps = {
   onOpenChange?: (open: boolean) => void;
   title: string;
   description?: string;
+  children?: React.ReactNode;
   confirmLabel?: string;
   cancelLabel?: string;
   onConfirm?: () => void;
@@ -49,6 +50,7 @@ export const ConfirmDialog: React.FC<ConfirmDialogProps> = ({
   onOpenChange,
   title,
   description,
+  children,
   confirmLabel = "Confirm",
   cancelLabel = "Cancel",
   onConfirm,
@@ -117,6 +119,8 @@ export const ConfirmDialog: React.FC<ConfirmDialogProps> = ({
           )}
         </AlertDialogHeader>
 
+        {children}
+
         {requiresInput && (
           <FormRoot
             id={formId}

package/src/patterns/form-dialog/FormDialog.tsx

@@ -76,7 +76,11 @@ export const FormDialog: React.FC<FormDialogProps> = ({
       {trigger && <DialogTrigger asChild>{trigger}</DialogTrigger>}
       <DialogContent className={className} data-testid={testId}>
         <DialogHeader>
-          <DialogTitle data-testid={testId && `${testId}-title`}>{title}</DialogTitle>
+          {title && (
+            <DialogTitle data-testid={testId && `${testId}-title`}>
+              {title}
+            </DialogTitle>
+          )}
           {description && (
             <DialogDescription data-testid={testId && `${testId}-description`}>
               {description}

package/src/theme/global.css

@@ -14,7 +14,37 @@
 @layer base {
   * {
     /* @apply border-border; */
+    scrollbar-width: thin;
+    scrollbar-color: var(--scrollbar-thumb-default-color) transparent;
   }
+
+  *::-webkit-scrollbar {
+    width: var(--scrollbar-s-thickness);
+    height: var(--scrollbar-s-thickness);
+    background: transparent;
+  }
+
+  *::-webkit-scrollbar-thumb {
+    border-radius: 12px;
+    background: var(--scrollbar-thumb-default-color);
+  }
+
+  *::-webkit-scrollbar-thumb:hover {
+    background: var(--scrollbar-thumb-hover-color);
+  }
+
+  *::-webkit-scrollbar-track:vertical {
+    border-left: var(--scrollbar-track-border-width) solid var(--scrollbar-track-border-color);
+  }
+
+  *::-webkit-scrollbar-track:horizontal {
+    border-top: var(--scrollbar-track-border-width) solid var(--scrollbar-track-border-color);
+  }
+
+  *::-webkit-scrollbar-corner {
+    background: transparent;
+  }
+
   body {
     /* @apply bg-background text-foreground; */
     /* @apply bg-[var(--background)] text-[var(--foreground)]; */
@@ -36,26 +66,69 @@
 
 @layer utilities {
 
+  /* ------------------------------------------------------------------ */
+  /* Scrollbar utility — applies the design-system scrollbar style        */
+  /* Default size: S (6px thumb, matches Figma Size=S)                   */
+  /* Usage: add `ui-scrollbar` + optional size modifier to any           */
+  /* overflow-auto / overflow-y-auto / overflow-x-auto container.        */
+  /* ------------------------------------------------------------------ */
+
+  /* --- Track --- */
   .ui-scrollbar::-webkit-scrollbar {
-    height: 6px;
-    width: 6px;
-    background: rgba(0, 0, 0, 0.08);
+    width: var(--scrollbar-s-thickness);
+    height: var(--scrollbar-s-thickness);
+    background: transparent;
   }
-  
+
+  /* --- Thumb --- */
   .ui-scrollbar::-webkit-scrollbar-thumb {
-    border-radius: 6px;
-    background: rgba(121, 141, 150, 0.48);
-    width: 6px;
+    border-radius: 12px;
+    background: var(--scrollbar-thumb-default-color);
   }
-  
+
   .ui-scrollbar::-webkit-scrollbar-thumb:hover {
-    background: rgba(251, 252, 253, 0.48);
+    background: var(--scrollbar-thumb-hover-color);
     cursor: pointer;
   }
 
+  /* --- Track border (vertical) --- */
+  .ui-scrollbar::-webkit-scrollbar-track:vertical {
+    border-left: var(--scrollbar-track-border-width) solid var(--scrollbar-track-border-color);
+  }
+
+  /* --- Track border (horizontal) --- */
+  .ui-scrollbar::-webkit-scrollbar-track:horizontal {
+    border-top: var(--scrollbar-track-border-width) solid var(--scrollbar-track-border-color);
+  }
+
   .ui-scrollbar::-webkit-scrollbar-corner {
-    display: none;
-    /* background: transparent; */
+    background: transparent;
+  }
+
+  /* --- Size variants --- */
+
+  /* Size M — 12px */
+  .ui-scrollbar-m::-webkit-scrollbar {
+    width: var(--scrollbar-m-thickness);
+    height: var(--scrollbar-m-thickness);
+  }
+
+  /* Size S — 6px (default, same as base .ui-scrollbar) */
+  .ui-scrollbar-s::-webkit-scrollbar {
+    width: var(--scrollbar-s-thickness);
+    height: var(--scrollbar-s-thickness);
+  }
+
+  /* Size XS — 2px */
+  .ui-scrollbar-xs::-webkit-scrollbar {
+    width: var(--scrollbar-xs-thickness);
+    height: var(--scrollbar-xs-thickness);
+  }
+
+  /* XS size has no track border */
+  .ui-scrollbar-xs::-webkit-scrollbar-track:vertical,
+  .ui-scrollbar-xs::-webkit-scrollbar-track:horizontal {
+    border: none;
   }
 
 }

package/src/theme/themes/xspector/baseline.css

@@ -2,3 +2,4 @@
 @import url(components/action-button.css);
 @import url(components/loading.css);
 @import url(components/dropdown-menu.css);
+@import url(components/scrollbar.css);