@fragments-sdk/ui 0.12.0 → 0.13.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fragments-sdk/ui",
-  "version": "0.12.0",
+  "version": "0.13.0",
   "license": "MIT",
   "description": "Customizable UI components built on Base UI headless primitives",
   "author": "Conan McNicholl",
@@ -230,7 +230,7 @@
     "vite": "^6.0.0",
     "vitest": "^2.1.8",
     "vitest-axe": "^0.1.0",
-    "@fragments-sdk/cli": "0.10.0"
+    "@fragments-sdk/cli": "0.10.1"
   },
   "files": [
     "src",

package/src/components/Accordion/Accordion.test.tsx

@@ -148,6 +148,22 @@ describe('Accordion', () => {
     expect(trigger).toHaveAttribute('aria-expanded', 'false');
   });
 
+  it('emits undefined when a single collapsible accordion fully closes', async () => {
+    const user = userEvent.setup();
+    const onValueChange = vi.fn();
+
+    renderAccordion({
+      type: 'single',
+      collapsible: true,
+      defaultValue: 'one',
+      onValueChange,
+    });
+
+    await user.click(screen.getByRole('button', { name: /item one/i }));
+
+    expect(onValueChange).toHaveBeenCalledWith(undefined);
+  });
+
   it('non-collapsible single type prevents full collapse', async () => {
     const user = userEvent.setup();
     renderAccordion({ type: 'single', collapsible: false, defaultValue: 'one' });
@@ -160,6 +176,23 @@ describe('Accordion', () => {
     expect(trigger).toHaveAttribute('aria-expanded', 'true');
   });
 
+  it('forwards html props to trigger and content', async () => {
+    const user = userEvent.setup();
+    render(
+      <Accordion>
+        <Accordion.Item value="one">
+          <Accordion.Trigger data-testid="trigger" data-track="accordion-trigger">Item One</Accordion.Trigger>
+          <Accordion.Content data-testid="content" aria-label="Accordion panel">Content One</Accordion.Content>
+        </Accordion.Item>
+      </Accordion>
+    );
+
+    await user.click(screen.getByTestId('trigger'));
+
+    expect(screen.getByTestId('trigger')).toHaveAttribute('data-track', 'accordion-trigger');
+    expect(screen.getByTestId('content')).toHaveAttribute('aria-label', 'Accordion panel');
+  });
+
   it('has no accessibility violations', async () => {
     const { container } = renderAccordion({ defaultValue: 'one' });
     await expectNoA11yViolations(container, {

package/src/components/Accordion/index.tsx

@@ -19,7 +19,7 @@ export interface AccordionProps extends Omit<React.HTMLAttributes<HTMLDivElement
   /** Default value for uncontrolled usage */
   defaultValue?: AccordionValue;
   /** Callback when value changes */
-  onValueChange?: (value: AccordionValue) => void;
+  onValueChange?: (value: AccordionValue | undefined) => void;
   /** Whether items can be fully collapsed (only for type="single") */
   collapsible?: boolean;
   /**
@@ -137,7 +137,7 @@ function AccordionRoot({
     }
 
     if (onValueChange) {
-      onValueChange(type === 'single' ? (newItems[0] ?? '') : newItems);
+      onValueChange(type === 'single' ? newItems[0] : newItems);
     }
   }, [type, currentOpenItems, collapsible, controlledOpenItems, onValueChange]);
 
@@ -186,11 +186,15 @@ function AccordionItem({
 function AccordionTrigger({
   children,
   className,
+  onClick,
+  ...htmlProps
 }: AccordionTriggerProps) {
   const { toggle, headingLevel } = useAccordionContext();
   const { value, isOpen, disabled, triggerId, contentId } = useAccordionItemContext();
 
-  const handleClick = () => {
+  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+    onClick?.(event);
+    if (event.defaultPrevented) return;
     if (!disabled) {
       toggle(value);
     }
@@ -204,6 +208,7 @@ function AccordionTrigger({
   return (
     <HeadingTag className={styles.heading}>
       <BaseCollapsible.Trigger
+        {...htmlProps}
         id={triggerId}
         className={classes}
         onClick={handleClick}
@@ -237,6 +242,7 @@ function AccordionTrigger({
 function AccordionContent({
   children,
   className,
+  ...htmlProps
 }: AccordionContentProps) {
   const { isOpen, triggerId, contentId } = useAccordionItemContext();
 
@@ -244,6 +250,7 @@ function AccordionContent({
 
   return (
     <BaseCollapsible.Panel
+      {...htmlProps}
       id={contentId}
       className={classes}
       data-state={isOpen ? 'open' : 'closed'}

package/src/components/Collapsible/Collapsible.test.tsx

@@ -96,6 +96,47 @@ describe('Collapsible', () => {
     expect(screen.queryByText('Collapsible content here')).not.toBeInTheDocument();
   });
 
+  it('composes child handlers when trigger uses asChild', async () => {
+    const user = userEvent.setup();
+    const childClick = vi.fn();
+    const childKeyDown = vi.fn();
+
+    render(
+      <Collapsible>
+        <Collapsible.Trigger asChild>
+          <button onClick={childClick} onKeyDown={childKeyDown}>Toggle</button>
+        </Collapsible.Trigger>
+        <Collapsible.Content>Collapsible content here</Collapsible.Content>
+      </Collapsible>
+    );
+
+    const trigger = screen.getByRole('button', { name: /toggle/i });
+    await user.click(trigger);
+    expect(childClick).toHaveBeenCalled();
+    expect(screen.getByText('Collapsible content here')).toBeInTheDocument();
+
+    await user.keyboard('{Enter}');
+    expect(childKeyDown).toHaveBeenCalled();
+  });
+
+  it('forwards html props to root, trigger, and content', async () => {
+    const user = userEvent.setup();
+    render(
+      <Collapsible data-testid="root" data-track="collapsible-root">
+        <Collapsible.Trigger data-testid="trigger" aria-label="Toggle section">Toggle</Collapsible.Trigger>
+        <Collapsible.Content data-testid="content" data-panel="details">
+          Collapsible content here
+        </Collapsible.Content>
+      </Collapsible>
+    );
+
+    await user.click(screen.getByTestId('trigger'));
+
+    expect(screen.getByTestId('root')).toHaveAttribute('data-track', 'collapsible-root');
+    expect(screen.getByTestId('trigger')).toHaveAttribute('aria-label', 'Toggle section');
+    expect(screen.getByTestId('content')).toHaveAttribute('data-panel', 'details');
+  });
+
   it('has no accessibility violations', async () => {
     const { container } = renderCollapsible({ defaultOpen: true });
     await expectNoA11yViolations(container);

package/src/components/Collapsible/index.tsx

@@ -3,6 +3,17 @@
 import React, { useState, useCallback, useId, createContext, useContext } from 'react';
 import styles from './Collapsible.module.scss';
 
+function composeEventHandlers<E extends { defaultPrevented: boolean }>(
+  userHandler: ((event: E) => void) | undefined,
+  internalHandler: (event: E) => void
+) {
+  return (event: E) => {
+    userHandler?.(event);
+    if (event.defaultPrevented) return;
+    internalHandler(event);
+  };
+}
+
 // Context for sharing state between compound components
 interface CollapsibleContextValue {
   isOpen: boolean;
@@ -23,7 +34,7 @@ function useCollapsibleContext() {
 }
 
 // Root component
-export interface CollapsibleRootProps {
+export interface CollapsibleRootProps extends React.HTMLAttributes<HTMLDivElement> {
   children: React.ReactNode;
   /** Whether the collapsible is initially open */
   defaultOpen?: boolean;
@@ -33,8 +44,6 @@ export interface CollapsibleRootProps {
   onOpenChange?: (open: boolean) => void;
   /** Whether the collapsible is disabled */
   disabled?: boolean;
-  /** Additional class name */
-  className?: string;
 }
 
 function CollapsibleRoot({
@@ -44,6 +53,7 @@ function CollapsibleRoot({
   onOpenChange,
   disabled = false,
   className,
+  ...htmlProps
 }: CollapsibleRootProps) {
   const [internalOpen, setInternalOpen] = useState(defaultOpen);
   const isControlled = controlledOpen !== undefined;
@@ -78,6 +88,7 @@ function CollapsibleRoot({
   return (
     <CollapsibleContext.Provider value={contextValue}>
       <div
+        {...htmlProps}
         className={`${styles.root} ${isOpen ? styles.open : ''} ${disabled ? styles.disabled : ''} ${className || ''}`}
         data-state={isOpen ? 'open' : 'closed'}
         data-disabled={disabled || undefined}
@@ -89,10 +100,8 @@ function CollapsibleRoot({
 }
 
 // Trigger component
-export interface CollapsibleTriggerProps {
+export interface CollapsibleTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   children: React.ReactNode;
-  /** Additional class name */
-  className?: string;
   /** Show chevron indicator */
   showChevron?: boolean;
   /** Chevron position */
@@ -107,6 +116,9 @@ function CollapsibleTrigger({
   showChevron = true,
   chevronPosition = 'end',
   asChild = false,
+  onClick,
+  onKeyDown,
+  ...htmlProps
 }: CollapsibleTriggerProps) {
   const { isOpen, toggle, contentId, triggerId, disabled } = useCollapsibleContext();
 
@@ -117,6 +129,10 @@ function CollapsibleTrigger({
     }
   };
 
+  const handleClick = () => {
+    toggle();
+  };
+
   const chevronIcon = showChevron && (
     <svg
       className={`${styles.chevron} ${isOpen ? styles.chevronOpen : ''}`}
@@ -137,26 +153,47 @@ function CollapsibleTrigger({
   );
 
   if (asChild && React.isValidElement(children)) {
+    const childProps = children.props as {
+      className?: string;
+      onClick?: (event: React.MouseEvent<HTMLElement>) => void;
+      onKeyDown?: (event: React.KeyboardEvent<HTMLElement>) => void;
+    };
+
     return React.cloneElement(children as React.ReactElement<any>, {
-      id: triggerId,
+      ...htmlProps,
+      id: (htmlProps.id as string | undefined) ?? triggerId,
       'aria-expanded': isOpen,
       'aria-controls': contentId,
       'aria-disabled': disabled || undefined,
-      onClick: toggle,
-      onKeyDown: handleKeyDown,
+      onClick: composeEventHandlers(
+        (event: React.MouseEvent<HTMLElement>) => {
+          childProps.onClick?.(event);
+          onClick?.(event as unknown as React.MouseEvent<HTMLButtonElement>);
+        },
+        () => handleClick()
+      ),
+      onKeyDown: composeEventHandlers(
+        (event: React.KeyboardEvent<HTMLElement>) => {
+          childProps.onKeyDown?.(event);
+          onKeyDown?.(event as unknown as React.KeyboardEvent<HTMLButtonElement>);
+        },
+        (event) => handleKeyDown(event as unknown as React.KeyboardEvent)
+      ),
+      className: [className, childProps.className].filter(Boolean).join(' '),
     });
   }
 
   return (
     <button
+      {...htmlProps}
       type="button"
-      id={triggerId}
+      id={(htmlProps.id as string | undefined) ?? triggerId}
       className={`${styles.trigger} ${className || ''}`}
       aria-expanded={isOpen}
       aria-controls={contentId}
       aria-disabled={disabled || undefined}
-      onClick={toggle}
-      onKeyDown={handleKeyDown}
+      onClick={composeEventHandlers(onClick, handleClick)}
+      onKeyDown={composeEventHandlers(onKeyDown, handleKeyDown)}
       disabled={disabled}
     >
       {chevronPosition === 'start' && chevronIcon}
@@ -167,10 +204,8 @@ function CollapsibleTrigger({
 }
 
 // Content component
-export interface CollapsibleContentProps {
+export interface CollapsibleContentProps extends React.HTMLAttributes<HTMLDivElement> {
   children: React.ReactNode;
-  /** Additional class name */
-  className?: string;
   /** Force mount content even when closed (useful for animations) */
   forceMount?: boolean;
 }
@@ -179,6 +214,7 @@ function CollapsibleContent({
   children,
   className,
   forceMount = false,
+  ...htmlProps
 }: CollapsibleContentProps) {
   const { isOpen, contentId, triggerId } = useCollapsibleContext();
 
@@ -189,7 +225,8 @@ function CollapsibleContent({
 
   return (
     <div
-      id={contentId}
+      {...htmlProps}
+      id={(htmlProps.id as string | undefined) ?? contentId}
       role="region"
       aria-labelledby={triggerId}
       className={`${styles.content} ${isOpen ? styles.contentOpen : styles.contentClosed} ${className || ''}`}

package/src/components/Combobox/Combobox.test.tsx

@@ -79,6 +79,26 @@ describe('Combobox', () => {
     expect(await screen.findByText('Frameworks')).toBeInTheDocument();
   });
 
+  it('forwards html props to item and labels', async () => {
+    const user = userEvent.setup();
+    render(
+      <Combobox placeholder="Search">
+        <Combobox.Input />
+        <Combobox.Content>
+          <Combobox.Group id="framework-group">
+            <Combobox.GroupLabel id="framework-group-label">Frameworks</Combobox.GroupLabel>
+            <Combobox.Item id="react-option" value="react">React</Combobox.Item>
+          </Combobox.Group>
+        </Combobox.Content>
+      </Combobox>
+    );
+
+    await user.click(screen.getByRole('combobox'));
+    expect(await screen.findByRole('option', { name: 'React' })).toHaveAttribute('id', 'react-option');
+    expect(screen.getByText('Frameworks')).toHaveAttribute('id', 'framework-group-label');
+    expect(screen.getByText('Frameworks').closest('#framework-group')).toBeInTheDocument();
+  });
+
   it('supports multiple selection mode', async () => {
     const user = userEvent.setup();
     const onChange = vi.fn();
@@ -90,6 +110,22 @@ describe('Combobox', () => {
     expect(onChange).toHaveBeenCalled();
   });
 
+  it('uses text content for non-string item labels', async () => {
+    render(
+      <Combobox multiple value={['react']} defaultOpen>
+        <Combobox.Input />
+        <Combobox.Content>
+          <Combobox.Item value="react">
+            <span>React</span>
+          </Combobox.Item>
+        </Combobox.Content>
+      </Combobox>
+    );
+
+    expect((await screen.findAllByText('React')).length).toBeGreaterThan(0);
+    expect(screen.queryByText('[object Object]')).not.toBeInTheDocument();
+  });
+
   it('has no accessibility violations', async () => {
     const { container } = render(
       <Combobox placeholder="Search...">
@@ -199,4 +235,23 @@ describe('Combobox', () => {
       expect(screen.queryByRole('option')).not.toBeInTheDocument();
     });
   });
+
+  it('updates chip label when selected option is removed', async () => {
+    const renderDemo = (showReact: boolean) => (
+      <Combobox multiple value={['react']} defaultOpen>
+        <Combobox.Input />
+        <Combobox.Content>
+          {showReact && <Combobox.Item value="react">React</Combobox.Item>}
+          <Combobox.Item value="vue">Vue</Combobox.Item>
+        </Combobox.Content>
+      </Combobox>
+    );
+
+    const { rerender } = render(renderDemo(true));
+
+    await screen.findAllByText('React');
+    rerender(renderDemo(false));
+
+    expect(await screen.findByText('react')).toBeInTheDocument();
+  });
 });

package/src/components/Combobox/index.tsx

@@ -46,26 +46,22 @@ export interface ComboboxContentProps extends React.HTMLAttributes<HTMLDivElemen
   maxVisibleItems?: number;
 }
 
-export interface ComboboxItemProps {
+export interface ComboboxItemProps extends Omit<React.HTMLAttributes<HTMLElement>, 'children'> {
   children: React.ReactNode;
   value: string;
   disabled?: boolean;
-  className?: string;
 }
 
-export interface ComboboxEmptyProps {
+export interface ComboboxEmptyProps extends React.HTMLAttributes<HTMLElement> {
   children: React.ReactNode;
-  className?: string;
 }
 
-export interface ComboboxGroupProps {
+export interface ComboboxGroupProps extends React.HTMLAttributes<HTMLElement> {
   children: React.ReactNode;
-  className?: string;
 }
 
-export interface ComboboxGroupLabelProps {
+export interface ComboboxGroupLabelProps extends React.HTMLAttributes<HTMLElement> {
   children: React.ReactNode;
-  className?: string;
 }
 
 // ============================================
@@ -150,6 +146,15 @@ const ComboboxContext = React.createContext<ComboboxContextValue>({
   incrementItemsVersion: () => {},
 });
 
+function getNodeText(node: React.ReactNode): string {
+  if (node == null || typeof node === 'boolean') return '';
+  if (typeof node === 'string' || typeof node === 'number') return String(node);
+  if (Array.isArray(node)) return node.map(getNodeText).join('');
+  if (React.isValidElement(node))
+    return getNodeText((node.props as { children?: React.ReactNode }).children);
+  return '';
+}
+
 // ============================================
 // Components
 // ============================================
@@ -337,24 +342,25 @@ function ComboboxContent({
   );
 }
 
-function ComboboxItem({ children, value, disabled, className }: ComboboxItemProps) {
+function ComboboxItem({ children, value, disabled, className, ...htmlProps }: ComboboxItemProps) {
   const { itemsRef, incrementItemsVersion } = React.useContext(ComboboxContext);
   const classes = [styles.item, className].filter(Boolean).join(' ');
 
   // Register this item's label in the registry so the input can display it
-  const label = typeof children === 'string' ? children : String(children);
+  const label = React.useMemo(() => getNodeText(children).trim() || value, [children, value]);
   React.useEffect(() => {
     const items = itemsRef.current;
     items.set(value, label);
     incrementItemsVersion();
     return () => {
       items.delete(value);
+      incrementItemsVersion();
     };
     // itemsRef is a stable ref, incrementItemsVersion is a stable callback
   }, [itemsRef, incrementItemsVersion, value, label]);
 
   return (
-    <BaseCombobox.Item value={value} disabled={disabled} className={classes}>
+    <BaseCombobox.Item {...htmlProps} value={value} disabled={disabled} className={classes}>
       {children}
       <BaseCombobox.ItemIndicator className={styles.itemIndicator}>
         <CheckIcon />
@@ -363,19 +369,19 @@ function ComboboxItem({ children, value, disabled, className }: ComboboxItemProp
   );
 }
 
-function ComboboxEmpty({ children, className }: ComboboxEmptyProps) {
+function ComboboxEmpty({ children, className, ...htmlProps }: ComboboxEmptyProps) {
   const classes = [styles.empty, className].filter(Boolean).join(' ');
-  return <BaseCombobox.Empty className={classes}>{children}</BaseCombobox.Empty>;
+  return <BaseCombobox.Empty {...htmlProps} className={classes}>{children}</BaseCombobox.Empty>;
 }
 
-function ComboboxGroup({ children, className }: ComboboxGroupProps) {
+function ComboboxGroup({ children, className, ...htmlProps }: ComboboxGroupProps) {
   const classes = [styles.group, className].filter(Boolean).join(' ');
-  return <BaseCombobox.Group className={classes}>{children}</BaseCombobox.Group>;
+  return <BaseCombobox.Group {...htmlProps} className={classes}>{children}</BaseCombobox.Group>;
 }
 
-function ComboboxGroupLabel({ children, className }: ComboboxGroupLabelProps) {
+function ComboboxGroupLabel({ children, className, ...htmlProps }: ComboboxGroupLabelProps) {
   const classes = [styles.groupLabel, className].filter(Boolean).join(' ');
-  return <BaseCombobox.GroupLabel className={classes}>{children}</BaseCombobox.GroupLabel>;
+  return <BaseCombobox.GroupLabel {...htmlProps} className={classes}>{children}</BaseCombobox.GroupLabel>;
 }
 
 // ============================================

package/src/components/Command/Command.test.tsx

@@ -355,6 +355,99 @@ describe('Command', () => {
     });
   });
 
+  it('uses unique list ids for multiple command instances', () => {
+    render(
+      <>
+        <Command>
+          <Command.Input placeholder="First search" />
+          <Command.List>
+            <Command.Item onItemSelect={() => {}}>One</Command.Item>
+          </Command.List>
+        </Command>
+        <Command>
+          <Command.Input placeholder="Second search" />
+          <Command.List>
+            <Command.Item onItemSelect={() => {}}>Two</Command.Item>
+          </Command.List>
+        </Command>
+      </>
+    );
+
+    const inputs = [
+      screen.getByPlaceholderText('First search'),
+      screen.getByPlaceholderText('Second search'),
+    ];
+    const listIds = inputs.map((input) => input.getAttribute('aria-controls'));
+
+    expect(listIds[0]).toBeTruthy();
+    expect(listIds[1]).toBeTruthy();
+    expect(listIds[0]).not.toBe(listIds[1]);
+    expect(document.getElementById(listIds[0]!)).toBeInTheDocument();
+    expect(document.getElementById(listIds[1]!)).toBeInTheDocument();
+  });
+
+  it('filters rich-label items using extracted text content', async () => {
+    const user = userEvent.setup();
+    render(
+      <Command>
+        <Command.Input placeholder="Search..." />
+        <Command.List>
+          <Command.Item onItemSelect={() => {}}>
+            <span>Open</span> File
+          </Command.Item>
+          <Command.Item onItemSelect={() => {}}>Save</Command.Item>
+        </Command.List>
+      </Command>
+    );
+
+    await user.type(screen.getByPlaceholderText('Search...'), 'open');
+
+    await waitFor(() => {
+      expect(screen.getByText('Save')).not.toBeVisible();
+      expect(screen.getByText('Open')).toBeVisible();
+    });
+  });
+
+  it('composes item and group html props without dropping handlers/styles', async () => {
+    const user = userEvent.setup();
+    const itemClick = vi.fn();
+    const itemKeyDown = vi.fn();
+    const itemMouseEnter = vi.fn();
+
+    render(
+      <Command>
+        <Command.Input placeholder="Search..." />
+        <Command.List>
+          <Command.Group heading="Files" data-testid="group" style={{ opacity: 0.5 }}>
+            <Command.Item
+              onItemSelect={() => {}}
+              data-testid="item"
+              onClick={itemClick}
+              onKeyDown={itemKeyDown}
+              onMouseEnter={itemMouseEnter}
+              tabIndex={0}
+              style={{ color: 'rgb(255, 0, 0)' }}
+            >
+              Open File
+            </Command.Item>
+          </Command.Group>
+        </Command.List>
+      </Command>
+    );
+
+    const item = screen.getByTestId('item');
+    await user.hover(item);
+    await user.click(item);
+    item.focus();
+    await user.keyboard('{Enter}');
+
+    expect(itemMouseEnter).toHaveBeenCalled();
+    expect(itemClick).toHaveBeenCalled();
+    expect(itemKeyDown).toHaveBeenCalled();
+    expect(item).toHaveStyle({ color: 'rgb(255, 0, 0)' });
+    expect(screen.getByTestId('group')).toHaveStyle({ opacity: '0.5' });
+  });
+
   it('has no accessibility violations', async () => {
     const { container } = renderCommand();