@swisspost/design-system-components 9.0.0-next.14 → 9.0.0-next.16

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

@@ -13,6 +13,10 @@ import { getFocusableChildren } from "../../utils/get-focusable-children";
  * @slot post-mainnavigation - Has a default slot because it's only meant to be used in the `<post-header>`.
  */
 export class PostHeader {
+    constructor() {
+        this.device = null;
+        this.mobileMenuExtended = false;
+    }
     firstFocusableEl;
     lastFocusableEl;
     scrollParent = null;
@@ -28,9 +32,10 @@ export class PostHeader {
         this.handleScrollEvent();
         this.getFocusableElements();
     }
+    componentDidLoad() {
+        this.updateLocalHeaderHeight();
+    }
     host;
-    device = null;
-    mobileMenuExtended = false;
     frozeBody(isMobileMenuExtended) {
         document.body.style.overflow = isMobileMenuExtended ? 'hidden' : '';
         if (isMobileMenuExtended) {
@@ -127,6 +132,12 @@ export class PostHeader {
             return value === 'auto' || value === 'scroll';
         });
     }
+    updateLocalHeaderHeight() {
+        requestAnimationFrame(() => {
+            const mhh = this.host.shadowRoot.querySelector('.local-header')?.clientHeight || 0;
+            this.host.style.setProperty('--main-header-height', `${mhh}px`);
+        });
+    }
     handleResize() {
         const previousDevice = this.device;
         let newDevice;
@@ -145,8 +156,7 @@ export class PostHeader {
             this.toggleMobileMenu();
             this.mobileMenuAnimation.finish(); // no animation
         }
-        const mhh = this.host.shadowRoot.querySelector('.local-header')?.clientHeight;
-        this.host.style.setProperty('--main-header-height', `${mhh}px`);
+        this.updateLocalHeaderHeight();
         // Apply only on change for doing work only when necessary
         if (newDevice !== previousDevice) {
             this.device = newDevice;
@@ -168,7 +178,7 @@ export class PostHeader {
         return (h("div", { ref: el => (this.mobileMenu = el), class: navigationClasses.join(' ') }, h("slot", { name: "post-mainnavigation" }), (this.device === 'mobile' || this.device === 'tablet') && (h("div", { class: "navigation-footer" }, h("slot", { name: "meta-navigation" }), h("slot", { name: "post-language-switch" })))));
     }
     render() {
-        return (h(Host, { key: 'efbf8028f2abf376f497081996dba759f5885630', version: version }, h("div", { key: 'ecaaea274045453ce869f36e8a1155626b1818ba', class: "global-header" }, h("div", { key: '2fda0d65321ad1cbbc47b731f095e0d9b6694d99', class: "global-sub" }, h("div", { key: '24864d5f18c9d923717cc2e996395cff3bd6ce8b', class: "logo" }, h("slot", { key: 'ba82d7f62bb845732fe6066bcdc7eef15913c9e6', name: "post-logo" }))), h("div", { key: 'a0ddea4e564fca1e286998c73fea75eb8c228428', class: "global-sub" }, this.device === 'desktop' && h("slot", { key: '0d7aa11452eb69fe28914ff7787c6dc206fd4009', name: "meta-navigation" }), h("slot", { key: 'e92b7b9db6e16e8fcecb1ca74efa63942dd542c5', name: "global-controls" }), this.device === 'desktop' && h("slot", { key: 'c68984037a71d5ac54828f6cf2367c3b07e428fc', name: "post-language-switch" }), h("div", { key: '70fb5040dc2f000c2afa286bb673ae9cf88521cf', onClick: () => this.toggleMobileMenu(), class: "mobile-toggle" }, h("slot", { key: '509fb81812262cd9efdb3a562e48f72b0d29e376', name: "post-togglebutton" })))), h("div", { key: '393d1040bad2f85caced5b4a8ff02e30fa5fd5f1', class: 'local-header ' + (this.mobileMenuExtended ? 'local-header-mobile-extended' : '') }, h("slot", { key: '786cc114aae985a0612d3cb044684290e3026462', name: "title" }), h("div", { key: 'd4f68653a09bbf0b222873ed5d23fec6ba9d8f6f', class: "local-sub" }, h("slot", { key: '0ad7dda5490964e9a8eae5e0bf66a117882f7a06', name: "local-controls" }), h("slot", { key: 'bddc01c7696f456c38c200b330767a0f1b353d88' })), this.device === 'desktop' && this.renderNavigation()), this.device !== 'desktop' && this.renderNavigation()));
+        return (h(Host, { key: '18b9e47312a3896f1c68a9270332b2bf21ea2518', version: version }, h("div", { key: '6b30ae3fc22471a7d1f29f19da944a3c4eac009c', class: "global-header" }, h("div", { key: '943cd0d6a4fa9e0b15196b54fe1f5e765b6270c5', class: "global-sub" }, h("div", { key: '7c34ab9cd2a5fb380b0201673364a275d74ca1e3', class: "logo" }, h("slot", { key: '13b6bb1b42951d4982fd0cca9f65f3cba9a361df', name: "post-logo" }))), h("div", { key: '1955153864e1825e2fd56d58b9966982bc4aeb7f', class: "global-sub" }, this.device === 'desktop' && h("slot", { key: 'f33af5becab53114e886c288feabafd4a589dab6', name: "meta-navigation" }), h("slot", { key: 'e33c827d5e0101a6fc9ccaf3f9e3b9ea1a689626', name: "global-controls" }), this.device === 'desktop' && h("slot", { key: 'bbc08ab621b41858f6f4c0fa03796c1800d3ef2b', name: "post-language-switch" }), h("div", { key: '352681a469b8dd46271ffe6b36002d174a5586c3', onClick: () => this.toggleMobileMenu(), class: "mobile-toggle" }, h("slot", { key: 'a6c79f674e94a2046f47d8fc7a6ce7722a7e5125', name: "post-togglebutton" })))), h("div", { key: '8b1219759b44feaf230a366a39ea8cc211893b9c', class: 'local-header ' + (this.mobileMenuExtended ? 'local-header-mobile-extended' : '') }, h("slot", { key: '070092f87eceb4a4ca2c19394a80ffb20833c0c9', name: "title" }), h("div", { key: '5044efdcf0a9b341eb9f168762f86dd516236ad1', class: "local-sub" }, h("slot", { key: '48e38669ec64444c48f8b84f95590d36cd090ff7', name: "local-controls" }), h("slot", { key: 'cbf9652dfc5008322459b6dcb0623135f7984e61' })), this.device === 'desktop' && this.renderNavigation()), this.device !== 'desktop' && this.renderNavigation()));
     }
     static get is() { return "post-header"; }
     static get encapsulation() { return "shadow"; }

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

@@ -15,55 +15,36 @@ const ANIMATION_KEYS = [...ANIMATION_NAMES];
  * @class PostIcon - representing a stencil component
  */
 export class PostIcon {
+    constructor() {
+        this.animation = null;
+        this.base = null;
+        this.flipH = false;
+        this.flipV = false;
+        this.name = undefined;
+        this.rotate = null;
+        this.scale = null;
+    }
     host;
-    /**
-     * The name of the animation.
-     */
-    animation = null;
     validateAnimation(newValue = this.animation) {
         if (newValue !== undefined)
             checkEmptyOrOneOf(newValue, ANIMATION_KEYS, `The post-icon "animation" prop requires one of the following values: ${ANIMATION_KEYS.join(', ')}.`);
     }
-    /**
-     * The base path, where the icons are located (must be a public url).<br/>Leave this field empty to use the default cdn url.
-     */
-    base = null;
     validateBase(newValue = this.base) {
         checkEmptyOrType(newValue, 'string', 'The post-icon "base" prop should be a string.');
     }
-    /**
-     * When set to `true`, the icon will be flipped horizontally.
-     */
-    flipH = false;
     validateFlipH(newValue = this.flipH) {
         checkEmptyOrType(newValue, 'boolean', 'The post-icon "flipH" prop should be a boolean.');
     }
-    /**
-     * When set to `true`, the icon will be flipped vertically.
-     */
-    flipV = false;
     validateFlipV(newValue = this.flipV) {
         checkEmptyOrType(newValue, 'boolean', 'The post-icon "flipV" prop should be a boolean.');
     }
-    /**
-     * The name/id of the icon (e.g. 1000, 1001, ...).
-     */
-    name;
     validateName(newValue = this.name) {
         checkNonEmpty(newValue, 'The post-icon "name" prop is required!.');
         checkType(newValue, 'string', 'The post-icon "name" prop should be a string.');
     }
-    /**
-     * The number of degree for the css rotate transformation.
-     */
-    rotate = null;
     validateRotate(newValue = this.rotate) {
         checkEmptyOrType(newValue, 'number', 'The post-icon "rotate" prop should be a number.');
     }
-    /**
-     * The number for the css scale transformation.
-     */
-    scale = null;
     validateScale(newValue = this.scale) {
         checkEmptyOrType(newValue, 'number', 'The post-icon "scale" prop should be a number.');
     }
@@ -170,8 +151,6 @@ export class PostIcon {
                     "tags": [],
                     "text": "The name of the animation."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "animation",
                 "reflect": false,
                 "defaultValue": "null"
@@ -190,8 +169,6 @@ export class PostIcon {
                     "tags": [],
                     "text": "The base path, where the icons are located (must be a public url).<br/>Leave this field empty to use the default cdn url."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "base",
                 "reflect": false,
                 "defaultValue": "null"
@@ -210,8 +187,6 @@ export class PostIcon {
                     "tags": [],
                     "text": "When set to `true`, the icon will be flipped horizontally."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "flip-h",
                 "reflect": false,
                 "defaultValue": "false"
@@ -230,8 +205,6 @@ export class PostIcon {
                     "tags": [],
                     "text": "When set to `true`, the icon will be flipped vertically."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "flip-v",
                 "reflect": false,
                 "defaultValue": "false"
@@ -250,8 +223,6 @@ export class PostIcon {
                     "tags": [],
                     "text": "The name/id of the icon (e.g. 1000, 1001, ...)."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "name",
                 "reflect": false
             },
@@ -269,8 +240,6 @@ export class PostIcon {
                     "tags": [],
                     "text": "The number of degree for the css rotate transformation."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "rotate",
                 "reflect": false,
                 "defaultValue": "null"
@@ -289,8 +258,6 @@ export class PostIcon {
                     "tags": [],
                     "text": "The number for the css scale transformation."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "scale",
                 "reflect": false,
                 "defaultValue": "null"

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

@@ -1,3 +1,3 @@
 /*!
  * Copyright 2021 by Swiss Post, Information Technology
- */post-language-option{display:inline-block}post-language-option button{padding:0;overflow:visible;border:0;background:none;color:inherit;font:inherit;-webkit-user-select:none;user-select:none;appearance:button}post-language-option a{color:inherit;text-decoration:none}post-language-option :is(a,button){cursor:pointer;display:flex;align-items:center;justify-content:center;height:100%;width:100%;padding:var(--post-language-option-padding);border-radius:2px}post-language-option :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-option :is(a,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){post-language-option :is(a,button):is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){post-language-option :is(a,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){post-language-option :is(a,button):is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}post-language-option:where([variant=list]) :is(a,button){width:40px;height:40px}post-language-option:where([variant=list]) :is(a,button):hover{color:#504f4b}post-language-option:where([variant=list]) :is(a,button)[aria-current=true],post-language-option:where([variant=list]) :is(a,button)[aria-current=page]{background-color:#050400;color:#fff}post-language-option:where([variant=list]) :is(a,button)[aria-current=true]:hover,post-language-option:where([variant=list]) :is(a,button)[aria-current=page]:hover{background-color:#504f4b}post-language-option:where([variant=menu]){width:100%}post-language-option:where([variant=menu]) :is(a,button){padding-block:13px;padding-inline:24px;box-sizing:border-box;position:relative;left:-1px;width:calc(100% + 2px)}post-language-option:where([variant=menu]) :is(a,button)[aria-current=true]::after,post-language-option:where([variant=menu]) :is(a,button)[aria-current=page]::after{content:"";left:0;height:3px;background-color:#050400;width:100%;display:block;position:absolute;bottom:3px}post-language-option:where([variant=menu]) :is(a,button)[aria-current=true]:hover::after,post-language-option:where([variant=menu]) :is(a,button)[aria-current=page]:hover::after{background-color:#504f4b}post-language-option:where([variant=menu]) :is(a,button):hover{color:#504f4b}
+ */post-language-option{display:inline-block}post-language-option button{padding:0;overflow:visible;border:0;background:none;color:inherit;font:inherit;-webkit-user-select:none;user-select:none;appearance:button}post-language-option a{color:inherit;text-decoration:none}post-language-option :is(a,button){cursor:pointer;display:flex;align-items:center;justify-content:center;height:100%;width:100%;border-radius:2px}post-language-option :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-option :is(a,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){post-language-option :is(a,button):is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){post-language-option :is(a,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){post-language-option :is(a,button):is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}post-language-option:has([aria-current]):not([aria-current=false]){display:none}post-language-option:where([variant=list]) :is(a,button){width:40px;height:40px;border-radius:2px}post-language-option:where([variant=list]) :is(a,button):hover{color:#504f4b}post-language-option:where([variant=menu]){width:100%}post-language-option:where([variant=menu]) :is(a,button){padding-block:13px;padding-inline:24px;box-sizing:border-box;position:relative;left:-1px;width:calc(100% + 2px)}

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

@@ -5,37 +5,23 @@ import { version } from "../../../../package";
  * @slot default - Slot for placing the content inside the anchor or button.
  */
 export class PostLanguageOption {
+    constructor() {
+        this.code = undefined;
+        this.active = undefined;
+        this.variant = undefined;
+        this.name = undefined;
+        this.url = undefined;
+    }
     host;
-    /**
-     *  The ISO 639 language code, formatted according to [RFC 5646 (also known as BCP 47)](https://datatracker.ietf.org/doc/html/rfc5646). For example, "de".
-     */
-    code;
     validateCode(value = this.code) {
         checkType(value, 'string', 'The "code" property of the post-language-option component must be a string.');
     }
-    /**
-     * If set to `true`, the language option is considered the current language for the page.
-     */
-    active;
     validateActiveProp(value = this.active) {
         checkEmptyOrType(value, 'boolean', 'The "active" property of the post-language-option component must be a boolean value.');
     }
-    /**
-     * The variant of the post-language-switch parent (dynamically set by the parent)
-     */
-    variant;
-    /**
-     * The full name of the language. For example, "Deutsch".
-     */
-    name;
     validateName(value = this.name) {
         checkEmptyOrType(value, 'string', 'The "name" property of the post-language-option component must be a string.');
     }
-    /**
-     * The URL used for the href attribute of the internal anchor.
-     * This field is optional; if not provided, a button will be used internally instead of an anchor.
-     */
-    url;
     validateUrl(value = this.url) {
         checkEmptyOrType(value, 'string', 'The "url" property of the post-language-option component must be a valid URL.');
     }
@@ -101,8 +87,6 @@ export class PostLanguageOption {
                     "tags": [],
                     "text": "The ISO 639 language code, formatted according to [RFC 5646 (also known as BCP 47)](https://datatracker.ietf.org/doc/html/rfc5646). For example, \"de\"."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "code",
                 "reflect": false
             },
@@ -120,8 +104,6 @@ export class PostLanguageOption {
                     "tags": [],
                     "text": "If set to `true`, the language option is considered the current language for the page."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "active",
                 "reflect": true
             },
@@ -145,8 +127,6 @@ export class PostLanguageOption {
                     "tags": [],
                     "text": "The variant of the post-language-switch parent (dynamically set by the parent)"
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "variant",
                 "reflect": false
             },
@@ -164,8 +144,6 @@ export class PostLanguageOption {
                     "tags": [],
                     "text": "The full name of the language. For example, \"Deutsch\"."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "name",
                 "reflect": false
             },
@@ -183,8 +161,6 @@ export class PostLanguageOption {
                     "tags": [],
                     "text": "The URL used for the href attribute of the internal anchor.\nThis field is optional; if not provided, a button will be used internally instead of an anchor."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "url",
                 "reflect": false
             }

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

@@ -1 +1 @@
-:host{display:block}@media screen and (max-width: 1023.98px){:host{display:flex !important;gap:.5rem}}.post-language-switch-dropdown-container{display:flex;flex-direction:column}.post-language-switch-dropdown-container>*{width:100%}.post-language-switch-trigger{cursor:pointer;padding:0;overflow:visible;border:0;background:none;color:inherit;font:inherit;-webkit-user-select:none;user-select:none;appearance:button;text-decoration:none;display:inline-flex;align-items:center;gap:var(--post-core-dimension-6);border-radius:var(--post-core-dimension-24);font-size:var(--post-core-font-size-16);padding:var(--post-core-dimension-3) var(--post-core-dimension-10)}.post-language-switch-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-switch-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-switch-trigger:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){.post-language-switch-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-switch-trigger:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}.post-language-switch-trigger:not(:disabled):hover,.post-language-switch-trigger.pretend-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-switch-trigger post-icon{height:var(--post-core-dimension-16);width:var(--post-core-dimension-16)}
+:host{display:flex}:host>span{display:flex;flex-shrink:0;width:40px;height:40px;align-items:center;justify-content:center;background-color:#050400;color:#fff;border-radius:2px}:host(:where([variant=list])){column-gap:.5rem}.post-language-switch-dropdown-container{display:flex;flex-direction:column}.post-language-switch-dropdown-container>*{width:100%}.post-language-switch-trigger{cursor:pointer;padding:0;overflow:visible;border:0;background:none;color:inherit;font:inherit;-webkit-user-select:none;user-select:none;appearance:button;text-decoration:none;display:inline-flex;align-items:center;gap:var(--post-core-dimension-6);border-radius:var(--post-core-dimension-24);font-size:var(--post-core-font-size-16);padding:var(--post-core-dimension-3) var(--post-core-dimension-10)}.post-language-switch-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-switch-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-switch-trigger:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){.post-language-switch-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-switch-trigger:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}.post-language-switch-trigger:not(:disabled):hover,.post-language-switch-trigger.pretend-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-switch-trigger post-icon{height:var(--post-core-dimension-16);width:var(--post-core-dimension-16)}

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

@@ -4,32 +4,22 @@ import { version } from "../../../../package";
 import { SWITCH_VARIANTS } from "./switch-variants";
 import { nanoid } from "nanoid";
 export class PostLanguageSwitch {
+    constructor() {
+        this.caption = undefined;
+        this.description = undefined;
+        this.variant = 'list';
+        this.activeLang = undefined;
+    }
     host;
-    /**
-     * A title for the list of language options
-     */
-    caption;
     validateCaption(value = this.caption) {
         checkType(value, 'string', 'The "caption" property of the post-language-switch component must be a string.');
     }
-    /**
-     * A descriptive text for the list of language options
-     */
-    description;
     validateDescription(value = this.description) {
         checkType(value, 'string', 'The "description" property of the post-language-switch component must be a string.');
     }
-    /**
-     * Variant that determines the rendering of the language switch either as a list (used on mobile in the header) or a dropdown (used on desktop in the header)
-     */
-    variant = 'list';
     validateVariant(value = this.variant) {
         checkEmptyOrOneOf(value, SWITCH_VARIANTS, `The "variant" property of the post-language-switch component must be:  ${SWITCH_VARIANTS.join(', ')}`);
     }
-    /**
-     * The active language of the language switch
-     */
-    activeLang;
     connectedCallback() {
         this.updateChildrenVariant();
         // Get the active language based on children's active state
@@ -71,10 +61,10 @@ export class PostLanguageSwitch {
     }
     menuId = `p${nanoid(11)}`;
     renderList() {
-        return (h(Host, { "data-version": version, "aria-label": `${this.caption}, ${this.description}`, "aria-role": "list" }, h("slot", null)));
+        return (h(Host, { "data-version": version, role: "list", "aria-label": this.caption }, h("span", { "aria-label": this.description, role: "listitem" }, this.activeLang.toUpperCase()), h("slot", null)));
     }
     renderDropdown() {
-        return (h(Host, { "data-version": version }, h("post-menu-trigger", { for: this.menuId }, h("button", { class: "post-language-switch-trigger", "aria-label": `${this.caption}, ${this.description}` }, this.activeLang.toUpperCase(), h("post-icon", { "aria-hidden": "true", name: "chevrondown" }))), h("post-menu", { id: this.menuId, class: "post-language-switch-dropdown-container" }, h("slot", null))));
+        return (h(Host, { "data-version": version }, h("post-menu-trigger", { for: this.menuId }, h("button", { class: "post-language-switch-trigger", "aria-label": this.description }, this.activeLang.toUpperCase(), h("post-icon", { "aria-hidden": "true", name: "chevrondown" }))), h("post-menu", { id: this.menuId, class: "post-language-switch-dropdown-container", "aria-label": this.caption }, h("slot", null))));
     }
     render() {
         return this.variant === 'list' ? this.renderList() : this.renderDropdown();
@@ -107,8 +97,6 @@ export class PostLanguageSwitch {
                     "tags": [],
                     "text": "A title for the list of language options"
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "caption",
                 "reflect": false
             },
@@ -126,8 +114,6 @@ export class PostLanguageSwitch {
                     "tags": [],
                     "text": "A descriptive text for the list of language options"
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "description",
                 "reflect": false
             },
@@ -151,8 +137,6 @@ export class PostLanguageSwitch {
                     "tags": [],
                     "text": "Variant that determines the rendering of the language switch either as a list (used on mobile in the header) or a dropdown (used on desktop in the header)"
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "variant",
                 "reflect": false,
                 "defaultValue": "'list'"

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

@@ -6,19 +6,12 @@ import { nanoid } from "nanoid";
  * @slot post-list-item - Slot for placing post-list-item components.
  */
 export class PostList {
+    constructor() {
+        this.titleId = undefined;
+        this.titleHidden = false;
+        this.horizontal = false;
+    }
     host;
-    /**
-     * The unique title of the list that is also referenced in the labelledby
-     */
-    titleId;
-    /**
-     * If `true`, the list title will be hidden. Otherwise, it will be displayed.`
-     */
-    titleHidden = false;
-    /**
-     * The list can become horizontal by setting `horizontal="true"` or just `horizontal`
-     */
-    horizontal = false;
     titleEl;
     componentWillLoad() {
         /**
@@ -64,8 +57,6 @@ export class PostList {
                     "tags": [],
                     "text": "If `true`, the list title will be hidden. Otherwise, it will be displayed.`"
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "title-hidden",
                 "reflect": false,
                 "defaultValue": "false"
@@ -84,8 +75,6 @@ export class PostList {
                     "tags": [],
                     "text": "The list can become horizontal by setting `horizontal=\"true\"` or just `horizontal`"
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "horizontal",
                 "reflect": true,
                 "defaultValue": "false"

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

@@ -5,11 +5,10 @@ import { checkEmptyOrUrl } from "../../utils/index";
  * @slot default - Slot for placing hidden descriptive text. If `url` is set, this text will serve as the accessible name of the link; otherwise, it will be used as the title of the SVG.
  */
 export class PostLogo {
+    constructor() {
+        this.url = undefined;
+    }
     host;
-    /**
-     * The URL to which the user is redirected upon clicking the logo.
-     */
-    url;
     validateUrl() {
         checkEmptyOrUrl(this.url, 'The "url" property of the post-logo is invalid');
     }
@@ -60,8 +59,6 @@ export class PostLogo {
                     "tags": [],
                     "text": "The URL to which the user is redirected upon clicking the logo."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "url",
                 "reflect": false
             }

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

@@ -5,6 +5,11 @@ const NAVBAR_DISABLE_DURATION = 400; // Duration to temporarily disable navbar i
 const NAVIGATION_LIST_SELECTOR = 'post-list:not(post-megadropdown *) > [role="list"]';
 const NAVIGATION_ITEM_SELECTOR = ':is(post-list-item > a, post-list-item > post-megadropdown-trigger > button):not(post-megadropdown *)';
 export class PostMainnavigation {
+    constructor() {
+        this.canScrollLeft = false;
+        this.canScrollRight = false;
+        this.translateAmount = 0;
+    }
     header;
     navbar;
     rightScrollButton;
@@ -20,9 +25,6 @@ export class PostMainnavigation {
         this.checkScrollability();
     });
     host;
-    canScrollLeft = false;
-    canScrollRight = false;
-    translateAmount = 0;
     /**
      * Update navbar translation when 'translateAmount' changes and recalculate scrollability
      */

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

@@ -1,21 +1,17 @@
 import { getFocusableChildren } from "../../utils/get-focusable-children";
 import { h, Host } from "@stencil/core";
 export class PostMegadropdown {
+    constructor() {
+        this.device = undefined;
+        this.isVisible = false;
+        this.animationClass = null;
+    }
     header;
     firstFocusableEl;
     lastFocusableEl;
-    device;
     host;
     /** Tracks the currently active dropdown instance. */
     static activeDropdown = null;
-    /**
-     * Holds the current visibility state of the dropdown.
-     * This state is internally managed to track whether the dropdown is open (`true`) or closed (`false`),
-     * and updates automatically when the dropdown is toggled.
-     */
-    isVisible = false;
-    /** Holds the current animation class. */
-    animationClass = null;
     /**
      * Emits when the dropdown is shown or hidden.
      * The event payload is a boolean: `true` when the dropdown was opened, `false` when it was closed.
@@ -49,9 +45,11 @@ export class PostMegadropdown {
             // Close the previously active dropdown without animation
             PostMegadropdown.activeDropdown.forceClose();
         }
+        else {
+            this.animationClass = 'slide-in';
+        }
         this.isVisible = true;
         this.host.addEventListener('keydown', e => this.keyboardHandler(e));
-        this.animationClass = 'slide-in';
         PostMegadropdown.activeDropdown = this;
         this.postToggleMegadropdown.emit(this.isVisible);
         this.addOutsideClickListener();
@@ -61,6 +59,7 @@ export class PostMegadropdown {
      */
     async hide() {
         this.animationClass = 'slide-out';
+        PostMegadropdown.activeDropdown = null;
         this.host.removeEventListener('keydown', e => this.keyboardHandler(e));
     }
     connectedCallback() {
@@ -131,7 +130,7 @@ export class PostMegadropdown {
     }
     render() {
         const containerStyle = this.isVisible ? {} : { display: 'none' };
-        return (h(Host, { key: '5aa08b01be715325182c245e1b0ae2456bcc5df6' }, h("div", { key: '0737c9368ecbffac59bbdf47fabac3f3b94ae7bb', class: `megadropdown-container ${this.animationClass || ''}`, style: containerStyle, onAnimationEnd: () => this.handleAnimationEnd() }, h("div", { key: 'efe49f3f9cdcd99e2feca78b772c944405e19f21', class: "megadropdown" }, h("div", { key: '14dd7ff2f7e7b1eb91f2673a25d7ccafffe4f9d0', onClick: () => this.hide(), class: "back-button" }, h("slot", { key: '554e30e6408c0bef0549f5e2c31dcd8b90ceee40', name: "back-button" })), h("div", { key: '4e7335152d7b6649918adf075213ebbf8b8ddeaa', onClick: () => this.hide(), class: "close-button" }, h("slot", { key: 'db90f3a5334ce723c0ee672a96167197ca25b545', name: "close-button" })), h("slot", { key: 'b11b1d16147f88103f2eb24c8dd21394de53f69c', name: "megadropdown-title" }), h("div", { key: '6d837c1a70f66f00097fb531058750fbac6fd41a', class: "megadropdown-content" }, h("slot", { key: 'be685185f04e44d867167f918494d086856b5928' }))))));
+        return (h(Host, { key: '11be74da0c6d35e1a50c954735a6b1f079cd0eb6' }, h("div", { key: '202023b2495012f78ba761f20aef1ba0325a98f0', class: `megadropdown-container ${this.animationClass || ''}`, style: containerStyle, onAnimationEnd: () => this.handleAnimationEnd() }, h("div", { key: '87ac87a83de7ce798f5d9057b992893bfc00f2e1', class: "megadropdown" }, h("div", { key: '650738a55e5007b9ae0c3ee30fb2f1ae53152744', onClick: () => this.hide(), class: "back-button" }, h("slot", { key: 'a7b70ce1fbc7090807b8d60efce6cb83eb06674e', name: "back-button" })), h("div", { key: '812d3458649669e867d7d761079299b64d9e4e4d', onClick: () => this.hide(), class: "close-button" }, h("slot", { key: '2ee2df463dfd6667b729fd1b47987ea40e8d9d5f', name: "close-button" })), h("slot", { key: 'a5d0029319e34b652923d07fcddd5cb647912b03', name: "megadropdown-title" }), h("div", { key: 'c563cf50e3d9a1a466b9aec386982c80569ac094', class: "megadropdown-content" }, h("slot", { key: 'a05eeceb8fdbfc4373ee7d42d4f583475b44b4dc' }))))));
     }
     static get is() { return "post-megadropdown"; }
     static get originalStyleUrls() {

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

@@ -2,15 +2,11 @@ import { h, Host } from "@stencil/core";
 import { version } from "../../../../package";
 import { checkType } from "../../utils/index";
 export class PostMegadropdownTrigger {
-    /**
-     * ID of the mega dropdown element that this trigger is linked to. Used to open and close the specified mega dropdown.
-     */
-    for;
+    constructor() {
+        this.for = undefined;
+        this.ariaExpanded = false;
+    }
     host;
-    /**
-     * Manages the accessibility attribute `aria-expanded` to indicate whether the associated mega dropdown is expanded or collapsed.
-     */
-    ariaExpanded = false;
     /**
      * Reference to the slotted button within the trigger, if present.
      * Used to manage click and key events for mega dropdown control.
@@ -89,8 +85,6 @@ export class PostMegadropdownTrigger {
                     "tags": [],
                     "text": "ID of the mega dropdown element that this trigger is linked to. Used to open and close the specified mega dropdown."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "for",
                 "reflect": false
             }

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

@@ -3,6 +3,10 @@ import { version } from "../../../../package";
 import { getFocusableChildren } from "../../utils/get-focusable-children";
 import { getRoot } from "../../utils/index";
 export class PostMenu {
+    constructor() {
+        this.placement = 'bottom';
+        this.isVisible = false;
+    }
     popoverRef;
     lastFocusedElement = null;
     KEYCODES = {
@@ -16,18 +20,6 @@ export class PostMenu {
         ESCAPE: 'Escape',
     };
     host;
-    /**
-     * Defines the placement of the tooltip according to the floating-ui options available at https://floating-ui.com/docs/computePosition#placement.
-     * Tooltips are automatically flipped to the opposite side if there is not enough available space and are shifted
-     * towards the viewport if they would overlap edge boundaries.
-     */
-    placement = 'bottom';
-    /**
-     * Holds the current visibility state of the menu.
-     * This state is internally managed to track whether the menu is open (`true`) or closed (`false`),
-     * and updates automatically when the menu is toggled.
-     */
-    isVisible = false;
     /**
      * Emits when the menu is shown or hidden.
      * The event payload is a boolean: `true` when the menu was opened, `false` when it was closed.
@@ -194,8 +186,6 @@ export class PostMenu {
                     "tags": [],
                     "text": "Defines the placement of the tooltip according to the floating-ui options available at https://floating-ui.com/docs/computePosition#placement.\nTooltips are automatically flipped to the opposite side if there is not enough available space and are shifted\ntowards the viewport if they would overlap edge boundaries."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "placement",
                 "reflect": false,
                 "defaultValue": "'bottom'"

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

@@ -2,15 +2,11 @@ import { h, Host } from "@stencil/core";
 import { version } from "../../../../package";
 import { checkType, getRoot } from "../../utils/index";
 export class PostMenuTrigger {
-    /**
-     * ID of the menu element that this trigger is linked to. Used to open and close the specified menu.
-     */
-    for;
+    constructor() {
+        this.for = undefined;
+        this.ariaExpanded = false;
+    }
     host;
-    /**
-     * Manages the accessibility attribute `aria-expanded` to indicate whether the associated menu is expanded or collapsed.
-     */
-    ariaExpanded = false;
     /**
      * Reference to the slotted button within the trigger, if present.
      * Used to manage click and key events for menu control.
@@ -100,8 +96,6 @@ export class PostMenuTrigger {
                     "tags": [],
                     "text": "ID of the menu element that this trigger is linked to. Used to open and close the specified menu."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "for",
                 "reflect": false
             }