@swisspost/design-system-components 10.0.0-next.54 → 10.0.0-next.55

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

@@ -88,7 +88,7 @@ export class PostBreadcrumbs {
     }
     render() {
         const visibleItems = this.breadcrumbItems.slice(0, -1);
-        return (h(Host, { key: '0c98c8ea09e4f17781fd8c404d445bd42aaacad5', "data-version": version }, h("nav", { key: 'aefa39943fd6ccbfcb2f01b19266785644bb4e32', "aria-label": this.label, class: "breadcrumbs-nav", ref: el => (this.breadcrumbsNavRef = el) }, h("ol", { key: 'd9542316f160f5fc98ca1ddadc27db5f24df78a1', class: "no-list breadcrumbs-list" }, h("li", { key: '3b4c9798492ffa8a6cbc65081efa08c3793a1325' }, h("a", { key: 'f7fd7c962d548a372198b5b1640a9f63fa36a809', href: this.homeUrl, class: "breadcrumb-link" }, h("span", { key: '3aa94c9eca27de39a9e564ec719eea4d821a6692', class: "visually-hidden" }, this.homeText), h("post-icon", { key: '04e54f7e16c21dcf0dcee0d9a8753e09d1382605', name: "home", class: "home-icon" }))), this.isConcatenated ? (h("li", { class: "menu-trigger-wrapper" }, h("post-icon", { name: "chevronright", class: "breadcrumb-item-icon" }), h("div", { class: "actual-menu" }, h("post-menu-trigger", { for: "breadcrumb-menu", tabIndex: 0, onKeyDown: e => {
+        return (h(Host, { key: '114ba932649aef6b3abda10be0a2a83b4d54c691', "data-version": version }, h("nav", { key: 'db7a6e0b36e5d71a2848dbf7de83e8b7e0f293bf', "aria-label": this.label, class: "breadcrumbs-nav", ref: el => (this.breadcrumbsNavRef = el) }, h("ol", { key: '71c3fac84dcf413da3c597a0204329b2f9945add', class: "no-list breadcrumbs-list" }, h("li", { key: 'd58de53b3a28e9ba4ec80f01b040a90035d0eae6' }, h("a", { key: '5c51451d2bd12da70eee2a5a4b22499340bf34e3', href: this.homeUrl, class: "breadcrumb-link" }, h("span", { key: 'c106e7663bf75d971e86915edcd669defb886a48', class: "visually-hidden" }, this.homeText), h("post-icon", { key: 'f723202508f4a00e19a3ead136934b8fadc10061', name: "home", class: "home-icon" }))), this.isConcatenated ? (h("li", { class: "menu-trigger-wrapper" }, h("post-icon", { name: "chevronright", class: "breadcrumb-item-icon" }), h("div", { class: "actual-menu" }, h("post-menu-trigger", { for: "breadcrumb-menu", tabIndex: 0, onKeyDown: e => {
                 if (e.key === 'Enter' || e.key === ' ') {
                     e.preventDefault();
                     this.handleBreadcrumbItemClick();
@@ -99,7 +99,7 @@ export class PostBreadcrumbs {
                     linkElement?.click();
                     e.preventDefault();
                 }
-            } }, item.url ? h("a", { href: item.url }, item.text) : h("span", null, item.text)))))))) : (visibleItems.map(item => (h("li", null, h("post-breadcrumb-item", { url: item.url, key: item.url || item.text }, item.text))))), this.lastItem && (h("li", { key: '5209d2ddf74d62f792bb472825f699acaf30bc07', "aria-current": "page" }, h("post-breadcrumb-item", { key: '0b8aa3f765e776c2fa971f7c8762280194cc1b0f', url: this.lastItem.url, tabindex: -1 }, this.lastItem.text)))), h("div", { key: '704affacb1515b48e4b129f1ef2c2d314ddd00d6', class: "hidden-items" }, h("a", { key: '2562e65299bff39a0d1c8d4b20d2ecc4d6747f4c', href: this.homeUrl, class: "hidden-breadcrumb-item" }, h("span", { key: '75d352977ecd05fc5fa2bb5f26ed40e809961c3d', class: "visually-hidden" }, this.homeText), h("post-icon", { key: 'b24fbc251d0a519fa03f85dd36413f3c79ece47c', name: "home", class: "home-icon" })), this.breadcrumbItems.map(item => (h("post-breadcrumb-item", { url: item.url, key: `hidden-${item.url || item.text}`, class: "hidden-breadcrumb-item" }, item.text)))))));
+            } }, item.url ? h("a", { href: item.url }, item.text) : h("span", null, item.text)))))))) : (visibleItems.map(item => (h("li", null, h("post-breadcrumb-item", { url: item.url, key: item.url || item.text }, item.text))))), this.lastItem && (h("li", { key: 'a615757d04c4d20ba5fea30ffb936392158b051a', "aria-current": "page" }, h("post-breadcrumb-item", { key: '979be47b183c2c84b142e68ed9f224d9b74c6b62', url: this.lastItem.url, tabindex: -1 }, this.lastItem.text)))), h("div", { key: 'f15ed4ba71b7c42711b09f4dee0ef81f08ef7b87', class: "hidden-items" }, h("a", { key: '52fde1b41eb7aa49a1bb5c2bfffcb0e97a16b7af', href: this.homeUrl, class: "hidden-breadcrumb-item" }, h("span", { key: 'fe3ebb1bf3e8142e269142da1f5350b667752e63', class: "visually-hidden" }, this.homeText), h("post-icon", { key: 'b48e08fdf3f39268812a6dfb79af2d337d1955cf', name: "home", class: "home-icon" })), this.breadcrumbItems.map(item => (h("post-breadcrumb-item", { url: item.url, key: `hidden-${item.url || item.text}`, class: "hidden-breadcrumb-item" }, item.text)))))));
     }
     static get is() { return "post-breadcrumbs"; }
     static get encapsulation() { return "shadow"; }
@@ -132,7 +132,7 @@ export class PostBreadcrumbs {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": true
             },
             "homeText": {
                 "type": "string",
@@ -151,7 +151,7 @@ export class PostBreadcrumbs {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": true
             },
             "label": {
                 "type": "string",
@@ -170,7 +170,7 @@ export class PostBreadcrumbs {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": true
             },
             "menuLabel": {
                 "type": "string",
@@ -189,7 +189,7 @@ export class PostBreadcrumbs {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": true
             }
         };
     }

package/dist/collection/components/post-card-control/post-card-control.js

@@ -229,14 +229,14 @@ export class PostCardControl {
         this.hasIcon = Boolean(this.host.querySelector('[slot="icon"]') || this.icon);
     }
     render() {
-        return (h(Host, { key: '8d037d8e16b06d1e72d3d6ee4f61a80e9c54a78a', "data-version": version, onClick: this.cardClickHandler }, h("div", { key: '650cbbdad994689e633b60c04d905306d4ff954e', class: {
+        return (h(Host, { key: '0470b9fc76aff7a9a9dd653ddc341cdea5a3415e', "data-version": version, onClick: this.cardClickHandler }, h("div", { key: 'ea805dc02529b0fcd50ed8492e5b2ad644f8cc16', class: {
                 'card-control': true,
                 'is-checked': this.checked,
                 'is-disabled': this.disabled,
                 'is-focused': this.focused,
                 'is-valid': this.validity !== undefined && this.validity !== false,
                 'is-invalid': this.validity === false,
-            } }, h("input", { key: 'ba744035982e0ea02294a254d887083ef6c33308', ref: el => (this.control = el), id: this.controlId, class: "card-control--input", type: this.type, name: this.name, value: this.value, checked: this.checked, "aria-describedby": `${this.controlId}_content`, "aria-disabled": this.disabled, "aria-invalid": this.validity === false, onClick: this.controlClickHandler, onInput: this.controlChangeHandler, onChange: this.controlChangeHandler, onFocus: this.controlFocusHandler, onBlur: this.controlFocusHandler, onKeyDown: this.controlKeyDownHandler }), h("label", { key: 'a853126a4b04abacf9c7ef0285cb42f99f294db2', id: `${this.controlId}_label`, htmlFor: this.controlId, class: "card-control--label" }, this.label, this.description ? (h("div", { class: "card-control--description" }, this.description)) : null), this.hasIcon ? (h("div", { class: "card-control--icon" }, h("slot", { name: "icon" }, this.icon ? h("post-icon", { name: this.icon }) : null))) : null, h("div", { key: '4bd2a280659e0f48a5c92d71eb287617130170d1', id: `${this.controlId}_content`, class: "card-control--content" }, h("slot", { key: 'cfab67b8e8dc9ecea3f5a18cbe95e835bf5aba44' })))));
+            } }, h("input", { key: '85e1731187a23168e41f6363cca308d3787f8aef', ref: el => (this.control = el), id: this.controlId, class: "card-control--input", type: this.type, name: this.name, value: this.value, checked: this.checked, "aria-describedby": `${this.controlId}_content`, "aria-disabled": this.disabled, "aria-invalid": this.validity === false, onClick: this.controlClickHandler, onInput: this.controlChangeHandler, onChange: this.controlChangeHandler, onFocus: this.controlFocusHandler, onBlur: this.controlFocusHandler, onKeyDown: this.controlKeyDownHandler }), h("label", { key: '8709e6122631d3a57978a1902fcfbb99f56552c4', id: `${this.controlId}_label`, htmlFor: this.controlId, class: "card-control--label" }, this.label, this.description ? (h("div", { class: "card-control--description" }, this.description)) : null), this.hasIcon ? (h("div", { class: "card-control--icon" }, h("slot", { name: "icon" }, this.icon ? h("post-icon", { name: this.icon }) : null))) : null, h("div", { key: '4734cefea7fd9497190a800298566ec092278800', id: `${this.controlId}_content`, class: "card-control--content" }, h("slot", { key: '610e3d926336d7984fafed199102fdf5e314b654' })))));
     }
     componentDidRender() {
         this.setHostContext();
@@ -332,7 +332,7 @@ export class PostCardControl {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": true
             },
             "name": {
                 "type": "string",

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

@@ -12,15 +12,16 @@ import { h, Host } from "@stencil/core";
 import { version } from "../../../../package";
 import { checkRequiredAndType, EventFrom, getRoot } from "../../utils/index";
 export class PostCollapsibleTrigger {
-    constructor() {
-        this.observer = new MutationObserver(() => this.setTrigger());
-    }
     /**
      * Set the "aria-controls" and "aria-expanded" attributes on the trigger to match the state of the controlled post-collapsible
      */
     validateAriaAttributes() {
         checkRequiredAndType(this, 'for', 'string');
     }
+    constructor() {
+        this.observer = new MutationObserver(() => this.setTrigger());
+        this.handlePostToggle = this.handlePostToggle.bind(this);
+    }
     /**
      * Initiate a mutation observer that updates the trigger whenever necessary
      */
@@ -37,7 +38,7 @@ export class PostCollapsibleTrigger {
     }
     disconnectedCallback() {
         this.observer.disconnect();
-        this.root.removeEventListener('postToggle', this.handlePostToggle);
+        this.root?.removeEventListener('postToggle', this.handlePostToggle);
     }
     /**
      * Update the "aria-controls" and "aria-expanded" attributes on the trigger button
@@ -96,7 +97,7 @@ export class PostCollapsibleTrigger {
         this.updateAriaAttributes();
     }
     render() {
-        return (h(Host, { key: 'd0851c032e622f4a182e1321331e84eaa0440245', "data-version": version }, h("slot", { key: 'd495c42f409de0f9230c01031ecddab69cead1b7' })));
+        return (h(Host, { key: '1cd00cfdb29b9ce191b8eb1fe6a91ddab412d006', "data-version": version }, h("slot", { key: 'b0625b4f2074852609d4a3dd700c04e01fa34d0a' })));
     }
     static get is() { return "post-collapsible-trigger"; }
     static get encapsulation() { return "shadow"; }

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

@@ -54,7 +54,7 @@ export class PostFooter {
         return GRID_SLOTS.map(slotName => (h("div", { class: { 'd-none': !this.gridSlotDisplayed[slotName] } }, h("slot", { onSlotchange: this.handleGridSlotChange('tablet', 'desktop'), name: slotName }))));
     }
     render() {
-        return (h(Host, { key: '36aa67b511dd3fdb9c0244b89f80c24feb86b3a6', "data-version": version, "data-color-scheme": "light" }, h("footer", { key: '0b4accb1d39734fda0b2ae7e602ae05618d1f6f8' }, h("h2", { key: '3b6147bb75772338192b17da5086e33d45f0cc4e', class: "visually-hidden" }, this.label), h("div", { key: '3ae237e599d226c8413bd785540f2706a61f130f', class: "footer-container" }, h("div", { key: 'c844467c43a718b117cc863beb75ac1ffccc7286', class: "footer-grid" }, this.device === 'mobile' ? this.renderAccordion() : this.renderColumns()), h("div", { key: 'ab0859972f61a8a0b28184654b0b8a7da5d6d199', class: "footer-column" }, h("div", { key: '9356dc60f36a614718b1e668aa6c8f988e611305', class: "footer-socialmedia" }, h("slot", { key: 'aeea4c639ae1b092a90816cebfc892e7ae9608ac', name: "socialmedia" })), h("div", { key: '6404adf8c76f4756c729c453a4f5285577973596', class: "footer-app" }, h("slot", { key: 'ebfbf7f1b5db296b1de165035156819043d2a329', name: "app" }))), h("div", { key: '38017619c9da0f5abd0b34e9406f94e239e54b99', class: "footer-businesssectors" }, h("slot", { key: '93f13e71cbd102074b6f2a55c369470f66b3ae8d', name: "businesssectors" })), h("div", { key: '88c077c96627d557a47d3136a65196b67fafc2c1', class: "footer-meta" }, h("slot", { key: '9c0f64a2f2d715d6b420938efa63c861415376bd', name: "meta" })), h("div", { key: '1dc3cdbe0cb628d7e688c15de5959758e8837489', class: "footer-copyright" }, h("slot", { key: 'b62fe042ac7b098747bb21605fed2fa6883dbb23', name: "copyright" }))))));
+        return (h(Host, { key: '5fc11a9cde5e0180c20c27e53fb177ecc9a49d78', "data-version": version, "data-color-scheme": "light" }, h("footer", { key: 'a844ab0ee3ef02c5266a6b259f6869ecb68f26cd' }, h("h2", { key: '543414f0394b276d5c8c22f2839f3afcd1d10575', class: "visually-hidden" }, this.label), h("div", { key: '6d6f38e761a134a39b5b5ed863c6832a5fc1f9a8', class: "footer-container" }, h("div", { key: '2c13938bb4bc9def54eb579207f1f5742b937aac', class: "footer-grid" }, this.device === 'mobile' ? this.renderAccordion() : this.renderColumns()), h("div", { key: 'cf097034f1987afa77d9646c51d8b8a1ae697e5b', class: "footer-column" }, h("div", { key: '4f47baa37bd3efe1f1fd3a0e5725106618eebe03', class: "footer-socialmedia" }, h("slot", { key: 'eccb942dcc1c20cf335cda88b18979fe4d80b431', name: "socialmedia" })), h("div", { key: 'b6aaff5655c50ef59679cd94dc15a53127e08ddc', class: "footer-app" }, h("slot", { key: 'd74e9e912a67747efd5413171d10ae7558e75da5', name: "app" }))), h("div", { key: '71ba540f7ce2ac65359eadc6b03a9b809c3deb82', class: "footer-businesssectors" }, h("slot", { key: 'bc5947b45a37132765526952127c03058fa33b90', name: "businesssectors" })), h("div", { key: '287b6ed9ed686a743d57709e8be4a85d1b7c3837', class: "footer-meta" }, h("slot", { key: 'ce5d85389422fe1b0fc231a32f96f60ac7d20459', name: "meta" })), h("div", { key: '2da10dc4c5923a697977a5eb6227c567df156de3', class: "footer-copyright" }, h("slot", { key: 'f6fb5282c228d33213c90141b51accff50ae233e', name: "copyright" }))))));
     }
     static get is() { return "post-footer"; }
     static get encapsulation() { return "shadow"; }
@@ -87,7 +87,7 @@ export class PostFooter {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": true
             }
         };
     }

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

@@ -1 +1 @@
-*,::before,::after{box-sizing:border-box}:host{z-index:1020;position:relative;--post-logo-height: calc(var(--post-global-header-expanded-height) - var(--post-header-scroll-top, 0px));--post-global-header-top: calc( var(--post-global-header-reduced-height) - var(--post-global-header-expanded-height) );--post-local-header-top: calc( var(--post-global-header-reduced-height) + var(--post-local-header-reduced-height) - var(--post-local-header-expanded-height) );--post-global-controls-top: clamp( 1000 * var(--post-global-header-top), /* 0 when header is static, large negative when header shrinks to enable offset */ calc(-1 * min(var(--post-header-scroll-top, 0px) / 4, var(--post-global-header-reduced-height))), 0px )}@media screen and (min-width: 1024px){:host:has(.global-sub>*:not(.logo):focus-within),:host:has(.local-sub:focus-within){--post-global-header-top: 0;--post-local-header-top: var(--post-global-header-expanded-height);--post-logo-height: var(--post-global-header-expanded-height);--post-global-controls-top: 0}}.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-expanded-height)}@media screen and (max-width: 1023.98px){.global-header{z-index:4;inset-block-start:0}}@media screen and (min-width: 1024px){.global-header{z-index:5;padding-inline-end:8px;inset-block-start:var(--post-global-header-top);transition:inset-block-start .2s ease-in-out}}.global-header:has(+.local-header.no-navigation.no-title){box-shadow:var(--post-device-elevation-300)}.global-sub{display:flex;align-items:center;gap:4px}@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(--post-global-controls-top)}.global-sub:not(:last-child):not(:first-child){flex-grow:1}}.align-end{align-items:flex-end}.logo{flex:1 0 auto;height:var(--post-global-header-expanded-height);width:var(--post-global-header-expanded-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(--post-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;inset-block-start:var(--post-local-header-top);flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px;min-height:var(--post-local-header-expanded-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;box-shadow:var(--post-device-elevation-300);transition:box-shadow .2s ease-in-out,inset-block-start .2s ease-in-out}.local-header:not(.no-title){padding-block-start:18px}}@media screen and (max-width: 1023.98px){.local-header{z-index:3;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-header.no-navigation{padding-block:0}.local-header.no-navigation .navigation{display:none}.local-header.no-navigation.no-title{display:none}.local-sub{margin-inline-end:16px}@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{display:flex;align-items:center;justify-content:space-between;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:2;inset-inline:0;inset-block-start:var(--post-header-height)}.mobile-menu{background-color:#fafafa}::slotted(post-mainnavigation),.navigation-footer{padding-block:16px 24px;padding-inline:40px}.navigation-header,::slotted(post-mainnavigation),.navigation-footer{display:none;flex-direction:column}.navigation.extended .navigation-header,.navigation.extended ::slotted(post-mainnavigation),.navigation.extended .navigation-footer{display:flex}::slotted(post-mainnavigation){padding-block:24px}.navigation.extended>div{display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden;height:calc(min(var(--post-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}.navigation-footer{background-color:#f0efed;gap:24px}.navigation-footer ::slotted(post-language-switch){margin-top:16px}}@media screen and (max-width: 1023.98px)and (max-width: 599.98px){.navigation-footer{gap:16px}}@media screen and (max-width: 599.98px){::slotted(post-mainnavigation),.navigation-footer{padding-inline:16px}}
+:host{--post-global-header-top: calc(var(--post-global-header-reduced-height) - var(--post-global-header-expanded-height));--post-header-top: calc(var(--post-header-reduced-height) - var(--post-header-expanded-height));--post-logo-height: calc(var(--post-global-header-expanded-height) - var(--post-header-scroll-top, 0px));--post-global-controls-top: clamp( /* 0 when header is static, large negative when header shrinks to enable offset */ 1000 * (var(--post-global-header-reduced-height) - var(--post-global-header-expanded-height)), calc(-1 * min(var(--post-header-scroll-top, 0px) / 4, var(--post-global-header-reduced-height))), 0px )}@media screen and (min-width: 1024px){:host{--post-header-gap: 0.25rem;--post-global-header-padding-inline-start: 0.25rem;--post-global-header-padding-inline-end: 0.5rem;--post-local-header-padding-inline-start: 0.75rem;--post-local-header-padding-inline-end: 0.5rem}}@media screen and (min-width: 600px)and (max-width: 1023.98px){:host{--post-header-gap: 0.75rem 0.25rem;--post-global-header-padding-inline-start: 0.25rem;--post-global-header-padding-inline-end: 0.25rem;--post-local-header-padding-inline-start: 0.75rem;--post-local-header-padding-inline-end: 0.25rem;--post-local-header-padding-block: 0rem;--post-burger-menu-padding-inline: 2.5rem;--post-burger-menu-body-gap: 2rem;--post-burger-menu-footer-gap: 1.5rem}}@media screen and (min-width: 600px)and (max-width: 779.98px){:host{--post-burger-menu-padding-inline: 1rem}}@media screen and (min-width: 0)and (max-width: 599.98px){:host{--post-header-gap: 0.75rem 0.25rem;--post-global-header-padding-inline-start: 0rem;--post-global-header-padding-inline-end: 0.5rem;--post-local-header-padding-inline-start: 0.5rem;--post-local-header-padding-inline-end: 0.5rem;--post-local-header-padding-block: 0rem;--post-burger-menu-padding-inline: 1rem;--post-burger-menu-body-gap: 1.5rem;--post-burger-menu-footer-gap: 1rem}}:host([data-expanded]){--post-header-top: 0;--post-global-header-top: 0;--post-global-controls-top: 0;--post-logo-height: var(--post-global-header-expanded-height)}*,::before,::after{box-sizing:border-box}:host,.global-header,.local-header{transition:inset-block-start 150ms cubic-bezier(0.4, 0, 0.2, 1)}.global-header,.local-header,.burger-menu{box-shadow:var(--post-device-elevation-300)}.global-header,.sliding-controls,.local-header,.navigation{display:flex;align-items:center;justify-content:space-between;gap:var(--post-header-gap)}:host{container-type:inline-size;display:block;position:sticky;inset-block-start:var(--post-header-top);z-index:1020}.global-header{z-index:2;position:sticky;inset-block-start:var(--post-global-header-top);background-color:#fc0;height:var(--post-global-header-expanded-height);padding-inline-start:var(--post-global-header-padding-inline-start);padding-inline-end:var(--post-global-header-padding-inline-end)}.global-header:has(~.local-header:not(.no-title.no-navigation)),.global-header:has(~.burger-menu.extended){box-shadow:none}.global-header .logo{align-self:flex-end;width:var(--post-global-header-expanded-height);height:var(--post-logo-height);min-height:var(--post-global-header-reduced-height);max-height:100%;margin-inline-end:1.25rem}.global-header .sliding-controls{flex-grow:1;justify-content:flex-end;position:relative;inset-block-start:var(--post-global-controls-top)}.global-header .target-group{margin-inline-end:auto}.global-header.no-target-group .target-group{display:none}.local-header{position:relative;flex-wrap:wrap;background-color:#fff;min-height:var(--post-local-header-expanded-min-height);padding-inline-start:var(--post-local-header-padding-inline-start);padding-inline-end:var(--post-local-header-padding-inline-end);padding-block:var(--post-local-header-padding-block)}.local-header:not(.no-title,.no-navigation){padding-block-start:1.125rem}.local-header.no-title.no-navigation{display:none}.local-header:has(.navigation.megadropdown-open),.local-header:has(~.burger-menu.extended){box-shadow:none}.local-header:has(.navigation.megadropdown-open)::after,.local-header:has(~.burger-menu.extended)::after{content:"";display:block;position:absolute;inset-inline:0;inset-block-end:0;height:1px;background-color:#e1e0dc}.local-header .navigation{flex:1 0 100%;height:var(--post-main-navigation-height);margin-inline-start:calc(-1*var(--post-local-header-padding-inline-start));max-width:100cqw}.local-header.no-navigation .navigation{display:none}.local-header .navigation-controls{flex:0 0 auto}.local-header.no-navigation-controls .navigation{margin-inline-end:calc(-1*var(--post-local-header-padding-inline-end))}.local-header.no-navigation-controls .navigation-controls{display:none}.burger-menu{z-index:-1;position:absolute;inset-inline:0;inset-block-start:100%;height:calc(min(var(--post-header-scroll-parent-height, 100dvh),100dvh) - var(--post-header-height));overflow:hidden auto;display:flex;flex-direction:column;background-color:#fafafa}.burger-menu:not(.extended){transform:translateY(-100%)}.burger-menu:not(.extended)>*{display:none}.burger-menu .burger-menu-body,.burger-menu .burger-menu-footer{display:flex;flex-direction:column;padding-inline:var(--post-burger-menu-padding-inline)}.burger-menu .burger-menu-body{flex-grow:1;padding-block:1.5rem;gap:var(--post-burger-menu-body-gap)}.burger-menu .burger-menu-footer{background-color:#f0efed;padding-block:1rem 1.5rem;gap:var(--post-burger-menu-footer-gap)}.burger-menu .navigation-controls{height:3.5rem;display:flex;align-items:center;justify-content:flex-end;padding-inline:.25rem}.burger-menu.no-navigation-controls .navigation-controls{display:none}

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

@@ -19,17 +19,17 @@ import { EventFrom } from "../../utils/event-from";
  * @slot post-logo - Should be used together with the `<post-logo>` component.
  * @slot global-controls - Holds search button in the global header.
  * @slot meta-navigation - Holds an `<ul>` with meta navigation links.
- * @slot post-togglebutton - Holds the mobile menu toggler.
+ * @slot post-togglebutton - Holds the burger menu toggler.
  * @slot post-language-switch - Should be used with the `<post-language-switch>` component.
  * @slot title - Holds the application title.
- * @slot default - Custom controls or content, right aligned in the local header.
+ * @slot local-controls - Custom controls or content, right aligned in the local header.
  * @slot post-mainnavigation - Has a default slot because it's only meant to be used in the `<post-header>`.
  * @slot target-group - Holds the list of buttons to choose the target group.
  * @slot global-login - Holds the user menu or login button in the global header.
  * @slot navigation-controls - Custom controls, right aligned with the main navigation.
  */
 export class PostHeader {
-    get hasMobileMenu() {
+    get hasBurgerMenu() {
         return this.device !== 'desktop' && this.hasNavigation;
     }
     get scrollParent() {
@@ -48,8 +48,8 @@ export class PostHeader {
     }
     lockBody(newValue, _oldValue, propName) {
         const scrollParent = this.scrollParent;
-        const mobileMenuExtended = propName === 'mobileMenuExtended' ? newValue : this.mobileMenuExtended;
-        if (this.device !== 'desktop' && mobileMenuExtended) {
+        const burgerMenuExtended = propName === 'burgerMenuExtended' ? newValue : this.burgerMenuExtended;
+        if (this.device !== 'desktop' && burgerMenuExtended) {
             scrollParent.setAttribute('data-post-scroll-locked', '');
             this.host.addEventListener('keydown', this.keyboardHandler);
         }
@@ -62,14 +62,16 @@ export class PostHeader {
         this.throttledResize = throttle(50, () => this.updateLocalHeaderHeight());
         this.device = breakpoint.get('device');
         this.hasNavigation = false;
+        this.hasNavigationControls = false;
+        this.hasTargetGroup = false;
         this.hasTitle = false;
-        this.mobileMenuExtended = false;
+        this.burgerMenuExtended = false;
         this.megadropdownOpen = false;
         this.breakpointChange = (e) => {
             this.device = e.detail;
             this.switchLanguageSwitchMode();
-            if (this.device === 'desktop' && this.mobileMenuExtended) {
-                this.closeMobileMenu();
+            if (this.device === 'desktop' && this.burgerMenuExtended) {
+                this.closeBurgerMenu();
             }
             if (this.device !== 'desktop') {
                 Array.from(this.host.querySelectorAll('post-megadropdown')).forEach(dropdown => {
@@ -86,6 +88,7 @@ export class PostHeader {
         this.updateLocalHeaderHeight = this.updateLocalHeaderHeight.bind(this);
         this.keyboardHandler = this.keyboardHandler.bind(this);
         this.handleLinkClick = this.handleLinkClick.bind(this);
+        this.checkSlottedContent = this.checkSlottedContent.bind(this);
     }
     connectedCallback() {
         window.addEventListener('resize', this.throttledResize, { passive: true });
@@ -98,14 +101,13 @@ export class PostHeader {
         document.addEventListener('postToggleMegadropdown', this.megadropdownStateHandler);
         this.host.addEventListener('click', this.handleLinkClick);
         window.addEventListener('postBreakpoint:device', this.breakpointChange);
-        this.checkNavigationExistence();
-        this.checkTitleExistence();
-        this.switchLanguageSwitchMode();
         this.handleScrollParentResize();
-        this.lockBody(false, this.mobileMenuExtended, 'mobileMenuExtended');
+        this.lockBody(false, this.burgerMenuExtended, 'burgerMenuExtended');
     }
     componentWillRender() {
         this.handleScrollEvent();
+        this.handleSlottedContentChanges();
+        this.switchLanguageSwitchMode();
     }
     componentDidRender() {
         this.getFocusableElements();
@@ -133,51 +135,50 @@ export class PostHeader {
             this.localHeaderResizeObserver.disconnect();
             this.localHeaderResizeObserver = null;
         }
-        this.mobileMenuExtended = false;
-    }
-    checkNavigationExistence() {
-        this.hasNavigation = this.host.querySelectorAll('post-mainnavigation').length > 0;
-    }
-    checkTitleExistence() {
-        this.hasTitle = this.host.querySelectorAll('[slot="title"]').length > 0;
+        if (this.slottedContentObserver) {
+            this.slottedContentObserver.disconnect();
+            this.slottedContentObserver = null;
+        }
+        this.burgerMenuExtended = false;
     }
-    async closeMobileMenu() {
-        this.mobileMenuAnimation.finish();
+    async closeBurgerMenu() {
+        this.burgerMenuAnimation.finish();
         const menuButton = this.getMenuButton();
         if (menuButton) {
             menuButton.toggled = false;
         }
-        this.mobileMenuExtended = false;
+        this.burgerMenuExtended = false;
     }
     /**
-     * Toggles the mobile navigation.
+     * Toggles the burger navigation menu.
      */
-    async toggleMobileMenu(force) {
+    async toggleBurgerMenu(force) {
         if (this.device === 'desktop')
             return;
-        this.mobileMenuAnimation = this.mobileMenuExtended
-            ? slideUp(this.mobileMenu)
-            : slideDown(this.mobileMenu);
+        this.burgerMenuAnimation = this.burgerMenuExtended
+            ? slideUp(this.burgerMenu)
+            : slideDown(this.burgerMenu);
         // Update the state of the toggle button
         const menuButton = this.host.querySelector('post-togglebutton');
-        menuButton.toggled = force ?? !this.mobileMenuExtended;
-        if (this.mobileMenuExtended) {
+        if (menuButton)
+            menuButton.toggled = force ?? !this.burgerMenuExtended;
+        if (this.burgerMenuExtended) {
             // Wait for the close animation to finish before hiding megadropdowns
-            await this.mobileMenuAnimation.finished;
-            this.mobileMenuExtended = force ?? !this.mobileMenuExtended;
-            if (this.mobileMenuExtended === false) {
+            await this.burgerMenuAnimation.finished;
+            this.burgerMenuExtended = force ?? !this.burgerMenuExtended;
+            if (this.burgerMenuExtended === false) {
                 this.closeAllMegadropdowns();
             }
         }
         else {
-            this.mobileMenuExtended = force ?? !this.mobileMenuExtended;
+            this.burgerMenuExtended = force ?? !this.burgerMenuExtended;
             // If opening, close any open megadropdowns immediately
             if (this.megadropdownOpen) {
                 this.closeAllMegadropdowns();
             }
         }
     }
-    // Get all the focusable elements in the post-header mobile menu
+    // Get all the focusable elements in the post-header burger menu
     getFocusableElements() {
         // Get elements in the correct order (different as the DOM order)
         const focusableEls = [
@@ -197,7 +198,7 @@ export class PostHeader {
         return this.host.querySelector('post-togglebutton');
     }
     keyboardHandler(e) {
-        if (e.key === 'Tab' && this.mobileMenuExtended) {
+        if (e.key === 'Tab' && this.burgerMenuExtended) {
             if (e.shiftKey && document.activeElement === this.firstFocusableEl) {
                 // If back tab (Tab + Shift) and first element is focused, focus goes to the last element of the megadropdown
                 e.preventDefault();
@@ -218,7 +219,7 @@ export class PostHeader {
     }
     handleScrollEvent() {
         const scrollTop = this.scrollParent === document.body ? window.scrollY : this.scrollParent.scrollTop;
-        document.documentElement.style.setProperty('--post-header-scroll-top', `${scrollTop}px`);
+        document.documentElement.style.setProperty('--post-header-scroll-top', `${Math.max(scrollTop, 0)}px`);
     }
     updateLocalHeaderHeight() {
         const localHeaderElement = this.host.shadowRoot.querySelector('.local-header');
@@ -236,8 +237,8 @@ export class PostHeader {
         if (!isLinkInMainNav && !isLinkInMegadropdown) {
             return;
         }
-        if (this.mobileMenuExtended && (isLinkInMainNav || isLinkInMegadropdown)) {
-            this.toggleMobileMenu(false);
+        if (this.burgerMenuExtended && (isLinkInMainNav || isLinkInMegadropdown)) {
+            this.toggleBurgerMenu(false);
         }
         if (this.device === 'desktop' && isLinkInMegadropdown) {
             const megadropdownLink = target.closest('post-megadropdown a');
@@ -259,28 +260,60 @@ export class PostHeader {
             this.localHeaderResizeObserver.observe(localHeader);
         }
     }
+    handleSlottedContentChanges() {
+        if (!this.slottedContentObserver) {
+            this.checkSlottedContent();
+            this.slottedContentObserver = new MutationObserver(this.checkSlottedContent);
+            this.slottedContentObserver.observe(this.host, { childList: true });
+        }
+    }
+    checkSlottedContent() {
+        this.hasNavigation = !!this.host.querySelector('[slot="post-mainnavigation"]');
+        this.hasNavigationControls = !!this.host.querySelector('[slot="navigation-controls"]');
+        this.hasTargetGroup = !!this.host.querySelector('[slot="target-group"]');
+        this.hasTitle = !!this.host.querySelector('[slot="title"]');
+    }
     switchLanguageSwitchMode() {
-        const variant = this.hasMobileMenu ? 'list' : 'menu';
+        const variant = this.hasBurgerMenu ? 'list' : 'menu';
         Array.from(this.host.querySelectorAll('post-language-switch')).forEach(languageSwitch => {
             languageSwitch?.setAttribute('variant', variant);
         });
     }
+    onFocusChange() {
+        const fixedElements = this.device === 'desktop' ? '.logo, .navigation' : '.global-header, .burger-menu';
+        const isHeaderExpanded = this.host.matches(':focus-within') &&
+            !this.host.shadowRoot.querySelector(`:where(${fixedElements}):focus-within`);
+        if (isHeaderExpanded) {
+            this.host.setAttribute('data-expanded', '');
+        }
+        else {
+            this.host.removeAttribute('data-expanded');
+        }
+    }
     renderNavigation() {
-        const mainNavigation = (h("slot", { name: "post-mainnavigation", onSlotchange: () => this.checkNavigationExistence() }));
         if (this.device === 'desktop') {
-            return (h("div", { class: { 'navigation': true, 'megadropdown-open': this.megadropdownOpen } }, mainNavigation, h("slot", { name: "navigation-controls" })));
+            return (h("div", { class: { 'navigation': true, 'megadropdown-open': this.megadropdownOpen } }, h("slot", { name: "post-mainnavigation" }), h("div", { class: "navigation-controls" }, h("slot", { name: "navigation-controls" }))));
         }
-        return (h("div", { class: { navigation: true, extended: this.mobileMenuExtended }, style: { '--post-header-navigation-current-inset': `${this.mobileMenu?.scrollTop ?? 0}px` } }, h("div", { class: "mobile-menu", ref: el => (this.mobileMenu = el) }, h("div", { class: "navigation-header" }, h("slot", { name: "navigation-controls" }), h("slot", { name: "target-group" })), mainNavigation, h("div", { class: "navigation-footer" }, h("slot", { name: "meta-navigation" }), h("slot", { name: "post-language-switch" })))));
+        return (h("div", { class: {
+                'burger-menu': true,
+                'extended': this.burgerMenuExtended,
+                'no-navigation-controls': !this.hasNavigationControls,
+            }, style: { '--post-header-navigation-current-inset': `${this.burgerMenu?.scrollTop ?? 0}px` }, ref: el => (this.burgerMenu = el) }, h("div", { class: "navigation-controls" }, h("slot", { name: "navigation-controls" })), h("div", { class: "burger-menu-body" }, h("slot", { name: "target-group" }), h("slot", { name: "post-mainnavigation" })), h("div", { class: "burger-menu-footer" }, h("slot", { name: "meta-navigation" }), h("slot", { name: "post-language-switch" }))));
     }
     render() {
-        const localHeaderClasses = ['local-header'];
-        if (this.mobileMenuExtended)
-            localHeaderClasses.push('local-header-mobile-extended');
-        if (this.device !== 'desktop' || !this.hasNavigation)
-            localHeaderClasses.push('no-navigation');
-        if (!this.hasTitle)
-            localHeaderClasses.push('no-title');
-        return (h(Host, { key: 'fd3c4a534af28b2e35f4a02502283e04be0d9683', "data-version": version, "data-color-scheme": "light" }, h("div", { key: '61c70adea7525d3daa7690ac9243c7697df5c8bc', class: "global-header" }, h("div", { key: '1fdb106a9624a07d3ad3fd1cb4eade9b05282ab5', class: "global-sub" }, h("div", { key: '2c62bccfa8d5fa9642528db265e76aac0d13022c', class: "logo" }, h("slot", { key: '75b87c2428b7ccad6940976e46156b807257cbc5', name: "post-logo" }))), h("div", { key: 'c1950198cbac96132ca5b1c886bb94238c53b903', class: "global-sub" }, this.device === 'desktop' && h("slot", { key: '2e695987df3da854db3ec18cc4b1283d0f06dfd1', name: "target-group" })), h("div", { key: '50366842180e3aae87d4e4da68a8f73c2f62c347', class: "global-sub" }, h("slot", { key: '7eba07e3dddbc26843a50b39a69953a01d9e2a5e', name: "global-controls" }), !this.hasMobileMenu && h("slot", { key: 'aa9fc50e2eb8eee4e3d9de76ccbf564ac30a8d03', name: "meta-navigation" }), !this.hasMobileMenu && h("slot", { key: '7742f0d0e30d5b0d90ca9352fec72e49a97ec3cb', name: "post-language-switch" }), h("slot", { key: 'a3545c4bb2a61c00105763059f3bd66ddd829681', name: "global-login" }), this.hasNavigation && (h("div", { key: 'bb8df618571ea8cadb89b0cd8d50bba7c0dec038', onClick: () => this.toggleMobileMenu(), class: "mobile-toggle" }, h("slot", { key: '83b9542127213e39644c280cf9f4e19aaf3f071a', name: "post-togglebutton" }))))), h("div", { key: '2ab719d2610d46050fc99345237b7b9cc54fd467', class: localHeaderClasses.join(' ') }, h("slot", { key: '0e02b3f7421a1c67e99fdc92aadcf61153665820', name: "title", onSlotchange: () => this.checkTitleExistence() }), this.hasTitle && (h("div", { key: '94b091a29727bd556a4907ac4bdb2f8757483135', class: "local-sub" }, h("slot", { key: '7647015350e21278b104ff4538525abeaea98442', name: "local-controls" }), h("slot", { key: '4e42d3fe5c4f676b7bb836c976c1d7e59a1052ae' }))), this.device === 'desktop' && this.renderNavigation()), this.device !== 'desktop' && this.renderNavigation()));
+        return (h(Host, { key: 'c9b1c1a946800f728a7a90a91dff3abf23b5100f', "data-version": version, "data-color-scheme": "light", "data-burger-menu": this.hasBurgerMenu }, h("div", { key: '21d2b9bd39946df7e42d3d5c763d40cd1dabee69', class: {
+                'global-header': true,
+                'no-target-group': !this.hasTargetGroup,
+            } }, h("div", { key: '50cf30a8febea656eb3349e6c06dc5b609b13a6d', class: "logo" }, h("slot", { key: 'df1ecaca7b39316ef4d4bb56e33c3214b2648e68', name: "post-logo" })), h("div", { key: '9c4319dce10d9e98291a6cbdb0effb854a8b6dac', class: "sliding-controls" }, this.device === 'desktop' && (h("div", { key: 'ce916d4bdb65c641e58725f70b7689704847593c', class: "target-group" }, h("slot", { key: '810e4164ae17b8571011799307f3688cf64b5c30', name: "target-group" }))), h("slot", { key: 'abe6f2e08e87295e88e4cf33db0e72021d622aaf', name: "global-controls" }), !this.hasBurgerMenu && [
+            h("slot", { key: '4ef5603837d0f26c25dd50bf17bb0011dc927de0', name: "meta-navigation" }),
+            h("slot", { key: 'b1bc83f1bd5004af89e444a9bdf487225ac882d7', name: "post-language-switch" }),
+        ], h("slot", { key: '11dfd54337cf457bc25ec680c8d4e11a6712dc63', name: "global-login" }), this.hasNavigation && this.device !== 'desktop' && (h("div", { key: '67658d80ce90f4446ea8d1078937101a299536b8', onClick: () => this.toggleBurgerMenu(), class: "burger-menu-toggle" }, h("slot", { key: '2fdba487922c63db152ec08e3382640c9cdf1c12', name: "post-togglebutton" }))))), h("div", { key: '1516e38c9628d8cfb75d6f9bd55912071da5e94e', class: {
+                'local-header': true,
+                'no-title': !this.hasTitle,
+                'no-target-group': !this.hasTargetGroup,
+                'no-navigation': this.device !== 'desktop' || !this.hasNavigation,
+                'no-navigation-controls': !this.hasNavigationControls,
+            } }, h("slot", { key: '839b34249ece8af5cc53231271e739a6a664a977', name: "title" }), this.hasTitle && h("slot", { key: 'aa281968b58ecad425beb1b4ffbd1273cc167ea4', name: "local-controls" }), this.device === 'desktop' && this.renderNavigation()), this.device !== 'desktop' && this.renderNavigation()));
     }
     static get is() { return "post-header"; }
     static get encapsulation() { return "shadow"; }
@@ -298,14 +331,16 @@ export class PostHeader {
         return {
             "device": {},
             "hasNavigation": {},
+            "hasNavigationControls": {},
+            "hasTargetGroup": {},
             "hasTitle": {},
-            "mobileMenuExtended": {},
+            "burgerMenuExtended": {},
             "megadropdownOpen": {}
         };
     }
     static get methods() {
         return {
-            "toggleMobileMenu": {
+            "toggleBurgerMenu": {
                 "complexType": {
                     "signature": "(force?: boolean) => Promise<void>",
                     "parameters": [{
@@ -326,7 +361,7 @@ export class PostHeader {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "Toggles the mobile navigation.",
+                    "text": "Toggles the burger navigation menu.",
                     "tags": []
                 }
             }
@@ -338,10 +373,25 @@ export class PostHeader {
                 "propName": "device",
                 "methodName": "lockBody"
             }, {
-                "propName": "mobileMenuExtended",
+                "propName": "burgerMenuExtended",
                 "methodName": "lockBody"
             }];
     }
+    static get listeners() {
+        return [{
+                "name": "focusin",
+                "method": "onFocusChange",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "focusout",
+                "method": "onFocusChange",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
 }
 __decorate([
     EventFrom('post-megadropdown')

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

@@ -112,7 +112,7 @@ export class PostIcon {
         this.validateAnimation();
     }
     render() {
-        return (h(Host, { key: '0031b3e2e4016f9b28cade66fa435741940946a7', "data-version": version }, h("span", { key: '0efbcdd5f1dd737640238a0ab81b67ca8218adec', style: this.getStyles() })));
+        return (h(Host, { key: '7ce1f627f621201c0f4d6e90ee3d8d6d3c32798a', "data-version": version }, h("span", { key: '987ecd266b8bd68bdbb06cdb500a746b913e79b1', style: this.getStyles() })));
     }
     static get is() { return "post-icon"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1 +1 @@
-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 button .visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}post-language-option a{color:var(--post-current-fg);text-decoration:none}post-language-option :is(a,button){cursor:pointer;display:flex;align-items:center;justify-content:center;width:100%;height:100%;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;outline-offset:-2px !important;border-radius:4px}@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;outline-offset:-2px !important;border-radius:4px}@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;border-radius:0}post-language-option:where([variant=menu]) :is(a,button):hover{color:#fff;background-color:#504f4b}post-language-option:where([variant=menu]):first-child :is(a,button){border-start-start-radius:4px;border-start-end-radius:4px}post-language-option:where([variant=menu]):last-child :is(a,button){border-end-start-radius:4px;border-end-end-radius:4px}
+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 button .visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}post-language-option a{color:var(--post-current-fg);text-decoration:none}post-language-option :is(a,button){cursor:pointer;display:flex;align-items:center;justify-content:center;width:100%;height:100%;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;border-radius:4px}@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;border-radius:4px}@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;border-radius:0}post-language-option:where([variant=menu]) :is(a,button):hover{color:#fff;background-color:#504f4b}post-language-option:where([variant=menu]):first-child :is(a,button){border-start-start-radius:4px;border-start-end-radius:4px}post-language-option:where([variant=menu]):last-child :is(a,button){border-end-start-radius:4px;border-end-end-radius:4px}

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

@@ -49,7 +49,7 @@ export class PostLanguageOption {
                 this.emitChange();
             }
         };
-        return (h(Host, { key: 'b86bf33feb890e5dfbfae16f45ce2e56fdfaf16a', "data-version": version, role: this.variant === 'list' ? 'listitem' : undefined }, this.url ? (h("a", { "aria-current": this.active ? 'page' : undefined, href: this.url, hrefLang: lang, lang: lang, onClick: () => this.emitChange(), onKeyDown: emitOnKeyDown }, h("slot", null), h("span", { class: "visually-hidden" }, this.name))) : (h("button", { "aria-current": this.active ? 'true' : undefined, lang: lang, onClick: () => this.emitChange(), onKeyDown: emitOnKeyDown }, h("slot", null), h("span", { class: "visually-hidden" }, this.name)))));
+        return (h(Host, { key: '06ba54de702d5014b34f1b0cb6396cb947ac3ca6', "data-version": version, role: this.variant === 'list' ? 'listitem' : undefined }, this.url ? (h("a", { "aria-current": this.active ? 'page' : undefined, href: this.url, hrefLang: lang, lang: lang, onClick: () => this.emitChange(), onKeyDown: emitOnKeyDown }, h("slot", null), h("span", { class: "visually-hidden" }, this.name))) : (h("button", { "aria-current": this.active ? 'true' : undefined, lang: lang, onClick: () => this.emitChange(), onKeyDown: emitOnKeyDown }, h("slot", null), h("span", { class: "visually-hidden" }, this.name)))));
     }
     static get is() { return "post-language-option"; }
     static get originalStyleUrls() {
@@ -81,7 +81,7 @@ export class PostLanguageOption {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": true
             },
             "active": {
                 "type": "boolean",

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

@@ -1 +1 @@
-:host{display:flex !important;flex-wrap:wrap;gap:.5rem}.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}.post-language-switch-dropdown-container{display:flex;flex-direction:column}.post-language-switch-trigger{cursor:pointer;text-transform:uppercase;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;text-decoration:none;display:inline-flex;align-items:center;gap:6px;border-radius:24px;font-size:16px;padding:3px 10px}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.post-language-switch-trigger{background-color:ButtonFace !important}.post-language-switch-trigger:hover{background-color:Highlight !important}}.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:24px;width:24px}.post-language-switch-trigger[aria-expanded=true]{background-color:#050400;color:#fff}.post-language-switch-trigger[aria-expanded=true] post-icon{transform:rotate(180deg)}.post-language-switch-trigger[aria-expanded=true]:hover{background-color:#504f4b;color:#fff}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.post-language-switch-trigger{border:1px solid ButtonBorder}.post-language-switch-trigger[aria-expanded=true] post-icon,.post-language-switch-trigger:hover post-icon{color:HighlightText}}post-menu::part(menu){padding-block:0}
+:host{display:flex !important;flex-wrap:wrap;gap:.5rem}.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}.post-language-switch-dropdown-container{display:flex;flex-direction:column}.post-language-switch-trigger{cursor:pointer;text-transform:uppercase;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;text-decoration:none;display:inline-flex;align-items:center;gap:6px;border-radius:24px;font-size:16px;padding:3px 10px}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.post-language-switch-trigger{background-color:ButtonFace !important}.post-language-switch-trigger:hover{background-color:Highlight !important}}.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:24px;width:24px}.post-language-switch-trigger[aria-expanded=true]{background-color:#050400;color:#fff}.post-language-switch-trigger[aria-expanded=true] post-icon{transform:rotate(180deg)}.post-language-switch-trigger[aria-expanded=true]:hover{background-color:#504f4b;color:#fff}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.post-language-switch-trigger{border:1px solid ButtonBorder}.post-language-switch-trigger[aria-expanded=true] post-icon,.post-language-switch-trigger:hover post-icon{color:HighlightText}}post-menu::part(menu){padding-block:0}.post-language-switch-list{margin-top:1rem}

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

@@ -116,7 +116,7 @@ export class PostLanguageSwitch {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": true
             },
             "description": {
                 "type": "string",
@@ -135,7 +135,7 @@ export class PostLanguageSwitch {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": true
             },
             "variant": {
                 "type": "string",

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

@@ -25,7 +25,7 @@ export class PostLinkarea {
         this.mutationObserver.disconnect();
     }
     render() {
-        return (h(Host, { key: 'faa2a8c9b2fc4261496e0dbb091bae2aeee04e3b', "data-version": version, onClick: (e) => this.dispatchClick(e), tabindex: "0" }, h("slot", { key: '57c30507720e9a04436cb4e518aa19b023cd2c39' })));
+        return (h(Host, { key: 'b52d413e897694e5d0a9364ecfd8fea4583014e3', "data-version": version, onClick: (e) => this.dispatchClick(e), tabindex: "0" }, h("slot", { key: 'b08cf1ee4c829d27fb166fc9e796d79e5388fe47' })));
     }
     static get is() { return "post-linkarea"; }
     static get encapsulation() { return "shadow"; }

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

@@ -31,7 +31,7 @@ export class PostList {
         }
     }
     render() {
-        return (h(Host, { key: '908588a3f1261efbb85dbefade9f85f8ec6f16f8', "data-version": version }, h("div", { key: '44b224379be814dab98e16ad12a3ca0f10e61ac0', ref: el => (this.titleEl = el), id: this.titleId, class: `list-title${this.titleHidden ? ' visually-hidden' : ''}` }, h("slot", { key: '1aed36b7c286796a4d617643e7606e63bc2dd95a' })), h("div", { key: '3e1d137712b3e7616bab450426964f6c9334198e', role: "list", "aria-labelledby": this.titleId }, h("slot", { key: 'fd5abb2fca95d32295fbfa158795413264200ae8', name: "post-list-item" }))));
+        return (h(Host, { key: '85193bec2b2ff22ed76c93a4037f353b091192bc', "data-version": version }, h("div", { key: '32cdc5ccb95b48e3f81e90ac93f0207d935c9d3b', ref: el => (this.titleEl = el), id: this.titleId, class: `list-title${this.titleHidden ? ' visually-hidden' : ''}` }, h("slot", { key: '890dd411e370a7829354dcaa00fae75e8f538f01' })), h("div", { key: '72867a1d81f2e186ed3d68f5185a46c7c96fdd3b', role: "list", "aria-labelledby": this.titleId }, h("slot", { key: '2cd5a5e9ca717c675f9db3a19fbf13ff49a7312c', name: "post-list-item" }))));
     }
     static get is() { return "post-list"; }
     static get originalStyleUrls() {