@swisspost/internet-header 1.17.1 → 10.2.0

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

@@ -0,0 +1,81 @@
+'use strict';
+
+var index = require('./index-B5ypPkK3.js');
+var _package = require('./package-2syswPDO.js');
+var switchVariants = require('./switch-variants-DyPKloa0.js');
+var required = require('./required-_r1rzbps.js');
+var type = require('./type-CAeEC3oM.js');
+var oneOf = require('./one-of-7TSi182P.js');
+var url = require('./url-Cykxre4X.js');
+require('./create-validator-decorator-CJK3Xf77.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) {
+        index.registerInstance(this, hostRef);
+        this.postChange = index.createEvent(this, "postChange");
+        this.postLanguageMenuItemInitiallyActive = index.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 ? (index.h("a", { "aria-current": this.active ? 'page' : undefined, href: this.url, hrefLang: lang, lang: lang, "aria-description": this.description, onClick: () => this.emitChange(), onKeyDown: emitOnKeyDown }, index.h("slot", null), index.h("span", { class: "visually-hidden" }, this.name))) : (index.h("button", { "aria-current": this.active ? 'true' : undefined, lang: lang, "aria-description": this.description, onClick: () => this.emitChange(), onKeyDown: emitOnKeyDown }, index.h("slot", null), index.h("span", { class: "visually-hidden" }, this.name)));
+        return this.variant === 'list' ? (index.h(index.Host, { "data-version": _package.version, role: "listitem" }, interactiveElement)) : (index.h(index.Host, { "data-version": _package.version }, index.h("post-menu-item", null, interactiveElement)));
+    }
+    get host() { return index.getElement(this); }
+};
+__decorate([
+    required.Required(),
+    type.Type('string')
+], PostLanguageMenuItem.prototype, "code", void 0);
+__decorate([
+    oneOf.OneOf(switchVariants.SWITCH_VARIANTS)
+], PostLanguageMenuItem.prototype, "variant", void 0);
+__decorate([
+    type.Type('string')
+], PostLanguageMenuItem.prototype, "name", void 0);
+__decorate([
+    type.Type('string')
+], PostLanguageMenuItem.prototype, "description", void 0);
+__decorate([
+    url.Url()
+], PostLanguageMenuItem.prototype, "url", void 0);
+PostLanguageMenuItem.style = postLanguageMenuItemCss();
+
+exports.post_language_menu_item = PostLanguageMenuItem;

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

@@ -0,0 +1,126 @@
+'use strict';
+
+var index = require('./index-B5ypPkK3.js');
+var _package = require('./package-2syswPDO.js');
+var switchVariants = require('./switch-variants-DyPKloa0.js');
+var nanoid = require('./nanoid-CmjyF1Cm.js');
+var required = require('./required-_r1rzbps.js');
+var type = require('./type-CAeEC3oM.js');
+var pattern = require('./pattern-BlBN9eIw.js');
+var oneOf = require('./one-of-7TSi182P.js');
+var eventFrom = require('./event-from-CwMw19f8.js');
+require('./create-validator-decorator-CJK3Xf77.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) {
+        index.registerInstance(this, hostRef);
+        this.menuId = `p${nanoid.nanoid(11)}`;
+        this.listSpanId = `list-span-${nanoid.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 (index.h(index.Host, { "data-version": _package.version }, index.h("div", { class: "post-language-menu-list", role: "list", "aria-label": this.textChangeLanguage, "aria-describedby": this.listSpanId }, index.h("span", { id: this.listSpanId, class: "visually-hidden" }, this.description), index.h("slot", null))));
+    }
+    renderDropdown() {
+        return (index.h(index.Host, { "data-version": _package.version }, index.h("post-menu-trigger", { for: this.menuId }, index.h("button", { class: "post-language-menu-trigger" }, this.activeLang, index.h("span", { class: "visually-hidden" }, this.textChangeLanguage), index.h("span", { class: "visually-hidden" }, this.description), index.h("post-icon", { "aria-hidden": "true", name: "chevrondown" }))), index.h("post-menu", { ref: el => (this.menu = el), id: this.menuId, class: "post-language-menu-dropdown-container", label: this.textChangeLanguage, placement: "bottom-end" }, index.h("slot", null))));
+    }
+    render() {
+        return this.variant === 'list' ? this.renderList() : this.renderDropdown();
+    }
+    get host() { return index.getElement(this); }
+    static get watchers() { return {
+        "variant": [{
+                "handleVariantChange": 0
+            }]
+    }; }
+};
+__decorate([
+    required.Required(),
+    type.Type('string')
+], PostLanguageMenu.prototype, "textChangeLanguage", void 0);
+__decorate([
+    required.Required(),
+    pattern.Pattern(/(\{name\}|#name)/)
+], PostLanguageMenu.prototype, "textCurrentLanguage", void 0);
+__decorate([
+    oneOf.OneOf(switchVariants.SWITCH_VARIANTS)
+], PostLanguageMenu.prototype, "variant", void 0);
+__decorate([
+    eventFrom.EventFrom('post-language-menu-item')
+], PostLanguageMenu.prototype, "handlePostChange", null);
+PostLanguageMenu.style = postLanguageMenuCss();
+
+exports.post_language_menu = PostLanguageMenu;

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

@@ -0,0 +1,77 @@
+'use strict';
+
+var index = require('./index-B5ypPkK3.js');
+var _package = require('./package-2syswPDO.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) {
+        index.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 (index.h(index.Host, { key: 'aa721ba7506fefd66348e09fd17ce828dec89050', "data-version": _package.version, onClick: (e) => this.dispatchClick(e) }, index.h("slot", { key: '1ad85663662fc0f6c877ff88a6570ff4d4b1fa33' })));
+    }
+    get host() { return index.getElement(this); }
+};
+PostLinkarea.style = postLinkareaCss();
+
+exports.post_linkarea = PostLinkarea;

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

@@ -0,0 +1,26 @@
+'use strict';
+
+var index = require('./index-B5ypPkK3.js');
+var _package = require('./package-2syswPDO.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) {
+        index.registerInstance(this, hostRef);
+        this.postOptionSelected = index.createEvent(this, "postOptionSelected");
+        this.optionId = crypto.randomUUID();
+        /** Represents option is selected . */
+        this.selected = false;
+        /** Represents option is highlighted . */
+        this.highlighted = false;
+    }
+    render() {
+        return (index.h(index.Host, { key: 'ff0e773f8a89f9df3996a83cd2be6247c1ab5475', "data-version": _package.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}` }, index.h("span", { key: 'cb43e8bec5f262ae25ddfdcae1b7f9979bdd6858', class: "option-content" }, this.value, index.h("span", { key: '5b314c41073a357185613a04a07d2020e4eab300', class: "option-description" }, index.h("slot", { key: 'ac1ed1be98f9a348952c0169d7ec89f8aaa99474' }))), this.selected && index.h("post-icon", { key: '7691085df732c0c2c5db9824587d54047017adf5', "aria-hidden": "true", name: "checkmark" })));
+    }
+};
+PostListboxOption.style = postListboxOptionCss();
+
+exports.post_listbox_option = PostListboxOption;

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

@@ -0,0 +1,148 @@
+'use strict';
+
+var index = require('./index-B5ypPkK3.js');
+var _package = require('./package-2syswPDO.js');
+var eventFrom = require('./event-from-CwMw19f8.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}`;
+
+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) {
+        index.registerInstance(this, hostRef);
+        this.postOptionActive = index.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 (index.h(index.Host, { key: 'd9008aa55aca4e0a65fdffd67485d74ddc4069f6', "data-version": _package.version, role: "listbox" }, index.h("post-popovercontainer", { key: '5ba4d68483581101ca4bf6fea04102fa883b71d1', placement: "bottom-start", ref: el => (this.popoverContainer = el) }, index.h("slot", { key: '286a31eff1b70ec35efcfa745103933598589f2a', name: "blank-slate" }), index.h("slot", { key: '4cebce7de3143c3eb1deafa57209f7295aa6ec44' }))));
+    }
+    get host() { return index.getElement(this); }
+};
+__decorate([
+    eventFrom.EventFrom('post-listbox-option')
+], PostListbox.prototype, "optionClicked", null);
+PostListbox.style = postListboxCss();
+
+exports.post_listbox = PostListbox;

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

@@ -0,0 +1,44 @@
+'use strict';
+
+var index = require('./index-B5ypPkK3.js');
+var _package = require('./package-2syswPDO.js');
+var url = require('./url-Cykxre4X.js');
+require('./create-validator-decorator-CJK3Xf77.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) {
+        index.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 (index.h(index.Host, { key: '84ece8e71d7dec66aa634d9a8a37d6bf3197c1b6', "data-version": _package.version }, index.h(LogoTag, { key: '1531c6e8f32d42e63f5482d2983f18e4c9a23b1a', class: `logo ${logoLink ? 'logo-link' : ''}`, ...(logoLink ? { href: logoLink } : {}) }, index.h("span", { key: 'd45d33329e30de0de9de56f2d588995a7f97d01e', class: "description" }, index.h("slot", { key: 'e8665c8d739dc2a2968bf1193c26ba1d1e731b38', onSlotchange: () => this.checkDescription() })), index.h("svg", { key: 'bb3f534952e29e2e43816c5a5dd55541d05bee26', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 72 72", "aria-hidden": "true" }, index.h("g", { key: '9ca05c263f6c9f41cc5406ccfd030a713ffe0254', id: "Logo" }, index.h("rect", { key: '30a59adc0eec11af2d90180da1f5a95b03175d21', fill: "#ffcc00", x: "0", y: "0", width: "72", height: "72" }), index.h("polygon", { key: 'b1cbe7c575d36cf26a1cc41c9124625c2d1e5ef1', 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" }), index.h("path", { key: '398027f23c8c9a4cf2bc7f8d7c8aa4ec0466f0be', 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 index.getElement(this); }
+};
+__decorate([
+    url.Url()
+], PostLogo.prototype, "url", void 0);
+PostLogo.style = postLogoCss();
+
+exports.post_logo = PostLogo;