@fragments-sdk/ui 0.13.0 → 0.14.0

package/src/components/Editor/index.tsx

@@ -67,6 +67,21 @@ export type EditorMode = 'rich' | 'markdown';
 
 export type EditorSize = 'sm' | 'md' | 'lg';
 
+export interface EditorToolbarIconRenderState {
+  format: EditorFormat;
+  active: boolean;
+  disabled: boolean;
+  readOnly: boolean;
+  isDisabled: boolean;
+  mode: EditorMode;
+}
+
+export type EditorToolbarIconSlot =
+  | React.ReactNode
+  | ((state: EditorToolbarIconRenderState) => React.ReactNode);
+
+export type EditorToolbarIcons = Partial<Record<EditorFormat, EditorToolbarIconSlot>>;
+
 export interface EditorProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'defaultValue'> {
   children?: React.ReactNode;
   /** Controlled value */
@@ -87,14 +102,16 @@ export interface EditorProps extends Omit<React.HTMLAttributes<HTMLDivElement>,
   toolbar?: boolean;
   /** Show default status bar */
   statusBar?: boolean;
-  /** Auto-save callback */
-  onAutoSave?: (value: string) => void;
+  /** Auto-save callback (sync or async) */
+  onAutoSave?: (value: string) => void | Promise<void>;
   /** Auto-save interval in ms */
   autoSaveInterval?: number;
   /** Editor size preset */
   size?: EditorSize;
   /** Maximum character count (shows indicator in status bar) */
   maxLength?: number;
+  /** Custom toolbar icons keyed by format/action, for any icon package */
+  toolbarIcons?: EditorToolbarIcons;
 }
 
 export interface EditorToolbarProps {
@@ -304,6 +321,7 @@ interface EditorContextValue {
   mode: EditorMode;
   size: EditorSize;
   maxLength?: number;
+  toolbarIcons?: EditorToolbarIcons;
   wordCount: number;
   charCount: number;
   toggleFormat: (f: EditorFormat) => void;
@@ -373,6 +391,7 @@ function EditorRoot({
   autoSaveInterval = 30000,
   size = 'md',
   maxLength,
+  toolbarIcons,
   className,
   ...htmlProps
 }: EditorProps) {
@@ -418,7 +437,7 @@ function EditorRoot({
             'aria-multiline': 'true',
           },
         },
-        content: defaultValue || controlledValue || '',
+        content: controlledValue !== undefined ? controlledValue : defaultValue,
         editable: !disabled && !readOnly,
         onUpdate: ({ editor: e }: { editor: { getHTML: () => string } }) => {
           const html = e.getHTML();
@@ -448,17 +467,32 @@ function EditorRoot({
   React.useEffect(() => {
     if (!onAutoSave || !value) return;
 
+    let cancelled = false;
     const timer = setTimeout(() => {
       setSaveStatus('saving');
       try {
-        onAutoSave(value);
-        setSaveStatus('saved');
+        Promise.resolve(onAutoSave(value))
+          .then(() => {
+            if (!cancelled) {
+              setSaveStatus('saved');
+            }
+          })
+          .catch(() => {
+            if (!cancelled) {
+              setSaveStatus('error');
+            }
+          });
       } catch {
-        setSaveStatus('error');
+        if (!cancelled) {
+          setSaveStatus('error');
+        }
       }
     }, autoSaveInterval);
 
-    return () => clearTimeout(timer);
+    return () => {
+      cancelled = true;
+      clearTimeout(timer);
+    };
   }, [value, onAutoSave, autoSaveInterval]);
 
   const toggleFormat = React.useCallback(
@@ -585,6 +619,7 @@ function EditorRoot({
     mode,
     size,
     maxLength,
+    toolbarIcons,
     wordCount,
     charCount,
     toggleFormat,
@@ -652,7 +687,7 @@ function EditorToolbarGroup({ children, 'aria-label': ariaLabel, className }: Ed
 }
 
 function EditorToolbarButton({ format, className }: EditorToolbarButtonProps) {
-  const { toggleFormat, isFormatActive, disabled, readOnly, editor, mode } = useEditorContext();
+  const { toggleFormat, isFormatActive, disabled, readOnly, editor, mode, toolbarIcons } = useEditorContext();
   const meta = FORMAT_META[format];
   const isAction = ACTION_FORMATS.has(format);
   const active = isAction ? false : isFormatActive(format);
@@ -669,6 +704,20 @@ function EditorToolbarButton({ format, className }: EditorToolbarButtonProps) {
     }
   }
 
+  const iconState: EditorToolbarIconRenderState = {
+    format,
+    active,
+    disabled,
+    readOnly,
+    isDisabled,
+    mode,
+  };
+
+  const iconOverride = toolbarIcons?.[format];
+  const renderedOverride = typeof iconOverride === 'function'
+    ? iconOverride(iconState)
+    : iconOverride;
+
   const classes = [
     styles.toolbarButton,
     active && styles.toolbarButtonActive,
@@ -685,7 +734,9 @@ function EditorToolbarButton({ format, className }: EditorToolbarButtonProps) {
       title={`${meta.label} (${meta.shortcut})`}
       {...(isAction ? {} : { 'aria-pressed': active })}
     >
-      <IconComponent size={16} weight={active ? 'bold' : 'regular'} />
+      {iconOverride !== undefined
+        ? renderedOverride
+        : <IconComponent size={16} weight={active ? 'bold' : 'regular'} />}
     </button>
   );
 }

package/src/components/EmptyState/EmptyState.fragment.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { defineFragment } from '@fragments-sdk/cli/core';
+import { defineFragment } from '@fragments-sdk/core';
 import { EmptyState } from '.';
 import { Button } from '../Button';
 
@@ -83,6 +83,7 @@ export default defineFragment({
       'Provide a clear action to resolve the empty state',
       'Use appropriate icons to reinforce the message',
       'Keep messaging positive and actionable',
+      'EmptyState compound sub-components forward DOM props for ids, aria attributes, and handlers',
     ],
     accessibility: [
       'Empty state content is accessible to screen readers',
@@ -112,6 +113,7 @@ export default defineFragment({
     propsSummary: [
       'size: sm|md|lg (default: md)',
       'Sub-components: EmptyState.Icon, EmptyState.Title, EmptyState.Description, EmptyState.Actions',
+      'Compound sub-components forward DOM props to their rendered elements',
     ],
     scenarioTags: [
       'feedback.empty',

package/src/components/EmptyState/EmptyState.module.scss

@@ -13,7 +13,7 @@
 
 // Size variants
 .sm {
-  padding: var(--fui-padding-container-lg) var(--fui-padding-container-md);
+  padding: var(--fui-space-6) var(--fui-space-4);
 
   .title {
     font-size: var(--fui-font-size-sm, $fui-font-size-sm);
@@ -34,7 +34,7 @@
 }
 
 .md {
-  padding: var(--fui-space-10, $fui-space-10) var(--fui-padding-container-lg);
+  padding: var(--fui-space-10, $fui-space-10) var(--fui-space-6);
 
   .title {
     font-size: var(--fui-font-size-base, $fui-font-size-base);
@@ -55,7 +55,7 @@
 }
 
 .lg {
-  padding: var(--fui-space-12, $fui-space-12) var(--fui-padding-container-xl);
+  padding: var(--fui-space-12, $fui-space-12) var(--fui-space-8);
 
   .title {
     font-size: var(--fui-font-size-lg, $fui-font-size-lg);

package/src/components/EmptyState/EmptyState.test.tsx

@@ -64,4 +64,22 @@ describe('EmptyState', () => {
     );
     await expectNoA11yViolations(container);
   });
+
+  it('forwards DOM props on compound sub-components', () => {
+    render(
+      <EmptyState>
+        <EmptyState.Icon data-testid="icon" title="placeholder">ICON</EmptyState.Icon>
+        <EmptyState.Title data-testid="title" id="empty-title">Empty</EmptyState.Title>
+        <EmptyState.Description data-testid="desc" aria-live="polite">Nothing here</EmptyState.Description>
+        <EmptyState.Actions data-testid="actions" role="group">
+          <button>Add</button>
+        </EmptyState.Actions>
+      </EmptyState>
+    );
+
+    expect(screen.getByTestId('icon')).toHaveAttribute('title', 'placeholder');
+    expect(screen.getByTestId('title')).toHaveAttribute('id', 'empty-title');
+    expect(screen.getByTestId('desc')).toHaveAttribute('aria-live', 'polite');
+    expect(screen.getByTestId('actions')).toHaveAttribute('role', 'group');
+  });
 });

package/src/components/EmptyState/index.tsx

@@ -12,24 +12,20 @@ export interface EmptyStateProps extends React.HTMLAttributes<HTMLDivElement> {
   size?: 'sm' | 'md' | 'lg';
 }
 
-export interface EmptyStateIconProps {
+export interface EmptyStateIconProps extends React.HTMLAttributes<HTMLDivElement> {
   children: React.ReactNode;
-  className?: string;
 }
 
-export interface EmptyStateTitleProps {
+export interface EmptyStateTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {
   children: React.ReactNode;
-  className?: string;
 }
 
-export interface EmptyStateDescriptionProps {
+export interface EmptyStateDescriptionProps extends React.HTMLAttributes<HTMLParagraphElement> {
   children: React.ReactNode;
-  className?: string;
 }
 
-export interface EmptyStateActionsProps {
+export interface EmptyStateActionsProps extends React.HTMLAttributes<HTMLDivElement> {
   children: React.ReactNode;
-  className?: string;
 }
 
 // ============================================
@@ -73,24 +69,28 @@ function EmptyStateRoot({
   );
 }
 
-function EmptyStateIcon({ children, className }: EmptyStateIconProps) {
+function EmptyStateIcon({ children, className, ...htmlProps }: EmptyStateIconProps) {
   const classes = [styles.icon, className].filter(Boolean).join(' ');
-  return <div className={classes}>{children}</div>;
+  return <div {...htmlProps} className={classes}>{children}</div>;
 }
 
-function EmptyStateTitle({ children, className }: EmptyStateTitleProps) {
+function EmptyStateTitle({ children, className, ...htmlProps }: EmptyStateTitleProps) {
   const classes = [styles.title, className].filter(Boolean).join(' ');
-  return <h3 className={classes}>{children}</h3>;
+  return <h3 {...htmlProps} className={classes}>{children}</h3>;
 }
 
-function EmptyStateDescription({ children, className }: EmptyStateDescriptionProps) {
+function EmptyStateDescription({
+  children,
+  className,
+  ...htmlProps
+}: EmptyStateDescriptionProps) {
   const classes = [styles.description, className].filter(Boolean).join(' ');
-  return <p className={classes}>{children}</p>;
+  return <p {...htmlProps} className={classes}>{children}</p>;
 }
 
-function EmptyStateActions({ children, className }: EmptyStateActionsProps) {
+function EmptyStateActions({ children, className, ...htmlProps }: EmptyStateActionsProps) {
   const classes = [styles.actions, className].filter(Boolean).join(' ');
-  return <div className={classes}>{children}</div>;
+  return <div {...htmlProps} className={classes}>{children}</div>;
 }
 
 // ============================================

package/src/components/Field/Field.fragment.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { defineFragment } from '@fragments-sdk/cli/core';
+import { defineFragment } from '@fragments-sdk/core';
 import { Field } from '.';
 import { Input } from '../Input';
 import { Grid } from '../Grid';

package/src/components/Fieldset/Fieldset.fragment.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { defineFragment } from '@fragments-sdk/cli/core';
+import { defineFragment } from '@fragments-sdk/core';
 import { Fieldset } from '.';
 import { Field } from '../Field';
 import { Input } from '../Input';
@@ -34,6 +34,7 @@ export default defineFragment({
       'Always include a Fieldset.Legend for accessibility',
       'Use disabled prop to disable all fields within the group',
       'Use Grid inside Fieldset for multi-column layouts',
+      'Fieldset.Legend forwards DOM props for ids, aria attributes, and custom data hooks',
     ],
     accessibility: [
       'Renders semantic fieldset element',
@@ -64,6 +65,7 @@ export default defineFragment({
     propsSummary: [
       'disabled: boolean - disables all child fields',
       'Fieldset.Legend: accessible group label',
+      'Fieldset.Legend forwards DOM props',
     ],
     scenarioTags: ['form.group', 'form.fieldset'],
     a11yRules: ['A11Y_FIELDSET_LEGEND'],

package/src/components/Fieldset/Fieldset.test.tsx

@@ -45,4 +45,18 @@ describe('Fieldset', () => {
     );
     await expectNoA11yViolations(container);
   });
+
+  it('forwards DOM props to Fieldset.Legend', () => {
+    render(
+      <Fieldset>
+        <Fieldset.Legend data-testid="legend" id="legend-id" aria-live="polite">
+          Accessible legend
+        </Fieldset.Legend>
+      </Fieldset>
+    );
+
+    const legend = screen.getByTestId('legend');
+    expect(legend).toHaveAttribute('id', 'legend-id');
+    expect(legend).toHaveAttribute('aria-live', 'polite');
+  });
 });

package/src/components/Fieldset/index.tsx

@@ -13,9 +13,8 @@ export interface FieldsetProps extends React.HTMLAttributes<HTMLFieldSetElement>
   disabled?: boolean;
 }
 
-export interface FieldsetLegendProps {
+export interface FieldsetLegendProps extends React.HTMLAttributes<HTMLElement> {
   children: React.ReactNode;
-  className?: string;
 }
 
 // ============================================
@@ -32,9 +31,9 @@ function FieldsetRoot({ children, disabled, className, ...htmlProps }: FieldsetP
   );
 }
 
-function FieldsetLegend({ children, className }: FieldsetLegendProps) {
+function FieldsetLegend({ children, className, ...htmlProps }: FieldsetLegendProps) {
   const classes = [styles.legend, className].filter(Boolean).join(' ');
-  return <BaseFieldset.Legend className={classes}>{children}</BaseFieldset.Legend>;
+  return <BaseFieldset.Legend {...htmlProps} className={classes}>{children}</BaseFieldset.Legend>;
 }
 
 // ============================================

package/src/components/Form/Form.fragment.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { defineFragment } from '@fragments-sdk/cli/core';
+import { defineFragment } from '@fragments-sdk/core';
 import { Form } from '.';
 import { Field } from '../Field';
 import { Fieldset } from '../Fieldset';
@@ -37,7 +37,7 @@ export default defineFragment({
     guidelines: [
       'Pass errors as Record<string, string | string[]> keyed by field name',
       'Use onClearErrors to clear errors when fields are modified',
-      'Use onFormSubmit for form submission handling',
+      'Use onSubmit for form submission handling (onFormSubmit is deprecated alias)',
       'Field components with matching name prop display errors automatically',
       'Use Grid inside Form or Fieldset for multi-column layouts',
     ],
@@ -57,9 +57,13 @@ export default defineFragment({
       type: 'object',
       description: 'Server-side errors keyed by field name',
     },
+    onSubmit: {
+      type: 'function',
+      description: 'Form submission handler (preferred)',
+    },
     onFormSubmit: {
       type: 'function',
-      description: 'Form submission handler',
+      description: 'Deprecated alias for onSubmit',
     },
     onClearErrors: {
       type: 'function',
@@ -81,7 +85,8 @@ export default defineFragment({
   contract: {
     propsSummary: [
       'errors: Record<string, string | string[]> - server errors by field name',
-      'onFormSubmit: (event) => void - submission handler',
+      'onSubmit: (event) => void - submission handler (preferred)',
+      'onFormSubmit: (event) => void - deprecated alias for onSubmit',
       'onClearErrors: (name) => void - clear errors callback',
     ],
     scenarioTags: ['form.submit', 'form.validation', 'form.server'],
@@ -93,7 +98,7 @@ export default defineFragment({
       name: 'Sign up',
       description: 'Registration form with two-column name fields',
       render: () => (
-        <Form onFormSubmit={(e) => { e.preventDefault(); }}>
+        <Form onSubmit={(e) => { e.preventDefault(); }}>
           <Grid columns={2} gap="md">
             <Field name="firstName">
               <Field.Label>First Name</Field.Label>
@@ -143,7 +148,7 @@ export default defineFragment({
       name: 'Profile settings',
       description: 'Multi-section form with Fieldsets, switches, and radio group',
       render: () => (
-        <Form onFormSubmit={(e) => { e.preventDefault(); }}>
+        <Form onSubmit={(e) => { e.preventDefault(); }}>
           <Fieldset>
             <Fieldset.Legend>Profile</Fieldset.Legend>
             <Grid columns={2} gap="md">
@@ -209,7 +214,7 @@ export default defineFragment({
       name: 'Contact form',
       description: 'Contact form with select, textarea, and checkbox',
       render: () => (
-        <Form onFormSubmit={(e) => { e.preventDefault(); }}>
+        <Form onSubmit={(e) => { e.preventDefault(); }}>
           <Grid columns={2} gap="md">
             <Field name="name">
               <Field.Label>Name</Field.Label>

package/src/components/Form/index.tsx

@@ -8,9 +8,12 @@ import styles from './Form.module.scss';
 // Types
 // ============================================
 
-export interface FormProps extends Omit<React.HTMLAttributes<HTMLFormElement>, 'onSubmit'> {
+export interface FormProps extends Omit<React.FormHTMLAttributes<HTMLFormElement>, 'onSubmit'> {
   children: React.ReactNode;
   errors?: Record<string, string | string[]>;
+  /** Standard form submit handler */
+  onSubmit?: (event: React.FormEvent<HTMLFormElement>) => void;
+  /** @deprecated Use onSubmit */
   onFormSubmit?: (event: React.FormEvent<HTMLFormElement>) => void;
   onClearErrors?: (name: string) => void;
   validationMode?: 'onSubmit' | 'onBlur' | 'onChange';
@@ -23,6 +26,7 @@ export interface FormProps extends Omit<React.HTMLAttributes<HTMLFormElement>, '
 function FormRoot({
   children,
   errors,
+  onSubmit,
   onFormSubmit,
   onClearErrors,
   validationMode,
@@ -30,24 +34,16 @@ function FormRoot({
   ...htmlProps
 }: FormProps) {
   const classes = [styles.root, className].filter(Boolean).join(' ');
-
-  const baseProps: Record<string, unknown> = {
-    ...htmlProps,
-    errors,
-    validationMode,
-    className: classes,
-  };
-
-  if (onFormSubmit) {
-    baseProps.onSubmit = onFormSubmit;
-  }
-
-  if (onClearErrors) {
-    baseProps.onClearErrors = onClearErrors;
-  }
+  const submitHandler = onSubmit ?? onFormSubmit;
 
   return (
-    <BaseForm {...baseProps}>
+    <BaseForm
+      {...htmlProps}
+      errors={errors}
+      validationMode={validationMode}
+      onSubmit={submitHandler}
+      className={classes}
+    >
       {children}
     </BaseForm>
   );

package/src/components/Grid/Grid.fragment.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { defineFragment } from '@fragments-sdk/cli/core';
+import { defineFragment } from '@fragments-sdk/core';
 import { Grid } from '.';
 
 export default defineFragment({
@@ -31,6 +31,7 @@ export default defineFragment({
       'Use fixed column counts when exact column control is needed and responsiveness is not required',
       'Use Grid.Item with colSpan to create asymmetric layouts within a fixed grid',
       'Keep gap consistent within a context — md is the default and works for most cases',
+      'Pass DOM attributes (id, role, aria-*, data-*, event handlers) directly to Grid and Grid.Item roots when needed',
     ],
     accessibility: [
       'Grid is purely visual — it does not affect reading order or semantics',
@@ -60,9 +61,8 @@ export default defineFragment({
     gap: {
       type: 'union',
       values: ['none', 'xs', 'sm', 'md', 'lg', 'xl'],
-      description: 'Gap between items. Accepts string tokens or numbers (1-8) mapping to the spacing scale',
       default: 'md',
-      description: 'Gap between grid items, mapped to spacing tokens',
+      description: 'Gap between grid items. Accepts string tokens or numbers (1-8) mapped to the spacing scale',
     },
     alignItems: {
       type: 'enum',
@@ -103,6 +103,7 @@ export default defineFragment({
       'alignItems: start|center|end|stretch — vertical alignment',
       'justifyItems: start|center|end|stretch — horizontal alignment',
       'padding: none|sm|md|lg (default: none)',
+      'Pass-through DOM props supported on Grid and Grid.Item roots (id, role, aria-*, data-*, handlers)',
     ],
     scenarioTags: [
       'layout.grid',

package/src/components/Grid/Grid.module.scss

@@ -82,9 +82,9 @@
 // ============================================
 
 .paddingNone { padding: 0; }
-.paddingSm   { padding: var(--fui-padding-container-sm); }
-.paddingMd   { padding: var(--fui-padding-container-md); }
-.paddingLg   { padding: var(--fui-padding-container-lg); }
+.paddingSm   { padding: var(--fui-space-3); }
+.paddingMd   { padding: var(--fui-space-4); }
+.paddingLg   { padding: var(--fui-space-6); }
 
 // ============================================
 // Align items (cross-axis within cells)

package/src/components/Grid/index.tsx

@@ -6,6 +6,7 @@ import styles from './Grid.module.scss';
 // ============================================
 
 type ColumnCount = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+type GapScale = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
 
 /** Responsive value — either a single value or per-breakpoint overrides */
 export interface ResponsiveColumns {
@@ -25,7 +26,7 @@ export interface ResponsiveColumns {
  * CSS Grid layout component with responsive columns.
  * @see https://usefragments.com/components/grid
  */
-export interface GridProps {
+export interface GridProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children' | 'style' | 'className'> {
   children?: React.ReactNode;
   /**
    * Number of columns.
@@ -37,7 +38,7 @@ export interface GridProps {
   /** Minimum width for auto-fill columns (only used with columns="auto") */
   minChildWidth?: string;
   /** Gap between grid items. Accepts string tokens or numbers (1-8) mapping to the spacing scale */
-  gap?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | number;
+  gap?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | GapScale;
   /** Vertical alignment of items within their cells */
   alignItems?: 'start' | 'center' | 'end' | 'stretch';
   /** Horizontal alignment of items within their cells */
@@ -50,7 +51,7 @@ export interface GridProps {
   style?: React.CSSProperties;
 }
 
-export interface GridItemProps {
+export interface GridItemProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children' | 'className'> {
   children?: React.ReactNode;
   /** Number of columns this item spans */
   colSpan?: ColumnCount | 'full';
@@ -60,6 +61,7 @@ export interface GridItemProps {
   alignSelf?: 'start' | 'center' | 'end' | 'stretch';
   /** Additional class name */
   className?: string;
+  style?: React.CSSProperties;
 }
 
 // ============================================
@@ -72,7 +74,7 @@ function isResponsiveColumns(
   return typeof columns === 'object' && columns !== null;
 }
 
-const gapClasses: Record<NonNullable<GridProps['gap']>, string> = {
+const gapClasses: Record<Exclude<NonNullable<GridProps['gap']>, GapScale>, string> = {
   none: styles.gapNone,
   xs: styles.gapXs,
   sm: styles.gapSm,
@@ -104,6 +106,7 @@ export const Grid = React.forwardRef<HTMLDivElement, GridProps>(
       padding = 'none',
       className,
       style,
+      ...htmlProps
     },
     ref
   ) {
@@ -149,7 +152,7 @@ export const Grid = React.forwardRef<HTMLDivElement, GridProps>(
     const mergedStyle = inlineStyle ? { ...inlineStyle, ...style } : style;
 
     return (
-      <div ref={ref} className={classes} style={mergedStyle}>
+      <div {...htmlProps} ref={ref} className={classes} style={mergedStyle}>
         {children}
       </div>
     );
@@ -168,6 +171,8 @@ const GridItem = React.forwardRef<HTMLDivElement, GridItemProps>(
       rowSpan,
       alignSelf,
       className,
+      style,
+      ...htmlProps
     },
     ref
   ) {
@@ -182,7 +187,7 @@ const GridItem = React.forwardRef<HTMLDivElement, GridItemProps>(
       .join(' ');
 
     return (
-      <div ref={ref} className={classes}>
+      <div {...htmlProps} ref={ref} className={classes} style={style}>
         {children}
       </div>
     );