@furystack/shades-common-components 13.5.0 → 15.0.0

package/src/components/dialog.spec.tsx

@@ -1,9 +1,19 @@
-import { createComponent } from '@furystack/shades'
-import { describe, expect, it, vi } from 'vitest'
+import { Injector } from '@furystack/inject'
+import { createComponent, flushUpdates, initializeShadeRoot, SpatialNavigationService } from '@furystack/shades'
+import { usingAsync } from '@furystack/utils'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import type { DialogProps } from './dialog.js'
 import { ConfirmDialog, Dialog } from './dialog.js'
 
 describe('Dialog', () => {
+  beforeEach(() => {
+    document.body.innerHTML = '<div id="root"></div>'
+  })
+
+  afterEach(() => {
+    document.body.innerHTML = ''
+  })
+
   it('should be defined', () => {
     expect(Dialog).toBeDefined()
     expect(typeof Dialog).toBe('function')
@@ -55,6 +65,71 @@ describe('Dialog', () => {
     const el = (<Dialog isVisible={false} />) as unknown as { props: DialogProps }
     expect(el.props.isVisible).toBe(false)
   })
+
+  it('should forward trapFocus to the underlying Modal', async () => {
+    await usingAsync(new Injector(), async (injector) => {
+      const spatialNav = injector.getInstance(SpatialNavigationService)
+      const pushSpy = vi.spyOn(spatialNav, 'pushFocusTrap')
+      const rootElement = document.getElementById('root') as HTMLDivElement
+
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: (
+          <Dialog isVisible={true} trapFocus={true} navSection="dialog-trap">
+            <div>Content</div>
+          </Dialog>
+        ),
+      })
+
+      await flushUpdates()
+
+      expect(pushSpy).toHaveBeenCalledWith('dialog-trap')
+    })
+  })
+
+  it('should forward navSection to the underlying Modal', async () => {
+    await usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
+
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: (
+          <Dialog isVisible={true} navSection="my-dialog">
+            <div>Content</div>
+          </Dialog>
+        ),
+      })
+
+      await flushUpdates()
+
+      const backdrop = document.querySelector('.shade-backdrop')
+      expect(backdrop?.getAttribute('data-nav-section')).toBe('my-dialog')
+    })
+  })
+
+  it('should not push focus trap when trapFocus is false', async () => {
+    await usingAsync(new Injector(), async (injector) => {
+      const spatialNav = injector.getInstance(SpatialNavigationService)
+      const pushSpy = vi.spyOn(spatialNav, 'pushFocusTrap')
+      const rootElement = document.getElementById('root') as HTMLDivElement
+
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: (
+          <Dialog isVisible={true} trapFocus={false}>
+            <div>Content</div>
+          </Dialog>
+        ),
+      })
+
+      await flushUpdates()
+
+      expect(pushSpy).not.toHaveBeenCalled()
+    })
+  })
 })
 
 describe('ConfirmDialog', () => {

package/src/components/dialog.tsx

@@ -13,6 +13,17 @@ export type DialogProps = {
   actions?: JSX.Element
   maxWidth?: string
   fullWidth?: boolean
+  /**
+   * When true, traps spatial navigation within the dialog's bounds.
+   * Forwarded to the underlying Modal component.
+   */
+  trapFocus?: boolean
+  /**
+   * Section name for spatial navigation scoping.
+   * Forwarded to the underlying Modal component.
+   * @default 'modal'
+   */
+  navSection?: string
 }
 
 const showAnimation = async (el: Element | null) => {
@@ -52,7 +63,7 @@ const hideAnimation = async (el: Element | null) => {
 }
 
 export const Dialog = Shade<DialogProps>({
-  shadowDomName: 'shade-dialog',
+  customElementName: 'shade-dialog',
   css: {
     fontFamily: cssVariableTheme.typography.fontFamily,
     '& .dialog-panel': {
@@ -127,7 +138,7 @@ export const Dialog = Shade<DialogProps>({
     },
   },
   render: ({ props, children }) => {
-    const { isVisible, title, onClose, actions, maxWidth = '560px', fullWidth } = props
+    const { isVisible, title, onClose, actions, maxWidth = '560px', fullWidth, trapFocus = true, navSection } = props
 
     const handleClose = () => {
       onClose?.()
@@ -139,6 +150,8 @@ export const Dialog = Shade<DialogProps>({
         onClose={handleClose}
         showAnimation={showAnimation}
         hideAnimation={hideAnimation}
+        trapFocus={trapFocus}
+        navSection={navSection}
         backdropStyle={{
           display: 'flex',
           alignItems: 'center',

package/src/components/divider.tsx

@@ -12,7 +12,7 @@ export type DividerProps = PartialElement<HTMLElement> & {
 }
 
 export const Divider = Shade<DividerProps>({
-  shadowDomName: 'shade-divider',
+  customElementName: 'shade-divider',
   css: {
     display: 'flex',
     fontFamily: cssVariableTheme.typography.fontFamily,

package/src/components/drawer/drawer-toggle-button.tsx

@@ -34,7 +34,7 @@ export type DrawerToggleButtonProps = {
  * ```
  */
 export const DrawerToggleButton = Shade<DrawerToggleButtonProps>({
-  shadowDomName: 'shade-drawer-toggle-button',
+  customElementName: 'shade-drawer-toggle-button',
   css: {
     display: 'inline-block',
     fontFamily: cssVariableTheme.typography.fontFamily,

package/src/components/drawer/index.tsx

@@ -57,7 +57,7 @@ const DEFAULT_DRAWER_WIDTH = '240px'
  * ```
  */
 export const Drawer = Shade<DrawerProps>({
-  shadowDomName: 'shade-drawer',
+  customElementName: 'shade-drawer',
   css: {
     display: 'block',
 

package/src/components/dropdown.spec.tsx

@@ -416,6 +416,15 @@ describe('Dropdown', () => {
     })
   })
 
+  describe('spatial navigation', () => {
+    it('should have data-spatial-nav-passthrough on the backdrop', async () => {
+      await usingAsync(await renderDropdown({}), async ({ dropdown }) => {
+        const backdrop = dropdown.querySelector('.dropdown-backdrop') as HTMLElement
+        expect(backdrop.hasAttribute('data-spatial-nav-passthrough')).toBe(true)
+      })
+    })
+  })
+
   describe('placement', () => {
     it('should accept bottomRight placement', async () => {
       await usingAsync(await renderDropdown({ placement: 'bottomRight' }), async ({ dropdown }) => {

package/src/components/dropdown.tsx

@@ -57,7 +57,7 @@ const renderDropdownItems = (items: MenuEntry[], onSelect: (key: string) => void
 }
 
 export const Dropdown: (props: DropdownProps, children: ChildrenList) => JSX.Element<any> = Shade<DropdownProps>({
-  shadowDomName: 'shade-dropdown',
+  customElementName: 'shade-dropdown',
   css: {
     display: 'inline-flex',
     fontFamily: cssVariableTheme.typography.fontFamily,
@@ -309,6 +309,7 @@ export const Dropdown: (props: DropdownProps, children: ChildrenList) => JSX.Ele
         <div
           ref={backdropRef}
           className="dropdown-backdrop"
+          data-spatial-nav-passthrough=""
           style={{
             position: 'fixed',
             top: '0',

package/src/components/fab.tsx

@@ -9,7 +9,7 @@ export type FabProps = PartialElement<HTMLButtonElement> & {
 }
 
 export const Fab = Shade<FabProps>({
-  shadowDomName: 'shade-fab',
+  customElementName: 'shade-fab',
   elementBase: HTMLButtonElement,
   elementBaseName: 'button',
   css: {

package/src/components/form.tsx

@@ -56,7 +56,7 @@ type FormProps<T> = {
 } & PartialElement<Omit<HTMLFormElement, 'onsubmit' | 'onchange' | 'onreset'>>
 
 export const Form: <T>(props: FormProps<T>, children: ChildrenList) => JSX.Element = Shade({
-  shadowDomName: 'shade-form',
+  customElementName: 'shade-form',
   elementBase: HTMLFormElement,
   elementBaseName: 'form',
   css: { fontFamily: cssVariableTheme.typography.fontFamily },

package/src/components/grid.tsx

@@ -28,7 +28,7 @@ export type RowCells<T, Columns extends string> = {
  */
 export const Grid: <T, Column extends string>(props: GridProps<T, Column>, children: ChildrenList) => JSX.Element<any> =
   Shade({
-    shadowDomName: 'shade-grid',
+    customElementName: 'shade-grid',
     css: {
       display: 'block',
       fontFamily: cssVariableTheme.typography.fontFamily,

package/src/components/icons/icon.tsx

@@ -37,7 +37,7 @@ export type IconProps = PartialElement<HTMLElement> & {
 }
 
 export const Icon = Shade<IconProps>({
-  shadowDomName: 'shade-icon',
+  customElementName: 'shade-icon',
   css: {
     display: 'inline-flex',
     fontFamily: cssVariableTheme.typography.fontFamily,

package/src/components/image.spec.tsx

@@ -345,6 +345,88 @@ describe('Image component', () => {
     })
   })
 
+  it('should be focusable when preview is enabled', async () => {
+    await usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
+
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: <Image src="https://example.com/photo.jpg" preview />,
+      })
+
+      await flushUpdates()
+
+      const imageComponent = document.querySelector('shade-image') as HTMLElement
+      expect(imageComponent.getAttribute('tabindex')).toBe('0')
+    })
+  })
+
+  it('should not be focusable when preview is disabled', async () => {
+    await usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
+
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: <Image src="https://example.com/photo.jpg" />,
+      })
+
+      await flushUpdates()
+
+      const imageComponent = document.querySelector('shade-image') as HTMLElement
+      expect(imageComponent.hasAttribute('tabindex')).toBe(false)
+    })
+  })
+
+  it('should open lightbox when pressing Enter on a preview-enabled image', async () => {
+    await usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
+
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: <Image src="https://example.com/photo.jpg" alt="My photo" preview />,
+      })
+
+      await flushUpdates()
+
+      const imageComponent = document.querySelector('shade-image') as HTMLElement
+      imageComponent.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }))
+
+      await flushUpdates()
+
+      const lightbox = document.querySelector('.lightbox-backdrop')
+      expect(lightbox).not.toBeNull()
+
+      lightbox?.remove()
+    })
+  })
+
+  it('should open lightbox when pressing Space on a preview-enabled image', async () => {
+    await usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
+
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: <Image src="https://example.com/photo.jpg" alt="My photo" preview />,
+      })
+
+      await flushUpdates()
+
+      const imageComponent = document.querySelector('shade-image') as HTMLElement
+      imageComponent.dispatchEvent(new KeyboardEvent('keydown', { key: ' ', bubbles: true }))
+
+      await flushUpdates()
+
+      const lightbox = document.querySelector('.lightbox-backdrop')
+      expect(lightbox).not.toBeNull()
+
+      lightbox?.remove()
+    })
+  })
+
   it('should store src and alt as data attributes', async () => {
     await usingAsync(new Injector(), async (injector) => {
       const rootElement = document.getElementById('root') as HTMLDivElement

package/src/components/image.tsx

@@ -355,7 +355,7 @@ const navButtonStyle = (): Partial<CSSStyleDeclaration> => ({
  * Image component with preview lightbox, zoom/rotate, fallback, and lazy loading support.
  */
 export const Image = Shade<ImageProps>({
-  shadowDomName: 'shade-image',
+  customElementName: 'shade-image',
   css: {
     display: 'inline-block',
     fontFamily: cssVariableTheme.typography.fontFamily,
@@ -438,13 +438,6 @@ export const Image = Shade<ImageProps>({
       style: styleOverrides,
     } = props
 
-    useHostProps({
-      'data-preview': preview ? '' : undefined,
-      'data-src': src,
-      'data-alt': alt,
-      ...(styleOverrides ? { style: styleOverrides as Record<string, string> } : {}),
-    })
-
     const [hasError, setHasError] = useState('hasError', false)
 
     const handleClick = () => {
@@ -466,6 +459,22 @@ export const Image = Shade<ImageProps>({
       createLightbox(src, alt)
     }
 
+    useHostProps({
+      'data-preview': preview ? '' : undefined,
+      'data-src': src,
+      'data-alt': alt,
+      tabIndex: preview ? 0 : undefined,
+      onkeydown: preview
+        ? (ev: KeyboardEvent) => {
+            if (ev.key === 'Enter' || ev.key === ' ') {
+              ev.preventDefault()
+              handleClick()
+            }
+          }
+        : undefined,
+      ...(styleOverrides ? { style: styleOverrides as Record<string, string> } : {}),
+    })
+
     return (
       <div ref={imageHostRef} style={{ display: 'contents' }}>
         <img
@@ -506,7 +515,7 @@ export const Image = Shade<ImageProps>({
  * When one image is clicked, the lightbox shows navigation controls to browse all images in the group.
  */
 export const ImageGroup = Shade<ImageGroupProps>({
-  shadowDomName: 'shade-image-group',
+  customElementName: 'shade-image-group',
   css: {
     display: 'flex',
     flexWrap: 'wrap',

package/src/components/inputs/autocomplete.tsx

@@ -12,7 +12,7 @@ export const Autocomplete = Shade<{
   strict?: boolean
   onchange?: (value: string) => void
 }>({
-  shadowDomName: 'shade-autocomplete',
+  customElementName: 'shade-autocomplete',
   css: { fontFamily: cssVariableTheme.typography.fontFamily },
   render: ({ props, useState, useDisposable, useRef }) => {
     const wrapperRef = useRef<HTMLDivElement>('wrapper')

package/src/components/inputs/checkbox.spec.tsx

@@ -16,7 +16,7 @@ describe('Checkbox', () => {
     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
 

package/src/components/inputs/checkbox.tsx

@@ -49,7 +49,7 @@ export type CheckboxProps = {
 }
 
 export const Checkbox = Shade<CheckboxProps>({
-  shadowDomName: 'shade-checkbox',
+  customElementName: 'shade-checkbox',
   css: {
     display: 'inline-flex',
     fontFamily: cssVariableTheme.typography.fontFamily,
@@ -95,6 +95,7 @@ export const Checkbox = Shade<CheckboxProps>({
     },
 
     '& input[type="checkbox"]:focus-visible': {
+      outline: 'none',
       boxShadow: cssVariableTheme.action.focusRing,
     },
 

package/src/components/inputs/input-number.spec.tsx

@@ -14,7 +14,7 @@ describe('InputNumber', () => {
     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
 

package/src/components/inputs/input-number.tsx

@@ -124,7 +124,7 @@ const parseValue = (text: string, parser?: InputNumberProps['parser']): number |
 }
 
 export const InputNumber = Shade<InputNumberProps>({
-  shadowDomName: 'shade-input-number',
+  customElementName: 'shade-input-number',
   css: {
     display: 'block',
     fontFamily: cssVariableTheme.typography.fontFamily,

package/src/components/inputs/input.spec.tsx

@@ -16,7 +16,7 @@ describe('Input', () => {
     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
 

package/src/components/inputs/input.tsx

@@ -108,7 +108,7 @@ const getDefaultMessagesForValidityState = (state: ValidityState) => {
 }
 
 export const Input = Shade<TextInputProps>({
-  shadowDomName: 'shade-input',
+  customElementName: 'shade-input',
   css: {
     display: 'block',
     fontFamily: cssVariableTheme.typography.fontFamily,

package/src/components/inputs/radio-group.spec.tsx

@@ -15,7 +15,7 @@ describe('RadioGroup', () => {
     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
 

package/src/components/inputs/radio-group.tsx

@@ -39,7 +39,7 @@ export type RadioGroupProps = {
 }
 
 export const RadioGroup: (props: RadioGroupProps, children: ChildrenList) => JSX.Element = Shade<RadioGroupProps>({
-  shadowDomName: 'shade-radio-group',
+  customElementName: 'shade-radio-group',
   css: {
     display: 'block',
     fontFamily: cssVariableTheme.typography.fontFamily,

package/src/components/inputs/radio.spec.tsx

@@ -16,7 +16,7 @@ describe('Radio', () => {
     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
 

package/src/components/inputs/radio.tsx

@@ -41,7 +41,7 @@ export type RadioProps = {
 }
 
 export const Radio = Shade<RadioProps>({
-  shadowDomName: 'shade-radio',
+  customElementName: 'shade-radio',
   css: {
     display: 'inline-flex',
     fontFamily: cssVariableTheme.typography.fontFamily,
@@ -87,6 +87,7 @@ export const Radio = Shade<RadioProps>({
     },
 
     '& input[type="radio"]:focus-visible': {
+      outline: 'none',
       boxShadow: cssVariableTheme.action.focusRing,
     },
 

package/src/components/inputs/select.tsx

@@ -77,7 +77,7 @@ const defaultFilterOption = (searchText: string, option: SelectOption): boolean
 }
 
 export const Select = Shade<SelectProps>({
-  shadowDomName: 'shade-select',
+  customElementName: 'shade-select',
   css: {
     display: 'block',
     fontFamily: cssVariableTheme.typography.fontFamily,

package/src/components/inputs/slider.tsx

@@ -180,7 +180,7 @@ const syncVisuals = (
 }
 
 export const Slider = Shade<SliderProps>({
-  shadowDomName: 'shade-slider',
+  customElementName: 'shade-slider',
   css: {
     display: 'block',
     fontFamily: cssVariableTheme.typography.fontFamily,
@@ -293,6 +293,7 @@ export const Slider = Shade<SliderProps>({
     },
 
     '& .slider-thumb:focus-visible': {
+      outline: 'none',
       boxShadow: '0 0 0 4px color-mix(in srgb, var(--slider-color) 30%, transparent)',
     },
 

package/src/components/inputs/switch.spec.tsx

@@ -16,7 +16,7 @@ describe('Switch', () => {
     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
 

package/src/components/inputs/switch.tsx

@@ -49,7 +49,7 @@ export type SwitchProps = {
 }
 
 export const Switch = Shade<SwitchProps>({
-  shadowDomName: 'shade-switch',
+  customElementName: 'shade-switch',
   css: {
     display: 'inline-flex',
     fontFamily: cssVariableTheme.typography.fontFamily,
@@ -154,6 +154,7 @@ export const Switch = Shade<SwitchProps>({
 
     // Focus state
     '& input[type="checkbox"]:focus-visible + .switch-track': {
+      outline: 'none',
       boxShadow: cssVariableTheme.action.focusRing,
     },
 

package/src/components/inputs/text-area.spec.tsx

@@ -13,7 +13,7 @@ describe('TextArea', () => {
     document.body.innerHTML = ''
   })
 
-  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
 

package/src/components/inputs/text-area.tsx

@@ -10,7 +10,7 @@ export interface TextAreaProps extends PartialElement<HTMLTextAreaElement> {
 }
 
 export const TextArea = Shade<TextAreaProps>({
-  shadowDomName: 'shade-text-area',
+  customElementName: 'shade-text-area',
   css: {
     display: 'block',
     fontFamily: cssVariableTheme.typography.fontFamily,