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

package/dist/esm/post-popover-trigger.entry.js

@@ -1,10 +1,10 @@
-import { r as registerInstance, h, H as Host, a as getElement } from './index-wEFJ-c34.js';
-import { v as version } from './package-BhxZzOEC.js';
+import { r as registerInstance, h, H as Host, a as getElement } from './index-CDZBzSdV.js';
+import { v as version } from './package-CZvbetqX.js';
 import { i as isFocusable } from './focusable-HygIVKXC.js';
-import { c as checkRequiredAndType } from './index-Beaz8wEe.js';
-import './breakpoints-CJ80BZ06.js';
+import { b as checkEmptyOrType } from './breakpoints-DYoSKGHO.js';
+import './environment-CEmnRoA6.js';
 
-const postPopoverTriggerCss = ":host{cursor:pointer}";
+const postPopoverTriggerCss = () => `:host{cursor:pointer}`;
 
 const PostPopoverTrigger = class {
     syncAriaExpanded(newValue) {
@@ -18,41 +18,57 @@ const PostPopoverTrigger = class {
      * @param forValue - The new value of the `for` property.
      */
     validateFor() {
-        checkRequiredAndType(this, 'for', 'string');
+        checkEmptyOrType(this, 'for', 'string');
     }
-    // Gets the associated popover element to the trigger based on 'for'
+    hasAriaControlsElements(el) {
+        return 'ariaControlsElements' in el;
+    }
+    // Gets the associated to the trigger popover element
     get popover() {
-        const ref = document.getElementById(this.for);
+        const ref = this.host.querySelector('post-popover') ?? document.getElementById(this.for);
+        if (!ref) {
+            const target = this.for ? `with ID: ${this.for}` : 'inside the <post-popover-trigger>';
+            console.error(`No post-popover found ${target}.`);
+            return null;
+        }
         return ref?.localName === 'post-popover' ? ref : null;
     }
     setupTrigger() {
+        const popover = this.popover;
         this.trigger = this.host.querySelector('*');
-        if (this.trigger) {
-            this.trigger.setAttribute('aria-expanded', this.ariaExpanded.toString());
-            // check if its not focusable and add aria role and tabindex
-            if (!isFocusable(this.trigger)) {
-                this.trigger.setAttribute('tabindex', '0');
-                this.trigger.setAttribute('role', 'button');
-            }
-            // Set aria attributes
-            this.trigger.setAttribute('aria-haspopup', 'true');
+        if (!this.trigger) {
+            console.error('No content found in the post-popover-trigger slot. Please insert a focusable element or content that can receive focus.');
+            return;
+        }
+        // check if its not focusable and add aria role and tabindex
+        if (!isFocusable(this.trigger)) {
+            this.trigger.setAttribute('tabindex', '0');
+            this.trigger.setAttribute('role', 'button');
+        }
+        if (!popover)
+            return;
+        // Set aria attributes
+        this.trigger.setAttribute('aria-expanded', this.ariaExpanded.toString());
+        this.trigger.setAttribute('aria-haspopup', 'true');
+        // Set aria-controls depending on the popover/trigger relationship
+        if (this.for) {
             this.trigger.setAttribute('aria-controls', this.for);
-            this.trigger.addEventListener('click', this.boundHandleToggle);
-            this.trigger.addEventListener('keydown', this.boundHandleKeyDown);
         }
         else {
-            console.error('No content found in the post-popover-trigger slot. Please insert a focusable element or content that can receive focus.');
+            if (this.hasAriaControlsElements(this.trigger)) {
+                this.trigger.ariaControlsElements = [popover];
+            }
+            else {
+                popover.id || (popover.id = `popover-${crypto.randomUUID()}`);
+                this.trigger.setAttribute('aria-controls', popover.id);
+            }
         }
+        this.trigger.addEventListener('click', this.boundHandleToggle);
+        this.trigger.addEventListener('keydown', this.boundHandleKeyDown);
     }
     handleToggle() {
-        const popoverEl = this.popover;
-        if (popoverEl) {
-            popoverEl.toggle(this.trigger);
-            this.focusTrigger();
-        }
-        else {
-            console.warn(`No post-popover found with ID: ${this.for}`);
-        }
+        this.popover?.toggle(this.trigger);
+        this.focusTrigger();
     }
     focusTrigger() {
         // Restores focus to the trigger
@@ -94,14 +110,18 @@ const PostPopoverTrigger = class {
         this.popover?.removeEventListener('postToggle', this.boundHandlePostToggle);
     }
     render() {
-        return (h(Host, { key: '5beba85bbe276a0f047415c4fefa2a013f922cdc', "data-version": version }, h("slot", { key: '4f1a4834e97275ab8a011888d0c932db6471e727', onSlotchange: () => this.setupTrigger() })));
+        return (h(Host, { key: '8552f66f45c0cf3f772cb96b4974a447a4a2cf19', "data-version": version }, h("slot", { key: '06824853f828cc65ba7a7a2b7ae8b762f6b1eaee', onSlotchange: () => this.setupTrigger() })));
     }
     get host() { return getElement(this); }
     static get watchers() { return {
-        "popoverOpen": ["syncAriaExpanded"],
-        "for": ["validateFor"]
+        "popoverOpen": [{
+                "syncAriaExpanded": 0
+            }],
+        "for": [{
+                "validateFor": 0
+            }]
     }; }
 };
-PostPopoverTrigger.style = postPopoverTriggerCss;
+PostPopoverTrigger.style = postPopoverTriggerCss();
 
 export { PostPopoverTrigger as post_popover_trigger };

package/dist/esm/post-popover.entry.js

@@ -1,11 +1,11 @@
-import { r as registerInstance, h, H as Host, a as getElement } from './index-wEFJ-c34.js';
+import { r as registerInstance, h, H as Host, a as getElement } from './index-CDZBzSdV.js';
 import { P as PLACEMENT_TYPES } from './placement-DRiVosES.js';
-import { v as version } from './package-BhxZzOEC.js';
-import { g as getDeepFocusableChildren } from './get-focusable-children-D9ZHp2FP.js';
-import { d as checkEmptyOrOneOf, c as checkRequiredAndType } from './index-Beaz8wEe.js';
-import './breakpoints-CJ80BZ06.js';
+import { v as version } from './package-CZvbetqX.js';
+import { g as getDeepFocusableChildren } from './get-focusable-children-BXNs2_sw.js';
+import { f as checkEmptyOrOneOf, c as checkRequiredAndType } from './breakpoints-DYoSKGHO.js';
+import './environment-CEmnRoA6.js';
 
-const postPopoverCss = "*{box-sizing:border-box}:host{display:block}.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}.popover-container{color:var(--post-current-fg);background-color:var(--post-current-bg);display:flex;align-items:self-start;padding:.5em;min-width:160px;max-width:var(--post-popover-max-width, 280px)}.popover-content{padding:.5em;flex-grow:1}";
+const postPopoverCss = () => `*{box-sizing:border-box}:host{display:block}.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}.popover-container{color:var(--post-current-fg);background-color:var(--post-current-bg);display:flex;align-items:self-start;padding:.5em;min-width:160px;max-width:var(--post-popover-max-width, 280px)}.popover-content{padding:.5em;flex-grow:1}`;
 
 const PostPopover = class {
     constructor(hostRef) {
@@ -25,19 +25,20 @@ const PostPopover = class {
     validatePlacement() {
         checkEmptyOrOneOf(this, 'placement', PLACEMENT_TYPES);
     }
-    validateCloseButtonCaption() {
-        checkRequiredAndType(this, 'closeButtonCaption', 'string');
+    validateTextClose() {
+        checkRequiredAndType(this, 'textClose', 'string');
     }
     componentDidLoad() {
         this.validatePlacement();
-        this.validateCloseButtonCaption();
+        this.validateTextClose();
     }
     /**
      * Programmatically display the popover
      * @param target A focusable element inside the <post-popover-trigger> component that controls the popover
      */
     async show(target) {
-        this.popoverRef.show(target);
+        await this.popoverRef.show(target);
+        this.focusFirstEl();
     }
     /**
      * Programmatically hide this popover
@@ -51,23 +52,31 @@ const PostPopover = class {
      * @param force Pass true to always show or false to always hide
      */
     async toggle(target, force) {
-        await this.popoverRef.toggle(target, force);
+        const isOpen = await this.popoverRef.toggle(target, force);
+        if (isOpen)
+            this.focusFirstEl();
+    }
+    focusFirstEl() {
         const focusableChildren = getDeepFocusableChildren(this.host);
-        // find first focusable element
+        // Find first focusable element
         const firstFocusable = focusableChildren[0];
         if (firstFocusable) {
             firstFocusable.focus();
         }
     }
     render() {
-        return (h(Host, { key: '5ef2edb171dada1bf701a6583471410e02297a5b', "data-version": version }, h("post-popovercontainer", { key: '3f913ddf3756ecbec65c1ab04423421adbc46f16', arrow: this.arrow, placement: this.placement, ref: e => (this.popoverRef = e) }, h("div", { key: '541a5a7da9eb1362609d7d58717ffde7ef4cbb90', class: "popover-container" }, h("div", { key: '1b3d22349574f7fb542cfa662aca0d34c85c1d2f', class: "popover-content" }, h("slot", { key: 'a17a97f0abe47fb7a1777fa3f9365efc0cfc5b1d' })), h("post-closebutton", { key: '9888084b892be0381c64620a534c45231533fa59', onClick: () => this.hide() }, this.closeButtonCaption)))));
+        return (h(Host, { key: 'd015a324a7c9fe1c3508ccd3e434435d92d74f85', "data-version": version }, h("post-popovercontainer", { key: '01c575c2b9370d512858e9c71a402ee08843d052', arrow: this.arrow, placement: this.placement, ref: e => (this.popoverRef = e) }, h("div", { key: '4be3ccad4885493091a9572c6bf95ea137ad66f9', class: "popover-container" }, h("div", { key: '3b9e69e7e84f7acdb2a14cb27e11d10d4aa2900b', class: "popover-content" }, h("slot", { key: 'de871fc377dfdc17f64f9bb40e5421e00a103ce0' })), h("post-closebutton", { key: 'd73a44affc7e09a3452988f63f16cc4eea83aa66', onClick: () => this.hide() }, this.textClose)))));
     }
     get host() { return getElement(this); }
     static get watchers() { return {
-        "placement": ["validatePlacement"],
-        "closeButtonCaption": ["validateCloseButtonCaption"]
+        "placement": [{
+                "validatePlacement": 0
+            }],
+        "textClose": [{
+                "validateTextClose": 0
+            }]
     }; }
 };
-PostPopover.style = postPopoverCss;
+PostPopover.style = postPopoverCss();
 
 export { PostPopover as post_popover };

package/dist/esm/post-rating.entry.js

@@ -1,9 +1,9 @@
-import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-wEFJ-c34.js';
-import { v as version } from './package-BhxZzOEC.js';
-import { c as checkRequiredAndType } from './index-Beaz8wEe.js';
-import './breakpoints-CJ80BZ06.js';
+import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-CDZBzSdV.js';
+import { v as version } from './package-CZvbetqX.js';
+import { c as checkRequiredAndType } from './breakpoints-DYoSKGHO.js';
+import './environment-CEmnRoA6.js';
 
-const postRatingCss = ":host{display:inline-block}.rating{display:flex;flex-wrap:wrap;overflow:hidden;margin:0 calc(var(--post-core-dimension-4)*-1);border-radius:4px}.rating .star{--post-rating-star-stroke:hsl(0, 0%, 40%);--post-rating-star-fill:#fff;position:relative;width:2rem;height:2rem;cursor:pointer}.rating .star .stroke,.rating .star .fill{display:block;width:100%;height:100%;transition:all ease 100ms}.rating .star .stroke{position:absolute;inset:auto;z-index:1;color:var(--post-rating-star-stroke)}.rating .star .fill{margin:1px;width:calc(100% - 2px);height:calc(100% - 2px);color:var(--post-rating-star-fill)}.rating .star.before-hover{--post-rating-star-stroke:hsl(0, 0%, 40%);--post-rating-star-fill:#fc0}.rating .star.active{--post-rating-star-stroke:hsl(0, 0%, 20%);--post-rating-star-fill:#fc0}.rating .star.hover{--post-rating-star-stroke:hsl(0, 0%, 40%);--post-rating-star-fill:#fc0}.rating .star.after-active{--post-rating-star-stroke:hsl(0, 0%, 40%);--post-rating-star-fill:hsl(0, 0%, 80%)}.rating :focus{outline:none}.rating:focus-visible{outline-offset:var(--post-core-dimension-2);outline:var(--post-core-dimension-2) solid #1976c8}.rating[aria-readonly=true] .star,.rating[aria-disabled=true] .star{cursor:default}.rating[aria-disabled=true] .star{--post-rating-star-stroke:hsl(0, 0%, 60%);--post-rating-star-fill:#fff}.rating[aria-disabled=true] .star.active{cursor:default;--post-rating-star-stroke:hsl(0, 0%, 60%);--post-rating-star-fill:hsl(0, 0%, 90%)}";
+const postRatingCss = () => `:host{display:inline-block}.rating{display:flex;flex-wrap:wrap;overflow:hidden;margin:0 calc(var(--post-core-dimension-4)*-1);border-radius:4px}.rating .star{--post-rating-star-stroke:hsl(0, 0%, 40%);--post-rating-star-fill:#fff;position:relative;width:2rem;height:2rem;cursor:pointer}.rating .star .stroke,.rating .star .fill{display:block;width:100%;height:100%;transition:all ease 100ms}.rating .star .stroke{position:absolute;inset:auto;z-index:1;color:var(--post-rating-star-stroke)}.rating .star .fill{margin:1px;width:calc(100% - 2px);height:calc(100% - 2px);color:var(--post-rating-star-fill)}.rating .star.before-hover{--post-rating-star-stroke:hsl(0, 0%, 40%);--post-rating-star-fill:#fc0}.rating .star.active{--post-rating-star-stroke:hsl(0, 0%, 20%);--post-rating-star-fill:#fc0}.rating .star.hover{--post-rating-star-stroke:hsl(0, 0%, 40%);--post-rating-star-fill:#fc0}.rating .star.after-active{--post-rating-star-stroke:hsl(0, 0%, 40%);--post-rating-star-fill:hsl(0, 0%, 80%)}.rating :focus{outline:none}.rating:focus-visible{outline-offset:var(--post-core-dimension-2);outline:var(--post-core-dimension-2) solid #1976c8}.rating[aria-readonly=true] .star,.rating[aria-disabled=true] .star{cursor:default}.rating[aria-disabled=true] .star{--post-rating-star-stroke:hsl(0, 0%, 60%);--post-rating-star-fill:#fff}.rating[aria-disabled=true] .star.active{cursor:default;--post-rating-star-stroke:hsl(0, 0%, 60%);--post-rating-star-fill:hsl(0, 0%, 90%)}`;
 
 const PostRating = class {
     validateLabel() {
@@ -94,7 +94,7 @@ const PostRating = class {
         }
     }
     render() {
-        return (h(Host, { key: '0c2ceebf2feb7f457b2db62fe1252ae4b7ed8089', "data-version": version }, h("div", { key: '64854df0b5b18e4318146ecc0a6de3a5fe8c2ce3', role: "slider", class: "rating", tabindex: "0", "aria-label": this.label, "aria-valuemin": "0", "aria-valuemax": this.stars, "aria-valuenow": this.currentRating, "aria-valuetext": `${this.currentRating} / ${this.stars}`, "aria-readonly": this.readonly ? 'true' : 'false', onKeyDown: this.keydownHandler, onBlur: this.blurHandler }, Array.from({ length: this.stars }).map((v, i) => (h("div", { key: `star-${v}`, "aria-hidden": "true", class: {
+        return (h(Host, { key: 'dcad32c132b9c85084effc694117d8f08c2c8bb2', "data-version": version }, h("div", { key: 'dd0f5a56ff7e9b0d35b2642a9150a3999870b661', role: "slider", class: "rating", tabindex: "0", "aria-label": this.label, "aria-valuemin": "0", "aria-valuemax": this.stars, "aria-valuenow": this.currentRating, "aria-valuetext": `${this.currentRating} / ${this.stars}`, "aria-readonly": this.readonly ? 'true' : 'false', onKeyDown: this.keydownHandler, onBlur: this.blurHandler }, Array.from({ length: this.stars }).map((v, i) => (h("div", { key: `star-${v}`, "aria-hidden": "true", class: {
                 'star': true,
                 'before-hover': i < this.hoveredIndex,
                 'active': i < Math.round(this.currentRating),
@@ -104,11 +104,17 @@ const PostRating = class {
     }
     get host() { return getElement(this); }
     static get watchers() { return {
-        "label": ["validateLabel"],
-        "stars": ["validateStars"],
-        "currentRating": ["validateCurrentRating"]
+        "label": [{
+                "validateLabel": 0
+            }],
+        "stars": [{
+                "validateStars": 0
+            }],
+        "currentRating": [{
+                "validateCurrentRating": 0
+            }]
     }; }
 };
-PostRating.style = postRatingCss;
+PostRating.style = postRatingCss();
 
 export { PostRating as post_rating };

package/dist/esm/post-stepper-item.entry.js

@@ -1,16 +1,16 @@
-import { r as registerInstance, h, H as Host } from './index-wEFJ-c34.js';
-import { v as version } from './package-BhxZzOEC.js';
+import { r as registerInstance, h, H as Host } from './index-CDZBzSdV.js';
+import { v as version } from './package-CZvbetqX.js';
 
-const postStepperItemCss = ":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(\n  var(--post-device-sizing-interactive-stepper-indicator) - (var(--post-device-border-width-default) * 2)\n);height:calc(\n  var(--post-device-sizing-interactive-stepper-indicator) - (var(--post-device-border-width-default) * 2)\n);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% - (\n  var(--post-device-sizing-interactive-stepper-indicator) - (var(--post-device-border-width-default) * 2)\n)/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}";
+const postStepperItemCss = () => `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;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)}: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: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}`;
 
 const PostStepperItem = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
     }
     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' })))));
+        return (h(Host, { key: 'aa99547793b72179f4dfb0db5b60b356dc8f51f0', "data-version": version, role: "listitem" }, h("span", { key: '3eb13dcd3ab69364679f04d22d91c9abca7f1ea0', class: "stepper-item-content" }, h("span", { key: '14e72486bd101809c3ff804ae625a218925d93ba', class: "step-hidden-label visually-hidden" }), h("span", { key: '1969a71424a8fbc452c65d9c38717ad60bddc612', class: "label" }, h("slot", { key: 'd0d634132895b9d3f27594d1baaae76963f1bd04' })))));
     }
 };
-PostStepperItem.style = postStepperItemCss;
+PostStepperItem.style = postStepperItemCss();
 
 export { PostStepperItem as post_stepper_item };

package/dist/esm/post-stepper.entry.js

@@ -1,9 +1,9 @@
-import { r as registerInstance, h, H as Host, a as getElement } from './index-wEFJ-c34.js';
-import { v as version } from './package-BhxZzOEC.js';
-import { c as checkRequiredAndType, e as checkRequiredAndPattern } from './index-Beaz8wEe.js';
-import './breakpoints-CJ80BZ06.js';
+import { r as registerInstance, h, H as Host, a as getElement } from './index-CDZBzSdV.js';
+import { v as version } from './package-CZvbetqX.js';
+import { c as checkRequiredAndType, g as checkRequiredAndPattern } from './breakpoints-DYoSKGHO.js';
+import './environment-CEmnRoA6.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 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 = class {
     constructor(hostRef) {
@@ -13,33 +13,36 @@ const PostStepper = class {
          */
         this.currentIndex = -1;
     }
-    validateCurrentLabel() {
-        checkRequiredAndType(this, 'currentLabel', 'string');
+    validateTextCurrentStep() {
+        checkRequiredAndType(this, 'textCurrentStep', 'string');
     }
-    validateCompletedLabel() {
-        checkRequiredAndType(this, 'completedLabel', 'string');
+    validateTextCompletedStep() {
+        checkRequiredAndType(this, 'textCompletedStep', 'string');
     }
-    validateActiveStepLabel() {
-        checkRequiredAndPattern(this, 'activeStepLabel', /#index\b/);
-        this.updateActiveStepLabel();
+    validateTextStepNumber() {
+        checkRequiredAndPattern(this, 'textStepNumber', /#number\b/);
+        this.updateActiveStepNumber();
     }
     validateCurrentIndex() {
         checkRequiredAndType(this, 'currentIndex', 'number');
         this.updateSteps();
     }
+    connectedCallback() {
+        this.stepItems = document.querySelectorAll(null);
+    }
     componentDidLoad() {
-        this.validateCompletedLabel();
-        this.validateCurrentLabel();
-        this.validateActiveStepLabel();
+        this.validateTextCompletedStep();
+        this.validateTextCurrentStep();
+        this.validateTextStepNumber();
         // Wait for slotchange
         setTimeout(() => {
             this.validateCurrentIndex();
         });
     }
-    updateActiveStepLabel() {
-        if (this.activeStepLabel) {
-            const labelTemplate = this.activeStepLabel;
-            this.mobileActiveStepLabel = labelTemplate.replace(/#index/g, `${this.currentIndex + 1}`);
+    updateActiveStepNumber() {
+        if (this.textStepNumber) {
+            const labelTemplate = this.textStepNumber;
+            this.mobileActiveStepLabel = labelTemplate.replace(/#number/g, `${this.currentIndex + 1}`);
             this.updateMobileActiveStepVisibility();
         }
     }
@@ -49,7 +52,7 @@ const PostStepper = class {
             console.error('The post-stepper component should have at least three steps.');
             return;
         }
-        this.updateActiveStepLabel();
+        this.updateActiveStepNumber();
         this.stepItems.forEach((el, i) => {
             if (this.currentIndex === i) {
                 this.mobileActiveStepName = el.querySelector('.label').innerHTML;
@@ -63,10 +66,10 @@ const PostStepper = class {
             if (hiddenLabel) {
                 let labelText = '';
                 if (this.currentIndex > i) {
-                    labelText = `${this.completedLabel}:`;
+                    labelText = `${this.textCompletedStep}:`;
                 }
                 else if (this.currentIndex === i) {
-                    labelText = `${this.currentLabel}:`;
+                    labelText = `${this.textCurrentStep}:`;
                 }
                 hiddenLabel.textContent = labelText;
             }
@@ -89,16 +92,24 @@ const PostStepper = class {
         }
     }
     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 }))));
+        return (h(Host, { key: '505b58d089a7362a9f4dd64af787dc9ae5778b0e', "data-version": version }, h("ol", { key: '1d865b0f80f388076cfba5fd14fc9e9185d8f014' }, h("slot", { key: '9e499edc98031d016fc8c00c7db6b9c01562b13c', onSlotchange: () => this.updateSteps() })), h("div", { key: 'ed9b9f6ac8e7fd6056010de024862d4408ccca08', class: "active-step", "aria-hidden": "true" }, this.mobileActiveStepLabel, h("span", { key: '8e93faf8031b116b52d02e6a594ce09b23520ba9', innerHTML: this.mobileActiveStepName }))));
     }
     get host() { return getElement(this); }
     static get watchers() { return {
-        "currentLabel": ["validateCurrentLabel"],
-        "completedLabel": ["validateCompletedLabel"],
-        "activeStepLabel": ["validateActiveStepLabel"],
-        "currentIndex": ["validateCurrentIndex"]
+        "textCurrentStep": [{
+                "validateTextCurrentStep": 0
+            }],
+        "textCompletedStep": [{
+                "validateTextCompletedStep": 0
+            }],
+        "textStepNumber": [{
+                "validateTextStepNumber": 0
+            }],
+        "currentIndex": [{
+                "validateCurrentIndex": 0
+            }]
     }; }
 };
-PostStepper.style = postStepperCss;
+PostStepper.style = postStepperCss();
 
 export { PostStepper as post_stepper };

package/dist/esm/post-tab-item.entry.js

@@ -0,0 +1,49 @@
+import { r as registerInstance, h, H as Host, a as getElement } from './index-CDZBzSdV.js';
+import { v as version } from './package-CZvbetqX.js';
+import { c as checkRequiredAndType } from './breakpoints-DYoSKGHO.js';
+import { n as nanoid } from './index.browser-BLchVpF6.js';
+import './environment-CEmnRoA6.js';
+
+const postTabItemCss = () => `.tab-title,.nav-item a{display:inline-block;position:relative;box-sizing:border-box;padding:1rem;transition:background-color 100ms;border-right:1px solid rgba(0,0,0,0);border-left:1px solid rgba(0,0,0,0);opacity:.7;color:#000;text-decoration:none;background-color:rgba(0,0,0,0);cursor:pointer}.tab-title:hover,.nav-item a:hover{opacity:1;background-color:rgba(0,0,0,.6);color:#fff}.tab-title:focus-visible,.nav-item a:focus-visible{outline:rgba(0,0,0,0);opacity:1;background-color:rgba(0,0,0,.6);color:#fff;box-shadow:none}.tab-title:focus-visible::after,.nav-item a:focus-visible::after{content:"";display:block;position:absolute;top:2px;right:1px;bottom:0;left:1px;box-shadow:0 0 0 1px #fff,0 0 0 2px #333}:where(.bg-dark,.bg-black,.bg-primary,.bg-secondary,.bg-success,.bg-error) .tab-title:hover,:where(.bg-dark,.bg-black,.bg-primary,.bg-secondary,.bg-success,.bg-error) .tab-title:focus-visible,:where(.bg-dark,.bg-black,.bg-primary,.bg-secondary,.bg-success,.bg-error) .nav-item a:hover,:where(.bg-dark,.bg-black,.bg-primary,.bg-secondary,.bg-success,.bg-error) .nav-item a:focus-visible{background-color:rgba(255,255,255,.2)}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.tab-title,.nav-item a{opacity:1;border-left-color:Canvas;border-right-color:Canvas;color:LinkText}.tab-title:hover,.tab-title:focus,.tab-title:focus-within,.tab-title:focus-visible,.nav-item a:hover,.nav-item a:focus,.nav-item a:focus-within,.nav-item a:focus-visible{outline:var(--post-core-dimension-2) solid Highlight;outline-offset:calc(var(--post-core-dimension-4)*-1)}}.nav-item{display:inline-block;position:relative;box-sizing:border-box;cursor:default}.nav-item:focus,.nav-item:focus-visible{outline:none;box-shadow:none}.nav-item:focus::after,.nav-item:focus-visible::after{display:none}.nav-item a{color:inherit;text-decoration:none;display:block;width:100%;height:100%;box-sizing:border-box;position:relative;outline:none;cursor:pointer;border-radius:0}.nav-item a:focus{outline:none}.nav-item a:active{opacity:1;background-color:rgba(0,0,0,.6);color:#fff}.nav-item a:focus-visible{outline:none !important}:where(.bg-dark,.bg-black,.bg-primary,.bg-secondary,.bg-success,.bg-error) .nav-item a:hover{background-color:rgba(255,255,255,.2)}:where(.bg-dark,.bg-black,.bg-primary,.bg-secondary,.bg-success,.bg-error) .nav-item a:focus-visible{background-color:rgba(255,255,255,.2)}.tab-title.active,.nav-item.active a{z-index:1;border-right-color:#ccc;border-left-color:#ccc;opacity:1;background-color:#fff;color:#000;font-weight:700}.tab-title.active::before,.nav-item.active a::before{content:"";display:block;position:absolute;top:0;right:-1px;left:-1px;height:var(--post-core-dimension-4);background-color:#fc0}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.tab-title.active,.nav-item.active a{border-left-color:ButtonText;border-right-color:ButtonText;color:Highlight}.tab-title.active::before,.nav-item.active a::before{background-color:Highlight}}:host{display:block}.tab-title{padding:0;overflow:visible;border:0;background:none;color:var(--post-scheme-color-interactive-button-secondary-enabled-fg);font:inherit;-webkit-user-select:none;user-select:none;appearance:button}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.tab-title{background-color:ButtonFace !important}.tab-title:hover{background-color:Highlight !important}}`;
+
+const PostTabItem = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.mutationObserver = new MutationObserver(this.checkNavigationMode.bind(this));
+        this.isNavigationMode = false;
+    }
+    validateName() {
+        checkRequiredAndType(this, 'name', 'string');
+    }
+    connectedCallback() {
+        this.mutationObserver.observe(this.host, {
+            childList: true,
+            subtree: true,
+        });
+    }
+    componentWillLoad() {
+        this.tabId = `tab-${this.host.id || nanoid(6)}`;
+        this.checkNavigationMode();
+    }
+    disconnectedCallback() {
+        if (this.mutationObserver) {
+            this.mutationObserver.disconnect();
+        }
+    }
+    checkNavigationMode() {
+        const hasAnchor = this.host.querySelector('a') !== null;
+        this.isNavigationMode = hasAnchor;
+    }
+    render() {
+        return (h(Host, { key: '54d2e054aa341fac3a915eeed3aec3658d524037', id: this.tabId, role: !this.isNavigationMode ? 'tab' : undefined, "data-version": version, "data-navigation-mode": this.isNavigationMode.toString(), "aria-selected": !this.isNavigationMode ? 'false' : undefined, tabindex: !this.isNavigationMode ? '-1' : undefined, class: !this.isNavigationMode ? 'tab-title' : 'nav-item' }, h("slot", { key: 'b01d7396a36514d3ba423a3d391eaaffd30b1e38' })));
+    }
+    get host() { return getElement(this); }
+    static get watchers() { return {
+        "name": [{
+                "validateName": 0
+            }]
+    }; }
+};
+PostTabItem.style = postTabItemCss();
+
+export { PostTabItem as post_tab_item };

package/dist/esm/post-tab-panel.entry.js

@@ -1,31 +1,33 @@
-import { r as registerInstance, h, H as Host, a as getElement } from './index-wEFJ-c34.js';
-import { v as version } from './package-BhxZzOEC.js';
+import { r as registerInstance, h, H as Host, a as getElement } from './index-CDZBzSdV.js';
+import { v as version } from './package-CZvbetqX.js';
 import { n as nanoid } from './index.browser-BLchVpF6.js';
-import { c as checkRequiredAndType } from './index-Beaz8wEe.js';
-import './breakpoints-CJ80BZ06.js';
+import { c as checkRequiredAndType } from './breakpoints-DYoSKGHO.js';
+import './environment-CEmnRoA6.js';
 
-const postTabPanelCss = ":host{display:none}";
+const postTabPanelCss = () => `:host{display:none}`;
 
 const PostTabPanel = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
     }
-    validateName() {
-        checkRequiredAndType(this, 'name', 'string');
+    validateFor() {
+        checkRequiredAndType(this, 'for', 'string');
     }
     componentWillLoad() {
-        this.validateName();
+        this.validateFor();
         // get the id set on the host element or use a random id by default
         this.panelId = `panel-${this.host.id || nanoid(6)}`;
     }
     render() {
-        return (h(Host, { key: 'f00d9caf4324fc2d750d7844ca6ddc8198aef0c0', "data-version": version, id: this.panelId, role: "tabpanel" }, h("slot", { key: '58f2eaf91aee7897039a151e117d9b9fc948162a' })));
+        return (h(Host, { key: 'b6a274839ef5643f0a666b19a2a91effa5238e5f', "data-version": version, id: this.panelId, role: "tabpanel", slot: "panels" }, h("slot", { key: '4b3d45f03517586145d92596106b158ebfacb37d' })));
     }
     get host() { return getElement(this); }
     static get watchers() { return {
-        "name": ["validateName"]
+        "for": [{
+                "validateFor": 0
+            }]
     }; }
 };
-PostTabPanel.style = postTabPanelCss;
+PostTabPanel.style = postTabPanelCss();
 
 export { PostTabPanel as post_tab_panel };