@swisspost/design-system-components 9.0.0-next.2 → 9.0.0-next.21

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

@@ -0,0 +1 @@
+:host{display:flex !important;flex-wrap:wrap;gap:.5rem}.post-language-switch-dropdown-container{display:flex;flex-direction:column}.post-language-switch-dropdown-container>*{width:100%}.post-language-switch-trigger{cursor:pointer;text-transform:uppercase;padding:0;overflow:visible;border:0;background:none;color:var(--post-scheme-color-interactive-button-secondary-enabled-fg);font:inherit;-webkit-user-select:none;user-select:none;appearance:button;text-decoration:none;display:inline-flex;align-items:center;gap:6px;border-radius:24px;font-size:16px;padding:3px 10px}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.post-language-switch-trigger{background-color:ButtonFace !important}.post-language-switch-trigger:hover{background-color:Highlight !important}}.post-language-switch-trigger{outline-offset:var(--post-device-spacing-padding-2) !important;outline:var(--post-scheme-color-interactive-focus-stroke) none var(--post-device-border-width-focus) !important}.post-language-switch-trigger:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-style:var(--post-core-border-style-solid) !important}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.post-language-switch-trigger:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){.post-language-switch-trigger:is(:focus-visible,:focus-within,.pretend-focus){outline-style:var(--post-core-border-style-solid) !important}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.post-language-switch-trigger:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}.post-language-switch-trigger:not(:disabled):hover,.post-language-switch-trigger.pretend-hover{border-color:var(--post-scheme-color-interactive-button-tertiary-hover-stroke);background-color:var(--post-scheme-color-interactive-button-tertiary-hover-bg);color:var(--post-scheme-color-interactive-button-tertiary-hover-fg)}.post-language-switch-trigger post-icon{height:16px;width:16px}.post-language-switch-trigger[aria-expanded=true]{background-color:#050400;color:#fff}.post-language-switch-trigger[aria-expanded=true] post-icon{transform:rotate(180deg)}.post-language-switch-trigger[aria-expanded=true]:hover{background-color:#504f4b;color:#fff}

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

@@ -0,0 +1,164 @@
+import { Host, h } from "@stencil/core";
+import { checkEmptyOrOneOf, checkType } from "../../utils/index";
+import { version } from "../../../../package";
+import { SWITCH_VARIANTS } from "./switch-variants";
+import { nanoid } from "nanoid";
+export class PostLanguageSwitch {
+    constructor() {
+        this.caption = undefined;
+        this.description = undefined;
+        this.variant = 'list';
+        this.activeLang = undefined;
+    }
+    host;
+    validateCaption() {
+        checkType(this, 'caption', 'string');
+    }
+    validateDescription() {
+        checkType(this, 'description', 'string');
+    }
+    validateVariant() {
+        checkEmptyOrOneOf(this, 'variant', SWITCH_VARIANTS);
+    }
+    connectedCallback() {
+        this.updateChildrenVariant();
+        // Get the active language based on children's active state
+        const activeLanguageOption = this.host.querySelector('post-language-option[active]:not([active="false"])');
+        if (activeLanguageOption)
+            this.activeLang = activeLanguageOption.getAttribute('code');
+    }
+    // Update post-language-option variant to have the correct style
+    updateChildrenVariant() {
+        this.host.querySelectorAll('post-language-option').forEach(el => {
+            el.setAttribute('variant', this.variant);
+        });
+    }
+    componentWillUpdate() {
+        this.updateChildrenVariant();
+    }
+    componentDidLoad() {
+        this.validateCaption();
+        this.validateDescription();
+        this.validateVariant();
+        // Detects a change in the active language
+        this.host.addEventListener('postChange', (el) => {
+            this.activeLang = el.detail;
+            // Update the active state in the children post-language-option components
+            this.host.querySelectorAll('post-language-option').forEach(lang => {
+                if (lang.code && lang.code === this.activeLang) {
+                    lang.setAttribute('active', 'true');
+                }
+                else {
+                    lang.setAttribute('active', 'false');
+                }
+            });
+            // Hides the dropdown when an option has been clicked
+            if (this.variant === 'menu') {
+                const menu = this.host.shadowRoot.querySelector('post-menu');
+                menu.toggle(menu);
+            }
+        });
+    }
+    menuId = `p${nanoid(11)}`;
+    renderList() {
+        return (h(Host, { "data-version": version, role: "list", "aria-label": this.caption }, h("div", { class: "post-language-switch-list", role: "group", "aria-label": this.description }, h("slot", null))));
+    }
+    renderDropdown() {
+        return (h(Host, { "data-version": version }, h("post-menu-trigger", { for: this.menuId }, h("button", { class: "post-language-switch-trigger", "aria-label": this.description }, this.activeLang, h("post-icon", { "aria-hidden": "true", name: "chevrondown" }))), h("post-menu", { id: this.menuId, class: "post-language-switch-dropdown-container", "aria-label": this.caption }, h("slot", null))));
+    }
+    render() {
+        return this.variant === 'list' ? this.renderList() : this.renderDropdown();
+    }
+    static get is() { return "post-language-switch"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["post-language-switch.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["post-language-switch.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "caption": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "A title for the list of language options"
+                },
+                "attribute": "caption",
+                "reflect": false
+            },
+            "description": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "A descriptive text for the list of language options"
+                },
+                "attribute": "description",
+                "reflect": false
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "SwitchVariant",
+                    "resolved": "\"list\" | \"menu\"",
+                    "references": {
+                        "SwitchVariant": {
+                            "location": "import",
+                            "path": "./switch-variants",
+                            "id": "src/components/post-language-switch/switch-variants.ts::SwitchVariant"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the component is rendered as a list or a menu"
+                },
+                "attribute": "variant",
+                "reflect": false,
+                "defaultValue": "'list'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "activeLang": {}
+        };
+    }
+    static get elementRef() { return "host"; }
+    static get watchers() {
+        return [{
+                "propName": "caption",
+                "methodName": "validateCaption"
+            }, {
+                "propName": "description",
+                "methodName": "validateDescription"
+            }, {
+                "propName": "variant",
+                "methodName": "validateVariant"
+            }];
+    }
+}

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

@@ -0,0 +1 @@
+export const SWITCH_VARIANTS = ['list', 'menu'];

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

@@ -0,0 +1 @@
+post-linkarea{display:contents;cursor:pointer}

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

@@ -0,0 +1,30 @@
+import { h, Host } from "@stencil/core";
+import { version } from "../../../../package";
+const INTERACTIVE_ELEMENTS = ['a'].join(',');
+const INTERACTIVE_ELEMENTS_SELECTOR = `:where(${INTERACTIVE_ELEMENTS})`;
+export class PostLinkarea {
+    host;
+    dispatchClick({ ctrlKey, shiftKey, altKey, metaKey }) {
+        const interactiveElement = this.host.querySelector(`[data-link]${INTERACTIVE_ELEMENTS_SELECTOR}`) ??
+            this.host.querySelector(INTERACTIVE_ELEMENTS_SELECTOR);
+        if (!interactiveElement) {
+            throw new Error(`The \`post-linkarea\` component must contain an interactive element. Possible elements are: ${INTERACTIVE_ELEMENTS}.`);
+        }
+        interactiveElement.dispatchEvent(new MouseEvent('click', { ctrlKey, shiftKey, altKey, metaKey }));
+    }
+    render() {
+        return (h(Host, { key: 'c27bb1e548eecbef9b981ebadea8a9a30a06a89c', "data-version": version, onClick: e => this.dispatchClick(e), tabindex: "0" }, h("slot", { key: '9e5bd5c6032ed87bc2c6e9eed96dc79f19295325' })));
+    }
+    static get is() { return "post-linkarea"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["post-linkarea.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["post-linkarea.css"]
+        };
+    }
+    static get elementRef() { return "host"; }
+}

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

@@ -0,0 +1,3 @@
+/*!
+ * Copyright 2021 by Swiss Post, Information Technology
+ */post-list{display:flex;flex-direction:column;gap:var(--post-list-title-gap, 0)}post-list>[role=list]{display:flex;flex-direction:column;gap:var(--post-list-item-gap, 0)}post-list:where([horizontal]:not([horizontal=false])){flex-direction:row;align-items:center}post-list:where([horizontal]:not([horizontal=false]))>[role=list]{flex-direction:row;align-items:center}post-list>.list-title.visually-hidden{width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border:0 !important}post-list>.list-title.visually-hidden:not(caption){position:absolute !important}

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

@@ -0,0 +1,90 @@
+import { Host, h } from "@stencil/core";
+import { version } from "../../../../package";
+import { nanoid } from "nanoid";
+/**
+ * @slot default - Slot for placing the list title.
+ * @slot post-list-item - Slot for placing post-list-item components.
+ */
+export class PostList {
+    constructor() {
+        this.titleId = undefined;
+        this.titleHidden = false;
+        this.horizontal = false;
+    }
+    host;
+    titleEl;
+    componentWillLoad() {
+        /**
+         * Get the id set on the host element or use a random id by default
+         */
+        this.titleId = `title-${this.host.id || nanoid(6)}`;
+    }
+    componentDidLoad() {
+        this.checkTitle();
+    }
+    checkTitle() {
+        if (!this.titleEl.textContent.trim()) {
+            console.error('Please provide a title to the list component. Title is mandatory for accessibility purposes.');
+        }
+    }
+    render() {
+        return (h(Host, { key: '085a63d7b4cc85461f2c8fd0c7b9d9f48f42055a', "data-version": version }, h("div", { key: 'd13a66ba16b71eff1a86666b04ca2f41957962e1', ref: el => (this.titleEl = el), id: this.titleId, class: `list-title${this.titleHidden ? ' visually-hidden' : ''}` }, h("slot", { key: '0270bcd71c8a3a34390b98b6374a1a2f06e0d606' })), h("div", { key: 'de04b08bf94900435c53f972c8fcd0798c8a5faf', role: "list", "aria-labelledby": this.titleId }, h("slot", { key: 'f7aa9976b3283ee4da3d32d84b36e2549c29e80f', name: "post-list-item" }))));
+    }
+    static get is() { return "post-list"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["post-list.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["post-list.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "titleHidden": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, the list title will be hidden. Otherwise, it will be displayed.`"
+                },
+                "attribute": "title-hidden",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "horizontal": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The list can become horizontal by setting `horizontal=\"true\"` or just `horizontal`"
+                },
+                "attribute": "horizontal",
+                "reflect": true,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "titleId": {}
+        };
+    }
+    static get elementRef() { return "host"; }
+}

package/dist/collection/components/post-list-item/post-list-item.css

@@ -0,0 +1 @@
+:host{display:flex}

package/dist/collection/components/post-list-item/post-list-item.js

@@ -0,0 +1,26 @@
+import { Host, h } from "@stencil/core";
+/**
+ * @slot default- Slot for placing the content of the list item.
+ */
+export class PostListItem {
+    host;
+    connectedCallback() {
+        this.host.setAttribute('slot', 'post-list-item');
+    }
+    render() {
+        return (h(Host, { key: '8e209e77859bd05d62cae41aec9dec6fb2e820cb', role: "listitem", slot: "post-list-item" }, h("slot", { key: 'ce79a335e80401465b74208957e22983d6df4ce0' })));
+    }
+    static get is() { return "post-list-item"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["post-list-item.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["post-list-item.css"]
+        };
+    }
+    static get elementRef() { return "host"; }
+}

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

@@ -1 +1 @@
-:host,.logo{display:inline-block}:host,:host .logo>svg,.logo,.logo .logo>svg{height:100%}.description{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}
+:host,.logo{display:inline-block}:host,:host .logo>svg,.logo,.logo .logo>svg{height:100%}.description{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}.logo-link{outline-offset:var(--post-device-spacing-padding-2) !important;outline:var(--post-scheme-color-interactive-focus-stroke) none var(--post-device-border-width-focus) !important}.logo-link:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-style:var(--post-core-border-style-solid) !important}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.logo-link:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){.logo-link:is(:focus-visible,:focus-within,.pretend-focus){outline-style:var(--post-core-border-style-solid) !important}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.logo-link:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}.logo-link :focus,:focus-visible{border-radius:2px}

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

@@ -8,10 +8,11 @@ export class PostLogo {
     constructor() {
         this.url = undefined;
     }
+    host;
     validateUrl() {
-        checkEmptyOrUrl(this.url, 'The "url" property of the post-logo is invalid');
+        checkEmptyOrUrl(this, 'url');
     }
-    connectedCallback() {
+    componentDidLoad() {
         this.validateUrl();
         this.checkDescription();
     }
@@ -23,7 +24,7 @@ export class PostLogo {
     render() {
         const logoLink = this.url && (typeof this.url === 'string' ? this.url : this.url.href);
         const LogoTag = logoLink ? 'a' : 'span';
-        return (h(Host, { key: 'c1d583f828a1f35ed482f1d1894354a503d8010e', "data-version": version }, h(LogoTag, Object.assign({ key: '61886ad3e388a6286e86b49a8ab150774e9e3d19', class: "logo" }, (logoLink ? { href: logoLink } : {})), h("span", { key: '88c01bbd0e146157ff2897300199717e8da1b2f0', class: "description" }, h("slot", { key: 'dccdd781dd6b6c78d9c8775a3f91765c6c4a8449', onSlotchange: () => this.checkDescription() })), h("svg", { key: '3f66dab4ca898d245759249828508adfa0ac92ea', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 72 72", "aria-hidden": "true" }, h("g", { key: 'bb5bb34aa56362a8805f6f97562825448d4ffac7', id: "Logo" }, h("rect", { key: '8bbee198611c558653cac3b31683beb9bc17c196', fill: "#ffcc00", x: "0", y: "0", width: "72", height: "72" }), h("polygon", { key: '2ca797bd9ad0861b81b953e04626abb2d5cb7323', fill: "#ff0000", points: "34,32.3 34,19 19.7,19 19.7,29.1 10,29.1 10,42.9 19.7,42.9 19.7,53 34,53 34,39.7 30.6,39.7 30.6,49.8 23.1,49.8 23.1,39.7 13.4,39.7 13.4,32.3 23.1,32.3 23.1,22.2 30.6,22.2 30.6,32.3" }), h("path", { key: 'eefa701f5f04ba0f0c04eb51748e62209e33ff06', d: "M53.56234,31.10526c0,2.41272-1.99154,4.29475-4.51723,4.29475H45.2v-8.3h3.84511C51.66802,27.1,53.56234,28.78889,53.56234,31.10526z M50.69666,19H36v34h9.2V42.9h5.49666c6.75131,0,11.9971-5.15137,11.9971-11.8057C62.69376,24.39136,57.35099,19,50.69666,19z" }))))));
+        return (h(Host, { key: '128604612a51624b537f30b0b9c91d9ea6b950be', "data-version": version }, h(LogoTag, { key: '885f057200f9da839fd38cb7070f319f6c89793e', class: `logo ${logoLink ? 'logo-link' : ''}`, ...(logoLink ? { href: logoLink } : {}) }, h("span", { key: 'bee12585bf74fe5c2ce8a644c540c86626295526', class: "description" }, h("slot", { key: 'e516075c5138cef9378d3dc7137eb6c28d02b279', onSlotchange: () => this.checkDescription() })), h("svg", { key: 'c0056463b93f7c0e5da07db4656d9c8dc9161c32', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 72 72", "aria-hidden": "true" }, h("g", { key: '1dfc33886c9b1fb6cd3b08f448a89c11a6080598', id: "Logo" }, h("rect", { key: 'dd84426568259714379a92a3f56349c6b3220a61', fill: "#ffcc00", x: "0", y: "0", width: "72", height: "72" }), h("polygon", { key: '56fa6445c184a41355a968365098b75387a16f48', fill: "#ff0000", points: "34,32.3 34,19 19.7,19 19.7,29.1 10,29.1 10,42.9 19.7,42.9 19.7,53 34,53 34,39.7 30.6,39.7 30.6,49.8 23.1,49.8 23.1,39.7 13.4,39.7 13.4,32.3 23.1,32.3 23.1,22.2 30.6,22.2 30.6,32.3" }), h("path", { key: 'f2abb1db77a2e795f477662453d7296a28882756', d: "M53.56234,31.10526c0,2.41272-1.99154,4.29475-4.51723,4.29475H45.2v-8.3h3.84511C51.66802,27.1,53.56234,28.78889,53.56234,31.10526z M50.69666,19H36v34h9.2V42.9h5.49666c6.75131,0,11.9971-5.15137,11.9971-11.8057C62.69376,24.39136,57.35099,19,50.69666,19z" }))))));
     }
     static get is() { return "post-logo"; }
     static get encapsulation() { return "shadow"; }

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

@@ -0,0 +1 @@
+post-mainnavigation post-list-item>a{text-decoration:none;border-radius:0}post-mainnavigation post-list-item post-megadropdown-trigger 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;text-align:start}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){post-mainnavigation post-list-item post-megadropdown-trigger button{background-color:ButtonFace !important}post-mainnavigation post-list-item post-megadropdown-trigger button:hover{background-color:Highlight !important}}post-mainnavigation post-list-item post-megadropdown-trigger 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-mainnavigation post-list-item post-megadropdown-trigger 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-mainnavigation post-list-item post-megadropdown-trigger button:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){post-mainnavigation post-list-item post-megadropdown-trigger 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-mainnavigation post-list-item post-megadropdown-trigger button:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}post-mainnavigation post-list-item>a,post-mainnavigation post-list-item post-megadropdown-trigger button{flex:0 0 fit-content;white-space:nowrap;display:flex;align-items:center;justify-content:space-between}post-mainnavigation post-list-item>a:hover,post-mainnavigation post-list-item post-megadropdown-trigger button:hover{color:var(--post-scheme-color-interactive-primary-hover-fg1)}post-mainnavigation post-list-item>a:focus-visible,post-mainnavigation post-list-item post-megadropdown-trigger button:focus-visible{border-radius:4px}post-mainnavigation .back-button post-icon{transform:rotate(180deg)}@media screen and (max-width: 1023.98px){post-mainnavigation .back-button{font-size:16px}}@media screen and (max-width: 599.98px){post-mainnavigation .back-button{font-size:14px}}post-mainnavigation>button::after,post-mainnavigation post-megadropdown-trigger button::after{content:"";mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m23.6 13.2-7.5 7.6-7.6-7.6.9-.9 6.6 6.6 6.6-6.6z'/%3E%3C/svg%3E");background-color:currentColor;color:currentColor;forced-color-adjust:preserve-parent-color;height:24px;width:24px}@media screen and (min-width: 1024px){post-mainnavigation{display:block}post-mainnavigation nav{max-width:100vw;background:#fff;max-height:var(--main-navigation-height);user-select:none;transition:margin 250ms cubic-bezier(0.4, 0, 0.2, 1)}post-mainnavigation .left-scroll-button,post-mainnavigation .right-scroll-button{z-index:4;position:absolute;inset-block-end:0;overflow:hidden}post-mainnavigation .left-scroll-button button,post-mainnavigation .right-scroll-button 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;background:#fff;padding:16px;box-shadow:var(--post-device-elevation-500);line-height:100%;height:var(--main-navigation-height)}}@media screen and (min-width: 1024px)and (forced-colors: active),screen and (min-width: 1024px)and (-ms-high-contrast: active),screen and (min-width: 1024px)and (-ms-high-contrast: white-on-black){post-mainnavigation .left-scroll-button button,post-mainnavigation .right-scroll-button button{background-color:ButtonFace !important}post-mainnavigation .left-scroll-button button:hover,post-mainnavigation .right-scroll-button button:hover{background-color:Highlight !important}}@media screen and (min-width: 1024px){post-mainnavigation .left-scroll-button button post-icon,post-mainnavigation .right-scroll-button button post-icon{font-size:1rem}}@media screen and (min-width: 1024px){post-mainnavigation .left-scroll-button{inset-inline-start:0;padding-inline-end:2rem}}@media screen and (min-width: 1024px){post-mainnavigation .right-scroll-button{inset-inline-end:0;padding-inline-start:2rem}}@media screen and (min-width: 1024px){post-mainnavigation post-list>[role=list]{flex-direction:row;max-width:100vw}}@media screen and (min-width: 1024px){post-mainnavigation post-list-item>a,post-mainnavigation post-list-item>button,post-mainnavigation post-list-item post-megadropdown-trigger button{position:sticky;padding-inline:12px;height:var(--main-navigation-height);gap:4px;font-size:16px;z-index:4}post-mainnavigation post-list-item>a .nav-el-active,post-mainnavigation post-list-item>button .nav-el-active,post-mainnavigation post-list-item post-megadropdown-trigger button .nav-el-active{font-weight:700;text-align:center;opacity:0}post-mainnavigation post-list-item>a .nav-el-inactive,post-mainnavigation post-list-item>button .nav-el-inactive,post-mainnavigation post-list-item post-megadropdown-trigger button .nav-el-inactive{position:absolute;opacity:1;text-align:center;width:100%;left:0}post-mainnavigation post-list-item>a.selected,post-mainnavigation post-list-item>a[aria-expanded=true],post-mainnavigation post-list-item>button.selected,post-mainnavigation post-list-item>button[aria-expanded=true],post-mainnavigation post-list-item post-megadropdown-trigger button.selected,post-mainnavigation post-list-item post-megadropdown-trigger button[aria-expanded=true]{background-color:#050400;color:#fff;font-weight:700}post-mainnavigation post-list-item>a.selected .nav-el-active,post-mainnavigation post-list-item>a[aria-expanded=true] .nav-el-active,post-mainnavigation post-list-item>button.selected .nav-el-active,post-mainnavigation post-list-item>button[aria-expanded=true] .nav-el-active,post-mainnavigation post-list-item post-megadropdown-trigger button.selected .nav-el-active,post-mainnavigation post-list-item post-megadropdown-trigger button[aria-expanded=true] .nav-el-active{opacity:1}post-mainnavigation post-list-item>a.selected .nav-el-inactive,post-mainnavigation post-list-item>a[aria-expanded=true] .nav-el-inactive,post-mainnavigation post-list-item>button.selected .nav-el-inactive,post-mainnavigation post-list-item>button[aria-expanded=true] .nav-el-inactive,post-mainnavigation post-list-item post-megadropdown-trigger button.selected .nav-el-inactive,post-mainnavigation post-list-item post-megadropdown-trigger button[aria-expanded=true] .nav-el-inactive{opacity:0}post-mainnavigation post-list-item>a:hover,post-mainnavigation post-list-item>button:hover,post-mainnavigation post-list-item post-megadropdown-trigger button:hover{background-color:#504f4b;color:#fff}}@media screen and (min-width: 1024px)and (max-width: 599.98px){post-mainnavigation post-list-item>a,post-mainnavigation post-list-item>button,post-mainnavigation post-list-item post-megadropdown-trigger button{font-size:14px}}@media screen and (min-width: 1024px){post-mainnavigation post-list-item>button,post-mainnavigation post-list-item post-megadropdown-trigger button{padding-inline-end:12px;transition:border-block-end-color 250ms cubic-bezier(0.4, 0, 0.2, 1)}post-mainnavigation post-list-item>button .nav-el-inactive,post-mainnavigation post-list-item post-megadropdown-trigger button .nav-el-inactive{width:calc(100% - 28px)}post-mainnavigation post-list-item>button::after,post-mainnavigation post-list-item post-megadropdown-trigger button::after{transition:transform 250ms cubic-bezier(0.4, 0, 0.2, 1)}post-mainnavigation post-list-item>button.selected::after,post-mainnavigation post-list-item>button[aria-expanded=true]::after,post-mainnavigation post-list-item post-megadropdown-trigger button.selected::after,post-mainnavigation post-list-item post-megadropdown-trigger button[aria-expanded=true]::after{transform:rotate(180deg)}}@media screen and (min-width: 1024px){post-mainnavigation post-megadropdown button:not(.btn-icon-close),post-mainnavigation post-megadropdown a{width:100%;min-width:100%;height:48px;padding-inline:8px 12px;gap:16px;font-weight:400;position:relative}post-mainnavigation post-megadropdown button:not(.btn-icon-close)::before,post-mainnavigation post-megadropdown a::before{content:"";background-color:#050400;bottom:0;width:100%;height:1px;position:absolute;left:0}post-mainnavigation post-megadropdown button:not(.btn-icon-close).selected,post-mainnavigation post-megadropdown button:not(.btn-icon-close)[aria-expanded=true],post-mainnavigation post-megadropdown a.selected,post-mainnavigation post-megadropdown a[aria-expanded=true]{background-color:#050400;color:#fff}post-mainnavigation post-megadropdown button:not(.btn-icon-close):hover,post-mainnavigation post-megadropdown a:hover{background-color:#504f4b;color:#fff}post-mainnavigation post-megadropdown button:not(.btn-icon-close):hover::before,post-mainnavigation post-megadropdown a:hover::before{background-color:#504f4b}}@media screen and (min-width: 1024px){post-mainnavigation [slot=back-button]{display:none}}@media screen and (max-width: 1023.98px){post-mainnavigation nav{transform:none !important}post-mainnavigation .left-scroll-button,post-mainnavigation .right-scroll-button{display:none}post-mainnavigation post-list-item>a,post-mainnavigation post-list-item>button,post-mainnavigation post-list-item post-megadropdown-trigger button{width:100%;min-width:100%;height:48px;padding-inline:8px 12px;gap:16px;font-weight:400;position:relative}post-mainnavigation post-list-item>a::before,post-mainnavigation post-list-item>button::before,post-mainnavigation post-list-item post-megadropdown-trigger button::before{content:"";background-color:#050400;bottom:0;width:100%;height:1px;position:absolute;left:0}post-mainnavigation post-list-item>a.selected,post-mainnavigation post-list-item>a[aria-expanded=true],post-mainnavigation post-list-item>button.selected,post-mainnavigation post-list-item>button[aria-expanded=true],post-mainnavigation post-list-item post-megadropdown-trigger button.selected,post-mainnavigation post-list-item post-megadropdown-trigger button[aria-expanded=true]{background-color:#050400;color:#fff}post-mainnavigation post-list-item>a:hover,post-mainnavigation post-list-item>button:hover,post-mainnavigation post-list-item post-megadropdown-trigger button:hover{background-color:#504f4b;color:#fff}post-mainnavigation post-list-item>a:hover::before,post-mainnavigation post-list-item>button:hover::before,post-mainnavigation post-list-item post-megadropdown-trigger button:hover::before{background-color:#504f4b}post-mainnavigation post-list-item>a .nav-el-inactive,post-mainnavigation post-list-item>button .nav-el-inactive,post-mainnavigation post-list-item post-megadropdown-trigger button .nav-el-inactive{display:none}post-mainnavigation>button::after,post-mainnavigation post-megadropdown-trigger button::after{transform:rotate(-90deg)}}post-mainnavigation .back-button .btn{padding-inline:0}

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

@@ -0,0 +1,255 @@
+import { Host, h } from "@stencil/core";
+import { throttle } from "throttle-debounce";
+const SCROLL_REPEAT_INTERVAL = 100; // Interval for repeated scrolling when holding down scroll button
+const NAVBAR_DISABLE_DURATION = 400; // Duration to temporarily disable navbar interactions during scrolling
+const NAVIGATION_LIST_SELECTOR = 'post-list > [role="list"]:not(post-megadropdown *)';
+const NAVIGATION_ITEM_SELECTOR = 'post-list-item :is(a, button):not(post-megadropdown *)';
+export class PostMainnavigation {
+    constructor() {
+        this.canScrollLeft = false;
+        this.canScrollRight = false;
+        this.translationAmount = 0;
+    }
+    header;
+    navbar;
+    rightScrollButton;
+    leftScrollButton;
+    scrollRepeatInterval;
+    navbarDisableTimer;
+    mutationObserver = new MutationObserver(async (mutations) => {
+        // Wait for all elements to be hydrated
+        await Promise.all(mutations
+            .flatMap((mutation) => Array.from(mutation.addedNodes))
+            .map((item) => item.componentOnReady ? item.componentOnReady() : Promise.resolve(item)));
+        // Recalculate scrollability after DOM changes
+        this.checkScrollability();
+    });
+    host;
+    /**
+     * Update navbar translation when 'translateAmount' changes and recalculate scrollability
+     */
+    onTranslateAmountChanges(value) {
+        this.navbar.style.marginInlineStart = `-${value}px`;
+        this.checkScrollability();
+    }
+    /**
+     * Retrieves a reference to the closest 'post-header' element when the main navigation is added to the DOM.
+     * This ensures that we can interact with the header for mobile menu toggling.
+     */
+    connectedCallback() {
+        this.header = this.host.closest('post-header');
+    }
+    /**
+     * Cleans up references and disconnects the MutationObserver when the main navigation is removed from the DOM.
+     */
+    disconnectedCallback() {
+        this.header = null;
+        this.mutationObserver.disconnect();
+    }
+    componentDidLoad() {
+        setTimeout(() => this.checkScrollability()); // Initial check to determine if scrolling is needed
+        this.mutationObserver.observe(this.navigationList, { subtree: true, childList: true }); // Recheck scrollability when navigation list changes
+        this.fixLayoutShift();
+        window.addEventListener('resize', // Recheck scrollability on window resize
+        throttle(100, () => this.checkScrollability()));
+        // Handle focus changes and adjust scroll as needed
+        this.navbar.addEventListener('focusin', e => this.adjustTranslation(e));
+    }
+    // Hack that duplicates navigation elements to fix the layout shift on active elements
+    fixLayoutShift() {
+        // Select first level of main navigation elements, both the links and the megadropdown trigger buttons
+        const children = this.host.querySelectorAll('nav > post-list > div > post-list-item > a, nav > post-list > div > post-list-item > post-megadropdown-trigger > button');
+        // Update HTML so that the content is duplicated
+        children.forEach(child => (child.innerHTML = `<span class="nav-el-active">${child.innerHTML}</span><span class="nav-el-inactive"aria-hidden="true">${child.innerHTML}</span>`));
+    }
+    handleBackButtonClick() {
+        if (this.header)
+            this.header.toggleMobileMenu();
+    }
+    /**
+     * Moves focus on the navbar and adjusts scrolling to bring focused element into view.
+     */
+    adjustTranslation(e) {
+        const focusedElement = e.target;
+        if (!this.canScroll || !focusedElement.matches(NAVIGATION_ITEM_SELECTOR))
+            return;
+        // We need to move the element into the view before it is focused to avoid browser default behavior
+        e.preventDefault();
+        this.withoutTransition(() => {
+            // Try scrolling in both directions, only the necessary translation will actually occur
+            this.translateRightTo(focusedElement);
+            this.translateLeftTo(focusedElement);
+            focusedElement.focus();
+        });
+    }
+    /**
+     * Checks if scrolling is possible in either direction (left or right) and updates the state accordingly.
+     */
+    checkScrollability() {
+        const { scrollWidth, clientWidth } = this.navbar;
+        const couldScroll = this.canScroll;
+        if (scrollWidth === clientWidth) {
+            // If scroll width equals client width, scrolling is disabled in both directions
+            this.canScrollLeft = this.canScrollRight = false;
+        }
+        else {
+            this.canScrollLeft = this.translationAmount > 0; // Scrolling left is possible if not at the start
+            this.canScrollRight = clientWidth + this.translationAmount < scrollWidth; // Scrolling right is possible if not at the end
+        }
+        if (couldScroll && !this.canScroll) {
+            this.withoutTransition(() => (this.translationAmount = 0));
+        }
+    }
+    /**
+     * Returns whether scrolling is enabled in either the left or right direction.
+     */
+    get canScroll() {
+        return this.canScrollLeft || this.canScrollRight;
+    }
+    /**
+     * Handles the scrolling behavior when a user clicks on the left or right scroll buttons.
+     */
+    handleScrollButtonClick(direction) {
+        if (!this.canScroll)
+            return;
+        // Disable interaction with the navbar during scrolling
+        this.disableNavbar();
+        // Perform the initial scroll action
+        this.scroll(direction);
+        // Repeat the scrolling action while the button is held down
+        this.scrollRepeatInterval = setInterval(() => {
+            this.scroll(direction);
+        }, SCROLL_REPEAT_INTERVAL);
+    }
+    /**
+     * Stops the repeated scrolling when the mouse button is released.
+     */
+    stopScrolling() {
+        if (this.scrollRepeatInterval)
+            clearInterval(this.scrollRepeatInterval);
+    }
+    scroll(direction) {
+        const navigationItems = Array.from(this.navigationItems);
+        if (direction === 'left')
+            navigationItems.reverse();
+        for (const item of navigationItems) {
+            const couldScroll = direction === 'left' ? this.translateLeftTo(item, true) : this.translateRightTo(item, true);
+            if (couldScroll)
+                break;
+        }
+    }
+    translateRightTo(navigationItem, skipSmallTranslation = false) {
+        const listItem = navigationItem.closest('post-list-item');
+        // Calculate the right edge position of the list item relative to the left of the screen
+        const rightEdgePosition = listItem.offsetLeft + listItem.offsetWidth;
+        // Calculate the last visible position on the screen, right before the right scroll button
+        const lastVisiblePosition = this.host.clientWidth - this.rightScrollButton.clientWidth;
+        // If the item is already fully visible, no translation is needed
+        if (rightEdgePosition < lastVisiblePosition)
+            return false;
+        const translationIncrease = rightEdgePosition - lastVisiblePosition + 1; // + 1 because offset values are rounded
+        // If the required scroll distance is too small (less than half the width of the item), avoid unnecessary scroll
+        if (skipSmallTranslation && translationIncrease < listItem.clientWidth / 2)
+            return false;
+        // Calculate the maximum translation amount to prevent scrolling past the end of the content
+        const maximumTranslation = this.navbar.scrollWidth - this.host.clientWidth;
+        // Adjust the translation amount, ensuring it doesn't exceed the maximum scrollable area
+        const { marginRight } = getComputedStyle(this.navigationList);
+        this.translationAmount =
+            Math.min(this.translationAmount + translationIncrease, maximumTranslation) +
+                parseInt(marginRight);
+        return true;
+    }
+    translateLeftTo(navigationItem, skipSmallTranslation = false) {
+        const listItem = navigationItem.closest('post-list-item');
+        // Get the left edge position of the list item relative to the left of the screen
+        const leftEdgePosition = listItem.offsetLeft;
+        // Calculate the first visible position on the screen to the left, right after the left scroll button
+        const firstVisiblePosition = this.leftScrollButton.clientWidth;
+        // If the item is already fully visible, no translation is needed
+        if (leftEdgePosition > firstVisiblePosition)
+            return false;
+        const translationDecrease = firstVisiblePosition - leftEdgePosition + 1; // + 1 because offset values are rounded
+        // If the required scroll distance is too small (less than half the width of the item), don't perform the scroll
+        if (skipSmallTranslation && translationDecrease < listItem.clientWidth / 2)
+            return false;
+        // Calculate the minimum allowed translation amount (no negative scrolling allowed)
+        const minimumTranslation = 0;
+        // Adjust the translation amount, ensuring it doesn't go below the minimum scrollable area
+        const { marginLeft } = getComputedStyle(this.navigationList);
+        this.translationAmount = Math.max(this.translationAmount - translationDecrease - parseInt(marginLeft), minimumTranslation);
+        return true;
+    }
+    /**
+     * Returns the navigation list container element
+     */
+    get navigationList() {
+        return this.navbar.querySelector(NAVIGATION_LIST_SELECTOR);
+    }
+    /**
+     * Returns the navigation items
+     */
+    get navigationItems() {
+        return this.navbar.querySelectorAll(NAVIGATION_ITEM_SELECTOR);
+    }
+    /**
+     * Temporarily disables interactions with the navbar during scrolling to prevent accidental clicks.
+     * Re-enables interactions after a brief delay to avoid blocking the user entirely.
+     */
+    disableNavbar() {
+        if (this.navbarDisableTimer)
+            clearTimeout(this.navbarDisableTimer);
+        this.navbar.style.pointerEvents = 'none';
+        this.navbarDisableTimer = setTimeout(() => {
+            this.navbar.style.pointerEvents = 'initial';
+        }, NAVBAR_DISABLE_DURATION);
+    }
+    /**
+     * Allows to translate the navbar without a transition
+     */
+    withoutTransition(callback) {
+        const transition = this.navbar.style.transition;
+        this.navbar.style.transition = 'none';
+        callback();
+        setTimeout(() => {
+            this.navbar.style.transition = transition;
+        });
+    }
+    render() {
+        return (h(Host, { key: 'd9be56167f714c041eb05283832986ec38c451cd', slot: "post-mainnavigation" }, h("div", { key: '5852c66b93a6eb9697fd7c7b1379e748804c6917', onClick: () => this.handleBackButtonClick(), class: "back-button" }, h("slot", { key: '0d4d98897fb5a8f8cf1c0871037ac01023c41cc2', name: "back-button" })), h("nav", { key: 'c60635b5db5a54b9e7661b92eeec29ed6d453cfe', ref: el => (this.navbar = el) }, h("slot", { key: 'd83facd6cb8c2a892ad432e42357123660c647ed' })), h("div", { key: 'e9afc48596b3e877d9efb9a4189abb8c84aadb6d', class: `left-scroll-button${this.canScrollLeft ? '' : ' d-none'}`, "aria-hidden": "true" }, h("button", { key: 'ef11720ec4f6d7811eb10027871a336e46ba6b84', type: "button", tabindex: "-1", ref: el => (this.leftScrollButton = el), onMouseDown: () => this.handleScrollButtonClick('left') }, h("post-icon", { key: 'f85ff2ef87841409f4b4f6c33e6d0dca4c764cc6', "aria-hidden": "true", name: "chevronleft" }))), h("div", { key: '181dc100ddedcba3f07b5f0ff9aedf165499f74f', class: `right-scroll-button${this.canScrollRight ? '' : ' d-none'}`, "aria-hidden": "true" }, h("button", { key: '83a8a824fcfe499207f6030e11381e68d530c67d', type: "button", tabindex: "-1", ref: el => (this.rightScrollButton = el), onMouseDown: () => this.handleScrollButtonClick('right') }, h("post-icon", { key: '52caec8a9a8c15e97ea5702ec3fe30bd4777c728', "aria-hidden": "true", name: "chevronright" })))));
+    }
+    static get is() { return "post-mainnavigation"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["./post-mainnavigation.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["post-mainnavigation.css"]
+        };
+    }
+    static get states() {
+        return {
+            "canScrollLeft": {},
+            "canScrollRight": {},
+            "translationAmount": {}
+        };
+    }
+    static get elementRef() { return "host"; }
+    static get watchers() {
+        return [{
+                "propName": "translationAmount",
+                "methodName": "onTranslateAmountChanges"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "mouseup",
+                "method": "stopScrolling",
+                "target": "window",
+                "capture": false,
+                "passive": true
+            }];
+    }
+}