@spw-ds/spw-stencil-library 1.14.1 → 1.15.0

package/dist/collection/components/spw-tile/spw-tile-description/spw-tile-description.css

@@ -39,6 +39,7 @@ ul {
 :host *::after {
   box-sizing: inherit;
   font-family: var(--spw-ds-font-main);
+  letter-spacing: -0.18px;
 }
 
 /* Sections
@@ -325,7 +326,7 @@ template {
 }
 
 :root {
-  --spw-ds-container-xl: 1232px;
+  --spw-ds-container-xl: 1200px;
   --spw-ds-container-lg: 1024px;
   --spw-ds-container-md: 768px;
   --spw-ds-container-sm: 640px;
@@ -338,7 +339,7 @@ template {
   margin-left: auto;
   margin-right: auto;
 }
-@media (min-width: 460px) {
+@media (min-width: 360px) {
   .spw-ds-container {
     max-width: var(--spw-ds-container-sm);
   }
@@ -353,7 +354,7 @@ template {
     max-width: var(--spw-ds-container-lg);
   }
 }
-@media (min-width: 1350px) {
+@media (min-width: 1200px) {
   .spw-ds-container {
     max-width: var(--spw-ds-container-xl);
   }

package/dist/collection/components/spw-tile/spw-tile-description/spw-tile-description.js

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
 export class SpwTileDescription {
     render() {
-        return (h("div", { key: '91e5b5d78c592d08a3b825e6046a65bcc9b4a893', class: "spw-tile-description" }, h("slot", { key: 'a25c2c542a82c2251b6fb3cc53d1d7f03c391ee6' })));
+        return (h("div", { key: '10111f6125a54c499de83df1059af7068196fb91', class: "spw-tile-description" }, h("slot", { key: 'c496445be46a2b21a053d1cba9d3cda1996d0bac' })));
     }
     static get is() { return "spw-tile-description"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/spw-tile/spw-tile-title/spw-tile-title.css

@@ -39,6 +39,7 @@ ul {
 :host *::after {
   box-sizing: inherit;
   font-family: var(--spw-ds-font-main);
+  letter-spacing: -0.18px;
 }
 
 /* Sections
@@ -325,7 +326,7 @@ template {
 }
 
 :root {
-  --spw-ds-container-xl: 1232px;
+  --spw-ds-container-xl: 1200px;
   --spw-ds-container-lg: 1024px;
   --spw-ds-container-md: 768px;
   --spw-ds-container-sm: 640px;
@@ -338,7 +339,7 @@ template {
   margin-left: auto;
   margin-right: auto;
 }
-@media (min-width: 460px) {
+@media (min-width: 360px) {
   .spw-ds-container {
     max-width: var(--spw-ds-container-sm);
   }
@@ -353,7 +354,7 @@ template {
     max-width: var(--spw-ds-container-lg);
   }
 }
-@media (min-width: 1350px) {
+@media (min-width: 1200px) {
   .spw-ds-container {
     max-width: var(--spw-ds-container-xl);
   }

package/dist/collection/components/spw-tile/spw-tile-title/spw-tile-title.js

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
 export class SpwTileTitle {
     render() {
-        return (h("h3", { key: '56d6357c6f4db99297528b80035a3074e57a7d20', class: "spw-tile-title" }, h("slot", { key: '7a41b388409220641518c05a3b82a71a9c3710bf' })));
+        return (h("h3", { key: 'f99caa90ebcbb8e1cc6523a5d78b6bd549bd3b78', class: "spw-tile-title" }, h("slot", { key: '553527800ce162bc3d7d7350f47784d0bf80ca1d' })));
     }
     static get is() { return "spw-tile-title"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/spw-tile/spw-tile.css

@@ -39,6 +39,7 @@ ul {
 :host *::after {
   box-sizing: inherit;
   font-family: var(--spw-ds-font-main);
+  letter-spacing: -0.18px;
 }
 
 /* Sections
@@ -325,7 +326,7 @@ template {
 }
 
 :root {
-  --spw-ds-container-xl: 1232px;
+  --spw-ds-container-xl: 1200px;
   --spw-ds-container-lg: 1024px;
   --spw-ds-container-md: 768px;
   --spw-ds-container-sm: 640px;
@@ -338,7 +339,7 @@ template {
   margin-left: auto;
   margin-right: auto;
 }
-@media (min-width: 460px) {
+@media (min-width: 360px) {
   .spw-ds-container {
     max-width: var(--spw-ds-container-sm);
   }
@@ -353,7 +354,7 @@ template {
     max-width: var(--spw-ds-container-lg);
   }
 }
-@media (min-width: 1350px) {
+@media (min-width: 1200px) {
   .spw-ds-container {
     max-width: var(--spw-ds-container-xl);
   }

package/dist/collection/components/spw-tile/spw-tile.js

@@ -56,7 +56,7 @@ export class SpwTile {
                 href,
                 target,
             };
-        return (h(Host, { key: '16f734c527ff0ac336142d6cd6cdbb0339fc61a1' }, h(TagType, Object.assign({ key: 'a40105bb95a5c6e3c14f6b1fae4a1966b78c80c0' }, attrs, { class: this.elementClass }), this.imageSrc && (this.variant === 'big' || this.variant === 'light') && (h(Fragment, { key: '7b57b8f146aa6f46b7d99e02d91f330acacf07a0' }, h("div", { key: '3c49b89e8e5c0f6935b407a2b600aaca7584534f', class: "spw-tile__overlay", style: { opacity: `${this.overlayOpacity / 100}` } }), h("img", { key: '347f6823f45bdfb03036d9e7bc26d63b318fa740', src: this.imageSrc, alt: this.imageAlt, class: "spw-tile__image" }))), h("div", { key: 'f8005c3d3776645ced88dcc32f06a462fc4a3ed4', class: "spw-tile__content" }, h("slot", { key: '4c08160a9346aa3a0af50a8288de295f84987fbb' }), this.href && this.variant === 'big' && (h("span", { key: '47f15e799b4aad2da067032d270d5c3a0b34619a', class: "spw-tile__button" }, h("spw-icon", { key: '8fd5410c6ab909df39503655ec09ecfecab972c2', icon: "fa-chevron-right" })))))));
+        return (h(Host, { key: '89a1d7890f33b4277fe290561b4478b283532c2c' }, h(TagType, Object.assign({ key: '23faf83b253d66ba49ca510a3a46eace74fa52fa' }, attrs, { class: this.elementClass }), this.imageSrc && (this.variant === 'big' || this.variant === 'light') && (h(Fragment, { key: 'ef2de37dddbed6327ccbfe8477b4c9d298e30004' }, h("div", { key: 'ec4a36c628552e8e98a01e35eea34d7a79e75767', class: "spw-tile__overlay", style: { opacity: `${this.overlayOpacity / 100}` } }), h("img", { key: 'ef410c766d41b6e441b0005324a0c5adf1323ff7', src: this.imageSrc, alt: this.imageAlt, class: "spw-tile__image" }))), h("div", { key: 'e23849e31aec483c8ad27b2bf06bc87cfbdb1b5c', class: "spw-tile__content" }, h("slot", { key: 'ff78c1e5b5547cf69ac606a1408d06ead6b3998e' }), this.href && this.variant === 'big' && (h("span", { key: '2a16455c519cd52fd95697392bab1f2bd6f7bc23', class: "spw-tile__button" }, h("spw-icon", { key: 'fa1aca41ab16723c6a8f3bca5d1cbed78b8f56d1', icon: "fa-chevron-right" })))))));
     }
     static get is() { return "spw-tile"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/spw-timeline/spw-timeline-item/spw-timeline-item.css

@@ -39,6 +39,7 @@ ul {
 :host *::after {
   box-sizing: inherit;
   font-family: var(--spw-ds-font-main);
+  letter-spacing: -0.18px;
 }
 
 /* Sections
@@ -325,7 +326,7 @@ template {
 }
 
 :root {
-  --spw-ds-container-xl: 1232px;
+  --spw-ds-container-xl: 1200px;
   --spw-ds-container-lg: 1024px;
   --spw-ds-container-md: 768px;
   --spw-ds-container-sm: 640px;
@@ -338,7 +339,7 @@ template {
   margin-left: auto;
   margin-right: auto;
 }
-@media (min-width: 460px) {
+@media (min-width: 360px) {
   .spw-ds-container {
     max-width: var(--spw-ds-container-sm);
   }
@@ -353,7 +354,7 @@ template {
     max-width: var(--spw-ds-container-lg);
   }
 }
-@media (min-width: 1350px) {
+@media (min-width: 1200px) {
   .spw-ds-container {
     max-width: var(--spw-ds-container-xl);
   }

package/dist/collection/components/spw-timeline/spw-timeline-item/spw-timeline-item.js

@@ -55,10 +55,10 @@ export class SpwTimelineItem {
     }
     render() {
         const showConnector = this.isLast === 'false';
-        return (h(Host, { key: '8565d6e9e06a4b6b013279dacc1793d4a12845e8' }, h("div", { key: '4fbeb2d6a3726a6f8c732ce2844c2273886f83cf', class: this.elementClass }, h("div", { key: '48f2968454c986150049d111673719706006f548', class: "spw-timeline-item__step" }, h("div", { key: 'f439a9ab261c8b4806090304f81e8b19de4ea07b', class: "spw-timeline-item__icon" }), showConnector && h("div", { key: '7d9c82d1df17e610a08c2634076d30678a9cbaaf', class: "spw-timeline-item__connector" })), h("div", { key: '518e6275ff058474b878dc61670a27d89f8b5017', class: "spw-timeline-item__content" }, this.renderLabel(), this.description && (h("div", { key: '9d5aff451e136e7717887ba167c7ef85d2438b12', class: "spw-timeline-item__description-wrapper" }, h("div", { key: '783d931dbc3529a7c979b87f0a5abe945bc838c3', ref: el => (this.descriptionRef = el), class: {
+        return (h(Host, { key: '3411a4dad7b254fb64ec6e495cddfb0a3e96bf12' }, h("div", { key: '17add3871d75777fb208e0460cefd44bd438ac70', class: this.elementClass }, h("div", { key: 'f0e0bdc7bca68101f84517cfa8acc81cbee5a708', class: "spw-timeline-item__step" }, h("div", { key: '7b240a6afcc7370957cb68fd2415d723e117faa7', class: "spw-timeline-item__icon" }), showConnector && h("div", { key: 'ad54ebc763fbc4a22de6609545086e13a1721e4c', class: "spw-timeline-item__connector" })), h("div", { key: '07b50deacbe371184a7be1d75b234b11e91d4501', class: "spw-timeline-item__content" }, this.renderLabel(), this.description && (h("div", { key: 'e09d96371e0ea9db29d5cd4c4485bd9902246a84', class: "spw-timeline-item__description-wrapper" }, h("div", { key: 'ec9797e7065e7f23915e4364f95e7ced7411ca3d', ref: el => (this.descriptionRef = el), class: {
                 'spw-timeline-item__description': true,
                 'spw-timeline-item__description--collapsed': !this.isDescriptionExpanded,
-            } }, this.description))), h("slot", { key: 'b154ecfe1e73f18f175e8054896d68e733a8fe90' })))));
+            } }, this.description))), h("slot", { key: 'fe602e230db5f2efebe1700db6f0481d288b6a7d' })))));
     }
     static get is() { return "spw-timeline-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/spw-timeline/spw-timeline.css

@@ -39,6 +39,7 @@ ul {
 :host *::after {
   box-sizing: inherit;
   font-family: var(--spw-ds-font-main);
+  letter-spacing: -0.18px;
 }
 
 /* Sections
@@ -325,7 +326,7 @@ template {
 }
 
 :root {
-  --spw-ds-container-xl: 1232px;
+  --spw-ds-container-xl: 1200px;
   --spw-ds-container-lg: 1024px;
   --spw-ds-container-md: 768px;
   --spw-ds-container-sm: 640px;
@@ -338,7 +339,7 @@ template {
   margin-left: auto;
   margin-right: auto;
 }
-@media (min-width: 460px) {
+@media (min-width: 360px) {
   .spw-ds-container {
     max-width: var(--spw-ds-container-sm);
   }
@@ -353,7 +354,7 @@ template {
     max-width: var(--spw-ds-container-lg);
   }
 }
-@media (min-width: 1350px) {
+@media (min-width: 1200px) {
   .spw-ds-container {
     max-width: var(--spw-ds-container-xl);
   }

package/dist/collection/components/spw-timeline/spw-timeline.js

@@ -53,11 +53,11 @@ export class SpwTimeline {
         return this.visibleItems > 0 && items.length > this.visibleItems;
     }
     render() {
-        return (h(Host, { key: '5a946a9f72eaf694c95a6e389cd05e7c035d447e' }, h("div", { key: 'b77053be46bbefbe1e7b683d37e09b29697491ba', class: this.elementClass }, h("slot", { key: 'bef7bec9265481d21bd8bbb31ba7f4f6536685e1' })), this.shouldShowToggleButton() && (h("div", { key: 'e55bf4fcce24e65a7d4da053c3bb2c72da20b8cf', class: {
+        return (h(Host, { key: '94575a043ff4fefe87b983b66e25f477f86f02ab' }, h("div", { key: '3d7f1892904295b1b1bd0639b6ae8fdf6c1bdcb7', class: this.elementClass }, h("slot", { key: 'bf6ba37f13409a35622c2c9a75b9395112be9e03' })), this.shouldShowToggleButton() && (h("div", { key: '95a25963f5ddcbd7412fa62caebf8602841c8bb4', class: {
                 'spw-timeline__toggle': true,
                 'spw-timeline__toggle--more': !this.showAll,
                 'spw-timeline__toggle--less': this.showAll,
-            } }, h("span", { key: 'a04f13df12d839d923038a1472b54fb1057b2294', class: "spw-timeline__toggle-btn", onClick: this.handleToggle }, this.showAll ? this.showLessText : this.showMoreText)))));
+            } }, h("span", { key: 'aaf21e84cef26ca8ef8dafde2873a518df1d36b1', class: "spw-timeline__toggle-btn", onClick: this.handleToggle }, this.showAll ? this.showLessText : this.showMoreText)))));
     }
     static get is() { return "spw-timeline"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/spw-toast/spw-toast-controller/spw-toast-controller.css

@@ -40,6 +40,7 @@ ul {
 :host *::after {
   box-sizing: inherit;
   font-family: var(--spw-ds-font-main);
+  letter-spacing: -0.18px;
 }
 
 /* Sections
@@ -326,7 +327,7 @@ template {
 }
 
 :root {
-  --spw-ds-container-xl: 1232px;
+  --spw-ds-container-xl: 1200px;
   --spw-ds-container-lg: 1024px;
   --spw-ds-container-md: 768px;
   --spw-ds-container-sm: 640px;
@@ -339,7 +340,7 @@ template {
   margin-left: auto;
   margin-right: auto;
 }
-@media (min-width: 460px) {
+@media (min-width: 360px) {
   .spw-ds-container {
     max-width: var(--spw-ds-container-sm);
   }
@@ -354,7 +355,7 @@ template {
     max-width: var(--spw-ds-container-lg);
   }
 }
-@media (min-width: 1350px) {
+@media (min-width: 1200px) {
   .spw-ds-container {
     max-width: var(--spw-ds-container-xl);
   }

package/dist/collection/components/spw-toast/spw-toast.css

@@ -40,6 +40,7 @@ ul {
 :host *::after {
   box-sizing: inherit;
   font-family: var(--spw-ds-font-main);
+  letter-spacing: -0.18px;
 }
 
 /* Sections
@@ -326,7 +327,7 @@ template {
 }
 
 :root {
-  --spw-ds-container-xl: 1232px;
+  --spw-ds-container-xl: 1200px;
   --spw-ds-container-lg: 1024px;
   --spw-ds-container-md: 768px;
   --spw-ds-container-sm: 640px;
@@ -339,7 +340,7 @@ template {
   margin-left: auto;
   margin-right: auto;
 }
-@media (min-width: 460px) {
+@media (min-width: 360px) {
   .spw-ds-container {
     max-width: var(--spw-ds-container-sm);
   }
@@ -354,7 +355,7 @@ template {
     max-width: var(--spw-ds-container-lg);
   }
 }
-@media (min-width: 1350px) {
+@media (min-width: 1200px) {
   .spw-ds-container {
     max-width: var(--spw-ds-container-xl);
   }

package/dist/collection/components/spw-toc/spw-toc-container/spw-toc-container.css

@@ -39,6 +39,7 @@ ul {
 :host *::after {
   box-sizing: inherit;
   font-family: var(--spw-ds-font-main);
+  letter-spacing: -0.18px;
 }
 
 /* Sections
@@ -325,7 +326,7 @@ template {
 }
 
 :root {
-  --spw-ds-container-xl: 1232px;
+  --spw-ds-container-xl: 1200px;
   --spw-ds-container-lg: 1024px;
   --spw-ds-container-md: 768px;
   --spw-ds-container-sm: 640px;
@@ -338,7 +339,7 @@ template {
   margin-left: auto;
   margin-right: auto;
 }
-@media (min-width: 460px) {
+@media (min-width: 360px) {
   .spw-ds-container {
     max-width: var(--spw-ds-container-sm);
   }
@@ -353,7 +354,7 @@ template {
     max-width: var(--spw-ds-container-lg);
   }
 }
-@media (min-width: 1350px) {
+@media (min-width: 1200px) {
   .spw-ds-container {
     max-width: var(--spw-ds-container-xl);
   }

package/dist/collection/components/spw-toc/spw-toc-container/spw-toc-container.js

@@ -1,14 +1,32 @@
 import { Host, h } from "@stencil/core";
 export class SpwTocContainer {
-    componentDidLoad() {
+    constructor() {
+        /** Profondeur maximale des headings à scanner. Ex: "h3" scanne h2 et h3, "h4" scanne h2, h3 et h4. Par défaut tous les niveaux jusqu'à h6. */
+        this.depth = 'h6';
+    }
+    async componentDidLoad() {
+        await this.waitForChildrenReady();
         this.scanHeadings();
         this.setupMutationObserver();
     }
+    async waitForChildrenReady() {
+        const stencilChildren = this.el.querySelectorAll('*');
+        const readyPromises = [];
+        stencilChildren.forEach((child) => {
+            if (typeof child.componentOnReady === 'function') {
+                readyPromises.push(child.componentOnReady());
+            }
+        });
+        await Promise.all(readyPromises);
+    }
     disconnectedCallback() {
         if (this.observer) {
             this.observer.disconnect();
         }
     }
+    depthChanged() {
+        this.scanHeadings();
+    }
     async getItems() {
         return this.scanHeadings();
     }
@@ -16,11 +34,20 @@ export class SpwTocContainer {
         this.observer = new MutationObserver(() => {
             this.scanHeadings();
         });
-        this.observer.observe(this.el, {
+        this.observeRoot(this.el);
+    }
+    observeRoot(root) {
+        this.observer.observe(root, {
             childList: true,
             subtree: true,
             characterData: true,
         });
+        const all = root.querySelectorAll('*');
+        all.forEach((el) => {
+            if (el.shadowRoot) {
+                this.observeRoot(el.shadowRoot);
+            }
+        });
     }
     slugify(text) {
         return text
@@ -32,12 +59,54 @@ export class SpwTocContainer {
             .replace(/[\s_-]+/g, '-')
             .replace(/^-+|-+$/g, '');
     }
+    getHeadingText(heading) {
+        const parts = [];
+        const walk = (node) => {
+            if (node.nodeType === Node.TEXT_NODE) {
+                parts.push(node.textContent || '');
+                return;
+            }
+            if (node.nodeType !== Node.ELEMENT_NODE)
+                return;
+            const el = node;
+            if (el.tagName === 'SLOT') {
+                const assigned = el.assignedNodes({ flatten: true });
+                assigned.forEach(walk);
+                return;
+            }
+            if (el.shadowRoot) {
+                el.shadowRoot.childNodes.forEach(walk);
+            }
+            el.childNodes.forEach(walk);
+        };
+        heading.childNodes.forEach(walk);
+        return parts.join('').replace(/\s+/g, ' ').trim();
+    }
+    get maxLevel() {
+        var _a, _b;
+        return parseInt((_b = (_a = this.depth) === null || _a === void 0 ? void 0 : _a.substring(1)) !== null && _b !== void 0 ? _b : '6');
+    }
+    walkForHeadings(node, collected) {
+        if (node.nodeType === Node.ELEMENT_NODE) {
+            const el = node;
+            const tag = el.tagName.toLowerCase();
+            const match = tag.match(/^h([2-6])$/);
+            if (match && parseInt(match[1]) <= this.maxLevel) {
+                collected.push(el);
+            }
+            if (el.shadowRoot) {
+                const sr = el.shadowRoot;
+                sr.childNodes.forEach(child => this.walkForHeadings(child, collected));
+            }
+        }
+        node.childNodes.forEach(child => this.walkForHeadings(child, collected));
+    }
     scanHeadings() {
         const tocItems = [];
-        const headings = this.el.querySelectorAll('h2, h3, h4, h5, h6');
+        const headings = [];
+        this.walkForHeadings(this.el, headings);
         headings.forEach((heading) => {
-            var _a;
-            const text = ((_a = heading.textContent) === null || _a === void 0 ? void 0 : _a.trim()) || '';
+            const text = this.getHeadingText(heading);
             let id = heading.id;
             if (!id && text) {
                 id = this.slugify(text);
@@ -52,7 +121,7 @@ export class SpwTocContainer {
         return tocItems;
     }
     render() {
-        return (h(Host, { key: 'b65fc485e901264fc4df9443d7ad55b4c17cb52c' }, h("slot", { key: '186f67706aa14e2fd3ce5799e61de589bd1a5a59' })));
+        return (h(Host, { key: '2a1a9fa7a120d4f64660a74a7a83b0acaeac5528' }, h("slot", { key: 'a9004024f4c44a736c7d76a80aec55fbaa4f233c' })));
     }
     static get is() { return "spw-toc-container"; }
     static get originalStyleUrls() {
@@ -65,6 +134,30 @@ export class SpwTocContainer {
             "$": ["spw-toc-container.css"]
         };
     }
+    static get properties() {
+        return {
+            "depth": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'h2' | 'h3' | 'h4' | 'h5' | 'h6'",
+                    "resolved": "\"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Profondeur maximale des headings \u00E0 scanner. Ex: \"h3\" scanne h2 et h3, \"h4\" scanne h2, h3 et h4. Par d\u00E9faut tous les niveaux jusqu'\u00E0 h6."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "depth",
+                "defaultValue": "'h6'"
+            }
+        };
+    }
     static get events() {
         return [{
                 "method": "tocItemsChanged",
@@ -116,4 +209,10 @@ export class SpwTocContainer {
         };
     }
     static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "depth",
+                "methodName": "depthChanged"
+            }];
+    }
 }

package/dist/collection/components/spw-toc/spw-toc-navigation/spw-toc-navigation.css

@@ -39,6 +39,7 @@ ul {
 :host *::after {
   box-sizing: inherit;
   font-family: var(--spw-ds-font-main);
+  letter-spacing: -0.18px;
 }
 
 /* Sections
@@ -325,7 +326,7 @@ template {
 }
 
 :root {
-  --spw-ds-container-xl: 1232px;
+  --spw-ds-container-xl: 1200px;
   --spw-ds-container-lg: 1024px;
   --spw-ds-container-md: 768px;
   --spw-ds-container-sm: 640px;
@@ -338,7 +339,7 @@ template {
   margin-left: auto;
   margin-right: auto;
 }
-@media (min-width: 460px) {
+@media (min-width: 360px) {
   .spw-ds-container {
     max-width: var(--spw-ds-container-sm);
   }
@@ -353,7 +354,7 @@ template {
     max-width: var(--spw-ds-container-lg);
   }
 }
-@media (min-width: 1350px) {
+@media (min-width: 1200px) {
   .spw-ds-container {
     max-width: var(--spw-ds-container-xl);
   }

package/dist/collection/components/spw-toc/spw-toc-navigation/spw-toc-navigation.js

@@ -73,6 +73,24 @@ export class SpwTocNavigation {
             console.error('Error loading TOC items:', e);
         }
     }
+    findElementById(id, root = document) {
+        const direct = root.getElementById ? root.getElementById(id) : root.querySelector(`#${CSS.escape(id)}`);
+        if (direct)
+            return direct;
+        const all = root.querySelectorAll('*');
+        for (let i = 0; i < all.length; i++) {
+            const el = all[i];
+            if (el.shadowRoot) {
+                const found = this.findElementById(id, el.shadowRoot);
+                if (found)
+                    return found;
+            }
+        }
+        return null;
+    }
+    getAbsoluteTop(element) {
+        return element.getBoundingClientRect().top + window.scrollY;
+    }
     setupScrollHandler() {
         let rafId = null;
         this.scrollHandler = () => {
@@ -91,15 +109,15 @@ export class SpwTocNavigation {
         const newProgressMap = new Map();
         const scrollPosition = window.scrollY + 32;
         h2Items.forEach((h2Item, h2Index) => {
-            const h2Element = document.getElementById(h2Item.id);
+            const h2Element = this.findElementById(h2Item.id);
             if (!h2Element) {
                 newProgressMap.set(h2Index, 0);
                 return;
             }
             const nextH2Item = h2Items[h2Index + 1];
-            const nextH2Element = nextH2Item ? document.getElementById(nextH2Item.id) : null;
-            const h2Top = h2Element.offsetTop;
-            const nextH2Top = nextH2Element ? nextH2Element.offsetTop : document.body.scrollHeight;
+            const nextH2Element = nextH2Item ? this.findElementById(nextH2Item.id) : null;
+            const h2Top = this.getAbsoluteTop(h2Element);
+            const nextH2Top = nextH2Element ? this.getAbsoluteTop(nextH2Element) : document.body.scrollHeight;
             const sectionHeight = nextH2Top - h2Top;
             if (scrollPosition < h2Top) {
                 newProgressMap.set(h2Index, 0);
@@ -157,7 +175,7 @@ export class SpwTocNavigation {
             });
         }, options);
         this.items.forEach(item => {
-            const element = document.getElementById(item.id);
+            const element = this.findElementById(item.id);
             if (element) {
                 this.observer.observe(element);
             }
@@ -165,7 +183,7 @@ export class SpwTocNavigation {
     }
     handleItemClick(event, id, index) {
         event.preventDefault();
-        const targetElement = document.getElementById(id);
+        const targetElement = this.findElementById(id);
         if (targetElement) {
             const elementPosition = targetElement.getBoundingClientRect().top;
             const offsetPosition = elementPosition + window.scrollY - 32;
@@ -203,15 +221,15 @@ export class SpwTocNavigation {
         const newProgressMap = new Map();
         const scrollPosition = targetScrollY + 32;
         h2Items.forEach((h2Item, h2Index) => {
-            const h2Element = document.getElementById(h2Item.id);
+            const h2Element = this.findElementById(h2Item.id);
             if (!h2Element) {
                 newProgressMap.set(h2Index, 0);
                 return;
             }
             const nextH2Item = h2Items[h2Index + 1];
-            const nextH2Element = nextH2Item ? document.getElementById(nextH2Item.id) : null;
-            const h2Top = h2Element.offsetTop;
-            const nextH2Top = nextH2Element ? nextH2Element.offsetTop : document.body.scrollHeight;
+            const nextH2Element = nextH2Item ? this.findElementById(nextH2Item.id) : null;
+            const h2Top = this.getAbsoluteTop(h2Element);
+            const nextH2Top = nextH2Element ? this.getAbsoluteTop(nextH2Element) : document.body.scrollHeight;
             const sectionHeight = nextH2Top - h2Top;
             if (scrollPosition < h2Top) {
                 newProgressMap.set(h2Index, 0);

package/dist/collection/components/spw-toc/spw-toc.css

@@ -39,6 +39,7 @@ ul {
 :host *::after {
   box-sizing: inherit;
   font-family: var(--spw-ds-font-main);
+  letter-spacing: -0.18px;
 }
 
 /* Sections
@@ -325,7 +326,7 @@ template {
 }
 
 :root {
-  --spw-ds-container-xl: 1232px;
+  --spw-ds-container-xl: 1200px;
   --spw-ds-container-lg: 1024px;
   --spw-ds-container-md: 768px;
   --spw-ds-container-sm: 640px;
@@ -338,7 +339,7 @@ template {
   margin-left: auto;
   margin-right: auto;
 }
-@media (min-width: 460px) {
+@media (min-width: 360px) {
   .spw-ds-container {
     max-width: var(--spw-ds-container-sm);
   }
@@ -353,7 +354,7 @@ template {
     max-width: var(--spw-ds-container-lg);
   }
 }
-@media (min-width: 1350px) {
+@media (min-width: 1200px) {
   .spw-ds-container {
     max-width: var(--spw-ds-container-xl);
   }

package/dist/collection/components/spw-toc/spw-toc.js

@@ -1,7 +1,7 @@
 import { Host, h } from "@stencil/core";
 export class SpwToc {
     render() {
-        return (h(Host, { key: 'ba6d11f5d3d81391e34bacb9b66fa2acc2419a5e' }, h("slot", { key: '2676ba395c1ce466a2947f5ed3f118b631509f9c' })));
+        return (h(Host, { key: '0da3d965a85d76a4edf76e1305c076c7cc62e682' }, h("slot", { key: '98b1635f3a8a78d5014db5b1429eb2e3fcdc88da' })));
     }
     static get is() { return "spw-toc"; }
     static get originalStyleUrls() {