@boostdev/design-system-components 1.2.1 → 1.2.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@boostdev/design-system-components",
-  "version": "1.2.1",
+  "version": "1.2.2",
   "description": "BoostDev React component library: accessible, token-driven components built on @boostdev/design-system-foundation",
   "keywords": [
     "React",

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.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.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.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.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/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.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/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.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.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.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)}