@fragments-sdk/ui 0.13.0 → 0.14.0

package/src/components/DataTable/index.tsx

@@ -28,6 +28,9 @@ export type SortingState = Array<{ id: string; desc: boolean }>;
 export type RowSelectionState = Record<string, boolean>;
 export type ExpandedState = true | Record<string, boolean>;
 type OnChangeFn<T> = ((updaterOrValue: T | ((prev: T) => T)) => void);
+export type DataTableRowClickEvent =
+  | React.MouseEvent<HTMLTableRowElement>
+  | React.KeyboardEvent<HTMLTableRowElement>;
 
 export type DataTableColumn<T> = ColumnDef<T, unknown>;
 
@@ -81,7 +84,7 @@ export interface DataTableProps<T> extends Omit<React.HTMLAttributes<HTMLTableEl
   /** Selection change handler */
   onRowSelectionChange?: OnChangeFn<RowSelectionState>;
   /** Row click handler */
-  onRowClick?: (row: T) => void;
+  onRowClick?: (row: T, event: DataTableRowClickEvent) => void;
   /** Extract sub-rows from a row for expandable tree tables */
   getSubRows?: (row: T) => T[] | undefined;
   /** Controlled expanded state */
@@ -100,6 +103,10 @@ export interface DataTableProps<T> extends Omit<React.HTMLAttributes<HTMLTableEl
   striped?: boolean;
   /** Wrap table in a bordered container */
   bordered?: boolean;
+  /** Additional class name for the outer wrapper div */
+  wrapperClassName?: string;
+  /** Props forwarded to the outer wrapper div */
+  wrapperProps?: React.HTMLAttributes<HTMLDivElement>;
 }
 
 function getColumnSizeStyle(
@@ -159,6 +166,8 @@ function DataTableRoot<T>({
   captionHidden = false,
   striped = false,
   bordered = false,
+  wrapperClassName,
+  wrapperProps,
   'aria-label': ariaLabel,
   'aria-describedby': ariaDescribedBy,
   ...htmlProps
@@ -267,10 +276,19 @@ function DataTableRoot<T>({
   ]
     .filter(Boolean)
     .join(' ');
+  const { className: wrapperPropsClassName, ...restWrapperProps } = wrapperProps ?? {};
+  const wrapperClasses = [
+    styles.wrapper,
+    bordered && styles.bordered,
+    wrapperClassName,
+    wrapperPropsClassName,
+  ]
+    .filter(Boolean)
+    .join(' ');
 
   if (isEmpty) {
     return (
-      <div className={[styles.wrapper, bordered && styles.bordered].filter(Boolean).join(' ')}>
+      <div {...restWrapperProps} className={wrapperClasses}>
         <table
           {...htmlProps}
           className={rootClasses}
@@ -297,7 +315,7 @@ function DataTableRoot<T>({
   }
 
   return (
-    <div className={[styles.wrapper, bordered && styles.bordered].filter(Boolean).join(' ')}>
+    <div {...restWrapperProps} className={wrapperClasses}>
       <table
         {...htmlProps}
         className={rootClasses}
@@ -382,7 +400,7 @@ function DataTableRoot<T>({
             const handleRowClick = (event: React.MouseEvent<HTMLTableRowElement>) => {
               if (!onRowClick) return;
               if (isInteractiveTarget(event.target, event.currentTarget)) return;
-              onRowClick(row.original);
+              onRowClick(row.original, event);
             };
 
             const handleRowKeyDown = (event: React.KeyboardEvent<HTMLTableRowElement>) => {
@@ -390,7 +408,7 @@ function DataTableRoot<T>({
               if (isInteractiveTarget(event.target, event.currentTarget)) return;
               if (event.key === 'Enter' || event.key === ' ') {
                 event.preventDefault();
-                onRowClick(row.original);
+                onRowClick(row.original, event);
               }
             };
 

package/src/components/DatePicker/DatePicker.fragment.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { defineFragment } from '@fragments-sdk/cli/core';
+import { defineFragment } from '@fragments-sdk/core';
 import { DatePicker } from '.';
 import type { DateRange } from '.';
 import { subDays } from 'date-fns';
@@ -71,6 +71,7 @@ export default defineFragment({
       'Add presets for common ranges (Today, Last 7 days, Last 30 days)',
       'Use disabledDates to prevent selecting past dates or unavailable dates',
       'Provide a meaningful placeholder',
+      'DatePicker.Trigger forwards button props and defaults to type="button" (safe inside forms)',
     ],
     accessibility: [
       'Full keyboard navigation within the calendar grid',
@@ -144,6 +145,7 @@ export default defineFragment({
       'numberOfMonths: number - months visible (default 1)',
       'disabled: boolean - disable picker',
       'disabledDates: Matcher - dates to disable',
+      'DatePicker.Trigger: button props supported (type defaults to "button")',
     ],
     scenarioTags: [
       'form.date',

package/src/components/DatePicker/DatePicker.module.scss

@@ -359,7 +359,7 @@
   display: flex;
   align-items: center;
   width: 100%;
-  padding: var(--fui-padding-item-xs, $fui-padding-item-xs) var(--fui-padding-item-md, $fui-padding-item-md);
+  padding: var(--fui-space-1, $fui-space-1) var(--fui-space-3, $fui-space-3);
   border-radius: var(--fui-radius-sm, $fui-radius-sm);
   font-size: var(--fui-font-size-sm, $fui-font-size-sm);
   color: var(--fui-text-primary, $fui-text-primary);

package/src/components/DatePicker/DatePicker.test.tsx

@@ -53,6 +53,23 @@ describe('DatePicker', () => {
       expect(screen.getByRole('button')).toBeInTheDocument();
     });
 
+    it('uses button semantics and forwards button props on Trigger', () => {
+      render(
+        <form>
+          <DatePicker>
+            <DatePicker.Trigger data-testid="trigger" type="button" name="date-trigger" />
+            <DatePicker.Content>
+              <DatePicker.Calendar />
+            </DatePicker.Content>
+          </DatePicker>
+        </form>
+      );
+
+      const trigger = screen.getByTestId('trigger');
+      expect(trigger).toHaveAttribute('type', 'button');
+      expect(trigger).toHaveAttribute('name', 'date-trigger');
+    });
+
     it('shows placeholder text when no value selected', () => {
       renderDatePicker({ placeholder: 'Choose date' });
       expect(screen.getByText('Choose date')).toBeInTheDocument();

package/src/components/DatePicker/index.tsx

@@ -50,7 +50,7 @@ export interface DatePickerProps {
   name?: string;
 }
 
-export interface DatePickerTriggerProps extends React.HTMLAttributes<HTMLButtonElement> {
+export interface DatePickerTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   children?: React.ReactNode;
   placeholder?: string;
 }
@@ -430,7 +430,13 @@ function DatePickerRoot({
   );
 }
 
-function DatePickerTrigger({ children, placeholder, className, ...htmlProps }: DatePickerTriggerProps) {
+function DatePickerTrigger({
+  children,
+  placeholder,
+  className,
+  type = 'button',
+  ...htmlProps
+}: DatePickerTriggerProps) {
   const ctx = useDatePickerContext();
   const placeholderText = placeholder ?? ctx.placeholder;
 
@@ -446,6 +452,7 @@ function DatePickerTrigger({ children, placeholder, className, ...htmlProps }: D
   return (
     <BasePopover.Trigger
       {...htmlProps}
+      type={type}
       className={classes}
       disabled={ctx.disabled}
     >

package/src/components/Dialog/Dialog.fragment.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { defineFragment } from '@fragments-sdk/cli/core';
+import { defineFragment } from '@fragments-sdk/core';
 import { Dialog } from '.';
 import { Button } from '../Button';
 
@@ -34,6 +34,7 @@ export default defineFragment({
       'Use descriptive title that explains the purpose',
       'Allow dismissal via backdrop click or close button for non-critical dialogs',
       'Trap focus within the dialog for accessibility',
+      'Dialog.Trigger and Dialog.Close support asChild for buttons, links, and router link components',
     ],
     accessibility: [
       'Automatically traps focus within the dialog',
@@ -80,6 +81,7 @@ export default defineFragment({
       'open: boolean - controlled open state',
       'onOpenChange: (open) => void - open state handler',
       'modal: boolean - blocks page interaction (default: true)',
+      'Dialog.Content initialFocus?: boolean - control auto-focus on open (default: true)',
       'Dialog.Content size: sm|md|lg|xl|full - dialog width',
     ],
     scenarioTags: [
@@ -97,6 +99,7 @@ export default defineFragment({
     requiredChildren: ['Content'],
     commonPatterns: [
       '<Dialog><Dialog.Trigger><Button>Open</Button></Dialog.Trigger><Dialog.Content><Dialog.Header><Dialog.Title>{title}</Dialog.Title></Dialog.Header><Dialog.Body>{content}</Dialog.Body><Dialog.Footer><Dialog.Close><Button variant="secondary">Cancel</Button></Dialog.Close><Button>Confirm</Button></Dialog.Footer></Dialog.Content></Dialog>',
+      '<Dialog><Dialog.Trigger asChild><a href="/settings">Open settings</a></Dialog.Trigger><Dialog.Content initialFocus={false}>...</Dialog.Content></Dialog>',
     ],
   },
 
@@ -184,5 +187,29 @@ export default defineFragment({
         </Dialog>
       ),
     },
+    {
+      name: 'Link Trigger + No Initial Focus',
+      description: 'Use asChild with a link trigger and disable automatic initial focus when needed',
+      render: () => (
+        <Dialog>
+          <Dialog.Trigger asChild>
+            <a href="#dialog-demo">Open via link</a>
+          </Dialog.Trigger>
+          <Dialog.Content size="sm" initialFocus={false}>
+            <Dialog.Header>
+              <Dialog.Title>Linked Trigger</Dialog.Title>
+              <Dialog.Description>
+                Example using asChild with an anchor element and manual focus behavior.
+              </Dialog.Description>
+            </Dialog.Header>
+            <Dialog.Footer>
+              <Dialog.Close asChild>
+                <Button variant="secondary">Close</Button>
+              </Dialog.Close>
+            </Dialog.Footer>
+          </Dialog.Content>
+        </Dialog>
+      ),
+    },
   ],
 });

package/src/components/Dialog/Dialog.module.scss

@@ -1,5 +1,5 @@
-@use '../../tokens/variables' as *;
-@use '../../tokens/mixins' as *;
+@use "../../tokens/variables" as *;
+@use "../../tokens/mixins" as *;
 
 // Backdrop overlay
 .backdrop {
@@ -30,7 +30,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: var(--fui-space-4, $fui-space-4);
+  padding: var(--fui-space-2, $fui-space-2);
   overflow-y: auto;
 }
 
@@ -92,7 +92,7 @@
 
 // Header area
 .header {
-  padding: var(--fui-padding-container-sm, $fui-padding-container-sm) var(--fui-padding-container-md, $fui-padding-container-md);
+  padding: var(--fui-space-3, $fui-space-3) var(--fui-space-4, $fui-space-4);
 }
 
 // Title
@@ -114,7 +114,7 @@
 
 // Body content
 .body {
-  padding: 0 var(--fui-padding-container-md, $fui-padding-container-md) var(--fui-padding-container-sm, $fui-padding-container-sm);
+  padding: 0 var(--fui-space-4, $fui-space-4) var(--fui-space-3, $fui-space-3);
 }
 
 // Footer for actions
@@ -123,7 +123,7 @@
   align-items: center;
   justify-content: flex-end;
   gap: var(--fui-space-1, $fui-space-1);
-  padding: var(--fui-padding-inline-sm, $fui-padding-inline-sm) var(--fui-padding-container-md, $fui-padding-container-md);
+  padding: var(--fui-space-2, $fui-space-2) var(--fui-space-4, $fui-space-4);
   border-top: 1px solid var(--fui-border, $fui-border);
   background-color: var(--fui-bg-secondary, $fui-bg-secondary);
   border-radius: 0 0 var(--fui-radius-lg, $fui-radius-lg) var(--fui-radius-lg, $fui-radius-lg);

package/src/components/Dialog/index.tsx

@@ -31,6 +31,9 @@ export interface DialogContentProps extends React.HTMLAttributes<HTMLDivElement>
    * @default "md"
    * @see https://usefragments.com/components/dialog#sizes */
   size?: 'sm' | 'md' | 'lg' | 'xl' | 'full';
+  /** Whether the dialog should autofocus content on open.
+   * @default true */
+  initialFocus?: boolean;
 }
 
 export interface DialogTitleProps extends Omit<React.HTMLAttributes<HTMLElement>, 'children'> {
@@ -53,15 +56,29 @@ export interface DialogFooterProps extends React.HTMLAttributes<HTMLDivElement>
   children: React.ReactNode;
 }
 
-export interface DialogTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+type DialogTriggerAsButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
   children: React.ReactNode;
-  asChild?: boolean;
-}
+  asChild?: false;
+};
+
+type DialogTriggerAsChildProps = Omit<React.HTMLAttributes<HTMLElement>, 'children'> & {
+  children: React.ReactElement;
+  asChild: true;
+};
+
+export type DialogTriggerProps = DialogTriggerAsButtonProps | DialogTriggerAsChildProps;
 
-export interface DialogCloseProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+type DialogCloseAsButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
   children?: React.ReactNode;
-  asChild?: boolean;
-}
+  asChild?: false;
+};
+
+type DialogCloseAsChildProps = Omit<React.HTMLAttributes<HTMLElement>, 'children'> & {
+  children: React.ReactElement;
+  asChild: true;
+};
+
+export type DialogCloseProps = DialogCloseAsButtonProps | DialogCloseAsChildProps;
 
 // ============================================
 // Close Icon
@@ -134,6 +151,7 @@ function DialogTrigger({
 function DialogContent({
   children,
   size = 'md',
+  initialFocus = true,
   className,
   ...htmlProps
 }: DialogContentProps) {
@@ -145,7 +163,7 @@ function DialogContent({
     <BaseDialog.Portal>
       <BaseDialog.Backdrop className={styles.backdrop} />
       <BaseDialog.Viewport className={styles.positioner}>
-        <BaseDialog.Popup initialFocus {...htmlProps} className={popupClasses}>
+        <BaseDialog.Popup initialFocus={initialFocus} {...htmlProps} className={popupClasses}>
           {children}
         </BaseDialog.Popup>
       </BaseDialog.Viewport>

package/src/components/Drawer/Drawer.fragment.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { defineFragment } from '@fragments-sdk/cli/core';
+import { defineFragment } from '@fragments-sdk/core';
 import { Drawer } from '.';
 import { Button } from '../Button';
 import { Stack } from '../Stack';
@@ -36,6 +36,8 @@ export default defineFragment({
       'Use bottom for mobile-style action sheets',
       'Provide clear close affordance (X button or cancel)',
       'Keep drawer content focused on a single task',
+      'Drawer.Trigger and Drawer.Close with asChild require a single valid React element child',
+      'Set Drawer.Content initialFocus={false} when custom focus management is needed',
     ],
     accessibility: [
       'Automatically traps focus within the drawer',
@@ -84,6 +86,7 @@ export default defineFragment({
       'modal: boolean - blocks page interaction (default: true)',
       'Drawer.Content side: left|right|top|bottom - slide direction (default: right)',
       'Drawer.Content size: sm|md|lg|xl|full - panel size',
+      'Drawer.Content initialFocus: boolean - auto-focus popup on open (default: true)',
     ],
     scenarioTags: [
       'overlay.drawer',

package/src/components/Drawer/Drawer.module.scss

@@ -128,7 +128,7 @@
 
 // Header area
 .header {
-  padding: var(--fui-padding-container-sm, $fui-padding-container-sm) var(--fui-padding-container-md, $fui-padding-container-md);
+  padding: var(--fui-space-3, $fui-space-3) var(--fui-space-4, $fui-space-4);
 }
 
 // Title
@@ -151,7 +151,7 @@
 // Body content
 .body {
   flex: 1;
-  padding: 0 var(--fui-padding-container-md, $fui-padding-container-md) var(--fui-padding-container-sm, $fui-padding-container-sm);
+  padding: 0 var(--fui-space-4, $fui-space-4) var(--fui-space-3, $fui-space-3);
   overflow-y: auto;
 }
 
@@ -161,7 +161,7 @@
   align-items: center;
   justify-content: flex-end;
   gap: var(--fui-space-1, $fui-space-1);
-  padding: var(--fui-padding-inline-sm, $fui-padding-inline-sm) var(--fui-padding-container-md, $fui-padding-container-md);
+  padding: var(--fui-space-2, $fui-space-2) var(--fui-space-4, $fui-space-4);
   border-top: 1px solid var(--fui-border, $fui-border);
   background-color: var(--fui-bg-secondary, $fui-bg-secondary);
 }

package/src/components/Drawer/Drawer.test.tsx

@@ -118,6 +118,14 @@ describe('Drawer', () => {
     });
   });
 
+  it('accepts Drawer.Content initialFocus prop', async () => {
+    renderDrawer({ defaultOpen: true }, { initialFocus: false });
+
+    await waitFor(() => {
+      expect(screen.getByText('Drawer Title')).toBeInTheDocument();
+    });
+  });
+
   it('has no accessibility violations when open', async () => {
     const { container } = renderDrawer({ defaultOpen: true });
 

package/src/components/Drawer/index.tsx

@@ -36,6 +36,8 @@ export interface DrawerContentProps extends React.HTMLAttributes<HTMLDivElement>
   size?: 'sm' | 'md' | 'lg' | 'xl' | 'full';
   /** Whether to show the backdrop overlay (default: true). Set to false for non-modal bottom panels. */
   backdrop?: boolean;
+  /** Whether to autofocus an element on open (default: true) */
+  initialFocus?: boolean;
 }
 
 export interface DrawerTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
@@ -68,6 +70,13 @@ export interface DrawerCloseProps extends React.ButtonHTMLAttributes<HTMLButtonE
   asChild?: boolean;
 }
 
+function getAsChildElement(children: React.ReactNode, componentName: string): React.ReactElement {
+  if (!React.isValidElement(children)) {
+    throw new Error(`${componentName} with asChild requires a single valid React element child.`);
+  }
+  return children;
+}
+
 // ============================================
 // Close Icon
 // ============================================
@@ -122,8 +131,9 @@ function DrawerTrigger({
   ...htmlProps
 }: DrawerTriggerProps) {
   if (asChild) {
+    const child = getAsChildElement(children, 'Drawer.Trigger');
     return (
-      <BaseDialog.Trigger {...htmlProps} className={className} render={children as React.ReactElement}>
+      <BaseDialog.Trigger {...htmlProps} className={className} render={child}>
         {null}
       </BaseDialog.Trigger>
     );
@@ -141,6 +151,7 @@ function DrawerContent({
   side = 'right',
   size = 'md',
   backdrop = true,
+  initialFocus = true,
   className,
   ...htmlProps
 }: DrawerContentProps) {
@@ -156,7 +167,7 @@ function DrawerContent({
   return (
     <BaseDialog.Portal>
       {backdrop && <BaseDialog.Backdrop className={styles.backdrop} />}
-      <BaseDialog.Popup initialFocus {...htmlProps} data-side={side} className={popupClasses}>
+      <BaseDialog.Popup initialFocus={initialFocus} {...htmlProps} data-side={side} className={popupClasses}>
         {children}
       </BaseDialog.Popup>
     </BaseDialog.Portal>
@@ -207,12 +218,13 @@ function DrawerClose({ children, asChild, className, ...htmlProps }: DrawerClose
   }
 
   if (asChild) {
+    const child = getAsChildElement(children, 'Drawer.Close');
     return (
       <BaseDialog.Close
         {...htmlProps}
         data-drawer-close
         className={className}
-        render={children as React.ReactElement}
+        render={child}
       >
         {null}
       </BaseDialog.Close>

package/src/components/Editor/Editor.fragment.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { defineFragment } from '@fragments-sdk/cli/core';
+import { defineFragment } from '@fragments-sdk/core';
 import { Editor } from '.';
 import { Button } from '../Button';
 
@@ -37,9 +37,11 @@ export default defineFragment({
       'Install @tiptap/react, @tiptap/starter-kit, and @tiptap/extension-link for rich text mode',
       'Falls back to a markdown-aware textarea when TipTap is not installed',
       'Use onAutoSave for periodic content persistence',
+      'onAutoSave may return a Promise; save status updates after the async save resolves/rejects',
       'Use size prop (sm/md/lg) to control editor height',
       'Use maxLength to show character limit with visual warning states',
       'New formats (headings, blockquote, orderedList, undo, redo) are opt-in via the formats prop',
+      'Use toolbarIcons to swap in icons from any icon package without changing toolbar button labels or accessibility behavior',
     ],
     accessibility: [
       'Toolbar has role="toolbar" with aria-label',
@@ -97,7 +99,7 @@ export default defineFragment({
     },
     onAutoSave: {
       type: 'function',
-      description: 'Auto-save callback, called at autoSaveInterval',
+      description: 'Auto-save callback, called at autoSaveInterval (may be async)',
     },
     autoSaveInterval: {
       type: 'number',
@@ -113,6 +115,10 @@ export default defineFragment({
       type: 'number',
       description: 'Maximum character count. Shows counter in status bar with warning (90%) and error (over limit) states',
     },
+    toolbarIcons: {
+      type: 'object',
+      description: 'Optional toolbar icon overrides keyed by format/action (e.g. bold, italic, undo). Values can be React nodes or render functions.',
+    },
   },
 
   relations: [
@@ -143,9 +149,10 @@ export default defineFragment({
       'formats: EditorFormat[] - toolbar buttons (default: all 6)',
       'toolbar: boolean - show default toolbar (default: true)',
       'statusBar: boolean - show word/char counts (default: true)',
-      'onAutoSave: (value: string) => void - auto-save handler',
+      'onAutoSave: (value: string) => void | Promise<void> - auto-save handler',
       'size: "sm" | "md" | "lg" - editor height preset (default: "md")',
       'maxLength: number - character limit with visual indicator',
+      'toolbarIcons: Partial<Record<EditorFormat, ReactNode | (state) => ReactNode>> - custom toolbar icons',
     ],
     scenarioTags: [
       'form.editor',

package/src/components/Editor/Editor.module.scss

@@ -64,7 +64,7 @@
   justify-content: space-between;
   flex-wrap: wrap;
   gap: var(--fui-space-2, $fui-space-2);
-  padding: var(--fui-padding-item-xs, $fui-padding-item-xs) var(--fui-padding-item-sm, $fui-padding-item-sm);
+  padding: var(--fui-space-1, $fui-space-1) var(--fui-space-2, $fui-space-2);
   border-bottom: 1px solid var(--fui-border, $fui-border);
   background-color: var(--fui-bg-secondary, $fui-bg-secondary);
 }
@@ -161,7 +161,7 @@
 .contentRich {
   // TipTap editor styling
   :global(.tiptap) {
-    padding: var(--fui-padding-inline-md, $fui-padding-inline-md);
+    padding: var(--fui-space-3, $fui-space-3);
     min-height: 200px;
     outline: none;
     @include text-base;
@@ -268,7 +268,7 @@
   width: 100%;
   height: 100%;
   min-height: 200px;
-  padding: var(--fui-padding-inline-md, $fui-padding-inline-md);
+  padding: var(--fui-space-3, $fui-space-3);
   background: transparent;
   border: none;
   resize: none;
@@ -298,7 +298,7 @@
   align-items: center;
   justify-content: space-between;
   gap: var(--fui-space-2, $fui-space-2);
-  padding: var(--fui-padding-item-xs, $fui-padding-item-xs) var(--fui-padding-item-sm, $fui-padding-item-sm);
+  padding: var(--fui-space-1, $fui-space-1) var(--fui-space-2, $fui-space-2);
   border-top: 1px solid var(--fui-border, $fui-border);
   background-color: var(--fui-bg-secondary, $fui-bg-secondary);
 }

package/src/components/Editor/Editor.test.tsx

@@ -1,5 +1,6 @@
+import type { ReactNode } from 'react';
 import { describe, it, expect, vi } from 'vitest';
-import { render, screen, userEvent, expectNoA11yViolations } from '../../test/utils';
+import { render, screen, userEvent, expectNoA11yViolations, act } from '../../test/utils';
 import { Editor } from './index';
 import { Button } from '../Button';
 
@@ -11,6 +12,7 @@ function renderEditor(
     defaultValue?: string;
     onValueChange?: (v: string) => void;
     formats?: ('bold' | 'italic' | 'strikethrough' | 'link' | 'code' | 'bulletList')[];
+    toolbarIcons?: Partial<Record<'bold' | 'italic' | 'strikethrough' | 'link' | 'code' | 'bulletList', ReactNode>>;
   } = {},
 ) {
   return render(
@@ -21,6 +23,7 @@ function renderEditor(
       readOnly={props.readOnly}
       defaultValue={props.defaultValue}
       formats={props.formats}
+      toolbarIcons={props.toolbarIcons}
     >
       <Editor.Toolbar>
         <Editor.ToolbarGroup aria-label="Text formatting">
@@ -71,6 +74,17 @@ describe('Editor', () => {
     expect(screen.getByRole('button', { name: /code/i })).toBeInTheDocument();
   });
 
+  it('renders custom toolbar icons from toolbarIcons', () => {
+    renderEditor({
+      formats: ['bold'],
+      toolbarIcons: {
+        bold: <span data-testid="custom-bold-icon" aria-hidden="true">B*</span>,
+      },
+    });
+    expect(screen.getByRole('button', { name: /bold/i })).toBeInTheDocument();
+    expect(screen.getByTestId('custom-bold-icon')).toBeInTheDocument();
+  });
+
   it('renders toolbar with proper ARIA role', () => {
     renderEditor();
     expect(screen.getByRole('toolbar')).toBeInTheDocument();
@@ -122,6 +136,28 @@ describe('Editor', () => {
     expect(boldBtn).toHaveAttribute('aria-pressed', 'false');
   });
 
+  it('supports state-aware toolbar icon render functions', () => {
+    render(
+      <Editor
+        formats={['bold']}
+        toolbarIcons={{
+          bold: ({ active, isDisabled }) => (
+            <span
+              data-testid="bold-icon-state"
+              data-active={String(active)}
+              data-disabled={String(isDisabled)}
+              aria-hidden="true"
+            />
+          ),
+        }}
+      />
+    );
+
+    const icon = screen.getByTestId('bold-icon-state');
+    expect(icon).toHaveAttribute('data-active', 'false');
+    expect(icon).toHaveAttribute('data-disabled', 'false');
+  });
+
   it('disables toolbar buttons when editor is disabled', () => {
     renderEditor({ disabled: true, formats: ['bold', 'italic'] });
     expect(screen.getByRole('button', { name: /bold/i })).toBeDisabled();
@@ -167,6 +203,37 @@ describe('Editor', () => {
     expect(screen.getByText('0 Words')).toBeInTheDocument();
   });
 
+  it('supports async onAutoSave callbacks and updates status after resolution', async () => {
+    vi.useFakeTimers();
+    let resolveSave: (() => void) | undefined;
+    const onAutoSave = vi.fn(
+      () =>
+        new Promise<void>((resolve) => {
+          resolveSave = resolve;
+        })
+    );
+
+    render(
+      <Editor defaultValue="Hello world" onAutoSave={onAutoSave} autoSaveInterval={25}>
+        <Editor.Content />
+        <Editor.StatusIndicator />
+      </Editor>
+    );
+
+    await vi.advanceTimersByTimeAsync(25);
+    expect(onAutoSave).toHaveBeenCalledTimes(1);
+    expect(String(onAutoSave.mock.calls[0][0])).toContain('Hello world');
+    expect(screen.getByText('SAVING...')).toBeInTheDocument();
+
+    await act(async () => {
+      resolveSave?.();
+      await Promise.resolve();
+    });
+    expect(screen.getByText('AUTO-SAVED')).toBeInTheDocument();
+
+    vi.useRealTimers();
+  });
+
   it('has no accessibility violations', async () => {
     const { container } = renderEditor();
     await expectNoA11yViolations(container);