@furystack/shades-common-components 13.0.1 → 13.2.0

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

@@ -718,6 +718,70 @@ describe('Drawer component', () => {
     })
   })
 
+  describe('cleanup on disposal', () => {
+    it('should call removeDrawer on LayoutService when the component is removed from DOM', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const layoutService = new LayoutService(createMockElement())
+        injector.setExplicitInstance(layoutService, LayoutService)
+        const rootElement = document.getElementById('root') as HTMLDivElement
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: (
+            <Drawer position="left" variant="collapsible">
+              <div>Drawer</div>
+            </Drawer>
+          ),
+        })
+
+        await flushUpdates()
+        expect(layoutService.drawerState.getValue().left).toBeDefined()
+
+        const removeDrawerSpy = vi.spyOn(layoutService, 'removeDrawer')
+        const drawer = document.querySelector('shade-drawer') as HTMLElement
+        drawer.remove()
+        await flushUpdates()
+        await new Promise((resolve) => setTimeout(resolve, 0))
+
+        expect(removeDrawerSpy).toHaveBeenCalledWith('left')
+      })
+    })
+
+    it('should only clean up its own drawer position on disposal', async () => {
+      await usingAsync(new Injector(), async (injector) => {
+        const layoutService = new LayoutService(createMockElement())
+        injector.setExplicitInstance(layoutService, LayoutService)
+        const rootElement = document.getElementById('root') as HTMLDivElement
+
+        layoutService.initDrawer('left', { open: true, width: '240px', variant: 'collapsible' })
+
+        initializeShadeRoot({
+          injector,
+          rootElement,
+          jsxElement: (
+            <Drawer position="right" variant="temporary">
+              <div>Right Drawer</div>
+            </Drawer>
+          ),
+        })
+
+        await flushUpdates()
+        expect(layoutService.drawerState.getValue().right).toBeDefined()
+        expect(layoutService.drawerState.getValue().left).toBeDefined()
+
+        const removeDrawerSpy = vi.spyOn(layoutService, 'removeDrawer')
+        const drawer = document.querySelector('shade-drawer') as HTMLElement
+        drawer.remove()
+        await flushUpdates()
+        await new Promise((resolve) => setTimeout(resolve, 0))
+
+        expect(removeDrawerSpy).toHaveBeenCalledWith('right')
+        expect(removeDrawerSpy).not.toHaveBeenCalledWith('left')
+      })
+    })
+  })
+
   describe('preserving user interactions', () => {
     it('should not reset drawer state if already initialized', async () => {
       await usingAsync(new Injector(), async (injector) => {

package/src/components/drawer/index.tsx

@@ -143,6 +143,11 @@ export const Drawer = Shade<DrawerProps>({
       layoutService.setDrawerWidth(position, width)
     }
 
+    // Clean up drawer state from LayoutService when this component is disposed
+    useDisposable('drawer-cleanup', () => ({
+      [Symbol.dispose]: () => layoutService.removeDrawer(position),
+    }))
+
     // Subscribe to drawer state
     const [drawerState] = useObservable('drawerState', layoutService.drawerState)
     const isOpen = drawerState[position]?.open ?? false

package/src/components/noty-list.tsx

@@ -1,6 +1,5 @@
 import { createComponent, Shade } from '@furystack/shades'
 import { cssVariableTheme } from '../services/css-variable-theme.js'
-import { getTextColor } from '../services/get-text-color.js'
 import type { NotyModel } from '../services/noty-service.js'
 import { NotyService } from '../services/noty-service.js'
 import { ThemeProviderService } from '../services/theme-provider-service.js'
@@ -97,7 +96,6 @@ export const NotyComponent = Shade<{ model: NotyModel; onDismiss: () => void }>(
 
     const themeProvider = injector.getInstance(ThemeProviderService)
     const colors = themeProvider.theme.palette[props.model.type]
-    const textColor = getTextColor(colors.main)
 
     const removeSelf = async () => {
       const hostEl = wrapperRef.current?.closest('shade-noty') as HTMLElement | null
@@ -123,7 +121,7 @@ export const NotyComponent = Shade<{ model: NotyModel; onDismiss: () => void }>(
 
     useHostProps({
       'data-noty-type': props.model.type,
-      style: { '--noty-bg': colors.main, '--noty-text': textColor },
+      style: { '--noty-bg': colors.main, '--noty-text': colors.mainContrast },
     })
 
     return (

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

@@ -67,7 +67,7 @@ describe('css-variable-theme', () => {
       expect(cssVariableTheme.typography.fontWeight.bold).toBe('var(--shades-theme-typography-font-weight-bold)')
       expect(cssVariableTheme.typography.lineHeight.tight).toBe('var(--shades-theme-typography-line-height-tight)')
       expect(cssVariableTheme.typography.lineHeight.normal).toBe('var(--shades-theme-typography-line-height-normal)')
-      expect(cssVariableTheme.typography.textShadow).toBe('var(--shades-theme-typography-text-shadow, none)')
+      expect(cssVariableTheme.typography.textShadow).toBe('var(--shades-theme-typography-text-shadow)')
     })
 
     it('should have transition properties with CSS variable references', () => {
@@ -446,6 +446,48 @@ describe('css-variable-theme', () => {
       expect(root.style.getPropertyValue('--shades-theme-spacing-md')).toBe('16px')
       expect(root.style.getPropertyValue('--shades-theme-spacing-xl')).toBe('32px')
     })
+
+    it('should set CSS variables on a custom root element instead of :root', () => {
+      const customRoot = document.createElement('div')
+      document.body.appendChild(customRoot)
+
+      useThemeCssVariables(
+        {
+          text: { primary: '#ff0000' },
+          divider: '#00ff00',
+        },
+        customRoot,
+      )
+
+      expect(customRoot.style.getPropertyValue('--shades-theme-text-primary')).toBe('#ff0000')
+      expect(customRoot.style.getPropertyValue('--shades-theme-divider')).toBe('#00ff00')
+      expect(root.style.getPropertyValue('--shades-theme-text-primary')).toBe('')
+
+      customRoot.remove()
+    })
+
+    it('should scope nested palette variables to custom root element', () => {
+      const customRoot = document.createElement('div')
+      document.body.appendChild(customRoot)
+
+      useThemeCssVariables(
+        {
+          palette: {
+            primary: {
+              main: '#1976d2',
+              mainContrast: '#ffffff',
+            },
+          },
+        },
+        customRoot,
+      )
+
+      expect(customRoot.style.getPropertyValue('--shades-theme-palette-primary-main')).toBe('#1976d2')
+      expect(customRoot.style.getPropertyValue('--shades-theme-palette-primary-main-contrast')).toBe('#ffffff')
+      expect(root.style.getPropertyValue('--shades-theme-palette-primary-main')).toBe('')
+
+      customRoot.remove()
+    })
   })
 
   describe('buildTransition', () => {

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

@@ -17,7 +17,7 @@ export const cssVariableTheme = {
   background: {
     default: 'var(--shades-theme-background-default)',
     paper: 'var(--shades-theme-background-paper)',
-    paperImage: 'var(--shades-theme-background-paper-image, none)',
+    paperImage: 'var(--shades-theme-background-paper-image)',
   },
   palette: {
     primary: {
@@ -87,7 +87,7 @@ export const cssVariableTheme = {
       lg: 'var(--shades-theme-shape-border-radius-lg)',
       full: 'var(--shades-theme-shape-border-radius-full)',
     },
-    borderWidth: 'var(--shades-theme-shape-border-width, 0px)',
+    borderWidth: 'var(--shades-theme-shape-border-width)',
   },
   shadows: {
     none: 'var(--shades-theme-shadows-none)',
@@ -127,7 +127,7 @@ export const cssVariableTheme = {
       wider: 'var(--shades-theme-typography-letter-spacing-wider)',
       widest: 'var(--shades-theme-typography-letter-spacing-widest)',
     },
-    textShadow: 'var(--shades-theme-typography-text-shadow, none)',
+    textShadow: 'var(--shades-theme-typography-text-shadow)',
   },
   transitions: {
     duration: {
@@ -222,8 +222,8 @@ const assignValue = <T extends object>(
     }
   })
 }
-export const useThemeCssVariables = (theme: DeepPartial<Theme>) => {
-  const root = document.querySelector(':root') as HTMLElement
+export const useThemeCssVariables = (theme: DeepPartial<Theme>, root?: HTMLElement) => {
+  root ??= document.querySelector(':root') as HTMLElement
   assignValue(cssVariableTheme, theme, root)
 
   if (window.matchMedia?.('(prefers-reduced-motion: reduce)')?.matches) {

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

@@ -221,6 +221,15 @@ describe('LayoutService', () => {
         })
       })
 
+      it('should overwrite existing drawer config', () => {
+        using(new LayoutService(mockElement as unknown as HTMLElement), (service) => {
+          service.initDrawer('left', { open: true, width: '240px', variant: 'collapsible' })
+          service.initDrawer('left', { open: false, width: '300px', variant: 'permanent' })
+
+          expect(service.drawerState.getValue().left).toEqual({ open: false, width: '300px', variant: 'permanent' })
+        })
+      })
+
       it('should initialize drawer with all variant types', () => {
         using(new LayoutService(mockElement as unknown as HTMLElement), (service) => {
           service.initDrawer('left', { open: true, width: '240px', variant: 'permanent' })
@@ -234,6 +243,71 @@ describe('LayoutService', () => {
         })
       })
     })
+
+    describe('removeDrawer', () => {
+      it('should remove left drawer state', () => {
+        using(new LayoutService(mockElement as unknown as HTMLElement), (service) => {
+          service.initDrawer('left', { open: true, width: '240px', variant: 'collapsible' })
+
+          service.removeDrawer('left')
+
+          expect(service.drawerState.getValue().left).toBeUndefined()
+        })
+      })
+
+      it('should remove right drawer state', () => {
+        using(new LayoutService(mockElement as unknown as HTMLElement), (service) => {
+          service.initDrawer('right', { open: true, width: '200px', variant: 'temporary' })
+
+          service.removeDrawer('right')
+
+          expect(service.drawerState.getValue().right).toBeUndefined()
+        })
+      })
+
+      it('should not affect the other drawer when removing one', () => {
+        using(new LayoutService(mockElement as unknown as HTMLElement), (service) => {
+          service.initDrawer('left', { open: true, width: '240px', variant: 'collapsible' })
+          service.initDrawer('right', { open: true, width: '200px', variant: 'temporary' })
+
+          service.removeDrawer('left')
+
+          expect(service.drawerState.getValue().left).toBeUndefined()
+          expect(service.drawerState.getValue().right).toEqual({ open: true, width: '200px', variant: 'temporary' })
+        })
+      })
+
+      it('should be a no-op if the drawer does not exist', () => {
+        using(new LayoutService(mockElement as unknown as HTMLElement), (service) => {
+          const stateBefore = service.drawerState.getValue()
+
+          service.removeDrawer('left')
+
+          expect(service.drawerState.getValue()).toEqual(stateBefore)
+        })
+      })
+
+      it('should be a no-op if the service is already disposed', () => {
+        const service = new LayoutService(mockElement as unknown as HTMLElement)
+        service.initDrawer('left', { open: true, width: '240px', variant: 'collapsible' })
+        service[Symbol.dispose]()
+
+        expect(() => service.removeDrawer('left')).not.toThrow()
+      })
+
+      it('should reset CSS variables after removing a drawer', () => {
+        using(new LayoutService(mockElement as unknown as HTMLElement), (service) => {
+          service.initDrawer('left', { open: true, width: '240px', variant: 'collapsible' })
+          mockSetProperty.mockClear()
+
+          service.removeDrawer('left')
+
+          expect(mockSetProperty).toHaveBeenCalledWith('--layout-drawer-left-width', '0px')
+          expect(mockSetProperty).toHaveBeenCalledWith('--layout-drawer-left-configured-width', '0px')
+          expect(mockSetProperty).toHaveBeenCalledWith('--layout-content-margin-left', '0px')
+        })
+      })
+    })
   })
 
   describe('CSS Variables', () => {

package/src/services/layout-service.ts

@@ -237,6 +237,24 @@ export class LayoutService implements Disposable {
     })
   }
 
+  /**
+   * Removes a drawer from the state, clearing its configuration.
+   * Use this when a Drawer component is unmounted to prevent stale state
+   * from affecting content margins.
+   *
+   * @param position - Which drawer to remove ('left' or 'right')
+   */
+  public removeDrawer(position: 'left' | 'right'): void {
+    if (this.drawerState.isDisposed) return
+
+    const currentState = this.drawerState.getValue()
+
+    if (currentState[position]) {
+      const { [position]: _, ...rest } = currentState
+      this.drawerState.setValue(rest)
+    }
+  }
+
   /**
    * Sets the top gap spacing between AppBar and content.
    *

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

@@ -1,4 +1,4 @@
-import { beforeEach, describe, expect, it } from 'vitest'
+import { afterEach, beforeEach, describe, expect, it } from 'vitest'
 import { ThemeProviderService } from './theme-provider-service.js'
 
 describe('ThemeProviderService', () => {
@@ -19,4 +19,52 @@ describe('ThemeProviderService', () => {
       expect(service.theme.name).toBe('css-variable-theme')
     })
   })
+
+  describe('setAssignedTheme with custom root', () => {
+    let customRoot: HTMLElement
+
+    beforeEach(() => {
+      customRoot = document.createElement('div')
+      document.body.appendChild(customRoot)
+    })
+
+    afterEach(() => {
+      customRoot.remove()
+      document.documentElement.style.cssText = ''
+    })
+
+    it('should apply CSS variables to the provided root element', () => {
+      service.setAssignedTheme(
+        {
+          text: { primary: '#abcdef' },
+          palette: { primary: { main: '#123456' } },
+        },
+        customRoot,
+      )
+
+      expect(customRoot.style.getPropertyValue('--shades-theme-text-primary')).toBe('#abcdef')
+      expect(customRoot.style.getPropertyValue('--shades-theme-palette-primary-main')).toBe('#123456')
+      expect(document.documentElement.style.getPropertyValue('--shades-theme-text-primary')).toBe('')
+    })
+
+    it('should still update the stored theme when a custom root is provided', () => {
+      const theme = { text: { primary: '#111' } }
+      service.setAssignedTheme(theme, customRoot)
+
+      expect(service.getAssignedTheme()).toBe(theme)
+    })
+
+    it('should emit themeChanged when a custom root is provided', () => {
+      const theme = { text: { primary: '#222' } }
+      let emittedTheme: unknown
+
+      service.subscribe('themeChanged', (t) => {
+        emittedTheme = t
+      })
+
+      service.setAssignedTheme(theme, customRoot)
+
+      expect(emittedTheme).toBe(theme)
+    })
+  })
 })

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

@@ -85,8 +85,8 @@ export interface Background {
   default: Color
   /** Elevated surface background (cards, dialogs, etc.) */
   paper: Color
-  /** Optional CSS background-image for paper surfaces (e.g. a tiled texture) */
-  paperImage?: string
+  /** CSS background-image for paper surfaces (e.g. a tiled texture). Use 'none' for no image. */
+  paperImage: string
 }
 
 /**
@@ -131,8 +131,8 @@ export type BorderRadiusScale = {
 export type Shape = {
   /** Border radius scale */
   borderRadius: BorderRadiusScale
-  /** Border width for surface components (paper, card, etc.). Defaults to 0. */
-  borderWidth?: string
+  /** Border width for surface components (paper, card, etc.). Use '0px' for no border. */
+  borderWidth: string
 }
 
 /**
@@ -230,9 +230,9 @@ export type ThemeTypography = {
   /** Line height scale */
   lineHeight: LineHeightScale
   /** Letter spacing scale */
-  letterSpacing?: LetterSpacingScale
-  /** CSS text-shadow value applied globally to text */
-  textShadow?: string
+  letterSpacing: LetterSpacingScale
+  /** CSS text-shadow value applied globally to text. Use 'none' for no shadow. */
+  textShadow: string
 }
 
 /**
@@ -358,9 +358,9 @@ export interface Theme {
   /** Spacing scale */
   spacing: Spacing
   /** Z-index stacking layers */
-  zIndex?: ZIndex
+  zIndex: ZIndex
   /** Visual effect tokens (blur, backdrop) */
-  effects?: Effects
+  effects: Effects
 }
 
 /**
@@ -382,10 +382,11 @@ export class ThemeProviderService extends EventHub<{ themeChanged: DeepPartial<T
   /**
    * Assigns a new theme, updates the CSS variables and emits a themeChanged event
    * @param theme The Theme instance
+   * @param root Optional HTML element to scope CSS variables to. Defaults to `:root`.
    */
-  public setAssignedTheme(theme: DeepPartial<Theme>) {
+  public setAssignedTheme(theme: DeepPartial<Theme>, root?: HTMLElement) {
     this._assignedTheme = theme
-    useThemeCssVariables(theme)
+    useThemeCssVariables(theme, root)
     this.emit('themeChanged', theme)
   }
 }

package/src/themes/architect-theme.ts

@@ -88,6 +88,7 @@ export const architectTheme = {
       wider: '1.5px',
       widest: '2.5px',
     },
+    textShadow: 'none',
   },
   transitions: {
     duration: {

package/src/themes/auditore-theme.ts

@@ -88,6 +88,7 @@ export const auditoreTheme = {
       wider: '1px',
       widest: '1.5px',
     },
+    textShadow: 'none',
   },
   transitions: {
     duration: {

package/src/themes/black-mesa-theme.ts

@@ -88,6 +88,7 @@ export const blackMesaTheme = {
       wider: '1.25px',
       widest: '2px',
     },
+    textShadow: 'none',
   },
   transitions: {
     duration: {

package/src/themes/default-dark-theme.ts

@@ -83,6 +83,7 @@ export const defaultDarkTheme = {
       wider: '0.5px',
       widest: '1.5px',
     },
+    textShadow: 'none',
   },
   transitions: {
     duration: {

package/src/themes/default-light-theme.ts

@@ -83,6 +83,7 @@ export const defaultLightTheme = {
       wider: '0.5px',
       widest: '1.5px',
     },
+    textShadow: 'none',
   },
   transitions: {
     duration: {

package/src/themes/dragonborn-theme.ts

@@ -88,6 +88,7 @@ export const dragonbornTheme = {
       wider: '1px',
       widest: '1.5px',
     },
+    textShadow: 'none',
   },
   transitions: {
     duration: {

package/src/themes/hawkins-theme.ts

@@ -88,6 +88,7 @@ export const hawkinsTheme = {
       wider: '1px',
       widest: '2px',
     },
+    textShadow: 'none',
   },
   transitions: {
     duration: {

package/src/themes/jedi-theme.ts

@@ -88,6 +88,7 @@ export const jediTheme = {
       wider: '0.75px',
       widest: '1.5px',
     },
+    textShadow: 'none',
   },
   transitions: {
     duration: {

package/src/themes/neon-runner-theme.ts

@@ -85,6 +85,7 @@ export const neonRunnerTheme = {
       wider: '1.5px',
       widest: '2.5px',
     },
+    textShadow: 'none',
   },
   transitions: {
     duration: {

package/src/themes/plumber-theme.ts

@@ -86,6 +86,7 @@ export const plumberTheme = {
       wider: '1px',
       widest: '1.5px',
     },
+    textShadow: 'none',
   },
   transitions: {
     duration: {

package/src/themes/replicant-theme.ts

@@ -88,6 +88,7 @@ export const replicantTheme = {
       wider: '2px',
       widest: '3px',
     },
+    textShadow: 'none',
   },
   transitions: {
     duration: {

package/src/themes/sandworm-theme.ts

@@ -88,6 +88,7 @@ export const sandwormTheme = {
       wider: '1px',
       widest: '1.5px',
     },
+    textShadow: 'none',
   },
   transitions: {
     duration: {

package/src/themes/shadow-broker-theme.ts

@@ -86,6 +86,7 @@ export const shadowBrokerTheme = {
       wider: '1.25px',
       widest: '2px',
     },
+    textShadow: 'none',
   },
   transitions: {
     duration: {

package/src/themes/sith-theme.ts

@@ -88,6 +88,7 @@ export const sithTheme = {
       wider: '1.5px',
       widest: '2.5px',
     },
+    textShadow: 'none',
   },
   transitions: {
     duration: {

package/src/themes/vault-dweller-theme.ts

@@ -88,6 +88,7 @@ export const vaultDwellerTheme = {
       wider: '1.5px',
       widest: '2.5px',
     },
+    textShadow: 'none',
   },
   transitions: {
     duration: {

package/src/themes/wild-hunt-theme.ts

@@ -88,6 +88,7 @@ export const wildHuntTheme = {
       wider: '1px',
       widest: '1.5px',
     },
+    textShadow: 'none',
   },
   transitions: {
     duration: {

package/src/themes/xenomorph-theme.ts

@@ -86,6 +86,7 @@ export const xenomorphTheme = {
       wider: '1.25px',
       widest: '2px',
     },
+    textShadow: 'none',
   },
   transitions: {
     duration: {