@swisspost/design-system-components 10.0.0-next.55 → 10.0.0-next.56

package/dist/components/post-tab-panel.js

@@ -1,8 +1,7 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { v as version } from './package.js';
 import { n as nanoid } from './index.browser.js';
-import { c as checkRequiredAndType } from './index2.js';
-import './breakpoints.js';
+import { c as checkRequiredAndType } from './breakpoints.js';
 
 const postTabPanelCss = ":host{display:none}";
 
@@ -12,27 +11,27 @@ const PostTabPanel$1 = /*@__PURE__*/ proxyCustomElement(class PostTabPanel exten
         this.__registerHost();
         this.__attachShadow();
     }
-    validateName() {
-        checkRequiredAndType(this, 'name', 'string');
+    validateFor() {
+        checkRequiredAndType(this, 'for', 'string');
     }
     componentWillLoad() {
-        this.validateName();
+        this.validateFor();
         // get the id set on the host element or use a random id by default
         this.panelId = `panel-${this.host.id || nanoid(6)}`;
     }
     render() {
-        return (h(Host, { key: 'f00d9caf4324fc2d750d7844ca6ddc8198aef0c0', "data-version": version, id: this.panelId, role: "tabpanel" }, h("slot", { key: '58f2eaf91aee7897039a151e117d9b9fc948162a' })));
+        return (h(Host, { key: 'dcb273fbc2a98c39813a152cd4a7e50bc86d0004', "data-version": version, id: this.panelId, role: "tabpanel", slot: "panels" }, h("slot", { key: 'c3f13a3b062c53c87b303f57ee267a6ce24c54c8' })));
     }
     get host() { return this; }
     static get watchers() { return {
-        "name": ["validateName"]
+        "for": ["validateFor"]
     }; }
     static get style() { return postTabPanelCss; }
 }, [1, "post-tab-panel", {
-        "name": [513],
+        "for": [513],
         "panelId": [32]
     }, undefined, {
-        "name": ["validateName"]
+        "for": ["validateFor"]
     }]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {

package/dist/components/post-tabs.js

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { v as version } from './package.js';
-import { f as fadeOut, a as fadeIn } from './fade.js';
-import './breakpoints.js';
+import { f as fade } from './fade.js';
+import { c as checkRequiredAndType } from './breakpoints.js';
 
 /**
  * Invoke the `componentOnReady` method if it is available, simulate it otherwise
@@ -33,42 +33,162 @@ const PostTabs$1 = /*@__PURE__*/ proxyCustomElement(class PostTabs extends HTMLE
         this.__attachShadow();
         this.postChange = createEvent(this, "postChange", 7);
         this.isLoaded = false;
+        this.isNavigationMode = false;
         /**
          * When set to true, this property allows the tabs container to span the
+         * Changing this value after initialization has no effect.
          * full width of the screen, from edge to edge.
          */
         this.fullWidth = false;
     }
     get tabs() {
-        return Array.from(this.host.querySelectorAll('post-tab-header')).filter(tab => tab.closest('post-tabs') === this.host);
+        return Array.from(this.host.querySelectorAll('post-tab-item')).filter(tab => tab.closest('post-tabs') === this.host);
+    }
+    get panels() {
+        return Array.from(this.host.querySelectorAll('post-tab-panel')).filter(panel => panel.closest('post-tabs') === this.host);
+    }
+    validateLabel() {
+        if (this.isNavigationMode) {
+            checkRequiredAndType(this, 'label', 'string');
+        }
+    }
+    componentWillRender() {
+        this.detectMode();
     }
     componentDidLoad() {
         this.moveMisplacedTabs();
+        this.moveMisplacedPanels();
         this.enableTabs();
-        const initiallyActivePanel = this.activePanel || this.tabs[0]?.panel;
-        void this.show(initiallyActivePanel);
-        this.isLoaded = true;
+        this.setupContentObserver();
+        this.validateLabel();
+        if (this.isNavigationMode) {
+            const activeTab = this.findActiveNavigationTab();
+            if (activeTab) {
+                this.activateTab(activeTab);
+            }
+        }
+        else {
+            const tabToActivate = this.activeTab || this.tabs[0]?.name;
+            if (tabToActivate) {
+                void this.show(tabToActivate);
+            }
+        }
+    }
+    disconnectedCallback() {
+        if (this.showing) {
+            this.showing.cancel();
+            this.showing = null;
+        }
+        if (this.hiding) {
+            this.hiding.cancel();
+            this.hiding = null;
+        }
+        if (this.contentObserver) {
+            this.contentObserver.disconnect();
+        }
+    }
+    setupContentObserver() {
+        const config = {
+            childList: true,
+            subtree: true,
+            attributes: true,
+            attributeFilter: ['data-navigation-mode', 'aria-current'],
+        };
+        this.contentObserver = new MutationObserver(this.handleContentChange.bind(this));
+        this.contentObserver.observe(this.host, config);
+    }
+    handleContentChange(mutations) {
+        const shouldRedetect = this.shouldRedetectMode(mutations);
+        const ariaCurrentChanged = this.hasAriaCurrentChanged(mutations);
+        if (ariaCurrentChanged && this.isNavigationMode) {
+            this.updateActiveNavigationTab();
+        }
+        if (shouldRedetect) {
+            this.handleModeChange();
+        }
+    }
+    shouldRedetectMode(mutations) {
+        return mutations.some(mutation => {
+            if (mutation.type === 'childList') {
+                return mutation.addedNodes.length > 0 || mutation.removedNodes.length > 0;
+            }
+            if (mutation.type === 'attributes' && mutation.attributeName === 'data-navigation-mode') {
+                return true;
+            }
+            return false;
+        });
+    }
+    hasAriaCurrentChanged(mutations) {
+        return mutations.some(mutation => mutation.type === 'attributes' && mutation.attributeName === 'aria-current');
+    }
+    updateActiveNavigationTab() {
+        const activeTab = this.findActiveNavigationTab();
+        if (activeTab && activeTab !== this.currentActiveTab) {
+            this.activateTab(activeTab);
+        }
+    }
+    handleModeChange() {
+        const previousMode = this.isNavigationMode;
+        this.detectMode();
+        if (previousMode !== this.isNavigationMode) {
+            this.enableTabs();
+            this.initializeActiveTab();
+        }
+    }
+    initializeActiveTab() {
+        if (this.isNavigationMode) {
+            const activeTab = this.findActiveNavigationTab();
+            if (activeTab) {
+                this.activateTab(activeTab);
+            }
+        }
+        else {
+            const tabToActivate = this.activeTab || this.tabs[0]?.name;
+            if (tabToActivate) {
+                void this.show(tabToActivate);
+            }
+        }
+    }
+    detectMode() {
+        // Check for navigation mode by looking for anchor elements in tabs
+        // This works even before post-tab-item sets data-navigation-mode attribute
+        const hasNavigationTabs = this.tabs.some(tab => {
+            const hasAnchor = tab.querySelector('a') !== null;
+            const navModeAttr = tab.getAttribute('data-navigation-mode') === 'true';
+            return hasAnchor || navModeAttr;
+        });
+        const hasPanels = this.panels.length > 0;
+        if (hasNavigationTabs && hasPanels) {
+            throw new Error('PostTabs: Mixed mode detected. Cannot use both navigation mode (anchor elements) and panel mode (post-tab-panel elements) at the same time.');
+        }
+        this.isNavigationMode = hasNavigationTabs;
+    }
+    findActiveNavigationTab() {
+        return (this.tabs.find(tab => {
+            const anchor = tab.querySelector('a[aria-current="page"]');
+            return anchor !== null;
+        }) || null);
     }
     /**
      * Shows the panel with the given name and selects its associated tab.
      * Any other panel that was previously shown becomes hidden and its associated tab is unselected.
      */
-    async show(panelName) {
+    async show(tabName) {
         // do nothing if the tab is already active
-        if (panelName === this.activeTab?.panel) {
+        if (tabName === this.currentActiveTab?.name) {
             return;
         }
-        const previousTab = this.activeTab;
-        const newTab = this.host.querySelector(`post-tab-header[panel=${panelName}]`);
+        const previousTab = this.currentActiveTab;
+        const newTab = this.host.querySelector(`post-tab-item[name=${tabName}]`);
         this.activateTab(newTab);
         // if a panel is currently being displayed, remove it from the view and complete the associated animation
         if (this.showing) {
-            this.showing.effect['target'].style.display = 'none';
             this.showing.finish();
+            this.showing = null;
         }
         // hide the currently visible panel only if no other animation is running
         if (previousTab && !this.showing && !this.hiding)
-            this.hidePanel(previousTab.panel);
+            this.hidePanel(previousTab.name);
         // wait for any hiding animation to complete before showing the selected tab
         if (this.hiding)
             await this.hiding.finished;
@@ -77,15 +197,25 @@ const PostTabs$1 = /*@__PURE__*/ proxyCustomElement(class PostTabs extends HTMLE
         if (this.showing)
             await this.showing.finished;
         if (this.isLoaded)
-            this.postChange.emit(this.activeTab.panel);
+            this.postChange.emit(this.currentActiveTab.name);
     }
     moveMisplacedTabs() {
         if (!this.tabs)
             return;
         this.tabs.forEach(tab => {
-            if (tab.getAttribute('slot') === 'tabs')
-                return;
-            tab.setAttribute('slot', 'tabs');
+            // Tab items should go in the default slot, so remove any slot attribute
+            if (tab.getAttribute('slot')) {
+                tab.removeAttribute('slot');
+            }
+        });
+    }
+    moveMisplacedPanels() {
+        if (!this.panels)
+            return;
+        this.panels.forEach(panel => {
+            if (panel.getAttribute('slot') !== 'panels') {
+                panel.setAttribute('slot', 'panels');
+            }
         });
     }
     enableTabs() {
@@ -93,19 +223,25 @@ const PostTabs$1 = /*@__PURE__*/ proxyCustomElement(class PostTabs extends HTMLE
             return;
         this.tabs.forEach(async (tab) => {
             await componentOnReady(tab);
-            // if the tab has an "aria-controls" attribute it was already linked to its panel: do nothing
+            // In navigation mode, navigation is handled by the consumer's routing
+            if (this.isNavigationMode) {
+                return;
+            }
+            // Panel mode: set up ARIA relationships and event handlers
             if (tab.getAttribute('aria-controls'))
                 return;
-            const tabPanel = this.getPanel(tab.panel);
-            tab.setAttribute('aria-controls', tabPanel.id);
-            tabPanel.setAttribute('aria-labelledby', tab.id);
+            const tabPanel = this.getPanel(tab.name);
+            if (tabPanel) {
+                tab.setAttribute('aria-controls', tabPanel.id);
+                tabPanel.setAttribute('aria-labelledby', tab.id);
+            }
             tab.addEventListener('click', () => {
-                void this.show(tab.panel);
+                void this.show(tab.name);
             });
             tab.addEventListener('keydown', (e) => {
                 if (e.key === 'Enter' || e.key === ' ') {
                     e.preventDefault();
-                    void this.show(tab.panel);
+                    void this.show(tab.name);
                 }
             });
             tab.addEventListener('keydown', (e) => {
@@ -114,44 +250,51 @@ const PostTabs$1 = /*@__PURE__*/ proxyCustomElement(class PostTabs extends HTMLE
             });
         });
         // if the currently active tab was removed from the DOM then select the first one
-        if (this.activeTab && !this.activeTab.isConnected) {
-            void this.show(this.tabs[0]?.panel);
+        if (this.currentActiveTab && !this.currentActiveTab.isConnected) {
+            void this.show(this.tabs[0]?.name);
         }
     }
     activateTab(tab) {
-        if (this.activeTab) {
-            this.activeTab.setAttribute('aria-selected', 'false');
-            this.activeTab.setAttribute('tabindex', '-1');
-            this.activeTab.classList.remove('active');
+        // Deactivate previous tab
+        if (this.currentActiveTab) {
+            this.currentActiveTab.classList.remove('active');
+            if (!this.isNavigationMode) {
+                this.currentActiveTab.setAttribute('aria-selected', 'false');
+                this.currentActiveTab.setAttribute('tabindex', '-1');
+            }
         }
-        tab.setAttribute('aria-selected', 'true');
-        tab.setAttribute('tabindex', '0');
         tab.classList.add('active');
-        this.activeTab = tab;
+        if (!this.isNavigationMode) {
+            tab.setAttribute('aria-selected', 'true');
+            tab.setAttribute('tabindex', '0');
+        }
+        this.currentActiveTab = tab;
     }
     hidePanel(panelName) {
         const previousPanel = this.getPanel(panelName);
         if (!previousPanel)
             return;
-        this.hiding = fadeOut(previousPanel);
+        this.hiding = fade(previousPanel, 'out');
         this.hiding.onfinish = () => {
             previousPanel.style.display = 'none';
             this.hiding = null;
         };
     }
     showSelectedPanel() {
-        const panel = this.getPanel(this.activeTab.panel);
+        const panel = this.getPanel(this.currentActiveTab.name);
+        if (!panel)
+            return;
         panel.style.display = 'block';
         // prevent the initially selected panel from fading in
         if (!this.isLoaded)
             return;
-        this.showing = fadeIn(panel);
+        this.showing = fade(panel, 'in');
         this.showing.onfinish = () => {
             this.showing = null;
         };
     }
     getPanel(name) {
-        return this.host.querySelector(`post-tab-panel[name=${name}]`);
+        return this.host.querySelector(`post-tab-panel[for=${name}]`);
     }
     navigateTabs(tab, key) {
         const activeTabIndex = Array.from(this.tabs).indexOf(tab);
@@ -165,16 +308,28 @@ const PostTabs$1 = /*@__PURE__*/ proxyCustomElement(class PostTabs extends HTMLE
         if (!nextTab)
             return;
         nextTab.focus();
+        void this.show(nextTab.name);
     }
     render() {
-        return (h(Host, { key: 'f3534a3b05c379ce1cb311d4c5ea950c8eba87d0', "data-version": version }, h("div", { key: 'd812db6b2a895504fce8ac9dae2663821b9dd759', class: "tabs-wrapper", part: "tabs" }, h("div", { key: '9abd0ee00204a085ceaebce5e11fcff527273605', class: "tabs", role: "tablist" }, h("slot", { key: '89f09f443ca740dc9af66fedb1367cdb4885074d', name: "tabs", onSlotchange: () => this.enableTabs() }))), h("div", { key: '4a94a19fd67814482934bd31bb219470bea8dec6', class: "tab-content", part: "content" }, h("slot", { key: '44db446865edacb1b1c0fc20ef391adfa189e8cb', onSlotchange: () => this.moveMisplacedTabs() }))));
+        const TabsContainer = this.isNavigationMode ? 'nav' : 'div';
+        return (h(Host, { key: '0d2ce5c335e58aeb6231ad4d63a44324eb35f54a', "data-version": version }, h("div", { key: 'd8b0ad389fd4ba8010c7816472373d6a8d4a3aa4', class: "tabs-wrapper", part: "post-tabs" }, h(TabsContainer, { key: 'fd8ae3c19f12138936a39028f117aec1d41ea992', class: "tabs", role: this.isNavigationMode ? undefined : 'tablist', "aria-label": this.isNavigationMode ? this.label : undefined }, h("slot", { key: '3148c5c8f508a6c3f2daab075f8ab2d91c567343', onSlotchange: () => {
+                this.moveMisplacedTabs();
+                this.enableTabs();
+            } }))), !this.isNavigationMode && (h("div", { key: '4ea329e77c108dd2b25db6efa116a68a3a415af6', class: "tab-content", part: "post-tabs-content" }, h("slot", { key: '28efc229a3f3f6f4f9cee157ff453c860c5ffa9e', name: "panels", onSlotchange: () => this.moveMisplacedPanels() })))));
     }
     get host() { return this; }
+    static get watchers() { return {
+        "label": ["validateLabel"]
+    }; }
     static get style() { return postTabsCss; }
 }, [1, "post-tabs", {
-        "activePanel": [1, "active-panel"],
+        "activeTab": [1, "active-tab"],
         "fullWidth": [516, "full-width"],
+        "label": [513],
+        "isNavigationMode": [32],
         "show": [64]
+    }, undefined, {
+        "label": ["validateLabel"]
     }]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {

package/dist/components/post-togglebutton.js

@@ -1,54 +1,4 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { v as version } from './package.js';
-
-const postTogglebuttonCss = ":host{cursor:pointer;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}:host(:focus-visible){outline-style:var(--post-core-border-style-solid) !important}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:host(:focus-visible){outline-color:Highlight !important}}:host([aria-pressed=true]) ::slotted([data-showwhen=untoggled]){display:none}:host([aria-pressed=false]) ::slotted([data-showwhen=toggled]){display:none}";
-
-const PostTogglebutton$1 = /*@__PURE__*/ proxyCustomElement(class PostTogglebutton extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        /**
-         * If `true`, the button is in the "on" state, otherwise it is in the "off" state.
-         */
-        this.toggled = false;
-        this.handleClick = () => {
-            this.toggled = !this.toggled;
-        };
-        this.handleKeydown = (event) => {
-            // perform a click when enter or spaced are pressed to mimic the button behavior
-            if (event.key === 'Enter' || event.key === ' ') {
-                event.preventDefault(); // prevents the page from scrolling when space is pressed
-                this.host.click();
-            }
-        };
-    }
-    componentWillLoad() {
-        // add event listener to not override listener that might be set on the host
-        this.host.addEventListener('click', () => this.handleClick());
-        this.host.addEventListener('keydown', (e) => this.handleKeydown(e));
-    }
-    render() {
-        return (h(Host, { key: 'ecd5772b09be8842e5c6fc3bf34932b27d90c533', "data-version": version, role: "button", tabindex: "0", "aria-pressed": this.toggled.toString() }, h("slot", { key: '3bb32b33155e71ced9375afb5a26d1d4e63a83c8' })));
-    }
-    get host() { return this; }
-    static get style() { return postTogglebuttonCss; }
-}, [1, "post-togglebutton", {
-        "toggled": [1028]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["post-togglebutton"];
-    components.forEach(tagName => { switch (tagName) {
-        case "post-togglebutton":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, PostTogglebutton$1);
-            }
-            break;
-    } });
-}
+import { P as PostTogglebutton$1, d as defineCustomElement$1 } from './post-togglebutton2.js';
 
 const PostTogglebutton = PostTogglebutton$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/post-togglebutton2.js

@@ -0,0 +1,53 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { v as version } from './package.js';
+
+const postTogglebuttonCss = ":host{cursor:pointer;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}:host(:focus-visible){outline-style:var(--post-core-border-style-solid) !important}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:host(:focus-visible){outline-color:Highlight !important}}:host([aria-pressed=true]) ::slotted([data-showwhen=untoggled]){display:none}:host([aria-pressed=false]) ::slotted([data-showwhen=toggled]){display:none}";
+
+const PostTogglebutton = /*@__PURE__*/ proxyCustomElement(class PostTogglebutton extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        /**
+         * If `true`, the button is in the "on" state, otherwise it is in the "off" state.
+         */
+        this.toggled = false;
+        this.handleClick = () => {
+            this.toggled = !this.toggled;
+        };
+        this.handleKeydown = (event) => {
+            // perform a click when enter or spaced are pressed to mimic the button behavior
+            if (event.key === 'Enter' || event.key === ' ') {
+                event.preventDefault(); // prevents the page from scrolling when space is pressed
+                this.host.click();
+            }
+        };
+    }
+    componentWillLoad() {
+        // add event listener to not override listener that might be set on the host
+        this.host.addEventListener('click', () => this.handleClick());
+        this.host.addEventListener('keydown', (e) => this.handleKeydown(e));
+    }
+    render() {
+        return (h(Host, { key: 'a526ab3b0ae14c93bb4e1a8dc6d3ded4ff1bf014', "data-version": version, role: "button", tabindex: "0", "aria-pressed": this.toggled.toString() }, h("slot", { key: 'e8a5bdd99d9270cfcf014306a8d7fe8a2b6b79ba' })));
+    }
+    get host() { return this; }
+    static get style() { return postTogglebuttonCss; }
+}, [1, "post-togglebutton", {
+        "toggled": [1028]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["post-togglebutton"];
+    components.forEach(tagName => { switch (tagName) {
+        case "post-togglebutton":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, PostTogglebutton);
+            }
+            break;
+    } });
+}
+
+export { PostTogglebutton as P, defineCustomElement as d };

package/dist/components/post-tooltip-trigger.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { I as IS_BROWSER } from './breakpoints.js';
-import { e as checkEmptyOrType } from './index2.js';
+import { I as IS_BROWSER } from './environment.js';
+import { e as checkEmptyOrType } from './breakpoints.js';
 import { v as version } from './package.js';
 import { i as isFocusable } from './focusable.js';
 
@@ -173,7 +173,7 @@ const PostTooltipTrigger$1 = /*@__PURE__*/ proxyCustomElement(class PostTooltipT
         this.tooltip?.hide();
     }
     render() {
-        return (h(Host, { key: '48246523aabaf1851e05d0273346d3e26e7ad866', "data-version": version }, h("slot", { key: '0442aeadddd59642c317b6f10c93008adf3e6585', onSlotchange: () => this.handleSlotChange() })));
+        return (h(Host, { key: '272df9fbda27a695e083a71e7740dd6c8c3afb2d', "data-version": version }, h("slot", { key: '616b48a7dcbe591f4490aa8ec41abf43c17259bb', onSlotchange: () => this.handleSlotChange() })));
     }
     get host() { return this; }
     static get watchers() { return {

package/dist/components/post-tooltip.js

@@ -1,7 +1,6 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { v as version } from './package.js';
-import { d as checkEmptyOrOneOf } from './index2.js';
-import './breakpoints.js';
+import { d as checkEmptyOrOneOf } from './breakpoints.js';
 import { a as PLACEMENT_TYPES, d as defineCustomElement$2 } from './post-popovercontainer2.js';
 
 const postTooltipCss = ":host{display:none}:host([open]){display:contents}post-popovercontainer[arrow]::after{position:absolute;content:\"\";inset:-13px;z-index:-1}post-popovercontainer>div{color:var(--post-current-fg);background-color:var(--post-current-bg);padding:var(--post-core-dimension-4) var(--post-core-dimension-8);max-width:var(--post-tooltip-max-width, 280px);width:inherit;min-height:32px;word-wrap:break-word;white-space:normal}";
@@ -71,7 +70,7 @@ const PostTooltip$1 = /*@__PURE__*/ proxyCustomElement(class PostTooltip extends
     }
     render() {
         const popoverClass = `${this.arrow ? 'has-arrow' : ''}`;
-        return (h(Host, { key: 'ebc25bd8a9615a13be82d58f246b5a5d42113cf2', "data-version": version }, h("post-popovercontainer", { key: 'dba7a96c1f354752475a6f1d9116b0097dddf320', safeSpace: "trapezoid", class: popoverClass, role: "tooltip", arrow: this.arrow, animation: this.animation, placement: this.placement, onPostToggle: e => this.handleToggle(e), ref: (el) => (this.popoverRef = el) }, h("slot", { key: '537370b88912d323a72ee074767b4cf2b4bc1b57' }))));
+        return (h(Host, { key: 'a9ce457973507a7cd05edb774c84c769ba11bcce', "data-version": version }, h("post-popovercontainer", { key: '8fa8c699ddccd7d46f240992ab1d7e515637cab5', safeSpace: "trapezoid", class: popoverClass, role: "tooltip", arrow: this.arrow, animation: this.animation, placement: this.placement, onPostToggle: e => this.handleToggle(e), ref: (el) => (this.popoverRef = el) }, h("slot", { key: '2ce3408b95a511b9c3c91905fff7142b3598fc55' }))));
     }
     get host() { return this; }
     static get watchers() { return {

package/dist/components/react/index.js

@@ -1,4 +1,4 @@
-const globalStyles = ":where(post-accordion,post-accordion-item,post-avatar,post-back-to-top,post-banner,post-breadcrumb-item,post-breadcrumbs,post-card-control,post-closebutton,post-collapsible,post-collapsible-trigger,post-footer,post-header,post-icon,post-language-option,post-language-switch,post-linkarea,post-list,post-list-item,post-logo,post-mainnavigation,post-megadropdown,post-megadropdown-trigger,post-menu,post-menu-item,post-menu-trigger,post-popover,post-popover-trigger,post-popovercontainer,post-rating,post-stepper,post-stepper-item,post-tab-header,post-tab-panel,post-tabs,post-togglebutton,post-tooltip,post-tooltip-trigger):not([data-hydrated],:defined){visibility:hidden}";
+const globalStyles = ":where(post-accordion,post-accordion-item,post-avatar,post-back-to-top,post-banner,post-breadcrumb-item,post-breadcrumbs,post-card-control,post-closebutton,post-collapsible,post-collapsible-trigger,post-footer,post-header,post-icon,post-language-menu,post-language-menu-item,post-linkarea,post-logo,post-mainnavigation,post-megadropdown,post-megadropdown-trigger,post-menu,post-menu-item,post-menu-trigger,post-pagination,post-popover,post-popover-trigger,post-popovercontainer,post-rating,post-stepper,post-stepper-item,post-tab-item,post-tab-panel,post-tabs,post-togglebutton,post-tooltip,post-tooltip-trigger):not([data-hydrated],:defined){visibility:hidden}";
 
 const NAMESPACE = 'post-components';
 const BUILD = /* post-components */ { hydratedSelectorName: "data-hydrated", lazyLoad: false, slotRelocation: true, updatable: true};

package/dist/{cjs/breakpoints-CEkeixld.js → components/react/p-B8YiQ3mz.js}

@@ -1,7 +1,92 @@
-'use strict';
+import { a as IS_SERVER } from './p-FxUVQ4Tx.js';
 
-const IS_SERVER = typeof window === 'undefined';
-const IS_BROWSER = !IS_SERVER;
+const EMPTY_VALUES = [undefined, null, '', NaN];
+
+function isValueEmpty(value) {
+    return EMPTY_VALUES.some(v => v === value);
+}
+
+function requiredAnd(check) {
+    return (component, prop, ...extraArgs) => {
+        const componentName = component.host.localName;
+        const value = component[prop];
+        const message = `The prop \`${String(prop)}\` of the \`${componentName}\` component is not defined.`;
+        if (isValueEmpty(value)) {
+            throw new Error(message);
+        }
+        else {
+            check(component, prop, ...extraArgs);
+        }
+    };
+}
+
+function checkOneOf(component, prop, possibleValues) {
+    const componentName = component.host.localName;
+    const value = component[prop];
+    const message = `The prop \`${String(prop)}\` of the \`${componentName}\` component must be one of the following values: ${possibleValues.join(', ')}.`;
+    if (!possibleValues.includes(value)) {
+        console.error(message);
+    }
+}
+
+function checkPattern(component, prop, pattern) {
+    const componentName = component.host.localName;
+    const value = component[prop];
+    const message = `The prop \`${String(prop)}\` of the \`${componentName}\` component must follow the format \`${pattern}\`.`;
+    if (typeof value !== 'string' || !pattern.test(value)) {
+        console.error(message);
+    }
+}
+
+function checkType(component, prop, type) {
+    const componentName = component.host.localName;
+    const value = component[prop];
+    const typeIsArray = type === 'array';
+    const valueIsArray = Array.isArray(value);
+    const message = `The prop \`${String(prop)}\` of the \`${componentName}\` component must be of type \`${type}\`.`;
+    if (typeIsArray || valueIsArray) {
+        if (valueIsArray !== typeIsArray) {
+            console.error(message);
+        }
+    }
+    else if (typeof value !== type) {
+        console.error(message);
+    }
+}
+
+function checkUrl(component, prop) {
+    const componentName = component.host.localName;
+    const value = component[prop];
+    const message = `The prop \`${String(prop)}\` of the \`${componentName}\` component is invalid.`;
+    if (typeof value !== 'string' && !(value instanceof URL)) {
+        console.error(message);
+        return;
+    }
+    try {
+        new URL(value, 'https://www.post.ch');
+    }
+    catch {
+        console.error(message);
+    }
+}
+
+function emptyOr(check) {
+    return (component, prop, ...extraArgs) => {
+        const value = component[prop];
+        if (!isValueEmpty(value)) {
+            check(component, prop, ...extraArgs);
+        }
+    };
+}
+
+const checkEmptyOrOneOf = emptyOr(checkOneOf);
+const checkEmptyOrPattern = emptyOr(checkPattern);
+const checkEmptyOrType = emptyOr(checkType);
+const checkEmptyOrUrl = emptyOr(checkUrl);
+const checkRequiredAndOneOf = requiredAnd(checkOneOf);
+const checkRequiredAndPattern = requiredAnd(checkPattern);
+const checkRequiredAndType = requiredAnd(checkType);
+const checkRequiredAndUrl = requiredAnd(checkUrl);
 
 /* eslint-disable no-undefined,no-param-reassign,no-shadow */
 
@@ -177,6 +262,4 @@ class Breakpoint {
 }
 const breakpoint = new Breakpoint();
 
-exports.IS_BROWSER = IS_BROWSER;
-exports.breakpoint = breakpoint;
-exports.throttle = throttle;
+export { checkEmptyOrUrl as a, checkRequiredAndOneOf as b, checkRequiredAndType as c, checkEmptyOrOneOf as d, checkEmptyOrType as e, checkRequiredAndUrl as f, breakpoint as g, checkRequiredAndPattern as h, checkEmptyOrPattern as i, throttle as t };