@swisspost/design-system-components 10.0.0-next.66 → 10.0.0-next.67

package/dist/collection/components/post-language-menu-item/post-language-menu-item.css

@@ -1 +1 @@
-post-language-menu-item{display:inline-block}post-language-menu-item button{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){post-language-menu-item button{background-color:ButtonFace !important}post-language-menu-item button:hover{background-color:Highlight !important}}post-language-menu-item button .visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}post-language-menu-item a{color:var(--post-current-fg);text-decoration:none}post-language-menu-item :is(a,button){cursor:pointer;display:flex;align-items:center;justify-content:center;width:100%;height:100%;text-transform:uppercase}post-language-menu-item :is(a,button){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}post-language-menu-item :is(a,button):is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-style:var(--post-core-border-style-solid) !important;border-radius:4px}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){post-language-menu-item :is(a,button):is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){post-language-menu-item :is(a,button):is(:focus-visible,:focus-within,.pretend-focus){outline-style:var(--post-core-border-style-solid) !important;border-radius:4px}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){post-language-menu-item :is(a,button):is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}post-language-menu-item:where([variant=list]) :is(a,button){padding-inline:0;width:40px;height:40px;border-radius:2px}post-language-menu-item:where([variant=list]) :is(a,button):hover{color:#504f4b}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){post-language-menu-item:where([variant=list]) :is(a,button){border:1px solid ButtonBorder;color:ButtonText}}post-language-menu-item:where([variant=list])[active]:not([active=false]) :is(a,button){background-color:#050400 !important;color:#fff;pointer-events:none}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){post-language-menu-item:where([variant=list])[active]:not([active=false]) :is(a,button){background-color:Highlight !important;color:HighlightText}}post-language-menu-item:where([variant=menu]){min-width:72px}post-language-menu-item:where([variant=menu])[active]:not([active=false]){display:none}post-language-menu-item:where([variant=menu]) :is(a,button){padding-block:13px;padding-inline:16px;box-sizing:border-box;justify-content:flex-start;position:relative;border-radius:0}post-language-menu-item:where([variant=menu]) :is(a,button):hover{color:#fff;background-color:#504f4b}post-language-menu-item:where([variant=menu]):first-child :is(a,button){border-start-start-radius:4px;border-start-end-radius:4px}post-language-menu-item:where([variant=menu]):last-child :is(a,button){border-end-start-radius:4px;border-end-end-radius:4px}
+post-language-menu-item :is(a,button){text-transform:uppercase}post-language-menu-item:where([variant=menu]){min-width:72px}post-language-menu-item:where([variant=list]) button{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){post-language-menu-item:where([variant=list]) button{background-color:ButtonFace !important}post-language-menu-item:where([variant=list]) button:hover{background-color:Highlight !important}}post-language-menu-item:where([variant=list]) a{text-decoration:none;display:inline-flex;align-items:center;justify-content:center}post-language-menu-item:where([variant=list]) :is(a,button){width:40px;height:40px;border-radius:2px;border-color:var(--post-scheme-color-interactive-button-tertiary-enabled-stroke);background-color:var(--post-scheme-color-interactive-button-tertiary-enabled-bg);color:var(--post-scheme-color-interactive-button-tertiary-enabled-fg)}post-language-menu-item:where([variant=list]) :is(a,button):hover{border-color:var(--post-scheme-color-interactive-button-tertiary-hover-stroke);background-color:var(--post-scheme-color-interactive-button-tertiary-hover-bg);color:var(--post-scheme-color-interactive-button-tertiary-hover-fg)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){post-language-menu-item:where([variant=list]) :is(a,button){border:1px solid ButtonBorder;color:ButtonText}}post-language-menu-item[active]:not([active=false]):where([variant=menu]){display:none}post-language-menu-item[active]:not([active=false]):where([variant=list]) :is(a,button){border-color:var(--post-scheme-color-interactive-button-primary-enabled-stroke);background-color:var(--post-scheme-color-interactive-button-primary-enabled-bg);color:var(--post-scheme-color-interactive-button-primary-enabled-fg);cursor:default}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){post-language-menu-item[active]:not([active=false]):where([variant=list]) :is(a,button){background-color:Highlight !important;color:HighlightText}}post-language-menu-item .visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}

package/dist/collection/components/post-language-menu-item/post-language-menu-item.js

@@ -49,7 +49,8 @@ export class PostLanguageMenuItem {
                 this.emitChange();
             }
         };
-        return (h(Host, { key: '7ecba6c01b556cf630d8f3a4f3b64e97a11e8abb', "data-version": version, role: this.variant === 'list' ? 'listitem' : undefined }, this.url ? (h("a", { "aria-current": this.active ? 'page' : undefined, href: this.url, hrefLang: lang, lang: lang, onClick: () => this.emitChange(), onKeyDown: emitOnKeyDown }, h("slot", null), h("span", { class: "visually-hidden" }, this.name))) : (h("button", { "aria-current": this.active ? 'true' : undefined, lang: lang, onClick: () => this.emitChange(), onKeyDown: emitOnKeyDown }, h("slot", null), h("span", { class: "visually-hidden" }, this.name)))));
+        const interactiveElement = this.url ? (h("a", { "aria-current": this.active ? 'page' : undefined, href: this.url, hrefLang: lang, lang: lang, onClick: () => this.emitChange(), onKeyDown: emitOnKeyDown }, h("slot", null), h("span", { class: "visually-hidden" }, this.name))) : (h("button", { "aria-current": this.active ? 'true' : undefined, lang: lang, onClick: () => this.emitChange(), onKeyDown: emitOnKeyDown }, h("slot", null), h("span", { class: "visually-hidden" }, this.name)));
+        return this.variant === 'list' ? (h(Host, { "data-version": version, role: "listitem" }, interactiveElement)) : (h(Host, { "data-version": version }, h("post-menu-item", null, interactiveElement)));
     }
     static get is() { return "post-language-menu-item"; }
     static get originalStyleUrls() {

package/dist/collection/components/post-linkarea/post-linkarea.js

@@ -55,7 +55,7 @@ export class PostLinkarea {
         }
     }
     render() {
-        return (h(Host, { key: 'b79b314635a4cb302d862006d07ab5f059298382', "data-version": version, onClick: (e) => this.dispatchClick(e) }, h("slot", { key: '4e9a1ee60d499f6dd80819e68f6536b3964d3389' })));
+        return (h(Host, { key: 'cb2563465ebe024e8e98539c27c7a8d7084229d3', "data-version": version, onClick: (e) => this.dispatchClick(e) }, h("slot", { key: '68fc1468da418e4ed38e89cbf7ef932f819993dd' })));
     }
     static get is() { return "post-linkarea"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/post-listbox/post-listbox.css

@@ -0,0 +1 @@
+post-popovercontainer{border-radius:4px;overflow:hidden;box-shadow:var(--post-device-elevation-300)}div[role=listbox]{max-height:384px;overflow:auto;display:flex;flex-direction:column}::slotted([slot=blank-slate]){display:block;padding:.75rem;color:#666}

package/dist/collection/components/post-listbox/post-listbox.js

@@ -0,0 +1,293 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+        r = Reflect.decorate(decorators, target, key, desc);
+    else
+        for (var i = decorators.length - 1; i >= 0; i--)
+            if (d = decorators[i])
+                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { h, Host } from "@stencil/core";
+import { version } from "../../../../package";
+import { EventFrom } from "../../utils/index";
+export class PostListbox {
+    constructor() {
+        this.highlightedIndex = -1;
+        this.visibleOptions = [];
+        this.diacriticPattern = /[\u0300-\u036F]/u;
+        this.registerOptions = () => {
+            this.visibleOptions = this.options;
+        };
+        this.updateSelection = (value) => {
+            this.options.forEach(option => {
+                option.selected = option.value === value;
+                option.highlighted = false;
+            });
+            this.highlightedIndex = -1;
+            this.filter('');
+        };
+        this.clearActive = () => {
+            this.highlightedIndex = -1;
+            this.postOptionActive.emit(null);
+        };
+        this.normalizeText = (text) => {
+            return text.trim().normalize('NFD').replace(this.diacriticPattern, '').toLocaleLowerCase();
+        };
+        this.resetFilter = () => {
+            this.visibleOptions = this.options;
+            this.options.forEach(option => {
+                option.hidden = false;
+                option.highlighted = false;
+            });
+        };
+    }
+    get options() {
+        return Array.from(this.host.querySelectorAll('post-listbox-option'));
+    }
+    get inputElement() {
+        let autocomplete = this.host.closest('post-autocomplete');
+        if (!autocomplete) {
+            autocomplete = document.querySelector(`post-autocomplete[listbox="${this.host.id}"]`);
+        }
+        return autocomplete?.querySelector('input');
+    }
+    componentWillLoad() {
+        this.registerOptions();
+    }
+    /** Opens the listbox */
+    async show() {
+        const input = this.inputElement;
+        if (input) {
+            this.popoverContainer?.show(input);
+            this.host.role = 'listbox';
+        }
+    }
+    /** Closes the listbox */
+    async hide() {
+        this.host.removeAttribute('role');
+        this.popoverContainer?.hide();
+    }
+    /** Uses the internal default filtering mode to filter the list of options.
+     * An empty string resets the filter to it's original state. */
+    async filter(query) {
+        const normalizedQuery = this.normalizeText(query);
+        if (normalizedQuery) {
+            this.visibleOptions = this.options.filter(option => {
+                const normalizedText = this.normalizeText(option.textContent);
+                const normalizedValue = this.normalizeText(option.value);
+                const isVisible = normalizedValue.includes(normalizedQuery) || normalizedText.includes(normalizedQuery);
+                option.hidden = !isVisible;
+                return isVisible;
+            });
+        }
+        else {
+            this.resetFilter();
+        }
+        this.clearActive();
+    }
+    /** Clears the currently selected option */
+    async clearSelection() {
+        this.updateSelection();
+    }
+    /** Navigates the listbox options in the specified direction and scrolls the active option into view.*/
+    async navigate(direction) {
+        if (this.visibleOptions.length === 0)
+            return;
+        if (this.highlightedIndex >= 0) {
+            this.visibleOptions[this.highlightedIndex].highlighted = false;
+        }
+        switch (direction) {
+            case 'first':
+                this.highlightedIndex = 0;
+                break;
+            case 'last':
+                this.highlightedIndex = this.visibleOptions.length - 1;
+                break;
+            case 'up':
+                this.highlightedIndex =
+                    (this.highlightedIndex - 1 + this.visibleOptions.length) % this.visibleOptions.length;
+                break;
+            case 'down':
+                this.highlightedIndex = (this.highlightedIndex + 1) % this.visibleOptions.length;
+                break;
+        }
+        const activeOption = this.visibleOptions[this.highlightedIndex];
+        activeOption.scrollIntoView({ behavior: 'smooth', block: 'end' });
+        activeOption.highlighted = true;
+        this.postOptionActive.emit(activeOption.id);
+    }
+    /**
+     * Selects the currently highlighted option in the listbox and scrolls it into view.
+     */
+    async selectActive() {
+        if (this.highlightedIndex >= 0) {
+            const activeOption = this.visibleOptions[this.highlightedIndex];
+            this.updateSelection(activeOption.value);
+            this.host.dispatchEvent(new CustomEvent('postOptionSelected', { bubbles: true, detail: activeOption.value }));
+        }
+    }
+    optionClicked(event) {
+        this.updateSelection(event.detail);
+    }
+    render() {
+        return (h(Host, { key: 'a69ea3f635246ef33f482f3bdf5f40e3cd167846', "data-version": version }, h("post-popovercontainer", { key: '20a8d8721127c0d51d320f650ec92e4f72c9d50c', placement: "bottom-start", ref: el => (this.popoverContainer = el) }, this.visibleOptions.length === 0 ? h("slot", { name: "blank-slate" }) : h("slot", null))));
+    }
+    static get is() { return "post-listbox"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["post-listbox.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["post-listbox.css"]
+        };
+    }
+    static get events() {
+        return [{
+                "method": "postOptionActive",
+                "name": "postOptionActive",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted option id for the active option"
+                },
+                "complexType": {
+                    "original": "string | null",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "show": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Opens the listbox",
+                    "tags": []
+                }
+            },
+            "hide": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Closes the listbox",
+                    "tags": []
+                }
+            },
+            "filter": {
+                "complexType": {
+                    "signature": "(query: string) => Promise<void>",
+                    "parameters": [{
+                            "name": "query",
+                            "type": "string",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Uses the internal default filtering mode to filter the list of options.\nAn empty string resets the filter to it's original state.",
+                    "tags": []
+                }
+            },
+            "clearSelection": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Clears the currently selected option",
+                    "tags": []
+                }
+            },
+            "navigate": {
+                "complexType": {
+                    "signature": "(direction: \"up\" | \"down\" | \"first\" | \"last\") => Promise<void>",
+                    "parameters": [{
+                            "name": "direction",
+                            "type": "\"up\" | \"down\" | \"first\" | \"last\"",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Navigates the listbox options in the specified direction and scrolls the active option into view.",
+                    "tags": []
+                }
+            },
+            "selectActive": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Selects the currently highlighted option in the listbox and scrolls it into view.",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "host"; }
+    static get listeners() {
+        return [{
+                "name": "postOptionSelected",
+                "method": "optionClicked",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}
+__decorate([
+    EventFrom('post-listbox-option')
+], PostListbox.prototype, "optionClicked", null);

package/dist/collection/components/post-listbox-option/post-listbox-option.css

@@ -0,0 +1 @@
+:host{padding:12px 12px 9px 16px;background-color:#fff;cursor:pointer;user-select:none;display:flex;align-items:center;gap:8px;justify-content:space-between}:host(:hover){background-color:#f0efed}:host([data-active=true]){outline:2px solid #000;outline-offset:-4px}:host([hidden]){display:none}:host(:focus-visible){outline:2px solid #050400;outline-offset:2px}.option-content{display:flex;flex-direction:column;min-width:0}.option-description{display:none;font-size:.85em;color:#666}:host(:not(:empty)) .option-description{display:block}post-icon{width:24px;height:24px}

package/dist/collection/components/post-listbox-option/post-listbox-option.js

@@ -0,0 +1,109 @@
+import { h, Host } from "@stencil/core";
+import { version } from "../../../../package";
+export class PostListboxOption {
+    constructor() {
+        this.optionId = crypto.randomUUID();
+        /** Represents option is selected . */
+        this.selected = false;
+        /** Represents option is highlighted . */
+        this.highlighted = false;
+    }
+    render() {
+        return (h(Host, { key: 'ff0e773f8a89f9df3996a83cd2be6247c1ab5475', "data-version": version, role: "option", "aria-selected": `${this.selected}`, "data-active": this.highlighted ? 'true' : null,
+            /* Prevent focus change from triggering onblur event in post-autocomplete */
+            onPointerDown: (e) => e.preventDefault(), onClick: () => this.postOptionSelected.emit(this.value), id: `post-listbox-option-${this.optionId}` }, h("span", { key: 'cb43e8bec5f262ae25ddfdcae1b7f9979bdd6858', class: "option-content" }, this.value, h("span", { key: '5b314c41073a357185613a04a07d2020e4eab300', class: "option-description" }, h("slot", { key: 'ac1ed1be98f9a348952c0169d7ec89f8aaa99474' }))), this.selected && h("post-icon", { key: '7691085df732c0c2c5db9824587d54047017adf5', "aria-hidden": "true", name: "checkmark" })));
+    }
+    static get is() { return "post-listbox-option"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["post-listbox-option.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["post-listbox-option.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "value": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "A value string, similar to <option value=\"Value 1\">Value 1 description</option>"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "value"
+            },
+            "selected": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Represents option is selected ."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "selected",
+                "defaultValue": "false"
+            },
+            "highlighted": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Represents option is highlighted ."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "highlighted",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "postOptionSelected",
+                "name": "postOptionSelected",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires when this option was selected. Bubbles up."
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }];
+    }
+}

package/dist/collection/components/post-logo/post-logo.js

@@ -20,7 +20,7 @@ export class PostLogo {
     render() {
         const logoLink = this.url && (typeof this.url === 'string' ? this.url : this.url.href);
         const LogoTag = logoLink ? 'a' : 'span';
-        return (h(Host, { key: '1c268056329697baccc5bf65b1e66acd8531d5f3', "data-version": version }, h(LogoTag, { key: '9b73fc4922a5ea0f72d761e82136ef1111eb7e21', class: `logo ${logoLink ? 'logo-link' : ''}`, ...(logoLink ? { href: logoLink } : {}) }, h("span", { key: '4042a64056f3d22a99d6b245201be20d1afe5dc0', class: "description" }, h("slot", { key: 'eb437f087d952b4f4a961bcba0dc18eb6836c6c9', onSlotchange: () => this.checkDescription() })), h("svg", { key: 'b658e94d0e7f63d2f80245e12017f87f50a0b2c9', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 72 72", "aria-hidden": "true" }, h("g", { key: '90c0c8f64d0c9023dfa7296e68333232b9023276', id: "Logo" }, h("rect", { key: 'a1dfd6e0bcaedb485398f1896603af36e3f119dc', fill: "#ffcc00", x: "0", y: "0", width: "72", height: "72" }), h("polygon", { key: '44d5ee8e45b7b320d75530e00ab1ff8dc4b8e21c', fill: "#ff0000", points: "34,32.3 34,19 19.7,19 19.7,29.1 10,29.1 10,42.9 19.7,42.9 19.7,53 34,53 34,39.7 30.6,39.7 30.6,49.8 23.1,49.8 23.1,39.7 13.4,39.7 13.4,32.3 23.1,32.3 23.1,22.2 30.6,22.2 30.6,32.3" }), h("path", { key: '788524d12213fdfe0d21712b14d72e30d0195b4d', d: "M53.56234,31.10526c0,2.41272-1.99154,4.29475-4.51723,4.29475H45.2v-8.3h3.84511C51.66802,27.1,53.56234,28.78889,53.56234,31.10526z M50.69666,19H36v34h9.2V42.9h5.49666c6.75131,0,11.9971-5.15137,11.9971-11.8057C62.69376,24.39136,57.35099,19,50.69666,19z" }))))));
+        return (h(Host, { key: '4c2a5854fc2499198b289181136cbd0a2fd9c1e1', "data-version": version }, h(LogoTag, { key: '4696e7329e8821e010f8cf0de367551f9fec448c', class: `logo ${logoLink ? 'logo-link' : ''}`, ...(logoLink ? { href: logoLink } : {}) }, h("span", { key: 'd4bec68539d393a5eced24f0b0ab521f40b13b4b', class: "description" }, h("slot", { key: '43b6f18561aec0b83cde540b4a6370fda2717cc2', onSlotchange: () => this.checkDescription() })), h("svg", { key: '9ee91a5dc0e1553bd54eb90bce0036f59f7ee62a', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 72 72", "aria-hidden": "true" }, h("g", { key: '6accd8ec83c793b4b5ae0412b21ea97c4db1a05f', id: "Logo" }, h("rect", { key: '5eee4130c5c766f46769b3fe00bab45f2c4a0a51', fill: "#ffcc00", x: "0", y: "0", width: "72", height: "72" }), h("polygon", { key: '4f33978c01fe70f6b4b9ede345624378ec488b25', fill: "#ff0000", points: "34,32.3 34,19 19.7,19 19.7,29.1 10,29.1 10,42.9 19.7,42.9 19.7,53 34,53 34,39.7 30.6,39.7 30.6,49.8 23.1,49.8 23.1,39.7 13.4,39.7 13.4,32.3 23.1,32.3 23.1,22.2 30.6,22.2 30.6,32.3" }), h("path", { key: 'c680032facb04b9869778712dcb50b0bb166922c', d: "M53.56234,31.10526c0,2.41272-1.99154,4.29475-4.51723,4.29475H45.2v-8.3h3.84511C51.66802,27.1,53.56234,28.78889,53.56234,31.10526z M50.69666,19H36v34h9.2V42.9h5.49666c6.75131,0,11.9971-5.15137,11.9971-11.8057C62.69376,24.39136,57.35099,19,50.69666,19z" }))))));
     }
     static get is() { return "post-logo"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/post-mainnavigation/post-mainnavigation.js

@@ -123,7 +123,7 @@ export class PostMainnavigation {
         }, NAVBAR_DISABLE_DURATION);
     }
     render() {
-        return (h(Host, { key: '9ee79a508b8bf05563607503aab7fc70869485e5', version: version, class: this.canScroll ? 'scrollable' : '' }, h("div", { key: '3b60c4b65b9f8911c772667505ca089a7cbc2845', "aria-hidden": "true", class: { 'scroll-control scroll-left': true, 'd-none': !this.canScrollLeft }, onMouseDown: e => this.handleScrollButtonClick(e, 'left') }, h("post-icon", { key: '3cb3512c29db6171f5690507154bb1b95ce3f2e8', "aria-hidden": "true", name: "chevronleft" })), h("nav", { key: 'e9f322ff43e8a2e69e05c5146ce72edb8ad2ef04', ref: el => (this.navbar = el), "aria-label": this.textMain }, h("slot", { key: '15520e7e56d75123986282b5612b8675d53555f7' })), h("div", { key: '5f80c2075cc37828b8fd354406dd5759975914f1', "aria-hidden": "true", class: { 'scroll-control scroll-right': true, 'd-none': !this.canScrollRight }, onMouseDown: e => this.handleScrollButtonClick(e, 'right') }, h("post-icon", { key: '76f2c2e7d7cbe5f36ec4eba76b45b6122985a91a', "aria-hidden": "true", name: "chevronright" }))));
+        return (h(Host, { key: '7bdd80e16b223324417ffbacdcadcb842c559d26', version: version, class: this.canScroll ? 'scrollable' : '' }, h("div", { key: '087cfbe84c8970ab26b394b6e96298cbc0df71ec', "aria-hidden": "true", class: { 'scroll-control scroll-left': true, 'd-none': !this.canScrollLeft }, onMouseDown: e => this.handleScrollButtonClick(e, 'left') }, h("post-icon", { key: '6d4cbd054346c8ac28ad54ad00887d042e41f78d', "aria-hidden": "true", name: "chevronleft" })), h("nav", { key: 'db4cb2f45e19d458cede13f9b62dbcb5836f6127', ref: el => (this.navbar = el), "aria-label": this.textMain }, h("slot", { key: '00fbab4d3e498a0943c9298801dd9629e34a0eea' })), h("div", { key: '678872aef2d26f52f8b838e47ef7a631e71cb7a6', "aria-hidden": "true", class: { 'scroll-control scroll-right': true, 'd-none': !this.canScrollRight }, onMouseDown: e => this.handleScrollButtonClick(e, 'right') }, h("post-icon", { key: '233bebc886e69c27651ebaf2a678fa6d64f1f7cf', "aria-hidden": "true", name: "chevronright" }))));
     }
     static get is() { return "post-mainnavigation"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/post-megadropdown/post-megadropdown.js

@@ -61,7 +61,7 @@ export class PostMegadropdown {
         this.handleClickOutside = this.handleClickOutside.bind(this);
     }
     connectedCallback() {
-        window.addEventListener('postBreakpoint:device', this.breakpointChange.bind(this));
+        globalThis.addEventListener('postBreakpoint:device', this.breakpointChange.bind(this));
     }
     componentDidRender() {
         this.getFocusableElements();
@@ -74,7 +74,7 @@ export class PostMegadropdown {
         this.handleAriaCurrentChange([]);
     }
     disconnectedCallback() {
-        window.removeEventListener('postBreakpoint:device', this.breakpointChange.bind(this));
+        globalThis.removeEventListener('postBreakpoint:device', this.breakpointChange.bind(this));
         if (PostMegadropdown.activeDropdown === this)
             PostMegadropdown.activeDropdown = null;
         this.removeListeners();
@@ -222,7 +222,7 @@ export class PostMegadropdown {
             ...getFocusableChildren(this.host.shadowRoot),
         ];
         this.firstFocusableEl = focusableElements[0];
-        this.lastFocusableEl = focusableElements[focusableElements.length - 1];
+        this.lastFocusableEl = focusableElements.at(-1);
     }
     // Loop through the focusable children
     keyboardHandler(e) {
@@ -277,7 +277,7 @@ export class PostMegadropdown {
      * and sets the trigger as active accordingly.
      */
     handleAriaCurrentChange(mutations) {
-        if (!mutations.length)
+        if (mutations.length === 0)
             return;
         const hasCurrentPage = mutations.some(m => m.target instanceof HTMLElement && m.target.getAttribute('aria-current') === 'page');
         this.setTriggerActive(hasCurrentPage);
@@ -293,7 +293,7 @@ export class PostMegadropdown {
     }
     render() {
         const containerStyle = this.isVisible ? {} : { display: 'none' };
-        return (h(Host, { key: '311243d7fb04cfc89c474f78c9bd628036045232', version: version }, h("div", { key: 'f8cec95ea6689a3e615112f5814c3e7f824e64b3', ref: el => (this.animatedContainer = el), class: "megadropdown", style: containerStyle }, h("div", { key: 'af837711218deb8e08b4574dd53a95cf0755bf47', class: "section" }, this.device !== 'desktop' && this.megadropdownTitle && (h("p", { key: '64b1da48147fe48f679d74e778e2feb4c0318c44', class: "megadropdown-title" }, this.megadropdownTitle)), h("div", { key: '4e5538b2c55bf2a9d6a9e524c22d19e4336bc384', class: "megadropdown-content" }, h("slot", { key: '9e44333a25edb40de80fee99e336fd87eb6e5b9a' })), this.device === 'desktop' ? (h("post-closebutton", { onClick: () => this.hide(true), class: "close-button", size: "small", placement: "manual" }, this.textClose)) : (h("button", { onClick: () => this.hide(true), class: "back-button" }, h("post-icon", { name: "arrowleft" }), this.textBack))))));
+        return (h(Host, { key: 'f3794c85cf7972c3a30145726e07675d88875ad8', version: version }, h("div", { key: '078a4489e17db573136caa9212a0bf1010c328ef', ref: el => (this.animatedContainer = el), class: "megadropdown", style: containerStyle }, h("div", { key: 'fb51ea5e7a38a546ac54d73e7a0804c9e2f3db79', class: "section" }, this.device !== 'desktop' && this.megadropdownTitle && (h("p", { key: 'cdc95d1af137074d8f117b7ab44ae58c20804d31', class: "megadropdown-title" }, this.megadropdownTitle)), h("div", { key: '4f205271deab921c732c10f59f951e0d1559cafb', class: "megadropdown-content" }, h("slot", { key: '218f174cfefef460dcd2f4a4be35107e0a5cd95e' })), this.device === 'desktop' ? (h("post-closebutton", { onClick: () => this.hide(true), class: "close-button", size: "small", placement: "manual" }, this.textClose)) : (h("button", { onClick: () => this.hide(true), class: "back-button" }, h("post-icon", { name: "arrowleft" }), this.textBack))))));
     }
     static get is() { return "post-megadropdown"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/post-megadropdown-trigger/post-megadropdown-trigger.js

@@ -77,7 +77,7 @@ export class PostMegadropdownTrigger {
         this.megadropdown.toggle();
     }
     render() {
-        return (h(Host, { key: '4bc480689fe36f2e0b48cdc3fb2f192202d80087', "data-version": version }, h("button", { key: 'cb2d645db623d4d2cccdedf10d59dcaae2e160cd', ref: el => (this.interactiveButton = el), type: "button", "aria-haspopup": "menu", "aria-expanded": this.isMegadropdownExpanded.toString(), onClick: this.onClick.bind(this), onKeyDown: this.onKeyDown.bind(this), class: { active: this.active } }, h("span", { key: 'f402781980b3dcd5dc5b991c2e115bde7f40bbc5' }, h("span", { key: '6ba742f9f3a5270dc90e50101dad2abca03db833', innerHTML: this.slottedContent }), h("span", { key: 'cd1fdb6b0b833772e914a8dd532a4c77ffad6ac7', "aria-hidden": "true" }, h("slot", { key: '3ed0c52ce29de9fbf7eab99c5408baf9f685c420' }))), h("post-icon", { key: 'deabc3a13c77ea79f1b26ddaefac1193f9099109', name: "chevrondown" }))));
+        return (h(Host, { key: '3ff98d284d7ffcf3605e9fbfa44dda294ae02eb9', "data-version": version }, h("button", { key: 'e87d23a68473518e41199a253b3aa23dfc5fe6ca', ref: el => (this.interactiveButton = el), type: "button", "aria-haspopup": "menu", "aria-expanded": this.isMegadropdownExpanded.toString(), onClick: this.onClick.bind(this), onKeyDown: this.onKeyDown.bind(this), class: { active: this.active } }, h("span", { key: 'b0c478e81171df7534255dcfedcc2c1401d59d7e' }, h("span", { key: 'aa226c2f92b49aeefcf61ab8ce75b72a1a731850', innerHTML: this.slottedContent }), h("span", { key: '2e30aff042547cecc77c34d3f78a58fb0ca2e2bb', "aria-hidden": "true" }, h("slot", { key: 'b285e45d776f2cbf17e2f01f400a01d3bbb6f588' }))), h("post-icon", { key: 'f65a12ebf1e5261633a7cd83f3273f157bcdc6ef', name: "chevrondown" }))));
     }
     static get is() { return "post-megadropdown-trigger"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/post-menu/post-menu.js

@@ -144,7 +144,7 @@ export class PostMenu {
     }
     controlKeyDownHandler(e) {
         const menuItems = this.getSlottedItems();
-        if (!menuItems.length) {
+        if (menuItems.length === 0) {
             return;
         }
         let currentIndex = menuItems.findIndex(el => {
@@ -191,7 +191,7 @@ export class PostMenu {
             .flatMap(el => Array.from(getFocusableChildren(el))));
     }
     render() {
-        return (h(Host, { key: 'eedd5fbb9d151ebf7d97b66fc45b57a7259ff526', "data-version": version }, h("post-popovercontainer", { key: '5942a2fb4cf22f227a4a7d9b4ba31bb5f8cabdd3', onPostShow: this.handlePostShown.bind(this), onPostBeforeToggle: this.handlePostBeforeToggle.bind(this), placement: this.placement, ref: e => (this.popoverRef = e) }, h("div", { key: 'c0271e33046edecd94cb9a5f9e8df30debfe46a1', part: "post-menu" }, h("slot", { key: 'b625baf3767cdf2c34b3f5038415cdd2a51418da', name: "header" }), h("slot", { key: '7374e93e7b2762bf548ae0ecc72596da1e715725' })))));
+        return (h(Host, { key: 'a60bf6255b37ad07a25cbc2fd96e9ada4368ad37', "data-version": version }, h("post-popovercontainer", { key: 'eef8b43481a5e9eb0b9d64f18fc226dc9c49ca69', onPostShow: this.handlePostShown.bind(this), onPostBeforeToggle: this.handlePostBeforeToggle.bind(this), placement: this.placement, ref: e => (this.popoverRef = e) }, h("div", { key: '5f26e8d32c9653acbdd918e8676e4e92c5b218d3', part: "post-menu" }, h("slot", { key: 'c1f81a3a0e3a214bff8b59dc3f1445526c072ea7', name: "header" }), h("slot", { key: '36214a951440a02220183aeb2eee22d3a394b90d' })))));
     }
     static get is() { return "post-menu"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/post-menu-item/post-menu-item.js

@@ -1,7 +1,7 @@
 import { version } from "../../../../package";
 export class PostMenuItem {
     connectedCallback() {
-        this.host.setAttribute('data-version', version);
+        this.host.dataset.version = version;
     }
     static get is() { return "post-menu-item"; }
     static get originalStyleUrls() {

package/dist/collection/components/post-menu-trigger/post-menu-trigger.js

@@ -59,7 +59,7 @@ export class PostMenuTrigger {
         return null;
     }
     render() {
-        return (h(Host, { key: '8f2a4511ad519f20b1847fa4ce0ecdd1d859b9ea', "data-version": version }, h("slot", { key: '9c23569b7c5cba5934a869bd4a252957de3e53d5' })));
+        return (h(Host, { key: '46dbe700998f60d9b6e85c09a2992aa702c1af52', "data-version": version }, h("slot", { key: '339ecc1a3ba354199d9f3c0ff84fd2f8b2f1b4a4' })));
     }
     static get is() { return "post-menu-trigger"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/post-number-input/post-number-input.css

@@ -1 +1,4 @@
-:host{display:inline-flex;align-items:end}.input-container{position:relative}.step-button{display:inline-flex;position:relative;align-items:center;justify-content:center;max-width:100%;overflow:hidden;transition:opacity 250ms,border-color 250ms,background-color 250ms,color 250ms;border-width:var(--post-device-border-width-default);border-style:solid;border-radius:var(--post-device-border-radius-round);background-color:rgba(0,0,0,0);box-shadow:none;font-family:inherit;font-weight:var(--post-device-font-weight-bold);text-decoration:none;white-space:nowrap;cursor:pointer;border-color:var(--post-scheme-color-interactive-button-secondary-enabled-stroke);background-color:var(--post-scheme-color-interactive-button-secondary-enabled-bg);color:var(--post-scheme-color-interactive-button-secondary-enabled-fg);height:60px;padding-inline:10px;font-size:32px;flex:0 0 auto;border-radius:4px}.step-button:hover{text-decoration:none}.step-button:disabled{border-style:var(--post-core-border-style-dash)}.step-button{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}.step-button:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-style:var(--post-core-border-style-solid) !important}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.step-button:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){.step-button:is(:focus-visible,:focus-within,.pretend-focus){outline-style:var(--post-core-border-style-solid) !important}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.step-button:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.step-button:is(a){color:LinkText;border:unset}.step-button:is(button){background-color:ButtonFace !important;border:1px solid ButtonBorder !important}.step-button:not(:disabled,.disabled):is(button):hover{background-color:Highlight !important}.step-button:not(:disabled,.disabled):is(button):hover>post-icon{color:HighlightText !important}}.step-button:first-of-type{border-start-end-radius:0;border-end-end-radius:0}.step-button:last-of-type{border-start-start-radius:0;border-end-start-radius:0}.step-button:hover{border-color:var(--post-scheme-color-interactive-button-secondary-hover-stroke);background-color:var(--post-scheme-color-interactive-button-secondary-hover-bg);color:var(--post-scheme-color-interactive-button-secondary-hover-fg)}.step-button.disabled{border-color:var(--post-scheme-color-interactive-button-secondary-disabled-stroke);background-color:var(--post-scheme-color-interactive-button-secondary-disabled-bg);color:var(--post-scheme-color-interactive-button-secondary-disabled-fg);border-style:dashed;pointer-events:none;cursor:unset}
+:host{display:inline-flex;align-items:end;width:100%}:host ::slotted(input[type=number]),:host .step-button{height:var(--post-device-sizing-interactive-button-height-6) !important}:host ::slotted(input[type=number]){border-radius:0 !important;padding-inline:var(--post-device-spacing-padding-inline-1);padding-block-start:var(--post-device-spacing-padding-block-29);padding-block-end:var(--post-device-spacing-padding-block-3)}:host ::slotted(input[type=number]:focus){outline:none !important}:host .step-button.disabled{background-color:var(--post-scheme-color-interactive-button-secondary-disabled-bg);color:var(--post-scheme-color-interactive-button-secondary-disabled-fg);border-color:var(--post-scheme-color-interactive-button-secondary-disabled-stroke);border-style:var(--post-core-border-style-dash)}:host(.number-input-sm) ::slotted(input[type=number]),:host(.number-input-sm) .step-button{height:var(--post-device-sizing-interactive-button-height-8) !important}:host(.number-input-sm) ::slotted(input[type=number]){font-size:var(--post-device-font-size-7) !important;padding-inline:var(--post-device-spacing-padding-inline-1) !important;padding-block:var(--post-device-spacing-padding-29) !important}:host(.number-input-sm) ::slotted(input[type=number].is-valid),:host(.number-input-sm) ::slotted(input[type=number].is-invalid){background-size:var(--post-device-sizing-notification-5) !important;padding-inline-end:calc(
+      (var(--post-device-spacing-padding-inline-1)* 2) +
+        var(--post-device-sizing-notification-5)
+    ) !important}:host(.number-input-sm) .step-button{padding-inline:var(--post-device-spacing-padding-32);padding-block:var(--post-device-spacing-padding-2)}:host(.number-input-sm) .step-button post-icon{width:var(--post-device-sizing-interactive-icon-size7);height:var(--post-device-sizing-interactive-icon-size7)}:host(:hover) .step-button:not(.disabled){background-color:var(--post-scheme-color-interactive-button-secondary-hover-bg);border-color:var(--post-scheme-color-interactive-button-secondary-hover-stroke)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:host(:hover) .step-button:not(.disabled){border-color:Highlight}}:host(:hover) .step-button:not(.disabled),:host(:hover) .step-button:not(.disabled) post-icon{color:var(--post-scheme-color-interactive-button-secondary-hover-fg)}.input-container{position:relative;flex-grow:1}.input-container:focus-within::after{content:"";pointer-events:none;z-index:2;width:calc(100% + (var(--post-device-border-width-default) * 2));height:calc(100% + (var(--post-device-border-width-default) * 2));border:var(--post-device-border-width-focus) var(--post-core-border-style-solid) var(--post-scheme-color-interactive-focus-stroke);position:absolute;border-radius:var(--post-device-border-radius-1);top:calc((var(--post-device-border-width-default) * 2)*-1);left:calc((var(--post-device-border-width-default) * 2)*-1)}.step-button{display:inline-flex;position:relative;align-items:center;justify-content:center;max-width:100%;overflow:hidden;transition:opacity 250ms,border-color 250ms,background-color 250ms,color 250ms;border-width:var(--post-device-border-width-default);border-style:solid;border-radius:var(--post-device-border-radius-round);background-color:rgba(0,0,0,0);box-shadow:none;font-family:inherit;font-weight:var(--post-device-font-weight-bold);text-decoration:none;white-space:nowrap;cursor:pointer;transition:unset;box-sizing:border-box;flex:0 0 auto;border-radius:var(--post-device-border-radius-1);padding-inline:var(--post-device-spacing-padding-23);padding-block:var(--post-device-spacing-padding-22);box-shadow:var(--post-device-elevation-100);border:var(--post-device-border-width-default) var(--post-core-border-style-solid) var(--post-scheme-color-interactive-button-secondary-enabled-stroke);background-color:var(--post-scheme-color-interactive-button-secondary-enabled-bg);color:var(--post-scheme-color-interactive-button-secondary-enabled-fg)}.step-button:hover{text-decoration:none}.step-button:disabled{border-style:var(--post-core-border-style-dash)}.step-button{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}.step-button:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-style:var(--post-core-border-style-solid) !important}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.step-button:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){.step-button:is(:focus-visible,:focus-within,.pretend-focus){outline-style:var(--post-core-border-style-solid) !important}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.step-button:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.step-button:is(a){color:LinkText;border:unset}.step-button:is(button){background-color:ButtonFace !important;border:1px solid ButtonBorder !important}.step-button:not(:disabled,.disabled):is(button):hover{background-color:Highlight !important}.step-button:not(:disabled,.disabled):is(button):hover>post-icon{color:HighlightText !important}}.step-button post-icon{width:var(--post-device-sizing-interactive-icon-size6);height:var(--post-device-sizing-interactive-icon-size6)}.step-button:first-of-type{border-start-end-radius:0;border-end-end-radius:0;border-inline-end-width:0}.step-button:last-of-type{border-start-start-radius:0;border-end-start-radius:0;border-inline-start-width:0}.step-button.disabled{pointer-events:none;cursor:unset}