From 86f69ba05c8d8fd537ffc5e380d5bc1ac65d6981 Mon Sep 17 00:00:00 2001
From: Carlos Costa <carllos.nc@gmail.com>
Date: Thu, 22 Oct 2026 20:03:15 -0300
Subject: [PATCH] fix(dashkit): chart colors, portal instance refs, scroll-lock
 stacking, and link/button nesting

- charts: use existing --color-ds-primary-* tokens in Bar/Area/Pie default
  series colors (the --color-primary-NNN vars never existed, so extra
  series rendered black)
- overlays: replace static portal DOM ids + getElementById with per-instance
  portalRefs in Select, Combobox, Dropdown, DatePicker and Popover, so
  multiple instances on one page no longer close each other
- select: remove the scroll listener that was never unregistered (cleanup
  passed a new function instead of handleScroll)
- button: add an asChild mode and use it for Link/anchor call sites in the
  app, removing invalid <button> inside <a> nesting
- modal/drawer: add a ref-counted lockBodyScroll() util so stacked overlays
  keep the page locked until the last one closes; Escape now lives only in
  useModal/useDrawer (Backdrop no longer fabricates a MouseEvent to call
  onClick), fixing the double onClose call
- tests: cover scroll-lock stacking, Drawer Escape (once), and the single
  Modal Escape call
---
 src/App.tsx                                   | 16 ++---
 src/dashkit/AreaChart/AreaChart.tsx           | 10 +--
 src/dashkit/Backdrop/Backdrop.test.tsx        |  4 +-
 src/dashkit/Backdrop/Backdrop.tsx             | 15 +----
 src/dashkit/BarChart/useBarChart.ts           | 10 +--
 src/dashkit/Button/Button.tsx                 | 67 +++++++++++++++----
 src/dashkit/Combobox/Combobox.tsx             |  3 +-
 src/dashkit/Combobox/useCombobox.ts           |  6 +-
 src/dashkit/DatePicker/DatePicker.tsx         |  3 +-
 src/dashkit/DatePicker/useDatePicker.ts       |  4 +-
 src/dashkit/Drawer/Drawer.test.tsx            | 13 ++++
 src/dashkit/Drawer/useDrawer.ts               | 19 ++++--
 src/dashkit/Dropdown/Dropdown.tsx             |  6 +-
 src/dashkit/Dropdown/DropdownContent.tsx      | 12 ++--
 src/dashkit/Dropdown/useDropdown.ts           |  7 +-
 src/dashkit/ImageExpander/useImageExpander.ts | 11 +--
 src/dashkit/Modal/Modal.test.tsx              | 11 ++-
 src/dashkit/Modal/useModal.ts                 | 11 +--
 src/dashkit/PieChart/PieChart.tsx             | 10 +--
 src/dashkit/Popover/Popover.tsx               |  6 +-
 src/dashkit/Popover/PopoverContent.tsx        | 12 ++--
 src/dashkit/Popover/usePopover.ts             |  7 +-
 src/dashkit/Select/Select.tsx                 |  3 +-
 src/dashkit/Select/useSelect.ts               |  8 ++-
 src/dashkit/utils/scrollLock.test.ts          | 52 ++++++++++++++
 src/dashkit/utils/scrollLock.ts               | 28 ++++++++
 src/pages/NotFound.tsx                        |  8 +--
 27 files changed, 250 insertions(+), 112 deletions(-)
 create mode 100644 src/dashkit/utils/scrollLock.test.ts
 create mode 100644 src/dashkit/utils/scrollLock.ts

diff --git a/src/App.tsx b/src/App.tsx
index 0592af5..ccd8692 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -54,16 +54,14 @@ function App() {
         </p>
 
         <div className="flex flex-col sm:flex-row gap-4 items-center">
-          <Link to="/docs" tabIndex={-1}>
-            <Button variant="filled" rightIcon={<FiArrowRight />}>
-              Get Started
-            </Button>
-          </Link>
-          <a href="https://github.com/carllosnc/dashkit" target="_blank" rel="noopener noreferrer">
-            <Button variant="outlined" leftIcon={<FiGithub />}>
+          <Button asChild variant="filled" rightIcon={<FiArrowRight />}>
+            <Link to="/docs">Get Started</Link>
+          </Button>
+          <Button asChild variant="outlined" leftIcon={<FiGithub />}>
+            <a href="https://github.com/carllosnc/dashkit" target="_blank" rel="noopener noreferrer">
               View on GitHub
-            </Button>
-          </a>
+            </a>
+          </Button>
         </div>
 
         {/* CLI Emulator */}
diff --git a/src/dashkit/AreaChart/AreaChart.tsx b/src/dashkit/AreaChart/AreaChart.tsx
index 4107768..5a784c7 100644
--- a/src/dashkit/AreaChart/AreaChart.tsx
+++ b/src/dashkit/AreaChart/AreaChart.tsx
@@ -7,11 +7,11 @@ import './area-chart.css';
 import { useAreaChart, type AreaChartSeries } from './useAreaChart';
 
 const DEFAULT_COLORS = [
-  'var(--color-primary)',
-  'var(--color-primary-400)',
-  'var(--color-primary-200)',
-  'var(--color-primary-800)',
-  'var(--color-primary-300)',
+  'var(--color-ds-primary-600)',
+  'var(--color-ds-primary-400)',
+  'var(--color-ds-primary-200)',
+  'var(--color-ds-primary-800)',
+  'var(--color-ds-primary-300)',
 ];
 
 export interface AreaChartProps {
diff --git a/src/dashkit/Backdrop/Backdrop.test.tsx b/src/dashkit/Backdrop/Backdrop.test.tsx
index 0c7cc18..c8104ac 100644
--- a/src/dashkit/Backdrop/Backdrop.test.tsx
+++ b/src/dashkit/Backdrop/Backdrop.test.tsx
@@ -51,10 +51,10 @@ describe('Backdrop', () => {
     expect(overlay).toHaveClass('backdrop__overlay');
   });
 
-  it('calls onClick when Escape key is pressed', () => {
+  it('does not handle Escape itself (overlay hooks own that)', () => {
     const handleClick = vi.fn();
     render(<Backdrop show={true} onClick={handleClick} />);
     fireEvent.keyDown(window, { key: 'Escape' });
-    expect(handleClick).toHaveBeenCalledTimes(1);
+    expect(handleClick).not.toHaveBeenCalled();
   });
 });
diff --git a/src/dashkit/Backdrop/Backdrop.tsx b/src/dashkit/Backdrop/Backdrop.tsx
index 362d481..58c996e 100644
--- a/src/dashkit/Backdrop/Backdrop.tsx
+++ b/src/dashkit/Backdrop/Backdrop.tsx
@@ -22,19 +22,8 @@ export function Backdrop({
   children,
   ...props
 }: BackdropProps) {
-  React.useEffect(() => {
-    if (!show || !onClick) return;
-
-    const handleKeyDown = (event: KeyboardEvent) => {
-      if (event.key === 'Escape') {
-        onClick({} as React.MouseEvent<HTMLDivElement>);
-      }
-    };
-
-    window.addEventListener('keydown', handleKeyDown);
-    return () => window.removeEventListener('keydown', handleKeyDown);
-  }, [show, onClick]);
-
+  // Note: Escape-to-close is handled by the overlay hooks (useModal/useDrawer)
+  // instead of here, so `onClose` is invoked exactly once with a real event.
   const overlay = (
     <motion.div
       initial={{ opacity: 0 }}
diff --git a/src/dashkit/BarChart/useBarChart.ts b/src/dashkit/BarChart/useBarChart.ts
index 14c5e4d..d8f3ddc 100644
--- a/src/dashkit/BarChart/useBarChart.ts
+++ b/src/dashkit/BarChart/useBarChart.ts
@@ -2,11 +2,11 @@ import * as React from 'react';
 import type { BarChartSeries } from './BarChart';
 
 const DEFAULT_COLORS = [
-  'var(--color-primary)',
-  'var(--color-primary-400)',
-  'var(--color-primary-200)',
-  'var(--color-primary-800)',
-  'var(--color-primary-300)',
+  'var(--color-ds-primary-600)',
+  'var(--color-ds-primary-400)',
+  'var(--color-ds-primary-200)',
+  'var(--color-ds-primary-800)',
+  'var(--color-ds-primary-300)',
 ];
 
 interface UseBarChartProps {
diff --git a/src/dashkit/Button/Button.tsx b/src/dashkit/Button/Button.tsx
index 9091a77..5ead870 100644
--- a/src/dashkit/Button/Button.tsx
+++ b/src/dashkit/Button/Button.tsx
@@ -1,4 +1,12 @@
-import { forwardRef, type ButtonHTMLAttributes, type ReactNode } from 'react';
+import {
+  forwardRef,
+  cloneElement,
+  Children,
+  isValidElement,
+  type ButtonHTMLAttributes,
+  type ReactNode,
+  type ReactElement,
+} from 'react';
 import clsx, { type ClassValue } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { Spinner } from '../Spinner/Spinner';
@@ -15,6 +23,12 @@ export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   leftIcon?: ReactNode;
   rightIcon?: ReactNode;
   loading?: boolean;
+  /**
+   * Render the button styles onto its single child element instead of a
+   * <button> — use for links (<Link>, <a>) so interactive content is never
+   * nested inside an anchor.
+   */
+  asChild?: boolean;
 }
 
 export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
@@ -29,29 +43,54 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
       rightIcon,
       loading,
       disabled,
+      asChild = false,
       ...props
     },
     ref
   ) {
     const isIconOnly = !children && (!!leftIcon || !!rightIcon);
 
+    const classes = cn(
+      'button',
+      `button--${variant}-${color}`,
+      `button--${size}`,
+      {
+        "button--loading": loading,
+        "button--with-text": !isIconOnly,
+        "button--with-text-sm": size === 'sm' && !isIconOnly,
+        "button--with-text-lg": size === 'lg' && !isIconOnly,
+        "button--icon-only": isIconOnly,
+      },
+      className
+    );
+
+    if (asChild) {
+      const child = Children.only(children);
+      if (!isValidElement(child)) {
+        throw new Error('Button with asChild must have a single React element as its child.');
+      }
+
+      const childProps = child.props as { className?: string; children?: ReactNode };
+
+      return cloneElement(child as ReactElement<Record<string, unknown>>, {
+        ref,
+        className: twMerge(classes, childProps.className),
+        children: (
+          <>
+            {loading && <Spinner size={16} color="currentColor" thickness={3} />}
+            {!loading && leftIcon && <span className="inline-flex shrink-0">{leftIcon}</span>}
+            {childProps.children}
+            {!loading && rightIcon && <span className="inline-flex shrink-0">{rightIcon}</span>}
+          </>
+        ),
+      });
+    }
+
     return (
       <button
         ref={ref}
         disabled={disabled || loading}
-        className={cn(
-          'button',
-          `button--${variant}-${color}`,
-          `button--${size}`,
-          {
-            "button--loading": loading,
-            "button--with-text": !isIconOnly,
-            "button--with-text-sm": size === 'sm' && !isIconOnly,
-            "button--with-text-lg": size === 'lg' && !isIconOnly,
-            "button--icon-only": isIconOnly,
-          },
-          className
-        )}
+        className={classes}
         {...props}
       >
         {loading && <Spinner size={16} color="currentColor" thickness={3} />}
diff --git a/src/dashkit/Combobox/Combobox.tsx b/src/dashkit/Combobox/Combobox.tsx
index 06ff4d5..fcd9abe 100644
--- a/src/dashkit/Combobox/Combobox.tsx
+++ b/src/dashkit/Combobox/Combobox.tsx
@@ -47,6 +47,7 @@ export function Combobox({
     containerRef,
     inputWrapperRef,
     inputRef,
+    portalRef,
     selectedOptions,
     filteredOptions,
     handleSelect,
@@ -148,7 +149,7 @@ export function Combobox({
 
         {isOpen && triggerRect && createPortal(
           <div
-            id="dashkit-combobox-portal"
+            ref={portalRef}
             role="listbox"
             style={{
               position: 'fixed',
diff --git a/src/dashkit/Combobox/useCombobox.ts b/src/dashkit/Combobox/useCombobox.ts
index c66961b..815beca 100644
--- a/src/dashkit/Combobox/useCombobox.ts
+++ b/src/dashkit/Combobox/useCombobox.ts
@@ -26,6 +26,7 @@ export function useCombobox({
   const containerRef = useRef<HTMLDivElement>(null);
   const inputWrapperRef = useRef<HTMLDivElement>(null);
   const inputRef = useRef<HTMLInputElement>(null);
+  const portalRef = useRef<HTMLDivElement>(null);
 
   const selectedOptions = useMemo(() => {
     if (multiple && Array.isArray(value)) {
@@ -86,7 +87,7 @@ export function useCombobox({
 
   useEffect(() => {
     const handleClickOutside = (event: MouseEvent) => {
-      const menu = document.getElementById('dashkit-combobox-portal');
+      const menu = portalRef.current;
       if (
         containerRef.current && !containerRef.current.contains(event.target as Node) &&
         (!menu || !menu.contains(event.target as Node))
@@ -96,7 +97,7 @@ export function useCombobox({
     };
 
     const handleScroll = (event: Event) => {
-      const menu = document.getElementById('dashkit-combobox-portal');
+      const menu = portalRef.current;
       if (isOpen && menu && !menu.contains(event.target as Node)) {
         setIsOpen(false);
       }
@@ -177,6 +178,7 @@ export function useCombobox({
     containerRef,
     inputWrapperRef,
     inputRef,
+    portalRef,
     selectedOptions,
     filteredOptions,
     handleSelect,
diff --git a/src/dashkit/DatePicker/DatePicker.tsx b/src/dashkit/DatePicker/DatePicker.tsx
index 64751ac..a7de54a 100644
--- a/src/dashkit/DatePicker/DatePicker.tsx
+++ b/src/dashkit/DatePicker/DatePicker.tsx
@@ -30,6 +30,7 @@ export function DatePicker({
     position,
     containerRef,
     buttonRef,
+    portalRef,
     toggleOpen,
     currentMonth,
     currentYear,
@@ -69,7 +70,7 @@ export function DatePicker({
 
         {isOpen && triggerRect && createPortal(
           <div
-            id="dashkit-datepicker-portal"
+            ref={portalRef}
             style={{
               position: 'fixed',
               top: position === 'bottom' ? triggerRect.bottom + 8 : triggerRect.top - 8,
diff --git a/src/dashkit/DatePicker/useDatePicker.ts b/src/dashkit/DatePicker/useDatePicker.ts
index 681937f..879e86b 100644
--- a/src/dashkit/DatePicker/useDatePicker.ts
+++ b/src/dashkit/DatePicker/useDatePicker.ts
@@ -20,6 +20,7 @@ export function useDatePicker({ value, onChange, disabled }: UseDatePickerProps)
   const [position, setPosition] = useState<'bottom' | 'top'>('bottom');
   const containerRef = useRef<HTMLDivElement>(null);
   const buttonRef = useRef<HTMLButtonElement>(null);
+  const portalRef = useRef<HTMLDivElement>(null);
 
   const toggleOpen = () => {
     if (disabled) return;
@@ -42,7 +43,7 @@ export function useDatePicker({ value, onChange, disabled }: UseDatePickerProps)
 
   useEffect(() => {
     const handleClickOutside = (event: MouseEvent) => {
-      const menu = document.getElementById('dashkit-datepicker-portal');
+      const menu = portalRef.current;
       if (
         containerRef.current && !containerRef.current.contains(event.target as Node) &&
         (!menu || !menu.contains(event.target as Node))
@@ -127,6 +128,7 @@ export function useDatePicker({ value, onChange, disabled }: UseDatePickerProps)
     position,
     containerRef,
     buttonRef,
+    portalRef,
     toggleOpen,
     currentMonth,
     currentYear,
diff --git a/src/dashkit/Drawer/Drawer.test.tsx b/src/dashkit/Drawer/Drawer.test.tsx
index 8a1fd87..557e82d 100644
--- a/src/dashkit/Drawer/Drawer.test.tsx
+++ b/src/dashkit/Drawer/Drawer.test.tsx
@@ -47,6 +47,19 @@ describe('Drawer', () => {
     expect(screen.getByText('Test Title')).toBeInTheDocument();
     expect(screen.getByText('Test Desc')).toBeInTheDocument();
   });
+
+  it('calls onClose exactly once when Escape is pressed', () => {
+    const handleClose = vi.fn();
+    render(
+      <Drawer isOpen={true} onClose={handleClose}>
+        <div>Content</div>
+      </Drawer>
+    );
+
+    fireEvent.keyDown(window, { key: 'Escape' });
+
+    expect(handleClose).toHaveBeenCalledTimes(1);
+  });
 });
 
 
diff --git a/src/dashkit/Drawer/useDrawer.ts b/src/dashkit/Drawer/useDrawer.ts
index 95c6b31..856b7e4 100644
--- a/src/dashkit/Drawer/useDrawer.ts
+++ b/src/dashkit/Drawer/useDrawer.ts
@@ -1,5 +1,6 @@
 import { useEffect } from 'react';
 import { type Variants, type PanInfo } from 'framer-motion';
+import { lockBodyScroll } from '../utils/scrollLock';
 
 export type DrawerPosition = 'left' | 'right' | 'top' | 'bottom';
 
@@ -36,15 +37,19 @@ export interface UseDrawerProps {
 
 export function useDrawer({ isOpen, onClose, position }: UseDrawerProps) {
   useEffect(() => {
+    if (!isOpen) return;
+    return lockBodyScroll();
+  }, [isOpen]);
+
+  useEffect(() => {
+    const handleEsc = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') onClose();
+    };
     if (isOpen) {
-      document.body.style.overflow = 'hidden';
-    } else {
-      document.body.style.overflow = 'unset';
+      window.addEventListener('keydown', handleEsc);
     }
-    return () => {
-      document.body.style.overflow = 'unset';
-    };
-  }, [isOpen]);
+    return () => window.removeEventListener('keydown', handleEsc);
+  }, [isOpen, onClose]);
 
 
 
diff --git a/src/dashkit/Dropdown/Dropdown.tsx b/src/dashkit/Dropdown/Dropdown.tsx
index 1eda35c..34eafb0 100644
--- a/src/dashkit/Dropdown/Dropdown.tsx
+++ b/src/dashkit/Dropdown/Dropdown.tsx
@@ -14,7 +14,8 @@ export function Dropdown({ children }: DropdownProps) {
     setTriggerRect,
     triggerElement,
     setTriggerElement,
-    containerRef
+    containerRef,
+    portalRef
   } = useDropdown();
 
   return (
@@ -24,7 +25,8 @@ export function Dropdown({ children }: DropdownProps) {
       triggerRect,
       setTriggerRect,
       triggerElement,
-      setTriggerElement
+      setTriggerElement,
+      portalRef
     }}>
       <div className="dropdown" ref={containerRef}>
         {children}
diff --git a/src/dashkit/Dropdown/DropdownContent.tsx b/src/dashkit/Dropdown/DropdownContent.tsx
index 53afed7..1d8787e 100644
--- a/src/dashkit/Dropdown/DropdownContent.tsx
+++ b/src/dashkit/Dropdown/DropdownContent.tsx
@@ -19,15 +19,14 @@ export function DropdownContent({
   side = 'bottom',
   sideOffset = 8
 }: DropdownContentProps) {
-  const { open, triggerElement, setTriggerRect, triggerRect } = useDropdownContext();
+  const { open, triggerElement, setTriggerRect, triggerRect, portalRef } = useDropdownContext();
   const [contentRect, setContentRect] = React.useState<DOMRect | null>(null);
-  const contentRef = React.useRef<HTMLDivElement>(null);
 
   React.useLayoutEffect(() => {
-    if (open && contentRef.current) {
-      setContentRect(contentRef.current.getBoundingClientRect());
+    if (open && portalRef.current) {
+      setContentRect(portalRef.current.getBoundingClientRect());
     }
-  }, [open]);
+  }, [open, portalRef]);
 
   React.useEffect(() => {
     if (!open) return;
@@ -105,8 +104,7 @@ export function DropdownContent({
 
   return createPortal(
     <div
-      ref={contentRef}
-      id="dashkit-dropdown-portal"
+      ref={portalRef}
       style={style}
       className={cn(
         "dropdown-content",
diff --git a/src/dashkit/Dropdown/useDropdown.ts b/src/dashkit/Dropdown/useDropdown.ts
index c05f077..b6329b0 100644
--- a/src/dashkit/Dropdown/useDropdown.ts
+++ b/src/dashkit/Dropdown/useDropdown.ts
@@ -7,6 +7,7 @@ export interface DropdownContextValue {
   setTriggerRect: (rect: DOMRect | null) => void;
   triggerElement: HTMLElement | null;
   setTriggerElement: (el: HTMLElement | null) => void;
+  portalRef: React.RefObject<HTMLDivElement | null>;
 }
 
 export const DropdownContext = React.createContext<DropdownContextValue | undefined>(undefined);
@@ -24,10 +25,11 @@ export function useDropdown() {
   const [triggerRect, setTriggerRect] = React.useState<DOMRect | null>(null);
   const [triggerElement, setTriggerElement] = React.useState<HTMLElement | null>(null);
   const containerRef = React.useRef<HTMLDivElement>(null);
+  const portalRef = React.useRef<HTMLDivElement>(null);
 
   React.useEffect(() => {
     const handleClickOutside = (event: MouseEvent) => {
-      const menu = document.getElementById('dashkit-dropdown-portal');
+      const menu = portalRef.current;
       if (
         containerRef.current && !containerRef.current.contains(event.target as Node) &&
         (!menu || !menu.contains(event.target as Node))
@@ -64,6 +66,7 @@ export function useDropdown() {
     setTriggerRect,
     triggerElement,
     setTriggerElement,
-    containerRef
+    containerRef,
+    portalRef
   };
 }
diff --git a/src/dashkit/ImageExpander/useImageExpander.ts b/src/dashkit/ImageExpander/useImageExpander.ts
index 5413c5c..7aba505 100644
--- a/src/dashkit/ImageExpander/useImageExpander.ts
+++ b/src/dashkit/ImageExpander/useImageExpander.ts
@@ -1,4 +1,5 @@
 import { useState, useEffect } from 'react';
+import { lockBodyScroll } from '../utils/scrollLock';
 
 export function useImageExpander() {
   const [isOpen, setIsOpen] = useState(false);
@@ -8,14 +9,14 @@ export function useImageExpander() {
       if (e.key === 'Escape') setIsOpen(false);
     };
 
-    if (isOpen) {
-      window.addEventListener('keydown', handleKeyDown);
-      document.body.style.overflow = 'hidden';
-    }
+    if (!isOpen) return;
+
+    window.addEventListener('keydown', handleKeyDown);
+    const releaseScroll = lockBodyScroll();
 
     return () => {
       window.removeEventListener('keydown', handleKeyDown);
-      document.body.style.overflow = 'unset';
+      releaseScroll();
     };
   }, [isOpen]);
 
diff --git a/src/dashkit/Modal/Modal.test.tsx b/src/dashkit/Modal/Modal.test.tsx
index 80bce82..240d2f0 100644
--- a/src/dashkit/Modal/Modal.test.tsx
+++ b/src/dashkit/Modal/Modal.test.tsx
@@ -1,5 +1,5 @@
 import { render, screen, fireEvent } from '@testing-library/react';
-import { describe, it, expect, vi } from 'vitest';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
 import { Modal, ModalHeader, ModalContent, ModalFooter } from './index';
 import type { ReactNode } from 'react';
 
@@ -16,6 +16,10 @@ vi.mock('framer-motion', () => ({
 describe('Modal', () => {
   const onClose = vi.fn();
 
+  beforeEach(() => {
+    onClose.mockClear();
+  });
+
   it('renders children when isOpen is true', () => {
     render(
       <Modal isOpen={true} onClose={onClose}>
@@ -108,7 +112,7 @@ describe('Modal', () => {
     );
 
     fireEvent.keyDown(window, { key: 'Escape', code: 'Escape' });
-    expect(onClose).toHaveBeenCalled();
+    expect(onClose).toHaveBeenCalledTimes(1);
   });
 
   it('locks body scroll when open', () => {
@@ -126,7 +130,8 @@ describe('Modal', () => {
       </Modal>
     );
 
-    expect(document.body.style.overflow).toBe('unset');
+    // Releasing the lock removes the inline style instead of forcing 'unset'
+    expect(document.body.style.overflow).toBe('');
   });
 });
 
diff --git a/src/dashkit/Modal/useModal.ts b/src/dashkit/Modal/useModal.ts
index f6b6a9c..bca8200 100644
--- a/src/dashkit/Modal/useModal.ts
+++ b/src/dashkit/Modal/useModal.ts
@@ -1,4 +1,5 @@
 import { useEffect } from 'react';
+import { lockBodyScroll } from '../utils/scrollLock';
 
 export interface UseModalProps {
   isOpen: boolean;
@@ -7,14 +8,8 @@ export interface UseModalProps {
 
 export function useModal({ isOpen, onClose }: UseModalProps) {
   useEffect(() => {
-    if (isOpen) {
-      document.body.style.overflow = 'hidden';
-    } else {
-      document.body.style.overflow = 'unset';
-    }
-    return () => {
-      document.body.style.overflow = 'unset';
-    };
+    if (!isOpen) return;
+    return lockBodyScroll();
   }, [isOpen]);
 
   useEffect(() => {
diff --git a/src/dashkit/PieChart/PieChart.tsx b/src/dashkit/PieChart/PieChart.tsx
index 0f8b62c..9a18e7f 100644
--- a/src/dashkit/PieChart/PieChart.tsx
+++ b/src/dashkit/PieChart/PieChart.tsx
@@ -11,11 +11,11 @@ export interface PieChartDataItem {
 }
 
 const DEFAULT_COLORS = [
-  'var(--color-primary)',
-  'var(--color-primary-400)',
-  'var(--color-primary-200)',
-  'var(--color-primary-800)',
-  'var(--color-primary-300)',
+  'var(--color-ds-primary-600)',
+  'var(--color-ds-primary-400)',
+  'var(--color-ds-primary-200)',
+  'var(--color-ds-primary-800)',
+  'var(--color-ds-primary-300)',
 ];
 
 export interface PieChartProps {
diff --git a/src/dashkit/Popover/Popover.tsx b/src/dashkit/Popover/Popover.tsx
index 24c7c0d..f6801ab 100644
--- a/src/dashkit/Popover/Popover.tsx
+++ b/src/dashkit/Popover/Popover.tsx
@@ -14,7 +14,8 @@ export function Popover({ children, trigger = 'click' }: PopoverProps) {
     setTriggerRect,
     triggerElement,
     setTriggerElement,
-    containerRef
+    containerRef,
+    portalRef
   } = usePopover();
 
   const closeTimer = React.useRef<number | null>(null);
@@ -52,7 +53,8 @@ export function Popover({ children, trigger = 'click' }: PopoverProps) {
         setTriggerElement,
         triggerMode: trigger,
         onMouseEnter,
-        onMouseLeave
+        onMouseLeave,
+        portalRef
     }}>
       <div className="relative inline-block text-left" ref={containerRef}>
         {children}
diff --git a/src/dashkit/Popover/PopoverContent.tsx b/src/dashkit/Popover/PopoverContent.tsx
index 2c0b24f..10ab2b8 100644
--- a/src/dashkit/Popover/PopoverContent.tsx
+++ b/src/dashkit/Popover/PopoverContent.tsx
@@ -21,15 +21,14 @@ export function PopoverContent({
     side = 'bottom',
     sideOffset = 8
 }: PopoverContentProps) {
-  const { open, triggerElement, setTriggerRect, triggerRect, triggerMode, onMouseEnter, onMouseLeave } = usePopoverContext();
+  const { open, triggerElement, setTriggerRect, triggerRect, triggerMode, onMouseEnter, onMouseLeave, portalRef } = usePopoverContext();
   const [contentRect, setContentRect] = React.useState<DOMRect | null>(null);
-  const contentRef = React.useRef<HTMLDivElement>(null);
 
   React.useLayoutEffect(() => {
-    if (open && contentRef.current) {
-        setContentRect(contentRef.current.getBoundingClientRect());
+    if (open && portalRef.current) {
+        setContentRect(portalRef.current.getBoundingClientRect());
     }
-  }, [open]);
+  }, [open, portalRef]);
 
   React.useEffect(() => {
     if (!open) return;
@@ -108,8 +107,7 @@ export function PopoverContent({
     <AnimatePresence>
       {open && (
         <motion.div
-           ref={contentRef}
-           id="dashkit-popover-portal"
+           ref={portalRef}
            initial={{ opacity: 0, scale: 0.95, y: animProps.y, x: animProps.x }}
            animate={{ opacity: 1, scale: 1, y: 0, x: 0 }}
            exit={{ opacity: 0, scale: 0.95, y: animProps.y, x: animProps.x }}
diff --git a/src/dashkit/Popover/usePopover.ts b/src/dashkit/Popover/usePopover.ts
index 1d53740..b5446ad 100644
--- a/src/dashkit/Popover/usePopover.ts
+++ b/src/dashkit/Popover/usePopover.ts
@@ -12,6 +12,7 @@ export interface PopoverContextValue {
   triggerMode: PopoverTriggerMode;
   onMouseEnter?: () => void;
   onMouseLeave?: () => void;
+  portalRef: React.RefObject<HTMLDivElement | null>;
 }
 
 export const PopoverContext = React.createContext<PopoverContextValue | undefined>(undefined);
@@ -29,10 +30,11 @@ export function usePopover() {
   const [triggerRect, setTriggerRect] = React.useState<DOMRect | null>(null);
   const [triggerElement, setTriggerElement] = React.useState<HTMLElement | null>(null);
   const containerRef = React.useRef<HTMLDivElement>(null);
+  const portalRef = React.useRef<HTMLDivElement>(null);
 
   React.useEffect(() => {
     const handleClickOutside = (event: MouseEvent) => {
-      const popover = document.getElementById('dashkit-popover-portal');
+      const popover = portalRef.current;
       if (
         containerRef.current && !containerRef.current.contains(event.target as Node) &&
         (!popover || !popover.contains(event.target as Node))
@@ -69,6 +71,7 @@ export function usePopover() {
     setTriggerRect,
     triggerElement,
     setTriggerElement,
-    containerRef
+    containerRef,
+    portalRef
   };
 }
diff --git a/src/dashkit/Select/Select.tsx b/src/dashkit/Select/Select.tsx
index 1b827df..424b6b7 100644
--- a/src/dashkit/Select/Select.tsx
+++ b/src/dashkit/Select/Select.tsx
@@ -38,6 +38,7 @@ export function Select({
     side,
     containerRef,
     buttonRef,
+    portalRef,
     selectedOption,
     handleKeyDown
   } = useSelect({ options, value, disabled });
@@ -74,7 +75,7 @@ export function Select({
 
         {isOpen && triggerRect && createPortal(
           <div
-            id="dashkit-select-portal"
+            ref={portalRef}
             role="listbox"
             style={{
               position: 'fixed',
diff --git a/src/dashkit/Select/useSelect.ts b/src/dashkit/Select/useSelect.ts
index 2ad16a0..9d559be 100644
--- a/src/dashkit/Select/useSelect.ts
+++ b/src/dashkit/Select/useSelect.ts
@@ -13,6 +13,7 @@ export function useSelect({ options, value, disabled }: UseSelectProps) {
   const [side, setSide] = useState<'top' | 'bottom'>('bottom');
   const containerRef = useRef<HTMLDivElement>(null);
   const buttonRef = useRef<HTMLButtonElement>(null);
+  const portalRef = useRef<HTMLDivElement>(null);
 
   const selectedOption = options.find(opt => opt.value === value);
 
@@ -34,7 +35,7 @@ export function useSelect({ options, value, disabled }: UseSelectProps) {
     };
 
     const handleScroll = (event: Event) => {
-      const menu = document.getElementById('dashkit-select-portal');
+      const menu = portalRef.current;
       if (isOpen && menu && !menu.contains(event.target as Node)) {
         setIsOpen(false);
       }
@@ -48,13 +49,13 @@ export function useSelect({ options, value, disabled }: UseSelectProps) {
 
     return () => {
       window.removeEventListener('resize', updateRect);
-      window.removeEventListener('scroll', () => setIsOpen(false), true);
+      window.removeEventListener('scroll', handleScroll, true);
     };
   }, [isOpen]);
 
   useEffect(() => {
     const handleClickOutside = (event: MouseEvent) => {
-      const menu = document.getElementById('dashkit-select-portal');
+      const menu = portalRef.current;
       if (
         containerRef.current && !containerRef.current.contains(event.target as Node) &&
         (!menu || !menu.contains(event.target as Node))
@@ -89,6 +90,7 @@ export function useSelect({ options, value, disabled }: UseSelectProps) {
     side,
     containerRef,
     buttonRef,
+    portalRef,
     selectedOption,
     handleKeyDown
   };
diff --git a/src/dashkit/utils/scrollLock.test.ts b/src/dashkit/utils/scrollLock.test.ts
new file mode 100644
index 0000000..745fc56
--- /dev/null
+++ b/src/dashkit/utils/scrollLock.test.ts
@@ -0,0 +1,52 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import { lockBodyScroll } from './scrollLock';
+
+describe('lockBodyScroll', () => {
+  beforeEach(() => {
+    document.body.style.overflow = '';
+  });
+
+  it('locks the body on first acquire and restores on last release', () => {
+    const release = lockBodyScroll();
+    expect(document.body.style.overflow).toBe('hidden');
+
+    release();
+    expect(document.body.style.overflow).toBe('');
+  });
+
+  it('keeps the body locked while a stacked overlay holds a lock', () => {
+    // e.g. a Drawer opened on top of a Modal
+    const releaseModal = lockBodyScroll();
+    const releaseDrawer = lockBodyScroll();
+
+    // Closing the Drawer must not unlock the page (Modal is still open)
+    releaseDrawer();
+    expect(document.body.style.overflow).toBe('hidden');
+
+    releaseModal();
+    expect(document.body.style.overflow).toBe('');
+  });
+
+  it('ignores repeated releases from the same lock', () => {
+    const releaseOuter = lockBodyScroll();
+    const releaseInner = lockBodyScroll();
+
+    releaseInner();
+    releaseInner(); // double cleanup must not drop the outer lock
+
+    expect(document.body.style.overflow).toBe('hidden');
+
+    releaseOuter();
+    expect(document.body.style.overflow).toBe('');
+  });
+
+  it('restores a previously set overflow value', () => {
+    document.body.style.overflow = 'scroll';
+
+    const release = lockBodyScroll();
+    expect(document.body.style.overflow).toBe('hidden');
+
+    release();
+    expect(document.body.style.overflow).toBe('scroll');
+  });
+});
diff --git a/src/dashkit/utils/scrollLock.ts b/src/dashkit/utils/scrollLock.ts
new file mode 100644
index 0000000..ece390a
--- /dev/null
+++ b/src/dashkit/utils/scrollLock.ts
@@ -0,0 +1,28 @@
+let lockCount = 0;
+let previousOverflow = '';
+
+/**
+ * Lock body scroll with reference counting, so stacked overlays (e.g. a Drawer
+ * opened over a Modal) keep the page locked until the last one closes.
+ *
+ * Returns a release function that must be called on cleanup; it is safe to
+ * call more than once.
+ */
+export function lockBodyScroll(): () => void {
+  if (lockCount === 0) {
+    previousOverflow = document.body.style.overflow;
+    document.body.style.overflow = 'hidden';
+  }
+  lockCount += 1;
+
+  let released = false;
+  return () => {
+    if (released) return;
+    released = true;
+
+    lockCount = Math.max(0, lockCount - 1);
+    if (lockCount === 0) {
+      document.body.style.overflow = previousOverflow;
+    }
+  };
+}
diff --git a/src/pages/NotFound.tsx b/src/pages/NotFound.tsx
index 5666410..48ed3b2 100644
--- a/src/pages/NotFound.tsx
+++ b/src/pages/NotFound.tsx
@@ -23,11 +23,9 @@ export function NotFound() {
             </p>
           </div>
 
-          <Link to="/">
-            <Button variant="filled" leftIcon={<FiArrowLeft />}>
-              Back to Home
-            </Button>
-          </Link>
+          <Button asChild variant="filled" leftIcon={<FiArrowLeft />}>
+            <Link to="/">Back to Home</Link>
+          </Button>
         </div>
       </main>
     </div>