@boostdev/design-system-components 1.0.2 → 1.1.0

package/src/components/interaction/DropdownMenu/DropdownMenu.tsx

@@ -10,6 +10,7 @@ import {
 } from 'react';
 import css from './DropdownMenu.module.css';
 import { cn } from '@boostdev/design-system-foundation';
+import type { WithClassName } from '../../../types';
 
 export interface DropdownMenuItem {
   id: string;
@@ -20,11 +21,10 @@ export interface DropdownMenuItem {
   separator?: boolean;
 }
 
-interface DropdownMenuProps {
+interface DropdownMenuProps extends WithClassName {
   trigger: ReactElement;
   items: DropdownMenuItem[];
   placement?: 'bottom-start' | 'bottom-end';
-  className?: string;
 }
 
 export function DropdownMenu({

package/src/components/interaction/Popover/Popover.mdx

@@ -27,6 +27,23 @@ Floating panel anchored to a trigger element. Unlike `Tooltip`, popovers can con
 
 <ArgTypes of={Stories} />
 
+## CSS variables
+
+
+<table>
+<thead>
+<tr><th>Variable</th><th>Default</th><th>Description</th></tr>
+</thead>
+<tbody>
+<tr><td>`--popover_color`</td><td>`var(--bds-color_bg)`</td><td>Panel background colour</td></tr>
+<tr><td>`--popover_on-color`</td><td>`var(--bds-color_on-bg)`</td><td>Text colour</td></tr>
+<tr><td>`--popover_shadow`</td><td>`var(--bds-shadow_m)`</td><td>Panel box shadow</td></tr>
+<tr><td>`--popover_border`</td><td>`none`</td><td>Panel border</td></tr>
+<tr><td>`--popover_radius`</td><td>`var(--bdc-outline_radius)`</td><td>Panel corner radius</td></tr>
+</tbody>
+</table>
+
+
 ## Accessibility
 
 - Trigger element gets `aria-haspopup="true"` and `aria-expanded` toggled on open/close

package/src/components/interaction/Popover/Popover.module.css

@@ -5,8 +5,13 @@
   }
 
   .panel {
+    /* Absolute positioning keeps the panel anchored to the wrapper/trigger and
+       scrolls with the page. CSS anchor positioning sets the exact placement;
+       @position-try fallbacks handle automatic repositioning on overflow. */
     position: absolute;
-    z-index: var(--bds-z-index_popover);
+    margin: 0;
+    overflow-y: auto;
+    z-index: var(--popover_z-index, 100);
     min-width: 12rem;
     padding: var(--bds-space_m);
     border: var(--popover_border, none);
@@ -16,29 +21,81 @@
     outline: var(--bdc-outline_width) solid var(--bdc_color);
     outline-offset: var(--bdc-outline_offset);
     border-radius: var(--popover_radius, var(--bdc-outline_radius));
-    background-color: var(--popover_color, var(--bds-bg));
+    background-color: var(--popover_color, var(--bds-color_bg));
     box-shadow: var(--popover_shadow, var(--bds-shadow_m));
-    color: var(--popover_on-color, var(--bds-on-bg));
+    color: var(--popover_on-color, var(--bds-color_on-bg));
     font-size: var(--bds-font_size--body);
   }
 
-  .--placement_bottom {
-    top: calc(100% + var(--bds-space_xs));
-    left: 0;
+  /* Primary placements via CSS anchor positioning.
+     anchor() resolves relative to the element tagged with the matching anchor-name.
+     @position-try fallbacks are tried in order when the primary placement overflows. */
+
+  .panel[data-placement='bottom'] {
+    top: anchor(bottom);
+    left: anchor(left);
+    margin-top: var(--bds-space_xs, 8px);
+    position-try-fallbacks: --popover-top, --popover-right, --popover-left;
+  }
+
+  .panel[data-placement='top'] {
+    bottom: anchor(top);
+    left: anchor(left);
+    margin-bottom: var(--bds-space_xs, 8px);
+    position-try-fallbacks: --popover-bottom, --popover-right, --popover-left;
+  }
+
+  .panel[data-placement='right'] {
+    top: anchor(top);
+    left: anchor(right);
+    margin-left: var(--bds-space_xs, 8px);
+    position-try-fallbacks: --popover-left, --popover-bottom, --popover-top;
+  }
+
+  .panel[data-placement='left'] {
+    top: anchor(top);
+    right: anchor(left);
+    margin-right: var(--bds-space_xs, 8px);
+    position-try-fallbacks: --popover-right, --popover-bottom, --popover-top;
+  }
+
+  /* Fallback placements — used by the browser (or polyfill) when the primary
+     placement would overflow the viewport. Each block resets all inset/margin
+     properties so nothing bleeds in from the primary placement. */
+
+  @position-try --popover-bottom {
+    top: anchor(bottom);
+    right: unset;
+    bottom: unset;
+    left: anchor(left);
+    margin: 0;
+    margin-top: var(--bds-space_xs, 8px);
   }
 
-  .--placement_top {
-    bottom: calc(100% + var(--bds-space_xs));
-    left: 0;
+  @position-try --popover-top {
+    top: unset;
+    right: unset;
+    bottom: anchor(top);
+    left: anchor(left);
+    margin: 0;
+    margin-bottom: var(--bds-space_xs, 8px);
   }
 
-  .--placement_right {
-    left: calc(100% + var(--bds-space_xs));
-    top: 0;
+  @position-try --popover-right {
+    top: anchor(top);
+    right: unset;
+    bottom: unset;
+    left: anchor(right);
+    margin: 0;
+    margin-left: var(--bds-space_xs, 8px);
   }
 
-  .--placement_left {
-    right: calc(100% + var(--bds-space_xs));
-    top: 0;
+  @position-try --popover-left {
+    top: anchor(top);
+    right: anchor(left);
+    bottom: unset;
+    left: unset;
+    margin: 0;
+    margin-right: var(--bds-space_xs, 8px);
   }
 }

package/src/components/interaction/Popover/Popover.spec.tsx

@@ -2,6 +2,15 @@ import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { Popover } from './Popover';
 
+// jsdom doesn't implement CSS.supports — provide a minimal stub so the
+// polyfill guard in Popover.tsx doesn't throw.
+beforeAll(() => {
+  Object.defineProperty(globalThis, 'CSS', {
+    value: { supports: () => true },
+    configurable: true,
+  });
+});
+
 describe('Popover', () => {
   it('renders the trigger', () => {
     render(
@@ -18,7 +27,9 @@ describe('Popover', () => {
         <button type="button">Open</button>
       </Popover>
     );
-    expect(screen.queryByText('Panel content')).not.toBeInTheDocument();
+    // The dialog element is always in DOM; closed state = no open attribute.
+    const dialog = document.querySelector('dialog');
+    expect(dialog).not.toHaveAttribute('open');
   });
 
   it('shows the panel when trigger is clicked', async () => {
@@ -29,7 +40,7 @@ describe('Popover', () => {
       </Popover>
     );
     await user.click(screen.getByRole('button', { name: 'Open' }));
-    expect(screen.getByText('Panel content')).toBeInTheDocument();
+    expect(document.querySelector('dialog')).toHaveAttribute('open');
   });
 
   it('closes the panel when trigger is clicked again', async () => {
@@ -41,7 +52,7 @@ describe('Popover', () => {
     );
     await user.click(screen.getByRole('button', { name: 'Toggle' }));
     await user.click(screen.getByRole('button', { name: 'Toggle' }));
-    expect(screen.queryByText('Panel content')).not.toBeInTheDocument();
+    expect(document.querySelector('dialog')).not.toHaveAttribute('open');
   });
 
   it('closes the panel when Escape is pressed', async () => {
@@ -53,7 +64,7 @@ describe('Popover', () => {
     );
     await user.click(screen.getByRole('button', { name: 'Open' }));
     await user.keyboard('{Escape}');
-    expect(screen.queryByText('Panel content')).not.toBeInTheDocument();
+    expect(document.querySelector('dialog')).not.toHaveAttribute('open');
   });
 
   it('sets aria-expanded on the trigger when open', async () => {
@@ -69,6 +80,21 @@ describe('Popover', () => {
     expect(trigger).toHaveAttribute('aria-expanded', 'true');
   });
 
+  it('sets anchor-name on the trigger and position-anchor on the panel', () => {
+    render(
+      <Popover content={<p>Panel</p>}>
+        <button type="button">Open</button>
+      </Popover>
+    );
+    const trigger = screen.getByRole('button');
+    const dialog = document.querySelector('dialog')!;
+    // Both should reference the same CSS anchor ident.
+    const anchorName = trigger.style.getPropertyValue('anchor-name');
+    const positionAnchor = dialog.style.getPropertyValue('position-anchor');
+    expect(anchorName).toMatch(/^--popover-/);
+    expect(positionAnchor).toBe(anchorName);
+  });
+
   it('renders role="region" with aria-label when aria-label prop is provided', async () => {
     const user = userEvent.setup();
     render(
@@ -90,4 +116,42 @@ describe('Popover', () => {
     await user.click(screen.getByRole('button', { name: 'Open' }));
     expect(screen.queryByRole('region')).not.toBeInTheDocument();
   });
+
+  it('constrains maxHeight when trigger is near the bottom of the viewport', async () => {
+    const user = userEvent.setup();
+    Object.defineProperty(window, 'innerHeight', { value: 600, configurable: true });
+    Object.defineProperty(window, 'innerWidth', { value: 1024, configurable: true });
+    vi.spyOn(HTMLElement.prototype, 'getBoundingClientRect').mockReturnValue({
+      top: 530, bottom: 550, left: 100, right: 200, width: 100, height: 20,
+      x: 100, y: 530, toJSON: () => {},
+    });
+    render(
+      <Popover content={<p>Panel</p>} placement="bottom">
+        <button type="button">Open</button>
+      </Popover>
+    );
+    await user.click(screen.getByRole('button', { name: 'Open' }));
+    const dialog = document.querySelector('dialog')!;
+    // max-height = vh - rect.bottom - GAP * 2 = 600 - 550 - 16 = 34
+    expect(dialog.style.maxHeight).toBe('34px');
+  });
+
+  it('constrains maxWidth when trigger is near the right edge of the viewport', async () => {
+    const user = userEvent.setup();
+    Object.defineProperty(window, 'innerHeight', { value: 600, configurable: true });
+    Object.defineProperty(window, 'innerWidth', { value: 400, configurable: true });
+    vi.spyOn(HTMLElement.prototype, 'getBoundingClientRect').mockReturnValue({
+      top: 100, bottom: 120, left: 350, right: 390, width: 40, height: 20,
+      x: 350, y: 100, toJSON: () => {},
+    });
+    render(
+      <Popover content={<p>Panel</p>} placement="bottom">
+        <button type="button">Open</button>
+      </Popover>
+    );
+    await user.click(screen.getByRole('button', { name: 'Open' }));
+    const dialog = document.querySelector('dialog')!;
+    // max-width = vw - rect.left - GAP = 400 - 350 - 8 = 42
+    expect(dialog.style.maxWidth).toBe('42px');
+  });
 });

package/src/components/interaction/Popover/Popover.stories.tsx

@@ -3,7 +3,7 @@ import { Popover } from './Popover';
 import { Button } from '../Button/Button';
 
 const meta = {
-  title: 'Interaction/Popover',
+  title: 'React/Interaction/Popover',
   component: Popover,
   argTypes: {
     placement: { control: 'radio', options: ['top', 'bottom', 'left', 'right'] },

package/src/components/interaction/Popover/Popover.tsx

@@ -3,6 +3,7 @@ import {
   ReactNode,
   cloneElement,
   isValidElement,
+  useCallback,
   useEffect,
   useId,
   useRef,
@@ -10,12 +11,23 @@ import {
 } from 'react';
 import css from './Popover.module.css';
 import { cn } from '@boostdev/design-system-foundation';
+import type { WithClassName } from '../../../types';
 
-interface PopoverProps {
+const GAP = 8; // --bds-space_xs
+
+// Load the CSS Anchor Positioning polyfill once, only in browsers that need it.
+// The CSS.supports guard is defensive: older environments may not expose it at all.
+if (
+  typeof window !== 'undefined' &&
+  !(typeof CSS !== 'undefined' && typeof CSS.supports === 'function' && CSS.supports('anchor-name: --a'))
+) {
+  import('@oddbird/css-anchor-positioning').catch(() => {});
+}
+
+interface PopoverProps extends WithClassName {
   children: ReactElement;
   content: ReactNode;
   placement?: 'top' | 'bottom' | 'left' | 'right';
-  className?: string;
   'aria-label'?: string;
 }
 
@@ -28,35 +40,77 @@ export function Popover({
 }: Readonly<PopoverProps>) {
   const [isOpen, setIsOpen] = useState(false);
   const containerRef = useRef<HTMLSpanElement>(null);
-  const panelId = useId();
+  const dialogRef = useRef<HTMLDialogElement>(null);
+  const rawId = useId();
+  // CSS anchor-name must be a valid custom-ident: strip non-word characters.
+  const anchorName = `--popover-${rawId.replace(/\W/g, '') || 'a'}`;
+  const panelId = rawId;
 
+  // Light-dismiss: close on outside click or Escape key.
   useEffect(() => {
     if (!isOpen) return;
-
-    const handlePointerDown = (e: PointerEvent) => {
-      if (!containerRef.current?.contains(e.target as Node)) {
+    const handleMouseDown = (e: MouseEvent) => {
+      if (containerRef.current && !containerRef.current.contains(e.target as Node)) {
         setIsOpen(false);
       }
     };
     const handleKeyDown = (e: KeyboardEvent) => {
       if (e.key === 'Escape') setIsOpen(false);
     };
-
-    document.addEventListener('pointerdown', handlePointerDown);
+    document.addEventListener('mousedown', handleMouseDown);
     document.addEventListener('keydown', handleKeyDown);
     return () => {
-      document.removeEventListener('pointerdown', handlePointerDown);
+      document.removeEventListener('mousedown', handleMouseDown);
       document.removeEventListener('keydown', handleKeyDown);
     };
   }, [isOpen]);
 
+  // CSS anchor positioning handles placement. JS only constrains max-height/max-width
+  // so tall content scrolls rather than overflows the viewport.
+  const constrainPanel = useCallback(() => {
+    const dialog = dialogRef.current;
+    const container = containerRef.current;
+    if (!dialog || !container) return;
+    const rect = container.getBoundingClientRect();
+    const vw = window.innerWidth;
+    const vh = window.innerHeight;
+    dialog.style.maxHeight = '';
+    dialog.style.maxWidth = '';
+    if (placement === 'bottom') {
+      dialog.style.maxHeight = `${Math.max(0, vh - rect.bottom - GAP * 2)}px`;
+      dialog.style.maxWidth = `${Math.max(0, vw - rect.left - GAP)}px`;
+    } else if (placement === 'top') {
+      dialog.style.maxHeight = `${Math.max(0, rect.top - GAP * 2)}px`;
+      dialog.style.maxWidth = `${Math.max(0, vw - rect.left - GAP)}px`;
+    } else if (placement === 'right') {
+      dialog.style.maxHeight = `${Math.max(0, vh - rect.top - GAP)}px`;
+      dialog.style.maxWidth = `${Math.max(0, vw - rect.right - GAP * 2)}px`;
+    } else {
+      dialog.style.maxHeight = `${Math.max(0, vh - rect.top - GAP)}px`;
+      dialog.style.maxWidth = `${Math.max(0, rect.left - GAP * 2)}px`;
+    }
+  }, [placement]);
+
+  const toggle = useCallback(() => {
+    if (isOpen) {
+      setIsOpen(false);
+    } else {
+      constrainPanel();
+      setIsOpen(true);
+    }
+  }, [isOpen, constrainPanel]);
+
   const trigger = isValidElement(children)
     ? cloneElement(children as ReactElement<Record<string, unknown>>, {
         'aria-expanded': isOpen,
         'aria-controls': panelId,
         'aria-haspopup': true,
+        style: {
+          ...((children.props as Record<string, unknown>).style as object | undefined),
+          anchorName,
+        },
         onClick: (e: MouseEvent) => {
-          setIsOpen(prev => !prev);
+          toggle();
           const existingOnClick = (children.props as Record<string, unknown>).onClick;
           if (typeof existingOnClick === 'function') existingOnClick(e);
         },
@@ -66,16 +120,18 @@ export function Popover({
   return (
     <span ref={containerRef} className={cn(css.wrapper, className)}>
       {trigger}
-      {isOpen && (
-        <div
-          id={panelId}
-          role={ariaLabel ? 'region' : undefined}
-          aria-label={ariaLabel}
-          className={cn(css.panel, css[`--placement_${placement}`])}
-        >
-          {content}
-        </div>
-      )}
+      <dialog
+        ref={dialogRef}
+        id={panelId}
+        open={isOpen}
+        data-placement={placement}
+        role={ariaLabel ? 'region' : undefined}
+        aria-label={ariaLabel}
+        className={css.panel}
+        style={{ positionAnchor: anchorName }}
+      >
+        {content}
+      </dialog>
     </span>
   );
 }

package/src/components/interaction/Rating/Rating.module.css

@@ -2,7 +2,7 @@
   .rating {
     display: inline-flex;
     gap: var(--bds-space_xxxs);
-    color: var(--bds-bg);
+    color: var(--bds-color_bg);
   }
 
   .star {
@@ -11,6 +11,6 @@
   }
 
   .--filled {
-    color: var(--bds-warning);
+    color: var(--bds-color_warning);
   }
 }

package/src/components/interaction/Rating/Rating.stories.tsx

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { Rating } from './Rating';
 
 const meta = {
-  title: 'Interaction/Rating',
+  title: 'React/Interaction/Rating',
   component: Rating,
   argTypes: {
     value: { control: { type: 'range', min: 0, max: 5, step: 1 } },

package/src/components/interaction/Rating/Rating.tsx

@@ -1,10 +1,10 @@
 import css from './Rating.module.css';
 import { cn } from '@boostdev/design-system-foundation';
+import type { WithClassName } from '../../../types';
 
-interface RatingProps {
+interface RatingProps extends WithClassName {
   value: number;
   max?: number;
-  className?: string;
 }
 
 export function Rating({ value, max = 5, className }: RatingProps) {

package/src/components/interaction/Toast/Toast.module.css

@@ -1,18 +1,23 @@
 @layer component {
   .toastContainer {
     position: fixed;
+    inset: unset; /* override UA popover default (inset: 0) */
     bottom: var(--bds-space_xl);
     right: var(--bds-space_xl);
     display: flex;
     flex-direction: column;
     gap: var(--bds-space_m);
-    z-index: var(--bds-z-index_toast);
+
+    /* z-index removed — top layer renders above all fixed/sticky elements */
+    border: none; /* override UA popover default */
+    padding: 0; /* override UA popover default */
+    background: transparent; /* override UA popover default */
   }
 
   .toast {
     padding: var(--bds-space_m) var(--bds-space_l);
-    background-color: var(--toast_color, var(--bds-bg));
-    color: var(--toast_on-color, var(--bds-on-bg));
+    background-color: var(--toast_color, var(--bds-color_bg));
+    color: var(--toast_on-color, var(--bds-color_on-bg));
     border-radius: var(--bds-border_radius--s);
     box-shadow: var(--bds-shadow_s);
     display: flex;
@@ -23,23 +28,23 @@
   }
 
   .toast.--variant_success {
-    --toast_color: var(--bds-success);
-    --toast_on-color: var(--bds-on-success);
+    --toast_color: var(--bds-color_success);
+    --toast_on-color: var(--bds-color_on-success);
   }
 
   .toast.--variant_warning {
-    --toast_color: var(--bds-warning);
-    --toast_on-color: var(--bds-on-warning);
+    --toast_color: var(--bds-color_warning);
+    --toast_on-color: var(--bds-color_on-warning);
   }
 
   .toast.--variant_info {
-    --toast_color: var(--bds-bg--subtle);
-    --toast_on-color: var(--bds-on-bg--subtle);
+    --toast_color: var(--bds-color_bg--subtle);
+    --toast_on-color: var(--bds-color_on-bg--subtle);
   }
 
   .toast.--variant_error {
-    --toast_color: var(--bds-error);
-    --toast_on-color: var(--bds-on-error);
+    --toast_color: var(--bds-color_error);
+    --toast_on-color: var(--bds-color_on-error);
   }
 
   .message {

package/src/components/interaction/Toast/Toast.spec.tsx

@@ -32,6 +32,27 @@ describe('Toast', () => {
     vi.useRealTimers();
   });
 
+  it('renders the toast container as a manual popover', () => {
+    render(
+      <ToastProvider>
+        <div />
+      </ToastProvider>
+    );
+    const container = document.querySelector('[popover]');
+    expect(container).toHaveAttribute('popover', 'manual');
+  });
+
+  it('renders the toast container as a labelled notifications region', () => {
+    render(
+      <ToastProvider>
+        <div />
+      </ToastProvider>
+    );
+    const container = document.querySelector('[popover="manual"]');
+    expect(container).toHaveAttribute('role', 'region');
+    expect(container).toHaveAttribute('aria-label', 'Notifications');
+  });
+
   it('throws when useToast is used outside ToastProvider', () => {
     const errorSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
     const Bad = () => { useToast(); return null; };

package/src/components/interaction/Toast/Toast.stories.tsx

@@ -3,7 +3,7 @@ import { ToastProvider, useToast } from './Toast';
 import { Button } from '../Button/Button';
 
 const meta = {
-  title: 'Interaction/Toast',
+  title: 'React/Interaction/Toast',
   component: ToastProvider,
 } satisfies Meta<typeof ToastProvider>;
 

package/src/components/interaction/Toast/Toast.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect, createContext, useContext, ReactNode, useCallback, useMemo } from 'react';
+import { useState, useEffect, createContext, useContext, ReactNode, useCallback, useMemo, useRef } from 'react';
 import css from './Toast.module.css';
 import { cn } from '@boostdev/design-system-foundation';
 
@@ -18,6 +18,7 @@ const ToastContext = createContext<ToastContextType | undefined>(undefined);
 
 export function ToastProvider({ children }: { children: ReactNode }) {
   const [toasts, setToasts] = useState<Toast[]>([]);
+  const containerRef = useRef<HTMLDivElement>(null);
 
   const showToast = useCallback((message: string, variant: ToastVariant) => {
     const id = Math.random().toString(36).substring(2, 9);
@@ -28,12 +29,31 @@ export function ToastProvider({ children }: { children: ReactNode }) {
     setToasts(prev => prev.filter(toast => toast.id !== id));
   }, []);
 
+  // Sync the popover's top-layer visibility with the toast queue.
+  // showPopover() is a no-op when already open (safe to call multiple times).
+  // hidePopover() throws InvalidStateError when already hidden, so catch silently.
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+    if (toasts.length > 0) {
+      container.showPopover?.();
+    } else {
+      try { container.hidePopover?.(); } catch { /* already hidden on initial mount */ }
+    }
+  }, [toasts.length]);
+
   const value = useMemo(() => ({ showToast }), [showToast]);
 
   return (
     <ToastContext.Provider value={value}>
       {children}
-      <div className={css.toastContainer}>
+      <div
+        ref={containerRef}
+        popover="manual"
+        role="region"
+        aria-label="Notifications"
+        className={css.toastContainer}
+      >
         {toasts.map(toast => (
           <ToastItem
             key={toast.id}

package/src/components/interaction/form/Checkbox/Checkbox.mdx

@@ -44,8 +44,8 @@ Binary toggle for opt-in/opt-out choices. Renders a styled native `<input type="
 <tr><th>Variable</th><th>Default</th><th>Description</th></tr>
 </thead>
 <tbody>
-<tr><td>`--checkbox_color-active`</td><td>`var(--bds-active)`</td><td>Checked background</td></tr>
-<tr><td>`--checkbox_color-on-active`</td><td>`var(--bds-on-active)`</td><td>Checkmark colour</td></tr>
+<tr><td>`--checkbox_color-active`</td><td>`var(--bdc-color_active)`</td><td>Checked background</td></tr>
+<tr><td>`--checkbox_color-on-active`</td><td>`var(--bdc-color_on-active)`</td><td>Checkmark colour</td></tr>
 </tbody>
 </table>
 

package/src/components/interaction/form/Checkbox/Checkbox.module.css

@@ -16,7 +16,7 @@
     margin-block-start: 0.25em;
     width: var(--inputSize);
     height: var(--inputSize);
-    color: var(--checkbox_color, var(--bds-on-bg));
+    color: var(--checkbox_color, var(--bds-color_on-bg));
     border: var(--checkbox_border, none);
     --bdc_color: currentcolor;
     --bdc-outline_radius: var(--bds-border_radius--xs);
@@ -26,15 +26,15 @@
     border-radius: var(--checkbox_radius, var(--bdc-outline_radius));
     box-shadow: var(--checkbox_shadow, var(--bdc-outline_shadow));
     appearance: none;
-    background-color: var(--checkbox_color_bg, var(--bds-bg));
+    background-color: var(--checkbox_color_bg, var(--bds-color_bg));
     cursor: pointer;
     position: relative;
     transition: --bdc_color 0.3s ease, background-color 0.3s ease;
   }
 
   .checkbox:checked {
-    background-color: var(--checkbox_color-active, var(--bds-active));
-    --bdc_color: var(--checkbox_color-active, var(--bds-active));
+    background-color: var(--checkbox_color-active, var(--bdc-color_active));
+    --bdc_color: var(--checkbox_color-active, var(--bdc-color_active));
   }
 
   .checkbox:checked::after {
@@ -44,7 +44,7 @@
     top: 0.2em;
     width: 0.5em;
     height: 1em;
-    border: solid var(--checkbox_color-on-active, var(--bds-on-active));
+    border: solid var(--checkbox_color-on-active, var(--bdc-color_on-active));
     border-width: 0 2px 2px 0;
     transform: rotate(45deg);
   }