@swisspost/internet-header 1.17.0 → 10.1.0

package/dist/esm/post-language-menu-item.entry.js

@@ -0,0 +1,79 @@
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-h3opCZqH.js';
+import { v as version } from './package-jK9tFtoG.js';
+import { S as SWITCH_VARIANTS } from './switch-variants-DjIHLduJ.js';
+import { R as Required } from './required-tHxh_hWW.js';
+import { T as Type } from './type-Daxpt5v6.js';
+import { O as OneOf } from './one-of-w2eXPAzD.js';
+import { U as Url } from './url-B61rZU6Z.js';
+import './create-validator-decorator--a-qkYfP.js';
+
+const postLanguageMenuItemCss = () => `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;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-appearance:button;-moz-appearance:button;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:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;-ms-flex-pack: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);color:var(--post-scheme-color-interactive-button-tertiary-enabled-fg);background-color:var(--post-scheme-color-interactive-button-tertiary-enabled-bg)}post-language-menu-item:where([variant=list]) :is(a,button):hover{border-color:var(--post-scheme-color-interactive-button-tertiary-hover-stroke);color:var(--post-scheme-color-interactive-button-tertiary-hover-fg);background-color:var(--post-scheme-color-interactive-button-tertiary-hover-bg)}@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);color:var(--post-scheme-color-interactive-button-primary-enabled-fg);background-color:var(--post-scheme-color-interactive-button-primary-enabled-bg);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}`;
+
+var __decorate = (undefined && undefined.__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;
+};
+const PostLanguageMenuItem = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.postChange = createEvent(this, "postChange");
+        this.postLanguageMenuItemInitiallyActive = createEvent(this, "postLanguageMenuItemInitiallyActive");
+    }
+    componentDidLoad() {
+        if (!this.name && this.isNameRequired()) {
+            throw new Error('The "name" property of the post-language-menu-item component is required when the full language name is not displayed.');
+        }
+        if (this.active) {
+            this.postLanguageMenuItemInitiallyActive.emit(this.code);
+        }
+    }
+    /**
+     * Selects the language option programmatically.
+     */
+    async select() {
+        this.active = true;
+        this.emitChange();
+    }
+    emitChange() {
+        this.postChange.emit(this.code);
+    }
+    isNameRequired() {
+        return this.host.textContent.toLowerCase() === this.code.toLowerCase();
+    }
+    render() {
+        const lang = this.code.toLowerCase();
+        const emitOnKeyDown = (e) => {
+            if (e.key === 'Enter' || e.key === ' ') {
+                this.emitChange();
+            }
+        };
+        const interactiveElement = this.url ? (h("a", { "aria-current": this.active ? 'page' : undefined, href: this.url, hrefLang: lang, lang: lang, "aria-description": this.description, 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, "aria-description": this.description, 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)));
+    }
+    get host() { return getElement(this); }
+};
+__decorate([
+    Required(),
+    Type('string')
+], PostLanguageMenuItem.prototype, "code", void 0);
+__decorate([
+    OneOf(SWITCH_VARIANTS)
+], PostLanguageMenuItem.prototype, "variant", void 0);
+__decorate([
+    Type('string')
+], PostLanguageMenuItem.prototype, "name", void 0);
+__decorate([
+    Type('string')
+], PostLanguageMenuItem.prototype, "description", void 0);
+__decorate([
+    Url()
+], PostLanguageMenuItem.prototype, "url", void 0);
+PostLanguageMenuItem.style = postLanguageMenuItemCss();
+
+export { PostLanguageMenuItem as post_language_menu_item };

package/dist/esm/post-language-menu.entry.js

@@ -0,0 +1,124 @@
+import { r as registerInstance, h, H as Host, g as getElement } from './index-h3opCZqH.js';
+import { v as version } from './package-jK9tFtoG.js';
+import { S as SWITCH_VARIANTS } from './switch-variants-DjIHLduJ.js';
+import { n as nanoid } from './nanoid-8LXe8Zt_.js';
+import { R as Required } from './required-tHxh_hWW.js';
+import { T as Type } from './type-Daxpt5v6.js';
+import { P as Pattern } from './pattern-Der2DK75.js';
+import { O as OneOf } from './one-of-w2eXPAzD.js';
+import { E as EventFrom } from './event-from-rEfV4v4a.js';
+import './create-validator-decorator--a-qkYfP.js';
+
+const postLanguageMenuCss = () => `:host{display:-ms-flexbox;display:flex}.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-dropdown-container{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.post-language-menu-trigger{display:-ms-inline-flexbox;display:inline-flex;position:relative;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;max-width:100%;overflow:hidden;-webkit-transition:opacity 250ms,border-color 250ms,background-color 250ms,color 250ms;transition:opacity 250ms,border-color 250ms,background-color 250ms,color 250ms;border-width:var(--post-device-border-width-default);border-style:solid;border-color:rgba(0,0,0,0);border-radius:var(--post-device-border-radius-round);background-color:rgba(0,0,0,0);-webkit-box-shadow:none;box-shadow:none;font-family:inherit;font-size:var(--post-device-font-size-6);font-weight:var(--post-device-font-weight-bold);text-decoration:none;white-space:nowrap;cursor:pointer;border:unset;font-weight:unset;display:-ms-flexbox;display:flex;padding:.25rem .625rem;gap:.375rem;font-size:1rem;border-color:var(--post-scheme-color-interactive-button-tertiary-enabled-stroke);color:var(--post-scheme-color-interactive-button-tertiary-enabled-fg);background-color:var(--post-scheme-color-interactive-button-tertiary-enabled-bg);text-transform:uppercase;line-height:inherit;cursor:pointer}.post-language-menu-trigger:not(:disabled):hover{text-decoration:none}.post-language-menu-trigger:disabled{border-style:var(--post-core-border-style-dash);cursor:unset}.post-language-menu-trigger{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-trigger: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){.post-language-menu-trigger:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){.post-language-menu-trigger: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){.post-language-menu-trigger: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){.post-language-menu-trigger:is(button){background-color:ButtonFace !important;border:1px solid ButtonBorder !important}.post-language-menu-trigger:not(:disabled,.disabled):is(button):hover{background-color:Highlight !important}.post-language-menu-trigger:not(:disabled,.disabled):is(button):hover>post-icon{color:HighlightText !important}}.post-language-menu-trigger:hover{border-color:var(--post-scheme-color-interactive-button-tertiary-hover-stroke);color:var(--post-scheme-color-interactive-button-tertiary-hover-fg);background-color:var(--post-scheme-color-interactive-button-tertiary-hover-bg)}.post-language-menu-trigger:is([aria-current],[aria-pressed=true],[aria-expanded=true],.active){-webkit-box-shadow:var(--post-device-elevation-100);box-shadow:var(--post-device-elevation-100);border-color:var(--post-scheme-color-interactive-button-primary-enabled-stroke);color:var(--post-scheme-color-interactive-button-primary-enabled-fg);background-color:var(--post-scheme-color-interactive-button-primary-enabled-bg)}.post-language-menu-trigger:is([aria-current],[aria-pressed=true],[aria-expanded=true],.active):hover{border-color:var(--post-scheme-color-interactive-button-primary-hover-stroke);color:var(--post-scheme-color-interactive-button-primary-hover-fg);background-color:var(--post-scheme-color-interactive-button-primary-hover-bg)}.post-language-menu-trigger post-icon{-webkit-transition:-webkit-transform 250ms cubic-bezier(0.4, 0, 0.2, 1);transition:-webkit-transform 250ms cubic-bezier(0.4, 0, 0.2, 1);transition:transform 250ms cubic-bezier(0.4, 0, 0.2, 1);transition:transform 250ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 250ms cubic-bezier(0.4, 0, 0.2, 1)}.post-language-menu-trigger:is([aria-current],[aria-pressed=true],[aria-expanded=true]) post-icon{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.post-language-menu-list{display:-ms-flexbox;display:flex;gap:.5rem;margin-top:1rem}`;
+
+var __decorate = (undefined && undefined.__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;
+};
+const PostLanguageMenu = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.menuId = `p${nanoid(11)}`;
+        this.listSpanId = `list-span-${nanoid(11)}`;
+        /**
+         * Whether the component is rendered as a list or a menu
+         */
+        this.variant = 'menu';
+    }
+    get languageOptions() {
+        return Array.from(this.host.querySelectorAll('post-language-menu-item'));
+    }
+    handleVariantChange() {
+        this.updateChildrenVariant();
+    }
+    /* The complete accessible description */
+    get description() {
+        const activeLanguage = this.activeLang &&
+            document.querySelector(`post-language-menu-item[code="${this.activeLang}"]`);
+        if (!activeLanguage)
+            return undefined;
+        return this.textCurrentLanguage
+            .replaceAll('{name}', activeLanguage.name)
+            .replaceAll('#name', activeLanguage.name);
+    }
+    componentDidLoad() {
+        // Initially set variants and active language
+        // Handles cases where the language-menu is rendered after the language-options have been rendered
+        this.updateChildrenVariant();
+    }
+    /**
+     * Listen for the postChange event and guard it to run only for events originating from a <post-language-menu-item> element.
+     */
+    handlePostChange(event) {
+        this.activeLang = event.detail;
+        // Update the active state in the children post-language-menu-item components
+        this.languageOptions.forEach(lang => {
+            if (lang.code && lang.code === this.activeLang) {
+                lang.setAttribute('active', '');
+            }
+            else {
+                lang.removeAttribute('active');
+            }
+        });
+        // Hides the dropdown when an option has been clicked
+        if (this.variant === 'menu') {
+            const menu = this.host.shadowRoot.querySelector('post-menu');
+            menu.hide();
+        }
+    }
+    hideMenuOnScroll() {
+        if (this.menu)
+            this.menu.hide();
+    }
+    /**
+     * Handles cases where the language menu is being rendered before options are available
+     * @param event Initially emitted by <post-language-menu-item>
+     */
+    handleInitiallyActive(event) {
+        this.activeLang = event.detail;
+    }
+    // Update post-language-menu-item variant to have the correct style
+    updateChildrenVariant() {
+        this.languageOptions.forEach(el => {
+            el.setAttribute('variant', this.variant);
+        });
+    }
+    renderList() {
+        return (h(Host, { "data-version": version }, h("div", { class: "post-language-menu-list", role: "list", "aria-label": this.textChangeLanguage, "aria-describedby": this.listSpanId }, h("span", { id: this.listSpanId, class: "visually-hidden" }, this.description), h("slot", null))));
+    }
+    renderDropdown() {
+        return (h(Host, { "data-version": version }, h("post-menu-trigger", { for: this.menuId }, h("button", { class: "post-language-menu-trigger" }, this.activeLang, h("span", { class: "visually-hidden" }, this.textChangeLanguage), h("span", { class: "visually-hidden" }, this.description), h("post-icon", { "aria-hidden": "true", name: "chevrondown" }))), h("post-menu", { ref: el => (this.menu = el), id: this.menuId, class: "post-language-menu-dropdown-container", label: this.textChangeLanguage, placement: "bottom-end" }, h("slot", null))));
+    }
+    render() {
+        return this.variant === 'list' ? this.renderList() : this.renderDropdown();
+    }
+    get host() { return getElement(this); }
+    static get watchers() { return {
+        "variant": [{
+                "handleVariantChange": 0
+            }]
+    }; }
+};
+__decorate([
+    Required(),
+    Type('string')
+], PostLanguageMenu.prototype, "textChangeLanguage", void 0);
+__decorate([
+    Required(),
+    Pattern(/(\{name\}|#name)/)
+], PostLanguageMenu.prototype, "textCurrentLanguage", void 0);
+__decorate([
+    OneOf(SWITCH_VARIANTS)
+], PostLanguageMenu.prototype, "variant", void 0);
+__decorate([
+    EventFrom('post-language-menu-item')
+], PostLanguageMenu.prototype, "handlePostChange", null);
+PostLanguageMenu.style = postLanguageMenuCss();
+
+export { PostLanguageMenu as post_language_menu };

package/dist/esm/post-linkarea.entry.js

@@ -0,0 +1,75 @@
+import { r as registerInstance, h, H as Host, g as getElement } from './index-h3opCZqH.js';
+import { v as version } from './package-jK9tFtoG.js';
+
+const postLinkareaCss = () => `:host{display:block;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-within){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-within){outline-color:Highlight !important}}`;
+
+const INTERACTIVE_ELEMENT_SELECTOR = [
+    'a',
+    'button',
+    'input',
+    'select',
+    'textarea',
+    'label',
+    'fieldset',
+    'optgroup',
+    'option',
+].join(',');
+const LINKAREA_TARGET_SELECTOR = [
+    'a',
+    'label[for]',
+    'input[type="checkbox"]',
+    'input[type="radio"]',
+].join(',');
+function isDisabled(element) {
+    const fieldset = element.closest('fieldset');
+    if (fieldset && fieldset.disabled)
+        return true;
+    return 'disabled' in element && Boolean(element.disabled);
+}
+const PostLinkarea = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    getDirectTarget(event) {
+        for (const element of event.composedPath()) {
+            if (element instanceof HTMLSlotElement)
+                break;
+            if (element === this.host)
+                break;
+            if (element instanceof HTMLElement && element.matches(INTERACTIVE_ELEMENT_SELECTOR)) {
+                return element;
+            }
+        }
+        return null;
+    }
+    getDelegateTarget() {
+        return this.host.querySelector(LINKAREA_TARGET_SELECTOR);
+    }
+    dispatchClick(event) {
+        // If a non-disabled interactive element was clicked directly, let the browser handle it
+        const directTarget = this.getDirectTarget(event);
+        if (directTarget && !isDisabled(directTarget))
+            return;
+        // No delegate target or delegate target is disabled — nothing to forward
+        const delegateTarget = this.getDelegateTarget();
+        if (!delegateTarget || isDisabled(delegateTarget))
+            return;
+        const { ctrlKey, shiftKey, altKey, metaKey, button } = event;
+        delegateTarget.dispatchEvent(new MouseEvent('click', {
+            cancelable: true,
+            bubbles: true,
+            ctrlKey,
+            shiftKey,
+            altKey,
+            metaKey,
+            button,
+        }));
+    }
+    render() {
+        return (h(Host, { key: 'aa721ba7506fefd66348e09fd17ce828dec89050', "data-version": version, onClick: (e) => this.dispatchClick(e) }, h("slot", { key: '1ad85663662fc0f6c877ff88a6570ff4d4b1fa33' })));
+    }
+    get host() { return getElement(this); }
+};
+PostLinkarea.style = postLinkareaCss();
+
+export { PostLinkarea as post_linkarea };

package/dist/esm/post-listbox-option.entry.js

@@ -0,0 +1,24 @@
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-h3opCZqH.js';
+import { v as version } from './package-jK9tFtoG.js';
+
+const postListboxOptionCss = () => `:host{padding:12px 12px 9px 16px;background-color:#fff;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;gap:8px;-ms-flex-pack:justify;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:-ms-flexbox;display:flex;-ms-flex-direction:column;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}`;
+
+const PostListboxOption = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.postOptionSelected = createEvent(this, "postOptionSelected");
+        this.optionId = crypto.randomUUID();
+        /** Represents option is selected . */
+        this.selected = false;
+        /** Represents option is highlighted . */
+        this.highlighted = false;
+    }
+    render() {
+        return (h(Host, { key: '083077341f74f3d6f7baad7599aef968a9f07582', "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: '7d844e51e7f90ea77075f83b663b2b77049f04df', class: "option-content" }, this.value, h("span", { key: 'b7b19312ebaf634292076425725434d18a8a6532', class: "option-description" }, h("slot", { key: '69db5aad7cbe41419398ca32c7ca2b955fbcaefe' }))), this.selected && h("post-icon", { key: '8969fc083fb669a4c5e9d8dbb1c12e1fcde053d5', "aria-hidden": "true", name: "checkmark" })));
+    }
+};
+PostListboxOption.style = postListboxOptionCss();
+
+export { PostListboxOption as post_listbox_option };

package/dist/esm/post-listbox.entry.js

@@ -0,0 +1,146 @@
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-h3opCZqH.js';
+import { v as version } from './package-jK9tFtoG.js';
+import { E as EventFrom } from './event-from-rEfV4v4a.js';
+
+const postListboxCss = () => `post-popovercontainer{border-radius:4px;overflow:hidden;-webkit-box-shadow:var(--post-device-elevation-300);box-shadow:var(--post-device-elevation-300)}div[role=listbox]{max-height:384px;overflow:auto;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}::slotted([slot=blank-slate]){display:block;padding:.75rem;color:#666}`;
+
+var __decorate = (undefined && undefined.__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;
+};
+const PostListbox = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.postOptionActive = createEvent(this, "postOptionActive");
+        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);
+        }
+    }
+    /** Closes the listbox */
+    async hide() {
+        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: 'd9008aa55aca4e0a65fdffd67485d74ddc4069f6', "data-version": version, role: "listbox" }, h("post-popovercontainer", { key: '5ba4d68483581101ca4bf6fea04102fa883b71d1', placement: "bottom-start", ref: el => (this.popoverContainer = el) }, this.visibleOptions.length === 0 ? h("slot", { name: "blank-slate" }) : h("slot", null))));
+    }
+    get host() { return getElement(this); }
+};
+__decorate([
+    EventFrom('post-listbox-option')
+], PostListbox.prototype, "optionClicked", null);
+PostListbox.style = postListboxCss();
+
+export { PostListbox as post_listbox };

package/dist/esm/post-logo.entry.js

@@ -0,0 +1,42 @@
+import { r as registerInstance, h, H as Host, g as getElement } from './index-h3opCZqH.js';
+import { v as version } from './package-jK9tFtoG.js';
+import { U as Url } from './url-B61rZU6Z.js';
+import './create-validator-decorator--a-qkYfP.js';
+
+const postLogoCss = () => `:host,.logo{display:inline-block}:host,:host .logo>svg,.logo,.logo .logo>svg{height:100%}.description{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}.logo-link{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}.logo-link: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){.logo-link:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){.logo-link: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){.logo-link:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}.logo-link{outline-offset:var(--post-device-spacing-padding-28) !important}.logo-link:focus,.logo-link:focus-visible{border-radius:var(--post-device-border-radius-focus)}`;
+
+var __decorate = (undefined && undefined.__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;
+};
+const PostLogo = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    componentDidLoad() {
+        this.checkDescription();
+    }
+    checkDescription() {
+        if (!this.host.textContent) {
+            console.warn('Be sure to add descriptive text in the post-logo to ensure good accessibility of the component.');
+        }
+    }
+    render() {
+        const logoLink = this.url && (typeof this.url === 'string' ? this.url : this.url.href);
+        const LogoTag = logoLink ? 'a' : 'span';
+        return (h(Host, { key: '473c845bef6d123628bf52b7848475b50172e3c0', "data-version": version }, h(LogoTag, { key: '47503ff9c22b613c5041d51a48cfc158d0edebcd', class: `logo ${logoLink ? 'logo-link' : ''}`, ...(logoLink ? { href: logoLink } : {}) }, h("span", { key: '52953139bad89e236fc922574a881b7f4b79aee5', class: "description" }, h("slot", { key: '554c681236c4d158d967f97754134af774ec791e', onSlotchange: () => this.checkDescription() })), h("svg", { key: '3d65f3a44c46f8ba3810d0cd3c344577fb43a61e', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 72 72", "aria-hidden": "true" }, h("g", { key: '03f88fbf5710da7f0bbccafdb95c4faa93e2636a', id: "Logo" }, h("rect", { key: '33f39db4fb799744d25fae33f0b6a921c331531a', fill: "#ffcc00", x: "0", y: "0", width: "72", height: "72" }), h("polygon", { key: '93c248b53c7493a831d7b1ddf8b3e3d14d804779', 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: 'dbdfa4a5f215e578c9f9cfc65f0cfb5d26b02848', 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" }))))));
+    }
+    get host() { return getElement(this); }
+};
+__decorate([
+    Url()
+], PostLogo.prototype, "url", void 0);
+PostLogo.style = postLogoCss();
+
+export { PostLogo as post_logo };

package/dist/esm/post-mainnavigation.entry.js

@@ -0,0 +1,148 @@
+import { r as registerInstance, h, H as Host, g as getElement } from './index-h3opCZqH.js';
+import { v as version } from './package-jK9tFtoG.js';
+import { R as Required } from './required-tHxh_hWW.js';
+import { T as Type } from './type-Daxpt5v6.js';
+import './create-validator-decorator--a-qkYfP.js';
+
+const postMainnavigationCss = () => `:host{display:-ms-flexbox;display:flex;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;max-width:var(--post-header-content-max-width)}@media screen and (min-width: 1024px){:host{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;-webkit-margin-start:calc(-1*var(--post-local-header-padding-inline-start));margin-inline-start:calc(-1*var(--post-local-header-padding-inline-start));-webkit-margin-end:calc(-1*var(--post-local-header-padding-inline-end));margin-inline-end:calc(-1*var(--post-local-header-padding-inline-end));overflow:hidden}}nav{-ms-flex:1 1 auto;flex:1 1 auto}@media screen and (min-width: 1024px){nav{scroll-behavior:smooth;max-width:100vw;overflow:hidden;height:var(--post-main-navigation-height)}}.scroll-control{z-index:1;cursor:pointer;padding:1rem;background:#fff;-webkit-box-shadow:var(--post-device-elevation-500);box-shadow:var(--post-device-elevation-500);line-height:1}.scroll-control.scroll-left{-webkit-margin-end:-3rem;margin-inline-end:-3rem}.scroll-control.scroll-right{-webkit-margin-start:-3rem;margin-inline-start:-3rem}.scroll-control.d-none{display:none}.scroll-control post-icon{font-size:1rem}`;
+
+var __decorate = (undefined && undefined.__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;
+};
+const SCROLL_REPEAT_INTERVAL = 100; // Interval for repeated scrolling when holding down scroll button
+const NAVBAR_DISABLE_DURATION = 400; // Duration to temporarily disable navbar interactions during scrolling
+const PostMainnavigation = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.canScrollLeft = false;
+        this.canScrollRight = false;
+        this.scrollRight = this.scrollRight.bind(this);
+        this.scrollLeft = this.scrollLeft.bind(this);
+        this.checkScrollability = this.checkScrollability.bind(this);
+        this.resizeObserver = new ResizeObserver(this.checkScrollability);
+        this.mutationObserver = new MutationObserver(this.checkScrollability);
+    }
+    componentDidLoad() {
+        setTimeout(() => {
+            this.checkScrollability();
+        });
+        // Observe the navbar for size changes
+        this.resizeObserver.observe(this.navbar);
+        // Observe the navabar for mutation changes
+        this.mutationObserver.observe(this.navbar, { subtree: true, childList: true }); // Recheck scrollability when navigation list changes
+        // Ensure the scroll buttons are correctly displayed or hidden whenever the navbar is scrolled
+        this.navbar?.addEventListener('scrollend', this.checkScrollability);
+    }
+    /**
+     * Disconnects observers and remove event listeners when the main navigation is removed from the DOM.
+     */
+    disconnectedCallback() {
+        this.mutationObserver.disconnect();
+        this.resizeObserver.disconnect();
+        this.navbar?.removeEventListener('scrollend', this.checkScrollability);
+    }
+    /**
+     * Stops the repeated scrolling when the mouse button is released.
+     */
+    stopScrolling() {
+        if (this.scrollRepeatInterval)
+            clearInterval(this.scrollRepeatInterval);
+    }
+    get navigationItems() {
+        return Array.from(this.host.querySelectorAll('a:not(post-megadropdown *), post-megadropdown-trigger'));
+    }
+    /**
+     * Returns whether scrolling is enabled in either the left or right direction.
+     */
+    get canScroll() {
+        return this.canScrollLeft || this.canScrollRight;
+    }
+    /**
+     * Checks if scrolling is possible in either direction (left or right) and updates the state accordingly.
+     */
+    checkScrollability() {
+        const { scrollLeft, scrollWidth, clientWidth } = this.navbar;
+        if (scrollWidth === clientWidth) {
+            // If scroll width equals client width, scrolling is disabled in both directions
+            this.canScrollLeft = this.canScrollRight = false;
+        }
+        else {
+            this.canScrollLeft = Math.floor(scrollLeft) > 0; // Scrolling left is possible if not at the start
+            this.canScrollRight = Math.ceil(clientWidth + scrollLeft) < scrollWidth; // Scrolling right is possible if not at the end
+        }
+    }
+    /**
+     * Handles the scrolling behavior when a user clicks on the left or right scroll buttons.
+     */
+    handleScrollButtonClick(e, direction) {
+        if (!this.canScroll || e.button !== 0)
+            return;
+        // Disable interaction with the navbar during scrolling
+        this.temporarilyDisableNavbar();
+        // Set up the correct scroll function
+        const scroll = direction === 'right' ? this.scrollRight : this.scrollLeft;
+        scroll();
+        // Repeat the scrolling action while the button is held down
+        this.scrollRepeatInterval = setInterval(() => {
+            scroll();
+        }, SCROLL_REPEAT_INTERVAL);
+    }
+    scrollRight() {
+        const scrollRightLeftEdge = this.host.shadowRoot
+            .querySelector('.scroll-right')
+            .getBoundingClientRect().left;
+        for (const navigationItem of this.navigationItems) {
+            const { right, width } = navigationItem.getBoundingClientRect();
+            // Scroll to the first navigation item that is less than 75% visible
+            const isThreeQuartersVisible = right - 0.25 * width < scrollRightLeftEdge;
+            if (!isThreeQuartersVisible) {
+                this.navbar.scrollBy({ left: right - scrollRightLeftEdge });
+                return;
+            }
+        }
+    }
+    scrollLeft() {
+        const scrollLeftRightEdge = this.host.shadowRoot
+            .querySelector('.scroll-left')
+            .getBoundingClientRect().right;
+        for (const navigationItem of this.navigationItems.reverse()) {
+            const { left, width } = navigationItem.getBoundingClientRect();
+            // Scroll to the first navigation item that is less than 75% visible
+            const isThreeQuartersVisible = left + 0.25 * width > scrollLeftRightEdge;
+            if (!isThreeQuartersVisible) {
+                this.navbar.scrollBy({ left: left - scrollLeftRightEdge });
+                return;
+            }
+        }
+    }
+    /**
+     * Temporarily disables interactions with the navbar during scrolling to prevent accidental clicks.
+     * Re-enables interactions after a brief delay to avoid blocking the user entirely.
+     */
+    temporarilyDisableNavbar() {
+        if (this.navbarDisableTimer)
+            clearTimeout(this.navbarDisableTimer);
+        this.navbar.setAttribute('inert', '');
+        this.navbarDisableTimer = setTimeout(() => {
+            this.navbar.removeAttribute('inert');
+        }, NAVBAR_DISABLE_DURATION);
+    }
+    render() {
+        return (h(Host, { key: '057f526f5b0e931fcb8642e6fa034f441df43020', version: version, class: this.canScroll ? 'scrollable' : '' }, h("div", { key: 'c8ce70f6cbeec58c77709c1736b013ffe09ead6f', "aria-hidden": "true", class: { 'scroll-control scroll-left': true, 'd-none': !this.canScrollLeft }, onMouseDown: e => this.handleScrollButtonClick(e, 'left') }, h("post-icon", { key: '8281914d3380920a5562b468e87c87ca196a4830', "aria-hidden": "true", name: "chevronleft" })), h("nav", { key: '7720c24a70339ea1c984dedf2faba0de8a6cfc86', ref: el => (this.navbar = el), "aria-label": this.textMain }, h("slot", { key: '3812be77ea739aac2be90cf8e7ac9a7e32bf5fce' })), h("div", { key: 'eda43d3b2e1d8f916275773d9ef93d364e9c1948', "aria-hidden": "true", class: { 'scroll-control scroll-right': true, 'd-none': !this.canScrollRight }, onMouseDown: e => this.handleScrollButtonClick(e, 'right') }, h("post-icon", { key: '914d94f91fe1764cf64e73fc22e4f7c5a0e08c2a', "aria-hidden": "true", name: "chevronright" }))));
+    }
+    get host() { return getElement(this); }
+};
+__decorate([
+    Required(),
+    Type('string')
+], PostMainnavigation.prototype, "textMain", void 0);
+PostMainnavigation.style = postMainnavigationCss();
+
+export { PostMainnavigation as post_mainnavigation };