@boostdev/design-system-components 0.1.18 → 1.0.1

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@boostdev/design-system-components",
-  "version": "0.1.18",
+  "version": "1.0.1",
   "description": "BoostDev React component library: accessible, token-driven components built on @boostdev/design-system-foundation",
   "keywords": [
     "React",
     "component",
-    "library:",
+    "library",
     "accessible",
     "token-driven",
     "components",
@@ -36,6 +36,7 @@
       "require": "./dist/client.cjs"
     },
     "./css": "./dist/index.css",
+    "./css/bdc": "./src/css/bdc.css",
     "./css/accordion": "./src/components/ui/Accordion/Accordion.module.css",
     "./css/alert": "./src/components/ui/Alert/Alert.module.css",
     "./css/avatar": "./src/components/ui/Avatar/Avatar.module.css",
@@ -43,6 +44,7 @@
     "./css/breadcrumb": "./src/components/ui/Breadcrumb/Breadcrumb.module.css",
     "./css/calendar": "./src/components/ui/Calendar/Calendar.module.css",
     "./css/carousel": "./src/components/ui/Carousel/Carousel.module.css",
+    "./css/collapsible": "./src/components/ui/Collapsible/Collapsible.module.css",
     "./css/description-list": "./src/components/ui/DescriptionList/DescriptionList.module.css",
     "./css/link": "./src/components/ui/Link/Link.module.css",
     "./css/loading": "./src/components/ui/Loading/Loading.module.css",
@@ -66,11 +68,14 @@
     "./css/rating": "./src/components/interaction/Rating/Rating.module.css",
     "./css/toast": "./src/components/interaction/Toast/Toast.module.css",
     "./css/form/checkbox": "./src/components/interaction/form/Checkbox/Checkbox.module.css",
+    "./css/form/checkbox-group": "./src/components/interaction/form/CheckboxGroup/CheckboxGroup.module.css",
     "./css/form/combobox": "./src/components/interaction/form/Combobox/Combobox.module.css",
     "./css/form/file-input": "./src/components/interaction/form/FileInput/FileInput.module.css",
     "./css/form/form-input": "./src/components/interaction/form/FormInput/FormInput.module.css",
     "./css/form/number-input": "./src/components/interaction/form/NumberInput/NumberInput.module.css",
     "./css/form/radio": "./src/components/interaction/form/Radio/Radio.module.css",
+    "./css/form/radio-group": "./src/components/interaction/form/RadioGroup/RadioGroup.module.css",
+    "./css/form/segmented-control": "./src/components/interaction/form/SegmentedControl/SegmentedControl.module.css",
     "./css/form/select": "./src/components/interaction/form/Select/Select.module.css",
     "./css/form/slider": "./src/components/interaction/form/Slider/Slider.module.css",
     "./css/form/switch": "./src/components/interaction/form/Switch/Switch.module.css",
@@ -105,7 +110,7 @@
     "changelog:unreleased": "pnpm exec git-cliff --unreleased"
   },
   "devDependencies": {
-    "@boostdev/design-system-foundation": "^0.1.13",
+    "@boostdev/design-system-foundation": "^1.0.1",
     "@modelcontextprotocol/sdk": "^1.27.0",
     "@storybook/addon-docs": "8.6.14",
     "@storybook/addon-essentials": "^8.6.14",
@@ -135,7 +140,7 @@
     "vitest": "^3"
   },
   "peerDependencies": {
-    "@boostdev/design-system-foundation": ">=0.1.0",
+    "@boostdev/design-system-foundation": ">=1.0.1",
     "react": ">=18",
     "react-dom": ">=18"
   },

package/src/components/interaction/Button/Button.mdx

@@ -8,8 +8,8 @@ import * as Stories from './Button.stories';
 Primary interactive element for triggering actions. Renders as `<button>` or `<a>` depending on whether `href` is provided.
 
 ## When to use
-- The main action on a page or dialog (`primary`)
-- Secondary or destructive actions (`secondary`)
+- The main action on a page or dialog (`default`)
+- Secondary or ghost actions (`ghost`)
 - Navigation that should look like an action (`href` → renders as `<a>`)
 
 ## When not to use
@@ -21,11 +21,11 @@ Primary interactive element for triggering actions. Renders as `<button>` or `<a
 ### All variants & sizes
 <Canvas of={Stories.AllVariants} />
 
-### Primary
-<Canvas of={Stories.Primary} />
+### Default
+<Canvas of={Stories.Default} />
 
-### Secondary
-<Canvas of={Stories.Secondary} />
+### Ghost
+<Canvas of={Stories.Ghost} />
 
 ### Sizes
 <Canvas of={Stories.Small} />
@@ -56,11 +56,8 @@ Primary interactive element for triggering actions. Renders as `<button>` or `<a
 <tr><th>Variable</th><th>Description</th></tr>
 </thead>
 <tbody>
-<tr><td>`--button_bg`</td><td>Background colour</td></tr>
-<tr><td>`--button_color`</td><td>Text colour</td></tr>
-<tr><td>`--button_border-color`</td><td>Border colour</td></tr>
-<tr><td>`--button_bg--hover`</td><td>Background on hover</td></tr>
-<tr><td>`--button_color--hover`</td><td>Text colour on hover</td></tr>
+<tr><td>`--button_color`</td><td>Identity colour — fills default, outlines ghost. Set this to re-theme.</td></tr>
+<tr><td>`--button_on-color`</td><td>Text/icon colour on the button. Pair with `--button_color`.</td></tr>
 </tbody>
 </table>
 

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

@@ -1,17 +1,29 @@
+@keyframes fadeZoom {
+  0%, 100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+
+  50% {
+    opacity: 0.75;
+    transform: scale(1.15);
+  }
+}
+
 @keyframes pulse {
   0% {
     transform: scale(1);
-    box-shadow: 0 0 0 0 rgb(from var(--button_pulse-color, var(--color_cta)) r g b / 50%);
+    box-shadow: 0 0 0 0 rgb(from var(--button_pulse-color, var(--button_color, var(--bds-cta))) r g b / 50%);
   }
 
   70% {
     transform: scale(1.01);
-    box-shadow: 0 0 0 var(--space_m) rgb(from var(--button_pulse-color, var(--color_cta)) r g b / 0%);
+    box-shadow: 0 0 0 var(--bds-space_m) rgb(from var(--button_pulse-color, var(--button_color, var(--bds-cta))) r g b / 0%);
   }
 
   100% {
     transform: scale(1);
-    box-shadow: 0 0 0 0 rgb(from var(--button_pulse-color, var(--color_cta)) r g b / 0%);
+    box-shadow: 0 0 0 0 rgb(from var(--button_pulse-color, var(--button_color, var(--bds-cta))) r g b / 0%);
   }
 }
 
@@ -21,54 +33,62 @@
     all: unset;
     position: relative;
     font: inherit;
-    padding-inline: var(--space_l);
+    padding-inline: var(--bds-space_l);
     display: inline-flex;
-    gap: var(--space_xs);
-    border-radius: var(--button_border_radius--s, var(--border_radius--s));
+    gap: var(--bds-space_xs);
+    border-radius: var(--button_border_radius--s, var(--bds-border_radius--s));
     align-items: center;
     cursor: pointer;
-    scroll-padding-block-end: var(--space_l);
+    scroll-padding-block-end: var(--bds-space_l);
     justify-content: center;
     height: var(--button_height, 3em);
     font-size: var(--button_font-size, inherit);
     white-space: nowrap;
     line-height: 1;
-    background-color: var(--button_bg, var(--color_cta));
-    color: var(--button_text, var(--color_on-cta));
-    border: 2px solid var(--button_border-color, var(--color_cta));
-    transition: var(--animation_transition);
-  }
 
-  .button.--primary {
-    --button_border-color: transparent;
+    /* Colour model: override --button_color + --button_on-color to re-theme */
+    --button_color:    var(--bds-cta);
+    --button_on-color: var(--bds-on-cta);
+
+    background-color: var(--button_bg, var(--button_color));
+    color: var(--button_text, var(--button_on-color));
+    border: var(--button_border, none);
+    --bdc_color: transparent;
+
+    outline: var(--bdc-outline_width) solid var(--bdc_color);
+    outline-offset: var(--bdc-outline_offset);
+    transition: var(--bds-animation_transition), --bdc_color var(--bds-animation_transition-duration) var(--bds-animation_easing);
   }
 
-  .button.--secondary {
-    --button_bg:           var(--color_bg);
-    --button_text:         var(--color_on-bg);
-    --button_border-color: var(--button_text);
+  /* Default: filled with --button_color, no visible border */
+  .button.--default { /* inherits base — no overrides needed */ }
+
+  /* Ghost: transparent background, border and text use --button_color */
+  .button.--ghost {
+    --button_bg:   transparent;
+    --button_text: var(--button_color);
+    --bdc_color:   var(--button_color);
   }
 
   .button.--size_small {
     --button_height:    2.25em;
-    --button_font-size: var(--font_size--body--s);
-    --button_border_radius--s: var(--border_radius--xs);
+    --button_font-size: var(--bds-font_size--body--s);
+    --button_border_radius--s: var(--bds-border_radius--xs);
 
-    padding-inline: var(--space_m);
+    padding-inline: var(--bds-space_m);
   }
 
   .button.--size_medium {
     --button_height: 3em;
 
-    padding-inline: var(--space_l);
+    padding-inline: var(--bds-space_l);
   }
 
   .button.--size_large {
-    --button_font-size: var(--font_size--heading-3);
-
-    padding-inline: var(--space_xl);
-    --button_border_radius--s: var(--border_radius--m);
+    --button_font-size: var(--bds-font_size--heading-3);
+    --button_border_radius--s: var(--bds-border_radius--m);
 
+    padding-inline: var(--bds-space_xl);
   }
 
   .button.--hasPulse {
@@ -87,42 +107,52 @@
     flex-shrink: 0;
   }
 
-  .prefix {
+  .iconStart {
     display: flex;
     align-items: center;
-    margin-inline-start: calc(var(--space_s) * -1);
-    transition: var(--animation_transition);
+    margin-inline-start: calc(var(--bds-space_s) * -1);
+    transition: var(--bds-animation_transition);
   }
 
-  .suffix {
+  .iconEnd {
     display: flex;
     align-items: center;
-    margin-inline-end: calc(var(--space_s) * -1);
-    transition: var(--animation_transition);
+    margin-inline-end: calc(var(--bds-space_s) * -1);
+    transition: var(--bds-animation_transition);
   }
 
   @media (hover: hover) and (pointer: fine) {
-    .button:hover .prefix svg {
-      animation: 2s infinite 'fadeZoom' ease-out;
+    .button:hover .iconStart svg {
+      animation: fadeZoom 2s ease-out infinite;
     }
 
-    .button:hover .suffix svg {
-      animation: 2s infinite 'fadeZoom' ease-out;
+    .button:hover .iconEnd svg {
+      animation: fadeZoom 2s ease-out infinite;
     }
   }
 
   .button:focus-visible {
-    outline-offset: var(--outline_offset);
-    outline: var(--outline_default);
-    border-radius: var(--border_radius--s);
+    outline: var(--bds-outline_default);
+    outline-offset: var(--bds-outline_offset);
+    border-radius: var(--bds-border_radius--s);
+  }
+
+  /* Default hover: outline appears, bg becomes page surface */
+  @media (hover: hover) and (pointer: fine) {
+    .button.--default:hover {
+      --button_bg:          var(--bds-bg);
+      --button_text:        var(--bds-interactive);
+      --button_pulse-color: var(--bds-interactive);
+      --bdc_color:          currentcolor;
+    }
   }
 
+  /* Ghost hover: fills with --button_color */
   @media (hover: hover) and (pointer: fine) {
-    .button:hover {
-      --button_bg:           var(--color_bg);
-      --button_text:         var(--color_interactive);
-      --button_pulse-color:  var(--color_interactive);
-      --button_border-color: currentcolor;
+    .button.--ghost:hover {
+      --button_bg:   var(--button_color);
+      --button_text: var(--button_on-color);
+      --bdc_color:   transparent;
     }
   }
 }

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

@@ -5,7 +5,7 @@ const meta = {
   title: 'Interaction/Button',
   component: Button,
   argTypes: {
-    variant: { control: 'select', options: ['primary', 'secondary'] },
+    variant: { control: 'select', options: ['default', 'ghost'] },
     size: { control: 'select', options: ['small', 'medium', 'large'] },
     onClick: { action: 'clicked' },
   },
@@ -14,8 +14,8 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-export const Primary: Story = { args: { children: 'Primary', variant: 'primary' } };
-export const Secondary: Story = { args: { children: 'Secondary', variant: 'secondary' } };
+export const Default: Story = { args: { children: 'Default', variant: 'default' } };
+export const Ghost: Story = { args: { children: 'Ghost', variant: 'ghost' } };
 export const Small: Story = { args: { children: 'Small', size: 'small' } };
 export const Medium: Story = { args: { children: 'Medium', size: 'medium' } };
 export const Large: Story = { args: { children: 'Large', size: 'large' } };
@@ -32,7 +32,7 @@ export const WithIcons: Story = {
 export const AllVariants: Story = {
   render: () => (
     <div style={{ display: 'flex', gap: '12px', flexWrap: 'wrap', alignItems: 'center' }}>
-      {(['primary', 'secondary'] as const).map(v => (
+      {(['default', 'ghost'] as const).map(v => (
         ['small', 'medium', 'large'].map(s => (
           <Button key={`${v}-${s}`} variant={v} size={s as 'small' | 'medium' | 'large'}>{v} {s}</Button>
         ))

package/src/components/interaction/Button/Button.tsx

@@ -2,9 +2,9 @@ import {ButtonHTMLAttributes, MouseEventHandler, ReactNode} from 'react';
 import css from './Button.module.css';
 import { cn } from '@boostdev/design-system-foundation';
 
-interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement | HTMLAnchorElement> {
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement | HTMLAnchorElement> {
   href?: string;
-  variant?: 'primary' | 'secondary';
+  variant?: 'default' | 'ghost';
   type?: 'button' | 'submit' | 'reset';
   size?: 'small' | 'medium' | 'large';
   iconStart?: ReactNode;
@@ -23,7 +23,7 @@ interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement | HTMLAncho
 export function Button({
   children,
   className,
-  variant = 'primary',
+  variant = 'default',
   type = 'button',
   iconStart,
   iconEnd,
@@ -58,9 +58,9 @@ export function Button({
 
   const content = (
     <>
-      {Boolean(iconStart) && <span className={css.prefix}>{iconStart}</span>}
+      {Boolean(iconStart) && <span className={css.iconStart}>{iconStart}</span>}
       {children}
-      {Boolean(iconEnd) && <span className={css.suffix}>{iconEnd}</span>}
+      {Boolean(iconEnd) && <span className={css.iconEnd}>{iconEnd}</span>}
     </>
   );
 

package/src/components/interaction/Button/index.ts

@@ -1 +1,2 @@
 export { Button } from './Button';
+export type { ButtonProps } from './Button';

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

@@ -2,7 +2,7 @@
   .dialog {
     padding: 0;
     border: none;
-    border-radius: var(--border_radius--m);
+    border-radius: var(--bds-border_radius--m);
     background: transparent;
     width: min(40rem, 90vw);
     max-height: 70vh;
@@ -11,27 +11,32 @@
   }
 
   .dialog::backdrop {
-    background-color: var(--command_backdrop-color, rgb(0 0 0 / 50%));
+    background-color: var(--color_backdrop, rgb(0 0 0 / 50%));
     backdrop-filter: blur(3px);
   }
 
   .palette {
     display: flex;
     flex-direction: column;
-    background-color: var(--command_color, var(--color_bg));
-    color: var(--command_on-color, var(--color_on-bg));
-    border-radius: var(--border_radius--m);
-    box-shadow: var(--shadow_xl);
+    background-color: var(--command_color, var(--bds-bg));
+    color: var(--command_on-color, var(--bds-on-bg));
+    border-radius: var(--bds-border_radius--m);
+    box-shadow: var(--command_shadow, var(--bds-shadow_xl));
     overflow: hidden;
     max-height: 70vh;
-    border: 1px solid currentcolor;
+    border: var(--command_border, none);
+    --bdc_color: currentcolor;
+    --bdc-outline_radius: var(--bds-border_radius--m);
+
+    outline: var(--bdc-outline_width) solid var(--bdc_color);
+    outline-offset: var(--bdc-outline_offset);
   }
 
   .searchRow {
     display: flex;
     align-items: center;
-    gap: var(--space_xs);
-    padding: var(--space_s) var(--space_m);
+    gap: var(--bds-space_xs);
+    padding: var(--bds-space_s) var(--bds-space_m);
     border-block-end: 1px solid currentcolor;
     flex-shrink: 0;
   }
@@ -39,7 +44,7 @@
   .searchIcon {
     width: 1.25rem;
     height: 1.25rem;
-    color: var(--color_on-bg--muted);
+    color: var(--bds-on-bg);
     flex-shrink: 0;
   }
 
@@ -47,31 +52,36 @@
     flex: 1;
     border: none;
     outline: none;
-    font-family: var(--font_family--body);
-    font-size: var(--font_size--body);
-    color: var(--color_on-bg);
+    font-family: var(--bds-font_family--body);
+    font-size: var(--bds-font_size--body);
+    color: var(--bds-on-bg);
     background: transparent;
     min-width: 0;
   }
 
   .search::placeholder {
-    color: var(--color_on-bg--muted);
+    color: var(--bds-on-bg);
   }
 
   .escHint {
-    font-size: var(--font_size--body--s);
-    color: var(--color_on-bg--muted);
-    border: 1px solid currentcolor;
-    border-radius: var(--border_radius--xs);
+    font-size: var(--bds-font_size--body--s);
+    color: var(--bds-on-bg);
+    border-radius: var(--bds-border_radius--xs);
     padding: 0.1em 0.4em;
     flex-shrink: 0;
+
+    --bdc_color: currentcolor;
+
+    border: none;
+    outline: var(--bdc-outline_width) solid var(--bdc_color);
+    outline-offset: var(--bdc-outline_offset);
   }
 
   .list {
     overflow-y: auto;
     list-style: none;
     margin: 0;
-    padding: var(--space_xs) 0;
+    padding: var(--bds-space_xs) 0;
   }
 
   .groupList {
@@ -81,10 +91,10 @@
   }
 
   .group {
-    padding: var(--space_xs) var(--space_m);
-    font-size: var(--font_size--body--s);
-    font-weight: var(--font_weight--semibold);
-    color: var(--color_on-bg--muted);
+    padding: var(--bds-space_xs) var(--bds-space_m);
+    font-size: var(--bds-font_size--body--s);
+    font-weight: var(--bds-font_weight--semibold);
+    color: var(--bds-on-bg);
     text-transform: uppercase;
     letter-spacing: 0.05em;
   }
@@ -92,39 +102,44 @@
   .item {
     display: flex;
     align-items: center;
-    gap: var(--space_s);
-    padding: var(--space_s) var(--space_m);
+    gap: var(--bds-space_s);
+    padding: var(--bds-space_s) var(--bds-space_m);
     cursor: pointer;
-    transition: background-color var(--animation_transition-duration) var(--animation_easing);
+    transition: background-color var(--bds-animation_transition-duration) var(--bds-animation_easing);
   }
 
   .itemActive {
-    background-color: var(--color_bg--subtle);
+    background-color: var(--bds-bg--subtle);
   }
 
   .itemLabel {
     flex: 1;
-    font-size: var(--font_size--body);
-    color: var(--color_on-bg);
+    font-size: var(--bds-font_size--body);
+    color: var(--bds-on-bg);
   }
 
   .itemDesc {
-    font-size: var(--font_size--body--s);
-    color: var(--color_on-bg--muted);
+    font-size: var(--bds-font_size--body--s);
+    color: var(--bds-on-bg);
   }
 
   .shortcut {
-    font-size: var(--font_size--body--s);
-    color: var(--color_on-bg--muted);
-    border: 1px solid currentcolor;
-    border-radius: var(--border_radius--xs);
+    font-size: var(--bds-font_size--body--s);
+    color: var(--bds-on-bg);
+    border-radius: var(--bds-border_radius--xs);
     padding: 0.1em 0.4em;
+
+    --bdc_color: currentcolor;
+
+    border: none;
+    outline: var(--bdc-outline_width) solid var(--bdc_color);
+    outline-offset: var(--bdc-outline_offset);
   }
 
   .empty {
-    padding: var(--space_l) var(--space_m);
+    padding: var(--bds-space_l) var(--bds-space_m);
     text-align: center;
-    color: var(--color_on-bg--muted);
-    font-size: var(--font_size--body);
+    color: var(--bds-on-bg);
+    font-size: var(--bds-font_size--body);
   }
 }

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

@@ -75,4 +75,28 @@ describe('Command', () => {
     unmount();
     expect(document.body.style.overflow).toBe('');
   });
+
+  it('has aria-modal="true" when open', () => {
+    render(<Command isOpen items={items} onClose={() => {}} />);
+    const dialog = document.querySelector('dialog');
+    expect(dialog).toHaveAttribute('aria-modal', 'true');
+  });
+
+  it('has aria-label on the dialog', () => {
+    render(<Command isOpen items={items} onClose={() => {}} />);
+    const dialog = document.querySelector('dialog');
+    expect(dialog).toHaveAttribute('aria-label', 'Command palette');
+  });
+
+  it('restores focus to trigger element on close', () => {
+    const trigger = document.createElement('button');
+    document.body.appendChild(trigger);
+    trigger.focus();
+
+    const { rerender } = render(<Command isOpen items={items} onClose={() => {}} />);
+    rerender(<Command isOpen={false} items={items} onClose={() => {}} />);
+    expect(document.activeElement).toBe(trigger);
+
+    document.body.removeChild(trigger);
+  });
 });

package/src/components/interaction/Command/Command.tsx

@@ -51,10 +51,13 @@ export function Command({
     return map;
   }, [filtered]);
 
+  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';
       setQuery('');
@@ -63,6 +66,7 @@ export function Command({
     } else if (dialog.open) {
       dialog.close();
       document.body.style.overflow = '';
+      (triggerRef.current as HTMLElement | null)?.focus();
     }
     return () => {
       document.body.style.overflow = '';
@@ -104,6 +108,7 @@ export function Command({
       ref={dialogRef}
       className={cn(css.dialog, className)}
       aria-label="Command palette"
+      aria-modal="true"
       onCancel={handleCancel}
     >
       <div className={css.palette} onKeyDown={handleKeyDown}>

package/src/components/interaction/Dialog/Dialog.mdx

@@ -35,8 +35,8 @@ Modal overlay using the native `<dialog>` element. Traps focus inside the dialog
 <tr><th>Variable</th><th>Default</th><th>Description</th></tr>
 </thead>
 <tbody>
-<tr><td>`--dialog_color`</td><td>`var(--color_grey--subtle)`</td><td>Dialog background</td></tr>
-<tr><td>`--dialog_on-color`</td><td>`var(--color_on-grey--subtle)`</td><td>Dialog text colour</td></tr>
+<tr><td>`--dialog_color`</td><td>`var(--bds-grey--subtle)`</td><td>Dialog background</td></tr>
+<tr><td>`--dialog_on-color`</td><td>`var(--bds-on-grey--subtle)`</td><td>Dialog text colour</td></tr>
 <tr><td>`--dialog_backdrop-color`</td><td>`rgb(0 0 0 / 50%)`</td><td>Backdrop overlay colour</td></tr>
 </tbody>
 </table>

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

@@ -1,11 +1,17 @@
 @layer component {
   .dialog {
-    font-size: var(--font_size--body--s);
-    border: 2px solid currentcolor;
-    background-color: var(--dialog_color ,var(--color_grey--subtle));
-    color: var(--dialog_on-color, var(--color_on-grey--subtle));
-    border-radius: var(--border_radius--m);
-    padding: var(--space_l);
+    font-size: var(--bds-font_size--body--s);
+    border: var(--dialog_border, none);
+    --bdc_color: currentcolor;
+    --bdc-outline_radius: var(--bds-border_radius--m);
+
+    outline: var(--bdc-outline_width) solid var(--bdc_color);
+    outline-offset: var(--bdc-outline_offset);
+    border-radius: var(--dialog_radius, var(--bdc-outline_radius));
+    box-shadow: var(--dialog_shadow, var(--bdc-outline_shadow));
+    background-color: var(--dialog_color ,var(--bds-grey--subtle));
+    color: var(--dialog_on-color, var(--bds-on-grey--subtle));
+    padding: var(--bds-space_l);
     max-width: 90svw;
     max-height: 90svh;
     overflow: visible;
@@ -13,7 +19,7 @@
 
   .dialogContent {
     display: grid;
-    gap: var(--grid_gap);
+    gap: var(--bds-grid_gap);
     overflow-y: auto;
     min-height: 0;
     flex: 1;
@@ -33,9 +39,13 @@
     align-items: center;
     justify-content: center;
     border-radius: 50%;
-    background-color: var(--color_bg);
+    background-color: var(--bds-bg);
     color: currentcolor;
-    border: 2px solid currentcolor;
+    border: var(--dialog_close-border, none);
+    --bdc_color: currentcolor;
+
+    outline: var(--bdc-outline_width) solid var(--bdc_color);
+    outline-offset: var(--bdc-outline_offset);
     cursor: pointer;
   }
 
@@ -45,7 +55,7 @@
   }
 
   .dialog::backdrop {
-    background-color: var(--dialog_backdrop-color, rgb(0 0 0 / 50%));
+    background-color: var(--color_backdrop, rgb(0 0 0 / 50%));
     backdrop-filter: blur(3px);
   }
 }