@boostdev/design-system-components 1.2.1 → 1.2.3

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

@@ -26,7 +26,7 @@
     appearance: none;
     inline-size: 100%;
     block-size: var(--slider_track-height);
-    border-radius: 999px;
+    border-radius: var(--slider_track-radius, var(--bds-border_radius--full));
     background: linear-gradient(
       to right,
       var(--slider_color-active, var(--bdc-color_active)) 0%,
@@ -41,7 +41,7 @@
   .slider:focus-visible {
     outline: var(--bds-outline_default);
     outline-offset: var(--bds-outline_offset);
-    border-radius: 999px;
+    border-radius: var(--slider_track-radius, var(--bds-border_radius--full));
   }
 
   .slider:disabled {
@@ -54,7 +54,7 @@
     appearance: none;
     inline-size: var(--slider_thumb-size);
     block-size: var(--slider_thumb-size);
-    border-radius: 50%;
+    border-radius: var(--slider_thumb-radius, var(--bds-border_radius--circle));
     background-color: var(--slider_color-active, var(--bdc-color_active));
     box-shadow: var(--bds-shadow_s);
     transition: var(--bds-animation_transition);
@@ -66,7 +66,7 @@
     inline-size: var(--slider_thumb-size);
     block-size: var(--slider_thumb-size);
     border: none;
-    border-radius: 50%;
+    border-radius: var(--slider_thumb-radius, var(--bds-border_radius--circle));
     background-color: var(--slider_color-active, var(--bdc-color_active));
     box-shadow: var(--bds-shadow_s);
     cursor: pointer;

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

@@ -52,7 +52,7 @@
     align-items: center;
     inline-size: var(--switch_track-width);
     block-size: var(--switch_track-height);
-    border-radius: 999px;
+    border-radius: var(--switch_track-radius, var(--bds-border_radius--full));
     background-color: var(--switch_track-bg, var(--bds-color_grey--subtle));
     padding-inline: var(--switch_track-pad);
     pointer-events: none;
@@ -69,7 +69,7 @@
     display: block;
     inline-size: var(--switch_thumb-size);
     block-size: var(--switch_thumb-size);
-    border-radius: 50%;
+    border-radius: var(--switch_thumb-radius, var(--bds-border_radius--circle));
     background-color: var(--switch_thumb-bg, var(--bds-color_interactive));
     box-shadow: var(--bds-shadow_s);
     transition: var(--bds-animation_transition);
@@ -97,7 +97,7 @@
   .switch:focus-visible + .track {
     outline: var(--bds-outline_default);
     outline-offset: var(--bds-outline_offset);
-    border-radius: 999px;
+    border-radius: var(--switch_track-radius, var(--bds-border_radius--full));
   }
 
   /* Disabled state */

package/src/components/interaction/form/atoms/InputContainer.tsx

@@ -5,6 +5,6 @@ import type { WithClassName } from '../../../../types';
 
 type ContainerProps = WithClassName & HTMLAttributes<HTMLDivElement>;
 
-export const InputContainer = ({ children, className }: ContainerProps) => {
-  return <div className={cn(css.container, className)}>{children}</div>;
+export const InputContainer = ({ children, className, ...rest }: ContainerProps) => {
+  return <div {...rest} className={cn(css.container, className)}>{children}</div>;
 };

package/src/components/layout/ButtonGroup/ButtonGroup.tsx

@@ -1,19 +1,17 @@
-import { ReactNode } from 'react';
+import { HTMLAttributes } from 'react';
 import css from './ButtonGroup.module.css';
 import { cn } from '@boostdev/design-system-foundation';
 import type { WithClassName } from '../../../types';
 
-export interface ButtonGroupProps extends WithClassName {
-  children: ReactNode;
+export interface ButtonGroupProps extends WithClassName, HTMLAttributes<HTMLDivElement> {
   variant?: 'flow' | 'card' | 'modal' | 'content';
-  'aria-label'?: string;
 }
 
-export function ButtonGroup({ children, className, variant, 'aria-label': ariaLabel }: ButtonGroupProps) {
+export function ButtonGroup({ children, className, variant, ...rest }: ButtonGroupProps) {
   return (
     <div
+      {...rest}
       role="group"
-      aria-label={ariaLabel}
       className={cn(css.buttonGroup, className, variant && css[`--variant_${variant}`])}
     >
       <div className={css.container}>{children}</div>

package/src/components/layout/Card/Card.tsx

@@ -1,16 +1,12 @@
-import { CSSProperties, ReactNode } from 'react';
+import { HTMLAttributes } from 'react';
 import css from './Card.module.css';
 import { cn } from '@boostdev/design-system-foundation';
 import type { WithClassName } from '../../../types';
 
-interface CardProps extends WithClassName {
-  children: ReactNode;
+interface CardProps extends WithClassName, HTMLAttributes<HTMLElement> {
   variant?: 'default' | 'elevated' | 'outlined';
   padding?: 'none' | 'small' | 'medium' | 'large';
   textAlign?: 'start' | 'center' | 'end';
-  style?: CSSProperties;
-  onClick?: () => void;
-  'aria-label'?: string;
 }
 
 export function Card({
@@ -19,9 +15,8 @@ export function Card({
   variant = 'default',
   padding = 'medium',
   textAlign = 'start',
-  style,
   onClick,
-  'aria-label': ariaLabel,
+  ...rest
 }: CardProps) {
   const classNames = cn(
     css.card,
@@ -36,10 +31,9 @@ export function Card({
 
   return (
     <Component
+      {...rest}
       className={classNames}
       onClick={onClick}
-      style={style}
-      aria-label={ariaLabel}
       {...(onClick && { type: 'button' as const })}
     >
       {children}

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

@@ -3,7 +3,7 @@
     inline-size: 2em;
     block-size: 2em;
     font-size: 3em;
-    border-radius: 50%;
+    border-radius: var(--icon-wrapper-radius, var(--bds-border_radius--circle));
     display: flex;
     align-items: center;
     justify-content: center;

package/src/components/layout/IconWrapper/IconWrapper.tsx

@@ -1,15 +1,14 @@
-import { ReactNode } from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
 import css from './IconWrapper.module.css';
 import { cn } from '@boostdev/design-system-foundation';
 import type { WithClassName } from '../../../types';
 
-export interface IconWrapperProps extends WithClassName {
+export interface IconWrapperProps extends WithClassName, HTMLAttributes<HTMLDivElement> {
   children: ReactNode;
-  'aria-hidden'?: boolean | 'true' | 'false';
 }
 
-export function IconWrapper({ children, className, 'aria-hidden': ariaHidden }: IconWrapperProps) {
+export function IconWrapper({ children, className, ...rest }: IconWrapperProps) {
   return (
-    <div className={cn(className, css.wrapper)} aria-hidden={ariaHidden}>{children}</div>
+    <div {...rest} className={cn(className, css.wrapper)}>{children}</div>
   );
 }

package/src/components/layout/SectionHeader/SectionHeader.tsx

@@ -1,11 +1,11 @@
-import type { JSX } from 'react';
+import type { HTMLAttributes, JSX } from 'react';
 import css from './SectionHeader.module.css';
 import { cn } from '@boostdev/design-system-foundation';
 import type { WithClassName } from '../../../types';
 
 type IntrinsicElement = keyof JSX.IntrinsicElements;
 
-type SectionHeaderProps = WithClassName & {
+type SectionHeaderProps = WithClassName & Omit<HTMLAttributes<HTMLDivElement>, 'title'> & {
   title: string;
   subtitle?: string;
   alignment?: 'start' | 'center' | 'end';
@@ -19,11 +19,12 @@ export function SectionHeader({
   className,
   alignment = 'start',
   size = 'medium',
-  titleAs = 'h2'
+  titleAs = 'h2',
+  ...rest
 }: Readonly<SectionHeaderProps>) {
   const Title = titleAs;
   return (
-    <div className={cn(css.sectionHeader, css[`--${alignment}`], css[`--${size}`], className)}>
+    <div {...rest} className={cn(css.sectionHeader, css[`--${alignment}`], css[`--${size}`], className)}>
       <Title className={css.title}>{title}</Title>
       {subtitle && <p className={css.subtitle}>{subtitle}</p>}
     </div>

package/src/components/ui/Accordion/Accordion.tsx

@@ -1,4 +1,4 @@
-import { ReactNode, useId, useState } from 'react';
+import { HTMLAttributes, ReactNode, useId, useState } from 'react';
 import css from './Accordion.module.css';
 import { cn } from '@boostdev/design-system-foundation';
 import type { WithClassName } from '../../../types';
@@ -10,7 +10,7 @@ export interface AccordionItem {
   disabled?: boolean;
 }
 
-interface AccordionProps extends WithClassName {
+interface AccordionProps extends WithClassName, HTMLAttributes<HTMLDivElement> {
   items: AccordionItem[];
   allowMultiple?: boolean;
   defaultOpen?: string[];
@@ -21,6 +21,7 @@ export function Accordion({
   allowMultiple = false,
   defaultOpen = [],
   className,
+  ...rest
 }: Readonly<AccordionProps>) {
   const baseId = useId();
   const [openIds, setOpenIds] = useState<string[]>(defaultOpen);
@@ -34,7 +35,7 @@ export function Accordion({
   };
 
   return (
-    <div className={cn(css.accordion, className)}>
+    <div {...rest} className={cn(css.accordion, className)}>
       {items.map(item => {
         const isOpen = openIds.includes(item.id);
         const triggerId = `${baseId}-trigger-${item.id}`;

package/src/components/ui/Alert/Alert.module.css

@@ -65,7 +65,7 @@
         color: currentcolor;
         transition: var(--bds-animation_transition);
         border: var(--alert_dismiss-border, none);
-        border-radius: 50%;
+        border-radius: var(--alert_dismiss-radius, var(--bds-border_radius--circle));
         --bdc_color: currentcolor;
 
         box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color);

package/src/components/ui/Alert/Alert.tsx

@@ -1,13 +1,12 @@
-import { ReactNode } from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
 import css from './Alert.module.css';
 import { cn } from '@boostdev/design-system-foundation';
 import type { WithClassName } from '../../../types';
 
-interface AlertProps extends WithClassName {
+interface AlertProps extends WithClassName, Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
   variant?: 'info' | 'success' | 'warning' | 'error';
   icon?: ReactNode;
   title?: string;
-  children: ReactNode;
   onDismiss?: () => void;
 }
 
@@ -18,11 +17,13 @@ export function Alert({
   children,
   onDismiss,
   className,
+  ...rest
 }: Readonly<AlertProps>) {
   const isUrgent = variant === 'error' || variant === 'warning';
 
   return (
     <div
+      {...rest}
       role={isUrgent ? 'alert' : 'status'}
       aria-live={isUrgent ? 'assertive' : 'polite'}
       aria-atomic="true"

package/src/components/ui/Avatar/Avatar.module.css

@@ -5,7 +5,7 @@
     justify-content: center;
     width: var(--avatar_size, 3em);
     height: var(--avatar_size, 3em);
-    border-radius: 50%;
+    border-radius: var(--avatar_radius, var(--bds-border_radius--circle));
     overflow: hidden;
     flex-shrink: 0;
   }

package/src/components/ui/Avatar/Avatar.tsx

@@ -1,8 +1,9 @@
+import { HTMLAttributes } from 'react';
 import css from './Avatar.module.css';
 import { cn } from '@boostdev/design-system-foundation';
 import type { WithClassName } from '../../../types';
 
-interface AvatarProps extends WithClassName {
+interface AvatarProps extends WithClassName, HTMLAttributes<HTMLSpanElement> {
   src?: string;
   alt?: string;
   name?: string;
@@ -18,12 +19,12 @@ function getInitials(name: string): string {
     .join('');
 }
 
-export function Avatar({ src, alt, name, size = 'medium', className }: Readonly<AvatarProps>) {
+export function Avatar({ src, alt, name, size = 'medium', className, ...rest }: Readonly<AvatarProps>) {
   const sizeClass = css[`--size_${size}`];
 
   if (src) {
     return (
-      <span className={cn(css.avatar, sizeClass, className)}>
+      <span {...rest} className={cn(css.avatar, sizeClass, className)}>
         <img src={src} alt={alt ?? name ?? 'User avatar'} className={css.image} />
       </span>
     );
@@ -33,6 +34,7 @@ export function Avatar({ src, alt, name, size = 'medium', className }: Readonly<
 
   return (
     <span
+      {...rest}
       role="img"
       aria-label={name ?? 'User avatar'}
       className={cn(css.avatar, css['--fallback'], sizeClass, className)}

package/src/components/ui/Badge/Badge.module.css

@@ -4,7 +4,7 @@
     align-items: center;
     justify-content: center;
     padding: var(--bds-space_xxs) var(--bds-space_xs);
-    border-radius: var(--badge_radius, 2em);
+    border-radius: var(--badge_radius, var(--bds-border_radius--full));
     font-size: var(--badge_font-size, var(--bds-font_size--body--s));
     font-weight: var(--bds-font_weight--semibold);
     line-height: 1;

package/src/components/ui/Badge/Badge.tsx

@@ -1,13 +1,12 @@
-import { ReactNode } from 'react';
+import { HTMLAttributes } from 'react';
 import css from './Badge.module.css';
 import { cn } from '@boostdev/design-system-foundation';
 import type { WithClassName } from '../../../types';
 
-interface BadgeProps extends WithClassName {
-  children: ReactNode;
+interface BadgeProps extends WithClassName, HTMLAttributes<HTMLSpanElement> {
   variant?: 'primary' | 'secondary' | 'success' | 'error' | 'warning';
 }
 
-export function Badge({ children, variant = 'primary', className }: BadgeProps) {
-  return <span className={cn(css.badge, css[`--variant_${variant}`], className)}>{children}</span>;
+export function Badge({ children, variant = 'primary', className, ...rest }: BadgeProps) {
+  return <span {...rest} className={cn(css.badge, css[`--variant_${variant}`], className)}>{children}</span>;
 }

package/src/components/ui/Breadcrumb/Breadcrumb.tsx

@@ -1,3 +1,4 @@
+import { HTMLAttributes } from 'react';
 import css from './Breadcrumb.module.css';
 import { cn } from '@boostdev/design-system-foundation';
 import type { WithClassName } from '../../../types';
@@ -7,13 +8,13 @@ export interface BreadcrumbItem {
   href?: string;
 }
 
-interface BreadcrumbProps extends WithClassName {
+interface BreadcrumbProps extends WithClassName, HTMLAttributes<HTMLElement> {
   items: BreadcrumbItem[];
 }
 
-export function Breadcrumb({ items, className }: Readonly<BreadcrumbProps>) {
+export function Breadcrumb({ items, className, ...rest }: Readonly<BreadcrumbProps>) {
   return (
-    <nav aria-label="Breadcrumb" className={cn(css.breadcrumb, className)}>
+    <nav {...rest} aria-label="Breadcrumb" className={cn(css.breadcrumb, className)}>
       <ol className={css.list}>
         {items.map((item, index) => {
           const isLast = index === items.length - 1;

package/src/components/ui/Calendar/Calendar.module.css

@@ -33,7 +33,7 @@
     justify-content: center;
     inline-size: 2rem;
     block-size: 2rem;
-    border-radius: 50%;
+    border-radius: var(--calendar_button-radius, var(--bds-border_radius--circle));
     cursor: pointer;
     color: var(--bds-color_on-bg);
     transition: var(--bds-animation_transition);
@@ -80,7 +80,7 @@
     justify-content: center;
     inline-size: 100%;
     aspect-ratio: 1;
-    border-radius: 50%;
+    border-radius: var(--calendar_button-radius, var(--bds-border_radius--circle));
     font-size: var(--bds-font_size--body--s);
     color: var(--bds-color_on-bg);
     cursor: pointer;

package/src/components/ui/Calendar/Calendar.tsx

@@ -1,4 +1,4 @@
-import { useState, useId, KeyboardEvent } from 'react';
+import { HTMLAttributes, useState, useId, KeyboardEvent } from 'react';
 import css from './Calendar.module.css';
 import { cn } from '@boostdev/design-system-foundation';
 import type { WithClassName } from '../../../types';
@@ -13,7 +13,7 @@ const MONTHS = [
   'July', 'August', 'September', 'October', 'November', 'December',
 ];
 
-interface CalendarProps extends WithClassName {
+interface CalendarProps extends WithClassName, Omit<HTMLAttributes<HTMLDivElement>, 'defaultValue' | 'onChange'> {
   value?: Date;
   defaultValue?: Date;
   min?: Date;
@@ -46,7 +46,7 @@ function getFirstDayOfMonth(year: number, month: number): number {
   return new Date(year, month, 1).getDay();
 }
 
-export function Calendar({ value, defaultValue, min, max, onChange, className }: Readonly<CalendarProps>) {
+export function Calendar({ value, defaultValue, min, max, onChange, className, ...rest }: Readonly<CalendarProps>) {
   const today = new Date();
   const controlled = value !== undefined;
   const [internal, setInternal] = useState<Date | undefined>(defaultValue);
@@ -107,7 +107,7 @@ export function Calendar({ value, defaultValue, min, max, onChange, className }:
   while (cells.length % 7 !== 0) cells.push(null);
 
   return (
-    <div className={cn(css.calendar, className)} role="group" aria-labelledby={titleId}>
+    <div {...rest} className={cn(css.calendar, className)} role="group" aria-labelledby={titleId}>
       <div className={css.header}>
         <button
           type="button"

package/src/components/ui/Carousel/Carousel.module.css

@@ -32,7 +32,7 @@
     justify-content: center;
     inline-size: 2.5rem;
     block-size: 2.5rem;
-    border-radius: 50%;
+    border-radius: var(--carousel_indicator-radius, var(--bds-border_radius--circle));
     background-color: var(--bds-color_bg);
     color: var(--bds-color_on-bg);
 

package/src/components/ui/Carousel/Carousel.tsx

@@ -1,14 +1,14 @@
-import { ReactNode, useRef, useId } from 'react';
+import { HTMLAttributes, ReactNode, useRef, useId } from 'react';
 import css from './Carousel.module.css';
 import { cn } from '@boostdev/design-system-foundation';
 import type { WithClassName } from '../../../types';
 
-interface CarouselProps extends WithClassName {
+interface CarouselProps extends WithClassName, HTMLAttributes<HTMLElement> {
   items: ReactNode[];
   label: string;
 }
 
-export function Carousel({ items, label, className }: Readonly<CarouselProps>) {
+export function Carousel({ items, label, className, ...rest }: Readonly<CarouselProps>) {
   const trackRef = useRef<HTMLDivElement>(null);
   const listId = useId();
 
@@ -22,7 +22,7 @@ export function Carousel({ items, label, className }: Readonly<CarouselProps>) {
   };
 
   return (
-    <section aria-label={label} className={cn(css.carousel, className)}>
+    <section {...rest} aria-label={label} className={cn(css.carousel, className)}>
       <button
         type="button"
         className={cn(css.navBtn, css['--prev'])}

package/src/components/ui/DescriptionList/DescriptionList.tsx

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
 import css from './DescriptionList.module.css';
 import { cn } from '@boostdev/design-system-foundation';
 import type { WithClassName } from '../../../types';
@@ -8,14 +8,14 @@ export interface DescriptionItem {
   details: ReactNode | ReactNode[];
 }
 
-interface DescriptionListProps extends WithClassName {
+interface DescriptionListProps extends WithClassName, HTMLAttributes<HTMLDListElement> {
   items: DescriptionItem[];
   layout?: 'stacked' | 'inline';
 }
 
-export function DescriptionList({ items, layout = 'stacked', className }: Readonly<DescriptionListProps>) {
+export function DescriptionList({ items, layout = 'stacked', className, ...rest }: Readonly<DescriptionListProps>) {
   return (
-    <dl className={cn(css.list, css[`--layout_${layout}`], className)}>
+    <dl {...rest} className={cn(css.list, css[`--layout_${layout}`], className)}>
       {items.map((item, i) => (
         <div key={i} className={css.group}>
           <dt className={css.term}>{item.term}</dt>

package/src/components/ui/Loading/Loading.module.css

@@ -10,7 +10,7 @@
     block-size: 2.5em;
     border: 4px solid var(--bds-color_bg);
     border-block-start: 4px solid var(--bds-color_interactive);
-    border-radius: 50%;
+    border-radius: var(--loading_radius, var(--bds-border_radius--circle));
     animation: spin 1s linear infinite;
   }
 

package/src/components/ui/Loading/Loading.tsx

@@ -1,14 +1,15 @@
+import { HTMLAttributes } from 'react';
 import css from './Loading.module.css';
 import { cn } from '@boostdev/design-system-foundation';
 import type { WithClassName } from '../../../types';
 
-interface LoadingProps extends WithClassName {
+interface LoadingProps extends WithClassName, HTMLAttributes<HTMLDivElement> {
   size?: 'small' | 'medium' | 'large';
 }
 
-export function Loading({ size = 'medium', className }: LoadingProps) {
+export function Loading({ size = 'medium', className, ...rest }: LoadingProps) {
   return (
-    <div className={cn(css.loading, css[`--size_${size}`], className)}>
+    <div {...rest} className={cn(css.loading, css[`--size_${size}`], className)}>
       <div className={css.spinner} role="status" aria-label="Loading" />
     </div>
   );

package/src/components/ui/NotificationBanner/NotificationBanner.module.css

@@ -52,7 +52,7 @@
     flex-shrink: 0;
     cursor: pointer;
     color: currentcolor;
-    border-radius: 50%;
+    border-radius: var(--banner_dismiss-radius, var(--bds-border_radius--circle));
     border: var(--banner_dismiss-border, none);
     transition: var(--bds-animation_transition);
     --bdc_color: currentcolor;

package/src/components/ui/NotificationBanner/NotificationBanner.tsx

@@ -1,9 +1,9 @@
-import { ReactNode } from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
 import css from './NotificationBanner.module.css';
 import { cn } from '@boostdev/design-system-foundation';
 import type { WithClassName } from '../../../types';
 
-interface NotificationBannerProps extends WithClassName {
+interface NotificationBannerProps extends WithClassName, HTMLAttributes<HTMLDivElement> {
   variant?: 'info' | 'success' | 'warning' | 'error';
   children: ReactNode;
   action?: ReactNode;
@@ -16,11 +16,13 @@ export function NotificationBanner({
   action,
   onDismiss,
   className,
+  ...rest
 }: Readonly<NotificationBannerProps>) {
   const isUrgent = variant === 'error' || variant === 'warning';
 
   return (
     <div
+      {...rest}
       role={isUrgent ? 'alert' : 'status'}
       aria-live={isUrgent ? 'assertive' : 'polite'}
       aria-atomic="true"

package/src/components/ui/Pagination/Pagination.module.css

@@ -13,6 +13,10 @@
     padding: 0;
   }
 
+  .list li {
+    list-style: none;
+  }
+
   .button {
     all: unset;
     display: inline-flex;
@@ -21,7 +25,7 @@
     min-inline-size: 2.25rem;
     block-size: 2.25rem;
     padding-inline: var(--bds-space_xs);
-    border-radius: var(--bds-border_radius--xs);
+    border-radius: var(--pagination_radius, var(--bds-border_radius--full));
     background-color: var(--btn_bg, transparent);
 
     --bdc_color: var(--btn_border, var(--bds-color_bg--subtle));

package/src/components/ui/Pagination/Pagination.tsx

@@ -1,8 +1,9 @@
+import { HTMLAttributes } from 'react';
 import css from './Pagination.module.css';
 import { cn } from '@boostdev/design-system-foundation';
 import type { WithClassName } from '../../../types';
 
-interface PaginationProps extends WithClassName {
+interface PaginationProps extends WithClassName, HTMLAttributes<HTMLElement> {
   currentPage: number;
   totalPages: number;
   onPageChange: (page: number) => void;
@@ -28,11 +29,12 @@ export function Pagination({
   totalPages,
   onPageChange,
   className,
+  ...rest
 }: Readonly<PaginationProps>) {
   const pages = getPageRange(currentPage, totalPages);
 
   return (
-    <nav aria-label="Pagination" className={cn(css.pagination, className)}>
+    <nav {...rest} aria-label="Pagination" className={cn(css.pagination, className)}>
       <ul className={css.list}>
         <li>
           <button

package/src/components/ui/Progress/Progress.module.css

@@ -22,7 +22,7 @@
     inline-size: 100%;
     block-size: var(--progress_height, var(--bds-space_xs));
     background-color: var(--bds-color_bg--subtle);
-    border-radius: 999px;
+    border-radius: var(--progress_radius, var(--bds-border_radius--full));
     overflow: hidden;
   }
 
@@ -33,7 +33,7 @@
   .fill {
     block-size: 100%;
     background-color: var(--progress_color-active, var(--bdc-color_active));
-    border-radius: 999px;
+    border-radius: var(--progress_radius, var(--bds-border_radius--full));
     transition: inline-size var(--bds-animation_transition-duration) var(--bds-animation_easing);
   }
 

package/src/components/ui/Progress/Progress.tsx

@@ -1,8 +1,9 @@
+import { HTMLAttributes } from 'react';
 import css from './Progress.module.css';
 import { cn } from '@boostdev/design-system-foundation';
 import type { WithClassName } from '../../../types';
 
-interface ProgressProps extends WithClassName {
+interface ProgressProps extends WithClassName, HTMLAttributes<HTMLDivElement> {
   value: number;
   max?: number;
   label: string;
@@ -17,11 +18,12 @@ export function Progress({
   showLabel = false,
   size = 'medium',
   className,
+  ...rest
 }: Readonly<ProgressProps>) {
   const percentage = Math.min(100, Math.max(0, (value / max) * 100));
 
   return (
-    <div className={cn(css.container, className)}>
+    <div {...rest} className={cn(css.container, className)}>
       {showLabel && (
         <div className={css.labelRow}>
           <span className={css.label}>{label}</span>