@boostdev/design-system-components 1.2.0 → 1.2.2

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(--bds-border_radius--m);
+    border-radius: var(--control_radius, var(--bds-border_radius--m));
     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(--bds-border_radius--s);
+    border-radius: var(--control_thumb-radius, var(--bds-border_radius--s));
     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(--bds-border_radius--s);
+    border-radius: var(--control_thumb-radius, var(--bds-border_radius--s));
     pointer-events: none;
     z-index: 2;
     display: none;
@@ -46,7 +46,7 @@
     align-items: center;
     justify-content: center;
     cursor: pointer;
-    border-radius: var(--bds-border_radius--s);
+    border-radius: var(--control_thumb-radius, var(--bds-border_radius--s));
     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(--bds-border_radius--s);
+    border-radius: var(--control_thumb-radius, var(--bds-border_radius--s));
   }
 
   .item.--active {
@@ -92,7 +92,6 @@
 
   /* Outline variant — no thumb, sliding inset-border indicator, interactive active color */
   .control.--variant_outline {
-    background-color: var(--control_track-bg, transparent);
     --control_label-color--active: var(--bds-color_interactive);
   }
 
@@ -100,6 +99,14 @@
     display: none;
   }
 
+  .control.--variant_outline .item {
+    background-color: var(--control_item-bg, transparent);
+  }
+
+  .control.--variant_outline .item.--active {
+    background-color: var(--control_item-bg--active, var(--bds-color_bg));
+  }
+
   .control.--variant_outline .indicator {
     display: block;
     box-shadow: inset 0 0 0 2px var(--bds-color_interactive);

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

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.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.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.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.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.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.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>

package/src/components/ui/ProgressCircle/ProgressCircle.tsx

@@ -1,8 +1,9 @@
+import { HTMLAttributes } from 'react';
 import css from './ProgressCircle.module.css';
 import { cn } from '@boostdev/design-system-foundation';
 import type { WithClassName } from '../../../types';
 
-interface ProgressCircleProps extends WithClassName {
+interface ProgressCircleProps extends WithClassName, HTMLAttributes<HTMLDivElement> {
   value: number;
   max?: number;
   label: string;
@@ -20,6 +21,7 @@ export function ProgressCircle({
   showValue = false,
   size = 'medium',
   className,
+  ...rest
 }: Readonly<ProgressCircleProps>) {
   const percentage = Math.min(100, Math.max(0, (value / max) * 100));
   const px = SIZE_PX[size];
@@ -30,6 +32,7 @@ export function ProgressCircle({
 
   return (
     <div
+      {...rest}
       role="progressbar"
       aria-label={label}
       aria-valuenow={value}

package/src/components/ui/Separator/Separator.tsx

@@ -1,15 +1,17 @@
+import { HTMLAttributes } from 'react';
 import css from './Separator.module.css';
 import { cn } from '@boostdev/design-system-foundation';
 import type { WithClassName } from '../../../types';
 
-interface SeparatorProps extends WithClassName {
+interface SeparatorProps extends WithClassName, HTMLAttributes<HTMLElement> {
   orientation?: 'horizontal' | 'vertical';
 }
 
-export function Separator({ orientation = 'horizontal', className }: Readonly<SeparatorProps>) {
+export function Separator({ orientation = 'horizontal', className, ...rest }: Readonly<SeparatorProps>) {
   if (orientation === 'vertical') {
     return (
       <div
+        {...rest}
         role="separator"
         aria-orientation="vertical"
         className={cn(css.separator, css['--vertical'], className)}
@@ -17,5 +19,5 @@ export function Separator({ orientation = 'horizontal', className }: Readonly<Se
     );
   }
 
-  return <hr aria-orientation="horizontal" className={cn(css.separator, css['--horizontal'], className)} />;
+  return <hr {...rest} aria-orientation="horizontal" className={cn(css.separator, css['--horizontal'], className)} />;
 }

package/src/components/ui/Skeleton/Skeleton.tsx

@@ -1,11 +1,12 @@
+import { HTMLAttributes } from 'react';
 import { cn } from '@boostdev/design-system-foundation';
 import css from './Skeleton.module.css';
 import type { WithClassName } from '../../../types';
 
-type SkeletonProps = WithClassName;
+type SkeletonProps = WithClassName & HTMLAttributes<HTMLDivElement>;
 
-export function Skeleton({ className }: SkeletonProps) {
+export function Skeleton({ className, ...rest }: SkeletonProps) {
   return (
-    <div aria-hidden="true" className={cn(css.skeleton, className)} />
+    <div {...rest} aria-hidden="true" className={cn(css.skeleton, className)} />
   );
 }

package/src/components/ui/SkipLink/SkipLink.tsx

@@ -1,15 +1,14 @@
+import { AnchorHTMLAttributes } from 'react';
 import css from './SkipLink.module.css';
 import { cn } from '@boostdev/design-system-foundation';
 import type { WithClassName } from '../../../types';
 
-interface SkipLinkProps extends WithClassName {
-  href?: string;
-  children?: string;
+interface SkipLinkProps extends WithClassName, AnchorHTMLAttributes<HTMLAnchorElement> {
 }
 
-export function SkipLink({ href = '#main', children = 'Skip to main content', className }: SkipLinkProps) {
+export function SkipLink({ href = '#main', children = 'Skip to main content', className, ...rest }: SkipLinkProps) {
   return (
-    <a href={href} className={cn(css.skipLink, className)}>
+    <a {...rest} href={href} className={cn(css.skipLink, className)}>
       {children}
     </a>
   );