@boostdev/design-system-components 1.2.1 → 1.2.3

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

package/src/components/ui/Tabs/Tabs.tsx

@@ -1,4 +1,4 @@
-import { KeyboardEvent, ReactNode, useId, useRef, useState } from 'react';
+import { HTMLAttributes, KeyboardEvent, ReactNode, useId, useRef, useState } from 'react';
 import css from './Tabs.module.css';
 import { cn } from '@boostdev/design-system-foundation';
 import type { WithClassName } from '../../../types';
@@ -10,12 +10,12 @@ export interface TabItem {
   disabled?: boolean;
 }
 
-interface TabsProps extends WithClassName {
+interface TabsProps extends WithClassName, HTMLAttributes<HTMLDivElement> {
   tabs: TabItem[];
   defaultTab?: string;
 }
 
-export function Tabs({ tabs, defaultTab, className }: Readonly<TabsProps>) {
+export function Tabs({ tabs, defaultTab, className, ...rest }: Readonly<TabsProps>) {
   const baseId = useId();
   const [activeTab, setActiveTab] = useState(defaultTab ?? tabs[0]?.id);
   const tabRefs = useRef<(HTMLButtonElement | null)[]>([]);
@@ -49,7 +49,7 @@ export function Tabs({ tabs, defaultTab, className }: Readonly<TabsProps>) {
   };
 
   return (
-    <div className={cn(css.tabs, className)}>
+    <div {...rest} className={cn(css.tabs, className)}>
       <div role="tablist" className={css.tabList}>
         {tabs.map((tab, i) => {
           const tabId = `${baseId}-tab-${tab.id}`;

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

@@ -9,7 +9,7 @@
     position: absolute;
     z-index: var(--bds-z-index_popover);
     padding: var(--bds-space_xxs) var(--bds-space_xs);
-    border-radius: var(--bds-border_radius--xs);
+    border-radius: var(--tooltip_radius, var(--bds-border_radius--full));
     background-color: var(--tooltip_bg, var(--bds-color_on-bg));
     color: var(--tooltip_text, var(--bds-color_bg));
     font-size: var(--bds-font_size--body--s);

package/src/components/ui/Tooltip/Tooltip.tsx

@@ -1,9 +1,9 @@
-import { ReactElement, ReactNode, cloneElement, isValidElement, useId, useState } from 'react';
+import { HTMLAttributes, ReactElement, ReactNode, cloneElement, isValidElement, useId, useState } from 'react';
 import css from './Tooltip.module.css';
 import { cn } from '@boostdev/design-system-foundation';
 import type { WithClassName } from '../../../types';
 
-interface TooltipProps extends WithClassName {
+interface TooltipProps extends WithClassName, Omit<HTMLAttributes<HTMLSpanElement>, 'content'> {
   content: ReactNode;
   placement?: 'top' | 'bottom' | 'left' | 'right';
   children: ReactElement;
@@ -14,6 +14,7 @@ export function Tooltip({
   placement = 'top',
   children,
   className,
+  ...rest
 }: Readonly<TooltipProps>) {
   const tooltipId = useId();
   const [isVisible, setIsVisible] = useState(false);
@@ -26,6 +27,7 @@ export function Tooltip({
 
   return (
     <span
+      {...rest}
       className={cn(css.wrapper, className)}
       onMouseEnter={() => setIsVisible(true)}
       onMouseLeave={() => setIsVisible(false)}

package/src/components/ui/Typography/Typography.tsx

@@ -1,14 +1,13 @@
-import { ReactNode, ElementType } from 'react';
+import { ElementType, HTMLAttributes } from 'react';
 import css from './Typography.module.css';
 import { cn } from '@boostdev/design-system-foundation';
 import type { WithClassName } from '../../../types';
 
 type TypographyVariant = 'h1' | 'h2' | 'h3' | 'body' | 'body_s';
 
-interface TypographyProps extends WithClassName {
+interface TypographyProps extends WithClassName, HTMLAttributes<HTMLElement> {
   variant?: TypographyVariant;
   component?: ElementType;
-  children: ReactNode;
 }
 
 const variantToElement: Record<TypographyVariant, ElementType> = {
@@ -19,10 +18,10 @@ const variantToElement: Record<TypographyVariant, ElementType> = {
   body_s: 'p',
 };
 
-export function Typography({ variant = 'body', component, children, className }: TypographyProps) {
+export function Typography({ variant = 'body', component, children, className, ...rest }: TypographyProps) {
   const Component = component || variantToElement[variant];
 
   return (
-    <Component className={cn(css.typography, css[`--${variant}`], className)}>{children}</Component>
+    <Component {...rest} className={cn(css.typography, css[`--${variant}`], className)}>{children}</Component>
   );
 }

package/src/stories/DesignSystem/Grid.mdx

@@ -122,6 +122,8 @@ Apply the built-in layout utilities to use the grid system without writing CSS:
 </div>
 ```
 
+> **Important:** Every direct child of `utl-main-grid` **must** set `grid-column: var(--bds-grid_span-<variant>);` (e.g. `--bds-grid_span-100`, `--bds-grid_span-50`). Without it the child collapses to a single column and the responsive grid behaviour is lost.
+
 ## Custom grid usage
 
 ```css