@swisspost/design-system-components 9.0.0-next.33 → 9.0.0-next.35

package/loaders/post-collapsible2.js

@@ -1,9 +1,10 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { v as version } from './package.js';
+import { I as IS_BROWSER } from './breakpoints.js';
 import { c as checkEmptyOrType } from './index2.js';
 
 function isMotionReduced() {
-    return window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+    return IS_BROWSER ? window.matchMedia('(prefers-reduced-motion: reduce)').matches : false;
 }
 
 const collapseDuration = 350;
@@ -15,7 +16,8 @@ const animationOptions = {
     fill: 'forwards',
 };
 function collapse(el) {
-    const expandedKeyframe = { height: window.getComputedStyle(el).height };
+    const elHeight = IS_BROWSER ? window.getComputedStyle(el).height : `${el.scrollHeight}px`;
+    const expandedKeyframe = { height: elHeight };
     return el.animate([expandedKeyframe, collapsedKeyframe], animationOptions);
 }
 function expand(el) {
@@ -33,21 +35,14 @@ const PostCollapsible = /*@__PURE__*/ proxyCustomElement(class PostCollapsible e
         this.__registerHost();
         this.__attachShadow();
         this.postToggle = createEvent(this, "postToggle", 7);
+        this.isLoaded = false;
+        this.isOpen = true;
         this.collapsed = false;
     }
-    isLoaded = false;
-    isOpen = true;
-    get host() { return this; }
     collapsedChange() {
         checkEmptyOrType(this, 'collapsed', 'boolean');
         void this.toggle(!this.collapsed);
     }
-    /**
-     * An event emitted when the collapse element is shown or hidden, before the transition.
-     *
-     * The event payload is a boolean: `true` if the collapsible was opened, `false` if it was closed.
-     */
-    postToggle;
     componentDidLoad() {
         this.collapsedChange();
         this.isLoaded = true;
@@ -72,6 +67,7 @@ const PostCollapsible = /*@__PURE__*/ proxyCustomElement(class PostCollapsible e
         const isHostRendered = this.host.offsetParent;
         if (isHostRendered)
             animation.commitStyles();
+        this.updateTriggers();
         return open;
     }
     /**
@@ -82,8 +78,9 @@ const PostCollapsible = /*@__PURE__*/ proxyCustomElement(class PostCollapsible e
         triggers.forEach(trigger => trigger.update());
     }
     render() {
-        return (h(Host, { key: 'a43e25138933a758759b4adcca249757db75cc4b', "data-version": version, tabindex: this.collapsed ? -1 : undefined }, h("slot", { key: '2936f71a6fb3ddedda372e8da4a19dbceecaefa6' })));
+        return (h(Host, { key: 'a678bc639dfd7686d8e1bd57ca0f09984a24ab61', "data-version": version, tabindex: this.collapsed ? -1 : undefined }, h("slot", { key: 'e0b88ac152fa09314b4bc01c9abdb11480e2cb4d' })));
     }
+    get host() { return this; }
     static get watchers() { return {
         "collapsed": ["collapsedChange"]
     }; }

package/loaders/post-footer.js

@@ -14,15 +14,17 @@ const PostFooter$1 = /*@__PURE__*/ proxyCustomElement(class PostFooter extends H
         super();
         this.__registerHost();
         this.__attachShadow();
+        this.breakpointChange = (e) => {
+            this.isMobile = e.detail === 'mobile';
+        };
         this.label = undefined;
         this.isMobile = breakpoint.get('name') === 'mobile';
     }
-    get host() { return this; }
     connectedCallback() {
-        window.addEventListener('postBreakpoint:name', this.breakpointChange.bind(this));
+        window.addEventListener('postBreakpoint:name', this.breakpointChange);
     }
-    breakpointChange(e) {
-        this.isMobile = e.detail === 'mobile';
+    disconnectedCallback() {
+        window.removeEventListener('postBreakpoint:name', this.breakpointChange);
     }
     renderAccordion() {
         return (h("div", { class: "footer-grid" }, h("post-accorddion", { "heading-level": "3", multiple: true }, h("post-accordion-item", { collapsed: true }, h("span", { slot: "header" }, h("slot", { name: "grid-1-title" })), h("slot", { name: "grid-1" })), h("post-accordion-item", { collapsed: true }, h("span", { slot: "header" }, h("slot", { name: "grid-2-title" })), h("slot", { name: "grid-2" })), h("post-accordion-item", { collapsed: true }, h("span", { slot: "header" }, h("slot", { name: "grid-3-title" })), h("slot", { name: "grid-3" })), h("post-accordion-item", { collapsed: true }, h("span", { slot: "header" }, h("slot", { name: "grid-4-title" })), h("slot", { name: "grid-4" })))));
@@ -31,11 +33,9 @@ const PostFooter$1 = /*@__PURE__*/ proxyCustomElement(class PostFooter extends H
         return (h("div", { class: "footer-grid" }, h("div", null, h("slot", { name: "grid-1" })), h("div", null, h("slot", { name: "grid-2" })), h("div", null, h("slot", { name: "grid-3" })), h("div", null, h("slot", { name: "grid-4" }))));
     }
     render() {
-        return (h(Host, { key: '14370a1cfd730a0b0353c88c95f265aefb57c480', "data-version": version }, h("footer", { key: '7208e9d465eb0b469887e7cfae66674db2092dbd' }, h("h2", { key: 'b392c866326374ae27704baaba0dd28c3001ee62', class: "visually-hidden" }, this.label), h("div", { key: '13411ad6e0b55ee17cf9bf77b155aa1c2810f057', class: "footer-container" }, this.isMobile ? this.renderAccordion() : this.renderGrid(), h("div", { key: '4815ae94cd43eca92482ad3c93f107243b26890e', class: "footer-column" }, h("div", { key: 'edc787dc5fc96169c323f15254b6088024a6f19d', class: "footer-socialmedia" }, h("slot", { key: '0971e342ac6f3913c408a535ce0746080e3f57af', name: "socialmedia" })), h("div", { key: 'da583c9ed819181bf2732277f4e6ee22df2e3022', class: "footer-app" }, h("slot", { key: 'b6dab5cfa1f4dc9c049f24d3e08416ef5a27e0aa', name: "app" }))), h("div", { key: '53a5c04129d24dfb64eedd46e95b5c78142a3fd7', class: "footer-businesssectors" }, h("slot", { key: '470f4294778b8978bf6eb168e2b47ff29ef43d07', name: "businesssectors" })), h("div", { key: '45d734ded794352b951f2891bbdba081e05a99d5', class: "footer-meta" }, h("slot", { key: '4d0da53c2eb79e111f0f05278a0972f046eebfa9', name: "meta" })), h("div", { key: 'f95fb7ed3cc09218a3d4a554c619b6f379d5135d', class: "footer-copyright" }, h("slot", { key: '9cdcec805152413693dced0f0d55ac1b1121c70e', name: "copyright" }))))));
-    }
-    disconnectedCallback() {
-        window.removeEventListener('postBreakpoint:name', this.breakpointChange.bind(this));
+        return (h(Host, { key: '4058ba0a63a666b82d274d1c35397c97d280ba49', "data-version": version }, h("footer", { key: '27adf1e2a1439fd69efd6e571fcdd6851304c92a' }, h("h2", { key: '1ca0cd955ec5e6d315521eb5c28c5963ed44856d', class: "visually-hidden" }, this.label), h("div", { key: '27a6f520dee9d6294fa3cd4ebc6fd5062ac327ce', class: "footer-container" }, this.isMobile ? this.renderAccordion() : this.renderGrid(), h("div", { key: '5607004d5e3ea553a86d476ca459b3b3632ef12d', class: "footer-column" }, h("div", { key: 'cd4727970358ffad4ca28fffaccc8a5eab4dec27', class: "footer-socialmedia" }, h("slot", { key: '92e105af21b69640a07c2d35c24bff6aae84abb6', name: "socialmedia" })), h("div", { key: '904b787df3f192593408d99857e213143cec6706', class: "footer-app" }, h("slot", { key: '2f4ab14e20737c6035c175e58982464fe6987724', name: "app" }))), h("div", { key: 'c85b261b4ae0cb1e27f424f460fa2838e1174fb0', class: "footer-businesssectors" }, h("slot", { key: 'c66baa3a1b689d881db68448b9d72d47acd11c7c', name: "businesssectors" })), h("div", { key: '4eebc88279f29eef028766c1fcb90effc1aaf1ca', class: "footer-meta" }, h("slot", { key: 'd689d7c14af01dc13c7f9f0fd170f3974150b9aa', name: "meta" })), h("div", { key: '36f87386755a4ae1186109b46609c6ad9c1d5041', class: "footer-copyright" }, h("slot", { key: 'c37231f795b1a5a407f83aeaf8a8b093713b8db1', name: "copyright" }))))));
     }
+    get host() { return this; }
     static get style() { return PostFooterStyle0; }
 }, [1, "post-footer", {
         "label": [1],

package/loaders/post-header.js

@@ -138,17 +138,10 @@ function throttle (delay, callback, options) {
   return wrapper;
 }
 
-const postHeaderCss = "*,::before,::after{box-sizing:border-box}:host{z-index:1020;position:relative;--global-header-top:calc( (var(--post-global-header-height) - var(--post-global-header-reduced-height)) * -1 );--local-header-top:calc( -1 * (var(--post-local-header-height) - var(--post-main-navigation-height)) + var(--post-global-header-reduced-height) );--logo-height:calc(var(--post-global-header-height) - var(--post-header-scroll-top));--global-controls-top:calc(min((var(--post-header-scroll-top) / 4), 20px) * -1)}:host:has(.global-sub>*:not(.logo):focus-within),:host:has(.local-sub:focus-within){--global-header-top:0;--local-header-top:var(--post-global-header-height);--logo-height:var(--post-global-header-height);--global-controls-top:0}:host(:not(:has([slot=title]))) .local-header{padding-block-start:0}:host(:not(:has([slot=title]))) .local-sub{display:none}.d-flex{display:flex}.space-between{justify-content:space-between}.global-header{background-color:#fc0;display:flex;justify-content:space-between;position:sticky;padding-inline:4px;height:var(--post-global-header-height)}@media screen and (max-width: 1023.98px){.global-header{z-index:3;inset-block-start:0}}@media screen and (min-width: 1024px){.global-header{z-index:5;padding-inline-end:12px;inset-block-start:var(--global-header-top);transition:inset-block-start .2s ease-in-out}}.global-sub{display:flex;align-items:center;gap:24px}@media screen and (min-width: 1024px){.global-sub:not(:has(.logo)){position:relative;transition:inset-block-start .2s ease-in-out;inset-block-start:var(--global-controls-top)}}.align-end{align-items:flex-end}.logo{flex:1 0 auto;height:var(--post-global-header-height);width:var(--post-global-header-height);min-height:var(--post-global-header-reduced-height);align-self:flex-end}@media screen and (min-width: 1024px){.logo{transition:height .2 ease-in-out;height:var(--logo-height)}}::slotted(ul){margin-block:0 !important;list-style:none;display:flex;padding-inline-start:0;gap:1rem;flex-shrink:0 !important}.local-header{display:flex;position:sticky;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px;min-height:var(--post-local-header-min-height);background:#fff;transition:box-shadow .2s ease-in-out}.local-header::after{content:\"\";position:absolute;width:100%;height:1px;background-color:#e1e0dc;inset-block-end:-1px;z-index:1}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.local-header::after{background-color:Highlight}}@media screen and (min-width: 1024px){.local-header{z-index:3;inset-block-start:var(--local-header-top);padding-block-start:18px;box-shadow:var(--post-device-elevation-300);transition:box-shadow .2s ease-in-out,inset-block-start .2s ease-in-out}}@media screen and (max-width: 1023.98px){.local-header{z-index:2;inset-block-start:var(--post-global-header-height);padding-block:8px;flex-wrap:wrap;gap:12px}.local-header.local-header-mobile-extended::after{inset-block-end:0}.local-header:not(.local-header-mobile-extended){box-shadow:var(--post-device-elevation-300)}}.local-sub{margin-inline-end:8px}@media screen and (max-width: 1023.98px){.local-sub{margin-inline-end:4px}}::slotted(.list-inline){margin:0 !important;z-index:3 !important;position:relative !important}@media screen and (min-width: 1024px){.mobile-toggle{display:none}}.navigation{width:100%}@media screen and (min-width: 1024px){.navigation{inset-block-start:var(--post-global-header-reduced-height)}.navigation::before{display:block;content:\"\";position:absolute;inset:0;z-index:2;background:#fff}}@media screen and (max-width: 1023.98px){.navigation{position:sticky;z-index:1;inset-inline:0;inset-block-start:var(--post-header-height)}.mobile-menu{background-color:#fafafa}::slotted(post-mainnavigation),.navigation-footer{display:none;flex-direction:column;padding-block:16px 24px;padding-inline:32px}.navigation.extended ::slotted(post-mainnavigation),.navigation.extended .navigation-footer{display:flex}.navigation.extended>div{display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden;height:calc(min(var(--header-scroll-parent-height, 100dvh),100dvh) - var(--post-header-height))}.navigation.extended.megadropdown-open>div{overflow-y:hidden}.navigation.extended ::slotted(post-mainnavigation){flex-grow:1 !important}::slotted(post-mainnavigation){gap:32px}.navigation-footer{background-color:#f0efed;gap:24px}}@media screen and (max-width: 599.98px){::slotted(post-mainnavigation),.navigation-footer{padding-inline:16px}}";
+const postHeaderCss = "*,::before,::after{box-sizing:border-box}:host{z-index:1020;position:relative;--global-header-top:calc( (var(--post-global-header-height) - var(--post-global-header-reduced-height)) * -1 );--local-header-top:calc( -1 * (var(--post-local-header-height) - var(--post-main-navigation-height)) + var(--post-global-header-reduced-height) );--logo-height:calc(var(--post-global-header-height) - var(--post-header-scroll-top, 0px));--global-controls-top:calc(min((var(--post-header-scroll-top) / 4), 20px) * -1)}:host:has(.global-sub>*:not(.logo):focus-within),:host:has(.local-sub:focus-within){--global-header-top:0;--local-header-top:var(--post-global-header-height);--logo-height:var(--post-global-header-height);--global-controls-top:0}:host(:not(:has([slot=title]))) .local-header{padding-block-start:0}:host(:not(:has([slot=title]))) .local-sub{display:none}.d-flex{display:flex}.space-between{justify-content:space-between}.global-header{background-color:#fc0;display:flex;justify-content:space-between;position:sticky;padding-inline:4px;height:var(--post-global-header-height)}@media screen and (max-width: 1023.98px){.global-header{z-index:3;inset-block-start:0}}@media screen and (min-width: 1024px){.global-header{z-index:5;padding-inline-end:12px;inset-block-start:var(--global-header-top);transition:inset-block-start .2s ease-in-out}}.global-sub{display:flex;align-items:center;gap:24px}@media screen and (min-width: 1024px){.global-sub:not(:has(.logo)){position:relative;transition:inset-block-start .2s ease-in-out;inset-block-start:var(--global-controls-top)}}.align-end{align-items:flex-end}.logo{flex:1 0 auto;height:var(--post-global-header-height);width:var(--post-global-header-height);min-height:var(--post-global-header-reduced-height);align-self:flex-end}@media screen and (min-width: 1024px){.logo{transition:height .2 ease-in-out;height:var(--logo-height)}}::slotted(ul){margin-block:0 !important;list-style:none;display:flex;padding-inline-start:0;gap:1rem;flex-shrink:0 !important}.local-header{display:flex;position:sticky;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px;min-height:var(--post-local-header-min-height);background:#fff;transition:box-shadow .2s ease-in-out}.local-header::after{content:\"\";position:absolute;width:100%;height:1px;background-color:#e1e0dc;inset-block-end:-1px;z-index:1}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.local-header::after{background-color:Highlight}}@media screen and (min-width: 1024px){.local-header{z-index:3;inset-block-start:var(--local-header-top);padding-block-start:18px;box-shadow:var(--post-device-elevation-300);transition:box-shadow .2s ease-in-out,inset-block-start .2s ease-in-out}}@media screen and (max-width: 1023.98px){.local-header{z-index:2;inset-block-start:var(--post-global-header-height);padding-block:8px;flex-wrap:wrap;gap:12px}.local-header.local-header-mobile-extended::after{inset-block-end:0}.local-header:not(.local-header-mobile-extended){box-shadow:var(--post-device-elevation-300)}}.local-sub{margin-inline-end:8px}@media screen and (max-width: 1023.98px){.local-sub{margin-inline-end:4px}}::slotted(.list-inline){margin:0 !important;z-index:3 !important;position:relative !important}@media screen and (min-width: 1024px){.mobile-toggle{display:none}}.navigation{width:100%}@media screen and (min-width: 1024px){.navigation{inset-block-start:var(--post-global-header-reduced-height)}.navigation::before{display:block;content:\"\";position:absolute;inset:0;z-index:2;background:#fff}}@media screen and (max-width: 1023.98px){.navigation{position:sticky;z-index:1;inset-inline:0;inset-block-start:var(--post-header-height)}.mobile-menu{background-color:#fafafa}::slotted(post-mainnavigation),.navigation-footer{display:none;flex-direction:column;padding-block:16px 24px;padding-inline:32px}.navigation.extended ::slotted(post-mainnavigation),.navigation.extended .navigation-footer{display:flex}.navigation.extended>div{display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden;height:calc(min(var(--header-scroll-parent-height, 100dvh),100dvh) - var(--post-header-height))}.navigation.extended.megadropdown-open>div{overflow-y:hidden}.navigation.extended ::slotted(post-mainnavigation){flex-grow:1 !important}::slotted(post-mainnavigation){gap:32px}.navigation-footer{background-color:#f0efed;gap:24px}}@media screen and (max-width: 599.98px){::slotted(post-mainnavigation),.navigation-footer{padding-inline:16px}}";
 const PostHeaderStyle0 = postHeaderCss;
 
 const PostHeader$1 = /*@__PURE__*/ proxyCustomElement(class PostHeader extends HTMLElement {
-    firstFocusableEl;
-    lastFocusableEl;
-    mobileMenu;
-    mobileMenuAnimation;
-    throttledResize = throttle(50, () => this.handleResize());
-    scrollParentResizeObserver;
-    localHeaderResizeObserver;
     get scrollParent() {
         const frozenScrollParent = document.querySelector('[data-post-scroll-locked]');
         if (frozenScrollParent)
@@ -163,7 +156,6 @@ const PostHeader$1 = /*@__PURE__*/ proxyCustomElement(class PostHeader extends H
         }
         return document.body;
     }
-    get host() { return this; }
     lockBody(newValue, _oldValue, propName) {
         const scrollParent = this.scrollParent;
         const mobileMenuExtended = propName === 'mobileMenuExtended' ? newValue : this.mobileMenuExtended;
@@ -176,15 +168,20 @@ const PostHeader$1 = /*@__PURE__*/ proxyCustomElement(class PostHeader extends H
             this.host.removeEventListener('keydown', this.keyboardHandler);
         }
     }
-    /**
-     * An event emitted when the device has changed
-     */
-    postUpdateDevice;
     constructor() {
         super();
         this.__registerHost();
         this.__attachShadow();
         this.postUpdateDevice = createEvent(this, "postUpdateDevice", 7);
+        this.throttledResize = throttle(50, () => this.handleResize());
+        this.megedropdownStateHandler = (event) => {
+            eventGuard(this.host, event, {
+                targetLocalName: 'post-megadropdown',
+                delegatorSelector: 'post-header',
+            }, () => {
+                this.megadropdownOpen = event.detail.isVisible;
+            });
+        };
         this.device = null;
         this.mobileMenuExtended = false;
         this.megadropdownOpen = false;
@@ -206,10 +203,12 @@ const PostHeader$1 = /*@__PURE__*/ proxyCustomElement(class PostHeader extends H
         document.addEventListener('postToggleMegadropdown', this.megedropdownStateHandler);
         this.host.addEventListener('click', this.handleLinkClick);
         this.handleResize();
-        this.handleScrollEvent();
         this.handleScrollParentResize();
         this.lockBody(false, this.mobileMenuExtended, 'mobileMenuExtended');
     }
+    componentWillRender() {
+        this.handleScrollEvent();
+    }
     componentDidRender() {
         this.getFocusableElements();
         this.handleLocalHeaderResize();
@@ -255,14 +254,6 @@ const PostHeader$1 = /*@__PURE__*/ proxyCustomElement(class PostHeader extends H
             });
         }
     }
-    megedropdownStateHandler = (event) => {
-        eventGuard(this.host, event, {
-            targetLocalName: 'post-megadropdown',
-            delegatorSelector: 'post-header',
-        }, () => {
-            this.megadropdownOpen = event.detail.isVisible;
-        });
-    };
     // Get all the focusable elements in the post-header mobile menu
     getFocusableElements() {
         // Get elements in the correct order (different as the DOM order)
@@ -374,8 +365,9 @@ const PostHeader$1 = /*@__PURE__*/ proxyCustomElement(class PostHeader extends H
         return (h("div", { class: navigationClasses.join(' '), style: { '--header-navigation-current-inset': `${mobileMenuScrollTop}px` } }, h("div", { class: "mobile-menu", ref: el => (this.mobileMenu = el) }, 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: 'd4e9cc7d4e61f9c6223651b73fdab93e44f868f2', version: version }, h("div", { key: 'be40a49df865621d9a31808d468a2bb342803600', class: "global-header" }, h("div", { key: '776d797b9235211bd283fb0ecb29722f2776f2cd', class: "global-sub" }, h("div", { key: '3e89049f43d0de844674db985c3c9e55d510f054', class: "logo" }, h("slot", { key: 'c96d915df7930d15c316e8761c0cf24ed6b44b95', name: "post-logo" }))), h("div", { key: '8aa06d67efef853e2a913c23703a73e38f2ec779', class: "global-sub" }, this.device === 'desktop' && h("slot", { key: 'cdd0b21cd9c6be0ec5a3aeb29b3b29b3034897a0', name: "meta-navigation" }), h("slot", { key: 'da4c5e8c6db482b031ba3b7ae1cf91f112bda75f', name: "global-controls" }), this.device === 'desktop' && h("slot", { key: '8980fdfa5f5e90d3786b5727ff6a9368dea709c6', name: "post-language-switch" }), h("div", { key: '013e2ad6b5bfd6b61f42b1d6c33c9ac6f0af98c0', onClick: () => this.toggleMobileMenu(), class: "mobile-toggle" }, h("slot", { key: 'cdac00dcf2cfb182bc8cefe0181054fac65c64be', name: "post-togglebutton" })))), h("div", { key: '0bdaa1b3fe2b9a460c7437b950afe8ce4c2237af', class: 'local-header ' + (this.mobileMenuExtended ? 'local-header-mobile-extended' : '') }, h("slot", { key: '1adc944fce891f85deb00dd40ad58dc0402491a9', name: "title" }), h("div", { key: '70f9a42f940b231a6e0dd89ee8e67d34f3b98eb6', class: "local-sub" }, h("slot", { key: 'd0106f5ec6ed548e1dbd5ca7f78b1ac5bcf5d2d4', name: "local-controls" }), h("slot", { key: '62e91cc83b232238ac3dcc1166f4a006754c95c9' })), this.device === 'desktop' && this.renderNavigation()), this.device !== 'desktop' && this.renderNavigation()));
+        return (h(Host, { key: 'd8b43333c00a612a3a37479750874a1efaf6a855', "data-version": version }, h("div", { key: 'b270fb139cc8730a774785c5535fb3bcdd60c59c', class: "global-header" }, h("div", { key: 'b3161c4b26a1be4707fa6c7360e6779547b7ab30', class: "global-sub" }, h("div", { key: '44ecddd8f91c86d1af0075718b63e6bf034a25b7', class: "logo" }, h("slot", { key: 'de5208255d0cf59707092c984b0fec33d317d38d', name: "post-logo" }))), h("div", { key: '199dc1da25d817b488d5c3402779130c360e0f9a', class: "global-sub" }, this.device === 'desktop' && h("slot", { key: '1337f13908a826022a1bf2a8a1a2e2bfe323900b', name: "meta-navigation" }), h("slot", { key: '2b6fbbcedc8f1803e388fdbcbcd637d6a2605c87', name: "global-controls" }), this.device === 'desktop' && h("slot", { key: '2861c1a0f7639678edd0f584d8f98665fcf84fb0', name: "post-language-switch" }), h("div", { key: '06e2d9a4abe3a804f25ffa303f6f9ed5b7c01b60', onClick: () => this.toggleMobileMenu(), class: "mobile-toggle" }, h("slot", { key: '772407e65d3d8f642c1e80fd8cb42b425eed4848', name: "post-togglebutton" })))), h("div", { key: '7b7a3da2a8cc848632c2e45badc52e23958a6faa', class: 'local-header ' + (this.mobileMenuExtended ? 'local-header-mobile-extended' : '') }, h("slot", { key: '96e4d68bfe0504cc09d57a8b11dabb9139d780f6', name: "title" }), h("div", { key: '240fae6f0f9d2a192a7b94110a9c4571856de90a', class: "local-sub" }, h("slot", { key: '14fd77af7dca02157248bf95d7d253d5f14e9f1e', name: "local-controls" }), h("slot", { key: '6dfac25cb64401123638ddfc6b94bbe89ae78249' })), this.device === 'desktop' && this.renderNavigation()), this.device !== 'desktop' && this.renderNavigation()));
     }
+    get host() { return this; }
     static get watchers() { return {
         "device": ["lockBody"],
         "mobileMenuExtended": ["lockBody"]

package/loaders/post-icon2.js

@@ -1,4 +1,5 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { I as IS_BROWSER } from './breakpoints.js';
 import { b as checkEmptyOrOneOf, c as checkEmptyOrType } from './index2.js';
 import { v as version } from './package.js';
 import { c as checkNonEmpty } from './check-non-empty.js';
@@ -30,8 +31,6 @@ const PostIcon = /*@__PURE__*/ proxyCustomElement(class PostIcon extends HTMLEle
         this.rotate = null;
         this.scale = null;
     }
-    isSSR = typeof window === 'undefined';
-    get host() { return this; }
     validateAnimation(newValue = this.animation) {
         if (newValue !== undefined)
             checkEmptyOrOneOf(this, 'animation', ANIMATION_KEYS);
@@ -62,7 +61,7 @@ const PostIcon = /*@__PURE__*/ proxyCustomElement(class PostIcon extends HTMLEle
         // the first definition object which defines a domain, will be used to set the domain of the file url
         // the first definition object which defines a slug, will be used to set the slug of the file url
         const urlDefinitions = [this.getUrlDefinition(this.base, 'both')];
-        if (!this.isSSR) {
+        if (IS_BROWSER) {
             urlDefinitions.push(this.getUrlDefinition(document.head
                 .querySelector('meta[name="design-system-settings"][data-post-icon-base]')
                 ?.getAttribute('data-post-icon-base'), 'relative'));
@@ -126,8 +125,9 @@ const PostIcon = /*@__PURE__*/ proxyCustomElement(class PostIcon extends HTMLEle
         this.validateAnimation();
     }
     render() {
-        return (h(Host, { key: '60f27d2a489e5649aa6ff06a771a146f1b83480d', "data-version": version }, h("span", { key: 'd1e7fe17b1c4b522bf091f248dfe51f838b87896', style: this.getStyles() })));
+        return (h(Host, { key: 'b3c3efcc03f423a248e231b4b4c5d79c93ae25a6', "data-version": version }, h("span", { key: 'd73d4df11fcccb96d5346f3f8c3e18602bb8d484', style: this.getStyles() })));
     }
+    get host() { return this; }
     static get watchers() { return {
         "animation": ["validateAnimation"],
         "base": ["validateBase"],
@@ -143,7 +143,7 @@ const PostIcon = /*@__PURE__*/ proxyCustomElement(class PostIcon extends HTMLEle
         "base": [1],
         "flipH": [4, "flip-h"],
         "flipV": [4, "flip-v"],
-        "name": [1],
+        "name": [513],
         "rotate": [2],
         "scale": [2]
     }, undefined, {

package/loaders/post-language-option.js

@@ -1,9 +1,10 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { c as checkEmptyOrType } from './index2.js';
+import './breakpoints.js';
 import { v as version } from './package.js';
 import { c as checkType } from './check-type.js';
 
-const postLanguageOptionCss = "/*!\n * Copyright 2021 by Swiss Post, Information Technology\n */post-language-option{display:inline-block}post-language-option 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-option button{background-color:ButtonFace !important}post-language-option button:hover{background-color:Highlight !important}}post-language-option a{color:var(--post-scheme-color-surface-default-fg);text-decoration:none}post-language-option :is(a,button){cursor:pointer;display:flex;align-items:center;justify-content:center;width:100%;height:100%;border-radius:2px;text-transform:uppercase}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){padding-inline:0;width:40px;height:40px;border-radius:2px}post-language-option: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-option:where([variant=list]) :is(a,button){border:1px solid ButtonBorder;color:ButtonText}}post-language-option: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-option:where([variant=list])[active]:not([active=false]) :is(a,button){background-color:Highlight !important;color:HighlightText}}post-language-option:where([variant=menu]){min-width:72px}post-language-option:where([variant=menu])[active]:not([active=false]){display:none}post-language-option:where([variant=menu]) :is(a,button){padding-block:13px;padding-inline:16px;box-sizing:border-box;justify-content:flex-start;position:relative}post-language-option:where([variant=menu]) :is(a,button):hover{color:#fff;background-color:#504f4b}";
+const postLanguageOptionCss = "post-language-option{display:inline-block}post-language-option 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-option button{background-color:ButtonFace !important}post-language-option button:hover{background-color:Highlight !important}}post-language-option a{color:var(--post-scheme-color-surface-default-fg);text-decoration:none}post-language-option :is(a,button){cursor:pointer;display:flex;align-items:center;justify-content:center;width:100%;height:100%;border-radius:2px;text-transform:uppercase}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){padding-inline:0;width:40px;height:40px;border-radius:2px}post-language-option: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-option:where([variant=list]) :is(a,button){border:1px solid ButtonBorder;color:ButtonText}}post-language-option: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-option:where([variant=list])[active]:not([active=false]) :is(a,button){background-color:Highlight !important;color:HighlightText}}post-language-option:where([variant=menu]){min-width:72px}post-language-option:where([variant=menu])[active]:not([active=false]){display:none}post-language-option:where([variant=menu]) :is(a,button){padding-block:13px;padding-inline:16px;box-sizing:border-box;justify-content:flex-start;position:relative}post-language-option:where([variant=menu]) :is(a,button):hover{color:#fff;background-color:#504f4b}";
 const PostLanguageOptionStyle0 = postLanguageOptionCss;
 
 const PostLanguageOption$1 = /*@__PURE__*/ proxyCustomElement(class PostLanguageOption extends HTMLElement {
@@ -18,7 +19,6 @@ const PostLanguageOption$1 = /*@__PURE__*/ proxyCustomElement(class PostLanguage
         this.name = undefined;
         this.url = undefined;
     }
-    get host() { return this; }
     validateCode() {
         checkType(this, 'code', 'string');
     }
@@ -43,14 +43,6 @@ const PostLanguageOption$1 = /*@__PURE__*/ proxyCustomElement(class PostLanguage
             this.postLanguageOptionInitiallyActive.emit(this.code);
         }
     }
-    /**
-     * An event emitted when the language option is clicked. The payload is the ISO 639 code of the language.
-     */
-    postChange;
-    /**
-     * An event emitted when the language option is initially active. The payload is the ISO 639 code of the language.
-     */
-    postLanguageOptionInitiallyActive;
     /**
      * Selects the language option programmatically.
      */
@@ -71,8 +63,9 @@ const PostLanguageOption$1 = /*@__PURE__*/ proxyCustomElement(class PostLanguage
                 this.emitChange();
             }
         };
-        return (h(Host, { key: '404caa6a507637810b672c5decf4e3af300733ac', "data-version": version }, this.url ? (h("a", { "aria-current": this.active ? 'page' : undefined, "aria-label": this.name, href: this.url, hrefLang: lang, lang: lang, onClick: () => this.emitChange(), onKeyDown: emitOnKeyDown }, h("slot", null))) : (h("button", { "aria-current": this.active ? 'true' : undefined, "aria-label": this.name, lang: lang, onClick: () => this.emitChange(), onKeyDown: emitOnKeyDown }, h("slot", null)))));
+        return (h(Host, { key: '3a6b9a8f63c90f431a13c1df529a2e4716ede5d8', "data-version": version }, this.url ? (h("a", { "aria-current": this.active ? 'page' : undefined, "aria-label": this.name, href: this.url, hrefLang: lang, lang: lang, onClick: () => this.emitChange(), onKeyDown: emitOnKeyDown }, h("slot", null))) : (h("button", { "aria-current": this.active ? 'true' : undefined, "aria-label": this.name, lang: lang, onClick: () => this.emitChange(), onKeyDown: emitOnKeyDown }, h("slot", null)))));
     }
+    get host() { return this; }
     static get watchers() { return {
         "code": ["validateCode"],
         "active": ["validateActiveProp"],

package/loaders/post-language-switch.js

@@ -1,8 +1,9 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { b as checkEmptyOrOneOf } from './index2.js';
+import './breakpoints.js';
+import { e as eventGuard } from './event-guard.js';
 import { v as version } from './package.js';
 import { n as nanoid } from './index.browser.js';
-import { e as eventGuard } from './event-guard.js';
 import { d as defineCustomElement$5 } from './post-icon2.js';
 import { d as defineCustomElement$4 } from './post-menu2.js';
 import { d as defineCustomElement$3 } from './post-menu-trigger2.js';
@@ -19,12 +20,15 @@ const PostLanguageSwitch$1 = /*@__PURE__*/ proxyCustomElement(class PostLanguage
         super();
         this.__registerHost();
         this.__attachShadow();
+        this.menuId = `p${nanoid(11)}`;
         this.caption = undefined;
         this.description = undefined;
         this.variant = 'list';
         this.activeLang = undefined;
     }
-    get host() { return this; }
+    get languageOptions() {
+        return Array.from(this.host.querySelectorAll('post-language-option'));
+    }
     validateCaption() {
         checkType(this, 'caption', 'string');
     }
@@ -42,7 +46,6 @@ const PostLanguageSwitch$1 = /*@__PURE__*/ proxyCustomElement(class PostLanguage
         // Initially set variants and active language
         // Handles cases where the language-switch is rendered after the language-options have been rendered
         this.updateChildrenVariant();
-        this.updateActiveLanguage();
     }
     /**
      * Listen for the postChange event and guard it to run only for events originating from a <post-language-option> element.
@@ -73,34 +76,22 @@ const PostLanguageSwitch$1 = /*@__PURE__*/ proxyCustomElement(class PostLanguage
     handleInitiallyActive(event) {
         this.activeLang = event.detail;
     }
-    get languageOptions() {
-        return this.host.querySelectorAll('post-language-option');
-    }
-    get activeLanguageOption() {
-        return this.host.querySelector('post-language-option[active]:not([active="false"])');
-    }
-    handleSlotChange() {
-        this.updateActiveLanguage();
-    }
-    updateActiveLanguage() {
-        this.activeLang = this.activeLanguageOption.getAttribute('code');
-    }
     // Update post-language-option variant to have the correct style
     updateChildrenVariant() {
         this.languageOptions.forEach(el => {
             el.setAttribute('variant', this.variant);
         });
     }
-    menuId = `p${nanoid(11)}`;
     renderList() {
-        return (h(Host, { "data-version": version, role: "list", "aria-label": this.caption }, h("div", { class: "post-language-switch-list", role: "group", "aria-label": this.description }, h("slot", { onSlotchange: () => this.handleSlotChange() }))));
+        return (h(Host, { "data-version": version, role: "list", "aria-label": this.caption }, h("div", { class: "post-language-switch-list", role: "group", "aria-label": this.description }, 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.description }, this.activeLang, 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", { onSlotchange: () => this.handleSlotChange() }))));
+        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, 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();
     }
+    get host() { return this; }
     static get watchers() { return {
         "caption": ["validateCaption"],
         "description": ["validateDescription"],

package/loaders/post-linkarea.js

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { v as version } from './package.js';
 
-const postLinkareaCss = "post-linkarea{display:contents;cursor:pointer}";
+const postLinkareaCss = ":host{display:contents;cursor:pointer}";
 const PostLinkareaStyle0 = postLinkareaCss;
 
 const INTERACTIVE_ELEMENTS = ['a'].join(',');
@@ -10,8 +10,8 @@ const PostLinkarea$1 = /*@__PURE__*/ proxyCustomElement(class PostLinkarea exten
     constructor() {
         super();
         this.__registerHost();
+        this.__attachShadow();
     }
-    get host() { return this; }
     dispatchClick({ ctrlKey, shiftKey, altKey, metaKey }) {
         const interactiveElement = this.host.querySelector(`[data-link]${INTERACTIVE_ELEMENTS_SELECTOR}`) ??
             this.host.querySelector(INTERACTIVE_ELEMENTS_SELECTOR);
@@ -21,10 +21,11 @@ const PostLinkarea$1 = /*@__PURE__*/ proxyCustomElement(class PostLinkarea exten
         interactiveElement.dispatchEvent(new MouseEvent('click', { ctrlKey, shiftKey, altKey, metaKey }));
     }
     render() {
-        return (h(Host, { key: 'c27bb1e548eecbef9b981ebadea8a9a30a06a89c', "data-version": version, onClick: e => this.dispatchClick(e), tabindex: "0" }, h("slot", { key: '9e5bd5c6032ed87bc2c6e9eed96dc79f19295325' })));
+        return (h(Host, { key: '56e4b032fa8976cc120bff5f1c36d55167e54e98', "data-version": version, onClick: (e) => this.dispatchClick(e), tabindex: "0" }, h("slot", { key: '25568fab2a47d765757c00fbee4f2999c1da16d1' })));
     }
+    get host() { return this; }
     static get style() { return PostLinkareaStyle0; }
-}, [4, "post-linkarea"]);
+}, [1, "post-linkarea"]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;

package/loaders/post-list-item.js

@@ -10,13 +10,13 @@ const PostListItem$1 = /*@__PURE__*/ proxyCustomElement(class PostListItem exten
         this.__registerHost();
         this.__attachShadow();
     }
-    get host() { return this; }
     connectedCallback() {
         this.host.setAttribute('slot', 'post-list-item');
     }
     render() {
-        return (h(Host, { key: '9626999693fa26c4fb42db178e53099ea8a95c2e', role: "listitem", slot: "post-list-item", version: version }, h("slot", { key: '5f2d0a626e9d09a44d4c20f3bc97a2c60ca77feb' })));
+        return (h(Host, { key: 'c826293ea2a7446bea2f5b223934b444655198a0', role: "listitem", slot: "post-list-item", version: version }, h("slot", { key: 'b997f79da2fbc87fbc6a388c118a03c008ad2c23' })));
     }
+    get host() { return this; }
     static get style() { return PostListItemStyle0; }
 }, [1, "post-list-item"]);
 function defineCustomElement$1() {

package/loaders/post-list.js

@@ -2,7 +2,7 @@ import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal
 import { v as version } from './package.js';
 import { n as nanoid } from './index.browser.js';
 
-const postListCss = "/*!\n * Copyright 2021 by Swiss Post, Information Technology\n */post-list{display:flex;flex-direction:column;gap:var(--post-list-title-gap, 0)}post-list>[role=list]{display:flex;flex-direction:column;gap:var(--post-list-item-gap, 0)}post-list:where([horizontal]:not([horizontal=false])){flex-direction:row;align-items:center}post-list:where([horizontal]:not([horizontal=false]))>[role=list]{flex-direction:row;align-items:center}post-list>.list-title.visually-hidden{width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border:0 !important}post-list>.list-title.visually-hidden:not(caption){position:absolute !important}";
+const postListCss = "post-list{display:flex;flex-direction:column;gap:var(--post-list-title-gap, 0)}post-list>[role=list]{display:flex;flex-direction:column;gap:var(--post-list-item-gap, 0)}post-list:where([horizontal]:not([horizontal=false])){flex-direction:row;align-items:center}post-list:where([horizontal]:not([horizontal=false]))>[role=list]{flex-direction:row;align-items:center}post-list>.list-title.visually-hidden{width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border:0 !important}post-list>.list-title.visually-hidden:not(caption){position:absolute !important}";
 const PostListStyle0 = postListCss;
 
 const PostList$1 = /*@__PURE__*/ proxyCustomElement(class PostList extends HTMLElement {
@@ -13,8 +13,6 @@ const PostList$1 = /*@__PURE__*/ proxyCustomElement(class PostList extends HTMLE
         this.titleHidden = false;
         this.horizontal = false;
     }
-    get host() { return this; }
-    titleEl;
     componentWillLoad() {
         /**
          * Get the id set on the host element or use a random id by default
@@ -30,8 +28,9 @@ const PostList$1 = /*@__PURE__*/ proxyCustomElement(class PostList extends HTMLE
         }
     }
     render() {
-        return (h(Host, { key: '085a63d7b4cc85461f2c8fd0c7b9d9f48f42055a', "data-version": version }, h("div", { key: 'd13a66ba16b71eff1a86666b04ca2f41957962e1', ref: el => (this.titleEl = el), id: this.titleId, class: `list-title${this.titleHidden ? ' visually-hidden' : ''}` }, h("slot", { key: '0270bcd71c8a3a34390b98b6374a1a2f06e0d606' })), h("div", { key: 'de04b08bf94900435c53f972c8fcd0798c8a5faf', role: "list", "aria-labelledby": this.titleId }, h("slot", { key: 'f7aa9976b3283ee4da3d32d84b36e2549c29e80f', name: "post-list-item" }))));
+        return (h(Host, { key: 'b003aa61735359b6a1d95aad8d29c609d5bb3c8b', "data-version": version }, h("div", { key: '2f69a2c72dd357767735e10d16f1b7586da6d5a3', ref: el => (this.titleEl = el), id: this.titleId, class: `list-title${this.titleHidden ? ' visually-hidden' : ''}` }, h("slot", { key: '3982783d438519673a676323339a013d3edb84db' })), h("div", { key: 'b8a91c4430774f019cc46aa19393e2a1566204a5', role: "list", "aria-labelledby": this.titleId }, h("slot", { key: '378a51785c4d52df8ae422657a16e8295b405149', name: "post-list-item" }))));
     }
+    get host() { return this; }
     static get style() { return PostListStyle0; }
 }, [4, "post-list", {
         "titleHidden": [4, "title-hidden"],

package/loaders/post-logo.js

@@ -1,6 +1,7 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { v as version } from './package.js';
 import { e as checkEmptyOrUrl } from './index2.js';
+import './breakpoints.js';
 
 const postLogoCss = ":host,.logo{display:inline-block}:host,:host .logo>svg,.logo,.logo .logo>svg{height:100%}.description{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}.logo-link{outline-offset:var(--post-device-spacing-padding-2) !important;outline:var(--post-scheme-color-interactive-focus-stroke) none var(--post-device-border-width-focus) !important}.logo-link:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-style:var(--post-core-border-style-solid) !important}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.logo-link:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){.logo-link:is(:focus-visible,:focus-within,.pretend-focus){outline-style:var(--post-core-border-style-solid) !important}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.logo-link:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}.logo-link :focus,:focus-visible{border-radius:2px}";
 const PostLogoStyle0 = postLogoCss;
@@ -12,7 +13,6 @@ const PostLogo$1 = /*@__PURE__*/ proxyCustomElement(class PostLogo extends HTMLE
         this.__attachShadow();
         this.url = undefined;
     }
-    get host() { return this; }
     validateUrl() {
         checkEmptyOrUrl(this, 'url');
     }
@@ -28,8 +28,9 @@ const PostLogo$1 = /*@__PURE__*/ proxyCustomElement(class PostLogo extends HTMLE
     render() {
         const logoLink = this.url && (typeof this.url === 'string' ? this.url : this.url.href);
         const LogoTag = logoLink ? 'a' : 'span';
-        return (h(Host, { key: '128604612a51624b537f30b0b9c91d9ea6b950be', "data-version": version }, h(LogoTag, { key: '885f057200f9da839fd38cb7070f319f6c89793e', class: `logo ${logoLink ? 'logo-link' : ''}`, ...(logoLink ? { href: logoLink } : {}) }, h("span", { key: 'bee12585bf74fe5c2ce8a644c540c86626295526', class: "description" }, h("slot", { key: 'e516075c5138cef9378d3dc7137eb6c28d02b279', onSlotchange: () => this.checkDescription() })), h("svg", { key: 'c0056463b93f7c0e5da07db4656d9c8dc9161c32', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 72 72", "aria-hidden": "true" }, h("g", { key: '1dfc33886c9b1fb6cd3b08f448a89c11a6080598', id: "Logo" }, h("rect", { key: 'dd84426568259714379a92a3f56349c6b3220a61', fill: "#ffcc00", x: "0", y: "0", width: "72", height: "72" }), h("polygon", { key: '56fa6445c184a41355a968365098b75387a16f48', fill: "#ff0000", points: "34,32.3 34,19 19.7,19 19.7,29.1 10,29.1 10,42.9 19.7,42.9 19.7,53 34,53 34,39.7 30.6,39.7 30.6,49.8 23.1,49.8 23.1,39.7 13.4,39.7 13.4,32.3 23.1,32.3 23.1,22.2 30.6,22.2 30.6,32.3" }), h("path", { key: 'f2abb1db77a2e795f477662453d7296a28882756', d: "M53.56234,31.10526c0,2.41272-1.99154,4.29475-4.51723,4.29475H45.2v-8.3h3.84511C51.66802,27.1,53.56234,28.78889,53.56234,31.10526z M50.69666,19H36v34h9.2V42.9h5.49666c6.75131,0,11.9971-5.15137,11.9971-11.8057C62.69376,24.39136,57.35099,19,50.69666,19z" }))))));
+        return (h(Host, { key: '7dee19302c0c560b29f09b1675135f10d41fc44a', "data-version": version }, h(LogoTag, { key: '1d851ca305d1bfc24666b416ad5f210b96d39811', class: `logo ${logoLink ? 'logo-link' : ''}`, ...(logoLink ? { href: logoLink } : {}) }, h("span", { key: 'cd75bd4040bc2f0d62e5cec2afc9529fa7c43c49', class: "description" }, h("slot", { key: 'caf63c4f823873181fa52cfb0cf38217b6a45823', onSlotchange: () => this.checkDescription() })), h("svg", { key: 'd41c14973b829eb35764c9e562fe449e65f410b4', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 72 72", "aria-hidden": "true" }, h("g", { key: '90c52e528bf4fc8e075e6517c18a59686ffd39f6', id: "Logo" }, h("rect", { key: '50633d1110596123232f07272406ebd0a32ffce8', fill: "#ffcc00", x: "0", y: "0", width: "72", height: "72" }), h("polygon", { key: '7a617412c094669a66914edf769fba9ee9448b83', fill: "#ff0000", points: "34,32.3 34,19 19.7,19 19.7,29.1 10,29.1 10,42.9 19.7,42.9 19.7,53 34,53 34,39.7 30.6,39.7 30.6,49.8 23.1,49.8 23.1,39.7 13.4,39.7 13.4,32.3 23.1,32.3 23.1,22.2 30.6,22.2 30.6,32.3" }), h("path", { key: '74213b21fad18ba6a1dbb07e0b0b7dcf4a89b855', d: "M53.56234,31.10526c0,2.41272-1.99154,4.29475-4.51723,4.29475H45.2v-8.3h3.84511C51.66802,27.1,53.56234,28.78889,53.56234,31.10526z M50.69666,19H36v34h9.2V42.9h5.49666c6.75131,0,11.9971-5.15137,11.9971-11.8057C62.69376,24.39136,57.35099,19,50.69666,19z" }))))));
     }
+    get host() { return this; }
     static get watchers() { return {
         "url": ["validateUrl"]
     }; }