@swisspost/design-system-components 10.0.0-next.39 → 10.0.0-next.41

package/dist/components/post-rating.js

@@ -1,4 +1,151 @@
-import { P as PostRating$1, d as defineCustomElement$1 } from './post-rating2.js';
+import { p as proxyCustomElement, H, c as createEvent, h, a as Host } from './index.js';
+import { v as version } from './p-1KLiMO0w.js';
+import { c as checkRequiredAndType } from './p-CV7fm1rW.js';
+import './p-Cx0AiN2A.js';
+import { d as defineCustomElement$2 } from './p-fmA57Ivd.js';
+
+const postRatingCss = "@keyframes popIn{from{transform:scale(0.9);opacity:0;transition-property:transform,opacity,overlay,display;transition-behavior:allow-discrete;transition-duration:var(--post-transition-duration, 0.35s);transition-timing-function:linear(0, 0.007, 0.029 2.2%, 0.118 4.7%, 0.625 14.4%, 0.826 19%, 0.902, 0.962, 1.008 26.1%, 1.041 28.7%, 1.064 32.1%, 1.07 36%, 1.061 40.5%, 1.015 53.4%, 0.999 61.6%, 0.995 71.2%, 1)}to{opacity:1;transform:scale(1)}}: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 H {
+    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");
+        this.postChange = createEvent(this, "postChange");
+        this.hasChanged = false;
+        /**
+         * Defines a hidden label for the component.
+         */
+        this.label = 'Rating';
+        /**
+         * 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: '588c5d3c4600faa939cab4b673e27d08182323da', "data-version": version }, h("div", { key: '8fced4724505cdc2f3fb3160cf276ed1280b5431', 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} out of ${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: "2062", class: "stroke" }), h("post-icon", { name: "2574", 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": [1],
+        "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;
+    } });
+}
+defineCustomElement$1();
 
 const PostRating = PostRating$1;
 const defineCustomElement = defineCustomElement$1;

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

@@ -1,4 +1,51 @@
-import { P as PostTabHeader$1, d as defineCustomElement$1 } from './post-tab-header2.js';
+import { p as proxyCustomElement, H, h, a as Host } from './index.js';
+import { v as version } from './p-1KLiMO0w.js';
+import { c as checkRequiredAndType } from './p-CV7fm1rW.js';
+import './p-Cx0AiN2A.js';
+import { n as nanoid } from './p-BLchVpF6.js';
+
+const postTabHeaderCss = ".tab-title[role=tab]{display:inline-block;cursor:pointer;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);outline-color:currentColor;opacity:.7;color:#000;text-decoration:none;background-color:rgba(0,0,0,0)}.tab-title[role=tab]:focus{background-color:unset;color:#000}.tab-title[role=tab]:hover{opacity:1;background-color:rgba(0,0,0,.6);color:#fff}.tab-title[role=tab]:focus-visible{outline:rgba(0,0,0,0);opacity:1;background-color:rgba(0,0,0,.6);color:#fff;box-shadow:none}.tab-title[role=tab]: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}.tab-title[role=tab].active{z-index:1;border-right-color:#ccc;border-left-color:#ccc;opacity:1;background-color:#fff;color:#000;font-weight:700}.tab-title[role=tab].active::before{content:\"\";display:block;position:absolute;top:0;right:-1px;left:-1px;height:var(--post-core-dimension-4);background-color:#fc0}:where(.bg-dark,.bg-black,.bg-primary,.bg-secondary,.bg-success,.bg-error) .tab-title[role=tab]:hover{background-color:rgba(255,255,255,.2)}:where(.bg-dark,.bg-black,.bg-primary,.bg-secondary,.bg-success,.bg-error) .tab-title[role=tab]: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[role=tab]{opacity:1;border-left-color:Canvas;border-right-color:Canvas;color:LinkText}.tab-title[role=tab]:hover,.tab-title[role=tab]:focus,.tab-title[role=tab]:focus-within,.tab-title[role=tab]:focus-visible{outline:var(--post-core-dimension-2) solid Highlight;outline-offset:calc(var(--post-core-dimension-4)*-1)}.tab-title[role=tab].active{border-left-color:ButtonText;border-right-color:ButtonText;color:Highlight}.tab-title[role=tab].active::before{background-color:Highlight}}@keyframes popIn{from{transform:scale(0.9);opacity:0;transition-property:transform,opacity,overlay,display;transition-behavior:allow-discrete;transition-duration:var(--post-transition-duration, 0.35s);transition-timing-function:linear(0, 0.007, 0.029 2.2%, 0.118 4.7%, 0.625 14.4%, 0.826 19%, 0.902, 0.962, 1.008 26.1%, 1.041 28.7%, 1.064 32.1%, 1.07 36%, 1.061 40.5%, 1.015 53.4%, 0.999 61.6%, 0.995 71.2%, 1)}to{opacity:1;transform:scale(1)}}:host{display:block}.tab-title{padding:0;overflow:visible;border:0;background:none;color:var(--post-scheme-color-interactive-button-secondary-enabled-fg);font:inherit;-webkit-user-select:none;user-select:none;appearance:button}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.tab-title{background-color:ButtonFace !important}.tab-title:hover{background-color:Highlight !important}}";
+
+const PostTabHeader$1 = /*@__PURE__*/ proxyCustomElement(class PostTabHeader extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+    }
+    validateFor() {
+        checkRequiredAndType(this, 'panel', 'string');
+    }
+    componentWillLoad() {
+        this.tabId = `tab-${this.host.id || nanoid(6)}`;
+    }
+    render() {
+        return (h(Host, { key: 'd5f6cd0ceb819b475ec49f8ea66e6b4b25f04f8e', id: this.tabId, role: "tab", "data-version": version, "aria-selected": "false", tabindex: "-1", class: "tab-title", slot: "tabs" }, h("slot", { key: '8a87fef31572674981dab80e56e6b20163b448ae' })));
+    }
+    get host() { return this; }
+    static get watchers() { return {
+        "panel": ["validateFor"]
+    }; }
+    static get style() { return postTabHeaderCss; }
+}, [1, "post-tab-header", {
+        "panel": [513],
+        "tabId": [32]
+    }, undefined, {
+        "panel": ["validateFor"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["post-tab-header"];
+    components.forEach(tagName => { switch (tagName) {
+        case "post-tab-header":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, PostTabHeader$1);
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
 
 const PostTabHeader = PostTabHeader$1;
 const defineCustomElement = defineCustomElement$1;

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

@@ -1,4 +1,53 @@
-import { P as PostTabPanel$1, d as defineCustomElement$1 } from './post-tab-panel2.js';
+import { p as proxyCustomElement, H, h, a as Host } from './index.js';
+import { v as version } from './p-1KLiMO0w.js';
+import { n as nanoid } from './p-BLchVpF6.js';
+import { c as checkRequiredAndType } from './p-CV7fm1rW.js';
+import './p-Cx0AiN2A.js';
+
+const postTabPanelCss = ":host{display:none}";
+
+const PostTabPanel$1 = /*@__PURE__*/ proxyCustomElement(class PostTabPanel extends H {
+    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: '609dd2b8bf26e58e92a1dbc827e4479ac416d95b', "data-version": version, id: this.panelId, role: "tabpanel" }, h("slot", { key: '121538878e0298f1f16f6e20eeb15d5da8a5ba9c' })));
+    }
+    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;
+    } });
+}
+defineCustomElement$1();
 
 const PostTabPanel = PostTabPanel$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/post-tabs.js

@@ -1,4 +1,189 @@
-import { P as PostTabs$1, d as defineCustomElement$1 } from './post-tabs2.js';
+import { p as proxyCustomElement, H, c as createEvent, h, a as Host } from './index.js';
+import { v as version } from './p-1KLiMO0w.js';
+import { f as fadeOut, a as fadeIn } from './p-SbIC4aZX.js';
+import './p-Cx0AiN2A.js';
+
+/**
+ * Invoke the `componentOnReady` method if it is available, simulate it otherwise
+ * @see https://stenciljs.com/docs/api#componentonready
+ */
+function componentOnReady(el) {
+    if (typeof el.componentOnReady === 'function') {
+        return el.componentOnReady();
+    }
+    else {
+        return new Promise(resolve => customOnReady(() => {
+            resolve(el);
+        }));
+    }
+}
+function customOnReady(callback) {
+    if (typeof requestAnimationFrame === 'function') {
+        return requestAnimationFrame(callback);
+    }
+    return setTimeout(callback);
+}
+
+const postTabsCss = ".tabs-wrapper{position:relative;padding-top:1rem;border:0;background-color:rgba(0,0,0,.02)}.tabs-wrapper::after{content:\"\";position:absolute;bottom:0;width:100%;height:1px;background-color:#ccc}.tabs-wrapper .tabs{background-color:rgba(0,0,0,0) !important}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.tabs-wrapper::after{background-color:ButtonBorder}}.tabs{display:flex;flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;white-space:nowrap;margin-block:0;padding-inline-start:0;list-style:none}.tabs::after{content:\"\";display:block;flex:1 0 auto;width:1rem}.tab-content{padding-top:1rem}:host{display:block}";
+
+const PostTabs$1 = /*@__PURE__*/ proxyCustomElement(class PostTabs extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.postChange = createEvent(this, "postChange");
+        this.isLoaded = false;
+    }
+    get tabs() {
+        return Array.from(this.host.querySelectorAll('post-tab-header')).filter(tab => tab.closest('post-tabs') === this.host);
+    }
+    componentDidLoad() {
+        this.moveMisplacedTabs();
+        this.enableTabs();
+        const initiallyActivePanel = this.activePanel || this.tabs[0]?.panel;
+        void this.show(initiallyActivePanel);
+        this.isLoaded = true;
+    }
+    /**
+     * Shows the panel with the given name and selects its associated tab.
+     * Any other panel that was previously shown becomes hidden and its associated tab is unselected.
+     */
+    async show(panelName) {
+        // do nothing if the tab is already active
+        if (panelName === this.activeTab?.panel) {
+            return;
+        }
+        const previousTab = this.activeTab;
+        const newTab = this.host.querySelector(`post-tab-header[panel=${panelName}]`);
+        this.activateTab(newTab);
+        // if a panel is currently being displayed, remove it from the view and complete the associated animation
+        if (this.showing) {
+            this.showing.effect['target'].style.display = 'none';
+            this.showing.finish();
+        }
+        // hide the currently visible panel only if no other animation is running
+        if (previousTab && !this.showing && !this.hiding)
+            this.hidePanel(previousTab.panel);
+        // wait for any hiding animation to complete before showing the selected tab
+        if (this.hiding)
+            await this.hiding.finished;
+        this.showSelectedPanel();
+        // wait for any display animation to complete for the returned promise to fully resolve
+        if (this.showing)
+            await this.showing.finished;
+        if (this.isLoaded)
+            this.postChange.emit(this.activeTab.panel);
+    }
+    moveMisplacedTabs() {
+        if (!this.tabs)
+            return;
+        this.tabs.forEach(tab => {
+            if (tab.getAttribute('slot') === 'tabs')
+                return;
+            tab.setAttribute('slot', 'tabs');
+        });
+    }
+    enableTabs() {
+        if (!this.tabs)
+            return;
+        this.tabs.forEach(async (tab) => {
+            await componentOnReady(tab);
+            // if the tab has an "aria-controls" attribute it was already linked to its panel: do nothing
+            if (tab.getAttribute('aria-controls'))
+                return;
+            const tabPanel = this.getPanel(tab.panel);
+            tab.setAttribute('aria-controls', tabPanel.id);
+            tabPanel.setAttribute('aria-labelledby', tab.id);
+            tab.addEventListener('click', () => {
+                void this.show(tab.panel);
+            });
+            tab.addEventListener('keydown', (e) => {
+                if (e.key === 'Enter' || e.key === ' ') {
+                    e.preventDefault();
+                    void this.show(tab.panel);
+                }
+            });
+            tab.addEventListener('keydown', (e) => {
+                if (e.key === 'ArrowRight' || e.key === 'ArrowLeft')
+                    this.navigateTabs(tab, e.key);
+            });
+        });
+        // if the currently active tab was removed from the DOM then select the first one
+        if (this.activeTab && !this.activeTab.isConnected) {
+            void this.show(this.tabs[0]?.panel);
+        }
+    }
+    activateTab(tab) {
+        if (this.activeTab) {
+            this.activeTab.setAttribute('aria-selected', 'false');
+            this.activeTab.setAttribute('tabindex', '-1');
+            this.activeTab.classList.remove('active');
+        }
+        tab.setAttribute('aria-selected', 'true');
+        tab.setAttribute('tabindex', '0');
+        tab.classList.add('active');
+        this.activeTab = tab;
+    }
+    hidePanel(panelName) {
+        const previousPanel = this.getPanel(panelName);
+        if (!previousPanel)
+            return;
+        this.hiding = fadeOut(previousPanel);
+        this.hiding.onfinish = () => {
+            previousPanel.style.display = 'none';
+            this.hiding = null;
+        };
+    }
+    showSelectedPanel() {
+        const panel = this.getPanel(this.activeTab.panel);
+        panel.style.display = 'block';
+        // prevent the initially selected panel from fading in
+        if (!this.isLoaded)
+            return;
+        this.showing = fadeIn(panel);
+        this.showing.onfinish = () => {
+            this.showing = null;
+        };
+    }
+    getPanel(name) {
+        return this.host.querySelector(`post-tab-panel[name=${name}]`);
+    }
+    navigateTabs(tab, key) {
+        const activeTabIndex = Array.from(this.tabs).indexOf(tab);
+        let nextTab;
+        if (key === 'ArrowRight') {
+            nextTab = this.tabs[activeTabIndex + 1] || this.tabs[0];
+        }
+        else {
+            nextTab = this.tabs[activeTabIndex - 1] || this.tabs[this.tabs.length - 1];
+        }
+        if (!nextTab)
+            return;
+        nextTab.focus();
+    }
+    render() {
+        return (h(Host, { key: 'd7beaed26b8f79f7a8641bf5524236b8722a56d4', "data-version": version }, h("div", { key: '75449ea13ad30ca5bb402354cdf2eee51a6c8096', class: "tabs-wrapper", part: "tabs" }, h("div", { key: '4eeafd45c7bac47ff16ceffd2643adaabdd01234', class: "tabs", role: "tablist" }, h("slot", { key: 'e3299d68dc943c2b0bf2ff1b48d54de65f00eb94', name: "tabs", onSlotchange: () => this.enableTabs() }))), h("div", { key: '7bb1bf2984063cba9c7170e92cecbf4d4a4a21d9', class: "tab-content", part: "content" }, h("slot", { key: '8abb196b98d41eaa08c08598efed698533f215ec', onSlotchange: () => this.moveMisplacedTabs() }))));
+    }
+    get host() { return this; }
+    static get style() { return postTabsCss; }
+}, [1, "post-tabs", {
+        "activePanel": [1, "active-panel"],
+        "show": [64]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["post-tabs"];
+    components.forEach(tagName => { switch (tagName) {
+        case "post-tabs":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, PostTabs$1);
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
 
 const PostTabs = PostTabs$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/post-tag.js

@@ -1,4 +1,85 @@
-import { P as PostTag$1, d as defineCustomElement$1 } from './post-tag2.js';
+import { p as proxyCustomElement, H, h, a as Host } from './index.js';
+import { v as version } from './p-1KLiMO0w.js';
+import { d as checkEmptyOrOneOf, e as checkEmptyOrType } from './p-CV7fm1rW.js';
+import './p-Cx0AiN2A.js';
+import { d as defineCustomElement$2 } from './p-fmA57Ivd.js';
+
+const postTagCss = "@keyframes popIn{from{transform:scale(0.9);opacity:0;transition-property:transform,opacity,overlay,display;transition-behavior:allow-discrete;transition-duration:var(--post-transition-duration, 0.35s);transition-timing-function:linear(0, 0.007, 0.029 2.2%, 0.118 4.7%, 0.625 14.4%, 0.826 19%, 0.902, 0.962, 1.008 26.1%, 1.041 28.7%, 1.064 32.1%, 1.07 36%, 1.061 40.5%, 1.015 53.4%, 0.999 61.6%, 0.995 71.2%, 1)}to{opacity:1;transform:scale(1)}}.tag,.tag:where(:has(:not(pre))){--post-tag-bg:hsl(0, 0%, 90%);--post-tag-fg:#000;display:inline-flex;align-items:center;gap:var(--post-core-dimension-4);padding:0 var(--post-core-dimension-8);max-width:100%;background-color:var(--post-tag-bg);border:var(--post-core-dimension-1) solid rgba(0,0,0,0);border-radius:var(--post-core-dimension-4);font-size:1rem;line-height:calc(var(--post-core-dimension-32) - var(--post-core-dimension-1)*2);white-space:nowrap;color:var(--post-tag-fg)}.tag post-icon,.tag:where(:has(:not(pre))) post-icon{flex:0 0 auto;width:1.25rem;height:1.25rem}.tag .tag-text,.tag:where(:has(:not(pre))) .tag-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tag .tag-text svg,.tag .tag-text img,.tag:where(:has(:not(pre))) .tag-text svg,.tag:where(:has(:not(pre))) .tag-text img{display:inline-block;height:1.25rem !important;vertical-align:text-top}.tag.tag-sm,.tag:where(:has(:not(pre))).tag-sm{line-height:var(--post-core-dimension-24)}.tag.tag-sm .tag-icon,.tag:where(:has(:not(pre))).tag-sm .tag-icon{width:1rem;height:1rem}.tag.tag-white,.tag:where(:has(:not(pre))).tag-white{--post-tag-bg:#fff;--post-tag-fg:#000}.tag.tag-yellow,.tag:where(:has(:not(pre))).tag-yellow{--post-tag-bg:#fc0;--post-tag-fg:#000}.tag.tag-success,.tag:where(:has(:not(pre))).tag-success{--post-tag-bg:#2c871d;--post-tag-fg:#fff}.tag.tag-warning,.tag:where(:has(:not(pre))).tag-warning{--post-tag-bg:#f49e00;--post-tag-fg:#000}.tag.tag-danger,.tag:where(:has(:not(pre))).tag-danger{--post-tag-bg:#a51728;--post-tag-fg:#fff}.tag.tag-info,.tag:where(:has(:not(pre))).tag-info{--post-tag-bg:#cce4ee;--post-tag-fg:#000}.tag.tag-white,.tag:where(:has(:not(pre))).tag-white{border-color:#000}pre .tag,pre .tag:where(:has(:not(pre))){display:inline;padding:initial;max-width:initial;background:initial;border:initial;border-radius:initial;font-size:inherit;line-height:inherit;white-space:unset}*,*:before,*:after{box-sizing:border-box}.tag-text ::slotted(svg),.tag-text ::slotted(img){display:inline-block !important;height:1.25rem !important;vertical-align:text-top !important}";
+
+const PostTag$1 = /*@__PURE__*/ proxyCustomElement(class PostTag extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.setClasses = this.setClasses.bind(this);
+    }
+    variantChanged() {
+        checkEmptyOrOneOf(this, 'variant', ['white', 'info', 'success', 'error', 'warning', 'yellow']);
+        this.setClasses();
+    }
+    sizeChanged() {
+        checkEmptyOrOneOf(this, 'size', ['sm']);
+        this.setClasses();
+    }
+    validateName() {
+        checkEmptyOrType(this, 'icon', 'string');
+    }
+    setClasses() {
+        this.classes = [
+            'tag',
+            this.size ? `tag-${this.size}` : null,
+            this.variant ? `tag-${this.variant}` : null,
+        ]
+            .filter(c => c !== null)
+            .join(' ');
+    }
+    componentWillLoad() {
+        this.validateName();
+        this.variantChanged();
+        this.sizeChanged();
+    }
+    connectedCallback() {
+        this.setClasses();
+    }
+    render() {
+        return (h(Host, { key: '9e30e11663e54fb6bc389cfe7b060cace37c304e', "data-version": version }, h("div", { key: '09b0ea2d6df0631f00d78a6978d4aad4b429f39e', class: this.classes }, this.icon ? h("post-icon", { name: this.icon }) : null, h("div", { key: 'a041daf35564806f3bff974d04536972b1564a35', class: "tag-text" }, h("slot", { key: '97fb0e540d631062268b9080db3eb5e4aacf0242' })))));
+    }
+    get host() { return this; }
+    static get watchers() { return {
+        "variant": ["variantChanged"],
+        "size": ["sizeChanged"],
+        "icon": ["validateName"]
+    }; }
+    static get style() { return postTagCss; }
+}, [1, "post-tag", {
+        "variant": [1],
+        "size": [1],
+        "icon": [1],
+        "classes": [32]
+    }, undefined, {
+        "variant": ["variantChanged"],
+        "size": ["sizeChanged"],
+        "icon": ["validateName"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["post-tag", "post-icon"];
+    components.forEach(tagName => { switch (tagName) {
+        case "post-tag":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, PostTag$1);
+            }
+            break;
+        case "post-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
 
 const PostTag = PostTag$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/post-togglebutton.js

@@ -1,4 +1,55 @@
-import { P as PostTogglebutton$1, d as defineCustomElement$1 } from './post-togglebutton2.js';
+import { p as proxyCustomElement, H, h, a as Host } from './index.js';
+import { v as version } from './p-1KLiMO0w.js';
+
+const postTogglebuttonCss = ":host{cursor:pointer;outline-offset:var(--post-device-spacing-padding-2) !important;outline:var(--post-scheme-color-interactive-focus-stroke) none var(--post-device-border-width-focus) !important}:host(:focus-visible){outline-style:var(--post-core-border-style-solid) !important}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:host(:focus-visible){outline-color:Highlight !important}}:host([aria-pressed=true]) ::slotted([data-showwhen=untoggled]){display:none}:host([aria-pressed=false]) ::slotted([data-showwhen=toggled]){display:none}";
+
+const PostTogglebutton$1 = /*@__PURE__*/ proxyCustomElement(class PostTogglebutton extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        /**
+         * If `true`, the button is in the "on" state, otherwise it is in the "off" state.
+         */
+        this.toggled = false;
+        this.handleClick = () => {
+            this.toggled = !this.toggled;
+        };
+        this.handleKeydown = (event) => {
+            // perform a click when enter or spaced are pressed to mimic the button behavior
+            if (event.key === 'Enter' || event.key === ' ') {
+                event.preventDefault(); // prevents the page from scrolling when space is pressed
+                this.host.click();
+            }
+        };
+    }
+    componentWillLoad() {
+        // add event listener to not override listener that might be set on the host
+        this.host.addEventListener('click', () => this.handleClick());
+        this.host.addEventListener('keydown', (e) => this.handleKeydown(e));
+    }
+    render() {
+        return (h(Host, { key: '1025fb988460e85c92e49241889363e1bcc840eb', "data-version": version, role: "button", tabindex: "0", "aria-pressed": this.toggled.toString() }, h("slot", { key: '20d3eb9415685fb9a00a5613474c432f6638692e' })));
+    }
+    get host() { return this; }
+    static get style() { return postTogglebuttonCss; }
+}, [1, "post-togglebutton", {
+        "toggled": [1028]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["post-togglebutton"];
+    components.forEach(tagName => { switch (tagName) {
+        case "post-togglebutton":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, PostTogglebutton$1);
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
 
 const PostTogglebutton = PostTogglebutton$1;
 const defineCustomElement = defineCustomElement$1;