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

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

@@ -0,0 +1,70 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { v as version } from './package.js';
+import { c as checkRequiredAndType } from './breakpoints.js';
+import { n as nanoid } from './index.browser.js';
+
+const postTabItemCss = ".tab-title,.nav-item a{display:inline-block;position:relative;box-sizing:border-box;padding:1rem;transition:background-color 100ms;border-right:1px solid rgba(0,0,0,0);border-left:1px solid rgba(0,0,0,0);opacity:.7;color:#000;text-decoration:none;background-color:rgba(0,0,0,0);cursor:pointer}.tab-title:hover,.nav-item a:hover{opacity:1;background-color:rgba(0,0,0,.6);color:#fff}.tab-title:focus-visible,.nav-item a:focus-visible{outline:rgba(0,0,0,0);opacity:1;background-color:rgba(0,0,0,.6);color:#fff;box-shadow:none}.tab-title:focus-visible::after,.nav-item a:focus-visible::after{content:\"\";display:block;position:absolute;top:2px;right:1px;bottom:0;left:1px;box-shadow:0 0 0 1px #fff,0 0 0 2px #333}:where(.bg-dark,.bg-black,.bg-primary,.bg-secondary,.bg-success,.bg-error) .tab-title:hover,:where(.bg-dark,.bg-black,.bg-primary,.bg-secondary,.bg-success,.bg-error) .tab-title:focus-visible,:where(.bg-dark,.bg-black,.bg-primary,.bg-secondary,.bg-success,.bg-error) .nav-item a:hover,:where(.bg-dark,.bg-black,.bg-primary,.bg-secondary,.bg-success,.bg-error) .nav-item a:focus-visible{background-color:rgba(255,255,255,.2)}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.tab-title,.nav-item a{opacity:1;border-left-color:Canvas;border-right-color:Canvas;color:LinkText}.tab-title:hover,.tab-title:focus,.tab-title:focus-within,.tab-title:focus-visible,.nav-item a:hover,.nav-item a:focus,.nav-item a:focus-within,.nav-item a:focus-visible{outline:var(--post-core-dimension-2) solid Highlight;outline-offset:calc(var(--post-core-dimension-4)*-1)}}.nav-item{display:inline-block;position:relative;box-sizing:border-box;cursor:default}.nav-item:focus,.nav-item:focus-visible{outline:none;box-shadow:none}.nav-item:focus::after,.nav-item:focus-visible::after{display:none}.nav-item a{color:inherit;text-decoration:none;display:block;width:100%;height:100%;box-sizing:border-box;position:relative;outline:none;cursor:pointer;border-radius:0}.nav-item a:focus{outline:none}.nav-item a:active{opacity:1;background-color:rgba(0,0,0,.6);color:#fff}.nav-item a:focus-visible{outline:none !important}:where(.bg-dark,.bg-black,.bg-primary,.bg-secondary,.bg-success,.bg-error) .nav-item a:hover{background-color:rgba(255,255,255,.2)}:where(.bg-dark,.bg-black,.bg-primary,.bg-secondary,.bg-success,.bg-error) .nav-item a:focus-visible{background-color:rgba(255,255,255,.2)}.tab-title.active,.nav-item.active a{z-index:1;border-right-color:#ccc;border-left-color:#ccc;opacity:1;background-color:#fff;color:#000;font-weight:700}.tab-title.active::before,.nav-item.active a::before{content:\"\";display:block;position:absolute;top:0;right:-1px;left:-1px;height:var(--post-core-dimension-4);background-color:#fc0}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.tab-title.active,.nav-item.active a{border-left-color:ButtonText;border-right-color:ButtonText;color:Highlight}.tab-title.active::before,.nav-item.active a::before{background-color:Highlight}}:host{display:block}.tab-title{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){.tab-title{background-color:ButtonFace !important}.tab-title:hover{background-color:Highlight !important}}";
+
+const PostTabItem$1 = /*@__PURE__*/ proxyCustomElement(class PostTabItem extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.mutationObserver = new MutationObserver(this.checkNavigationMode.bind(this));
+        this.isNavigationMode = false;
+    }
+    validateName() {
+        checkRequiredAndType(this, 'name', 'string');
+    }
+    connectedCallback() {
+        this.mutationObserver.observe(this.host, {
+            childList: true,
+            subtree: true,
+        });
+    }
+    componentWillLoad() {
+        this.tabId = `tab-${this.host.id || nanoid(6)}`;
+        this.checkNavigationMode();
+    }
+    disconnectedCallback() {
+        if (this.mutationObserver) {
+            this.mutationObserver.disconnect();
+        }
+    }
+    checkNavigationMode() {
+        const hasAnchor = this.host.querySelector('a') !== null;
+        this.isNavigationMode = hasAnchor;
+    }
+    render() {
+        return (h(Host, { key: '9367e007f35147f7a412968f018089910ecc88a0', id: this.tabId, role: !this.isNavigationMode ? 'tab' : undefined, "data-version": version, "data-navigation-mode": this.isNavigationMode.toString(), "aria-selected": !this.isNavigationMode ? 'false' : undefined, tabindex: !this.isNavigationMode ? '-1' : undefined, class: !this.isNavigationMode ? 'tab-title' : 'nav-item' }, h("slot", { key: 'd805ef623f162d5f66603c3cdeedbb31cc585591' })));
+    }
+    get host() { return this; }
+    static get watchers() { return {
+        "name": ["validateName"]
+    }; }
+    static get style() { return postTabItemCss; }
+}, [1, "post-tab-item", {
+        "name": [513],
+        "tabId": [32],
+        "isNavigationMode": [32]
+    }, undefined, {
+        "name": ["validateName"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["post-tab-item"];
+    components.forEach(tagName => { switch (tagName) {
+        case "post-tab-item":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, PostTabItem$1);
+            }
+            break;
+    } });
+}
+
+const PostTabItem = PostTabItem$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { PostTabItem, defineCustomElement };

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: '5d6c56e41ac61b10dd2560482bc5e4edab394742', "data-version": version, id: this.panelId, role: "tabpanel" }, h("slot", { key: 'ec7be772a0d3f883388742460c825dce0f0e44e8' })));
+        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: '3e352bc059be99242f612a49bdea71fd065d67b0', "data-version": version }, h("div", { key: '34d608d7af834fd4fb3106ac3fb90100a9b73138', class: "tabs-wrapper", part: "tabs" }, h("div", { key: '102e75b53d3e485a185d391f84755142d8690de6', class: "tabs", role: "tablist" }, h("slot", { key: '03624f2944dfd37d3eb3403772d430a6e053e676', name: "tabs", onSlotchange: () => this.enableTabs() }))), h("div", { key: '8c7c956b831ef19fb093122ca35c14b5a015dad3', class: "tab-content", part: "content" }, h("slot", { key: '8fad35a2a6d26814f513c422b4fcbe98aae7bd22', 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: 'f56832bfbfacc23923ac06d8455fffcdafa8a7ec', "data-version": version, role: "button", tabindex: "0", "aria-pressed": this.toggled.toString() }, h("slot", { key: '7adc9ed579b6badeb08c7599ceb95892d68f027f' })));
-    }
-    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: 'e545db2bc489025c51e51f680f4139b508ef09f8', "data-version": version }, h("slot", { key: '90abc548bccbc51d233001c98d289fd60599c482', 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,10 +1,9 @@
 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:280px;min-height:32px;word-wrap:break-word;white-space:normal}";
+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}";
 
 const PostTooltip$1 = /*@__PURE__*/ proxyCustomElement(class PostTooltip extends HTMLElement {
     constructor() {
@@ -71,7 +70,7 @@ const PostTooltip$1 = /*@__PURE__*/ proxyCustomElement(class PostTooltip extends
     }
     render() {
         const popoverClass = `${this.arrow ? 'has-arrow' : ''}`;
-        return (h(Host, { key: '0755eeba6f7be3cd0d94138369355df9767ca541', "data-version": version }, h("post-popovercontainer", { key: '1e1d71a4878e60f9e20b34b5f12588e09a8c7716', 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: '25a69d406a91cb0ba8d4c5fadee44d937c84a266' }))));
+        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-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};