@boostdev/design-system-components 2.6.0 → 2.7.1

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

@@ -0,0 +1,96 @@
+@layer boostdev.component {
+  .fieldGroup {
+    /* Reset fieldset defaults */
+    border: 0;
+    margin: 0;
+    padding: 0;
+    min-inline-size: 0;
+
+    /* Establish an inline-size containment context so descendant rules can
+       use @container against the FieldGroup's own width — independent of the
+       viewport. Without this, the @container rule below would never match. */
+    container-type: inline-size;
+    container-name: field-group;
+
+    /* Field count is injected by the React component as an inline style:
+       `style={{ '--fieldGroup_field-count': N }}`. Read with a `1` fallback
+       so the calc below stays well-formed if the property is ever missing
+       (SSR pre-hydration, manual `<fieldset class="…">` usage in tests).
+       This is the only public token we *write* — every other public token is
+       only ever *read* with a foundation default as fallback, so a consumer
+       can override `--fieldGroup_*` on any ancestor and the new value
+       cascades in without being clobbered by a local declaration. */
+    --fieldGroup_collapse-threshold:
+      calc(
+        var(--fieldGroup_field-count, 1)
+        * var(--fieldGroup_min-field-width, 12rem)
+        + (var(--fieldGroup_field-count, 1) - 1)
+        * var(--fieldGroup_gap, var(--bds-space_m))
+      );
+  }
+
+  .legend {
+    /* Reset legend's UA quirks: float, default offset, default font.
+       <legend> is a fieldset child, not a flex/grid child of .fields, so it
+       gets its own positioning. We render it as a block-level section heading. */
+    inline-size: 100%;
+    padding-inline: 0;
+    padding-block:
+      var(--fieldGroup_legend-padding-block, var(--bds-space_xs));
+    margin-block-end:
+      var(--fieldGroup_legend-gap, var(--bds-space_m));
+    border-block-end:
+      var(--fieldGroup_legend-border-block-end, 1px solid var(--bds-color_bg--subtle));
+    color:
+      var(--fieldGroup_legend-color, var(--bds-color_on-bg));
+    font-family: var(--bds-font_family--body);
+    font-size:
+      var(--fieldGroup_legend-font-size, var(--bds-font_size--heading-3));
+    font-weight:
+      var(--fieldGroup_legend-font-weight, var(--bds-font_weight--semibold));
+    line-height:
+      var(--fieldGroup_legend-line-height, var(--bds-font_line-height--heading));
+  }
+
+  .fields {
+    display: flex;
+    flex-direction: column;
+    gap: var(--fieldGroup_gap, var(--bds-space_m));
+  }
+
+  /* Horizontal variant: row layout with flex-wrap. Each child claims at least
+     --fieldGroup_min-field-width and grows to fill remaining space. The
+     `flex-wrap` already handles partial wrapping; the @container rule below
+     forces a clean single-column stack when the whole row would no longer
+     fit cleanly. */
+  .fieldGroup.--variant_horizontal .fields {
+    flex-flow: row wrap;
+
+    /* `align-items` left at its `stretch` default — each field's
+       label/input/message stays top-anchored by block flow, so the inputs
+       line up regardless. Consumers that want a non-default cross-axis
+       behavior set it from the outside via the consumer-supplied
+       className. */
+  }
+
+  .fieldGroup.--variant_horizontal .fields > * {
+    flex: 1 1 var(--fieldGroup_min-field-width, 12rem);
+    min-inline-size: 0;
+  }
+
+  /* When the FieldGroup itself is too narrow to fit a complete horizontal
+     row of all its fields at minimum width + gaps, collapse to a clean
+     single column. The threshold is derived automatically from the field
+     count + min-field-width + gap (see --fieldGroup_collapse-threshold
+     above), so the same FieldGroup adapts whether it has 2 or 6 fields,
+     in any container — no media-query wiring at the call site. */
+  @container field-group (max-inline-size: var(--fieldGroup_collapse-threshold)) {
+    .fieldGroup.--variant_horizontal .fields {
+      flex-direction: column;
+    }
+
+    .fieldGroup.--variant_horizontal .fields > * {
+      flex: 1 1 auto;
+    }
+  }
+}

package/src/components/interaction/form/FieldGroup/FieldGroup.spec.tsx

@@ -0,0 +1,196 @@
+import { readFileSync } from 'node:fs';
+import { resolve } from 'node:path';
+import { render, screen } from '@testing-library/react';
+import { FieldGroup } from './FieldGroup';
+
+const cssSource = readFileSync(
+  resolve(process.cwd(), 'src/components/interaction/form/FieldGroup/FieldGroup.module.css'),
+  'utf8',
+);
+
+describe('FieldGroup', () => {
+  it('renders a <fieldset> with the children inside', () => {
+    render(
+      <FieldGroup>
+        <input data-testid="email" />
+        <input data-testid="phone" />
+      </FieldGroup>,
+    );
+    const group = screen.getByRole('group');
+    expect(group.tagName).toBe('FIELDSET');
+    expect(screen.getByTestId('email')).toBeInTheDocument();
+    expect(screen.getByTestId('phone')).toBeInTheDocument();
+  });
+
+  it('renders the legend when provided', () => {
+    render(
+      <FieldGroup legend="Contact details">
+        <input />
+      </FieldGroup>,
+    );
+    expect(screen.getByRole('group', { name: 'Contact details' })).toBeInTheDocument();
+    expect(screen.getByText('Contact details').tagName).toBe('LEGEND');
+  });
+
+  it('omits the legend when not provided', () => {
+    render(
+      <FieldGroup aria-label="Address">
+        <input />
+      </FieldGroup>,
+    );
+    expect(screen.queryByText(/./, { selector: 'legend' })).not.toBeInTheDocument();
+  });
+
+  it('applies the horizontal variant class by default', () => {
+    const { container } = render(
+      <FieldGroup>
+        <input />
+      </FieldGroup>,
+    );
+    const fieldset = container.querySelector('fieldset');
+    expect(fieldset?.className).toMatch(/--variant_horizontal/);
+  });
+
+  it('applies the vertical variant class when requested', () => {
+    const { container } = render(
+      <FieldGroup variant="vertical">
+        <input />
+      </FieldGroup>,
+    );
+    const fieldset = container.querySelector('fieldset');
+    expect(fieldset?.className).toMatch(/--variant_vertical/);
+    expect(fieldset?.className).not.toMatch(/--variant_horizontal/);
+  });
+
+  it('merges a consumer-provided className alongside the internal classes', () => {
+    const { container } = render(
+      <FieldGroup className="my-group">
+        <input />
+      </FieldGroup>,
+    );
+    const fieldset = container.querySelector('fieldset')!;
+    expect(fieldset.classList.contains('my-group')).toBe(true);
+    expect(fieldset.className).toMatch(/fieldGroup/);
+  });
+
+  it('forwards arbitrary HTML attributes to the fieldset', () => {
+    render(
+      <FieldGroup id="contact" data-testid="grp" aria-describedby="hint">
+        <input />
+      </FieldGroup>,
+    );
+    const group = screen.getByTestId('grp');
+    expect(group.id).toBe('contact');
+    expect(group.getAttribute('aria-describedby')).toBe('hint');
+  });
+
+  it('exposes the field count as a CSS custom property for the collapse threshold', () => {
+    const { rerender } = render(
+      <FieldGroup>
+        <input />
+        <input />
+        <input />
+      </FieldGroup>,
+    );
+    let fieldset = screen.getByRole('group') as HTMLFieldSetElement;
+    // The CSS @container rule resolves `--fieldGroup_collapse-threshold` from
+    // this value, so a wrong count silently makes the auto-collapse fire at
+    // the wrong width.
+    expect(fieldset.style.getPropertyValue('--fieldGroup_field-count')).toBe('3');
+
+    rerender(
+      <FieldGroup>
+        <input />
+        <input />
+      </FieldGroup>,
+    );
+    fieldset = screen.getByRole('group') as HTMLFieldSetElement;
+    expect(fieldset.style.getPropertyValue('--fieldGroup_field-count')).toBe('2');
+  });
+
+  it('renders cleanly with zero children and sets the field count to 0', () => {
+    // Threshold calc with N=0 produces a negative max-inline-size; container
+    // queries with a negative length never match, so the layout stays in its
+    // declared variant. No fields, no row, no crash.
+    const { container } = render(<FieldGroup legend="Empty section" />);
+    const fieldset = container.querySelector('fieldset')!;
+    expect(fieldset.style.getPropertyValue('--fieldGroup_field-count')).toBe('0');
+    expect(container.querySelector('legend')).toBeInTheDocument();
+  });
+
+  it('reads every documented public token with a foundation-default fallback', () => {
+    // A reader-site like `color: var(--fieldGroup_legend-color);` (no fallback)
+    // would silently leave unthemed legends unstyled. Lock in the contract:
+    // every documented public token must appear inside a `var(name, ...)`
+    // with a non-empty fallback somewhere in the CSS.
+    const PUBLIC_TOKENS = [
+      '--fieldGroup_gap',
+      '--fieldGroup_min-field-width',
+      '--fieldGroup_legend-color',
+      '--fieldGroup_legend-font-size',
+      '--fieldGroup_legend-font-weight',
+      '--fieldGroup_legend-line-height',
+      '--fieldGroup_legend-padding-block',
+      '--fieldGroup_legend-gap',
+      '--fieldGroup_legend-border-block-end',
+    ];
+
+    for (const token of PUBLIC_TOKENS) {
+      // Match `var(<token>, ...)` with at least one non-whitespace char before
+      // the closing `)`. Captures any read site with a real fallback.
+      const pattern = new RegExp(
+        `var\\(\\s*${token.replace('-', '\\-')}\\s*,\\s*\\S`,
+      );
+      expect(cssSource).toMatch(pattern);
+    }
+  });
+
+  it('does not redeclare any public --fieldGroup_* token at root, so consumer overrides cascade in', () => {
+    // Public override tokens are READ with foundation-default fallbacks
+    // throughout the CSS — never DECLARED at root. If anyone reintroduces a
+    // root-level `--fieldGroup_legend-color: ...` etc., a consumer's override
+    // on an ancestor would be silently clobbered (same bug pattern fixed
+    // across Alert/Badge/Toast/Link/Card/Pagination/Tabs in MR !63).
+    //
+    // The only declarations we allow are:
+    //   - --fieldGroup_collapse-threshold (computed from the public tokens
+    //     via calc; consumers can still override it at any level if they
+    //     want to bypass the formula entirely).
+    //   - --fieldGroup_field-count (set by React inline style, not CSS).
+    //
+    // Anything else with the --fieldGroup_ prefix on a left-hand side is a
+    // regression.
+    const declarations = [
+      ...cssSource.matchAll(/^\s*(--fieldGroup_[A-Za-z0-9_-]+)\s*:/gm),
+    ].map(m => m[1]);
+
+    const publicTokenDeclarations = declarations.filter(
+      name => name !== '--fieldGroup_collapse-threshold',
+    );
+    expect(publicTokenDeclarations).toEqual([]);
+  });
+
+  it('preserves a consumer-supplied inline style alongside the field count', () => {
+    render(
+      <FieldGroup style={{ marginBlockEnd: '2rem' }}>
+        <input />
+      </FieldGroup>,
+    );
+    const fieldset = screen.getByRole('group') as HTMLFieldSetElement;
+    expect(fieldset.style.marginBlockEnd).toBe('2rem');
+    expect(fieldset.style.getPropertyValue('--fieldGroup_field-count')).toBe('1');
+  });
+
+  it('forwards the disabled attribute to the fieldset', () => {
+    render(
+      <FieldGroup disabled>
+        <input />
+      </FieldGroup>,
+    );
+    // jsdom does not propagate fieldset[disabled] to descendants the way real
+    // browsers do; assert the attribute lands on the fieldset itself. The
+    // descendant-disabling behaviour is a UA contract on top of that.
+    const fieldset = screen.getByRole('group') as HTMLFieldSetElement;
+    expect(fieldset.disabled).toBe(true);
+  });
+});

package/src/components/interaction/form/FieldGroup/FieldGroup.stories.tsx

@@ -0,0 +1,99 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { FieldGroup } from './FieldGroup';
+import { FormInput } from '../FormInput';
+import { Select } from '../Select';
+
+const meta = {
+  title: 'React/Form/FieldGroup',
+  component: FieldGroup,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'A `<fieldset>` wrapper that groups related form fields under a styled `<legend>`. ' +
+          'The `horizontal` variant lays fields out in a row that auto-collapses to a single ' +
+          'column via a CSS container query when the FieldGroup itself is too narrow.',
+      },
+    },
+  },
+} satisfies Meta<typeof FieldGroup>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Horizontal: Story = {
+  args: { legend: 'Contact details', variant: 'horizontal' },
+  render: args => (
+    <FieldGroup {...args}>
+      <FormInput label="First name" name="firstName" />
+      <FormInput label="Last name" name="lastName" />
+      <FormInput label="Email" name="email" type="email" />
+    </FieldGroup>
+  ),
+};
+
+export const Vertical: Story = {
+  args: { legend: 'Contact details', variant: 'vertical' },
+  render: args => (
+    <FieldGroup {...args}>
+      <FormInput label="First name" name="firstName" />
+      <FormInput label="Last name" name="lastName" />
+      <FormInput label="Email" name="email" type="email" />
+    </FieldGroup>
+  ),
+};
+
+export const HorizontalCollapsesInNarrowContainer: Story = {
+  name: 'Horizontal — collapses in narrow container',
+  args: { legend: 'Same fields, narrower parent', variant: 'horizontal' },
+  render: args => (
+    <div style={{ inlineSize: '20rem', border: '1px dashed currentcolor', padding: '1rem' }}>
+      <FieldGroup {...args}>
+        <FormInput label="First name" name="firstName" />
+        <FormInput label="Last name" name="lastName" />
+        <FormInput label="Email" name="email" type="email" />
+      </FieldGroup>
+    </div>
+  ),
+};
+
+export const WithSelectAndInputs: Story = {
+  args: { legend: 'Address', variant: 'horizontal' },
+  render: args => (
+    <FieldGroup {...args}>
+      <FormInput label="Street" name="street" />
+      <FormInput label="House number" name="houseNumber" />
+      <FormInput label="Postal code" name="postalCode" />
+      <Select
+        label="Country"
+        name="country"
+        options={[
+          { value: 'nl', label: 'Netherlands' },
+          { value: 'be', label: 'Belgium' },
+          { value: 'de', label: 'Germany' },
+        ]}
+      />
+    </FieldGroup>
+  ),
+};
+
+export const WithoutLegend: Story = {
+  args: { 'aria-label': 'Search filters', variant: 'horizontal' },
+  render: args => (
+    <FieldGroup {...args}>
+      <FormInput label="Query" name="q" />
+      <FormInput label="From" name="from" type="date" />
+      <FormInput label="To" name="to" type="date" />
+    </FieldGroup>
+  ),
+};
+
+export const Disabled: Story = {
+  args: { legend: 'Disabled section', variant: 'horizontal', disabled: true },
+  render: args => (
+    <FieldGroup {...args}>
+      <FormInput label="First name" name="firstName" />
+      <FormInput label="Last name" name="lastName" />
+    </FieldGroup>
+  ),
+};

package/src/components/interaction/form/FieldGroup/FieldGroup.tsx

@@ -0,0 +1,64 @@
+import { Children, CSSProperties, FieldsetHTMLAttributes, ReactNode } from 'react';
+import { cn } from '@boostdev/design-system-foundation';
+import css from './FieldGroup.module.css';
+import type { WithClassName } from '../../../../types';
+
+/**
+ * Layout variants for FieldGroup.
+ *
+ * - `horizontal` (default) — fields flow into a row, each claiming at least
+ *   `--fieldGroup_min-field-width`. When the container's inline-size is too
+ *   narrow to fit the row, a CSS container query collapses the layout to a
+ *   single column.
+ * - `vertical` — fields always stack one per row.
+ */
+export type FieldGroupVariant = 'horizontal' | 'vertical';
+
+export interface FieldGroupProps
+  extends WithClassName,
+    FieldsetHTMLAttributes<HTMLFieldSetElement> {
+  /** Layout direction. Defaults to `horizontal`. */
+  variant?: FieldGroupVariant;
+  /**
+   * Optional legend rendered above the fields. When omitted, set
+   * `aria-label` or `aria-labelledby` on the fieldset for accessibility.
+   */
+  legend?: ReactNode;
+}
+
+/**
+ * `FieldGroup` semantically groups related form fields under a single
+ * `<fieldset>` and lays them out either horizontally (with container-query
+ * fallback to vertical) or vertically.
+ */
+export function FieldGroup({
+  variant = 'horizontal',
+  legend,
+  children,
+  className,
+  style,
+  ...rest
+}: Readonly<FieldGroupProps>) {
+  // Surface the field count to CSS so the @container collapse threshold
+  // scales with the actual content. The CSS uses
+  //   N * --fieldGroup_min-field-width + (N - 1) * --fieldGroup_gap
+  // which is exactly the inline-size required to lay all fields out at
+  // their minimum width with the configured gap. When the FieldGroup's own
+  // inline-size drops below that, the layout collapses to a single column.
+  const fieldCount = Children.count(children);
+  const styleWithCount = {
+    ...style,
+    '--fieldGroup_field-count': fieldCount,
+  } as CSSProperties;
+
+  return (
+    <fieldset
+      {...rest}
+      style={styleWithCount}
+      className={cn(css.fieldGroup, css[`--variant_${variant}`], className)}
+    >
+      {legend !== undefined && <legend className={css.legend}>{legend}</legend>}
+      <div className={css.fields}>{children}</div>
+    </fieldset>
+  );
+}

package/src/components/interaction/form/FieldGroup/index.ts

@@ -0,0 +1,2 @@
+export { FieldGroup } from './FieldGroup';
+export type { FieldGroupProps, FieldGroupVariant } from './FieldGroup';

package/src/components/interaction/form/atoms/Message.module.css

@@ -8,4 +8,8 @@
   .error {
     color: var(--bds-color_error_on-bg);
   }
+
+  .hint {
+    font-style: italic;
+  }
 }

package/src/components/layout/IconWrapper/IconWrapper.module.css

@@ -9,8 +9,8 @@
     justify-content: center;
     margin: var(--bds-space_l) auto var(--bds-space_m);
     background: var(--icon-wrapper-color, var(--bds-color_bg));
-    color: var(--bds-on-icon-wrapper-color, var(--bds-color_on-bg));
-    fill: var(--bds-on-icon-wrapper-color, var(--bds-color_on-bg));
+    color: var(--icon-wrapper_on-color, var(--bds-on-icon-wrapper-color, var(--bds-color_on-bg)));
+    fill: var(--icon-wrapper_on-color, var(--bds-on-icon-wrapper-color, var(--bds-color_on-bg)));
     position: relative;
     transition: var(--bds-animation_transition);
   }

package/src/index.ts

@@ -48,6 +48,8 @@ export { Checkbox } from './components/interaction/form/Checkbox';
 export { CheckboxGroup } from './components/interaction/form/CheckboxGroup';
 export type { CheckboxGroupProps } from './components/interaction/form/CheckboxGroup';
 export { Combobox } from './components/interaction/form/Combobox';
+export { FieldGroup } from './components/interaction/form/FieldGroup';
+export type { FieldGroupProps, FieldGroupVariant } from './components/interaction/form/FieldGroup';
 export type { ComboboxOption } from './components/interaction/form/Combobox';
 export { FileInput } from './components/interaction/form/FileInput';
 export { FormInput } from './components/interaction/form/FormInput';

package/src/test/token-contract.spec.ts

@@ -0,0 +1,86 @@
+import { describe, it, expect } from 'vitest';
+import { readdirSync, readFileSync, statSync } from 'node:fs';
+import { join, relative } from 'node:path';
+import { extractFoundationRefs, extractTokens } from '../../mcp/extract.ts';
+
+function collectFiles(dir: string, ext: string): string[] {
+  const results: string[] = [];
+  for (const entry of readdirSync(dir)) {
+    const full = join(dir, entry);
+    if (statSync(full).isDirectory()) {
+      results.push(...collectFiles(full, ext));
+    } else if (full.endsWith(ext)) {
+      results.push(full);
+    }
+  }
+  return results;
+}
+
+function loadDeclaredTokens(): Set<string> {
+  const tokensDir = join(__dirname, '../../node_modules/@boostdev/design-system-foundation/src/tokens');
+  const propertiesFile = join(tokensDir, 'properties.css');
+  const declared = new Set<string>();
+
+  for (const file of collectFiles(tokensDir, '.css')) {
+    const css = readFileSync(file, 'utf-8');
+    for (const token of extractTokens(css, 'all')) {
+      declared.add(token.name);
+    }
+  }
+
+  // @property declarations aren't captured by extractTokens — parse them separately
+  if (statSync(propertiesFile).isFile()) {
+    const css = readFileSync(propertiesFile, 'utf-8');
+    for (const [, name] of css.matchAll(/@property\s+(--bds-[\w-]+)/g)) {
+      declared.add(name);
+    }
+  }
+
+  // Also include deprecated aliases (they resolve to real tokens)
+  const deprecatedFile = join(tokensDir, 'deprecated.css');
+  const deprecatedCss = readFileSync(deprecatedFile, 'utf-8');
+  for (const [, name] of deprecatedCss.matchAll(/^\s*(--bds-[\w-]+)\s*:/gm)) {
+    declared.add(name);
+  }
+
+  return declared;
+}
+
+// Component-local tokens that were incorrectly given the --bds-* prefix.
+// Kept as deprecated fallbacks for backwards compatibility — remove in next major.
+const DEPRECATED_BDS_ALIASES = new Set([
+  '--bds-on-icon-wrapper-color',
+]);
+
+describe('token contract', () => {
+  const declared = loadDeclaredTokens();
+  const srcRoot = join(__dirname, '../');
+  const componentCssFiles = collectFiles(join(srcRoot, 'components'), '.module.css');
+  const bdcFile = join(srcRoot, 'css/bdc.css');
+
+  it('has a non-empty set of declared foundation tokens', () => {
+    expect(declared.size).toBeGreaterThan(50);
+  });
+
+  it('resolves every var(--bds-*) reference in component CSS to a declared token', () => {
+    const undeclared: { file: string; token: string }[] = [];
+
+    for (const file of [...componentCssFiles, bdcFile]) {
+      const css = readFileSync(file, 'utf-8');
+      for (const ref of extractFoundationRefs(css)) {
+        if (!declared.has(ref) && !DEPRECATED_BDS_ALIASES.has(ref)) {
+          undeclared.push({ file: relative(srcRoot, file), token: ref });
+        }
+      }
+    }
+
+    if (undeclared.length > 0) {
+      const report = undeclared
+        .map(({ file, token }) => `  ${token} in ${file}`)
+        .join('\n');
+      expect.fail(
+        `Found ${undeclared.length} reference(s) to undeclared foundation tokens:\n${report}`,
+      );
+    }
+  });
+});

package/src/web-components/index.ts

@@ -68,6 +68,8 @@ export { BdsTable } from './ui/bds-table';
 export { BdsPagination } from './ui/bds-pagination';
 export { BdsCheckboxGroup } from './interaction/form/bds-checkbox-group';
 export { BdsRadioGroup } from './interaction/form/bds-radio-group';
+export { BdsFieldGroup } from './interaction/form/bds-field-group';
+export type { FieldGroupVariant as BdsFieldGroupVariant } from './interaction/form/bds-field-group';
 export { BdsFormInput } from './interaction/form/bds-form-input';
 export { BdsCarousel } from './ui/bds-carousel';
 export { BdsCalendar } from './ui/bds-calendar';

package/src/web-components/interaction/bds-accordion-item.ts

@@ -69,7 +69,7 @@ export class BdsAccordionItem extends LitElement {
 
     @media (hover: hover) and (pointer: fine) {
       .trigger:not(:disabled):hover {
-        background-color: var(--bds-color_bg--subtle);
+        background-color: var(--accordion_trigger-bg--hover, var(--bds-color_bg--subtle));
       }
     }
 

package/src/web-components/interaction/bds-accordion.ts

@@ -26,6 +26,7 @@ export class BdsAccordion extends LitElement {
   static styles = css`
     :host {
       display: block;
+      border: var(--accordion_border, none);
       --bdc_color: var(--bds-color_bg--subtle);
       --bdc-outline_radius: var(--bds-border_radius--s);
       border-radius: var(--accordion_radius, var(--bdc-outline_radius));

package/src/web-components/interaction/bds-button.ts

@@ -56,7 +56,7 @@ export class BdsButton extends LitElement {
       padding-inline: var(--bds-space_l);
       display: inline-flex;
       gap: var(--bds-space_xs);
-      border-radius: var(--button_border_radius--s, var(--bds-border_radius--s));
+      border-radius: var(--button_radius, var(--bds-border_radius--full));
       align-items: center;
       cursor: pointer;
       justify-content: center;
@@ -102,7 +102,6 @@ export class BdsButton extends LitElement {
     .button.small {
       --button_height:    2.25em;
       --button_font-size: var(--bds-font_size--body--s);
-      --button_border_radius--s: var(--bds-border_radius--xs);
       padding-inline: var(--bds-space_m);
     }
 
@@ -113,7 +112,6 @@ export class BdsButton extends LitElement {
 
     .button.large {
       --button_font-size: var(--bds-font_size--heading-3);
-      --button_border_radius--s: var(--bds-border_radius--m);
       padding-inline: var(--bds-space_xl);
     }
 

package/src/web-components/interaction/bds-dialog.ts

@@ -34,7 +34,7 @@ export class BdsDialog extends LitElement {
     .dialog {
       font-size: var(--bds-font_size--body--s);
       border: var(--dialog_border, none);
-      --bdc_color: currentcolor;
+      --bdc_color: var(--dialog_border-color, currentcolor);
       --bdc-outline_radius: var(--bds-border_radius--m);
 
       border-radius: var(--dialog_radius, var(--bdc-outline_radius));
@@ -66,11 +66,11 @@ export class BdsDialog extends LitElement {
       display: flex;
       align-items: center;
       justify-content: center;
-      border-radius: 50%;
+      border-radius: var(--dialog_close-radius, var(--bds-border_radius--circle));
       background-color: var(--bds-color_bg);
       color: currentcolor;
       border: var(--dialog_close-border, none);
-      --bdc_color: currentcolor;
+      --bdc_color: var(--dialog_close-border-color, currentcolor);
 
       box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color);
       cursor: pointer;

package/src/web-components/interaction/bds-drawer.ts

@@ -119,7 +119,7 @@ export class BdsDrawer extends LitElement {
       justify-content: center;
       inline-size: 2rem;
       block-size: 2rem;
-      border-radius: 50%;
+      border-radius: var(--drawer_close-radius, var(--bds-border_radius--circle));
       cursor: pointer;
       transition: var(--bds-animation_transition);
     }
@@ -136,7 +136,7 @@ export class BdsDrawer extends LitElement {
 
     @media (hover: hover) and (pointer: fine) {
       .close-button:hover {
-        background-color: var(--bds-color_bg--subtle);
+        background-color: var(--drawer_close-bg--hover, var(--bds-color_bg--subtle));
       }
     }