@swisspost/design-system-components 10.0.0-next.70 → 10.0.0-next.72

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

@@ -8,14 +8,14 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
                 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, Build, } from "@stencil/core";
-import { throttle } from "throttle-debounce";
-import { version } from "../../../../package";
-import { breakpoint } from "../../utils/breakpoints";
 import { fade } from "../../animations/index";
-import { getDeepFocusableChildren } from "../../utils/get-focusable-children";
+import { Required, Type } from "../../utils/index";
+import { breakpoint } from "../../utils/breakpoints";
 import { EventFrom } from "../../utils/event-from";
-import { checkRequiredAndType } from "../../utils/index";
+import { getDeepFocusableChildren } from "../../utils/get-focusable-children";
+import { version } from "../../../../package";
+import { Build, h, Host, } from "@stencil/core";
+import { throttle } from "throttle-debounce";
 /**
  * @slot post-logo - Should be used together with the `<post-logo>` component.
  * @slot global-nav-primary - Holds search button in the global header.
@@ -45,12 +45,6 @@ export class PostHeader {
         }
         return document.body;
     }
-    validateFullWidth() {
-        checkRequiredAndType(this, 'fullWidth', 'boolean');
-    }
-    validateTextMenu() {
-        checkRequiredAndType(this, 'textMenu', 'string');
-    }
     lockBody(newValue, _oldValue, propName) {
         const scrollParent = this.scrollParent;
         const burgerMenuExtended = propName === 'burgerMenuExtended' ? newValue : this.burgerMenuExtended;
@@ -121,8 +115,6 @@ export class PostHeader {
         this.switchLanguageSwitchMode();
     }
     componentDidRender() {
-        this.validateTextMenu();
-        this.validateFullWidth();
         this.getFocusableElements();
         this.handleLocalHeaderResize();
         // When a megadropdown is open on desktop and the user resizes to mobile, we set
@@ -317,10 +309,10 @@ export class PostHeader {
     render() {
         const onDesktop = Build.isServer || this.device === 'desktop';
         const onTabletAndMobile = Build.isServer || this.device !== 'desktop';
-        return (h(Host, { key: '7a816d9b241bc77d8312603c596500e262e16c6d', "data-version": version, "data-color-scheme": "light", "data-burger-menu": this.hasBurgerMenu, "data-menu-extended": this.burgerMenuExtended }, h("header", { key: 'c39b23a433fa6836bf237b5ffd46f0cc8d16ce99' }, h("div", { key: '4ef37141bf91c1e310967900a0df434cad468d79', class: "global-header" }, h("div", { key: '392a6eb0843040795227be1a743ef50dc8610b4b', class: "section" }, h("div", { key: '1db72fc26051ad5b20334bb7457da014cba2c270', class: "logo" }, h("slot", { key: 'f7db0f88aaca60aa3fdd0078511b63fa64096075', name: "post-logo" })), h("div", { key: '5cdb963d5f526d2c09e6088f1d0fec15388a9202', class: "sliding-controls" }, onDesktop && (h("div", { key: 'b13c2478cf96d52d0495966bcdcd2e0008a9a081', class: "audience" }, h("slot", { key: '03d8ff11bee4a766924cb03968b50488fb83c758', name: "audience" }))), h("slot", { key: 'a48370fa1234ced9ea27882cb918beb558829c4d', name: "global-nav-primary" }), (onDesktop || !this.hasMainNav) && [
-            h("slot", { key: '662dbdc1faaba785a56da6501e300ce90c56e95a', name: "global-nav-secondary" }),
-            h("slot", { key: '563e7768746790668fe003286b8bc78e6166c88d', name: "language-menu" }),
-        ], h("slot", { key: '94684b18892e5db7885ac090da8adaf070e66dc8', name: "post-login" }), onTabletAndMobile && this.hasMainNav && (h("post-togglebutton", { key: 'aade08412fd81792b03eed6ee9061c42b2676607', class: "burger-button", ref: el => (this.burgerMenuButton = el), onClick: () => this.toggleBurgerMenu() }, h("span", { key: '5a9d5ba975eecde12d6ed9b40eb01f5f1f17d9ef' }, this.textMenu), h("post-icon", { key: 'f6fe7ffe9694b2288d426031a2066edda38fabcc', "aria-hidden": "true", name: "burger", "data-showwhen": "untoggled" }), h("post-icon", { key: '5fe932daa9ab5dbfa16690690b2b727ce27cf23d', "aria-hidden": "true", name: "closex", "data-showwhen": "toggled" })))))), h("div", { key: 'ffd76274ea6aba7ec3b086c1c907eac2d4dd78aa', ref: el => (this.localHeader = el), class: { 'local-header': true, 'megadropdown-open': this.megadropdownOpen } }, h("div", { key: '401d0a456bd79d63af036bb238b87dd5980a7451', class: "section" }, h("slot", { key: '8ce9f525906f866b7b8f0d827ab1be701c618862', name: "title" }), this.hasTitle && h("slot", { key: '1107dfe235d79ca9168d02bc6364e6188044f34f', name: "local-nav" }), onDesktop && h("slot", { key: 'c34a5bb6360ff305a17d9a743e9ec8fbe4d2dae3', name: "main-nav" }), onDesktop && !this.hasTitle && h("slot", { key: 'ceb027e4f353bc4af8b6f2f840cc5d67638dc532', name: "local-nav" }))), this.hasBurgerMenu && this.renderBurgerMenu())));
+        return (h(Host, { key: '78b30321492682f5ac4779eaf79fa21de3d5b1f2', "data-version": version, "data-color-scheme": "light", "data-burger-menu": this.hasBurgerMenu, "data-menu-extended": this.burgerMenuExtended }, h("header", { key: 'd34c893f18005a1a5c3e406f1eab0d821e1d5994' }, h("div", { key: '1598f8bd0ecb90662e78280d6b9a2cffaa155994', class: "global-header" }, h("div", { key: 'cca31ad38ecf9d8c42c73d346bd9f909b06b6a9c', class: "section" }, h("div", { key: 'ab28bdc152813adb481b807220a12fc549954654', class: "logo" }, h("slot", { key: '5080891fd1cec13ed4153afce6573373c9ddb559', name: "post-logo" })), h("div", { key: '4dc43239677de2779a54947b013d2379f27d4c2e', class: "sliding-controls" }, onDesktop && (h("div", { key: 'cb3fbb2a94f8d22772d8b60af7712ac5a8199ed2', class: "audience" }, h("slot", { key: '95e06819c41abef543ec2797511f22cb1b135743', name: "audience" }))), h("slot", { key: '5db1090c38c60374f57a8a1289d058d4364efc77', name: "global-nav-primary" }), (onDesktop || !this.hasMainNav) && [
+            h("slot", { key: 'db309e50b363ee2d7a13d119dca44c6ce50e3962', name: "global-nav-secondary" }),
+            h("slot", { key: 'ec86d4748ef0bd8c46935b0262ec7752d3842f38', name: "language-menu" }),
+        ], h("slot", { key: 'c082e4a6c9a8dbb2090228c819577468f0f60edd', name: "post-login" }), onTabletAndMobile && this.hasMainNav && (h("post-togglebutton", { key: '2773e3cad4f2a8be60d25b82cae87fb5d813cafc', class: "burger-button", ref: el => (this.burgerMenuButton = el), onClick: () => this.toggleBurgerMenu() }, h("span", { key: 'bd1c2e048436e58f14a9d4fb205afb245f5d1af1' }, this.textMenu), h("post-icon", { key: '1885cff12454528cb981c0a2544531f89bc93b89', "aria-hidden": "true", name: "burger", "data-showwhen": "untoggled" }), h("post-icon", { key: '6ea75eecf1c124b83bb011f667eae4c6cc7df470', "aria-hidden": "true", name: "closex", "data-showwhen": "toggled" })))))), h("div", { key: '487dc3cc667a52f272cdcdcd546eb0b686fc6611', ref: el => (this.localHeader = el), class: { 'local-header': true, 'megadropdown-open': this.megadropdownOpen } }, h("div", { key: '1d4e73e20ee1cba7a26374166435a123c7b3b7de', class: "section" }, h("slot", { key: '8131591c29285ed586c86bb6ce89738df8e51d0b', name: "title" }), this.hasTitle && h("slot", { key: '0430da5a731063cd393a395fdd0c9ec11fed69f3', name: "local-nav" }), onDesktop && h("slot", { key: '07410195623dacda6e8fcadf69de55bb4fdf6067', name: "main-nav" }), onDesktop && !this.hasTitle && h("slot", { key: 'cf7b4cd88faa07d29670a7cb6e389e182581182a', name: "local-nav" }))), this.hasBurgerMenu && this.renderBurgerMenu())));
     }
     static get is() { return "post-header"; }
     static get encapsulation() { return "shadow"; }
@@ -415,12 +407,6 @@ export class PostHeader {
     static get elementRef() { return "host"; }
     static get watchers() {
         return [{
-                "propName": "fullWidth",
-                "methodName": "validateFullWidth"
-            }, {
-                "propName": "textMenu",
-                "methodName": "validateTextMenu"
-            }, {
                 "propName": "device",
                 "methodName": "lockBody"
             }, {
@@ -444,6 +430,14 @@ export class PostHeader {
             }];
     }
 }
+__decorate([
+    Required(),
+    Type('boolean')
+], PostHeader.prototype, "fullWidth", void 0);
+__decorate([
+    Required(),
+    Type('string')
+], PostHeader.prototype, "textMenu", void 0);
 __decorate([
     EventFrom('post-megadropdown')
 ], PostHeader.prototype, "megadropdownStateHandler", null);

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

@@ -1,7 +1,17 @@
-import { Host, h, Build } from "@stencil/core";
-import { checkEmptyOrType, checkRequiredAndType, checkEmptyOrOneOf, } from "../../utils/property-checkers/index";
-import { version } from "../../../../package";
+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 { ANIMATION_KEYS } from "../../types/icon-animations";
+import { OneOf, Required, Type } from "../../utils/index";
+import { version } from "../../../../package";
+import { Build, h, Host } from "@stencil/core";
 const CDN_URL = `https://unpkg.com/@swisspost/design-system-icons@${version}/public/post-icons/`;
 /**
  * @class PostIcon - representing a stencil component
@@ -17,21 +27,6 @@ export class PostIcon {
          */
         this.flipV = false;
     }
-    validateAnimation() {
-        checkEmptyOrOneOf(this, 'animation', ANIMATION_KEYS);
-    }
-    validateBase() {
-        checkEmptyOrType(this, 'base', 'string');
-    }
-    validateName() {
-        checkRequiredAndType(this, 'name', 'string');
-    }
-    validateRotate() {
-        checkEmptyOrType(this, 'rotate', 'number');
-    }
-    validateScale() {
-        checkEmptyOrType(this, 'scale', 'number');
-    }
     /**
      * Construct the icon URL according to the following rules:
      * 1. `@base` (absolute URL) → use directly.
@@ -44,7 +39,8 @@ export class PostIcon {
      * 5. `CDN_URL` fallback → `https://unpkg.com/...`.
      **/
     getUrl() {
-        const fileName = `${this.name}.svg`;
+        const name = this.name ?? this.host.getAttribute('name');
+        const fileName = `${name}.svg`;
         // Prioritize only data:image URLs
         if (this.url?.startsWith('data:image/')) {
             return this.url;
@@ -100,19 +96,13 @@ export class PostIcon {
             '-webkit-mask-image': `url(${url})`,
             'mask-image': `url('${url}')`,
             '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));
-    }
-    componentDidLoad() {
-        this.validateBase();
-        this.validateName();
-        this.validateScale();
-        this.validateRotate();
-        this.validateAnimation();
+                (this.rotate && !Number.isNaN(Number(this.rotate))
+                    ? ' rotate(' + this.rotate + 'deg)'
+                    : ''),
+        }).filter(([_key, value]) => value !== null));
     }
     render() {
-        return (h(Host, { key: 'f0c7dbf7fe05218aa6fc6cde30e249f1a709df27', "data-version": version }, h("span", { key: 'b814a9f52a2eee57b7a59913c84caada39f63d30', style: this.getStyles() })));
+        return (h(Host, { key: 'dc20dd6be14dd0aba54231b30be89730d4a6c757', "data-version": version }, h("span", { key: '8ef361e6b2721db5f312e0e67fc7d13cb7440abf', style: this.getStyles() })));
     }
     static get is() { return "post-icon"; }
     static get encapsulation() { return "shadow"; }
@@ -292,22 +282,20 @@ export class PostIcon {
         };
     }
     static get elementRef() { return "host"; }
-    static get watchers() {
-        return [{
-                "propName": "animation",
-                "methodName": "validateAnimation"
-            }, {
-                "propName": "base",
-                "methodName": "validateBase"
-            }, {
-                "propName": "name",
-                "methodName": "validateName"
-            }, {
-                "propName": "rotate",
-                "methodName": "validateRotate"
-            }, {
-                "propName": "scale",
-                "methodName": "validateScale"
-            }];
-    }
 }
+__decorate([
+    OneOf(ANIMATION_KEYS)
+], PostIcon.prototype, "animation", void 0);
+__decorate([
+    Type('string')
+], PostIcon.prototype, "base", void 0);
+__decorate([
+    Required(),
+    Type('string')
+], PostIcon.prototype, "name", void 0);
+__decorate([
+    Type('number')
+], PostIcon.prototype, "rotate", void 0);
+__decorate([
+    Type('number')
+], PostIcon.prototype, "scale", void 0);

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

@@ -8,11 +8,10 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
                 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 { Host, h } from "@stencil/core";
-import { checkRequiredAndType, checkRequiredAndPattern, checkEmptyOrOneOf, EventFrom, } from "../../utils/index";
+import { EventFrom, nanoid, OneOf, Pattern, Required, Type } from "../../utils/index";
 import { version } from "../../../../package";
+import { h, Host } from "@stencil/core";
 import { SWITCH_VARIANTS } from "./switch-variants";
-import { nanoid } from "nanoid";
 export class PostLanguageMenu {
     constructor() {
         this.menuId = `p${nanoid(11)}`;
@@ -25,14 +24,7 @@ export class PostLanguageMenu {
     get languageOptions() {
         return Array.from(this.host.querySelectorAll('post-language-menu-item'));
     }
-    validateTextChangeLanguage() {
-        checkRequiredAndType(this, 'textChangeLanguage', 'string');
-    }
-    validateTextCurrentLanguage() {
-        checkRequiredAndPattern(this, 'textCurrentLanguage', /#name\b/);
-    }
-    validateVariant() {
-        checkEmptyOrOneOf(this, 'variant', SWITCH_VARIANTS);
+    handleVariantChange() {
         this.updateChildrenVariant();
     }
     /* The complete accessible description */
@@ -44,9 +36,6 @@ export class PostLanguageMenu {
             : undefined;
     }
     componentDidLoad() {
-        this.validateTextChangeLanguage();
-        this.validateTextCurrentLanguage();
-        this.validateVariant();
         // Initially set variants and active language
         // Handles cases where the language-menu is rendered after the language-options have been rendered
         this.updateChildrenVariant();
@@ -92,7 +81,7 @@ export class PostLanguageMenu {
         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))));
+        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();
@@ -186,14 +175,8 @@ export class PostLanguageMenu {
     static get elementRef() { return "host"; }
     static get watchers() {
         return [{
-                "propName": "textChangeLanguage",
-                "methodName": "validateTextChangeLanguage"
-            }, {
-                "propName": "textCurrentLanguage",
-                "methodName": "validateTextCurrentLanguage"
-            }, {
                 "propName": "variant",
-                "methodName": "validateVariant"
+                "methodName": "handleVariantChange"
             }];
     }
     static get listeners() {
@@ -218,6 +201,17 @@ export class PostLanguageMenu {
             }];
     }
 }
+__decorate([
+    Required(),
+    Type('string')
+], PostLanguageMenu.prototype, "textChangeLanguage", void 0);
+__decorate([
+    Required(),
+    Pattern(/#name\b/)
+], PostLanguageMenu.prototype, "textCurrentLanguage", void 0);
+__decorate([
+    OneOf(SWITCH_VARIANTS)
+], PostLanguageMenu.prototype, "variant", void 0);
 __decorate([
     EventFrom('post-language-menu-item')
 ], PostLanguageMenu.prototype, "handlePostChange", null);

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

@@ -1,31 +1,22 @@
-import { Host, h, } from "@stencil/core";
-import { checkEmptyOrType, checkRequiredAndType, checkEmptyOrOneOf, checkEmptyOrUrl, } from "../../utils/index";
+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 { OneOf, Required, Type, Url } from "../../utils/index";
 import { version } from "../../../../package";
+import { h, Host } from "@stencil/core";
 import { SWITCH_VARIANTS } from "../post-language-menu/switch-variants";
 /**
  * @slot default - Slot for placing the content inside the anchor or button.
  */
 export class PostLanguageMenuItem {
-    validateCode() {
-        checkRequiredAndType(this, 'code', 'string');
-    }
-    validateVariant() {
-        checkEmptyOrOneOf(this, 'variant', SWITCH_VARIANTS);
-    }
-    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.');
         }
@@ -247,22 +238,20 @@ export class PostLanguageMenuItem {
         };
     }
     static get elementRef() { return "host"; }
-    static get watchers() {
-        return [{
-                "propName": "code",
-                "methodName": "validateCode"
-            }, {
-                "propName": "variant",
-                "methodName": "validateVariant"
-            }, {
-                "propName": "name",
-                "methodName": "validateName"
-            }, {
-                "propName": "description",
-                "methodName": "validateDescription"
-            }, {
-                "propName": "url",
-                "methodName": "validateUrl"
-            }];
-    }
 }
+__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);

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

@@ -1,5 +1,5 @@
-import { h, Host } from "@stencil/core";
 import { version } from "../../../../package";
+import { h, Host } from "@stencil/core";
 const INTERACTIVE_ELEMENTS = [
     'a',
     'label[for]',
@@ -55,7 +55,7 @@ export class PostLinkarea {
         }
     }
     render() {
-        return (h(Host, { key: '9db757ece0cdc82469682b1dd9683c9cd5d842c8', "data-version": version, onClick: (e) => this.dispatchClick(e) }, h("slot", { key: '7098c364b730823965b8dce1c985a1164a983476' })));
+        return (h(Host, { key: 'b79b314635a4cb302d862006d07ab5f059298382', "data-version": version, onClick: (e) => this.dispatchClick(e) }, h("slot", { key: '4e9a1ee60d499f6dd80819e68f6536b3964d3389' })));
     }
     static get is() { return "post-linkarea"; }
     static get encapsulation() { return "shadow"; }

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

@@ -8,9 +8,9 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
                 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";
+import { version } from "../../../../package";
+import { h, Host } from "@stencil/core";
 export class PostListbox {
     constructor() {
         this.highlightedIndex = -1;
@@ -60,12 +60,10 @@ export class PostListbox {
         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.
@@ -131,7 +129,7 @@ export class PostListbox {
         this.updateSelection(event.detail);
     }
     render() {
-        return (h(Host, { key: '22580e81cfb0e65becc36408f7d4523b0ad2d312', "data-version": version }, h("post-popovercontainer", { key: 'd01fad1ac1f9651360c16e7177dd1fce47795f35', placement: "bottom-start", ref: el => (this.popoverContainer = el) }, this.visibleOptions.length === 0 ? h("slot", { name: "blank-slate" }) : h("slot", null))));
+        return (h(Host, { key: 'e1e88417d8b8f66fbaf7df481fcbd9a63b6189fb', "data-version": version, role: "listbox" }, h("post-popovercontainer", { key: '0fca1baeb51be6cf5f4d30c254217dce3349a377', 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"; }

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

@@ -1,5 +1,5 @@
-import { h, Host } from "@stencil/core";
 import { version } from "../../../../package";
+import { h, Host } from "@stencil/core";
 export class PostListboxOption {
     constructor() {
         this.optionId = crypto.randomUUID();
@@ -9,9 +9,9 @@ export class PostListboxOption {
         this.highlighted = false;
     }
     render() {
-        return (h(Host, { key: 'c2e1c5052d742c62e82eaac30a01d525048b3a2e', "data-version": version, role: "option", "aria-selected": `${this.selected}`, "data-active": this.highlighted ? 'true' : null,
+        return (h(Host, { key: 'f88a84b9004a29fb7c39ea4cbc509d940d70a52d', "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: '2b0cdab57c328df649c1353c41e2c4cfe57378d0', class: "option-content" }, this.value, h("span", { key: 'e5807160223e87095dc3c0c076ec84317050cf18', class: "option-description" }, h("slot", { key: '45f0020b9eebe13b84880a842c095daa51cf0feb' }))), this.selected && h("post-icon", { key: '80a23567a10075cbc8269f4769dd7d8aba7b2961', "aria-hidden": "true", name: "checkmark" })));
+            onPointerDown: (e) => e.preventDefault(), onClick: () => this.postOptionSelected.emit(this.value), id: `post-listbox-option-${this.optionId}` }, h("span", { key: '99d154078490d171ab0e4e43b765cbffb44e721e', class: "option-content" }, this.value, h("span", { key: '609a205bb61b84d1e56e6e64282cb210f650faca', class: "option-description" }, h("slot", { key: 'd08d9dddbea69b693002a20f4127788a6a21acc1' }))), this.selected && h("post-icon", { key: '04e999451c694a0cb54e1e3ab5cd3eca29640aaf', "aria-hidden": "true", name: "checkmark" })));
     }
     static get is() { return "post-listbox-option"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/post-login-widget/post-login-widget.css

@@ -0,0 +1 @@
+:host post-menu-trigger button{display:inline-flex;position:relative;align-items:center;justify-content:center;max-width:100%;overflow:hidden;transition:opacity 250ms,border-color 250ms,background-color 250ms,color 250ms;border-width:var(--post-device-border-width-default);border-style:solid;border-color:rgba(0,0,0,0);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;min-height:var(--post-device-sizing-interactive-button-height-1);gap:var(--post-device-spacing-gap-inline-10);padding:0 var(--post-device-spacing-padding-inline-6)}:host post-menu-trigger button:hover{text-decoration:none}:host post-menu-trigger button:disabled{border-style:var(--post-core-border-style-dash)}:host post-menu-trigger 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}:host post-menu-trigger button:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-style:var(--post-core-border-style-solid) !important}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:host post-menu-trigger button:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){:host post-menu-trigger button:is(:focus-visible,:focus-within,.pretend-focus){outline-style:var(--post-core-border-style-solid) !important}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:host post-menu-trigger button:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:host post-menu-trigger button:is(a){color:LinkText;border:unset}:host post-menu-trigger button:is(button){background-color:ButtonFace !important;border:1px solid ButtonBorder !important}:host post-menu-trigger button:not(:disabled,.disabled):is(button):hover{background-color:Highlight !important}:host post-menu-trigger button:not(:disabled,.disabled):is(button):hover>post-icon{color:HighlightText !important}}:host post-menu-trigger button>post-icon{width:var(--post-device-sizing-interactive-button-icon-4);height:var(--post-device-sizing-interactive-button-icon-4)}:host post-menu-trigger button{border-radius:var(--post-device-border-radius-round) !important;border:0 none;min-height:0;padding:0}:host post-menu-trigger .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-login-widget/post-login-widget.js

@@ -1,13 +1,25 @@
-import { Build, Host, h, } from "@stencil/core";
+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 { Required, Type } from "../../utils/index";
 import { version } from "../../../../package";
+import { Build, h, Host, } from "@stencil/core";
 const SESSION_URL = 'https://n.account.post.ch/v1/session/subscribe';
 /**
- * @slot authenticated - Content rendered when the user is authenticated (e.g. user menu).
- * @slot unauthenticated - Content rendered when the user is not authenticated (e.g. login link).
+ * @slot user-links - Links to show in the user menu when the user is authenticated.
+ * @slot login-link - Content rendered when the user is not authenticated.
  */
 export class PostLoginWidget {
     constructor() {
         this.authenticated = null;
+        this.user = null;
     }
     async componentWillLoad() {
         if (Build.isBrowser) {
@@ -39,6 +51,7 @@ export class PostLoginWidget {
             }
             const json = await response.json();
             const isAuthenticated = json?.data?.email !== undefined;
+            this.user = json?.data;
             this.setAuthState(isAuthenticated);
         }
         catch {
@@ -52,13 +65,85 @@ export class PostLoginWidget {
         this.postChange.emit({ authenticated: next });
     }
     render() {
-        return (h(Host, { key: '5bb42861c3ecefa1cfb5a8a44e8d3a5a460c4f4e', "data-version": version }, this.authenticated === true ? h("slot", { name: "authenticated" }) : h("slot", { name: "unauthenticated" })));
+        return (h(Host, { key: '4aeda818bbda67c88aa188ac3bbb8f0377a5050e', "data-version": version }, this.authenticated === true ? (h("div", null, h("post-menu-trigger", { for: "user-menu-default" }, h("button", { class: "btn btn-link", type: "button" }, h("post-avatar", { firstname: this.user.name, lastname: this.user.surname, description: this.textCurrentUser.replace('{user}', `${this.user.name} ${this.user.surname}`) }), h("span", { class: "visually-hidden" }, this.textUserMenuTrigger))), h("post-menu", { label: this.textUserMenu, id: "user-menu-default" }, h("div", { slot: "header" }, h("post-avatar", { firstname: this.user.name, lastname: this.user.surname, email: this.user.email, "aria-hidden": "true" }), this.user.name, " ", this.user.surname), h("slot", { name: "user-links" })))) : (h("div", null, h("slot", { name: "login-link" })))));
     }
     static get is() { return "post-login-widget"; }
     static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["post-login-widget.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["post-login-widget.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "textCurrentUser": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Label for the \"Current user is {user}\" accessibility description.\nUse `{user}` as a placeholder \u2014 it will be replaced with the current user's name at runtime."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "text-current-user"
+            },
+            "textUserMenu": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible label for the dropdown menu"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "text-user-menu"
+            },
+            "textUserMenuTrigger": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Hidden label for the user menu trigger button, for accessibility purposes. It should describe the purpose of the button (e.g. \"Access user links\")."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "text-user-menu-trigger"
+            }
+        };
+    }
     static get states() {
         return {
-            "authenticated": {}
+            "authenticated": {},
+            "user": {}
         };
     }
     static get events() {
@@ -117,4 +202,17 @@ export class PostLoginWidget {
             }
         };
     }
+    static get elementRef() { return "host"; }
 }
+__decorate([
+    Required(),
+    Type('string')
+], PostLoginWidget.prototype, "textCurrentUser", void 0);
+__decorate([
+    Required(),
+    Type('string')
+], PostLoginWidget.prototype, "textUserMenu", void 0);
+__decorate([
+    Required(),
+    Type('string')
+], PostLoginWidget.prototype, "textUserMenuTrigger", void 0);