@fragments-sdk/ui 0.12.0 → 0.14.0

package/src/components/Alert/index.tsx

@@ -22,40 +22,33 @@ export interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {
   severity?: AlertSeverity;
 }
 
-export interface AlertIconProps {
+export interface AlertIconProps extends React.HTMLAttributes<HTMLSpanElement> {
   children?: React.ReactNode;
-  className?: string;
 }
 
-export interface AlertTitleProps {
+export interface AlertTitleProps extends React.HTMLAttributes<HTMLDivElement> {
   children: React.ReactNode;
-  className?: string;
 }
 
-export interface AlertContentProps {
+export interface AlertContentProps extends React.HTMLAttributes<HTMLDivElement> {
   children: React.ReactNode;
-  className?: string;
 }
 
-export interface AlertActionsProps {
+export interface AlertActionsProps extends React.HTMLAttributes<HTMLDivElement> {
   children: React.ReactNode;
-  className?: string;
 }
 
-export interface AlertActionProps {
+export interface AlertActionProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onClick'> {
   children: React.ReactNode;
-  onClick: () => void;
-  className?: string;
+  onClick?: React.MouseEventHandler<HTMLButtonElement>;
 }
 
-export interface AlertCloseProps {
+export interface AlertCloseProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {
   children?: React.ReactNode;
-  className?: string;
 }
 
-export interface AlertBodyProps {
+export interface AlertBodyProps extends React.HTMLAttributes<HTMLDivElement> {
   children: React.ReactNode;
-  className?: string;
 }
 
 // ============================================
@@ -79,6 +72,17 @@ function useAlertContext() {
   return context;
 }
 
+function composeEventHandlers<E extends { defaultPrevented: boolean }>(
+  userHandler?: (event: E) => void,
+  internalHandler?: (event: E) => void
+) {
+  return (event: E) => {
+    userHandler?.(event);
+    if (event.defaultPrevented) return;
+    internalHandler?.(event);
+  };
+}
+
 // ============================================
 // Severity Icons
 // ============================================
@@ -136,64 +140,79 @@ function AlertRoot({
   );
 }
 
-function AlertIcon({ children, className }: AlertIconProps) {
+function AlertIcon({ children, className, ...htmlProps }: AlertIconProps) {
   const { severity } = useAlertContext();
   const classes = [styles.icon, className].filter(Boolean).join(' ');
 
   return (
-    <span className={classes} aria-hidden="true">
+    <span {...htmlProps} className={classes} aria-hidden="true">
       {children ?? severityIcons[severity]}
     </span>
   );
 }
 
-function AlertBody({ children, className }: AlertBodyProps) {
+function AlertBody({ children, className, ...htmlProps }: AlertBodyProps) {
   const classes = [styles.body, className].filter(Boolean).join(' ');
-  return <div className={classes}>{children}</div>;
+  return <div {...htmlProps} className={classes}>{children}</div>;
 }
 
-function AlertTitle({ children, className }: AlertTitleProps) {
+function AlertTitle({ children, className, ...htmlProps }: AlertTitleProps) {
   const { titleId } = useAlertContext();
   const classes = [styles.title, className].filter(Boolean).join(' ');
   return (
-    <div id={titleId} className={classes}>
+    <div {...htmlProps} id={htmlProps.id ?? titleId} className={classes}>
       {children}
     </div>
   );
 }
 
-function AlertContent({ children, className }: AlertContentProps) {
+function AlertContent({ children, className, ...htmlProps }: AlertContentProps) {
   const { descId } = useAlertContext();
   const classes = [styles.content, className].filter(Boolean).join(' ');
   return (
-    <div id={descId} className={classes}>
+    <div {...htmlProps} id={htmlProps.id ?? descId} className={classes}>
       {children}
     </div>
   );
 }
 
-function AlertActions({ children, className }: AlertActionsProps) {
+function AlertActions({ children, className, ...htmlProps }: AlertActionsProps) {
   const classes = [styles.actions, className].filter(Boolean).join(' ');
-  return <div className={classes}>{children}</div>;
+  return <div {...htmlProps} className={classes}>{children}</div>;
 }
 
-function AlertAction({ children, onClick, className }: AlertActionProps) {
+function AlertAction({
+  children,
+  onClick,
+  type = 'button',
+  className,
+  ...htmlProps
+}: AlertActionProps) {
   const classes = [styles.action, className].filter(Boolean).join(' ');
   return (
-    <BaseButton onClick={onClick} className={classes}>
+    <BaseButton {...htmlProps} onClick={onClick} type={type} className={classes}>
       {children}
     </BaseButton>
   );
 }
 
-function AlertClose({ children, className }: AlertCloseProps) {
+function AlertClose({
+  children,
+  className,
+  onClick,
+  type = 'button',
+  'aria-label': ariaLabel = 'Dismiss alert',
+  ...htmlProps
+}: AlertCloseProps) {
   const { dismiss } = useAlertContext();
   const classes = [styles.close, className].filter(Boolean).join(' ');
 
   return (
     <BaseButton
-      onClick={dismiss}
-      aria-label="Dismiss alert"
+      {...htmlProps}
+      onClick={composeEventHandlers(onClick, dismiss)}
+      type={type}
+      aria-label={ariaLabel}
       className={classes}
     >
       {children ?? '\u00D7'}

package/src/components/AppShell/AppShell.fragment.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { ChartBar, Gear, House, MagnifyingGlass } from '@phosphor-icons/react';
-import { defineFragment } from '@fragments-sdk/cli/core';
+import { defineFragment } from '@fragments-sdk/core';
 import { AppShell } from '.';
 import { Box } from '../Box';
 import { Header } from '../Header';

package/src/components/AppShell/AppShell.module.scss

@@ -173,22 +173,22 @@
 
 // Padding variants
 .paddingSm {
-  padding: var(--fui-padding-container-sm);
+  padding: var(--fui-space-3);
 }
 
 .paddingMd {
-  padding: var(--fui-padding-container-md);
+  padding: var(--fui-space-4);
 
   @include breakpoint-md {
-    padding: var(--fui-padding-container-lg);
+    padding: var(--fui-space-6);
   }
 }
 
 .paddingLg {
-  padding: var(--fui-padding-container-lg);
+  padding: var(--fui-space-6);
 
   @include breakpoint-md {
-    padding: var(--fui-padding-container-xl);
+    padding: var(--fui-space-8);
   }
 }
 

package/src/components/AppShell/AppShell.test.tsx

@@ -77,4 +77,16 @@ describe('AppShell', () => {
     );
     await expectNoA11yViolations(container);
   });
+
+  it('preserves root style props while applying internal CSS variables', () => {
+    const { container } = render(
+      <AppShell style={{ backgroundColor: 'rgb(1, 2, 3)' }}>
+        <AppShell.Main>Content</AppShell.Main>
+      </AppShell>
+    );
+
+    const root = container.firstElementChild as HTMLElement;
+    expect(root.style.backgroundColor).toBe('rgb(1, 2, 3)');
+    expect(root.style.getPropertyValue('--appshell-header-height')).toBe('56px');
+  });
 });

package/src/components/AppShell/index.tsx

@@ -190,6 +190,7 @@ function AppShellInner({
   children,
   className,
   layout,
+  style: styleProp,
   ...htmlProps
 }: {
   children: React.ReactNode;
@@ -221,6 +222,7 @@ function AppShellInner({
     '--appshell-sidebar-expanded-width': appShell.sidebarWidth,
     '--appshell-sidebar-collapsed-width': appShell.sidebarCollapsedWidth,
     '--appshell-aside-width': appShell.asideVisible ? appShell.asideWidth : '0px',
+    ...styleProp,
   } as React.CSSProperties;
 
   return (

package/src/components/Avatar/Avatar.fragment.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { defineFragment } from '@fragments-sdk/cli/core';
+import { defineFragment } from '@fragments-sdk/core';
 import { Avatar } from '.';
 import { Stack } from '../Stack';
 
@@ -31,6 +31,7 @@ export default defineFragment({
       'Use consistent sizes within the same context',
       'Provide fallback initials when image may not load',
       'Use Avatar.Group for multiple avatars in a row',
+      'Use imageProps for advanced img attributes (loading, decoding, referrerPolicy, etc.)',
     ],
     accessibility: [
       'Include meaningful alt text describing the user',
@@ -80,6 +81,10 @@ export default defineFragment({
       type: 'string',
       description: 'Inline style object applied to the underlying image element',
     },
+    imageProps: {
+      type: 'object',
+      description: 'Additional props for the underlying img element (except src/alt/className/style)',
+    },
   },
 
   relations: [
@@ -97,6 +102,7 @@ export default defineFragment({
       'size: xs|sm|md|lg|xl (default: md)',
       'customSize: number|string - custom size override',
       'imageStyle: CSSProperties - inline image styling',
+      'imageProps: ImgHTMLAttributes - advanced img attributes',
       'shape: circle|square (default: circle)',
     ],
     scenarioTags: [

package/src/components/Avatar/Avatar.test.tsx

@@ -1,5 +1,5 @@
-import { describe, it, expect } from 'vitest';
-import { render, screen, expectNoA11yViolations } from '../../test/utils';
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen, act, expectNoA11yViolations } from '../../test/utils';
 import { Avatar } from './index';
 
 describe('Avatar', () => {
@@ -51,6 +51,28 @@ describe('Avatar', () => {
     expect(img).toHaveStyle({ objectPosition: 'center 24%', transform: 'scale(1.4)' });
   });
 
+  it('forwards imageProps to the underlying img and respects prevented onError', () => {
+    const onError = vi.fn((event: Event) => event.preventDefault());
+    render(
+      <Avatar
+        src="https://example.com/photo.jpg"
+        alt="Jane Doe"
+        imageProps={{ loading: 'lazy', referrerPolicy: 'no-referrer', onError }}
+      />
+    );
+
+    const img = screen.getByRole('img');
+    expect(img).toHaveAttribute('loading', 'lazy');
+    expect(img).toHaveAttribute('referrerpolicy', 'no-referrer');
+
+    act(() => {
+      img.dispatchEvent(new Event('error', { bubbles: false, cancelable: true }));
+    });
+
+    expect(onError).toHaveBeenCalledTimes(1);
+    expect(screen.queryByText('JD')).not.toBeInTheDocument();
+  });
+
   it('has no accessibility violations', async () => {
     const { container } = render(<Avatar name="Jane Doe" />);
     await expectNoA11yViolations(container);

package/src/components/Avatar/index.tsx

@@ -32,6 +32,11 @@ export interface AvatarProps extends Omit<React.HTMLAttributes<HTMLDivElement>,
   color?: string;
   /** Inline style for the underlying image element */
   imageStyle?: React.CSSProperties;
+  /** Additional props for the underlying img element */
+  imageProps?: Omit<
+    React.ImgHTMLAttributes<HTMLImageElement>,
+    'src' | 'alt' | 'className' | 'style'
+  >;
 }
 
 export interface AvatarGroupProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -113,6 +118,7 @@ const AvatarBase = React.forwardRef<HTMLDivElement, AvatarProps>(
       shape = 'circle',
       color,
       imageStyle,
+      imageProps,
       className,
       style: styleProp,
       ...htmlProps
@@ -175,10 +181,16 @@ const AvatarBase = React.forwardRef<HTMLDivElement, AvatarProps>(
         {!showFallback && (
           <img
             ref={imgRef}
+            {...imageProps}
             src={src}
             alt={alt}
             className={styles.image}
-            onError={() => setImageError(true)}
+            onError={(event) => {
+              imageProps?.onError?.(event);
+              if (!event.defaultPrevented) {
+                setImageError(true);
+              }
+            }}
             style={{ ...imageStyle }}
           />
         )}

package/src/components/Badge/Badge.fragment.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { defineFragment } from '@fragments-sdk/cli/core';
+import { defineFragment } from '@fragments-sdk/core';
 import { Badge } from '.';
 import { Stack } from '../Stack';
 
@@ -33,6 +33,7 @@ export default defineFragment({
       'Use dot variant for live status indicators',
       'Pair success/error variants with meaningful labels, not just colors',
       'Use onRemove for user-created tags only, not system-generated badges',
+      'Badges are not announced as live status updates by default; use announce for screen-reader status announcements when appropriate',
     ],
     accessibility: [
       'Badge text must be meaningful without relying on color alone',
@@ -72,6 +73,11 @@ export default defineFragment({
       type: 'function',
       description: 'Makes the badge removable. Called when X is clicked.',
     },
+    announce: {
+      type: 'boolean',
+      description: 'Opt into role="status" live announcement semantics',
+      default: 'false',
+    },
   },
 
   relations: [
@@ -86,6 +92,7 @@ export default defineFragment({
       'size: sm|md - badge size',
       'dot: boolean - show status dot indicator',
       'onRemove: () => void - makes badge removable',
+      'announce: boolean - opt into role="status" + auto status aria-label',
     ],
     scenarioTags: [
       'feedback.status',
@@ -147,6 +154,14 @@ import { Stack } from '@/components/Stack';
         </Stack>
       ),
     },
+    {
+      name: 'Announced Status',
+      description: 'Opt into screen-reader status announcement behavior',
+      code: `import { Badge } from '@/components/Badge';
+
+<Badge variant="success" announce>Saved</Badge>`,
+      render: () => <Badge variant="success" announce>Saved</Badge>,
+    },
     {
       name: 'Outline',
       description: 'Minimal bordered badge for neutral emphasis',

package/src/components/Badge/Badge.test.tsx

@@ -44,9 +44,16 @@ describe('Badge', () => {
     expect(onRemove).toHaveBeenCalledOnce();
   });
 
-  it('sets role="status" and aria-label for status variants', () => {
+  it('does not implicitly announce status variants', () => {
     const { container } = render(<Badge variant="error">Failed</Badge>);
     const badge = container.firstChild as HTMLElement;
+    expect(badge).not.toHaveAttribute('role');
+    expect(badge).not.toHaveAttribute('aria-label', 'error: Failed');
+  });
+
+  it('announces badge content when announce is enabled', () => {
+    const { container } = render(<Badge variant="error" announce>Failed</Badge>);
+    const badge = container.firstChild as HTMLElement;
     expect(badge).toHaveAttribute('role', 'status');
     expect(badge).toHaveAttribute('aria-label', 'error: Failed');
   });

package/src/components/Badge/index.tsx

@@ -23,6 +23,9 @@ export interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
   icon?: React.ReactNode;
   /** Makes the badge removable. Called when dismiss button is clicked. */
   onRemove?: () => void;
+  /** Announce badge content as status to assistive tech (opt-in).
+   * @default false */
+  announce?: boolean;
 }
 
 const BadgeRoot = React.forwardRef<HTMLSpanElement, BadgeProps>(
@@ -34,8 +37,10 @@ const BadgeRoot = React.forwardRef<HTMLSpanElement, BadgeProps>(
       dot = false,
       icon,
       onRemove,
+      announce = false,
       className,
       'aria-label': ariaLabel,
+      role,
       ...htmlProps
     },
     ref
@@ -46,7 +51,7 @@ const BadgeRoot = React.forwardRef<HTMLSpanElement, BadgeProps>(
 
     // For status badges, include the status in the aria-label if not provided
     const effectiveAriaLabel = ariaLabel || (
-      variant !== 'default' && variant !== 'outline'
+      announce && variant !== 'default' && variant !== 'outline'
         ? `${variant}: ${typeof children === 'string' ? children : ''}`
         : undefined
     );
@@ -56,7 +61,7 @@ const BadgeRoot = React.forwardRef<HTMLSpanElement, BadgeProps>(
         ref={ref}
         {...htmlProps}
         className={classes}
-        role={effectiveAriaLabel ? 'status' : undefined}
+        role={role ?? (announce ? 'status' : undefined)}
         aria-label={effectiveAriaLabel}
       >
         {dot && <span className={styles.dot} aria-hidden="true" />}

package/src/components/BentoGrid/BentoGrid.fragment.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { defineFragment } from '@fragments-sdk/cli/core';
+import { defineFragment } from '@fragments-sdk/core';
 import { BentoGrid } from '.';
 
 export default defineFragment({
@@ -30,6 +30,7 @@ export default defineFragment({
       'The hero item typically uses colSpan={2} rowSpan={2} at lg and above',
       'Items include built-in surface styling — no need to wrap children in Card',
       'Grid auto-collapses: 3→2 columns below lg, all→1 column below sm',
+      'Root and Item forward DOM props (aria-*, data-*, handlers), and Item style merges with span CSS vars',
     ],
     accessibility: [
       'Grid is purely visual — it does not affect reading order or semantics',
@@ -77,6 +78,7 @@ export default defineFragment({
       'gap: none|xs|sm|md|lg|xl (default: md)',
       'BentoGrid.Item colSpan: 1|2|3 | { base, sm, md, lg, xl }',
       'BentoGrid.Item rowSpan: 1|2|3 | { base, sm, md, lg, xl }',
+      'BentoGrid and BentoGrid.Item forward div DOM props; Item style is merged with generated span vars',
     ],
     scenarioTags: [
       'layout.bento',

package/src/components/BentoGrid/BentoGrid.module.scss

@@ -1,5 +1,5 @@
-@use '../../tokens/variables' as *;
-@use '../../tokens/mixins' as *;
+@use "../../tokens/variables" as *;
+@use "../../tokens/mixins" as *;
 
 // ============================================
 // BentoGrid Container
@@ -15,9 +15,15 @@
 // Column counts
 // ============================================
 
-.columns2 { grid-template-columns: repeat(2, 1fr); }
-.columns3 { grid-template-columns: repeat(3, 1fr); }
-.columns4 { grid-template-columns: repeat(4, 1fr); }
+.columns2 {
+  grid-template-columns: repeat(2, 1fr);
+}
+.columns3 {
+  grid-template-columns: repeat(3, 1fr);
+}
+.columns4 {
+  grid-template-columns: repeat(4, 1fr);
+}
 
 // ============================================
 // Responsive collapse
@@ -42,12 +48,24 @@
 // Gap
 // ============================================
 
-.gapNone { gap: 0; }
-.gapXs   { gap: var(--fui-space-1, $fui-space-1); }
-.gapSm   { gap: var(--fui-space-2, $fui-space-2); }
-.gapMd   { gap: var(--fui-space-4, $fui-space-4); }
-.gapLg   { gap: var(--fui-space-6, $fui-space-6); }
-.gapXl   { gap: var(--fui-space-8, $fui-space-8); }
+.gapNone {
+  gap: 0;
+}
+.gapXs {
+  gap: var(--fui-space-1, $fui-space-1);
+}
+.gapSm {
+  gap: var(--fui-space-2, $fui-space-2);
+}
+.gapMd {
+  gap: var(--fui-space-4, $fui-space-4);
+}
+.gapLg {
+  gap: var(--fui-space-6, $fui-space-6);
+}
+.gapXl {
+  gap: var(--fui-space-8, $fui-space-8);
+}
 
 // ============================================
 // BentoGrid Item
@@ -57,7 +75,7 @@
   @include surface-elevated;
 
   min-width: 0;
-  padding: var(--fui-padding-container-md, $fui-padding-container-md);
+  padding: var(--fui-space-2, $fui-space-2);
   transition:
     box-shadow var(--fui-transition-fast, $fui-transition-fast),
     border-color var(--fui-transition-fast, $fui-transition-fast),
@@ -87,13 +105,31 @@
   }
 
   @include breakpoint-lg {
-    --_col-span: var(--bento-col-span-lg, var(--bento-col-span-md, var(--bento-col-span-sm, var(--bento-col-span, 1))));
-    --_row-span: var(--bento-row-span-lg, var(--bento-row-span-md, var(--bento-row-span-sm, var(--bento-row-span, 1))));
+    --_col-span: var(
+      --bento-col-span-lg,
+      var(--bento-col-span-md, var(--bento-col-span-sm, var(--bento-col-span, 1)))
+    );
+    --_row-span: var(
+      --bento-row-span-lg,
+      var(--bento-row-span-md, var(--bento-row-span-sm, var(--bento-row-span, 1)))
+    );
   }
 
   @include breakpoint-xl {
-    --_col-span: var(--bento-col-span-xl, var(--bento-col-span-lg, var(--bento-col-span-md, var(--bento-col-span-sm, var(--bento-col-span, 1)))));
-    --_row-span: var(--bento-row-span-xl, var(--bento-row-span-lg, var(--bento-row-span-md, var(--bento-row-span-sm, var(--bento-row-span, 1)))));
+    --_col-span: var(
+      --bento-col-span-xl,
+      var(
+        --bento-col-span-lg,
+        var(--bento-col-span-md, var(--bento-col-span-sm, var(--bento-col-span, 1)))
+      )
+    );
+    --_row-span: var(
+      --bento-row-span-xl,
+      var(
+        --bento-row-span-lg,
+        var(--bento-row-span-md, var(--bento-row-span-sm, var(--bento-row-span, 1)))
+      )
+    );
   }
 }
 

package/src/components/BentoGrid/BentoGrid.test.tsx

@@ -125,6 +125,26 @@ describe('BentoGrid', () => {
     expect(item).toBeInTheDocument();
   });
 
+  it('forwards DOM props on root and item and merges item style with span vars', () => {
+    const { container } = render(
+      <BentoGrid data-testid="grid" aria-label="Bento grid">
+        <BentoGrid.Item
+          data-testid="item"
+          colSpan={2}
+          style={{ backgroundColor: 'rgb(1, 2, 3)' }}
+        >
+          Content
+        </BentoGrid.Item>
+      </BentoGrid>
+    );
+
+    expect(screen.getByTestId('grid')).toHaveAttribute('aria-label', 'Bento grid');
+    const item = screen.getByTestId('item');
+    expect(item).toHaveStyle({ backgroundColor: 'rgb(1, 2, 3)' });
+    expect(item.style.getPropertyValue('--bento-col-span')).toBe('2');
+    expect(container.querySelector('[data-testid=\"item\"]')).toBe(item);
+  });
+
   it('has no accessibility violations', async () => {
     const { container } = render(
       <BentoGrid columns={3}>

package/src/components/BentoGrid/index.tsx

@@ -20,26 +20,20 @@ export interface ResponsiveSpan {
   xl?: SpanValue;
 }
 
-export interface BentoGridProps {
+export interface BentoGridProps extends React.HTMLAttributes<HTMLDivElement> {
   children?: React.ReactNode;
   /** Number of columns (default: 3) — auto-collapses responsively */
   columns?: 2 | 3 | 4;
   /** Gap between grid items */
   gap?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-  /** Additional class name */
-  className?: string;
-  /** Inline styles */
-  style?: React.CSSProperties;
 }
 
-export interface BentoGridItemProps {
+export interface BentoGridItemProps extends React.HTMLAttributes<HTMLDivElement> {
   children?: React.ReactNode;
   /** Columns to span — number for all breakpoints, object for per-breakpoint */
   colSpan?: SpanValue | ResponsiveSpan;
   /** Rows to span — number for all breakpoints, object for per-breakpoint */
   rowSpan?: SpanValue | ResponsiveSpan;
-  /** Additional class name */
-  className?: string;
 }
 
 // ============================================
@@ -82,6 +76,7 @@ export const BentoGrid = React.forwardRef<HTMLDivElement, BentoGridProps>(
       gap = 'md',
       className,
       style,
+      ...htmlProps
     },
     ref
   ) {
@@ -95,7 +90,7 @@ export const BentoGrid = React.forwardRef<HTMLDivElement, BentoGridProps>(
       .join(' ');
 
     return (
-      <div ref={ref} className={classes} style={style}>
+      <div ref={ref} {...htmlProps} className={classes} style={style}>
         {children}
       </div>
     );
@@ -113,6 +108,8 @@ const BentoGridItem = React.forwardRef<HTMLDivElement, BentoGridItemProps>(
       colSpan,
       rowSpan,
       className,
+      style,
+      ...htmlProps
     },
     ref
   ) {
@@ -123,13 +120,13 @@ const BentoGridItem = React.forwardRef<HTMLDivElement, BentoGridItemProps>(
 
     const hasVars = Object.keys(spanVars).length > 0;
     const inlineStyle = hasVars
-      ? (spanVars as unknown as React.CSSProperties)
-      : undefined;
+      ? ({ ...(spanVars as unknown as React.CSSProperties), ...style } as React.CSSProperties)
+      : style;
 
     const classes = [styles.item, className].filter(Boolean).join(' ');
 
     return (
-      <div ref={ref} className={classes} style={inlineStyle}>
+      <div ref={ref} {...htmlProps} className={classes} style={inlineStyle}>
         {children}
       </div>
     );