@swisspost/design-system-components 10.0.0-next.39 → 10.0.0-next.41

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

@@ -16,13 +16,14 @@ const ANIMATION_KEYS = [...ANIMATION_NAMES];
  */
 export class PostIcon {
     constructor() {
-        this.animation = undefined;
-        this.base = undefined;
+        /**
+         * When set to `true`, the icon will be flipped horizontally.
+         */
         this.flipH = false;
+        /**
+         * When set to `true`, the icon will be flipped vertically.
+         */
         this.flipV = false;
-        this.name = undefined;
-        this.rotate = undefined;
-        this.scale = undefined;
     }
     validateAnimation() {
         checkEmptyOrOneOf(this, 'animation', ANIMATION_KEYS);
@@ -39,55 +40,52 @@ export class PostIcon {
     validateScale() {
         checkEmptyOrType(this, 'scale', 'number');
     }
-    // Construct the icon url from different possible sources
+    // Construct the icon URL according to the following rules:
+    // - URL = current domain + base[href] + meta[data-post-icon-base] (or component base)
+    // - If base[href] is not relative, it's used instead of current domain + base[href]
+    // - If meta[data-post-icon-base] (or component base) is not relative, it's used as is
     getUrl() {
-        let url;
-        const file = `${this.name}.svg`;
-        // the first definition object which defines a domain, will be used to set the domain of the file url
-        // the first definition object which defines a slug, will be used to set the slug of the file url
-        const urlDefinitions = [this.getUrlDefinition(this.base, 'both')];
-        if (IS_BROWSER) {
-            urlDefinitions.push(this.getUrlDefinition(document.head
-                .querySelector('meta[name="design-system-settings"][data-post-icon-base]')
-                ?.getAttribute('data-post-icon-base'), 'relative'));
-            urlDefinitions.push(this.getUrlDefinition(document.querySelector('base[href]')?.getAttribute('href'), 'both'));
+        const fileName = `${this.name}.svg`;
+        if (!IS_BROWSER && !this.base) {
+            return `${CDN_URL}${fileName}`;
         }
-        // in case no definition defines a domain, a relative url is used to load the icon
-        const origin = urlDefinitions.find(d => d.definesDomain)?.url?.origin;
-        // in case no definition defines a slug either, the cdn url is used as a fallback
-        const slug = urlDefinitions.find(d => d.definesSlug)?.url?.pathname;
-        if (origin && slug) {
-            url = `${origin}${slug}${file}`;
+        const currentDomain = IS_BROWSER ? window.location.origin : '';
+        const baseHref = IS_BROWSER
+            ? document.querySelector('base[href]')?.getAttribute('href') || ''
+            : '';
+        const isBaseHrefAbsolute = /^https?:\/\//.test(baseHref);
+        const metaIconBase = IS_BROWSER
+            ? document
+                .querySelector('meta[name="design-system-settings"]')
+                ?.getAttribute('data-post-icon-base') || ''
+            : '';
+        const iconBase = this.base || metaIconBase;
+        const isIconBaseAbsolute = /^https?:\/\//.test(iconBase);
+        const normalizedBaseHref = normalizeUrl(baseHref);
+        const normalizedIconBase = normalizeUrl(iconBase);
+        function normalizeUrl(url) {
+            if (!url)
+                return '';
+            return url.endsWith('/') ? url : `${url}/`;
         }
-        else if (!origin && slug) {
-            url = `${slug}${file}`;
+        let url;
+        if (isIconBaseAbsolute) {
+            // If icon base is absolute, use it as is
+            url = `${normalizedIconBase}${fileName}`;
         }
-        else {
-            url = `${CDN_URL}${file}`;
+        else if (isBaseHrefAbsolute) {
+            // If baseHref is absolute, don't use current domain
+            url = `${normalizedBaseHref}${normalizedIconBase}${fileName}`;
         }
-        return url;
-    }
-    getUrlDefinition(url, allow) {
-        return {
-            url: this.getUrlObject(url),
-            definesDomain: allow !== 'relative' ? this.definesDomain(url) : false,
-            definesSlug: allow !== 'absolute' ? this.definesSlug(url) : false,
-        };
-    }
-    getUrlObject(url) {
-        if (url) {
-            url = url?.endsWith('/') ? url : `${url}/`;
-            return new URL(url, 'https://url.base');
+        else if (iconBase || baseHref) {
+            // Standard case: domain + baseHref + iconBase
+            url = `${currentDomain}${normalizedBaseHref}${normalizedIconBase}${fileName}`;
         }
         else {
-            return null;
+            // Fallback to CDN if no paths are specified
+            url = `${CDN_URL}${fileName}`;
         }
-    }
-    definesDomain(url) {
-        return url ? /^https?:\/\//.test(url) : false;
-    }
-    definesSlug(url) {
-        return Boolean(/^\/.+/.test(this.getUrlObject(url)?.pathname));
+        return url.replace(/([^:])\/\//g, '$1/');
     }
     getStyles() {
         const url = this.getUrl();
@@ -108,7 +106,7 @@ export class PostIcon {
         this.validateAnimation();
     }
     render() {
-        return (h(Host, { key: 'bc29680e4693c5a18416de667c826c1d57075e15', "data-version": version }, h("span", { key: 'b49082668fa3a97bba5a2ffe791c51e9c56deb4e', style: this.getStyles() })));
+        return (h(Host, { key: '1427e07f64159df95922a2e79343447675183c3c', "data-version": version }, h("span", { key: 'a83eadbc13d9c5876d135cd5282cfa451951d2fe', style: this.getStyles() })));
     }
     static get is() { return "post-icon"; }
     static get encapsulation() { return "shadow"; }
@@ -126,6 +124,7 @@ export class PostIcon {
         return {
             "animation": {
                 "type": "string",
+                "attribute": "animation",
                 "mutable": false,
                 "complexType": {
                     "original": "Animation",
@@ -143,11 +142,13 @@ export class PostIcon {
                     "tags": [],
                     "text": "The name of the animation."
                 },
-                "attribute": "animation",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "base": {
                 "type": "string",
+                "attribute": "base",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -160,11 +161,13 @@ export class PostIcon {
                     "tags": [],
                     "text": "The base path, where the icons are located (must be a public url).<br/>Leave this field empty to use the default cdn url."
                 },
-                "attribute": "base",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "flipH": {
                 "type": "boolean",
+                "attribute": "flip-h",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -177,12 +180,14 @@ export class PostIcon {
                     "tags": [],
                     "text": "When set to `true`, the icon will be flipped horizontally."
                 },
-                "attribute": "flip-h",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "false"
             },
             "flipV": {
                 "type": "boolean",
+                "attribute": "flip-v",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -195,12 +200,14 @@ export class PostIcon {
                     "tags": [],
                     "text": "When set to `true`, the icon will be flipped vertically."
                 },
-                "attribute": "flip-v",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "false"
             },
             "name": {
                 "type": "string",
+                "attribute": "name",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -213,11 +220,13 @@ export class PostIcon {
                     "tags": [],
                     "text": "The name/id of the icon (e.g. 1000, 1001, ...)."
                 },
-                "attribute": "name",
+                "getter": false,
+                "setter": false,
                 "reflect": true
             },
             "rotate": {
                 "type": "number",
+                "attribute": "rotate",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -230,11 +239,13 @@ export class PostIcon {
                     "tags": [],
                     "text": "The number of degree for the css rotate transformation."
                 },
-                "attribute": "rotate",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "scale": {
                 "type": "number",
+                "attribute": "scale",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -247,7 +258,8 @@ export class PostIcon {
                     "tags": [],
                     "text": "The number for the css scale transformation."
                 },
-                "attribute": "scale",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             }
         };

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

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

@@ -6,13 +6,6 @@ import { SWITCH_VARIANTS } from "../post-language-switch/switch-variants";
  * @slot default - Slot for placing the content inside the anchor or button.
  */
 export class PostLanguageOption {
-    constructor() {
-        this.code = undefined;
-        this.active = undefined;
-        this.variant = undefined;
-        this.name = undefined;
-        this.url = undefined;
-    }
     validateCode() {
         checkRequiredAndType(this, 'code', 'string');
     }
@@ -51,12 +44,13 @@ export class PostLanguageOption {
     }
     render() {
         const lang = this.code.toLowerCase();
+        const role = this.variant === 'menu' ? 'menuitem' : undefined;
         const emitOnKeyDown = (e) => {
             if (e.key === 'Enter' || e.key === ' ') {
                 this.emitChange();
             }
         };
-        return (h(Host, { key: '71cc893d3f8a09813ada641c8d4511e5d55df593', "data-version": version }, 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: '9e1364dd3214a5bec9d4fa7e4c794d2d3baa7796', "data-version": version }, this.url ? (h("a", { role: role, "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", { role: role, "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 originalStyleUrls() {
@@ -73,6 +67,7 @@ export class PostLanguageOption {
         return {
             "code": {
                 "type": "string",
+                "attribute": "code",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -85,11 +80,13 @@ export class PostLanguageOption {
                     "tags": [],
                     "text": "The ISO 639 language code, formatted according to [RFC 5646 (also known as BCP 47)](https://datatracker.ietf.org/doc/html/rfc5646). For example, \"de\"."
                 },
-                "attribute": "code",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "active": {
                 "type": "boolean",
+                "attribute": "active",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -102,11 +99,13 @@ export class PostLanguageOption {
                     "tags": [],
                     "text": "If set to `true`, the language option is considered the current language for the page."
                 },
-                "attribute": "active",
+                "getter": false,
+                "setter": false,
                 "reflect": true
             },
             "variant": {
                 "type": "string",
+                "attribute": "variant",
                 "mutable": false,
                 "complexType": {
                     "original": "SwitchVariant",
@@ -125,11 +124,13 @@ export class PostLanguageOption {
                     "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."
                 },
-                "attribute": "variant",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "name": {
                 "type": "string",
+                "attribute": "name",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -142,11 +143,13 @@ export class PostLanguageOption {
                     "tags": [],
                     "text": "The full name of the language. For example, \"Deutsch\"."
                 },
-                "attribute": "name",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "url": {
                 "type": "string",
+                "attribute": "url",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -159,7 +162,8 @@ export class PostLanguageOption {
                     "tags": [],
                     "text": "The URL used for the href attribute of the internal anchor.\nThis field is optional; if not provided, a button will be used internally instead of an anchor."
                 },
-                "attribute": "url",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             }
         };

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-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}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.post-language-switch-trigger{border:1px solid ButtonBorder}.post-language-switch-trigger[aria-expanded=true] post-icon,.post-language-switch-trigger:hover post-icon{color:HighlightText}}
+:host{display:flex !important;flex-wrap:wrap;gap:.5rem}.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}.post-language-switch-dropdown-container{display:flex;flex-direction:column}.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}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.post-language-switch-trigger{border:1px solid ButtonBorder}.post-language-switch-trigger[aria-expanded=true] post-icon,.post-language-switch-trigger:hover post-icon{color:HighlightText}}post-menu::part(menu){padding-block:0}

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

@@ -1,15 +1,26 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+        r = Reflect.decorate(decorators, target, key, desc);
+    else
+        for (var i = decorators.length - 1; i >= 0; i--)
+            if (d = decorators[i])
+                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
 import { Host, h } from "@stencil/core";
-import { checkRequiredAndType, checkEmptyOrOneOf, eventGuard } from "../../utils/index";
+import { checkRequiredAndType, checkEmptyOrOneOf, EventFrom } from "../../utils/index";
 import { version } from "../../../../package";
 import { SWITCH_VARIANTS } from "./switch-variants";
 import { nanoid } from "nanoid";
 export class PostLanguageSwitch {
     constructor() {
         this.menuId = `p${nanoid(11)}`;
-        this.caption = undefined;
-        this.description = undefined;
+        this.listSpanId = `list-span-${nanoid(11)}`;
+        /**
+         * Whether the component is rendered as a list or a menu
+         */
         this.variant = 'list';
-        this.activeLang = undefined;
     }
     get languageOptions() {
         return Array.from(this.host.querySelectorAll('post-language-option'));
@@ -36,23 +47,21 @@ export class PostLanguageSwitch {
      * Listen for the postChange event and guard it to run only for events originating from a <post-language-option> element.
      */
     handlePostChange(event) {
-        eventGuard(this.host, event, { targetLocalName: 'post-language-option', delegatorSelector: 'post-language-switch' }, () => {
-            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();
+        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
@@ -65,13 +74,14 @@ export class PostLanguageSwitch {
     updateChildrenVariant() {
         this.languageOptions.forEach(el => {
             el.setAttribute('variant', this.variant);
+            el.setAttribute('role', this.variant == 'menu' ? 'menuitem' : 'listitem');
         });
     }
     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 }, 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))));
     }
     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" }, 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", "aria-label": this.caption, role: "menu" }, h("slot", null))));
     }
     render() {
         return this.variant === 'list' ? this.renderList() : this.renderDropdown();
@@ -92,6 +102,7 @@ export class PostLanguageSwitch {
         return {
             "caption": {
                 "type": "string",
+                "attribute": "caption",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -104,11 +115,13 @@ export class PostLanguageSwitch {
                     "tags": [],
                     "text": "A title for the list of language options"
                 },
-                "attribute": "caption",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "description": {
                 "type": "string",
+                "attribute": "description",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -121,11 +134,13 @@ export class PostLanguageSwitch {
                     "tags": [],
                     "text": "A descriptive text for the list of language options"
                 },
-                "attribute": "description",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "variant": {
                 "type": "string",
+                "attribute": "variant",
                 "mutable": false,
                 "complexType": {
                     "original": "SwitchVariant",
@@ -144,7 +159,8 @@ export class PostLanguageSwitch {
                     "tags": [],
                     "text": "Whether the component is rendered as a list or a menu"
                 },
-                "attribute": "variant",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "'list'"
             }
@@ -184,3 +200,6 @@ export class PostLanguageSwitch {
             }];
     }
 }
+__decorate([
+    EventFrom('post-language-option')
+], PostLanguageSwitch.prototype, "handlePostChange", null);

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

@@ -12,7 +12,7 @@ export class PostLinkarea {
         interactiveElement.dispatchEvent(new MouseEvent('click', { ctrlKey, shiftKey, altKey, metaKey }));
     }
     render() {
-        return (h(Host, { key: '56e4b032fa8976cc120bff5f1c36d55167e54e98', "data-version": version, onClick: (e) => this.dispatchClick(e), tabindex: "0" }, h("slot", { key: '25568fab2a47d765757c00fbee4f2999c1da16d1' })));
+        return (h(Host, { key: '46d960a93232dd7ae0c64b2daa74691b9c4f90f7', "data-version": version, onClick: (e) => this.dispatchClick(e), tabindex: "0" }, h("slot", { key: 'b470ddbc2752f1bfe44ca218851c461d505c9234' })));
     }
     static get is() { return "post-linkarea"; }
     static get encapsulation() { return "shadow"; }

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

@@ -7,8 +7,13 @@ import { nanoid } from "nanoid";
  */
 export class PostList {
     constructor() {
-        this.titleId = undefined;
+        /**
+         * If `true`, the list title will be hidden. Otherwise, it will be displayed.`
+         */
         this.titleHidden = false;
+        /**
+         * The list can become horizontal by setting `horizontal="true"` or just `horizontal`
+         */
         this.horizontal = false;
     }
     componentWillLoad() {
@@ -26,7 +31,7 @@ export class PostList {
         }
     }
     render() {
-        return (h(Host, { key: 'b003aa61735359b6a1d95aad8d29c609d5bb3c8b', "data-version": version }, h("div", { key: '2f69a2c72dd357767735e10d16f1b7586da6d5a3', ref: el => (this.titleEl = el), id: this.titleId, class: `list-title${this.titleHidden ? ' visually-hidden' : ''}` }, h("slot", { key: '3982783d438519673a676323339a013d3edb84db' })), h("div", { key: 'b8a91c4430774f019cc46aa19393e2a1566204a5', role: "list", "aria-labelledby": this.titleId }, h("slot", { key: '378a51785c4d52df8ae422657a16e8295b405149', name: "post-list-item" }))));
+        return (h(Host, { key: '9c840e19d92cb7417aaa8395a1d15248dbe274dc', "data-version": version }, h("div", { key: '973c24857b843c96ae41e6937042ca968bf16d09', ref: el => (this.titleEl = el), id: this.titleId, class: `list-title${this.titleHidden ? ' visually-hidden' : ''}` }, h("slot", { key: '594403d0d7ce9bdf7d7b2b6a5bd6a4b75f305ac2' })), h("div", { key: '76cb68b6913f8a574c998d9554a68788170a5fa1', role: "list", "aria-labelledby": this.titleId }, h("slot", { key: '3b7f42ddec020297ac1bdd615274089bc4300f09', name: "post-list-item" }))));
     }
     static get is() { return "post-list"; }
     static get originalStyleUrls() {
@@ -43,6 +48,7 @@ export class PostList {
         return {
             "titleHidden": {
                 "type": "boolean",
+                "attribute": "title-hidden",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -55,12 +61,14 @@ export class PostList {
                     "tags": [],
                     "text": "If `true`, the list title will be hidden. Otherwise, it will be displayed.`"
                 },
-                "attribute": "title-hidden",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "false"
             },
             "horizontal": {
                 "type": "boolean",
+                "attribute": "horizontal",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -73,7 +81,8 @@ export class PostList {
                     "tags": [],
                     "text": "The list can become horizontal by setting `horizontal=\"true\"` or just `horizontal`"
                 },
-                "attribute": "horizontal",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
                 "defaultValue": "false"
             }

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

@@ -8,7 +8,7 @@ export class PostListItem {
         this.host.setAttribute('slot', 'post-list-item');
     }
     render() {
-        return (h(Host, { key: 'c826293ea2a7446bea2f5b223934b444655198a0', role: "listitem", slot: "post-list-item", version: version }, h("slot", { key: 'b997f79da2fbc87fbc6a388c118a03c008ad2c23' })));
+        return (h(Host, { key: '83d78cdee7b19cd48bd2d601d4ae8fd288027918', role: "listitem", slot: "post-list-item", version: version }, h("slot", { key: '7b5900ae509b8ad98aa5e5d4f2053ee61889b140' })));
     }
     static get is() { return "post-list-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -5,9 +5,6 @@ import { checkEmptyOrUrl } from "../../utils/index";
  * @slot default - Slot for placing hidden descriptive text. If `url` is set, this text will serve as the accessible name of the link; otherwise, it will be used as the title of the SVG.
  */
 export class PostLogo {
-    constructor() {
-        this.url = undefined;
-    }
     validateUrl() {
         checkEmptyOrUrl(this, 'url');
     }
@@ -23,7 +20,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: '36074a2357157bd31772d526d800de9251e38513', "data-version": version }, h(LogoTag, { key: '5c4caa0e27bd6f6e8db02d8084c4586d7c0cc269', class: `logo ${logoLink ? 'logo-link' : ''}`, ...(logoLink ? { href: logoLink } : {}) }, h("span", { key: '7068754598529e69049af19d78f4ca0df95b8d37', class: "description" }, h("slot", { key: '36224f0bbc4fbc83039dcaf70149b45d7720ee96', onSlotchange: () => this.checkDescription() })), h("svg", { key: '3e959382c47fc2ac6b8d00ca0f4062f2bc24cb8e', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 72 72", "aria-hidden": "true" }, h("g", { key: 'ebcaac4e579e8e68bec7de577faca31835094c72', id: "Logo" }, h("rect", { key: '5098c504998e9b4426cfac36dc7854433736c865', fill: "#ffcc00", x: "0", y: "0", width: "72", height: "72" }), h("polygon", { key: '45ecebafbf6223c2678c4d0164187419350df0a4', 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: '52674edd552289f2ad7be6bf7ad7c9cb1128aaf6', 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: 'acbb3910083a3a8ba6250096f2a7330c0bae19bc', "data-version": version }, h(LogoTag, { key: 'db6e237031f4d58e50cf56e9bd63124e9b8811d8', class: `logo ${logoLink ? 'logo-link' : ''}`, ...(logoLink ? { href: logoLink } : {}) }, h("span", { key: '439f8c6fca5647bf36eab69361089bba97830933', class: "description" }, h("slot", { key: 'fbbd95d221c91dd6a22823802cbcd680fb3d2210', onSlotchange: () => this.checkDescription() })), h("svg", { key: '4c12add52030e6bb414246acb073b4b5cb88cd8f', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 72 72", "aria-hidden": "true" }, h("g", { key: 'a103907694067c20eff3db5695a85daa78f8e293', id: "Logo" }, h("rect", { key: 'bba502be5b0598df7a7a9be11ec878c4c98f813e', fill: "#ffcc00", x: "0", y: "0", width: "72", height: "72" }), h("polygon", { key: 'd5b8cdf3ba35ff13ac037a59347f5decbd5266fe', 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: '4dd42726bd15f4a47054e79c4b66093a5f1d088a', 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"; }
@@ -41,6 +38,7 @@ export class PostLogo {
         return {
             "url": {
                 "type": "string",
+                "attribute": "url",
                 "mutable": false,
                 "complexType": {
                     "original": "string | URL",
@@ -58,7 +56,8 @@ export class PostLogo {
                     "tags": [],
                     "text": "The URL to which the user is redirected upon clicking the logo."
                 },
-                "attribute": "url",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             }
         };