@swisspost/design-system-components 9.0.0-next.8 → 9.0.0-next.9

package/dist/components/post-mainnavigation2.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 
-const postMainnavigationCss = "*,::before,::after{box-sizing:border-box}@media screen and (min-width: 1024px){slot[name=back-button],[slot=back-button]{display:none}}@media screen and (min-width: 1024px){h2{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}}post-mainnavigation{height:100%}:host{height:100%;display:block}.main-navigation{margin-block:0;list-style:none;display:flex;padding-left:0;gap:1rem}@media screen and (max-width: 1023.99px){.main-navigation{flex-direction:column}}.main-navigation>post-list{display:flex;align-items:stretch;gap:1rem;height:100%}@media screen and (max-width: 1023.99px){.main-navigation>post-list{flex-direction:column}}.main-navigation a,.main-navigation post-megadropdown-toggle{height:100%;display:flex;align-items:center}";
+const postMainnavigationCss = "post-mainnavigation post-list-item>a{text-decoration:none;border-radius:0}post-mainnavigation post-list-item post-megadropdown-trigger button{padding:0;overflow:visible;border:0;background:none;color:inherit;font:inherit;-webkit-user-select:none;user-select:none;appearance:button;text-align:start}post-mainnavigation post-list-item post-megadropdown-trigger 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-mainnavigation post-list-item post-megadropdown-trigger button:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-style:var(--post-core-border-style-solid) !important}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){post-mainnavigation post-list-item post-megadropdown-trigger button:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){post-mainnavigation post-list-item post-megadropdown-trigger button:is(:focus-visible,:focus-within,.pretend-focus){outline-style:var(--post-core-border-style-solid) !important}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){post-mainnavigation post-list-item post-megadropdown-trigger button:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}post-mainnavigation post-list-item>a,post-mainnavigation post-list-item>button,post-mainnavigation post-list-item post-megadropdown-trigger button{display:flex;align-items:center;justify-content:space-between}post-mainnavigation post-list-item>a:hover,post-mainnavigation post-list-item>button:hover,post-mainnavigation post-list-item post-megadropdown-trigger button:hover{color:var(--post-scheme-color-interactive-primary-hover-fg1)}post-mainnavigation post-list-item>a:focus-visible,post-mainnavigation post-list-item>button:focus-visible,post-mainnavigation post-list-item post-megadropdown-trigger button:focus-visible{border-radius:var(--post-core-dimension-4);z-index:1}@media screen and (min-width: 1024px){post-mainnavigation nav{position:relative;max-width:100vw;max-height:var(--post-core-dimension-56);user-select:none}post-mainnavigation post-list{margin-inline:var(--post-core-dimension-4)}post-mainnavigation post-list>[role=list]{flex-direction:row;max-width:100vw;transition:transform 250ms cubic-bezier(0.4, 0, 0.2, 1)}post-mainnavigation post-list-item>a,post-mainnavigation post-list-item>button,post-mainnavigation post-list-item post-megadropdown-trigger button{padding-inline:var(--post-core-dimension-12);height:var(--post-core-dimension-56);gap:var(--post-core-dimension-4);font-size:var(--post-core-font-size-16);border-block:0 solid rgba(0,0,0,0);border-block-end-color:currentColor}post-mainnavigation post-list-item>a:hover,post-mainnavigation post-list-item>button:hover,post-mainnavigation post-list-item post-megadropdown-trigger button:hover{border-block-width:var(--post-core-dimension-2)}post-mainnavigation post-list-item>a.selected,post-mainnavigation post-list-item>a[aria-expanded=true],post-mainnavigation post-list-item>button.selected,post-mainnavigation post-list-item>button[aria-expanded=true],post-mainnavigation post-list-item post-megadropdown-trigger button.selected,post-mainnavigation post-list-item post-megadropdown-trigger button[aria-expanded=true]{border-block-width:var(--post-core-dimension-4);font-weight:var(--post-core-font-weight-700)}post-mainnavigation post-list-item>button,post-mainnavigation post-list-item post-megadropdown-trigger button{padding-inline-end:var(--post-core-dimension-12);transition:border-block-end-color 250ms cubic-bezier(0.4, 0, 0.2, 1)}post-mainnavigation post-list-item>button::after,post-mainnavigation post-list-item post-megadropdown-trigger button::after{content:\"\";-webkit-mask-image:url(\"data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m23.6 13.2-7.5 7.6-7.6-7.6.9-.9 6.6 6.6 6.6-6.6z'/%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m23.6 13.2-7.5 7.6-7.6-7.6.9-.9 6.6 6.6 6.6-6.6z'/%3E%3C/svg%3E\");background-color:currentColor;color:currentColor;forced-color-adjust:preserve-parent-color;height:var(--post-core-dimension-24);width:var(--post-core-dimension-24);transition:transform 250ms cubic-bezier(0.4, 0, 0.2, 1)}post-mainnavigation post-list-item>button.selected::after,post-mainnavigation post-list-item>button[aria-expanded=true]::after,post-mainnavigation post-list-item post-megadropdown-trigger button.selected::after,post-mainnavigation post-list-item post-megadropdown-trigger button[aria-expanded=true]::after{transform:rotate(180deg)}post-mainnavigation [slot=back-button]{display:none}}@media screen and (max-width: 1023.99px){post-mainnavigation post-list>[role=list]{transform:none !important}post-mainnavigation post-list-item>a,post-mainnavigation post-list-item>button,post-mainnavigation post-list-item post-megadropdown-trigger button{width:100%;height:var(--post-core-dimension-48);padding-inline-end:var(--post-core-dimension-6);gap:var(--post-core-dimension-16);border-block:var(--post-core-dimension-1) solid rgba(0,0,0,0);border-block-end-color:currentColor;font-weight:var(--post-core-font-weight-700)}post-mainnavigation post-list-item>a:hover,post-mainnavigation post-list-item>a.selected,post-mainnavigation post-list-item>button:hover,post-mainnavigation post-list-item>button.selected,post-mainnavigation post-list-item post-megadropdown-trigger button:hover,post-mainnavigation post-list-item post-megadropdown-trigger button.selected{border-block-width:var(--post-core-dimension-3)}post-mainnavigation post-list-item>a:hover::after,post-mainnavigation post-list-item>button:hover::after,post-mainnavigation post-list-item post-megadropdown-trigger button:hover::after{content:\"\";display:block;-webkit-mask-image:url(\"data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.667 5.333H18.8L29.467 16H0v1.333h29.467L18.8 28h1.867L32 16.667z'/%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.667 5.333H18.8L29.467 16H0v1.333h29.467L18.8 28h1.867L32 16.667z'/%3E%3C/svg%3E\");background-color:currentColor;color:currentColor;forced-color-adjust:preserve-parent-color;width:var(--post-core-dimension-24);height:var(--post-core-dimension-24)}}";
 const PostMainnavigationStyle0 = postMainnavigationCss;
 
 const PostMainnavigation = /*@__PURE__*/ proxyCustomElement(class PostMainnavigation extends HTMLElement {
@@ -9,28 +9,28 @@ const PostMainnavigation = /*@__PURE__*/ proxyCustomElement(class PostMainnaviga
         this.__registerHost();
         this.postToggle = createEvent(this, "postToggle", 7);
     }
-    handleMegadropdownToggled(event) {
-        // Find next element sibling
-        let megalodon;
-        let target = event.target;
-        while (target !== null) {
-            if (target.tagName === 'POST-MEGADROPDOWN') {
-                megalodon = target;
-                break;
-            }
-            target = target.nextElementSibling;
-        }
-        if (megalodon)
-            megalodon.toggle(event.target);
+    /**
+     * Retrieves a reference to the closest 'post-header' element when the main navigation is added to the DOM.
+     */
+    connectedCallback() {
+        this.header = this.host.closest('post-header');
+    }
+    /**
+     * Cleans up references and disconnects the MutationObserver when the main navigation is removed from the DOM.
+     */
+    disconnectedCallback() {
+        this.header = null;
     }
     handleBackButtonClick() {
-        this.postToggle.emit();
+        if (this.header)
+            this.header.toggleMobileMenu();
     }
     render() {
-        return (h(Host, { key: '7179d087e93ab9e14dc21e16b52beaf965c53cd3', slot: "post-mainnavigation" }, h("div", { key: '2aede886c29972bf1dfebbe4513c4acf2e47c6ea', onClick: () => this.handleBackButtonClick(), class: "back-button" }, h("slot", { key: '4697ec520be78fccee832a358b349f68081b2f54', name: "back-button" })), h("nav", { key: '5bae57025152af07b9d68a19a07b61d0149d31dc', class: "main-navigation" }, h("slot", { key: 'e2a73a4b814a39a7cb1f7733f87c3c588f484006' }))));
+        return (h(Host, { key: 'f21c438ac0bbcb08e08fd419589bf92b7d8b3a61', slot: "post-mainnavigation" }, h("div", { key: '1925f47932d7e842e8b9f059d7ade955c577fa50', onClick: () => this.handleBackButtonClick(), class: "back-button" }, h("slot", { key: 'fe18f6859a6d79c7ae701b65a31be1eab9c8b2ac', name: "back-button" })), h("nav", { key: 'ad2b0a52bc0bcf78a3c3340ba163ee6167be2c73' }, h("slot", { key: '8fc7b01cc0f3729cd2c12c4967ec87891fe0dcf5' }))));
     }
+    get host() { return this; }
     static get style() { return PostMainnavigationStyle0; }
-}, [4, "post-mainnavigation", undefined, [[0, "postToggle", "handleMegadropdownToggled"]]]);
+}, [4, "post-mainnavigation"]);
 function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;

package/dist/components/post-megadropdown-trigger2.js

@@ -1,26 +1,78 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { v as version } from './package.js';
+import { c as checkType } from './check-type.js';
 
-const postMegadropdownTriggerCss = ":host{display:inline-block}";
+const postMegadropdownTriggerCss = "post-megadropdown-trigger{width:100%}";
 const PostMegadropdownTriggerStyle0 = postMegadropdownTriggerCss;
 
 const PostMegadropdownTrigger = /*@__PURE__*/ proxyCustomElement(class PostMegadropdownTrigger extends HTMLElement {
     constructor() {
         super();
         this.__registerHost();
-        this.__attachShadow();
-        this.postToggle = createEvent(this, "postToggle", 7);
-        this.toggled = false;
+        /**
+         * Reference to the slotted button within the trigger, if present.
+         * Used to manage click and key events for mega dropdown control.
+         */
+        this.slottedButton = null;
+        this.for = undefined;
+        this.ariaExpanded = false;
     }
-    handleClick() {
-        this.toggled = !this.toggled;
-        this.postToggle.emit();
+    /**
+     * Watch for changes to the `for` property to validate its type and ensure it is a string.
+     * @param forValue - The new value of the `for` property.
+     */
+    validateControlFor(forValue = this.for) {
+        checkType(forValue, 'string', 'The "for" property is required and should be a string.');
+    }
+    get megadropdown() {
+        const ref = document.getElementById(this.for);
+        return ref && ref.localName === 'post-megadropdown'
+            ? ref
+            : null;
+    }
+    handleToggle() {
+        if (this.megadropdown) {
+            this.megadropdown.toggle(this.host);
+        }
+        else {
+            console.warn(`No post-megadropdown found with ID: ${this.for}`);
+        }
+    }
+    componentDidLoad() {
+        this.validateControlFor();
+        // Check if the mega dropdown attached to the trigger is expanded or not
+        document.addEventListener('postToggleMegadropdown', (event) => {
+            if (event.target.id === this.for) {
+                this.ariaExpanded = event.detail;
+                if (this.slottedButton) {
+                    this.slottedButton.setAttribute('aria-expanded', this.ariaExpanded.toString());
+                }
+            }
+        });
+        this.slottedButton = this.host.querySelector('button');
+        if (this.slottedButton) {
+            this.slottedButton.setAttribute('aria-haspopup', 'menu');
+            this.slottedButton.addEventListener('click', () => {
+                this.handleToggle();
+            });
+        }
+        else {
+            console.warn('No button found within post-megadropdown-trigger');
+        }
     }
     render() {
-        return (h(Host, { key: 'd139b405fe28c7334c01eec4846a6f8b5bf1e261', slot: "post-megadropdown-trigger" }, h("button", { key: 'd3aee53488359a79764974d440d7a058d5d96873', "aria-expanded": this.toggled, onClick: () => this.handleClick() }, h("slot", { key: '7012055defbb7c8058481db5c4129919847010c6' }))));
+        return (h(Host, { key: '4ab919adeaa51fc12d45131fa540c76fb3ba73d9', "data-version": version, "tab-index": "-1" }, h("button", { key: 'e7dac321691cdb19a4874fd0b2097227d077af35' }, h("slot", { key: 'beffc38d2d35a67e74364c3b40b6d39896aa4de3' }))));
     }
+    get host() { return this; }
+    static get watchers() { return {
+        "for": ["validateControlFor"]
+    }; }
     static get style() { return PostMegadropdownTriggerStyle0; }
-}, [1, "post-megadropdown-trigger", {
-        "toggled": [32]
+}, [4, "post-megadropdown-trigger", {
+        "for": [1],
+        "ariaExpanded": [32]
+    }, undefined, {
+        "for": ["validateControlFor"]
     }]);
 function defineCustomElement() {
     if (typeof customElements === "undefined") {

package/dist/components/post-megadropdown2.js

@@ -1,49 +1,75 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { d as defineCustomElement$1 } from './post-popovercontainer2.js';
 
-const postMegadropdownCss = "*,::before,::after{box-sizing:border-box}post-popovercontainer{background-color:#fafafa;width:100%;border-bottom:1px solid #000}@media screen and (max-width: 1023.99px){post-popovercontainer{position:absolute;top:var(--header-height) !important;bottom:0;left:0;width:100%;height:auto}}.megadropdown{display:flex;gap:1rem;padding:1.5rem;border-radius:0 0 3px 3px}@media screen and (max-width: 1023.99px){.megadropdown{flex-direction:column}}.megadropdown post-list{display:flex;flex-direction:column;gap:.5rem}.megadropdown post-list-item{border-bottom:1px solid gray}.megadropdown post-list-item>a{padding-block:.25rem;display:block;text-decoration:none}.back-button{display:none}@media screen and (max-width: 1023.99px){.back-button{display:block}}post-closebutton{margin-left:auto}@media screen and (max-width: 1023.99px){post-closebutton{display:none}}h3{font-size:20px}";
+const postMegadropdownCss = "@keyframes slide-in{0%{transform:translateX(100%)}100%{transform:translateX(0%)}}@keyframes slide-out{from{transform:translateX(0%)}to{transform:translateX(100%)}}*,::before,::after{box-sizing:border-box}post-popovercontainer{--post-global-header-height:72px;--post-main-header-height:56px;--post-header-height:calc(var(--post-global-header-height) + var(--post-main-header-height));background-color:#fafafa;border:none;border-top:1px solid #e1e0dc;width:100%;border-radius:0;box-shadow:0 8px 6px rgba(0,0,0,.16)}@media screen and (max-width: 1023.99px){post-popovercontainer{--post-global-header-height:64px;position:absolute;top:var(--post-header-height) !important;bottom:0;left:0;width:100%;height:auto}post-popovercontainer.slide-in{animation:slide-in;animation-duration:350ms;animation-fill-mode:forwards}post-popovercontainer.slide-out{animation:slide-out;animation-duration:350ms;animation-fill-mode:forwards}}.megadropdown{padding:31px 40px 40px}@media screen and (max-width: 1023.99px){.megadropdown{padding:16px 32px 24px}}.megadropdown .megadropdown-content{gap:1.5rem;display:grid;grid-template-columns:repeat(auto-fit, minmax(min(15vw, 100%), 1fr));grid-auto-rows:1fr auto;grid-auto-flow:dense}@media screen and (max-width: 1023.99px){.megadropdown .megadropdown-content{grid-template-columns:repeat(auto-fit, minmax(min(35vw, 100%), 1fr))}}@media screen and (max-width: 599.99px){.megadropdown .megadropdown-content{grid-template-columns:1fr}}.megadropdown h2{display:none;margin-top:0;margin-bottom:8px;font-weight:900}.megadropdown h2 a{text-decoration:none;font-weight:inherit;border-bottom:0;border-top:0}@media screen and (max-width: 1023.99px){.megadropdown h2{display:block;font-size:20px}}.megadropdown a:hover{border-block-width:0}.megadropdown a:hover::after{content:unset}.megadropdown post-list{display:grid;grid-row:span 2;grid-template-rows:subgrid;row-gap:0px}.megadropdown post-list>[role=list]{flex-direction:unset;display:unset}.megadropdown post-list>*{width:100%}.megadropdown post-list .list-title{display:flex;flex-direction:column-reverse;height:100%}.megadropdown post-list .list-title h3{font-size:20px;border-bottom:1px solid #050400;padding:15px 12px 14px 0;display:block;font-weight:900}.megadropdown post-list .list-title h3 a{text-decoration:none;width:100%;font-size:inherit;display:inline-block;font-weight:inherit;height:unset;padding:0;border:0}@media screen and (max-width: 1023.99px){.megadropdown post-list .list-title h3{font-size:16px;padding:12px 12px 11px 0}}.megadropdown post-list-item{border-bottom:1px solid #050400}.megadropdown post-list-item>a{padding:13px 12px 12px 0;display:block;text-decoration:none;width:100%;border-bottom:0;height:auto;border-top:0}@media screen and (max-width: 1023.99px){.megadropdown post-list-item>a{padding:12px 12px 11px 0}}.megadropdown .back-button{display:none;margin-bottom:2rem}.megadropdown .back-button .btn{width:auto}.megadropdown .back-button post-icon{transform:rotate(180deg)}@media screen and (max-width: 1023.99px){.megadropdown .back-button{display:block}}.megadropdown .close-button{position:absolute;top:1rem;right:1rem}@media screen and (max-width: 1023.99px){.megadropdown .close-button{display:none}}";
 const PostMegadropdownStyle0 = postMegadropdownCss;
 
 const PostMegadropdown = /*@__PURE__*/ proxyCustomElement(class PostMegadropdown extends HTMLElement {
     constructor() {
         super();
         this.__registerHost();
+        this.postToggleMegadropdown = createEvent(this, "postToggleMegadropdown", 7);
+        this.isVisible = false;
+        this.animationClass = null;
+    }
+    componentDidLoad() {
+        this.popoverRef.addEventListener('postToggle', (event) => {
+            this.isVisible = event.detail;
+            this.postToggleMegadropdown.emit(this.isVisible);
+        });
+        this.popoverRef.addEventListener('animationend', () => {
+            if (this.animationClass === 'slide-out') {
+                this.hide();
+            }
+        });
     }
     /**
-     * Show megadropdown
-     * @param element HTMLElement
-     * @returns boolean
+     * Toggles the dropdown visibility based on its current state.
      */
-    async show(element) {
-        return this.popoverRef.show(element);
+    async toggle(target) {
+        this.isVisible ? this.hide() : await this.show(target);
     }
     /**
-     * Hide megadropdown
-     * @returns boolean
+     * Displays the popover dropdown
+     *
+     * @param target - The HTML element relative to which the popover dropdown should be displayed.
      */
-    async hide() {
-        return this.popoverRef.hide();
+    async show(target) {
+        if (this.popoverRef) {
+            await this.popoverRef.show(target);
+            this.animationClass = 'slide-in';
+        }
+        else {
+            console.error('show: popoverRef is null or undefined');
+        }
     }
     /**
-     * Toggle megadropdown
-     * @param element HTMLElement
-     * @param force boolean
-     * @returns boolean
+     * Hides the popover dropdown
      */
-    async toggle(element, force) {
-        return this.popoverRef.toggle(element, force !== null && force !== void 0 ? force : undefined);
+    hide() {
+        if (this.popoverRef) {
+            this.popoverRef.hide();
+        }
+        else {
+            console.error('hide: popoverRef is null or undefined');
+        }
     }
     handleBackButtonClick() {
-        this.hide();
+        this.animationClass = 'slide-out';
+    }
+    handleCloseButtonClick() {
+        this.popoverRef.hide();
     }
     render() {
-        return (h(Host, { key: '9b8e17f4120259f55ed3dbce4780559cb8876540', slot: "post-mainnavigation" }, h("post-popovercontainer", { key: 'ac48d1fffbcdff5aa20d9f2f6fed9beb4dd3be23', placement: "bottom", "edge-gap": "0", ref: el => (this.popoverRef = el) }, h("div", { key: 'af02d9fd35973b6d889b639f1d856dd3d9921ae1', class: "megadropdown" }, h("div", { key: '445aa9b1a04e63c0d2b17466c610a30662f3db0e', onClick: () => this.handleBackButtonClick(), class: "back-button" }, h("slot", { key: '8d8f4cad3d5860fdfc1c615e7122ab5dd2ca5ed3', name: "back-button" })), h("slot", { key: 'c9ba8c0941f86fd29a44153e186cd679bcd678f5' })))));
+        return (h(Host, { key: 'cfd4e6c7bb87c50e471d304a4b4f086266e1c2fe' }, h("post-popovercontainer", { key: '31dc3a5e98a5c60a4db8d47375491a6f3957af0b', class: this.animationClass, placement: "bottom", "edge-gap": "0", ref: el => (this.popoverRef = el) }, h("div", { key: '7001d0e108544a0244af088be0bde49f90a3dea3', class: "megadropdown" }, h("div", { key: '513b0710163e8f58677b6b50d2ba2d241cf9ff35', onClick: () => this.handleBackButtonClick(), class: "back-button" }, h("slot", { key: '5457c0b9bfff045f39f470e600b5aa31036c0807', name: "back-button" })), h("div", { key: 'c3314a4ae4f386224a2db7fe32203f72f6a1b284', onClick: () => this.handleCloseButtonClick(), class: "close-button" }, h("slot", { key: '8feeec24fe5f2522ba1a54ab0b7c682d3a152086', name: "close-button" })), h("slot", { key: '6d9426756a809ed26045c9cd56cacf0f36aa9400', name: "megadropdown-title" }), h("div", { key: 'fd3b0ac7998eec76700ccc6668d8b2e3fcc4c63a', class: "megadropdown-content" }, h("slot", { key: '23638936fdffa224de9631bfd599c0872202a30d' }))))));
     }
+    get host() { return this; }
     static get style() { return PostMegadropdownStyle0; }
 }, [4, "post-megadropdown", {
-        "show": [64],
-        "hide": [64],
-        "toggle": [64]
+        "isVisible": [32],
+        "animationClass": [32],
+        "toggle": [64],
+        "show": [64]
     }]);
 function defineCustomElement() {
     if (typeof customElements === "undefined") {

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

@@ -11,7 +11,7 @@ const PostMenuItem = /*@__PURE__*/ proxyCustomElement(class PostMenuItem extends
         this.__attachShadow();
     }
     render() {
-        return (h(Host, { key: '8e20fdee0faff826319440bed6ec7be0c56e6d06', role: "menuitem", "data-version": version }, h("slot", { key: '69e2be9dec334ade8e84ccb268c7d4955dd2fefb' })));
+        return (h(Host, { key: '0f53b8f818c87c59b0ec56e522852af0966e37ad', role: "menuitem", "data-version": version }, h("slot", { key: '4b821e1282df9bcfd297d74af56dfd5605baa0ee' })));
     }
     get host() { return this; }
     static get style() { return PostMenuItemStyle0; }

package/dist/components/post-menu-trigger2.js

@@ -50,6 +50,16 @@ const PostMenuTrigger = /*@__PURE__*/ proxyCustomElement(class PostMenuTrigger e
         this.root = getRoot(this.host);
         this.validateControlFor();
         this.slottedButton = this.host.querySelector('button');
+        // Check if the slottedButton is within a web component
+        if (!this.slottedButton) {
+            const webComponent = this.host.querySelector('.menu-trigger-webc');
+            if (webComponent.shadowRoot) {
+                const slottedButton = webComponent.shadowRoot.querySelector('button');
+                if (slottedButton) {
+                    this.slottedButton = slottedButton;
+                }
+            }
+        }
         if (this.slottedButton) {
             this.slottedButton.setAttribute('aria-haspopup', 'menu');
             this.slottedButton.addEventListener('click', () => {
@@ -62,7 +72,7 @@ const PostMenuTrigger = /*@__PURE__*/ proxyCustomElement(class PostMenuTrigger e
         }
     }
     render() {
-        return (h(Host, { key: 'd6b5619d0b4035887eaffdcc3c153eb0a5fe4ceb', "data-version": version, "tab-index": "-1" }, h("slot", { key: '5d87c80dae6188470b10207993822d92adc714b1' })));
+        return (h(Host, { key: '64e9e7e6448160c7b52fc732b5107e94e9776678', "data-version": version, "tab-index": "-1" }, h("slot", { key: '711d641147cec0c26c7a3917f9302f1bbbee0d73' })));
     }
     get host() { return this; }
     static get watchers() { return {

package/dist/components/post-menu2.js

@@ -1,5 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { v as version } from './package.js';
+import { g as getRoot } from './get-root.js';
 import { d as defineCustomElement$1 } from './post-popovercontainer2.js';
 
 const focusableSelector = `:where(${[
@@ -47,7 +48,7 @@ const PostMenu = /*@__PURE__*/ proxyCustomElement(class PostMenu extends HTMLEle
             TAB: 'Tab',
             HOME: 'Home',
             END: 'End',
-            ESCAPE: 'Escape'
+            ESCAPE: 'Escape',
         };
         this.handleKeyDown = (e) => {
             e.stopPropagation();
@@ -69,6 +70,7 @@ const PostMenu = /*@__PURE__*/ proxyCustomElement(class PostMenu extends HTMLEle
         this.isVisible = false;
     }
     connectedCallback() {
+        this.root = getRoot(this.host);
         this.host.addEventListener('keydown', this.handleKeyDown);
         this.host.addEventListener('click', this.handleClick);
     }
@@ -96,7 +98,7 @@ const PostMenu = /*@__PURE__*/ proxyCustomElement(class PostMenu extends HTMLEle
     async show(target) {
         if (this.popoverRef) {
             await this.popoverRef.show(target);
-            this.lastFocusedElement = document.activeElement;
+            this.lastFocusedElement = this.root.activeElement; // Use root's activeElement
             const menuItems = this.getSlottedItems();
             if (menuItems.length > 0) {
                 menuItems[0].focus();
@@ -125,7 +127,7 @@ const PostMenu = /*@__PURE__*/ proxyCustomElement(class PostMenu extends HTMLEle
         if (!menuItems.length) {
             return;
         }
-        const currentFocusedElement = document.activeElement;
+        const currentFocusedElement = this.root.activeElement; // Use root's activeElement
         let currentIndex = menuItems.findIndex(el => el === currentFocusedElement);
         switch (e.key) {
             case this.KEYCODES.UP:
@@ -168,7 +170,7 @@ const PostMenu = /*@__PURE__*/ proxyCustomElement(class PostMenu extends HTMLEle
         return menuItems;
     }
     render() {
-        return (h(Host, { key: 'c3fa319c92cc36b562590df18b6585b1bc18f133', "data-version": version }, h("post-popovercontainer", { key: '7d297b7598fecb01f46c3f1b999b6017ee878d06', placement: this.placement, ref: e => (this.popoverRef = e) }, h("div", { key: '3ae32950348ae8910094cddd34afef060ca517f1', class: "popover-container" }, h("slot", { key: '7faa98f2f4c50ef1ac424387a6c3890dcf09adce' })))));
+        return (h(Host, { key: '48e04f36dc7a3d8ed81b9570d1a4c931ace3cadd', "data-version": version }, h("post-popovercontainer", { key: '58532143bd7a8be7ea77cbd0a929fa74ee0ee890', placement: this.placement, ref: e => (this.popoverRef = e) }, h("div", { key: '967bf8aa936611ac6d533d9a8a1e176ee84b2a73', class: "popover-container", part: "popover-container" }, h("slot", { key: '4eb6b7fe34e8ea1df0d7cd8de31b57452442c3bb' })))));
     }
     get host() { return this; }
     static get style() { return PostMenuStyle0; }

package/dist/components/post-popover2.js

@@ -96,7 +96,7 @@ const PostPopover = /*@__PURE__*/ proxyCustomElement(class PostPopover extends H
         this.triggers.forEach(trigger => trigger.setAttribute('aria-expanded', 'false'));
     }
     render() {
-        return (h(Host, { key: 'e73d0edf5c6992db8c8c6e162a9c50e95a335d79', "data-version": version }, h("post-popovercontainer", { key: '206cbec19db4af9772899c1ec4cc870c362f590e', arrow: this.arrow, placement: this.placement, ref: e => (this.popoverRef = e) }, h("div", { key: '8d744d6784d892313b137ee03dd9967ea4b77184', class: "popover-container" }, h("div", { key: 'aa78aee830e853945f0049d0708710f8fad90d36', class: "popover-content" }, h("slot", { key: '50a5aeae0c0db36e5c0aa2495f3d95474bed13fc' })), h("button", { key: '4389f79f9e1b2a0977a0ecb177b385f049cc8484', class: "btn-close", onClick: () => this.hide() }, h("span", { key: 'e302e17cef666fc280a547ebc3caeedacdc544b0', class: "visually-hidden" }, this.closeButtonCaption))))));
+        return (h(Host, { key: 'fefbc18d8ca6246199a7843edb3e05b2bc134b52', "data-version": version }, h("post-popovercontainer", { key: 'bf0d5fad73c87674c0f7d5b0a3a84836e8f5126c', arrow: this.arrow, placement: this.placement, ref: e => (this.popoverRef = e) }, h("div", { key: '08aa8cd87c49f87ee72bf98dd6d07dea52bb49c8', class: "popover-container" }, h("div", { key: '7fae463b6633d105ab8e112c3b564256ea574721', class: "popover-content" }, h("slot", { key: '47a529a55502ccf290c1bf7fcebc68502fbac569' })), h("button", { key: 'ede2f23b3435fec596b0e73c285eda6c1a4fa449', class: "btn-close", onClick: () => this.hide() }, h("span", { key: '4df83539eb8f5cd80f0f7548db217e17a8474d8d', class: "visually-hidden" }, this.closeButtonCaption))))));
     }
     get host() { return this; }
     static get style() { return PostPopoverStyle0; }

package/dist/components/post-popovercontainer2.js

@@ -2176,9 +2176,9 @@ const PostPopovercontainer = /*@__PURE__*/ proxyCustomElement(class PostPopoverc
         }
     }
     render() {
-        return (h(Host, { key: 'b8be8594adfd503c47f85872508d5bbd3473cc5a', "data-version": version }, this.arrow && (h("span", { key: 'f046737966eb3b801af1e888555178543ea015eb', class: "arrow", ref: el => {
+        return (h(Host, { key: '23e391236e263f7ae7c66c994b2847bcba269b37', "data-version": version }, this.arrow && (h("span", { key: '6c6053b2fd315a5940a2c3493182249782b2492c', class: "arrow", ref: el => {
                 this.arrowRef = el;
-            } })), h("slot", { key: '5d478472a83442d47e4f16ff8121782c8e6a524b' })));
+            } })), h("slot", { key: 'ff998f110f42a22e886eba398285c41d94718bab' })));
     }
     get host() { return this; }
     static get style() { return PostPopovercontainerStyle0; }

package/dist/components/post-rating2.js

@@ -74,7 +74,7 @@ const PostRating = /*@__PURE__*/ proxyCustomElement(class PostRating extends HTM
         }
     }
     render() {
-        return (h(Host, { key: '98459f7f5e2406577857571fb6ececd8198a4cdb', "data-version": version }, h("div", { key: '2880d40e1623e49c8cae64b70e0057713f5f5cfd', role: "slider", class: "rating", tabindex: "0", "aria-label": this.label, "aria-valuemin": "0", "aria-valuemax": this.stars, "aria-valuenow": this.currentRating, "aria-valuetext": `${this.currentRating} out of ${this.stars}`, "aria-readonly": this.readonly ? 'true' : 'false', onKeyDown: this.keydownHandler, onBlur: this.blurHandler }, Array.from({ length: this.stars }).map((v, i) => (h("div", { key: `star-${v}`, "aria-hidden": "true", class: {
+        return (h(Host, { key: '4d1fbd0cc858dea3d8eb576e2968198e4569db26', "data-version": version }, h("div", { key: '7a64af9155486be01e2ccbabcb2bc34f4531a323', role: "slider", class: "rating", tabindex: "0", "aria-label": this.label, "aria-valuemin": "0", "aria-valuemax": this.stars, "aria-valuenow": this.currentRating, "aria-valuetext": `${this.currentRating} out of ${this.stars}`, "aria-readonly": this.readonly ? 'true' : 'false', onKeyDown: this.keydownHandler, onBlur: this.blurHandler }, Array.from({ length: this.stars }).map((v, i) => (h("div", { key: `star-${v}`, "aria-hidden": "true", class: {
                 'star': true,
                 'before-hover': i < this.hoveredIndex,
                 'active': i < Math.round(this.currentRating),

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

@@ -20,7 +20,7 @@ const PostTabHeader = /*@__PURE__*/ proxyCustomElement(class PostTabHeader exten
         this.tabId = `tab-${this.host.id || crypto.randomUUID()}`;
     }
     render() {
-        return (h(Host, { key: 'af78e7b118f13ce64c76947af5dc3a6ed5ed09a0', id: this.tabId, role: "tab", "data-version": version, "aria-selected": "false", tabindex: "-1", class: "tab-title", slot: "tabs" }, h("slot", { key: '99a8257992b974f9c3503eb1f67652c50bbf0671' })));
+        return (h(Host, { key: '97ce31f2069ea710e4d1f15879f323a0966a072d', id: this.tabId, role: "tab", "data-version": version, "aria-selected": "false", tabindex: "-1", class: "tab-title", slot: "tabs" }, h("slot", { key: '78a7154fdbf6cb51069c84dc545ae6bb81f66671' })));
     }
     get host() { return this; }
     static get watchers() { return {

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

@@ -17,7 +17,7 @@ const PostTabPanel = /*@__PURE__*/ proxyCustomElement(class PostTabPanel extends
         this.panelId = `panel-${this.host.id || crypto.randomUUID()}`;
     }
     render() {
-        return (h(Host, { key: 'b4d8a6dac8662fc442ba4b75c7f89bb630b1a0ad', "data-version": version, id: this.panelId, role: "tabpanel" }, h("slot", { key: '3253ed0b5efe32b0c49fc97e46de31ee3dbbd813' })));
+        return (h(Host, { key: '99270e53616a4dce990388b8cd825295fcdcb7d2', "data-version": version, id: this.panelId, role: "tabpanel" }, h("slot", { key: '049a0e04937e286786a54eb6f6fd5fe909d85cea' })));
     }
     get host() { return this; }
     static get style() { return PostTabPanelStyle0; }

package/dist/components/post-tabs2.js

@@ -36,12 +36,13 @@ const PostTabs = /*@__PURE__*/ proxyCustomElement(class PostTabs extends HTMLEle
         this.activePanel = undefined;
     }
     get tabs() {
-        return this.host.querySelectorAll('post-tab-header');
+        return Array.from(this.host.querySelectorAll('post-tab-header')).filter(tab => tab.closest('post-tabs') === this.host);
     }
     componentDidLoad() {
+        var _a;
         this.moveMisplacedTabs();
         this.enableTabs();
-        const initiallyActivePanel = this.activePanel || this.tabs.item(0).panel;
+        const initiallyActivePanel = this.activePanel || ((_a = this.tabs[0]) === null || _a === void 0 ? void 0 : _a.panel);
         void this.show(initiallyActivePanel);
         this.isLoaded = true;
     }
@@ -86,6 +87,7 @@ const PostTabs = /*@__PURE__*/ proxyCustomElement(class PostTabs extends HTMLEle
         });
     }
     enableTabs() {
+        var _a;
         if (!this.tabs)
             return;
         this.tabs.forEach(async (tab) => {
@@ -112,7 +114,7 @@ const PostTabs = /*@__PURE__*/ proxyCustomElement(class PostTabs extends HTMLEle
         });
         // 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.item(0).panel);
+            void this.show((_a = this.tabs[0]) === null || _a === void 0 ? void 0 : _a.panel);
         }
     }
     activateTab(tab) {
@@ -164,7 +166,7 @@ const PostTabs = /*@__PURE__*/ proxyCustomElement(class PostTabs extends HTMLEle
         nextTab.focus();
     }
     render() {
-        return (h(Host, { key: '8e6ef1f64dd41d18cbb87d23ae27ed198dba420f', "data-version": version }, h("div", { key: '3e08dbfa502935737040e54f71c5cdba55838ac5', class: "tabs-wrapper", part: "tabs" }, h("div", { key: '57c2c50ec3ca3ee38a69f3c46f0bd6cfb3649178', class: "tabs", role: "tablist" }, h("slot", { key: 'c7ce48bec67f02abf47fa2d152a786f2f7f912fe', name: "tabs", onSlotchange: () => this.enableTabs() }))), h("div", { key: 'daf2d7e9d51ad3831a68ed8cd6498d9042bc017f', class: "tab-content", part: "content" }, h("slot", { key: 'ee2c3619a2c262a416b34b65843f10e4baa62e38', onSlotchange: () => this.moveMisplacedTabs() }))));
+        return (h(Host, { key: 'ee9628ed2eb47e6e41001f22c7a455da4b0c30bc', "data-version": version }, h("div", { key: 'd4387bfa9efb56d02403ee51aa3a3bce53c044bd', class: "tabs-wrapper", part: "tabs" }, h("div", { key: '020526d64754fb7c61b397894291d19d22a754ed', class: "tabs", role: "tablist" }, h("slot", { key: '875f7ccaf2f980087fbc461c22ed223f00bcb4ba', name: "tabs", onSlotchange: () => this.enableTabs() }))), h("div", { key: 'c4ecb26258e2cf20394b89c9ae20fd575f13bae6', class: "tab-content", part: "content" }, h("slot", { key: 'd1e60679e580df4a903d021a2985c4299a356d28', onSlotchange: () => this.moveMisplacedTabs() }))));
     }
     get host() { return this; }
     static get style() { return PostTabsStyle0; }

package/dist/components/post-tag2.js

@@ -35,7 +35,7 @@ const PostTag = /*@__PURE__*/ proxyCustomElement(class PostTag extends HTMLEleme
         this.setClasses();
     }
     render() {
-        return (h(Host, { key: 'e2d95e10853f66d7b05768b80a0350e0bc05051d', "data-version": version }, h("div", { key: '72bac44cca9c4197e9042e6a4896f235d057a5c9', class: this.classes }, this.icon ? h("post-icon", { name: this.icon }) : null, h("div", { key: '1b54b8a89320306aa09fe1e50dffd453b44fc587', class: "tag-text" }, h("slot", { key: '52f4f5b2d62f8ae245c7b472cdbc9f5202b554c1' })))));
+        return (h(Host, { key: '32c08ea43811e47b2560e335b59486c356fa5a9b', "data-version": version }, h("div", { key: 'f04dc3e4c5b14edea0e1fd1cab581c286f3d74ff', class: this.classes }, this.icon ? h("post-icon", { name: this.icon }) : null, h("div", { key: '701e75bb1c31392d8f378339c5a31920cb5d8a7e', class: "tag-text" }, h("slot", { key: '6470a3ba2586bdc9ded20ff686f2c6ca58c47c69' })))));
     }
     get host() { return this; }
     static get watchers() { return {

package/dist/components/post-togglebutton2.js

@@ -1,7 +1,8 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { v as version } from './package.js';
+import { c as checkType } from './check-type.js';
 
-const postTogglebuttonCss = ":host{cursor:pointer}";
+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 PostTogglebuttonStyle0 = postTogglebuttonCss;
 
 const PostTogglebutton = /*@__PURE__*/ proxyCustomElement(class PostTogglebutton extends HTMLElement {
@@ -13,18 +14,35 @@ const PostTogglebutton = /*@__PURE__*/ proxyCustomElement(class PostTogglebutton
             this.toggled = !this.toggled;
         };
         this.handleKeydown = (event) => {
-            if (event.key === 'Enter') {
-                this.toggled = !this.toggled;
+            // 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();
             }
         };
         this.toggled = false;
     }
+    validateToggled(value = this.toggled) {
+        checkType(value, 'boolean', 'The "toggled" property of the post-togglebutton must be a boolean.');
+    }
+    componentWillLoad() {
+        this.validateToggled();
+        // 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: '82fc4126d97650255d1d5fd041208b3d11cf0ded', slot: "post-togglebutton", tabindex: "0", "data-version": version, role: "button", "aria-pressed": this.toggled.toString(), onClick: this.handleClick, onKeyDown: this.handleKeydown }, h("span", { key: '0364e8b63cc2c7955282f62533683c3627aa6626', hidden: this.toggled }, h("slot", { key: '11ccb62855497ddf395276e7f7e88a8409fa36e4', name: "untoggled" })), h("span", { key: '463f4571ceecc51063a4d4495d22063b6b75d0df', hidden: !this.toggled }, h("slot", { key: '7d41e35a64deefd22087524bc57530603aae18fa', name: "toggled" }))));
+        return (h(Host, { key: 'f20b7e5f7cd14c1b0addf12600df27e7e5dab841', slot: "post-togglebutton", "data-version": version, role: "button", tabindex: "0", "aria-pressed": this.toggled.toString() }, h("slot", { key: '526540ce9a66fa08f0142e674811fe88e3abcfa6' })));
     }
+    get host() { return this; }
+    static get watchers() { return {
+        "toggled": ["validateToggled"]
+    }; }
     static get style() { return PostTogglebuttonStyle0; }
 }, [1, "post-togglebutton", {
-        "toggled": [1540]
+        "toggled": [1028]
+    }, undefined, {
+        "toggled": ["validateToggled"]
     }]);
 function defineCustomElement() {
     if (typeof customElements === "undefined") {

package/dist/components/post-tooltip2.js

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement as HTMLElement$1, h, Host } from '@stencil/core/internal/client';
 import { v as version$1 } from './package.js';
 import { g as getAttributeObserver } from './attribute-observer.js';
-import { d as checkEmptyOrType } from './index2.js';
+import { e as checkEmptyOrType } from './index2.js';
 import { d as defineCustomElement$1 } from './post-popovercontainer2.js';
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
@@ -4989,7 +4989,7 @@ const PostTooltip = /*@__PURE__*/ proxyCustomElement(class PostTooltip extends H
     }
     render() {
         const popoverClass = `${this.arrow ? ' has-arrow' : ''}`;
-        return (h(Host, { key: 'accf9ab04bcac0d6ed46818dc00e9110f936e593', "data-version": version$1, role: "tooltip", onPointerOver: this.handleInterest, onPointerOut: this.handleInterestLost, onFocusIn: this.handleInterest, onFocusOut: this.handleInterestLost }, h("post-popovercontainer", { key: 'e31610624b6833e78de7cb6ec52fb3fc5ca02d49', class: popoverClass, arrow: this.arrow, placement: this.placement, ref: (el) => (this.popoverRef = el) }, h("slot", { key: '206925925cc51d3b0eb4f2c0b1e8ca65ab3fd8c4' }))));
+        return (h(Host, { key: '71db1ccf3cf929d76550b08e69c8594479eaa84f', "data-version": version$1, role: "tooltip", onPointerOver: this.handleInterest, onPointerOut: this.handleInterestLost, onFocusIn: this.handleInterest, onFocusOut: this.handleInterestLost }, h("post-popovercontainer", { key: 'b9a38cabbfc2cf2eb9b257bca32022b5d97aac7c', class: popoverClass, arrow: this.arrow, placement: this.placement, ref: (el) => (this.popoverRef = el) }, h("slot", { key: '316b55f5fc55d9607205496a87f02a0a5fa197cf' }))));
     }
     get host() { return this; }
     static get watchers() { return {

package/dist/components/slide.js

@@ -0,0 +1,25 @@
+const easing = 'ease';
+const duration = 500;
+const fill = 'forwards';
+const slideUp = (el, translateSize = '100%') => {
+    return el.animate([
+        { transform: `translateY(${translateSize})` }, // Starting position (no translation)
+        { transform: 'translateY(0)' }, // End position
+    ], {
+        duration: duration,
+        easing,
+        fill,
+    });
+};
+const slideDown = (el, translateSize = '100%') => {
+    return el.animate([
+        { transform: 'translateY(0)' }, // Starting position (no translation)
+        { transform: `translateY(${translateSize})` }, // End position
+    ], {
+        duration: duration,
+        easing,
+        fill,
+    });
+};
+
+export { slideDown as a, slideUp as s };