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

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

@@ -0,0 +1,135 @@
+import { p as proxyCustomElement, H, h, a as Host } from './index.js';
+import { v as version } from './p-BhxZzOEC.js';
+import { c as checkRequiredAndType, f as checkRequiredAndPattern } from './p-CYkf_7Y5.js';
+import './p-CJ80BZ06.js';
+
+const postStepperCss = "ol{margin-block:0;padding-inline-start:0;list-style:none;counter-reset:step-index;display:grid;position:relative;overflow:hidden;grid-template-columns:20px;grid-auto-columns:minmax(0, 1fr);padding-inline-end:20px}@media screen and (max-width: 779.98px){ol{display:flex;padding-inline-end:0}}.active-step{font-size:var(--post-device-font-size-7);font-weight:var(--post-device-font-weight-bold);color:var(--post-scheme-color-interactive-primary-enabled-fg1)}@media screen and (min-width: 780px){.active-step{display:none}}";
+
+const PostStepper$1 = /*@__PURE__*/ proxyCustomElement(class PostStepper extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        /**
+         * 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 }))));
+    }
+    get host() { return this; }
+    static get watchers() { return {
+        "currentLabel": ["validateCurrentLabel"],
+        "completedLabel": ["validateCompletedLabel"],
+        "activeStepLabel": ["validateActiveStepLabel"],
+        "currentIndex": ["validateCurrentIndex"]
+    }; }
+    static get style() { return postStepperCss; }
+}, [1, "post-stepper", {
+        "currentLabel": [513, "current-label"],
+        "completedLabel": [513, "completed-label"],
+        "activeStepLabel": [513, "active-step-label"],
+        "currentIndex": [2, "current-index"],
+        "mobileActiveStepLabel": [32],
+        "mobileActiveStepName": [32]
+    }, undefined, {
+        "currentLabel": ["validateCurrentLabel"],
+        "completedLabel": ["validateCompletedLabel"],
+        "activeStepLabel": ["validateActiveStepLabel"],
+        "currentIndex": ["validateCurrentIndex"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["post-stepper"];
+    components.forEach(tagName => { switch (tagName) {
+        case "post-stepper":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, PostStepper$1);
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const PostStepper = PostStepper$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { PostStepper, defineCustomElement };

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

@@ -1,6 +1,6 @@
 import { p as proxyCustomElement, H, h, a as Host } from './index.js';
-import { v as version } from './p-BXRsHuTS.js';
-import { c as checkRequiredAndType } from './p-CV7fm1rW.js';
+import { v as version } from './p-BhxZzOEC.js';
+import { c as checkRequiredAndType } from './p-CYkf_7Y5.js';
 import './p-CJ80BZ06.js';
 import { n as nanoid } from './p-BLchVpF6.js';
 
@@ -19,7 +19,7 @@ const PostTabHeader$1 = /*@__PURE__*/ proxyCustomElement(class PostTabHeader ext
         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' })));
     }
     get host() { return this; }
     static get watchers() { return {

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

@@ -1,7 +1,7 @@
 import { p as proxyCustomElement, H, h, a as Host } from './index.js';
-import { v as version } from './p-BXRsHuTS.js';
+import { v as version } from './p-BhxZzOEC.js';
 import { n as nanoid } from './p-BLchVpF6.js';
-import { c as checkRequiredAndType } from './p-CV7fm1rW.js';
+import { c as checkRequiredAndType } from './p-CYkf_7Y5.js';
 import './p-CJ80BZ06.js';
 
 const postTabPanelCss = ":host{display:none}";
@@ -21,7 +21,7 @@ const PostTabPanel$1 = /*@__PURE__*/ proxyCustomElement(class PostTabPanel exten
         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' })));
     }
     get host() { return this; }
     static get watchers() { return {

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

@@ -1,5 +1,5 @@
 import { p as proxyCustomElement, H, c as createEvent, h, a as Host } from './index.js';
-import { v as version } from './p-BXRsHuTS.js';
+import { v as version } from './p-BhxZzOEC.js';
 import { f as fadeOut, a as fadeIn } from './p-SbIC4aZX.js';
 import './p-CJ80BZ06.js';
 
@@ -167,7 +167,7 @@ const PostTabs$1 = /*@__PURE__*/ proxyCustomElement(class PostTabs extends H {
         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() }))));
     }
     get host() { return this; }
     static get style() { return postTabsCss; }

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

@@ -1,5 +1,5 @@
 import { p as proxyCustomElement, H, h, a as Host } from './index.js';
-import { v as version } from './p-BXRsHuTS.js';
+import { v as version } from './p-BhxZzOEC.js';
 
 const postTogglebuttonCss = ":host{cursor:pointer;outline-offset:var(--post-device-spacing-padding-2) !important;outline:var(--post-scheme-color-interactive-focus-stroke) none var(--post-device-border-width-focus) !important}:host(:focus-visible){outline-style:var(--post-core-border-style-solid) !important}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:host(:focus-visible){outline-color:Highlight !important}}:host([aria-pressed=true]) ::slotted([data-showwhen=untoggled]){display:none}:host([aria-pressed=false]) ::slotted([data-showwhen=toggled]){display:none}";
 
@@ -29,7 +29,7 @@ const PostTogglebutton$1 = /*@__PURE__*/ proxyCustomElement(class PostTogglebutt
         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' })));
     }
     get host() { return this; }
     static get style() { return postTogglebuttonCss; }

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

@@ -1,7 +1,7 @@
 import { p as proxyCustomElement, H, h, a as Host } from './index.js';
 import { I as IS_BROWSER } from './p-CJ80BZ06.js';
-import { e as checkEmptyOrType } from './p-CV7fm1rW.js';
-import { v as version } from './p-BXRsHuTS.js';
+import { e as checkEmptyOrType } from './p-CYkf_7Y5.js';
+import { v as version } from './p-BhxZzOEC.js';
 import { i as isFocusable } from './p-HygIVKXC.js';
 
 const postTooltipTriggerCss = "post-tooltip-trigger{vertical-align:top}:host{cursor:pointer}";
@@ -173,7 +173,7 @@ const PostTooltipTrigger$1 = /*@__PURE__*/ proxyCustomElement(class PostTooltipT
         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() })));
     }
     get host() { return this; }
     static get watchers() { return {

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

@@ -1,10 +1,10 @@
 import { p as proxyCustomElement, H, h, a as Host } from './index.js';
-import { v as version } from './p-BXRsHuTS.js';
-import { d as checkEmptyOrOneOf } from './p-CV7fm1rW.js';
+import { v as version } from './p-BhxZzOEC.js';
+import { d as checkEmptyOrOneOf } from './p-CYkf_7Y5.js';
 import './p-CJ80BZ06.js';
-import { d as defineCustomElement$2, a as PLACEMENT_TYPES } from './p-mENtrn2l.js';
+import { d as defineCustomElement$2, a as PLACEMENT_TYPES } from './p-DVGEExot.js';
 
-const postTooltipCss = ":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}";
+const postTooltipCss = ":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}";
 
 const PostTooltip$1 = /*@__PURE__*/ proxyCustomElement(class PostTooltip extends H {
     constructor() {
@@ -71,7 +71,7 @@ const PostTooltip$1 = /*@__PURE__*/ proxyCustomElement(class PostTooltip extends
     }
     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' }))));
     }
     get host() { return this; }
     static get watchers() { return {

package/dist/docs.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2025-11-10T13:43:44",
+  "timestamp": "2025-11-17T10:10:42",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.35.0",
@@ -36,7 +36,7 @@
           },
           "mutable": false,
           "attr": "heading-level",
-          "reflectToAttr": false,
+          "reflectToAttr": true,
           "docs": "Defines the hierarchical level of the `post-accordion-item` headers within the headings structure.",
           "docsTags": [],
           "values": [
@@ -845,7 +845,7 @@
           },
           "mutable": false,
           "attr": "home-text",
-          "reflectToAttr": false,
+          "reflectToAttr": true,
           "docs": "The text label for the home breadcrumb item.",
           "docsTags": [],
           "values": [
@@ -868,7 +868,7 @@
           },
           "mutable": false,
           "attr": "home-url",
-          "reflectToAttr": false,
+          "reflectToAttr": true,
           "docs": "The URL for the home breadcrumb item.",
           "docsTags": [],
           "values": [
@@ -891,7 +891,7 @@
           },
           "mutable": false,
           "attr": "label",
-          "reflectToAttr": false,
+          "reflectToAttr": true,
           "docs": "The accessible label for the breadcrumb component.",
           "docsTags": [],
           "values": [
@@ -914,7 +914,7 @@
           },
           "mutable": false,
           "attr": "menu-label",
-          "reflectToAttr": false,
+          "reflectToAttr": true,
           "docs": "The accessible label for the breadcrumb menu when breadcrumb items are concatenated.",
           "docsTags": [],
           "values": [
@@ -1140,7 +1140,7 @@
           },
           "mutable": false,
           "attr": "type",
-          "reflectToAttr": false,
+          "reflectToAttr": true,
           "docs": "Defines the `type` attribute of the control.",
           "docsTags": [],
           "values": [
@@ -1624,7 +1624,7 @@
           },
           "mutable": false,
           "attr": "label",
-          "reflectToAttr": false,
+          "reflectToAttr": true,
           "docs": "The label to add to the footer (visually hidden).",
           "docsTags": [],
           "values": [
@@ -1711,7 +1711,7 @@
         },
         {
           "name": "slot",
-          "text": "post-togglebutton - Holds the mobile menu toggler."
+          "text": "post-togglebutton - Holds the burger menu toggler."
         },
         {
           "name": "slot",
@@ -1723,7 +1723,7 @@
         },
         {
           "name": "slot",
-          "text": "default - Custom controls or content, right aligned in the local header."
+          "text": "local-controls - Custom controls or content, right aligned in the local header."
         },
         {
           "name": "slot",
@@ -1746,7 +1746,7 @@
       "props": [],
       "methods": [
         {
-          "name": "toggleMobileMenu",
+          "name": "toggleBurgerMenu",
           "returns": {
             "type": "Promise<void>",
             "docs": ""
@@ -1772,7 +1772,7 @@
             },
             "return": "Promise<void>"
           },
-          "signature": "toggleMobileMenu(force?: boolean) => Promise<void>",
+          "signature": "toggleBurgerMenu(force?: boolean) => Promise<void>",
           "parameters": [
             {
               "name": "force",
@@ -1780,18 +1780,25 @@
               "docs": ""
             }
           ],
-          "docs": "Toggles the mobile navigation.",
+          "docs": "Toggles the burger navigation menu.",
           "docsTags": []
         }
       ],
       "events": [],
-      "listeners": [],
-      "styles": [],
-      "slots": [
+      "listeners": [
         {
-          "name": "default",
-          "docs": "Custom controls or content, right aligned in the local header."
+          "event": "focusin",
+          "capture": false,
+          "passive": false
         },
+        {
+          "event": "focusout",
+          "capture": false,
+          "passive": false
+        }
+      ],
+      "styles": [],
+      "slots": [
         {
           "name": "global-controls",
           "docs": "Holds search button in the global header."
@@ -1800,6 +1807,10 @@
           "name": "global-login",
           "docs": "Holds the user menu or login button in the global header."
         },
+        {
+          "name": "local-controls",
+          "docs": "Custom controls or content, right aligned in the local header."
+        },
         {
           "name": "meta-navigation",
           "docs": "Holds an `<ul>` with meta navigation links."
@@ -1822,7 +1833,7 @@
         },
         {
           "name": "post-togglebutton",
-          "docs": "Holds the mobile menu toggler."
+          "docs": "Holds the burger menu toggler."
         },
         {
           "name": "target-group",
@@ -2147,7 +2158,7 @@
           },
           "mutable": false,
           "attr": "code",
-          "reflectToAttr": false,
+          "reflectToAttr": true,
           "docs": "The ISO 639 language code, formatted according to [RFC 5646 (also known as BCP 47)](https://datatracker.ietf.org/doc/html/rfc5646). For example, \"de\".",
           "docsTags": [],
           "values": [
@@ -2327,7 +2338,7 @@
           },
           "mutable": false,
           "attr": "caption",
-          "reflectToAttr": false,
+          "reflectToAttr": true,
           "docs": "A title for the list of language options",
           "docsTags": [],
           "values": [
@@ -2350,7 +2361,7 @@
           },
           "mutable": false,
           "attr": "description",
-          "reflectToAttr": false,
+          "reflectToAttr": true,
           "docs": "A descriptive text for the list of language options",
           "docsTags": [],
           "values": [
@@ -2845,7 +2856,7 @@
           },
           "mutable": false,
           "attr": "for",
-          "reflectToAttr": false,
+          "reflectToAttr": true,
           "docs": "ID of the mega dropdown element that this trigger is linked to. Used to open and close the specified mega dropdown.",
           "docsTags": [],
           "values": [
@@ -2897,7 +2908,7 @@
           },
           "mutable": false,
           "attr": "label",
-          "reflectToAttr": false,
+          "reflectToAttr": true,
           "docs": "An accessible name for the menu.",
           "docsTags": [],
           "values": [
@@ -3227,7 +3238,7 @@
       "filePath": "src/components/post-popover/post-popover.tsx",
       "encapsulation": "shadow",
       "tag": "post-popover",
-      "readme": "# post-popover\n",
+      "readme": "# post-popover\n\n\n",
       "docs": "",
       "docsTags": [
         {
@@ -3276,7 +3287,7 @@
           },
           "mutable": false,
           "attr": "close-button-caption",
-          "reflectToAttr": false,
+          "reflectToAttr": true,
           "docs": "Define the caption of the close button for assistive technology",
           "docsTags": [],
           "values": [
@@ -4121,7 +4132,7 @@
           },
           "mutable": false,
           "attr": "label",
-          "reflectToAttr": false,
+          "reflectToAttr": true,
           "docs": "Defines a hidden label for the component.",
           "docsTags": [],
           "values": [
@@ -4238,6 +4249,143 @@
         ]
       }
     },
+    {
+      "filePath": "src/components/post-stepper/post-stepper.tsx",
+      "encapsulation": "shadow",
+      "tag": "post-stepper",
+      "readme": "# post-stepper\n\n\n",
+      "docs": "",
+      "docsTags": [],
+      "usage": {},
+      "props": [
+        {
+          "name": "activeStepLabel",
+          "type": "string",
+          "complexType": {
+            "original": "string",
+            "resolved": "string",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "active-step-label",
+          "reflectToAttr": true,
+          "docs": "Label for the \"Step N:\" indicator for mobile view.\nUse `#index` as a placeholder — it will be replaced with the current step number at runtime.",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": true,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "completedLabel",
+          "type": "string",
+          "complexType": {
+            "original": "string",
+            "resolved": "string",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "completed-label",
+          "reflectToAttr": true,
+          "docs": "\"Completed step\" label for accessibility",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": true,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "currentIndex",
+          "type": "number",
+          "complexType": {
+            "original": "number",
+            "resolved": "number",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "current-index",
+          "reflectToAttr": false,
+          "docs": "Defines the currently active step",
+          "docsTags": [
+            {
+              "name": "default",
+              "text": "-1"
+            }
+          ],
+          "default": "-1",
+          "values": [
+            {
+              "type": "number"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "currentLabel",
+          "type": "string",
+          "complexType": {
+            "original": "string",
+            "resolved": "string",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "current-label",
+          "reflectToAttr": true,
+          "docs": "\"Current step\" label for accessibility",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": true,
+          "getter": false,
+          "setter": false
+        }
+      ],
+      "methods": [],
+      "events": [],
+      "listeners": [],
+      "styles": [],
+      "slots": [],
+      "parts": [],
+      "dependents": [],
+      "dependencies": [],
+      "dependencyGraph": {}
+    },
+    {
+      "filePath": "src/components/post-stepper-item/post-stepper-item.tsx",
+      "encapsulation": "none",
+      "tag": "post-stepper-item",
+      "readme": "# post-stepper-item\n",
+      "docs": "",
+      "docsTags": [],
+      "usage": {},
+      "props": [],
+      "methods": [],
+      "events": [],
+      "listeners": [],
+      "styles": [],
+      "slots": [],
+      "parts": [],
+      "dependents": [],
+      "dependencies": [],
+      "dependencyGraph": {}
+    },
     {
       "filePath": "src/components/post-tab-header/post-tab-header.tsx",
       "encapsulation": "shadow",

package/dist/esm/{index-VmK3ABCB.js → index-Beaz8wEe.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 { checkEmptyOrType as a, checkRequiredAndOneOf as b, checkRequiredAndType as c, checkEmptyOrOneOf as d, checkEmptyOrPattern as e, checkRequiredAndUrl as f, checkEmptyOrUrl as g };
+export { checkEmptyOrType as a, checkRequiredAndOneOf as b, checkRequiredAndType as c, checkEmptyOrOneOf as d, checkRequiredAndPattern as e, checkEmptyOrPattern as f, checkRequiredAndUrl as g, checkEmptyOrUrl as h };

package/dist/esm/{index-CFNKgUjL.js → index-wEFJ-c34.js}

@@ -2,7 +2,7 @@ const NAMESPACE = 'post-components';
 const BUILD = /* post-components */ { hydratedSelectorName: "data-hydrated", lazyLoad: true, slotRelocation: true, updatable: true};
 
 const globalScripts = () => {};
-const globalStyles = ":where(post-accordion,post-accordion-item,post-avatar,post-back-to-top,post-banner,post-breadcrumb-item,post-breadcrumbs,post-card-control,post-closebutton,post-collapsible,post-collapsible-trigger,post-footer,post-header,post-icon,post-language-option,post-language-switch,post-linkarea,post-list,post-list-item,post-logo,post-mainnavigation,post-megadropdown,post-megadropdown-trigger,post-menu,post-menu-item,post-menu-trigger,post-popover,post-popover-trigger,post-popovercontainer,post-rating,post-tab-header,post-tab-panel,post-tabs,post-togglebutton,post-tooltip,post-tooltip-trigger):not([data-hydrated],:defined){visibility:hidden}";
+const globalStyles = ":where(post-accordion,post-accordion-item,post-avatar,post-back-to-top,post-banner,post-breadcrumb-item,post-breadcrumbs,post-card-control,post-closebutton,post-collapsible,post-collapsible-trigger,post-footer,post-header,post-icon,post-language-option,post-language-switch,post-linkarea,post-list,post-list-item,post-logo,post-mainnavigation,post-megadropdown,post-megadropdown-trigger,post-menu,post-menu-item,post-menu-trigger,post-popover,post-popover-trigger,post-popovercontainer,post-rating,post-stepper,post-stepper-item,post-tab-header,post-tab-panel,post-tabs,post-togglebutton,post-tooltip,post-tooltip-trigger):not([data-hydrated],:defined){visibility:hidden}";
 
 /*
  Stencil Client Platform v4.35.0 | MIT Licensed | https://stenciljs.com
@@ -118,6 +118,14 @@ var loadModule = (cmpMeta, hostRef, hmrVersionId) => {
                     return import(
                       /* webpackMode: "lazy" */
                       './post-rating.entry.js').then(processMod, consoleError);
+                case 'post-stepper':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './post-stepper.entry.js').then(processMod, consoleError);
+                case 'post-stepper-item':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './post-stepper-item.entry.js').then(processMod, consoleError);
                 case 'post-tab-header':
                     return import(
                       /* webpackMode: "lazy" */