@swisspost/internet-header 1.17.1 → 10.2.0

package/dist/cjs/post-footer.cjs.entry.js

@@ -0,0 +1,94 @@
+'use strict';
+
+var index = require('./index-B5ypPkK3.js');
+var _package = require('./package-2syswPDO.js');
+var breakpoints = require('./breakpoints-CI0Xuh1L.js');
+var required = require('./required-_r1rzbps.js');
+var type = require('./type-CAeEC3oM.js');
+require('./index-CggFmZ8n.js');
+require('./create-validator-decorator-CJK3Xf77.js');
+
+const postFooterCss = () => `:host{display:block}footer{-webkit-border-before:1px solid #373632;border-block-start:1px solid #373632;--post-footer-container-padding-block:32px;--post-footer-container-padding-inline:16px;--post-footer-container-max-width:1200px;--post-footer-prefooter-padding-block:16px;--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-list-flex-direction:column;--post-footer-list-gap:8px;--post-footer-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-prefooter-padding-block:32px;--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-list-flex-direction:row;--post-footer-list-gap:16px;--post-footer-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-list-gap:24px;--post-footer-businesssectors-margin-block-end:24px;--post-footer-meta-font-size:16px}}:is(h3,.h3){margin:0;font-size:var(--post-device-font-size-6);line-height:var(--post-device-line-height-heading);font-weight:var(--post-device-font-weight-extra-black);text-wrap:balance}::slotted(ul){list-style:none;padding:0;margin:0}.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}.footer-container{-webkit-box-sizing:content-box;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)}.prefooter{background-color:#fafafa}.prefooter .footer-container{padding-block:0}.prefooter ::slotted([slot=prefooter]){padding-block:var(--post-footer-prefooter-padding-block)}.footer-main{background-color:#fc0}.footer-grid{display:grid;grid-template:var(--post-footer-grid-template);row-gap:var(--post-footer-grid-row-gap);-webkit-column-gap:var(--post-footer-grid-column-gap);-moz-column-gap:var(--post-footer-grid-column-gap);column-gap:var(--post-footer-grid-column-gap);-webkit-margin-after:var(--post-footer-grid-margin-block-end);margin-block-end:var(--post-footer-grid-margin-block-end);-webkit-padding-after:var(--post-footer-grid-padding-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:-ms-flexbox;display:flex;-ms-flex-direction:var(--post-footer-column-flex-direction);flex-direction:var(--post-footer-column-flex-direction);-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:var(--post-footer-column-align-items);align-items:var(--post-footer-column-align-items);-webkit-column-gap:var(--post-footer-column-gap);-moz-column-gap:var(--post-footer-column-gap);column-gap:var(--post-footer-column-gap)}.footer-socialmedia ::slotted(div),.footer-app ::slotted(div),.footer-meta ::slotted(div){display:-ms-flexbox !important;display:flex !important;-ms-flex-direction:var(--post-footer-list-flex-direction) !important;flex-direction:var(--post-footer-list-flex-direction) !important;gap:var(--post-footer-list-gap) !important;-ms-flex-align:var(--post-footer-list-align-items) !important;align-items:var(--post-footer-list-align-items) !important}.footer-socialmedia{-webkit-margin-after:var(--post-footer-socialmedia-margin-block-end);margin-block-end:var(--post-footer-socialmedia-margin-block-end)}.footer-app{-webkit-margin-after:var(--post-footer-app-margin-block-end);margin-block-end:var(--post-footer-app-margin-block-end)}.prefooter ::slotted(div),.footer-businesssectors ::slotted(div){display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-align:center;align-items:center;gap:var(--post-footer-list-gap) !important}.footer-businesssectors{-webkit-margin-after:var(--post-footer-businesssectors-margin-block-end);margin-block-end:var(--post-footer-businesssectors-margin-block-end)}.footer-meta{-webkit-margin-after:var(--post-footer-meta-margin-block-end);margin-block-end:var(--post-footer-meta-margin-block-end);font-size:var(--post-footer-meta-font-size)}.footer-copyright{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-column-gap:.5rem;-moz-column-gap:.5rem;column-gap:.5rem;font-size:var(--post-footer-copyright-font-size)}.d-none{display:none}`;
+
+var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+        r = Reflect.decorate(decorators, target, key, desc);
+    else
+        for (var i = decorators.length - 1; i >= 0; i--)
+            if (d = decorators[i])
+                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+const GRID_SLOTS = ['grid-1', 'grid-2', 'grid-3', 'grid-4'];
+const SECTION_SLOTS = ['socialmedia', 'app', 'businesssectors', 'meta', 'copyright'];
+const PostFooter = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.device = breakpoints.breakpoint.get('device');
+        this.slotDisplayed = {};
+        this.breakpointChange = (e) => {
+            this.device = e.detail;
+        };
+        this.handleGridSlotChange = this.handleGridSlotChange.bind(this);
+        this.handleSlotChange = this.handleSlotChange.bind(this);
+    }
+    connectedCallback() {
+        globalThis.addEventListener('postBreakpoint:device', this.breakpointChange);
+    }
+    componentWillLoad() {
+        // initialize slot visibility by checking the content of each slot
+        [...GRID_SLOTS, ...SECTION_SLOTS].forEach(slotName => {
+            const assignedElements = this.host.querySelectorAll(`[slot="${slotName}"]`);
+            this.updateSlotDisplay(slotName, assignedElements.length > 0);
+        });
+    }
+    disconnectedCallback() {
+        globalThis.removeEventListener('postBreakpoint:device', this.breakpointChange);
+    }
+    handleGridSlotChange(...devices) {
+        return (e) => {
+            if (devices.includes(this.device) && e.target instanceof HTMLSlotElement) {
+                this.updateSlotDisplay(e.target.name, e.target.assignedElements().length > 0);
+            }
+        };
+    }
+    handleSlotChange(e) {
+        if (e.target instanceof HTMLSlotElement) {
+            this.updateSlotDisplay(e.target.name, e.target.assignedElements().length > 0);
+        }
+    }
+    updateSlotDisplay(slotName, hasContent) {
+        if (this.slotDisplayed[slotName] !== hasContent) {
+            // @State only re-renders when this.slotDisplayed itself is replaced,
+            // not when one of its properties is changed directly
+            this.slotDisplayed = { ...this.slotDisplayed, [slotName]: hasContent };
+        }
+    }
+    renderAccordion() {
+        return (index.h("post-accordion", { headingLevel: 3, multiple: true }, GRID_SLOTS.map(slotName => (index.h("post-accordion-item", { key: slotName, class: { 'd-none': !this.slotDisplayed[slotName] }, collapsed: true }, index.h("span", { slot: "header" }, index.h("slot", { name: slotName + '-title' })), index.h("slot", { onSlotchange: this.handleGridSlotChange('mobile'), name: slotName }))))));
+    }
+    renderColumns() {
+        return GRID_SLOTS.map(slotName => (index.h("div", { key: slotName, class: { 'd-none': !this.slotDisplayed[slotName] } }, index.h("h3", null, index.h("slot", { name: slotName + '-title' })), index.h("slot", { onSlotchange: this.handleGridSlotChange('tablet', 'desktop'), name: slotName }))));
+    }
+    render() {
+        const renderSocialmedia = this.slotDisplayed['socialmedia'];
+        const renderApp = this.slotDisplayed['app'];
+        const renderBusinesssectors = this.slotDisplayed['businesssectors'];
+        const renderMeta = this.slotDisplayed['meta'];
+        const renderCopyright = this.slotDisplayed['copyright'];
+        const allGridSlotsEmpty = GRID_SLOTS.every(slotName => !this.slotDisplayed[slotName]);
+        return (index.h(index.Host, { key: 'd34606bcddf871bcf82c64dd710a1e7d1d1dcbb5', "data-version": _package.version, "data-color-scheme": "light" }, index.h("footer", { key: 'a82c77c34e1308ed02445a221776f37ebe26d7f9' }, index.h("h2", { key: '3d6bd7b10494661506a1bd60323e3e3205b1a400', class: "visually-hidden" }, this.textFooter), index.h("div", { key: '6497d40d70757426194142d8b597101d4f0f5ce6', class: "prefooter" }, index.h("div", { key: '7d352f9029fe397f0ada15de8dacb9d8a0b2a831', class: "footer-container" }, index.h("slot", { key: 'bbe3c744a1ea06544ccfda3b1f9a7e52666b69c3', name: "prefooter" }))), index.h("div", { key: '4bdd7e6f0507bbbc9ccb7a9b3a5f1dad2f1c6936', class: "footer-main" }, index.h("div", { key: '3b141f824900b9dccb6746bb4b11678f2b90ef53', class: "footer-container" }, index.h("div", { key: '46ef9417bb0aced5506e8adbeb6001dbcfe119a5', class: { 'footer-grid': true, 'd-none': allGridSlotsEmpty } }, this.device === 'mobile' ? this.renderAccordion() : this.renderColumns()), index.h("div", { key: 'd25f9b4b8e8bf8ce7d090c41c8b9de0c1454c566', class: {
+                'footer-column': true,
+                'd-none': !renderSocialmedia && !renderApp,
+            } }, index.h("div", { key: '43888182ec9db5d001ff724648f02a43acddb198', class: { 'footer-socialmedia': true, 'd-none': !renderSocialmedia } }, index.h("slot", { key: 'd96fe2e61b69ead95ba6235bdd63951ff177377a', onSlotchange: this.handleSlotChange, name: "socialmedia" })), index.h("div", { key: '0eb5c0c55f6d86ef4a179fa55bfb2b37311e1563', class: { 'footer-app': true, 'd-none': !renderApp } }, index.h("slot", { key: 'dcc9d0121b0febc2b2d4d183ca0aa979dd27b35c', onSlotchange: this.handleSlotChange, name: "app" }))), index.h("div", { key: '85a47b73374144b13fd40d3f25582e4375873647', class: { 'footer-businesssectors': true, 'd-none': !renderBusinesssectors } }, index.h("slot", { key: '1cbd28be1c5b8d52df6139db49e1e3b31db03a5a', onSlotchange: this.handleSlotChange, name: "businesssectors" })), index.h("div", { key: '1877c5230c17196d647f9ed145a21bcfed36321a', class: { 'footer-meta': true, 'd-none': !renderMeta } }, index.h("slot", { key: '12ca6c0a79db19365daddf3c14b4a395f664d3e1', onSlotchange: this.handleSlotChange, name: "meta" })), index.h("div", { key: '3dd50edca20df5bd258b1b01da2a88d556d5ea04', class: { 'footer-copyright': true, 'd-none': !renderCopyright } }, index.h("slot", { key: '058326a07ee00caea0cbac3843ba8190cf68abde', onSlotchange: this.handleSlotChange, name: "copyright" })))))));
+    }
+    get host() { return index.getElement(this); }
+};
+__decorate([
+    required.Required(),
+    type.Type('string')
+], PostFooter.prototype, "textFooter", void 0);
+PostFooter.style = postFooterCss();
+
+exports.post_footer = PostFooter;

package/dist/cjs/post-header.cjs.entry.js

@@ -0,0 +1,337 @@
+'use strict';
+
+var index = require('./index-B5ypPkK3.js');
+var breakpoints = require('./breakpoints-CI0Xuh1L.js');
+var eventFrom = require('./event-from-CwMw19f8.js');
+var getFocusableChildren = require('./get-focusable-children-BGVgg7Te.js');
+var _package = require('./package-2syswPDO.js');
+var index$1 = require('./index-CggFmZ8n.js');
+var fade = require('./fade-CPQhl1fP.js');
+var required = require('./required-_r1rzbps.js');
+var type = require('./type-CAeEC3oM.js');
+require('./get-root-B1FnQ50K.js');
+require('./utils-s05L2ulk.js');
+require('./create-validator-decorator-CJK3Xf77.js');
+
+const postHeaderCss = () => `:host{--post-global-header-top:calc( var(--post-global-header-reduced-height) - var(--post-global-header-expanded-height) );--post-header-top:calc(var(--post-header-reduced-height) - var(--post-header-expanded-height));--post-logo-height:calc( var(--post-global-header-expanded-height) - var(--post-header-scroll-top, 0px) );--post-global-controls-top:clamp(  1000 * (var(--post-global-header-reduced-height) - var(--post-global-header-expanded-height)), calc( -1 * min(var(--post-header-scroll-top, 0px) / 4, var(--post-global-header-reduced-height)) ), 0px )}@media screen and (min-width: 1024px){:host{--post-header-gap:0.5rem;--post-global-header-padding-inline-start:0.25rem;--post-global-header-padding-inline-end:0.5rem;--post-local-header-padding-inline-start:0.75rem;--post-local-header-padding-inline-end:0.5rem}}@media screen and (min-width: 600px)and (max-width: 1023.98px){:host{--post-header-gap:0.75rem 0.25rem;--post-global-header-padding-inline-start:0.25rem;--post-global-header-padding-inline-end:0.25rem;--post-local-header-padding-inline-start:0.75rem;--post-local-header-padding-inline-end:0.25rem;--post-local-header-padding-block:0.75rem;--post-burger-menu-padding-inline:2.5rem;--post-burger-menu-body-gap:2rem;--post-burger-menu-footer-gap:1.5rem}}@media screen and (min-width: 600px)and (max-width: 779.98px){:host{--post-burger-menu-padding-inline:1rem}}@media screen and (min-width: 0)and (max-width: 599.98px){:host{--post-header-gap:0.75rem 0.25rem;--post-global-header-padding-inline-start:0rem;--post-global-header-padding-inline-end:0.5rem;--post-local-header-padding-inline-start:0.5rem;--post-local-header-padding-inline-end:0.5rem;--post-local-header-padding-block:0.5rem;--post-burger-menu-padding-inline:1rem;--post-burger-menu-body-gap:1.5rem;--post-burger-menu-footer-gap:1rem}}:host(:not([full-width])),:host([full-width=false]){--post-header-content-max-width:1440px}:host([data-expanded]),:host([data-menu-extended]){--post-header-top:0;--post-global-header-top:-0.001px;--post-global-controls-top:0;--post-global-header-reduced-height:var(--post-global-header-expanded-height)}*,::before,::after{-webkit-box-sizing:border-box;box-sizing:border-box}:host,header,.global-header,.local-header{-webkit-transition:inset-block-start 150ms cubic-bezier(0.4, 0, 0.2, 1);transition:inset-block-start 150ms cubic-bezier(0.4, 0, 0.2, 1)}.section,.sliding-controls{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;gap:var(--post-header-gap);-ms-flex-wrap:wrap;flex-wrap:wrap}.section{max-width:var(--post-header-content-max-width);margin-inline:auto}:host{display:block;position:-webkit-sticky;position:sticky;inset-block-start:var(--post-header-top);z-index:1020;-webkit-box-shadow:var(--post-device-elevation-300);box-shadow:var(--post-device-elevation-300)}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:host{border-bottom:1px solid}}.global-header{z-index:2;position:-webkit-sticky;position:sticky;inset-block-start:var(--post-global-header-top);background-color:#fc0}.global-header .section{height:var(--post-global-header-expanded-height);-webkit-padding-start:var(--post-global-header-padding-inline-start);padding-inline-start:var(--post-global-header-padding-inline-start);-webkit-padding-end:var(--post-global-header-padding-inline-end);padding-inline-end:var(--post-global-header-padding-inline-end)}.global-header .logo{-ms-flex-item-align:end;align-self:flex-end;width:var(--post-global-header-expanded-height);height:var(--post-logo-height);min-height:var(--post-global-header-reduced-height);max-height:100%;-webkit-margin-end:calc(1.25rem - var(--post-header-gap));margin-inline-end:calc(1.25rem - var(--post-header-gap));-webkit-margin-start:clamp(var(--post-logo-expanded-offset),var(--post-logo-expanded-offset) + (var(--post-logo-reduced-offset) - var(--post-logo-expanded-offset))*min(var(--post-header-scroll-top, 0px),var(--post-global-header-expanded-height) - var(--post-global-header-reduced-height))/max(1px,var(--post-global-header-expanded-height) - var(--post-global-header-reduced-height)),var(--post-logo-reduced-offset));margin-inline-start:clamp(var(--post-logo-expanded-offset),var(--post-logo-expanded-offset) + (var(--post-logo-reduced-offset) - var(--post-logo-expanded-offset))*min(var(--post-header-scroll-top, 0px),var(--post-global-header-expanded-height) - var(--post-global-header-reduced-height))/max(1px,var(--post-global-header-expanded-height) - var(--post-global-header-reduced-height)),var(--post-logo-reduced-offset))}.global-header .sliding-controls{-ms-flex-positive:1;flex-grow:1;-ms-flex-pack:end;justify-content:flex-end;position:relative;inset-block-start:var(--post-global-controls-top)}.global-header .audience{-webkit-margin-end:auto;margin-inline-end:auto}@media screen and (max-width: 1023.98px){.global-header slot:where([name=audience],[name=global-nav-secondary]){display:none}}.local-header{position:relative;background-color:#fff;min-height:var(--post-local-header-expanded-min-height);display:var(--post-local-header-display, flex);-ms-flex-align:var(--post-local-header-align-items, center);align-items:var(--post-local-header-align-items, center)}.local-header .section{width:100%;-webkit-padding-start:var(--post-local-header-padding-inline-start);padding-inline-start:var(--post-local-header-padding-inline-start);-webkit-padding-end:var(--post-local-header-padding-inline-end);padding-inline-end:var(--post-local-header-padding-inline-end);padding-block:var(--post-local-header-padding-block)}@media screen and (min-width: 1024px){.local-header .section{display:grid;grid-template:var(--post-local-header-grid-template)}}@media screen and (max-width: 1023.98px){.local-header .section{display:-ms-flexbox;display:flex;-ms-flex-item-align:center;align-self:center}}@media screen and (max-width: 1023.98px)and (max-width: 599.98px){.local-header .section{-ms-flex-pack:end;justify-content:end}}.local-header:where(.megadropdown-open)::after,.local-header:has(~.burger-menu.extended)::after{content:"";display:block;position:absolute;inset-inline:0;inset-block-end:0;height:1px;background-color:#e1e0dc}.local-header .local-nav{-ms-flex:0 0 auto;flex:0 0 auto}@media screen and (max-width: 1023.98px){.local-header slot[name=main-nav]{display:none}}.burger-button{display:-ms-inline-flexbox;display:inline-flex;position:relative;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;max-width:100%;overflow:hidden;-webkit-transition:opacity 250ms,border-color 250ms,background-color 250ms,color 250ms;transition:opacity 250ms,border-color 250ms,background-color 250ms,color 250ms;border-width:var(--post-device-border-width-default);border-style:solid;border-color:rgba(0,0,0,0);border-radius:var(--post-device-border-radius-round);background-color:rgba(0,0,0,0);-webkit-box-shadow:none;box-shadow:none;font-family:inherit;font-size:var(--post-device-font-size-6);font-weight:var(--post-device-font-weight-bold);text-decoration:none;white-space:nowrap;cursor:pointer;border:unset;font-weight:unset;display:-ms-flexbox;display:flex;padding:.25rem .625rem;gap:.375rem;font-size:1rem;border-color:var(--post-scheme-color-interactive-button-tertiary-enabled-stroke);color:var(--post-scheme-color-interactive-button-tertiary-enabled-fg);background-color:var(--post-scheme-color-interactive-button-tertiary-enabled-bg);display:var(--post-burger-button-display, flex)}.burger-button:not(:disabled):hover{text-decoration:none}.burger-button:disabled{border-style:var(--post-core-border-style-dash);cursor:unset}.burger-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}.burger-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){.burger-button:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){.burger-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){.burger-button:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.burger-button:is(button){background-color:ButtonFace !important;border:1px solid ButtonBorder !important}.burger-button:not(:disabled,.disabled):is(button):hover{background-color:Highlight !important}.burger-button:not(:disabled,.disabled):is(button):hover>post-icon{color:HighlightText !important}}.burger-button:hover{border-color:var(--post-scheme-color-interactive-button-tertiary-hover-stroke);color:var(--post-scheme-color-interactive-button-tertiary-hover-fg);background-color:var(--post-scheme-color-interactive-button-tertiary-hover-bg)}.burger-button:is([aria-current],[aria-pressed=true],[aria-expanded=true],.active){-webkit-box-shadow:var(--post-device-elevation-100);box-shadow:var(--post-device-elevation-100);border-color:var(--post-scheme-color-interactive-button-primary-enabled-stroke);color:var(--post-scheme-color-interactive-button-primary-enabled-fg);background-color:var(--post-scheme-color-interactive-button-primary-enabled-bg)}.burger-button:is([aria-current],[aria-pressed=true],[aria-expanded=true],.active):hover{border-color:var(--post-scheme-color-interactive-button-primary-hover-stroke);color:var(--post-scheme-color-interactive-button-primary-hover-fg);background-color:var(--post-scheme-color-interactive-button-primary-hover-bg)}@media screen and (min-width: 0)and (max-width: 599.98px){.burger-button{padding:.625rem}.burger-button>:not(post-icon){position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}.burger-button>post-icon{font-size:1.5rem}}@media screen and (min-width: 1024px){.burger-button{display:none}}.burger-menu{z-index:-1;position:absolute;inset-inline:0;inset-block-start:100%;height:calc(min(var(--post-header-scroll-parent-height, 100dvh),100dvh) - var(--post-header-height));overflow:hidden auto;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;background-color:#fafafa}.burger-menu.extended.second-level-open{overflow:hidden}.burger-menu:not(.extended){-webkit-transform:translateY(-100%);transform:translateY(-100%);display:none}.burger-menu:not(.extended)>*{display:none}.burger-menu .burger-menu-body,.burger-menu .burger-menu-footer{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;padding-inline:var(--post-burger-menu-padding-inline)}.burger-menu .burger-menu-body{-ms-flex-positive:1;flex-grow:1;padding-block:1.5rem;gap:var(--post-burger-menu-body-gap)}.burger-menu .burger-menu-footer{background-color:#f0efed;padding-block:1rem 1.5rem;gap:var(--post-burger-menu-footer-gap)}.burger-menu .local-nav{min-height:3.5rem;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:end;justify-content:flex-end;padding-inline:.25rem}`;
+
+var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+        r = Reflect.decorate(decorators, target, key, desc);
+    else
+        for (var i = decorators.length - 1; i >= 0; i--)
+            if (d = decorators[i])
+                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+const PostHeader = class {
+    get hasBurgerMenu() {
+        return this.device !== 'desktop' && this.hasMainNav;
+    }
+    get scrollParent() {
+        const frozenScrollParent = document.querySelector('[data-post-scroll-locked]');
+        if (frozenScrollParent)
+            return frozenScrollParent;
+        let element = this.host.parentElement;
+        while (element) {
+            const overflow = getComputedStyle(element).overflowY;
+            if (['auto', 'scroll'].includes(overflow)) {
+                return element;
+            }
+            element = element.parentElement;
+        }
+        return document.body;
+    }
+    lockBody(newValue, _oldValue, propName) {
+        const scrollParent = this.scrollParent;
+        const burgerMenuExtended = propName === 'burgerMenuExtended' ? newValue : this.burgerMenuExtended;
+        if (this.device !== 'desktop' && burgerMenuExtended) {
+            scrollParent.dataset.postScrollLocked = '';
+            this.host.addEventListener('keydown', this.keyboardHandler);
+        }
+        else {
+            delete scrollParent.dataset.postScrollLocked;
+            this.host.removeEventListener('keydown', this.keyboardHandler);
+        }
+    }
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.throttledResize = index$1.throttle(50, () => this.updateLocalHeaderHeight());
+        this.animationOptions = {
+            duration: 350,
+            easing: 'headerEase',
+        };
+        this.device = breakpoints.breakpoint.get('device');
+        this.hasTitle = true;
+        this.hasMainNav = true;
+        this.hasLocalNav = true;
+        this.burgerMenuExtended = false;
+        this.megadropdownOpen = false;
+        /**
+         * Makes the header content span the full width on screens larger than 1440px.
+         */
+        this.fullWidth = false;
+        this.breakpointChange = (e) => {
+            const previousDevice = this.device;
+            this.device = e.detail;
+            this.switchLanguageSwitchMode();
+            const wasDesktop = previousDevice === 'desktop';
+            const isNowMobileOrTablet = this.device !== 'desktop';
+            const isNowDesktop = this.device === 'desktop';
+            if (wasDesktop && isNowMobileOrTablet && this.megadropdownOpen) {
+                this.burgerMenuExtended = true;
+            }
+            if (isNowDesktop && this.burgerMenuExtended) {
+                this.closeBurgerMenu();
+            }
+        };
+        this.handleScrollEvent = this.handleScrollEvent.bind(this);
+        this.updateScrollParentHeight = this.updateScrollParentHeight.bind(this);
+        this.updateLocalHeaderHeight = this.updateLocalHeaderHeight.bind(this);
+        this.keyboardHandler = this.keyboardHandler.bind(this);
+        this.handleLinkClick = this.handleLinkClick.bind(this);
+        this.checkSlottedContent = this.checkSlottedContent.bind(this);
+        this.megadropdownStateHandler = this.megadropdownStateHandler.bind(this);
+    }
+    connectedCallback() {
+        globalThis.addEventListener('resize', this.throttledResize, { passive: true });
+        globalThis.addEventListener('scroll', this.handleScrollEvent, {
+            passive: true,
+        });
+        this.scrollParent.addEventListener('scroll', this.handleScrollEvent, {
+            passive: true,
+        });
+        document.addEventListener('postToggleMegadropdown', this.megadropdownStateHandler);
+        globalThis.addEventListener('postBreakpoint:device', this.breakpointChange);
+        this.handleScrollParentResize();
+        this.lockBody(false, this.burgerMenuExtended, 'burgerMenuExtended');
+    }
+    componentWillRender() {
+        this.handleScrollEvent();
+        this.handleSlottedContentChanges();
+        this.switchLanguageSwitchMode();
+    }
+    componentDidRender() {
+        this.getFocusableElements();
+        this.handleLocalHeaderResize();
+        // When a megadropdown is open on desktop and the user resizes to mobile, we set
+        // burgerMenuExtended = true but burgerMenuButton doesn't exist yet — it only renders
+        // on mobile/tablet. Syncing here ensures it gets the correct toggled state on resize.
+        if (this.burgerMenuButton && this.burgerMenuButton.toggled !== this.burgerMenuExtended) {
+            this.burgerMenuButton.toggled = this.burgerMenuExtended;
+        }
+    }
+    componentDidLoad() {
+        this.updateLocalHeaderHeight();
+        this.host.shadowRoot.addEventListener('click', this.handleLinkClick);
+    }
+    // Clean up possible side effects when post-header is disconnected
+    disconnectedCallback() {
+        const scrollParent = this.scrollParent;
+        globalThis.removeEventListener('postBreakpoint:device', this.breakpointChange);
+        globalThis.removeEventListener('resize', this.throttledResize);
+        globalThis.removeEventListener('scroll', this.handleScrollEvent);
+        if (scrollParent)
+            scrollParent.removeEventListener('scroll', this.handleScrollEvent);
+        document.removeEventListener('postToggleMegadropdown', this.megadropdownStateHandler);
+        this.host.removeEventListener('keydown', this.keyboardHandler);
+        if (this.host.shadowRoot) {
+            this.host.shadowRoot.removeEventListener('click', this.handleLinkClick);
+        }
+        if (this.scrollParentResizeObserver) {
+            this.scrollParentResizeObserver.disconnect();
+            this.scrollParentResizeObserver = null;
+        }
+        if (this.localHeaderResizeObserver) {
+            this.localHeaderResizeObserver.disconnect();
+            this.localHeaderResizeObserver = null;
+        }
+        if (this.slottedContentObserver) {
+            this.slottedContentObserver.disconnect();
+            this.slottedContentObserver = null;
+        }
+        this.burgerMenuExtended = false;
+    }
+    async closeBurgerMenu() {
+        this.burgerMenuAnimation?.finish();
+        if (this.burgerMenuButton)
+            this.burgerMenuButton.toggled = false;
+        this.burgerMenuExtended = false;
+    }
+    /**
+     * Toggles the burger navigation menu.
+     */
+    async toggleBurgerMenu(nextExtendedState = !this.burgerMenuExtended) {
+        if (this.device === 'desktop')
+            return;
+        // If already in the desired state, do nothing (prevents double-toggle)
+        if (nextExtendedState === this.burgerMenuExtended) {
+            return;
+        }
+        this.burgerMenuAnimation = this.burgerMenuExtended
+            ? fade.fade(this.burgerMenu, 'out', this.animationOptions)
+            : fade.fade(this.burgerMenu, 'in', this.animationOptions);
+        // Update the state of the toggle button
+        if (this.burgerMenuButton && this.burgerMenuButton.toggled !== nextExtendedState) {
+            this.burgerMenuButton.toggled = nextExtendedState;
+        }
+        if (this.burgerMenuExtended) {
+            // Wait for the close animation to finish before hiding megadropdowns
+            await this.burgerMenuAnimation.finished;
+            this.burgerMenuExtended = nextExtendedState;
+            if (this.burgerMenuExtended === false) {
+                this.closeAllMegadropdowns();
+                this.burgerMenu.scrollTop = 0;
+            }
+        }
+        else {
+            this.burgerMenuExtended = nextExtendedState;
+            // If opening, close any open megadropdowns immediately
+            if (this.megadropdownOpen) {
+                this.closeAllMegadropdowns();
+            }
+        }
+    }
+    megadropdownStateHandler(event) {
+        this.megadropdownOpen = event.detail.isVisible;
+    }
+    // Get all the focusable elements in the post-header burger menu
+    getFocusableElements() {
+        if (!this.burgerMenu)
+            return;
+        const focusableElements = [this.burgerMenuButton];
+        focusableElements.push(...getFocusableChildren.getDeepFocusableChildren(this.localHeader, el => !el.matches('post-megadropdown')), ...getFocusableChildren.getDeepFocusableChildren(this.burgerMenu, el => !el.matches('post-megadropdown')));
+        this.firstFocusableEl = focusableElements[0];
+        this.lastFocusableEl = focusableElements.at(-1);
+    }
+    keyboardHandler(e) {
+        if (e.key !== 'Tab' || !this.burgerMenuExtended)
+            return;
+        const activeElement = this.host.shadowRoot.activeElement || document.activeElement;
+        if (e.shiftKey && activeElement === this.firstFocusableEl) {
+            // If back tab (Tab + Shift) and first element is focused, focus goes to the last element of the megadropdown
+            e.preventDefault();
+            this.lastFocusableEl.focus();
+        }
+        else if (!e.shiftKey && activeElement === this.lastFocusableEl) {
+            // If Tab and last element is focused, focus goes back to the first element of the megadropdown
+            e.preventDefault();
+            this.firstFocusableEl.focus();
+        }
+    }
+    closeAllMegadropdowns() {
+        Array.from(this.host.querySelectorAll('post-megadropdown')).forEach(dropdown => {
+            dropdown.hide(false, true);
+        });
+        this.megadropdownOpen = false;
+    }
+    handleScrollEvent() {
+        const scrollTop = this.scrollParent === document.body ? window.scrollY : this.scrollParent.scrollTop;
+        document.documentElement.style.setProperty('--post-header-scroll-top', `${Math.max(scrollTop, 0)}px`);
+    }
+    updateLocalHeaderHeight() {
+        const localHeaderElement = this.host.shadowRoot.querySelector('.local-header');
+        if (localHeaderElement) {
+            document.documentElement.style.setProperty('--post-local-header-expanded-height', `${localHeaderElement.clientHeight}px`);
+        }
+    }
+    updateScrollParentHeight() {
+        this.host.style.setProperty('--post-header-scroll-parent-height', `${this.scrollParent.clientHeight}px`);
+    }
+    handleLinkClick(event) {
+        const target = event.target;
+        const isLinkInMainNav = target.closest('post-mainnavigation a');
+        const isLinkInMegadropdown = target.closest('post-megadropdown a');
+        if (!isLinkInMainNav && !isLinkInMegadropdown) {
+            return;
+        }
+        if (this.burgerMenuExtended && (isLinkInMainNav || isLinkInMegadropdown)) {
+            this.toggleBurgerMenu(false);
+        }
+        if (this.device === 'desktop' && isLinkInMegadropdown) {
+            const megadropdownLink = target.closest('post-megadropdown a');
+            if (megadropdownLink) {
+                target.closest('post-megadropdown').hide(true);
+            }
+        }
+    }
+    handleScrollParentResize() {
+        if (this.scrollParent) {
+            this.scrollParentResizeObserver = new ResizeObserver(this.updateScrollParentHeight);
+            this.scrollParentResizeObserver.observe(this.scrollParent);
+        }
+    }
+    handleLocalHeaderResize() {
+        const localHeader = this.host.shadowRoot.querySelector('.local-header');
+        if (localHeader && !this.localHeaderResizeObserver) {
+            this.localHeaderResizeObserver = new ResizeObserver(this.updateLocalHeaderHeight);
+            this.localHeaderResizeObserver.observe(localHeader);
+        }
+    }
+    handleSlottedContentChanges() {
+        if (!this.slottedContentObserver) {
+            this.checkSlottedContent();
+            this.slottedContentObserver = new MutationObserver(this.checkSlottedContent);
+            this.slottedContentObserver.observe(this.host, { childList: true });
+        }
+    }
+    checkSlottedContent() {
+        this.hasTitle = !!this.host.querySelector('[slot="title"]');
+        this.hasMainNav = !!this.host.querySelector('[slot="main-nav"]');
+        this.hasLocalNav = !!this.host.querySelector('[slot="local-nav"]');
+    }
+    switchLanguageSwitchMode() {
+        const variant = this.hasBurgerMenu ? 'list' : 'menu';
+        Array.from(this.host.querySelectorAll('post-language-menu')).forEach(languageSwitch => {
+            languageSwitch?.setAttribute('variant', variant);
+        });
+    }
+    onFocusChange() {
+        const isFocusVisible = document.activeElement?.matches(':focus-visible');
+        const isFocusedInHeader = this.host.matches(':focus-within');
+        const mustRemainCollapsed = this.device === 'desktop'
+            ? !!this.host.querySelector('post-mainnavigation:focus-within')
+            : !!this.host.shadowRoot?.querySelector(':is(.global-header, .burger-menu):focus-within');
+        const isHeaderExpanded = isFocusVisible && isFocusedInHeader && !mustRemainCollapsed;
+        this.host.toggleAttribute('data-expanded', isHeaderExpanded);
+    }
+    renderBurgerMenu() {
+        return (index.h("div", { class: {
+                'burger-menu': true,
+                'extended': this.burgerMenuExtended,
+                'second-level-open': this.megadropdownOpen,
+            }, style: { '--post-header-navigation-current-inset': `${this.burgerMenu?.scrollTop ?? 0}px` }, ref: el => (this.burgerMenu = el) }, this.hasLocalNav && !this.hasTitle && (index.h("div", { class: "local-nav" }, index.h("slot", { name: "local-nav" }))), index.h("div", { class: "burger-menu-body" }, index.h("slot", { name: "audience" }), index.h("slot", { name: "main-nav" })), index.h("div", { class: "burger-menu-footer" }, index.h("slot", { name: "global-nav-secondary" }), index.h("slot", { name: "language-menu" }))));
+    }
+    render() {
+        const onDesktop = this.device === 'desktop';
+        const onTabletAndMobile = this.device !== 'desktop';
+        return (index.h(index.Host, { key: '27f2b45fb1462bab63be02bbdcb57ad9a2598bde', "data-version": _package.version, "data-color-scheme": "light", "data-burger-menu": this.hasBurgerMenu, "data-menu-extended": this.burgerMenuExtended }, index.h("header", { key: '294bef701f378a96b06379806edae087d9211270' }, index.h("div", { key: '2df4d34bd7d5b714cac70b7201f2a17f7bf64517', class: "global-header" }, index.h("div", { key: 'd7902c1b10177b3790fb61035c527acf36fc0c3d', class: "section" }, index.h("div", { key: '952fed12ff5c717750a50ac32872f728ddabb113', class: "logo" }, index.h("slot", { key: 'a0a824677325c8a68fe483c8f6f7ef49378d5f4e', name: "post-logo" })), index.h("div", { key: '0dd5218658a03ebfcf049f47a1efa7197ca4e8cc', class: "sliding-controls" }, onDesktop && (index.h("div", { key: '9911f969b099b26d5e84d37d36aa7fd0ba44969f', class: "audience" }, index.h("slot", { key: '57b09b2030b7812990a915691fad10fb6d5bb474', name: "audience" }))), index.h("slot", { key: 'b6ba1ee1d5371504d3b4b9f12ca6d8ff2b5c36fa', name: "global-nav-primary" }), (onDesktop || !this.hasMainNav) && [
+            index.h("slot", { key: "global-nav-secondary", name: "global-nav-secondary" }),
+            index.h("slot", { key: "language-menu", name: "language-menu" }),
+        ], index.h("slot", { key: '669cebef2ce5905fee07abec99b0acced7ef42e5', name: "post-login" }), onTabletAndMobile && this.hasMainNav && (index.h("post-togglebutton", { key: '9268220b8e838053d86abacc9e8334463a23350c', class: "burger-button", ref: el => (this.burgerMenuButton = el), onClick: () => this.toggleBurgerMenu() }, index.h("span", { key: '6706c34956268e049dd35fe12992b7b746aa394a' }, this.textMenu), index.h("post-icon", { key: '6578bc195b018c1202bda1732253f71e27df6244', "aria-hidden": "true", name: "burger", "data-showwhen": "untoggled" }), index.h("post-icon", { key: '506087286c148dbb55b963288add6935001c1feb', "aria-hidden": "true", name: "closex", "data-showwhen": "toggled" })))))), index.h("div", { key: 'c645c82f3a71151a16bda3802a69228c1be048e9', ref: el => (this.localHeader = el), class: { 'local-header': true, 'megadropdown-open': this.megadropdownOpen } }, index.h("div", { key: 'ae30584b05570d62323a2d32f90653b38297b869', class: "section" }, index.h("slot", { key: '70b60e0d71a2f9c1e6a48d664ceb3778f5a3067a', name: "side-nav" }), index.h("slot", { key: 'cc356649c53e46b758916a44d4d7fb889e031172', name: "title" }), this.hasTitle && index.h("slot", { key: 'fbbd76c5c2cce8991c0cfcc740fe9231c1677f79', name: "local-nav" }), onDesktop && index.h("slot", { key: 'fd7e94fac20a263960e7ebbc66ddfac23bd954e8', name: "main-nav" }), onDesktop && !this.hasTitle && index.h("slot", { key: '38ac26fb18f85f1c42b4a7bdd97dc0e1b25ca940', name: "local-nav" }))), this.hasBurgerMenu && this.renderBurgerMenu())));
+    }
+    get host() { return index.getElement(this); }
+    static get watchers() { return {
+        "device": [{
+                "lockBody": 0
+            }],
+        "burgerMenuExtended": [{
+                "lockBody": 0
+            }]
+    }; }
+};
+__decorate([
+    required.Required(),
+    type.Type('boolean')
+], PostHeader.prototype, "fullWidth", void 0);
+__decorate([
+    required.Required(),
+    type.Type('string')
+], PostHeader.prototype, "textMenu", void 0);
+__decorate([
+    eventFrom.EventFrom('post-megadropdown')
+], PostHeader.prototype, "megadropdownStateHandler", null);
+PostHeader.style = postHeaderCss();
+
+exports.post_header = PostHeader;

package/dist/cjs/post-icon.cjs.entry.js

@@ -0,0 +1,137 @@
+'use strict';
+
+var index = require('./index-B5ypPkK3.js');
+var _package = require('./package-2syswPDO.js');
+var oneOf = require('./one-of-7TSi182P.js');
+var type = require('./type-CAeEC3oM.js');
+var required = require('./required-_r1rzbps.js');
+require('./create-validator-decorator-CJK3Xf77.js');
+
+const ANIMATION_KEYS = [
+    'cylon',
+    'cylon-vertical',
+    'spin',
+    'spin-reverse',
+    'fade',
+    'throb',
+];
+
+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]){-webkit-transform-origin:center;transform-origin:center}:host([animation=cylon]){-webkit-animation:icon-animation-cylon .75s ease-in-out infinite alternate;animation:icon-animation-cylon .75s ease-in-out infinite alternate}:host([animation=cylon-vertical]){-webkit-animation:icon-animation-cylon-vertical .75s ease-in-out infinite alternate;animation:icon-animation-cylon-vertical .75s ease-in-out infinite alternate}:host([animation=spin]){-webkit-animation:icon-animation-spin 2s linear infinite normal;animation:icon-animation-spin 2s linear infinite normal}:host([animation=spin-reverse]){animation:icon-animation-spin 2s linear infinite reverse}:host([animation=fade]){-webkit-animation:icon-animation-fade .75s ease-in-out infinite alternate;animation:icon-animation-fade .75s ease-in-out infinite alternate}:host([animation=throb]){-webkit-animation:icon-animation-throb .75s ease-in-out infinite alternate;animation:icon-animation-throb .75s ease-in-out infinite alternate}@-webkit-keyframes icon-animation-cylon{from{-webkit-transform:translateX(-25%);transform:translateX(-25%)}to{-webkit-transform:translateX(25%);transform:translateX(25%)}}@keyframes icon-animation-cylon{from{-webkit-transform:translateX(-25%);transform:translateX(-25%)}to{-webkit-transform:translateX(25%);transform:translateX(25%)}}@-webkit-keyframes icon-animation-cylon-vertical{from{-webkit-transform:translateY(25%);transform:translateY(25%)}to{-webkit-transform:translateY(-25%);transform:translateY(-25%)}}@keyframes icon-animation-cylon-vertical{from{-webkit-transform:translateY(25%);transform:translateY(25%)}to{-webkit-transform:translateY(-25%);transform:translateY(-25%)}}@-webkit-keyframes icon-animation-fade{from{opacity:.1}to{opacity:1}}@keyframes icon-animation-fade{from{opacity:.1}to{opacity:1}}@-webkit-keyframes icon-animation-spin{from{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}@keyframes icon-animation-spin{from{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}@-webkit-keyframes icon-animation-throb{from{opacity:.5;-webkit-transform:scale(0.5);transform:scale(0.5)}to{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}@keyframes icon-animation-throb{from{opacity:.5;-webkit-transform:scale(0.5);transform:scale(0.5)}to{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}`;
+
+var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+        r = Reflect.decorate(decorators, target, key, desc);
+    else
+        for (var i = decorators.length - 1; i >= 0; i--)
+            if (d = decorators[i])
+                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+const CDN_URL = `https://unpkg.com/@swisspost/design-system-icons@${_package.version}/public/post-icons/`;
+const PostIcon = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        /**
+         * When set to `true`, the icon will be flipped horizontally.
+         */
+        this.flipH = false;
+        /**
+         * When set to `true`, the icon will be flipped vertically.
+         */
+        this.flipV = false;
+    }
+    /**
+     * Construct the icon URL according to the following rules:
+     * 1. `@base` (absolute URL) → use directly.
+     * 2. `@base` (relative URL) → resolve with `base href` and/or `origin`
+     *  - If `base href` is absolute → use just that.
+     *  - If `base href` is relative → prepend with `origin`.
+     *  - If `base href` does not exist → use only `origin`.
+     * 3. `@meta` (absolute URL) → use directly.
+     * 4. `@meta` (relative URL) → resolve with `base href` and/or `origin`. (same as above)
+     * 5. `CDN_URL` fallback → `https://unpkg.com/...`.
+     **/
+    getUrl() {
+        const name = this.name ?? this.host.getAttribute('name');
+        const fileName = `${name}.svg`;
+        // Prioritize only data:image URLs
+        if (this.url?.startsWith('data:image/')) {
+            return this.url;
+        }
+        if (this.url) {
+            return this.url;
+        }
+        const isAbsolute = (url) => /^https?:\/\//.test(url);
+        const normalizeUrl = (url) => (url && !url.endsWith('/') ? `${url}/` : url);
+        const cleanUrl = (url) => url.replaceAll(/([^:])\/\//g, '$1/');
+        const currentDomain = globalThis.location.origin ;
+        const baseHref = document.querySelector('base[href]')?.getAttribute('href') || ''
+            ;
+        let metaIconBase = '';
+        {
+            const metaTag = document.querySelector('meta[name="design-system-settings"]');
+            metaIconBase = metaTag?.getAttribute('data-post-icon-base') || '';
+        }
+        // Function to build the first part of the URL when 'this.base' or 'metaIconBase' are relative
+        const buildUrlWithBase = (relativeUrl) => {
+            const normalizedHref = normalizeUrl(baseHref);
+            const normalizedRelative = normalizeUrl(relativeUrl);
+            if (isAbsolute(normalizedHref)) {
+                return `${normalizedHref}${normalizedRelative}`;
+            }
+            return `${currentDomain}${normalizedHref}${normalizedRelative}`;
+        };
+        let url;
+        // Highest Priority is this.base
+        if (this.base) {
+            url = isAbsolute(this.base)
+                ? `${normalizeUrl(this.base)}${fileName}`
+                : `${buildUrlWithBase(this.base)}${fileName}`;
+            return cleanUrl(url);
+        }
+        // Second Priority is metaIconBase
+        if (metaIconBase) {
+            url = isAbsolute(metaIconBase)
+                ? `${normalizeUrl(metaIconBase)}${fileName}`
+                : `${buildUrlWithBase(metaIconBase)}${fileName}`;
+            return cleanUrl(url);
+        }
+        // Fallback to CDN
+        return cleanUrl(`${CDN_URL}${fileName}`);
+    }
+    getStyles() {
+        const url = this.getUrl();
+        return Object.fromEntries(Object.entries({
+            '-webkit-mask-image': `url(${url})`,
+            'mask-image': `url('${url}')`,
+            'transform': (this.scale && !Number.isNaN(Number(this.scale)) ? 'scale(' + this.scale + ')' : '') +
+                (this.rotate && !Number.isNaN(Number(this.rotate))
+                    ? ' rotate(' + this.rotate + 'deg)'
+                    : ''),
+        }).filter(([_key, value]) => value !== null));
+    }
+    render() {
+        return (index.h(index.Host, { key: '9d7b98a18fa098702c0fe1bd06544f605801db6a', "data-version": _package.version }, index.h("span", { key: '847682d63ce72e26a541f40b29255e81febaf79e', style: this.getStyles() })));
+    }
+    get host() { return index.getElement(this); }
+};
+__decorate([
+    oneOf.OneOf(ANIMATION_KEYS)
+], PostIcon.prototype, "animation", void 0);
+__decorate([
+    type.Type('string')
+], PostIcon.prototype, "base", void 0);
+__decorate([
+    required.Required(),
+    type.Type('string')
+], PostIcon.prototype, "name", void 0);
+__decorate([
+    type.Type('number')
+], PostIcon.prototype, "rotate", void 0);
+__decorate([
+    type.Type('number')
+], PostIcon.prototype, "scale", void 0);
+PostIcon.style = postIconCss();
+
+exports.post_icon = PostIcon;