@swisspost/design-system-components 10.0.0-next.53 → 10.0.0-next.55

package/dist/collection/components/post-stepper/post-stepper.js

@@ -0,0 +1,204 @@
+import { h, Host } from "@stencil/core";
+import { version } from "../../../../package";
+import { checkRequiredAndPattern, checkRequiredAndType } from "../../utils/index";
+export class PostStepper {
+    constructor() {
+        /**
+         * Defines the currently active step
+         */
+        this.currentIndex = -1;
+    }
+    validateCurrentLabel() {
+        checkRequiredAndType(this, 'currentLabel', 'string');
+    }
+    validateCompletedLabel() {
+        checkRequiredAndType(this, 'completedLabel', 'string');
+    }
+    validateActiveStepLabel() {
+        checkRequiredAndPattern(this, 'activeStepLabel', /#index\b/);
+        this.updateActiveStepLabel();
+    }
+    validateCurrentIndex() {
+        checkRequiredAndType(this, 'currentIndex', 'number');
+        this.updateSteps();
+    }
+    componentDidLoad() {
+        this.validateCompletedLabel();
+        this.validateCurrentLabel();
+        this.validateActiveStepLabel();
+        // Wait for slotchange
+        setTimeout(() => {
+            this.validateCurrentIndex();
+        });
+    }
+    updateActiveStepLabel() {
+        if (this.activeStepLabel) {
+            const labelTemplate = this.activeStepLabel;
+            this.mobileActiveStepLabel = labelTemplate.replace(/#index/g, `${this.currentIndex + 1}`);
+            this.updateMobileActiveStepVisibility();
+        }
+    }
+    updateSteps() {
+        this.stepItems = this.host.querySelectorAll('post-stepper-item');
+        if (!this.stepItems || this.stepItems.length < 3) {
+            console.error('The post-stepper component should have at least three steps.');
+            return;
+        }
+        this.updateActiveStepLabel();
+        this.stepItems.forEach((el, i) => {
+            if (this.currentIndex === i) {
+                this.mobileActiveStepName = el.querySelector('.label').innerHTML;
+            }
+            // Update "post-stepper-item" classes to show correct status
+            el.classList.toggle('stepper-item-completed', this.currentIndex > i);
+            el.classList.toggle('stepper-item-current', this.currentIndex === i);
+            el.classList.toggle('stepper-item-inactive', this.currentIndex < i);
+            // Update accessibility label depending on status (Completed/Current/-)
+            const hiddenLabel = el.querySelector('.step-hidden-label');
+            if (hiddenLabel) {
+                let labelText = '';
+                if (this.currentIndex > i) {
+                    labelText = `${this.completedLabel}:`;
+                }
+                else if (this.currentIndex === i) {
+                    labelText = `${this.currentLabel}:`;
+                }
+                hiddenLabel.textContent = labelText;
+            }
+            // Update accessibility aria attributes
+            if (this.currentIndex === i) {
+                el.setAttribute('aria-current', 'step');
+                el.setAttribute('aria-live', 'polite');
+            }
+            else {
+                el.removeAttribute('aria-current');
+                el.removeAttribute('aria-live');
+            }
+        });
+        this.updateMobileActiveStepVisibility();
+    }
+    updateMobileActiveStepVisibility() {
+        if (this.currentIndex >= this.stepItems.length || this.currentIndex < 0) {
+            this.mobileActiveStepLabel = '';
+            this.mobileActiveStepName = '';
+        }
+    }
+    render() {
+        return (h(Host, { key: '874d4d6a510ede937c7f9e5dd1f28f8981f33626', "data-version": version }, h("ol", { key: '55fb25ded4111eb1c87ea11a10fbd65346843132' }, h("slot", { key: '0c9f9d00573ea568c0039312507989a22868f432', onSlotchange: () => this.updateSteps() })), h("div", { key: '22e5b14c5285b96ba0a3a99c9cb90e02550298c6', class: "active-step", "aria-hidden": "true" }, this.mobileActiveStepLabel, h("span", { key: '1ba5204f3c01dad6730d0d300168a13316e3d3ac', innerHTML: this.mobileActiveStepName }))));
+    }
+    static get is() { return "post-stepper"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["post-stepper.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["post-stepper.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "currentLabel": {
+                "type": "string",
+                "attribute": "current-label",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "\"Current step\" label for accessibility"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true
+            },
+            "completedLabel": {
+                "type": "string",
+                "attribute": "completed-label",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "\"Completed step\" label for accessibility"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true
+            },
+            "activeStepLabel": {
+                "type": "string",
+                "attribute": "active-step-label",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Label for the \"Step N:\" indicator for mobile view.\nUse `#index` as a placeholder \u2014 it will be replaced with the current step number at runtime."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true
+            },
+            "currentIndex": {
+                "type": "number",
+                "attribute": "current-index",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Defines the currently active step"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "-1"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "mobileActiveStepLabel": {},
+            "mobileActiveStepName": {}
+        };
+    }
+    static get elementRef() { return "host"; }
+    static get watchers() {
+        return [{
+                "propName": "currentLabel",
+                "methodName": "validateCurrentLabel"
+            }, {
+                "propName": "completedLabel",
+                "methodName": "validateCompletedLabel"
+            }, {
+                "propName": "activeStepLabel",
+                "methodName": "validateActiveStepLabel"
+            }, {
+                "propName": "currentIndex",
+                "methodName": "validateCurrentIndex"
+            }];
+    }
+}

package/dist/collection/components/post-stepper-item/post-stepper-item.css

@@ -0,0 +1,7 @@
+:root{--post-icon-success-solid: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxkZWZzPjxzeW1ib2wgaWQ9Imktc3VjY2Vzcy1zb2xpZCI+PHN5bWJvbCBpZD0iczE2IiB2aWV3Qm94PSIwIDAgMTYgMTYiPjxwYXRoIGQ9Ik03Ljk5LS4wOUMzLjU4LS4wOSAwIDMuNDkgMCA3LjkxczMuNTggOCA3Ljk5IDggOC0zLjU4IDgtOC0zLjU4LTgtOC04bTMuMzIgNi4xTDcuNTIgMTEuMiA0LjYzIDguNDRhLjc0Ni43NDYgMCAwIDEtLjAyLTEuMDZjLjI5LS4zLjc2LS4zMSAxLjA2LS4wMmwxLjY1IDEuNTggMi43OC0zLjgxYS43NTEuNzUxIDAgMSAxIDEuMjIuODhaIi8+PC9zeW1ib2w+PHN5bWJvbCBpZD0iczI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGQ9Ik0xMS45OSAwQzUuMzYgMCAwIDUuMzggMCAxMnM1LjM3IDEyIDEyIDEyIDEyLTUuMzcgMTItMTJTMTguNjIgMCAxMS45OSAwbTQuNzcgOC44Ni01LjUxIDcuNTYtNC4xMy0zLjk1Yy0uMzUtLjMzLS4zNi0uODktLjAzLTEuMjRzLjg5LS4zNiAxLjI0LS4wM2wyLjY5IDIuNTcgNC4zMy01Ljk0Yy4yOC0uMzkuODMtLjQ4IDEuMjItLjE5LjM5LjI4LjQ4LjgzLjE5IDEuMjIiLz48L3N5bWJvbD48c3ltYm9sIGlkPSJzMzIiIHZpZXdCb3g9IjAgMCAzMiAzMiI+PHBhdGggZD0iTTE1Ljk5IDBjLTguODQgMC0xNiA3LjE2LTE2IDE2czcuMTYgMTYgMTYgMTYgMTYtNy4xNiAxNi0xNi03LjE2LTE2LTE2LTE2bTYuNzkgMTEuMjItNy45MSAxMC44NS01Ljg1LTUuNThhLjk5Ni45OTYgMCAwIDEtLjAzLTEuNDEuOTk2Ljk5NiAwIDAgMSAxLjQxLS4wM2w0LjE5IDQuMDEgNi41Ny05LjAxYy4zMi0uNDUuOTUtLjU0IDEuNC0uMjIuNDUuMzMuNTQuOTUuMjIgMS40WiIvPjwvc3ltYm9sPjxzeW1ib2wgaWQ9InM0MCIgdmlld0JveD0iMCAwIDQwIDQwIj48cGF0aCBkPSJNMTkuOTktLjA2Yy0xMS4wNSAwLTIwIDguOTYtMjAgMjBzOC45NSAyMCAyMCAyMCAyMC04Ljk1IDIwLTIwLTguOTYtMjAtMjAtMjBtOC4zOCAxMy45Ni05LjgxIDEzLjQ1LTcuMjEtNi44OGMtLjQ1LS40My0uNDctMS4xNC0uMDQtMS41OXMxLjE0LS40NyAxLjU5LS4wNGw1LjM1IDUuMTEgOC4yOS0xMS4zOGMuMzctLjUgMS4wNy0uNjEgMS41Ny0uMjUuNS4zNy42MSAxLjA3LjI1IDEuNTdaIi8+PC9zeW1ib2w+PHN5bWJvbCBpZD0iczQ4IiB2aWV3Qm94PSIwIDAgNDggNDgiPjxwYXRoIGQ9Ik0yMy45OS0uMDFjLTEzLjI2IDAtMjQgMTAuNzQtMjQgMjRzMTAuNzUgMjQgMjQgMjQgMjQtMTAuNzUgMjQtMjQtMTAuNzUtMjQtMjQtMjRtOS45OCAxNi42OC0xMS43IDE2LjA1LTguNTYtOC4xOGExLjI1IDEuMjUgMCAwIDEtLjA0LTEuNzdjLjQ4LS41IDEuMjctLjUyIDEuNzctLjA0bDYuNSA2LjIxTDMxLjk2IDE1LjJjLjQxLS41NiAxLjE5LS42OCAxLjc1LS4yN3MuNjggMS4xOS4yNyAxLjc1WiIvPjwvc3ltYm9sPjxzeW1ib2wgaWQ9InM2NCIgdmlld0JveD0iMCAwIDY0IDY0Ij48cGF0aCBkPSJNMzEuOTggMGMtMTcuNjcgMC0zMiAxNC4zMi0zMiAzMnMxNC4zMyAzMiAzMiAzMiAzMi0xNC4zMyAzMi0zMi0xNC4zMi0zMi0zMi0zMm0xMy4wNyAyMi4wOC0xNS40IDIxLjEzLTExLjE4LTEwLjY4Yy0uNTUtLjUyLS41Ny0xLjM5LS4wNC0xLjk0LjUyLS41NSAxLjQtLjU3IDEuOTQtLjA0bDguOTEgOC41MSAxMy41NS0xOC41OWExLjM3NSAxLjM3NSAwIDAgMSAyLjIyIDEuNjJaIi8+PC9zeW1ib2w+PHVzZSBzdHlsZT0iZGlzcGxheTogdmFyKC0tczE2LCBub25lKSIgaHJlZj0iI3MxNiIvPjx1c2Ugc3R5bGU9ImRpc3BsYXk6IHZhcigtLXMyNCwgbm9uZSkiIGhyZWY9IiNzMjQiLz48dXNlIHN0eWxlPSJkaXNwbGF5OiB2YXIoLS1zMzIsIG5vbmUpIiBocmVmPSIjczMyIi8+PHVzZSBzdHlsZT0iZGlzcGxheTogdmFyKC0tczQwLCBub25lKSIgaHJlZj0iI3M0MCIvPjx1c2Ugc3R5bGU9ImRpc3BsYXk6IHZhcigtLXM0OCwgbm9uZSkiIGhyZWY9IiNzNDgiLz48dXNlIHN0eWxlPSJkaXNwbGF5OiB2YXIoLS1zNjQsIG5vbmUpIiBocmVmPSIjczY0Ii8+PC9zeW1ib2w+PC9kZWZzPjxzdHlsZT5AbWVkaWEgKG1heC13aWR0aDogMjMuOThweCkge2d7LS1zMTY6YmxvY2s7fX1AbWVkaWEgKG1pbi13aWR0aDogMjRweCkgYW5kIChtYXgtd2lkdGg6IDMxLjk4cHgpIHtney0tczI0OmJsb2NrO319QG1lZGlhIChtaW4td2lkdGg6IDMycHgpIGFuZCAobWF4LXdpZHRoOiAzOS45OHB4KSB7Z3stLXMzMjpibG9jazt9fUBtZWRpYSAobWluLXdpZHRoOiA0MHB4KSBhbmQgKG1heC13aWR0aDogNDcuOThweCkge2d7LS1zNDA6YmxvY2s7fX1AbWVkaWEgKG1pbi13aWR0aDogNDhweCkgYW5kIChtYXgtd2lkdGg6IDYzLjk4cHgpIHtney0tczQ4OmJsb2NrO319QG1lZGlhIChtaW4td2lkdGg6IDY0cHgpIHtney0tczY0OmJsb2NrO319PC9zdHlsZT48Zz48dXNlIGhyZWY9IiNpLXN1Y2Nlc3Mtc29saWQiLz48L2c+PC9zdmc+")}post-stepper-item{grid-row:1;position:relative;padding-inline-start:0}post-stepper-item:not(:first-child){padding-inline-start:calc(var(--post-device-sizing-interactive-stepper-indicator) / 2)}post-stepper-item:not(:last-child){padding-inline-end:calc(var(--post-device-sizing-interactive-stepper-indicator) / 2);grid-column:span 2}post-stepper-item::before,post-stepper-item::after{content:"";display:block;position:absolute;inset-block-start:calc((var(--post-device-sizing-interactive-stepper-indicator) - 2px)/2);height:2px;background-color:var(--post-scheme-color-interactive-primary-disabled-bg4);inset-inline:0}post-stepper-item:not(:first-child,:last-child)::before{inset-inline-end:50%}post-stepper-item:not(:first-child,:last-child)::after{inset-inline-start:50%}post-stepper-item.stepper-item-current:not(:last-child)::after,post-stepper-item.stepper-item-current:first-child::before,post-stepper-item.stepper-item-current+*:last-child::after,post-stepper-item.stepper-item-current+*::before{background-color:var(--post-scheme-color-interactive-primary-enabled-fg1)}post-stepper-item.stepper-item-current:not(:first-child)::before,post-stepper-item.stepper-item-current:last-child::after,post-stepper-item.stepper-item-completed::after,post-stepper-item.stepper-item-completed::before,post-stepper-item.stepper-item-completed+*::before{background-color:var(--post-scheme-color-interactive-primary-selected-bg2);z-index:1}.stepper-item-content{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;position:relative;z-index:2;overflow:hidden;text-decoration:none;color:var(--post-scheme-color-interactive-primary-disabled-fg1);width:fit-content;word-break:break-word;font-size:var(--post-device-font-size-7)}post-stepper-item:not(:first-child,:last-child)>.stepper-item-content{margin-inline:auto;text-align:center}post-stepper-item:last-child>.stepper-item-content{margin-inline-start:auto;margin-inline-end:-20px;text-align:end}.stepper-item-completed>.stepper-item-content{color:var(--post-scheme-color-interactive-primary-enabled-fg1)}.stepper-item-current>.stepper-item-content{font-weight:var(--post-device-font-weight-bold);color:var(--post-scheme-color-interactive-primary-enabled-fg1)}.stepper-item-current>.stepper-item-content::before{font-weight:var(--post-device-font-weight-regular);color:var(--post-scheme-color-interactive-primary-enabled-fg3)}.stepper-item-content::before{counter-increment:step-index;content:counter(step-index);display:flex;align-items:center;justify-content:center;z-index:1;height:var(--post-device-sizing-interactive-stepper-indicator);width:var(--post-device-sizing-interactive-stepper-indicator);box-sizing:border-box;margin-block-end:var(--post-device-spacing-gap-1);color:var(--post-scheme-color-interactive-primary-enabled-fg3);background-color:var(--post-scheme-color-interactive-primary-enabled-bg2);border:var(--post-device-border-width-default) solid var(--post-scheme-color-interactive-primary-enabled-stroke3);border-radius:var(--post-device-border-radius-round);text-indent:initial}post-stepper-item:not(:first-child,:last-child)>.stepper-item-content::before{margin-inline:auto}post-stepper-item:last-child>.stepper-item-content::before{margin-inline-start:auto}.stepper-item-completed>.stepper-item-content::before{color:rgba(0,0,0,0);background-color:var(--post-scheme-color-interactive-primary-selected-stroke3);border-color:var(--post-scheme-color-interactive-primary-selected-stroke3)}.stepper-item-inactive>.stepper-item-content::before{color:var(--post-scheme-color-interactive-primary-disabled-fg3);background-color:var(--post-scheme-color-interactive-primary-disabled-bg4);border-color:var(--post-scheme-color-interactive-primary-disabled-stroke3)}.stepper-item-content::after{display:block;position:absolute;inset-block-start:var(--post-device-border-width-default);z-index:1;background-color:var(--post-scheme-color-interactive-primary-enabled-fg3);mask-image:var(--post-icon-success-solid);background-color:currentColor;color:currentColor;forced-color-adjust:preserve-parent-color;width:calc(
+  var(--post-device-sizing-interactive-stepper-indicator) - (var(--post-device-border-width-default) * 2)
+);height:calc(
+  var(--post-device-sizing-interactive-stepper-indicator) - (var(--post-device-border-width-default) * 2)
+);color:var(--post-scheme-color-interactive-primary-selected-bg2)}post-stepper-item:first-child>.stepper-item-content::after{inset-inline-start:var(--post-device-border-width-default)}post-stepper-item:not(:first-child,:last-child)>.stepper-item-content::after{inset-inline-start:calc(50% - (
+  var(--post-device-sizing-interactive-stepper-indicator) - (var(--post-device-border-width-default) * 2)
+)/2)}post-stepper-item:last-child>.stepper-item-content::after{inset-inline-end:var(--post-device-border-width-default)}.stepper-item-completed>.stepper-item-content::after{content:""}@media screen and (max-width: 779.98px){post-stepper-item{flex-grow:1;margin-inline:0;padding:0 !important}post-stepper-item::before{content:unset}post-stepper-item::after{inset-inline-start:0 !important}post-stepper-item:last-child{flex:0 0 32px}post-stepper-item:last-child::after{content:unset}post-stepper-item .stepper-item-content{margin-inline:0 !important}post-stepper-item .stepper-item-content>span{display:none}}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){post-stepper-item::before,post-stepper-item::after{background-color:CanvasText !important}post-stepper-item.stepper-item-current:not(:first-child)::before,post-stepper-item.stepper-item-current:last-child::after,post-stepper-item.stepper-item-completed::after,post-stepper-item.stepper-item-completed::before,post-stepper-item.stepper-item-completed+*::before{background-color:Highlight !important}.stepper-item-content::before{forced-color-adjust:none}.stepper-item-current>.stepper-item-content::before{background-color:Canvas;color:CanvasText}.stepper-item-completed>.stepper-item-content::before,.stepper-item-inactive>.stepper-item-content::before{border-color:Canvas;background-color:CanvasText}.stepper-item-inactive>.stepper-item-content::before{color:Canvas}.stepper-item-content::after{color:Canvas}}.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}

package/dist/collection/components/post-stepper-item/post-stepper-item.js

@@ -0,0 +1,18 @@
+import { h, Host } from "@stencil/core";
+import { version } from "../../../../package";
+export class PostStepperItem {
+    render() {
+        return (h(Host, { key: '599be83f6d5c6642f6a5f3f9821779fd169560f4', "data-version": version, role: "listitem" }, h("span", { key: 'cc2d26204b50e524a7e7a51376a09f849e6e088a', class: "stepper-item-content" }, h("span", { key: '6095ada1c3964b5358b128858a81cb772aa11e13', class: "step-hidden-label visually-hidden" }), h("span", { key: '4e0e375964f19ff1dbef0667313fea2ed5824c59', class: "label" }, h("slot", { key: 'fa60ebf63acbf8d66acaacf66785125c2810cd3f' })))));
+    }
+    static get is() { return "post-stepper-item"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["post-stepper-item.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["post-stepper-item.css"]
+        };
+    }
+}

package/dist/collection/components/post-tab-header/post-tab-header.js

@@ -13,7 +13,7 @@ export class PostTabHeader {
         this.tabId = `tab-${this.host.id || nanoid(6)}`;
     }
     render() {
-        return (h(Host, { key: '5d9cfad4e62285e8b64a5f597e3d38d451dd493f', id: this.tabId, role: "tab", "data-version": version, "aria-selected": "false", tabindex: "-1", class: "tab-title", slot: "tabs" }, h("slot", { key: '679874586fb55510af17838ef73403c8b7a33ddc' })));
+        return (h(Host, { key: 'b350fb9392e74af452470d72f97678aa1ac2d430', id: this.tabId, role: "tab", "data-version": version, "aria-selected": "false", tabindex: "-1", class: "tab-title", slot: "tabs" }, h("slot", { key: '49722204330b3b2d760b8718b349b1417fd29a71' })));
     }
     static get is() { return "post-tab-header"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/post-tab-panel/post-tab-panel.js

@@ -15,7 +15,7 @@ export class PostTabPanel {
         this.panelId = `panel-${this.host.id || nanoid(6)}`;
     }
     render() {
-        return (h(Host, { key: '5d6c56e41ac61b10dd2560482bc5e4edab394742', "data-version": version, id: this.panelId, role: "tabpanel" }, h("slot", { key: 'ec7be772a0d3f883388742460c825dce0f0e44e8' })));
+        return (h(Host, { key: 'f00d9caf4324fc2d750d7844ca6ddc8198aef0c0', "data-version": version, id: this.panelId, role: "tabpanel" }, h("slot", { key: '58f2eaf91aee7897039a151e117d9b9fc948162a' })));
     }
     static get is() { return "post-tab-panel"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/post-tabs/post-tabs.js

@@ -145,7 +145,7 @@ export class PostTabs {
         nextTab.focus();
     }
     render() {
-        return (h(Host, { key: '3e352bc059be99242f612a49bdea71fd065d67b0', "data-version": version }, h("div", { key: '34d608d7af834fd4fb3106ac3fb90100a9b73138', class: "tabs-wrapper", part: "tabs" }, h("div", { key: '102e75b53d3e485a185d391f84755142d8690de6', class: "tabs", role: "tablist" }, h("slot", { key: '03624f2944dfd37d3eb3403772d430a6e053e676', name: "tabs", onSlotchange: () => this.enableTabs() }))), h("div", { key: '8c7c956b831ef19fb093122ca35c14b5a015dad3', class: "tab-content", part: "content" }, h("slot", { key: '8fad35a2a6d26814f513c422b4fcbe98aae7bd22', onSlotchange: () => this.moveMisplacedTabs() }))));
+        return (h(Host, { key: 'f3534a3b05c379ce1cb311d4c5ea950c8eba87d0', "data-version": version }, h("div", { key: 'd812db6b2a895504fce8ac9dae2663821b9dd759', class: "tabs-wrapper", part: "tabs" }, h("div", { key: '9abd0ee00204a085ceaebce5e11fcff527273605', class: "tabs", role: "tablist" }, h("slot", { key: '89f09f443ca740dc9af66fedb1367cdb4885074d', name: "tabs", onSlotchange: () => this.enableTabs() }))), h("div", { key: '4a94a19fd67814482934bd31bb219470bea8dec6', class: "tab-content", part: "content" }, h("slot", { key: '44db446865edacb1b1c0fc20ef391adfa189e8cb', onSlotchange: () => this.moveMisplacedTabs() }))));
     }
     static get is() { return "post-tabs"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/post-togglebutton/post-togglebutton.js

@@ -26,7 +26,7 @@ export class PostTogglebutton {
         this.host.addEventListener('keydown', (e) => this.handleKeydown(e));
     }
     render() {
-        return (h(Host, { key: 'f56832bfbfacc23923ac06d8455fffcdafa8a7ec', "data-version": version, role: "button", tabindex: "0", "aria-pressed": this.toggled.toString() }, h("slot", { key: '7adc9ed579b6badeb08c7599ceb95892d68f027f' })));
+        return (h(Host, { key: 'ecd5772b09be8842e5c6fc3bf34932b27d90c533', "data-version": version, role: "button", tabindex: "0", "aria-pressed": this.toggled.toString() }, h("slot", { key: '3bb32b33155e71ced9375afb5a26d1d4e63a83c8' })));
     }
     static get is() { return "post-togglebutton"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/post-tooltip/post-tooltip.css

@@ -1 +1 @@
-:host{display:none}:host([open]){display:contents}post-popovercontainer[arrow]::after{position:absolute;content:"";inset:-13px;z-index:-1}post-popovercontainer>div{color:var(--post-current-fg);background-color:var(--post-current-bg);padding:var(--post-core-dimension-4) var(--post-core-dimension-8);max-width:280px;min-height:32px;word-wrap:break-word;white-space:normal}
+:host{display:none}:host([open]){display:contents}post-popovercontainer[arrow]::after{position:absolute;content:"";inset:-13px;z-index:-1}post-popovercontainer>div{color:var(--post-current-fg);background-color:var(--post-current-bg);padding:var(--post-core-dimension-4) var(--post-core-dimension-8);max-width:var(--post-tooltip-max-width, 280px);width:inherit;min-height:32px;word-wrap:break-word;white-space:normal}

package/dist/collection/components/post-tooltip/post-tooltip.js

@@ -64,7 +64,7 @@ export class PostTooltip {
     }
     render() {
         const popoverClass = `${this.arrow ? 'has-arrow' : ''}`;
-        return (h(Host, { key: '0755eeba6f7be3cd0d94138369355df9767ca541', "data-version": version }, h("post-popovercontainer", { key: '1e1d71a4878e60f9e20b34b5f12588e09a8c7716', safeSpace: "trapezoid", class: popoverClass, role: "tooltip", arrow: this.arrow, animation: this.animation, placement: this.placement, onPostToggle: e => this.handleToggle(e), ref: (el) => (this.popoverRef = el) }, h("slot", { key: '25a69d406a91cb0ba8d4c5fadee44d937c84a266' }))));
+        return (h(Host, { key: 'ebc25bd8a9615a13be82d58f246b5a5d42113cf2', "data-version": version }, h("post-popovercontainer", { key: 'dba7a96c1f354752475a6f1d9116b0097dddf320', safeSpace: "trapezoid", class: popoverClass, role: "tooltip", arrow: this.arrow, animation: this.animation, placement: this.placement, onPostToggle: e => this.handleToggle(e), ref: (el) => (this.popoverRef = el) }, h("slot", { key: '537370b88912d323a72ee074767b4cf2b4bc1b57' }))));
     }
     static get is() { return "post-tooltip"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/post-tooltip-trigger/post-tooltip-trigger.js

@@ -169,7 +169,7 @@ export class PostTooltipTrigger {
         this.tooltip?.hide();
     }
     render() {
-        return (h(Host, { key: 'e545db2bc489025c51e51f680f4139b508ef09f8', "data-version": version }, h("slot", { key: '90abc548bccbc51d233001c98d289fd60599c482', onSlotchange: () => this.handleSlotChange() })));
+        return (h(Host, { key: '48246523aabaf1851e05d0273346d3e26e7ad866', "data-version": version }, h("slot", { key: '0442aeadddd59642c317b6f10c93008adf3e6585', onSlotchange: () => this.handleSlotChange() })));
     }
     static get is() { return "post-tooltip-trigger"; }
     static get encapsulation() { return "shadow"; }

package/dist/component-names.json

@@ -30,6 +30,8 @@
     "post-popover-trigger",
     "post-popovercontainer",
     "post-rating",
+    "post-stepper",
+    "post-stepper-item",
     "post-tab-header",
     "post-tab-panel",
     "post-tabs",

package/dist/components/index.d.ts

@@ -59,6 +59,10 @@ export { PostPopovercontainer as PostPopovercontainer } from '../types/component
 export { defineCustomElement as defineCustomElementPostPopovercontainer } from './post-popovercontainer';
 export { PostRating as PostRating } from '../types/components/post-rating/post-rating';
 export { defineCustomElement as defineCustomElementPostRating } from './post-rating';
+export { PostStepper as PostStepper } from '../types/components/post-stepper/post-stepper';
+export { defineCustomElement as defineCustomElementPostStepper } from './post-stepper';
+export { PostStepperItem as PostStepperItem } from '../types/components/post-stepper-item/post-stepper-item';
+export { defineCustomElement as defineCustomElementPostStepperItem } from './post-stepper-item';
 export { PostTabHeader as PostTabHeader } from '../types/components/post-tab-header/post-tab-header';
 export { defineCustomElement as defineCustomElementPostTabHeader } from './post-tab-header';
 export { PostTabPanel as PostTabPanel } from '../types/components/post-tab-panel/post-tab-panel';

package/dist/components/index.js

@@ -29,6 +29,8 @@ export { PostPopover, defineCustomElement as defineCustomElementPostPopover } fr
 export { PostPopoverTrigger, defineCustomElement as defineCustomElementPostPopoverTrigger } from './post-popover-trigger.js';
 export { PostPopovercontainer, defineCustomElement as defineCustomElementPostPopovercontainer } from './post-popovercontainer.js';
 export { PostRating, defineCustomElement as defineCustomElementPostRating } from './post-rating.js';
+export { PostStepper, defineCustomElement as defineCustomElementPostStepper } from './post-stepper.js';
+export { PostStepperItem, defineCustomElement as defineCustomElementPostStepperItem } from './post-stepper-item.js';
 export { PostTabHeader, defineCustomElement as defineCustomElementPostTabHeader } from './post-tab-header.js';
 export { PostTabPanel, defineCustomElement as defineCustomElementPostTabPanel } from './post-tab-panel.js';
 export { PostTabs, defineCustomElement as defineCustomElementPostTabs } from './post-tabs.js';

package/dist/components/index2.js

@@ -82,7 +82,8 @@ const checkEmptyOrPattern = emptyOr(checkPattern);
 const checkEmptyOrType = emptyOr(checkType);
 const checkEmptyOrUrl = emptyOr(checkUrl);
 const checkRequiredAndOneOf = requiredAnd(checkOneOf);
+const checkRequiredAndPattern = requiredAnd(checkPattern);
 const checkRequiredAndType = requiredAnd(checkType);
 const checkRequiredAndUrl = requiredAnd(checkUrl);
 
-export { checkEmptyOrUrl as a, checkRequiredAndOneOf as b, checkRequiredAndType as c, checkEmptyOrOneOf as d, checkEmptyOrType as e, checkEmptyOrPattern as f, checkRequiredAndUrl as g };
+export { checkEmptyOrUrl as a, checkRequiredAndOneOf as b, checkRequiredAndType as c, checkEmptyOrOneOf as d, checkEmptyOrType as e, checkRequiredAndPattern as f, checkEmptyOrPattern as g, checkRequiredAndUrl as h };

package/dist/components/package.js

@@ -1,3 +1,3 @@
-const version = "10.0.0-next.53";
+const version = "10.0.0-next.55";
 
 export { version as v };

package/dist/components/post-accordion2.js

@@ -102,7 +102,7 @@ const PostAccordion = /*@__PURE__*/ proxyCustomElement(class PostAccordion exten
         });
     }
     render() {
-        return (h(Host, { key: 'ab800b580f0dd591a9413305afa282ff7e697759', "data-version": version }, h("div", { key: '258ba1dc99811545c0dd9796ef521a05a0c87dda', class: "accordion" }, h("slot", { key: '2ad7482962316723f5c8ff334bad7cc33b6fa953', onSlotchange: () => this.registerAccordionItems() }))));
+        return (h(Host, { key: '470d8a7646796044df8f9cf1ebfc113e5c8db960', "data-version": version }, h("div", { key: '360ad1fe885dbb3c61a5c026ea253e7fba81ef9e', class: "accordion" }, h("slot", { key: '9e14d7906cba560a848986787159f56c961c78db', onSlotchange: () => this.registerAccordionItems() }))));
     }
     get host() { return this; }
     static get watchers() { return {
@@ -110,7 +110,7 @@ const PostAccordion = /*@__PURE__*/ proxyCustomElement(class PostAccordion exten
     }; }
     static get style() { return postAccordionCss; }
 }, [1, "post-accordion", {
-        "headingLevel": [2, "heading-level"],
+        "headingLevel": [514, "heading-level"],
         "multiple": [4],
         "toggle": [64],
         "expandAll": [64],

package/dist/components/post-avatar.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { v as version } from './package.js';
-import { c as checkRequiredAndType, e as checkEmptyOrType, f as checkEmptyOrPattern } from './index2.js';
+import { c as checkRequiredAndType, e as checkEmptyOrType, g as checkEmptyOrPattern } from './index2.js';
 import './breakpoints.js';
 
 // https://docs.gravatar.com/api/avatars/images/
@@ -16,7 +16,7 @@ async function cryptify(key) {
 }
 const GRAVATAR_BASE_URL = `https://www.gravatar.com/avatar/{email}?s=${GRAVATAR_SIZE}&d=${GRAVATAR_DEFAULT}&r=${GRAVATAR_RATING}`;
 
-const postAvatarCss = ":host{--post-avatar-bg:var(--post-scheme-color-interactive-primary-enabled-bg2);--post-avatar-fg:var(--post-scheme-color-interactive-primary-enabled-fg3);display:inline-flex;position:relative;width:var(--post-device-sizing-interactive-icon-size3);height:var(--post-device-sizing-interactive-icon-size3);background-color:var(--post-scheme-color-interactive-primary-enabled-stroke3);border:var(--post-device-border-width-default) solid var(--post-scheme-color-interactive-primary-enabled-stroke3);border-radius:var(--post-device-border-radius-round);font-size:var(--post-device-font-size-8);vertical-align:top;line-height:1}:host::after{display:block;content:\"\";position:absolute;inset:0;z-index:1;border-radius:inherit}*,*::before,*::after{box-sizing:border-box}slot,img,::slotted(img){display:block;width:100%;height:100%}img,::slotted(img){border-radius:var(--post-device-border-radius-round)}::slotted(:not(img)){display:none !important}.initials{display:flex;justify-content:center;align-items:center;position:relative;z-index:2;width:100%;height:100%;background-color:var(--post-avatar-bg);border-radius:var(--post-device-border-radius-round);color:var(--post-avatar-fg);text-transform:uppercase;font-weight:400}.initials span{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}";
+const postAvatarCss = ":host{--post-avatar-bg:var(--post-scheme-color-interactive-primary-enabled-bg2);--post-avatar-fg:var(--post-scheme-color-interactive-primary-enabled-fg3);display:inline-flex;position:relative;width:var(--post-device-sizing-interactive-icon-size3);height:var(--post-device-sizing-interactive-icon-size3);background-color:var(--post-scheme-color-interactive-primary-enabled-stroke3);border:var(--post-device-border-width-default) solid var(--post-scheme-color-interactive-primary-enabled-stroke3);border-radius:var(--post-device-border-radius-round);font-size:var(--post-device-font-size-8);vertical-align:top;line-height:1}:host::after{display:block;content:\"\";position:absolute;inset:0;z-index:1;border-radius:inherit}*,*::before,*::after{box-sizing:border-box}slot,img,::slotted(img){display:block;width:100%;height:100%}img,::slotted(img){border-radius:var(--post-device-border-radius-round)}::slotted(:not(img)){display:none !important}.initials{display:flex;justify-content:center;align-items:center;position:relative;width:100%;height:100%;background-color:var(--post-avatar-bg);border-radius:var(--post-device-border-radius-round);color:var(--post-avatar-fg);text-transform:uppercase;font-weight:400}.initials span{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}";
 
 const emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
 var AvatarType;