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

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

@@ -0,0 +1,75 @@
+import { h, Host } from "@stencil/core";
+import { version } from "../../../../package";
+import { breakpoint } from "../../utils/index";
+/**
+ * @slot grid-{1|2|3|4}-title - Slot for the accordion headers (mobile).
+ * @slot grid-{1|2|3|4} - Slot for the accordion bodies (mobile) and the grid cells (tablet, desktop).
+ * @slot socialmedia - Slot for the social media links.
+ * @slot app - Slot for the app links.
+ * @slot businesssectors - Slot for the business sectors links.
+ * @slot meta - Slot for the meta links.
+ * @slot copyright - Slot for the copyright text.
+ */
+export class PostFooter {
+    constructor() {
+        this.breakpointChange = (e) => {
+            this.isMobile = e.detail === 'mobile';
+        };
+        this.label = undefined;
+        this.isMobile = breakpoint.get('name') === 'mobile';
+    }
+    connectedCallback() {
+        window.addEventListener('postBreakpoint:name', this.breakpointChange);
+    }
+    disconnectedCallback() {
+        window.removeEventListener('postBreakpoint:name', this.breakpointChange);
+    }
+    renderAccordion() {
+        return (h("div", { class: "footer-grid" }, h("post-accorddion", { "heading-level": "3", multiple: true }, h("post-accordion-item", { collapsed: true }, h("span", { slot: "header" }, h("slot", { name: "grid-1-title" })), h("slot", { name: "grid-1" })), h("post-accordion-item", { collapsed: true }, h("span", { slot: "header" }, h("slot", { name: "grid-2-title" })), h("slot", { name: "grid-2" })), h("post-accordion-item", { collapsed: true }, h("span", { slot: "header" }, h("slot", { name: "grid-3-title" })), h("slot", { name: "grid-3" })), h("post-accordion-item", { collapsed: true }, h("span", { slot: "header" }, h("slot", { name: "grid-4-title" })), h("slot", { name: "grid-4" })))));
+    }
+    renderGrid() {
+        return (h("div", { class: "footer-grid" }, h("div", null, h("slot", { name: "grid-1" })), h("div", null, h("slot", { name: "grid-2" })), h("div", null, h("slot", { name: "grid-3" })), h("div", null, h("slot", { name: "grid-4" }))));
+    }
+    render() {
+        return (h(Host, { key: '4058ba0a63a666b82d274d1c35397c97d280ba49', "data-version": version }, h("footer", { key: '27adf1e2a1439fd69efd6e571fcdd6851304c92a' }, h("h2", { key: '1ca0cd955ec5e6d315521eb5c28c5963ed44856d', class: "visually-hidden" }, this.label), h("div", { key: '27a6f520dee9d6294fa3cd4ebc6fd5062ac327ce', class: "footer-container" }, this.isMobile ? this.renderAccordion() : this.renderGrid(), h("div", { key: '5607004d5e3ea553a86d476ca459b3b3632ef12d', class: "footer-column" }, h("div", { key: 'cd4727970358ffad4ca28fffaccc8a5eab4dec27', class: "footer-socialmedia" }, h("slot", { key: '92e105af21b69640a07c2d35c24bff6aae84abb6', name: "socialmedia" })), h("div", { key: '904b787df3f192593408d99857e213143cec6706', class: "footer-app" }, h("slot", { key: '2f4ab14e20737c6035c175e58982464fe6987724', name: "app" }))), h("div", { key: 'c85b261b4ae0cb1e27f424f460fa2838e1174fb0', class: "footer-businesssectors" }, h("slot", { key: 'c66baa3a1b689d881db68448b9d72d47acd11c7c', name: "businesssectors" })), h("div", { key: '4eebc88279f29eef028766c1fcb90effc1aaf1ca', class: "footer-meta" }, h("slot", { key: 'd689d7c14af01dc13c7f9f0fd170f3974150b9aa', name: "meta" })), h("div", { key: '36f87386755a4ae1186109b46609c6ad9c1d5041', class: "footer-copyright" }, h("slot", { key: 'c37231f795b1a5a407f83aeaf8a8b093713b8db1', name: "copyright" }))))));
+    }
+    static get is() { return "post-footer"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["./post-footer.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["post-footer.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The label to add to the footer (visually hidden)."
+                },
+                "attribute": "label",
+                "reflect": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isMobile": {}
+        };
+    }
+    static get elementRef() { return "host"; }
+}

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

@@ -0,0 +1 @@
+*,::before,::after{box-sizing:border-box}:host{z-index:1020;position:relative;--post-global-header-top: calc( (var(--post-global-header-height) - var(--post-global-header-reduced-height)) * -1 );--post-local-header-top: calc( -1 * (var(--post-local-header-height) - var(--post-main-navigation-height)) + var(--post-global-header-reduced-height) );--post-logo-height: calc(var(--post-global-header-height) - var(--post-header-scroll-top, 0px));--post-global-controls-top: calc(min((var(--post-header-scroll-top) / 4), 20px) * -1)}:host:has(.global-sub>*:not(.logo):focus-within),:host:has(.local-sub:focus-within){--post-global-header-top: 0;--post-local-header-top: var(--post-global-header-height);--post-logo-height: var(--post-global-header-height);--post-global-controls-top: 0}:host(:not(:has([slot=title]))) .local-header{padding-block-start:0}:host(:not(:has([slot=title]))) .local-sub{display:none}.d-flex{display:flex}.space-between{justify-content:space-between}.global-header{background-color:#fc0;display:flex;justify-content:space-between;position:sticky;padding-inline:4px;height:var(--post-global-header-height)}@media screen and (max-width: 1023.98px){.global-header{z-index:3;inset-block-start:0}}@media screen and (min-width: 1024px){.global-header{z-index:5;padding-inline-end:12px;inset-block-start:var(--post-global-header-top);transition:inset-block-start .2s ease-in-out}}.global-sub{display:flex;align-items:center;gap:24px}@media screen and (min-width: 1024px){.global-sub:not(:has(.logo)){position:relative;transition:inset-block-start .2s ease-in-out;inset-block-start:var(--post-global-controls-top)}}.align-end{align-items:flex-end}.logo{flex:1 0 auto;height:var(--post-global-header-height);width:var(--post-global-header-height);min-height:var(--post-global-header-reduced-height);align-self:flex-end}@media screen and (min-width: 1024px){.logo{transition:height .2 ease-in-out;height:var(--post-logo-height)}}::slotted(ul){margin-block:0 !important;list-style:none;display:flex;padding-inline-start:0;gap:1rem;flex-shrink:0 !important}.local-header{display:flex;position:sticky;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px;min-height:var(--post-local-header-min-height);background:#fff;transition:box-shadow .2s ease-in-out}.local-header::after{content:"";position:absolute;width:100%;height:1px;background-color:#e1e0dc;inset-block-end:-1px;z-index:1}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.local-header::after{background-color:Highlight}}@media screen and (min-width: 1024px){.local-header{z-index:3;inset-block-start:var(--post-local-header-top);padding-block-start:18px;box-shadow:var(--post-device-elevation-300);transition:box-shadow .2s ease-in-out,inset-block-start .2s ease-in-out}}@media screen and (max-width: 1023.98px){.local-header{z-index:2;inset-block-start:var(--post-global-header-height);padding-block:8px;flex-wrap:wrap;gap:12px}.local-header.local-header-mobile-extended::after{inset-block-end:0}.local-header:not(.local-header-mobile-extended){box-shadow:var(--post-device-elevation-300)}}.local-sub{margin-inline-end:8px}@media screen and (max-width: 1023.98px){.local-sub{margin-inline-end:4px}}::slotted(.list-inline){margin:0 !important;z-index:3 !important;position:relative !important}@media screen and (min-width: 1024px){.mobile-toggle{display:none}}.navigation{width:100%}@media screen and (min-width: 1024px){.navigation{inset-block-start:var(--post-global-header-reduced-height)}.navigation::before{display:block;content:"";position:absolute;inset:0;z-index:2;background:#fff}}@media screen and (max-width: 1023.98px){.navigation{position:sticky;z-index:1;inset-inline:0;inset-block-start:var(--post-header-height)}.mobile-menu{background-color:#fafafa}::slotted(post-mainnavigation),.navigation-footer{display:none;flex-direction:column;padding-block:16px 24px;padding-inline:32px}.navigation.extended ::slotted(post-mainnavigation),.navigation.extended .navigation-footer{display:flex}.navigation.extended>div{display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden;height:calc(min(var(--post-header-scroll-parent-height, 100dvh),100dvh) - var(--post-header-height))}.navigation.extended.megadropdown-open>div{overflow-y:hidden}.navigation.extended ::slotted(post-mainnavigation){flex-grow:1 !important}::slotted(post-mainnavigation){gap:32px}.navigation-footer{background-color:#f0efed;gap:24px}}@media screen and (max-width: 599.98px){::slotted(post-mainnavigation),.navigation-footer{padding-inline:16px}}

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

@@ -0,0 +1,320 @@
+import { h, Host, } from "@stencil/core";
+import { throttle } from "throttle-debounce";
+import { version } from "../../../../package";
+import { slideDown, slideUp } from "../../animations/slide";
+import { getFocusableChildren } from "../../utils/get-focusable-children";
+import { eventGuard } from "../../utils/event-gua";
+/**
+ * @slot post-logo - Should be used together with the `<post-logo>` component.
+ * @slot meta-navigation - Holds an `<ul>` with meta navigation links.
+ * @slot post-togglebutton - Holds the mobile menu toggler.
+ * @slot post-language-switch - Should be used with the `<post-language-switch>` component.
+ * @slot title - Holds the application title.
+ * @slot default - Custom controls or content, right aligned in the local header.
+ * @slot post-mainnavigation - Has a default slot because it's only meant to be used in the `<post-header>`.
+ */
+export class PostHeader {
+    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 mobileMenuExtended = propName === 'mobileMenuExtended' ? newValue : this.mobileMenuExtended;
+        if (this.device !== 'desktop' && mobileMenuExtended) {
+            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() {
+        this.throttledResize = throttle(50, () => this.handleResize());
+        this.megedropdownStateHandler = (event) => {
+            eventGuard(this.host, event, {
+                targetLocalName: 'post-megadropdown',
+                delegatorSelector: 'post-header',
+            }, () => {
+                this.megadropdownOpen = event.detail.isVisible;
+            });
+        };
+        this.device = null;
+        this.mobileMenuExtended = false;
+        this.megadropdownOpen = false;
+        this.handleScrollEvent = this.handleScrollEvent.bind(this);
+        this.updateScrollParentHeight = this.updateScrollParentHeight.bind(this);
+        this.updateLocalHeaderHeight = this.updateLocalHeaderHeight.bind(this);
+        this.megedropdownStateHandler = this.megedropdownStateHandler.bind(this);
+        this.keyboardHandler = this.keyboardHandler.bind(this);
+        this.handleLinkClick = this.handleLinkClick.bind(this);
+    }
+    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.megedropdownStateHandler);
+        this.host.addEventListener('click', this.handleLinkClick);
+        this.handleResize();
+        this.handleScrollParentResize();
+        this.lockBody(false, this.mobileMenuExtended, 'mobileMenuExtended');
+    }
+    componentWillRender() {
+        this.handleScrollEvent();
+    }
+    componentDidRender() {
+        this.getFocusableElements();
+        this.handleLocalHeaderResize();
+    }
+    // Clean up possible side effects when post-header is disconnected
+    disconnectedCallback() {
+        const scrollParent = this.scrollParent;
+        window.removeEventListener('resize', this.throttledResize);
+        window.removeEventListener('scroll', this.handleScrollEvent);
+        scrollParent.removeEventListener('scroll', this.handleScrollEvent);
+        document.removeEventListener('postToggleMegadropdown', this.megedropdownStateHandler);
+        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;
+        }
+        this.mobileMenuExtended = false;
+    }
+    /**
+     * Toggles the mobile navigation.
+     */
+    async toggleMobileMenu(force) {
+        if (this.device === 'desktop')
+            return;
+        this.mobileMenuAnimation = this.mobileMenuExtended
+            ? slideUp(this.mobileMenu)
+            : slideDown(this.mobileMenu);
+        // Update the state of the toggle button
+        const menuButton = this.host.querySelector('post-togglebutton');
+        menuButton.toggled = force ?? !this.mobileMenuExtended;
+        // Toggle menu visibility before it slides down and after it slides back up
+        if (this.mobileMenuExtended)
+            await this.mobileMenuAnimation.finished;
+        this.mobileMenuExtended = force ?? !this.mobileMenuExtended;
+        if (this.mobileMenuExtended === false) {
+            Array.from(this.host.querySelectorAll('post-megadropdown')).forEach(dropdown => {
+                dropdown.hide(false, true);
+            });
+        }
+    }
+    // Get all the focusable elements in the post-header mobile 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-mainnavigation > .back-button, 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];
+    }
+    keyboardHandler(e) {
+        if (e.key === 'Tab' && this.mobileMenuExtended) {
+            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();
+            }
+        }
+    }
+    handleScrollEvent() {
+        const scrollTop = this.scrollParent === document.body ? window.scrollY : this.scrollParent.scrollTop;
+        document.documentElement.style.setProperty('--post-header-scroll-top', `${scrollTop}px`);
+    }
+    updateLocalHeaderHeight() {
+        const localHeaderHeight = this.host.shadowRoot.querySelector('.local-header')?.clientHeight || 0;
+        document.documentElement.style.setProperty('--post-local-header-height', `${localHeaderHeight}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.mobileMenuExtended && (isLinkInMainNav || isLinkInMegadropdown)) {
+            this.toggleMobileMenu(false);
+        }
+        if (this.device === 'desktop' && isLinkInMegadropdown) {
+            const megadropdownLink = target.closest('post-megadropdown a');
+            if (megadropdownLink) {
+                target.closest('post-megadropdown').hide(true);
+            }
+        }
+    }
+    handleResize() {
+        const previousDevice = this.device;
+        let newDevice;
+        const width = window?.innerWidth;
+        if (width >= 1024) {
+            newDevice = 'desktop';
+        }
+        else if (width >= 600) {
+            newDevice = 'tablet';
+        }
+        else {
+            newDevice = 'mobile';
+        }
+        // Apply only on change for doing work only when necessary
+        if (newDevice !== previousDevice) {
+            this.device = newDevice;
+            this.postUpdateDevice.emit(this.device);
+            window.requestAnimationFrame(() => {
+                this.switchLanguageSwitchMode();
+            });
+        }
+    }
+    handleScrollParentResize() {
+        if (this.scrollParent) {
+            this.scrollParentResizeObserver = new ResizeObserver(this.updateScrollParentHeight);
+            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);
+        }
+    }
+    switchLanguageSwitchMode() {
+        const variant = this.device === 'desktop' ? 'menu' : 'list';
+        Array.from(this.host.querySelectorAll('post-language-switch')).forEach(languageSwitch => {
+            languageSwitch?.setAttribute('variant', variant);
+        });
+    }
+    renderNavigation() {
+        const navigationClasses = ['navigation'];
+        const mobileMenuScrollTop = this.mobileMenu?.scrollTop ?? 0;
+        if (this.mobileMenuExtended) {
+            navigationClasses.push('extended');
+        }
+        if (this.megadropdownOpen) {
+            navigationClasses.push('megadropdown-open');
+        }
+        return (h("div", { class: navigationClasses.join(' '), style: { '--post-header-navigation-current-inset': `${mobileMenuScrollTop}px` } }, h("div", { class: "mobile-menu", ref: el => (this.mobileMenu = el) }, h("slot", { name: "post-mainnavigation" }), (this.device === 'mobile' || this.device === 'tablet') && (h("div", { class: "navigation-footer" }, h("slot", { name: "meta-navigation" }), h("slot", { name: "post-language-switch" }))))));
+    }
+    render() {
+        return (h(Host, { key: '9705dc224bcf389c8836efbaf40d6d6617b2052f', "data-version": version }, h("div", { key: '41a1b10ff4193b0a31eecc673935aabb70c1d1b4', class: "global-header" }, h("div", { key: '7e3692fca4130755c009447fcc20585386f1c65d', class: "global-sub" }, h("div", { key: '5b4d7fb16fcbeee3f07a1a160751b5c23e9f9edb', class: "logo" }, h("slot", { key: '67048479266ba86f2a1b739751be7bfe97ce4544', name: "post-logo" }))), h("div", { key: '83642103fae714a7c9ac1962e1433fd72899cf87', class: "global-sub" }, this.device === 'desktop' && h("slot", { key: 'ff672718574b3690d9ac8c2f54cb50e2b7052533', name: "meta-navigation" }), h("slot", { key: '782d10f094831da10cd9e9695944eee9c8003a05', name: "global-controls" }), this.device === 'desktop' && h("slot", { key: '5c5a277e3a627f5a731e1342c6604b6e064f3b52', name: "post-language-switch" }), h("div", { key: 'b07c9f1994fd99b170192ed4f4092afb92a1dd3e', onClick: () => this.toggleMobileMenu(), class: "mobile-toggle" }, h("slot", { key: '1bbb5a704cf1841e4845ff9921cd6662ee2d7387', name: "post-togglebutton" })))), h("div", { key: 'da8ecfd78835ab7431408558ee938d5054349955', class: 'local-header ' + (this.mobileMenuExtended ? 'local-header-mobile-extended' : '') }, h("slot", { key: '23c35a54fdf177a9b58054154e09f406f27fe049', name: "title" }), h("div", { key: 'de4dfdec5bd43a22587aa8e93842c4e16c73f82b', class: "local-sub" }, h("slot", { key: '35b09a33f3c87e382afb809f0c2b8153dd909097', name: "local-controls" }), h("slot", { key: 'bdfa7a68815e8d259cd346ef890904b652a5a7f2' })), this.device === 'desktop' && this.renderNavigation()), this.device !== 'desktop' && this.renderNavigation()));
+    }
+    static get is() { return "post-header"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["./post-header.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["post-header.css"]
+        };
+    }
+    static get states() {
+        return {
+            "device": {},
+            "mobileMenuExtended": {},
+            "megadropdownOpen": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "postUpdateDevice",
+                "name": "postUpdateDevice",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "An event emitted when the device has changed"
+                },
+                "complexType": {
+                    "original": "DEVICE_SIZE",
+                    "resolved": "\"desktop\" | \"mobile\" | \"tablet\"",
+                    "references": {
+                        "DEVICE_SIZE": {
+                            "location": "local",
+                            "path": "/home/runner/work/design-system/design-system/packages/components/src/components/post-header/post-header.tsx",
+                            "id": "src/components/post-header/post-header.tsx::DEVICE_SIZE"
+                        }
+                    }
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "toggleMobileMenu": {
+                "complexType": {
+                    "signature": "(force?: boolean) => Promise<void>",
+                    "parameters": [{
+                            "name": "force",
+                            "type": "boolean",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "HTMLPostTogglebuttonElement": {
+                            "location": "global",
+                            "id": "global::HTMLPostTogglebuttonElement"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Toggles the mobile navigation.",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "host"; }
+    static get watchers() {
+        return [{
+                "propName": "device",
+                "methodName": "lockBody"
+            }, {
+                "propName": "mobileMenuExtended",
+                "methodName": "lockBody"
+            }];
+    }
+}

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

@@ -1,7 +1,7 @@
 import { Host, h } from "@stencil/core";
-import { checkNonEmpty, checkType, checkEmptyOrType, checkEmptyOrOneOf } from "../../utils/index";
+import { IS_BROWSER, checkNonEmpty, checkType, checkEmptyOrType, checkEmptyOrOneOf } from "../../utils/index";
 import { version } from "../../../../package";
-const CDN_URL = `https://unpkg.com/@swisspost/design-system-icons@${version}/public/post-icons`;
+const CDN_URL = `https://unpkg.com/@swisspost/design-system-icons@${version}/public/post-icons/`;
 const ANIMATION_NAMES = [
     'cylon',
     'cylon-vertical',
@@ -26,73 +26,76 @@ export class PostIcon {
     }
     validateAnimation(newValue = this.animation) {
         if (newValue !== undefined)
-            checkEmptyOrOneOf(newValue, ANIMATION_KEYS, `The post-icon "animation" prop requires one of the following values: ${ANIMATION_KEYS.join(', ')}.`);
+            checkEmptyOrOneOf(this, 'animation', ANIMATION_KEYS);
     }
-    validateBase(newValue = this.base) {
-        checkEmptyOrType(newValue, 'string', 'The post-icon "base" prop should be a string.');
+    validateBase() {
+        checkEmptyOrType(this, 'base', 'string');
     }
-    validateFlipH(newValue = this.flipH) {
-        checkEmptyOrType(newValue, 'boolean', 'The post-icon "flipH" prop should be a boolean.');
+    validateFlipH() {
+        checkEmptyOrType(this, 'flipH', 'boolean');
     }
-    validateFlipV(newValue = this.flipV) {
-        checkEmptyOrType(newValue, 'boolean', 'The post-icon "flipV" prop should be a boolean.');
+    validateFlipV() {
+        checkEmptyOrType(this, 'flipV', 'boolean');
     }
-    validateName(newValue = this.name) {
-        checkNonEmpty(newValue, 'The post-icon "name" prop is required!.');
-        checkType(newValue, 'string', 'The post-icon "name" prop should be a string.');
+    validateName() {
+        checkNonEmpty(this, 'name');
+        checkType(this, 'name', 'string');
     }
-    validateRotate(newValue = this.rotate) {
-        checkEmptyOrType(newValue, 'number', 'The post-icon "rotate" prop should be a number.');
+    validateRotate() {
+        checkEmptyOrType(this, 'rotate', 'number');
     }
-    validateScale(newValue = this.scale) {
-        checkEmptyOrType(newValue, 'number', 'The post-icon "scale" prop should be a number.');
+    validateScale() {
+        checkEmptyOrType(this, 'scale', 'number');
     }
     // Construct the icon url from different possible sources
     getUrl() {
-        var _a, _b, _c, _d, _e, _f, _g;
+        let url;
+        const file = `${this.name}.svg`;
         // the first definition object which defines a domain, will be used to set the domain of the file url
         // the first definition object which defines a slug, will be used to set the slug of the file url
-        const urlDefinitions = [
-            getUrlDefinition(this.base, 'both'),
-            getUrlDefinition((_a = document.head
-                .querySelector('meta[name="design-system-settings"][data-post-icon-base]')) === null || _a === void 0 ? void 0 : _a.getAttribute('data-post-icon-base'), 'relative'),
-            getUrlDefinition((_b = document.querySelector('base[href]')) === null || _b === void 0 ? void 0 : _b.getAttribute('href'), 'both'),
-        ];
-        // in case no other definition defines a domain, the current origin is used as a fallback
-        const origin = (_e = (_d = (_c = urlDefinitions.find(d => d.definesDomain)) === null || _c === void 0 ? void 0 : _c.url) === null || _d === void 0 ? void 0 : _d.origin) !== null && _e !== void 0 ? _e : window.location.origin;
-        // in case no other definition defines a slug, the cdn url is used as a fallback
-        const slug = (_g = (_f = urlDefinitions.find(d => d.definesSlug)) === null || _f === void 0 ? void 0 : _f.url) === null || _g === void 0 ? void 0 : _g.pathname;
-        const file = `${this.name}.svg`;
-        let url;
-        if (slug) {
-            url = new URL(`${origin}${slug}/${file}`).toString();
+        const urlDefinitions = [this.getUrlDefinition(this.base, 'both')];
+        if (IS_BROWSER) {
+            urlDefinitions.push(this.getUrlDefinition(document.head
+                .querySelector('meta[name="design-system-settings"][data-post-icon-base]')
+                ?.getAttribute('data-post-icon-base'), 'relative'));
+            urlDefinitions.push(this.getUrlDefinition(document.querySelector('base[href]')?.getAttribute('href'), 'both'));
+        }
+        // in case no definition defines a domain, a relative url is used to load the icon
+        const origin = urlDefinitions.find(d => d.definesDomain)?.url?.origin;
+        // in case no definition defines a slug either, the cdn url is used as a fallback
+        const slug = urlDefinitions.find(d => d.definesSlug)?.url?.pathname;
+        if (origin && slug) {
+            url = `${origin}${slug}${file}`;
+        }
+        else if (!origin && slug) {
+            url = `${slug}${file}`;
         }
         else {
-            url = new URL(`${CDN_URL}/${file}`).toString();
+            url = `${CDN_URL}${file}`;
         }
         return url;
-        function getUrlDefinition(url, allow) {
-            return {
-                url: getUrlObject(url),
-                definesDomain: allow !== 'relative' ? definesDomain(url) : false,
-                definesSlug: allow !== 'absolute' ? definesSlug(url) : false,
-            };
-            function getUrlObject(url) {
-                if (url) {
-                    return definesDomain(url) ? new URL(url) : new URL(url, window.location.origin);
-                }
-                else {
-                    return null;
-                }
-            }
-            function definesDomain(url) {
-                return url ? /^https?:\/\//.test(url) : false;
-            }
-            function definesSlug(url) {
-                const urlObject = getUrlObject(url);
-                return Boolean(/^\/.+/.test(urlObject === null || urlObject === void 0 ? void 0 : urlObject.pathname));
-            }
+    }
+    getUrlDefinition(url, allow) {
+        return {
+            url: this.getUrlObject(url),
+            definesDomain: allow !== 'relative' ? this.definesDomain(url) : false,
+            definesSlug: allow !== 'absolute' ? this.definesSlug(url) : false,
+        };
+    }
+    getUrlObject(url) {
+        if (url) {
+            url = url?.endsWith('/') ? url : `${url}/`;
+            return new URL(url, 'https://url.base');
         }
+        else {
+            return null;
+        }
+    }
+    definesDomain(url) {
+        return url ? /^https?:\/\//.test(url) : false;
+    }
+    definesSlug(url) {
+        return Boolean(/^\/.+/.test(this.getUrlObject(url)?.pathname));
     }
     getStyles() {
         const url = this.getUrl();
@@ -115,7 +118,7 @@ export class PostIcon {
         this.validateAnimation();
     }
     render() {
-        return (h(Host, { key: '01c59dae4b2d4277f9230534080924359d64542a', "data-version": version }, h("span", { key: '639ccb1dde3fef32e2678abaaf549ac830838158', style: this.getStyles() })));
+        return (h(Host, { key: 'b3c3efcc03f423a248e231b4b4c5d79c93ae25a6', "data-version": version }, h("span", { key: 'd73d4df11fcccb96d5346f3f8c3e18602bb8d484', style: this.getStyles() })));
     }
     static get is() { return "post-icon"; }
     static get encapsulation() { return "shadow"; }
@@ -223,7 +226,7 @@ export class PostIcon {
                     "text": "The name/id of the icon (e.g. 1000, 1001, ...)."
                 },
                 "attribute": "name",
-                "reflect": false
+                "reflect": true
             },
             "rotate": {
                 "type": "number",

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

@@ -0,0 +1 @@
+@keyframes popIn{from{transform:scale(0.9);opacity:0;transition-property:transform,opacity,overlay,display;transition-behavior:allow-discrete;transition-duration:var(--post-transition-duration, 0.35s);transition-timing-function:linear(0, 0.007, 0.029 2.2%, 0.118 4.7%, 0.625 14.4%, 0.826 19%, 0.902, 0.962, 1.008 26.1%, 1.041 28.7%, 1.064 32.1%, 1.07 36%, 1.061 40.5%, 1.015 53.4%, 0.999 61.6%, 0.995 71.2%, 1)}to{opacity:1;transform:scale(1)}}post-language-option{display:inline-block}post-language-option button{padding:0;overflow:visible;border:0;background:none;color:var(--post-scheme-color-interactive-button-secondary-enabled-fg);font:inherit;-webkit-user-select:none;user-select:none;appearance:button}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){post-language-option button{background-color:ButtonFace !important}post-language-option button:hover{background-color:Highlight !important}}post-language-option a{color:var(--post-scheme-color-surface-default-fg);text-decoration:none}post-language-option :is(a,button){cursor:pointer;display:flex;align-items:center;justify-content:center;width:100%;height:100%;border-radius:2px;text-transform:uppercase}post-language-option :is(a,button){outline-offset:var(--post-device-spacing-padding-2) !important;outline:var(--post-scheme-color-interactive-focus-stroke) none var(--post-device-border-width-focus) !important}post-language-option :is(a,button):is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-style:var(--post-core-border-style-solid) !important}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){post-language-option :is(a,button):is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){post-language-option :is(a,button):is(:focus-visible,:focus-within,.pretend-focus){outline-style:var(--post-core-border-style-solid) !important}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){post-language-option :is(a,button):is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}post-language-option:where([variant=list]) :is(a,button){padding-inline:0;width:40px;height:40px;border-radius:2px}post-language-option:where([variant=list]) :is(a,button):hover{color:#504f4b}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){post-language-option:where([variant=list]) :is(a,button){border:1px solid ButtonBorder;color:ButtonText}}post-language-option:where([variant=list])[active]:not([active=false]) :is(a,button){background-color:#050400 !important;color:#fff;pointer-events:none}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){post-language-option:where([variant=list])[active]:not([active=false]) :is(a,button){background-color:Highlight !important;color:HighlightText}}post-language-option:where([variant=menu]){min-width:72px}post-language-option:where([variant=menu])[active]:not([active=false]){display:none}post-language-option:where([variant=menu]) :is(a,button){padding-block:13px;padding-inline:16px;box-sizing:border-box;justify-content:flex-start;position:relative}post-language-option:where([variant=menu]) :is(a,button):hover{color:#fff;background-color:#504f4b}