@boostdev/design-system-components 1.1.0 → 1.1.2

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

@@ -2,8 +2,7 @@ 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.
+// jsdom doesn't implement CSS.supports — stub so the anchor polyfill guard doesn't throw.
 beforeAll(() => {
   Object.defineProperty(globalThis, 'CSS', {
     value: { supports: () => true },
@@ -11,6 +10,39 @@ beforeAll(() => {
   });
 });
 
+// jsdom doesn't implement the Popover API — mock showPopover/hidePopover/togglePopover
+// and dispatch the `toggle` event so our state-sync listener fires.
+beforeEach(() => {
+  HTMLElement.prototype.showPopover = vi.fn(function (this: HTMLElement) {
+    const event = new Event('toggle');
+    Object.defineProperty(event, 'newState', { value: 'open', configurable: true });
+    this.dispatchEvent(event);
+  });
+  HTMLElement.prototype.hidePopover = vi.fn(function (this: HTMLElement) {
+    const event = new Event('toggle');
+    Object.defineProperty(event, 'newState', { value: 'closed', configurable: true });
+    this.dispatchEvent(event);
+  });
+  HTMLElement.prototype.togglePopover = vi.fn(function (this: HTMLElement) {
+    const isCurrentlyOpen = this.getAttribute('data-popover-open') === 'true';
+    if (isCurrentlyOpen) {
+      this.setAttribute('data-popover-open', 'false');
+      const event = new Event('toggle');
+      Object.defineProperty(event, 'newState', { value: 'closed', configurable: true });
+      this.dispatchEvent(event);
+    } else {
+      this.setAttribute('data-popover-open', 'true');
+      const event = new Event('toggle');
+      Object.defineProperty(event, 'newState', { value: 'open', configurable: true });
+      this.dispatchEvent(event);
+    }
+  });
+});
+
+function getPanel() {
+  return document.querySelector<HTMLElement>('[popover]')!;
+}
+
 describe('Popover', () => {
   it('renders the trigger', () => {
     render(
@@ -21,15 +53,23 @@ describe('Popover', () => {
     expect(screen.getByRole('button', { name: 'Open' })).toBeInTheDocument();
   });
 
-  it('does not show the panel by default', () => {
+  it('renders the panel as a [popover] element', () => {
+    render(
+      <Popover content={<p>Panel content</p>}>
+        <button type="button">Open</button>
+      </Popover>
+    );
+    expect(getPanel()).toBeInTheDocument();
+    expect(getPanel()).toHaveAttribute('popover', 'auto');
+  });
+
+  it('panel is not open by default', () => {
     render(
       <Popover content={<p>Panel content</p>}>
         <button type="button">Open</button>
       </Popover>
     );
-    // The dialog element is always in DOM; closed state = no open attribute.
-    const dialog = document.querySelector('dialog');
-    expect(dialog).not.toHaveAttribute('open');
+    expect(screen.getByRole('button').getAttribute('aria-expanded')).toBe('false');
   });
 
   it('shows the panel when trigger is clicked', async () => {
@@ -40,44 +80,44 @@ describe('Popover', () => {
       </Popover>
     );
     await user.click(screen.getByRole('button', { name: 'Open' }));
-    expect(document.querySelector('dialog')).toHaveAttribute('open');
+    expect(HTMLElement.prototype.togglePopover).toHaveBeenCalled();
   });
 
-  it('closes the panel when trigger is clicked again', async () => {
+  it('sets aria-expanded true after opening', async () => {
     const user = userEvent.setup();
     render(
-      <Popover content={<p>Panel content</p>}>
-        <button type="button">Toggle</button>
+      <Popover content={<p>Panel</p>}>
+        <button type="button">Open</button>
       </Popover>
     );
-    await user.click(screen.getByRole('button', { name: 'Toggle' }));
-    await user.click(screen.getByRole('button', { name: 'Toggle' }));
-    expect(document.querySelector('dialog')).not.toHaveAttribute('open');
+    const trigger = screen.getByRole('button');
+    expect(trigger).toHaveAttribute('aria-expanded', 'false');
+    await user.click(trigger);
+    expect(trigger).toHaveAttribute('aria-expanded', 'true');
   });
 
-  it('closes the panel when Escape is pressed', async () => {
+  it('closes the panel when trigger is clicked again', async () => {
     const user = userEvent.setup();
     render(
       <Popover content={<p>Panel content</p>}>
-        <button type="button">Open</button>
+        <button type="button">Toggle</button>
       </Popover>
     );
-    await user.click(screen.getByRole('button', { name: 'Open' }));
-    await user.keyboard('{Escape}');
-    expect(document.querySelector('dialog')).not.toHaveAttribute('open');
+    await user.click(screen.getByRole('button', { name: 'Toggle' }));
+    await user.click(screen.getByRole('button', { name: 'Toggle' }));
+    expect(screen.getByRole('button', { name: 'Toggle' })).toHaveAttribute('aria-expanded', 'false');
   });
 
-  it('sets aria-expanded on the trigger when open', async () => {
-    const user = userEvent.setup();
+  it('trigger uses commandfor/command="toggle-popover"', () => {
     render(
       <Popover content={<p>Panel</p>}>
         <button type="button">Open</button>
       </Popover>
     );
     const trigger = screen.getByRole('button');
-    expect(trigger).toHaveAttribute('aria-expanded', 'false');
-    await user.click(trigger);
-    expect(trigger).toHaveAttribute('aria-expanded', 'true');
+    expect(trigger).toHaveAttribute('commandfor');
+    expect(trigger).toHaveAttribute('command', 'toggle-popover');
+    expect(trigger.getAttribute('commandfor')).toBe(getPanel().id);
   });
 
   it('sets anchor-name on the trigger and position-anchor on the panel', () => {
@@ -87,71 +127,66 @@ describe('Popover', () => {
       </Popover>
     );
     const trigger = screen.getByRole('button');
-    const dialog = document.querySelector('dialog')!;
-    // Both should reference the same CSS anchor ident.
+    const panel = getPanel();
     const anchorName = trigger.style.getPropertyValue('anchor-name');
-    const positionAnchor = dialog.style.getPropertyValue('position-anchor');
+    const positionAnchor = panel.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();
+  it('each instance gets a unique anchor-name', () => {
     render(
-      <Popover content={<p>Filters</p>} aria-label="Filter options">
+      <>
+        <Popover content={<p>A</p>}>
+          <button type="button">A</button>
+        </Popover>
+        <Popover content={<p>B</p>}>
+          <button type="button">B</button>
+        </Popover>
+      </>
+    );
+    const [btnA, btnB] = screen.getAllByRole('button');
+    expect(btnA.style.getPropertyValue('anchor-name')).not.toBe(
+      btnB.style.getPropertyValue('anchor-name')
+    );
+  });
+
+  it('sets data-placement from the placement prop', () => {
+    render(
+      <Popover content={<p>Panel</p>} placement="top">
         <button type="button">Open</button>
       </Popover>
     );
-    await user.click(screen.getByRole('button', { name: 'Open' }));
-    expect(screen.getByRole('region', { name: 'Filter options' })).toBeInTheDocument();
+    expect(getPanel()).toHaveAttribute('data-placement', 'top');
   });
 
-  it('does not render role="region" when no aria-label is provided', async () => {
-    const user = userEvent.setup();
+  it('defaults data-placement to "bottom"', () => {
     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();
+    expect(getPanel()).toHaveAttribute('data-placement', 'bottom');
   });
 
-  it('constrains maxHeight when trigger is near the bottom of the viewport', async () => {
+  it('renders role="region" with aria-label when aria-label prop is provided', 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">
+      <Popover content={<p>Filters</p>} aria-label="Filter options">
         <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');
+    expect(getPanel()).toHaveAttribute('role', 'region');
+    expect(getPanel()).toHaveAttribute('aria-label', 'Filter options');
   });
 
-  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: () => {},
-    });
+  it('does not render role="region" when no aria-label is provided', () => {
     render(
-      <Popover content={<p>Panel</p>} placement="bottom">
+      <Popover content={<p>Panel</p>}>
         <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');
+    expect(getPanel()).not.toHaveAttribute('role');
   });
 });

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

@@ -3,20 +3,21 @@ import {
   ReactNode,
   cloneElement,
   isValidElement,
-  useCallback,
   useEffect,
   useId,
   useRef,
   useState,
 } from 'react';
+import { installInvokerCommandsPolyfill } from '../../../polyfill-invoker-commands';
+
+// Install once at module load — no-op if native support is present.
+installInvokerCommandsPolyfill();
+
 import css from './Popover.module.css';
 import { cn } from '@boostdev/design-system-foundation';
 import type { WithClassName } from '../../../types';
 
-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'))
@@ -40,90 +41,73 @@ export function Popover({
 }: Readonly<PopoverProps>) {
   const [isOpen, setIsOpen] = useState(false);
   const containerRef = useRef<HTMLSpanElement>(null);
-  const dialogRef = useRef<HTMLDialogElement>(null);
+  const panelRef = useRef<HTMLDivElement>(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.
+  // Sync isOpen state via the popover toggle event (fires on both native and
+  // polyfilled open/close, including light-dismiss and Escape).
+  useEffect(() => {
+    const panel = panelRef.current;
+    if (!panel) return;
+    const handleToggle = (e: Event) => {
+      setIsOpen((e as ToggleEvent).newState === 'open');
+    };
+    panel.addEventListener('toggle', handleToggle);
+    return () => panel.removeEventListener('toggle', handleToggle);
+  }, []);
+
+  // Close the popover when the anchor scrolls out of the viewport.
+  // Light-dismiss (outside click) and Escape are handled natively by popover="auto".
   useEffect(() => {
     if (!isOpen) return;
-    const handleMouseDown = (e: MouseEvent) => {
-      if (containerRef.current && !containerRef.current.contains(e.target as Node)) {
-        setIsOpen(false);
+    const handleScroll = () => {
+      const rect = containerRef.current?.getBoundingClientRect();
+      if (!rect) return;
+      const { innerWidth: vw, innerHeight: vh } = window;
+      if (rect.bottom < 0 || rect.top > vh || rect.right < 0 || rect.left > vw) {
+        panelRef.current?.hidePopover();
       }
     };
-    const handleKeyDown = (e: KeyboardEvent) => {
-      if (e.key === 'Escape') setIsOpen(false);
-    };
-    document.addEventListener('mousedown', handleMouseDown);
-    document.addEventListener('keydown', handleKeyDown);
+    window.addEventListener('scroll', handleScroll, { capture: true, passive: true });
+    window.addEventListener('resize', handleScroll, { passive: true });
     return () => {
-      document.removeEventListener('mousedown', handleMouseDown);
-      document.removeEventListener('keydown', handleKeyDown);
+      window.removeEventListener('scroll', handleScroll, { capture: true });
+      window.removeEventListener('resize', handleScroll);
     };
   }, [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]);
-
+  // Inject invoker command attrs and accessibility props onto the trigger.
+  // commandfor/command="toggle-popover" replaces the onClick toggle handler —
+  // the browser (or polyfill) calls togglePopover() on the panel, which fires
+  // the toggle event above to sync state.
   const trigger = isValidElement(children)
     ? cloneElement(children as ReactElement<Record<string, unknown>>, {
         'aria-expanded': isOpen,
         'aria-controls': panelId,
         'aria-haspopup': true,
+        commandfor: panelId,
+        command: 'toggle-popover',
         style: {
           ...((children.props as Record<string, unknown>).style as object | undefined),
           anchorName,
         },
-        onClick: (e: MouseEvent) => {
-          toggle();
-          const existingOnClick = (children.props as Record<string, unknown>).onClick;
-          if (typeof existingOnClick === 'function') existingOnClick(e);
-        },
+        // Forward any existing onClick on the child (for custom side-effects).
+        // Do NOT add our own toggle here — commandfor/command handles it to
+        // avoid a double-toggle when both onClick and invoker fire.
+        onClick: (children.props as Record<string, unknown>).onClick as (() => void) | undefined,
       })
     : children;
 
   return (
     <span ref={containerRef} className={cn(css.wrapper, className)}>
       {trigger}
-      <dialog
-        ref={dialogRef}
+      <div
+        ref={panelRef}
         id={panelId}
-        open={isOpen}
+        popover="auto"
         data-placement={placement}
         role={ariaLabel ? 'region' : undefined}
         aria-label={ariaLabel}
@@ -131,7 +115,7 @@ export function Popover({
         style={{ positionAnchor: anchorName }}
       >
         {content}
-      </dialog>
+      </div>
     </span>
   );
 }

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

@@ -2,8 +2,8 @@
   .toastContainer {
     position: fixed;
     inset: unset; /* override UA popover default (inset: 0) */
-    bottom: var(--bds-space_xl);
-    right: var(--bds-space_xl);
+    inset-block-end: var(--bds-space_xl);
+    inset-inline-end: var(--bds-space_xl);
     display: flex;
     flex-direction: column;
     gap: var(--bds-space_m);
@@ -23,7 +23,7 @@
     display: flex;
     align-items: center;
     gap: var(--bds-space_m);
-    min-width: 300px;
+    min-inline-size: 300px;
     animation: slideIn var(--bds-animation_duration--fast) var(--bds-animation_easing);
   }
 
@@ -56,8 +56,8 @@
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
-    width: 1.25rem;
-    height: 1.25rem;
+    inline-size: 1.25rem;
+    block-size: 1.25rem;
     padding: 0;
     background: none;
     border: none;
@@ -66,8 +66,8 @@
   }
 
   .closeButton svg {
-    width: 1rem;
-    height: 1rem;
+    inline-size: 1rem;
+    block-size: 1rem;
   }
 }
 

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

@@ -14,8 +14,8 @@
 
   .checkbox {
     margin-block-start: 0.25em;
-    width: var(--inputSize);
-    height: var(--inputSize);
+    inline-size: var(--inputSize);
+    block-size: var(--inputSize);
     color: var(--checkbox_color, var(--bds-color_on-bg));
     border: var(--checkbox_border, none);
     --bdc_color: currentcolor;
@@ -40,10 +40,10 @@
   .checkbox:checked::after {
     content: '';
     position: absolute;
-    left: 0.6em;
-    top: 0.2em;
-    width: 0.5em;
-    height: 1em;
+    inset-inline-start: 0.6em;
+    inset-block-start: 0.2em;
+    inline-size: 0.5em;
+    block-size: 1em;
     border: solid var(--checkbox_color-on-active, var(--bdc-color_on-active));
     border-width: 0 2px 2px 0;
     transform: rotate(45deg);

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

@@ -0,0 +1,74 @@
+import { Meta, Canvas, ArgTypes } from '@storybook/blocks';
+import * as Stories from './Checkbox.native.stories';
+
+<Meta of={Stories} />
+
+# Checkbox (React Native)
+
+React Native checkbox component with label, optional hint, and error state. Fully controlled — manage checked state via `checked` + `onChange`.
+
+> **Status: alpha** — API may change before stable release.
+
+## Usage
+
+```tsx
+import { Checkbox } from '@boostdev/components';
+import { useState } from 'react';
+
+function Example() {
+  const [checked, setChecked] = useState(false);
+  return (
+    <Checkbox
+      name="terms"
+      label="Accept terms and conditions"
+      checked={checked}
+      onChange={setChecked}
+    />
+  );
+}
+```
+
+## Examples
+
+### Interactive
+<Canvas of={Stories.Interactive} />
+
+### Unchecked
+<Canvas of={Stories.Unchecked} />
+
+### Checked
+<Canvas of={Stories.Checked} />
+
+### With hint
+<Canvas of={Stories.WithHint} />
+
+### With error
+<Canvas of={Stories.WithError} />
+
+### Disabled
+<Canvas of={Stories.Disabled} />
+
+### Disabled + checked
+<Canvas of={Stories.DisabledChecked} />
+
+## Props
+
+<ArgTypes of={Stories} />
+
+## Props reference
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `name` | string | — | Field name (used for accessibility grouping) |
+| `label` | string | — | Visible label text |
+| `checked` | boolean | `false` | Controlled checked state |
+| `onChange` | `(checked: boolean) => void` | — | Called with the new value on press |
+| `disabled` | boolean | `false` | Prevents interaction, reduces opacity |
+| `hint` | string | — | Helper text below the label |
+| `error` | string | — | Error message; shown instead of hint when set |
+
+## Accessibility
+
+- The label, hint, and error are announced together by screen readers
+- `disabled` communicates the disabled state via `accessibilityState`
+- Group related checkboxes using a wrapping `View` with `accessibilityRole="radiogroup"` or a labelled `fieldset` equivalent

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

@@ -12,7 +12,7 @@
 
   .input {
     appearance: none;
-    width: 100%;
+    inline-size: 100%;
     font-family: var(--bds-font_family--body);
     font-size: var(--bds-font_size--body);
     padding: var(--bds-space_s);
@@ -59,18 +59,17 @@
   }
 
   .chevron svg {
-    width: 1rem;
-    height: 1rem;
+    inline-size: 1rem;
+    block-size: 1rem;
   }
 
   .listbox {
     position: absolute;
-    top: calc(100% + var(--bds-space_xxs));
-    left: 0;
-    right: 0;
+    inset-block-start: calc(100% + var(--bds-space_xxs));
+    inset-inline: 0;
     z-index: var(--bds-z-index_dropdown);
-    max-height: 15rem;
-    overflow-y: auto;
+    max-block-size: 15rem;
+    overflow-block: auto;
     list-style: none;
     margin: 0;
     padding: var(--bds-space_xxs) 0;

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

@@ -48,8 +48,8 @@
   }
 
   .icon {
-    width: 2rem;
-    height: 2rem;
+    inline-size: 2rem;
+    block-size: 2rem;
     flex-shrink: 0;
   }
 
@@ -70,8 +70,8 @@
 
   .hiddenInput {
     position: absolute;
-    width: 1px;
-    height: 1px;
+    inline-size: 1px;
+    block-size: 1px;
     overflow: hidden;
     clip: rect(0, 0, 0, 0);
     white-space: nowrap;

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

@@ -38,7 +38,7 @@
     padding: var(--bds-space_s);
     background: transparent;
     color: var(--numberInput_color, var(--bds-color_on-bg));
-    min-width: 0;
+    min-inline-size: 0;
     appearance: textfield;
   }
 

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

@@ -29,8 +29,8 @@
   .radio {
     flex-shrink: 0;
     margin-block-start: 0.2em;
-    width: var(--inputSize);
-    height: var(--inputSize);
+    inline-size: var(--inputSize);
+    block-size: var(--inputSize);
     color: var(--radio_color, var(--bds-color_on-bg));
     border: var(--radio_border, none);
     --bdc_color: currentcolor;
@@ -55,11 +55,11 @@
   .radio:checked::after {
     content: '';
     position: absolute;
-    left: 50%;
-    top: 50%;
+    inset-inline-start: 50%;
+    inset-block-start: 50%;
     transform: translate(-50%, -50%);
-    width: 0.4em;
-    height: 0.4em;
+    inline-size: 0.4em;
+    block-size: 0.4em;
     border-radius: 50%;
     background-color: var(--radio_color-on-active, var(--bdc-color_on-active));
   }

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

@@ -12,10 +12,9 @@
 
   .thumb {
     position: absolute;
-    top: var(--bds-space_xxxs);
-    bottom: var(--bds-space_xxxs);
-    left: var(--bds-space_xxxs);
-    width: calc((100% - 2 * var(--bds-space_xxxs)) / var(--control_count, 1));
+    inset-block: var(--bds-space_xxxs);
+    inset-inline-start: var(--bds-space_xxxs);
+    inline-size: calc((100% - 2 * var(--bds-space_xxxs)) / var(--control_count, 1));
     border-radius: var(--bds-border_radius--s);
     background-color: var(--control_thumb-bg, var(--bds-color_bg));
     box-shadow: var(--bds-shadow_s);
@@ -43,8 +42,8 @@
   .radio {
     position: absolute;
     opacity: 0;
-    width: 0;
-    height: 0;
+    inline-size: 0;
+    block-size: 0;
     margin: 0;
   }