@furystack/shades 12.5.0 → 13.0.0

package/src/shades.integration.spec.tsx

@@ -18,7 +18,7 @@ describe('Shades integration tests', () => {
     await usingAsync(new Injector(), async (injector) => {
       const rootElement = document.getElementById('root') as HTMLDivElement
 
-      const ExampleComponent = Shade({ render: () => <div>Hello</div>, shadowDomName: 'shades-example' })
+      const ExampleComponent = Shade({ render: () => <div>Hello</div>, customElementName: 'shades-example' })
 
       initializeShadeRoot({
         injector,
@@ -34,7 +34,7 @@ describe('Shades integration tests', () => {
     await usingAsync(new Injector(), async (injector) => {
       const rootElement = document.getElementById('root') as HTMLDivElement
 
-      const ExampleComponent = Shade({ render: () => 'Hello', shadowDomName: 'shades-string-render-result' })
+      const ExampleComponent = Shade({ render: () => 'Hello', customElementName: 'shades-string-render-result' })
 
       initializeShadeRoot({
         injector,
@@ -52,7 +52,7 @@ describe('Shades integration tests', () => {
     await usingAsync(new Injector(), async (injector) => {
       const rootElement = document.getElementById('root') as HTMLDivElement
 
-      const ExampleComponent = Shade({ render: () => null, shadowDomName: 'shades-null-render-result' })
+      const ExampleComponent = Shade({ render: () => null, customElementName: 'shades-null-render-result' })
 
       initializeShadeRoot({
         injector,
@@ -77,7 +77,7 @@ describe('Shades integration tests', () => {
             <p>2</p>
           </>
         ),
-        shadowDomName: 'shades-fragment-render-result',
+        customElementName: 'shades-fragment-render-result',
       })
 
       initializeShadeRoot({
@@ -105,7 +105,7 @@ describe('Shades integration tests', () => {
             </>
           </p>
         ),
-        shadowDomName: 'shades-fragment-render-result-nested',
+        customElementName: 'shades-fragment-render-result-nested',
       })
 
       initializeShadeRoot({
@@ -125,7 +125,7 @@ describe('Shades integration tests', () => {
       const rootElement = document.getElementById('root') as HTMLDivElement
 
       const CustomComponent = Shade({
-        shadowDomName: 'shades-fragment-test-custom-component',
+        customElementName: 'shades-fragment-test-custom-component',
         render: () => <p>Hello</p>,
       })
 
@@ -136,7 +136,7 @@ describe('Shades integration tests', () => {
             <CustomComponent />
           </>
         ),
-        shadowDomName: 'shades-fragment-render-result-2',
+        customElementName: 'shades-fragment-render-result-2',
       })
 
       initializeShadeRoot({
@@ -157,12 +157,12 @@ describe('Shades integration tests', () => {
 
       const ExampleComponent = Shade({
         render: ({ children }) => <div>{children}</div>,
-        shadowDomName: 'shades-example-2',
+        customElementName: 'shades-example-2',
       })
 
       const ExampleSubs = Shade<{ no: number }>({
         render: ({ props }) => <div>{props.no}</div>,
-        shadowDomName: 'shades-example-sub',
+        customElementName: 'shades-example-sub',
       })
 
       initializeShadeRoot({
@@ -190,7 +190,7 @@ describe('Shades integration tests', () => {
       const setup = vi.fn()
 
       const ExampleComponent = Shade({
-        shadowDomName: 'example-component-1',
+        customElementName: 'example-component-1',
         render: ({ useDisposable }) => {
           useDisposable('test', () => {
             setup()
@@ -219,7 +219,7 @@ describe('Shades integration tests', () => {
       const rootElement = document.getElementById('root') as HTMLDivElement
 
       const ExampleComponent = Shade({
-        shadowDomName: 'example-component-3',
+        customElementName: 'example-component-3',
         render: ({ useState }) => {
           const [count, setCount] = useState('count', 0)
           return (
@@ -290,7 +290,7 @@ describe('Shades integration tests', () => {
       const rootElement = document.getElementById('root') as HTMLDivElement
 
       const ExampleComponent = Shade({
-        shadowDomName: 'example-component-3-stored-state',
+        customElementName: 'example-component-3-stored-state',
         render: ({ useStoredState }) => {
           const [count, setCount] = useStoredState('count', 0, store)
           return (
@@ -348,7 +348,7 @@ describe('Shades integration tests', () => {
       const rootElement = document.getElementById('root') as HTMLDivElement
 
       const ExampleComponent = Shade({
-        shadowDomName: 'example-component-3-search-state',
+        customElementName: 'example-component-3-search-state',
         render: ({ useSearchState }) => {
           const [count, setCount] = useSearchState('count', 0)
           return (
@@ -403,7 +403,7 @@ describe('Shades integration tests', () => {
     await usingAsync(new Injector(), async (injector) => {
       const rootElement = document.getElementById('root') as HTMLDivElement
       const Parent = Shade({
-        shadowDomName: 'shade-remount-parent',
+        customElementName: 'shade-remount-parent',
         render: ({ children, useState }) => {
           const [areChildrenVisible, setAreChildrenVisible] = useState('areChildrenVisible', true)
           return (
@@ -423,7 +423,7 @@ describe('Shades integration tests', () => {
       })
 
       const Child = Shade({
-        shadowDomName: 'example-remount-child',
+        customElementName: 'example-remount-child',
         render: ({ useState }) => {
           const [count, setCount] = useState('count', 0)
 
@@ -493,14 +493,14 @@ describe('Shades integration tests', () => {
       const rootElement = document.getElementById('root') as HTMLDivElement
 
       const ChildComponent = Shade<{ isDisabled: boolean }>({
-        shadowDomName: 'shade-prop-child',
+        customElementName: 'shade-prop-child',
         render: ({ props }) => {
           return <input type="checkbox" disabled={props.isDisabled} data-testid="inner-input" />
         },
       })
 
       const ParentComponent = Shade({
-        shadowDomName: 'shade-prop-parent',
+        customElementName: 'shade-prop-parent',
         render: ({ useState }) => {
           const [isDisabled, setIsDisabled] = useState('isDisabled', false)
           return (

package/src/style-manager.spec.ts

@@ -181,7 +181,7 @@ describe('StyleManager', () => {
   describe('Shade integration', () => {
     it('should register CSS styles when Shade component is created with css property', () => {
       Shade({
-        shadowDomName: 'shade-css-test-component',
+        customElementName: 'shade-css-test-component',
         css: {
           color: 'red',
           padding: '10px',
@@ -200,7 +200,7 @@ describe('StyleManager', () => {
 
     it('should register CSS with attribute selector for customized built-in elements', () => {
       Shade({
-        shadowDomName: 'shade-css-test-button',
+        customElementName: 'shade-css-test-button',
         elementBase: HTMLButtonElement,
         elementBaseName: 'button',
         css: {
@@ -219,7 +219,7 @@ describe('StyleManager', () => {
 
     it('should not register styles when Shade component has no css property', () => {
       Shade({
-        shadowDomName: 'shade-no-css-component',
+        customElementName: 'shade-no-css-component',
         render: () => null,
       })
 

package/src/style-manager.ts

@@ -27,7 +27,7 @@ class StyleManagerClass {
    * Registers CSS styles for a component.
    * Styles are only injected once per component (based on the custom element name).
    *
-   * @param shadowDomName - The custom element tag name (used as CSS selector)
+   * @param customElementName - The custom element tag name (used as CSS selector)
    * @param cssObject - The CSSObject containing styles and nested selectors
    * @param elementBaseName - Optional base element name for customized built-in elements (e.g., 'a', 'button').
    *                          When provided, generates selector like `a[is="component-name"]` instead of `component-name`
@@ -49,17 +49,17 @@ class StyleManagerClass {
    * // Generates: a[is="my-link"] { color: blue; }
    * ```
    */
-  public registerComponentStyles(shadowDomName: string, cssObject: CSSObject, elementBaseName?: string): boolean {
-    if (this.registeredComponents.has(shadowDomName)) {
+  public registerComponentStyles(customElementName: string, cssObject: CSSObject, elementBaseName?: string): boolean {
+    if (this.registeredComponents.has(customElementName)) {
       return false
     }
 
-    const selector = elementBaseName ? `${elementBaseName}[is="${shadowDomName}"]` : shadowDomName
+    const selector = elementBaseName ? `${elementBaseName}[is="${customElementName}"]` : customElementName
     const css = generateCSS(selector, cssObject)
     if (css) {
       const styleElement = this.getStyleElement()
-      styleElement.textContent += `\n/* ${shadowDomName} */\n${css}\n`
-      this.registeredComponents.add(shadowDomName)
+      styleElement.textContent += `\n/* ${customElementName} */\n${css}\n`
+      this.registeredComponents.add(customElementName)
       return true
     }
 
@@ -68,11 +68,11 @@ class StyleManagerClass {
 
   /**
    * Checks if a component's styles have already been registered
-   * @param shadowDomName - The component identifier to check
+   * @param customElementName - The component identifier to check
    * @returns True if styles are already registered
    */
-  public isRegistered(shadowDomName: string): boolean {
-    return this.registeredComponents.has(shadowDomName)
+  public isRegistered(customElementName: string): boolean {
+    return this.registeredComponents.has(customElementName)
   }
 
   /**

package/src/vnode.integration.spec.tsx

@@ -19,7 +19,7 @@ describe('VNode reconciliation integration tests', () => {
         const rootElement = document.getElementById('root') as HTMLDivElement
 
         const ExampleComponent = Shade({
-          shadowDomName: 'morph-focus-test',
+          customElementName: 'morph-focus-test',
           render: ({ useState }) => {
             const [label, setLabel] = useState('label', 'initial')
             return (
@@ -64,7 +64,7 @@ describe('VNode reconciliation integration tests', () => {
         const rootElement = document.getElementById('root') as HTMLDivElement
 
         const ExampleComponent = Shade({
-          shadowDomName: 'morph-focus-textarea-test',
+          customElementName: 'morph-focus-textarea-test',
           render: ({ useState }) => {
             const [count, setCount] = useState('count', 0)
             return (
@@ -106,7 +106,7 @@ describe('VNode reconciliation integration tests', () => {
         const rootElement = document.getElementById('root') as HTMLDivElement
 
         const ExampleComponent = Shade({
-          shadowDomName: 'morph-form-value-test',
+          customElementName: 'morph-form-value-test',
           render: ({ useState }) => {
             const [title, setTitle] = useState('title', 'Title')
             return (
@@ -151,7 +151,7 @@ describe('VNode reconciliation integration tests', () => {
         const rootElement = document.getElementById('root') as HTMLDivElement
 
         const ExampleComponent = Shade({
-          shadowDomName: 'morph-checkbox-test',
+          customElementName: 'morph-checkbox-test',
           render: ({ useState }) => {
             const [count, setCount] = useState('count', 0)
             return (
@@ -195,7 +195,7 @@ describe('VNode reconciliation integration tests', () => {
         const rootElement = document.getElementById('root') as HTMLDivElement
 
         const ExampleComponent = Shade({
-          shadowDomName: 'morph-select-test',
+          customElementName: 'morph-select-test',
           render: ({ useState }) => {
             const [label, setLabel] = useState('label', 'Pick one')
             return (
@@ -245,7 +245,7 @@ describe('VNode reconciliation integration tests', () => {
         const rootElement = document.getElementById('root') as HTMLDivElement
 
         const ExampleComponent = Shade({
-          shadowDomName: 'morph-identity-test',
+          customElementName: 'morph-identity-test',
           render: ({ useState }) => {
             const [count, setCount] = useState('count', 0)
             return (
@@ -287,7 +287,7 @@ describe('VNode reconciliation integration tests', () => {
         const rootElement = document.getElementById('root') as HTMLDivElement
 
         const ExampleComponent = Shade({
-          shadowDomName: 'morph-tag-change-test',
+          customElementName: 'morph-tag-change-test',
           render: ({ useState }) => {
             const [useDiv, setUseDiv] = useState('useDiv', true)
             return useDiv ? (
@@ -333,7 +333,7 @@ describe('VNode reconciliation integration tests', () => {
         const rootElement = document.getElementById('root') as HTMLDivElement
 
         const ExampleComponent = Shade({
-          shadowDomName: 'morph-animation-test',
+          customElementName: 'morph-animation-test',
           render: ({ useState }) => {
             const [isActive, setIsActive] =
               // eslint-disable-next-line furystack/no-css-state-hooks -- test for re-render behavior, not CSS state
@@ -374,7 +374,7 @@ describe('VNode reconciliation integration tests', () => {
         const rootElement = document.getElementById('root') as HTMLDivElement
 
         const ExampleComponent = Shade({
-          shadowDomName: 'morph-style-transition-test',
+          customElementName: 'morph-style-transition-test',
           render: ({ useState }) => {
             const [isExpanded, setIsExpanded] = useState('isExpanded', false)
             return (
@@ -424,7 +424,7 @@ describe('VNode reconciliation integration tests', () => {
         const clicks: number[] = []
 
         const ExampleComponent = Shade({
-          shadowDomName: 'morph-handler-test',
+          customElementName: 'morph-handler-test',
           render: ({ useState }) => {
             const [count, setCount] = useState('count', 0)
             return (
@@ -482,7 +482,7 @@ describe('VNode reconciliation integration tests', () => {
         const obs = new ObservableValue('hello')
 
         const ExampleComponent = Shade({
-          shadowDomName: 'morph-observable-test',
+          customElementName: 'morph-observable-test',
           render: ({ useObservable }) => {
             const [value] = useObservable('obs', obs)
             return (
@@ -528,7 +528,7 @@ describe('VNode reconciliation integration tests', () => {
         const rootElement = document.getElementById('root') as HTMLDivElement
 
         const ExampleComponent = Shade({
-          shadowDomName: 'morph-fragment-test',
+          customElementName: 'morph-fragment-test',
           render: ({ useState }) => {
             const [count, setCount] = useState('count', 0)
             return (
@@ -569,7 +569,7 @@ describe('VNode reconciliation integration tests', () => {
         const rootElement = document.getElementById('root') as HTMLDivElement
 
         const ExampleComponent = Shade({
-          shadowDomName: 'morph-text-result-test',
+          customElementName: 'morph-text-result-test',
           render: ({ useState }) => {
             const [text] = useState('text', 'initial')
             return text
@@ -611,7 +611,7 @@ describe('VNode reconciliation integration tests', () => {
         const childRenderSpy = vi.fn()
 
         const ChildComponent = Shade<{ value: number }>({
-          shadowDomName: 'morph-child-component',
+          customElementName: 'morph-child-component',
           render: ({ props }) => {
             childRenderSpy()
             return <span id="child-value">{props.value}</span>
@@ -619,7 +619,7 @@ describe('VNode reconciliation integration tests', () => {
         })
 
         const ParentComponent = Shade({
-          shadowDomName: 'morph-parent-component',
+          customElementName: 'morph-parent-component',
           render: ({ useState }) => {
             const [count, setCount] = useState('count', 0)
             return (