@furystack/shades-common-components 13.5.0 → 15.0.0

package/src/components/tree/tree.spec.tsx

@@ -501,8 +501,107 @@ describe('Tree', () => {
     })
   })
 
+  describe('item spatial navigation attributes', () => {
+    it('should set data-spatial-nav-target on tree items', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+        const treeData = createTreeData()
+        const service = createTestService()
+
+        service.rootItems.setValue(treeData)
+        service.updateFlattenedNodes()
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: (
+            <Tree<TestNode>
+              rootItems={treeData}
+              treeService={service}
+              renderItem={(node) => <span>{node.name}</span>}
+            />
+          ),
+        })
+
+        await flushUpdates()
+
+        const items = document.querySelectorAll('shade-tree-item')
+        for (const item of items) {
+          expect(item.hasAttribute('data-spatial-nav-target')).toBe(true)
+        }
+
+        service[Symbol.dispose]()
+      })
+    })
+
+    it('should set tabIndex 0 on focused item and -1 on others', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+        const treeData = createTreeData()
+        const service = createTestService()
+
+        service.rootItems.setValue(treeData)
+        service.updateFlattenedNodes()
+        service.focusedItem.setValue(treeData[1])
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: (
+            <Tree<TestNode>
+              rootItems={treeData}
+              treeService={service}
+              renderItem={(node) => <span>{node.name}</span>}
+            />
+          ),
+        })
+
+        await flushUpdates()
+
+        const items = document.querySelectorAll<HTMLDivElement>('shade-tree-item')
+        expect(items[0]?.tabIndex).toBe(-1)
+        expect(items[1]?.tabIndex).toBe(0)
+
+        service[Symbol.dispose]()
+      })
+    })
+
+    it('should sync focusedItem on item onfocus', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const rootElement = document.getElementById('root') as HTMLDivElement
+        const treeData = createTreeData()
+        const service = createTestService()
+
+        service.rootItems.setValue(treeData)
+        service.updateFlattenedNodes()
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: (
+            <Tree<TestNode>
+              rootItems={treeData}
+              treeService={service}
+              renderItem={(node) => <span>{node.name}</span>}
+            />
+          ),
+        })
+
+        await flushUpdates()
+
+        const items = document.querySelectorAll('shade-tree-item')
+        items[1]?.dispatchEvent(new FocusEvent('focus'))
+
+        expect(service.focusedItem.getValue()).toEqual(treeData[1])
+        expect(service.hasFocus.getValue()).toBe(true)
+
+        service[Symbol.dispose]()
+      })
+    })
+  })
+
   describe('keyboard navigation', () => {
-    it('should handle ArrowDown to move focus to next item', async () => {
+    it('should not handle ArrowDown (delegated to spatial navigation)', async () => {
       await usingAsync(new Injector(), async (injector) => {
         const rootElement = document.getElementById('root') as HTMLDivElement
         const treeData = createTreeData()
@@ -529,7 +628,7 @@ describe('Tree', () => {
 
         window.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true }))
 
-        expect(service.focusedItem.getValue()).toEqual(treeData[1])
+        expect(service.focusedItem.getValue()).toEqual(treeData[0])
 
         service[Symbol.dispose]()
       })

package/src/components/tree/tree.tsx

@@ -5,6 +5,8 @@ import { cssVariableTheme } from '../../services/css-variable-theme.js'
 import type { TreeService } from '../../services/tree-service.js'
 import { TreeItem } from './tree-item.js'
 
+let nextTreeId = 0
+
 export type TreeItemState = {
   isFocused: boolean
   isSelected: boolean
@@ -21,17 +23,26 @@ export type TreeProps<T> = {
   variant?: 'contained' | 'outlined'
   onItemActivate?: (item: T) => void
   onSelectionChange?: (selected: T[]) => void
+  /**
+   * Section name for spatial navigation scoping.
+   * Sets `data-nav-section` on the tree host so that SpatialNavigationService
+   * constrains arrow-key navigation within the tree.
+   * Auto-generated per instance when not provided.
+   */
+  navSection?: string
 } & PartialElement<HTMLDivElement>
 
 export const Tree: <T>(props: TreeProps<T>, children: ChildrenList) => JSX.Element<any> = Shade({
-  shadowDomName: 'shade-tree',
+  customElementName: 'shade-tree',
   css: {
     display: 'block',
     fontFamily: cssVariableTheme.typography.fontFamily,
     width: '100%',
     overflow: 'auto',
   },
-  render: ({ props, useDisposable, useObservable, useHostProps }) => {
+  render: ({ props, useDisposable, useObservable, useHostProps, useState }) => {
+    const [navSectionId] = useState('navSectionId', String(nextTreeId++))
+
     useDisposable('keydown-handler', () => {
       const listener = (ev: KeyboardEvent) => {
         props.treeService.handleKeyDown(ev)
@@ -43,8 +54,8 @@ export const Tree: <T>(props: TreeProps<T>, children: ChildrenList) => JSX.Eleme
           }
         }
       }
-      window.addEventListener('keydown', listener)
-      return { [Symbol.dispose]: () => window.removeEventListener('keydown', listener) }
+      window.addEventListener('keydown', listener, true)
+      return { [Symbol.dispose]: () => window.removeEventListener('keydown', listener, true) }
     })
 
     if (props.treeService.rootItems.getValue() !== props.rootItems) {
@@ -82,9 +93,16 @@ export const Tree: <T>(props: TreeProps<T>, children: ChildrenList) => JSX.Eleme
     useHostProps({
       'data-variant': props.variant || undefined,
       'data-tree-instance-id': treeInstanceId.value,
+      'data-nav-section': props.navSection ?? `tree-${navSectionId}`,
       role: 'tree',
       'aria-multiselectable': 'true',
       onclick: () => props.treeService.hasFocus.setValue(true),
+      onfocusout: (ev: FocusEvent) => {
+        const hostEl = ev.currentTarget as HTMLElement
+        if (!ev.relatedTarget || !hostEl.contains(ev.relatedTarget as Node)) {
+          props.treeService.hasFocus.setValue(false)
+        }
+      },
     })
 
     const [flattenedNodes] = useObservable('flattenedNodes', props.treeService.flattenedNodes)

package/src/components/typography.tsx

@@ -298,7 +298,7 @@ const shadesByTag = {} as Record<TypographyTag, (props: TypographyProps, childre
 
 for (const [tag, elementBase] of tagConfigs) {
   shadesByTag[tag] = Shade<TypographyProps>({
-    shadowDomName: `shade-typography-${tag}`,
+    customElementName: `shade-typography-${tag}`,
     elementBase,
     elementBaseName: tag,
     css: typographyCss,

package/src/components/wizard/index.spec.tsx

@@ -7,7 +7,7 @@ import type { WizardStepProps } from './index.js'
 import { Wizard } from './index.js'
 
 const Step1 = Shade<WizardStepProps>({
-  shadowDomName: 'wizard-test-step-1',
+  customElementName: 'wizard-test-step-1',
   render: ({ props }) => (
     <div className="wizard-step" data-step-name="step1">
       <span className="step-info">
@@ -25,7 +25,7 @@ const Step1 = Shade<WizardStepProps>({
 })
 
 const Step2 = Shade<WizardStepProps>({
-  shadowDomName: 'wizard-test-step-2',
+  customElementName: 'wizard-test-step-2',
   render: ({ props }) => (
     <div className="wizard-step" data-step-name="step2">
       <span className="step-info">
@@ -43,7 +43,7 @@ const Step2 = Shade<WizardStepProps>({
 })
 
 const Step3 = Shade<WizardStepProps>({
-  shadowDomName: 'wizard-test-step-3',
+  customElementName: 'wizard-test-step-3',
   render: ({ props }) => (
     <div className="wizard-step" data-step-name="step3">
       <span className="step-info">

package/src/components/wizard/index.tsx

@@ -43,7 +43,7 @@ export interface WizardProps {
 }
 
 export const Wizard = Shade<WizardProps>({
-  shadowDomName: 'shades-wizard',
+  customElementName: 'shades-wizard',
   css: {
     fontFamily: cssVariableTheme.typography.fontFamily,
     '& .wizard-container': {

package/src/services/collection-service.spec.ts

@@ -206,8 +206,8 @@ describe('CollectionService', () => {
       })
     })
 
-    describe('ArrowUp key', () => {
-      it('Should move focus to previous entry', () => {
+    describe('Arrow keys', () => {
+      it('Should move focus to the previous entry on ArrowUp', () => {
         const testEntries = createTestEntries()
         using(new CollectionService<TestEntry>({}), (service) => {
           service.data.setValue({ count: 3, entries: testEntries })
@@ -222,22 +222,22 @@ describe('CollectionService', () => {
         })
       })
 
-      it('Should not go below index 0', () => {
+      it('Should not preventDefault ArrowUp at the first entry', () => {
         const testEntries = createTestEntries()
         using(new CollectionService<TestEntry>({}), (service) => {
           service.data.setValue({ count: 3, entries: testEntries })
           service.hasFocus.setValue(true)
           service.focusedEntry.setValue(testEntries[0])
 
-          service.handleKeyDown(createKeyboardEvent('ArrowUp'))
+          const ev = createKeyboardEvent('ArrowUp')
+          service.handleKeyDown(ev)
 
+          expect(ev.preventDefault).not.toHaveBeenCalled()
           expect(service.focusedEntry.getValue()).toBe(testEntries[0])
         })
       })
-    })
 
-    describe('ArrowDown key', () => {
-      it('Should move focus to next entry', () => {
+      it('Should move focus to the next entry on ArrowDown', () => {
         const testEntries = createTestEntries()
         using(new CollectionService<TestEntry>({}), (service) => {
           service.data.setValue({ count: 3, entries: testEntries })
@@ -252,60 +252,69 @@ describe('CollectionService', () => {
         })
       })
 
-      it('Should not exceed the last entry', () => {
+      it('Should not preventDefault ArrowDown at the last entry', () => {
         const testEntries = createTestEntries()
         using(new CollectionService<TestEntry>({}), (service) => {
           service.data.setValue({ count: 3, entries: testEntries })
           service.hasFocus.setValue(true)
           service.focusedEntry.setValue(testEntries[2])
 
-          service.handleKeyDown(createKeyboardEvent('ArrowDown'))
+          const ev = createKeyboardEvent('ArrowDown')
+          service.handleKeyDown(ev)
 
+          expect(ev.preventDefault).not.toHaveBeenCalled()
           expect(service.focusedEntry.getValue()).toBe(testEntries[2])
         })
       })
-    })
 
-    describe('Home key', () => {
-      it('Should focus the first entry', () => {
+      it('Should not handle arrow keys when focusedEntry is undefined', () => {
         const testEntries = createTestEntries()
         using(new CollectionService<TestEntry>({}), (service) => {
           service.data.setValue({ count: 3, entries: testEntries })
           service.hasFocus.setValue(true)
-          service.focusedEntry.setValue(testEntries[2])
+          service.focusedEntry.setValue(undefined)
 
-          service.handleKeyDown(createKeyboardEvent('Home'))
+          const evDown = createKeyboardEvent('ArrowDown')
+          service.handleKeyDown(evDown)
+          expect(evDown.preventDefault).not.toHaveBeenCalled()
 
-          expect(service.focusedEntry.getValue()).toBe(testEntries[0])
+          const evUp = createKeyboardEvent('ArrowUp')
+          service.handleKeyDown(evUp)
+          expect(evUp.preventDefault).not.toHaveBeenCalled()
         })
       })
     })
 
-    describe('End key', () => {
-      it('Should focus the last entry', () => {
+    describe('Home key', () => {
+      it('Should focus the first entry and preventDefault', () => {
         const testEntries = createTestEntries()
         using(new CollectionService<TestEntry>({}), (service) => {
           service.data.setValue({ count: 3, entries: testEntries })
           service.hasFocus.setValue(true)
-          service.focusedEntry.setValue(testEntries[0])
+          service.focusedEntry.setValue(testEntries[2])
 
-          service.handleKeyDown(createKeyboardEvent('End'))
+          const ev = createKeyboardEvent('Home')
+          service.handleKeyDown(ev)
 
-          expect(service.focusedEntry.getValue()).toBe(testEntries[2])
+          expect(ev.preventDefault).toHaveBeenCalled()
+          expect(service.focusedEntry.getValue()).toBe(testEntries[0])
         })
       })
     })
 
-    describe('Tab key', () => {
-      it('Should toggle hasFocus', () => {
+    describe('End key', () => {
+      it('Should focus the last entry and preventDefault', () => {
         const testEntries = createTestEntries()
         using(new CollectionService<TestEntry>({}), (service) => {
           service.data.setValue({ count: 3, entries: testEntries })
           service.hasFocus.setValue(true)
+          service.focusedEntry.setValue(testEntries[0])
 
-          service.handleKeyDown(createKeyboardEvent('Tab'))
+          const ev = createKeyboardEvent('End')
+          service.handleKeyDown(ev)
 
-          expect(service.hasFocus.getValue()).toBe(false)
+          expect(ev.preventDefault).toHaveBeenCalled()
+          expect(service.focusedEntry.getValue()).toBe(testEntries[2])
         })
       })
     })

package/src/services/collection-service.ts

@@ -62,6 +62,19 @@ export class CollectionService<T>
 
   public focusedEntry = new ObservableValue<T | undefined>(undefined)
 
+  /**
+   * Stores the focused entry captured on pointerdown, before the focus event
+   * can update focusedEntry. Used as the anchor for SHIFT+click range selection.
+   * Call {@link setFocusAnchor} from `onpointerdown` to snapshot the anchor
+   * before focus shifts.
+   */
+  private focusAnchor: T | undefined = undefined
+
+  /** Snapshot the current focused entry as the anchor for SHIFT+click range selection. */
+  public setFocusAnchor(): void {
+    this.focusAnchor = this.focusedEntry.getValue()
+  }
+
   public selection = new ObservableValue<T[]>([])
 
   public searchTerm = new ObservableValue('')
@@ -107,28 +120,36 @@ export class CollectionService<T>
           }
 
           break
-        case 'ArrowUp':
-          ev.preventDefault()
-          this.focusedEntry.setValue(entries[Math.max(0, entries.findIndex((e) => e === focusedEntry) - 1)])
+        case 'ArrowDown': {
+          if (focusedEntry !== undefined) {
+            const currentIndex = entries.indexOf(focusedEntry)
+            if (currentIndex >= 0 && currentIndex < entries.length - 1) {
+              ev.preventDefault()
+              this.focusedEntry.setValue(entries[currentIndex + 1])
+            }
+          }
           break
-        case 'ArrowDown':
-          ev.preventDefault()
-          this.focusedEntry.setValue(
-            entries[Math.min(entries.length - 1, entries.findIndex((e) => e === focusedEntry) + 1)],
-          )
+        }
+        case 'ArrowUp': {
+          if (focusedEntry !== undefined) {
+            const currentIndex = entries.indexOf(focusedEntry)
+            if (currentIndex > 0) {
+              ev.preventDefault()
+              this.focusedEntry.setValue(entries[currentIndex - 1])
+            }
+          }
           break
+        }
         case 'Home': {
+          ev.preventDefault()
           this.focusedEntry.setValue(entries[0])
           break
         }
         case 'End': {
+          ev.preventDefault()
           this.focusedEntry.setValue(entries[entries.length - 1])
           break
         }
-        case 'Tab': {
-          this.hasFocus.setValue(!hasFocus)
-          break
-        }
         case 'Escape': {
           this.searchTerm.setValue('')
           this.selection.setValue([])
@@ -152,7 +173,8 @@ export class CollectionService<T>
   public handleRowClick(entry: T, ev: MouseEvent) {
     this.emit('onRowClick', entry)
     const currentSelectionValue = this.selection.getValue()
-    const lastFocused = this.focusedEntry.getValue()
+    const lastFocused = this.focusAnchor ?? this.focusedEntry.getValue()
+    this.focusAnchor = undefined
     if (ev.ctrlKey) {
       if (currentSelectionValue.includes(entry)) {
         this.selection.setValue(currentSelectionValue.filter((s) => s !== entry))

package/src/services/css-variable-theme.spec.ts

@@ -35,6 +35,7 @@ describe('css-variable-theme', () => {
       expect(cssVariableTheme.action.selectedBackground).toBe('var(--shades-theme-action-selected-background)')
       expect(cssVariableTheme.action.activeBackground).toBe('var(--shades-theme-action-active-background)')
       expect(cssVariableTheme.action.focusRing).toBe('var(--shades-theme-action-focus-ring)')
+      expect(cssVariableTheme.action.focusOutline).toBe('var(--shades-theme-action-focus-outline)')
       expect(cssVariableTheme.action.disabledOpacity).toBe('var(--shades-theme-action-disabled-opacity)')
       expect(cssVariableTheme.action.backdrop).toBe('var(--shades-theme-action-backdrop)')
       expect(cssVariableTheme.action.subtleBorder).toBe('var(--shades-theme-action-subtle-border)')

package/src/services/css-variable-theme.ts

@@ -75,6 +75,7 @@ export const cssVariableTheme = {
     selectedBackground: 'var(--shades-theme-action-selected-background)',
     activeBackground: 'var(--shades-theme-action-active-background)',
     focusRing: 'var(--shades-theme-action-focus-ring)',
+    focusOutline: 'var(--shades-theme-action-focus-outline)',
     disabledOpacity: 'var(--shades-theme-action-disabled-opacity)',
     backdrop: 'var(--shades-theme-action-backdrop)',
     subtleBorder: 'var(--shades-theme-action-subtle-border)',
@@ -176,6 +177,30 @@ export const cssVariableTheme = {
 export const buildTransition = (...specs: Array<[property: string, duration: string, easing: string]>): string =>
   specs.map(([prop, dur, ease]) => `${prop} ${dur} ${ease}`).join(', ')
 
+const FOCUS_STYLES_ID = 'shades-focus-visible-styles'
+
+/**
+ * Injects global `:focus-visible` styles using the theme's `focusOutline` CSS variable.
+ * Ensures keyboard/spatial navigation focus is visible while mouse clicks produce no outline.
+ * Safe to call multiple times — the style element is only created once.
+ */
+export const injectFocusVisibleStyles = (): void => {
+  if (document.getElementById(FOCUS_STYLES_ID)) return
+
+  const style = document.createElement('style')
+  style.id = FOCUS_STYLES_ID
+  style.textContent = `
+:focus-visible {
+  outline: ${cssVariableTheme.action.focusOutline};
+  outline-offset: 2px;
+}
+:focus:not(:focus-visible) {
+  outline: none;
+}
+`
+  document.head.appendChild(style)
+}
+
 const extractVarName = (key: string): string => key.replace(/^var\(/, '').replace(/[,)].*/, '')
 
 export const setCssVariable = (key: string, value: string, root: HTMLElement) => {

package/src/services/list-service.spec.ts

@@ -1,5 +1,5 @@
 import { using } from '@furystack/utils'
-import { describe, expect, it } from 'vitest'
+import { describe, expect, it, vi } from 'vitest'
 import { ListService } from './list-service.js'
 
 type TestItem = { id: number; name: string }
@@ -80,51 +80,33 @@ describe('ListService', () => {
       })
     })
 
-    it('should handle ArrowDown to move focus to next item', () => {
+    it('should not handle ArrowDown (delegated to spatial navigation)', () => {
       const { service, items } = createTestService()
       using(service, () => {
         service.hasFocus.setValue(true)
         service.focusedItem.setValue(items[0])
 
-        service.handleKeyDown(new KeyboardEvent('keydown', { key: 'ArrowDown' }))
-
-        expect(service.focusedItem.getValue()).toBe(items[1])
-      })
-    })
-
-    it('should not move past last item on ArrowDown', () => {
-      const { service, items } = createTestService()
-      using(service, () => {
-        service.hasFocus.setValue(true)
-        service.focusedItem.setValue(items[2])
-
-        service.handleKeyDown(new KeyboardEvent('keydown', { key: 'ArrowDown' }))
-
-        expect(service.focusedItem.getValue()).toBe(items[2])
-      })
-    })
-
-    it('should handle ArrowUp to move focus to previous item', () => {
-      const { service, items } = createTestService()
-      using(service, () => {
-        service.hasFocus.setValue(true)
-        service.focusedItem.setValue(items[1])
-
-        service.handleKeyDown(new KeyboardEvent('keydown', { key: 'ArrowUp' }))
+        const ev = new KeyboardEvent('keydown', { key: 'ArrowDown', cancelable: true })
+        const preventSpy = vi.spyOn(ev, 'preventDefault')
+        service.handleKeyDown(ev)
 
         expect(service.focusedItem.getValue()).toBe(items[0])
+        expect(preventSpy).not.toHaveBeenCalled()
       })
     })
 
-    it('should not move past first item on ArrowUp', () => {
+    it('should not handle ArrowUp (delegated to spatial navigation)', () => {
       const { service, items } = createTestService()
       using(service, () => {
         service.hasFocus.setValue(true)
-        service.focusedItem.setValue(items[0])
+        service.focusedItem.setValue(items[1])
 
-        service.handleKeyDown(new KeyboardEvent('keydown', { key: 'ArrowUp' }))
+        const ev = new KeyboardEvent('keydown', { key: 'ArrowUp', cancelable: true })
+        const preventSpy = vi.spyOn(ev, 'preventDefault')
+        service.handleKeyDown(ev)
 
-        expect(service.focusedItem.getValue()).toBe(items[0])
+        expect(service.focusedItem.getValue()).toBe(items[1])
+        expect(preventSpy).not.toHaveBeenCalled()
       })
     })
 
@@ -232,17 +214,6 @@ describe('ListService', () => {
       })
     })
 
-    it('should handle Tab to toggle focus', () => {
-      const { service } = createTestService()
-      using(service, () => {
-        service.hasFocus.setValue(true)
-
-        service.handleKeyDown(new KeyboardEvent('keydown', { key: 'Tab' }))
-
-        expect(service.hasFocus.getValue()).toBe(false)
-      })
-    })
-
     it('should handle Escape to clear selection and search term', () => {
       const { service, items } = createTestService()
       using(service, () => {

package/src/services/list-service.ts

@@ -41,6 +41,19 @@ export class ListService<T> implements Disposable {
 
   public focusedItem = new ObservableValue<T | undefined>(undefined)
 
+  /**
+   * Stores the focused item captured on pointerdown, before the focus event
+   * can update focusedItem. Used as the anchor for SHIFT+click range selection.
+   * Call {@link setFocusAnchor} from `onpointerdown` to snapshot the anchor
+   * before focus shifts.
+   */
+  private focusAnchor: T | undefined = undefined
+
+  /** Snapshot the current focused item as the anchor for SHIFT+click range selection. */
+  public setFocusAnchor(): void {
+    this.focusAnchor = this.focusedItem.getValue()
+  }
+
   public selection = new ObservableValue<T[]>([])
 
   public searchTerm = new ObservableValue('')
@@ -89,14 +102,6 @@ export class ListService<T> implements Disposable {
             this.focusedItem.setValue(items[items.findIndex((e) => e === this.focusedItem.getValue()) + 1])
           }
           break
-        case 'ArrowUp':
-          ev.preventDefault()
-          this.focusedItem.setValue(items[Math.max(0, items.findIndex((e) => e === focusedItem) - 1)])
-          break
-        case 'ArrowDown':
-          ev.preventDefault()
-          this.focusedItem.setValue(items[Math.min(items.length - 1, items.findIndex((e) => e === focusedItem) + 1)])
-          break
         case 'Home': {
           ev.preventDefault()
           this.focusedItem.setValue(items[0])
@@ -107,10 +112,6 @@ export class ListService<T> implements Disposable {
           this.focusedItem.setValue(items[items.length - 1])
           break
         }
-        case 'Tab': {
-          this.hasFocus.setValue(!hasFocus)
-          break
-        }
         case 'Escape': {
           ev.preventDefault()
           this.searchTerm.setValue('')
@@ -134,7 +135,8 @@ export class ListService<T> implements Disposable {
 
   public handleItemClick(item: T, ev: MouseEvent) {
     const currentSelectionValue = this.selection.getValue()
-    const lastFocused = this.focusedItem.getValue()
+    const lastFocused = this.focusAnchor ?? this.focusedItem.getValue()
+    this.focusAnchor = undefined
     if (ev.ctrlKey) {
       if (currentSelectionValue.includes(item)) {
         this.selection.setValue(currentSelectionValue.filter((s) => s !== item))

package/src/services/theme-provider-service.ts

@@ -101,6 +101,8 @@ export type ActionColors = {
   activeBackground: Color
   /** Box-shadow value for focus ring indicators */
   focusRing: string
+  /** CSS outline value for keyboard/spatial focus indicators (e.g. '2px solid #3f51b5') */
+  focusOutline: string
   /** Opacity value for disabled elements (e.g. '0.6') */
   disabledOpacity: string
   /** Overlay background color for backdrops (drawers, modals) */