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

package/dist/components/post-popover-trigger.js

@@ -1,8 +1,7 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { v as version } from './package.js';
 import { i as isFocusable } from './focusable.js';
-import { c as checkRequiredAndType } from './index2.js';
-import './breakpoints.js';
+import { e as checkEmptyOrType } from './breakpoints.js';
 
 const postPopoverTriggerCss = ":host{cursor:pointer}";
 
@@ -18,41 +17,57 @@ const PostPopoverTrigger$1 = /*@__PURE__*/ proxyCustomElement(class PostPopoverT
      * @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
@@ -96,7 +111,7 @@ const PostPopoverTrigger$1 = /*@__PURE__*/ proxyCustomElement(class PostPopoverT
         this.popover?.removeEventListener('postToggle', this.boundHandlePostToggle);
     }
     render() {
-        return (h(Host, { key: 'd7467aa400f407d76df06e8bbc84210e5f016073', "data-version": version }, h("slot", { key: '618f3d14fb89b3ad3c101a58f8519c337d9f1721', onSlotchange: () => this.setupTrigger() })));
+        return (h(Host, { key: 'b519f15f3c613290c9fc301813b590e4f1727369', "data-version": version }, h("slot", { key: 'dbe0f26ae126f24f6d67f0e27a1a6dfa4aeb498f', onSlotchange: () => this.setupTrigger() })));
     }
     get host() { return this; }
     static get watchers() { return {

package/dist/components/post-popover.js

@@ -2,12 +2,11 @@ import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal
 import { a as PLACEMENT_TYPES, d as defineCustomElement$2 } from './post-popovercontainer2.js';
 import { v as version } from './package.js';
 import { a as getDeepFocusableChildren } from './get-focusable-children.js';
-import { d as checkEmptyOrOneOf, c as checkRequiredAndType } from './index2.js';
-import './breakpoints.js';
+import { d as checkEmptyOrOneOf, c as checkRequiredAndType } from './breakpoints.js';
 import { d as defineCustomElement$4 } from './post-closebutton2.js';
 import { d as defineCustomElement$3 } from './post-icon2.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$1 = /*@__PURE__*/ proxyCustomElement(class PostPopover extends HTMLElement {
     constructor() {
@@ -29,12 +28,12 @@ const PostPopover$1 = /*@__PURE__*/ proxyCustomElement(class PostPopover extends
     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
@@ -64,24 +63,24 @@ const PostPopover$1 = /*@__PURE__*/ proxyCustomElement(class PostPopover extends
         }
     }
     render() {
-        return (h(Host, { key: '82f8d89013b8ddb37fb924c9608ba394c669f35a', "data-version": version }, h("post-popovercontainer", { key: 'cf276e5faf65ae27bc0d8e51779de5470a1e49a3', arrow: this.arrow, placement: this.placement, ref: e => (this.popoverRef = e) }, h("div", { key: '9ab455b2ee7d7f082dc6fc588d519d7a362cad8c', class: "popover-container" }, h("div", { key: 'b3b468da2ff7ccb2a47d69a1841488359763e927', class: "popover-content" }, h("slot", { key: 'a32099475baaca02ce41350e36d363614a6f83ef' })), h("post-closebutton", { key: 'eac806bd1e6652cacce58fb7e915d66e82c24980', onClick: () => this.hide() }, this.closeButtonCaption)))));
+        return (h(Host, { key: 'b82e9758682173b6ed9db39765040581744e0dcc', "data-version": version }, h("post-popovercontainer", { key: 'ded5b122d2b8eada5fb9b245caa9e07af5f0f5f5', arrow: this.arrow, placement: this.placement, ref: e => (this.popoverRef = e) }, h("div", { key: '9311740aba30e3a7440d822eb8263153ff710bab', class: "popover-container" }, h("div", { key: 'a37c838a03d9e24ddeb9d9d2e268e8b3260ae757', class: "popover-content" }, h("slot", { key: '4bd852eb3da550c76a6ed4abb40f62a0769bdcf7' })), h("post-closebutton", { key: '10b09bde176da08f7571fbd5867ddee61ebf731a', onClick: () => this.hide() }, this.textClose)))));
     }
     get host() { return this; }
     static get watchers() { return {
         "placement": ["validatePlacement"],
-        "closeButtonCaption": ["validateCloseButtonCaption"]
+        "textClose": ["validateTextClose"]
     }; }
     static get style() { return postPopoverCss; }
 }, [1, "post-popover", {
         "placement": [1],
-        "closeButtonCaption": [1, "close-button-caption"],
+        "textClose": [513, "text-close"],
         "arrow": [4],
         "show": [64],
         "hide": [64],
         "toggle": [64]
     }, undefined, {
         "placement": ["validatePlacement"],
-        "closeButtonCaption": ["validateCloseButtonCaption"]
+        "textClose": ["validateTextClose"]
     }]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {

package/dist/components/post-popovercontainer2.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement as HTMLElement$1, createEvent, h, Host } from '@stencil/core/internal/client';
-import { I as IS_BROWSER } from './breakpoints.js';
-import { d as checkEmptyOrOneOf, e as checkEmptyOrType } from './index2.js';
+import { I as IS_BROWSER } from './environment.js';
+import { d as checkEmptyOrOneOf, e as checkEmptyOrType } from './breakpoints.js';
 import { v as version } from './package.js';
 
 const PLACEMENT_TYPES = [
@@ -2739,7 +2739,7 @@ function popIn(el) {
     });
 }
 
-const postPopovercontainerCss = "@layer polyfill{@supports not selector(:popover-open){[popover]:not(.\\:popover-open){display:none}}}:where(post-popovercontainer){background-color:rgba(0,0,0,0);border:rgba(0,0,0,0);position:fixed;margin:0;padding:0;overflow:visible}:where(post-popovercontainer)>div{box-shadow:var(--post-device-elevation-300);width:max-content;max-width:100%;color:var(--post-current-fg);background-color:var(--post-current-bg);border-radius:4px}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:where(post-popovercontainer)>div{border:2px solid rgba(0,0,0,0)}}:where(post-popovercontainer)[tooltip]{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}:where(post-popovercontainer)[safe-space]::after{content:\"\";position:fixed;inset:0;z-index:-1;pointer-events:auto}:where(post-popovercontainer)[safe-space=triangle]::after{clip-path:polygon(var(--post-safe-space-cursor-x, 0) var(--post-safe-space-cursor-y, 0), var(--post-safe-space-popover-x-start, var(--post-safe-space-popover-x, 0)) var(--post-safe-space-popover-y, var(--post-safe-space-popover-y-start, 0)), var(--post-safe-space-popover-x-end, var(--post-safe-space-popover-x, 0)) var(--post-safe-space-popover-y, var(--post-safe-space-popover-y-end, 0)))}:where(post-popovercontainer)[safe-space=trapezoid]::after{clip-path:polygon(var(--post-safe-space-trigger-x-start, var(--post-safe-space-trigger-x, 0)) var(--post-safe-space-trigger-y, var(--post-safe-space-trigger-y-start, 0)), var(--post-safe-space-trigger-x-end, var(--post-safe-space-trigger-x, 0)) var(--post-safe-space-trigger-y, var(--post-safe-space-trigger-y-end, 0)), var(--post-safe-space-popover-x-end, var(--post-safe-space-popover-x, 0)) var(--post-safe-space-popover-y, var(--post-safe-space-popover-y-end, 0)), var(--post-safe-space-popover-x-start, var(--post-safe-space-popover-x, 0)) var(--post-safe-space-popover-y, var(--post-safe-space-popover-y-start, 0)))}:where(post-popovercontainer):not(:has(.arrow))>div{box-shadow:var(--post-device-elevation-300)}:where(post-popovercontainer):has(.arrow)>div{filter:drop-shadow(1px 2px 3px hsla(216, 9%, 11%, 0.15)) drop-shadow(2px 4px 6px hsla(225, 17%, 9%, 0.15)) drop-shadow(4px 8px 12px hsla(225, 7%, 11%, 0.15))}:where(post-popovercontainer):has(.arrow.top)>div{filter:drop-shadow(0px -2px 3px hsla(216, 9%, 11%, 0.15)) drop-shadow(0px -4px 6px hsla(225, 17%, 9%, 0.15)) drop-shadow(0px -8px 12px hsla(225, 7%, 11%, 0.15))}:where(post-popovercontainer):has(.arrow.left)>div{filter:drop-shadow(-2px 0px 3px hsla(216, 9%, 11%, 0.15)) drop-shadow(-4px 0px 6px hsla(225, 17%, 9%, 0.15)) drop-shadow(-8px 0px 12px hsla(225, 7%, 11%, 0.15))}:where(post-popovercontainer):has(.arrow.right)>div{filter:drop-shadow(2px 0px 3px hsla(216, 9%, 11%, 0.15)) drop-shadow(4px 0px 6px hsla(225, 17%, 9%, 0.15)) drop-shadow(8px 0px 12px hsla(225, 7%, 11%, 0.15))}:where(post-popovercontainer) .arrow{position:absolute;width:.5825rem;height:.5825rem;background-color:inherit;rotate:45deg;pointer-events:none;z-index:-1}:where(post-popovercontainer) .arrow.top{border-block-start:2px solid rgba(0,0,0,0);border-inline-start:2px solid rgba(0,0,0,0)}:where(post-popovercontainer) .arrow.right{border-block-start:2px solid rgba(0,0,0,0);border-inline-end:2px solid rgba(0,0,0,0)}:where(post-popovercontainer) .arrow.left{border-block-end:2px solid rgba(0,0,0,0);border-inline-start:2px solid rgba(0,0,0,0)}:where(post-popovercontainer) .arrow.bottom{border-block-end:2px solid rgba(0,0,0,0);border-inline-end:2px solid rgba(0,0,0,0)}";
+const postPopovercontainerCss = "@layer polyfill{@supports not selector(:popover-open){[popover]:not(.\\:popover-open){display:none}}}:where(post-popovercontainer){background-color:rgba(0,0,0,0);border:rgba(0,0,0,0);position:fixed;margin:0;padding:0;overflow:visible}:where(post-popovercontainer)>div{box-shadow:var(--post-device-elevation-300);width:max-content;max-width:100%;color:var(--post-current-fg);background-color:var(--post-current-bg);border-radius:4px}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:where(post-popovercontainer)>div{border:2px solid rgba(0,0,0,0)}}:where(post-popovercontainer)[tooltip]{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}:where(post-popovercontainer)[safe-space]::after{content:\"\";position:fixed;inset:0;z-index:-1;pointer-events:auto}:where(post-popovercontainer)[safe-space=triangle]::after{clip-path:polygon(var(--post-safe-space-cursor-x, 0) var(--post-safe-space-cursor-y, 0), var(--post-safe-space-popover-x-start, var(--post-safe-space-popover-x, 0)) var(--post-safe-space-popover-y, var(--post-safe-space-popover-y-start, 0)), var(--post-safe-space-popover-x-end, var(--post-safe-space-popover-x, 0)) var(--post-safe-space-popover-y, var(--post-safe-space-popover-y-end, 0)))}:where(post-popovercontainer)[safe-space=trapezoid]::after{clip-path:polygon(var(--post-safe-space-trigger-x-start, var(--post-safe-space-trigger-x, 0)) var(--post-safe-space-trigger-y, var(--post-safe-space-trigger-y-start, 0)), var(--post-safe-space-trigger-x-end, var(--post-safe-space-trigger-x, 0)) var(--post-safe-space-trigger-y, var(--post-safe-space-trigger-y-end, 0)), var(--post-safe-space-popover-x-end, var(--post-safe-space-popover-x, 0)) var(--post-safe-space-popover-y, var(--post-safe-space-popover-y-end, 0)), var(--post-safe-space-popover-x-start, var(--post-safe-space-popover-x, 0)) var(--post-safe-space-popover-y, var(--post-safe-space-popover-y-start, 0)))}:where(post-popovercontainer):not(:has(.arrow))>div{box-shadow:var(--post-device-elevation-300)}:where(post-popovercontainer):has(.arrow)>div{filter:drop-shadow(1px 2px 3px hsla(216, 9%, 11%, 0.15)) drop-shadow(2px 4px 6px hsla(225, 17%, 9%, 0.15)) drop-shadow(4px 8px 12px hsla(225, 7%, 11%, 0.15))}:where(post-popovercontainer):has(.arrow.top)>div{filter:drop-shadow(0px -2px 3px hsla(216, 9%, 11%, 0.15)) drop-shadow(0px -4px 6px hsla(225, 17%, 9%, 0.15)) drop-shadow(0px -8px 12px hsla(225, 7%, 11%, 0.15))}:where(post-popovercontainer):has(.arrow.left)>div{filter:drop-shadow(-2px 0px 3px hsla(216, 9%, 11%, 0.15)) drop-shadow(-4px 0px 6px hsla(225, 17%, 9%, 0.15)) drop-shadow(-8px 0px 12px hsla(225, 7%, 11%, 0.15))}:where(post-popovercontainer):has(.arrow.right)>div{filter:drop-shadow(2px 0px 3px hsla(216, 9%, 11%, 0.15)) drop-shadow(4px 0px 6px hsla(225, 17%, 9%, 0.15)) drop-shadow(8px 0px 12px hsla(225, 7%, 11%, 0.15))}:where(post-popovercontainer) .arrow{--arrow-size: 0.5825rem;position:absolute;width:.5825rem;height:.5825rem;background-color:inherit;rotate:45deg;pointer-events:none;z-index:-1}:where(post-popovercontainer) .arrow[dynamic-placement=top]{border-bottom-right-radius:2px}:where(post-popovercontainer) .arrow[dynamic-placement=right]{border-bottom-left-radius:2px}:where(post-popovercontainer) .arrow[dynamic-placement=bottom]{border-top-left-radius:2px}:where(post-popovercontainer) .arrow[dynamic-placement=left]{border-top-right-radius:2px}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:where(post-popovercontainer) .arrow[dynamic-placement=top]{border-block-end:2px solid rgba(0,0,0,0);border-inline-end:2px solid rgba(0,0,0,0);bottom:-0.3796735336rem !important}:where(post-popovercontainer) .arrow[dynamic-placement=left]{border-block-start:2px solid rgba(0,0,0,0);border-inline-end:2px solid rgba(0,0,0,0);right:-0.3796735336rem !important}:where(post-popovercontainer) .arrow[dynamic-placement=right]{border-block-end:2px solid rgba(0,0,0,0);border-inline-start:2px solid rgba(0,0,0,0);left:-0.3796735336rem !important}:where(post-popovercontainer) .arrow[dynamic-placement=bottom]{border-block-start:2px solid rgba(0,0,0,0);border-inline-start:2px solid rgba(0,0,0,0);top:-0.3796735336rem !important}}";
 
 const PostPopovercontainer = /*@__PURE__*/ proxyCustomElement(class PostPopovercontainer extends HTMLElement$1 {
     constructor() {
@@ -2769,10 +2769,6 @@ const PostPopovercontainer = /*@__PURE__*/ proxyCustomElement(class PostPopoverc
          * Whether or not to display a little pointer arrow
          */
         this.arrow = false;
-        /**
-         * Whether or not the popovercontainer should close when user clicks outside of it
-         */
-        this.manualClose = false;
         this.currentAnimation = null;
     }
     validatePlacement() {
@@ -2818,10 +2814,35 @@ const PostPopovercontainer = /*@__PURE__*/ proxyCustomElement(class PostPopoverc
         this.calculatePosition();
         this.host.showPopover();
     }
+    /**
+     * Programmatically hide the popovercontainer
+     */
+    async hide() {
+        if (!this.toggleTimeoutId) {
+            this.eventTarget = null;
+            this.host.hidePopover();
+            this.postHide.emit();
+        }
+    }
+    /**
+     * Toggle popovercontainer display
+     * @param target A focusable element inside the <post-popover-trigger> component that controls the popover
+     * @param force Pass true to always show or false to always hide
+     */
+    async toggle(target, force) {
+        this.eventTarget = target;
+        // Prevent instant double toggle
+        if (!this.toggleTimeoutId) {
+            this.calculatePosition();
+            this.host.togglePopover(force);
+            this.toggleTimeoutId = null;
+        }
+        return this.host.matches(':where(:popover-open, .popover-open)');
+    }
     /**
      * Handles the popover opening process and emits related events.
      */
-    async open() {
+    open() {
         const content = this.host.querySelector('.popover-content');
         this.startAutoupdates();
         if (content) {
@@ -2846,7 +2867,7 @@ const PostPopovercontainer = /*@__PURE__*/ proxyCustomElement(class PostPopoverc
     /**
      * Handles the popover closing process and emits related events.
      */
-    async close() {
+    close() {
         if (typeof this.clearAutoUpdate === 'function') {
             this.clearAutoUpdate();
         }
@@ -2892,31 +2913,6 @@ const PostPopovercontainer = /*@__PURE__*/ proxyCustomElement(class PostPopoverc
             }
         }
     }
-    /**
-     * Programmatically hide the popovercontainer
-     */
-    async hide() {
-        if (!this.toggleTimeoutId) {
-            this.eventTarget = null;
-            this.host.hidePopover();
-            this.postHide.emit();
-        }
-    }
-    /**
-     * Toggle popovercontainer display
-     * @param target A focusable element inside the <post-popover-trigger> component that controls the popover
-     * @param force Pass true to always show or false to always hide
-     */
-    async toggle(target, force) {
-        this.eventTarget = target;
-        // Prevent instant double toggle
-        if (!this.toggleTimeoutId) {
-            this.calculatePosition();
-            this.host.togglePopover(force);
-            this.toggleTimeoutId = null;
-        }
-        return this.host.matches(':where(:popover-open, .popover-open)');
-    }
     /**
      * Start or stop auto updates based on popovercontainer events.
      * Popovercontainers can be closed or opened with other methods than class members,
@@ -2950,6 +2946,7 @@ const PostPopovercontainer = /*@__PURE__*/ proxyCustomElement(class PostPopoverc
     async calculatePosition() {
         const { x, y, middlewareData, placement } = await this.computeMainPosition();
         const currentPlacement = placement.split('-')[0];
+        this.dynamicPlacement = currentPlacement;
         // Position popover
         this.host.style.left = `${x}px`;
         this.host.style.top = `${y}px`;
@@ -2957,11 +2954,20 @@ const PostPopovercontainer = /*@__PURE__*/ proxyCustomElement(class PostPopoverc
         if (this.arrow && middlewareData.arrow) {
             const { x: arrowX, y: arrowY } = middlewareData.arrow;
             const staticSide = PostPopovercontainer.STATIC_SIDES[currentPlacement];
+            const rootFontSize = Number.parseFloat(getComputedStyle(document.documentElement).fontSize);
+            // Calculate dynamically the half side which provides the static side offset
+            const arrowSizeValue = getComputedStyle(this.arrowRef)
+                .getPropertyValue('--arrow-size')
+                .trim();
+            const arrowSizePx = arrowSizeValue.endsWith('rem')
+                ? Number.parseFloat(arrowSizeValue) * rootFontSize
+                : Number.parseFloat(arrowSizeValue);
+            const halfSide = -0.5 * arrowSizePx;
             if (staticSide) {
                 Object.assign(this.arrowRef.style, {
                     left: arrowX ? `${arrowX}px` : '',
                     top: arrowY ? `${arrowY}px` : '',
-                    [staticSide]: '-5px',
+                    [staticSide]: `${halfSide}px`,
                 });
             }
         }
@@ -3062,9 +3068,9 @@ const PostPopovercontainer = /*@__PURE__*/ proxyCustomElement(class PostPopoverc
         }
     }
     render() {
-        return (h(Host, { key: 'ec57bb478a7fe7d6449ef1ed4d91db4d0835ea4e', "data-version": version, popover: this.manualClose ? 'manual' : 'auto' }, h("div", { key: '2969b3c6ef9441d06b9c913f47bb64e84006dbe4', class: "popover-content" }, this.arrow && (h("span", { key: '03b8addd0bee91d9358e9554f2d507b9a349e0db', class: "arrow", ref: el => {
+        return (h(Host, { key: '0aaf70cb284e7227149f2e500aa7c72cab69d90a', "data-version": version, popover: "auto" }, h("div", { key: '9762887bdddca93acc6dfda715f2f41f4f6c98d6', class: "popover-content" }, this.arrow && (h("span", { key: 'e77f16be0b3b0cdb02886ea928aa6986d3f477e3', "dynamic-placement": this.dynamicPlacement, class: "arrow", ref: el => {
                 this.arrowRef = el;
-            } })), h("slot", { key: '2fb25dce5ea9e5f1044cde4839df61af34c8b667' }))));
+            } })), h("slot", { key: 'e8737e5acec3a20d258d462a7d82278d303ba353' }))));
     }
     get host() { return this; }
     static get watchers() { return {
@@ -3078,11 +3084,9 @@ const PostPopovercontainer = /*@__PURE__*/ proxyCustomElement(class PostPopoverc
         "edgeGap": [2, "edge-gap"],
         "animation": [1],
         "arrow": [4],
-        "manualClose": [4, "manual-close"],
         "safeSpace": [513, "safe-space"],
+        "dynamicPlacement": [32],
         "show": [64],
-        "open": [64],
-        "close": [64],
         "hide": [64],
         "toggle": [64]
     }, undefined, {

package/dist/components/post-rating.js

@@ -1,7 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { v as version } from './package.js';
-import { c as checkRequiredAndType } from './index2.js';
-import './breakpoints.js';
+import { c as checkRequiredAndType } from './breakpoints.js';
 import { d as defineCustomElement$2 } from './post-icon2.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%)}";
@@ -97,7 +96,7 @@ const PostRating$1 = /*@__PURE__*/ proxyCustomElement(class PostRating extends H
         }
     }
     render() {
-        return (h(Host, { key: '9089061145d80c4791a56580d107d6fab88f1d6d', "data-version": version }, 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) => (h("div", { key: `star-${v}`, "aria-hidden": "true", class: {
+        return (h(Host, { key: '9fc30dc25747bc15a0fc802235514ed40de0ed6a', "data-version": version }, 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) => (h("div", { key: `star-${v}`, "aria-hidden": "true", class: {
                 'star': true,
                 'before-hover': i < this.hoveredIndex,
                 'active': i < Math.round(this.currentRating),
@@ -113,7 +112,7 @@ const PostRating$1 = /*@__PURE__*/ proxyCustomElement(class PostRating extends H
     }; }
     static get style() { return postRatingCss; }
 }, [1, "post-rating", {
-        "label": [1],
+        "label": [513],
         "stars": [2],
         "currentRating": [1026, "current-rating"],
         "readonly": [4],

package/dist/components/post-stepper-item.d.ts

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

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

@@ -0,0 +1,33 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { v as version } from './package.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$1 = /*@__PURE__*/ proxyCustomElement(class PostStepperItem extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+    }
+    render() {
+        return (h(Host, { key: '04ee0014a44c978432fd2569a801dc1023c30f14', "data-version": version, role: "listitem" }, h("span", { key: '3fc43cca8c0b1af4129858aca44724241e85a8c0', class: "stepper-item-content" }, h("span", { key: '158580119f48648869e3625a64fe38b8a8224e4d', class: "step-hidden-label visually-hidden" }), h("span", { key: '8f273c70ac9d386a197ced9738217490ef3c15e7', class: "label" }, h("slot", { key: 'd29e0df0613529f051f66dad125954476cb0b0e7' })))));
+    }
+    static get style() { return postStepperItemCss; }
+}, [4, "post-stepper-item"]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["post-stepper-item"];
+    components.forEach(tagName => { switch (tagName) {
+        case "post-stepper-item":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, PostStepperItem$1);
+            }
+            break;
+    } });
+}
+
+const PostStepperItem = PostStepperItem$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { PostStepperItem, defineCustomElement };

package/dist/components/{post-list-item.d.ts → post-stepper.d.ts}

@@ -1,9 +1,9 @@
 import type { Components, JSX } from "../types/components";
 
-interface PostListItem extends Components.PostListItem, HTMLElement {}
-export const PostListItem: {
-    prototype: PostListItem;
-    new (): PostListItem;
+interface PostStepper extends Components.PostStepper, HTMLElement {}
+export const PostStepper: {
+    prototype: PostStepper;
+    new (): PostStepper;
 };
 /**
  * Used to define this component and all nested components recursively.

package/dist/components/post-stepper.js

@@ -0,0 +1,136 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { v as version } from './package.js';
+import { c as checkRequiredAndType, h as checkRequiredAndPattern } from './breakpoints.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 HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        /**
+         * Defines the currently active step
+         */
+        this.currentIndex = -1;
+    }
+    validateTextCurrentStep() {
+        checkRequiredAndType(this, 'textCurrentStep', 'string');
+    }
+    validateTextCompletedStep() {
+        checkRequiredAndType(this, 'textCompletedStep', 'string');
+    }
+    validateTextStepNumber() {
+        checkRequiredAndPattern(this, 'textStepNumber', /#number\b/);
+        this.updateActiveStepNumber();
+    }
+    validateCurrentIndex() {
+        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 (h(Host, { key: 'b067a1d91483d604139bb4e5b2937b9b2ea9375a', "data-version": version }, h("ol", { key: '411439c01f0ede28038149f9dcb37d6d7e1198ea' }, h("slot", { key: '71ac965a4bb0e1650c3e0d66d9915f0efd6ee9c6', onSlotchange: () => this.updateSteps() })), h("div", { key: '7168af48d858edbf87168289cbce9059471ba176', class: "active-step", "aria-hidden": "true" }, this.mobileActiveStepLabel, h("span", { key: '93fbf92d1b5a4a17488b8a73cff8e3aea20d4389', innerHTML: this.mobileActiveStepName }))));
+    }
+    get host() { return this; }
+    static get watchers() { return {
+        "textCurrentStep": ["validateTextCurrentStep"],
+        "textCompletedStep": ["validateTextCompletedStep"],
+        "textStepNumber": ["validateTextStepNumber"],
+        "currentIndex": ["validateCurrentIndex"]
+    }; }
+    static get style() { return postStepperCss; }
+}, [1, "post-stepper", {
+        "textCurrentStep": [513, "text-current-step"],
+        "textCompletedStep": [513, "text-completed-step"],
+        "textStepNumber": [513, "text-step-number"],
+        "currentIndex": [2, "current-index"],
+        "mobileActiveStepLabel": [32],
+        "mobileActiveStepName": [32]
+    }, undefined, {
+        "textCurrentStep": ["validateTextCurrentStep"],
+        "textCompletedStep": ["validateTextCompletedStep"],
+        "textStepNumber": ["validateTextStepNumber"],
+        "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;
+    } });
+}
+
+const PostStepper = PostStepper$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { PostStepper, defineCustomElement };

package/dist/components/{post-tab-header.d.ts → post-tab-item.d.ts}

@@ -1,9 +1,9 @@
 import type { Components, JSX } from "../types/components";
 
-interface PostTabHeader extends Components.PostTabHeader, HTMLElement {}
-export const PostTabHeader: {
-    prototype: PostTabHeader;
-    new (): PostTabHeader;
+interface PostTabItem extends Components.PostTabItem, HTMLElement {}
+export const PostTabItem: {
+    prototype: PostTabItem;
+    new (): PostTabItem;
 };
 /**
  * Used to define this component and all nested components recursively.