@simplybuilder/core-dom 2.0.0 → 2.0.1

package/lib/creator.d.ts

@@ -4,11 +4,22 @@
  * Provides functions for creating and appending HTML and SVG elements.
  * Handles attribute assignment, dataset configuration, and shadow DOM creation.
  */
-import type { CreateHTMLElementOptions, CreateSVGElementOptions } from './types.js';
+import type { ShadowConfig, CreateHTMLElementOptions, CreateSVGElementOptions } from './types.js';
+/**
+ * Creates a shadow root from a string or object configuration.
+ * String mode creates a shadow root with that mode ('open'/'closed').
+ * Object mode can additionally include `styles` via CSSStyleSheet.
+ *
+ * @function createShadowFromConfig
+ * @param {HTMLElement} host - The element to attach the shadow root to.
+ * @param {ShadowConfig} shadow - Shadow configuration (string or object with mode/styles).
+ * @returns {ShadowRoot|undefined} The created shadow root, or undefined on failure.
+ */
+export declare function createShadowFromConfig(host: HTMLElement, shadow: ShadowConfig): ShadowRoot | undefined;
 /**
  * Creates an HTML element and appends it to a parent.
- * Supports attribute assignment, dataset configuration with automatic
- * store registration, and optional shadow DOM creation.
+ * Supports attribute assignment and dataset configuration with automatic
+ * store registration.
  *
  * @function createHTMLElement
  * @param {Object} [options] - Element creation options.
@@ -17,10 +28,9 @@ import type { CreateHTMLElementOptions, CreateSVGElementOptions } from './types.
  * @param {string} options.element.type - HTML tag name (e.g., 'div', 'button').
  * @param {Array} [options.element.attr] - Array of {name, value} attribute pairs.
  * @param {Array} [options.element.dataset] - Array of {name, value} dataset pairs.
- * @param {ShadowConfig} [options.shadow] - Shadow DOM configuration.
- * @returns {HTMLElement|ShadowRoot|undefined} The created element, shadow root, or undefined on error.
+ * @returns {HTMLElement|undefined} The created element, or undefined on error.
  */
-export declare function createHTMLElement(data?: CreateHTMLElementOptions): HTMLElement | ShadowRoot | undefined;
+export declare function createHTMLElement(data?: CreateHTMLElementOptions): HTMLElement | undefined;
 /**
  * Creates an SVG element and appends it to a parent.
  * Supports standard and namespaced attributes, and dataset configuration.

package/lib/main.commonjs.cjs

@@ -1,4 +1,4 @@
-/*! SBCoreDom version 2.0.0 */
+/*! SBCoreDom version 2.0.1 */
 'use strict';Object.defineProperties(exports,{__esModule:{value:true},[Symbol.toStringTag]:{value:'Module'}});/**
  * @module DomStoreModule
  * @description
@@ -92,7 +92,7 @@ function clearStore() {
 const internalStore = {
     app: {
         name: 'DomModule',
-        version: "2.0.0",
+        version: "2.0.1",
     },
     register: {},
     allow: {
@@ -251,8 +251,6 @@ function setData(data) {
 /**
  * Attaches a shadow root to an HTML element with the specified mode.
  *
- * @private
- * @ignore
  * @function attachShadow
  * @param {HTMLElement} host - The element to attach the shadow root to.
  * @param {'open'|'closed'} mode - The shadow DOM mode.
@@ -266,8 +264,6 @@ function attachShadow(host, mode) {
  * String mode creates a shadow root with that mode ('open'/'closed').
  * Object mode can additionally include `styles` via CSSStyleSheet.
  *
- * @private
- * @ignore
  * @function createShadowFromConfig
  * @param {HTMLElement} host - The element to attach the shadow root to.
  * @param {ShadowConfig} shadow - Shadow configuration (string or object with mode/styles).
@@ -315,8 +311,8 @@ function applyAttributes(element, data) {
 }
 /**
  * Creates an HTML element and appends it to a parent.
- * Supports attribute assignment, dataset configuration with automatic
- * store registration, and optional shadow DOM creation.
+ * Supports attribute assignment and dataset configuration with automatic
+ * store registration.
  *
  * @function createHTMLElement
  * @param {Object} [options] - Element creation options.
@@ -325,23 +321,17 @@ function applyAttributes(element, data) {
  * @param {string} options.element.type - HTML tag name (e.g., 'div', 'button').
  * @param {Array} [options.element.attr] - Array of {name, value} attribute pairs.
  * @param {Array} [options.element.dataset] - Array of {name, value} dataset pairs.
- * @param {ShadowConfig} [options.shadow] - Shadow DOM configuration.
- * @returns {HTMLElement|ShadowRoot|undefined} The created element, shadow root, or undefined on error.
+ * @returns {HTMLElement|undefined} The created element, or undefined on error.
  */
 function createHTMLElement(data = {}) {
     try {
-        const { parent, element: elementData, shadow } = data;
+        const { parent, element: elementData } = data;
         const element = document.createElement(elementData.type);
         applyAttributes(element, elementData);
         const targetParent = parent ?? document.body;
         if (targetParent instanceof HTMLElement || targetParent instanceof SVGElement || targetParent instanceof ShadowRoot) {
             targetParent.appendChild(element);
         }
-        if (shadow && element.dataset?.state) {
-            const shadowRoot = createShadowFromConfig(element, shadow);
-            if (shadowRoot)
-                return shadowRoot;
-        }
         return element;
     }
     catch (err) {
@@ -461,18 +451,19 @@ function createFromStruct(data) {
                     attr: attrArray,
                     dataset: datasetArray,
                 },
-                shadow: struct.shadow,
             };
-            const result = createHTMLElement(htmlData);
-            if (result instanceof ShadowRoot) {
-                element = result.host;
-            }
-            else {
-                element = result;
-            }
+            element = createHTMLElement(htmlData);
         }
         if (!element)
             return false;
+        let shadowRoot;
+        const state = element.dataset.state;
+        if (struct.shadow && state) {
+            const storedEl = getElementFromStore(state);
+            if (storedEl) {
+                shadowRoot = createShadowFromConfig(storedEl, struct.shadow);
+            }
+        }
         if (struct.text !== undefined) {
             element.textContent = struct.text;
         }
@@ -481,8 +472,9 @@ function createFromStruct(data) {
         }
         createEventElement({ struct, element });
         if (struct.children && struct.children.length > 0) {
+            const parentNode = shadowRoot ?? element;
             for (const child of struct.children) {
-                createFromStruct({ struct: child, parent: element });
+                createFromStruct({ struct: child, parent: parentNode });
             }
         }
         return element;
@@ -561,7 +553,7 @@ function removeElement(element) {
  * integration with @simplybuilder/core-event.
  */
 const name = "SBCoreDom";
-const version = "2.0.0";
+const version = "2.0.1";
 /**
  * Frozen singleton combining all DOM manipulation capabilities.
  * Pass `domModuleExtends()` to register an EventModule for declarative

package/lib/main.commonjs.min.cjs

@@ -1,3 +1,3 @@
-/*! SBCoreDom version 2.0.0 */
-Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={};function addElementToStore(t){const{key:n,value:r}=t;n&&r&&void 0===e[n]&&(e[n]=r)}function getElementFromStore(t){if(t)return e[t]}function removeElementFromStore(t){const{key:n,mode:r=1,EventModule:o={}}=t;if(!n)return!1;try{const t=e[n];return!!t&&(1===r&&"function"==typeof o.removeAllEventsFromStore&&o.removeAllEventsFromStore(t),delete e[n],!0)}catch{return!1}}const t={app:{name:"DomModule",version:"2.0.0"},register:{},allow:{SBCoreEvent:{major:2}},clearExtensions(){for(const e of Object.keys(this.register))delete this.register[e]}};function validVersionSupport(e){const{name:n,version:r}=e,o=t.allow[n];if(o&&r){const e=r.split(".");if(e.length>=1){if(void 0!==o.major&&e[0]&&o.major>Number(e[0]))return!1;if(void 0!==o.minor&&e[1]&&o.minor>Number(e[1]))return!1;if(void 0!==o.patch&&e[2]&&o.patch>Number(e[2]))return!1}return!0}return!1}function domModuleExtends(e){try{const{name:n}=e;if(validVersionSupport(e))return t.register[n]=e,!0}catch{return!1}return!1}function getAnyExtension(){for(const e of Object.keys(t.register))return t.register[e]}function setAttr(e){const{element:t,attrs:n}=e;if(n&&0!==n.length)for(let e=n.length-1;e>=0;e--){const r=n[e];r?.name&&t.setAttribute(r.name,r.value)}}function setAttrNS(e){const{element:t,attrs:n}=e;if(n&&0!==n.length)for(let e=n.length-1;e>=0;e--){const r=n[e];r?.name&&t.setAttributeNS(null,r.name,r.value)}}function setData(e){const{element:t,dataset:n}=e;if(n&&0!==n.length)for(let e=n.length-1;e>=0;e--){const r=n[e];r?.name&&(t.dataset[r.name]=r.value,"state"===r.name&&addElementToStore({key:r.value,value:t}))}}function attachShadow(e,t){return e.attachShadow({mode:t})}function applyAttributes(e,t){t.attr?.length&&setAttr({element:e,attrs:t.attr}),"attrNS"in t&&t.attrNS?.length&&setAttrNS({element:e,attrs:t.attrNS}),t.dataset?.length&&setData({element:e,dataset:t.dataset})}function createHTMLElement(e={}){try{const{parent:t,element:n,shadow:r}=e,o=document.createElement(n.type);applyAttributes(o,n);const a=t??document.body;if((a instanceof HTMLElement||a instanceof SVGElement||a instanceof ShadowRoot)&&a.appendChild(o),r&&o.dataset?.state){const e=function createShadowFromConfig(e,t){if("string"==typeof t)return attachShadow(e,t);if("object"==typeof t&&null!==t&&"mode"in t){const n=t,r=attachShadow(e,n.mode);if(n.styles&&"undefined"!=typeof CSSStyleSheet)try{const e=new CSSStyleSheet;e.replaceSync(n.styles),r.adoptedStyleSheets=[e]}catch{}return r}}(o,r);if(e)return e}return o}catch(e){return void console.error(e)}}function createSVGElement(e={}){try{const{parent:t,element:n}=e,r=document.createElementNS("http://www.w3.org/2000/svg",n.type);return applyAttributes(r,n),t&&(t instanceof HTMLElement||t instanceof SVGElement)&&t.appendChild(r),r}catch(e){return void console.error(e)}}function createEventElement(e){const{struct:t,element:n}=e,r=getAnyExtension();if(r&&t.event?.action&&t.event?.type){const e=r.EventActions;if(e&&e[t.event.action]){const o={element:n,type:t.event.type,handler:e[t.event.action]};t.event.node&&(o.nodeId=t.event.node);(0,r.addEventToStore)(o)}}}function createFromStruct(e){try{if("object"!=typeof e||!e)return!1;const{struct:t,parent:n=document.body}=e;if(!t?.element)return!1;const r=t.type&&"svg"===t.type.toLowerCase(),o=t.attr?Object.entries(t.attr).map(([e,t])=>({name:e,value:t})):[],a=t.dataset?Object.entries(t.dataset).map(([e,t])=>({name:e,value:t})):[];let s;if(r){const e=t.attrNS?Object.entries(t.attrNS).map(([e,t])=>({name:e,value:t})):[];s=createSVGElement({parent:n,element:{type:t.element,attr:o,attrNS:e,dataset:a}})}else{const e=createHTMLElement({parent:n,element:{type:t.element,attr:o,dataset:a},shadow:t.shadow});s=e instanceof ShadowRoot?e.host:e}if(!s)return!1;if(void 0!==t.text&&(s.textContent=t.text),void 0!==t.html&&(s.innerHTML=t.html),createEventElement({struct:t,element:s}),t.children&&t.children.length>0)for(const e of t.children)createFromStruct({struct:e,parent:s});return s}catch(e){return console.error(e),!1}}function removeElementFromStoreOrEvents(e){try{const t=getAnyExtension(),n=e;if(n.dataset?.state)return removeElementFromStore({key:n.dataset.state,mode:t?1:2,EventModule:t}),!0;if(t&&"function"==typeof t.removeAllEventsFromStore){return(0,t.removeAllEventsFromStore)(e),!0}}catch{}return!1}function removeElement(e){if(!e)return;removeElementFromStoreOrEvents(e);const t=e.querySelectorAll('[listener="true"]');for(let e=t.length-1;e>=0;e--){const n=t[e];n&&removeElementFromStoreOrEvents(n)}const n=e.querySelectorAll("[data-state]");for(let e=n.length-1;e>=0;e--){const t=n[e];if(t){const e=getAnyExtension();removeElementFromStore({key:t.dataset.state,mode:e?1:2,EventModule:e}),t.removeAttribute("data-state")}}e.remove()}const n="SBCoreDom",r="2.0.0",o=Object.freeze({name:n,version:r,domModuleExtends,createHTMLElement,createSVGElement,addElementToStore,getElementFromStore,removeElementFromStore,createFromStruct,removeElement});exports.DomModule=o,exports.addElementToStore=addElementToStore,exports.clearStore=function clearStore(){for(const t of Object.keys(e))delete e[t]},exports.createEventElement=createEventElement,exports.createFromStruct=createFromStruct,exports.createHTMLElement=createHTMLElement,exports.createSVGElement=createSVGElement,exports.default=o,exports.domModuleExtends=domModuleExtends,exports.getElementFromStore=getElementFromStore,exports.name=n,exports.removeElement=removeElement,exports.removeElementFromStore=removeElementFromStore,exports.setAttr=setAttr,exports.setAttrNS=setAttrNS,exports.setData=setData,exports.validVersionSupport=validVersionSupport,exports.version=r;
+/*! SBCoreDom version 2.0.1 */
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={};function addElementToStore(t){const{key:n,value:r}=t;n&&r&&void 0===e[n]&&(e[n]=r)}function getElementFromStore(t){if(t)return e[t]}function removeElementFromStore(t){const{key:n,mode:r=1,EventModule:o={}}=t;if(!n)return!1;try{const t=e[n];return!!t&&(1===r&&"function"==typeof o.removeAllEventsFromStore&&o.removeAllEventsFromStore(t),delete e[n],!0)}catch{return!1}}const t={app:{name:"DomModule",version:"2.0.1"},register:{},allow:{SBCoreEvent:{major:2}},clearExtensions(){for(const e of Object.keys(this.register))delete this.register[e]}};function validVersionSupport(e){const{name:n,version:r}=e,o=t.allow[n];if(o&&r){const e=r.split(".");if(e.length>=1){if(void 0!==o.major&&e[0]&&o.major>Number(e[0]))return!1;if(void 0!==o.minor&&e[1]&&o.minor>Number(e[1]))return!1;if(void 0!==o.patch&&e[2]&&o.patch>Number(e[2]))return!1}return!0}return!1}function domModuleExtends(e){try{const{name:n}=e;if(validVersionSupport(e))return t.register[n]=e,!0}catch{return!1}return!1}function getAnyExtension(){for(const e of Object.keys(t.register))return t.register[e]}function setAttr(e){const{element:t,attrs:n}=e;if(n&&0!==n.length)for(let e=n.length-1;e>=0;e--){const r=n[e];r?.name&&t.setAttribute(r.name,r.value)}}function setAttrNS(e){const{element:t,attrs:n}=e;if(n&&0!==n.length)for(let e=n.length-1;e>=0;e--){const r=n[e];r?.name&&t.setAttributeNS(null,r.name,r.value)}}function setData(e){const{element:t,dataset:n}=e;if(n&&0!==n.length)for(let e=n.length-1;e>=0;e--){const r=n[e];r?.name&&(t.dataset[r.name]=r.value,"state"===r.name&&addElementToStore({key:r.value,value:t}))}}function attachShadow(e,t){return e.attachShadow({mode:t})}function applyAttributes(e,t){t.attr?.length&&setAttr({element:e,attrs:t.attr}),"attrNS"in t&&t.attrNS?.length&&setAttrNS({element:e,attrs:t.attrNS}),t.dataset?.length&&setData({element:e,dataset:t.dataset})}function createHTMLElement(e={}){try{const{parent:t,element:n}=e,r=document.createElement(n.type);applyAttributes(r,n);const o=t??document.body;return(o instanceof HTMLElement||o instanceof SVGElement||o instanceof ShadowRoot)&&o.appendChild(r),r}catch(e){return void console.error(e)}}function createSVGElement(e={}){try{const{parent:t,element:n}=e,r=document.createElementNS("http://www.w3.org/2000/svg",n.type);return applyAttributes(r,n),t&&(t instanceof HTMLElement||t instanceof SVGElement)&&t.appendChild(r),r}catch(e){return void console.error(e)}}function createEventElement(e){const{struct:t,element:n}=e,r=getAnyExtension();if(r&&t.event?.action&&t.event?.type){const e=r.EventActions;if(e&&e[t.event.action]){const o={element:n,type:t.event.type,handler:e[t.event.action]};t.event.node&&(o.nodeId=t.event.node);(0,r.addEventToStore)(o)}}}function createFromStruct(e){try{if("object"!=typeof e||!e)return!1;const{struct:t,parent:n=document.body}=e;if(!t?.element)return!1;const r=t.type&&"svg"===t.type.toLowerCase(),o=t.attr?Object.entries(t.attr).map(([e,t])=>({name:e,value:t})):[],a=t.dataset?Object.entries(t.dataset).map(([e,t])=>({name:e,value:t})):[];let s,l;if(r){const e=t.attrNS?Object.entries(t.attrNS).map(([e,t])=>({name:e,value:t})):[];s=createSVGElement({parent:n,element:{type:t.element,attr:o,attrNS:e,dataset:a}})}else{s=createHTMLElement({parent:n,element:{type:t.element,attr:o,dataset:a}})}if(!s)return!1;const m=s.dataset.state;if(t.shadow&&m){const e=getElementFromStore(m);e&&(l=function createShadowFromConfig(e,t){if("string"==typeof t)return attachShadow(e,t);if("object"==typeof t&&null!==t&&"mode"in t){const n=t,r=attachShadow(e,n.mode);if(n.styles&&"undefined"!=typeof CSSStyleSheet)try{const e=new CSSStyleSheet;e.replaceSync(n.styles),r.adoptedStyleSheets=[e]}catch{}return r}}(e,t.shadow))}if(void 0!==t.text&&(s.textContent=t.text),void 0!==t.html&&(s.innerHTML=t.html),createEventElement({struct:t,element:s}),t.children&&t.children.length>0){const e=l??s;for(const n of t.children)createFromStruct({struct:n,parent:e})}return s}catch(e){return console.error(e),!1}}function removeElementFromStoreOrEvents(e){try{const t=getAnyExtension(),n=e;if(n.dataset?.state)return removeElementFromStore({key:n.dataset.state,mode:t?1:2,EventModule:t}),!0;if(t&&"function"==typeof t.removeAllEventsFromStore){return(0,t.removeAllEventsFromStore)(e),!0}}catch{}return!1}function removeElement(e){if(!e)return;removeElementFromStoreOrEvents(e);const t=e.querySelectorAll('[listener="true"]');for(let e=t.length-1;e>=0;e--){const n=t[e];n&&removeElementFromStoreOrEvents(n)}const n=e.querySelectorAll("[data-state]");for(let e=n.length-1;e>=0;e--){const t=n[e];if(t){const e=getAnyExtension();removeElementFromStore({key:t.dataset.state,mode:e?1:2,EventModule:e}),t.removeAttribute("data-state")}}e.remove()}const n="SBCoreDom",r="2.0.1",o=Object.freeze({name:n,version:r,domModuleExtends,createHTMLElement,createSVGElement,addElementToStore,getElementFromStore,removeElementFromStore,createFromStruct,removeElement});exports.DomModule=o,exports.addElementToStore=addElementToStore,exports.clearStore=function clearStore(){for(const t of Object.keys(e))delete e[t]},exports.createEventElement=createEventElement,exports.createFromStruct=createFromStruct,exports.createHTMLElement=createHTMLElement,exports.createSVGElement=createSVGElement,exports.default=o,exports.domModuleExtends=domModuleExtends,exports.getElementFromStore=getElementFromStore,exports.name=n,exports.removeElement=removeElement,exports.removeElementFromStore=removeElementFromStore,exports.setAttr=setAttr,exports.setAttrNS=setAttrNS,exports.setData=setData,exports.validVersionSupport=validVersionSupport,exports.version=r;
 /*! https://simplybuilder.github.io */

package/lib/main.esm.min.mjs

@@ -1,3 +1,3 @@
-/*! SBCoreDom version 2.0.0 */
-const e={};function addElementToStore(t){const{key:n,value:r}=t;n&&r&&void 0===e[n]&&(e[n]=r)}function getElementFromStore(t){if(t)return e[t]}function removeElementFromStore(t){const{key:n,mode:r=1,EventModule:o={}}=t;if(!n)return!1;try{const t=e[n];return!!t&&(1===r&&"function"==typeof o.removeAllEventsFromStore&&o.removeAllEventsFromStore(t),delete e[n],!0)}catch{return!1}}function clearStore(){for(const t of Object.keys(e))delete e[t]}const t={app:{name:"DomModule",version:"2.0.0"},register:{},allow:{SBCoreEvent:{major:2}},clearExtensions(){for(const e of Object.keys(this.register))delete this.register[e]}};function validVersionSupport(e){const{name:n,version:r}=e,o=t.allow[n];if(o&&r){const e=r.split(".");if(e.length>=1){if(void 0!==o.major&&e[0]&&o.major>Number(e[0]))return!1;if(void 0!==o.minor&&e[1]&&o.minor>Number(e[1]))return!1;if(void 0!==o.patch&&e[2]&&o.patch>Number(e[2]))return!1}return!0}return!1}function domModuleExtends(e){try{const{name:n}=e;if(validVersionSupport(e))return t.register[n]=e,!0}catch{return!1}return!1}function getAnyExtension(){for(const e of Object.keys(t.register))return t.register[e]}function setAttr(e){const{element:t,attrs:n}=e;if(n&&0!==n.length)for(let e=n.length-1;e>=0;e--){const r=n[e];r?.name&&t.setAttribute(r.name,r.value)}}function setAttrNS(e){const{element:t,attrs:n}=e;if(n&&0!==n.length)for(let e=n.length-1;e>=0;e--){const r=n[e];r?.name&&t.setAttributeNS(null,r.name,r.value)}}function setData(e){const{element:t,dataset:n}=e;if(n&&0!==n.length)for(let e=n.length-1;e>=0;e--){const r=n[e];r?.name&&(t.dataset[r.name]=r.value,"state"===r.name&&addElementToStore({key:r.value,value:t}))}}function attachShadow(e,t){return e.attachShadow({mode:t})}function applyAttributes(e,t){t.attr?.length&&setAttr({element:e,attrs:t.attr}),"attrNS"in t&&t.attrNS?.length&&setAttrNS({element:e,attrs:t.attrNS}),t.dataset?.length&&setData({element:e,dataset:t.dataset})}function createHTMLElement(e={}){try{const{parent:t,element:n,shadow:r}=e,o=document.createElement(n.type);applyAttributes(o,n);const a=t??document.body;if((a instanceof HTMLElement||a instanceof SVGElement||a instanceof ShadowRoot)&&a.appendChild(o),r&&o.dataset?.state){const e=function createShadowFromConfig(e,t){if("string"==typeof t)return attachShadow(e,t);if("object"==typeof t&&null!==t&&"mode"in t){const n=t,r=attachShadow(e,n.mode);if(n.styles&&"undefined"!=typeof CSSStyleSheet)try{const e=new CSSStyleSheet;e.replaceSync(n.styles),r.adoptedStyleSheets=[e]}catch{}return r}}(o,r);if(e)return e}return o}catch(e){return void console.error(e)}}function createSVGElement(e={}){try{const{parent:t,element:n}=e,r=document.createElementNS("http://www.w3.org/2000/svg",n.type);return applyAttributes(r,n),t&&(t instanceof HTMLElement||t instanceof SVGElement)&&t.appendChild(r),r}catch(e){return void console.error(e)}}function createEventElement(e){const{struct:t,element:n}=e,r=getAnyExtension();if(r&&t.event?.action&&t.event?.type){const e=r.EventActions;if(e&&e[t.event.action]){const o={element:n,type:t.event.type,handler:e[t.event.action]};t.event.node&&(o.nodeId=t.event.node);(0,r.addEventToStore)(o)}}}function createFromStruct(e){try{if("object"!=typeof e||!e)return!1;const{struct:t,parent:n=document.body}=e;if(!t?.element)return!1;const r=t.type&&"svg"===t.type.toLowerCase(),o=t.attr?Object.entries(t.attr).map(([e,t])=>({name:e,value:t})):[],a=t.dataset?Object.entries(t.dataset).map(([e,t])=>({name:e,value:t})):[];let l;if(r){const e=t.attrNS?Object.entries(t.attrNS).map(([e,t])=>({name:e,value:t})):[];l=createSVGElement({parent:n,element:{type:t.element,attr:o,attrNS:e,dataset:a}})}else{const e=createHTMLElement({parent:n,element:{type:t.element,attr:o,dataset:a},shadow:t.shadow});l=e instanceof ShadowRoot?e.host:e}if(!l)return!1;if(void 0!==t.text&&(l.textContent=t.text),void 0!==t.html&&(l.innerHTML=t.html),createEventElement({struct:t,element:l}),t.children&&t.children.length>0)for(const e of t.children)createFromStruct({struct:e,parent:l});return l}catch(e){return console.error(e),!1}}function removeElementFromStoreOrEvents(e){try{const t=getAnyExtension(),n=e;if(n.dataset?.state)return removeElementFromStore({key:n.dataset.state,mode:t?1:2,EventModule:t}),!0;if(t&&"function"==typeof t.removeAllEventsFromStore){return(0,t.removeAllEventsFromStore)(e),!0}}catch{}return!1}function removeElement(e){if(!e)return;removeElementFromStoreOrEvents(e);const t=e.querySelectorAll('[listener="true"]');for(let e=t.length-1;e>=0;e--){const n=t[e];n&&removeElementFromStoreOrEvents(n)}const n=e.querySelectorAll("[data-state]");for(let e=n.length-1;e>=0;e--){const t=n[e];if(t){const e=getAnyExtension();removeElementFromStore({key:t.dataset.state,mode:e?1:2,EventModule:e}),t.removeAttribute("data-state")}}e.remove()}const n="SBCoreDom",r="2.0.0",o=Object.freeze({name:n,version:r,domModuleExtends,createHTMLElement,createSVGElement,addElementToStore,getElementFromStore,removeElementFromStore,createFromStruct,removeElement});export{o as DomModule,addElementToStore,clearStore,createEventElement,createFromStruct,createHTMLElement,createSVGElement,o as default,domModuleExtends,getElementFromStore,n as name,removeElement,removeElementFromStore,setAttr,setAttrNS,setData,validVersionSupport,r as version};
+/*! SBCoreDom version 2.0.1 */
+const e={};function addElementToStore(t){const{key:n,value:r}=t;n&&r&&void 0===e[n]&&(e[n]=r)}function getElementFromStore(t){if(t)return e[t]}function removeElementFromStore(t){const{key:n,mode:r=1,EventModule:o={}}=t;if(!n)return!1;try{const t=e[n];return!!t&&(1===r&&"function"==typeof o.removeAllEventsFromStore&&o.removeAllEventsFromStore(t),delete e[n],!0)}catch{return!1}}function clearStore(){for(const t of Object.keys(e))delete e[t]}const t={app:{name:"DomModule",version:"2.0.1"},register:{},allow:{SBCoreEvent:{major:2}},clearExtensions(){for(const e of Object.keys(this.register))delete this.register[e]}};function validVersionSupport(e){const{name:n,version:r}=e,o=t.allow[n];if(o&&r){const e=r.split(".");if(e.length>=1){if(void 0!==o.major&&e[0]&&o.major>Number(e[0]))return!1;if(void 0!==o.minor&&e[1]&&o.minor>Number(e[1]))return!1;if(void 0!==o.patch&&e[2]&&o.patch>Number(e[2]))return!1}return!0}return!1}function domModuleExtends(e){try{const{name:n}=e;if(validVersionSupport(e))return t.register[n]=e,!0}catch{return!1}return!1}function getAnyExtension(){for(const e of Object.keys(t.register))return t.register[e]}function setAttr(e){const{element:t,attrs:n}=e;if(n&&0!==n.length)for(let e=n.length-1;e>=0;e--){const r=n[e];r?.name&&t.setAttribute(r.name,r.value)}}function setAttrNS(e){const{element:t,attrs:n}=e;if(n&&0!==n.length)for(let e=n.length-1;e>=0;e--){const r=n[e];r?.name&&t.setAttributeNS(null,r.name,r.value)}}function setData(e){const{element:t,dataset:n}=e;if(n&&0!==n.length)for(let e=n.length-1;e>=0;e--){const r=n[e];r?.name&&(t.dataset[r.name]=r.value,"state"===r.name&&addElementToStore({key:r.value,value:t}))}}function attachShadow(e,t){return e.attachShadow({mode:t})}function applyAttributes(e,t){t.attr?.length&&setAttr({element:e,attrs:t.attr}),"attrNS"in t&&t.attrNS?.length&&setAttrNS({element:e,attrs:t.attrNS}),t.dataset?.length&&setData({element:e,dataset:t.dataset})}function createHTMLElement(e={}){try{const{parent:t,element:n}=e,r=document.createElement(n.type);applyAttributes(r,n);const o=t??document.body;return(o instanceof HTMLElement||o instanceof SVGElement||o instanceof ShadowRoot)&&o.appendChild(r),r}catch(e){return void console.error(e)}}function createSVGElement(e={}){try{const{parent:t,element:n}=e,r=document.createElementNS("http://www.w3.org/2000/svg",n.type);return applyAttributes(r,n),t&&(t instanceof HTMLElement||t instanceof SVGElement)&&t.appendChild(r),r}catch(e){return void console.error(e)}}function createEventElement(e){const{struct:t,element:n}=e,r=getAnyExtension();if(r&&t.event?.action&&t.event?.type){const e=r.EventActions;if(e&&e[t.event.action]){const o={element:n,type:t.event.type,handler:e[t.event.action]};t.event.node&&(o.nodeId=t.event.node);(0,r.addEventToStore)(o)}}}function createFromStruct(e){try{if("object"!=typeof e||!e)return!1;const{struct:t,parent:n=document.body}=e;if(!t?.element)return!1;const r=t.type&&"svg"===t.type.toLowerCase(),o=t.attr?Object.entries(t.attr).map(([e,t])=>({name:e,value:t})):[],a=t.dataset?Object.entries(t.dataset).map(([e,t])=>({name:e,value:t})):[];let l,c;if(r){const e=t.attrNS?Object.entries(t.attrNS).map(([e,t])=>({name:e,value:t})):[];l=createSVGElement({parent:n,element:{type:t.element,attr:o,attrNS:e,dataset:a}})}else{l=createHTMLElement({parent:n,element:{type:t.element,attr:o,dataset:a}})}if(!l)return!1;const m=l.dataset.state;if(t.shadow&&m){const e=getElementFromStore(m);e&&(c=function createShadowFromConfig(e,t){if("string"==typeof t)return attachShadow(e,t);if("object"==typeof t&&null!==t&&"mode"in t){const n=t,r=attachShadow(e,n.mode);if(n.styles&&"undefined"!=typeof CSSStyleSheet)try{const e=new CSSStyleSheet;e.replaceSync(n.styles),r.adoptedStyleSheets=[e]}catch{}return r}}(e,t.shadow))}if(void 0!==t.text&&(l.textContent=t.text),void 0!==t.html&&(l.innerHTML=t.html),createEventElement({struct:t,element:l}),t.children&&t.children.length>0){const e=c??l;for(const n of t.children)createFromStruct({struct:n,parent:e})}return l}catch(e){return console.error(e),!1}}function removeElementFromStoreOrEvents(e){try{const t=getAnyExtension(),n=e;if(n.dataset?.state)return removeElementFromStore({key:n.dataset.state,mode:t?1:2,EventModule:t}),!0;if(t&&"function"==typeof t.removeAllEventsFromStore){return(0,t.removeAllEventsFromStore)(e),!0}}catch{}return!1}function removeElement(e){if(!e)return;removeElementFromStoreOrEvents(e);const t=e.querySelectorAll('[listener="true"]');for(let e=t.length-1;e>=0;e--){const n=t[e];n&&removeElementFromStoreOrEvents(n)}const n=e.querySelectorAll("[data-state]");for(let e=n.length-1;e>=0;e--){const t=n[e];if(t){const e=getAnyExtension();removeElementFromStore({key:t.dataset.state,mode:e?1:2,EventModule:e}),t.removeAttribute("data-state")}}e.remove()}const n="SBCoreDom",r="2.0.1",o=Object.freeze({name:n,version:r,domModuleExtends,createHTMLElement,createSVGElement,addElementToStore,getElementFromStore,removeElementFromStore,createFromStruct,removeElement});export{o as DomModule,addElementToStore,clearStore,createEventElement,createFromStruct,createHTMLElement,createSVGElement,o as default,domModuleExtends,getElementFromStore,n as name,removeElement,removeElementFromStore,setAttr,setAttrNS,setData,validVersionSupport,r as version};
 /*! https://simplybuilder.github.io */

package/lib/main.esm.mjs

@@ -1,4 +1,4 @@
-/*! SBCoreDom version 2.0.0 */
+/*! SBCoreDom version 2.0.1 */
 /**
  * @module DomStoreModule
  * @description
@@ -92,7 +92,7 @@ function clearStore() {
 const internalStore = {
     app: {
         name: 'DomModule',
-        version: "2.0.0",
+        version: "2.0.1",
     },
     register: {},
     allow: {
@@ -251,8 +251,6 @@ function setData(data) {
 /**
  * Attaches a shadow root to an HTML element with the specified mode.
  *
- * @private
- * @ignore
  * @function attachShadow
  * @param {HTMLElement} host - The element to attach the shadow root to.
  * @param {'open'|'closed'} mode - The shadow DOM mode.
@@ -266,8 +264,6 @@ function attachShadow(host, mode) {
  * String mode creates a shadow root with that mode ('open'/'closed').
  * Object mode can additionally include `styles` via CSSStyleSheet.
  *
- * @private
- * @ignore
  * @function createShadowFromConfig
  * @param {HTMLElement} host - The element to attach the shadow root to.
  * @param {ShadowConfig} shadow - Shadow configuration (string or object with mode/styles).
@@ -315,8 +311,8 @@ function applyAttributes(element, data) {
 }
 /**
  * Creates an HTML element and appends it to a parent.
- * Supports attribute assignment, dataset configuration with automatic
- * store registration, and optional shadow DOM creation.
+ * Supports attribute assignment and dataset configuration with automatic
+ * store registration.
  *
  * @function createHTMLElement
  * @param {Object} [options] - Element creation options.
@@ -325,23 +321,17 @@ function applyAttributes(element, data) {
  * @param {string} options.element.type - HTML tag name (e.g., 'div', 'button').
  * @param {Array} [options.element.attr] - Array of {name, value} attribute pairs.
  * @param {Array} [options.element.dataset] - Array of {name, value} dataset pairs.
- * @param {ShadowConfig} [options.shadow] - Shadow DOM configuration.
- * @returns {HTMLElement|ShadowRoot|undefined} The created element, shadow root, or undefined on error.
+ * @returns {HTMLElement|undefined} The created element, or undefined on error.
  */
 function createHTMLElement(data = {}) {
     try {
-        const { parent, element: elementData, shadow } = data;
+        const { parent, element: elementData } = data;
         const element = document.createElement(elementData.type);
         applyAttributes(element, elementData);
         const targetParent = parent ?? document.body;
         if (targetParent instanceof HTMLElement || targetParent instanceof SVGElement || targetParent instanceof ShadowRoot) {
             targetParent.appendChild(element);
         }
-        if (shadow && element.dataset?.state) {
-            const shadowRoot = createShadowFromConfig(element, shadow);
-            if (shadowRoot)
-                return shadowRoot;
-        }
         return element;
     }
     catch (err) {
@@ -461,18 +451,19 @@ function createFromStruct(data) {
                     attr: attrArray,
                     dataset: datasetArray,
                 },
-                shadow: struct.shadow,
             };
-            const result = createHTMLElement(htmlData);
-            if (result instanceof ShadowRoot) {
-                element = result.host;
-            }
-            else {
-                element = result;
-            }
+            element = createHTMLElement(htmlData);
         }
         if (!element)
             return false;
+        let shadowRoot;
+        const state = element.dataset.state;
+        if (struct.shadow && state) {
+            const storedEl = getElementFromStore(state);
+            if (storedEl) {
+                shadowRoot = createShadowFromConfig(storedEl, struct.shadow);
+            }
+        }
         if (struct.text !== undefined) {
             element.textContent = struct.text;
         }
@@ -481,8 +472,9 @@ function createFromStruct(data) {
         }
         createEventElement({ struct, element });
         if (struct.children && struct.children.length > 0) {
+            const parentNode = shadowRoot ?? element;
             for (const child of struct.children) {
-                createFromStruct({ struct: child, parent: element });
+                createFromStruct({ struct: child, parent: parentNode });
             }
         }
         return element;
@@ -561,7 +553,7 @@ function removeElement(element) {
  * integration with @simplybuilder/core-event.
  */
 const name = "SBCoreDom";
-const version = "2.0.0";
+const version = "2.0.1";
 /**
  * Frozen singleton combining all DOM manipulation capabilities.
  * Pass `domModuleExtends()` to register an EventModule for declarative

package/lib/types.d.ts

@@ -36,7 +36,6 @@ export interface CreateHTMLElementOptions {
             value: string;
         }>;
     };
-    shadow?: ShadowConfig;
 }
 export interface CreateSVGElementOptions {
     parent?: HTMLElement | SVGElement;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@simplybuilder/core-dom",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "main": "lib/main.commonjs.min.cjs",
   "module": "lib/main.esm.min.mjs",
   "types": "lib/core-dom.d.ts",