@furystack/shades-common-components 13.1.0 → 13.3.0

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: {