@boostdev/design-system-components 0.1.17 → 1.0.0

package/src/components/interaction/Dialog/Dialog.tsx

@@ -1,4 +1,6 @@
 import { ReactNode, useEffect, useRef } from 'react';
+
+const FOCUSABLE_SELECTOR = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
 import css from './Dialog.module.css';
 import { cn } from '@boostdev/design-system-foundation';
 
@@ -11,16 +13,19 @@ interface DialogProps {
 
 export function Dialog({ children, isOpen = false, className, onClose }: DialogProps) {
   const dialogRef = useRef<HTMLDialogElement | null>(null);
+  const triggerRef = useRef<Element | null>(null);
 
   useEffect(() => {
     const dialog = dialogRef.current;
     if (!dialog) return;
     if (isOpen) {
+      triggerRef.current = document.activeElement;
       dialog.showModal();
       document.body.style.overflow = 'hidden';
     } else if (dialog.open) {
       dialog.close();
       document.body.style.overflow = '';
+      (triggerRef.current as HTMLElement | null)?.focus();
     }
     return () => {
       document.body.style.overflow = '';
@@ -36,12 +41,29 @@ export function Dialog({ children, isOpen = false, className, onClose }: DialogP
     onClose?.();
   };
 
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLDialogElement>) => {
+    if (e.key !== 'Tab') return;
+    const dialog = dialogRef.current;
+    if (!dialog) return;
+    const focusable = Array.from(dialog.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR));
+    if (focusable.length === 0) return;
+    const first = focusable[0];
+    const last = focusable[focusable.length - 1];
+    if (e.shiftKey) {
+      if (document.activeElement === first) { e.preventDefault(); last.focus(); }
+    } else {
+      if (document.activeElement === last) { e.preventDefault(); first.focus(); }
+    }
+  };
+
   return (
     <dialog
       ref={dialogRef}
       className={cn(className, css.dialog)}
+      aria-modal="true"
       onClick={handleBackdropClick}
       onCancel={handleCancel}
+      onKeyDown={handleKeyDown}
     >
       <form method="dialog" className={css.closeForm}>
         <button

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

@@ -14,7 +14,7 @@
   }
 
   .drawer::backdrop {
-    background-color: var(--drawer_backdrop-color, rgb(0 0 0 / 50%));
+    background-color: var(--color_backdrop, rgb(0 0 0 / 50%));
     backdrop-filter: blur(3px);
   }
 
@@ -25,11 +25,11 @@
     flex-direction: column;
     width: min(28rem, 90vw);
     height: 100%;
-    background-color: var(--drawer_color, var(--color_bg));
-    color: var(--drawer_on-color, var(--color_on-bg));
-    box-shadow: var(--shadow_xl);
+    background-color: var(--drawer_color, var(--bds-bg));
+    color: var(--drawer_on-color, var(--bds-on-bg));
+    box-shadow: var(--bds-shadow_xl);
     overflow: hidden;
-    transition: var(--animation_transition);
+    transition: var(--bds-animation_transition);
   }
 
   .--side_right .panel {
@@ -44,7 +44,7 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
-    padding: var(--space_m) var(--space_l);
+    padding: var(--bds-space_m) var(--bds-space_l);
     border-block-end: 1px solid currentcolor;
     flex-shrink: 0;
   }
@@ -58,7 +58,7 @@
     height: 2rem;
     border-radius: 50%;
     cursor: pointer;
-    transition: var(--animation_transition);
+    transition: var(--bds-animation_transition);
   }
 
   .closeButton svg {
@@ -67,20 +67,22 @@
   }
 
   .closeButton:focus-visible {
-    outline: var(--outline_default);
-    outline-offset: var(--outline_offset);
+    outline: var(--bds-outline_default);
+    outline-offset: var(--bds-outline_offset);
   }
 
   @media (hover: hover) and (pointer: fine) {
     .closeButton:hover {
-      background-color: var(--color_bg--subtle);
+      background-color: var(--bds-bg--subtle);
     }
   }
 
   .body {
     flex: 1;
     overflow-y: auto;
-    padding: var(--space_l);
+    padding: var(--bds-space_l);
+    display: flex;
+    flex-direction: column;
   }
 
   @media (prefers-reduced-motion: reduce) {

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

@@ -58,4 +58,34 @@ describe('Drawer', () => {
     unmount();
     expect(document.body.style.overflow).toBe('');
   });
+
+  it('has aria-modal="true" when open', () => {
+    render(<Drawer isOpen title="Settings" onClose={() => {}}>Content</Drawer>);
+    const dialog = document.querySelector('dialog');
+    expect(dialog).toHaveAttribute('aria-modal', 'true');
+  });
+
+  it('renders aria-label on the dialog when ariaLabel prop is provided', () => {
+    render(<Drawer isOpen title="Settings" ariaLabel="Settings panel" onClose={() => {}}>Content</Drawer>);
+    const dialog = document.querySelector('dialog');
+    expect(dialog).toHaveAttribute('aria-label', 'Settings panel');
+  });
+
+  it('does not render aria-label when ariaLabel prop is not provided', () => {
+    render(<Drawer isOpen title="Settings" onClose={() => {}}>Content</Drawer>);
+    const dialog = document.querySelector('dialog');
+    expect(dialog).not.toHaveAttribute('aria-label');
+  });
+
+  it('restores focus to trigger element on close', () => {
+    const trigger = document.createElement('button');
+    document.body.appendChild(trigger);
+    trigger.focus();
+
+    const { rerender } = render(<Drawer isOpen title="Menu" onClose={() => {}}>Body</Drawer>);
+    rerender(<Drawer isOpen={false} title="Menu" onClose={() => {}}>Body</Drawer>);
+    expect(document.activeElement).toBe(trigger);
+
+    document.body.removeChild(trigger);
+  });
 });

package/src/components/interaction/Drawer/Drawer.tsx

@@ -9,7 +9,7 @@ interface DrawerProps {
   children: ReactNode;
   side?: 'left' | 'right';
   className?: string;
-  arialLabel?: string;
+  ariaLabel?: string;
 }
 
 export function Drawer({
@@ -18,20 +18,23 @@ export function Drawer({
   title,
   children,
   side = 'right',
-  arialLabel = '',
+  ariaLabel,
   className,
 }: Readonly<DrawerProps>) {
   const dialogRef = useRef<HTMLDialogElement>(null);
+  const triggerRef = useRef<Element | null>(null);
 
   useEffect(() => {
     const dialog = dialogRef.current;
     if (!dialog) return;
     if (isOpen) {
+      triggerRef.current = document.activeElement;
       dialog.showModal();
       document.body.style.overflow = 'hidden';
     } else if (dialog.open) {
       dialog.close();
       document.body.style.overflow = '';
+      (triggerRef.current as HTMLElement | null)?.focus();
     }
     return () => {
       document.body.style.overflow = '';
@@ -53,7 +56,8 @@ export function Drawer({
     <dialog
       ref={dialogRef}
       className={cn(css.drawer, css[`--side_${side}`], className)}
-      aria-label={arialLabel}
+      aria-label={ariaLabel}
+      aria-modal="true"
       onClick={handleClick}
       onCancel={handleCancel}
     >

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

@@ -6,15 +6,20 @@
 
   .menu {
     position: absolute;
-    top: calc(100% + var(--space_xxs));
-    z-index: var(--z-index_dropdown);
+    top: calc(100% + var(--bds-space_xxs));
+    z-index: var(--bds-z-index_dropdown);
     min-width: 10rem;
-    padding: var(--space_xxs) 0;
-    border-radius: var(--border_radius--s);
-    border: 1px solid currentcolor;
-    background-color: var(--dropdown_color, var(--color_bg));
-    color: var(--dropdown_on-color, var(--color_on-bg));
-    box-shadow: var(--shadow_m);
+    padding: var(--bds-space_xxs) 0;
+    border: var(--dropdown_border, none);
+    --bdc_color: currentcolor;
+    --bdc_radius: var(--bds-border_radius--s);
+
+    outline: var(--bdc_width) solid var(--bdc_color);
+    outline-offset: var(--bdc_offset);
+    border-radius: var(--dropdown_radius, var(--bdc_radius));
+    background-color: var(--dropdown_color, var(--bds-bg));
+    color: var(--dropdown_on-color, var(--bds-on-bg));
+    box-shadow: var(--dropdown_shadow, var(--bds-shadow_m));
     list-style: none;
     margin: 0;
   }
@@ -25,7 +30,7 @@
   .separator {
     border: none;
     border-top: 1px solid currentcolor;
-    margin: var(--space_xxs) 0;
+    margin: var(--bds-space_xxs) 0;
     opacity: 0.15;
   }
 
@@ -33,15 +38,15 @@
     all: unset;
     display: flex;
     align-items: center;
-    gap: var(--space_xs);
+    gap: var(--bds-space_xs);
     width: 100%;
-    padding: var(--space_xs) var(--space_m);
-    font-family: var(--font_family--body);
-    font-size: var(--font_size--body);
+    padding: var(--bds-space_xs) var(--bds-space_m);
+    font-family: var(--bds-font_family--body);
+    font-size: var(--bds-font_size--body);
     color: currentcolor;
     cursor: pointer;
     box-sizing: border-box;
-    transition: var(--animation_transition);
+    transition: var(--bds-animation_transition);
   }
 
   .item:disabled {
@@ -50,15 +55,15 @@
   }
 
   .item:focus-visible {
-    outline: var(--outline_default);
-    outline-offset: calc(var(--outline_offset) * -1);
-    border-radius: var(--border_radius--xs);
+    outline: var(--bds-outline_default);
+    outline-offset: calc(var(--bds-outline_offset) * -1);
+    border-radius: var(--bds-border_radius--xs);
   }
 
   @media (hover: hover) and (pointer: fine) {
     .item:not(:disabled):hover {
-      background-color: var(--color_bg--subtle);
-      color: var(--color_interactive);
+      background-color: var(--bds-bg--subtle);
+      color: var(--bds-interactive);
     }
   }
 

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

@@ -26,14 +26,14 @@ export const Default: Story = {
     ],
   },
   render: args => (
-    <DropdownMenu {...args} trigger={<Button variant="secondary">Actions ▾</Button>} />
+    <DropdownMenu {...args} trigger={<Button variant="ghost">Actions ▾</Button>} />
   ),
 };
 
 export const WithDisabledItem: Story = {
   render: () => (
     <DropdownMenu
-      trigger={<Button variant="secondary">Options ▾</Button>}
+      trigger={<Button variant="ghost">Options ▾</Button>}
       items={[
         { id: 'view', label: 'View' },
         { id: 'edit', label: 'Edit' },
@@ -46,7 +46,7 @@ export const WithDisabledItem: Story = {
 export const WithSeparator: Story = {
   render: () => (
     <DropdownMenu
-      trigger={<Button variant="secondary">File ▾</Button>}
+      trigger={<Button variant="ghost">File ▾</Button>}
       items={[
         { id: 'new', label: 'New' },
         { id: 'open', label: 'Open' },
@@ -60,7 +60,7 @@ export const WithSeparator: Story = {
 export const AlignedEnd: Story = {
   render: () => (
     <DropdownMenu
-      trigger={<Button variant="secondary">⋮</Button>}
+      trigger={<Button variant="ghost">⋮</Button>}
       items={[{ id: 'copy', label: 'Copy link' }, { id: 'report', label: 'Report' }]}
       placement="bottom-end"
     />

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

@@ -6,34 +6,39 @@
 
   .panel {
     position: absolute;
-    z-index: var(--z-index_popover);
+    z-index: var(--bds-z-index_popover);
     min-width: 12rem;
-    padding: var(--space_m);
-    border-radius: var(--border_radius--s);
-    border: 1px solid currentcolor;
-    background-color: var(--popover_color, var(--color_bg));
-    box-shadow: var(--shadow_m);
-    color: var(--popover_on-color, var(--color_on-bg));
-    font-size: var(--font_size--body);
+    padding: var(--bds-space_m);
+    border: var(--popover_border, none);
+    --bdc_color: currentcolor;
+    --bdc_radius: var(--bds-border_radius--s);
+
+    outline: var(--bdc_width) solid var(--bdc_color);
+    outline-offset: var(--bdc_offset);
+    border-radius: var(--popover_radius, var(--bdc_radius));
+    background-color: var(--popover_color, var(--bds-bg));
+    box-shadow: var(--popover_shadow, var(--bds-shadow_m));
+    color: var(--popover_on-color, var(--bds-on-bg));
+    font-size: var(--bds-font_size--body);
   }
 
   .--placement_bottom {
-    top: calc(100% + var(--space_xs));
+    top: calc(100% + var(--bds-space_xs));
     left: 0;
   }
 
   .--placement_top {
-    bottom: calc(100% + var(--space_xs));
+    bottom: calc(100% + var(--bds-space_xs));
     left: 0;
   }
 
   .--placement_right {
-    left: calc(100% + var(--space_xs));
+    left: calc(100% + var(--bds-space_xs));
     top: 0;
   }
 
   .--placement_left {
-    right: calc(100% + var(--space_xs));
+    right: calc(100% + var(--bds-space_xs));
     top: 0;
   }
 }

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

@@ -18,7 +18,7 @@ describe('Popover', () => {
         <button type="button">Open</button>
       </Popover>
     );
-    expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+    expect(screen.queryByText('Panel content')).not.toBeInTheDocument();
   });
 
   it('shows the panel when trigger is clicked', async () => {
@@ -29,7 +29,6 @@ describe('Popover', () => {
       </Popover>
     );
     await user.click(screen.getByRole('button', { name: 'Open' }));
-    expect(screen.getByRole('dialog')).toBeInTheDocument();
     expect(screen.getByText('Panel content')).toBeInTheDocument();
   });
 
@@ -42,7 +41,7 @@ describe('Popover', () => {
     );
     await user.click(screen.getByRole('button', { name: 'Toggle' }));
     await user.click(screen.getByRole('button', { name: 'Toggle' }));
-    expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+    expect(screen.queryByText('Panel content')).not.toBeInTheDocument();
   });
 
   it('closes the panel when Escape is pressed', async () => {
@@ -54,7 +53,7 @@ describe('Popover', () => {
     );
     await user.click(screen.getByRole('button', { name: 'Open' }));
     await user.keyboard('{Escape}');
-    expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+    expect(screen.queryByText('Panel content')).not.toBeInTheDocument();
   });
 
   it('sets aria-expanded on the trigger when open', async () => {
@@ -69,4 +68,26 @@ describe('Popover', () => {
     await user.click(trigger);
     expect(trigger).toHaveAttribute('aria-expanded', 'true');
   });
+
+  it('renders role="region" with aria-label when aria-label prop is provided', async () => {
+    const user = userEvent.setup();
+    render(
+      <Popover content={<p>Filters</p>} aria-label="Filter options">
+        <button type="button">Open</button>
+      </Popover>
+    );
+    await user.click(screen.getByRole('button', { name: 'Open' }));
+    expect(screen.getByRole('region', { name: 'Filter options' })).toBeInTheDocument();
+  });
+
+  it('does not render role="region" when no aria-label is provided', async () => {
+    const user = userEvent.setup();
+    render(
+      <Popover content={<p>Panel</p>}>
+        <button type="button">Open</button>
+      </Popover>
+    );
+    await user.click(screen.getByRole('button', { name: 'Open' }));
+    expect(screen.queryByRole('region')).not.toBeInTheDocument();
+  });
 });

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

@@ -41,7 +41,7 @@ export const WithForm: Story = {
         </div>
       }
     >
-      <Button variant="secondary">Filters</Button>
+      <Button variant="ghost">Filters</Button>
     </Popover>
   ),
 };

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

@@ -16,6 +16,7 @@ interface PopoverProps {
   content: ReactNode;
   placement?: 'top' | 'bottom' | 'left' | 'right';
   className?: string;
+  'aria-label'?: string;
 }
 
 export function Popover({
@@ -23,6 +24,7 @@ export function Popover({
   content,
   placement = 'bottom',
   className,
+  'aria-label': ariaLabel,
 }: Readonly<PopoverProps>) {
   const [isOpen, setIsOpen] = useState(false);
   const containerRef = useRef<HTMLSpanElement>(null);
@@ -52,6 +54,7 @@ export function Popover({
     ? cloneElement(children as ReactElement<Record<string, unknown>>, {
         'aria-expanded': isOpen,
         'aria-controls': panelId,
+        'aria-haspopup': true,
         onClick: (e: MouseEvent) => {
           setIsOpen(prev => !prev);
           const existingOnClick = (children.props as Record<string, unknown>).onClick;
@@ -66,8 +69,8 @@ export function Popover({
       {isOpen && (
         <div
           id={panelId}
-          role="dialog"
-          aria-modal="false"
+          role={ariaLabel ? 'region' : undefined}
+          aria-label={ariaLabel}
           className={cn(css.panel, css[`--placement_${placement}`])}
         >
           {content}

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

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

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

@@ -1,45 +1,45 @@
 @layer component {
   .toastContainer {
     position: fixed;
-    bottom: var(--space_xl);
-    right: var(--space_xl);
+    bottom: var(--bds-space_xl);
+    right: var(--bds-space_xl);
     display: flex;
     flex-direction: column;
-    gap: var(--space_m);
-    z-index: var(--z-index_toast);
+    gap: var(--bds-space_m);
+    z-index: var(--bds-z-index_toast);
   }
 
   .toast {
-    padding: var(--space_m) var(--space_l);
-    background-color: var(--toast_color, var(--color_bg));
-    color: var(--toast_on-color, var(--color_on-bg));
-    border-radius: var(--border_radius--s);
-    box-shadow: var(--shadow_s);
+    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));
+    border-radius: var(--bds-border_radius--s);
+    box-shadow: var(--bds-shadow_s);
     display: flex;
     align-items: center;
-    gap: var(--space_m);
+    gap: var(--bds-space_m);
     min-width: 300px;
-    animation: slideIn var(--animation_duration--fast) var(--animation_easing);
+    animation: slideIn var(--bds-animation_duration--fast) var(--bds-animation_easing);
   }
 
   .toast.--variant_success {
-    --toast_color: var(--color_success);
-    --toast_on-color: var(--color_on-success);
+    --toast_color: var(--bds-success);
+    --toast_on-color: var(--bds-on-success);
   }
 
   .toast.--variant_warning {
-    --toast_color: var(--color_warning);
-    --toast_on-color: var(--color_on-warning);
+    --toast_color: var(--bds-warning);
+    --toast_on-color: var(--bds-on-warning);
   }
 
   .toast.--variant_info {
-    --toast_color: var(--color_bg--subtle);
-    --toast_on-color: var(--color_on-bg--subtle);
+    --toast_color: var(--bds-bg--subtle);
+    --toast_on-color: var(--bds-on-bg--subtle);
   }
 
   .toast.--variant_error {
-    --toast_color: var(--color_error);
-    --toast_on-color: var(--color_on-error);
+    --toast_color: var(--bds-error);
+    --toast_on-color: var(--bds-on-error);
   }
 
   .message {

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

@@ -53,7 +53,7 @@ function ToastItem({ toast, onRemove }: { toast: Toast; onRemove: () => void })
   }, [onRemove]);
 
   return (
-    <div className={cn(css.toast, css[`--variant_${toast.variant}`])} role="status">
+    <div className={cn(css.toast, css[`--variant_${toast.variant}`])} role="status" aria-live="polite" aria-atomic="true">
       <span className={css.message}>{toast.message}</span>
       <button type="button" className={css.closeButton} onClick={onRemove} aria-label="Dismiss">
         <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">

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(--color_active)`</td><td>Checked background</td></tr>
-<tr><td>`--checkbox_color-on-active`</td><td>`var(--color_on-active)`</td><td>Checkmark colour</td></tr>
+<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>
 </tbody>
 </table>
 

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

@@ -1,6 +1,6 @@
 @layer component {
   .checkboxGroup {
-    --inputSize: calc(var(--space_s) * 2);
+    --inputSize: calc(var(--bds-space_s) * 2);
 
     display: flex;
     flex-direction: column;
@@ -9,26 +9,32 @@
   .inputWrapper {
     display: flex;
     align-items: stretch;
-    gap: var(--space_xs);
+    gap: var(--bds-space_xs);
   }
 
   .checkbox {
     margin-block-start: 0.25em;
     width: var(--inputSize);
     height: var(--inputSize);
-    color: var(--checkbox_color, var(--color_on-bg));
-    border: 1px solid currentcolor;
-    border-radius: var(--border_radius--xs);
+    color: var(--checkbox_color, var(--bds-on-bg));
+    border: var(--checkbox_border, none);
+    --bdc_color: currentcolor;
+    --bdc_radius: var(--bds-border_radius--xs);
+
+    outline: var(--bdc_width) solid var(--bdc_color);
+    outline-offset: var(--bdc_offset);
+    border-radius: var(--checkbox_radius, var(--bdc_radius));
+    box-shadow: var(--checkbox_shadow, var(--bdc_shadow));
     appearance: none;
-    background-color: var(--checkbox_color_bg, var(--color_bg));
+    background-color: var(--checkbox_color_bg, var(--bds-bg));
     cursor: pointer;
     position: relative;
-    transition: background-color 0.3s ease, border-color 0.3s ease;
+    transition: --bdc_color 0.3s ease, background-color 0.3s ease;
   }
 
   .checkbox:checked {
-    background-color: var(--checkbox_color-active, var(--color_active));
-    border-color: var(--checkbox_color-active, var(--color_active));
+    background-color: var(--checkbox_color-active, var(--bds-active));
+    --bdc_color: var(--checkbox_color-active, var(--bds-active));
   }
 
   .checkbox:checked::after {
@@ -38,23 +44,21 @@
     top: 0.2em;
     width: 0.5em;
     height: 1em;
-    border: solid var(--checkbox_color-on-active, var(--color_on-active));
+    border: solid var(--checkbox_color-on-active, var(--bds-on-active));
     border-width: 0 2px 2px 0;
     transform: rotate(45deg);
   }
 
   .checkbox:focus {
-    outline: none;
-    border-color: var(--color_interactive);
-    box-shadow: 0 0 0 2px rgb(from var(--color_interactive) r g b / 20%);
+    --bdc_color: var(--bdc_color--focus);
   }
 
-  .checkboxError {
-    border-color: var(--color_error);
+  .checkbox:focus-visible {
+    outline: var(--bds-outline_default);
+    outline-offset: var(--bds-outline_offset);
   }
 
-  .checkboxError:focus {
-    border-color: var(--color_error);
-    box-shadow: 0 0 0 2px rgb(from var(--color_error) r g b / 20%);
+  .checkboxError {
+    --bdc_color: var(--bdc_color--error);
   }
 }