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

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

@@ -1,5 +1,5 @@
-import { Host, h } from "@stencil/core";
-import { IS_BROWSER, checkEmptyOrType, checkRequiredAndType, checkEmptyOrOneOf } from "../../utils/index";
+import { Host, h, Build } from "@stencil/core";
+import { checkEmptyOrType, checkRequiredAndType, checkEmptyOrOneOf, } from "../../utils/property-checkers/index";
 import { version } from "../../../../package";
 import { ANIMATION_KEYS } from "../../types/icon-animations";
 const CDN_URL = `https://unpkg.com/@swisspost/design-system-icons@${version}/public/post-icons/`;
@@ -45,7 +45,11 @@ export class PostIcon {
      **/
     getUrl() {
         const fileName = `${this.name}.svg`;
-        if (!IS_BROWSER && !this.base) {
+        // Prioritize only data:image URLs
+        if (this.url?.startsWith('data:image/')) {
+            return this.url;
+        }
+        if (Build.isServer && !this.base) {
             return `${CDN_URL}${fileName}`;
         }
         if (this.url) {
@@ -53,13 +57,13 @@ export class PostIcon {
         }
         const isAbsolute = (url) => /^https?:\/\//.test(url);
         const normalizeUrl = (url) => (url && !url.endsWith('/') ? `${url}/` : url);
-        const cleanUrl = (url) => url.replace(/([^:])\/\//g, '$1/');
-        const currentDomain = IS_BROWSER ? window.location.origin : '';
-        const baseHref = IS_BROWSER
+        const cleanUrl = (url) => url.replaceAll(/([^:])\/\//g, '$1/');
+        const currentDomain = Build.isBrowser ? globalThis.location.origin : '';
+        const baseHref = Build.isBrowser
             ? document.querySelector('base[href]')?.getAttribute('href') || ''
             : '';
         let metaIconBase = '';
-        if (IS_BROWSER) {
+        if (Build.isBrowser) {
             const metaTag = document.querySelector('meta[name="design-system-settings"]');
             metaIconBase = metaTag?.getAttribute('data-post-icon-base') || '';
         }
@@ -92,14 +96,13 @@ export class PostIcon {
     }
     getStyles() {
         const url = this.getUrl();
-        return Object.entries({
+        return Object.fromEntries(Object.entries({
             '-webkit-mask-image': `url(${url})`,
             'mask-image': `url('${url}')`,
-            'transform': (this.scale && !isNaN(Number(this.scale)) ? 'scale(' + this.scale + ')' : '') +
-                (this.rotate && !isNaN(Number(this.rotate)) ? ' rotate(' + this.rotate + 'deg)' : ''),
+            'transform': (this.scale && !Number.isNaN(Number(this.scale)) ? 'scale(' + this.scale + ')' : '') +
+                (this.rotate && !Number.isNaN(Number(this.rotate)) ? ' rotate(' + this.rotate + 'deg)' : ''),
         })
-            .filter(([_key, value]) => value !== null)
-            .reduce((styles, [key, value]) => Object.assign(styles, { [key]: value }), {});
+            .filter(([_key, value]) => value !== null));
     }
     componentDidLoad() {
         this.validateBase();
@@ -109,7 +112,7 @@ export class PostIcon {
         this.validateAnimation();
     }
     render() {
-        return (h(Host, { key: '0d39fadb6d179d82a7a951de4173578f9f351673', "data-version": version }, h("span", { key: 'd93a0a1307668e7a563a81037a399ba906d8fbe6', style: this.getStyles() })));
+        return (h(Host, { key: 'feefd0a41cd916581e6e9dc256fb96ad2381cbc4', "data-version": version }, h("span", { key: 'd5750e38ea77f811b9174d3139bc3912fcc9890b', style: this.getStyles() })));
     }
     static get is() { return "post-icon"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1 +1 @@
-:host{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:flex;flex-direction:column}.post-language-menu-trigger{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:unset;font-weight:unset;display:flex;padding:.25rem .625rem;gap:.375rem;font-size:1rem;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);text-transform:uppercase;cursor:pointer}.post-language-menu-trigger:hover{text-decoration:none}.post-language-menu-trigger:disabled{border-style:var(--post-core-border-style-dash)}.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(a){color:LinkText;border:unset}.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);background-color:var(--post-scheme-color-interactive-button-tertiary-hover-bg);color:var(--post-scheme-color-interactive-button-tertiary-hover-fg)}.post-language-menu-trigger:is([aria-current],[aria-pressed=true],[aria-expanded=true],.active){box-shadow:var(--post-device-elevation-100);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)}.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);background-color:var(--post-scheme-color-interactive-button-primary-hover-bg);color:var(--post-scheme-color-interactive-button-primary-hover-fg)}.post-language-menu-trigger post-icon{transition: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{transform:rotate(180deg)}post-menu::part(post-menu){padding-block:0}.post-language-menu-list{margin-top:1rem}
+:host{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:flex;flex-direction:column}.post-language-menu-trigger{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:unset;font-weight:unset;display:flex;padding:.25rem .625rem;gap:.375rem;font-size:1rem;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);text-transform:uppercase;cursor:pointer}.post-language-menu-trigger:hover{text-decoration:none}.post-language-menu-trigger:disabled{border-style:var(--post-core-border-style-dash)}.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(a){color:LinkText;border:unset}.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);background-color:var(--post-scheme-color-interactive-button-tertiary-hover-bg);color:var(--post-scheme-color-interactive-button-tertiary-hover-fg)}.post-language-menu-trigger:is([aria-current],[aria-pressed=true],[aria-expanded=true],.active){box-shadow:var(--post-device-elevation-100);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)}.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);background-color:var(--post-scheme-color-interactive-button-primary-hover-bg);color:var(--post-scheme-color-interactive-button-primary-hover-fg)}.post-language-menu-trigger post-icon{transition: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{transform:rotate(180deg)}.post-language-menu-list{margin-top:1rem}

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

@@ -40,7 +40,7 @@ export class PostLanguageMenu {
         const activeLanguage = this.activeLang &&
             document.querySelector(`post-language-menu-item[code="${this.activeLang}"]`);
         return activeLanguage
-            ? this.textCurrentLanguage.replace(/#name/g, activeLanguage.name)
+            ? this.textCurrentLanguage.replaceAll('#name', activeLanguage.name)
             : undefined;
     }
     componentDidLoad() {

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

@@ -15,12 +15,16 @@ export class PostLanguageMenuItem {
     validateName() {
         checkEmptyOrType(this, 'name', 'string');
     }
+    validateDescription() {
+        checkEmptyOrType(this, 'description', 'string');
+    }
     validateUrl() {
         checkEmptyOrUrl(this, 'url');
     }
     componentDidLoad() {
         this.validateCode();
         this.validateName();
+        this.validateDescription();
         this.validateUrl();
         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.');
@@ -49,7 +53,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, "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)));
     }
     static get is() { return "post-language-menu-item"; }
     static get originalStyleUrls() {
@@ -147,6 +152,25 @@ export class PostLanguageMenuItem {
                 "reflect": false,
                 "attribute": "name"
             },
+            "description": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "A description for the language read by screen-readers for improved accessibility."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "description"
+            },
             "url": {
                 "type": "string",
                 "mutable": false,
@@ -233,6 +257,9 @@ export class PostLanguageMenuItem {
             }, {
                 "propName": "name",
                 "methodName": "validateName"
+            }, {
+                "propName": "description",
+                "methodName": "validateDescription"
             }, {
                 "propName": "url",
                 "methodName": "validateUrl"

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: 'cbf9710bb97cbf8ead6a8e8117f42113133507a8', "data-version": version, onClick: (e) => this.dispatchClick(e) }, h("slot", { key: 'b1d31bd8a3fcf41005814c725f8b2670480da119' })));
     }
     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: '3572942d4f05b40bd8b35d959c513b5e534a2ec7', "data-version": version }, h("post-popovercontainer", { key: '1f900e151adf72ba9394783414ba7d71df1be70c', 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: '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" })));
+    }
+    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": {}
+                }
+            }];
+    }
+}