@spw-ds/spw-stencil-library 1.3.0 → 1.3.2

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

@@ -9,7 +9,7 @@ const SpwTileTitle$1 = /*@__PURE__*/ proxyCustomElement(class SpwTileTitle exten
         this.__attachShadow();
     }
     render() {
-        return (h("h3", { key: '23d8ad1d2fbd30aeb29c4a9518b5a6d2d54506ac', class: "spw-tile-title" }, h("slot", { key: '829794eb954d43cbbff888727464e9892edc18c2' })));
+        return (h("h3", { key: '7d30767092311c49d3cc6e14129bbdbcb114eecd', class: "spw-tile-title" }, h("slot", { key: 'c67097a903b0791ad7a4e29994cf5e83d9bc35a5' })));
     }
     static get style() { return spwTileTitleCss; }
 }, [1, "spw-tile-title"]);

package/dist/components/spw-tile.js

@@ -1,5 +1,5 @@
 import { p as proxyCustomElement, H, h, F as Fragment, a as Host } from './index.js';
-import { d as defineCustomElement$2 } from './p-DzdAUdJU.js';
+import { d as defineCustomElement$2 } from './p-BTvGjWzW.js';
 
 const spwTileCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{-webkit-text-size-adjust:100%;line-height:1.3}h1,h2,h3,h4,h5,h6,li,p,ul{margin:0;padding:0}ul{list-style:none}:host{-webkit-text-size-adjust:100%;box-sizing:border-box;display:block;font-size:100%;line-height:1.3}:host *,:host :after,:host :before{box-sizing:inherit;font-family:Nunito Sans}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}[hidden],template{display:none}:root{--spw-ds-container-xl:1232px;--spw-ds-container-lg:1024px;--spw-ds-container-md:768px;--spw-ds-container-sm:640px}.spw-ds-container{margin-left:auto;margin-right:auto;padding-left:16px;padding-right:16px;width:100%}@media (min-width:460px){.spw-ds-container{max-width:var(--spw-ds-container-sm)}}@media (min-width:768px){.spw-ds-container{max-width:var(--spw-ds-container-md)}}@media (min-width:1024px){.spw-ds-container{max-width:var(--spw-ds-container-lg)}}@media (min-width:1350px){.spw-ds-container{max-width:var(--spw-ds-container-xl)}}.spw-tile{display:block;position:relative;text-decoration:none;transition:all .3s ease-in-out}.spw-tile--hoverable:hover{transform:translateY(-5px)}.spw-tile:focus-visible{border-radius:5px;box-shadow:0 0 0 5px #000;outline:3px solid #fff;outline-offset:-1px}.spw-tile--icon{padding:16px 0}.spw-tile--big,.spw-tile--light{border-radius:6px;overflow:hidden;padding-top:calc(70% - 12px)}@media (min-width:1024px){.spw-tile--big,.spw-tile--big.spw-tile--height-landscape,.spw-tile--light,.spw-tile--light.spw-tile--height-landscape{padding-top:calc(60% - 12px)}.spw-tile--big.spw-tile--height-square,.spw-tile--light.spw-tile--height-square{padding-top:100%}.spw-tile--big.spw-tile--height-portrait,.spw-tile--light.spw-tile--height-portrait{padding-top:150%}}.spw-tile__image,.spw-tile__overlay{height:100%;left:0;position:absolute;top:0;width:100%}.spw-tile__overlay{background:linear-gradient(180deg,transparent,rgba(0,0,0,.6) 65%,rgba(0,0,0,.75));z-index:2}.spw-tile__image{-o-object-fit:cover;object-fit:cover;z-index:1}.spw-tile__button{align-items:center;background:#fff;border:2px solid transparent;border-radius:50%;color:var(--spw-ds-primary);display:inline-flex;font-size:20px;height:48px;justify-content:center;margin-top:12px;transition:all .2s ease-in;width:48px}.spw-tile:hover .spw-tile__button{background:transparent;border-color:#fff;color:#fff}.spw-tile--icon .spw-tile__content{display:flex;flex-direction:column;gap:12px;padding:0 12px;text-align:center}.spw-tile--icon .spw-tile__content ::slotted(spw-icon){color:var(--spw-ds-primary);font-size:32px}.spw-tile--big .spw-tile__content,.spw-tile--light .spw-tile__content{bottom:0;display:flex;flex-direction:column;gap:6px;left:0;padding:24px;position:absolute;width:100%;z-index:3}.spw-tile--light .spw-tile__content{padding-bottom:24px;text-align:center}";
 
@@ -61,7 +61,7 @@ const SpwTile$1 = /*@__PURE__*/ proxyCustomElement(class SpwTile extends H {
                 href,
                 target,
             };
-        return (h(Host, { key: '8a995f3b32326159210fdaa11052114f58a6f3bd' }, h(TagType, Object.assign({ key: '51c64c8885f2bf672411aee112f782b36afc342b' }, attrs, { class: this.elementClass }), this.imageSrc && (this.variant === 'big' || this.variant === 'light') && (h(Fragment, { key: '1a493a3104712b2efad4c8728706fcb4f93d52d5' }, h("div", { key: '2bd38ca0d41f025279d7155216d1c224341801fe', class: "spw-tile__overlay" }), h("img", { key: 'bc8f25341e4a16ded8ca42fcf76b5ac069243b0b', src: this.imageSrc, alt: this.imageAlt, class: "spw-tile__image" }))), h("div", { key: '4508b95bad26790fa7f8014f5672d9d9fd0b21ff', class: "spw-tile__content" }, h("slot", { key: 'a1e0d9c72651b7d42563dfbb957c2d9975f4756b' }), this.href && this.variant === 'big' && (h("span", { key: '13f16d136b2127c767eb65e7dd66fb0bb1621ff7', class: "spw-tile__button" }, h("spw-icon", { key: '0940dcaaf38842c520169e24bea9ffcc3e813397', icon: "fa-chevron-right" })))))));
+        return (h(Host, { key: '52a8480b60fc5377690f61315cac565c95e13ece' }, h(TagType, Object.assign({ key: '50cb261b255b320605d8b79d50816eff8940fd23' }, attrs, { class: this.elementClass }), this.imageSrc && (this.variant === 'big' || this.variant === 'light') && (h(Fragment, { key: 'f454b41f320d43ffa477ec84d24e050d2637bd94' }, h("div", { key: '2418fd0567426281a013d94c96d605223fabf310', class: "spw-tile__overlay" }), h("img", { key: '763425116ae817e14c9e5d04c5d8ca4154751dbf', src: this.imageSrc, alt: this.imageAlt, class: "spw-tile__image" }))), h("div", { key: 'c2c74ae32ec575727bd30203aed5fd31ad9c708c', class: "spw-tile__content" }, h("slot", { key: '0346be09db8818d89a640a72cb744f41eef1b28d' }), this.href && this.variant === 'big' && (h("span", { key: 'ffc9dc03c78be1782ab907bf4fca8a27d1589f2e', class: "spw-tile__button" }, h("spw-icon", { key: '8bd918f7f96c2e150a8ff71d5487b1fc967f97e5', icon: "fa-chevron-right" })))))));
     }
     get el() { return this; }
     static get style() { return spwTileCss; }

package/dist/components/spw-toc-container.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface SpwTocContainer extends Components.SpwTocContainer, HTMLElement {}
+export const SpwTocContainer: {
+    prototype: SpwTocContainer;
+    new (): SpwTocContainer;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

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

@@ -0,0 +1,90 @@
+import { p as proxyCustomElement, H, c as createEvent, h, a as Host } from './index.js';
+
+const spwTocContainerCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{-webkit-text-size-adjust:100%;line-height:1.3}h1,h2,h3,h4,h5,h6,li,p,ul{margin:0;padding:0}ul{list-style:none}:host{-webkit-text-size-adjust:100%;box-sizing:border-box;display:block;font-size:100%;line-height:1.3}:host *,:host :after,:host :before{box-sizing:inherit;font-family:Nunito Sans}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}[hidden],template{display:none}:root{--spw-ds-container-xl:1232px;--spw-ds-container-lg:1024px;--spw-ds-container-md:768px;--spw-ds-container-sm:640px}.spw-ds-container{margin-left:auto;margin-right:auto;padding-left:16px;padding-right:16px;width:100%}@media (min-width:460px){.spw-ds-container{max-width:var(--spw-ds-container-sm)}}@media (min-width:768px){.spw-ds-container{max-width:var(--spw-ds-container-md)}}@media (min-width:1024px){.spw-ds-container{max-width:var(--spw-ds-container-lg)}}@media (min-width:1350px){.spw-ds-container{max-width:var(--spw-ds-container-xl)}}";
+
+const SpwTocContainer$1 = /*@__PURE__*/ proxyCustomElement(class SpwTocContainer extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.tocItemsChanged = createEvent(this, "tocItemsChanged", 7);
+    }
+    componentDidLoad() {
+        this.scanHeadings();
+        this.setupMutationObserver();
+    }
+    disconnectedCallback() {
+        if (this.observer) {
+            this.observer.disconnect();
+        }
+    }
+    async getItems() {
+        return this.scanHeadings();
+    }
+    setupMutationObserver() {
+        this.observer = new MutationObserver(() => {
+            this.scanHeadings();
+        });
+        this.observer.observe(this.el, {
+            childList: true,
+            subtree: true,
+            characterData: true,
+        });
+    }
+    slugify(text) {
+        return text
+            .toLowerCase()
+            .trim()
+            .normalize('NFD')
+            .replace(/[\u0300-\u036f]/g, '')
+            .replace(/[^\w\s-]/g, '')
+            .replace(/[\s_-]+/g, '-')
+            .replace(/^-+|-+$/g, '');
+    }
+    scanHeadings() {
+        const tocItems = [];
+        const headings = this.el.querySelectorAll('h2, h3, h4, h5, h6');
+        headings.forEach((heading) => {
+            var _a;
+            const text = ((_a = heading.textContent) === null || _a === void 0 ? void 0 : _a.trim()) || '';
+            let id = heading.id;
+            if (!id && text) {
+                id = this.slugify(text);
+                heading.id = id;
+            }
+            if (id && text) {
+                const level = parseInt(heading.tagName.substring(1));
+                tocItems.push({ id, text, level });
+            }
+        });
+        this.tocItemsChanged.emit(tocItems);
+        return tocItems;
+    }
+    render() {
+        return (h(Host, { key: 'd9445a71d4596620020d40b89c66821f86278abb' }, h("slot", { key: 'c6ecd752fc4f9ce6be02784783ca62f78e74a470' })));
+    }
+    get el() { return this; }
+    static get style() { return spwTocContainerCss; }
+}, [4, "spw-toc-container", {
+        "getItems": [64]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["spw-toc-container"];
+    components.forEach(tagName => { switch (tagName) {
+        case "spw-toc-container":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, SpwTocContainer$1);
+            }
+            break;
+    } });
+}
+
+const SpwTocContainer = SpwTocContainer$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SpwTocContainer, defineCustomElement };
+//# sourceMappingURL=spw-toc-container.js.map
+
+//# sourceMappingURL=spw-toc-container.js.map

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

@@ -0,0 +1 @@
+{"file":"spw-toc-container.js","mappings":";;AAAA,MAAM,kBAAkB,GAAG,4kFAA4kF;;MCa1lFA,iBAAe,iBAAAC,kBAAA,CAAA,MAAA,eAAA,SAAAC,CAAA,CAAA;;;;;;IAO1B,gBAAgB,GAAA;QACd,IAAI,CAAC,YAAY,EAAE;QACnB,IAAI,CAAC,qBAAqB,EAAE;;IAG9B,oBAAoB,GAAA;AAClB,QAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;AACjB,YAAA,IAAI,CAAC,QAAQ,CAAC,UAAU,EAAE;;;AAK9B,IAAA,MAAM,QAAQ,GAAA;AACZ,QAAA,OAAO,IAAI,CAAC,YAAY,EAAE;;IAGpB,qBAAqB,GAAA;AAC3B,QAAA,IAAI,CAAC,QAAQ,GAAG,IAAI,gBAAgB,CAAC,MAAK;YACxC,IAAI,CAAC,YAAY,EAAE;AACrB,SAAC,CAAC;QAEF,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,EAAE;AAC7B,YAAA,SAAS,EAAE,IAAI;AACf,YAAA,OAAO,EAAE,IAAI;AACb,YAAA,aAAa,EAAE,IAAI;AACpB,SAAA,CAAC;;AAGI,IAAA,OAAO,CAAC,IAAY,EAAA;AAC1B,QAAA,OAAO;AACJ,aAAA,WAAW;AACX,aAAA,IAAI;aACJ,SAAS,CAAC,KAAK;AACf,aAAA,OAAO,CAAC,kBAAkB,EAAE,EAAE;AAC9B,aAAA,OAAO,CAAC,WAAW,EAAE,EAAE;AACvB,aAAA,OAAO,CAAC,UAAU,EAAE,GAAG;AACvB,aAAA,OAAO,CAAC,UAAU,EAAE,EAAE,CAAC;;IAGpB,YAAY,GAAA;QAClB,MAAM,QAAQ,GAAc,EAAE;QAE9B,MAAM,QAAQ,GAAG,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,oBAAoB,CAAC;AAE/D,QAAA,QAAQ,CAAC,OAAO,CAAC,CAAC,OAA2B,KAAI;;AAC/C,YAAA,MAAM,IAAI,GAAG,CAAA,CAAA,EAAA,GAAA,OAAO,CAAC,WAAW,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,IAAI,EAAE,KAAI,EAAE;AAC9C,YAAA,IAAI,EAAE,GAAG,OAAO,CAAC,EAAE;AAEnB,YAAA,IAAI,CAAC,EAAE,IAAI,IAAI,EAAE;AACf,gBAAA,EAAE,GAAG,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC;AACvB,gBAAA,OAAO,CAAC,EAAE,GAAG,EAAE;;AAGjB,YAAA,IAAI,EAAE,IAAI,IAAI,EAAE;AACd,gBAAA,MAAM,KAAK,GAAG,QAAQ,CAAC,OAAO,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;gBACpD,QAAQ,CAAC,IAAI,CAAC,EAAE,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;;AAEtC,SAAC,CAAC;AAEF,QAAA,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,QAAQ,CAAC;AACnC,QAAA,OAAO,QAAQ;;IAGjB,MAAM,GAAA;QACJ,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACR;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["SpwTocContainer","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/spw-toc/spw-toc-container/spw-toc-container.scss?tag=spw-toc-container","src/components/spw-toc/spw-toc-container/spw-toc-container.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n","import { Component, Host, h, Element, Event, EventEmitter, Method } from '@stencil/core';\n\nexport interface TocItem {\n  id: string;\n  text: string;\n  level: number;\n}\n\n@Component({\n  tag: 'spw-toc-container',\n  styleUrl: 'spw-toc-container.scss',\n  shadow: false,\n})\nexport class SpwTocContainer {\n  @Element() el: HTMLElement;\n\n  @Event() tocItemsChanged: EventEmitter<TocItem[]>;\n\n  private observer: MutationObserver;\n\n  componentDidLoad() {\n    this.scanHeadings();\n    this.setupMutationObserver();\n  }\n\n  disconnectedCallback() {\n    if (this.observer) {\n      this.observer.disconnect();\n    }\n  }\n\n  @Method()\n  async getItems(): Promise<TocItem[]> {\n    return this.scanHeadings();\n  }\n\n  private setupMutationObserver() {\n    this.observer = new MutationObserver(() => {\n      this.scanHeadings();\n    });\n\n    this.observer.observe(this.el, {\n      childList: true,\n      subtree: true,\n      characterData: true,\n    });\n  }\n\n  private slugify(text: string): string {\n    return text\n      .toLowerCase()\n      .trim()\n      .normalize('NFD')\n      .replace(/[\\u0300-\\u036f]/g, '')\n      .replace(/[^\\w\\s-]/g, '')\n      .replace(/[\\s_-]+/g, '-')\n      .replace(/^-+|-+$/g, '');\n  }\n\n  private scanHeadings(): TocItem[] {\n    const tocItems: TocItem[] = [];\n\n    const headings = this.el.querySelectorAll('h2, h3, h4, h5, h6');\n\n    headings.forEach((heading: HTMLHeadingElement) => {\n      const text = heading.textContent?.trim() || '';\n      let id = heading.id;\n\n      if (!id && text) {\n        id = this.slugify(text);\n        heading.id = id;\n      }\n\n      if (id && text) {\n        const level = parseInt(heading.tagName.substring(1));\n        tocItems.push({ id, text, level });\n      }\n    });\n\n    this.tocItemsChanged.emit(tocItems);\n    return tocItems;\n  }\n\n  render() {\n    return (\n      <Host>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/spw-toc-navigation.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface SpwTocNavigation extends Components.SpwTocNavigation, HTMLElement {}
+export const SpwTocNavigation: {
+    prototype: SpwTocNavigation;
+    new (): SpwTocNavigation;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

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

@@ -0,0 +1,304 @@
+import { p as proxyCustomElement, H, h, a as Host } from './index.js';
+
+const spwTocNavigationCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{-webkit-text-size-adjust:100%;line-height:1.3}h1,h2,h3,h4,h5,h6,li,p,ul{margin:0;padding:0}ul{list-style:none}:host{-webkit-text-size-adjust:100%;box-sizing:border-box;display:block;font-size:100%;line-height:1.3}:host *,:host :after,:host :before{box-sizing:inherit;font-family:Nunito Sans}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}[hidden],template{display:none}:root{--spw-ds-container-xl:1232px;--spw-ds-container-lg:1024px;--spw-ds-container-md:768px;--spw-ds-container-sm:640px}.spw-ds-container{margin-left:auto;margin-right:auto;padding-left:16px;padding-right:16px;width:100%}@media (min-width:460px){.spw-ds-container{max-width:var(--spw-ds-container-sm)}}@media (min-width:768px){.spw-ds-container{max-width:var(--spw-ds-container-md)}}@media (min-width:1024px){.spw-ds-container{max-width:var(--spw-ds-container-lg)}}@media (min-width:1350px){.spw-ds-container{max-width:var(--spw-ds-container-xl)}}.spw-toc li,.spw-toc ul{list-style:none;margin:0;padding:0;position:relative}.spw-toc li a{color:var(--spw-color-themes-grey-grey-900);display:block;font-weight:400;padding:.25rem 0;text-decoration:none;transition:font-weight .2s ease}.spw-toc li a:hover{text-decoration:underline}.spw-toc li a:active{color:var(--spw-ds-active)}.spw-toc li.--toc-is-h2{--progress:0;--distance-to-next-h2:0px;position:relative}.spw-toc li.--toc-is-h2:before{background-color:#e0e0e0;content:\"\";height:var(--distance-to-next-h2);left:9px;position:absolute;top:50%;width:2px;z-index:0}.spw-toc li.--toc-is-h2:after{background-color:var(--spw-ds-primary);content:\"\";height:calc(var(--distance-to-next-h2)*var(--progress)/100);left:9px;position:absolute;top:50%;transform-origin:top;transition:height .1s linear;width:2px;z-index:1}.spw-toc li.--toc-is-h2:last-of-type:after,.spw-toc li.--toc-is-h2:last-of-type:before{display:none}.spw-toc li .spw-toc__progress-dot{background-color:#fff;border:4px solid #e0e0e0;border-radius:50%;height:13px;left:.25rem;position:absolute;top:50%;transform:translateY(-50%);transition:all .3s ease;width:13px;z-index:2}.spw-toc li.--toc-bar-completed .spw-toc__progress-dot{border-color:var(--spw-ds-primary)}.spw-toc li.--toc-bar-active .spw-toc__progress-dot{border-color:var(--spw-ds-primary);box-shadow:0 0 0 3px rgba(211,47,47,.2)}.spw-toc li.--toc-is-level-2 a{padding-left:2rem}.spw-toc li.--toc-bar-active.--toc-is-level-2 a,.spw-toc li.--toc-bar-completed.--toc-is-level-2 a{font-weight:700}.spw-toc li.--toc-is-level-3 a{padding-left:3rem}.spw-toc li.--toc-is-level-4 a{padding-left:4rem}.spw-toc li.--toc-is-level-5 a{padding-left:5rem}.spw-toc li.--toc-is-level-6 a{padding-left:6rem}";
+
+const SpwTocNavigation$1 = /*@__PURE__*/ proxyCustomElement(class SpwTocNavigation extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.items = [];
+        this.currentItemIndex = -1;
+        this.currentH2Index = -1;
+        this.h2ProgressPercents = new Map();
+        this.clickedH2Index = -1;
+    }
+    async componentDidLoad() {
+        await this.loadItems();
+        this.setupIntersectionObserver();
+        this.setupScrollHandler();
+    }
+    disconnectedCallback() {
+        if (this.observer) {
+            this.observer.disconnect();
+        }
+        if (this.scrollHandler) {
+            window.removeEventListener('scroll', this.scrollHandler);
+        }
+    }
+    async loadItems() {
+        const tocWrapper = this.el.closest('spw-toc');
+        if (!tocWrapper)
+            return;
+        const container = tocWrapper.querySelector('spw-toc-container');
+        if (!container)
+            return;
+        await new Promise(resolve => setTimeout(resolve, 100));
+        try {
+            if (container.getItems) {
+                const items = await container.getItems();
+                this.items = items;
+            }
+        }
+        catch (e) {
+            console.error('Error loading TOC items:', e);
+        }
+    }
+    setupScrollHandler() {
+        this.scrollHandler = () => {
+            this.calculateH2Progress();
+            this.clickedH2Index = -1;
+        };
+        window.addEventListener('scroll', this.scrollHandler, { passive: true });
+    }
+    calculateH2Progress() {
+        const h2Items = this.items.filter(item => item.level === 2);
+        const newProgressMap = new Map();
+        const scrollPosition = window.scrollY + 32;
+        h2Items.forEach((h2Item, h2Index) => {
+            const h2Element = document.getElementById(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 sectionHeight = nextH2Top - h2Top;
+            if (scrollPosition < h2Top) {
+                newProgressMap.set(h2Index, 0);
+            }
+            else if (scrollPosition >= nextH2Top) {
+                newProgressMap.set(h2Index, 100);
+            }
+            else {
+                const progress = ((scrollPosition - h2Top) / sectionHeight) * 100;
+                newProgressMap.set(h2Index, Math.min(Math.max(progress, 0), 100));
+            }
+        });
+        this.h2ProgressPercents = newProgressMap;
+    }
+    handleTocItemsChanged(event) {
+        const tocWrapper = this.el.closest('spw-toc');
+        const container = event.target;
+        const containerWrapper = container.closest('spw-toc');
+        if (tocWrapper === containerWrapper) {
+            this.items = event.detail;
+            if (this.observer) {
+                this.observer.disconnect();
+            }
+            this.setupIntersectionObserver();
+        }
+    }
+    setupIntersectionObserver() {
+        const options = {
+            rootMargin: '-32px 0px -66%',
+            threshold: 0,
+        };
+        this.observer = new IntersectionObserver(entries => {
+            entries.forEach(entry => {
+                if (entry.isIntersecting) {
+                    const id = entry.target.id;
+                    const index = this.items.findIndex(item => item.id === id);
+                    if (index !== -1) {
+                        this.currentItemIndex = index;
+                        const item = this.items[index];
+                        if (item.level === 2) {
+                            const h2Items = this.items.filter(i => i.level === 2);
+                            this.currentH2Index = h2Items.findIndex(i => i.id === id);
+                        }
+                        else {
+                            const h2Items = this.items.filter(i => i.level === 2);
+                            for (let i = index; i >= 0; i--) {
+                                if (this.items[i].level === 2) {
+                                    this.currentH2Index = h2Items.findIndex(h2 => h2.id === this.items[i].id);
+                                    break;
+                                }
+                            }
+                        }
+                    }
+                }
+            });
+        }, options);
+        this.items.forEach(item => {
+            const element = document.getElementById(item.id);
+            if (element) {
+                this.observer.observe(element);
+            }
+        });
+    }
+    handleItemClick(event, id, index) {
+        event.preventDefault();
+        const targetElement = document.getElementById(id);
+        if (targetElement) {
+            const elementPosition = targetElement.getBoundingClientRect().top;
+            const offsetPosition = elementPosition + window.scrollY - 32;
+            window.scrollTo({
+                top: offsetPosition + 1,
+                behavior: 'smooth',
+            });
+            this.currentItemIndex = index;
+            const item = this.items[index];
+            if (item.level === 2) {
+                const h2Items = this.items.filter(i => i.level === 2);
+                const h2Index = h2Items.findIndex(i => i.id === id);
+                this.currentH2Index = h2Index;
+                this.clickedH2Index = h2Index;
+            }
+            else {
+                const h2Items = this.items.filter(i => i.level === 2);
+                for (let i = index; i >= 0; i--) {
+                    if (this.items[i].level === 2) {
+                        const h2Index = h2Items.findIndex(h2 => h2.id === this.items[i].id);
+                        this.currentH2Index = h2Index;
+                        this.clickedH2Index = h2Index;
+                        break;
+                    }
+                }
+            }
+            this.calculateH2ProgressWithTargetScroll(offsetPosition + 1);
+            const url = new URL(window.location.href);
+            url.hash = id;
+            window.history.pushState({}, '', url);
+        }
+    }
+    calculateH2ProgressWithTargetScroll(targetScrollY) {
+        const h2Items = this.items.filter(item => item.level === 2);
+        const newProgressMap = new Map();
+        const scrollPosition = targetScrollY + 32;
+        h2Items.forEach((h2Item, h2Index) => {
+            const h2Element = document.getElementById(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 sectionHeight = nextH2Top - h2Top;
+            if (scrollPosition < h2Top) {
+                newProgressMap.set(h2Index, 0);
+            }
+            else if (scrollPosition >= nextH2Top) {
+                newProgressMap.set(h2Index, 100);
+            }
+            else {
+                const progress = ((scrollPosition - h2Top) / sectionHeight) * 100;
+                newProgressMap.set(h2Index, Math.min(Math.max(progress, 0), 100));
+            }
+        });
+        this.h2ProgressPercents = new Map(newProgressMap);
+    }
+    isItemActive(index, item) {
+        let h2IndexForItem = -1;
+        if (item.level === 2) {
+            const h2Items = this.items.filter(i => i.level === 2);
+            h2IndexForItem = h2Items.findIndex(h2 => h2.id === item.id);
+        }
+        else {
+            const h2Items = this.items.filter(i => i.level === 2);
+            for (let i = index; i >= 0; i--) {
+                if (this.items[i].level === 2) {
+                    h2IndexForItem = h2Items.findIndex(h2 => h2.id === this.items[i].id);
+                    break;
+                }
+            }
+        }
+        if (this.clickedH2Index >= 0 && h2IndexForItem === this.clickedH2Index) {
+            return true;
+        }
+        const progress = h2IndexForItem >= 0 ? this.getH2Progress(h2IndexForItem) : 0;
+        return progress > 0;
+    }
+    getH2Progress(h2Index) {
+        return this.h2ProgressPercents.get(h2Index) || 0;
+    }
+    getH2BarStatus(progress) {
+        if (progress >= 100) {
+            return 'completed';
+        }
+        else if (progress > 0) {
+            return 'active';
+        }
+        else {
+            return 'pending';
+        }
+    }
+    render() {
+        if (this.items.length === 0) {
+            return null;
+        }
+        const h2Items = this.items.filter(item => item.level === 2);
+        const h2Indices = this.items.map((item, idx) => (item.level === 2 ? idx : -1)).filter(idx => idx !== -1);
+        return (h(Host, null, h("nav", { class: "spw-toc" }, h("ul", null, this.items.map((item, index) => {
+            let h2IndexForItem = -1;
+            if (item.level === 2) {
+                h2IndexForItem = h2Items.findIndex(h2 => h2.id === item.id);
+            }
+            else {
+                for (let i = index; i >= 0; i--) {
+                    if (this.items[i].level === 2) {
+                        h2IndexForItem = h2Items.findIndex(h2 => h2.id === this.items[i].id);
+                        break;
+                    }
+                }
+            }
+            const progress = h2IndexForItem >= 0 ? this.getH2Progress(h2IndexForItem) : 0;
+            const barStatus = this.getH2BarStatus(progress);
+            let distanceToNextH2 = 0;
+            if (item.level === 2) {
+                const currentH2ListIndex = h2Indices.indexOf(index);
+                if (currentH2ListIndex !== -1 && currentH2ListIndex < h2Indices.length - 1) {
+                    const nextH2Index = h2Indices[currentH2ListIndex + 1];
+                    const itemsBetween = nextH2Index - index;
+                    distanceToNextH2 = itemsBetween * 32;
+                }
+            }
+            const styleVars = {};
+            if (item.level === 2) {
+                styleVars['--progress'] = `${progress}`;
+                if (distanceToNextH2 > 0) {
+                    styleVars['--distance-to-next-h2'] = `${distanceToNextH2}px`;
+                }
+            }
+            return (h("li", { key: item.id, class: {
+                    [`--toc-is-level-${item.level}`]: true,
+                    '--toc-active': this.isItemActive(index, item),
+                    '--toc-bar-completed': barStatus === 'completed',
+                    '--toc-bar-active': barStatus === 'active',
+                    '--toc-bar-pending': barStatus === 'pending',
+                    '--toc-is-h2': item.level === 2,
+                }, style: styleVars }, item.level === 2 && h("span", { class: "spw-toc__progress-dot" }), h("a", { href: `#${item.id}`, onClick: e => this.handleItemClick(e, item.id, index) }, item.text)));
+        })))));
+    }
+    get el() { return this; }
+    static get style() { return spwTocNavigationCss; }
+}, [0, "spw-toc-navigation", {
+        "items": [32],
+        "currentItemIndex": [32],
+        "currentH2Index": [32],
+        "h2ProgressPercents": [32],
+        "clickedH2Index": [32]
+    }, [[8, "tocItemsChanged", "handleTocItemsChanged"]]]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["spw-toc-navigation"];
+    components.forEach(tagName => { switch (tagName) {
+        case "spw-toc-navigation":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, SpwTocNavigation$1);
+            }
+            break;
+    } });
+}
+
+const SpwTocNavigation = SpwTocNavigation$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SpwTocNavigation, defineCustomElement };
+//# sourceMappingURL=spw-toc-navigation.js.map
+
+//# sourceMappingURL=spw-toc-navigation.js.map

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

@@ -0,0 +1 @@
+{"file":"spw-toc-navigation.js","mappings":"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","names":["SpwTocNavigation","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/spw-toc/spw-toc-navigation/spw-toc-navigation.scss?tag=spw-toc-navigation","src/components/spw-toc/spw-toc-navigation/spw-toc-navigation.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.spw-toc {\n  ul {\n    list-style: none;\n    margin: 0;\n    padding: 0;\n    position: relative;\n  }\n\n  li {\n    position: relative;\n    list-style: none;\n    margin: 0;\n    padding: 0;\n\n    a {\n      display: block;\n      text-decoration: none;\n      font-weight: normal;\n      transition: font-weight 0.2s ease;\n      padding: 0.25rem 0;\n      color: var(--spw-color-themes-grey-grey-900);\n      &:hover {\n        text-decoration: underline;\n      }\n      &:active {\n        color: var(--spw-ds-active);\n      }\n    }\n\n    &.--toc-is-h2 {\n      position: relative;\n      --progress: 0;\n      --distance-to-next-h2: 0px;\n\n      &::before {\n        content: '';\n        position: absolute;\n        left: 9px;\n        top: 50%;\n        width: 2px;\n        background-color: #e0e0e0;\n        z-index: 0;\n        height: var(--distance-to-next-h2);\n      }\n\n      &::after {\n        content: '';\n        position: absolute;\n        left: 9px;\n        top: 50%;\n        width: 2px;\n        background-color: var(--spw-ds-primary);\n        z-index: 1;\n        transition: height 0.1s linear;\n        transform-origin: top;\n        height: calc(var(--distance-to-next-h2) * var(--progress) / 100);\n      }\n\n      &:last-of-type::before,\n      &:last-of-type::after {\n        display: none;\n      }\n    }\n\n    .spw-toc__progress-dot {\n      position: absolute;\n      left: 0.25rem;\n      top: 50%;\n      transform: translateY(-50%);\n      width: 13px;\n      height: 13px;\n      border-radius: 50%;\n      border: 4px solid #e0e0e0;\n      background-color: white;\n      z-index: 2;\n      transition: all 0.3s ease;\n    }\n\n    &.--toc-bar-completed .spw-toc__progress-dot {\n      border-color: var(--spw-ds-primary);\n    }\n\n    &.--toc-bar-active .spw-toc__progress-dot {\n      border-color: var(--spw-ds-primary);\n      box-shadow: 0 0 0 3px rgba(211, 47, 47, 0.2);\n    }\n\n    &.--toc-is-level-2 a {\n      padding-left: 2rem;\n    }\n\n    &.--toc-bar-completed.--toc-is-level-2 a,\n    &.--toc-bar-active.--toc-is-level-2 a {\n      font-weight: bold;\n    }\n\n    &.--toc-is-level-3 a {\n      padding-left: 3rem;\n    }\n\n    &.--toc-is-level-4 a {\n      padding-left: 4rem;\n    }\n\n    &.--toc-is-level-5 a {\n      padding-left: 5rem;\n    }\n\n    &.--toc-is-level-6 a {\n      padding-left: 6rem;\n    }\n  }\n}\n","import { Component, Host, h, State, Listen, Element } from '@stencil/core';\nimport type { TocItem } from '../spw-toc-container/spw-toc-container';\n\n@Component({\n  tag: 'spw-toc-navigation',\n  styleUrl: 'spw-toc-navigation.scss',\n  shadow: false,\n})\nexport class SpwTocNavigation {\n  @Element() el: HTMLElement;\n\n  @State() items: TocItem[] = [];\n  @State() currentItemIndex: number = -1;\n  @State() currentH2Index: number = -1;\n  @State() h2ProgressPercents: Map<number, number> = new Map();\n  @State() clickedH2Index: number = -1;\n\n  private observer: IntersectionObserver;\n  private scrollHandler: () => void;\n\n  async componentDidLoad() {\n    await this.loadItems();\n    this.setupIntersectionObserver();\n    this.setupScrollHandler();\n  }\n\n  disconnectedCallback() {\n    if (this.observer) {\n      this.observer.disconnect();\n    }\n    if (this.scrollHandler) {\n      window.removeEventListener('scroll', this.scrollHandler);\n    }\n  }\n\n  private async loadItems() {\n    const tocWrapper = this.el.closest('spw-toc');\n    if (!tocWrapper) return;\n\n    const container = tocWrapper.querySelector('spw-toc-container') as any;\n    if (!container) return;\n\n    await new Promise(resolve => setTimeout(resolve, 100));\n\n    try {\n      if (container.getItems) {\n        const items = await container.getItems();\n        this.items = items;\n      }\n    } catch (e) {\n      console.error('Error loading TOC items:', e);\n    }\n  }\n\n  private setupScrollHandler() {\n    this.scrollHandler = () => {\n      this.calculateH2Progress();\n      this.clickedH2Index = -1;\n    };\n    window.addEventListener('scroll', this.scrollHandler, { passive: true });\n  }\n\n  private calculateH2Progress() {\n    const h2Items = this.items.filter(item => item.level === 2);\n    const newProgressMap = new Map<number, number>();\n\n    const scrollPosition = window.scrollY + 32;\n\n    h2Items.forEach((h2Item, h2Index) => {\n      const h2Element = document.getElementById(h2Item.id);\n      if (!h2Element) {\n        newProgressMap.set(h2Index, 0);\n        return;\n      }\n\n      const nextH2Item = h2Items[h2Index + 1];\n      const nextH2Element = nextH2Item ? document.getElementById(nextH2Item.id) : null;\n\n      const h2Top = h2Element.offsetTop;\n      const nextH2Top = nextH2Element ? nextH2Element.offsetTop : document.body.scrollHeight;\n\n      const sectionHeight = nextH2Top - h2Top;\n\n      if (scrollPosition < h2Top) {\n        newProgressMap.set(h2Index, 0);\n      } else if (scrollPosition >= nextH2Top) {\n        newProgressMap.set(h2Index, 100);\n      } else {\n        const progress = ((scrollPosition - h2Top) / sectionHeight) * 100;\n        newProgressMap.set(h2Index, Math.min(Math.max(progress, 0), 100));\n      }\n    });\n\n    this.h2ProgressPercents = newProgressMap;\n  }\n\n  @Listen('tocItemsChanged', { target: 'window' })\n  handleTocItemsChanged(event: CustomEvent<TocItem[]>) {\n    const tocWrapper = this.el.closest('spw-toc');\n    const container = event.target as HTMLElement;\n    const containerWrapper = container.closest('spw-toc');\n\n    if (tocWrapper === containerWrapper) {\n      this.items = event.detail;\n\n      if (this.observer) {\n        this.observer.disconnect();\n      }\n      this.setupIntersectionObserver();\n    }\n  }\n\n  private setupIntersectionObserver() {\n    const options = {\n      rootMargin: '-32px 0px -66%',\n      threshold: 0,\n    };\n\n    this.observer = new IntersectionObserver(entries => {\n      entries.forEach(entry => {\n        if (entry.isIntersecting) {\n          const id = entry.target.id;\n          const index = this.items.findIndex(item => item.id === id);\n          if (index !== -1) {\n            this.currentItemIndex = index;\n\n            const item = this.items[index];\n            if (item.level === 2) {\n              const h2Items = this.items.filter(i => i.level === 2);\n              this.currentH2Index = h2Items.findIndex(i => i.id === id);\n            } else {\n              const h2Items = this.items.filter(i => i.level === 2);\n              for (let i = index; i >= 0; i--) {\n                if (this.items[i].level === 2) {\n                  this.currentH2Index = h2Items.findIndex(h2 => h2.id === this.items[i].id);\n                  break;\n                }\n              }\n            }\n          }\n        }\n      });\n    }, options);\n\n    this.items.forEach(item => {\n      const element = document.getElementById(item.id);\n      if (element) {\n        this.observer.observe(element);\n      }\n    });\n  }\n\n  private handleItemClick(event: MouseEvent, id: string, index: number) {\n    event.preventDefault();\n\n    const targetElement = document.getElementById(id);\n    if (targetElement) {\n      const elementPosition = targetElement.getBoundingClientRect().top;\n      const offsetPosition = elementPosition + window.scrollY - 32;\n\n      window.scrollTo({\n        top: offsetPosition + 1,\n        behavior: 'smooth',\n      });\n\n      this.currentItemIndex = index;\n\n      const item = this.items[index];\n      if (item.level === 2) {\n        const h2Items = this.items.filter(i => i.level === 2);\n        const h2Index = h2Items.findIndex(i => i.id === id);\n        this.currentH2Index = h2Index;\n        this.clickedH2Index = h2Index;\n      } else {\n        const h2Items = this.items.filter(i => i.level === 2);\n        for (let i = index; i >= 0; i--) {\n          if (this.items[i].level === 2) {\n            const h2Index = h2Items.findIndex(h2 => h2.id === this.items[i].id);\n            this.currentH2Index = h2Index;\n            this.clickedH2Index = h2Index;\n            break;\n          }\n        }\n      }\n\n      this.calculateH2ProgressWithTargetScroll(offsetPosition + 1);\n\n      const url = new URL(window.location.href);\n      url.hash = id;\n      window.history.pushState({}, '', url);\n    }\n  }\n\n  private calculateH2ProgressWithTargetScroll(targetScrollY: number) {\n    const h2Items = this.items.filter(item => item.level === 2);\n    const newProgressMap = new Map<number, number>();\n\n    const scrollPosition = targetScrollY + 32;\n\n    h2Items.forEach((h2Item, h2Index) => {\n      const h2Element = document.getElementById(h2Item.id);\n      if (!h2Element) {\n        newProgressMap.set(h2Index, 0);\n        return;\n      }\n\n      const nextH2Item = h2Items[h2Index + 1];\n      const nextH2Element = nextH2Item ? document.getElementById(nextH2Item.id) : null;\n\n      const h2Top = h2Element.offsetTop;\n      const nextH2Top = nextH2Element ? nextH2Element.offsetTop : document.body.scrollHeight;\n\n      const sectionHeight = nextH2Top - h2Top;\n\n      if (scrollPosition < h2Top) {\n        newProgressMap.set(h2Index, 0);\n      } else if (scrollPosition >= nextH2Top) {\n        newProgressMap.set(h2Index, 100);\n      } else {\n        const progress = ((scrollPosition - h2Top) / sectionHeight) * 100;\n        newProgressMap.set(h2Index, Math.min(Math.max(progress, 0), 100));\n      }\n    });\n\n    this.h2ProgressPercents = new Map(newProgressMap);\n  }\n\n  private isItemActive(index: number, item: TocItem): boolean {\n    let h2IndexForItem = -1;\n    if (item.level === 2) {\n      const h2Items = this.items.filter(i => i.level === 2);\n      h2IndexForItem = h2Items.findIndex(h2 => h2.id === item.id);\n    } else {\n      const h2Items = this.items.filter(i => i.level === 2);\n      for (let i = index; i >= 0; i--) {\n        if (this.items[i].level === 2) {\n          h2IndexForItem = h2Items.findIndex(h2 => h2.id === this.items[i].id);\n          break;\n        }\n      }\n    }\n\n    if (this.clickedH2Index >= 0 && h2IndexForItem === this.clickedH2Index) {\n      return true;\n    }\n\n    const progress = h2IndexForItem >= 0 ? this.getH2Progress(h2IndexForItem) : 0;\n    return progress > 0;\n  }\n\n  private getH2Progress(h2Index: number): number {\n    return this.h2ProgressPercents.get(h2Index) || 0;\n  }\n\n  private getH2BarStatus(progress: number): 'completed' | 'active' | 'pending' {\n    if (progress >= 100) {\n      return 'completed';\n    } else if (progress > 0) {\n      return 'active';\n    } else {\n      return 'pending';\n    }\n  }\n\n  render() {\n    if (this.items.length === 0) {\n      return null;\n    }\n\n    const h2Items = this.items.filter(item => item.level === 2);\n    const h2Indices = this.items.map((item, idx) => (item.level === 2 ? idx : -1)).filter(idx => idx !== -1);\n\n    return (\n      <Host>\n        <nav class=\"spw-toc\">\n          <ul>\n            {this.items.map((item, index) => {\n              let h2IndexForItem = -1;\n              if (item.level === 2) {\n                h2IndexForItem = h2Items.findIndex(h2 => h2.id === item.id);\n              } else {\n                for (let i = index; i >= 0; i--) {\n                  if (this.items[i].level === 2) {\n                    h2IndexForItem = h2Items.findIndex(h2 => h2.id === this.items[i].id);\n                    break;\n                  }\n                }\n              }\n\n              const progress = h2IndexForItem >= 0 ? this.getH2Progress(h2IndexForItem) : 0;\n              const barStatus = this.getH2BarStatus(progress);\n\n              let distanceToNextH2 = 0;\n              if (item.level === 2) {\n                const currentH2ListIndex = h2Indices.indexOf(index);\n                if (currentH2ListIndex !== -1 && currentH2ListIndex < h2Indices.length - 1) {\n                  const nextH2Index = h2Indices[currentH2ListIndex + 1];\n                  const itemsBetween = nextH2Index - index;\n                  distanceToNextH2 = itemsBetween * 32;\n                }\n              }\n\n              const styleVars: any = {};\n              if (item.level === 2) {\n                styleVars['--progress'] = `${progress}`;\n                if (distanceToNextH2 > 0) {\n                  styleVars['--distance-to-next-h2'] = `${distanceToNextH2}px`;\n                }\n              }\n\n              return (\n                <li\n                  key={item.id}\n                  class={{\n                    [`--toc-is-level-${item.level}`]: true,\n                    '--toc-active': this.isItemActive(index, item),\n                    '--toc-bar-completed': barStatus === 'completed',\n                    '--toc-bar-active': barStatus === 'active',\n                    '--toc-bar-pending': barStatus === 'pending',\n                    '--toc-is-h2': item.level === 2,\n                  }}\n                  style={styleVars}\n                >\n                  {item.level === 2 && <span class=\"spw-toc__progress-dot\"></span>}\n                  <a href={`#${item.id}`} onClick={e => this.handleItemClick(e, item.id, index)}>\n                    {item.text}\n                  </a>\n                </li>\n              );\n            })}\n          </ul>\n        </nav>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/spw-toc.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface SpwToc extends Components.SpwToc, HTMLElement {}
+export const SpwToc: {
+    prototype: SpwToc;
+    new (): SpwToc;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/spw-toc.js

@@ -0,0 +1,35 @@
+import { p as proxyCustomElement, H, h, a as Host } from './index.js';
+
+const spwTocCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{-webkit-text-size-adjust:100%;line-height:1.3}h1,h2,h3,h4,h5,h6,li,p,ul{margin:0;padding:0}ul{list-style:none}:host{-webkit-text-size-adjust:100%;box-sizing:border-box;display:block;font-size:100%;line-height:1.3}:host *,:host :after,:host :before{box-sizing:inherit;font-family:Nunito Sans}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}[hidden],template{display:none}:root{--spw-ds-container-xl:1232px;--spw-ds-container-lg:1024px;--spw-ds-container-md:768px;--spw-ds-container-sm:640px}.spw-ds-container{margin-left:auto;margin-right:auto;padding-left:16px;padding-right:16px;width:100%}@media (min-width:460px){.spw-ds-container{max-width:var(--spw-ds-container-sm)}}@media (min-width:768px){.spw-ds-container{max-width:var(--spw-ds-container-md)}}@media (min-width:1024px){.spw-ds-container{max-width:var(--spw-ds-container-lg)}}@media (min-width:1350px){.spw-ds-container{max-width:var(--spw-ds-container-xl)}}";
+
+const SpwToc$1 = /*@__PURE__*/ proxyCustomElement(class SpwToc extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+    }
+    render() {
+        return (h(Host, { key: '04974fd6e7ba44228eed69e90d0d91c481b58506' }, h("slot", { key: '663156b54ff8492a251cc55ed8ebb836cab31a39' })));
+    }
+    static get style() { return spwTocCss; }
+}, [4, "spw-toc"]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["spw-toc"];
+    components.forEach(tagName => { switch (tagName) {
+        case "spw-toc":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, SpwToc$1);
+            }
+            break;
+    } });
+}
+
+const SpwToc = SpwToc$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SpwToc, defineCustomElement };
+//# sourceMappingURL=spw-toc.js.map
+
+//# sourceMappingURL=spw-toc.js.map

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

@@ -0,0 +1 @@
+{"file":"spw-toc.js","mappings":";;AAAA,MAAM,SAAS,GAAG,4kFAA4kF;;MCOjlFA,QAAM,iBAAAC,kBAAA,CAAA,MAAA,MAAA,SAAAC,CAAA,CAAA;;;;;IACjB,MAAM,GAAA;QACJ,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACR;;;;;;;;;;;;;;;;;;;;;;;","names":["SpwToc","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/spw-toc/spw-toc.scss?tag=spw-toc","src/components/spw-toc/spw-toc.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n","import { Component, Host, h } from '@stencil/core';\n\n@Component({\n  tag: 'spw-toc',\n  styleUrl: 'spw-toc.scss',\n  shadow: false,\n})\nexport class SpwToc {\n  render() {\n    return (\n      <Host>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/spw-tooltip.js

@@ -1,4 +1,4 @@
-import { S as SpwTooltip$1, d as defineCustomElement$1 } from './p-QqgPCBuq.js';
+import { S as SpwTooltip$1, d as defineCustomElement$1 } from './p-BCWtq89_.js';
 
 const SpwTooltip = SpwTooltip$1;
 const defineCustomElement = defineCustomElement$1;