@fragments-sdk/ui 0.7.4 → 0.8.0

package/src/components/Sidebar/Sidebar.test.tsx

@@ -0,0 +1,114 @@
+import { describe, it, expect, vi, beforeAll } from 'vitest';
+import { render, screen, expectNoA11yViolations } from '../../test/utils';
+import { Sidebar } from './index';
+
+// Mock matchMedia for jsdom
+beforeAll(() => {
+  Object.defineProperty(window, 'matchMedia', {
+    writable: true,
+    value: vi.fn().mockImplementation((query: string) => ({
+      matches: false,
+      media: query,
+      onchange: null,
+      addListener: vi.fn(),
+      removeListener: vi.fn(),
+      addEventListener: vi.fn(),
+      removeEventListener: vi.fn(),
+      dispatchEvent: vi.fn(),
+    })),
+  });
+});
+
+function renderSidebar(props: Partial<React.ComponentProps<typeof Sidebar>> = {}) {
+  return render(
+    <Sidebar aria-label="Test sidebar" {...props}>
+      <Sidebar.Header>Header Content</Sidebar.Header>
+      <Sidebar.Nav aria-label="Main">
+        <Sidebar.Section label="Section One">
+          <Sidebar.Item icon={<span>I</span>}>Dashboard</Sidebar.Item>
+          <Sidebar.Item icon={<span>I</span>} active>Settings</Sidebar.Item>
+          <Sidebar.Item icon={<span>I</span>} disabled>Disabled</Sidebar.Item>
+        </Sidebar.Section>
+      </Sidebar.Nav>
+      <Sidebar.Footer>Footer Content</Sidebar.Footer>
+    </Sidebar>
+  );
+}
+
+describe('Sidebar', () => {
+  it('renders as an aside element', () => {
+    renderSidebar();
+    const aside = document.querySelector('aside');
+    expect(aside).toBeInTheDocument();
+  });
+
+  it('renders compound sub-components', () => {
+    renderSidebar();
+    expect(screen.getByText('Header Content')).toBeInTheDocument();
+    expect(screen.getByText('Dashboard')).toBeInTheDocument();
+    expect(screen.getByText('Settings')).toBeInTheDocument();
+    expect(screen.getByText('Footer Content')).toBeInTheDocument();
+  });
+
+  it('renders nav landmark', () => {
+    renderSidebar();
+    expect(screen.getByRole('navigation', { name: /main/i })).toBeInTheDocument();
+  });
+
+  it('renders section with label', () => {
+    renderSidebar();
+    expect(screen.getByText('Section One')).toBeInTheDocument();
+  });
+
+  it('marks active item with aria-current="page"', () => {
+    renderSidebar();
+    const activeItem = screen.getByText('Settings').closest('[aria-current]');
+    expect(activeItem).toHaveAttribute('aria-current', 'page');
+  });
+
+  it('disables items with disabled prop', () => {
+    renderSidebar();
+    const disabledItem = screen.getByText('Disabled').closest('button');
+    expect(disabledItem).toHaveAttribute('tabindex', '-1');
+  });
+
+  it('supports data-state attribute', () => {
+    renderSidebar();
+    const aside = document.querySelector('aside');
+    expect(aside).toHaveAttribute('data-state');
+  });
+
+  it('uses icon collapse width when collapsed with icons', () => {
+    renderSidebar({ collapsed: true });
+    const aside = document.querySelector('aside');
+    expect(aside).toHaveStyle('--sidebar-effective-collapsed-width: 56px');
+    expect(aside).toHaveAttribute('data-icon-collapse', 'icons');
+  });
+
+  it('collapses fully when collapsed with no item icons and keeps toggle visible', () => {
+    render(
+      <Sidebar collapsed aria-label="Text-only sidebar">
+        <Sidebar.Header>
+          Header Content
+          <Sidebar.CollapseToggle />
+        </Sidebar.Header>
+        <Sidebar.Nav aria-label="Main">
+          <Sidebar.Section label="Section One">
+            <Sidebar.Item>Dashboard</Sidebar.Item>
+            <Sidebar.Item active>Settings</Sidebar.Item>
+          </Sidebar.Section>
+        </Sidebar.Nav>
+      </Sidebar>
+    );
+
+    const aside = document.querySelector('aside');
+    expect(aside).toHaveStyle('--sidebar-effective-collapsed-width: 0px');
+    expect(aside).toHaveAttribute('data-icon-collapse', 'none');
+    expect(screen.getByRole('button', { name: /expand sidebar/i })).toBeInTheDocument();
+  });
+
+  it('has no accessibility violations', async () => {
+    const { container } = renderSidebar();
+    await expectNoA11yViolations(container);
+  });
+});

package/src/components/Sidebar/index.tsx

@@ -212,7 +212,7 @@ function CloseIcon() {
   );
 }
 
-function CollapseLeftIcon() {
+function CollapsePanelIcon() {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
@@ -222,22 +222,7 @@ function CollapseLeftIcon() {
       fill="currentColor"
       aria-hidden="true"
     >
-      <path d="M141.66,181.66a8,8,0,0,1-11.32,0l-48-48a8,8,0,0,1,0-11.32l48-48a8,8,0,0,1,11.32,11.32L99.31,128l42.35,42.34A8,8,0,0,1,141.66,181.66Zm40-96L139.31,128l42.35,42.34a8,8,0,0,1-11.32,11.32l-48-48a8,8,0,0,1,0-11.32l48-48a8,8,0,0,1,11.32,11.32Z" />
-    </svg>
-  );
-}
-
-function CollapseRightIcon() {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="20"
-      height="20"
-      viewBox="0 0 256 256"
-      fill="currentColor"
-      aria-hidden="true"
-    >
-      <path d="M141.66,133.66l-48,48a8,8,0,0,1-11.32-11.32L124.69,128,82.34,85.66a8,8,0,0,1,11.32-11.32l48,48A8,8,0,0,1,141.66,133.66Zm40-11.32-48-48a8,8,0,0,0-11.32,11.32L164.69,128l-42.35,42.34a8,8,0,0,0,11.32,11.32l48-48A8,8,0,0,0,181.66,122.34Z" />
+      <path d="M216,40H40A16,16,0,0,0,24,56V200a16,16,0,0,0,16,16H216a16,16,0,0,0,16-16V56A16,16,0,0,0,216,40ZM40,56H80V200H40ZM216,200H96V56H216V200Z" />
     </svg>
   );
 }
@@ -271,6 +256,7 @@ interface SidebarContextValue {
   width: string;
   collapsedWidth: string;
   collapsible: SidebarCollapsible;
+  hasIcons: boolean;
   toggleSidebar: () => void;
   sidebarId: string;
 }
@@ -293,8 +279,9 @@ function useSidebar() {
       isMobile: false,
       position: 'left' as const,
       width: '240px',
-      collapsedWidth: '64px',
+      collapsedWidth: '56px',
       collapsible: 'icon' as SidebarCollapsible,
+      hasIcons: true,
       toggleSidebar: () => {},
       sidebarId: 'sidebar',
       state: 'expanded' as 'expanded' | 'collapsed' | 'open' | 'closed',
@@ -359,6 +346,32 @@ function useControllableState<T>(
   return [value, setValue];
 }
 
+function hasSidebarItemIcons(children: React.ReactNode): boolean {
+  let found = false;
+
+  const visit = (nodes: React.ReactNode) => {
+    React.Children.forEach(nodes, child => {
+      if (found || !React.isValidElement(child)) return;
+
+      if (child.type === SidebarItem) {
+        const props = child.props as SidebarItemProps;
+        if (props.icon) {
+          found = true;
+          return;
+        }
+      }
+
+      const childProps = child.props as { children?: React.ReactNode };
+      if (childProps?.children) {
+        visit(childProps.children);
+      }
+    });
+  };
+
+  visit(children);
+  return found;
+}
+
 // ============================================
 // Components
 // ============================================
@@ -376,7 +389,7 @@ function SidebarProvider({
   defaultOpen = false,
   onOpenChange,
   width = '240px',
-  collapsedWidth = '64px',
+  collapsedWidth = '56px',
   position = 'left',
   collapsible = 'icon',
   enableKeyboardShortcut = true,
@@ -459,6 +472,7 @@ function SidebarProvider({
     width,
     collapsedWidth,
     collapsible,
+    hasIcons: true,
     toggleSidebar,
     sidebarId,
   };
@@ -479,7 +493,7 @@ function SidebarRoot({
   defaultOpen = false,
   onOpenChange,
   width = '240px',
-  collapsedWidth = '64px',
+  collapsedWidth = '56px',
   position = 'left',
   collapsible = 'icon',
   className,
@@ -512,6 +526,10 @@ function SidebarRoot({
   const resolvedWidth = existingContext ? existingContext.width : width;
   const resolvedCollapsedWidth = existingContext ? existingContext.collapsedWidth : collapsedWidth;
   const resolvedCollapsible = existingContext ? existingContext.collapsible : collapsible;
+  const hasIcons = React.useMemo(() => hasSidebarItemIcons(children), [children]);
+  const shouldCollapseToZero = !isMobile && resolvedCollapsible === 'icon' && collapsed && !hasIcons;
+  const isOffcanvasCollapsed = !isMobile && resolvedCollapsible === 'offcanvas' && collapsed;
+  const effectiveCollapsedWidth = (shouldCollapseToZero || isOffcanvasCollapsed) ? '0px' : resolvedCollapsedWidth;
   const sidebarId = React.useId();
   const resolvedSidebarId = existingContext ? existingContext.sidebarId : sidebarId;
   const sidebarRef = React.useRef<HTMLElement>(null);
@@ -558,28 +576,32 @@ function SidebarRoot({
     };
   }, [existingContext, isMobile, open]);
 
-  const contextValue: SidebarContextValue = existingContext || {
-    collapsed,
-    setCollapsed,
-    open,
-    setOpen,
-    isMobile,
-    position: resolvedPosition,
-    width: resolvedWidth,
-    collapsedWidth: resolvedCollapsedWidth,
-    collapsible: resolvedCollapsible,
-    toggleSidebar,
-    sidebarId: resolvedSidebarId,
+  const contextValue: SidebarContextValue = {
+    ...(existingContext || {
+      collapsed,
+      setCollapsed,
+      open,
+      setOpen,
+      isMobile,
+      position: resolvedPosition,
+      width: resolvedWidth,
+      collapsedWidth: resolvedCollapsedWidth,
+      collapsible: resolvedCollapsible,
+      hasIcons,
+      toggleSidebar,
+      sidebarId: resolvedSidebarId,
+    }),
+    hasIcons,
   };
 
   const isCollapsedForStyle = resolvedCollapsible === 'icon' && collapsed;
-  const isOffcanvas = resolvedCollapsible === 'offcanvas' && collapsed;
 
   const classes = [
     styles.root,
     isMobile && styles.mobile,
     !isMobile && isCollapsedForStyle && styles.collapsed,
-    !isMobile && isOffcanvas && styles.offcanvas,
+    !isMobile && isCollapsedForStyle && shouldCollapseToZero && styles.collapsedNoIcons,
+    isOffcanvasCollapsed && styles.offcanvasCollapsed,
     resolvedPosition === 'right' && styles.positionRight,
     className,
   ].filter(Boolean).join(' ');
@@ -587,6 +609,7 @@ function SidebarRoot({
   const style: React.CSSProperties = {
     '--sidebar-width': resolvedWidth,
     '--sidebar-collapsed-width': resolvedCollapsedWidth,
+    '--sidebar-effective-collapsed-width': effectiveCollapsedWidth,
     ...styleProp,
   } as React.CSSProperties;
 
@@ -604,16 +627,12 @@ function SidebarRoot({
       data-state={isMobile ? (open ? 'open' : 'closed') : (collapsed ? 'collapsed' : 'expanded')}
       data-position={resolvedPosition}
       data-collapsible={resolvedCollapsible}
+      data-icon-collapse={resolvedCollapsible === 'icon' ? (hasIcons ? 'icons' : 'none') : undefined}
     >
       {children}
     </aside>
   );
 
-  // If already inside a provider, don't wrap with another provider
-  if (existingContext) {
-    return content;
-  }
-
   return (
     <SidebarContext.Provider value={contextValue}>
       {content}
@@ -951,19 +970,24 @@ function SidebarOverlay({ className }: SidebarOverlayProps) {
 }
 
 function SidebarCollapseToggle({ 'aria-label': ariaLabel, className }: SidebarCollapseToggleProps) {
-  const { collapsed, setCollapsed, isMobile, position, collapsible } = useSidebarContext();
+  const { collapsed, setCollapsed, isMobile, collapsible, hasIcons } = useSidebarContext();
 
   // Don't show on mobile or when collapsing is disabled
   if (isMobile || collapsible === 'none') {
     return null;
   }
 
-  const classes = [styles.collapseToggle, className].filter(Boolean).join(' ');
+  const shouldFloat = collapsed && (
+    (collapsible === 'icon' && !hasIcons) ||
+    collapsible === 'offcanvas'
+  );
+  const classes = [
+    styles.collapseToggle,
+    shouldFloat && styles.collapseToggleFloating,
+    className,
+  ].filter(Boolean).join(' ');
   const label = ariaLabel || (collapsed ? 'Expand sidebar' : 'Collapse sidebar');
 
-  // Determine which icon to show based on position and state
-  const showExpandIcon = position === 'left' ? collapsed : !collapsed;
-
   return (
     <button
       type="button"
@@ -971,7 +995,7 @@ function SidebarCollapseToggle({ 'aria-label': ariaLabel, className }: SidebarCo
       onClick={() => setCollapsed(!collapsed)}
       aria-label={label}
     >
-      {showExpandIcon ? <CollapseRightIcon /> : <CollapseLeftIcon />}
+      <CollapsePanelIcon />
     </button>
   );
 }

package/src/components/Skeleton/Skeleton.fragment.tsx

@@ -69,6 +69,11 @@ export default defineSegment({
       values: ['none', 'sm', 'md', 'lg', 'full'],
       description: 'Border radius override',
     },
+    static: {
+      type: 'boolean',
+      default: false,
+      description: 'Disable skeleton animation',
+    },
   },
 
   relations: [

package/src/components/Skeleton/Skeleton.test.tsx

@@ -0,0 +1,56 @@
+import { describe, it, expect } from 'vitest';
+import { render, expectNoA11yViolations } from '../../test/utils';
+import { Skeleton } from './index';
+
+describe('Skeleton', () => {
+  it('renders with aria-hidden="true"', () => {
+    const { container } = render(<Skeleton />);
+    expect(container.firstElementChild).toHaveAttribute('aria-hidden', 'true');
+  });
+
+  it('applies variant classes', () => {
+    const { container: c1 } = render(<Skeleton variant="text" />);
+    expect(c1.firstElementChild).toHaveClass('text');
+
+    const { container: c2 } = render(<Skeleton variant="avatar" />);
+    expect(c2.firstElementChild).toHaveClass('avatar');
+
+    const { container: c3 } = render(<Skeleton variant="button" />);
+    expect(c3.firstElementChild).toHaveClass('button');
+  });
+
+  it('applies static class when animation is disabled', () => {
+    const { container } = render(<Skeleton static />);
+    expect(container.firstElementChild).toHaveClass('static');
+  });
+
+  it('applies custom dimensions via style', () => {
+    const { container } = render(<Skeleton width={200} height={100} />);
+    const el = container.firstElementChild as HTMLElement;
+    expect(el.style.width).toBe('200px');
+    expect(el.style.height).toBe('100px');
+  });
+
+  it('applies fill class', () => {
+    const { container } = render(<Skeleton fill />);
+    expect(container.firstElementChild).toHaveClass('fill');
+  });
+
+  it('renders Skeleton.Text with multiple lines', () => {
+    const { container } = render(<Skeleton.Text lines={4} />);
+    expect(container.firstElementChild).toHaveAttribute('aria-hidden', 'true');
+    const lines = container.querySelectorAll('.textLine');
+    expect(lines).toHaveLength(4);
+  });
+
+  it('has no accessibility violations', async () => {
+    const { container } = render(
+      <div>
+        <Skeleton variant="text" />
+        <Skeleton variant="avatar" />
+        <Skeleton.Text lines={3} />
+      </div>
+    );
+    await expectNoA11yViolations(container);
+  });
+});

package/src/components/Slider/Slider.test.tsx

@@ -0,0 +1,51 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen, expectNoA11yViolations } from '../../test/utils';
+import { Slider } from './index';
+
+describe('Slider', () => {
+  it('renders a slider role', () => {
+    render(<Slider aria-label="Volume" />);
+    expect(screen.getByRole('slider')).toBeInTheDocument();
+  });
+
+  it('sets aria-valuemin and aria-valuemax from min/max props', () => {
+    render(<Slider aria-label="Volume" min={10} max={90} defaultValue={50} />);
+    const slider = screen.getByRole('slider');
+    // Base UI Slider sets min/max on the group or thumb — check the output element
+    expect(slider).toBeInTheDocument();
+    // The slider group should be present with the right configuration
+    const output = slider.closest('[role="group"]') || slider;
+    expect(output).toBeInTheDocument();
+  });
+
+  it('sets aria-valuenow from value prop', () => {
+    render(<Slider aria-label="Volume" value={42} onChange={() => {}} />);
+    expect(screen.getByRole('slider')).toHaveAttribute('aria-valuenow', '42');
+  });
+
+  it('renders a label via Field.Label', () => {
+    render(<Slider label="Volume" />);
+    expect(screen.getByText('Volume')).toBeInTheDocument();
+  });
+
+  it('disables the slider', () => {
+    render(<Slider aria-label="Volume" disabled />);
+    expect(screen.getByRole('slider')).toBeDisabled();
+  });
+
+  it('respects step attribute', () => {
+    render(<Slider aria-label="Volume" step={5} defaultValue={0} />);
+    // step is part of the slider control — no direct ARIA but functional
+    expect(screen.getByRole('slider')).toBeInTheDocument();
+  });
+
+  it('displays the value when showValue is true', () => {
+    render(<Slider label="Volume" value={75} showValue onChange={() => {}} />);
+    expect(screen.getByText('75')).toBeInTheDocument();
+  });
+
+  it('has no accessibility violations', async () => {
+    const { container } = render(<Slider label="Accessible slider" defaultValue={50} />);
+    await expectNoA11yViolations(container);
+  });
+});

package/src/components/Slider/index.tsx

@@ -24,7 +24,7 @@ export interface SliderProps extends Omit<React.HTMLAttributes<HTMLDivElement>,
   'aria-describedby'?: string;
 }
 
-export const Slider = React.forwardRef<HTMLDivElement, SliderProps>(
+const SliderRoot = React.forwardRef<HTMLDivElement, SliderProps>(
   function Slider(
     {
       label,
@@ -96,3 +96,7 @@ export const Slider = React.forwardRef<HTMLDivElement, SliderProps>(
     );
   }
 );
+
+export const Slider = Object.assign(SliderRoot, {
+  Root: SliderRoot,
+});

package/src/components/Stack/Stack.fragment.tsx

@@ -48,12 +48,12 @@ export default defineSegment({
       required: true,
     },
     direction: {
-      type: 'string | object',
+      type: 'union',
       description: 'Stack direction: "row", "column", or responsive object',
       default: 'column',
     },
     gap: {
-      type: 'string | object',
+      type: 'union',
       description: 'Spacing between items: "none", "xs", "sm", "md", "lg", "xl", or responsive object',
       default: 'md',
     },

package/src/components/Stack/Stack.test.tsx

@@ -0,0 +1,47 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen, expectNoA11yViolations } from '../../test/utils';
+import { Stack } from './index';
+
+describe('Stack', () => {
+  it('renders children in a div by default', () => {
+    render(<Stack><span>A</span><span>B</span></Stack>);
+    expect(screen.getByText('A')).toBeInTheDocument();
+    expect(screen.getByText('B')).toBeInTheDocument();
+  });
+
+  it('applies direction class', () => {
+    const { container } = render(<Stack direction="row"><span>A</span></Stack>);
+    expect(container.firstChild).toHaveClass('row');
+  });
+
+  it('applies gap class', () => {
+    const { container } = render(<Stack gap="lg"><span>A</span></Stack>);
+    expect(container.firstChild).toHaveClass('gap-lg');
+  });
+
+  it('applies alignment and justify classes', () => {
+    const { container } = render(
+      <Stack align="center" justify="between"><span>A</span></Stack>
+    );
+    const el = container.firstChild as HTMLElement;
+    expect(el).toHaveClass('align-center');
+    expect(el).toHaveClass('justify-between');
+  });
+
+  it('renders as a different element via "as" prop', () => {
+    render(<Stack as="nav"><span>Item</span></Stack>);
+    const nav = screen.getByText('Item').parentElement!;
+    expect(nav.tagName).toBe('NAV');
+  });
+
+  it('forwards ref', () => {
+    const ref = vi.fn();
+    render(<Stack ref={ref}><span>A</span></Stack>);
+    expect(ref).toHaveBeenCalled();
+  });
+
+  it('has no accessibility violations', async () => {
+    const { container } = render(<Stack><span>A</span><span>B</span></Stack>);
+    await expectNoA11yViolations(container);
+  });
+});

package/src/components/Stack/index.tsx

@@ -71,7 +71,7 @@ function isResponsiveGap(gap: StackProps['gap']): gap is ResponsiveGap {
   return typeof gap === 'object' && gap !== null;
 }
 
-export const Stack = React.forwardRef<HTMLElement, StackProps>(
+const StackRoot = React.forwardRef<HTMLElement, StackProps>(
   function Stack(
     {
       children,
@@ -180,3 +180,7 @@ function gapToSpace(gap: Gap): string {
   };
   return map[gap];
 }
+
+export const Stack = Object.assign(StackRoot, {
+  Root: StackRoot,
+});

package/src/components/Table/Table.fragment.tsx

@@ -86,16 +86,36 @@ export default defineSegment({
       description: 'Data rows to display',
       required: true,
     },
+    getRowId: {
+      type: 'function',
+      description: 'Unique key extractor for each row',
+    },
     sortable: {
       type: 'boolean',
       description: 'Enable column sorting',
       default: 'false',
     },
+    sorting: {
+      type: 'object',
+      description: 'Controlled sorting state',
+    },
+    onSortingChange: {
+      type: 'function',
+      description: 'Sorting change handler',
+    },
     selectable: {
       type: 'boolean',
       description: 'Enable row selection',
       default: 'false',
     },
+    rowSelection: {
+      type: 'object',
+      description: 'Controlled row selection state',
+    },
+    onRowSelectionChange: {
+      type: 'function',
+      description: 'Row selection change handler',
+    },
     onRowClick: {
       type: 'function',
       description: 'Handler for row clicks',
@@ -111,6 +131,15 @@ export default defineSegment({
       values: ['sm', 'md'],
       default: 'md',
     },
+    caption: {
+      type: 'string',
+      description: 'Visible caption for the table',
+    },
+    captionHidden: {
+      type: 'boolean',
+      default: 'false',
+      description: 'Hide caption visually but keep it for screen readers',
+    },
     striped: {
       type: 'boolean',
       description: 'Show alternating row backgrounds',