@furystack/shades-common-components 13.5.0 → 15.0.0

package/src/components/button.spec.tsx

@@ -76,7 +76,7 @@ describe('Button', () => {
         const root = document.getElementById('root')!
 
         const TestComponent = Shade<{ variant?: 'contained' | 'outlined' }>({
-          shadowDomName: 'button-test-variant-wrapper',
+          customElementName: 'button-test-variant-wrapper',
           render: ({ props }) => <Button variant={props.variant}>Test</Button>,
         })
 

package/src/components/button.tsx

@@ -65,7 +65,7 @@ const iconWrapperStyle: Partial<CSSStyleDeclaration> = {
 }
 
 export const Button = Shade<ButtonProps>({
-  shadowDomName: 'shade-button',
+  customElementName: 'shade-button',
   elementBase: HTMLButtonElement,
   elementBaseName: 'button',
   css: {

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

@@ -7,12 +7,12 @@ import { describe, expect, it, vi } from 'vitest'
 import { CacheView } from './cache-view.js'
 
 const TestContent = Shade<{ data: CacheWithValue<string> }>({
-  shadowDomName: 'test-cache-content',
+  customElementName: 'test-cache-content',
   render: ({ props }) => <span className="content-value">{props.data.value}</span>,
 })
 
 const TestContentWithLabel = Shade<{ data: CacheWithValue<string>; label: string }>({
-  shadowDomName: 'test-cache-content-with-label',
+  customElementName: 'test-cache-content-with-label',
   render: ({ props }) => (
     <span className="content-value">
       {props.label}: {props.data.value}

package/src/components/cache-view.tsx

@@ -58,7 +58,7 @@ const getDefaultErrorUi = (error: unknown, retry: () => void): JSX.Element =>
  * @example
  * ```tsx
  * const MyContent = Shade<{ data: CacheWithValue<User> }>({
- *   shadowDomName: 'my-content',
+ *   customElementName: 'my-content',
  *   render: ({ props }) => <div>{props.data.value.name}</div>,
  * })
  *
@@ -66,7 +66,7 @@ const getDefaultErrorUi = (error: unknown, retry: () => void): JSX.Element =>
  *
  * // With custom content props
  * const MyContentWithLabel = Shade<{ data: CacheWithValue<User>; label: string }>({
- *   shadowDomName: 'my-content-with-label',
+ *   customElementName: 'my-content-with-label',
  *   render: ({ props }) => <div>{props.label}: {props.data.value.name}</div>,
  * })
  *
@@ -85,7 +85,7 @@ type InternalCacheViewProps = {
 }
 
 export const CacheView = Shade<InternalCacheViewProps>({
-  shadowDomName: 'shade-cache-view',
+  customElementName: 'shade-cache-view',
   css: {
     fontFamily: cssVariableTheme.typography.fontFamily,
   },

package/src/components/card.tsx

@@ -21,7 +21,7 @@ export type CardProps = PartialElement<HTMLElement> & {
  * Compose with CardHeader, CardContent, CardMedia, and CardActions for structured layouts.
  */
 export const Card = Shade<CardProps>({
-  shadowDomName: 'shade-card',
+  customElementName: 'shade-card',
   css: {
     display: 'flex',
     fontFamily: cssVariableTheme.typography.fontFamily,
@@ -102,7 +102,7 @@ export type CardHeaderProps = PartialElement<HTMLElement> & {
  * Displays a title, optional subheader, avatar, and action area at the top of a Card.
  */
 export const CardHeader = Shade<CardHeaderProps>({
-  shadowDomName: 'shade-card-header',
+  customElementName: 'shade-card-header',
   css: {
     display: 'flex',
     alignItems: 'center',
@@ -174,7 +174,7 @@ export type CardContentProps = PartialElement<HTMLElement>
  * Provides padded content area within a Card.
  */
 export const CardContent = Shade<CardContentProps>({
-  shadowDomName: 'shade-card-content',
+  customElementName: 'shade-card-content',
   css: {
     display: 'block',
     padding: `0 ${cssVariableTheme.spacing.md} ${cssVariableTheme.spacing.md}`,
@@ -208,7 +208,7 @@ export type CardMediaProps = PartialElement<HTMLElement> & {
  * Displays an image or media element within a Card.
  */
 export const CardMedia = Shade<CardMediaProps>({
-  shadowDomName: 'shade-card-media',
+  customElementName: 'shade-card-media',
   css: {
     display: 'block',
     overflow: 'hidden',
@@ -242,7 +242,7 @@ export type CardActionsProps = PartialElement<HTMLElement> & {
  * Provides a row of actions (buttons, links) at the bottom of a Card.
  */
 export const CardActions = Shade<CardActionsProps>({
-  shadowDomName: 'shade-card-actions',
+  customElementName: 'shade-card-actions',
   css: {
     display: 'flex',
     alignItems: 'center',

package/src/components/carousel.tsx

@@ -34,7 +34,7 @@ const TRANSITION_MS = 400
  * keyboard navigation, and swipe gestures.
  */
 export const Carousel = Shade<CarouselProps>({
-  shadowDomName: 'shade-carousel',
+  customElementName: 'shade-carousel',
   css: {
     display: 'block',
     position: 'relative',
@@ -200,7 +200,7 @@ export const Carousel = Shade<CarouselProps>({
       'data-vertical': vertical ? '' : undefined,
       role: 'region',
       'aria-roledescription': 'carousel',
-      tabindex: '0',
+      tabIndex: 0,
       ...(style ? { style: style as Record<string, string> } : {}),
     })
 

package/src/components/chip.spec.tsx

@@ -140,6 +140,70 @@ describe('Chip', () => {
     expect(chip.hasAttribute('data-clickable')).toBe(true)
   })
 
+  it('should be focusable when clickable', async () => {
+    const el = (
+      <div>
+        <Chip clickable>Clickable</Chip>
+      </div>
+    )
+    const chip = el.firstElementChild as JSX.Element
+    chip.updateComponent()
+    await flushUpdates()
+    expect(chip.getAttribute('tabindex')).toBe('0')
+  })
+
+  it('should be focusable when onclick handler is provided', async () => {
+    const el = (
+      <div>
+        <Chip onclick={() => {}}>Click Handler</Chip>
+      </div>
+    )
+    const chip = el.firstElementChild as JSX.Element
+    chip.updateComponent()
+    await flushUpdates()
+    expect(chip.getAttribute('tabindex')).toBe('0')
+  })
+
+  it('should not be focusable when clickable but disabled', async () => {
+    const el = (
+      <div>
+        <Chip clickable disabled>
+          Disabled Clickable
+        </Chip>
+      </div>
+    )
+    const chip = el.firstElementChild as JSX.Element
+    chip.updateComponent()
+    await flushUpdates()
+    expect(chip.hasAttribute('tabindex')).toBe(false)
+  })
+
+  it('should not be focusable when not clickable', async () => {
+    const el = (
+      <div>
+        <Chip>Not Clickable</Chip>
+      </div>
+    )
+    const chip = el.firstElementChild as JSX.Element
+    chip.updateComponent()
+    await flushUpdates()
+    expect(chip.hasAttribute('tabindex')).toBe(false)
+  })
+
+  it('should have a focusable delete button', async () => {
+    const onDelete = vi.fn()
+    const el = (
+      <div>
+        <Chip onDelete={onDelete}>Deletable</Chip>
+      </div>
+    )
+    const chip = el.firstElementChild as JSX.Element
+    chip.updateComponent()
+    await flushUpdates()
+    const deleteBtn = chip.querySelector('.chip-delete') as HTMLElement
+    expect(deleteBtn.getAttribute('tabindex')).toBe('0')
+  })
+
   it('should set CSS custom properties for palette color', async () => {
     const el = (
       <div>

package/src/components/chip.tsx

@@ -25,7 +25,7 @@ const defaultColors = {
 }
 
 export const Chip = Shade<ChipProps>({
-  shadowDomName: 'shade-chip',
+  customElementName: 'shade-chip',
   css: {
     display: 'inline-flex',
     alignItems: 'center',
@@ -152,11 +152,13 @@ export const Chip = Shade<ChipProps>({
     const { variant, color, size, disabled, clickable, onDelete, style, ...rest } = props
 
     const colors = color ? paletteFullColors[color] : defaultColors
+    const isClickable = clickable || rest.onclick
     useHostProps({
       'data-variant': variant || undefined,
       'data-size': size === 'small' ? 'small' : undefined,
       'data-disabled': disabled ? '' : undefined,
-      'data-clickable': clickable || rest.onclick ? '' : undefined,
+      'data-clickable': isClickable ? '' : undefined,
+      tabIndex: isClickable && !disabled ? 0 : undefined,
       style: {
         '--chip-color-main': colors.main,
         '--chip-color-main-contrast': colors.mainContrast,
@@ -174,6 +176,7 @@ export const Chip = Shade<ChipProps>({
           <span
             className="chip-delete"
             role="button"
+            tabIndex={0}
             onclick={(ev: MouseEvent) => {
               ev.stopPropagation()
               onDelete(ev)

package/src/components/circular-progress.spec.tsx

@@ -1,10 +1,18 @@
 import { Injector } from '@furystack/inject'
-import { createComponent, initializeShadeRoot } from '@furystack/shades'
+import { createComponent, initializeShadeRoot, Shade } from '@furystack/shades'
 import { ObservableValue, sleepAsync, usingAsync } from '@furystack/utils'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import { ThemeProviderService } from '../services/theme-provider-service.js'
 import { CircularProgress } from './circular-progress.js'
 
+const CircularWrapper = Shade<{ obs: ObservableValue<number> }>({
+  customElementName: 'test-circular-progress-wrapper',
+  render: ({ props, useObservable }) => {
+    const [value] = useObservable('value', props.obs)
+    return <CircularProgress variant="determinate" value={value} />
+  },
+})
+
 describe('CircularProgress', () => {
   let originalAnimate: typeof Element.prototype.animate
 
@@ -35,7 +43,7 @@ describe('CircularProgress', () => {
     vi.restoreAllMocks()
   })
 
-  it('should render with shadow DOM', async () => {
+  it('should render as custom element', async () => {
     await usingAsync(new Injector(), async (injector) => {
       const rootElement = document.getElementById('root') as HTMLDivElement
 
@@ -147,12 +155,11 @@ describe('CircularProgress', () => {
     it('should set aria-valuenow for determinate variant', async () => {
       await usingAsync(new Injector(), async (injector) => {
         const rootElement = document.getElementById('root') as HTMLDivElement
-        const value = new ObservableValue(50)
 
         initializeShadeRoot({
           injector,
           rootElement,
-          jsxElement: <CircularProgress variant="determinate" value={value} />,
+          jsxElement: <CircularProgress variant="determinate" value={50} />,
         })
 
         await sleepAsync(50)
@@ -167,12 +174,11 @@ describe('CircularProgress', () => {
     it('should clamp value to 0-100 range', async () => {
       await usingAsync(new Injector(), async (injector) => {
         const rootElement = document.getElementById('root') as HTMLDivElement
-        const value = new ObservableValue(150)
 
         initializeShadeRoot({
           injector,
           rootElement,
-          jsxElement: <CircularProgress variant="determinate" value={value} />,
+          jsxElement: <CircularProgress variant="determinate" value={150} />,
         })
 
         await sleepAsync(50)
@@ -182,15 +188,15 @@ describe('CircularProgress', () => {
       })
     })
 
-    it('should update stroke-dashoffset when observable value changes', async () => {
+    it('should update stroke-dashoffset when value prop changes', async () => {
       await usingAsync(new Injector(), async (injector) => {
         const rootElement = document.getElementById('root') as HTMLDivElement
-        const value = new ObservableValue(0)
+        const obs = new ObservableValue(0)
 
         initializeShadeRoot({
           injector,
           rootElement,
-          jsxElement: <CircularProgress variant="determinate" value={value} />,
+          jsxElement: <CircularWrapper obs={obs} />,
         })
 
         await sleepAsync(50)
@@ -198,7 +204,7 @@ describe('CircularProgress', () => {
         const circle = document.querySelector('shade-circular-progress .progress-circle') as SVGCircleElement
         const initialOffset = circle.style.strokeDashoffset
 
-        value.setValue(75)
+        obs.setValue(75)
         await sleepAsync(50)
 
         const updatedOffset = circle.style.strokeDashoffset
@@ -206,15 +212,15 @@ describe('CircularProgress', () => {
       })
     })
 
-    it('should update aria-valuenow when observable value changes', async () => {
+    it('should update aria-valuenow when value prop changes', async () => {
       await usingAsync(new Injector(), async (injector) => {
         const rootElement = document.getElementById('root') as HTMLDivElement
-        const value = new ObservableValue(20)
+        const obs = new ObservableValue(20)
 
         initializeShadeRoot({
           injector,
           rootElement,
-          jsxElement: <CircularProgress variant="determinate" value={value} />,
+          jsxElement: <CircularWrapper obs={obs} />,
         })
 
         await sleepAsync(50)
@@ -222,7 +228,7 @@ describe('CircularProgress', () => {
         const el = document.querySelector('shade-circular-progress') as HTMLElement
         expect(el.getAttribute('aria-valuenow')).toBe('20')
 
-        value.setValue(85)
+        obs.setValue(85)
         await sleepAsync(50)
 
         expect(el.getAttribute('aria-valuenow')).toBe('85')

package/src/components/circular-progress.tsx

@@ -1,15 +1,13 @@
 import { Shade, createComponent } from '@furystack/shades'
-import type { ObservableValue } from '@furystack/utils'
 import { cssVariableTheme } from '../services/css-variable-theme.js'
 import type { Palette } from '../services/theme-provider-service.js'
 import { ThemeProviderService } from '../services/theme-provider-service.js'
 
 export type CircularProgressProps = {
   /**
-   * An observable progress value (0–100). Used when variant is 'determinate'.
-   * The component subscribes internally and updates the arc without re-rendering.
+   * A progress value (0–100). Used when variant is 'determinate'.
    */
-  value?: ObservableValue<number>
+  value?: number
   /**
    * The variant of the progress indicator.
    * - 'determinate': shows a fixed arc based on `value`
@@ -41,7 +39,7 @@ const DEFAULT_THICKNESS = 3.6
 const clampValue = (v: number) => Math.max(0, Math.min(100, v))
 
 export const CircularProgress = Shade<CircularProgressProps>({
-  shadowDomName: 'shade-circular-progress',
+  customElementName: 'shade-circular-progress',
   css: {
     display: 'inline-flex',
     fontFamily: cssVariableTheme.typography.fontFamily,
@@ -65,10 +63,10 @@ export const CircularProgress = Shade<CircularProgressProps>({
       transition: `stroke-dashoffset ${cssVariableTheme.transitions.duration.normal} ${cssVariableTheme.transitions.easing.easeInOut}`,
     },
   },
-  render: ({ props, injector, useObservable, useHostProps }) => {
+  render: ({ props, injector, useHostProps }) => {
     const themeProvider = injector.getInstance(ThemeProviderService)
     const variant = props.variant || 'indeterminate'
-    const value = clampValue(props.value?.getValue() ?? 0)
+    const value = clampValue(props.value ?? 0)
     const size = props.size ?? DEFAULT_SIZE
     const thickness = props.thickness ?? DEFAULT_THICKNESS
     const indeterminate = variant === 'indeterminate'
@@ -76,10 +74,6 @@ export const CircularProgress = Shade<CircularProgressProps>({
     const radius = (SVG_SIZE - thickness) / 2
     const circumference = 2 * Math.PI * radius
 
-    if (variant === 'determinate' && props.value) {
-      useObservable('ariaValue', props.value)
-    }
-
     const color = themeProvider.theme.palette[props.color || 'primary'].main
     useHostProps({
       role: 'progressbar',

package/src/components/command-palette/command-palette-input.tsx

@@ -3,7 +3,7 @@ import { cssVariableTheme } from '../../services/css-variable-theme.js'
 import type { CommandPaletteManager } from './command-palette-manager.js'
 
 export const CommandPaletteInput = Shade<{ manager: CommandPaletteManager }>({
-  shadowDomName: 'shades-command-palette-input',
+  customElementName: 'shades-command-palette-input',
   css: {
     width: '100%',
     fontFamily: cssVariableTheme.typography.fontFamily,

package/src/components/command-palette/command-palette-suggestion-list.spec.tsx

@@ -54,7 +54,7 @@ describe('CommandPaletteSuggestionList', () => {
     onSelected: vi.fn(),
   })
 
-  it('should render with shadow DOM', async () => {
+  it('should render as custom element', async () => {
     await usingAsync(new Injector(), async (injector) => {
       await usingAsync(createManager(), async (manager) => {
         const rootElement = document.getElementById('root') as HTMLDivElement

package/src/components/command-palette/command-palette-suggestion-list.tsx

@@ -4,7 +4,7 @@ import { promisifyAnimation } from '../../utils/promisify-animation.js'
 import type { CommandPaletteManager } from './command-palette-manager.js'
 
 export const CommandPaletteSuggestionList = Shade<{ manager: CommandPaletteManager; fullScreenSuggestions?: boolean }>({
-  shadowDomName: 'shade-command-palette-suggestion-list',
+  customElementName: 'shade-command-palette-suggestion-list',
   css: {
     fontFamily: cssVariableTheme.typography.fontFamily,
     '& .suggestion-items-container': {