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

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: '245d80100890b0433c53af153cf93d22a54373d3', class: "spw-tile-title" }, h("slot", { key: 'd385eb3b785c89ba208d0cdac84062379087c941' })));
+        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: 'fa47fef247987640be07df7c31cc29f3772afee9' }, h(TagType, Object.assign({ key: '7b619663eb8d1ef1febd6c66990d67ef3e569fa4' }, attrs, { class: this.elementClass }), this.imageSrc && (this.variant === 'big' || this.variant === 'light') && (h(Fragment, { key: '9ca35da95f0fa9222f57df9f371bf7a19faa32f4' }, h("div", { key: 'c598653142955125f59429c991c8d3838195658f', class: "spw-tile__overlay", style: { opacity: `${this.overlayOpacity / 100}` } }), h("img", { key: 'ab5b217a8cbb8b195bc214c3954ea7c05e5dfd60', src: this.imageSrc, alt: this.imageAlt, class: "spw-tile__image" }))), h("div", { key: '8eeb201966abc3cdfea0fc854274d0400b67fb21', class: "spw-tile__content" }, h("slot", { key: '8e0df9911b73e0585c72f79d433befe1758bc220' }), this.href && this.variant === 'big' && (h("span", { key: 'f9060c92ec64062db0d7966ef870a59ef1f7af17', class: "spw-tile__button" }, h("spw-icon", { key: '18a109f44d32e7f5529b07eecee2514a7cb47238', 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: 'd744ee44c63cbf4762b311507e235a8dbeef90d0' }, h("div", { key: 'd4eae8545ccd1b715b2e1e8367f3a1bdcb819b8c', class: this.elementClass }, h("div", { key: 'c9fed1c40f5e2d8920e0d4c6411ababc4ece3852', class: "spw-timeline-item__step" }, h("div", { key: 'c31675a02e74b8493fbe5de3996e5184de532d1e', class: "spw-timeline-item__icon" }), showConnector && h("div", { key: '1f05dc46cbd6794bc5ec2baf1a2383d6c55e7469', class: "spw-timeline-item__connector" })), h("div", { key: 'b86d31729e7126280e3322e377eb8dfe8c74ce3a', class: "spw-timeline-item__content" }, this.renderLabel(), this.description && (h("div", { key: 'f9c6da897da3a13b6bd3d865f926e05d49f86893', class: "spw-timeline-item__description-wrapper" }, h("div", { key: 'f40db75d422ba75c6da30356105f0be0f89e1f54', 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: 'd1007cbc51a16f43c75453401c458d7ca29edf9a' })))));
+            } }, 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: '2d3acd5c2ce9a7ba2f5e4bbb7f39b3618e2ea952' }, h("div", { key: 'b90b81419f1fd359989b811f9cb481a1d822c0b2', class: this.elementClass }, h("slot", { key: '0cd871d23e36f5ec6a58d77063161d89055c5b05' })), this.shouldShowToggleButton() && (h("div", { key: 'c9a09e893ed531a16c0c4885f0f4f2aa8b4a5150', 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: '05d884a77b08032f47aa32d184f0b1f5a9ee4164', 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: 'f8c158feebee890564180f5e10d61bb93034a06e' }, h("slot", { key: '2881f9b67b5a220b09c15ae58f055550180bd145' })));
+        return (h(Host, { key: '0da3d965a85d76a4edf76e1305c076c7cc62e682' }, h("slot", { key: '98b1635f3a8a78d5014db5b1429eb2e3fcdc88da' })));
     }
     static get is() { return "spw-toc"; }
     static get originalStyleUrls() {

package/dist/collection/components/spw-tooltip/spw-tooltip.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-tooltip/spw-tooltip.js

@@ -127,7 +127,7 @@ export class SpwTooltip {
         };
     }
     render() {
-        return (h("div", { key: 'dc9749e1f91cd2439788a2f7b7c4550c679e2804', class: this.classes, onMouseEnter: this.showTooltip, onMouseLeave: this.hideTooltip }, h("slot", { key: '125b84bf2d7a63eb087284a5bb4eb84df2985664' })));
+        return (h("div", { key: '8a2170ec05946de72f633b9ab7238e326ac7aed4', class: this.classes, onMouseEnter: this.showTooltip, onMouseLeave: this.hideTooltip }, h("slot", { key: 'f437419938515fee4a3ab73eeca1a7f132280f02' })));
     }
     static get is() { return "spw-tooltip"; }
     static get encapsulation() { return "shadow"; }