@swisspost/design-system-components 10.0.0-next.47 → 10.0.0-next.48

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

@@ -0,0 +1,101 @@
+import { p as proxyCustomElement, H, c as createEvent, h, a as Host } from './index.js';
+import { c as checkRequiredAndType, d as checkEmptyOrOneOf, e as checkEmptyOrType, a as checkEmptyOrUrl } from './p-CV7fm1rW.js';
+import './p-CJ80BZ06.js';
+import { v as version } from './p-0Ltezq5O.js';
+import { S as SWITCH_VARIANTS } from './p-DjIHLduJ.js';
+
+const postLanguageOptionCss = "@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-current-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}";
+
+const PostLanguageOption$1 = /*@__PURE__*/ proxyCustomElement(class PostLanguageOption extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.postChange = createEvent(this, "postChange");
+        this.postLanguageOptionInitiallyActive = createEvent(this, "postLanguageOptionInitiallyActive");
+    }
+    validateCode() {
+        checkRequiredAndType(this, 'code', 'string');
+    }
+    validateVariant() {
+        checkEmptyOrOneOf(this, 'variant', SWITCH_VARIANTS);
+    }
+    validateName() {
+        checkEmptyOrType(this, 'name', 'string');
+    }
+    validateUrl() {
+        checkEmptyOrUrl(this, 'url');
+    }
+    componentDidLoad() {
+        this.validateCode();
+        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.');
+        }
+        if (this.active) {
+            this.postLanguageOptionInitiallyActive.emit(this.code);
+        }
+    }
+    /**
+     * 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 role = this.variant === 'menu' ? 'menuitem' : undefined;
+        const emitOnKeyDown = (e) => {
+            if (e.key === 'Enter' || e.key === ' ') {
+                this.emitChange();
+            }
+        };
+        return (h(Host, { key: '565abb06373e341d429242f6d1943edfdb20f8d7', "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)))));
+    }
+    get host() { return this; }
+    static get watchers() { return {
+        "code": ["validateCode"],
+        "variant": ["validateVariant"],
+        "name": ["validateName"],
+        "url": ["validateUrl"]
+    }; }
+    static get style() { return postLanguageOptionCss; }
+}, [4, "post-language-option", {
+        "code": [1],
+        "active": [1540],
+        "variant": [1],
+        "name": [1],
+        "url": [1],
+        "select": [64]
+    }, undefined, {
+        "code": ["validateCode"],
+        "variant": ["validateVariant"],
+        "name": ["validateName"],
+        "url": ["validateUrl"]
+    }]);
+function defineCustomElement$1() {
+    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$1);
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const PostLanguageOption = PostLanguageOption$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { PostLanguageOption, defineCustomElement };

package/dist/components/react/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/react/post-language-switch.js

@@ -0,0 +1,159 @@
+import { p as proxyCustomElement, H, h, a as Host } from './index.js';
+import { c as checkRequiredAndType, d as checkEmptyOrOneOf } from './p-CV7fm1rW.js';
+import './p-CJ80BZ06.js';
+import { E as EventFrom } from './p-kraHE1r3.js';
+import { v as version } from './p-0Ltezq5O.js';
+import { S as SWITCH_VARIANTS } from './p-DjIHLduJ.js';
+import { n as nanoid } from './p-BLchVpF6.js';
+import { d as defineCustomElement$5 } from './p-Da5wbVP8.js';
+import { d as defineCustomElement$4 } from './p-JHuJA2Lv.js';
+import { d as defineCustomElement$3 } from './p-CGsAj6ij.js';
+import { d as defineCustomElement$2 } from './p-Ce7jgYmK.js';
+
+const postLanguageSwitchCss = ":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}";
+
+var __decorate = (undefined && undefined.__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;
+};
+const PostLanguageSwitch$1 = /*@__PURE__*/ proxyCustomElement(class PostLanguageSwitch extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.menuId = `p${nanoid(11)}`;
+        this.listSpanId = `list-span-${nanoid(11)}`;
+        /**
+         * Whether the component is rendered as a list or a menu
+         */
+        this.variant = 'list';
+    }
+    get languageOptions() {
+        return Array.from(this.host.querySelectorAll('post-language-option'));
+    }
+    validateCaption() {
+        checkRequiredAndType(this, 'caption', 'string');
+    }
+    validateDescription() {
+        checkRequiredAndType(this, 'description', 'string');
+    }
+    validateVariant() {
+        checkEmptyOrOneOf(this, 'variant', SWITCH_VARIANTS);
+        this.updateChildrenVariant();
+    }
+    componentDidLoad() {
+        this.validateCaption();
+        this.validateDescription();
+        this.validateVariant();
+        // Initially set variants and active language
+        // Handles cases where the language-switch is rendered after the language-options have been rendered
+        this.updateChildrenVariant();
+    }
+    /**
+     * Listen for the postChange event and guard it to run only for events originating from a <post-language-option> element.
+     */
+    handlePostChange(event) {
+        this.activeLang = event.detail;
+        // Update the active state in the children post-language-option components
+        this.languageOptions.forEach(lang => {
+            if (lang.code && lang.code === this.activeLang) {
+                lang.setAttribute('active', '');
+            }
+            else {
+                lang.removeAttribute('active');
+            }
+        });
+        // Hides the dropdown when an option has been clicked
+        if (this.variant === 'menu') {
+            const menu = this.host.shadowRoot.querySelector('post-menu');
+            menu.hide();
+        }
+    }
+    /**
+     * Handles cases where the language switch is being rendered before options are available
+     * @param event Initially emitted by <post-langauge-option>
+     */
+    handleInitiallyActive(event) {
+        this.activeLang = event.detail;
+    }
+    // Update post-language-option variant to have the correct style
+    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 }, 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" }, 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();
+    }
+    get host() { return this; }
+    static get watchers() { return {
+        "caption": ["validateCaption"],
+        "description": ["validateDescription"],
+        "variant": ["validateVariant"]
+    }; }
+    static get style() { return postLanguageSwitchCss; }
+}, [1, "post-language-switch", {
+        "caption": [1],
+        "description": [1],
+        "variant": [1],
+        "activeLang": [32]
+    }, [[0, "postChange", "handlePostChange"], [0, "postLanguageOptionInitiallyActive", "handleInitiallyActive"]], {
+        "caption": ["validateCaption"],
+        "description": ["validateDescription"],
+        "variant": ["validateVariant"]
+    }]);
+__decorate([
+    EventFrom('post-language-option')
+], PostLanguageSwitch$1.prototype, "handlePostChange", null);
+function defineCustomElement$1() {
+    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$1);
+            }
+            break;
+        case "post-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "post-menu":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "post-menu-trigger":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "post-popovercontainer":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const PostLanguageSwitch = PostLanguageSwitch$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { PostLanguageSwitch, defineCustomElement };

package/dist/components/react/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/react/post-linkarea.js

@@ -0,0 +1,46 @@
+import { p as proxyCustomElement, H, h, a as Host } from './index.js';
+import { v as version } from './p-0Ltezq5O.js';
+
+const postLinkareaCss = ":host{display:contents;cursor:pointer}";
+
+const INTERACTIVE_ELEMENTS = ['a'].join(',');
+const INTERACTIVE_ELEMENTS_SELECTOR = `:where(${INTERACTIVE_ELEMENTS})`;
+const PostLinkarea$1 = /*@__PURE__*/ proxyCustomElement(class PostLinkarea extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+    }
+    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: 'ccd776a066fec91edfd5fdb1d4fc8c67dc5ee4ed', "data-version": version, onClick: (e) => this.dispatchClick(e), tabindex: "0" }, h("slot", { key: '8fa2d023650c42d3e57b1e38f263e9c51e6aa012' })));
+    }
+    get host() { return this; }
+    static get style() { return postLinkareaCss; }
+}, [1, "post-linkarea"]);
+function defineCustomElement$1() {
+    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$1);
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const PostLinkarea = PostLinkarea$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { PostLinkarea, defineCustomElement };

package/dist/components/react/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/react/post-list-item.js

@@ -0,0 +1,39 @@
+import { p as proxyCustomElement, H, h, a as Host } from './index.js';
+import { v as version } from './p-0Ltezq5O.js';
+
+const postListItemCss = ":host{display:flex}";
+
+const PostListItem$1 = /*@__PURE__*/ proxyCustomElement(class PostListItem extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+    }
+    connectedCallback() {
+        this.host.setAttribute('slot', 'post-list-item');
+    }
+    render() {
+        return (h(Host, { key: 'c6e5d38b3b01e37bb59cf31d64228e12dcd47bde', role: "listitem", slot: "post-list-item", version: version }, h("slot", { key: '0e156cf6e671ff4835b0262ef44b9e4342e58b94' })));
+    }
+    get host() { return this; }
+    static get style() { return postListItemCss; }
+}, [1, "post-list-item"]);
+function defineCustomElement$1() {
+    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$1);
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const PostListItem = PostListItem$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { PostListItem, defineCustomElement };

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

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

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

@@ -0,0 +1,62 @@
+import { p as proxyCustomElement, H, h, a as Host } from './index.js';
+import { v as version } from './p-0Ltezq5O.js';
+import { n as nanoid } from './p-BLchVpF6.js';
+
+const postListCss = "@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-list{display:flex;flex-direction:column;gap:var(--post-list-title-gap, 0)}post-list>[role=list]{display:flex;flex-direction:column;gap:var(--post-list-item-gap, 0)}post-list:where([horizontal]:not([horizontal=false])){flex-direction:row;align-items:center}post-list:where([horizontal]:not([horizontal=false]))>[role=list]{flex-direction:row;align-items:center}post-list>.list-title.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}";
+
+const PostList$1 = /*@__PURE__*/ proxyCustomElement(class PostList extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        /**
+         * 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() {
+        /**
+         * Get the id set on the host element or use a random id by default
+         */
+        this.titleId = `title-${this.host.id || nanoid(6)}`;
+    }
+    componentDidLoad() {
+        this.checkTitle();
+    }
+    checkTitle() {
+        if (!this.titleEl.textContent.trim()) {
+            console.error('Please provide a title to the list component. Title is mandatory for accessibility purposes.');
+        }
+    }
+    render() {
+        return (h(Host, { key: '36b2afb0224903b411ca77257ab80d0a455bdf82', "data-version": version }, h("div", { key: 'af0b3536d697097bc841a7ea50871fc69c230aee', ref: el => (this.titleEl = el), id: this.titleId, class: `list-title${this.titleHidden ? ' visually-hidden' : ''}` }, h("slot", { key: '4e115aa68fdbb2c674065e7644f326e0990b4867' })), h("div", { key: '49c0032b0baca56af8015d457a2d134dc0a9d39b', role: "list", "aria-labelledby": this.titleId }, h("slot", { key: 'ec67e9a226b003c6f2e9aca019bef483fa22011e', name: "post-list-item" }))));
+    }
+    get host() { return this; }
+    static get style() { return postListCss; }
+}, [4, "post-list", {
+        "titleHidden": [4, "title-hidden"],
+        "horizontal": [516],
+        "titleId": [32]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["post-list"];
+    components.forEach(tagName => { switch (tagName) {
+        case "post-list":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, PostList$1);
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const PostList = PostList$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { PostList, defineCustomElement };

package/dist/components/react/post-logo.d.ts

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

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

@@ -0,0 +1,59 @@
+import { p as proxyCustomElement, H, h, a as Host } from './index.js';
+import { v as version } from './p-0Ltezq5O.js';
+import { a as checkEmptyOrUrl } from './p-CV7fm1rW.js';
+import './p-CJ80BZ06.js';
+
+const postLogoCss = ":host,.logo{display:inline-block}:host,:host .logo>svg,.logo,.logo .logo>svg{height:100%}.description{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}.logo-link{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}.logo-link: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){.logo-link:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){.logo-link: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){.logo-link:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}.logo-link :focus,:focus-visible{border-radius:2px}";
+
+const PostLogo$1 = /*@__PURE__*/ proxyCustomElement(class PostLogo extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+    }
+    validateUrl() {
+        checkEmptyOrUrl(this, 'url');
+    }
+    componentDidLoad() {
+        this.validateUrl();
+        this.checkDescription();
+    }
+    checkDescription() {
+        if (!this.host.textContent) {
+            console.warn('Be sure to add descriptive text in the post-logo to ensure good accessibility of the component.');
+        }
+    }
+    render() {
+        const logoLink = this.url && (typeof this.url === 'string' ? this.url : this.url.href);
+        const LogoTag = logoLink ? 'a' : 'span';
+        return (h(Host, { key: 'd6279e660f4e48e1810a76cd7449a964908a327f', "data-version": version }, h(LogoTag, { key: 'aa1c6764aafb74cd7c670cc5281f267df5e684e2', class: `logo ${logoLink ? 'logo-link' : ''}`, ...(logoLink ? { href: logoLink } : {}) }, h("span", { key: 'ab4ab45ed0b58d309aef262335c2bfb12f42b5d6', class: "description" }, h("slot", { key: '4ddbcb53683853723b426a76b4614bee59d83777', onSlotchange: () => this.checkDescription() })), h("svg", { key: '2c78f3b6bb6364f5872032aeb32e29d315451c4d', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 72 72", "aria-hidden": "true" }, h("g", { key: '8d02b5cf5b5f88f52dcf49c0d40f6153a3dc5714', id: "Logo" }, h("rect", { key: '18901557af215a699c6070638c21e7ad552c071a', fill: "#ffcc00", x: "0", y: "0", width: "72", height: "72" }), h("polygon", { key: '56d26b229eb79d87ad41a8b1d8a98937150b1e6d', 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: 'f1a2f2083359e4204c8af9d1e75d27c8b50df480', 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" }))))));
+    }
+    get host() { return this; }
+    static get watchers() { return {
+        "url": ["validateUrl"]
+    }; }
+    static get style() { return postLogoCss; }
+}, [1, "post-logo", {
+        "url": [1]
+    }, undefined, {
+        "url": ["validateUrl"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["post-logo"];
+    components.forEach(tagName => { switch (tagName) {
+        case "post-logo":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, PostLogo$1);
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const PostLogo = PostLogo$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { PostLogo, defineCustomElement };

package/dist/components/react/post-mainnavigation.d.ts

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