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

package/dist/components/post-icon2.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { c as checkEmptyOrOneOf, b as checkEmptyOrType } from './index2.js';
+import { c as checkEmptyOrOneOf, e as checkEmptyOrType } from './index2.js';
 import { v as version } from './package.js';
 import { c as checkNonEmpty } from './check-non-empty.js';
 import { c as checkType } from './check-type.js';
@@ -7,7 +7,7 @@ import { c as checkType } from './check-type.js';
 const postIconCss = ":host{display:inline-block;width:1em;height:1em;vertical-align:-0.15em}span{display:block;width:100%;height:100%;fill:currentColor;forced-color-adjust:preserve-parent-color;background-color:currentColor;-webkit-mask-position:center center;mask-position:center center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100%;mask-size:100%}:host([flip-h]:not([flip-h=false])){scale:-1 1}:host([flip-v]:not([flip-v=false])){scale:1 -1}:host([flip-h][flip-v]:not([flip-h=false],[flip-v=false])){scale:-1}:host([animation]){transform-origin:center}:host([animation=cylon]){animation:icon-animation-cylon .75s ease-in-out infinite alternate}:host([animation=cylon-vertical]){animation:icon-animation-cylon-vertical .75s ease-in-out infinite alternate}:host([animation=spin]){animation:icon-animation-spin 2s linear infinite normal}:host([animation=spin-reverse]){animation:icon-animation-spin 2s linear infinite reverse}:host([animation=fade]){animation:icon-animation-fade .75s ease-in-out infinite alternate}:host([animation=throb]){animation:icon-animation-throb .75s ease-in-out infinite alternate}@keyframes icon-animation-cylon{from{transform:translateX(-25%)}to{transform:translateX(25%)}}@keyframes icon-animation-cylon-vertical{from{transform:translateY(25%)}to{transform:translateY(-25%)}}@keyframes icon-animation-fade{from{opacity:.1}to{opacity:1}}@keyframes icon-animation-spin{from{transform:rotate(0deg)}to{transform:rotate(359deg)}}@keyframes icon-animation-throb{from{opacity:.5;transform:scale(0.5)}to{opacity:1;transform:scale(1)}}";
 const PostIconStyle0 = postIconCss;
 
-const CDN_URL = 'https://unpkg.com/@swisspost/design-system-icons/public/post-icons';
+const CDN_URL = 'https://unpkg.com/@swisspost/design-system-icons/public/post-icons/';
 const ANIMATION_NAMES = [
     'cylon',
     'cylon-vertical',
@@ -22,8 +22,6 @@ const PostIcon = /*@__PURE__*/ proxyCustomElement(class PostIcon extends HTMLEle
         super();
         this.__registerHost();
         this.__attachShadow();
-        this.svgStyles = undefined;
-        this.svgOutput = undefined;
         this.animation = null;
         this.base = null;
         this.flipH = false;
@@ -32,30 +30,93 @@ const PostIcon = /*@__PURE__*/ proxyCustomElement(class PostIcon extends HTMLEle
         this.rotate = null;
         this.scale = null;
     }
+    isSSR = typeof window === 'undefined';
+    get host() { return this; }
     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(', ')}.`);
+            checkEmptyOrOneOf(this, 'animation', ANIMATION_KEYS);
+    }
+    validateBase() {
+        checkEmptyOrType(this, 'base', 'string');
+    }
+    validateFlipH() {
+        checkEmptyOrType(this, 'flipH', 'boolean');
+    }
+    validateFlipV() {
+        checkEmptyOrType(this, 'flipV', 'boolean');
+    }
+    validateName() {
+        checkNonEmpty(this, 'name');
+        checkType(this, 'name', 'string');
     }
-    validateBase(newValue = this.base) {
-        checkEmptyOrType(newValue, 'string', 'The post-icon "base" prop should be a string.');
+    validateRotate() {
+        checkEmptyOrType(this, 'rotate', 'number');
     }
-    validateFlipH(newValue = this.flipH) {
-        checkEmptyOrType(newValue, 'boolean', 'The post-icon "flipH" prop should be a boolean.');
+    validateScale() {
+        checkEmptyOrType(this, 'scale', 'number');
     }
-    validateFlipV(newValue = this.flipV) {
-        checkEmptyOrType(newValue, 'boolean', 'The post-icon "flipV" prop should be a boolean.');
+    // Construct the icon url from different possible sources
+    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 (!this.isSSR) {
+            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'));
+        }
+        // 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}`;
+        }
+        else if (!origin && slug) {
+            url = `${slug}${file}`;
+        }
+        else {
+            url = `${CDN_URL}${file}`;
+        }
+        return url;
     }
-    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.');
+    getUrlDefinition(url, allow) {
+        return {
+            url: this.getUrlObject(url),
+            definesDomain: allow !== 'relative' ? this.definesDomain(url) : false,
+            definesSlug: allow !== 'absolute' ? this.definesSlug(url) : false,
+        };
     }
-    validateRotate(newValue = this.rotate) {
-        checkEmptyOrType(newValue, 'number', 'The post-icon "rotate" prop should be a number.');
+    getUrlObject(url) {
+        if (url) {
+            url = url?.endsWith('/') ? url : `${url}/`;
+            return new URL(url, 'https://url.base');
+        }
+        else {
+            return null;
+        }
     }
-    validateScale(newValue = this.scale) {
-        checkEmptyOrType(newValue, 'number', 'The post-icon "scale" prop should be a number.');
+    definesDomain(url) {
+        return url ? /^https?:\/\//.test(url) : false;
+    }
+    definesSlug(url) {
+        return Boolean(/^\/.+/.test(this.getUrlObject(url)?.pathname));
+    }
+    getStyles() {
+        const url = this.getUrl();
+        return Object.entries({
+            '-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)' : ''),
+        })
+            .filter(([_key, value]) => value !== null)
+            .reduce((styles, [key, value]) => Object.assign(styles, { [key]: value }), {});
     }
-    componentWillLoad() {
+    componentDidLoad() {
         this.validateBase();
         this.validateName();
         this.validateFlipH();
@@ -64,32 +125,9 @@ const PostIcon = /*@__PURE__*/ proxyCustomElement(class PostIcon extends HTMLEle
         this.validateRotate();
         this.validateAnimation();
     }
-    componentWillRender() {
-        this.setPath();
-    }
-    setPath() {
-        var _a, _b, _c, _d;
-        // 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 fileBase = `${(_d = (_c = this.base) !== null && _c !== void 0 ? _c : metaBase) !== null && _d !== void 0 ? _d : CDN_URL}/`.replace(/\/\/$/, '/');
-        const fileName = `${this.name}.svg`;
-        const filePath = `${fileBase}${fileName}`;
-        this.path = new URL(filePath, window.location.origin).toString();
-    }
     render() {
-        // create inline styles for some properties
-        const svgStyles = Object.entries({
-            '-webkit-mask-image': `url('${this.path}')`,
-            'mask-image': `url('${this.path}')`,
-            'transform': (this.scale && !isNaN(Number(this.scale)) ? 'scale(' + this.scale + ')' : '') +
-                (this.rotate && !isNaN(Number(this.rotate)) ? ' rotate(' + this.rotate + 'deg)' : ''),
-        })
-            .filter(([_key, value]) => value !== null)
-            .reduce((styles, [key, value]) => Object.assign(styles, { [key]: value }), {});
-        return (h(Host, { key: '95fa0f7a09d3430bb5d621e01b57188742920eb4', "data-version": version }, h("span", { key: 'c824e3705dc83665bb6f7649381654e6d1e07dfb', style: svgStyles })));
+        return (h(Host, { key: 'c80aaf693f730902c4ae57ca78360eee5dedf624', "data-version": version }, h("span", { key: '7e01e1cf7e4fec380e8f054d3cc8fa5404c7a829', style: this.getStyles() })));
     }
-    get host() { return this; }
     static get watchers() { return {
         "animation": ["validateAnimation"],
         "base": ["validateBase"],
@@ -107,9 +145,7 @@ const PostIcon = /*@__PURE__*/ proxyCustomElement(class PostIcon extends HTMLEle
         "flipV": [4, "flip-v"],
         "name": [1],
         "rotate": [2],
-        "scale": [2],
-        "svgStyles": [32],
-        "svgOutput": [32]
+        "scale": [2]
     }, undefined, {
         "animation": ["validateAnimation"],
         "base": ["validateBase"],

package/dist/components/post-language-option.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface PostLanguageOption extends Components.PostLanguageOption, HTMLElement {}
+export const PostLanguageOption: {
+    prototype: PostLanguageOption;
+    new (): PostLanguageOption;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

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

@@ -0,0 +1,6 @@
+import { P as PostLanguageOption$1, d as defineCustomElement$1 } from './post-language-option2.js';
+
+const PostLanguageOption = PostLanguageOption$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { PostLanguageOption, defineCustomElement };

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

@@ -0,0 +1,102 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { e as checkEmptyOrType } from './index2.js';
+import { v as version } from './package.js';
+import { c as checkType } from './check-type.js';
+
+const postLanguageOptionCss = "/*!\n * Copyright 2021 by Swiss Post, Information Technology\n */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:inherit;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}post-language-option:where([variant=list]):not([active=false]) :is(a,button){background-color:#050400 !important;color:#fff;pointer-events:none}post-language-option:where([variant=list]):not([active=false]) :hover{color:#fff}post-language-option:where([variant=menu]){width:100%}post-language-option:where([variant=menu]):not([active=false]){display:none}post-language-option:where([variant=menu]) :is(a,button){padding-block:13px;padding-inline:24px;box-sizing:border-box;position:relative;width:100%}post-language-option:where([variant=menu]) :is(a,button):hover{color:#fff;background-color:#504f4b}";
+const PostLanguageOptionStyle0 = postLanguageOptionCss;
+
+const PostLanguageOption = /*@__PURE__*/ proxyCustomElement(class PostLanguageOption extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.postChange = createEvent(this, "postChange", 7);
+        this.code = undefined;
+        this.active = undefined;
+        this.variant = undefined;
+        this.name = undefined;
+        this.url = undefined;
+    }
+    get host() { return this; }
+    validateCode() {
+        checkType(this, 'code', 'string');
+    }
+    validateActiveProp() {
+        checkEmptyOrType(this, 'active', 'boolean');
+    }
+    validateName() {
+        checkEmptyOrType(this, 'name', 'string');
+    }
+    validateUrl() {
+        checkEmptyOrType(this, 'url', 'string');
+    }
+    componentDidLoad() {
+        this.validateCode();
+        this.validateActiveProp();
+        this.validateName();
+        this.validateUrl();
+        if (!this.name && this.isNameRequired()) {
+            throw new Error('The "name" property of the post-language-option component is required when the full language name is not displayed.');
+        }
+    }
+    /**
+     * 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.
+     */
+    async select() {
+        this.active = true;
+        this.emitChange();
+    }
+    emitChange() {
+        this.postChange.emit(this.code);
+    }
+    isNameRequired() {
+        return this.host.textContent.toLowerCase() === this.code.toLowerCase();
+    }
+    render() {
+        const lang = this.code.toLowerCase();
+        const emitOnKeyDown = (e) => {
+            if (e.key === 'Enter' || e.key === ' ') {
+                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)))));
+    }
+    static get watchers() { return {
+        "code": ["validateCode"],
+        "active": ["validateActiveProp"],
+        "name": ["validateName"],
+        "url": ["validateUrl"]
+    }; }
+    static get style() { return PostLanguageOptionStyle0; }
+}, [4, "post-language-option", {
+        "code": [1],
+        "active": [1540],
+        "variant": [1],
+        "name": [1],
+        "url": [1],
+        "select": [64]
+    }, undefined, {
+        "code": ["validateCode"],
+        "active": ["validateActiveProp"],
+        "name": ["validateName"],
+        "url": ["validateUrl"]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["post-language-option"];
+    components.forEach(tagName => { switch (tagName) {
+        case "post-language-option":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, PostLanguageOption);
+            }
+            break;
+    } });
+}
+
+export { PostLanguageOption as P, defineCustomElement as d };

package/dist/components/post-language-switch.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface PostLanguageSwitch extends Components.PostLanguageSwitch, HTMLElement {}
+export const PostLanguageSwitch: {
+    prototype: PostLanguageSwitch;
+    new (): PostLanguageSwitch;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

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

@@ -0,0 +1,6 @@
+import { P as PostLanguageSwitch$1, d as defineCustomElement$1 } from './post-language-switch2.js';
+
+const PostLanguageSwitch = PostLanguageSwitch$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { PostLanguageSwitch, defineCustomElement };

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

@@ -0,0 +1,135 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { c as checkEmptyOrOneOf } from './index2.js';
+import { v as version } from './package.js';
+import { n as nanoid } from './index.browser.js';
+import { d as defineCustomElement$4 } from './post-icon2.js';
+import { d as defineCustomElement$3 } from './post-menu2.js';
+import { d as defineCustomElement$2 } from './post-menu-trigger2.js';
+import { d as defineCustomElement$1 } from './post-popovercontainer2.js';
+import { c as checkType } from './check-type.js';
+
+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 PostLanguageSwitchStyle0 = postLanguageSwitchCss;
+
+const PostLanguageSwitch = /*@__PURE__*/ proxyCustomElement(class PostLanguageSwitch extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.caption = undefined;
+        this.description = undefined;
+        this.variant = 'list';
+        this.activeLang = undefined;
+    }
+    get host() { return this; }
+    validateCaption() {
+        checkType(this, 'caption', 'string');
+    }
+    validateDescription() {
+        checkType(this, 'description', 'string');
+    }
+    validateVariant() {
+        checkEmptyOrOneOf(this, 'variant', SWITCH_VARIANTS);
+    }
+    connectedCallback() {
+        this.updateChildrenVariant();
+        // Get the active language based on children's active state
+        const activeLanguageOption = this.host.querySelector('post-language-option[active]:not([active="false"])');
+        if (activeLanguageOption)
+            this.activeLang = activeLanguageOption.getAttribute('code');
+    }
+    // Update post-language-option variant to have the correct style
+    updateChildrenVariant() {
+        this.host.querySelectorAll('post-language-option').forEach(el => {
+            el.setAttribute('variant', this.variant);
+        });
+    }
+    componentWillUpdate() {
+        this.updateChildrenVariant();
+    }
+    componentDidLoad() {
+        this.validateCaption();
+        this.validateDescription();
+        this.validateVariant();
+        // Detects a change in the active language
+        this.host.addEventListener('postChange', (el) => {
+            this.activeLang = el.detail;
+            // Update the active state in the children post-language-option components
+            this.host.querySelectorAll('post-language-option').forEach(lang => {
+                if (lang.code && lang.code === this.activeLang) {
+                    lang.setAttribute('active', 'true');
+                }
+                else {
+                    lang.setAttribute('active', 'false');
+                }
+            });
+            // Hides the dropdown when an option has been clicked
+            if (this.variant === 'menu') {
+                const menu = this.host.shadowRoot.querySelector('post-menu');
+                menu.toggle(menu);
+            }
+        });
+    }
+    menuId = `p${nanoid(11)}`;
+    renderList() {
+        return (h(Host, { "data-version": version, role: "list", "aria-label": this.caption }, h("div", { class: "post-language-switch-list", role: "group", "aria-label": this.description }, h("slot", null))));
+    }
+    renderDropdown() {
+        return (h(Host, { "data-version": version }, h("post-menu-trigger", { for: this.menuId }, h("button", { class: "post-language-switch-trigger", "aria-label": this.description }, this.activeLang, h("post-icon", { "aria-hidden": "true", name: "chevrondown" }))), h("post-menu", { id: this.menuId, class: "post-language-switch-dropdown-container", "aria-label": this.caption }, h("slot", null))));
+    }
+    render() {
+        return this.variant === 'list' ? this.renderList() : this.renderDropdown();
+    }
+    static get watchers() { return {
+        "caption": ["validateCaption"],
+        "description": ["validateDescription"],
+        "variant": ["validateVariant"]
+    }; }
+    static get style() { return PostLanguageSwitchStyle0; }
+}, [1, "post-language-switch", {
+        "caption": [1],
+        "description": [1],
+        "variant": [1],
+        "activeLang": [32]
+    }, undefined, {
+        "caption": ["validateCaption"],
+        "description": ["validateDescription"],
+        "variant": ["validateVariant"]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["post-language-switch", "post-icon", "post-menu", "post-menu-trigger", "post-popovercontainer"];
+    components.forEach(tagName => { switch (tagName) {
+        case "post-language-switch":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, PostLanguageSwitch);
+            }
+            break;
+        case "post-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "post-menu":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "post-menu-trigger":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "post-popovercontainer":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+
+export { PostLanguageSwitch as P, defineCustomElement as d };

package/dist/components/post-linkarea.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface PostLinkarea extends Components.PostLinkarea, HTMLElement {}
+export const PostLinkarea: {
+    prototype: PostLinkarea;
+    new (): PostLinkarea;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/post-linkarea.js

@@ -0,0 +1,6 @@
+import { P as PostLinkarea$1, d as defineCustomElement$1 } from './post-linkarea2.js';
+
+const PostLinkarea = PostLinkarea$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { PostLinkarea, defineCustomElement };

package/dist/components/post-linkarea2.js

@@ -0,0 +1,42 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { v as version } from './package.js';
+
+const postLinkareaCss = "post-linkarea{display:contents;cursor:pointer}";
+const PostLinkareaStyle0 = postLinkareaCss;
+
+const INTERACTIVE_ELEMENTS = ['a'].join(',');
+const INTERACTIVE_ELEMENTS_SELECTOR = `:where(${INTERACTIVE_ELEMENTS})`;
+const PostLinkarea = /*@__PURE__*/ proxyCustomElement(class PostLinkarea extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+    }
+    get host() { return this; }
+    dispatchClick({ ctrlKey, shiftKey, altKey, metaKey }) {
+        const interactiveElement = this.host.querySelector(`[data-link]${INTERACTIVE_ELEMENTS_SELECTOR}`) ??
+            this.host.querySelector(INTERACTIVE_ELEMENTS_SELECTOR);
+        if (!interactiveElement) {
+            throw new Error(`The \`post-linkarea\` component must contain an interactive element. Possible elements are: ${INTERACTIVE_ELEMENTS}.`);
+        }
+        interactiveElement.dispatchEvent(new MouseEvent('click', { ctrlKey, shiftKey, altKey, metaKey }));
+    }
+    render() {
+        return (h(Host, { key: 'c27bb1e548eecbef9b981ebadea8a9a30a06a89c', "data-version": version, onClick: e => this.dispatchClick(e), tabindex: "0" }, h("slot", { key: '9e5bd5c6032ed87bc2c6e9eed96dc79f19295325' })));
+    }
+    static get style() { return PostLinkareaStyle0; }
+}, [4, "post-linkarea"]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["post-linkarea"];
+    components.forEach(tagName => { switch (tagName) {
+        case "post-linkarea":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, PostLinkarea);
+            }
+            break;
+    } });
+}
+
+export { PostLinkarea as P, defineCustomElement as d };

package/dist/components/post-list-item.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface PostListItem extends Components.PostListItem, HTMLElement {}
+export const PostListItem: {
+    prototype: PostListItem;
+    new (): PostListItem;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

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

@@ -0,0 +1,6 @@
+import { P as PostListItem$1, d as defineCustomElement$1 } from './post-list-item2.js';
+
+const PostListItem = PostListItem$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { PostListItem, defineCustomElement };

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

@@ -0,0 +1,35 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+const postListItemCss = ":host{display:flex}";
+const PostListItemStyle0 = postListItemCss;
+
+const PostListItem = /*@__PURE__*/ proxyCustomElement(class PostListItem extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+    }
+    get host() { return this; }
+    connectedCallback() {
+        this.host.setAttribute('slot', 'post-list-item');
+    }
+    render() {
+        return (h(Host, { key: '8e209e77859bd05d62cae41aec9dec6fb2e820cb', role: "listitem", slot: "post-list-item" }, h("slot", { key: 'ce79a335e80401465b74208957e22983d6df4ce0' })));
+    }
+    static get style() { return PostListItemStyle0; }
+}, [1, "post-list-item"]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["post-list-item"];
+    components.forEach(tagName => { switch (tagName) {
+        case "post-list-item":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, PostListItem);
+            }
+            break;
+    } });
+}
+
+export { PostListItem as P, defineCustomElement as d };

package/dist/components/{post-alert.d.ts → post-list.d.ts}

@@ -1,9 +1,9 @@
 import type { Components, JSX } from "../types/components";
 
-interface PostAlert extends Components.PostAlert, HTMLElement {}
-export const PostAlert: {
-    prototype: PostAlert;
-    new (): PostAlert;
+interface PostList extends Components.PostList, HTMLElement {}
+export const PostList: {
+    prototype: PostList;
+    new (): PostList;
 };
 /**
  * Used to define this component and all nested components recursively.

package/dist/components/post-list.js

@@ -0,0 +1,6 @@
+import { P as PostList$1, d as defineCustomElement$1 } from './post-list2.js';
+
+const PostList = PostList$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { PostList, defineCustomElement };