snice 4.27.0 → 4.28.0

package/dist/cdn/runtime/snice-runtime.esm.js

@@ -1,11 +1,11 @@
 /*!
- * snice v4.27.0
+ * snice v4.28.0
  * A decorator-driven web component library with differential rendering, routing, controllers, and 130+ ready-made UI components. Use as much or as little as you want. Zero dependencies, works anywhere.
  * (c) 2024
  * Released under the MIT License.
  */
 /*!
- * snice v4.26.2
+ * snice v4.27.0
  * A decorator-driven web component library with differential rendering, routing, controllers, and 130+ ready-made UI components. Use as much or as little as you want. Zero dependencies, works anywhere.
  * (c) 2024
  * Released under the MIT License.
@@ -2065,9 +2065,20 @@ class ConditionalIfPart extends Part {
     constructor(ifElement) {
         super();
         this.value = NOT_SET;
-        this.fragment = null;
-        this.ifElement = ifElement;
-        this.ifElement.style.display = 'contents';
+        this.childFragment = null;
+        const parent = ifElement.parentNode;
+        // Create comment boundary markers
+        this.startNode = document.createComment('if');
+        this.endNode = document.createComment('/if');
+        // Insert markers where <if> is
+        parent.insertBefore(this.startNode, ifElement);
+        parent.insertBefore(this.endNode, ifElement.nextSibling);
+        // Move <if>'s children between the markers
+        while (ifElement.firstChild) {
+            parent.insertBefore(ifElement.firstChild, this.endNode);
+        }
+        // Remove the <if> element from DOM
+        parent.removeChild(ifElement);
     }
     commit(value) {
         const condition = Boolean(value);
@@ -2076,26 +2087,32 @@ class ConditionalIfPart extends Part {
         this.value = value;
         if (condition) {
             // Show: restore children from fragment
-            if (this.fragment && this.fragment.hasChildNodes()) {
-                this.ifElement.appendChild(this.fragment);
+            if (this.childFragment && this.childFragment.hasChildNodes()) {
+                this.startNode.parentNode.insertBefore(this.childFragment, this.endNode);
             }
         }
         else {
             // Hide: move children to fragment
-            if (!this.fragment) {
-                this.fragment = document.createDocumentFragment();
+            if (!this.childFragment) {
+                this.childFragment = document.createDocumentFragment();
             }
-            while (this.ifElement.firstChild) {
-                this.fragment.appendChild(this.ifElement.firstChild);
+            let node = this.startNode.nextSibling;
+            while (node && node !== this.endNode) {
+                const next = node.nextSibling;
+                this.childFragment.appendChild(node);
+                node = next;
             }
         }
     }
     clear() {
-        if (!this.fragment) {
-            this.fragment = document.createDocumentFragment();
+        if (!this.childFragment) {
+            this.childFragment = document.createDocumentFragment();
         }
-        while (this.ifElement.firstChild) {
-            this.fragment.appendChild(this.ifElement.firstChild);
+        let node = this.startNode.nextSibling;
+        while (node && node !== this.endNode) {
+            const next = node.nextSibling;
+            this.childFragment.appendChild(node);
+            node = next;
         }
     }
 }
@@ -2107,62 +2124,70 @@ class ConditionalCasePart extends Part {
     constructor(caseElement) {
         super();
         this.value = NOT_SET;
-        this.childrenMap = new Map();
-        this.fragments = new Map();
-        this.defaultChild = null;
-        this.currentChild = null;
-        this.caseElement = caseElement;
-        this.caseElement.style.display = 'contents';
-        // Build map and store children in fragments initially
-        for (const child of Array.from(this.caseElement.children)) {
+        this.branches = new Map();
+        this.defaultBranch = null;
+        this.currentKey = null;
+        const parent = caseElement.parentNode;
+        // Create comment boundary markers
+        this.startNode = document.createComment('case');
+        this.endNode = document.createComment('/case');
+        // Insert markers where <case> is
+        parent.insertBefore(this.startNode, caseElement);
+        parent.insertBefore(this.endNode, caseElement.nextSibling);
+        // Extract branches from <when> and <default> children
+        for (const child of Array.from(caseElement.children)) {
             const childTag = child.tagName.toLowerCase();
             if (childTag === 'when') {
-                child.style.display = 'contents';
                 const whenValue = child.getAttribute('value') || '';
-                this.childrenMap.set(whenValue, child);
                 const fragment = document.createDocumentFragment();
-                fragment.appendChild(child);
-                this.fragments.set(child, fragment);
+                while (child.firstChild) {
+                    fragment.appendChild(child.firstChild);
+                }
+                this.branches.set(whenValue, fragment);
             }
             else if (childTag === 'default') {
-                child.style.display = 'contents';
-                this.defaultChild = child;
-                const fragment = document.createDocumentFragment();
-                fragment.appendChild(child);
-                this.fragments.set(child, fragment);
+                this.defaultBranch = document.createDocumentFragment();
+                while (child.firstChild) {
+                    this.defaultBranch.appendChild(child.firstChild);
+                }
             }
         }
+        // Remove the <case> element from DOM
+        parent.removeChild(caseElement);
     }
     commit(value) {
         if (this.value === value)
             return;
         this.value = value;
         const valueStr = String(value);
-        // Remove current child
-        if (this.currentChild) {
-            const fragment = this.fragments.get(this.currentChild);
-            if (fragment && !fragment.hasChildNodes()) {
-                fragment.appendChild(this.currentChild);
-            }
-        }
-        // Insert matching child
-        const matchingChild = this.childrenMap.get(valueStr) || this.defaultChild;
-        if (matchingChild) {
-            const fragment = this.fragments.get(matchingChild);
-            if (fragment && fragment.hasChildNodes()) {
-                this.caseElement.appendChild(fragment);
-            }
-            this.currentChild = matchingChild;
+        // Move current content back to its fragment
+        this._collectCurrent();
+        // Insert matching branch
+        const hasBranch = this.branches.has(valueStr);
+        const matchingFragment = hasBranch ? this.branches.get(valueStr) : this.defaultBranch;
+        this.currentKey = hasBranch ? valueStr : (this.defaultBranch ? '__default__' : null);
+        if (matchingFragment && matchingFragment.hasChildNodes()) {
+            this.startNode.parentNode.insertBefore(matchingFragment, this.endNode);
+        }
+    }
+    _collectCurrent() {
+        if (this.currentKey === null)
+            return;
+        const fragment = this.currentKey === '__default__'
+            ? this.defaultBranch
+            : this.branches.get(this.currentKey);
+        if (!fragment)
+            return;
+        let node = this.startNode.nextSibling;
+        while (node && node !== this.endNode) {
+            const next = node.nextSibling;
+            fragment.appendChild(node);
+            node = next;
         }
     }
     clear() {
-        if (this.currentChild) {
-            const fragment = this.fragments.get(this.currentChild);
-            if (fragment && !fragment.hasChildNodes()) {
-                fragment.appendChild(this.currentChild);
-            }
-            this.currentChild = null;
-        }
+        this._collectCurrent();
+        this.currentKey = null;
     }
 }
 
@@ -3087,19 +3112,16 @@ function applyStyles(element) {
         if (!element.shadowRoot) {
             element.attachShadow({ mode: 'open' });
         }
-        // Create base styles for meta elements (if, case)
-        const baseStyleSheet = new CSSStyleSheet();
-        baseStyleSheet.replaceSync('if, case { display: contents; }');
         if (!element.shadowRoot)
             return;
         // Prefer constructable stylesheets
         if (result.styleSheet && 'adoptedStyleSheets' in element.shadowRoot) {
-            element.shadowRoot.adoptedStyleSheets = [baseStyleSheet, result.styleSheet];
+            element.shadowRoot.adoptedStyleSheets = [result.styleSheet];
             return;
         }
         // Fallback to <style> tag
         const style = document.createElement('style');
-        style.textContent = 'if, case { display: contents; }\n' + result.cssText;
+        style.textContent = result.cssText;
         element.shadowRoot.appendChild(style);
     }
     catch (error) {
@@ -5419,7 +5441,7 @@ if (typeof document !== 'undefined') {
 }
 
 /*!
- * snice v4.26.2
+ * snice v4.27.0
  * A decorator-driven web component library with differential rendering, routing, controllers, and 130+ ready-made UI components. Use as much or as little as you want. Zero dependencies, works anywhere.
  * (c) 2024
  * Released under the MIT License.
@@ -5436,7 +5458,7 @@ if (!globalThis.snice) {
 }
 
 /*!
- * snice v4.26.2
+ * snice v4.27.0
  * A decorator-driven web component library with differential rendering, routing, controllers, and 130+ ready-made UI components. Use as much or as little as you want. Zero dependencies, works anywhere.
  * (c) 2024
  * Released under the MIT License.