@furystack/shades-common-components 12.4.0 → 12.6.0

package/src/components/avatar.spec.tsx

@@ -1,6 +1,6 @@
 import { Injector } from '@furystack/inject'
-import { createComponent, initializeShadeRoot } from '@furystack/shades'
-import { sleepAsync, usingAsync } from '@furystack/utils'
+import { createComponent, flushUpdates, initializeShadeRoot } from '@furystack/shades'
+import { usingAsync } from '@furystack/utils'
 import { afterEach, beforeEach, describe, expect, it } from 'vitest'
 import { Avatar } from './avatar.js'
 
@@ -24,7 +24,7 @@ describe('Avatar component', () => {
         jsxElement: <Avatar avatarUrl={testUrl} />,
       })
 
-      await sleepAsync(50)
+      await flushUpdates()
 
       const avatar = document.querySelector('shade-avatar')
       expect(avatar).not.toBeNull()
@@ -46,7 +46,7 @@ describe('Avatar component', () => {
         jsxElement: <Avatar avatarUrl="invalid-url" />,
       })
 
-      await sleepAsync(50)
+      await flushUpdates()
 
       const avatar = document.querySelector('shade-avatar')
       expect(avatar).not.toBeNull()
@@ -58,7 +58,7 @@ describe('Avatar component', () => {
       const errorEvent = new Event('error')
       img?.dispatchEvent(errorEvent)
 
-      await sleepAsync(50)
+      await flushUpdates()
 
       // After error, img should be replaced with fallback div
       const fallbackImg = avatar?.querySelector('img')
@@ -81,7 +81,7 @@ describe('Avatar component', () => {
         jsxElement: <Avatar avatarUrl="invalid-url" fallback={customFallback} />,
       })
 
-      await sleepAsync(50)
+      await flushUpdates()
 
       const avatar = document.querySelector('shade-avatar')
       expect(avatar).not.toBeNull()
@@ -93,7 +93,7 @@ describe('Avatar component', () => {
       const errorEvent = new Event('error')
       img?.dispatchEvent(errorEvent)
 
-      await sleepAsync(50)
+      await flushUpdates()
 
       // After error, img should be replaced with fallback div
       const fallbackImg = avatar?.querySelector('img')
@@ -116,7 +116,7 @@ describe('Avatar component', () => {
         jsxElement: <Avatar avatarUrl="https://example.com/avatar.png" style={{ width: '64px', height: '64px' }} />,
       })
 
-      await sleepAsync(50)
+      await flushUpdates()
 
       const avatar = document.querySelector('shade-avatar') as HTMLElement
       expect(avatar).not.toBeNull()
@@ -135,7 +135,7 @@ describe('Avatar component', () => {
         jsxElement: <Avatar avatarUrl="https://example.com/avatar.png" className="custom-avatar" title="User Avatar" />,
       })
 
-      await sleepAsync(50)
+      await flushUpdates()
 
       const avatar = document.querySelector('shade-avatar') as HTMLElement
       expect(avatar).not.toBeNull()

package/src/components/breadcrumb.spec.tsx

@@ -1,7 +1,7 @@
 import { Injector } from '@furystack/inject'
 import { createComponent, flushUpdates, initializeShadeRoot, LocationService } from '@furystack/shades'
 import type { ExtractRouteParams, NestedRoute } from '@furystack/shades'
-import { sleepAsync, usingAsync } from '@furystack/utils'
+import { usingAsync } from '@furystack/utils'
 import { afterEach, beforeEach, describe, expect, expectTypeOf, it, vi } from 'vitest'
 import type { BreadcrumbItem, TypedBreadcrumbProps } from './breadcrumb.js'
 import { Breadcrumb, createBreadcrumb } from './breadcrumb.js'
@@ -247,7 +247,7 @@ describe('Breadcrumb', () => {
           ),
         })
 
-        await sleepAsync(50)
+        await flushUpdates()
 
         const breadcrumb = rootElement.querySelector('nav[is="shade-breadcrumb"]')
         expect(breadcrumb?.classList.contains('custom-breadcrumb')).toBe(true)

package/src/components/button-group.spec.tsx

@@ -1,6 +1,6 @@
 import { Injector } from '@furystack/inject'
-import { createComponent, initializeShadeRoot } from '@furystack/shades'
-import { sleepAsync, usingAsync } from '@furystack/utils'
+import { createComponent, flushUpdates, initializeShadeRoot } from '@furystack/shades'
+import { usingAsync } from '@furystack/utils'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import {
   ButtonGroup,
@@ -28,7 +28,7 @@ describe('ButtonGroup', () => {
       rootElement: root,
       jsxElement: <ButtonGroup {...props}>{children}</ButtonGroup>,
     })
-    await sleepAsync(50)
+    await flushUpdates()
     return {
       injector,
       group: root.querySelector('shade-button-group') as HTMLElement,
@@ -132,6 +132,78 @@ describe('ButtonGroup', () => {
   })
 })
 
+describe('ToggleButton', () => {
+  beforeEach(() => {
+    document.body.innerHTML = '<div id="root"></div>'
+  })
+
+  afterEach(() => {
+    document.body.innerHTML = ''
+  })
+
+  const renderToggleButton = async (props: Parameters<typeof ToggleButton>[0]) => {
+    const injector = new Injector()
+    const root = document.getElementById('root')!
+    initializeShadeRoot({
+      injector,
+      rootElement: root,
+      jsxElement: <ToggleButton {...props}>Label</ToggleButton>,
+    })
+    await flushUpdates()
+    return {
+      injector,
+      button: root.querySelector('button[is="shade-toggle-button"]') as HTMLButtonElement,
+      [Symbol.asyncDispose]: () => injector[Symbol.asyncDispose](),
+    }
+  }
+
+  describe('pressed', () => {
+    it('should not set data-selected when pressed is not specified', async () => {
+      await usingAsync(await renderToggleButton({ value: 'a' }), async ({ button }) => {
+        expect(button.hasAttribute('data-selected')).toBe(false)
+      })
+    })
+
+    it('should set data-selected when pressed is true', async () => {
+      await usingAsync(await renderToggleButton({ value: 'a', pressed: true }), async ({ button }) => {
+        expect(button.hasAttribute('data-selected')).toBe(true)
+      })
+    })
+
+    it('should not set data-selected when pressed is false', async () => {
+      await usingAsync(await renderToggleButton({ value: 'a', pressed: false }), async ({ button }) => {
+        expect(button.hasAttribute('data-selected')).toBe(false)
+      })
+    })
+  })
+
+  describe('size', () => {
+    it('should not set data-size by default', async () => {
+      await usingAsync(await renderToggleButton({ value: 'a' }), async ({ button }) => {
+        expect(button.hasAttribute('data-size')).toBe(false)
+      })
+    })
+
+    it('should not set data-size for medium (default)', async () => {
+      await usingAsync(await renderToggleButton({ value: 'a', size: 'medium' }), async ({ button }) => {
+        expect(button.hasAttribute('data-size')).toBe(false)
+      })
+    })
+
+    it('should set data-size="small" for small size', async () => {
+      await usingAsync(await renderToggleButton({ value: 'a', size: 'small' }), async ({ button }) => {
+        expect(button.getAttribute('data-size')).toBe('small')
+      })
+    })
+
+    it('should set data-size="large" for large size', async () => {
+      await usingAsync(await renderToggleButton({ value: 'a', size: 'large' }), async ({ button }) => {
+        expect(button.getAttribute('data-size')).toBe('large')
+      })
+    })
+  })
+})
+
 describe('ToggleButtonGroup', () => {
   beforeEach(() => {
     document.body.innerHTML = '<div id="root"></div>'
@@ -149,7 +221,7 @@ describe('ToggleButtonGroup', () => {
       rootElement: root,
       jsxElement: <ToggleButtonGroup {...props}>{children}</ToggleButtonGroup>,
     })
-    await sleepAsync(100)
+    await flushUpdates()
     return {
       injector,
       group: root.querySelector('shade-toggle-button-group') as HTMLElement,
@@ -257,8 +329,8 @@ describe('ToggleButtonGroup', () => {
           <ToggleButton value="right">Right</ToggleButton>,
         ] as unknown as JSX.Element[]),
         async ({ group }) => {
-          // Wait for requestAnimationFrame
-          await sleepAsync(50)
+          await flushUpdates()
+          await new Promise<void>((resolve) => requestAnimationFrame(() => resolve()))
           const centerBtn = group.querySelector('button[data-value="center"]') as HTMLButtonElement
           const leftBtn = group.querySelector('button[data-value="left"]') as HTMLButtonElement
           expect(centerBtn.hasAttribute('data-selected')).toBe(true)
@@ -275,7 +347,8 @@ describe('ToggleButtonGroup', () => {
           <ToggleButton value="underline">U</ToggleButton>,
         ] as unknown as JSX.Element[]),
         async ({ group }) => {
-          await sleepAsync(50)
+          await flushUpdates()
+          await new Promise<void>((resolve) => requestAnimationFrame(() => resolve()))
           const boldBtn = group.querySelector('button[data-value="bold"]') as HTMLButtonElement
           const italicBtn = group.querySelector('button[data-value="italic"]') as HTMLButtonElement
           const underlineBtn = group.querySelector('button[data-value="underline"]') as HTMLButtonElement
@@ -314,6 +387,75 @@ describe('ToggleButtonGroup', () => {
       })
     })
   })
+
+  describe('size', () => {
+    it('should not set data-size on children by default', async () => {
+      await usingAsync(
+        await renderToggleGroup({}, [
+          <ToggleButton value="a">A</ToggleButton>,
+          <ToggleButton value="b">B</ToggleButton>,
+        ] as unknown as JSX.Element[]),
+        async ({ group }) => {
+          await flushUpdates()
+          await new Promise<void>((resolve) => requestAnimationFrame(() => resolve()))
+          const buttons = group.querySelectorAll('button[data-value]')
+          buttons.forEach((btn) => {
+            expect(btn.hasAttribute('data-size')).toBe(false)
+          })
+        },
+      )
+    })
+
+    it('should propagate size="small" to child buttons', async () => {
+      await usingAsync(
+        await renderToggleGroup({ size: 'small' }, [
+          <ToggleButton value="a">A</ToggleButton>,
+          <ToggleButton value="b">B</ToggleButton>,
+        ] as unknown as JSX.Element[]),
+        async ({ group }) => {
+          await flushUpdates()
+          await new Promise<void>((resolve) => requestAnimationFrame(() => resolve()))
+          const buttons = group.querySelectorAll('button[data-value]')
+          buttons.forEach((btn) => {
+            expect(btn.getAttribute('data-size')).toBe('small')
+          })
+        },
+      )
+    })
+
+    it('should propagate size="large" to child buttons', async () => {
+      await usingAsync(
+        await renderToggleGroup({ size: 'large' }, [
+          <ToggleButton value="a">A</ToggleButton>,
+          <ToggleButton value="b">B</ToggleButton>,
+        ] as unknown as JSX.Element[]),
+        async ({ group }) => {
+          await flushUpdates()
+          await new Promise<void>((resolve) => requestAnimationFrame(() => resolve()))
+          const buttons = group.querySelectorAll('button[data-value]')
+          buttons.forEach((btn) => {
+            expect(btn.getAttribute('data-size')).toBe('large')
+          })
+        },
+      )
+    })
+
+    it('should remove data-size when size is medium', async () => {
+      await usingAsync(
+        await renderToggleGroup({ size: 'medium' }, [
+          <ToggleButton value="a" size="small">
+            A
+          </ToggleButton>,
+        ] as unknown as JSX.Element[]),
+        async ({ group }) => {
+          await flushUpdates()
+          await new Promise<void>((resolve) => requestAnimationFrame(() => resolve()))
+          const btn = group.querySelector('button[data-value]')
+          expect(btn?.hasAttribute('data-size')).toBe(false)
+        },
+      )
+    })
+  })
 })
 
 describe('SegmentedControl', () => {
@@ -339,7 +481,7 @@ describe('SegmentedControl', () => {
       rootElement: root,
       jsxElement: <SegmentedControl options={defaultOptions} {...props} />,
     })
-    await sleepAsync(50)
+    await flushUpdates()
     return {
       injector,
       control: root.querySelector('shade-segmented-control') as HTMLElement,
@@ -502,7 +644,7 @@ describe('ToggleButtonGroup edge cases', () => {
       rootElement: root,
       jsxElement: <ToggleButtonGroup {...props}>{children}</ToggleButtonGroup>,
     })
-    await sleepAsync(100)
+    await flushUpdates()
     return {
       injector,
       group: root.querySelector('shade-toggle-button-group') as HTMLElement,
@@ -577,7 +719,8 @@ describe('ToggleButtonGroup edge cases', () => {
         <ToggleButton value="b">B</ToggleButton>,
       ] as unknown as JSX.Element[]),
       async ({ group }) => {
-        await sleepAsync(50)
+        await flushUpdates()
+        await new Promise<void>((resolve) => requestAnimationFrame(() => resolve()))
         const buttons = group.querySelectorAll('button[data-value]')
         buttons.forEach((btn) => {
           expect(btn.hasAttribute('disabled')).toBe(true)
@@ -593,7 +736,8 @@ describe('ToggleButtonGroup edge cases', () => {
         <ToggleButton value="b">B</ToggleButton>,
       ] as unknown as JSX.Element[]),
       async ({ group }) => {
-        await sleepAsync(50)
+        await flushUpdates()
+        await new Promise<void>((resolve) => requestAnimationFrame(() => resolve()))
         const buttons = group.querySelectorAll('button[data-value]')
         // First button should have top radius
         expect((buttons[0] as HTMLElement).style.borderRadius).toContain('0 0')

package/src/components/button-group.tsx

@@ -89,6 +89,19 @@ export type ToggleButtonProps = PartialElement<HTMLButtonElement> & {
   value: string
   /** Whether the button is disabled */
   disabled?: boolean
+  /**
+   * The size of the toggle button.
+   * @default 'medium'
+   */
+  size?: 'small' | 'medium' | 'large'
+  /**
+   * Whether the button is in a pressed (selected) state.
+   * Use this for standalone toggle buttons or controlled state.
+   * When used inside a `ToggleButtonGroup`, the group manages the
+   * pressed state automatically via its `value` prop and will
+   * override this attribute.
+   */
+  pressed?: boolean
 }
 
 export const ToggleButton = Shade<ToggleButtonProps>({
@@ -111,13 +124,17 @@ export const ToggleButton = Shade<ToggleButtonProps>({
     userSelect: 'none',
     background: 'transparent',
     color: 'var(--toggle-color-main)',
-    boxShadow: '0px 0px 0px 1px var(--toggle-color-main)',
+    boxShadow: 'none',
     transition: buildTransition(
       ['background', cssVariableTheme.transitions.duration.normal, cssVariableTheme.transitions.easing.default],
       ['color', cssVariableTheme.transitions.duration.normal, cssVariableTheme.transitions.easing.default],
       ['box-shadow', cssVariableTheme.transitions.duration.normal, cssVariableTheme.transitions.easing.default],
     ),
 
+    '&[data-grouped]': {
+      boxShadow: '0px 0px 0px 1px var(--toggle-color-main)',
+    },
+
     '&:hover:not(:disabled):not([data-selected])': {
       background: 'color-mix(in srgb, var(--toggle-color-main) 10%, transparent)',
     },
@@ -140,11 +157,27 @@ export const ToggleButton = Shade<ToggleButtonProps>({
     '&:active:not(:disabled)': {
       transform: 'scale(0.96)',
     },
+
+    '&[data-size="small"]': {
+      padding: `${cssVariableTheme.spacing.xs} ${cssVariableTheme.spacing.sm}`,
+      fontSize: cssVariableTheme.typography.fontSize.sm,
+    },
+
+    '&[data-size="large"]': {
+      padding: `${cssVariableTheme.spacing.md} ${cssVariableTheme.spacing.xl}`,
+      fontSize: cssVariableTheme.typography.fontSize.lg,
+    },
   },
   render: ({ props, children, useHostProps }) => {
     useHostProps({
       'data-value': props.value || undefined,
+      'data-size': props.size && props.size !== 'medium' ? props.size : undefined,
+      'data-selected': props.pressed ? '' : undefined,
       type: 'button',
+      style: {
+        '--toggle-color-main': cssVariableTheme.text.secondary,
+        ...(props.style as Record<string, string>),
+      },
     })
 
     return <>{children}</>
@@ -171,6 +204,12 @@ export type ToggleButtonGroupProps = PartialElement<HTMLElement> & {
   orientation?: 'horizontal' | 'vertical'
   /** Whether all toggle buttons are disabled */
   disabled?: boolean
+  /**
+   * Size applied to all toggle buttons in the group.
+   * Individual ToggleButton `size` props are overridden by this value.
+   * @default 'medium'
+   */
+  size?: 'small' | 'medium' | 'large'
 }
 
 export const ToggleButtonGroup: (props: ToggleButtonGroupProps, children: ChildrenList) => JSX.Element =
@@ -228,7 +267,7 @@ export const ToggleButtonGroup: (props: ToggleButtonGroupProps, children: Childr
         return { [Symbol.dispose]: () => el?.removeEventListener('click', handleClick) }
       })
 
-      const { orientation = 'horizontal', disabled, color, style } = props
+      const { orientation = 'horizontal', disabled, color, size, style } = props
       const selectedValues = Array.isArray(props.value) ? props.value : props.value ? [props.value] : ([] as string[])
 
       const colors = color ? paletteFullColors[color] : defaultToggleColors
@@ -256,10 +295,18 @@ export const ToggleButtonGroup: (props: ToggleButtonGroupProps, children: Childr
             btn.removeAttribute('data-selected')
           }
 
+          btn.setAttribute('data-grouped', '')
+
           if (disabled) {
             btn.setAttribute('disabled', '')
           }
 
+          if (size && size !== 'medium') {
+            btn.setAttribute('data-size', size)
+          } else if (size === 'medium') {
+            btn.removeAttribute('data-size')
+          }
+
           // Propagate color CSS variable
           ;(btn as HTMLElement).style.setProperty('--toggle-color-main', colors.main)
 

package/src/components/button.spec.tsx

@@ -1,6 +1,6 @@
 import { Injector } from '@furystack/inject'
-import { createComponent, initializeShadeRoot, Shade } from '@furystack/shades'
-import { sleepAsync, usingAsync } from '@furystack/utils'
+import { createComponent, flushUpdates, initializeShadeRoot, Shade } from '@furystack/shades'
+import { usingAsync } from '@furystack/utils'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import { Button } from './button.js'
 
@@ -22,7 +22,7 @@ describe('Button', () => {
       rootElement: root,
       jsxElement: <Button {...props}>{children}</Button>,
     })
-    await sleepAsync(50)
+    await flushUpdates()
     return {
       injector,
       button: root.querySelector('button[is="shade-button"]') as HTMLButtonElement,
@@ -86,7 +86,7 @@ describe('Button', () => {
           jsxElement: <TestComponent variant="contained" />,
         })
 
-        await sleepAsync(50)
+        await flushUpdates()
         const button = root.querySelector('button[is="shade-button"]') as HTMLButtonElement
         expect(button.getAttribute('data-variant')).toBe('contained')
       })

package/src/components/cache-view.spec.tsx

@@ -1,7 +1,7 @@
 import { Cache } from '@furystack/cache'
 import type { CacheResult, CacheWithValue } from '@furystack/cache'
 import { Shade, createComponent, flushUpdates } from '@furystack/shades'
-import { sleepAsync } from '@furystack/utils'
+
 import { describe, expect, it, vi } from 'vitest'
 import { CacheView } from './cache-view.js'
 
@@ -162,7 +162,7 @@ describe('CacheView', () => {
 
       loadFn.mockResolvedValueOnce('recovered')
       capturedRetry!()
-      await sleepAsync(50)
+      await flushUpdates()
 
       const observable = cache.getObservable('test')
       const result = observable.getValue()
@@ -183,7 +183,7 @@ describe('CacheView', () => {
       const contentEl = cacheView.querySelector('test-cache-content')
       expect(contentEl).not.toBeNull()
 
-      await sleepAsync(50)
+      await flushUpdates()
       // reload should have been called (initial load + obsolete reload)
       expect(loadFn).toHaveBeenCalledTimes(2)
       cache[Symbol.dispose]()