@boostdev/design-system-components 1.2.1 → 1.2.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@boostdev/design-system-components",
-  "version": "1.2.1",
+  "version": "1.2.3",
   "description": "BoostDev React component library: accessible, token-driven components built on @boostdev/design-system-foundation",
   "keywords": [
     "React",
@@ -271,7 +271,7 @@
     "typecheck": "tsc --noEmit",
     "lint": "eslint src",
     "lint:css": "stylelint \"src/**/*.css\"",
-    "storybook": "storybook dev -p 6006 --no-manager-cache",
+    "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
     "test": "vitest run",
     "test:watch": "vitest",
@@ -279,7 +279,7 @@
     "changelog:unreleased": "pnpm exec git-cliff --unreleased"
   },
   "devDependencies": {
-    "@boostdev/design-system-foundation": "^1.0.4",
+    "@boostdev/design-system-foundation": "^1.0.5",
     "@modelcontextprotocol/sdk": "^1.27.0",
     "@storybook/addon-docs": "8.6.14",
     "@storybook/addon-essentials": "^8.6.14",

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

@@ -36,7 +36,7 @@
     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;
     scroll-padding-block-end: var(--bds-space_l);
@@ -76,7 +76,6 @@
   .button.--size_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);
   }
@@ -89,7 +88,6 @@
 
   .button.--size_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);
   }
@@ -137,7 +135,6 @@
   .button:focus-visible {
     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 */

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

@@ -1,4 +1,4 @@
-import { useState, useEffect, useRef, useId, KeyboardEvent, useMemo } from 'react';
+import { HTMLAttributes, useState, useEffect, useRef, useId, KeyboardEvent, useMemo } from 'react';
 import { installInvokerCommandsPolyfill } from '../../../polyfill-invoker-commands';
 
 // Install once at module load — no-op if native support is present.
@@ -17,8 +17,7 @@ export interface CommandItem {
   onSelect: () => void;
 }
 
-interface CommandProps extends WithClassName {
-  id?: string;
+interface CommandProps extends WithClassName, HTMLAttributes<HTMLDialogElement> {
   isOpen: boolean;
   onOpen?: () => void;
   onClose: () => void;
@@ -34,6 +33,7 @@ export function Command({
   items,
   placeholder = 'Search commands…',
   className,
+  ...rest
 }: Readonly<CommandProps>) {
   const [query, setQuery] = useState('');
   const [activeIndex, setActiveIndex] = useState(0);
@@ -139,6 +139,7 @@ export function Command({
 
   return (
     <dialog
+      {...rest}
       ref={dialogRef}
       id={dialogId}
       className={cn(css.dialog, className)}

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

@@ -33,7 +33,7 @@
     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);

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

@@ -1,4 +1,4 @@
-import { ReactNode, useEffect, useId, useRef } from 'react';
+import { HTMLAttributes, useEffect, useId, useRef } from 'react';
 import { installInvokerCommandsPolyfill } from '../../../polyfill-invoker-commands';
 
 // Install once at module load — no-op if native support is present.
@@ -9,15 +9,13 @@ import css from './Dialog.module.css';
 import { cn } from '@boostdev/design-system-foundation';
 import type { WithClassName } from '../../../types';
 
-interface DialogProps extends WithClassName {
-  children: ReactNode;
-  id?: string;
+interface DialogProps extends WithClassName, HTMLAttributes<HTMLDialogElement> {
   isOpen?: boolean;
   onOpen?: () => void;
   onClose?: () => void;
 }
 
-export function Dialog({ children, id: idProp, isOpen = false, className, onOpen, onClose }: DialogProps) {
+export function Dialog({ children, id: idProp, isOpen = false, className, onOpen, onClose, ...rest }: DialogProps) {
   const generatedId = useId();
   const id = idProp ?? generatedId;
 
@@ -92,6 +90,7 @@ export function Dialog({ children, id: idProp, isOpen = false, className, onOpen
 
   return (
     <dialog
+      {...rest}
       ref={dialogRef}
       id={id}
       className={cn(className, css.dialog)}

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

@@ -78,7 +78,7 @@
     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);
   }

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

@@ -85,13 +85,13 @@ describe('Drawer', () => {
     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>);
+  it('renders aria-label on the dialog when aria-label prop is provided', () => {
+    render(<Drawer isOpen title="Settings" aria-label="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', () => {
+  it('does not render aria-label when aria-label prop is not provided', () => {
     render(<Drawer isOpen title="Settings" onClose={() => {}}>Content</Drawer>);
     const dialog = document.querySelector('dialog');
     expect(dialog).not.toHaveAttribute('aria-label');

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

@@ -1,4 +1,4 @@
-import { ReactNode, useEffect, useId, useRef } from 'react';
+import { HTMLAttributes, ReactNode, useEffect, useId, useRef } from 'react';
 import { installInvokerCommandsPolyfill } from '../../../polyfill-invoker-commands';
 
 // Install once at module load — no-op if native support is present.
@@ -8,15 +8,12 @@ import css from './Drawer.module.css';
 import { cn } from '@boostdev/design-system-foundation';
 import type { WithClassName } from '../../../types';
 
-interface DrawerProps extends WithClassName {
-  id?: string;
+interface DrawerProps extends WithClassName, Omit<HTMLAttributes<HTMLDialogElement>, 'title'> {
   isOpen: boolean;
   onOpen?: () => void;
   onClose: () => void;
   title: ReactNode;
-  children: ReactNode;
   side?: 'left' | 'right';
-  ariaLabel?: string;
 }
 
 export function Drawer({
@@ -27,8 +24,8 @@ export function Drawer({
   title,
   children,
   side = 'right',
-  ariaLabel,
   className,
+  ...rest
 }: Readonly<DrawerProps>) {
   const generatedId = useId();
   const id = idProp ?? generatedId;
@@ -92,10 +89,10 @@ export function Drawer({
 
   return (
     <dialog
+      {...rest}
       ref={dialogRef}
       id={id}
       className={cn(css.drawer, css[`--side_${side}`], className)}
-      aria-label={ariaLabel}
       aria-modal="true"
       onClick={handleClick}
       onCancel={handleCancel}

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

@@ -22,6 +22,10 @@
     margin: 0;
   }
 
+  .menu li {
+    list-style: none;
+  }
+
   .--placement_bottom-start { inset-inline-start: 0; }
   .--placement_bottom-end   { inset-inline-end: 0; }
 

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

@@ -26,14 +26,14 @@ export const Default: Story = {
     ],
   },
   render: args => (
-    <DropdownMenu {...args} trigger={<Button variant="ghost">Actions ▾</Button>} />
+    <DropdownMenu {...args} trigger={<Button variant="outline">Actions ▾</Button>} />
   ),
 };
 
 export const WithDisabledItem: Story = {
   render: () => (
     <DropdownMenu
-      trigger={<Button variant="ghost">Options ▾</Button>}
+      trigger={<Button variant="outline">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="ghost">File ▾</Button>}
+      trigger={<Button variant="outline">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="ghost">⋮</Button>}
+      trigger={<Button variant="outline">⋮</Button>}
       items={[{ id: 'copy', label: 'Copy link' }, { id: 'report', label: 'Report' }]}
       placement="bottom-end"
     />

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

@@ -1,4 +1,5 @@
 import {
+  HTMLAttributes,
   KeyboardEvent,
   ReactElement,
   cloneElement,
@@ -21,7 +22,7 @@ export interface DropdownMenuItem {
   separator?: boolean;
 }
 
-interface DropdownMenuProps extends WithClassName {
+interface DropdownMenuProps extends WithClassName, HTMLAttributes<HTMLDivElement> {
   trigger: ReactElement;
   items: DropdownMenuItem[];
   placement?: 'bottom-start' | 'bottom-end';
@@ -32,6 +33,7 @@ export function DropdownMenu({
   items,
   placement = 'bottom-start',
   className,
+  ...rest
 }: Readonly<DropdownMenuProps>) {
   const [isOpen, setIsOpen] = useState(false);
   const containerRef = useRef<HTMLDivElement>(null);
@@ -105,7 +107,7 @@ export function DropdownMenu({
     : trigger;
 
   return (
-    <div ref={containerRef} className={cn(css.wrapper, className)}>
+    <div {...rest} ref={containerRef} className={cn(css.wrapper, className)}>
       {triggerEl}
       {isOpen && (
         <ul

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

@@ -1,4 +1,5 @@
 import {
+  HTMLAttributes,
   ReactElement,
   ReactNode,
   cloneElement,
@@ -25,11 +26,10 @@ if (
   import('@oddbird/css-anchor-positioning').catch(() => {});
 }
 
-interface PopoverProps extends WithClassName {
+interface PopoverProps extends WithClassName, Omit<HTMLAttributes<HTMLSpanElement>, 'content'> {
   children: ReactElement;
   content: ReactNode;
   placement?: 'top' | 'bottom' | 'left' | 'right';
-  'aria-label'?: string;
 }
 
 export function Popover({
@@ -38,6 +38,7 @@ export function Popover({
   placement = 'bottom',
   className,
   'aria-label': ariaLabel,
+  ...rest
 }: Readonly<PopoverProps>) {
   const [isOpen, setIsOpen] = useState(false);
   const containerRef = useRef<HTMLSpanElement>(null);
@@ -102,7 +103,7 @@ export function Popover({
     : children;
 
   return (
-    <span ref={containerRef} className={cn(css.wrapper, className)}>
+    <span {...rest} ref={containerRef} className={cn(css.wrapper, className)}>
       {trigger}
       <div
         ref={panelRef}

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

@@ -1,15 +1,17 @@
+import { HTMLAttributes } from 'react';
 import css from './Rating.module.css';
 import { cn } from '@boostdev/design-system-foundation';
 import type { WithClassName } from '../../../types';
 
-interface RatingProps extends WithClassName {
+interface RatingProps extends WithClassName, HTMLAttributes<HTMLDivElement> {
   value: number;
   max?: number;
 }
 
-export function Rating({ value, max = 5, className }: RatingProps) {
+export function Rating({ value, max = 5, className, ...rest }: RatingProps) {
   return (
     <div
+      {...rest}
       className={cn(css.rating, className)}
       role="img"
       aria-label={`${value} out of ${max} stars`}

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

@@ -1,16 +1,14 @@
-import { ReactNode, useId } from 'react';
+import { FieldsetHTMLAttributes, useId } from 'react';
 import css from './CheckboxGroup.module.css';
 import { Message } from '../atoms/Message';
 import { cn } from '@boostdev/design-system-foundation';
 import type { WithClassName } from '../../../../types';
 
-export interface CheckboxGroupProps extends WithClassName {
+export interface CheckboxGroupProps extends WithClassName, FieldsetHTMLAttributes<HTMLFieldSetElement> {
   legend: string;
-  children: ReactNode;
   error?: string;
   hint?: string;
   required?: boolean;
-  disabled?: boolean;
 }
 
 export function CheckboxGroup({
@@ -19,8 +17,8 @@ export function CheckboxGroup({
   error,
   hint,
   required,
-  disabled,
   className,
+  ...rest
 }: Readonly<CheckboxGroupProps>) {
   const id = useId();
   const hintId = id + 'hint';
@@ -29,8 +27,8 @@ export function CheckboxGroup({
 
   return (
     <fieldset
+      {...rest}
       className={cn(css.group, className)}
-      disabled={disabled}
       aria-required={required || undefined}
       aria-describedby={describedBy}
     >

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

@@ -19,7 +19,7 @@
     padding-inline-end: var(--bds-space_xxl);
     border: var(--combobox_border, none);
     --bdc_color: currentcolor;
-    --bdc-outline_radius: var(--bds-border_radius--xs);
+    --bdc-outline_radius: var(--bds-border_radius--full);
 
     border-radius: var(--combobox_radius, var(--bdc-outline_radius));
     box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color), var(--combobox_shadow, var(--bdc-outline_shadow));

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

@@ -1,5 +1,6 @@
 import {
   ChangeEvent,
+  HTMLAttributes,
   KeyboardEvent,
   ReactNode,
   useEffect,
@@ -21,7 +22,7 @@ export interface ComboboxOption {
   disabled?: boolean;
 }
 
-interface ComboboxProps extends WithClassName {
+interface ComboboxProps extends WithClassName, Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
   label: ReactNode;
   name: string;
   options: ComboboxOption[];
@@ -44,6 +45,7 @@ export function Combobox({
   error,
   hint,
   className,
+  ...rest
 }: Readonly<ComboboxProps>) {
   const id = name + useId();
   const listboxId = id + 'listbox';
@@ -122,7 +124,7 @@ export function Combobox({
   };
 
   return (
-    <InputContainer className={cn(css.formGroup, className)}>
+    <InputContainer {...rest} className={cn(css.formGroup, className)}>
       <Label id={id} label={label} />
       <div ref={containerRef} className={css.inputWrapper}>
         <input

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

@@ -1,11 +1,11 @@
-import { useId, useRef, useState, DragEvent, ChangeEvent } from 'react';
+import { HTMLAttributes, useId, useRef, useState, DragEvent, ChangeEvent } from 'react';
 import css from './FileInput.module.css';
 import { Message } from '../atoms/Message';
 import { InputContainer } from '../atoms/InputContainer';
 import { cn } from '@boostdev/design-system-foundation';
 import type { WithClassName } from '../../../../types';
 
-interface FileInputProps extends WithClassName {
+interface FileInputProps extends WithClassName, Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
   label: string;
   name: string;
   accept?: string;
@@ -28,6 +28,7 @@ export function FileInput({
   hint,
   onChange,
   className,
+  ...rest
 }: Readonly<FileInputProps>) {
   const uid = name + useId();
   const hintId = uid + 'hint';
@@ -73,7 +74,7 @@ export function FileInput({
   const handleDragLeave = () => setIsDragging(false);
 
   return (
-    <InputContainer className={cn(css.formGroup, className)}>
+    <InputContainer {...rest} className={cn(css.formGroup, className)}>
       <label
         htmlFor={uid}
         className={cn(css.dropZone, isDragging && css.isDragging, error && css.hasError, disabled && css.isDisabled)}

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

@@ -12,7 +12,7 @@
     padding: var(--bds-space_s);
     border: var(--input_border, none);
     --bdc_color: currentcolor;
-    --bdc-outline_radius: var(--bds-border_radius--xs);
+    --bdc-outline_radius: var(--bds-border_radius--full);
 
     border-radius: var(--input_radius, var(--bdc-outline_radius));
     box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color), var(--input_shadow, var(--bdc-outline_shadow));

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

@@ -9,7 +9,7 @@
     align-items: stretch;
     border: var(--numberInput_border, none);
     --bdc_color: currentcolor;
-    --bdc-outline_radius: var(--bds-border_radius--xs);
+    --bdc-outline_radius: var(--bds-border_radius--full);
 
     --_radius: var(--numberInput_radius, var(--bdc-outline_radius));
 

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

@@ -1,4 +1,4 @@
-import {useId, useRef, useState} from 'react';
+import {HTMLAttributes, useId, useRef, useState} from 'react';
 import css from './NumberInput.module.css';
 import {Label} from '../atoms/Label';
 import {Message} from '../atoms/Message';
@@ -6,7 +6,7 @@ import {InputContainer} from '../atoms/InputContainer';
 import {cn} from '@boostdev/design-system-foundation';
 import type { WithClassName } from '../../../../types';
 
-interface NumberInputProps extends WithClassName {
+interface NumberInputProps extends WithClassName, Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
   label: string;
   name: string;
   value?: number;
@@ -33,6 +33,7 @@ export function NumberInput({
   hint,
   onChange,
   className,
+  ...rest
 }: Readonly<NumberInputProps>) {
   const uid = name + useId();
   const hintId = uid + 'hint';
@@ -62,7 +63,7 @@ export function NumberInput({
   };
 
   return (
-    <InputContainer className={cn(css.formGroup, className)}>
+    <InputContainer {...rest} className={cn(css.formGroup, className)}>
       <Label id={uid} label={label} />
       <div className={css.inputRow}>
         <button

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

@@ -1,16 +1,14 @@
-import { ReactNode, useId } from 'react';
+import { FieldsetHTMLAttributes, useId } from 'react';
 import css from './RadioGroup.module.css';
 import { Message } from '../atoms/Message';
 import { cn } from '@boostdev/design-system-foundation';
 import type { WithClassName } from '../../../../types';
 
-export interface RadioGroupProps extends WithClassName {
+export interface RadioGroupProps extends WithClassName, FieldsetHTMLAttributes<HTMLFieldSetElement> {
   legend: string;
-  children: ReactNode;
   error?: string;
   hint?: string;
   required?: boolean;
-  disabled?: boolean;
 }
 
 export function RadioGroup({
@@ -19,8 +17,8 @@ export function RadioGroup({
   error,
   hint,
   required,
-  disabled,
   className,
+  ...rest
 }: Readonly<RadioGroupProps>) {
   const id = useId();
   const hintId = id + 'hint';
@@ -29,8 +27,8 @@ export function RadioGroup({
 
   return (
     <fieldset
+      {...rest}
       className={cn(css.group, className)}
-      disabled={disabled}
       aria-required={required || undefined}
       aria-describedby={describedBy}
     >

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

@@ -6,7 +6,7 @@
     grid-auto-columns: 1fr;
     padding: var(--bds-space_xxxs);
     background-color: var(--control_track-bg, var(--bds-color_bg--subtle));
-    border-radius: var(--control_radius, var(--bds-border_radius--m));
+    border-radius: var(--control_radius, var(--bds-border_radius--full));
     gap: 0;
   }
 
@@ -16,7 +16,7 @@
     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(--control_thumb-radius, var(--bds-border_radius--s));
+    border-radius: var(--control_thumb-radius, var(--bds-border_radius--full));
     background-color: var(--control_thumb-bg, var(--bds-color_interactive));
     box-shadow: var(--bds-shadow_s);
     pointer-events: none;
@@ -30,7 +30,7 @@
     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(--control_thumb-radius, var(--bds-border_radius--s));
+    border-radius: var(--control_thumb-radius, var(--bds-border_radius--full));
     pointer-events: none;
     z-index: 2;
     display: none;
@@ -46,7 +46,7 @@
     align-items: center;
     justify-content: center;
     cursor: pointer;
-    border-radius: var(--control_thumb-radius, var(--bds-border_radius--s));
+    border-radius: var(--control_thumb-radius, var(--bds-border_radius--full));
     padding: var(--bds-space_xs) var(--bds-space_m);
     font-size: var(--bds-font_size--body);
     font-family: var(--bds-font_family--body);
@@ -66,7 +66,7 @@
   .item:focus-visible {
     outline: var(--bds-outline_default);
     outline-offset: calc(var(--bds-outline_offset) * -1);
-    border-radius: var(--control_thumb-radius, var(--bds-border_radius--s));
+    border-radius: var(--control_thumb-radius, var(--bds-border_radius--full));
   }
 
   .item.--active {

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

@@ -1,10 +1,9 @@
-import { Children, ReactElement, ReactNode, cloneElement, isValidElement } from 'react';
+import { Children, HTMLAttributes, ReactElement, cloneElement, isValidElement } from 'react';
 import css from './SegmentedControl.module.css';
 import { cn } from '@boostdev/design-system-foundation';
 import type { WithClassName } from '../../../../types';
 
-export interface SegmentedControlProps extends WithClassName {
-  children: ReactNode;
+export interface SegmentedControlProps extends WithClassName, HTMLAttributes<HTMLDivElement> {
   /**
    * Zero-based index of the active item.
    * When omitted, auto-detected from the first child that has
@@ -15,7 +14,6 @@ export interface SegmentedControlProps extends WithClassName {
   size?: 'small' | 'medium' | 'large';
   /** "outline" (default) — sliding inset border; "filled" — sliding filled thumb */
   variant?: 'outline' | 'filled';
-  'aria-label'?: string;
 }
 
 export function SegmentedControl({
@@ -25,7 +23,7 @@ export function SegmentedControl({
   size = 'medium',
   variant = 'outline',
   className,
-  'aria-label': ariaLabel,
+  ...rest
 }: Readonly<SegmentedControlProps>) {
   const validChildren = Children.toArray(children).filter(isValidElement) as ReactElement<Record<string, unknown>>[];
 
@@ -41,8 +39,8 @@ export function SegmentedControl({
 
   return (
     <div
+      {...rest}
       role="group"
-      aria-label={ariaLabel}
       className={cn(css.control, css[`--size_${size}`], css[`--variant_${variant}`], className)}
       style={{
         '--control_count': validChildren.length,

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

@@ -19,7 +19,7 @@
     padding-inline-end: var(--bds-space_xxl);
     border: var(--select_border, none);
     --bdc_color: currentcolor;
-    --bdc-outline_radius: var(--bds-border_radius--xs);
+    --bdc-outline_radius: var(--bds-border_radius--full);
 
     border-radius: var(--select_radius, var(--bdc-outline_radius));
     box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color), var(--select_shadow, var(--bdc-outline_shadow));