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

package/dist/components/post-megadropdown.js

@@ -1,15 +1,64 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { g as getFocusableChildren } from './get-focusable-children.js';
 import { v as version } from './package.js';
-import { b as breakpoint } from './breakpoints.js';
+import { c as checkRequiredAndType, g as breakpoint } from './breakpoints.js';
+import { r as resolveEasing } from './utils.js';
+import { f as fadeSlide } from './fade-slide.js';
+import { d as defineCustomElement$3 } from './post-closebutton2.js';
+import { d as defineCustomElement$2 } from './post-icon2.js';
 
-const postMegadropdownCss = "@keyframes slide-in{0%{transform:translateX(100%)}100%{transform:translateX(0%)}}@keyframes slide-out{from{transform:translateX(0%)}to{transform:translateX(100%)}}@keyframes slide-down{from{transform:translateY(-100%)}to{transform:translateY(0%)}}@keyframes slide-up{0%{transform:translateY(0%)}100%{transform:translateY(-100%)}}*,::before,::after{box-sizing:border-box}.megadropdown-container{box-shadow:0 8px 6px rgba(0,0,0,.16);position:absolute;background-color:#fafafa;border:none;width:100%;inset-block-start:100%;inset-inline-start:0;border-radius:0}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.megadropdown-container{border-block-end:1px solid CanvasText}}.megadropdown-container.slide-in{animation:slide-down 350ms forwards}.megadropdown-container.slide-out{animation:slide-up 350ms forwards}@media screen and (max-width: 1023.98px){.megadropdown-container{z-index:1;position:absolute;inset-block-start:var(--post-header-navigation-current-inset);inset-inline:0;height:calc(min(var(--post-header-scroll-parent-height, 100dvh),100dvh) - var(--post-header-height));border-block-start:unset;overflow-y:auto;overscroll-behavior:contain}.megadropdown-container.slide-in{animation:slide-in 350ms forwards}.megadropdown-container.slide-out{animation:slide-out 350ms forwards}}@media screen and (min-width: 1024px){.megadropdown-container{z-index:-1;max-height:calc(100vh - var(--post-header-height) - 48px);overflow-y:auto}}.megadropdown{padding:31px 40px 40px;background-color:#fafafa}@media screen and (max-width: 1023.98px){.megadropdown{display:flex;flex-direction:column;width:inherit;padding:16px 32px 24px}}@media screen and (max-width: 599.98px){.megadropdown{padding-inline:16px}}.megadropdown [slot=megadropdown-overview-link]{text-decoration:none;border-radius:0;padding-block:13px 12px;margin-block-end:16px;display:flex;align-items:center;min-height:56px;width:100%;min-width:100%;height:48px;padding-inline:8px 12px;gap:16px;font-weight:400;position:relative;height:unset}.megadropdown [slot=megadropdown-overview-link]:focus-visible{border-radius:4px}.megadropdown [slot=megadropdown-overview-link]::before{content:\"\";background-color:#050400;bottom:0;width:100%;height:1px;position:absolute;left:0}.megadropdown [slot=megadropdown-overview-link].active,.megadropdown [slot=megadropdown-overview-link][aria-current=page],.megadropdown [slot=megadropdown-overview-link][aria-expanded=true]{background-color:#050400;color:#fff}.megadropdown [slot=megadropdown-overview-link]:hover{background-color:#504f4b;color:#fff}.megadropdown [slot=megadropdown-overview-link]:hover::before{background-color:#504f4b}@media screen and (max-width: 1023.98px){.megadropdown [slot=megadropdown-overview-link]{padding-block:12px 11px;min-height:unset}}@media screen and (max-width: 599.98px){.megadropdown [slot=megadropdown-overview-link]{padding-block:10px 9px}}.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.98px){.megadropdown .megadropdown-content{grid-template-columns:repeat(auto-fit, minmax(min(35vw, 100%), 1fr))}}@media screen and (max-width: 599.98px){.megadropdown .megadropdown-content{grid-template-columns:1fr}}.megadropdown h2{display:none;margin-block:0 8px;font-weight:900}.megadropdown h2 a{text-decoration:none;display:none;font-weight:inherit;border-block:0}@media screen and (max-width: 1023.98px){.megadropdown h2{display:block;font-size:1.25rem}}@media screen and (max-width: 599.98px){.megadropdown h2{font-size:1.125rem}}.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;display:block;font-weight:900}.megadropdown post-list .list-title h3:not(:has(a)),.megadropdown post-list .list-title h3 a{padding:16px 12px 14px 8px}.megadropdown post-list .list-title h3:not(:has(a)){position:relative}.megadropdown post-list .list-title h3:not(:has(a))::before{content:\"\";background-color:#050400;inset-block-end:0;inset-inline-start:0;width:100%;height:2px;position:absolute}.megadropdown post-list .list-title h3 a{border-radius:4px;text-decoration:none;font-size:inherit;display:flex;align-items:center;justify-content:space-between;min-height:53px;width:100%;min-width:100%;height:48px;padding-inline:8px 12px;gap:16px;font-weight:400;position:relative;height:unset;font-weight:900}.megadropdown post-list .list-title h3 a::before{content:\"\";background-color:#050400;bottom:0;width:100%;height:1px;position:absolute;left:0}.megadropdown post-list .list-title h3 a.active,.megadropdown post-list .list-title h3 a[aria-current=page],.megadropdown post-list .list-title h3 a[aria-expanded=true]{background-color:#050400;color:#fff}.megadropdown post-list .list-title h3 a:hover{background-color:#504f4b;color:#fff}.megadropdown post-list .list-title h3 a:hover::before{background-color:#504f4b}.megadropdown post-list .list-title h3 a::before{height:2px}@media screen and (max-width: 1023.98px){.megadropdown post-list .list-title h3{font-size:1rem}.megadropdown post-list .list-title h3:not(:has(a)),.megadropdown post-list .list-title h3 a{padding:14px 12px 12px 8px}}@media screen and (max-width: 599.98px){.megadropdown post-list .list-title h3{font-size:.875rem}}.megadropdown post-list-item>a{padding-block:13px 12px;padding-inline-start:8px;display:flex;text-decoration:none;width:100%;min-width:100%;height:auto;min-height:48px;white-space:normal;word-break:break-word}.megadropdown post-list-item>a:hover{border-block-width:0}@media screen and (min-width: 1024px){.megadropdown post-list-item>a{font-size:1.25rem}}@media screen and (max-width: 1023.98px){.megadropdown post-list-item>a{padding-block:12px 11px}}@media screen and (max-width: 599.98px){.megadropdown post-list-item>a{font-size:.875rem}}.megadropdown .back-button{display:none;margin-block-end:2rem}.megadropdown .back-button .btn{width:auto}@media screen and (max-width: 1023.98px){.megadropdown .back-button{order:-1;display:block}}.megadropdown .close-button{position:absolute;inset-block-start:1rem;inset-inline-end:1rem}@media screen and (max-width: 1023.98px){.megadropdown .close-button{display:none}}";
+/**
+ * Used by PostMegadropdown (burger menu)
+ */
+const defaultOptions = {
+    translate: 100,
+    duration: 500,
+    easing: 'ease',
+    fill: 'none',
+};
+function animateSlide(el, keyframes, options) {
+    const { duration, easing, fill } = { ...defaultOptions, ...options };
+    return el.animate(keyframes, { duration, easing: resolveEasing(easing), fill });
+}
+function slide(el, direction, options = {}) {
+    const mergedOptions = {
+        ...defaultOptions,
+        ...options,
+    };
+    const { translate } = mergedOptions;
+    const baseKeyframes = [
+        { transform: `translateX(${translate}%)` },
+        { transform: 'translateX(0)' },
+    ];
+    const keyframes = direction === 'in' ? baseKeyframes : [...baseKeyframes].reverse();
+    return animateSlide(el, keyframes, options);
+}
+
+const postMegadropdownCss = "*,::before,::after{box-sizing:border-box}.megadropdown{position:absolute;inset-inline:0;overflow-y:auto;background-color:#fafafa;box-shadow:var(--post-device-elevation-300)}@media screen and (min-width: 1024px){.megadropdown{z-index:-1;inset-block-start:100%;max-height:calc(100vh - var(--post-header-height) - 3rem);padding:2rem 2.5rem 2.5rem}.megadropdown.slide-in{animation:slide-down 350ms forwards}.megadropdown.slide-out{animation:slide-up 350ms forwards}}@media screen and (max-width: 1023.98px){.megadropdown{z-index:1;inset-block-start:var(--post-header-navigation-current-inset);overscroll-behavior:contain;height:calc(min(var(--post-header-scroll-parent-height, 100dvh),100dvh) - var(--post-header-height));padding-inline:var(--post-burger-menu-padding-inline);padding-block:1.5rem;display:flex;flex-direction:column}}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.megadropdown{border-block-end:1px solid CanvasText}}.megadropdown-title{margin-block:0 1rem;font-weight:950}@media screen and (min-width: 600px)and (max-width: 1023.98px){.megadropdown-title{font-size:1.25rem}}@media screen and (min-width: 0)and (max-width: 599.98px){.megadropdown-title{font-size:1.125rem}}.back-button{display:inline-flex;position:relative;align-items:center;justify-content:center;max-width:100%;overflow:hidden;transition:opacity 250ms,border-color 250ms,background-color 250ms,color 250ms;border-width:var(--post-device-border-width-default);border-style:solid;border-radius:var(--post-device-border-radius-round);background-color:rgba(0,0,0,0);box-shadow:none;font-family:inherit;font-weight:var(--post-device-font-weight-bold);text-decoration:none;white-space:nowrap;cursor:pointer;min-height:var(--post-device-sizing-interactive-button-height-4);gap:var(--post-device-spacing-gap-inline-11);padding:0 var(--post-device-spacing-padding-inline-7);border-color:var(--post-scheme-color-interactive-button-tertiary-enabled-stroke);background-color:var(--post-scheme-color-interactive-button-tertiary-enabled-bg);color:var(--post-scheme-color-interactive-button-tertiary-enabled-fg);order:-1;width:fit-content;padding-inline:0}.back-button:hover{text-decoration:none}.back-button:disabled{border-style:var(--post-core-border-style-dash)}.back-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}.back-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){.back-button:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){.back-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){.back-button:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.back-button:is(a){color:LinkText;border:unset}.back-button:is(button){background-color:ButtonFace !important;border:1px solid ButtonBorder !important}.back-button:not(:disabled,.disabled):is(button):hover{background-color:Highlight !important}.back-button:not(:disabled,.disabled):is(button):hover>post-icon{color:HighlightText !important}}.back-button>post-icon{width:var(--post-device-sizing-interactive-button-icon-5);height:var(--post-device-sizing-interactive-button-icon-5)}.back-button:hover{border-color:var(--post-scheme-color-interactive-button-tertiary-hover-stroke);background-color:var(--post-scheme-color-interactive-button-tertiary-hover-bg);color:var(--post-scheme-color-interactive-button-tertiary-hover-fg)}@media screen and (min-width: 600px)and (max-width: 1023.98px){.back-button{margin-block-end:2rem}}@media screen and (min-width: 0)and (max-width: 599.98px){.back-button{margin-block-end:1.5rem}}.close-button{position:absolute;inset-block-start:1rem;inset-inline-end:1rem}@media screen and (max-width: 1023.98px){.close-button{display:none}}";
 
 const PostMegadropdown$1 = /*@__PURE__*/ proxyCustomElement(class PostMegadropdown extends HTMLElement {
+    validateTextClose() {
+        checkRequiredAndType(this, 'textClose', 'string');
+    }
+    validateTextBack() {
+        checkRequiredAndType(this, 'textBack', 'string');
+    }
+    get megadropdownTrigger() {
+        const hostId = this.host.getAttribute('id');
+        return hostId ? document.querySelector(`post-megadropdown-trigger[for="${hostId}"]`) : null;
+    }
     constructor() {
         super();
         this.__registerHost();
+        this.__attachShadow();
         this.postToggleMegadropdown = createEvent(this, "postToggleMegadropdown", 7);
+        this.currentAnimation = null;
+        this.isAnimating = false;
+        this.fsAnimationOptions = {
+            translate: -10,
+            duration: 350,
+            easing: 'headerEase',
+        };
         this.device = breakpoint.get('device');
         /**
          * Holds the current visibility state of the dropdown.
@@ -20,13 +69,17 @@ const PostMegadropdown$1 = /*@__PURE__*/ proxyCustomElement(class PostMegadropdo
         this.trigger = false;
         /** Holds the current animation class. */
         this.animationClass = null;
-        this.handleClickOutside = (event) => {
+        this.handleClickOutside = async (event) => {
             if (this.device !== 'desktop')
                 return;
             const target = event.target;
             if (this.host.contains(target)) {
                 return;
             }
+            // Ignore clicks on the trigger or its contents to prevent running hide() twice
+            if (this.megadropdownTrigger.contains(target)) {
+                return;
+            }
             if (target instanceof HTMLElement) {
                 const trigger = target.closest('post-megadropdown-trigger');
                 if (trigger) {
@@ -36,14 +89,11 @@ const PostMegadropdown$1 = /*@__PURE__*/ proxyCustomElement(class PostMegadropdo
                     }
                 }
             }
-            this.hide(false);
+            await this.hide(false);
         };
-    }
-    get megadropdownTrigger() {
-        const hostId = this.host.getAttribute('id');
-        return hostId
-            ? document.querySelector(`post-megadropdown-trigger[for="${hostId}"] > button`)
-            : null;
+        this.keyboardHandler = this.keyboardHandler.bind(this);
+        this.handleTabOutside = this.handleTabOutside.bind(this);
+        this.handleClickOutside = this.handleClickOutside.bind(this);
     }
     connectedCallback() {
         window.addEventListener('postBreakpoint:device', this.breakpointChange.bind(this));
@@ -52,16 +102,17 @@ const PostMegadropdown$1 = /*@__PURE__*/ proxyCustomElement(class PostMegadropdo
         this.getFocusableElements();
     }
     componentDidLoad() {
+        this.validateTextClose();
+        this.validateTextBack();
         this.checkInitialAriaCurrent();
         this.setupObserver();
         this.handleAriaCurrentChange([]);
     }
     disconnectedCallback() {
-        this.removeListeners();
         window.removeEventListener('postBreakpoint:device', this.breakpointChange.bind(this));
-        if (PostMegadropdown.activeDropdown === this) {
+        if (PostMegadropdown.activeDropdown === this)
             PostMegadropdown.activeDropdown = null;
-        }
+        this.removeListeners();
         if (this.defaultSlotObserver) {
             this.defaultSlotObserver.disconnect();
         }
@@ -70,41 +121,70 @@ const PostMegadropdown$1 = /*@__PURE__*/ proxyCustomElement(class PostMegadropdo
      * Toggles the dropdown visibility based on its current state.
      */
     async toggle() {
-        if (this.isVisible) {
-            this.hide();
-        }
-        else {
-            await this.show();
+        if (this.isAnimating) {
+            // If this is already animating towards a future state -> reverse intent
+            return this.isVisible ? this.show() : this.hide();
         }
+        return this.isVisible ? this.hide() : this.show();
     }
     /**
      * Displays the dropdown.
      */
     async show() {
+        if (this.device !== 'desktop') {
+            const trigger = this.megadropdownTrigger;
+            if (trigger)
+                this.megadropdownTitle = trigger.innerHTML;
+        }
         if (PostMegadropdown.activeDropdown && PostMegadropdown.activeDropdown !== this) {
             // Close the previously active dropdown without animation
             PostMegadropdown.activeDropdown.forceClose();
         }
-        this.animationClass = 'slide-in';
+        this.cancelAnimation();
+        // Set the megadropdown visible and mark it as the active dropdown
         this.isVisible = true;
         PostMegadropdown.activeDropdown = this;
-        this.postToggleMegadropdown.emit({ isVisible: this.isVisible });
-        if (this.firstFocusableEl &&
-            window.getComputedStyle(this.firstFocusableEl).display !== 'none') {
-            this.firstFocusableEl.focus();
+        // Update trigger state
+        this.postToggleMegadropdown.emit({ isVisible: true });
+        try {
+            await this.animate('in');
+            this.focusFirst();
+            // After the megadropdown has finished entry animation
+            this.addListeners();
+        }
+        catch {
+            // Open animation was cancelled - reset state
+            this.removeListeners();
+            this.isVisible = false;
+            if (PostMegadropdown.activeDropdown === this)
+                PostMegadropdown.activeDropdown = null;
+            this.postToggleMegadropdown.emit({ isVisible: false, focusParent: true });
         }
-        this.addListeners();
     }
     /**
      * Hides the dropdown with an animation.
      */
     async hide(focusParent = true, forceClose = false) {
-        this.postToggleMegadropdown.emit({ isVisible: false, focusParent: focusParent });
         if (forceClose) {
             this.forceClose();
+            return;
         }
-        else {
-            this.animationClass = 'slide-out';
+        // Update trigger state
+        this.postToggleMegadropdown.emit({ isVisible: false, focusParent: focusParent });
+        try {
+            await this.animate('out');
+            // After the closing animation finishes set the megadropdown as non visible
+            this.isVisible = false;
+            this.removeListeners();
+            if (PostMegadropdown.activeDropdown === this)
+                PostMegadropdown.activeDropdown = null;
+        }
+        catch {
+            // Closing animation was cancelled - reset state
+            PostMegadropdown.activeDropdown = this;
+            this.addListeners();
+            this.isVisible = true;
+            this.postToggleMegadropdown.emit({ isVisible: true, focusParent: false });
         }
     }
     /**
@@ -113,63 +193,74 @@ const PostMegadropdown$1 = /*@__PURE__*/ proxyCustomElement(class PostMegadropdo
     async focusFirst() {
         this.firstFocusableEl?.focus();
     }
-    breakpointChange(e) {
-        this.device = e.detail;
-        if (this.device === 'desktop' && this.isVisible) {
-            this.animationClass = null;
-        }
-    }
     /**
      * Forces the dropdown to close without animation.
      */
     forceClose() {
-        this.isVisible = false;
-        this.animationClass = null;
-        this.postToggleMegadropdown.emit({ isVisible: this.isVisible, focusParent: false });
         this.removeListeners();
+        this.postToggleMegadropdown.emit({ isVisible: false, focusParent: false });
+        this.isVisible = false;
     }
-    handleAnimationEnd() {
-        if (this.animationClass === 'slide-out') {
-            this.isVisible = false;
-            this.animationClass = null;
-            PostMegadropdown.activeDropdown = null;
-            this.removeListeners();
+    // Run the respective animation
+    createAnimation(direction) {
+        if (this.device === 'desktop') {
+            return fadeSlide(this.animatedContainer, direction, this.fsAnimationOptions);
         }
+        return slide(this.animatedContainer, direction, {
+            translate: 100,
+            duration: 350,
+            easing: direction === 'in' ? 'ease-in' : 'ease-out',
+        });
+    }
+    async animate(direction) {
+        this.cancelAnimation();
+        this.currentAnimation = this.createAnimation(direction);
+        // Flag isAnimating used to avoid toggle() de-sync
+        this.isAnimating = true;
+        await this.currentAnimation.finished;
+        this.isAnimating = false;
+        this.currentAnimation = null;
+    }
+    cancelAnimation() {
+        this.currentAnimation?.cancel();
+        this.currentAnimation = null;
+    }
+    breakpointChange(e) {
+        this.device = e.detail;
+        this.cancelAnimation();
     }
     addListeners() {
-        this.host.addEventListener('keydown', e => this.keyboardHandler(e));
-        document.addEventListener('keyup', e => this.handleTabOutside(e));
+        this.host.addEventListener('keydown', this.keyboardHandler);
+        document.addEventListener('keyup', this.handleTabOutside);
         document.addEventListener('mousedown', this.handleClickOutside);
     }
     removeListeners() {
-        this.host.removeEventListener('keydown', e => this.keyboardHandler(e));
-        document.removeEventListener('keyup', e => this.handleTabOutside(e));
+        this.host.removeEventListener('keydown', this.keyboardHandler);
+        document.removeEventListener('keyup', this.handleTabOutside);
         document.removeEventListener('mousedown', this.handleClickOutside);
     }
     getFocusableElements() {
-        const focusableEls = Array.from(this.host.querySelectorAll('post-list-item, h3, .back-button'));
-        const focusableChildren = focusableEls.flatMap(el => Array.from(getFocusableChildren(el)));
-        // Check for an overview link
-        const overviewLink = this.host.querySelector('a[slot="megadropdown-overview-link"]');
-        if (overviewLink) {
-            focusableChildren.unshift(overviewLink);
-        }
-        this.firstFocusableEl = focusableChildren[0];
-        this.lastFocusableEl = focusableChildren[focusableChildren.length - 1];
+        const focusableElements = [
+            ...getFocusableChildren(this.host),
+            ...getFocusableChildren(this.host.shadowRoot),
+        ];
+        this.firstFocusableEl = focusableElements[0];
+        this.lastFocusableEl = focusableElements[focusableElements.length - 1];
     }
     // Loop through the focusable children
     keyboardHandler(e) {
-        if (e.key === 'Tab' && this.device !== 'desktop') {
-            if (e.shiftKey && document.activeElement === this.firstFocusableEl) {
-                // If back tab (TAB + Shift) and first element is focused, focus goes to the last element of the megadropdown
-                e.preventDefault();
-                this.lastFocusableEl.focus();
-            }
-            else if (!e.shiftKey && document.activeElement === this.lastFocusableEl) {
-                // If TAB and last element is focused, focus goes back to the first element of the megadropdown
-                e.preventDefault();
-                this.firstFocusableEl.focus();
-            }
+        if (e.key !== 'Tab' || this.device === 'desktop')
+            return;
+        const activeElement = this.host.shadowRoot.activeElement || document.activeElement;
+        if (e.shiftKey && activeElement === this.firstFocusableEl) {
+            // If back tab (TAB + Shift) and first element is focused, focus goes to the last element of the megadropdown
+            e.preventDefault();
+            this.lastFocusableEl.focus();
+        }
+        else if (!e.shiftKey && activeElement === this.lastFocusableEl) {
+            // If TAB and last element is focused, focus goes back to the first element of the megadropdown
+            e.preventDefault();
+            this.firstFocusableEl.focus();
         }
     }
     handleTabOutside(e) {
@@ -200,14 +291,8 @@ const PostMegadropdown$1 = /*@__PURE__*/ proxyCustomElement(class PostMegadropdo
      */
     setTriggerActive(isActive) {
         const trigger = this.megadropdownTrigger;
-        if (!trigger)
-            return;
-        if (isActive) {
-            trigger.classList.add('active');
-        }
-        else {
-            trigger.classList.remove('active');
-        }
+        if (trigger)
+            trigger.setAttribute('active', isActive.toString());
     }
     /**
      * Updates the megadropdown trigger state when the megadropdown content changes.
@@ -231,19 +316,29 @@ const PostMegadropdown$1 = /*@__PURE__*/ proxyCustomElement(class PostMegadropdo
     }
     render() {
         const containerStyle = this.isVisible ? {} : { display: 'none' };
-        return (h(Host, { key: 'd189f35bb1b66459d6f50bd3326495fe79429be2', version: version }, h("div", { key: 'a9d7d8e25af433b18548a40be4e724c1a3a57374', class: `megadropdown-container ${this.animationClass || ''}`, style: containerStyle, onAnimationEnd: () => this.handleAnimationEnd() }, h("div", { key: 'a9886e9c1797eb11c6988e2b17bb73097ca9fb24', class: "megadropdown" }, h("slot", { key: 'e93c659a3ba85dbecebfaa2b2ed435d05cfc4ecc', name: "megadropdown-title" }), h("slot", { key: 'c6d4952fd218d2c31399b31ebea905a19892461d', name: "megadropdown-overview-link" }), h("div", { key: '82a157f8c6225ccec231d660d55b49abf456ba60', class: "megadropdown-content" }, h("slot", { key: '0c2ad616e2e999bb30cc9e9593fcfa4e4b8d71f0' })), h("div", { key: 'b501280cb3c05bb0210e5fe2380d5c338416df90', onClick: () => this.hide(true), class: "back-button" }, h("slot", { key: '2b60695fac34563724f09b1e6c51b4b386606f17', name: "back-button" })), h("div", { key: '1554073e2476baf7416937f54203e2e404805360', onClick: () => this.hide(true), class: "close-button" }, h("slot", { key: '29e8f43ddadfa66c405c6ad0ffbf43237fae97ec', name: "close-button" }))))));
+        return (h(Host, { key: 'f099891f24c60ca48ddceeadf754debdf3d8bff1', version: version }, h("div", { key: 'd964a72ec31632a6061f8c656fcc171bc584b764', ref: el => (this.animatedContainer = el), class: "megadropdown", style: containerStyle }, this.device !== 'desktop' && this.megadropdownTitle && (h("p", { key: 'b04d8fb83e5658365a1d722572d82237a7bf4eba', class: "megadropdown-title" }, this.megadropdownTitle)), h("div", { key: 'b7e654a69375c4e8f3af2e8ff65f0a5b7b2ee2cd', class: "megadropdown-content" }, h("slot", { key: '9608aa8b0d9458b593917e66e3fd4db9c447cac2' })), this.device === 'desktop' ? (h("post-closebutton", { onClick: () => this.hide(true), class: "close-button" }, this.textClose)) : (h("button", { onClick: () => this.hide(true), class: "back-button" }, h("post-icon", { name: "arrowleft" }), this.textBack)))));
     }
     get host() { return this; }
+    static get watchers() { return {
+        "textClose": ["validateTextClose"],
+        "textBack": ["validateTextBack"]
+    }; }
     static get style() { return postMegadropdownCss; }
-}, [4, "post-megadropdown", {
+}, [1, "post-megadropdown", {
+        "textClose": [513, "text-close"],
+        "textBack": [513, "text-back"],
         "device": [32],
         "isVisible": [32],
         "trigger": [32],
+        "megadropdownTitle": [32],
         "animationClass": [32],
         "toggle": [64],
         "show": [64],
         "hide": [64],
         "focusFirst": [64]
+    }, undefined, {
+        "textClose": ["validateTextClose"],
+        "textBack": ["validateTextBack"]
     }]);
 /** Tracks the currently active dropdown instance. */
 PostMegadropdown$1.activeDropdown = null;
@@ -251,13 +346,23 @@ function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["post-megadropdown"];
+    const components = ["post-megadropdown", "post-closebutton", "post-icon"];
     components.forEach(tagName => { switch (tagName) {
         case "post-megadropdown":
             if (!customElements.get(tagName)) {
                 customElements.define(tagName, PostMegadropdown$1);
             }
             break;
+        case "post-closebutton":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "post-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
     } });
 }
 

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

@@ -9,7 +9,7 @@ const PostMenuItem = /*@__PURE__*/ proxyCustomElement(class PostMenuItem extends
         this.__registerHost();
     }
     render() {
-        return (h(Host, { key: '9d6015291b82728739de4263a62a59ad4a99c94d', "data-version": version }, h("slot", { key: '51f5ff356cddffc806639cc343437500f898065e' })));
+        return (h(Host, { key: 'ae55d1dca73916188cb269cd7f4c808ee3302288', "data-version": version }, h("slot", { key: 'fabc1b7b4b99d7881bea64593114b6cd4fc606c4' })));
     }
     static get style() { return postMenuItemCss; }
 }, [4, "post-menu-item"]);

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

@@ -1,7 +1,6 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { v as version } from './package.js';
-import { c as checkRequiredAndType } from './index2.js';
-import './breakpoints.js';
+import { c as checkRequiredAndType } from './breakpoints.js';
 import { g as getRoot } from './get-root.js';
 
 const postMenuTriggerCss = ":host{display:inline-block}";
@@ -80,7 +79,7 @@ const PostMenuTrigger = /*@__PURE__*/ proxyCustomElement(class PostMenuTrigger e
         }
     }
     render() {
-        return (h(Host, { key: '14592f9564fdb09b2e809374d5794bf71f576dbb', "data-version": version, "tab-index": "-1" }, h("slot", { key: 'a0f463000420df39035cc5a48369d230394b5e04' })));
+        return (h(Host, { key: '3ef7e372c9c655bf1da5d5a7d4bca6925a010f65', "data-version": version, "tab-index": "-1" }, h("slot", { key: '771db943ad5aa639c325f055ba6f9d763bf4256d' })));
     }
     get host() { return this; }
     static get watchers() { return {

package/dist/components/post-menu2.js

@@ -2,12 +2,11 @@ import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/
 import { a as PLACEMENT_TYPES, d as defineCustomElement$1 } from './post-popovercontainer2.js';
 import { v as version } from './package.js';
 import { g as getFocusableChildren } from './get-focusable-children.js';
-import { d as checkEmptyOrOneOf, c as checkRequiredAndType } from './index2.js';
-import './breakpoints.js';
+import { d as checkEmptyOrOneOf, c as checkRequiredAndType } from './breakpoints.js';
 import { E as EventFrom } from './event-from.js';
 import { g as getRoot } from './get-root.js';
 
-const postMenuCss = ":host{display:block}:where([part=menu]){display:flex;flex-direction:column;padding-block:.5rem}::slotted([slot=header]){margin-top:-0.5rem;padding:1rem;display:flex;align-items:center;gap:.5rem;border-block-end:1px solid #050400;font-weight:700}@media screen and (max-width: 1023.98px){::slotted([slot=header]){padding:.75rem 1rem}}@media screen and (max-width: 779.98px){::slotted([slot=header]){padding:.5rem 1rem}}";
+const postMenuCss = ":host{display:block}:where([part=post-menu]){display:flex;flex-direction:column;padding-block:.5rem}::slotted([slot=header]){margin-top:-0.5rem;padding:1rem;display:flex;align-items:center;gap:.5rem;border-block-end:1px solid #050400;font-weight:700}@media screen and (max-width: 1023.98px){::slotted([slot=header]){padding:.75rem 1rem}}@media screen and (max-width: 779.98px){::slotted([slot=header]){padding:.5rem 1rem}}";
 
 var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -58,35 +57,6 @@ const PostMenu = /*@__PURE__*/ proxyCustomElement(class PostMenu extends HTMLEle
                 this.controlKeyDownHandler(e);
             }
         };
-        this.handlePostShown = (event) => {
-            // Only for the first open
-            if (event.detail.first) {
-                // Add "menu" and "menuitem" aria roles and aria-label
-                this.host.setAttribute('role', 'menu');
-                const menuItems = this.getSlottedItems();
-                for (const item of menuItems) {
-                    item.setAttribute('role', 'menuitem');
-                }
-                if (this.label)
-                    this.host.setAttribute('aria-label', this.label);
-            }
-        };
-        this.handlePostToggled = (event) => {
-            this.isVisible = event.detail.isOpen;
-            this.toggleMenu.emit(this.isVisible);
-            if (this.isVisible) {
-                this.lastFocusedElement = this.root?.activeElement;
-                requestAnimationFrame(() => {
-                    const menuItems = this.getSlottedItems();
-                    if (menuItems.length > 0) {
-                        menuItems[0].focus();
-                    }
-                });
-            }
-            else if (this.lastFocusedElement) {
-                this.lastFocusedElement.focus();
-            }
-        };
         this.handleClick = (e) => {
             const target = e.target;
             if (['BUTTON', 'A', 'INPUT', 'SELECT', 'TEXTAREA'].includes(target.tagName)) {
@@ -148,6 +118,35 @@ const PostMenu = /*@__PURE__*/ proxyCustomElement(class PostMenu extends HTMLEle
             console.error('hide: popoverRef is null or undefined');
         }
     }
+    handlePostShown(event) {
+        // Only for the first open
+        if (event.detail.first) {
+            // Add "menu" and "menuitem" aria roles and aria-label
+            this.host.setAttribute('role', 'menu');
+            const menuItems = this.getSlottedItems();
+            for (const item of menuItems) {
+                item.setAttribute('role', 'menuitem');
+            }
+            if (this.label)
+                this.host.setAttribute('aria-label', this.label);
+        }
+    }
+    handlePostToggled(event) {
+        this.isVisible = event.detail.isOpen;
+        this.toggleMenu.emit(this.isVisible);
+        if (this.isVisible) {
+            this.lastFocusedElement = this.root?.activeElement;
+            requestAnimationFrame(() => {
+                const menuItems = this.getSlottedItems();
+                if (menuItems.length > 0) {
+                    menuItems[0].focus();
+                }
+            });
+        }
+        else if (this.lastFocusedElement) {
+            this.lastFocusedElement.focus();
+        }
+    }
     controlKeyDownHandler(e) {
         const menuItems = this.getSlottedItems();
         if (!menuItems.length) {
@@ -195,7 +194,7 @@ const PostMenu = /*@__PURE__*/ proxyCustomElement(class PostMenu extends HTMLEle
             .flatMap(el => Array.from(getFocusableChildren(el))));
     }
     render() {
-        return (h(Host, { key: 'ab27eeef6ddcca57eb65ca9f7471809d9f78d7d1', "data-version": version }, h("post-popovercontainer", { key: 'c8053a6cbae6d22751e81107099180b95829b8c4', onPostShow: this.handlePostShown, onPostToggle: this.handlePostToggled, placement: this.placement, ref: e => (this.popoverRef = e) }, h("div", { key: 'c60d336220b331cd7f3d5b896788f3fdcee090cf', part: "menu" }, h("slot", { key: '629b1f5dbe4074df6459bdfe64e1c0f836314e85', name: "header" }), h("slot", { key: 'c918bba494424db857e7e99fd80d24224bdeb9ed' })))));
+        return (h(Host, { key: '08285b17608e5bc3133a3da6015a5a0d4de6ec29', "data-version": version }, h("post-popovercontainer", { key: '17e45869b5e76cdd9bd43ca77b2f0b3876462014', onPostShow: this.handlePostShown.bind(this), onPostToggle: this.handlePostToggled.bind(this), placement: this.placement, ref: e => (this.popoverRef = e) }, h("div", { key: 'e2486aa099ffc8ac59885a0971ebb13649a49a35', part: "post-menu" }, h("slot", { key: '9f0e05f211fe18cf5beed8e1b33bde26d4974e24', name: "header" }), h("slot", { key: '971ac8ad433467a2ebe2429574cb10dbdadbcf25' })))));
     }
     get host() { return this; }
     static get watchers() { return {
@@ -216,10 +215,10 @@ const PostMenu = /*@__PURE__*/ proxyCustomElement(class PostMenu extends HTMLEle
     }]);
 __decorate([
     EventFrom('post-popovercontainer')
-], PostMenu.prototype, "handlePostShown", void 0);
+], PostMenu.prototype, "handlePostShown", null);
 __decorate([
     EventFrom('post-popovercontainer')
-], PostMenu.prototype, "handlePostToggled", void 0);
+], PostMenu.prototype, "handlePostToggled", null);
 function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;

package/dist/components/{post-tab-header.d.ts → post-pagination.d.ts}

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