@swisspost/design-system-components 10.0.0-next.38 → 10.0.0-next.40

package/loaders/post-closebutton.js

@@ -12,7 +12,7 @@ const PostClosebutton$1 = /*@__PURE__*/ proxyCustomElement(class PostClosebutton
         this.__attachShadow();
     }
     render() {
-        return (h(Host, { key: 'cfa55f799fdf9ad0f3ac1eb296e063b5001de997', "data-version": version }, h("button", { key: '7c8a084f6d7278329ddfb5fc4b2b8f992a185666', class: "btn btn-icon-close", type: "button" }, h("post-icon", { key: 'fc74ccb4f0c4c091a02a41cdef918d6c3b065c8c', "aria-hidden": "true", name: "closex" }), h("span", { key: '98478b013714df6d82c6c2f533ac8ecd2abae778', class: "visually-hidden" }, h("slot", { key: '109e2bca4436986dd037d8c29088cc79395bc200' })))));
+        return (h(Host, { key: '7b5e179b42eefd1823b2b2ef7ee17c94bd9f0ddd', "data-version": version }, h("button", { key: '471e68d1ddcfe741f5450d002b2daa86cec0f986', class: "btn btn-icon-close", type: "button" }, h("post-icon", { key: '928fa7460988cffa269a29506e68e056f84bcef8', "aria-hidden": "true", name: "closex" }), h("span", { key: 'c1501f4a8b7d8d95be7d02576b10143b9e6b0654', class: "visually-hidden" }, h("slot", { key: 'a9f1ab8db57486d420db0981090ad2ba5183c289' })))));
     }
     get host() { return this; }
     static get style() { return PostClosebuttonStyle0; }

package/loaders/post-collapsible-trigger2.js

@@ -1,7 +1,6 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { v as version } from './package.js';
-import { c as checkType } from './check-type.js';
-import { c as checkNonEmpty } from './check-non-empty.js';
+import { c as checkRequiredAndType } from './index2.js';
 import './breakpoints.js';
 import { e as eventGuard } from './event-guard.js';
 import { g as getRoot } from './get-root.js';
@@ -18,8 +17,7 @@ const PostCollapsibleTrigger = /*@__PURE__*/ proxyCustomElement(class PostCollap
      * Set the "aria-controls" and "aria-expanded" attributes on the trigger to match the state of the controlled post-collapsible
      */
     validateAriaAttributes() {
-        checkNonEmpty(this, 'for');
-        checkType(this, 'for', 'string', 'The post-collapsible-trigger "for" prop should be a id.');
+        checkRequiredAndType(this, 'for', 'string');
     }
     /**
      * Initiate a mutation observer that updates the trigger whenever necessary
@@ -98,7 +96,7 @@ const PostCollapsibleTrigger = /*@__PURE__*/ proxyCustomElement(class PostCollap
         this.updateAriaAttributes();
     }
     render() {
-        return (h(Host, { key: 'cd703fe34b8c82afc5956b58724d36b06054bc0b', "data-version": version }, h("slot", { key: '5abe4ba2b8922b941cc8aebbc7039e34e1853855' })));
+        return (h(Host, { key: '8c835c780604b1138262489ca7d3313288e5ee86', "data-version": version }, h("slot", { key: 'ef354c2ca5e699a4e2c8940959f75a69918f388c' })));
     }
     get host() { return this; }
     static get watchers() { return {

package/loaders/post-collapsible2.js

@@ -1,7 +1,7 @@
 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 { d as checkEmptyOrType } from './index2.js';
+import { a as checkEmptyOrType } from './index2.js';
 
 function isMotionReduced() {
     return IS_BROWSER ? window.matchMedia('(prefers-reduced-motion: reduce)').matches : false;
@@ -78,7 +78,7 @@ const PostCollapsible = /*@__PURE__*/ proxyCustomElement(class PostCollapsible e
         triggers.forEach(trigger => trigger.update());
     }
     render() {
-        return (h(Host, { key: 'a678bc639dfd7686d8e1bd57ca0f09984a24ab61', "data-version": version, tabindex: this.collapsed ? -1 : undefined }, h("slot", { key: 'e0b88ac152fa09314b4bc01c9abdb11480e2cb4d' })));
+        return (h(Host, { key: '130edce2062a5f3dac3072f173d021e88dddd7cf', "data-version": version, tabindex: this.collapsed ? -1 : undefined }, h("slot", { key: '54ed1790df52911b821a4de38cd5f33c425f3399' })));
     }
     get host() { return this; }
     static get watchers() { return {

package/loaders/post-footer.js

@@ -1,57 +1,94 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { v as version } from './package.js';
+import { c as checkRequiredAndType } from './index2.js';
 import { b as breakpoint } from './breakpoints.js';
+import { d as defineCustomElement$6 } from './post-accordion2.js';
 import { d as defineCustomElement$5 } from './post-accordion-item2.js';
 import { d as defineCustomElement$4 } from './post-collapsible2.js';
 import { d as defineCustomElement$3 } from './post-collapsible-trigger2.js';
 import { d as defineCustomElement$2 } from './post-icon2.js';
 
-const postFooterCss = ":host{display:block}footer{background-color:#fc0;--post-footer-container-padding-block:32px;--post-footer-container-padding-inline:16px;--post-footer-container-max-width:1200px;--post-footer-grid-template:auto / auto;--post-footer-grid-row-gap:0;--post-footer-grid-column-gap:0;--post-footer-grid-margin-block-end:24px;--post-footer-grid-padding-block-end:0;--post-footer-column-flex-direction:column;--post-footer-column-align-items:start;--post-footer-column-gap:0;--post-footer-post-list-flex-direction:column;--post-footer-post-list-gap:8px;--post-footer-post-list-align-items:start;--post-footer-socialmedia-margin-block-end:var(--post-footer-grid-margin-block-end);--post-footer-app-margin-block-end:var(--post-footer-grid-margin-block-end);--post-footer-businesssectors-margin-block-end:var(--post-footer-grid-margin-block-end);--post-footer-meta-margin-block-end:16px;--post-footer-meta-font-size:inherit;--post-footer-copyright-font-size:var(--post-footer-meta-font-size)}@media screen and (min-width: 600px){footer{--post-footer-container-padding-block:40px;--post-footer-grid-template:repeat(2, auto) / repeat(2, auto);--post-footer-grid-row-gap:32px;--post-footer-grid-column-gap:16px;--post-footer-grid-margin-block-end:32px;--post-footer-grid-padding-block-end:32px;--post-footer-post-list-flex-direction:row;--post-footer-post-list-gap:16px;--post-footer-post-list-align-items:center;--post-footer-meta-margin-block-end:8px}}@media screen and (min-width: 780px){footer{--post-footer-container-padding-inline:40px}}@media screen and (min-width: 1024px){footer{--post-footer-container-padding-block:56px;--post-footer-grid-template:auto / repeat(4, auto);--post-footer-grid-row-gap:0;--post-footer-grid-column-gap:24px;--post-footer-grid-margin-block-end:40px;--post-footer-column-flex-direction:row;--post-footer-column-align-items:center;--post-footer-column-gap:32px;--post-footer-post-list-gap:24px;--post-footer-businesssectors-margin-block-end:24px;--post-footer-meta-font-size:16px}}.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}.footer-container{box-sizing:content-box;margin:0 auto;padding:var(--post-footer-container-padding-block) var(--post-footer-container-padding-inline);max-width:var(--post-footer-container-max-width)}.footer-grid{display:grid;grid-template:var(--post-footer-grid-template);row-gap:var(--post-footer-grid-row-gap);column-gap:var(--post-footer-grid-column-gap);margin-block-end:var(--post-footer-grid-margin-block-end);padding-block-end:var(--post-footer-grid-padding-block-end)}.footer-grid ::part(button),.footer-grid ::part(body){padding-inline:0}.footer-column{display:flex;flex-direction:var(--post-footer-column-flex-direction);flex-wrap:wrap;justify-content:space-between;align-items:var(--post-footer-column-align-items);column-gap:var(--post-footer-column-gap)}.footer-socialmedia ::slotted(post-list),.footer-app ::slotted(post-list),.footer-businesssectors ::slotted(post-list),.footer-meta ::slotted(post-list){display:flex !important;flex-direction:var(--post-footer-post-list-flex-direction) !important;gap:var(--post-footer-post-list-gap) !important;align-items:var(--post-footer-post-list-align-items) !important}.footer-socialmedia{margin-block-end:var(--post-footer-socialmedia-margin-block-end)}.footer-app{margin-block-end:var(--post-footer-app-margin-block-end)}.footer-businesssectors{margin-block-end:var(--post-footer-businesssectors-margin-block-end)}.footer-meta{margin-block-end:var(--post-footer-meta-margin-block-end);font-size:var(--post-footer-meta-font-size)}.footer-copyright{display:flex;flex-wrap:wrap;column-gap:.5rem;font-size:var(--post-footer-copyright-font-size)}";
+const postFooterCss = ":host{display:block}footer{background-color:#fc0;--post-footer-container-padding-block:32px;--post-footer-container-padding-inline:16px;--post-footer-container-max-width:1200px;--post-footer-grid-template:auto / auto;--post-footer-grid-row-gap:0;--post-footer-grid-column-gap:0;--post-footer-grid-margin-block-end:24px;--post-footer-grid-padding-block-end:0;--post-footer-column-flex-direction:column;--post-footer-column-align-items:start;--post-footer-column-gap:0;--post-footer-post-list-flex-direction:column;--post-footer-post-list-gap:8px;--post-footer-post-list-align-items:start;--post-footer-socialmedia-margin-block-end:var(--post-footer-grid-margin-block-end);--post-footer-app-margin-block-end:var(--post-footer-grid-margin-block-end);--post-footer-businesssectors-margin-block-end:var(--post-footer-grid-margin-block-end);--post-footer-meta-margin-block-end:16px;--post-footer-meta-font-size:inherit;--post-footer-copyright-font-size:var(--post-footer-meta-font-size)}@media screen and (min-width: 600px){footer{--post-footer-container-padding-block:40px;--post-footer-grid-template:repeat(2, auto) / repeat(2, auto);--post-footer-grid-row-gap:32px;--post-footer-grid-column-gap:16px;--post-footer-grid-margin-block-end:32px;--post-footer-grid-padding-block-end:32px;--post-footer-post-list-flex-direction:row;--post-footer-post-list-gap:16px;--post-footer-post-list-align-items:center;--post-footer-meta-margin-block-end:8px}}@media screen and (min-width: 780px){footer{--post-footer-container-padding-inline:40px}}@media screen and (min-width: 1024px){footer{--post-footer-container-padding-block:56px;--post-footer-grid-template:auto / repeat(4, auto);--post-footer-grid-row-gap:0;--post-footer-grid-column-gap:24px;--post-footer-grid-margin-block-end:40px;--post-footer-column-flex-direction:row;--post-footer-column-align-items:center;--post-footer-column-gap:32px;--post-footer-post-list-gap:24px;--post-footer-businesssectors-margin-block-end:24px;--post-footer-meta-font-size:16px}}.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}.footer-container{box-sizing:content-box;margin:0 auto;padding:var(--post-footer-container-padding-block) var(--post-footer-container-padding-inline);max-width:var(--post-footer-container-max-width)}.footer-grid{display:grid;grid-template:var(--post-footer-grid-template);row-gap:var(--post-footer-grid-row-gap);column-gap:var(--post-footer-grid-column-gap);margin-block-end:var(--post-footer-grid-margin-block-end);padding-block-end:var(--post-footer-grid-padding-block-end)}.footer-grid ::part(button),.footer-grid ::part(body){padding-inline:0}.footer-column{display:flex;flex-direction:var(--post-footer-column-flex-direction);flex-wrap:wrap;justify-content:space-between;align-items:var(--post-footer-column-align-items);column-gap:var(--post-footer-column-gap)}.footer-socialmedia ::slotted(post-list),.footer-app ::slotted(post-list),.footer-businesssectors ::slotted(post-list),.footer-meta ::slotted(post-list){display:flex !important;flex-direction:var(--post-footer-post-list-flex-direction) !important;gap:var(--post-footer-post-list-gap) !important;align-items:var(--post-footer-post-list-align-items) !important}.footer-socialmedia{margin-block-end:var(--post-footer-socialmedia-margin-block-end)}.footer-app{margin-block-end:var(--post-footer-app-margin-block-end)}.footer-businesssectors{margin-block-end:var(--post-footer-businesssectors-margin-block-end)}.footer-meta{margin-block-end:var(--post-footer-meta-margin-block-end);font-size:var(--post-footer-meta-font-size)}.footer-copyright{display:flex;flex-wrap:wrap;column-gap:.5rem;font-size:var(--post-footer-copyright-font-size)}.d-none{display:none}post-accordion-item.d-none+post-accordion-item{--post-accordion-button-border-top-width:unset}post-accordion-item:not(.d-none)~post-accordion-item,post-accordion-item:not(post-accordion-item:not(.d-none)~*):not(:has(~post-accordion-item:not(.d-none))){--post-accordion-button-border-top-width:0}";
 const PostFooterStyle0 = postFooterCss;
 
+const GRID_SLOTS = ['grid-1', 'grid-2', 'grid-3', 'grid-4'];
 const PostFooter$1 = /*@__PURE__*/ proxyCustomElement(class PostFooter extends HTMLElement {
+    validateLabel() {
+        checkRequiredAndType(this, 'label', 'string');
+    }
     constructor() {
         super();
         this.__registerHost();
         this.__attachShadow();
         this.breakpointChange = (e) => {
-            this.isMobile = e.detail === 'mobile';
+            this.device = e.detail;
+        };
+        this.handleGridSlotChange = (...devices) => (e) => {
+            if (devices.includes(this.device) && e.target instanceof HTMLSlotElement) {
+                this.updateGridSlotDisplay(e.target.name, e.target.assignedElements().length > 0);
+            }
         };
         this.label = undefined;
-        this.isMobile = breakpoint.get('name') === 'mobile';
+        this.device = breakpoint.get('name');
+        this.gridSlotDisplayed = {};
+        this.handleGridSlotChange = this.handleGridSlotChange.bind(this);
     }
     connectedCallback() {
         window.addEventListener('postBreakpoint:name', this.breakpointChange);
     }
+    componentWillLoad() {
+        this.validateLabel();
+        // initialize grid visibility by checking the content of each slot
+        GRID_SLOTS.forEach(slotName => {
+            const assignedElements = this.host.querySelectorAll(`[slot="${slotName}"]`);
+            this.updateGridSlotDisplay(slotName, assignedElements.length > 0);
+        });
+    }
     disconnectedCallback() {
         window.removeEventListener('postBreakpoint:name', this.breakpointChange);
     }
+    updateGridSlotDisplay(slotName, hasContent) {
+        if (this.gridSlotDisplayed[slotName] !== hasContent) {
+            this.gridSlotDisplayed = { ...this.gridSlotDisplayed, [slotName]: hasContent };
+        }
+    }
     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" })))));
+        return (h("post-accordion", { headingLevel: 3, multiple: true }, GRID_SLOTS.map(slotName => (h("post-accordion-item", { class: { 'd-none': !this.gridSlotDisplayed[slotName] }, collapsed: true }, h("span", { slot: "header" }, h("slot", { name: slotName + '-title' })), h("slot", { onSlotchange: this.handleGridSlotChange('mobile'), name: slotName }))))));
     }
-    renderGrid() {
-        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" }))));
+    renderColumns() {
+        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: '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" }))))));
+        return (h(Host, { key: '1cb83edcb5ab2e5582a48fd9c95a60a8411567ee', "data-version": version }, h("footer", { key: '4f507a514bdb6ad3f3579737ae72ae6a40168715' }, h("h2", { key: 'e99aeaef9a9f2e9e060d3f5d0fbad650360a7128', class: "visually-hidden" }, this.label), h("div", { key: 'f4cedb3f564577c0a5a91ea3ca84587c7af5818a', class: "footer-container" }, h("div", { key: '05ffad19533d49c91d5be570f5af52779a33d2df', class: "footer-grid" }, this.device === 'mobile' ? this.renderAccordion() : this.renderColumns()), h("div", { key: '6110e4382e43f63a83630538a0329e1f4b1d8590', class: "footer-column" }, h("div", { key: '5ac7115be86fc40f267c4d279574ad03eff66f39', class: "footer-socialmedia" }, h("slot", { key: '9c83318f3c4cc2d0cfa20087bb592f80a392cfb9', name: "socialmedia" })), h("div", { key: '5c3000bcdeea9a0952f67e6f09b38f476eb5380d', class: "footer-app" }, h("slot", { key: 'dd81ee8ba0e3d4ea42e60aebb4ce6daa30a1fe3d', name: "app" }))), h("div", { key: '242a9a86330f68888943cf2aa83ed0e24649a1a5', class: "footer-businesssectors" }, h("slot", { key: '9c2a860f2c0d89aa0a291ccd1f00dedccda64c71', name: "businesssectors" })), h("div", { key: '84269c90a5027029c6cf17f24d3dfe7cd3e70b06', class: "footer-meta" }, h("slot", { key: '4fef37edc54a6b0f6a52760eb8330ff98efa33bc', name: "meta" })), h("div", { key: '38bba9bd55e6d9025b6e4b95565594a484351a57', class: "footer-copyright" }, h("slot", { key: '4ecc0141a1489463b92ed44e7b02bf72b7f41fc5', name: "copyright" }))))));
     }
     get host() { return this; }
+    static get watchers() { return {
+        "label": ["validateLabel"]
+    }; }
     static get style() { return PostFooterStyle0; }
 }, [1, "post-footer", {
         "label": [1],
-        "isMobile": [32]
+        "device": [32],
+        "gridSlotDisplayed": [32]
+    }, undefined, {
+        "label": ["validateLabel"]
     }]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["post-footer", "post-accordion-item", "post-collapsible", "post-collapsible-trigger", "post-icon"];
+    const components = ["post-footer", "post-accordion", "post-accordion-item", "post-collapsible", "post-collapsible-trigger", "post-icon"];
     components.forEach(tagName => { switch (tagName) {
         case "post-footer":
             if (!customElements.get(tagName)) {
                 customElements.define(tagName, PostFooter$1);
             }
             break;
+        case "post-accordion":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
         case "post-accordion-item":
             if (!customElements.get(tagName)) {
                 defineCustomElement$5();

package/loaders/post-header.js

@@ -1,5 +1,6 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { v as version } from './package.js';
+import { b as breakpoint } from './breakpoints.js';
 import { a as slideUp, s as slideDown } from './slide.js';
 import { g as getFocusableChildren } from './get-focusable-children.js';
 import { e as eventGuard } from './event-guard.js';
@@ -138,7 +139,7 @@ function throttle (delay, callback, options) {
   return wrapper;
 }
 
-const postHeaderCss = "*,::before,::after{box-sizing:border-box}:host{z-index:1020;position:relative;--post-global-header-top:calc( (var(--post-global-header-height) - var(--post-global-header-reduced-height)) * -1 );--post-local-header-top:calc( -1 * (var(--post-local-header-height) - var(--post-main-navigation-height)) + var(--post-global-header-reduced-height) );--post-logo-height:calc(var(--post-global-header-height) - var(--post-header-scroll-top, 0px));--post-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){--post-global-header-top:0;--post-local-header-top:var(--post-global-header-height);--post-logo-height:var(--post-global-header-height);--post-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(--post-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(--post-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(--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;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(--post-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(--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}::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;--post-global-header-top:calc( (var(--post-global-header-height) - var(--post-global-header-reduced-height)) * -1 );--post-local-header-top:calc( -1 * (var(--post-local-header-height) - var(--post-main-navigation-height)) + var(--post-global-header-reduced-height) );--post-logo-height:calc(var(--post-global-header-height) - var(--post-header-scroll-top, 0px));--post-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){--post-global-header-top:0;--post-local-header-top:var(--post-global-header-height);--post-logo-height:var(--post-global-header-height);--post-global-controls-top:0}@media screen and (max-width: 1023.98px){:host{position:fixed;inset:0;bottom:auto}}: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:4;inset-block-start:0;position:relative}}@media screen and (min-width: 1024px){.global-header{z-index:5;padding-inline-end:12px;inset-block-start:var(--post-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(--post-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(--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;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(--post-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:3;position:relative;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:2;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(--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}::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 {
@@ -172,9 +173,15 @@ const PostHeader$1 = /*@__PURE__*/ proxyCustomElement(class PostHeader extends H
         super();
         this.__registerHost();
         this.__attachShadow();
-        this.postUpdateDevice = createEvent(this, "postUpdateDevice", 7);
-        this.throttledResize = throttle(50, () => this.handleResize());
-        this.megedropdownStateHandler = (event) => {
+        this.throttledResize = throttle(50, () => this.updateLocalHeaderHeight());
+        this.breakpointChange = (e) => {
+            this.device = e.detail;
+            this.switchLanguageSwitchMode();
+            if (this.device === 'desktop' && this.mobileMenuExtended) {
+                this.closeMobileMenu();
+            }
+        };
+        this.megadropdownStateHandler = (event) => {
             eventGuard(this.host, event, {
                 targetLocalName: 'post-megadropdown',
                 delegatorSelector: 'post-header',
@@ -182,13 +189,12 @@ const PostHeader$1 = /*@__PURE__*/ proxyCustomElement(class PostHeader extends H
                 this.megadropdownOpen = event.detail.isVisible;
             });
         };
-        this.device = null;
+        this.device = breakpoint.get('name');
         this.mobileMenuExtended = false;
         this.megadropdownOpen = false;
         this.handleScrollEvent = this.handleScrollEvent.bind(this);
         this.updateScrollParentHeight = this.updateScrollParentHeight.bind(this);
         this.updateLocalHeaderHeight = this.updateLocalHeaderHeight.bind(this);
-        this.megedropdownStateHandler = this.megedropdownStateHandler.bind(this);
         this.keyboardHandler = this.keyboardHandler.bind(this);
         this.handleLinkClick = this.handleLinkClick.bind(this);
     }
@@ -200,9 +206,11 @@ const PostHeader$1 = /*@__PURE__*/ proxyCustomElement(class PostHeader extends H
         this.scrollParent.addEventListener('scroll', this.handleScrollEvent, {
             passive: true,
         });
-        document.addEventListener('postToggleMegadropdown', this.megedropdownStateHandler);
+        document.addEventListener('postToggleMegadropdown', this.megadropdownStateHandler);
         this.host.addEventListener('click', this.handleLinkClick);
-        this.handleResize();
+        window.addEventListener('postBreakpoint:name', this.breakpointChange);
+        this.switchLanguageSwitchMode();
+        this.updateLocalHeaderHeight();
         this.handleScrollParentResize();
         this.lockBody(false, this.mobileMenuExtended, 'mobileMenuExtended');
     }
@@ -216,10 +224,11 @@ const PostHeader$1 = /*@__PURE__*/ proxyCustomElement(class PostHeader extends H
     // Clean up possible side effects when post-header is disconnected
     disconnectedCallback() {
         const scrollParent = this.scrollParent;
+        window.removeEventListener('postBreakpoint:name', this.breakpointChange);
         window.removeEventListener('resize', this.throttledResize);
         window.removeEventListener('scroll', this.handleScrollEvent);
         scrollParent.removeEventListener('scroll', this.handleScrollEvent);
-        document.removeEventListener('postToggleMegadropdown', this.megedropdownStateHandler);
+        document.removeEventListener('postToggleMegadropdown', this.megadropdownStateHandler);
         this.host.removeEventListener('keydown', this.keyboardHandler);
         this.host.removeEventListener('click', this.handleLinkClick);
         if (this.scrollParentResizeObserver) {
@@ -232,6 +241,14 @@ const PostHeader$1 = /*@__PURE__*/ proxyCustomElement(class PostHeader extends H
         }
         this.mobileMenuExtended = false;
     }
+    async closeMobileMenu() {
+        this.mobileMenuAnimation.finish();
+        const menuButton = this.getMenuButton();
+        if (menuButton) {
+            menuButton.toggled = false;
+        }
+        this.mobileMenuExtended = false;
+    }
     /**
      * Toggles the mobile navigation.
      */
@@ -270,6 +287,9 @@ const PostHeader$1 = /*@__PURE__*/ proxyCustomElement(class PostHeader extends H
         this.firstFocusableEl = focusableChildren[0];
         this.lastFocusableEl = focusableChildren[focusableChildren.length - 1];
     }
+    getMenuButton() {
+        return this.host.querySelector('post-togglebutton');
+    }
     keyboardHandler(e) {
         if (e.key === 'Tab' && this.mobileMenuExtended) {
             if (e.shiftKey && document.activeElement === this.firstFocusableEl) {
@@ -312,28 +332,6 @@ const PostHeader$1 = /*@__PURE__*/ proxyCustomElement(class PostHeader extends H
             }
         }
     }
-    handleResize() {
-        const previousDevice = this.device;
-        let newDevice;
-        const width = window?.innerWidth;
-        if (width >= 1024) {
-            newDevice = 'desktop';
-        }
-        else if (width >= 600) {
-            newDevice = 'tablet';
-        }
-        else {
-            newDevice = 'mobile';
-        }
-        // Apply only on change for doing work only when necessary
-        if (newDevice !== previousDevice) {
-            this.device = newDevice;
-            this.postUpdateDevice.emit(this.device);
-            window.requestAnimationFrame(() => {
-                this.switchLanguageSwitchMode();
-            });
-        }
-    }
     handleScrollParentResize() {
         if (this.scrollParent) {
             this.scrollParentResizeObserver = new ResizeObserver(this.updateScrollParentHeight);
@@ -365,7 +363,7 @@ const PostHeader$1 = /*@__PURE__*/ proxyCustomElement(class PostHeader extends H
         return (h("div", { class: navigationClasses.join(' '), style: { '--post-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: '9705dc224bcf389c8836efbaf40d6d6617b2052f', "data-version": version }, h("div", { key: '41a1b10ff4193b0a31eecc673935aabb70c1d1b4', class: "global-header" }, h("div", { key: '7e3692fca4130755c009447fcc20585386f1c65d', class: "global-sub" }, h("div", { key: '5b4d7fb16fcbeee3f07a1a160751b5c23e9f9edb', class: "logo" }, h("slot", { key: '67048479266ba86f2a1b739751be7bfe97ce4544', name: "post-logo" }))), h("div", { key: '83642103fae714a7c9ac1962e1433fd72899cf87', class: "global-sub" }, this.device === 'desktop' && h("slot", { key: 'ff672718574b3690d9ac8c2f54cb50e2b7052533', name: "meta-navigation" }), h("slot", { key: '782d10f094831da10cd9e9695944eee9c8003a05', name: "global-controls" }), this.device === 'desktop' && h("slot", { key: '5c5a277e3a627f5a731e1342c6604b6e064f3b52', name: "post-language-switch" }), h("div", { key: 'b07c9f1994fd99b170192ed4f4092afb92a1dd3e', onClick: () => this.toggleMobileMenu(), class: "mobile-toggle" }, h("slot", { key: '1bbb5a704cf1841e4845ff9921cd6662ee2d7387', name: "post-togglebutton" })))), h("div", { key: 'da8ecfd78835ab7431408558ee938d5054349955', class: 'local-header ' + (this.mobileMenuExtended ? 'local-header-mobile-extended' : '') }, h("slot", { key: '23c35a54fdf177a9b58054154e09f406f27fe049', name: "title" }), h("div", { key: 'de4dfdec5bd43a22587aa8e93842c4e16c73f82b', class: "local-sub" }, h("slot", { key: '35b09a33f3c87e382afb809f0c2b8153dd909097', name: "local-controls" }), h("slot", { key: 'bdfa7a68815e8d259cd346ef890904b652a5a7f2' })), this.device === 'desktop' && this.renderNavigation()), this.device !== 'desktop' && this.renderNavigation()));
+        return (h(Host, { key: 'b552e09d25f9d69217f47b31931553edabcb3b5b', "data-version": version }, h("div", { key: 'b7bb569991b4c50101b80a907aff823ed64f93c3', class: "global-header" }, h("div", { key: 'bd88a1b5cc75cbb9832da4082fc6bc2405342421', class: "global-sub" }, h("div", { key: '0f338f37c57cdad900f0b9654ef16a26e60385d9', class: "logo" }, h("slot", { key: '8f5faf2470aee5a7c3d5ebb4157009f32e679085', name: "post-logo" }))), h("div", { key: 'f97a893b1dd7bce09f57e8199bd584fd6e28b71c', class: "global-sub" }, this.device === 'desktop' && h("slot", { key: '5edf8a7834d42b89a5c0bb5e4b53ff75cef78fd7', name: "meta-navigation" }), h("slot", { key: '196cf8c24e02cac8fc8215f9ab2e9efed46dced3', name: "global-controls" }), this.device === 'desktop' && h("slot", { key: 'bce4b98e5ac9f7afba6b88a9da3fbe91b69aadf3', name: "post-language-switch" }), h("div", { key: '1c4b51f44882f55a5fe5386ed33b696c81289d14', onClick: () => this.toggleMobileMenu(), class: "mobile-toggle" }, h("slot", { key: '56625102ad896e624e6a879f203e6b2cac4455a3', name: "post-togglebutton" })))), h("div", { key: 'd1a3961046902fa6026b065b9a013a341188d0e5', class: 'local-header ' + (this.mobileMenuExtended ? 'local-header-mobile-extended' : '') }, h("slot", { key: '28d1be43cae56c53468e51e9b62cf92652431dcd', name: "title" }), h("div", { key: '09729387f1de16c4052c87956112b2aa64148f9a', class: "local-sub" }, h("slot", { key: 'fa0f247d960522d617dfadcfb0576f875eca45c6', name: "local-controls" }), h("slot", { key: 'b49e7647e428efbe3adea6f4302f023a1d6fe2bd' })), this.device === 'desktop' && this.renderNavigation()), this.device !== 'desktop' && this.renderNavigation()));
     }
     get host() { return this; }
     static get watchers() { return {

package/loaders/post-icon2.js

@@ -1,9 +1,7 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { I as IS_BROWSER } from './breakpoints.js';
-import { a as checkEmptyOrOneOf, d as checkEmptyOrType } from './index2.js';
+import { d as checkEmptyOrOneOf, a as checkEmptyOrType, c as checkRequiredAndType } from './index2.js';
 import { v as version } from './package.js';
-import { c as checkNonEmpty } from './check-non-empty.js';
-import { c as checkType } from './check-type.js';
 
 const postIconCss = ":host{display:inline-block;width:1em;height:1em;vertical-align:-0.15em}span{display:block;width:100%;height:100%;fill:currentColor;forced-color-adjust:preserve-parent-color;background-color:currentColor;-webkit-mask-position:center center;mask-position:center center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100%;mask-size:100%}:host([flip-h]:not([flip-h=false])){scale:-1 1}:host([flip-v]:not([flip-v=false])){scale:1 -1}:host([flip-h][flip-v]:not([flip-h=false],[flip-v=false])){scale:-1}:host([animation]){transform-origin:center}:host([animation=cylon]){animation:icon-animation-cylon .75s ease-in-out infinite alternate}:host([animation=cylon-vertical]){animation:icon-animation-cylon-vertical .75s ease-in-out infinite alternate}:host([animation=spin]){animation:icon-animation-spin 2s linear infinite normal}:host([animation=spin-reverse]){animation:icon-animation-spin 2s linear infinite reverse}:host([animation=fade]){animation:icon-animation-fade .75s ease-in-out infinite alternate}:host([animation=throb]){animation:icon-animation-throb .75s ease-in-out infinite alternate}@keyframes icon-animation-cylon{from{transform:translateX(-25%)}to{transform:translateX(25%)}}@keyframes icon-animation-cylon-vertical{from{transform:translateY(25%)}to{transform:translateY(-25%)}}@keyframes icon-animation-fade{from{opacity:.1}to{opacity:1}}@keyframes icon-animation-spin{from{transform:rotate(0deg)}to{transform:rotate(359deg)}}@keyframes icon-animation-throb{from{opacity:.5;transform:scale(0.5)}to{opacity:1;transform:scale(1)}}";
 const PostIconStyle0 = postIconCss;
@@ -23,30 +21,22 @@ const PostIcon = /*@__PURE__*/ proxyCustomElement(class PostIcon extends HTMLEle
         super();
         this.__registerHost();
         this.__attachShadow();
-        this.animation = null;
-        this.base = null;
+        this.animation = undefined;
+        this.base = undefined;
         this.flipH = false;
         this.flipV = false;
         this.name = undefined;
-        this.rotate = null;
-        this.scale = null;
+        this.rotate = undefined;
+        this.scale = undefined;
     }
-    validateAnimation(newValue = this.animation) {
-        if (newValue !== undefined)
-            checkEmptyOrOneOf(this, 'animation', ANIMATION_KEYS);
+    validateAnimation() {
+        checkEmptyOrOneOf(this, 'animation', ANIMATION_KEYS);
     }
     validateBase() {
         checkEmptyOrType(this, 'base', 'string');
     }
-    validateFlipH() {
-        checkEmptyOrType(this, 'flipH', 'boolean');
-    }
-    validateFlipV() {
-        checkEmptyOrType(this, 'flipV', 'boolean');
-    }
     validateName() {
-        checkNonEmpty(this, 'name');
-        checkType(this, 'name', 'string');
+        checkRequiredAndType(this, 'name', 'string');
     }
     validateRotate() {
         checkEmptyOrType(this, 'rotate', 'number');
@@ -118,21 +108,17 @@ const PostIcon = /*@__PURE__*/ proxyCustomElement(class PostIcon extends HTMLEle
     componentDidLoad() {
         this.validateBase();
         this.validateName();
-        this.validateFlipH();
-        this.validateFlipV();
         this.validateScale();
         this.validateRotate();
         this.validateAnimation();
     }
     render() {
-        return (h(Host, { key: 'b3c3efcc03f423a248e231b4b4c5d79c93ae25a6', "data-version": version }, h("span", { key: 'd73d4df11fcccb96d5346f3f8c3e18602bb8d484', style: this.getStyles() })));
+        return (h(Host, { key: '7fe2d83b8d3c46bf31f451b7b06a8366c49971de', "data-version": version }, h("span", { key: '3b3e474985eef7697e4c05f75fc6abd3e96dbbc9', style: this.getStyles() })));
     }
     get host() { return this; }
     static get watchers() { return {
         "animation": ["validateAnimation"],
         "base": ["validateBase"],
-        "flipH": ["validateFlipH"],
-        "flipV": ["validateFlipV"],
         "name": ["validateName"],
         "rotate": ["validateRotate"],
         "scale": ["validateScale"]
@@ -149,8 +135,6 @@ const PostIcon = /*@__PURE__*/ proxyCustomElement(class PostIcon extends HTMLEle
     }, undefined, {
         "animation": ["validateAnimation"],
         "base": ["validateBase"],
-        "flipH": ["validateFlipH"],
-        "flipV": ["validateFlipV"],
         "name": ["validateName"],
         "rotate": ["validateRotate"],
         "scale": ["validateScale"]

package/loaders/post-language-option.js

@@ -1,8 +1,8 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { d as checkEmptyOrType } from './index2.js';
+import { c as checkRequiredAndType, d as checkEmptyOrOneOf, a as checkEmptyOrType, g as checkEmptyOrUrl } from './index2.js';
 import './breakpoints.js';
 import { v as version } from './package.js';
-import { c as checkType } from './check-type.js';
+import { S as SWITCH_VARIANTS } from './switch-variants.js';
 
 const postLanguageOptionCss = "@keyframes popIn{from{transform:scale(0.9);opacity:0;transition-property:transform,opacity,overlay,display;transition-behavior:allow-discrete;transition-duration:var(--post-transition-duration, 0.35s);transition-timing-function:linear(0, 0.007, 0.029 2.2%, 0.118 4.7%, 0.625 14.4%, 0.826 19%, 0.902, 0.962, 1.008 26.1%, 1.041 28.7%, 1.064 32.1%, 1.07 36%, 1.061 40.5%, 1.015 53.4%, 0.999 61.6%, 0.995 71.2%, 1)}to{opacity:1;transform:scale(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 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;
@@ -20,20 +20,19 @@ const PostLanguageOption$1 = /*@__PURE__*/ proxyCustomElement(class PostLanguage
         this.url = undefined;
     }
     validateCode() {
-        checkType(this, 'code', 'string');
+        checkRequiredAndType(this, 'code', 'string');
     }
-    validateActiveProp() {
-        checkEmptyOrType(this, 'active', 'boolean');
+    validateVariant() {
+        checkEmptyOrOneOf(this, 'variant', SWITCH_VARIANTS);
     }
     validateName() {
         checkEmptyOrType(this, 'name', 'string');
     }
     validateUrl() {
-        checkEmptyOrType(this, 'url', 'string');
+        checkEmptyOrUrl(this, 'url');
     }
     componentDidLoad() {
         this.validateCode();
-        this.validateActiveProp();
         this.validateName();
         this.validateUrl();
         if (!this.name && this.isNameRequired()) {
@@ -63,12 +62,12 @@ const PostLanguageOption$1 = /*@__PURE__*/ proxyCustomElement(class PostLanguage
                 this.emitChange();
             }
         };
-        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)))));
+        return (h(Host, { key: 'fe37c9aed573664a2f70b25b5d25e5bb58a23702', "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"],
+        "variant": ["validateVariant"],
         "name": ["validateName"],
         "url": ["validateUrl"]
     }; }
@@ -82,7 +81,7 @@ const PostLanguageOption$1 = /*@__PURE__*/ proxyCustomElement(class PostLanguage
         "select": [64]
     }, undefined, {
         "code": ["validateCode"],
-        "active": ["validateActiveProp"],
+        "variant": ["validateVariant"],
         "name": ["validateName"],
         "url": ["validateUrl"]
     }]);

package/loaders/post-language-switch.js

@@ -1,16 +1,14 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { a as checkEmptyOrOneOf } from './index2.js';
+import { c as checkRequiredAndType, d as checkEmptyOrOneOf } from './index2.js';
 import './breakpoints.js';
 import { e as eventGuard } from './event-guard.js';
 import { v as version } from './package.js';
+import { S as SWITCH_VARIANTS } from './switch-variants.js';
 import { n as nanoid } from './index.browser.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';
 import { d as defineCustomElement$2 } from './post-popovercontainer2.js';
-import { c as checkType } from './check-type.js';
-
-const SWITCH_VARIANTS = ['list', 'menu'];
 
 const postLanguageSwitchCss = ":host{display:flex !important;flex-wrap:wrap;gap:.5rem}.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}}";
 const PostLanguageSwitchStyle0 = postLanguageSwitchCss;
@@ -30,10 +28,10 @@ const PostLanguageSwitch$1 = /*@__PURE__*/ proxyCustomElement(class PostLanguage
         return Array.from(this.host.querySelectorAll('post-language-option'));
     }
     validateCaption() {
-        checkType(this, 'caption', 'string');
+        checkRequiredAndType(this, 'caption', 'string');
     }
     validateDescription() {
-        checkType(this, 'description', 'string');
+        checkRequiredAndType(this, 'description', 'string');
     }
     validateVariant() {
         checkEmptyOrOneOf(this, 'variant', SWITCH_VARIANTS);

package/loaders/post-linkarea.js

@@ -21,7 +21,7 @@ const PostLinkarea$1 = /*@__PURE__*/ proxyCustomElement(class PostLinkarea exten
         interactiveElement.dispatchEvent(new MouseEvent('click', { ctrlKey, shiftKey, altKey, metaKey }));
     }
     render() {
-        return (h(Host, { key: '56e4b032fa8976cc120bff5f1c36d55167e54e98', "data-version": version, onClick: (e) => this.dispatchClick(e), tabindex: "0" }, h("slot", { key: '25568fab2a47d765757c00fbee4f2999c1da16d1' })));
+        return (h(Host, { key: '46d960a93232dd7ae0c64b2daa74691b9c4f90f7', "data-version": version, onClick: (e) => this.dispatchClick(e), tabindex: "0" }, h("slot", { key: 'b470ddbc2752f1bfe44ca218851c461d505c9234' })));
     }
     get host() { return this; }
     static get style() { return PostLinkareaStyle0; }

package/loaders/post-list-item.js

@@ -14,7 +14,7 @@ const PostListItem$1 = /*@__PURE__*/ proxyCustomElement(class PostListItem exten
         this.host.setAttribute('slot', 'post-list-item');
     }
     render() {
-        return (h(Host, { key: 'c826293ea2a7446bea2f5b223934b444655198a0', role: "listitem", slot: "post-list-item", version: version }, h("slot", { key: 'b997f79da2fbc87fbc6a388c118a03c008ad2c23' })));
+        return (h(Host, { key: '83d78cdee7b19cd48bd2d601d4ae8fd288027918', role: "listitem", slot: "post-list-item", version: version }, h("slot", { key: '7b5900ae509b8ad98aa5e5d4f2053ee61889b140' })));
     }
     get host() { return this; }
     static get style() { return PostListItemStyle0; }

package/loaders/post-list.js

@@ -28,7 +28,7 @@ const PostList$1 = /*@__PURE__*/ proxyCustomElement(class PostList extends HTMLE
         }
     }
     render() {
-        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" }))));
+        return (h(Host, { key: '9c840e19d92cb7417aaa8395a1d15248dbe274dc', "data-version": version }, h("div", { key: '973c24857b843c96ae41e6937042ca968bf16d09', ref: el => (this.titleEl = el), id: this.titleId, class: `list-title${this.titleHidden ? ' visually-hidden' : ''}` }, h("slot", { key: '594403d0d7ce9bdf7d7b2b6a5bd6a4b75f305ac2' })), h("div", { key: '76cb68b6913f8a574c998d9554a68788170a5fa1', role: "list", "aria-labelledby": this.titleId }, h("slot", { key: '3b7f42ddec020297ac1bdd615274089bc4300f09', name: "post-list-item" }))));
     }
     get host() { return this; }
     static get style() { return PostListStyle0; }

package/loaders/post-logo.js

@@ -1,6 +1,6 @@
 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 { g 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}";
@@ -28,7 +28,7 @@ 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: '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" }))))));
+        return (h(Host, { key: 'acbb3910083a3a8ba6250096f2a7330c0bae19bc', "data-version": version }, h(LogoTag, { key: 'db6e237031f4d58e50cf56e9bd63124e9b8811d8', class: `logo ${logoLink ? 'logo-link' : ''}`, ...(logoLink ? { href: logoLink } : {}) }, h("span", { key: '439f8c6fca5647bf36eab69361089bba97830933', class: "description" }, h("slot", { key: 'fbbd95d221c91dd6a22823802cbcd680fb3d2210', onSlotchange: () => this.checkDescription() })), h("svg", { key: '4c12add52030e6bb414246acb073b4b5cb88cd8f', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 72 72", "aria-hidden": "true" }, h("g", { key: 'a103907694067c20eff3db5695a85daa78f8e293', id: "Logo" }, h("rect", { key: 'bba502be5b0598df7a7a9be11ec878c4c98f813e', fill: "#ffcc00", x: "0", y: "0", width: "72", height: "72" }), h("polygon", { key: 'd5b8cdf3ba35ff13ac037a59347f5decbd5266fe', 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: '4dd42726bd15f4a47054e79c4b66093a5f1d088a', 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 {