@swisspost/design-system-components 9.0.0-next.23 → 9.0.0-next.24

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

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const postPopover = require('./post-popover-bddabf57.js');
-require('./index-5acef487.js');
-require('./package-fdebc7ce.js');
+const postPopover = require('./post-popover-1a5b1f4c.js');
+require('./index-d6bf2c66.js');
+require('./package-be30a2ae.js');
 require('./attribute-observer-6d8b886b.js');
 
 

package/dist/cjs/{post-rating-f4c48349.js → post-rating-9a9ce431.js}

@@ -1,7 +1,7 @@
 'use strict';
 
-const index = require('./index-5acef487.js');
-const _package = require('./package-fdebc7ce.js');
+const index = require('./index-d6bf2c66.js');
+const _package = require('./package-be30a2ae.js');
 
 const postRatingCss = "/*!\n * Copyright 2021 by Swiss Post, Information Technology\n */:host{display:inline-block}.rating{display:flex;flex-wrap:wrap;overflow:hidden;margin:0 calc(var(--post-core-dimension-4)*-1);border-radius:4px}.rating .star{--post-rating-star-stroke:hsl(0, 0%, 40%);--post-rating-star-fill:#fff;position:relative;width:2rem;height:2rem;cursor:pointer}.rating .star .stroke,.rating .star .fill{display:block;width:100%;height:100%;transition:all ease 100ms}.rating .star .stroke{position:absolute;inset:auto;z-index:1;color:var(--post-rating-star-stroke)}.rating .star .fill{margin:1px;width:calc(100% - 2px);height:calc(100% - 2px);color:var(--post-rating-star-fill)}.rating .star.before-hover{--post-rating-star-stroke:hsl(0, 0%, 40%);--post-rating-star-fill:#fc0}.rating .star.active{--post-rating-star-stroke:hsl(0, 0%, 20%);--post-rating-star-fill:#fc0}.rating .star.hover{--post-rating-star-stroke:hsl(0, 0%, 40%);--post-rating-star-fill:#fc0}.rating .star.after-active{--post-rating-star-stroke:hsl(0, 0%, 40%);--post-rating-star-fill:hsl(0, 0%, 80%)}.rating :focus{outline:none}.rating:focus-visible{outline-offset:var(--post-core-dimension-2);outline:var(--post-core-dimension-2) solid #1976c8}.rating[aria-readonly=true] .star,.rating[aria-disabled=true] .star{cursor:default}.rating[aria-disabled=true] .star{--post-rating-star-stroke:hsl(0, 0%, 60%);--post-rating-star-fill:#fff}.rating[aria-disabled=true] .star.active{cursor:default;--post-rating-star-stroke:hsl(0, 0%, 60%);--post-rating-star-fill:hsl(0, 0%, 90%)}";
 const PostRatingStyle0 = postRatingCss;

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

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const postRating = require('./post-rating-f4c48349.js');
-require('./index-5acef487.js');
-require('./package-fdebc7ce.js');
+const postRating = require('./post-rating-9a9ce431.js');
+require('./index-d6bf2c66.js');
+require('./package-be30a2ae.js');
 
 
 

package/dist/cjs/{post-tab-header-246cd064.js → post-tab-header-43c52a57.js}

@@ -1,7 +1,7 @@
 'use strict';
 
-const index = require('./index-5acef487.js');
-const _package = require('./package-fdebc7ce.js');
+const index = require('./index-d6bf2c66.js');
+const _package = require('./package-be30a2ae.js');
 const checkNonEmpty = require('./check-non-empty-bd99d236.js');
 const index_browser = require('./index.browser-2f65f583.js');
 

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

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const postTabHeader = require('./post-tab-header-246cd064.js');
-require('./index-5acef487.js');
-require('./package-fdebc7ce.js');
+const postTabHeader = require('./post-tab-header-43c52a57.js');
+require('./index-d6bf2c66.js');
+require('./package-be30a2ae.js');
 require('./check-non-empty-bd99d236.js');
 require('./constants-238701d3.js');
 require('./index.browser-2f65f583.js');

package/dist/cjs/{post-tab-panel-0e494e5c.js → post-tab-panel-16064007.js}

@@ -1,7 +1,7 @@
 'use strict';
 
-const index = require('./index-5acef487.js');
-const _package = require('./package-fdebc7ce.js');
+const index = require('./index-d6bf2c66.js');
+const _package = require('./package-be30a2ae.js');
 const index_browser = require('./index.browser-2f65f583.js');
 
 const postTabPanelCss = ":host{display:none}";

package/dist/cjs/post-tab-panel.cjs.entry.js

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const postTabPanel = require('./post-tab-panel-0e494e5c.js');
-require('./index-5acef487.js');
-require('./package-fdebc7ce.js');
+const postTabPanel = require('./post-tab-panel-16064007.js');
+require('./index-d6bf2c66.js');
+require('./package-be30a2ae.js');
 require('./index.browser-2f65f583.js');
 
 

package/dist/cjs/{post-tabs-3ead6ac7.js → post-tabs-e4739459.js}

@@ -1,7 +1,7 @@
 'use strict';
 
-const index = require('./index-5acef487.js');
-const _package = require('./package-fdebc7ce.js');
+const index = require('./index-d6bf2c66.js');
+const _package = require('./package-be30a2ae.js');
 const fade = require('./fade-72d5ef55.js');
 
 /**

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

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const postTabs = require('./post-tabs-3ead6ac7.js');
-require('./index-5acef487.js');
-require('./package-fdebc7ce.js');
+const postTabs = require('./post-tabs-e4739459.js');
+require('./index-d6bf2c66.js');
+require('./package-be30a2ae.js');
 require('./fade-72d5ef55.js');
 
 

package/dist/cjs/{post-tag-f62abd13.js → post-tag-e1ed422b.js}

@@ -1,7 +1,7 @@
 'use strict';
 
-const index = require('./index-5acef487.js');
-const _package = require('./package-fdebc7ce.js');
+const index = require('./index-d6bf2c66.js');
+const _package = require('./package-be30a2ae.js');
 
 const postTagCss = "/*!\n * Copyright 2021 by Swiss Post, Information Technology\n */.tag,.tag:where(:has(:not(pre))){--post-tag-bg:hsl(0, 0%, 90%);--post-tag-fg:#000;display:inline-flex;align-items:center;gap:var(--post-core-dimension-4);padding:0 var(--post-core-dimension-8);max-width:100%;background-color:var(--post-tag-bg);border:var(--post-core-dimension-1) solid rgba(0,0,0,0);border-radius:var(--post-core-dimension-4);font-size:1rem;line-height:calc(var(--post-core-dimension-32) - var(--post-core-dimension-1)*2);white-space:nowrap;color:var(--post-tag-fg)}.tag post-icon,.tag:where(:has(:not(pre))) post-icon{flex:0 0 auto;width:1.25rem;height:1.25rem}.tag .tag-text,.tag:where(:has(:not(pre))) .tag-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tag .tag-text svg,.tag .tag-text img,.tag:where(:has(:not(pre))) .tag-text svg,.tag:where(:has(:not(pre))) .tag-text img{display:inline-block;height:1.25rem !important;vertical-align:text-top}.tag.tag-sm,.tag:where(:has(:not(pre))).tag-sm{line-height:var(--post-core-dimension-24)}.tag.tag-sm .tag-icon,.tag:where(:has(:not(pre))).tag-sm .tag-icon{width:1rem;height:1rem}.tag.tag-white,.tag:where(:has(:not(pre))).tag-white{--post-tag-bg:#fff;--post-tag-fg:#000}.tag.tag-yellow,.tag:where(:has(:not(pre))).tag-yellow{--post-tag-bg:#fc0;--post-tag-fg:#000}.tag.tag-success,.tag:where(:has(:not(pre))).tag-success{--post-tag-bg:#2c871d;--post-tag-fg:#fff}.tag.tag-warning,.tag:where(:has(:not(pre))).tag-warning{--post-tag-bg:#f49e00;--post-tag-fg:#000}.tag.tag-danger,.tag:where(:has(:not(pre))).tag-danger{--post-tag-bg:#a51728;--post-tag-fg:#fff}.tag.tag-info,.tag:where(:has(:not(pre))).tag-info{--post-tag-bg:#cce4ee;--post-tag-fg:#000}.tag.tag-white,.tag:where(:has(:not(pre))).tag-white{border-color:#000}pre .tag,pre .tag:where(:has(:not(pre))){display:inline;padding:initial;max-width:initial;background:initial;border:initial;border-radius:initial;font-size:inherit;line-height:inherit;white-space:unset}*,*:before,*:after{box-sizing:border-box}.tag-text ::slotted(svg),.tag-text ::slotted(img){display:inline-block !important;height:1.25rem !important;vertical-align:text-top !important}";
 const PostTagStyle0 = postTagCss;

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

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const postTag = require('./post-tag-f62abd13.js');
-require('./index-5acef487.js');
-require('./package-fdebc7ce.js');
+const postTag = require('./post-tag-e1ed422b.js');
+require('./index-d6bf2c66.js');
+require('./package-be30a2ae.js');
 
 
 

package/dist/cjs/{post-togglebutton-63708f9f.js → post-togglebutton-38ec151e.js}

@@ -1,7 +1,7 @@
 'use strict';
 
-const index = require('./index-5acef487.js');
-const _package = require('./package-fdebc7ce.js');
+const index = require('./index-d6bf2c66.js');
+const _package = require('./package-be30a2ae.js');
 const slide = require('./slide-8ae17ee4.js');
 const index$1 = require('./index-23e36ff7.js');
 const checkNonEmpty = require('./check-non-empty-bd99d236.js');
@@ -534,6 +534,7 @@ const PostLanguageOption = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.postChange = index.createEvent(this, "postChange", 7);
+        this.postLanguageOptionInitiallyActive = index.createEvent(this, "postLanguageOptionInitiallyActive", 7);
         this.code = undefined;
         this.active = undefined;
         this.variant = undefined;
@@ -561,11 +562,18 @@ const PostLanguageOption = class {
         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.');
         }
+        if (this.active) {
+            this.postLanguageOptionInitiallyActive.emit(this.code);
+        }
     }
     /**
      * An event emitted when the language option is clicked. The payload is the ISO 639 code of the language.
      */
     postChange;
+    /**
+     * An event emitted when the language option is initially active. The payload is the ISO 639 code of the language.
+     */
+    postLanguageOptionInitiallyActive;
     /**
      * Selects the language option programmatically.
      */
@@ -586,7 +594,7 @@ const PostLanguageOption = class {
                 this.emitChange();
             }
         };
-        return (index.h(index.Host, { key: 'f987cfc18bb86866781e0668516e86f89be6241b', "data-version": _package.version, role: this.variant ? `${this.variant}item` : null }, this.url ? (index.h("a", { "aria-current": this.active ? 'page' : undefined, "aria-label": this.name, href: this.url, hrefLang: lang, lang: lang, onClick: () => this.emitChange(), onKeyDown: emitOnKeyDown }, index.h("slot", null))) : (index.h("button", { "aria-current": this.active ? 'true' : undefined, "aria-label": this.name, lang: lang, onClick: () => this.emitChange(), onKeyDown: emitOnKeyDown }, index.h("slot", null)))));
+        return (index.h(index.Host, { key: '23bf186d9cc718b2697cbc5bc54b44f6c9ead54f', "data-version": _package.version, role: this.variant ? `${this.variant}item` : null }, this.url ? (index.h("a", { "aria-current": this.active ? 'page' : undefined, "aria-label": this.name, href: this.url, hrefLang: lang, lang: lang, onClick: () => this.emitChange(), onKeyDown: emitOnKeyDown }, index.h("slot", null))) : (index.h("button", { "aria-current": this.active ? 'true' : undefined, "aria-label": this.name, lang: lang, onClick: () => this.emitChange(), onKeyDown: emitOnKeyDown }, index.h("slot", null)))));
     }
     static get watchers() { return {
         "code": ["validateCode"],
@@ -599,7 +607,7 @@ PostLanguageOption.style = PostLanguageOptionStyle0;
 
 const SWITCH_VARIANTS = ['list', 'menu'];
 
-const postLanguageSwitchCss = ":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}";
+const postLanguageSwitchCss = ":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:24px;width:24px}.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}";
 const PostLanguageSwitchStyle0 = postLanguageSwitchCss;
 
 const PostLanguageSwitch = class {
@@ -619,52 +627,65 @@ const PostLanguageSwitch = class {
     }
     validateVariant() {
         index$1.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.hide();
+        // Initially set variants and active language
+        // Handles cases where the language-switch is rendered after the language-options have been rendered
+        this.updateChildrenVariant();
+        this.updateActiveLanguage();
+    }
+    handlePostChange(event) {
+        this.activeLang = event.detail;
+        // Update the active state in the children post-language-option components
+        this.languageOptions.forEach(lang => {
+            if (lang.code && lang.code === this.activeLang) {
+                lang.setAttribute('active', '');
             }
+            else {
+                lang.removeAttribute('active');
+            }
+        });
+        // Hides the dropdown when an option has been clicked
+        if (this.variant === 'menu') {
+            const menu = this.host.shadowRoot.querySelector('post-menu');
+            menu.hide();
+        }
+    }
+    /**
+     * Handles cases where the language switch is being rendered before options are available
+     * @param event Initially emitted by <post-langauge-option>
+     */
+    handleInitiallyActive(event) {
+        this.activeLang = event.detail;
+    }
+    get languageOptions() {
+        return this.host.querySelectorAll('post-language-option');
+    }
+    get activeLanguageOption() {
+        return this.host.querySelector('post-language-option[active]:not([active="false"])');
+    }
+    handleSlotChange() {
+        this.updateActiveLanguage();
+    }
+    updateActiveLanguage() {
+        this.activeLang = this.activeLanguageOption.getAttribute('code');
+    }
+    // Update post-language-option variant to have the correct style
+    updateChildrenVariant() {
+        this.languageOptions.forEach(el => {
+            el.setAttribute('variant', this.variant);
         });
     }
     menuId = `p${index_browser.nanoid(11)}`;
     renderList() {
-        return (index.h(index.Host, { "data-version": _package.version, role: "list", "aria-label": this.caption }, index.h("div", { class: "post-language-switch-list", role: "group", "aria-label": this.description }, index.h("slot", null))));
+        return (index.h(index.Host, { "data-version": _package.version, role: "list", "aria-label": this.caption }, index.h("div", { class: "post-language-switch-list", role: "group", "aria-label": this.description }, index.h("slot", { onSlotchange: () => this.handleSlotChange() }))));
     }
     renderDropdown() {
-        return (index.h(index.Host, { "data-version": _package.version }, index.h("post-menu-trigger", { for: this.menuId }, index.h("button", { class: "post-language-switch-trigger", "aria-label": this.description }, this.activeLang, index.h("post-icon", { "aria-hidden": "true", name: "chevrondown" }))), index.h("post-menu", { id: this.menuId, class: "post-language-switch-dropdown-container", "aria-label": this.caption }, index.h("slot", null))));
+        return (index.h(index.Host, { "data-version": _package.version }, index.h("post-menu-trigger", { for: this.menuId }, index.h("button", { class: "post-language-switch-trigger", "aria-label": this.description }, this.activeLang, index.h("post-icon", { "aria-hidden": "true", name: "chevrondown" }))), index.h("post-menu", { id: this.menuId, class: "post-language-switch-dropdown-container", "aria-label": this.caption }, index.h("slot", { onSlotchange: () => this.handleSlotChange() }))));
     }
     render() {
         return this.variant === 'list' ? this.renderList() : this.renderDropdown();

package/dist/cjs/{post-tooltip-2f80afc8.js → post-tooltip-463eaaf6.js}

@@ -1,7 +1,7 @@
 'use strict';
 
-const index = require('./index-5acef487.js');
-const _package = require('./package-fdebc7ce.js');
+const index = require('./index-d6bf2c66.js');
+const _package = require('./package-be30a2ae.js');
 const attributeObserver = require('./attribute-observer-6d8b886b.js');
 const index$1 = require('./index-23e36ff7.js');
 

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

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const postTooltip = require('./post-tooltip-2f80afc8.js');
-require('./index-5acef487.js');
-require('./package-fdebc7ce.js');
+const postTooltip = require('./post-tooltip-463eaaf6.js');
+require('./index-d6bf2c66.js');
+require('./package-be30a2ae.js');
 require('./attribute-observer-6d8b886b.js');
 require('./index-23e36ff7.js');
 require('./constants-238701d3.js');

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

@@ -33,11 +33,18 @@ export class PostLanguageOption {
         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.');
         }
+        if (this.active) {
+            this.postLanguageOptionInitiallyActive.emit(this.code);
+        }
     }
     /**
      * An event emitted when the language option is clicked. The payload is the ISO 639 code of the language.
      */
     postChange;
+    /**
+     * An event emitted when the language option is initially active. The payload is the ISO 639 code of the language.
+     */
+    postLanguageOptionInitiallyActive;
     /**
      * Selects the language option programmatically.
      */
@@ -58,7 +65,7 @@ export class PostLanguageOption {
                 this.emitChange();
             }
         };
-        return (h(Host, { key: 'f987cfc18bb86866781e0668516e86f89be6241b', "data-version": version, role: this.variant ? `${this.variant}item` : null }, this.url ? (h("a", { "aria-current": this.active ? 'page' : undefined, "aria-label": this.name, href: this.url, hrefLang: lang, lang: lang, onClick: () => this.emitChange(), onKeyDown: emitOnKeyDown }, h("slot", null))) : (h("button", { "aria-current": this.active ? 'true' : undefined, "aria-label": this.name, lang: lang, onClick: () => this.emitChange(), onKeyDown: emitOnKeyDown }, h("slot", null)))));
+        return (h(Host, { key: '23bf186d9cc718b2697cbc5bc54b44f6c9ead54f', "data-version": version, role: this.variant ? `${this.variant}item` : null }, this.url ? (h("a", { "aria-current": this.active ? 'page' : undefined, "aria-label": this.name, href: this.url, hrefLang: lang, lang: lang, onClick: () => this.emitChange(), onKeyDown: emitOnKeyDown }, h("slot", null))) : (h("button", { "aria-current": this.active ? 'true' : undefined, "aria-label": this.name, lang: lang, onClick: () => this.emitChange(), onKeyDown: emitOnKeyDown }, h("slot", null)))));
     }
     static get is() { return "post-language-option"; }
     static get originalStyleUrls() {
@@ -182,6 +189,21 @@ export class PostLanguageOption {
                     "resolved": "string",
                     "references": {}
                 }
+            }, {
+                "method": "postLanguageOptionInitiallyActive",
+                "name": "postLanguageOptionInitiallyActive",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "An event emitted when the language option is initially active. The payload is the ISO 639 code of the language."
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
             }];
     }
     static get methods() {

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

@@ -1 +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}
+: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:24px;width:24px}.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

@@ -19,52 +19,65 @@ export class PostLanguageSwitch {
     }
     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.hide();
+        // Initially set variants and active language
+        // Handles cases where the language-switch is rendered after the language-options have been rendered
+        this.updateChildrenVariant();
+        this.updateActiveLanguage();
+    }
+    handlePostChange(event) {
+        this.activeLang = event.detail;
+        // Update the active state in the children post-language-option components
+        this.languageOptions.forEach(lang => {
+            if (lang.code && lang.code === this.activeLang) {
+                lang.setAttribute('active', '');
             }
+            else {
+                lang.removeAttribute('active');
+            }
+        });
+        // Hides the dropdown when an option has been clicked
+        if (this.variant === 'menu') {
+            const menu = this.host.shadowRoot.querySelector('post-menu');
+            menu.hide();
+        }
+    }
+    /**
+     * Handles cases where the language switch is being rendered before options are available
+     * @param event Initially emitted by <post-langauge-option>
+     */
+    handleInitiallyActive(event) {
+        this.activeLang = event.detail;
+    }
+    get languageOptions() {
+        return this.host.querySelectorAll('post-language-option');
+    }
+    get activeLanguageOption() {
+        return this.host.querySelector('post-language-option[active]:not([active="false"])');
+    }
+    handleSlotChange() {
+        this.updateActiveLanguage();
+    }
+    updateActiveLanguage() {
+        this.activeLang = this.activeLanguageOption.getAttribute('code');
+    }
+    // Update post-language-option variant to have the correct style
+    updateChildrenVariant() {
+        this.languageOptions.forEach(el => {
+            el.setAttribute('variant', this.variant);
         });
     }
     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))));
+        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", { onSlotchange: () => this.handleSlotChange() }))));
     }
     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))));
+        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", { onSlotchange: () => this.handleSlotChange() }))));
     }
     render() {
         return this.variant === 'list' ? this.renderList() : this.renderDropdown();
@@ -161,4 +174,19 @@ export class PostLanguageSwitch {
                 "methodName": "validateVariant"
             }];
     }
+    static get listeners() {
+        return [{
+                "name": "postChange",
+                "method": "handlePostChange",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "postLanguageOptionInitiallyActive",
+                "method": "handleInitiallyActive",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
 }

package/dist/components/package.js

@@ -1,3 +1,3 @@
-const version = "9.0.0-next.23";
+const version = "9.0.0-next.24";
 
 export { version as v };

package/dist/components/post-language-option2.js

@@ -11,6 +11,7 @@ const PostLanguageOption = /*@__PURE__*/ proxyCustomElement(class PostLanguageOp
         super();
         this.__registerHost();
         this.postChange = createEvent(this, "postChange", 7);
+        this.postLanguageOptionInitiallyActive = createEvent(this, "postLanguageOptionInitiallyActive", 7);
         this.code = undefined;
         this.active = undefined;
         this.variant = undefined;
@@ -38,11 +39,18 @@ const PostLanguageOption = /*@__PURE__*/ proxyCustomElement(class PostLanguageOp
         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.');
         }
+        if (this.active) {
+            this.postLanguageOptionInitiallyActive.emit(this.code);
+        }
     }
     /**
      * An event emitted when the language option is clicked. The payload is the ISO 639 code of the language.
      */
     postChange;
+    /**
+     * An event emitted when the language option is initially active. The payload is the ISO 639 code of the language.
+     */
+    postLanguageOptionInitiallyActive;
     /**
      * Selects the language option programmatically.
      */
@@ -63,7 +71,7 @@ const PostLanguageOption = /*@__PURE__*/ proxyCustomElement(class PostLanguageOp
                 this.emitChange();
             }
         };
-        return (h(Host, { key: 'f987cfc18bb86866781e0668516e86f89be6241b', "data-version": version, role: this.variant ? `${this.variant}item` : null }, this.url ? (h("a", { "aria-current": this.active ? 'page' : undefined, "aria-label": this.name, href: this.url, hrefLang: lang, lang: lang, onClick: () => this.emitChange(), onKeyDown: emitOnKeyDown }, h("slot", null))) : (h("button", { "aria-current": this.active ? 'true' : undefined, "aria-label": this.name, lang: lang, onClick: () => this.emitChange(), onKeyDown: emitOnKeyDown }, h("slot", null)))));
+        return (h(Host, { key: '23bf186d9cc718b2697cbc5bc54b44f6c9ead54f', "data-version": version, role: this.variant ? `${this.variant}item` : null }, this.url ? (h("a", { "aria-current": this.active ? 'page' : undefined, "aria-label": this.name, href: this.url, hrefLang: lang, lang: lang, onClick: () => this.emitChange(), onKeyDown: emitOnKeyDown }, h("slot", null))) : (h("button", { "aria-current": this.active ? 'true' : undefined, "aria-label": this.name, lang: lang, onClick: () => this.emitChange(), onKeyDown: emitOnKeyDown }, h("slot", null)))));
     }
     static get watchers() { return {
         "code": ["validateCode"],