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

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

@@ -1,10 +1,10 @@
 'use strict';
 
-var index$1 = require('./index-Cb8CTrOz.js');
-var _package = require('./package-CvZxvdTJ.js');
+var index = require('./index-CKNxhb0S.js');
+var _package = require('./package-CY7IOoiw.js');
 var focusable = require('./focusable-D6snQLqS.js');
-var index = require('./index-DtvYdwe1.js');
-require('./breakpoints-CEkeixld.js');
+var breakpoints = require('./breakpoints-Df03Ct7n.js');
+require('./environment-BQE9Unf_.js');
 
 const postPopoverTriggerCss = ":host{cursor:pointer}";
 
@@ -20,41 +20,57 @@ const PostPopoverTrigger = class {
      * @param forValue - The new value of the `for` property.
      */
     validateFor() {
-        index.checkRequiredAndType(this, 'for', 'string');
+        breakpoints.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 (!focusable.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 (!focusable.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
@@ -63,7 +79,7 @@ const PostPopoverTrigger = class {
         }
     }
     constructor(hostRef) {
-        index$1.registerInstance(this, hostRef);
+        index.registerInstance(this, hostRef);
         /**
          * Manages the accessibility attribute `aria-expanded` to indicate whether the associated popover is expanded or collapsed.
          */
@@ -96,9 +112,9 @@ const PostPopoverTrigger = class {
         this.popover?.removeEventListener('postToggle', this.boundHandlePostToggle);
     }
     render() {
-        return (index$1.h(index$1.Host, { key: 'd7467aa400f407d76df06e8bbc84210e5f016073', "data-version": _package.version }, index$1.h("slot", { key: '618f3d14fb89b3ad3c101a58f8519c337d9f1721', onSlotchange: () => this.setupTrigger() })));
+        return (index.h(index.Host, { key: 'b519f15f3c613290c9fc301813b590e4f1727369', "data-version": _package.version }, index.h("slot", { key: 'dbe0f26ae126f24f6d67f0e27a1a6dfa4aeb498f', onSlotchange: () => this.setupTrigger() })));
     }
-    get host() { return index$1.getElement(this); }
+    get host() { return index.getElement(this); }
     static get watchers() { return {
         "popoverOpen": ["syncAriaExpanded"],
         "for": ["validateFor"]

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

@@ -1,13 +1,13 @@
 'use strict';
 
-var index = require('./index-Cb8CTrOz.js');
+var index = require('./index-CKNxhb0S.js');
 var placement = require('./placement-qEFR9hmI.js');
-var _package = require('./package-CvZxvdTJ.js');
-var getFocusableChildren = require('./get-focusable-children-Bx63XUQg.js');
-var index$1 = require('./index-DtvYdwe1.js');
-require('./breakpoints-CEkeixld.js');
+var _package = require('./package-CY7IOoiw.js');
+var getFocusableChildren = require('./get-focusable-children-ChETM1wK.js');
+var breakpoints = require('./breakpoints-Df03Ct7n.js');
+require('./environment-BQE9Unf_.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:min(var(--post-popover-max-width, 280px),100vw)}.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,14 +25,14 @@ const PostPopover = class {
         this.arrow = true;
     }
     validatePlacement() {
-        index$1.checkEmptyOrOneOf(this, 'placement', placement.PLACEMENT_TYPES);
+        breakpoints.checkEmptyOrOneOf(this, 'placement', placement.PLACEMENT_TYPES);
     }
-    validateCloseButtonCaption() {
-        index$1.checkRequiredAndType(this, 'closeButtonCaption', 'string');
+    validateTextClose() {
+        breakpoints.checkRequiredAndType(this, 'textClose', 'string');
     }
     componentDidLoad() {
         this.validatePlacement();
-        this.validateCloseButtonCaption();
+        this.validateTextClose();
     }
     /**
      * Programmatically display the popover
@@ -62,12 +62,12 @@ const PostPopover = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '82f8d89013b8ddb37fb924c9608ba394c669f35a', "data-version": _package.version }, index.h("post-popovercontainer", { key: 'cf276e5faf65ae27bc0d8e51779de5470a1e49a3', arrow: this.arrow, placement: this.placement, ref: e => (this.popoverRef = e) }, index.h("div", { key: '9ab455b2ee7d7f082dc6fc588d519d7a362cad8c', class: "popover-container" }, index.h("div", { key: 'b3b468da2ff7ccb2a47d69a1841488359763e927', class: "popover-content" }, index.h("slot", { key: 'a32099475baaca02ce41350e36d363614a6f83ef' })), index.h("post-closebutton", { key: 'eac806bd1e6652cacce58fb7e915d66e82c24980', onClick: () => this.hide() }, this.closeButtonCaption)))));
+        return (index.h(index.Host, { key: 'b82e9758682173b6ed9db39765040581744e0dcc', "data-version": _package.version }, index.h("post-popovercontainer", { key: 'ded5b122d2b8eada5fb9b245caa9e07af5f0f5f5', arrow: this.arrow, placement: this.placement, ref: e => (this.popoverRef = e) }, index.h("div", { key: '9311740aba30e3a7440d822eb8263153ff710bab', class: "popover-container" }, index.h("div", { key: 'a37c838a03d9e24ddeb9d9d2e268e8b3260ae757', class: "popover-content" }, index.h("slot", { key: '4bd852eb3da550c76a6ed4abb40f62a0769bdcf7' })), index.h("post-closebutton", { key: '10b09bde176da08f7571fbd5867ddee61ebf731a', onClick: () => this.hide() }, this.textClose)))));
     }
     get host() { return index.getElement(this); }
     static get watchers() { return {
         "placement": ["validatePlacement"],
-        "closeButtonCaption": ["validateCloseButtonCaption"]
+        "textClose": ["validateTextClose"]
     }; }
 };
 PostPopover.style = postPopoverCss;

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

@@ -1,21 +1,21 @@
 'use strict';
 
-var index$1 = require('./index-Cb8CTrOz.js');
-var _package = require('./package-CvZxvdTJ.js');
-var index = require('./index-DtvYdwe1.js');
-require('./breakpoints-CEkeixld.js');
+var index = require('./index-CKNxhb0S.js');
+var _package = require('./package-CY7IOoiw.js');
+var breakpoints = require('./breakpoints-Df03Ct7n.js');
+require('./environment-BQE9Unf_.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 PostRating = class {
     validateLabel() {
-        index.checkRequiredAndType(this, 'label', 'string');
+        breakpoints.checkRequiredAndType(this, 'label', 'string');
     }
     validateStars() {
-        index.checkRequiredAndType(this, 'stars', 'number');
+        breakpoints.checkRequiredAndType(this, 'stars', 'number');
     }
     validateCurrentRating() {
-        index.checkRequiredAndType(this, 'currentRating', 'number');
+        breakpoints.checkRequiredAndType(this, 'currentRating', 'number');
     }
     componentWillLoad() {
         this.validateLabel();
@@ -23,9 +23,9 @@ const PostRating = class {
         this.validateCurrentRating();
     }
     constructor(hostRef) {
-        index$1.registerInstance(this, hostRef);
-        this.postInput = index$1.createEvent(this, "postInput");
-        this.postChange = index$1.createEvent(this, "postChange");
+        index.registerInstance(this, hostRef);
+        this.postInput = index.createEvent(this, "postInput");
+        this.postChange = index.createEvent(this, "postChange");
         this.hasChanged = false;
         /**
          * Defines the total amount of stars rendered in the component.
@@ -96,15 +96,15 @@ const PostRating = class {
         }
     }
     render() {
-        return (index$1.h(index$1.Host, { key: '9089061145d80c4791a56580d107d6fab88f1d6d', "data-version": _package.version }, index$1.h("div", { key: '81f0ba286541aecf6ddfd2e2fa113526a02abdcd', 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) => (index$1.h("div", { key: `star-${v}`, "aria-hidden": "true", class: {
+        return (index.h(index.Host, { key: '9fc30dc25747bc15a0fc802235514ed40de0ed6a', "data-version": _package.version }, index.h("div", { key: 'a71f2eaee28798917b7fa96184cf4f1db2d99c82', 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) => (index.h("div", { key: `star-${v}`, "aria-hidden": "true", class: {
                 'star': true,
                 'before-hover': i < this.hoveredIndex,
                 'active': i < Math.round(this.currentRating),
                 'hover': i === this.hoveredIndex,
                 'after-active': i > this.hoveredIndex && i < this.currentRating,
-            }, onClick: () => this.update(i + 1), onMouseEnter: e => this.hoverHandler(i, e), onMouseLeave: e => this.hoverHandler(i, e) }, index$1.h("post-icon", { name: "favoritestar", class: "stroke" }), index$1.h("post-icon", { name: "favoritestar-solid", class: "fill" })))))));
+            }, onClick: () => this.update(i + 1), onMouseEnter: e => this.hoverHandler(i, e), onMouseLeave: e => this.hoverHandler(i, e) }, index.h("post-icon", { name: "favoritestar", class: "stroke" }), index.h("post-icon", { name: "favoritestar-solid", class: "fill" })))))));
     }
-    get host() { return index$1.getElement(this); }
+    get host() { return index.getElement(this); }
     static get watchers() { return {
         "label": ["validateLabel"],
         "stars": ["validateStars"],

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

@@ -0,0 +1,18 @@
+'use strict';
+
+var index = require('./index-CKNxhb0S.js');
+var _package = require('./package-CY7IOoiw.js');
+
+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(\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)}: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% - (\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 PostStepperItem = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    render() {
+        return (index.h(index.Host, { key: '04ee0014a44c978432fd2569a801dc1023c30f14', "data-version": _package.version, role: "listitem" }, index.h("span", { key: '3fc43cca8c0b1af4129858aca44724241e85a8c0', class: "stepper-item-content" }, index.h("span", { key: '158580119f48648869e3625a64fe38b8a8224e4d', class: "step-hidden-label visually-hidden" }), index.h("span", { key: '8f273c70ac9d386a197ced9738217490ef3c15e7', class: "label" }, index.h("slot", { key: 'd29e0df0613529f051f66dad125954476cb0b0e7' })))));
+    }
+};
+PostStepperItem.style = postStepperItemCss;
+
+exports.post_stepper_item = PostStepperItem;

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

@@ -0,0 +1,109 @@
+'use strict';
+
+var index = require('./index-CKNxhb0S.js');
+var _package = require('./package-CY7IOoiw.js');
+var breakpoints = require('./breakpoints-Df03Ct7n.js');
+require('./environment-BQE9Unf_.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 = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        /**
+         * Defines the currently active step
+         */
+        this.currentIndex = -1;
+    }
+    validateTextCurrentStep() {
+        breakpoints.checkRequiredAndType(this, 'textCurrentStep', 'string');
+    }
+    validateTextCompletedStep() {
+        breakpoints.checkRequiredAndType(this, 'textCompletedStep', 'string');
+    }
+    validateTextStepNumber() {
+        breakpoints.checkRequiredAndPattern(this, 'textStepNumber', /#number\b/);
+        this.updateActiveStepNumber();
+    }
+    validateCurrentIndex() {
+        breakpoints.checkRequiredAndType(this, 'currentIndex', 'number');
+        this.updateSteps();
+    }
+    connectedCallback() {
+        this.stepItems = document.querySelectorAll(null);
+    }
+    componentDidLoad() {
+        this.validateTextCompletedStep();
+        this.validateTextCurrentStep();
+        this.validateTextStepNumber();
+        // Wait for slotchange
+        setTimeout(() => {
+            this.validateCurrentIndex();
+        });
+    }
+    updateActiveStepNumber() {
+        if (this.textStepNumber) {
+            const labelTemplate = this.textStepNumber;
+            this.mobileActiveStepLabel = labelTemplate.replace(/#number/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.updateActiveStepNumber();
+        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.textCompletedStep}:`;
+                }
+                else if (this.currentIndex === i) {
+                    labelText = `${this.textCurrentStep}:`;
+                }
+                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 (index.h(index.Host, { key: 'b067a1d91483d604139bb4e5b2937b9b2ea9375a', "data-version": _package.version }, index.h("ol", { key: '411439c01f0ede28038149f9dcb37d6d7e1198ea' }, index.h("slot", { key: '71ac965a4bb0e1650c3e0d66d9915f0efd6ee9c6', onSlotchange: () => this.updateSteps() })), index.h("div", { key: '7168af48d858edbf87168289cbce9059471ba176', class: "active-step", "aria-hidden": "true" }, this.mobileActiveStepLabel, index.h("span", { key: '93fbf92d1b5a4a17488b8a73cff8e3aea20d4389', innerHTML: this.mobileActiveStepName }))));
+    }
+    get host() { return index.getElement(this); }
+    static get watchers() { return {
+        "textCurrentStep": ["validateTextCurrentStep"],
+        "textCompletedStep": ["validateTextCompletedStep"],
+        "textStepNumber": ["validateTextStepNumber"],
+        "currentIndex": ["validateCurrentIndex"]
+    }; }
+};
+PostStepper.style = postStepperCss;
+
+exports.post_stepper = PostStepper;

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

@@ -0,0 +1,49 @@
+'use strict';
+
+var index = require('./index-CKNxhb0S.js');
+var _package = require('./package-CY7IOoiw.js');
+var breakpoints = require('./breakpoints-Df03Ct7n.js');
+var index_browser = require('./index.browser-Doj636JV.js');
+require('./environment-BQE9Unf_.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) {
+        index.registerInstance(this, hostRef);
+        this.mutationObserver = new MutationObserver(this.checkNavigationMode.bind(this));
+        this.isNavigationMode = false;
+    }
+    validateName() {
+        breakpoints.checkRequiredAndType(this, 'name', 'string');
+    }
+    connectedCallback() {
+        this.mutationObserver.observe(this.host, {
+            childList: true,
+            subtree: true,
+        });
+    }
+    componentWillLoad() {
+        this.tabId = `tab-${this.host.id || index_browser.nanoid(6)}`;
+        this.checkNavigationMode();
+    }
+    disconnectedCallback() {
+        if (this.mutationObserver) {
+            this.mutationObserver.disconnect();
+        }
+    }
+    checkNavigationMode() {
+        const hasAnchor = this.host.querySelector('a') !== null;
+        this.isNavigationMode = hasAnchor;
+    }
+    render() {
+        return (index.h(index.Host, { key: '9367e007f35147f7a412968f018089910ecc88a0', id: this.tabId, role: !this.isNavigationMode ? 'tab' : undefined, "data-version": _package.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' }, index.h("slot", { key: 'd805ef623f162d5f66603c3cdeedbb31cc585591' })));
+    }
+    get host() { return index.getElement(this); }
+    static get watchers() { return {
+        "name": ["validateName"]
+    }; }
+};
+PostTabItem.style = postTabItemCss;
+
+exports.post_tab_item = PostTabItem;

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

@@ -1,10 +1,10 @@
 'use strict';
 
-var index = require('./index-Cb8CTrOz.js');
-var _package = require('./package-CvZxvdTJ.js');
+var index = require('./index-CKNxhb0S.js');
+var _package = require('./package-CY7IOoiw.js');
 var index_browser = require('./index.browser-Doj636JV.js');
-var index$1 = require('./index-DtvYdwe1.js');
-require('./breakpoints-CEkeixld.js');
+var breakpoints = require('./breakpoints-Df03Ct7n.js');
+require('./environment-BQE9Unf_.js');
 
 const postTabPanelCss = ":host{display:none}";
 
@@ -12,20 +12,20 @@ const PostTabPanel = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
     }
-    validateName() {
-        index$1.checkRequiredAndType(this, 'name', 'string');
+    validateFor() {
+        breakpoints.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 || index_browser.nanoid(6)}`;
     }
     render() {
-        return (index.h(index.Host, { key: '5d6c56e41ac61b10dd2560482bc5e4edab394742', "data-version": _package.version, id: this.panelId, role: "tabpanel" }, index.h("slot", { key: 'ec7be772a0d3f883388742460c825dce0f0e44e8' })));
+        return (index.h(index.Host, { key: 'dcb273fbc2a98c39813a152cd4a7e50bc86d0004', "data-version": _package.version, id: this.panelId, role: "tabpanel", slot: "panels" }, index.h("slot", { key: 'c3f13a3b062c53c87b303f57ee267a6ce24c54c8' })));
     }
     get host() { return index.getElement(this); }
     static get watchers() { return {
-        "name": ["validateName"]
+        "for": ["validateFor"]
     }; }
 };
 PostTabPanel.style = postTabPanelCss;