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

package/dist/components/post-rating.js

@@ -1,148 +1 @@
-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 { 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%)}";
-
-const PostRating$1 = /*@__PURE__*/ proxyCustomElement(class PostRating extends HTMLElement {
-    validateLabel() {
-        checkRequiredAndType(this, 'label', 'string');
-    }
-    validateStars() {
-        checkRequiredAndType(this, 'stars', 'number');
-    }
-    validateCurrentRating() {
-        checkRequiredAndType(this, 'currentRating', 'number');
-    }
-    componentWillLoad() {
-        this.validateLabel();
-        this.validateStars();
-        this.validateCurrentRating();
-    }
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.postInput = createEvent(this, "postInput", 7);
-        this.postChange = createEvent(this, "postChange", 7);
-        this.hasChanged = false;
-        /**
-         * Defines the total amount of stars rendered in the component.
-         */
-        this.stars = 5;
-        /**
-         * Defines the rating that the component should show.
-         */
-        this.currentRating = 0;
-        /**
-         * Defines if the component is readonly or not.
-         * This usually should be used together with the `currentRating` property.
-         */
-        this.readonly = false;
-        this.keydownHandler = this.keydownHandler.bind(this);
-        this.blurHandler = this.blurHandler.bind(this);
-        this.hoverHandler = this.hoverHandler.bind(this);
-    }
-    update(value) {
-        if (this.readonly || value < 0 || value > this.stars)
-            return;
-        this.currentRating = this.currentRating !== value ? value : 0; // If a star is clicked the second time, the rating gets set to 0.
-        this.postInput.emit({ value: this.currentRating });
-        this.hasChanged = true;
-    }
-    keydownHandler(e) {
-        switch (e.key) {
-            case 'ArrowDown':
-            case 'ArrowLeft':
-                e.preventDefault();
-                this.update(this.currentRating - 1);
-                break;
-            case 'ArrowUp':
-            case 'ArrowRight':
-                e.preventDefault();
-                this.update(this.currentRating + 1);
-                break;
-            case 'Home':
-                e.preventDefault();
-                this.update(0);
-                break;
-            case 'End':
-                e.preventDefault();
-                this.update(this.stars);
-                break;
-            case 'Enter':
-            case ' ':
-                this.blurHandler();
-                break;
-            default:
-                return;
-        }
-    }
-    blurHandler() {
-        if (this.hasChanged) {
-            this.postChange.emit({ value: this.currentRating });
-            this.hasChanged = false;
-        }
-    }
-    hoverHandler(index, e) {
-        if (this.readonly)
-            return;
-        if (e.type === 'mouseenter') {
-            this.hoveredIndex = index;
-        }
-        else if (e.type === 'mouseleave') {
-            this.hoveredIndex = undefined;
-        }
-    }
-    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: {
-                '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) }, h("post-icon", { name: "favoritestar", class: "stroke" }), h("post-icon", { name: "favoritestar-solid", class: "fill" })))))));
-    }
-    get host() { return this; }
-    static get watchers() { return {
-        "label": ["validateLabel"],
-        "stars": ["validateStars"],
-        "currentRating": ["validateCurrentRating"]
-    }; }
-    static get style() { return postRatingCss; }
-}, [1, "post-rating", {
-        "label": [513],
-        "stars": [2],
-        "currentRating": [1026, "current-rating"],
-        "readonly": [4],
-        "hoveredIndex": [32]
-    }, undefined, {
-        "label": ["validateLabel"],
-        "stars": ["validateStars"],
-        "currentRating": ["validateCurrentRating"]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["post-rating", "post-icon"];
-    components.forEach(tagName => { switch (tagName) {
-        case "post-rating":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, PostRating$1);
-            }
-            break;
-        case "post-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-
-const PostRating = PostRating$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { PostRating, defineCustomElement };
+import{proxyCustomElement as t,HTMLElement as s,createEvent as a,h as r,Host as i,transformTag as e}from"@stencil/core/internal/client";import{v as o}from"./package.js";import{c as n}from"./breakpoints.js";import{d as l}from"./post-icon2.js";const h=t(class extends s{validateLabel(){n(this,"label","string")}validateStars(){n(this,"stars","number")}validateCurrentRating(){n(this,"currentRating","number")}componentWillLoad(){this.validateLabel(),this.validateStars(),this.validateCurrentRating()}constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.postInput=a(this,"postInput",7),this.postChange=a(this,"postChange",7),this.hasChanged=!1,this.stars=5,this.currentRating=0,this.readonly=!1,this.keydownHandler=this.keydownHandler.bind(this),this.blurHandler=this.blurHandler.bind(this),this.hoverHandler=this.hoverHandler.bind(this)}update(t){this.readonly||t<0||t>this.stars||(this.currentRating=this.currentRating!==t?t:0,this.postInput.emit({value:this.currentRating}),this.hasChanged=!0)}keydownHandler(t){switch(t.key){case"ArrowDown":case"ArrowLeft":t.preventDefault(),this.update(this.currentRating-1);break;case"ArrowUp":case"ArrowRight":t.preventDefault(),this.update(this.currentRating+1);break;case"Home":t.preventDefault(),this.update(0);break;case"End":t.preventDefault(),this.update(this.stars);break;case"Enter":case" ":this.blurHandler();break;default:return}}blurHandler(){this.hasChanged&&(this.postChange.emit({value:this.currentRating}),this.hasChanged=!1)}hoverHandler(t,s){this.readonly||("mouseenter"===s.type?this.hoveredIndex=t:"mouseleave"===s.type&&(this.hoveredIndex=void 0))}render(){return r(i,{key:"dcad32c132b9c85084effc694117d8f08c2c8bb2","data-version":o},r("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(((t,s)=>r("div",{key:"star-"+t,"aria-hidden":"true",class:{star:!0,"before-hover":s<this.hoveredIndex,active:s<Math.round(this.currentRating),hover:s===this.hoveredIndex,"after-active":s>this.hoveredIndex&&s<this.currentRating},onClick:()=>this.update(s+1),onMouseEnter:t=>this.hoverHandler(s,t),onMouseLeave:t=>this.hoverHandler(s,t)},r("post-icon",{name:"favoritestar",class:"stroke"}),r("post-icon",{name:"favoritestar-solid",class:"fill"}))))))}get host(){return this}static get watchers(){return{label:[{validateLabel:0}],stars:[{validateStars:0}],currentRating:[{validateCurrentRating:0}]}}static get style(){return":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%)}"}},[1,"post-rating",{label:[513],stars:[2],currentRating:[1026,"current-rating"],readonly:[4],hoveredIndex:[32]},void 0,{label:[{validateLabel:0}],stars:[{validateStars:0}],currentRating:[{validateCurrentRating:0}]}]),c=h,d=function(){"undefined"!=typeof customElements&&["post-rating","post-icon"].forEach((t=>{switch(t){case"post-rating":customElements.get(e(t))||customElements.define(e(t),h);break;case"post-icon":customElements.get(e(t))||l()}}))};export{c as PostRating,d as defineCustomElement}

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

@@ -1,33 +1 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { v as version } from './package.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 PostStepperItem$1 = /*@__PURE__*/ proxyCustomElement(class PostStepperItem extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-    }
-    render() {
-        return (h(Host, { key: '599be83f6d5c6642f6a5f3f9821779fd169560f4', "data-version": version, role: "listitem" }, h("span", { key: 'cc2d26204b50e524a7e7a51376a09f849e6e088a', class: "stepper-item-content" }, h("span", { key: '6095ada1c3964b5358b128858a81cb772aa11e13', class: "step-hidden-label visually-hidden" }), h("span", { key: '4e0e375964f19ff1dbef0667313fea2ed5824c59', class: "label" }, h("slot", { key: 'fa60ebf63acbf8d66acaacf66785125c2810cd3f' })))));
-    }
-    static get 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 };
+import{proxyCustomElement as e,HTMLElement as t,h as i,Host as r,transformTag as o}from"@stencil/core/internal/client";import{v as p}from"./package.js";const s=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost()}render(){return i(r,{key:"aa99547793b72179f4dfb0db5b60b356dc8f51f0","data-version":p,role:"listitem"},i("span",{key:"3eb13dcd3ab69364679f04d22d91c9abca7f1ea0",class:"stepper-item-content"},i("span",{key:"14e72486bd101809c3ff804ae625a218925d93ba",class:"step-hidden-label visually-hidden"}),i("span",{key:"1969a71424a8fbc452c65d9c38717ad60bddc612",class:"label"},i("slot",{key:"d0d634132895b9d3f27594d1baaae76963f1bd04"}))))}static get style(){return'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}'}},[260,"post-stepper-item"]),c=s,a=function(){"undefined"!=typeof customElements&&["post-stepper-item"].forEach((e=>{"post-stepper-item"===e&&(customElements.get(o(e))||customElements.define(o(e),s))}))};export{c as PostStepperItem,a as defineCustomElement}

package/dist/components/post-stepper.js

@@ -1,134 +1 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { v as version } from './package.js';
-import { c as checkRequiredAndType, f as checkRequiredAndPattern } from './index2.js';
-import './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;
-    }
-    validateCurrentLabel() {
-        checkRequiredAndType(this, 'currentLabel', 'string');
-    }
-    validateCompletedLabel() {
-        checkRequiredAndType(this, 'completedLabel', 'string');
-    }
-    validateActiveStepLabel() {
-        checkRequiredAndPattern(this, 'activeStepLabel', /#index\b/);
-        this.updateActiveStepLabel();
-    }
-    validateCurrentIndex() {
-        checkRequiredAndType(this, 'currentIndex', 'number');
-        this.updateSteps();
-    }
-    componentDidLoad() {
-        this.validateCompletedLabel();
-        this.validateCurrentLabel();
-        this.validateActiveStepLabel();
-        // Wait for slotchange
-        setTimeout(() => {
-            this.validateCurrentIndex();
-        });
-    }
-    updateActiveStepLabel() {
-        if (this.activeStepLabel) {
-            const labelTemplate = this.activeStepLabel;
-            this.mobileActiveStepLabel = labelTemplate.replace(/#index/g, `${this.currentIndex + 1}`);
-            this.updateMobileActiveStepVisibility();
-        }
-    }
-    updateSteps() {
-        this.stepItems = this.host.querySelectorAll('post-stepper-item');
-        if (!this.stepItems || this.stepItems.length < 3) {
-            console.error('The post-stepper component should have at least three steps.');
-            return;
-        }
-        this.updateActiveStepLabel();
-        this.stepItems.forEach((el, i) => {
-            if (this.currentIndex === i) {
-                this.mobileActiveStepName = el.querySelector('.label').innerHTML;
-            }
-            // Update "post-stepper-item" classes to show correct status
-            el.classList.toggle('stepper-item-completed', this.currentIndex > i);
-            el.classList.toggle('stepper-item-current', this.currentIndex === i);
-            el.classList.toggle('stepper-item-inactive', this.currentIndex < i);
-            // Update accessibility label depending on status (Completed/Current/-)
-            const hiddenLabel = el.querySelector('.step-hidden-label');
-            if (hiddenLabel) {
-                let labelText = '';
-                if (this.currentIndex > i) {
-                    labelText = `${this.completedLabel}:`;
-                }
-                else if (this.currentIndex === i) {
-                    labelText = `${this.currentLabel}:`;
-                }
-                hiddenLabel.textContent = labelText;
-            }
-            // Update accessibility aria attributes
-            if (this.currentIndex === i) {
-                el.setAttribute('aria-current', 'step');
-                el.setAttribute('aria-live', 'polite');
-            }
-            else {
-                el.removeAttribute('aria-current');
-                el.removeAttribute('aria-live');
-            }
-        });
-        this.updateMobileActiveStepVisibility();
-    }
-    updateMobileActiveStepVisibility() {
-        if (this.currentIndex >= this.stepItems.length || this.currentIndex < 0) {
-            this.mobileActiveStepLabel = '';
-            this.mobileActiveStepName = '';
-        }
-    }
-    render() {
-        return (h(Host, { key: '874d4d6a510ede937c7f9e5dd1f28f8981f33626', "data-version": version }, h("ol", { key: '55fb25ded4111eb1c87ea11a10fbd65346843132' }, h("slot", { key: '0c9f9d00573ea568c0039312507989a22868f432', onSlotchange: () => this.updateSteps() })), h("div", { key: '22e5b14c5285b96ba0a3a99c9cb90e02550298c6', class: "active-step", "aria-hidden": "true" }, this.mobileActiveStepLabel, h("span", { key: '1ba5204f3c01dad6730d0d300168a13316e3d3ac', innerHTML: this.mobileActiveStepName }))));
-    }
-    get host() { return this; }
-    static get watchers() { return {
-        "currentLabel": ["validateCurrentLabel"],
-        "completedLabel": ["validateCompletedLabel"],
-        "activeStepLabel": ["validateActiveStepLabel"],
-        "currentIndex": ["validateCurrentIndex"]
-    }; }
-    static get style() { return postStepperCss; }
-}, [1, "post-stepper", {
-        "currentLabel": [513, "current-label"],
-        "completedLabel": [513, "completed-label"],
-        "activeStepLabel": [513, "active-step-label"],
-        "currentIndex": [2, "current-index"],
-        "mobileActiveStepLabel": [32],
-        "mobileActiveStepName": [32]
-    }, undefined, {
-        "currentLabel": ["validateCurrentLabel"],
-        "completedLabel": ["validateCompletedLabel"],
-        "activeStepLabel": ["validateActiveStepLabel"],
-        "currentIndex": ["validateCurrentIndex"]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["post-stepper"];
-    components.forEach(tagName => { switch (tagName) {
-        case "post-stepper":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, PostStepper$1);
-            }
-            break;
-    } });
-}
-
-const PostStepper = PostStepper$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { PostStepper, defineCustomElement };
+import{proxyCustomElement as e,HTMLElement as t,h as i,Host as s,transformTag as r}from"@stencil/core/internal/client";import{v as n}from"./package.js";import{c as a,h as p}from"./breakpoints.js";const d=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.currentIndex=-1}validateTextCurrentStep(){a(this,"textCurrentStep","string")}validateTextCompletedStep(){a(this,"textCompletedStep","string")}validateTextStepNumber(){p(this,"textStepNumber",/#number\b/),this.updateActiveStepNumber()}validateCurrentIndex(){a(this,"currentIndex","number"),this.updateSteps()}connectedCallback(){this.stepItems=document.querySelectorAll(null)}componentDidLoad(){this.validateTextCompletedStep(),this.validateTextCurrentStep(),this.validateTextStepNumber(),setTimeout((()=>{this.validateCurrentIndex()}))}updateActiveStepNumber(){this.textStepNumber&&(this.mobileActiveStepLabel=this.textStepNumber.replace(/#number/g,""+(this.currentIndex+1)),this.updateMobileActiveStepVisibility())}updateSteps(){this.stepItems=this.host.querySelectorAll("post-stepper-item"),!this.stepItems||this.stepItems.length<3?console.error("The post-stepper component should have at least three steps."):(this.updateActiveStepNumber(),this.stepItems.forEach(((e,t)=>{this.currentIndex===t&&(this.mobileActiveStepName=e.querySelector(".label").innerHTML),e.classList.toggle("stepper-item-completed",this.currentIndex>t),e.classList.toggle("stepper-item-current",this.currentIndex===t),e.classList.toggle("stepper-item-inactive",this.currentIndex<t);const i=e.querySelector(".step-hidden-label");if(i){let e="";this.currentIndex>t?e=this.textCompletedStep+":":this.currentIndex===t&&(e=this.textCurrentStep+":"),i.textContent=e}this.currentIndex===t?(e.setAttribute("aria-current","step"),e.setAttribute("aria-live","polite")):(e.removeAttribute("aria-current"),e.removeAttribute("aria-live"))})),this.updateMobileActiveStepVisibility())}updateMobileActiveStepVisibility(){(this.currentIndex>=this.stepItems.length||this.currentIndex<0)&&(this.mobileActiveStepLabel="",this.mobileActiveStepName="")}render(){return i(s,{key:"505b58d089a7362a9f4dd64af787dc9ae5778b0e","data-version":n},i("ol",{key:"1d865b0f80f388076cfba5fd14fc9e9185d8f014"},i("slot",{key:"9e499edc98031d016fc8c00c7db6b9c01562b13c",onSlotchange:()=>this.updateSteps()})),i("div",{key:"ed9b9f6ac8e7fd6056010de024862d4408ccca08",class:"active-step","aria-hidden":"true"},this.mobileActiveStepLabel,i("span",{key:"8e93faf8031b116b52d02e6a594ce09b23520ba9",innerHTML:this.mobileActiveStepName})))}get host(){return this}static get watchers(){return{textCurrentStep:[{validateTextCurrentStep:0}],textCompletedStep:[{validateTextCompletedStep:0}],textStepNumber:[{validateTextStepNumber:0}],currentIndex:[{validateCurrentIndex:0}]}}static get style(){return"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}}"}},[257,"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]},void 0,{textCurrentStep:[{validateTextCurrentStep:0}],textCompletedStep:[{validateTextCompletedStep:0}],textStepNumber:[{validateTextStepNumber:0}],currentIndex:[{validateCurrentIndex:0}]}]),o=d,l=function(){"undefined"!=typeof customElements&&["post-stepper"].forEach((e=>{"post-stepper"===e&&(customElements.get(r(e))||customElements.define(r(e),d))}))};export{o as PostStepper,l as defineCustomElement}

package/dist/components/{post-list-item.d.ts → post-tab-item.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 PostTabItem extends Components.PostTabItem, HTMLElement {}
+export const PostTabItem: {
+    prototype: PostTabItem;
+    new (): PostTabItem;
 };
 /**
  * Used to define this component and all nested components recursively.

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

@@ -0,0 +1 @@
+import{proxyCustomElement as t,HTMLElement as e,h as o,Host as i,transformTag as a}from"@stencil/core/internal/client";import{v as r}from"./package.js";import{c}from"./breakpoints.js";import{n}from"./index.browser.js";const s=t(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.mutationObserver=new MutationObserver(this.checkNavigationMode.bind(this)),this.isNavigationMode=!1}validateName(){c(this,"name","string")}connectedCallback(){this.mutationObserver.observe(this.host,{childList:!0,subtree:!0})}componentWillLoad(){this.tabId="tab-"+(this.host.id||n(6)),this.checkNavigationMode()}disconnectedCallback(){this.mutationObserver&&this.mutationObserver.disconnect()}checkNavigationMode(){const t=null!==this.host.querySelector("a");this.isNavigationMode=t}render(){return o(i,{key:"54d2e054aa341fac3a915eeed3aec3658d524037",id:this.tabId,role:this.isNavigationMode?void 0:"tab","data-version":r,"data-navigation-mode":""+this.isNavigationMode,"aria-selected":this.isNavigationMode?void 0:"false",tabindex:this.isNavigationMode?void 0:"-1",class:this.isNavigationMode?"nav-item":"tab-title"},o("slot",{key:"b01d7396a36514d3ba423a3d391eaaffd30b1e38"}))}get host(){return this}static get watchers(){return{name:[{validateName:0}]}}static get style(){return'.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}}'}},[257,"post-tab-item",{name:[513],tabId:[32],isNavigationMode:[32]},void 0,{name:[{validateName:0}]}]),b=s,l=function(){"undefined"!=typeof customElements&&["post-tab-item"].forEach((t=>{"post-tab-item"===t&&(customElements.get(a(t))||customElements.define(a(t),s))}))};export{b as PostTabItem,l as defineCustomElement}

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

@@ -1,54 +1 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { v as version } from './package.js';
-import { n as nanoid } from './index.browser.js';
-import { c as checkRequiredAndType } from './index2.js';
-import './breakpoints.js';
-
-const postTabPanelCss = ":host{display:none}";
-
-const PostTabPanel$1 = /*@__PURE__*/ proxyCustomElement(class PostTabPanel extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-    }
-    validateName() {
-        checkRequiredAndType(this, 'name', 'string');
-    }
-    componentWillLoad() {
-        this.validateName();
-        // 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' })));
-    }
-    get host() { return this; }
-    static get watchers() { return {
-        "name": ["validateName"]
-    }; }
-    static get style() { return postTabPanelCss; }
-}, [1, "post-tab-panel", {
-        "name": [513],
-        "panelId": [32]
-    }, undefined, {
-        "name": ["validateName"]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["post-tab-panel"];
-    components.forEach(tagName => { switch (tagName) {
-        case "post-tab-panel":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, PostTabPanel$1);
-            }
-            break;
-    } });
-}
-
-const PostTabPanel = PostTabPanel$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { PostTabPanel, defineCustomElement };
+import{proxyCustomElement as t,HTMLElement as e,h as s,Host as o,transformTag as a}from"@stencil/core/internal/client";import{v as r}from"./package.js";import{n}from"./index.browser.js";import{c as i}from"./breakpoints.js";const l=t(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow()}validateFor(){i(this,"for","string")}componentWillLoad(){this.validateFor(),this.panelId="panel-"+(this.host.id||n(6))}render(){return s(o,{key:"b6a274839ef5643f0a666b19a2a91effa5238e5f","data-version":r,id:this.panelId,role:"tabpanel",slot:"panels"},s("slot",{key:"4b3d45f03517586145d92596106b158ebfacb37d"}))}get host(){return this}static get watchers(){return{for:[{validateFor:0}]}}static get style(){return":host{display:none}"}},[257,"post-tab-panel",{for:[513],panelId:[32]},void 0,{for:[{validateFor:0}]}]),p=l,c=function(){"undefined"!=typeof customElements&&["post-tab-panel"].forEach((t=>{"post-tab-panel"===t&&(customElements.get(a(t))||customElements.define(a(t),l))}))};export{p as PostTabPanel,c as defineCustomElement}