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

package/dist/components/post-header.js

@@ -1,372 +1 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { t as throttle, b as breakpoint } from './breakpoints.js';
-import { v as version } from './package.js';
-import { g as getFocusableChildren } from './get-focusable-children.js';
-import { E as EventFrom } from './event-from.js';
-
-const easing = 'ease';
-const duration = 500;
-const fill = 'forwards';
-function slideUp(el, translateSize = '-100%') {
-    return el.animate([
-        { transform: 'translateY(0)' }, // Starting position (no translation)
-        { transform: `translateY(${translateSize})` }, // End position
-    ], {
-        duration: duration,
-        easing,
-        fill,
-    });
-}
-function slideDown(el, translateSize = '-100%') {
-    return el.animate([
-        { transform: `translateY(${translateSize})` }, // Starting position (no translation)
-        { transform: 'translateY(0)' }, // End position
-    ], {
-        duration: duration,
-        easing,
-        fill,
-    });
-}
-
-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.25rem;--post-global-header-padding-inline-start:0.25rem;--post-global-header-padding-inline-end:0.5rem;--post-local-header-padding-inline-start:0.75rem;--post-local-header-padding-inline-end:0.5rem}}@media screen and (min-width: 600px)and (max-width: 1023.98px){:host{--post-header-gap:0.75rem 0.25rem;--post-global-header-padding-inline-start:0.25rem;--post-global-header-padding-inline-end:0.25rem;--post-local-header-padding-inline-start:0.75rem;--post-local-header-padding-inline-end:0.25rem;--post-local-header-padding-block:0rem;--post-burger-menu-padding-inline:2.5rem;--post-burger-menu-body-gap:2rem;--post-burger-menu-footer-gap:1.5rem}}@media screen and (min-width: 600px)and (max-width: 779.98px){:host{--post-burger-menu-padding-inline:1rem}}@media screen and (min-width: 0)and (max-width: 599.98px){:host{--post-header-gap:0.75rem 0.25rem;--post-global-header-padding-inline-start:0rem;--post-global-header-padding-inline-end:0.5rem;--post-local-header-padding-inline-start:0.5rem;--post-local-header-padding-inline-end:0.5rem;--post-local-header-padding-block:0rem;--post-burger-menu-padding-inline:1rem;--post-burger-menu-body-gap:1.5rem;--post-burger-menu-footer-gap:1rem}}:host([data-expanded]){--post-header-top:0;--post-global-header-top:0;--post-global-controls-top:0;--post-logo-height:var(--post-global-header-expanded-height)}*,::before,::after{box-sizing:border-box}:host,.global-header,.local-header{transition:inset-block-start 150ms cubic-bezier(0.4, 0, 0.2, 1)}.global-header,.local-header,.burger-menu{box-shadow:var(--post-device-elevation-300)}.global-header,.sliding-controls,.local-header,.navigation{display:flex;align-items:center;justify-content:space-between;gap:var(--post-header-gap)}:host{container-type:inline-size;display:block;position:sticky;inset-block-start:var(--post-header-top);z-index:1020}.global-header{z-index:2;position:sticky;inset-block-start:var(--post-global-header-top);background-color:#fc0;height:var(--post-global-header-expanded-height);padding-inline-start:var(--post-global-header-padding-inline-start);padding-inline-end:var(--post-global-header-padding-inline-end)}.global-header:has(~.local-header:not(.no-title.no-navigation)),.global-header:has(~.burger-menu.extended){box-shadow:none}.global-header .logo{align-self:flex-end;width:var(--post-global-header-expanded-height);height:var(--post-logo-height);min-height:var(--post-global-header-reduced-height);max-height:100%;margin-inline-end:1.25rem}.global-header .sliding-controls{flex-grow:1;justify-content:flex-end;position:relative;inset-block-start:var(--post-global-controls-top)}.global-header .target-group{margin-inline-end:auto}.global-header.no-target-group .target-group{display:none}.local-header{position:relative;flex-wrap:wrap;background-color:#fff;min-height:var(--post-local-header-expanded-min-height);padding-inline-start:var(--post-local-header-padding-inline-start);padding-inline-end:var(--post-local-header-padding-inline-end);padding-block:var(--post-local-header-padding-block)}.local-header:not(.no-title,.no-navigation){padding-block-start:1.125rem}.local-header.no-title.no-navigation{display:none}.local-header:has(.navigation.megadropdown-open),.local-header:has(~.burger-menu.extended){box-shadow:none}.local-header:has(.navigation.megadropdown-open)::after,.local-header:has(~.burger-menu.extended)::after{content:\"\";display:block;position:absolute;inset-inline:0;inset-block-end:0;height:1px;background-color:#e1e0dc}.local-header .navigation{flex:1 0 100%;height:var(--post-main-navigation-height);margin-inline-start:calc(-1*var(--post-local-header-padding-inline-start));max-width:100cqw}.local-header.no-navigation .navigation{display:none}.local-header .navigation-controls{flex:0 0 auto}.local-header.no-navigation-controls .navigation{margin-inline-end:calc(-1*var(--post-local-header-padding-inline-end))}.local-header.no-navigation-controls .navigation-controls{display:none}.burger-menu{z-index:-1;position:absolute;inset-inline:0;inset-block-start:100%;height:calc(min(var(--post-header-scroll-parent-height, 100dvh),100dvh) - var(--post-header-height));overflow:hidden auto;display:flex;flex-direction:column;background-color:#fafafa}.burger-menu:not(.extended){transform:translateY(-100%)}.burger-menu:not(.extended)>*{display:none}.burger-menu .burger-menu-body,.burger-menu .burger-menu-footer{display:flex;flex-direction:column;padding-inline:var(--post-burger-menu-padding-inline)}.burger-menu .burger-menu-body{flex-grow:1;padding-block:1.5rem;gap:var(--post-burger-menu-body-gap)}.burger-menu .burger-menu-footer{background-color:#f0efed;padding-block:1rem 1.5rem;gap:var(--post-burger-menu-footer-gap)}.burger-menu .navigation-controls{height:3.5rem;display:flex;align-items:center;justify-content:flex-end;padding-inline:.25rem}.burger-menu.no-navigation-controls .navigation-controls{display:none}";
-
-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$1 = /*@__PURE__*/ proxyCustomElement(class PostHeader extends HTMLElement {
-    get hasBurgerMenu() {
-        return this.device !== 'desktop' && this.hasNavigation;
-    }
-    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.setAttribute('data-post-scroll-locked', '');
-            this.host.addEventListener('keydown', this.keyboardHandler);
-        }
-        else {
-            scrollParent.removeAttribute('data-post-scroll-locked');
-            this.host.removeEventListener('keydown', this.keyboardHandler);
-        }
-    }
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.throttledResize = throttle(50, () => this.updateLocalHeaderHeight());
-        this.device = breakpoint.get('device');
-        this.hasNavigation = false;
-        this.hasNavigationControls = false;
-        this.hasTargetGroup = false;
-        this.hasTitle = false;
-        this.burgerMenuExtended = false;
-        this.megadropdownOpen = false;
-        this.breakpointChange = (e) => {
-            this.device = e.detail;
-            this.switchLanguageSwitchMode();
-            if (this.device === 'desktop' && this.burgerMenuExtended) {
-                this.closeBurgerMenu();
-            }
-            if (this.device !== 'desktop') {
-                Array.from(this.host.querySelectorAll('post-megadropdown')).forEach(dropdown => {
-                    dropdown.hide(false, true);
-                });
-                this.megadropdownOpen = false;
-            }
-        };
-        this.megadropdownStateHandler = (event) => {
-            this.megadropdownOpen = event.detail.isVisible;
-        };
-        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);
-    }
-    connectedCallback() {
-        window.addEventListener('resize', this.throttledResize, { passive: true });
-        window.addEventListener('scroll', this.handleScrollEvent, {
-            passive: true,
-        });
-        this.scrollParent.addEventListener('scroll', this.handleScrollEvent, {
-            passive: true,
-        });
-        document.addEventListener('postToggleMegadropdown', this.megadropdownStateHandler);
-        this.host.addEventListener('click', this.handleLinkClick);
-        window.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();
-    }
-    componentDidLoad() {
-        this.updateLocalHeaderHeight();
-    }
-    // Clean up possible side effects when post-header is disconnected
-    disconnectedCallback() {
-        const scrollParent = this.scrollParent;
-        window.removeEventListener('postBreakpoint:device', this.breakpointChange);
-        window.removeEventListener('resize', this.throttledResize);
-        window.removeEventListener('scroll', this.handleScrollEvent);
-        if (scrollParent)
-            scrollParent.removeEventListener('scroll', this.handleScrollEvent);
-        document.removeEventListener('postToggleMegadropdown', this.megadropdownStateHandler);
-        this.host.removeEventListener('keydown', this.keyboardHandler);
-        this.host.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();
-        const menuButton = this.getMenuButton();
-        if (menuButton) {
-            menuButton.toggled = false;
-        }
-        this.burgerMenuExtended = false;
-    }
-    /**
-     * Toggles the burger navigation menu.
-     */
-    async toggleBurgerMenu(force) {
-        if (this.device === 'desktop')
-            return;
-        this.burgerMenuAnimation = this.burgerMenuExtended
-            ? slideUp(this.burgerMenu)
-            : slideDown(this.burgerMenu);
-        // Update the state of the toggle button
-        const menuButton = this.host.querySelector('post-togglebutton');
-        if (menuButton)
-            menuButton.toggled = force ?? !this.burgerMenuExtended;
-        if (this.burgerMenuExtended) {
-            // Wait for the close animation to finish before hiding megadropdowns
-            await this.burgerMenuAnimation.finished;
-            this.burgerMenuExtended = force ?? !this.burgerMenuExtended;
-            if (this.burgerMenuExtended === false) {
-                this.closeAllMegadropdowns();
-            }
-        }
-        else {
-            this.burgerMenuExtended = force ?? !this.burgerMenuExtended;
-            // If opening, close any open megadropdowns immediately
-            if (this.megadropdownOpen) {
-                this.closeAllMegadropdowns();
-            }
-        }
-    }
-    // Get all the focusable elements in the post-header burger menu
-    getFocusableElements() {
-        // Get elements in the correct order (different as the DOM order)
-        const focusableEls = [
-            ...Array.from(this.host.querySelectorAll('.list-inline:not([slot="meta-navigation"]) > li')),
-            ...Array.from(this.host.querySelectorAll('nav > post-list > div > post-list-item, post-megadropdown-trigger')),
-            ...Array.from(this.host.querySelectorAll('.list-inline[slot="meta-navigation"] > li, post-language-option')),
-        ];
-        // Add the main toggle menu button to the list of focusable children
-        const focusableChildren = [
-            this.host.querySelector('post-togglebutton'),
-            ...focusableEls.flatMap(el => Array.from(getFocusableChildren(el))),
-        ];
-        this.firstFocusableEl = focusableChildren[0];
-        this.lastFocusableEl = focusableChildren[focusableChildren.length - 1];
-    }
-    getMenuButton() {
-        return this.host.querySelector('post-togglebutton');
-    }
-    keyboardHandler(e) {
-        if (e.key === 'Tab' && this.burgerMenuExtended) {
-            if (e.shiftKey && document.activeElement === this.firstFocusableEl) {
-                // If back tab (Tab + Shift) and first element is focused, focus goes to the last element of the megadropdown
-                e.preventDefault();
-                this.lastFocusableEl.focus();
-            }
-            else if (!e.shiftKey && document.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.hasNavigation = !!this.host.querySelector('[slot="post-mainnavigation"]');
-        this.hasNavigationControls = !!this.host.querySelector('[slot="navigation-controls"]');
-        this.hasTargetGroup = !!this.host.querySelector('[slot="target-group"]');
-        this.hasTitle = !!this.host.querySelector('[slot="title"]');
-    }
-    switchLanguageSwitchMode() {
-        const variant = this.hasBurgerMenu ? 'list' : 'menu';
-        Array.from(this.host.querySelectorAll('post-language-switch')).forEach(languageSwitch => {
-            languageSwitch?.setAttribute('variant', variant);
-        });
-    }
-    onFocusChange() {
-        const fixedElements = this.device === 'desktop' ? '.logo, .navigation' : '.global-header, .burger-menu';
-        const isHeaderExpanded = this.host.matches(':focus-within') &&
-            !this.host.shadowRoot.querySelector(`:where(${fixedElements}):focus-within`);
-        if (isHeaderExpanded) {
-            this.host.setAttribute('data-expanded', '');
-        }
-        else {
-            this.host.removeAttribute('data-expanded');
-        }
-    }
-    renderNavigation() {
-        if (this.device === 'desktop') {
-            return (h("div", { class: { 'navigation': true, 'megadropdown-open': this.megadropdownOpen } }, h("slot", { name: "post-mainnavigation" }), h("div", { class: "navigation-controls" }, h("slot", { name: "navigation-controls" }))));
-        }
-        return (h("div", { class: {
-                'burger-menu': true,
-                'extended': this.burgerMenuExtended,
-                'no-navigation-controls': !this.hasNavigationControls,
-            }, style: { '--post-header-navigation-current-inset': `${this.burgerMenu?.scrollTop ?? 0}px` }, ref: el => (this.burgerMenu = el) }, h("div", { class: "navigation-controls" }, h("slot", { name: "navigation-controls" })), h("div", { class: "burger-menu-body" }, h("slot", { name: "target-group" }), h("slot", { name: "post-mainnavigation" })), h("div", { class: "burger-menu-footer" }, h("slot", { name: "meta-navigation" }), h("slot", { name: "post-language-switch" }))));
-    }
-    render() {
-        return (h(Host, { key: 'c9b1c1a946800f728a7a90a91dff3abf23b5100f', "data-version": version, "data-color-scheme": "light", "data-burger-menu": this.hasBurgerMenu }, h("div", { key: '21d2b9bd39946df7e42d3d5c763d40cd1dabee69', class: {
-                'global-header': true,
-                'no-target-group': !this.hasTargetGroup,
-            } }, h("div", { key: '50cf30a8febea656eb3349e6c06dc5b609b13a6d', class: "logo" }, h("slot", { key: 'df1ecaca7b39316ef4d4bb56e33c3214b2648e68', name: "post-logo" })), h("div", { key: '9c4319dce10d9e98291a6cbdb0effb854a8b6dac', class: "sliding-controls" }, this.device === 'desktop' && (h("div", { key: 'ce916d4bdb65c641e58725f70b7689704847593c', class: "target-group" }, h("slot", { key: '810e4164ae17b8571011799307f3688cf64b5c30', name: "target-group" }))), h("slot", { key: 'abe6f2e08e87295e88e4cf33db0e72021d622aaf', name: "global-controls" }), !this.hasBurgerMenu && [
-            h("slot", { key: '4ef5603837d0f26c25dd50bf17bb0011dc927de0', name: "meta-navigation" }),
-            h("slot", { key: 'b1bc83f1bd5004af89e444a9bdf487225ac882d7', name: "post-language-switch" }),
-        ], h("slot", { key: '11dfd54337cf457bc25ec680c8d4e11a6712dc63', name: "global-login" }), this.hasNavigation && this.device !== 'desktop' && (h("div", { key: '67658d80ce90f4446ea8d1078937101a299536b8', onClick: () => this.toggleBurgerMenu(), class: "burger-menu-toggle" }, h("slot", { key: '2fdba487922c63db152ec08e3382640c9cdf1c12', name: "post-togglebutton" }))))), h("div", { key: '1516e38c9628d8cfb75d6f9bd55912071da5e94e', class: {
-                'local-header': true,
-                'no-title': !this.hasTitle,
-                'no-target-group': !this.hasTargetGroup,
-                'no-navigation': this.device !== 'desktop' || !this.hasNavigation,
-                'no-navigation-controls': !this.hasNavigationControls,
-            } }, h("slot", { key: '839b34249ece8af5cc53231271e739a6a664a977', name: "title" }), this.hasTitle && h("slot", { key: 'aa281968b58ecad425beb1b4ffbd1273cc167ea4', name: "local-controls" }), this.device === 'desktop' && this.renderNavigation()), this.device !== 'desktop' && this.renderNavigation()));
-    }
-    get host() { return this; }
-    static get watchers() { return {
-        "device": ["lockBody"],
-        "burgerMenuExtended": ["lockBody"]
-    }; }
-    static get style() { return postHeaderCss; }
-}, [1, "post-header", {
-        "device": [32],
-        "hasNavigation": [32],
-        "hasNavigationControls": [32],
-        "hasTargetGroup": [32],
-        "hasTitle": [32],
-        "burgerMenuExtended": [32],
-        "megadropdownOpen": [32],
-        "toggleBurgerMenu": [64]
-    }, [[0, "focusin", "onFocusChange"], [0, "focusout", "onFocusChange"]], {
-        "device": ["lockBody"],
-        "burgerMenuExtended": ["lockBody"]
-    }]);
-__decorate([
-    EventFrom('post-megadropdown')
-], PostHeader$1.prototype, "megadropdownStateHandler", void 0);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["post-header"];
-    components.forEach(tagName => { switch (tagName) {
-        case "post-header":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, PostHeader$1);
-            }
-            break;
-    } });
-}
-
-const PostHeader = PostHeader$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { PostHeader, defineCustomElement };
+import{proxyCustomElement as e,HTMLElement as t,h as o,Host as a,transformTag as i}from"@stencil/core/internal/client";import{c as s,t as n,g as r}from"./breakpoints.js";import{v as d}from"./package.js";import{f as l}from"./fade.js";import{a as h}from"./get-focusable-children.js";import{E as c}from"./event-from.js";import{d as p}from"./post-icon2.js";import{d as g}from"./post-togglebutton2.js";const u=e(class extends t{get hasBurgerMenu(){return"desktop"!==this.device&&this.hasNavigation}get scrollParent(){const e=document.querySelector("[data-post-scroll-locked]");if(e)return e;let t=this.host.parentElement;for(;t;){const e=getComputedStyle(t).overflowY;if(["auto","scroll"].includes(e))return t;t=t.parentElement}return document.body}validateFullWidth(){s(this,"fullWidth","boolean")}validateTextMenu(){s(this,"textMenu","string")}lockBody(e,t,o){const a=this.scrollParent;"desktop"!==this.device&&("burgerMenuExtended"===o?e:this.burgerMenuExtended)?(a.setAttribute("data-post-scroll-locked",""),this.host.addEventListener("keydown",this.keyboardHandler)):(a.removeAttribute("data-post-scroll-locked"),this.host.removeEventListener("keydown",this.keyboardHandler))}constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.throttledResize=n(50,(()=>this.updateLocalHeaderHeight())),this.animationOptions={duration:350,easing:"headerEase"},this.device=r.get("device"),this.hasNavigation=!1,this.hasLocalNav=!1,this.hasAudience=!1,this.hasTitle=!1,this.burgerMenuExtended=!1,this.megadropdownOpen=!1,this.fullWidth=!1,this.breakpointChange=e=>{this.device=e.detail,this.switchLanguageSwitchMode(),"desktop"===this.device&&this.burgerMenuExtended&&this.closeBurgerMenu(),"desktop"!==this.device&&(Array.from(this.host.querySelectorAll("post-megadropdown")).forEach((e=>{e.hide(!1,!0)})),this.megadropdownOpen=!1)},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.megadropdownStateHandler=this.megadropdownStateHandler.bind(this),this.checkSlottedContent=this.checkSlottedContent.bind(this),this.megadropdownStateHandler=this.megadropdownStateHandler.bind(this)}connectedCallback(){window.addEventListener("resize",this.throttledResize,{passive:!0}),window.addEventListener("scroll",this.handleScrollEvent,{passive:!0}),this.scrollParent.addEventListener("scroll",this.handleScrollEvent,{passive:!0}),document.addEventListener("postToggleMegadropdown",this.megadropdownStateHandler),window.addEventListener("postBreakpoint:device",this.breakpointChange),this.handleScrollParentResize(),this.lockBody(!1,this.burgerMenuExtended,"burgerMenuExtended")}componentWillRender(){this.handleScrollEvent(),this.handleSlottedContentChanges(),this.switchLanguageSwitchMode()}componentDidRender(){this.validateTextMenu(),this.validateFullWidth(),this.getFocusableElements(),this.handleLocalHeaderResize()}componentDidLoad(){this.updateLocalHeaderHeight(),this.host.shadowRoot.addEventListener("click",this.handleLinkClick)}disconnectedCallback(){const e=this.scrollParent;window.removeEventListener("postBreakpoint:device",this.breakpointChange),window.removeEventListener("resize",this.throttledResize),window.removeEventListener("scroll",this.handleScrollEvent),e&&e.removeEventListener("scroll",this.handleScrollEvent),document.removeEventListener("postToggleMegadropdown",this.megadropdownStateHandler),this.host.removeEventListener("keydown",this.keyboardHandler),this.host.shadowRoot&&this.host.shadowRoot.removeEventListener("click",this.handleLinkClick),this.scrollParentResizeObserver&&(this.scrollParentResizeObserver.disconnect(),this.scrollParentResizeObserver=null),this.localHeaderResizeObserver&&(this.localHeaderResizeObserver.disconnect(),this.localHeaderResizeObserver=null),this.slottedContentObserver&&(this.slottedContentObserver.disconnect(),this.slottedContentObserver=null),this.burgerMenuExtended=!1}async closeBurgerMenu(){this.burgerMenuAnimation?.finish(),this.burgerMenuButton&&(this.burgerMenuButton.toggled=!1),this.burgerMenuExtended=!1}async toggleBurgerMenu(e){"desktop"!==this.device&&(this.burgerMenuAnimation=l(this.burgerMenu,this.burgerMenuExtended?"out":"in",this.animationOptions),this.burgerMenuButton&&(this.burgerMenuButton.toggled=e??!this.burgerMenuExtended),this.burgerMenuExtended?(await this.burgerMenuAnimation.finished,this.burgerMenuExtended=e??!this.burgerMenuExtended,!1===this.burgerMenuExtended&&(this.closeAllMegadropdowns(),this.burgerMenu.scrollTop=0)):(this.burgerMenuExtended=e??!this.burgerMenuExtended,this.megadropdownOpen&&this.closeAllMegadropdowns()))}megadropdownStateHandler(e){this.megadropdownOpen=e.detail.isVisible}getFocusableElements(){if(!this.burgerMenu)return;const e=[this.burgerMenuButton];e.push(...h(this.localHeader,(e=>!e.matches("post-megadropdown"))),...h(this.burgerMenu,(e=>!e.matches("post-megadropdown")))),this.firstFocusableEl=e[0],this.lastFocusableEl=e[e.length-1]}keyboardHandler(e){if("Tab"!==e.key||!this.burgerMenuExtended)return;const t=this.host.shadowRoot.activeElement||document.activeElement;e.shiftKey&&t===this.firstFocusableEl?(e.preventDefault(),this.lastFocusableEl.focus()):e.shiftKey||t!==this.lastFocusableEl||(e.preventDefault(),this.firstFocusableEl.focus())}closeAllMegadropdowns(){Array.from(this.host.querySelectorAll("post-megadropdown")).forEach((e=>{e.hide(!1,!0)})),this.megadropdownOpen=!1}handleScrollEvent(){const e=this.scrollParent===document.body?window.scrollY:this.scrollParent.scrollTop;document.documentElement.style.setProperty("--post-header-scroll-top",Math.max(e,0)+"px")}updateLocalHeaderHeight(){const e=this.host.shadowRoot.querySelector(".local-header");e&&document.documentElement.style.setProperty("--post-local-header-expanded-height",e.clientHeight+"px")}updateScrollParentHeight(){this.host.style.setProperty("--post-header-scroll-parent-height",this.scrollParent.clientHeight+"px")}handleLinkClick(e){const t=e.target,o=t.closest("post-mainnavigation a"),a=t.closest("post-megadropdown a");(o||a)&&(this.burgerMenuExtended&&(o||a)&&this.toggleBurgerMenu(!1),"desktop"===this.device&&a)&&t.closest("post-megadropdown a")&&t.closest("post-megadropdown").hide(!0)}handleScrollParentResize(){this.scrollParent&&(this.scrollParentResizeObserver=new ResizeObserver(this.updateScrollParentHeight),this.scrollParentResizeObserver.observe(this.scrollParent))}handleLocalHeaderResize(){const e=this.host.shadowRoot.querySelector(".local-header");e&&!this.localHeaderResizeObserver&&(this.localHeaderResizeObserver=new ResizeObserver(this.updateLocalHeaderHeight),this.localHeaderResizeObserver.observe(e))}handleSlottedContentChanges(){this.slottedContentObserver||(this.checkSlottedContent(),this.slottedContentObserver=new MutationObserver(this.checkSlottedContent),this.slottedContentObserver.observe(this.host,{childList:!0}))}checkSlottedContent(){this.hasNavigation=!!this.host.querySelector('[slot="main-nav"]'),this.hasLocalNav=!!this.host.querySelector('[slot="local-nav"]'),this.hasAudience=!!this.host.querySelector('[slot="audience"]'),this.hasTitle=!!this.host.querySelector('[slot="title"]')}switchLanguageSwitchMode(){const e=this.hasBurgerMenu?"list":"menu";Array.from(this.host.querySelectorAll("post-language-menu")).forEach((t=>{t?.setAttribute("variant",e)}))}onFocusChange(e){const t="desktop"===this.device?".navigation":".global-header, .burger-menu";e.target===document.activeElement&&this.host.matches(":focus-within")&&!this.host.shadowRoot.querySelector(`:where(${t}):focus-within`)?this.host.setAttribute("data-expanded",""):this.host.removeAttribute("data-expanded")}renderNavigation(){const e=!this.hasTitle&&o("div",{class:"local-nav"},o("slot",{name:"local-nav"}));return"desktop"===this.device?o("div",{class:{navigation:!0,"megadropdown-open":this.megadropdownOpen}},o("slot",{name:"main-nav"}),e):o("div",{class:{"burger-menu":!0,extended:this.burgerMenuExtended,"no-local-nav":!this.hasLocalNav,"megadropdown-open":this.megadropdownOpen},style:{"--post-header-navigation-current-inset":(this.burgerMenu?.scrollTop??0)+"px"},ref:e=>this.burgerMenu=e},e,o("div",{class:"burger-menu-body"},o("slot",{name:"audience"}),o("slot",{name:"main-nav"})),o("div",{class:"burger-menu-footer"},o("slot",{name:"global-nav-secondary"}),o("slot",{name:"language-menu"})))}render(){return o(a,{key:"3f5431ebd9b726f8a73ee4a0b8b406d11bab5cf2","data-version":d,"data-color-scheme":"light","data-burger-menu":this.hasBurgerMenu,"data-menu-extended":this.burgerMenuExtended},o("header",{key:"ea55944e7f5f0750e3cb229a94b2aef7738c397a"},o("div",{key:"f70653f47812b951519cc001a42d4827f327cffd",class:{"global-header":!0,"no-audience":!this.hasAudience}},o("div",{key:"60d43f32a71169d6d4314b9cc4d8a9e11ec7834e",class:"section"},o("div",{key:"ce0f3a9fff1225456f823189093fe960d3f49033",class:"logo"},o("slot",{key:"d96003c9bafbe7914b84a9f7b80ab8ed4bd71ddb",name:"post-logo"})),o("div",{key:"c85e70b4a9adbdd4d95c4ff8a53248b9b707ff2b",class:"sliding-controls"},"desktop"===this.device&&o("div",{key:"d297bba4782a50df1942d96a4eea6c9aeb76965d",class:"audience"},o("slot",{key:"8a923e9a27d811c204d212843b611885b1a2b257",name:"audience"})),o("slot",{key:"44a6294e62add92191e5ee8f6b0606a2e367a3d5",name:"global-nav-primary"}),!this.hasBurgerMenu&&[o("slot",{key:"843b9a656a289b51aea5db4634323999286ccb64",name:"global-nav-secondary"}),o("slot",{key:"55268cf25f98a76c377ad48c2578f2f8b3a5b025",name:"language-menu"})],o("slot",{key:"7885e754087572e48a0a62cccbbae3ea70a56bd3",name:"post-login"}),this.hasNavigation&&"desktop"!==this.device&&o("div",{key:"7713dede3877c4bd97cae59d78ea0a38daa15a8e",onClick:()=>this.toggleBurgerMenu(),class:"burger-menu-toggle"},o("slot",{key:"611df14f6646ae994ad090a482c20f09c3e1a39a",name:"post-togglebutton"})),this.hasNavigation&&"desktop"!==this.device&&o("post-togglebutton",{key:"e932a70cfd057cec4670867581e380d313cc23d1",ref:e=>this.burgerMenuButton=e,onClick:()=>this.toggleBurgerMenu()},o("span",{key:"c418e4ca4698ebefc5c7410cf6037620db0314f9"},this.textMenu),o("post-icon",{key:"438bfc7ee2f0d853fa92385c8e0f159608d76313","aria-hidden":"true",name:"burger","data-showwhen":"untoggled"}),o("post-icon",{key:"d6b48e5078b8e96d3fc8fef27a50544b3ed58355","aria-hidden":"true",name:"closex","data-showwhen":"toggled"}))))),o("div",{key:"0909b5778d908f48521abd7635bfd6eb320fc16a",ref:e=>this.localHeader=e,class:{"local-header":!0,"no-title":!this.hasTitle,"no-audience":!this.hasAudience,"no-navigation":"desktop"!==this.device||!this.hasNavigation,"no-local-nav":!this.hasLocalNav}},o("div",{key:"b5d0280efefc560a89f3a1cbeeeaec1b90a82359",class:"section"},o("slot",{key:"b0f25a30d6970cde7b1b9e3c1de1ffb667e4cb97",name:"title"}),this.hasTitle&&o("slot",{key:"9140fb3550e1f71824add9f90b43cf622223a4a1",name:"local-nav"}),"desktop"===this.device&&this.renderNavigation())),"desktop"!==this.device&&this.renderNavigation()))}get host(){return this}static get watchers(){return{fullWidth:[{validateFullWidth:0}],textMenu:[{validateTextMenu:0}],device:[{lockBody:0}],burgerMenuExtended:[{lockBody:0}]}}static get style(){return':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.25rem;--post-global-header-padding-inline-start:0.25rem;--post-global-header-padding-inline-end:0.5rem;--post-local-header-padding-inline-start:0.75rem;--post-local-header-padding-inline-end:0.5rem}}@media screen and (min-width: 600px)and (max-width: 1023.98px){:host{--post-header-gap:0.75rem 0.25rem;--post-global-header-padding-inline-start:0.25rem;--post-global-header-padding-inline-end:0.25rem;--post-local-header-padding-inline-start:0.75rem;--post-local-header-padding-inline-end:0.25rem;--post-local-header-padding-block:0rem;--post-burger-menu-padding-inline:2.5rem;--post-burger-menu-body-gap:2rem;--post-burger-menu-footer-gap:1.5rem}}@media screen and (min-width: 600px)and (max-width: 779.98px){:host{--post-burger-menu-padding-inline:1rem}}@media screen and (min-width: 0)and (max-width: 599.98px){:host{--post-header-gap:0.75rem 0.25rem;--post-global-header-padding-inline-start:0rem;--post-global-header-padding-inline-end:0.5rem;--post-local-header-padding-inline-start:0.5rem;--post-local-header-padding-inline-end:0.5rem;--post-local-header-padding-block:0rem;--post-burger-menu-padding-inline:1rem;--post-burger-menu-body-gap:1.5rem;--post-burger-menu-footer-gap:1rem}}:host(: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-logo-height:var(--post-global-header-expanded-height)}*,::before,::after{box-sizing:border-box}:host,header,.global-header,.local-header{transition:inset-block-start 150ms cubic-bezier(0.4, 0, 0.2, 1)}.global-header,.local-header,.burger-menu{box-shadow:var(--post-device-elevation-300)}.section,.navigation,.sliding-controls{display:flex;align-items:center;justify-content:space-between;gap:var(--post-header-gap);flex-wrap:wrap}.section{max-width:var(--post-header-content-max-width);margin-inline:auto}:host{container-type:inline-size;display:block;position:sticky;inset-block-start:var(--post-header-top);z-index:1020}:host post-togglebutton{display:inline-flex;position:relative;align-items:center;justify-content:center;max-width:100%;overflow:hidden;transition:opacity 250ms,border-color 250ms,background-color 250ms,color 250ms;border-width:var(--post-device-border-width-default);border-style:solid;border-radius:var(--post-device-border-radius-round);background-color:rgba(0,0,0,0);box-shadow:none;font-family:inherit;font-weight:var(--post-device-font-weight-bold);text-decoration:none;white-space:nowrap;cursor:pointer;border:unset;font-weight:unset;display:flex;padding:.25rem .625rem;gap:.375rem;font-size:1rem;border-color:var(--post-scheme-color-interactive-button-tertiary-enabled-stroke);background-color:var(--post-scheme-color-interactive-button-tertiary-enabled-bg);color:var(--post-scheme-color-interactive-button-tertiary-enabled-fg)}:host post-togglebutton:hover{text-decoration:none}:host post-togglebutton:disabled{border-style:var(--post-core-border-style-dash)}:host post-togglebutton{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}:host post-togglebutton: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){:host post-togglebutton:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){:host post-togglebutton: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){:host post-togglebutton: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){:host post-togglebutton:is(a){color:LinkText;border:unset}:host post-togglebutton:is(button){background-color:ButtonFace !important;border:1px solid ButtonBorder !important}:host post-togglebutton:not(:disabled,.disabled):is(button):hover{background-color:Highlight !important}:host post-togglebutton:not(:disabled,.disabled):is(button):hover>post-icon{color:HighlightText !important}}:host post-togglebutton: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)}:host post-togglebutton:is([aria-current],[aria-pressed=true],[aria-expanded=true],.active){box-shadow:var(--post-device-elevation-100);border-color:var(--post-scheme-color-interactive-button-primary-enabled-stroke);background-color:var(--post-scheme-color-interactive-button-primary-enabled-bg);color:var(--post-scheme-color-interactive-button-primary-enabled-fg)}:host post-togglebutton:is([aria-current],[aria-pressed=true],[aria-expanded=true],.active):hover{border-color:var(--post-scheme-color-interactive-button-primary-hover-stroke);background-color:var(--post-scheme-color-interactive-button-primary-hover-bg);color:var(--post-scheme-color-interactive-button-primary-hover-fg)}@media screen and (min-width: 0)and (max-width: 599.98px){:host post-togglebutton{padding:.625rem}:host post-togglebutton>:not(post-icon){display:none}:host post-togglebutton>post-icon{font-size:1.5rem}}.global-header{z-index:2;position:sticky;inset-block-start:var(--post-global-header-top);background-color:#fc0}.global-header .section{height:var(--post-global-header-expanded-height);padding-inline-start:var(--post-global-header-padding-inline-start);padding-inline-end:var(--post-global-header-padding-inline-end)}.global-header:has(~.local-header:not(.no-title.no-navigation)),.global-header:has(~.burger-menu.extended){box-shadow:none}.global-header .logo{align-self:flex-end;width:var(--post-global-header-expanded-height);height:var(--post-logo-height);min-height:var(--post-global-header-reduced-height);max-height:100%;margin-inline-end:calc(1.25rem - var(--post-header-gap))}.global-header .sliding-controls{flex-grow:1;justify-content:flex-end;position:relative;inset-block-start:var(--post-global-controls-top)}.global-header .audience{margin-inline-end:auto}.global-header.no-audience .audience{display:none}.local-header{position:relative;background-color:#fff}.local-header .section{min-height:var(--post-local-header-expanded-min-height);padding-inline-start:var(--post-local-header-padding-inline-start);padding-inline-end:var(--post-local-header-padding-inline-end);padding-block:var(--post-local-header-padding-block)}.local-header:not(.no-title,.no-navigation) .section{padding-block-start:1.125rem}.local-header.no-title.no-navigation{display:none}.local-header:has(.navigation.megadropdown-open),.local-header:has(~.burger-menu.extended){box-shadow:none}.local-header:has(.navigation.megadropdown-open)::after,.local-header:has(~.burger-menu.extended)::after{content:"";display:block;position:absolute;inset-inline:0;inset-block-end:0;height:1px;background-color:#e1e0dc}.local-header .navigation{flex:1 0 100%;height:var(--post-main-navigation-height);margin-inline-start:calc(-1*var(--post-local-header-padding-inline-start));max-width:100cqw}.local-header.no-navigation .navigation{display:none}.local-header .local-nav{flex:0 0 auto}.local-header.no-local-nav .navigation{margin-inline-end:calc(-1*var(--post-local-header-padding-inline-end))}.local-header.no-local-nav .local-nav{display:none}.burger-menu{z-index:-1;position:absolute;inset-inline:0;inset-block-start:100%;height:calc(min(var(--post-header-scroll-parent-height, 100dvh),100dvh) - var(--post-header-height));overflow:hidden auto;display:flex;flex-direction:column;background-color:#fafafa}.burger-menu.extended.megadropdown-open{overflow:hidden}.burger-menu:not(.extended){transform:translateY(-100%);display:none}.burger-menu:not(.extended)>*{display:none}.burger-menu .burger-menu-body,.burger-menu .burger-menu-footer{display:flex;flex-direction:column;padding-inline:var(--post-burger-menu-padding-inline)}.burger-menu .burger-menu-body{flex-grow:1;padding-block:1.5rem;gap:var(--post-burger-menu-body-gap)}.burger-menu .burger-menu-footer{background-color:#f0efed;padding-block:1rem 1.5rem;gap:var(--post-burger-menu-footer-gap)}.burger-menu .local-nav{min-height:3.5rem;display:flex;align-items:center;justify-content:flex-end;padding-inline:.25rem}.burger-menu.no-local-nav .local-nav{display:none}'}},[257,"post-header",{fullWidth:[516,"full-width"],textMenu:[513,"text-menu"],device:[32],hasNavigation:[32],hasLocalNav:[32],hasAudience:[32],hasTitle:[32],burgerMenuExtended:[32],megadropdownOpen:[32],toggleBurgerMenu:[64]},[[0,"focusin","onFocusChange"],[0,"focusout","onFocusChange"]],{fullWidth:[{validateFullWidth:0}],textMenu:[{validateTextMenu:0}],device:[{lockBody:0}],burgerMenuExtended:[{lockBody:0}]}]);!function(e,t,o,a){var i,s=arguments.length,n=s<3?t:null===a?a=Object.getOwnPropertyDescriptor(t,o):a;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(e,t,o,a);else for(var r=e.length-1;r>=0;r--)(i=e[r])&&(n=(s<3?i(n):s>3?i(t,o,n):i(t,o))||n);s>3&&n&&Object.defineProperty(t,o,n)}([c("post-megadropdown")],u.prototype,"megadropdownStateHandler",null);const b=u,m=function(){"undefined"!=typeof customElements&&["post-header","post-icon","post-togglebutton"].forEach((e=>{switch(e){case"post-header":customElements.get(i(e))||customElements.define(i(e),u);break;case"post-icon":customElements.get(i(e))||p();break;case"post-togglebutton":customElements.get(i(e))||g()}}))};export{b as PostHeader,m as defineCustomElement}

package/dist/components/post-icon.js

@@ -1,6 +1 @@
-import { P as PostIcon$1, d as defineCustomElement$1 } from './post-icon2.js';
-
-const PostIcon = PostIcon$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { PostIcon, defineCustomElement };
+import{P as o,d as s}from"./post-icon2.js";const t=o,p=s;export{t as PostIcon,p as defineCustomElement}

package/dist/components/post-icon2.js

@@ -1,159 +1 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { I as IS_BROWSER } from './breakpoints.js';
-import { d as checkEmptyOrOneOf, e as checkEmptyOrType, c as checkRequiredAndType } from './index2.js';
-import { v as version } from './package.js';
-
-const postIconCss = ":host{display:inline-block;width:1em;height:1em;vertical-align:-0.15em}span{display:block;width:100%;height:100%;fill:currentColor;forced-color-adjust:preserve-parent-color;background-color:currentColor;-webkit-mask-position:center center;mask-position:center center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100%;mask-size:100%}:host([flip-h]:not([flip-h=false])){scale:-1 1}:host([flip-v]:not([flip-v=false])){scale:1 -1}:host([flip-h][flip-v]:not([flip-h=false],[flip-v=false])){scale:-1}:host([animation]){transform-origin:center}:host([animation=cylon]){animation:icon-animation-cylon .75s ease-in-out infinite alternate}:host([animation=cylon-vertical]){animation:icon-animation-cylon-vertical .75s ease-in-out infinite alternate}:host([animation=spin]){animation:icon-animation-spin 2s linear infinite normal}:host([animation=spin-reverse]){animation:icon-animation-spin 2s linear infinite reverse}:host([animation=fade]){animation:icon-animation-fade .75s ease-in-out infinite alternate}:host([animation=throb]){animation:icon-animation-throb .75s ease-in-out infinite alternate}@keyframes icon-animation-cylon{from{transform:translateX(-25%)}to{transform:translateX(25%)}}@keyframes icon-animation-cylon-vertical{from{transform:translateY(25%)}to{transform:translateY(-25%)}}@keyframes icon-animation-fade{from{opacity:.1}to{opacity:1}}@keyframes icon-animation-spin{from{transform:rotate(0deg)}to{transform:rotate(359deg)}}@keyframes icon-animation-throb{from{opacity:.5;transform:scale(0.5)}to{opacity:1;transform:scale(1)}}";
-
-const CDN_URL = `https://unpkg.com/@swisspost/design-system-icons@${version}/public/post-icons/`;
-const ANIMATION_NAMES = [
-    'cylon',
-    'cylon-vertical',
-    'spin',
-    'spin-reverse',
-    'fade',
-    'throb',
-];
-const ANIMATION_KEYS = [...ANIMATION_NAMES];
-const PostIcon = /*@__PURE__*/ proxyCustomElement(class PostIcon extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        /**
-         * 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;
-    }
-    validateAnimation() {
-        checkEmptyOrOneOf(this, 'animation', ANIMATION_KEYS);
-    }
-    validateBase() {
-        checkEmptyOrType(this, 'base', 'string');
-    }
-    validateName() {
-        checkRequiredAndType(this, 'name', 'string');
-    }
-    validateRotate() {
-        checkEmptyOrType(this, 'rotate', 'number');
-    }
-    validateScale() {
-        checkEmptyOrType(this, 'scale', 'number');
-    }
-    /**
-     * 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 fileName = `${this.name}.svg`;
-        if (!IS_BROWSER && !this.base) {
-            return `${CDN_URL}${fileName}`;
-        }
-        const isAbsolute = (url) => /^https?:\/\//.test(url);
-        const normalizeUrl = (url) => (url && !url.endsWith('/') ? `${url}/` : url);
-        const cleanUrl = (url) => url.replace(/([^:])\/\//g, '$1/');
-        const currentDomain = IS_BROWSER ? window.location.origin : '';
-        const baseHref = IS_BROWSER
-            ? document.querySelector('base[href]')?.getAttribute('href') || ''
-            : '';
-        const metaIconBase = IS_BROWSER
-            ? document.querySelector('meta[name="design-system-settings"]')?.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.entries({
-            '-webkit-mask-image': `url(${url})`,
-            'mask-image': `url('${url}')`,
-            'transform': (this.scale && !isNaN(Number(this.scale)) ? 'scale(' + this.scale + ')' : '') +
-                (this.rotate && !isNaN(Number(this.rotate)) ? ' rotate(' + this.rotate + 'deg)' : ''),
-        })
-            .filter(([_key, value]) => value !== null)
-            .reduce((styles, [key, value]) => Object.assign(styles, { [key]: value }), {});
-    }
-    componentDidLoad() {
-        this.validateBase();
-        this.validateName();
-        this.validateScale();
-        this.validateRotate();
-        this.validateAnimation();
-    }
-    render() {
-        return (h(Host, { key: '7ce1f627f621201c0f4d6e90ee3d8d6d3c32798a', "data-version": version }, h("span", { key: '987ecd266b8bd68bdbb06cdb500a746b913e79b1', style: this.getStyles() })));
-    }
-    get host() { return this; }
-    static get watchers() { return {
-        "animation": ["validateAnimation"],
-        "base": ["validateBase"],
-        "name": ["validateName"],
-        "rotate": ["validateRotate"],
-        "scale": ["validateScale"]
-    }; }
-    static get style() { return postIconCss; }
-}, [1, "post-icon", {
-        "animation": [1],
-        "base": [1],
-        "flipH": [4, "flip-h"],
-        "flipV": [4, "flip-v"],
-        "name": [513],
-        "rotate": [2],
-        "scale": [2]
-    }, undefined, {
-        "animation": ["validateAnimation"],
-        "base": ["validateBase"],
-        "name": ["validateName"],
-        "rotate": ["validateRotate"],
-        "scale": ["validateScale"]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["post-icon"];
-    components.forEach(tagName => { switch (tagName) {
-        case "post-icon":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, PostIcon);
-            }
-            break;
-    } });
-}
-
-export { PostIcon as P, defineCustomElement as d };
+import{proxyCustomElement as t,HTMLElement as a,h as e,Host as i,transformTag as n}from"@stencil/core/internal/client";import{I as s}from"./environment.js";import{d as o,e as r,c as l}from"./breakpoints.js";import{v as m}from"./package.js";const c=`https://unpkg.com/@swisspost/design-system-icons@${m}/public/post-icons/`,f=["cylon","cylon-vertical","spin","spin-reverse","fade","throb"],h=t(class extends a{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.flipH=!1,this.flipV=!1}validateAnimation(){o(this,"animation",f)}validateBase(){r(this,"base","string")}validateName(){l(this,"name","string")}validateRotate(){r(this,"rotate","number")}validateScale(){r(this,"scale","number")}getUrl(){const t=`${this.name}.svg`;if(!s&&!this.base)return`${c}${t}`;const a=t=>/^https?:\/\//.test(t),e=t=>t&&!t.endsWith("/")?`${t}/`:t,i=t=>t.replace(/([^:])\/\//g,"$1/"),n=s?window.location.origin:"",o=s&&document.querySelector("base[href]")?.getAttribute("href")||"";let r="";if(s){const t=document.querySelector('meta[name="design-system-settings"]');r=t?.getAttribute("data-post-icon-base")||""}const l=t=>{const i=e(o),s=e(t);return a(i)?`${i}${s}`:`${n}${i}${s}`};let m;return this.base?(m=a(this.base)?`${e(this.base)}${t}`:`${l(this.base)}${t}`,i(m)):r?(m=a(r)?`${e(r)}${t}`:`${l(r)}${t}`,i(m)):i(`${c}${t}`)}getStyles(){const t=this.getUrl();return Object.entries({"-webkit-mask-image":`url(${t})`,"mask-image":`url('${t}')`,transform:(this.scale&&!isNaN(Number(this.scale))?"scale("+this.scale+")":"")+(this.rotate&&!isNaN(Number(this.rotate))?" rotate("+this.rotate+"deg)":"")}).filter((([t,a])=>null!==a)).reduce(((t,[a,e])=>Object.assign(t,{[a]:e})),{})}componentDidLoad(){this.validateBase(),this.validateName(),this.validateScale(),this.validateRotate(),this.validateAnimation()}render(){return e(i,{key:"fe1b4d0541c75c1ed0adb92111d106ed874a9b2f","data-version":m},e("span",{key:"ca2b749e407d9ec54eb881c6662b59626e16083d",style:this.getStyles()}))}get host(){return this}static get watchers(){return{animation:[{validateAnimation:0}],base:[{validateBase:0}],name:[{validateName:0}],rotate:[{validateRotate:0}],scale:[{validateScale:0}]}}static get style(){return":host{display:inline-block;width:1em;height:1em;vertical-align:-0.15em}span{display:block;width:100%;height:100%;fill:currentColor;forced-color-adjust:preserve-parent-color;background-color:currentColor;-webkit-mask-position:center center;mask-position:center center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100%;mask-size:100%}:host([flip-h]:not([flip-h=false])){scale:-1 1}:host([flip-v]:not([flip-v=false])){scale:1 -1}:host([flip-h][flip-v]:not([flip-h=false],[flip-v=false])){scale:-1}:host([animation]){transform-origin:center}:host([animation=cylon]){animation:icon-animation-cylon .75s ease-in-out infinite alternate}:host([animation=cylon-vertical]){animation:icon-animation-cylon-vertical .75s ease-in-out infinite alternate}:host([animation=spin]){animation:icon-animation-spin 2s linear infinite normal}:host([animation=spin-reverse]){animation:icon-animation-spin 2s linear infinite reverse}:host([animation=fade]){animation:icon-animation-fade .75s ease-in-out infinite alternate}:host([animation=throb]){animation:icon-animation-throb .75s ease-in-out infinite alternate}@keyframes icon-animation-cylon{from{transform:translateX(-25%)}to{transform:translateX(25%)}}@keyframes icon-animation-cylon-vertical{from{transform:translateY(25%)}to{transform:translateY(-25%)}}@keyframes icon-animation-fade{from{opacity:.1}to{opacity:1}}@keyframes icon-animation-spin{from{transform:rotate(0deg)}to{transform:rotate(359deg)}}@keyframes icon-animation-throb{from{opacity:.5;transform:scale(0.5)}to{opacity:1;transform:scale(1)}}"}},[1,"post-icon",{animation:[1],base:[1],flipH:[4,"flip-h"],flipV:[4,"flip-v"],name:[513],rotate:[2],scale:[2]},void 0,{animation:[{validateAnimation:0}],base:[{validateBase:0}],name:[{validateName:0}],rotate:[{validateRotate:0}],scale:[{validateScale:0}]}]);function p(){"undefined"!=typeof customElements&&["post-icon"].forEach((t=>{"post-icon"===t&&(customElements.get(n(t))||customElements.define(n(t),h))}))}export{h as P,p as d}

package/dist/components/post-language-menu-item.d.ts

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

package/dist/components/post-language-menu-item.js

@@ -0,0 +1 @@
+import{proxyCustomElement as t,HTMLElement as e,createEvent as i,h as a,Host as o,transformTag as n}from"@stencil/core/internal/client";import{c as s,d as r,e as l,a as u}from"./breakpoints.js";import{v as c}from"./package.js";import{S as d}from"./switch-variants.js";const h=t(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.postChange=i(this,"postChange",7),this.postLanguageMenuItemInitiallyActive=i(this,"postLanguageMenuItemInitiallyActive",7)}validateCode(){s(this,"code","string")}validateVariant(){r(this,"variant",d)}validateName(){l(this,"name","string")}validateUrl(){u(this,"url")}componentDidLoad(){if(this.validateCode(),this.validateName(),this.validateUrl(),!this.name&&this.isNameRequired())throw Error('The "name" property of the post-language-menu-item component is required when the full language name is not displayed.');this.active&&this.postLanguageMenuItemInitiallyActive.emit(this.code)}async select(){this.active=!0,this.emitChange()}emitChange(){this.postChange.emit(this.code)}isNameRequired(){return this.host.textContent.toLowerCase()===this.code.toLowerCase()}render(){const t=this.code.toLowerCase(),e=t=>{"Enter"!==t.key&&" "!==t.key||this.emitChange()};return a(o,{key:"f95d1aba997cbb1b7b4805428443a35e9db4c8e6","data-version":c,role:"list"===this.variant?"listitem":void 0},this.url?a("a",{"aria-current":this.active?"page":void 0,href:this.url,hrefLang:t,lang:t,onClick:()=>this.emitChange(),onKeyDown:e},a("slot",null),a("span",{class:"visually-hidden"},this.name)):a("button",{"aria-current":this.active?"true":void 0,lang:t,onClick:()=>this.emitChange(),onKeyDown:e},a("slot",null),a("span",{class:"visually-hidden"},this.name)))}get host(){return this}static get watchers(){return{code:[{validateCode:0}],variant:[{validateVariant:0}],name:[{validateName:0}],url:[{validateUrl:0}]}}static get style(){return"post-language-menu-item{display:inline-block}post-language-menu-item button{padding:0;overflow:visible;border:0;background:none;color:var(--post-scheme-color-interactive-button-secondary-enabled-fg);font:inherit;-webkit-user-select:none;user-select:none;appearance:button}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){post-language-menu-item button{background-color:ButtonFace !important}post-language-menu-item button:hover{background-color:Highlight !important}}post-language-menu-item button .visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}post-language-menu-item a{color:var(--post-current-fg);text-decoration:none}post-language-menu-item :is(a,button){cursor:pointer;display:flex;align-items:center;justify-content:center;width:100%;height:100%;text-transform:uppercase}post-language-menu-item :is(a,button){outline-offset:var(--post-device-spacing-padding-2) !important;outline:var(--post-scheme-color-interactive-focus-stroke) none var(--post-device-border-width-focus) !important}post-language-menu-item :is(a,button):is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-style:var(--post-core-border-style-solid) !important;border-radius:4px}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){post-language-menu-item :is(a,button):is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){post-language-menu-item :is(a,button):is(:focus-visible,:focus-within,.pretend-focus){outline-style:var(--post-core-border-style-solid) !important;border-radius:4px}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){post-language-menu-item :is(a,button):is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}post-language-menu-item:where([variant=list]) :is(a,button){padding-inline:0;width:40px;height:40px;border-radius:2px}post-language-menu-item:where([variant=list]) :is(a,button):hover{color:#504f4b}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){post-language-menu-item:where([variant=list]) :is(a,button){border:1px solid ButtonBorder;color:ButtonText}}post-language-menu-item:where([variant=list])[active]:not([active=false]) :is(a,button){background-color:#050400 !important;color:#fff;pointer-events:none}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){post-language-menu-item:where([variant=list])[active]:not([active=false]) :is(a,button){background-color:Highlight !important;color:HighlightText}}post-language-menu-item:where([variant=menu]){min-width:72px}post-language-menu-item:where([variant=menu])[active]:not([active=false]){display:none}post-language-menu-item:where([variant=menu]) :is(a,button){padding-block:13px;padding-inline:16px;box-sizing:border-box;justify-content:flex-start;position:relative;border-radius:0}post-language-menu-item:where([variant=menu]) :is(a,button):hover{color:#fff;background-color:#504f4b}post-language-menu-item:where([variant=menu]):first-child :is(a,button){border-start-start-radius:4px;border-start-end-radius:4px}post-language-menu-item:where([variant=menu]):last-child :is(a,button){border-end-start-radius:4px;border-end-end-radius:4px}"}},[260,"post-language-menu-item",{code:[513],active:[1540],variant:[1],name:[1],url:[1],select:[64]},void 0,{code:[{validateCode:0}],variant:[{validateVariant:0}],name:[{validateName:0}],url:[{validateUrl:0}]}]),m=h,g=function(){"undefined"!=typeof customElements&&["post-language-menu-item"].forEach((t=>{"post-language-menu-item"===t&&(customElements.get(n(t))||customElements.define(n(t),h))}))};export{m as PostLanguageMenuItem,g as defineCustomElement}