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

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

@@ -12,21 +12,20 @@ import { h, Host } from "@stencil/core";
 import { throttle } from "throttle-debounce";
 import { version } from "../../../../package";
 import { breakpoint } from "../../utils/breakpoints";
-import { slideDown, slideUp } from "../../animations/slide";
-import { getFocusableChildren } from "../../utils/get-focusable-children";
+import { fade } from "../../animations/index";
+import { getDeepFocusableChildren } from "../../utils/get-focusable-children";
 import { EventFrom } from "../../utils/event-from";
+import { checkRequiredAndType } from "../../utils/index";
 /**
  * @slot post-logo - Should be used together with the `<post-logo>` component.
- * @slot global-controls - Holds search button in the global header.
- * @slot meta-navigation - Holds an `<ul>` with meta navigation links.
- * @slot post-togglebutton - Holds the burger menu toggler.
- * @slot post-language-switch - Should be used with the `<post-language-switch>` component.
+ * @slot global-nav-primary - Holds search button in the global header.
+ * @slot global-nav-secondary - Holds an `<ul>` with meta navigation links.
+ * @slot language-menu - Should be used with the `<post-language-switch>` component.
  * @slot title - Holds the application title.
- * @slot local-controls - 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>`.
- * @slot target-group - Holds the list of buttons to choose the target group.
- * @slot global-login - Holds the user menu or login button in the global header.
- * @slot navigation-controls - Custom controls, right aligned with the main navigation.
+ * @slot main-nav - Has a default slot because it's only meant to be used in the `<post-header>`.
+ * @slot audience - Holds the list of buttons to choose the audience.
+ * @slot post-login - Holds the user menu or login button in the global header.
+ * @slot local-nav - Holds controls specific to the current application.
  */
 export class PostHeader {
     get hasBurgerMenu() {
@@ -46,6 +45,9 @@ export class PostHeader {
         }
         return document.body;
     }
+    validateTextMenu() {
+        checkRequiredAndType(this, 'textMenu', 'string');
+    }
     lockBody(newValue, _oldValue, propName) {
         const scrollParent = this.scrollParent;
         const burgerMenuExtended = propName === 'burgerMenuExtended' ? newValue : this.burgerMenuExtended;
@@ -60,10 +62,14 @@ export class PostHeader {
     }
     constructor() {
         this.throttledResize = throttle(50, () => this.updateLocalHeaderHeight());
+        this.animationOptions = {
+            duration: 350,
+            easing: 'headerEase',
+        };
         this.device = breakpoint.get('device');
         this.hasNavigation = false;
-        this.hasNavigationControls = false;
-        this.hasTargetGroup = false;
+        this.hasLocalNav = false;
+        this.hasAudience = false;
         this.hasTitle = false;
         this.burgerMenuExtended = false;
         this.megadropdownOpen = false;
@@ -80,15 +86,14 @@ export class PostHeader {
                 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.megadropdownStateHandler = this.megadropdownStateHandler.bind(this);
         this.checkSlottedContent = this.checkSlottedContent.bind(this);
+        this.megadropdownStateHandler = this.megadropdownStateHandler.bind(this);
     }
     connectedCallback() {
         window.addEventListener('resize', this.throttledResize, { passive: true });
@@ -99,7 +104,6 @@ export class PostHeader {
             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');
@@ -110,11 +114,13 @@ export class PostHeader {
         this.switchLanguageSwitchMode();
     }
     componentDidRender() {
+        this.validateTextMenu();
         this.getFocusableElements();
         this.handleLocalHeaderResize();
     }
     componentDidLoad() {
         this.updateLocalHeaderHeight();
+        this.host.shadowRoot.addEventListener('click', this.handleLinkClick);
     }
     // Clean up possible side effects when post-header is disconnected
     disconnectedCallback() {
@@ -126,7 +132,9 @@ export class PostHeader {
             scrollParent.removeEventListener('scroll', this.handleScrollEvent);
         document.removeEventListener('postToggleMegadropdown', this.megadropdownStateHandler);
         this.host.removeEventListener('keydown', this.keyboardHandler);
-        this.host.removeEventListener('click', this.handleLinkClick);
+        if (this.host.shadowRoot) {
+            this.host.shadowRoot.removeEventListener('click', this.handleLinkClick);
+        }
         if (this.scrollParentResizeObserver) {
             this.scrollParentResizeObserver.disconnect();
             this.scrollParentResizeObserver = null;
@@ -142,11 +150,9 @@ export class PostHeader {
         this.burgerMenuExtended = false;
     }
     async closeBurgerMenu() {
-        this.burgerMenuAnimation.finish();
-        const menuButton = this.getMenuButton();
-        if (menuButton) {
-            menuButton.toggled = false;
-        }
+        this.burgerMenuAnimation?.finish();
+        if (this.burgerMenuButton)
+            this.burgerMenuButton.toggled = false;
         this.burgerMenuExtended = false;
     }
     /**
@@ -156,18 +162,18 @@ export class PostHeader {
         if (this.device === 'desktop')
             return;
         this.burgerMenuAnimation = this.burgerMenuExtended
-            ? slideUp(this.burgerMenu)
-            : slideDown(this.burgerMenu);
+            ? fade(this.burgerMenu, 'out', this.animationOptions)
+            : fade(this.burgerMenu, 'in', this.animationOptions);
         // Update the state of the toggle button
-        const menuButton = this.host.querySelector('post-togglebutton');
-        if (menuButton)
-            menuButton.toggled = force ?? !this.burgerMenuExtended;
+        if (this.burgerMenuButton)
+            this.burgerMenuButton.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();
+                this.burgerMenu.scrollTop = 0;
             }
         }
         else {
@@ -178,37 +184,31 @@ export class PostHeader {
             }
         }
     }
+    megadropdownStateHandler(event) {
+        this.megadropdownOpen = event.detail.isVisible;
+    }
     // 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');
+        if (!this.burgerMenu)
+            return;
+        const focusableElements = [this.burgerMenuButton];
+        focusableElements.push(...getDeepFocusableChildren(this.localHeader, el => !el.matches('post-megadropdown')), ...getDeepFocusableChildren(this.burgerMenu, el => !el.matches('post-megadropdown')));
+        this.firstFocusableEl = focusableElements[0];
+        this.lastFocusableEl = focusableElements[focusableElements.length - 1];
     }
     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();
-            }
+        if (e.key !== 'Tab' || !this.burgerMenuExtended)
+            return;
+        const activeElement = this.host.shadowRoot.activeElement || document.activeElement;
+        if (e.shiftKey && activeElement === this.firstFocusableEl) {
+            // If back tab (Tab + Shift) and first element is focused, focus goes to the last element of the megadropdown
+            e.preventDefault();
+            this.lastFocusableEl.focus();
+        }
+        else if (!e.shiftKey && activeElement === this.lastFocusableEl) {
+            // If Tab and last element is focused, focus goes back to the first element of the megadropdown
+            e.preventDefault();
+            this.firstFocusableEl.focus();
         }
     }
     closeAllMegadropdowns() {
@@ -268,21 +268,28 @@ export class PostHeader {
         }
     }
     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.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 variant = this.hasBurgerMenu ? 'list' : 'menu';
-        Array.from(this.host.querySelectorAll('post-language-switch')).forEach(languageSwitch => {
+        Array.from(this.host.querySelectorAll('post-language-menu')).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`);
+    onFocusChange(e) {
+        const alwaysVisibleElements = this.device === 'desktop'
+            ? '.navigation' // logo isn’t included since it would be too small to focus on effectively.
+            : '.global-header, .burger-menu';
+        const isHeaderExpanded = 
+        // ensure the expanded state stays accurate during focus changes,
+        // e.g., when the focused element is removed from the DOM
+        // during a window resize
+        e.target === document.activeElement &&
+            this.host.matches(':focus-within') &&
+            !this.host.shadowRoot.querySelector(`:where(${alwaysVisibleElements}):focus-within`);
         if (isHeaderExpanded) {
             this.host.setAttribute('data-expanded', '');
         }
@@ -291,29 +298,31 @@ export class PostHeader {
         }
     }
     renderNavigation() {
+        const localNav = !this.hasTitle && (h("div", { class: "local-nav" }, h("slot", { name: "local-nav" })));
         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: { 'navigation': true, 'megadropdown-open': this.megadropdownOpen } }, h("slot", { name: "main-nav" }), localNav));
         }
         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" }))));
+                'no-local-nav': !this.hasLocalNav,
+                'megadropdown-open': this.megadropdownOpen,
+            }, style: { '--post-header-navigation-current-inset': `${this.burgerMenu?.scrollTop ?? 0}px` }, ref: el => (this.burgerMenu = el) }, localNav, h("div", { class: "burger-menu-body" }, h("slot", { name: "audience" }), h("slot", { name: "main-nav" })), h("div", { class: "burger-menu-footer" }, h("slot", { name: "global-nav-secondary" }), h("slot", { name: "language-menu" }))));
     }
     render() {
-        return (h(Host, { key: 'c9b1c1a946800f728a7a90a91dff3abf23b5100f', "data-version": version, "data-color-scheme": "light", "data-burger-menu": this.hasBurgerMenu }, h("div", { key: '21d2b9bd39946df7e42d3d5c763d40cd1dabee69', class: {
+        return (h(Host, { key: '15de1ff6ccac94813df10fc0b41a518de68dee94', "data-version": version, "data-color-scheme": "light", "data-burger-menu": this.hasBurgerMenu, "data-menu-extended": this.burgerMenuExtended }, h("header", { key: '0af40c8b8944c7ffcf2bf0fe704671f4012ae8c8' }, h("div", { key: 'cd4564c5c375c015c673df195ba04fe4d89ff1c2', 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: {
+                'no-audience': !this.hasAudience,
+            } }, h("div", { key: 'c4ad8a22fed57e54266c6584548f5203a499b63c', class: "logo" }, h("slot", { key: 'bf86f7ccf2e46263365023f287f18305160cede6', name: "post-logo" })), h("div", { key: 'e89c405cf97ddb08850d3b15ab8977e7e484ba73', class: "sliding-controls" }, this.device === 'desktop' && (h("div", { key: 'c3e9f49a105894d0df44a3d2654065b452292154', class: "audience" }, h("slot", { key: '20effc0592ca8665de464cc5d45d11ef02894acb', name: "audience" }))), h("slot", { key: 'f0ca8a59134520ccbb38907e32bedd4c05800d36', name: "global-nav-primary" }), !this.hasBurgerMenu && [
+            h("slot", { key: '7e2b2982403f491f083fc9f32cee46cbaeca7c50', name: "global-nav-secondary" }),
+            h("slot", { key: '3e7b5f6cb16b2cf2bc64b9b11c70f8b363e80134', name: "language-menu" }),
+        ], h("slot", { key: 'd91059cc4dd4529040aa6436db46f66f2db84e71', name: "post-login" }), this.hasNavigation && this.device !== 'desktop' && (h("div", { key: 'f97161e09b27c11c6f85d112e85a59ddf2925aec', onClick: () => this.toggleBurgerMenu(), class: "burger-menu-toggle" }, h("slot", { key: '18304b858fa2173b63e842ba4d0512bd438a89b0', name: "post-togglebutton" }))), this.hasNavigation && this.device !== 'desktop' && (h("post-togglebutton", { key: '0599e4d106262b7be6557b476becacaf9f5656ba', ref: el => (this.burgerMenuButton = el), onClick: () => this.toggleBurgerMenu() }, h("span", { key: '3f3578f6172a9d87c531b5bef6a201b255042511' }, this.textMenu), h("post-icon", { key: '7a92cec5793716225cf9dc4646ccff585e02723b', "aria-hidden": "true", name: "burger", "data-showwhen": "untoggled" }), h("post-icon", { key: '9170844d117e8f0bf7f35049debe973ff391158e', "aria-hidden": "true", name: "closex", "data-showwhen": "toggled" }))))), h("div", { key: 'db13d084905b4633595bb1d4d83cc88c82c3c679', ref: el => (this.localHeader = el), class: {
                 'local-header': true,
                 'no-title': !this.hasTitle,
-                'no-target-group': !this.hasTargetGroup,
+                'no-audience': !this.hasAudience,
                 '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()));
+                'no-local-nav': !this.hasLocalNav,
+            } }, h("slot", { key: 'f6fb25aef128bf1712995427014c5ff62c3710d0', name: "title" }), this.hasTitle && h("slot", { key: '8cba1c7b544d950140d59336baaf7398a4fb23d8', name: "local-nav" }), this.device === 'desktop' && this.renderNavigation()), this.device !== 'desktop' && this.renderNavigation())));
     }
     static get is() { return "post-header"; }
     static get encapsulation() { return "shadow"; }
@@ -327,12 +336,35 @@ export class PostHeader {
             "$": ["post-header.css"]
         };
     }
+    static get properties() {
+        return {
+            "textMenu": {
+                "type": "string",
+                "attribute": "text-menu",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The label of the burger menu button."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true
+            }
+        };
+    }
     static get states() {
         return {
             "device": {},
             "hasNavigation": {},
-            "hasNavigationControls": {},
-            "hasTargetGroup": {},
+            "hasLocalNav": {},
+            "hasAudience": {},
             "hasTitle": {},
             "burgerMenuExtended": {},
             "megadropdownOpen": {}
@@ -352,10 +384,6 @@ export class PostHeader {
                         "Promise": {
                             "location": "global",
                             "id": "global::Promise"
-                        },
-                        "HTMLPostTogglebuttonElement": {
-                            "location": "global",
-                            "id": "global::HTMLPostTogglebuttonElement"
                         }
                     },
                     "return": "Promise<void>"
@@ -370,6 +398,9 @@ export class PostHeader {
     static get elementRef() { return "host"; }
     static get watchers() {
         return [{
+                "propName": "textMenu",
+                "methodName": "validateTextMenu"
+            }, {
                 "propName": "device",
                 "methodName": "lockBody"
             }, {
@@ -395,4 +426,4 @@ export class PostHeader {
 }
 __decorate([
     EventFrom('post-megadropdown')
-], PostHeader.prototype, "megadropdownStateHandler", void 0);
+], PostHeader.prototype, "megadropdownStateHandler", null);

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

@@ -63,9 +63,11 @@ export class PostIcon {
         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') || ''
-            : '';
+        let metaIconBase = '';
+        if (IS_BROWSER) {
+            const metaTag = document.querySelector('meta[name="design-system-settings"]');
+            metaIconBase = metaTag?.getAttribute('data-post-icon-base') || '';
+        }
         // Function to build the first part of the URL when 'this.base' or 'metaIconBase' are relative
         const buildUrlWithBase = (relativeUrl) => {
             const normalizedHref = normalizeUrl(baseHref);
@@ -112,7 +114,7 @@ export class PostIcon {
         this.validateAnimation();
     }
     render() {
-        return (h(Host, { key: '7ce1f627f621201c0f4d6e90ee3d8d6d3c32798a', "data-version": version }, h("span", { key: '987ecd266b8bd68bdbb06cdb500a746b913e79b1', style: this.getStyles() })));
+        return (h(Host, { key: '6469b748f2792c383593dacd1d9f1f17daf9cde0', "data-version": version }, h("span", { key: '9f4d9766dc97a07a2562dbc3bb0931de29fe9757', style: this.getStyles() })));
     }
     static get is() { return "post-icon"; }
     static get encapsulation() { return "shadow"; }

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

@@ -0,0 +1 @@
+:host{display:flex !important}.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-dropdown-container{display:flex;flex-direction:column}.post-language-menu-trigger{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);text-transform:uppercase;cursor:pointer}.post-language-menu-trigger:hover{text-decoration:none}.post-language-menu-trigger:disabled{border-style:var(--post-core-border-style-dash)}.post-language-menu-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-menu-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-menu-trigger:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){.post-language-menu-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-menu-trigger: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){.post-language-menu-trigger:is(a){color:LinkText;border:unset}.post-language-menu-trigger:is(button){background-color:ButtonFace !important;border:1px solid ButtonBorder !important}.post-language-menu-trigger:not(:disabled,.disabled):is(button):hover{background-color:Highlight !important}.post-language-menu-trigger:not(:disabled,.disabled):is(button):hover>post-icon{color:HighlightText !important}}.post-language-menu-trigger: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-menu-trigger: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)}.post-language-menu-trigger: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)}.post-language-menu-trigger post-icon{transition:transform 250ms cubic-bezier(0.4, 0, 0.2, 1)}.post-language-menu-trigger:is([aria-current],[aria-pressed=true],[aria-expanded=true]) post-icon{transform:rotate(180deg)}post-menu::part(post-menu){padding-block:0}.post-language-menu-list{margin-top:1rem}

package/dist/collection/components/{post-language-switch/post-language-switch.js → post-language-menu/post-language-menu.js}

@@ -13,7 +13,7 @@ import { checkRequiredAndType, checkEmptyOrOneOf, EventFrom } from "../../utils/
 import { version } from "../../../../package";
 import { SWITCH_VARIANTS } from "./switch-variants";
 import { nanoid } from "nanoid";
-export class PostLanguageSwitch {
+export class PostLanguageMenu {
     constructor() {
         this.menuId = `p${nanoid(11)}`;
         this.listSpanId = `list-span-${nanoid(11)}`;
@@ -23,13 +23,13 @@ export class PostLanguageSwitch {
         this.variant = 'list';
     }
     get languageOptions() {
-        return Array.from(this.host.querySelectorAll('post-language-option'));
+        return Array.from(this.host.querySelectorAll('post-language-menu-item'));
     }
     validateCaption() {
-        checkRequiredAndType(this, 'caption', 'string');
+        checkRequiredAndType(this, 'textChangeLanguage', 'string');
     }
     validateDescription() {
-        checkRequiredAndType(this, 'description', 'string');
+        checkRequiredAndType(this, 'textCurrentLanguage', 'string');
     }
     validateVariant() {
         checkEmptyOrOneOf(this, 'variant', SWITCH_VARIANTS);
@@ -44,11 +44,11 @@ export class PostLanguageSwitch {
         this.updateChildrenVariant();
     }
     /**
-     * Listen for the postChange event and guard it to run only for events originating from a <post-language-option> element.
+     * Listen for the postChange event and guard it to run only for events originating from a <post-language-menu-item> element.
      */
     handlePostChange(event) {
         this.activeLang = event.detail;
-        // Update the active state in the children post-language-option components
+        // Update the active state in the children post-language-menu-item components
         this.languageOptions.forEach(lang => {
             if (lang.code && lang.code === this.activeLang) {
                 lang.setAttribute('active', '');
@@ -65,43 +65,43 @@ export class PostLanguageSwitch {
     }
     /**
      * Handles cases where the language switch is being rendered before options are available
-     * @param event Initially emitted by <post-langauge-option>
+     * @param event Initially emitted by <post-language-menu-item>
      */
     handleInitiallyActive(event) {
         this.activeLang = event.detail;
     }
-    // Update post-language-option variant to have the correct style
+    // Update post-language-menu-item variant to have the correct style
     updateChildrenVariant() {
         this.languageOptions.forEach(el => {
             el.setAttribute('variant', this.variant);
         });
     }
     renderList() {
-        return (h(Host, { "data-version": version }, h("div", { class: "post-language-switch-list", role: "list", "aria-label": this.caption, "aria-describedby": this.listSpanId }, h("span", { id: this.listSpanId, class: "visually-hidden" }, this.description), h("slot", null))));
+        return (h(Host, { "data-version": version }, h("div", { class: "post-language-menu-list", role: "list", "aria-label": this.textChangeLanguage, "aria-describedby": this.listSpanId }, h("span", { id: this.listSpanId, class: "visually-hidden" }, this.textCurrentLanguage), h("slot", null))));
     }
     renderDropdown() {
-        return (h(Host, { "data-version": version }, h("post-menu-trigger", { for: this.menuId }, h("button", { class: "post-language-switch-trigger" }, this.activeLang, h("span", { class: "visually-hidden" }, this.caption), h("span", { class: "visually-hidden" }, this.description), h("post-icon", { "aria-hidden": "true", name: "chevrondown" }))), h("post-menu", { id: this.menuId, class: "post-language-switch-dropdown-container", label: this.caption }, h("slot", null))));
+        return (h(Host, { "data-version": version }, h("post-menu-trigger", { for: this.menuId }, h("button", { class: "post-language-menu-trigger" }, this.activeLang, h("span", { class: "visually-hidden" }, this.textChangeLanguage), h("span", { class: "visually-hidden" }, this.textCurrentLanguage), h("post-icon", { "aria-hidden": "true", name: "chevrondown" }))), h("post-menu", { id: this.menuId, class: "post-language-menu-dropdown-container", label: this.textChangeLanguage, placement: "bottom-end" }, h("slot", null))));
     }
     render() {
         return this.variant === 'list' ? this.renderList() : this.renderDropdown();
     }
-    static get is() { return "post-language-switch"; }
+    static get is() { return "post-language-menu"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
-            "$": ["post-language-switch.scss"]
+            "$": ["post-language-menu.scss"]
         };
     }
     static get styleUrls() {
         return {
-            "$": ["post-language-switch.css"]
+            "$": ["post-language-menu.css"]
         };
     }
     static get properties() {
         return {
-            "caption": {
+            "textChangeLanguage": {
                 "type": "string",
-                "attribute": "caption",
+                "attribute": "text-change-language",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -118,9 +118,9 @@ export class PostLanguageSwitch {
                 "setter": false,
                 "reflect": true
             },
-            "description": {
+            "textCurrentLanguage": {
                 "type": "string",
-                "attribute": "description",
+                "attribute": "text-current-language",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -148,7 +148,7 @@ export class PostLanguageSwitch {
                         "SwitchVariant": {
                             "location": "import",
                             "path": "./switch-variants",
-                            "id": "src/components/post-language-switch/switch-variants.ts::SwitchVariant"
+                            "id": "src/components/post-language-menu/switch-variants.ts::SwitchVariant"
                         }
                     }
                 },
@@ -173,10 +173,10 @@ export class PostLanguageSwitch {
     static get elementRef() { return "host"; }
     static get watchers() {
         return [{
-                "propName": "caption",
+                "propName": "textChangeLanguage",
                 "methodName": "validateCaption"
             }, {
-                "propName": "description",
+                "propName": "textCurrentLanguage",
                 "methodName": "validateDescription"
             }, {
                 "propName": "variant",
@@ -191,7 +191,7 @@ export class PostLanguageSwitch {
                 "capture": false,
                 "passive": false
             }, {
-                "name": "postLanguageOptionInitiallyActive",
+                "name": "postLanguageMenuItemInitiallyActive",
                 "method": "handleInitiallyActive",
                 "target": undefined,
                 "capture": false,
@@ -200,5 +200,5 @@ export class PostLanguageSwitch {
     }
 }
 __decorate([
-    EventFrom('post-language-option')
-], PostLanguageSwitch.prototype, "handlePostChange", null);
+    EventFrom('post-language-menu-item')
+], PostLanguageMenu.prototype, "handlePostChange", null);

package/dist/collection/components/post-language-menu-item/post-language-menu-item.css

@@ -0,0 +1 @@
+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}

package/dist/collection/components/{post-language-option/post-language-option.js → post-language-menu-item/post-language-menu-item.js}

@@ -1,11 +1,11 @@
 import { Host, h, } from "@stencil/core";
 import { checkEmptyOrType, checkRequiredAndType, checkEmptyOrOneOf, checkEmptyOrUrl, } from "../../utils/index";
 import { version } from "../../../../package";
-import { SWITCH_VARIANTS } from "../post-language-switch/switch-variants";
+import { SWITCH_VARIANTS } from "../post-language-menu/switch-variants";
 /**
  * @slot default - Slot for placing the content inside the anchor or button.
  */
-export class PostLanguageOption {
+export class PostLanguageMenuItem {
     validateCode() {
         checkRequiredAndType(this, 'code', 'string');
     }
@@ -23,10 +23,10 @@ export class PostLanguageOption {
         this.validateName();
         this.validateUrl();
         if (!this.name && this.isNameRequired()) {
-            throw new Error('The "name" property of the post-language-option component is required when the full language name is not displayed.');
+            throw new Error('The "name" property of the post-language-menu-item component is required when the full language name is not displayed.');
         }
         if (this.active) {
-            this.postLanguageOptionInitiallyActive.emit(this.code);
+            this.postLanguageMenuItemInitiallyActive.emit(this.code);
         }
     }
     /**
@@ -49,17 +49,17 @@ export class PostLanguageOption {
                 this.emitChange();
             }
         };
-        return (h(Host, { key: '06ba54de702d5014b34f1b0cb6396cb947ac3ca6', "data-version": version, role: this.variant === 'list' ? 'listitem' : undefined }, this.url ? (h("a", { "aria-current": this.active ? 'page' : undefined, href: this.url, hrefLang: lang, lang: lang, onClick: () => this.emitChange(), onKeyDown: emitOnKeyDown }, h("slot", null), h("span", { class: "visually-hidden" }, this.name))) : (h("button", { "aria-current": this.active ? 'true' : undefined, lang: lang, onClick: () => this.emitChange(), onKeyDown: emitOnKeyDown }, h("slot", null), h("span", { class: "visually-hidden" }, this.name)))));
+        return (h(Host, { key: '0a0f6a2e04d61991696e86fa9a20b34d154e89ac', "data-version": version, role: this.variant === 'list' ? 'listitem' : undefined }, this.url ? (h("a", { "aria-current": this.active ? 'page' : undefined, href: this.url, hrefLang: lang, lang: lang, onClick: () => this.emitChange(), onKeyDown: emitOnKeyDown }, h("slot", null), h("span", { class: "visually-hidden" }, this.name))) : (h("button", { "aria-current": this.active ? 'true' : undefined, lang: lang, onClick: () => this.emitChange(), onKeyDown: emitOnKeyDown }, h("slot", null), h("span", { class: "visually-hidden" }, this.name)))));
     }
-    static get is() { return "post-language-option"; }
+    static get is() { return "post-language-menu-item"; }
     static get originalStyleUrls() {
         return {
-            "$": ["post-language-option.scss"]
+            "$": ["post-language-menu-item.scss"]
         };
     }
     static get styleUrls() {
         return {
-            "$": ["post-language-option.css"]
+            "$": ["post-language-menu-item.css"]
         };
     }
     static get properties() {
@@ -112,8 +112,8 @@ export class PostLanguageOption {
                     "references": {
                         "SwitchVariant": {
                             "location": "import",
-                            "path": "../post-language-switch/switch-variants",
-                            "id": "src/components/post-language-switch/switch-variants.ts::SwitchVariant"
+                            "path": "../post-language-menu/switch-variants",
+                            "id": "src/components/post-language-menu/switch-variants.ts::SwitchVariant"
                         }
                     }
                 },
@@ -121,7 +121,7 @@ export class PostLanguageOption {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "To communicate the variant prop from the parent (post-language-switch) component to the child (post-language-option) component. See parent docs for a description about the property itself."
+                    "text": "To communicate the variant prop from the parent (post-language-menu) component to the child (post-language-menu-item) component. See parent docs for a description about the property itself."
                 },
                 "getter": false,
                 "setter": false,
@@ -184,8 +184,8 @@ export class PostLanguageOption {
                     "references": {}
                 }
             }, {
-                "method": "postLanguageOptionInitiallyActive",
-                "name": "postLanguageOptionInitiallyActive",
+                "method": "postLanguageMenuItemInitiallyActive",
+                "name": "postLanguageMenuItemInitiallyActive",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,