@furystack/shades-common-components 13.5.0 → 14.0.0

package/src/components/dialog.tsx

@@ -52,7 +52,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': {

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.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,

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.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,
@@ -506,7 +506,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,

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,

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,

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,

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,

package/src/components/linear-progress.spec.tsx

@@ -1,10 +1,18 @@
 import { Injector } from '@furystack/inject'
-import { createComponent, initializeShadeRoot } from '@furystack/shades'
+import { createComponent, initializeShadeRoot, Shade } from '@furystack/shades'
 import { ObservableValue, sleepAsync, usingAsync } from '@furystack/utils'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import { ThemeProviderService } from '../services/theme-provider-service.js'
 import { LinearProgress } from './linear-progress.js'
 
+const ProgressWrapper = Shade<{ obs: ObservableValue<number> }>({
+  customElementName: 'test-linear-progress-wrapper',
+  render: ({ props, useObservable }) => {
+    const [value] = useObservable('value', props.obs)
+    return <LinearProgress variant="determinate" value={value} />
+  },
+})
+
 describe('LinearProgress', () => {
   let originalAnimate: typeof Element.prototype.animate
 
@@ -35,7 +43,7 @@ describe('LinearProgress', () => {
     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
 
@@ -90,12 +98,11 @@ describe('LinearProgress', () => {
     it('should set aria-valuenow for determinate variant', async () => {
       await usingAsync(new Injector(), async (injector) => {
         const rootElement = document.getElementById('root') as HTMLDivElement
-        const value = new ObservableValue(50)
 
         initializeShadeRoot({
           injector,
           rootElement,
-          jsxElement: <LinearProgress variant="determinate" value={value} />,
+          jsxElement: <LinearProgress variant="determinate" value={50} />,
         })
 
         await sleepAsync(50)
@@ -110,12 +117,11 @@ describe('LinearProgress', () => {
     it('should set bar width based on value', async () => {
       await usingAsync(new Injector(), async (injector) => {
         const rootElement = document.getElementById('root') as HTMLDivElement
-        const value = new ObservableValue(75)
 
         initializeShadeRoot({
           injector,
           rootElement,
-          jsxElement: <LinearProgress variant="determinate" value={value} />,
+          jsxElement: <LinearProgress variant="determinate" value={75} />,
         })
 
         await sleepAsync(50)
@@ -128,12 +134,11 @@ describe('LinearProgress', () => {
     it('should clamp value to 0-100 range', async () => {
       await usingAsync(new Injector(), async (injector) => {
         const rootElement = document.getElementById('root') as HTMLDivElement
-        const value = new ObservableValue(150)
 
         initializeShadeRoot({
           injector,
           rootElement,
-          jsxElement: <LinearProgress variant="determinate" value={value} />,
+          jsxElement: <LinearProgress variant="determinate" value={150} />,
         })
 
         await sleepAsync(50)
@@ -146,12 +151,11 @@ describe('LinearProgress', () => {
     it('should clamp negative values to 0', async () => {
       await usingAsync(new Injector(), async (injector) => {
         const rootElement = document.getElementById('root') as HTMLDivElement
-        const value = new ObservableValue(-20)
 
         initializeShadeRoot({
           injector,
           rootElement,
-          jsxElement: <LinearProgress variant="determinate" value={value} />,
+          jsxElement: <LinearProgress variant="determinate" value={-20} />,
         })
 
         await sleepAsync(50)
@@ -161,15 +165,15 @@ describe('LinearProgress', () => {
       })
     })
 
-    it('should update bar width when observable value changes', async () => {
+    it('should update bar width when value prop changes', async () => {
       await usingAsync(new Injector(), async (injector) => {
         const rootElement = document.getElementById('root') as HTMLDivElement
-        const value = new ObservableValue(20)
+        const obs = new ObservableValue(20)
 
         initializeShadeRoot({
           injector,
           rootElement,
-          jsxElement: <LinearProgress variant="determinate" value={value} />,
+          jsxElement: <ProgressWrapper obs={obs} />,
         })
 
         await sleepAsync(50)
@@ -177,22 +181,22 @@ describe('LinearProgress', () => {
         const bar = document.querySelector('shade-linear-progress .progress-bar') as HTMLElement
         expect(bar.style.width).toBe('20%')
 
-        value.setValue(80)
+        obs.setValue(80)
         await sleepAsync(50)
 
         expect(bar.style.width).toBe('80%')
       })
     })
 
-    it('should update aria-valuenow when observable value changes', async () => {
+    it('should update aria-valuenow when value prop changes', async () => {
       await usingAsync(new Injector(), async (injector) => {
         const rootElement = document.getElementById('root') as HTMLDivElement
-        const value = new ObservableValue(30)
+        const obs = new ObservableValue(30)
 
         initializeShadeRoot({
           injector,
           rootElement,
-          jsxElement: <LinearProgress variant="determinate" value={value} />,
+          jsxElement: <ProgressWrapper obs={obs} />,
         })
 
         await sleepAsync(50)
@@ -200,7 +204,7 @@ describe('LinearProgress', () => {
         const el = document.querySelector('shade-linear-progress') as HTMLElement
         expect(el.getAttribute('aria-valuenow')).toBe('30')
 
-        value.setValue(90)
+        obs.setValue(90)
         await sleepAsync(50)
 
         expect(el.getAttribute('aria-valuenow')).toBe('90')

package/src/components/linear-progress.tsx

@@ -1,5 +1,4 @@
 import { Shade, createComponent } from '@furystack/shades'
-import type { ObservableValue } from '@furystack/utils'
 import { buildTransition, cssVariableTheme } from '../services/css-variable-theme.js'
 import type { Palette } from '../services/theme-provider-service.js'
 import { ThemeProviderService } from '../services/theme-provider-service.js'
@@ -7,10 +6,9 @@ import { promisifyAnimation } from '../utils/promisify-animation.js'
 
 export type LinearProgressProps = {
   /**
-   * An observable progress value (0–100). Used when variant is 'determinate'.
-   * The component subscribes internally and updates the bar without re-rendering.
+   * A progress value (0–100). Used when variant is 'determinate'.
    */
-  value?: ObservableValue<number>
+  value?: number
   /**
    * The variant of the progress indicator.
    * - 'determinate': shows a fixed progress bar based on `value`
@@ -33,7 +31,7 @@ export type LinearProgressProps = {
 const clampValue = (v: number) => Math.max(0, Math.min(100, v))
 
 export const LinearProgress = Shade<LinearProgressProps>({
-  shadowDomName: 'shade-linear-progress',
+  customElementName: 'shade-linear-progress',
   css: {
     display: 'block',
     fontFamily: cssVariableTheme.typography.fontFamily,
@@ -68,15 +66,11 @@ export const LinearProgress = Shade<LinearProgressProps>({
       transition: 'none',
     },
   },
-  render: ({ props, injector, useObservable, useHostProps, useRef }) => {
+  render: ({ props, injector, useHostProps, useRef }) => {
     const themeProvider = injector.getInstance(ThemeProviderService)
     const barRef = useRef<HTMLElement>('progressBar')
     const variant = props.variant || 'indeterminate'
-
-    if (variant === 'determinate' && props.value) {
-      useObservable('progressValue', props.value)
-    }
-    const value = clampValue(props.value?.getValue() ?? 0)
+    const value = clampValue(props.value ?? 0)
 
     const color = themeProvider.theme.palette[props.color || 'primary'].main
     useHostProps({

package/src/components/list/list-item.tsx

@@ -14,7 +14,7 @@ export type ListItemProps<T> = {
 }
 
 export const ListItem: <T>(props: ListItemProps<T>, children: ChildrenList) => JSX.Element<any> = Shade({
-  shadowDomName: 'shade-list-item',
+  customElementName: 'shade-list-item',
   css: {
     display: 'flex',
     fontFamily: cssVariableTheme.typography.fontFamily,

package/src/components/list/list.tsx

@@ -34,7 +34,7 @@ export type ListProps<T> = {
 } & PartialElement<HTMLDivElement>
 
 export const List: <T>(props: ListProps<T>, children: ChildrenList) => JSX.Element<any> = Shade({
-  shadowDomName: 'shade-list',
+  customElementName: 'shade-list',
   css: {
     display: 'block',
     fontFamily: cssVariableTheme.typography.fontFamily,

package/src/components/loader.spec.tsx

@@ -40,7 +40,7 @@ describe('Loader', () => {
     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/loader.tsx

@@ -25,7 +25,7 @@ interface LoaderProps {
 }
 
 export const Loader = Shade<LoaderProps>({
-  shadowDomName: 'shade-loader',
+  customElementName: 'shade-loader',
   css: {
     display: 'inline-block',
     fontFamily: cssVariableTheme.typography.fontFamily,

package/src/components/markdown/markdown-display.spec.tsx

@@ -14,7 +14,7 @@ describe('MarkdownDisplay', () => {
     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/markdown/markdown-display.tsx

@@ -105,7 +105,7 @@ const renderBlock = (
  * blockquotes, images, links, and horizontal rules.
  */
 export const MarkdownDisplay = Shade<MarkdownDisplayProps>({
-  shadowDomName: 'shade-markdown-display',
+  customElementName: 'shade-markdown-display',
   css: {
     display: 'block',
     fontFamily: cssVariableTheme.typography.fontFamily,

package/src/components/markdown/markdown-editor.spec.tsx

@@ -14,7 +14,7 @@ describe('MarkdownEditor', () => {
     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/markdown/markdown-editor.tsx

@@ -32,7 +32,7 @@ type TabType = 'edit' | 'preview'
  * Supports three layouts: side-by-side, tabs (Edit/Preview), or above-below.
  */
 export const MarkdownEditor = Shade<MarkdownEditorProps>({
-  shadowDomName: 'shade-markdown-editor',
+  customElementName: 'shade-markdown-editor',
   css: {
     display: 'flex',
     fontFamily: cssVariableTheme.typography.fontFamily,

package/src/components/markdown/markdown-input.spec.tsx

@@ -15,7 +15,7 @@ describe('MarkdownInput', () => {
     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/markdown/markdown-input.tsx

@@ -41,7 +41,7 @@ export type MarkdownInputProps = {
  * it is inlined as a `![pasted image](data:...)` Markdown image.
  */
 export const MarkdownInput = Shade<MarkdownInputProps>({
-  shadowDomName: 'shade-markdown-input',
+  customElementName: 'shade-markdown-input',
   css: {
     display: 'block',
     fontFamily: cssVariableTheme.typography.fontFamily,

package/src/components/menu/menu.tsx

@@ -97,7 +97,7 @@ const renderItems = (
 }
 
 export const Menu = Shade<MenuProps>({
-  shadowDomName: 'shade-menu',
+  customElementName: 'shade-menu',
   css: {
     display: 'flex',
     outline: 'none',

package/src/components/modal.spec.tsx

@@ -58,7 +58,7 @@ describe('Modal', () => {
       let setVisible!: (v: boolean) => void
 
       const Wrapper = Shade({
-        shadowDomName: 'modal-visibility-test-show',
+        customElementName: 'modal-visibility-test-show',
         render: ({ useState }) => {
           const [visible, setter] = useState('visible', false)
           setVisible = setter
@@ -89,7 +89,7 @@ describe('Modal', () => {
       let setVisible!: (v: boolean) => void
 
       const Wrapper = Shade({
-        shadowDomName: 'modal-visibility-test-hide',
+        customElementName: 'modal-visibility-test-hide',
         render: ({ useState }) => {
           const [visible, setter] = useState('visible', true)
           setVisible = setter
@@ -203,7 +203,7 @@ describe('Modal', () => {
       const showAnimation = vi.fn()
 
       const Wrapper = Shade({
-        shadowDomName: 'modal-show-animation-test',
+        customElementName: 'modal-show-animation-test',
         render: ({ useState }) => {
           const [visible, setter] = useState('visible', false)
           setVisible = setter

package/src/components/modal.tsx

@@ -10,7 +10,7 @@ export type ModalProps = {
 }
 
 export const Modal = Shade<ModalProps>({
-  shadowDomName: 'shade-modal',
+  customElementName: 'shade-modal',
   css: {
     fontFamily: cssVariableTheme.typography.fontFamily,
     '& .shade-backdrop': {

package/src/components/noty-list.tsx

@@ -23,7 +23,7 @@ export const getDefaultNotyTimeouts = (type: NotyModel['type']) => {
 }
 
 export const NotyComponent = Shade<{ model: NotyModel; onDismiss: () => void }>({
-  shadowDomName: 'shade-noty',
+  customElementName: 'shade-noty',
   css: {
     margin: cssVariableTheme.spacing.xs,
     overflow: 'hidden',
@@ -141,7 +141,7 @@ export const NotyComponent = Shade<{ model: NotyModel; onDismiss: () => void }>(
 })
 
 export const NotyList = Shade({
-  shadowDomName: 'shade-noty-list',
+  customElementName: 'shade-noty-list',
   css: {
     position: 'fixed',
     fontFamily: cssVariableTheme.typography.fontFamily,