@furystack/shades-common-components 13.5.0 → 15.0.0

package/src/components/page-layout/index.tsx

@@ -92,7 +92,7 @@ const DEFAULT_DRAWER_WIDTH = '240px'
  * ```
  */
 export const PageLayout = Shade<PageLayoutProps>({
-  shadowDomName: 'shade-page-layout',
+  customElementName: 'shade-page-layout',
   css: {
     display: 'block',
     fontFamily: cssVariableTheme.typography.fontFamily,
@@ -407,7 +407,7 @@ export const PageLayout = Shade<PageLayoutProps>({
         )}
 
         {/* Main Content */}
-        <main className="page-layout-content" data-testid="page-layout-content">
+        <main className="page-layout-content" data-testid="page-layout-content" data-nav-section="content">
           {children}
         </main>
       </div>

package/src/components/pagination.tsx

@@ -90,7 +90,7 @@ const defaultColors = {
 }
 
 export const Pagination = Shade<PaginationProps>({
-  shadowDomName: 'shade-pagination',
+  customElementName: 'shade-pagination',
   css: {
     display: 'inline-flex',
     alignItems: 'center',

package/src/components/paper.tsx

@@ -2,7 +2,7 @@ import { Shade, createComponent } from '@furystack/shades'
 import { cssVariableTheme } from '../services/css-variable-theme.js'
 
 export const Paper = Shade<{ elevation?: 0 | 1 | 2 | 3 }>({
-  shadowDomName: 'shade-paper',
+  customElementName: 'shade-paper',
   elementBase: HTMLDivElement,
   elementBaseName: 'div',
   css: {

package/src/components/rating.spec.tsx

@@ -15,7 +15,7 @@ describe('Rating', () => {
     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
 
@@ -588,7 +588,7 @@ describe('Rating', () => {
       })
     })
 
-    it('should increase value with ArrowUp', async () => {
+    it('should not change value with ArrowUp (reserved for spatial navigation)', async () => {
       await usingAsync(new Injector(), async (injector) => {
         const rootElement = document.getElementById('root') as HTMLDivElement
         const onchange = vi.fn()
@@ -606,11 +606,11 @@ describe('Rating', () => {
 
         await flushUpdates()
 
-        expect(onchange).toHaveBeenCalledWith(3)
+        expect(onchange).not.toHaveBeenCalled()
       })
     })
 
-    it('should decrease value with ArrowDown', async () => {
+    it('should not change value with ArrowDown (reserved for spatial navigation)', async () => {
       await usingAsync(new Injector(), async (injector) => {
         const rootElement = document.getElementById('root') as HTMLDivElement
         const onchange = vi.fn()
@@ -628,7 +628,7 @@ describe('Rating', () => {
 
         await flushUpdates()
 
-        expect(onchange).toHaveBeenCalledWith(2)
+        expect(onchange).not.toHaveBeenCalled()
       })
     })
 
@@ -863,4 +863,199 @@ describe('Rating', () => {
       })
     })
   })
+
+  describe('spatial navigation integration', () => {
+    it('should set data-spatial-nav-target on the host element', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: <Rating value={3} />,
+        })
+
+        await flushUpdates()
+
+        const wrapper = document.querySelector('shade-rating') as HTMLElement
+        expect(wrapper.hasAttribute('data-spatial-nav-target')).toBe(true)
+      })
+    })
+
+    it('should not set data-spatial-nav-target when readOnly', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: <Rating value={3} readOnly />,
+        })
+
+        await flushUpdates()
+
+        const wrapper = document.querySelector('shade-rating') as HTMLElement
+        expect(wrapper.hasAttribute('data-spatial-nav-target')).toBe(false)
+      })
+    })
+
+    it('should not set data-spatial-nav-target when disabled', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: <Rating value={3} disabled />,
+        })
+
+        await flushUpdates()
+
+        const wrapper = document.querySelector('shade-rating') as HTMLElement
+        expect(wrapper.hasAttribute('data-spatial-nav-target')).toBe(false)
+      })
+    })
+
+    it('should set aria-orientation to horizontal', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: <Rating value={3} />,
+        })
+
+        await flushUpdates()
+
+        const wrapper = document.querySelector('shade-rating') as HTMLElement
+        expect(wrapper.getAttribute('aria-orientation')).toBe('horizontal')
+      })
+    })
+
+    it('should not preventDefault on ArrowRight when at max value', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+        const onchange = vi.fn()
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: <Rating value={5} max={5} onValueChange={onchange} />,
+        })
+
+        await flushUpdates()
+
+        const ratingEl = document.querySelector('shade-rating') as HTMLElement
+        const event = new KeyboardEvent('keydown', { key: 'ArrowRight', bubbles: true, cancelable: true })
+        ratingEl.dispatchEvent(event)
+
+        await flushUpdates()
+
+        expect(onchange).not.toHaveBeenCalled()
+        expect(event.defaultPrevented).toBe(false)
+      })
+    })
+
+    it('should not preventDefault on ArrowLeft when at min value', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+        const onchange = vi.fn()
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: <Rating value={0} onValueChange={onchange} />,
+        })
+
+        await flushUpdates()
+
+        const ratingEl = document.querySelector('shade-rating') as HTMLElement
+        const event = new KeyboardEvent('keydown', { key: 'ArrowLeft', bubbles: true, cancelable: true })
+        ratingEl.dispatchEvent(event)
+
+        await flushUpdates()
+
+        expect(onchange).not.toHaveBeenCalled()
+        expect(event.defaultPrevented).toBe(false)
+      })
+    })
+
+    it('should preventDefault on ArrowRight when value can increase', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+        const onchange = vi.fn()
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: <Rating value={3} max={5} onValueChange={onchange} />,
+        })
+
+        await flushUpdates()
+
+        const ratingEl = document.querySelector('shade-rating') as HTMLElement
+        const event = new KeyboardEvent('keydown', { key: 'ArrowRight', bubbles: true, cancelable: true })
+        ratingEl.dispatchEvent(event)
+
+        await flushUpdates()
+
+        expect(onchange).toHaveBeenCalledWith(4)
+        expect(event.defaultPrevented).toBe(true)
+      })
+    })
+
+    it('should preventDefault on ArrowLeft when value can decrease', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+        const onchange = vi.fn()
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: <Rating value={3} onValueChange={onchange} />,
+        })
+
+        await flushUpdates()
+
+        const ratingEl = document.querySelector('shade-rating') as HTMLElement
+        const event = new KeyboardEvent('keydown', { key: 'ArrowLeft', bubbles: true, cancelable: true })
+        ratingEl.dispatchEvent(event)
+
+        await flushUpdates()
+
+        expect(onchange).toHaveBeenCalledWith(2)
+        expect(event.defaultPrevented).toBe(true)
+      })
+    })
+
+    it('should not preventDefault on ArrowUp or ArrowDown', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+        const onchange = vi.fn()
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: <Rating value={3} onValueChange={onchange} />,
+        })
+
+        await flushUpdates()
+
+        const ratingEl = document.querySelector('shade-rating') as HTMLElement
+
+        const upEvent = new KeyboardEvent('keydown', { key: 'ArrowUp', bubbles: true, cancelable: true })
+        ratingEl.dispatchEvent(upEvent)
+
+        const downEvent = new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true, cancelable: true })
+        ratingEl.dispatchEvent(downEvent)
+
+        await flushUpdates()
+
+        expect(onchange).not.toHaveBeenCalled()
+        expect(upEvent.defaultPrevented).toBe(false)
+        expect(downEvent.defaultPrevented).toBe(false)
+      })
+    })
+  })
 })

package/src/components/rating.tsx

@@ -62,7 +62,7 @@ export type RatingProps = {
  * keyboard navigation, and theme integration.
  */
 export const Rating = Shade<RatingProps>({
-  shadowDomName: 'shade-rating',
+  customElementName: 'shade-rating',
   css: {
     display: 'inline-flex',
     fontFamily: cssVariableTheme.typography.fontFamily,
@@ -114,8 +114,7 @@ export const Rating = Shade<RatingProps>({
 
     '&:focus-visible': {
       outline: 'none',
-      boxShadow: cssVariableTheme.action.focusRing,
-      borderRadius: cssVariableTheme.shape.borderRadius.xs,
+      boxShadow: `0 0 0 2px ${cssVariableTheme.palette.primary.main} inset`,
     },
 
     '&[data-size="small"] .rating-star': {
@@ -159,46 +158,53 @@ export const Rating = Shade<RatingProps>({
     useHostProps({
       'data-size': props.size || 'medium',
       style: { '--rating-color': color },
+      ...(isInteractive ? { 'data-spatial-nav-target': '' } : {}),
       ...(props.disabled ? { 'data-disabled': '', 'aria-disabled': 'true' } : {}),
       ...(props.readOnly ? { 'data-readonly': '', 'aria-readonly': 'true' } : {}),
       ...(isInteractive
         ? {
             role: 'slider',
-            tabindex: '0',
+            tabIndex: 0,
             'aria-valuenow': String(value),
             'aria-valuemin': '0',
             'aria-valuemax': String(max),
             'aria-label': 'Rating',
+            'aria-orientation': 'horizontal',
             onkeydown: (ev: KeyboardEvent) => {
               const step = precision === 0.5 ? 0.5 : 1
-              let newValue: number
 
               switch (ev.key) {
-                case 'ArrowRight':
-                case 'ArrowUp':
-                  ev.preventDefault()
-                  newValue = Math.min(value + step, max)
-                  break
-                case 'ArrowLeft':
-                case 'ArrowDown':
-                  ev.preventDefault()
-                  newValue = Math.max(value - step, 0)
-                  break
+                case 'ArrowRight': {
+                  const newValue = Math.min(value + step, max)
+                  if (newValue !== value) {
+                    ev.preventDefault()
+                    props.onValueChange?.(newValue)
+                  }
+                  return
+                }
+                case 'ArrowLeft': {
+                  const newValue = Math.max(value - step, 0)
+                  if (newValue !== value) {
+                    ev.preventDefault()
+                    props.onValueChange?.(newValue)
+                  }
+                  return
+                }
                 case 'Home':
                   ev.preventDefault()
-                  newValue = 0
-                  break
+                  if (value !== 0) {
+                    props.onValueChange?.(0)
+                  }
+                  return
                 case 'End':
                   ev.preventDefault()
-                  newValue = max
-                  break
+                  if (value !== max) {
+                    props.onValueChange?.(max)
+                  }
+                  return
                 default:
                   return
               }
-
-              if (newValue !== value) {
-                props.onValueChange?.(newValue)
-              }
             },
           }
         : {

package/src/components/result.tsx

@@ -68,7 +68,7 @@ const defaultTitles: Record<ResultStatus, string> = {
  * Supports success, error, warning, info statuses and common HTTP error codes (403, 404, 500).
  */
 export const Result = Shade<ResultProps>({
-  shadowDomName: 'shade-result',
+  customElementName: 'shade-result',
   css: {
     display: 'flex',
     flexDirection: 'column',

package/src/components/skeleton.tsx

@@ -10,7 +10,7 @@ export type SkeletonProps = {
 }
 
 export const Skeleton = Shade<SkeletonProps>({
-  shadowDomName: 'shade-skeleton',
+  customElementName: 'shade-skeleton',
   render: ({ props, useRef }) => {
     const wrapperRef = useRef<HTMLDivElement>('wrapper')
     const { delay = 1500 } = props