@swisspost/design-system-components 9.0.0-next.12 → 9.0.0-next.14

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

@@ -1,7 +1,8 @@
-import { h, Host } from "@stencil/core";
+import { h, Host, } from "@stencil/core";
 import { throttle } from "throttle-debounce";
 import { version } from "../../../../package";
 import { slideDown, slideUp } from "../../animations/slide";
+import { getFocusableChildren } from "../../utils/get-focusable-children";
 /**
  * @slot post-logo - Should be used together with the `<post-logo>` component.
  * @slot meta-navigation - Holds an `<ul>` with meta navigation links.
@@ -12,23 +13,41 @@ import { slideDown, slideUp } from "../../animations/slide";
  * @slot post-mainnavigation - Has a default slot because it's only meant to be used in the `<post-header>`.
  */
 export class PostHeader {
-    constructor() {
-        this.scrollParent = null;
-        this.throttledScroll = () => this.handleScrollEvent();
-        this.throttledResize = throttle(50, () => this.handleResize());
-        this.device = null;
-        this.mobileMenuExtended = false;
-    }
+    firstFocusableEl;
+    lastFocusableEl;
+    scrollParent = null;
+    mobileMenu;
+    mobileMenuAnimation;
+    throttledScroll = () => this.handleScrollEvent();
+    throttledResize = throttle(50, () => this.handleResize());
     componentWillRender() {
         this.scrollParent = this.getScrollParent(this.host);
         this.scrollParent.addEventListener('scroll', this.throttledScroll, { passive: true });
         window.addEventListener('resize', this.throttledResize, { passive: true });
         this.handleResize();
         this.handleScrollEvent();
+        this.getFocusableElements();
     }
+    host;
+    device = null;
+    mobileMenuExtended = false;
     frozeBody(isMobileMenuExtended) {
         document.body.style.overflow = isMobileMenuExtended ? 'hidden' : '';
+        if (isMobileMenuExtended) {
+            this.host.addEventListener('keydown', e => {
+                this.keyboardHandler(e);
+            });
+        }
+        else {
+            this.host.removeEventListener('keydown', e => {
+                this.keyboardHandler(e);
+            });
+        }
     }
+    /**
+     * An event emitted when the device has changed
+     */
+    postUpdateDevice;
     /**
      * Toggles the mobile navigation.
      */
@@ -48,6 +67,36 @@ export class PostHeader {
         if (!this.mobileMenuExtended)
             await this.mobileMenuAnimation.finished;
     }
+    // Get all the focusable elements in the post-header mobile menu
+    getFocusableElements() {
+        // Get elements in the correct order (different as the DOM order)
+        const focusableEls = [
+            ...Array.from(this.host.querySelectorAll('.list-inline:not([slot="meta-navigation"]) > li')),
+            ...Array.from(this.host.querySelectorAll('nav > post-list > div > post-list-item, post-mainnavigation > .back-button, post-megadropdown-trigger')),
+            ...Array.from(this.host.querySelectorAll('.list-inline[slot="meta-navigation"] > li, post-language-option')),
+        ];
+        // Add the main toggle menu button to the list of focusable children
+        const focusableChildren = [
+            this.host.querySelector('post-togglebutton'),
+            ...focusableEls.flatMap(el => Array.from(getFocusableChildren(el))),
+        ];
+        this.firstFocusableEl = focusableChildren[0];
+        this.lastFocusableEl = focusableChildren[focusableChildren.length - 1];
+    }
+    keyboardHandler(e) {
+        if (e.key === 'Tab' && this.mobileMenuExtended) {
+            if (e.shiftKey && document.activeElement === this.firstFocusableEl) {
+                // If back tab (Tab + Shift) and first element is focused, focus goes to the last element of the megadropdown
+                e.preventDefault();
+                this.lastFocusableEl.focus();
+            }
+            else if (!e.shiftKey && document.activeElement === this.lastFocusableEl) {
+                // If Tab and last element is focused, focus goes back to the first element of the megadropdown
+                e.preventDefault();
+                this.firstFocusableEl.focus();
+            }
+        }
+    }
     handleScrollEvent() {
         // Credits: "https://github.com/qeremy/so/blob/master/so.dom.js#L426"
         const st = Math.max(0, this.scrollParent instanceof Document
@@ -79,10 +128,9 @@ export class PostHeader {
         });
     }
     handleResize() {
-        var _a;
         const previousDevice = this.device;
         let newDevice;
-        const width = window === null || window === void 0 ? void 0 : window.innerWidth;
+        const width = window?.innerWidth;
         if (width >= 1024) {
             newDevice = 'desktop';
         }
@@ -97,27 +145,30 @@ export class PostHeader {
             this.toggleMobileMenu();
             this.mobileMenuAnimation.finish(); // no animation
         }
-        const mhh = (_a = this.host.shadowRoot.querySelector('.title-header')) === null || _a === void 0 ? void 0 : _a.clientHeight;
+        const mhh = this.host.shadowRoot.querySelector('.local-header')?.clientHeight;
         this.host.style.setProperty('--main-header-height', `${mhh}px`);
         // Apply only on change for doing work only when necessary
         if (newDevice !== previousDevice) {
             this.device = newDevice;
+            this.postUpdateDevice.emit(this.device);
             window.requestAnimationFrame(() => {
                 this.switchLanguageSwitchMode();
             });
         }
     }
     switchLanguageSwitchMode() {
-        var _a;
         const variant = this.device === 'desktop' ? 'menu' : 'list';
-        (_a = this.host.querySelector('post-language-switch')) === null || _a === void 0 ? void 0 : _a.setAttribute('variant', variant);
+        this.host.querySelector('post-language-switch')?.setAttribute('variant', variant);
     }
-    render() {
+    renderNavigation() {
         const navigationClasses = ['navigation'];
         if (this.mobileMenuExtended) {
             navigationClasses.push('extended');
         }
-        return (h(Host, { key: '008e84568ce41249365d93169b2f94cd988601d0', version: version }, h("div", { key: 'f6415c30b3bfacd01a65166c7f0a3afc37676cc8', class: "global-header" }, h("div", { key: 'dc1465a3a68ce8c66c7da644d992c37d8d09ccc4', class: "global-sub" }, h("div", { key: '490b4afe502465bc20ccc41149533929987f2fab', class: "logo" }, h("slot", { key: '28ee1cdb2804f6315fffa2c319a1e2fa1e54ad08', name: "post-logo" }))), h("div", { key: '777d715f4718bb6738665f3d65c9ee4729a977de', class: "global-sub" }, this.device === 'desktop' && h("slot", { key: 'c1ddbfdecc96fe3a6efb930d8475ee880059d372', name: "meta-navigation" }), h("slot", { key: 'df1ccf5c36ea4a05812c3983961389c42c42ddb9', name: "global-controls" }), this.device === 'desktop' && h("slot", { key: 'ace2dda9a3f3d898934c7d47c84e2475fb555e5d', name: "post-language-switch" }), h("div", { key: '3e8d94d9534d5daaa2f8e6ca5cc0833e78a49224', onClick: () => this.toggleMobileMenu(), class: "mobile-toggle" }, h("slot", { key: '58e3637f103411f5e577dba931caf884f46a6e47', name: "post-togglebutton" })))), h("div", { key: 'f90ff065ed795fc780c90768e5c0ab5a431bec8d', class: 'title-header ' + (this.mobileMenuExtended ? 'title-header-mobile-extended' : '') }, h("slot", { key: 'a1aaaf02da073b9e7de82e84c93745afa6a8c4e9', name: "title" }), h("div", { key: '84ae2f8b846536130967362de160e054049c8489', class: "global-sub" }, h("slot", { key: '8a845cd7f87b3a2c2fba7ffc1ace31e87f6329d9', name: "local-controls" }), h("slot", { key: 'f3822b883fc88436a84d3ca7f840946af992417e' }))), h("div", { key: '8e0390c6c2b9a71488eea73c9207d0c336c9b75d', ref: el => (this.mobileMenu = el), class: navigationClasses.join(' ') }, h("slot", { key: '5fc2db060eb962c313fc4c9ab67032e990ff54c6', name: "post-mainnavigation" }), (this.device === 'mobile' || this.device === 'tablet') && (h("div", { key: '7b9147dcf5de01865785d417c8d1966efb891ace', class: "navigation-footer" }, h("slot", { key: '6e163a7dad7b0b0fc02493cd15152179d4242980', name: "meta-navigation" }), h("slot", { key: 'e8fd19eeed8a99d69ccd8635e36cd0256ed4424b', name: "post-language-switch" }))))));
+        return (h("div", { ref: el => (this.mobileMenu = el), class: navigationClasses.join(' ') }, h("slot", { name: "post-mainnavigation" }), (this.device === 'mobile' || this.device === 'tablet') && (h("div", { class: "navigation-footer" }, h("slot", { name: "meta-navigation" }), h("slot", { name: "post-language-switch" })))));
+    }
+    render() {
+        return (h(Host, { key: 'efbf8028f2abf376f497081996dba759f5885630', version: version }, h("div", { key: 'ecaaea274045453ce869f36e8a1155626b1818ba', class: "global-header" }, h("div", { key: '2fda0d65321ad1cbbc47b731f095e0d9b6694d99', class: "global-sub" }, h("div", { key: '24864d5f18c9d923717cc2e996395cff3bd6ce8b', class: "logo" }, h("slot", { key: 'ba82d7f62bb845732fe6066bcdc7eef15913c9e6', name: "post-logo" }))), h("div", { key: 'a0ddea4e564fca1e286998c73fea75eb8c228428', class: "global-sub" }, this.device === 'desktop' && h("slot", { key: '0d7aa11452eb69fe28914ff7787c6dc206fd4009', name: "meta-navigation" }), h("slot", { key: 'e92b7b9db6e16e8fcecb1ca74efa63942dd542c5', name: "global-controls" }), this.device === 'desktop' && h("slot", { key: 'c68984037a71d5ac54828f6cf2367c3b07e428fc', name: "post-language-switch" }), h("div", { key: '70fb5040dc2f000c2afa286bb673ae9cf88521cf', onClick: () => this.toggleMobileMenu(), class: "mobile-toggle" }, h("slot", { key: '509fb81812262cd9efdb3a562e48f72b0d29e376', name: "post-togglebutton" })))), h("div", { key: '393d1040bad2f85caced5b4a8ff02e30fa5fd5f1', class: 'local-header ' + (this.mobileMenuExtended ? 'local-header-mobile-extended' : '') }, h("slot", { key: '786cc114aae985a0612d3cb044684290e3026462', name: "title" }), h("div", { key: 'd4f68653a09bbf0b222873ed5d23fec6ba9d8f6f', class: "local-sub" }, h("slot", { key: '0ad7dda5490964e9a8eae5e0bf66a117882f7a06', name: "local-controls" }), h("slot", { key: 'bddc01c7696f456c38c200b330767a0f1b353d88' })), this.device === 'desktop' && this.renderNavigation()), this.device !== 'desktop' && this.renderNavigation()));
     }
     static get is() { return "post-header"; }
     static get encapsulation() { return "shadow"; }
@@ -137,6 +188,30 @@ export class PostHeader {
             "mobileMenuExtended": {}
         };
     }
+    static get events() {
+        return [{
+                "method": "postUpdateDevice",
+                "name": "postUpdateDevice",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "An event emitted when the device has changed"
+                },
+                "complexType": {
+                    "original": "DEVICE_SIZE",
+                    "resolved": "\"desktop\" | \"mobile\" | \"tablet\"",
+                    "references": {
+                        "DEVICE_SIZE": {
+                            "location": "local",
+                            "path": "/home/runner/work/design-system/design-system/packages/components/src/components/post-header/post-header.tsx",
+                            "id": "src/components/post-header/post-header.tsx::DEVICE_SIZE"
+                        }
+                    }
+                }
+            }];
+    }
     static get methods() {
         return {
             "toggleMobileMenu": {

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

@@ -15,54 +15,110 @@ const ANIMATION_KEYS = [...ANIMATION_NAMES];
  * @class PostIcon - representing a stencil component
  */
 export class PostIcon {
-    constructor() {
-        this.animation = null;
-        this.base = null;
-        this.flipH = false;
-        this.flipV = false;
-        this.name = undefined;
-        this.rotate = null;
-        this.scale = null;
-    }
+    host;
+    /**
+     * The name of the animation.
+     */
+    animation = null;
     validateAnimation(newValue = this.animation) {
         if (newValue !== undefined)
             checkEmptyOrOneOf(newValue, ANIMATION_KEYS, `The post-icon "animation" prop requires one of the following values: ${ANIMATION_KEYS.join(', ')}.`);
     }
+    /**
+     * The base path, where the icons are located (must be a public url).<br/>Leave this field empty to use the default cdn url.
+     */
+    base = null;
     validateBase(newValue = this.base) {
         checkEmptyOrType(newValue, 'string', 'The post-icon "base" prop should be a string.');
     }
+    /**
+     * When set to `true`, the icon will be flipped horizontally.
+     */
+    flipH = false;
     validateFlipH(newValue = this.flipH) {
         checkEmptyOrType(newValue, 'boolean', 'The post-icon "flipH" prop should be a boolean.');
     }
+    /**
+     * When set to `true`, the icon will be flipped vertically.
+     */
+    flipV = false;
     validateFlipV(newValue = this.flipV) {
         checkEmptyOrType(newValue, 'boolean', 'The post-icon "flipV" prop should be a boolean.');
     }
+    /**
+     * The name/id of the icon (e.g. 1000, 1001, ...).
+     */
+    name;
     validateName(newValue = this.name) {
         checkNonEmpty(newValue, 'The post-icon "name" prop is required!.');
         checkType(newValue, 'string', 'The post-icon "name" prop should be a string.');
     }
+    /**
+     * The number of degree for the css rotate transformation.
+     */
+    rotate = null;
     validateRotate(newValue = this.rotate) {
         checkEmptyOrType(newValue, 'number', 'The post-icon "rotate" prop should be a number.');
     }
+    /**
+     * The number for the css scale transformation.
+     */
+    scale = null;
     validateScale(newValue = this.scale) {
         checkEmptyOrType(newValue, 'number', 'The post-icon "scale" prop should be a number.');
     }
-    getPath() {
-        var _a, _b, _c, _d, _e, _f;
-        // Construct icon path from different possible sources
-        const metaBase = (_b = (_a = document.head
-            .querySelector('meta[name="design-system-settings"][data-post-icon-base]')) === null || _a === void 0 ? void 0 : _a.getAttribute('data-post-icon-base')) !== null && _b !== void 0 ? _b : null;
-        const baseHref = (_c = document.getElementsByTagName('base')[0]) === null || _c === void 0 ? void 0 : _c.href;
-        const fileBase = `${(_f = (_e = (_d = this.base) !== null && _d !== void 0 ? _d : metaBase) !== null && _e !== void 0 ? _e : baseHref) !== null && _f !== void 0 ? _f : CDN_URL}/`.replace(/\/\/$/, '/');
-        const fileName = `${this.name}.svg`;
-        const filePath = `${fileBase}${fileName}`;
-        return new URL(filePath, window.location.origin).toString();
+    // Construct the icon url from different possible sources
+    getUrl() {
+        // the first definition object which defines a domain, will be used to set the domain of the file url
+        // the first definition object which defines a slug, will be used to set the slug of the file url
+        const urlDefinitions = [
+            getUrlDefinition(this.base, 'both'),
+            getUrlDefinition(document.head
+                .querySelector('meta[name="design-system-settings"][data-post-icon-base]')
+                ?.getAttribute('data-post-icon-base'), 'relative'),
+            getUrlDefinition(document.querySelector('base[href]')?.getAttribute('href'), 'both'),
+        ];
+        // in case no other definition defines a domain, the current origin is used as a fallback
+        const origin = urlDefinitions.find(d => d.definesDomain)?.url?.origin ?? window.location.origin;
+        // in case no other definition defines a slug, the cdn url is used as a fallback
+        const slug = urlDefinitions.find(d => d.definesSlug)?.url?.pathname;
+        const file = `${this.name}.svg`;
+        let url;
+        if (slug) {
+            url = new URL(`${origin}${slug}/${file}`).toString();
+        }
+        else {
+            url = new URL(`${CDN_URL}/${file}`).toString();
+        }
+        return url;
+        function getUrlDefinition(url, allow) {
+            return {
+                url: getUrlObject(url),
+                definesDomain: allow !== 'relative' ? definesDomain(url) : false,
+                definesSlug: allow !== 'absolute' ? definesSlug(url) : false,
+            };
+            function getUrlObject(url) {
+                if (url) {
+                    return definesDomain(url) ? new URL(url) : new URL(url, window.location.origin);
+                }
+                else {
+                    return null;
+                }
+            }
+            function definesDomain(url) {
+                return url ? /^https?:\/\//.test(url) : false;
+            }
+            function definesSlug(url) {
+                const urlObject = getUrlObject(url);
+                return Boolean(/^\/.+/.test(urlObject?.pathname));
+            }
+        }
     }
     getStyles() {
-        const path = this.getPath();
+        const url = this.getUrl();
         return Object.entries({
-            '-webkit-mask-image': `url(${path})`,
-            'mask-image': `url('${path}')`,
+            '-webkit-mask-image': `url(${url})`,
+            'mask-image': `url('${url}')`,
             'transform': (this.scale && !isNaN(Number(this.scale)) ? 'scale(' + this.scale + ')' : '') +
                 (this.rotate && !isNaN(Number(this.rotate)) ? ' rotate(' + this.rotate + 'deg)' : ''),
         })
@@ -79,7 +135,7 @@ export class PostIcon {
         this.validateAnimation();
     }
     render() {
-        return (h(Host, { key: '70e13e357929d2601de3b61f46f9a717ba491fd5', "data-version": version }, h("span", { key: 'a0c40175bfa6bd06f3498dc056685c8396b6e706', style: this.getStyles() })));
+        return (h(Host, { key: '6c494ba3cdd2ee173fa99a8ce8ff0e8ab5cf2979', "data-version": version }, h("span", { key: 'd9e0192a2788541b97bf3e25468129ac335d44b5', style: this.getStyles() })));
     }
     static get is() { return "post-icon"; }
     static get encapsulation() { return "shadow"; }
@@ -114,6 +170,8 @@ export class PostIcon {
                     "tags": [],
                     "text": "The name of the animation."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "animation",
                 "reflect": false,
                 "defaultValue": "null"
@@ -132,6 +190,8 @@ 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."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "base",
                 "reflect": false,
                 "defaultValue": "null"
@@ -150,6 +210,8 @@ export class PostIcon {
                     "tags": [],
                     "text": "When set to `true`, the icon will be flipped horizontally."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "flip-h",
                 "reflect": false,
                 "defaultValue": "false"
@@ -168,6 +230,8 @@ export class PostIcon {
                     "tags": [],
                     "text": "When set to `true`, the icon will be flipped vertically."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "flip-v",
                 "reflect": false,
                 "defaultValue": "false"
@@ -186,6 +250,8 @@ export class PostIcon {
                     "tags": [],
                     "text": "The name/id of the icon (e.g. 1000, 1001, ...)."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "name",
                 "reflect": false
             },
@@ -203,6 +269,8 @@ export class PostIcon {
                     "tags": [],
                     "text": "The number of degree for the css rotate transformation."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "rotate",
                 "reflect": false,
                 "defaultValue": "null"
@@ -221,6 +289,8 @@ export class PostIcon {
                     "tags": [],
                     "text": "The number for the css scale transformation."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "scale",
                 "reflect": false,
                 "defaultValue": "null"

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

@@ -5,22 +5,37 @@ import { version } from "../../../../package";
  * @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;
-    }
+    host;
+    /**
+     *  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".
+     */
+    code;
     validateCode(value = this.code) {
         checkType(value, 'string', 'The "code" property of the post-language-option component must be a string.');
     }
+    /**
+     * If set to `true`, the language option is considered the current language for the page.
+     */
+    active;
     validateActiveProp(value = this.active) {
         checkEmptyOrType(value, 'boolean', 'The "active" property of the post-language-option component must be a boolean value.');
     }
+    /**
+     * The variant of the post-language-switch parent (dynamically set by the parent)
+     */
+    variant;
+    /**
+     * The full name of the language. For example, "Deutsch".
+     */
+    name;
     validateName(value = this.name) {
         checkEmptyOrType(value, 'string', 'The "name" property of the post-language-option component must be a string.');
     }
+    /**
+     * The URL used for the href attribute of the internal anchor.
+     * This field is optional; if not provided, a button will be used internally instead of an anchor.
+     */
+    url;
     validateUrl(value = this.url) {
         checkEmptyOrType(value, 'string', 'The "url" property of the post-language-option component must be a valid URL.');
     }
@@ -33,6 +48,10 @@ export class PostLanguageOption {
             throw new Error('The "name" property of the post-language-option component is required when the full language name is not displayed.');
         }
     }
+    /**
+     * An event emitted when the language option is clicked. The payload is the ISO 639 code of the language.
+     */
+    postChange;
     /**
      * Selects the language option programmatically.
      */
@@ -53,7 +72,7 @@ export class PostLanguageOption {
                 this.emitChange();
             }
         };
-        return (h(Host, { key: '6a7c4af5ab0a953cc2c70621efc6fff905638900', "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: 'eff35e907ca174aa239604d8e3c937309d306cd1', "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() {
@@ -82,6 +101,8 @@ 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\"."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "code",
                 "reflect": false
             },
@@ -99,6 +120,8 @@ export class PostLanguageOption {
                     "tags": [],
                     "text": "If set to `true`, the language option is considered the current language for the page."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "active",
                 "reflect": true
             },
@@ -122,6 +145,8 @@ export class PostLanguageOption {
                     "tags": [],
                     "text": "The variant of the post-language-switch parent (dynamically set by the parent)"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "variant",
                 "reflect": false
             },
@@ -139,6 +164,8 @@ export class PostLanguageOption {
                     "tags": [],
                     "text": "The full name of the language. For example, \"Deutsch\"."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "name",
                 "reflect": false
             },
@@ -156,6 +183,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."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "url",
                 "reflect": false
             }

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

@@ -1 +1 @@
-:host{display:block}@media screen and (max-width: 1023.99px){:host{display:flex !important;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;padding:0;overflow:visible;border:0;background:none;color:inherit;font:inherit;-webkit-user-select:none;user-select:none;appearance:button;text-decoration:none;display:inline-flex;align-items:center;gap:var(--post-core-dimension-6);border-radius:var(--post-core-dimension-24);font-size:var(--post-core-font-size-16);padding:var(--post-core-dimension-3) var(--post-core-dimension-10)}.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:var(--post-core-dimension-16);width:var(--post-core-dimension-16)}
+:host{display:block}@media screen and (max-width: 1023.98px){:host{display:flex !important;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;padding:0;overflow:visible;border:0;background:none;color:inherit;font:inherit;-webkit-user-select:none;user-select:none;appearance:button;text-decoration:none;display:inline-flex;align-items:center;gap:var(--post-core-dimension-6);border-radius:var(--post-core-dimension-24);font-size:var(--post-core-font-size-16);padding:var(--post-core-dimension-3) var(--post-core-dimension-10)}.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:var(--post-core-dimension-16);width:var(--post-core-dimension-16)}

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

@@ -4,22 +4,32 @@ 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.variant = 'list';
-        this.activeLang = undefined;
-    }
+    host;
+    /**
+     * A title for the list of language options
+     */
+    caption;
     validateCaption(value = this.caption) {
         checkType(value, 'string', 'The "caption" property of the post-language-switch component must be a string.');
     }
+    /**
+     * A descriptive text for the list of language options
+     */
+    description;
     validateDescription(value = this.description) {
         checkType(value, 'string', 'The "description" property of the post-language-switch component must be a string.');
     }
+    /**
+     * Variant that determines the rendering of the language switch either as a list (used on mobile in the header) or a dropdown (used on desktop in the header)
+     */
+    variant = 'list';
     validateVariant(value = this.variant) {
         checkEmptyOrOneOf(value, SWITCH_VARIANTS, `The "variant" property of the post-language-switch component must be:  ${SWITCH_VARIANTS.join(', ')}`);
     }
+    /**
+     * The active language of the language switch
+     */
+    activeLang;
     connectedCallback() {
         this.updateChildrenVariant();
         // Get the active language based on children's active state
@@ -59,6 +69,7 @@ export class PostLanguageSwitch {
             }
         });
     }
+    menuId = `p${nanoid(11)}`;
     renderList() {
         return (h(Host, { "data-version": version, "aria-label": `${this.caption}, ${this.description}`, "aria-role": "list" }, h("slot", null)));
     }
@@ -96,6 +107,8 @@ export class PostLanguageSwitch {
                     "tags": [],
                     "text": "A title for the list of language options"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "caption",
                 "reflect": false
             },
@@ -113,6 +126,8 @@ export class PostLanguageSwitch {
                     "tags": [],
                     "text": "A descriptive text for the list of language options"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "description",
                 "reflect": false
             },
@@ -136,6 +151,8 @@ export class PostLanguageSwitch {
                     "tags": [],
                     "text": "Variant that determines the rendering of the language switch either as a list (used on mobile in the header) or a dropdown (used on desktop in the header)"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "variant",
                 "reflect": false,
                 "defaultValue": "'list'"

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

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

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

@@ -0,0 +1,32 @@
+import { h, Host } from "@stencil/core";
+import { version } from "../../../../package";
+export class PostLinkarea {
+    hostElement;
+    handleClick = () => {
+        const customSlottedLink = this.hostElement.querySelector('a[data-link]');
+        const linkElement = customSlottedLink
+            ? customSlottedLink
+            : this.hostElement.querySelector('a');
+        if (linkElement.href) {
+            window.location.href = linkElement.href;
+        }
+        else {
+            console.error('<post-linkarea> : Your element must contain a child with a `href` property.');
+        }
+    };
+    render() {
+        return (h(Host, { key: 'fd83dca8dca965d14f5a844454e79d7fb449639d', "data-version": version, onClick: this.handleClick, tabindex: "0" }, h("slot", { key: '278537c9aabe710d118cdd6075ab506a8a4dcfe2' })));
+    }
+    static get is() { return "post-linkarea"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["post-linkarea.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["post-linkarea.css"]
+        };
+    }
+    static get elementRef() { return "hostElement"; }
+}