@swisspost/design-system-components 9.0.0-next.8 → 9.0.0-next.9

package/dist/components/post-footer2.js

@@ -0,0 +1,124 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { v as version } from './package.js';
+import { d as defineCustomElement$4 } from './post-accordion-item2.js';
+import { d as defineCustomElement$3 } from './post-collapsible2.js';
+import { d as defineCustomElement$2 } from './post-collapsible-trigger2.js';
+import { d as defineCustomElement$1 } from './post-icon2.js';
+
+class Breakpoint {
+    constructor() {
+        this.current = {
+            key: '',
+            name: '',
+        };
+        if (!this.breakpointMap) {
+            const styles = getComputedStyle(document.documentElement);
+            const keys = styles.getPropertyValue('--post-breakpoint-keys').split(', ');
+            const names = styles.getPropertyValue('--post-breakpoint-names').split(', ');
+            this.breakpointMap = styles
+                .getPropertyValue('--post-breakpoint-widths')
+                .split(', ')
+                .map((width, i) => {
+                return {
+                    minWidth: Number(width),
+                    key: keys[i],
+                    name: names[i],
+                };
+            })
+                .reverse();
+            window.addEventListener('resize', () => this.updateHandler(), { passive: true });
+        }
+    }
+    updateHandler(emitEvents = true) {
+        const calculated = this.breakpointMap.find(({ minWidth }) => innerWidth >= minWidth);
+        if (this.current.key !== calculated.key) {
+            this.current.key = calculated.key;
+            if (emitEvents)
+                this.dispatchEvent('key');
+        }
+        if (this.current.name !== calculated.name) {
+            this.current.name = calculated.name;
+            if (emitEvents)
+                this.dispatchEvent('name');
+        }
+    }
+    dispatchEvent(type) {
+        window.dispatchEvent(new CustomEvent(`postBreakpoint:${type}`, { detail: this.current[type] }));
+    }
+    get(type) {
+        this.updateHandler(false);
+        return this.current[type];
+    }
+}
+const breakpoint = new Breakpoint();
+
+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 PostFooterStyle0 = postFooterCss;
+
+const PostFooter = /*@__PURE__*/ proxyCustomElement(class PostFooter extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.label = undefined;
+        this.isMobile = breakpoint.get('name') === 'mobile';
+    }
+    connectedCallback() {
+        window.addEventListener('postBreakpoint:name', this.breakpointChange.bind(this));
+    }
+    breakpointChange(e) {
+        this.isMobile = e.detail === 'mobile';
+    }
+    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" })))));
+    }
+    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" }))));
+    }
+    render() {
+        return (h(Host, { key: 'b11ecc741d3d9f4786dca3324dc2172aeaa431cd', "data-version": version }, h("footer", { key: 'a786956b1bdf51cf76fca8e4d45210b42bc54501' }, h("h2", { key: '3661bdd6c95eb515cb6a0aa77cb9df4fda7ea972', class: "visually-hidden" }, this.label), h("div", { key: '8b2a1c63f3a092c355bd882d58e5012dd5680a1b', class: "footer-container" }, this.isMobile ? this.renderAccordion() : this.renderGrid(), h("div", { key: '250a48a71a05833a18640432eb72fb96df94c102', class: "footer-column" }, h("div", { key: '0d22f0b49aea22f0bd73421f3c86f5389caebec9', class: "footer-socialmedia" }, h("slot", { key: '8703a25dc982f32a32b4115410fcc6356b5e365b', name: "socialmedia" })), h("div", { key: '992e7ff2e6556139ce0946ae6498329a8d2ff686', class: "footer-app" }, h("slot", { key: '6e561307bf4a1d32d3a985b32bd5ed2be43453d2', name: "app" }))), h("div", { key: 'ebdffcd8431e90752f814a5873cec14e00c15b7f', class: "footer-businesssectors" }, h("slot", { key: 'c745850d3e5ff37a71b12c43897625ca3df5ca34', name: "businesssectors" })), h("div", { key: '3d9decbad0be02737d13c4e3c6e00b8bea8d6c5f', class: "footer-meta" }, h("slot", { key: '2a66e70bb788269fecb5bbbccd2af43e9fba3a1f', name: "meta" })), h("div", { key: '0f1f4ee8f86e5eaf6c5c25b82b868d273757c8be', class: "footer-copyright" }, h("slot", { key: 'b63aab9755132addfe4c20233919513990cdf992', name: "copyright" }))))));
+    }
+    disconnectedCallback() {
+        window.removeEventListener('postBreakpoint:name', this.breakpointChange.bind(this));
+    }
+    get host() { return this; }
+    static get style() { return PostFooterStyle0; }
+}, [1, "post-footer", {
+        "label": [1],
+        "isMobile": [32]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["post-footer", "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);
+            }
+            break;
+        case "post-accordion-item":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "post-collapsible":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "post-collapsible-trigger":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "post-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+
+export { PostFooter as P, defineCustomElement as d };

package/dist/components/post-header2.js

@@ -1,5 +1,6 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { v as version } from './package.js';
+import { s as slideUp, a as slideDown } from './slide.js';
 
 /* eslint-disable no-undefined,no-param-reassign,no-shadow */
 
@@ -135,7 +136,7 @@ function throttle (delay, callback, options) {
   return wrapper;
 }
 
-const postHeaderCss = "*,::before,::after{box-sizing:border-box}:host{--global-header-height:72px;--main-header-height:56px;--header-height:calc(var(--global-header-height) + var(--main-header-height))}@media screen and (max-width: 1023.99px){:host{--global-header-height:64px}}.d-flex{display:flex}.space-between{justify-content:space-between}.global-header{background-color:#fc0;display:flex;justify-content:space-between;align-items:center;position:sticky;padding-inline-start:4px;padding-inline-end:12px;height:var(--global-header-height)}@media screen and (max-width: 1023.99px){.global-header{top:0}}@media screen and (min-width: 1024px){.global-header{top:calc((var(--global-header-height) - 24px)*-1)}}slot[name=post-logo]{align-self:flex-end}.global-sub{display:flex;align-items:center;gap:2rem;height:var(--global-header-height)}.align-end{align-items:flex-end}.logo{flex:1 0 auto;height:var(--global-header-height);width:var(--global-header-height);min-height:24px;align-self:flex-end}@media screen and (min-width: 1024px){.logo{height:calc(var(--global-header-height) - var(--header-scroll-top))}}::slotted(ul){margin-block:0;list-style:none;display:flex;padding-left:0;gap:1rem}.title-header,.main-navigation{display:flex;align-items:center;padding-inline:12px;background:#fff}.title-header{height:var(--main-header-height);display:flex;align-items:center}@media screen and (max-width: 1023.99px){.title-header{border-bottom:1px solid #000}}:host(:not(:has([slot=title]))) .title-header{display:none}::slotted(h1){margin:0 !important;font-size:28px !important}.main-navigation{position:sticky;top:24px;height:var(--main-header-height)}@media screen and (min-width: 1024px){.main-navigation{border-bottom:1px solid #000}}@media screen and (max-width: 1023.99px){.main-navigation{display:none;position:absolute;top:var(--header-height);bottom:0;width:100%;background-color:#fff;height:auto}.main-navigation.extended{display:block}}@media screen and (min-width: 1024px){.mobile-toggle{display:none}}";
+const postHeaderCss = "*,::before,::after{box-sizing:border-box}:host{--global-header-height:72px;--global-header-minimal-height:24px;--main-header-height:56px;--header-height:calc(var(--global-header-height) + var(--main-header-height))}@media screen and (min-width: 1024px){:host{display:block;position:sticky;inset-inline:0;inset-block-start:calc(-1*(var(--global-header-height) + var(--main-header-height) - var(--global-header-minimal-height)));box-shadow:var(--post-core-elevation-3)}}@media screen and (max-width: 1023.99px){:host{--global-header-height:64px;--main-header-height:48px}}.d-flex{display:flex}.space-between{justify-content:space-between}.global-header{background-color:#fc0;display:flex;justify-content:space-between;align-items:center;position:sticky;padding-inline:var(--post-core-dimension-4);height:var(--global-header-height);z-index:1}@media screen and (max-width: 1023.99px){.global-header{inset-block-start:0}}@media screen and (min-width: 1024px){.global-header{padding-inline-end:var(--post-core-dimension-12);top:calc((var(--global-header-height) - var(--global-header-minimal-height))*-1)}}slot[name=post-logo]{align-self:flex-end}.global-sub{display:flex;align-items:center;gap:var(--post-core-dimension-24);height:var(--global-header-height)}.align-end{align-items:flex-end}.logo{flex:1 0 auto;height:var(--global-header-height);width:var(--global-header-height);min-height:var(--global-header-minimal-height);align-self:flex-end}@media screen and (min-width: 1024px){.logo{height:calc(var(--global-header-height) - var(--header-scroll-top))}}::slotted(ul){margin-block:0;list-style:none;display:flex;padding-left:0;gap:1rem}.title-header{display:flex;align-items:center;gap:var(--post-core-dimension-4);height:var(--main-header-height);background:var(--post-core-color-brand-white)}@media screen and (min-width: 1024px){.title-header{padding:var(--post-core-dimension-18) var(--post-core-dimension-16) var(--post-core-dimension-4) var(--post-core-dimension-12)}}@media screen and (max-width: 1023.99px){.title-header{position:sticky;z-index:1;inset-block-start:var(--global-header-height);padding-inline:var(--post-core-dimension-8) var(--post-core-dimension-16)}}:host(:not(:has([slot=title]))) .title-header{display:none}::slotted(h1){margin:0 !important}@media screen and (min-width: 1024px){::slotted(h1){font-size:var(--post-core-font-size-28) !important}}@media screen and (max-width: 1023.99px){::slotted(h1){font-size:var(--post-core-font-size-20) !important}}@media screen and (min-width: 1024px){.mobile-toggle{display:none}}.navigation{background:var(--post-core-color-brand-white)}@media screen and (min-width: 1024px){.navigation{position:sticky;z-index:1;inset-block-start:var(--global-header-minimal-height)}}@media screen and (max-width: 1023.99px){.navigation{position:fixed;inset-inline:0;inset-block-end:calc(100vh - var(--header-height));box-shadow:var(--post-core-elevation-3);min-height:var(--post-core-dimension-10);max-height:calc(100vh - var(--header-height));overflow:auto}::slotted(post-mainnavigation),.navigation-footer{display:none;flex-direction:column;padding-block:var(--post-core-dimension-16) var(--post-core-dimension-24);padding-inline:var(--post-core-dimension-32)}.navigation.extended ::slotted(post-mainnavigation),.navigation.extended .navigation-footer{display:flex}::slotted(post-mainnavigation){background-color:var(--post-core-color-sandgrey-002);gap:var(--post-core-dimension-32)}.navigation-footer{background-color:var(--post-core-color-sandgrey-006);gap:var(--post-core-dimension-24)}}";
 const PostHeaderStyle0 = postHeaderCss;
 
 const PostHeader = /*@__PURE__*/ proxyCustomElement(class PostHeader extends HTMLElement {
@@ -156,8 +157,27 @@ const PostHeader = /*@__PURE__*/ proxyCustomElement(class PostHeader extends HTM
         this.handleResize();
         this.handleScrollEvent();
     }
-    handlePostMainNavigationClosed() {
-        this.mobileMenuExtended = false;
+    frozeBody(isMobileMenuExtended) {
+        document.body.style.overflow = isMobileMenuExtended ? 'hidden' : '';
+    }
+    /**
+     * Toggles the mobile navigation.
+     */
+    async toggleMobileMenu() {
+        if (this.device === 'desktop')
+            return;
+        this.mobileMenuAnimation = this.mobileMenuExtended
+            ? slideUp(this.mobileMenu)
+            : slideDown(this.mobileMenu);
+        // Update the state of the toggle button
+        const menuButton = this.host.querySelector('post-togglebutton');
+        menuButton.toggled = !this.mobileMenuExtended;
+        // Toggle menu visibility before it slides down and after it slides back up
+        if (this.mobileMenuExtended)
+            await this.mobileMenuAnimation.finished;
+        this.mobileMenuExtended = !this.mobileMenuExtended;
+        if (!this.mobileMenuExtended)
+            await this.mobileMenuAnimation.finished;
     }
     handleScrollEvent() {
         // Credits: "https://github.com/qeremy/so/blob/master/so.dom.js#L426"
@@ -190,34 +210,55 @@ const PostHeader = /*@__PURE__*/ proxyCustomElement(class PostHeader extends HTM
         });
     }
     handleResize() {
+        const previousDevice = this.device;
+        let newDevice;
         const width = window === null || window === void 0 ? void 0 : window.innerWidth;
         if (width >= 1024) {
-            this.device = 'desktop';
-            this.mobileMenuExtended = false; // Close any open mobile menu
+            newDevice = 'desktop';
         }
         else if (width >= 600) {
-            this.device = 'tablet';
+            newDevice = 'tablet';
         }
         else {
-            this.device = 'mobile';
+            newDevice = 'mobile';
+        }
+        // Close any open mobile menu
+        if (newDevice === 'desktop' && this.mobileMenuExtended) {
+            this.toggleMobileMenu();
+            this.mobileMenuAnimation.finish(); // no animation
+        }
+        // Apply only on change for doing work only when necessary
+        if (newDevice !== previousDevice) {
+            this.device = newDevice;
+            window.requestAnimationFrame(() => {
+                this.switchLanguageSwitchMode();
+            });
         }
     }
-    handleMobileMenuToggle() {
-        this.mobileMenuExtended = !this.mobileMenuExtended;
+    switchLanguageSwitchMode() {
+        var _a;
+        const variant = this.device === 'desktop' ? 'dropdown' : 'list';
+        (_a = this.host.querySelector('post-language-switch')) === null || _a === void 0 ? void 0 : _a.setAttribute('variant', variant);
     }
     render() {
-        const mainNavClasses = ['main-navigation'];
+        const navigationClasses = ['navigation'];
         if (this.mobileMenuExtended) {
-            mainNavClasses.push('extended');
+            navigationClasses.push('extended');
         }
-        return (h(Host, { key: 'a09985740ff01e4f38e7bbe5e0b9012d77e7cba2', version: version }, h("div", { key: 'c612b90e757d916036bee002d7bba8abfeb19073', class: "global-header" }, h("div", { key: 'd11c51f756d1c7a8c0b4f3b9625cfbe8cae88435', class: "global-sub" }, h("div", { key: '43fb63bfe0350ffca0e44fd611bb6bbe6c3eef0c', class: "logo" }, h("slot", { key: '8d90d7f20b0fd6a7cbc93e5dd95ad8200c027822', name: "post-logo" }))), h("div", { key: 'b1bc83b4fcb3a0af6ffd99976af4acf454b3d29d', class: "global-sub" }, this.device === 'desktop' && h("slot", { key: 'bbe38f3e0d070bfd84e1656e7dd631816df0101c', name: "meta-navigation" }), h("slot", { key: 'b1483eea11ecdc9cddf122077cf0746d88f69239', name: "global-controls" }), this.device === 'desktop' && h("slot", { key: '785f557f30bffc5cd282a0505e9ffc7e3e6e1029', name: "post-language-switch" }), h("div", { key: 'f088ddb3df417929525b22a09fa3be113042e48f', onClick: () => this.handleMobileMenuToggle(), class: "mobile-toggle" }, h("slot", { key: 'de65884a443290e057ed911289818d5a323f5a9c', name: "post-togglebutton" })))), h("div", { key: '56ebdec46003a6ead4f3710dc9c0f60e9a86ed8d', class: "title-header d-flex space-between align-center" }, h("slot", { key: '8e61e4711ea8018e51fd11c5b5faa30a1ad9445c', name: "title" }), h("div", { key: '4d762d1f4d3f45470d52af167c7f4a71651e7970', class: "global-sub" }, h("slot", { key: 'c8c5b73b1fa0e665a7133ae8db0212ef8948ba29', name: "local-controls" }), h("slot", { key: '212640155af85dfab34182ab236bfe72456e77b1' }))), h("div", { key: 'c4004d443fd546fac8a2651482725fae99c2db6c', class: mainNavClasses.join(' ') }, h("slot", { key: '783787f85d25d9e42d96213ae77f6c689f872b70', name: "post-mainnavigation" }), (this.device === 'mobile' || this.device === 'tablet') && (h("slot", { key: '04cfd7d09d03ab85ac9c12f9c3d6cb31fbb65fc2', name: "meta-navigation" })), (this.device === 'mobile' || this.device === 'tablet') && (h("slot", { key: '117e76f18fdc93493115428e1cd0d6a119c7a652', name: "post-language-switch" })))));
+        return (h(Host, { key: 'd96b46b64946ef425059463d127fa1188c99ea58', version: version }, h("div", { key: '831ebc53d0f598a99e72d46a1530c2c34c196948', class: "global-header" }, h("div", { key: '69f3b3bc47a61810eea3ae60d7b2423af1750416', class: "global-sub" }, h("div", { key: 'ad6d36c7e7f029edfdee223ab1df664a1b7002f8', class: "logo" }, h("slot", { key: '95adfc2ad9e63fde9eef3cc71b63247e140fba3d', name: "post-logo" }))), h("div", { key: '741e62693a4df8558213c85d7a837efb8b0cfa6d', class: "global-sub" }, this.device === 'desktop' && h("slot", { key: '992844b617955cb77079a175fcaaf54943a6eef2', name: "meta-navigation" }), h("slot", { key: '4384ae4c04d239bf1b1947ba6d1457ae6879a5cf', name: "global-controls" }), this.device === 'desktop' && h("slot", { key: 'c5b33b6bfb8c00d44710ec997a80d56720aab760', name: "post-language-switch" }), h("div", { key: '25a629a419c94fc4789eb374b87cf7c159b746c6', onClick: () => this.toggleMobileMenu(), class: "mobile-toggle" }, h("slot", { key: '3f3078832237abc5a6df79b4a57fe20fae926aa3', name: "post-togglebutton" })))), h("div", { key: 'e11ca83bc108d4677e849b7386ad7bd09d8c9331', class: "title-header d-flex space-between align-center" }, h("slot", { key: '87430ad15ab09f800b714be45be00a50e5b7dc0a', name: "title" }), h("div", { key: '494a198d3ee8185a26b16fce97a85bed01d6b3f7', class: "global-sub" }, h("slot", { key: '8a54e3d1366d39c11d64c0de90f35a4330836428', name: "local-controls" }), h("slot", { key: '63f841457e0f7b7722a3f8b1ea83ff0d78d9c08e' }))), h("div", { key: '90cf667c412d90f8e466e7e7925fa4a2f8223ad8', ref: el => (this.mobileMenu = el), class: navigationClasses.join(' ') }, h("slot", { key: 'a046286cb6cc770bfb8fb4439cdacac7c351001b', name: "post-mainnavigation" }), (this.device === 'mobile' || this.device === 'tablet') && (h("div", { key: '6e0ad5841ef53daf0c0885b75efdf12d69f4a72d', class: "navigation-footer" }, h("slot", { key: '1eaebace0d5e37794867ae2a317a104726bb873a', name: "meta-navigation" }), h("slot", { key: '79217cd6fd16d4c6ef3e8aaa656e6dc0a8842b23', name: "post-language-switch" }))))));
     }
     get host() { return this; }
+    static get watchers() { return {
+        "mobileMenuExtended": ["frozeBody"]
+    }; }
     static get style() { return PostHeaderStyle0; }
 }, [1, "post-header", {
         "device": [32],
-        "mobileMenuExtended": [32]
-    }, [[0, "postMainNavigationClosed", "handlePostMainNavigationClosed"]]]);
+        "mobileMenuExtended": [32],
+        "toggleMobileMenu": [64]
+    }, undefined, {
+        "mobileMenuExtended": ["frozeBody"]
+    }]);
 function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;

package/dist/components/post-icon2.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { c as checkEmptyOrOneOf, d as checkEmptyOrType } from './index2.js';
+import { c as checkEmptyOrOneOf, e as checkEmptyOrType } 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';
@@ -82,7 +82,7 @@ const PostIcon = /*@__PURE__*/ proxyCustomElement(class PostIcon extends HTMLEle
         this.validateAnimation();
     }
     render() {
-        return (h(Host, { key: '1a04eea6f1039329937a9f58d64778c272088018', "data-version": version }, h("svg", { key: '843d95a54a58f839bfa1031d2aa834c70fbc6f9e', style: this.getStyles() }, h("use", { key: 'e93c6a6fd50ebd4757c92c1ee02f9c8cd65a65b7', href: this.getPath() }))));
+        return (h(Host, { key: '7864661c5ba45508fa3902c49fd0da1d6c026795', "data-version": version }, h("svg", { key: '588f70bd81afc4cc5a312388aa6225bc9c853b57', style: this.getStyles() }, h("use", { key: 'c4505cf12ddf083ad86b3b9304ffbf37ac3489d1', href: this.getPath() }))));
     }
     get host() { return this; }
     static get watchers() { return {

package/dist/components/post-language-option2.js

@@ -1,9 +1,9 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { d as checkEmptyOrType } from './index2.js';
+import { e as checkEmptyOrType } from './index2.js';
 import { v as version } from './package.js';
 import { c as checkType } from './check-type.js';
 
-const postLanguageOptionCss = "/*!\n * Copyright 2021 by Swiss Post, Information Technology\n */:host{display:inline-block;width:fit-content}button{padding:0;overflow:visible;border:0;background:none;color:inherit;font:inherit;-webkit-user-select:none;user-select:none;appearance:button}a{color:inherit;text-decoration:none}:is(a,button){cursor:pointer;display:flex;align-items:center;justify-content:center;height:100%;width:100%;padding:var(--post-language-option-padding)}";
+const postLanguageOptionCss = "/*!\n * Copyright 2021 by Swiss Post, Information Technology\n */:host{display:inline-block;width:fit-content}button{padding:0;overflow:visible;border:0;background:none;color:inherit;font:inherit;-webkit-user-select:none;user-select:none;appearance:button}a{color:inherit;text-decoration:none}:is(a,button){cursor:pointer;display:flex;align-items:center;justify-content:center;height:100%;width:100%;padding:var(--post-language-option-padding)}.post-language-option-list{border-radius:2px;width:40px;height:40px}.post-language-option-list{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-list: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-list:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){.post-language-option-list: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-list:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}.post-language-option-list[aria-current=true],.post-language-option-list[aria-current=page]{background-color:#050400;color:#fff}.post-language-option-dropdown{padding-block:13px;padding-inline:24px;box-sizing:border-box;position:relative}.post-language-option-dropdown[aria-current=true]::after,.post-language-option-dropdown[aria-current=page]::after{content:\"\";left:-2px;height:3px;background-color:#504f4b;width:calc(100% + 4px);display:block;position:absolute;bottom:3px}.post-language-option-dropdown[aria-current=true]:focus::after,.post-language-option-dropdown[aria-current=page]:focus::after{width:calc(100% - 5px);left:2px}";
 const PostLanguageOptionStyle0 = postLanguageOptionCss;
 
 const PostLanguageOption = /*@__PURE__*/ proxyCustomElement(class PostLanguageOption extends HTMLElement {
@@ -14,6 +14,7 @@ const PostLanguageOption = /*@__PURE__*/ proxyCustomElement(class PostLanguageOp
         this.postChange = createEvent(this, "postChange", 7);
         this.code = undefined;
         this.active = undefined;
+        this.variant = undefined;
         this.name = undefined;
         this.url = undefined;
     }
@@ -53,7 +54,7 @@ const PostLanguageOption = /*@__PURE__*/ proxyCustomElement(class PostLanguageOp
     }
     render() {
         const lang = this.code.toLowerCase();
-        return (h(Host, { key: '0a80e062fecb20c7277b89f49a4d774fda80a18e', "data-version": version, role: "listitem" }, this.url ? (h("a", { "aria-current": this.active ? 'page' : undefined, "aria-label": this.name, href: this.url, hrefLang: lang, lang: lang, onClick: () => this.emitChange() }, h("slot", null))) : (h("button", { "aria-current": this.active ? 'true' : undefined, "aria-label": this.name, lang: lang, onClick: () => this.emitChange() }, h("slot", null)))));
+        return (h(Host, { key: '9a3f49ee993b69393ea8f81b671cd5482049ff1c', "data-version": version, role: "listitem" }, this.url ? (h("a", { class: this.variant ? `post-language-option-${this.variant}` : '', "aria-current": this.active ? 'page' : undefined, "aria-label": this.name, href: this.url, hrefLang: lang, lang: lang, onClick: () => this.emitChange() }, h("slot", null))) : (h("button", { class: this.variant ? `post-language-option-${this.variant}` : '', "aria-current": this.active ? 'true' : undefined, "aria-label": this.name, lang: lang, onClick: () => this.emitChange() }, h("slot", null)))));
     }
     get host() { return this; }
     static get watchers() { return {
@@ -66,6 +67,7 @@ const PostLanguageOption = /*@__PURE__*/ proxyCustomElement(class PostLanguageOp
 }, [1, "post-language-option", {
         "code": [1],
         "active": [1540],
+        "variant": [1],
         "name": [1],
         "url": [1],
         "select": [64]

package/dist/components/post-language-switch.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface PostLanguageSwitch extends Components.PostLanguageSwitch, HTMLElement {}
+export const PostLanguageSwitch: {
+    prototype: PostLanguageSwitch;
+    new (): PostLanguageSwitch;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

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

@@ -0,0 +1,6 @@
+import { P as PostLanguageSwitch$1, d as defineCustomElement$1 } from './post-language-switch2.js';
+
+const PostLanguageSwitch = PostLanguageSwitch$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { PostLanguageSwitch, defineCustomElement };

package/dist/components/post-language-switch2.js

@@ -0,0 +1,146 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { c as checkEmptyOrOneOf } from './index2.js';
+import { v as version } from './package.js';
+import { d as defineCustomElement$4 } from './post-icon2.js';
+import { d as defineCustomElement$3 } from './post-menu2.js';
+import { d as defineCustomElement$2 } from './post-menu-trigger2.js';
+import { d as defineCustomElement$1 } from './post-popovercontainer2.js';
+import { c as checkType } from './check-type.js';
+
+const SWITCH_VARIANTS = ['list', 'dropdown'];
+
+const urlAlphabet =
+  'useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict';
+
+let nanoid = (size = 21) => {
+  let id = '';
+  let bytes = crypto.getRandomValues(new Uint8Array((size |= 0)));
+  while (size--) {
+    id += urlAlphabet[bytes[size] & 63];
+  }
+  return id
+};
+
+const postLanguageSwitchCss = ":host{display:block}.post-language-switch-dropdown-container{display:flex;flex-direction:column}.post-language-switch-trigger{cursor:pointer;padding:0;overflow:visible;border:0;background:none;color:inherit;font:inherit;-webkit-user-select:none;user-select:none;appearance:button;text-decoration:none;display:inline-flex;align-items:center;gap:var(--post-core-dimension-6);border-radius:var(--post-core-dimension-24);font-size:var(--post-core-font-size-16);padding:var(--post-core-dimension-3) var(--post-core-dimension-10)}.post-language-switch-trigger{outline-offset:var(--post-device-spacing-padding-2) !important;outline:var(--post-scheme-color-interactive-focus-stroke) none var(--post-device-border-width-focus) !important}.post-language-switch-trigger:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-style:var(--post-core-border-style-solid) !important}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.post-language-switch-trigger:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){.post-language-switch-trigger:is(:focus-visible,:focus-within,.pretend-focus){outline-style:var(--post-core-border-style-solid) !important}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.post-language-switch-trigger:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}.post-language-switch-trigger:not(:disabled):hover,.post-language-switch-trigger.pretend-hover{border-color:var(--post-scheme-color-interactive-button-tertiary-hover-stroke);background-color:var(--post-scheme-color-interactive-button-tertiary-hover-bg);color:var(--post-scheme-color-interactive-button-tertiary-hover-fg)}.post-language-switch-trigger post-icon{height:var(--post-core-dimension-16);width:var(--post-core-dimension-16)}";
+const PostLanguageSwitchStyle0 = postLanguageSwitchCss;
+
+const PostLanguageSwitch = /*@__PURE__*/ proxyCustomElement(class PostLanguageSwitch extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.menuId = `p${nanoid(11)}`;
+        this.caption = undefined;
+        this.description = undefined;
+        this.variant = 'list';
+        this.activeLang = undefined;
+    }
+    validateCaption(value = this.caption) {
+        checkType(value, 'string', 'The "caption" property of the post-language-switch component must be a string.');
+    }
+    validateDescription(value = this.description) {
+        checkType(value, 'string', 'The "description" property of the post-language-switch component must be a string.');
+    }
+    validateVariant(value = this.variant) {
+        checkEmptyOrOneOf(value, SWITCH_VARIANTS, `The "variant" property of the post-language-switch component must be:  ${SWITCH_VARIANTS.join(', ')}`);
+    }
+    connectedCallback() {
+        this.updateChildrenVariant();
+        // Get the active language based on children's active state
+        this.activeLang = Array.from(this.host.querySelectorAll('post-language-option'))
+            .find(el => el.getAttribute('active') == 'true')
+            .getAttribute('code');
+    }
+    // Update post-language-option variant to have the correct style
+    updateChildrenVariant() {
+        this.host.querySelectorAll('post-language-option').forEach(el => {
+            el.setAttribute('variant', this.variant);
+        });
+    }
+    componentShouldUpdate() {
+        this.updateChildrenVariant();
+    }
+    componentDidLoad() {
+        this.validateCaption();
+        this.validateDescription();
+        this.validateVariant();
+        // Detects a change in the active language
+        this.host.addEventListener('postChange', (el) => {
+            this.activeLang = el.detail;
+            // Update the active state in the children post-language-option components
+            this.host.querySelectorAll('post-language-option').forEach(lang => {
+                if (lang.code && lang.code === this.activeLang) {
+                    lang.setAttribute('active', 'true');
+                }
+                else {
+                    lang.setAttribute('active', 'false');
+                }
+            });
+            // Hides the dropdown when an option has been clicked
+            if (this.variant === 'dropdown') {
+                const menu = this.host.shadowRoot.querySelector('post-menu');
+                menu.toggle(menu);
+            }
+        });
+    }
+    renderList() {
+        return (h(Host, { "data-version": version, "aria-label": `${this.caption}, ${this.description}`, "aria-role": "list" }, h("slot", null)));
+    }
+    renderDropdown() {
+        return (h(Host, { "data-version": version }, h("post-menu-trigger", { for: this.menuId }, h("button", { class: "post-language-switch-trigger", "aria-label": `${this.caption}, ${this.description}` }, this.activeLang.toUpperCase(), h("post-icon", { "aria-hidden": "true", name: "chevrondown" }))), h("post-menu", { id: this.menuId }, h("div", { class: "post-language-switch-dropdown-container" }, h("slot", null)))));
+    }
+    render() {
+        return this.variant === 'list' ? this.renderList() : this.renderDropdown();
+    }
+    get host() { return this; }
+    static get watchers() { return {
+        "caption": ["validateCaption"],
+        "description": ["validateDescription"],
+        "variant": ["validateVariant"]
+    }; }
+    static get style() { return PostLanguageSwitchStyle0; }
+}, [1, "post-language-switch", {
+        "caption": [1],
+        "description": [1],
+        "variant": [1],
+        "activeLang": [32]
+    }, undefined, {
+        "caption": ["validateCaption"],
+        "description": ["validateDescription"],
+        "variant": ["validateVariant"]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["post-language-switch", "post-icon", "post-menu", "post-menu-trigger", "post-popovercontainer"];
+    components.forEach(tagName => { switch (tagName) {
+        case "post-language-switch":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, PostLanguageSwitch);
+            }
+            break;
+        case "post-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "post-menu":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "post-menu-trigger":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "post-popovercontainer":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+
+export { PostLanguageSwitch as P, defineCustomElement as d };

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

@@ -13,7 +13,7 @@ const PostListItem = /*@__PURE__*/ proxyCustomElement(class PostListItem extends
         this.host.setAttribute('slot', 'post-list-item');
     }
     render() {
-        return (h(Host, { key: 'bbf12424f2997b7d2e7cd9e272def0bf2838f94f', role: "listitem" }, h("slot", { key: '2ce4e71879485f16ad90dfddbd1b79512107bdb0' })));
+        return (h(Host, { key: 'aa9a31c64e3e8ba5dcac1d03b54ab3c886149c1f', role: "listitem", slot: "post-list-item" }, h("slot", { key: '06353140f8917fc5373de6d56708467af2ef52b2' })));
     }
     get host() { return this; }
     static get style() { return PostListItemStyle0; }

package/dist/components/post-list2.js

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { v as version } from './package.js';
 
-const postListCss = "/*!\n * Copyright 2021 by Swiss Post, Information Technology\n */post-list{display:flex;gap:var(--post-list-title-gap);flex-direction:column;align-items:flex-start}post-list>div[role=list]{flex-direction:column;display:flex;gap:var(--post-list-item-gap)}post-list[horizontal]:not([horizontal=false]){flex-direction:row;align-items:baseline}post-list[horizontal]:not([horizontal=false])>div[role=list]{flex-direction:row;align-items:center}post-list>.list-title.visually-hidden{width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border:0 !important}post-list>.list-title.visually-hidden:not(caption){position:absolute !important}";
+const postListCss = "/*!\n * Copyright 2021 by Swiss Post, Information Technology\n */post-list{display:flex;flex-direction:column;gap:var(--post-list-title-gap, 0)}post-list>[role=list]{display:flex;flex-direction:column;gap:var(--post-list-item-gap, 0)}post-list:where([horizontal]:not([horizontal=false])){flex-direction:row;align-items:center}post-list:where([horizontal]:not([horizontal=false]))>[role=list]{flex-direction:row;align-items:center}post-list>.list-title.visually-hidden{width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border:0 !important}post-list>.list-title.visually-hidden:not(caption){position:absolute !important}";
 const PostListStyle0 = postListCss;
 
 const PostList = /*@__PURE__*/ proxyCustomElement(class PostList extends HTMLElement {
@@ -16,7 +16,7 @@ const PostList = /*@__PURE__*/ proxyCustomElement(class PostList extends HTMLEle
         /**
          * Get the id set on the host element or use a random id by default
          */
-        this.titleId = `list-${crypto.randomUUID()}`;
+        this.titleId = `title-${this.host.id || crypto.randomUUID()}`;
     }
     componentDidLoad() {
         this.checkTitle();
@@ -27,13 +27,13 @@ const PostList = /*@__PURE__*/ proxyCustomElement(class PostList extends HTMLEle
         }
     }
     render() {
-        return (h(Host, { key: '017f05c43fa95bb93c856bbeddd5d26cbc2f4cfa', "data-version": version }, h("div", { key: '71fd7d32c761cecf7b4d5d5f39cedb3bf668a0cb', ref: el => (this.titleEl = el), id: this.titleId, class: `list-title${this.titleHidden ? ' visually-hidden' : ''}` }, h("slot", { key: 'fe0e03d5d25f6a975e04be00549facae49a0970b' })), h("div", { key: 'bb717e4338396c86fa28dbf8236f5f185823f9be', role: "list", "aria-labelledby": this.titleId }, h("slot", { key: '7fd25cab433f5fbbafaa7ca01f42774823cbf579', name: "post-list-item" }))));
+        return (h(Host, { key: '4f982e717530514589c5528553b70463d678b676', "data-version": version }, h("div", { key: 'cc65ed208f48e7a22482af96fd069d05363f2617', ref: el => (this.titleEl = el), id: this.titleId, class: `list-title${this.titleHidden ? ' visually-hidden' : ''}` }, h("slot", { key: '0f8bbeade50b59e53767ce2169dd57bb79644705' })), h("div", { key: '7fa5de37a169e6f76928c2088c46ee747427887e', role: "list", "aria-labelledby": this.titleId }, h("slot", { key: '86b4d71b83671babb61dd12e842710d67350a09e', name: "post-list-item" }))));
     }
     get host() { return this; }
     static get style() { return PostListStyle0; }
 }, [4, "post-list", {
         "titleHidden": [4, "title-hidden"],
-        "horizontal": [4],
+        "horizontal": [516],
         "titleId": [32]
     }]);
 function defineCustomElement() {

package/dist/components/post-logo2.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { v as version } from './package.js';
-import { b as checkEmptyOrUrl } from './index2.js';
+import { d as checkEmptyOrUrl } from './index2.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}";
 const PostLogoStyle0 = postLogoCss;
@@ -27,7 +27,7 @@ const PostLogo = /*@__PURE__*/ proxyCustomElement(class PostLogo extends HTMLEle
     render() {
         const logoLink = this.url && (typeof this.url === 'string' ? this.url : this.url.href);
         const LogoTag = logoLink ? 'a' : 'span';
-        return (h(Host, { key: 'ec5f82baaa08c75a03808a6cda7a9971152a54d6', "data-version": version, slot: "post-logo" }, h(LogoTag, Object.assign({ key: 'ce6aeff4dfab0612376e4c6aa14c74c438213b5d', class: "logo" }, (logoLink ? { href: logoLink } : {})), h("span", { key: 'fa6f8ecaf3c3a4a8e60a8c8e2171dbd25d585ede', class: "description" }, h("slot", { key: '2dcff76129e8e054e58244b2aa77a5b51e059b6b', onSlotchange: () => this.checkDescription() })), h("svg", { key: '468282e3c21fb6cfc97fccee64298abe43542da5', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 72 72", "aria-hidden": "true" }, h("g", { key: 'd3f4e0a6a7372991ccef5be9fad206cab2f553e7', id: "Logo" }, h("rect", { key: '3f17ddd240131ce23faf1e73a76ca4f702b029d7', fill: "#ffcc00", x: "0", y: "0", width: "72", height: "72" }), h("polygon", { key: '1b714023d9e587a57571fd86a9515701ec77f993', 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: 'b4064875cbad1263ac2278613fdf5db8d1697c2a', 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: 'b8d47e2530eb39f7b05370b4cea0b728cb00a1fb', "data-version": version, slot: "post-logo" }, h(LogoTag, Object.assign({ key: '47a4d88622aab30e652a08827e221dacda36cb48', class: "logo" }, (logoLink ? { href: logoLink } : {})), h("span", { key: '4eb6ad1bc6c165197b6bcce8fe1146eb9d48fb21', class: "description" }, h("slot", { key: 'c66a4385f19711daab6f4ba87d5f78f59ad8b263', onSlotchange: () => this.checkDescription() })), h("svg", { key: '824643e64a3fb0914082f8f78a11753d66c98842', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 72 72", "aria-hidden": "true" }, h("g", { key: 'e4f63d237c1fe1128005f29ea604c865f6b50943', id: "Logo" }, h("rect", { key: '34fec89177fb5461318d3e8fcc725f32dd97057a', fill: "#ffcc00", x: "0", y: "0", width: "72", height: "72" }), h("polygon", { key: '5600de7c21a8e363fffa35710a3f41e4295b76c7', 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: '719be82825355704c4eac3c60fb461f6303734f7', 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 {