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

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

@@ -1,268 +1 @@
-import { p as proxyCustomElement, H, c as createEvent, h, a as Host } from './index.js';
-import { g as getFocusableChildren } from './p-BVXiQdHq.js';
-import { v as version } from './p-BhxZzOEC.js';
-import { b as breakpoint } from './p-CJ80BZ06.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}}";
-
-const PostMegadropdown$1 = /*@__PURE__*/ proxyCustomElement(class PostMegadropdown extends H {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.postToggleMegadropdown = createEvent(this, "postToggleMegadropdown");
-        this.device = breakpoint.get('device');
-        /**
-         * Holds the current visibility state of the dropdown.
-         * This state is internally managed to track whether the dropdown is open (`true`) or closed (`false`),
-         * and updates automatically when the dropdown is toggled.
-         */
-        this.isVisible = false;
-        this.trigger = false;
-        /** Holds the current animation class. */
-        this.animationClass = null;
-        this.handleClickOutside = (event) => {
-            if (this.device !== 'desktop')
-                return;
-            const target = event.target;
-            if (this.host.contains(target)) {
-                return;
-            }
-            if (target instanceof H) {
-                const trigger = target.closest('post-megadropdown-trigger');
-                if (trigger) {
-                    const targetDropdownId = trigger.getAttribute('for');
-                    if (targetDropdownId !== this.host.id) {
-                        return;
-                    }
-                }
-            }
-            this.hide(false);
-        };
-    }
-    get megadropdownTrigger() {
-        const hostId = this.host.getAttribute('id');
-        return hostId
-            ? document.querySelector(`post-megadropdown-trigger[for="${hostId}"] > button`)
-            : null;
-    }
-    connectedCallback() {
-        window.addEventListener('postBreakpoint:device', this.breakpointChange.bind(this));
-    }
-    componentDidRender() {
-        this.getFocusableElements();
-    }
-    componentDidLoad() {
-        this.checkInitialAriaCurrent();
-        this.setupObserver();
-        this.handleAriaCurrentChange([]);
-    }
-    disconnectedCallback() {
-        this.removeListeners();
-        window.removeEventListener('postBreakpoint:device', this.breakpointChange.bind(this));
-        if (PostMegadropdown.activeDropdown === this) {
-            PostMegadropdown.activeDropdown = null;
-        }
-        if (this.defaultSlotObserver) {
-            this.defaultSlotObserver.disconnect();
-        }
-    }
-    /**
-     * Toggles the dropdown visibility based on its current state.
-     */
-    async toggle() {
-        if (this.isVisible) {
-            this.hide();
-        }
-        else {
-            await this.show();
-        }
-    }
-    /**
-     * Displays the dropdown.
-     */
-    async show() {
-        if (PostMegadropdown.activeDropdown && PostMegadropdown.activeDropdown !== this) {
-            // Close the previously active dropdown without animation
-            PostMegadropdown.activeDropdown.forceClose();
-        }
-        this.animationClass = 'slide-in';
-        this.isVisible = true;
-        PostMegadropdown.activeDropdown = this;
-        this.postToggleMegadropdown.emit({ isVisible: this.isVisible });
-        if (this.firstFocusableEl &&
-            window.getComputedStyle(this.firstFocusableEl).display !== 'none') {
-            this.firstFocusableEl.focus();
-        }
-        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();
-        }
-        else {
-            this.animationClass = 'slide-out';
-        }
-    }
-    /**
-     * Sets focus to the first focusable element within the component.
-     */
-    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();
-    }
-    handleAnimationEnd() {
-        if (this.animationClass === 'slide-out') {
-            this.isVisible = false;
-            this.animationClass = null;
-            PostMegadropdown.activeDropdown = null;
-            this.removeListeners();
-        }
-    }
-    addListeners() {
-        this.host.addEventListener('keydown', e => this.keyboardHandler(e));
-        document.addEventListener('keyup', e => this.handleTabOutside(e));
-        document.addEventListener('mousedown', this.handleClickOutside);
-    }
-    removeListeners() {
-        this.host.removeEventListener('keydown', e => this.keyboardHandler(e));
-        document.removeEventListener('keyup', e => this.handleTabOutside(e));
-        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];
-    }
-    // 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();
-            }
-        }
-    }
-    handleTabOutside(e) {
-        if (e.key === 'Tab' && this.device === 'desktop') {
-            if (this.isVisible && !this.host.contains(e.target)) {
-                this.hide(false);
-            }
-        }
-    }
-    /**
-     * Sets up a MutationObserver on the host to watch for changes
-     * in `aria-current` attributes.
-     */
-    setupObserver() {
-        const config = {
-            subtree: true,
-            attributes: true,
-            attributeFilter: ['aria-current'],
-        };
-        this.defaultSlotObserver = new MutationObserver(this.handleAriaCurrentChange.bind(this));
-        this.defaultSlotObserver.observe(this.host, config);
-    }
-    /**
-     * Adds or removes the 'active' class on the megadropdown trigger button
-     * based on the active state.
-     *
-     * @param isActive - Whether the trigger should appear active
-     */
-    setTriggerActive(isActive) {
-        const trigger = this.megadropdownTrigger;
-        if (!trigger)
-            return;
-        if (isActive) {
-            trigger.classList.add('active');
-        }
-        else {
-            trigger.classList.remove('active');
-        }
-    }
-    /**
-     * Updates the megadropdown trigger state when the megadropdown content changes.
-     * Checks if any element inside the megadropdown has `aria-current="page"`
-     * and sets the trigger as active accordingly.
-     */
-    handleAriaCurrentChange(mutations) {
-        if (!mutations.length)
-            return;
-        const hasCurrentPage = mutations.some(m => m.target instanceof H && m.target.getAttribute('aria-current') === 'page');
-        this.setTriggerActive(hasCurrentPage);
-    }
-    /**
-     * Checks on initialization if any element inside the megadropdown
-     * has `aria-current="page"` and sets the trigger as active if so.
-     */
-    checkInitialAriaCurrent() {
-        const hasCurrentPage = this.host.querySelector('[aria-current="page"]');
-        if (hasCurrentPage)
-            this.setTriggerActive(true);
-    }
-    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" }))))));
-    }
-    get host() { return this; }
-    static get style() { return postMegadropdownCss; }
-}, [4, "post-megadropdown", {
-        "device": [32],
-        "isVisible": [32],
-        "trigger": [32],
-        "animationClass": [32],
-        "toggle": [64],
-        "show": [64],
-        "hide": [64],
-        "focusFirst": [64]
-    }]);
-/** Tracks the currently active dropdown instance. */
-PostMegadropdown$1.activeDropdown = null;
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["post-megadropdown"];
-    components.forEach(tagName => { switch (tagName) {
-        case "post-megadropdown":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, PostMegadropdown$1);
-            }
-            break;
-    } });
-}
-defineCustomElement$1();
-
-const PostMegadropdown = PostMegadropdown$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { PostMegadropdown, defineCustomElement };
+import{p as t,H as e,c as i,h as s,a as o,t as n}from"./index.js";import{g as a}from"./p-CJ13r5fi.js";import{v as r}from"./p-CZvbetqX.js";import{c,g as d}from"./p-B8YiQ3mz.js";import{r as h}from"./p-CoDiS_Ik.js";import{f as l}from"./p-BVCjnh6Q.js";import{d as p}from"./p-ByFh05IW.js";import{d as b}from"./p-DY2U5CQt.js";const u={translate:100,duration:500,easing:"ease",fill:"none"};const m=t(class t extends e{validateTextClose(){c(this,"textClose","string")}validateTextBack(){c(this,"textBack","string")}get megadropdownTrigger(){const t=this.host.getAttribute("id");return t?document.querySelector(`post-megadropdown-trigger[for="${t}"]`):null}constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.postToggleMegadropdown=i(this,"postToggleMegadropdown"),this.currentAnimation=null,this.isAnimating=!1,this.fsAnimationOptions={translate:-10,duration:350,easing:"headerEase"},this.device=d.get("device"),this.isVisible=!1,this.trigger=!1,this.animationClass=null,this.handleClickOutside=async t=>{if("desktop"!==this.device)return;const i=t.target;if(!this.host.contains(i)&&!this.megadropdownTrigger.contains(i)){if(i instanceof e){const t=i.closest("post-megadropdown-trigger");if(t&&t.getAttribute("for")!==this.host.id)return}await this.hide(!1)}},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))}componentDidRender(){this.getFocusableElements()}componentDidLoad(){this.validateTextClose(),this.validateTextBack(),this.checkInitialAriaCurrent(),this.setupObserver(),this.handleAriaCurrentChange([])}disconnectedCallback(){window.removeEventListener("postBreakpoint:device",this.breakpointChange.bind(this)),t.activeDropdown===this&&(t.activeDropdown=null),this.removeListeners(),this.defaultSlotObserver&&this.defaultSlotObserver.disconnect()}async toggle(){return this.isAnimating?this.isVisible?this.show():this.hide():this.isVisible?this.hide():this.show()}async show(){if("desktop"!==this.device){const t=this.megadropdownTrigger;t&&(this.megadropdownTitle=t.innerHTML)}t.activeDropdown&&t.activeDropdown!==this&&t.activeDropdown.forceClose(),this.cancelAnimation(),this.isVisible=!0,t.activeDropdown=this,this.postToggleMegadropdown.emit({isVisible:!0});try{await this.animate("in"),this.focusFirst(),this.addListeners()}catch{this.removeListeners(),this.isVisible=!1,t.activeDropdown===this&&(t.activeDropdown=null),this.postToggleMegadropdown.emit({isVisible:!1,focusParent:!0})}}async hide(e=!0,i=!1){if(i)this.forceClose();else{this.postToggleMegadropdown.emit({isVisible:!1,focusParent:e});try{await this.animate("out"),this.isVisible=!1,this.removeListeners(),t.activeDropdown===this&&(t.activeDropdown=null)}catch{t.activeDropdown=this,this.addListeners(),this.isVisible=!0,this.postToggleMegadropdown.emit({isVisible:!0,focusParent:!1})}}}async focusFirst(){this.firstFocusableEl?.focus()}forceClose(){this.removeListeners(),this.postToggleMegadropdown.emit({isVisible:!1,focusParent:!1}),this.isVisible=!1}createAnimation(t){return"desktop"===this.device?l(this.animatedContainer,t,this.fsAnimationOptions):function(t,e,i={}){const s={...u,...i},{translate:o}=s,n=[{transform:`translateX(${o}%)`},{transform:"translateX(0)"}];return function(t,e,i){const{duration:s,easing:o,fill:n}={...u,...i};return t.animate(e,{duration:s,easing:h(o),fill:n})}(t,"in"===e?n:[...n].reverse(),i)}(this.animatedContainer,t,{translate:100,duration:350,easing:"in"===t?"ease-in":"ease-out"})}async animate(t){this.cancelAnimation(),this.currentAnimation=this.createAnimation(t),this.isAnimating=!0,await this.currentAnimation.finished,this.isAnimating=!1,this.currentAnimation=null}cancelAnimation(){this.currentAnimation?.cancel(),this.currentAnimation=null}breakpointChange(t){this.device=t.detail,this.cancelAnimation()}addListeners(){this.host.addEventListener("keydown",this.keyboardHandler),document.addEventListener("keyup",this.handleTabOutside),document.addEventListener("mousedown",this.handleClickOutside)}removeListeners(){this.host.removeEventListener("keydown",this.keyboardHandler),document.removeEventListener("keyup",this.handleTabOutside),document.removeEventListener("mousedown",this.handleClickOutside)}getFocusableElements(){const t=[...a(this.host),...a(this.host.shadowRoot)];this.firstFocusableEl=t[0],this.lastFocusableEl=t[t.length-1]}keyboardHandler(t){if("Tab"!==t.key||"desktop"===this.device)return;const e=this.host.shadowRoot.activeElement||document.activeElement;t.shiftKey&&e===this.firstFocusableEl?(t.preventDefault(),this.lastFocusableEl.focus()):t.shiftKey||e!==this.lastFocusableEl||(t.preventDefault(),this.firstFocusableEl.focus())}handleTabOutside(t){"Tab"===t.key&&"desktop"===this.device&&this.isVisible&&!this.host.contains(t.target)&&this.hide(!1)}setupObserver(){this.defaultSlotObserver=new MutationObserver(this.handleAriaCurrentChange.bind(this)),this.defaultSlotObserver.observe(this.host,{subtree:!0,attributes:!0,attributeFilter:["aria-current"]})}setTriggerActive(t){const e=this.megadropdownTrigger;e&&e.setAttribute("active",""+t)}handleAriaCurrentChange(t){if(!t.length)return;const i=t.some((t=>t.target instanceof e&&"page"===t.target.getAttribute("aria-current")));this.setTriggerActive(i)}checkInitialAriaCurrent(){this.host.querySelector('[aria-current="page"]')&&this.setTriggerActive(!0)}render(){return s(o,{key:"02194ee3593dd471e2fc3aadb1d69041d613ce0a",version:r},s("div",{key:"77ab3faeb3705ac0d97ab0d72cc3fbf12c19badc",ref:t=>this.animatedContainer=t,class:"megadropdown",style:this.isVisible?{}:{display:"none"}},s("div",{key:"5d8b3ef651c3eb19f08e3ccd6c9356e01463a2e0",class:"section"},"desktop"!==this.device&&this.megadropdownTitle&&s("p",{key:"e99a5751ea896f3ab55dc9bf58635f7b2fef2a1c",class:"megadropdown-title"},this.megadropdownTitle),s("div",{key:"a0a1bfa04de139d48c825df8fdb24f93e031ea66",class:"megadropdown-content"},s("slot",{key:"68e44ce30fec1efed2855490b5d9af56ba41e004"})),"desktop"===this.device?s("post-closebutton",{onClick:()=>this.hide(!0),class:"close-button"},this.textClose):s("button",{onClick:()=>this.hide(!0),class:"back-button"},s("post-icon",{name:"arrowleft"}),this.textBack))))}get host(){return this}static get watchers(){return{textClose:[{validateTextClose:0}],textBack:[{validateTextBack:0}]}}static get style(){return"*,::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%}.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}}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.megadropdown{border-block-end:1px solid CanvasText}}.section{width:100%;max-width:var(--post-header-content-max-width);margin-inline:auto;position:relative}@media screen and (min-width: 1024px){.section{max-height:calc(100vh - var(--post-header-height) - 3rem);padding:2rem 2.5rem 2.5rem}}@media screen and (max-width: 1023.98px){.section{display:flex;flex-direction:column;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}}.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}}"}},[257,"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]},void 0,{textClose:[{validateTextClose:0}],textBack:[{validateTextBack:0}]}]);function g(){"undefined"!=typeof customElements&&["post-megadropdown","post-closebutton","post-icon"].forEach((t=>{switch(t){case"post-megadropdown":customElements.get(n(t))||customElements.define(n(t),m);break;case"post-closebutton":customElements.get(n(t))||p();break;case"post-icon":customElements.get(n(t))||b()}}))}m.activeDropdown=null,g();const f=m,v=g;export{f as PostMegadropdown,v as defineCustomElement}

package/dist/components/react/post-menu-item.js

@@ -1,6 +1 @@
-import { P as PostMenuItem$1, d as defineCustomElement$1 } from './p-D2waO0Zc.js';
-
-const PostMenuItem = PostMenuItem$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { PostMenuItem, defineCustomElement };
+import{P as o,d as s}from"./p-YR7U0Z_g.js";const p=o,r=s;export{p as PostMenuItem,r as defineCustomElement}

package/dist/components/react/post-menu-trigger.js

@@ -1,6 +1 @@
-import { P as PostMenuTrigger$1, d as defineCustomElement$1 } from './p-Cwiv86_f.js';
-
-const PostMenuTrigger = PostMenuTrigger$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { PostMenuTrigger, defineCustomElement };
+import{P as o,d as s}from"./p-BC5nlBvn.js";const n=o,p=s;export{n as PostMenuTrigger,p as defineCustomElement}

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

@@ -1,6 +1 @@
-import { P as PostMenu$1, d as defineCustomElement$1 } from './p-CSAMO7iJ.js';
-
-const PostMenu = PostMenu$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { PostMenu, defineCustomElement };
+import{P as o,d as p}from"./p-DpATRD2W.js";const s=o,r=p;export{s as PostMenu,r as defineCustomElement}

package/dist/components/react/{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.

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

@@ -0,0 +1 @@
+import{t,p as i,H as e,c as n,h as a,a as s}from"./index.js";import{v as o}from"./p-CZvbetqX.js";import{n as l}from"./p-BLchVpF6.js";import{c as r,e as h}from"./p-B8YiQ3mz.js";import{d}from"./p-C9hMpmsD.js";import{d as p}from"./p-DY2U5CQt.js";const g=i(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.postChange=n(this,"postChange"),this.items=[],this.lastWindowWidth=window.innerWidth,this.loaded=!1,this.debouncedResize=d(this.handleResizeInternal.bind(this),150),this.measurementTimeoutId=null}validatePage(){this.validateProp("page","number",!1)}validatePageSize(){this.validateProp("pageSize","number",!0)}validateCollectionSize(){this.validateProp("collectionSize","number",!0)}validateLabel(){this.validateProp("label","string",!0)}validateTextPrevious(){this.validateProp("textPrevious","string",!0)}validateTextNext(){this.validateProp("textNext","string",!0)}validateTextPage(){this.validateProp("textPage","string",!0)}validateTextFirst(){this.validateProp("textFirst","string",!0)}validateTextLast(){this.validateProp("textLast","string",!0)}validateDisabled(){this.validateProp("disabled","boolean",!1)}handlePropsChange(){this.updatePagesWithValidation()}componentWillLoad(){this.paginationId="pagination-"+(this.host.id||l(6)),null==this.page&&(this.page=1)}connectedCallback(){window.addEventListener("resize",this.debouncedResize)}componentDidLoad(){this.loaded=!0,this.runAllValidations(),this.scheduleMeasurement()}disconnectedCallback(){this.loaded=!1,window.removeEventListener("resize",this.debouncedResize),null!==this.measurementTimeoutId&&(clearTimeout(this.measurementTimeoutId),this.measurementTimeoutId=null)}validateProp(t,i,e=!0){e?r(this,t,i):h(this,t,i)}runAllValidations(){this.validateProp("page","number",!1),this.validateProp("pageSize","number",!0),this.validateProp("collectionSize","number",!0),this.validateProp("label","string",!0),this.validateProp("textPrevious","string",!0),this.validateProp("textNext","string",!0),this.validateProp("textPage","string",!0),this.validateProp("textFirst","string",!0),this.validateProp("textLast","string",!0),this.validateProp("disabled","boolean",!1)}scheduleMeasurement(){this.loaded&&(this.measurementTimeoutId=window.setTimeout((()=>{this.navRef?.clientWidth>0&&this.hiddenItemsRef?this.measureAndCalculateVisiblePages():this.scheduleMeasurement()}),50))}handleResizeInternal(){this.loaded&&window.innerWidth!==this.lastWindowWidth&&(this.lastWindowWidth=window.innerWidth,this.measureAndCalculateVisiblePages())}calculateGap(t,i){const e=t.getBoundingClientRect();return i.getBoundingClientRect().left-e.right}measureAndCalculateVisiblePages(){if(!this.navRef||!this.hiddenItemsRef||!this.loaded)return;const t=this.getTotalPages();if(t<=1)return;const i=this.getPaginationPadding(),e=this.getAvailableWidth()-i,n=this.getControlButtonsWidth(),a=this.hiddenItemsRef.querySelector(".hidden-page-button"),s=this.hiddenItemsRef.querySelector(".hidden-ellipsis");if(!a)return;const o=a.getBoundingClientRect().width,l=a&&s?this.calculateGap(a,s):0;this.maxVisiblePages=Math.max(3,Math.min(Math.floor((e-n-2*l+l)/(o+l)),t)),this.updatePagesWithValidation()}getControlButtonsWidth(){return this.hiddenItemsRef?Array.from(this.hiddenItemsRef.querySelectorAll(".hidden-control-button")).reduce(((t,i)=>t+i.getBoundingClientRect().width),0):0}getPaginationPadding(){if(!this.navRef)return 0;const t=window.getComputedStyle(this.navRef);return(parseFloat(t.paddingLeft)||0)+(parseFloat(t.paddingRight)||0)}getAvailableWidth(){return this.navRef?this.host.parentElement?.clientWidth??window.innerWidth:0}get invalidSize(){return 0===this.collectionSize||0===this.pageSize}clampPageToValidRange(t){return 0===t||this.invalidSize||isNaN(t)||!this.page||this.page<1||isNaN(this.page)?1:this.page>t?t:this.page}updatePagesWithValidation(){const t=this.getTotalPages();this.page=this.clampPageToValidRange(t),this.generatePages(t)}getTotalPages(){return this.invalidSize?1:Math.ceil(this.collectionSize/this.pageSize)}sectionForGap(t){return t<=1?"none":2===t?"page":"ellipsis"}getSections(t,i,e){const n=t-1,a=e-i;return{leftSection:this.sectionForGap(n),rightSection:this.sectionForGap(a),leftGap:n,rightGap:a}}computeTotalItems(t,i,e){const{leftSection:n,rightSection:a}=this.getSections(t,i,e);return 2+("none"===n?0:1)+("none"===a?0:1)+Math.max(0,i-t+1)}buildAllPages(t){const i=[];for(let e=1;e<=t;e++)i.push({type:"page",page:e});return i}adjustForGapTwo(t,i,e,n){const a={startPage:t,endPage:i};return 2==e-i&&(a.endPage=e-1,a.startPage=Math.max(2,a.endPage-n+1)),2==a.startPage-1&&(a.startPage=2,a.endPage=Math.min(e-1,a.startPage+n-1)),a}ensureMiddleSlots(t,i,e,n){const a={startPage:t,endPage:i},s=i-t+1;return s<n&&i<e-1&&(a.endPage=Math.min(e-1,t+n-1)),s<n&&t>2&&(a.startPage=Math.max(2,i-n+1)),a}trimExcessItems(t,i,e,n,a){const s={startPage:t,endPage:i};let o=this.computeTotalItems(s.startPage,s.endPage,e);for(;o>n;){if(s.endPage-a>=a-s.startPage&&s.endPage>s.startPage)s.endPage=Math.max(s.startPage-1,s.endPage-1);else{if(!(s.startPage<s.endPage))break;s.startPage=Math.min(s.endPage+1,s.startPage+1)}const t=this.computeTotalItems(s.startPage,s.endPage,e);if(t===o)break;o=t}return s}expandToFillSlots(t,i,e,n){const a={startPage:t,endPage:i};let s=this.computeTotalItems(a.startPage,a.endPage,e);for(;s<n;){const t=a.endPage<e-1;if(a.startPage>2)a.startPage=Math.max(2,a.startPage-1);else{if(!t)break;a.endPage=Math.min(e-1,a.endPage+1)}const i=this.computeTotalItems(a.startPage,a.endPage,e);if(i===s)break;s=i}return a}balanceTotalItems(t,i,e,n,a){const s=this.trimExcessItems(t,i,e,n,a);return this.expandToFillSlots(s.startPage,s.endPage,e,n)}calculatePageRange(t,i,e){const n=Math.max(0,e-2-2);if(n<=0)return{startPage:2,endPage:1};let a=t-Math.floor(n/2),s=a+n-1;a<2&&(a=2,s=a+n-1),s>i-1&&(s=i-1,a=s-n+1),a=Math.max(2,a),s=Math.min(i-1,s);const o=this.adjustForGapTwo(a,s,i,n),l=this.ensureMiddleSlots(o.startPage,o.endPage,i,n);return this.balanceTotalItems(l.startPage,l.endPage,i,e,t)}buildPaginationItems(t,i,e){const n=[],a=t<=i;if(n.push({type:"page",page:1}),a){const{leftSection:a,rightSection:s}=this.getSections(t,i,e);"page"===a?n.push({type:"page",page:2}):"ellipsis"===a&&n.push({type:"ellipsis"});for(let e=t;e<=i;e++)n.push({type:"page",page:e});return"page"===s?n.push({type:"page",page:e-1}):"ellipsis"===s&&n.push({type:"ellipsis"}),n.push({type:"page",page:e}),n}}generateSmallPagination(t,i){return 1===t||t===i?[{type:"page",page:1},{type:"ellipsis"},{type:"page",page:i}]:[{type:"ellipsis"},{type:"page",page:t},{type:"ellipsis"}]}generatePages(t){const i=this.maxVisiblePages,e=this.page||1;if(t<=i)return void(this.items=this.buildAllPages(t));if(i<=4)return void(this.items=this.generateSmallPagination(e,t));const{startPage:n,endPage:a}=this.calculatePageRange(e,t,i);this.items=this.buildPaginationItems(n,a,t)}emitPageChange(t){this.page=t,this.postChange.emit(t)}handlePageClick(t){this.disabled||t===this.page||this.emitPageChange(t)}handlePrevious(){this.disabled||this.page<=1||this.emitPageChange(this.page-1)}handleNext(){const t=this.getTotalPages();this.disabled||this.page>=t||this.emitPageChange(this.page+1)}handleKeyDown(t,i){"Enter"!==t.key&&" "!==t.key||(t.preventDefault(),i())}buildPageLabel(t){const i=this.getTotalPages();return 1===t?`${this.textFirst}, ${this.textPage} ${t}`:t===i?`${this.textLast}, ${this.textPage} ${t}`:`${this.textPage} ${t}`}renderEllipsis(t){return a("li",{class:"pagination-item pagination-ellipsis",key:t},a("span",{class:"pagination-ellipsis-content","aria-hidden":"true"},"..."))}renderPageButton(t){const i=t===this.page;return a("li",{class:"pagination-item",key:"page-"+t},a("button",{type:"button",class:{"pagination-link":!0,"pagination-link-active":i},"aria-label":this.buildPageLabel(t),"aria-current":i?"page":void 0,onClick:()=>this.handlePageClick(t),onKeyDown:i=>this.handleKeyDown(i,(()=>this.handlePageClick(t))),disabled:!!this.disabled||void 0,tabIndex:this.disabled?-1:0},a("span",{"aria-hidden":"true"},t)))}renderItem(t,i){return"ellipsis"===t.type?this.renderEllipsis("ellipsis-"+i):this.renderPageButton(t.page)}renderControlButton(t,i,e,n,s=!1){return a("li",{class:"pagination-item pagination-control"},a("button",{type:"button",class:{"pagination-link":!0,"pagination-control-button":!0,"pagination-link-disabled":e},"aria-label":i,onClick:n,onKeyDown:t=>this.handleKeyDown(t,n),disabled:e,tabIndex:e?-1:0},a("post-icon",{name:t,class:s?"pagination-icon-rotated":void 0,"aria-hidden":"true"}),a("span",{class:"visually-hidden"},i)))}renderHiddenItems(t){return[a("button",{class:"pagination-link pagination-control-button hidden-control-button",disabled:!0},a("post-icon",{name:"chevronleft","aria-hidden":"true"})),a("button",{class:"pagination-link pagination-control-button hidden-page-button","aria-label":this.buildPageLabel(t),disabled:!0},a("span",{"aria-hidden":"true"},t)),a("span",{class:"pagination-ellipsis-content hidden-ellipsis","aria-hidden":"true"},"..."),a("button",{class:"pagination-link pagination-control-button hidden-control-button",disabled:!0},a("post-icon",{name:"chevronleft",class:"pagination-icon-rotated","aria-hidden":"true"}))]}render(){const t=this.getTotalPages();if(t<=1)return null;const i=this.disabled||this.page>=t;return a(s,{slot:"post-pagination","data-version":o},a("nav",{class:"pagination","aria-label":this.label,id:this.paginationId,ref:t=>this.navRef=t},a("ul",{class:"pagination-list",role:"list"},this.renderControlButton("chevronleft",this.textPrevious,this.disabled||this.page<=1,(()=>this.handlePrevious())),this.items.map(((t,i)=>this.renderItem(t,i))),this.renderControlButton("chevronleft",this.textNext,i,(()=>this.handleNext()),!0)),a("div",{class:"hidden-items","aria-hidden":"true",ref:t=>this.hiddenItemsRef=t},this.renderHiddenItems(t))))}get host(){return this}static get watchers(){return{page:[{validatePage:0},{handlePropsChange:0}],pageSize:[{validatePageSize:0},{handlePropsChange:0}],collectionSize:[{validateCollectionSize:0},{handlePropsChange:0}],label:[{validateLabel:0}],textPrevious:[{validateTextPrevious:0}],textNext:[{validateTextNext:0}],textPage:[{validateTextPage:0}],textFirst:[{validateTextFirst:0}],textLast:[{validateTextLast:0}],disabled:[{validateDisabled:0}]}}static get style(){return".pagination{position:relative;display:flex;align-items:center;justify-content:center;width:100%;max-width:100%;padding:8px;overflow:hidden}.pagination-list{display:flex;align-items:center;gap:4px;min-width:0;max-width:100%;margin:0;padding:0;list-style:none;flex-wrap:nowrap}.pagination-item{display:flex;align-items:center;margin:0;padding:0;flex-shrink:0;flex-grow:0}.pagination-link{display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:32px;height:32px;min-width:32px;padding:0;margin:0;font-size:14px;font-weight:700;color:#050400;text-decoration:none;background-color:rgba(0,0,0,0);border:1px solid #ccc;border-radius:100%;cursor:pointer;appearance:none;outline:none}.pagination-link:hover:not(:disabled):not(.pagination-link-disabled){color:#504f4b;background-color:#f5f5f5;border:2px solid #504f4b}.pagination-link:active:not(:disabled):not(.pagination-link-disabled):not(.pagination-link-active){color:#504f4b;background-color:#f5f5f5;border:2px solid #504f4b}.pagination-link:focus-visible{z-index:1;outline:2px solid #050400;outline-offset:2px}.pagination-link:focus:not(:focus-visible){outline:none}.pagination-link.pagination-link-active{font-weight:700;color:#fff;background-color:#050400;border-color:#050400;cursor:default}.pagination-link.pagination-link-active:hover:not(:disabled):not(.pagination-link-disabled){background-color:#504f4b;border-color:#504f4b;color:#fff}.pagination-link:disabled,.pagination-link.pagination-link-disabled{color:#6b6b6b;background-color:#f0f0f0;border-color:#ccc;opacity:.6;cursor:default}@media (min-width: 600px){.pagination-link{width:40px;height:40px;min-width:40px;font-size:16px}}@media (min-width: 1024px){.pagination-link{width:48px;height:48px;min-width:48px;font-size:20px}}.pagination-control-button post-icon{display:flex;align-items:center;justify-content:center;width:16px;height:16px}@media (min-width: 600px){.pagination-control-button post-icon{width:18px;height:18px}}@media (min-width: 1024px){.pagination-control-button post-icon{width:20px;height:20px}}.pagination-control-button:active:not(:disabled):not(.pagination-link-disabled){background-color:#f5f5f5;border:2px solid #504f4b}.pagination-ellipsis{display:flex;align-items:center;justify-content:center;flex-shrink:0;flex-grow:0}.pagination-ellipsis-content{display:flex;align-items:center;justify-content:center;width:32px;height:32px;font-size:14px;color:#050400;user-select:none}@media (min-width: 600px){.pagination-ellipsis-content{width:40px;height:40px}}@media (min-width: 1024px){.pagination-ellipsis-content{width:48px;height:48px}}.hidden-items{position:absolute;display:flex;gap:4px;height:0;overflow:hidden;white-space:nowrap;visibility:hidden;pointer-events:none}.pagination-icon-rotated{display:inline-block;transform:rotate(180deg)}.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}"}},[1,"post-pagination",{page:[1026],pageSize:[514,"page-size"],collectionSize:[514,"collection-size"],label:[513],textPrevious:[513,"text-previous"],textNext:[513,"text-next"],textPage:[513,"text-page"],textFirst:[513,"text-first"],textLast:[513,"text-last"],disabled:[4],paginationId:[32],maxVisiblePages:[32],items:[32]},void 0,{page:[{validatePage:0},{handlePropsChange:0}],pageSize:[{validatePageSize:0},{handlePropsChange:0}],collectionSize:[{validateCollectionSize:0},{handlePropsChange:0}],label:[{validateLabel:0}],textPrevious:[{validateTextPrevious:0}],textNext:[{validateTextNext:0}],textPage:[{validateTextPage:0}],textFirst:[{validateTextFirst:0}],textLast:[{validateTextLast:0}],disabled:[{validateDisabled:0}]}]);function c(){"undefined"!=typeof customElements&&["post-pagination","post-icon"].forEach((i=>{switch(i){case"post-pagination":customElements.get(t(i))||customElements.define(t(i),g);break;case"post-icon":customElements.get(t(i))||p()}}))}c();const u=g,x=c;export{u as PostPagination,x as defineCustomElement}

package/dist/components/react/post-popover-trigger.js

@@ -1,133 +1 @@
-import { p as proxyCustomElement, H, h, a as Host } from './index.js';
-import { v as version } from './p-BhxZzOEC.js';
-import { i as isFocusable } from './p-HygIVKXC.js';
-import { c as checkRequiredAndType } from './p-CYkf_7Y5.js';
-import './p-CJ80BZ06.js';
-
-const postPopoverTriggerCss = ":host{cursor:pointer}";
-
-const PostPopoverTrigger$1 = /*@__PURE__*/ proxyCustomElement(class PostPopoverTrigger extends H {
-    syncAriaExpanded(newValue) {
-        this.ariaExpanded = newValue;
-        if (this.trigger) {
-            this.trigger.setAttribute('aria-expanded', String(newValue));
-        }
-    }
-    /**
-     * 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.
-     */
-    validateFor() {
-        checkRequiredAndType(this, 'for', 'string');
-    }
-    // Gets the associated popover element to the trigger based on 'for'
-    get popover() {
-        const ref = document.getElementById(this.for);
-        return ref?.localName === 'post-popover' ? ref : null;
-    }
-    setupTrigger() {
-        this.trigger = this.host.querySelector('*');
-        if (this.trigger) {
-            this.trigger.setAttribute('aria-expanded', this.ariaExpanded.toString());
-            // check if its not focusable and add aria role and tabindex
-            if (!isFocusable(this.trigger)) {
-                this.trigger.setAttribute('tabindex', '0');
-                this.trigger.setAttribute('role', 'button');
-            }
-            // Set aria attributes
-            this.trigger.setAttribute('aria-haspopup', 'true');
-            this.trigger.setAttribute('aria-controls', this.for);
-            this.trigger.addEventListener('click', this.boundHandleToggle);
-            this.trigger.addEventListener('keydown', this.boundHandleKeyDown);
-        }
-        else {
-            console.error('No content found in the post-popover-trigger slot. Please insert a focusable element or content that can receive focus.');
-        }
-    }
-    handleToggle() {
-        const popoverEl = this.popover;
-        if (popoverEl) {
-            popoverEl.toggle(this.trigger);
-            this.focusTrigger();
-        }
-        else {
-            console.warn(`No post-popover found with ID: ${this.for}`);
-        }
-    }
-    focusTrigger() {
-        // Restores focus to the trigger
-        if (!this.popoverOpen && this.trigger) {
-            this.trigger.focus();
-        }
-    }
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        /**
-         * Manages the accessibility attribute `aria-expanded` to indicate whether the associated popover is expanded or collapsed.
-         */
-        this.ariaExpanded = false;
-        /**
-         * Holds the state of the popover toggle
-         */
-        this.popoverOpen = false;
-        this.handleKeyDown = (e) => {
-            if (e.key === 'Enter' || e.key === ' ') {
-                e.preventDefault();
-                this.handleToggle();
-            }
-        };
-        this.boundHandleToggle = this.handleToggle.bind(this);
-        this.boundHandleKeyDown = this.handleKeyDown.bind(this);
-        this.boundHandlePostToggle = (event) => {
-            this.popoverOpen = event.detail.isOpen;
-            this.focusTrigger();
-        };
-    }
-    componentDidLoad() {
-        this.validateFor();
-        this.setupTrigger();
-        this.popover?.addEventListener('postToggle', this.boundHandlePostToggle);
-    }
-    disconnectedCallback() {
-        this.trigger.removeEventListener('click', this.boundHandleToggle);
-        this.trigger.removeEventListener('keydown', this.boundHandleKeyDown);
-        this.popover?.removeEventListener('postToggle', this.boundHandlePostToggle);
-    }
-    render() {
-        return (h(Host, { key: '5beba85bbe276a0f047415c4fefa2a013f922cdc', "data-version": version }, h("slot", { key: '4f1a4834e97275ab8a011888d0c932db6471e727', onSlotchange: () => this.setupTrigger() })));
-    }
-    get host() { return this; }
-    static get watchers() { return {
-        "popoverOpen": ["syncAriaExpanded"],
-        "for": ["validateFor"]
-    }; }
-    static get style() { return postPopoverTriggerCss; }
-}, [1, "post-popover-trigger", {
-        "for": [513],
-        "ariaExpanded": [32],
-        "popoverOpen": [32]
-    }, undefined, {
-        "popoverOpen": ["syncAriaExpanded"],
-        "for": ["validateFor"]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["post-popover-trigger"];
-    components.forEach(tagName => { switch (tagName) {
-        case "post-popover-trigger":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, PostPopoverTrigger$1);
-            }
-            break;
-    } });
-}
-defineCustomElement$1();
-
-const PostPopoverTrigger = PostPopoverTrigger$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { PostPopoverTrigger, defineCustomElement };
+import{t,p as s,H as i,h as e,a as o}from"./index.js";import{v as r}from"./p-CZvbetqX.js";import{i as h}from"./p-HygIVKXC.js";import{e as n}from"./p-B8YiQ3mz.js";const a=s(class extends i{syncAriaExpanded(t){this.ariaExpanded=t,this.trigger&&this.trigger.setAttribute("aria-expanded",t+"")}validateFor(){n(this,"for","string")}hasAriaControlsElements(t){return"ariaControlsElements"in t}get popover(){const t=this.host.querySelector("post-popover")??document.getElementById(this.for);return t?"post-popover"===t?.localName?t:null:(console.error(`No post-popover found ${this.for?"with ID: "+this.for:"inside the <post-popover-trigger>"}.`),null)}setupTrigger(){const t=this.popover;this.trigger=this.host.querySelector("*"),this.trigger?(h(this.trigger)||(this.trigger.setAttribute("tabindex","0"),this.trigger.setAttribute("role","button")),t&&(this.trigger.setAttribute("aria-expanded",""+this.ariaExpanded),this.trigger.setAttribute("aria-haspopup","true"),this.for?this.trigger.setAttribute("aria-controls",this.for):this.hasAriaControlsElements(this.trigger)?this.trigger.ariaControlsElements=[t]:(t.id||(t.id="popover-"+crypto.randomUUID()),this.trigger.setAttribute("aria-controls",t.id)),this.trigger.addEventListener("click",this.boundHandleToggle),this.trigger.addEventListener("keydown",this.boundHandleKeyDown))):console.error("No content found in the post-popover-trigger slot. Please insert a focusable element or content that can receive focus.")}handleToggle(){this.popover?.toggle(this.trigger),this.focusTrigger()}focusTrigger(){!this.popoverOpen&&this.trigger&&this.trigger.focus()}constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.ariaExpanded=!1,this.popoverOpen=!1,this.handleKeyDown=t=>{"Enter"!==t.key&&" "!==t.key||(t.preventDefault(),this.handleToggle())},this.boundHandleToggle=this.handleToggle.bind(this),this.boundHandleKeyDown=this.handleKeyDown.bind(this),this.boundHandlePostToggle=t=>{this.popoverOpen=t.detail.isOpen,this.focusTrigger()}}componentDidLoad(){this.validateFor(),this.setupTrigger(),this.popover?.addEventListener("postToggle",this.boundHandlePostToggle)}disconnectedCallback(){this.trigger.removeEventListener("click",this.boundHandleToggle),this.trigger.removeEventListener("keydown",this.boundHandleKeyDown),this.popover?.removeEventListener("postToggle",this.boundHandlePostToggle)}render(){return e(o,{key:"8552f66f45c0cf3f772cb96b4974a447a4a2cf19","data-version":r},e("slot",{key:"06824853f828cc65ba7a7a2b7ae8b762f6b1eaee",onSlotchange:()=>this.setupTrigger()}))}get host(){return this}static get watchers(){return{popoverOpen:[{syncAriaExpanded:0}],for:[{validateFor:0}]}}static get style(){return":host{cursor:pointer}"}},[257,"post-popover-trigger",{for:[513],ariaExpanded:[32],popoverOpen:[32]},void 0,{popoverOpen:[{syncAriaExpanded:0}],for:[{validateFor:0}]}]);function p(){"undefined"!=typeof customElements&&["post-popover-trigger"].forEach((s=>{"post-popover-trigger"===s&&(customElements.get(t(s))||customElements.define(t(s),a))}))}p();const c=a,l=p;export{c as PostPopoverTrigger,l as defineCustomElement}

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

@@ -1,119 +1 @@
-import { p as proxyCustomElement, H, h, a as Host } from './index.js';
-import { d as defineCustomElement$2, a as PLACEMENT_TYPES } from './p-DVGEExot.js';
-import { v as version } from './p-BhxZzOEC.js';
-import { a as getDeepFocusableChildren } from './p-BVXiQdHq.js';
-import { d as checkEmptyOrOneOf, c as checkRequiredAndType } from './p-CYkf_7Y5.js';
-import './p-CJ80BZ06.js';
-import { d as defineCustomElement$4 } from './p-XrZzCOKT.js';
-import { d as defineCustomElement$3 } from './p-DBPOV12C.js';
-
-const postPopoverCss = "*{box-sizing:border-box}:host{display:block}.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}.popover-container{color:var(--post-current-fg);background-color:var(--post-current-bg);display:flex;align-items:self-start;padding:.5em;min-width:160px;max-width:var(--post-popover-max-width, 280px)}.popover-content{padding:.5em;flex-grow:1}";
-
-const PostPopover$1 = /*@__PURE__*/ proxyCustomElement(class PostPopover extends H {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        /**
-         * Defines the position of the popover relative to its trigger.
-         * Popovers are automatically flipped to the opposite side if there is not enough available space and are shifted towards the viewport if they would overlap edge boundaries.
-         * For supported values and behavior details, see the [Floating UI placement documentation](https://floating-ui.com/docs/computePosition#placement).
-         */
-        this.placement = 'top';
-        /**
-         * Show a little indicator arrow
-         */
-        // eslint-disable-next-line @stencil-community/ban-default-true
-        this.arrow = true;
-    }
-    validatePlacement() {
-        checkEmptyOrOneOf(this, 'placement', PLACEMENT_TYPES);
-    }
-    validateCloseButtonCaption() {
-        checkRequiredAndType(this, 'closeButtonCaption', 'string');
-    }
-    componentDidLoad() {
-        this.validatePlacement();
-        this.validateCloseButtonCaption();
-    }
-    /**
-     * Programmatically display the popover
-     * @param target A focusable element inside the <post-popover-trigger> component that controls the popover
-     */
-    async show(target) {
-        this.popoverRef.show(target);
-    }
-    /**
-     * Programmatically hide this popover
-     */
-    async hide() {
-        this.popoverRef.hide();
-    }
-    /**
-     * Toggle popover display
-     * @param target A focusable element inside the <post-popover-trigger> component that controls the popover
-     * @param force Pass true to always show or false to always hide
-     */
-    async toggle(target, force) {
-        await this.popoverRef.toggle(target, force);
-        const focusableChildren = getDeepFocusableChildren(this.host);
-        // find first focusable element
-        const firstFocusable = focusableChildren[0];
-        if (firstFocusable) {
-            firstFocusable.focus();
-        }
-    }
-    render() {
-        return (h(Host, { key: '5ef2edb171dada1bf701a6583471410e02297a5b', "data-version": version }, h("post-popovercontainer", { key: '3f913ddf3756ecbec65c1ab04423421adbc46f16', arrow: this.arrow, placement: this.placement, ref: e => (this.popoverRef = e) }, h("div", { key: '541a5a7da9eb1362609d7d58717ffde7ef4cbb90', class: "popover-container" }, h("div", { key: '1b3d22349574f7fb542cfa662aca0d34c85c1d2f', class: "popover-content" }, h("slot", { key: 'a17a97f0abe47fb7a1777fa3f9365efc0cfc5b1d' })), h("post-closebutton", { key: '9888084b892be0381c64620a534c45231533fa59', onClick: () => this.hide() }, this.closeButtonCaption)))));
-    }
-    get host() { return this; }
-    static get watchers() { return {
-        "placement": ["validatePlacement"],
-        "closeButtonCaption": ["validateCloseButtonCaption"]
-    }; }
-    static get style() { return postPopoverCss; }
-}, [1, "post-popover", {
-        "placement": [1],
-        "closeButtonCaption": [513, "close-button-caption"],
-        "arrow": [4],
-        "show": [64],
-        "hide": [64],
-        "toggle": [64]
-    }, undefined, {
-        "placement": ["validatePlacement"],
-        "closeButtonCaption": ["validateCloseButtonCaption"]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["post-popover", "post-closebutton", "post-icon", "post-popovercontainer"];
-    components.forEach(tagName => { switch (tagName) {
-        case "post-popover":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, PostPopover$1);
-            }
-            break;
-        case "post-closebutton":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$4();
-            }
-            break;
-        case "post-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "post-popovercontainer":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-defineCustomElement$1();
-
-const PostPopover = PostPopover$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { PostPopover, defineCustomElement };
+import{t,p as e,H as o,h as s,a}from"./index.js";import{d as i,a as c}from"./p-D9DDtvFM.js";import{v as r}from"./p-CZvbetqX.js";import{a as p}from"./p-CJ13r5fi.js";import{d as n,c as d}from"./p-B8YiQ3mz.js";import{d as l}from"./p-ByFh05IW.js";import{d as m}from"./p-DY2U5CQt.js";const h=e(class extends o{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.placement="top",this.arrow=!0}validatePlacement(){n(this,"placement",c)}validateTextClose(){d(this,"textClose","string")}componentDidLoad(){this.validatePlacement(),this.validateTextClose()}async show(t){await this.popoverRef.show(t),this.focusFirstEl()}async hide(){this.popoverRef.hide()}async toggle(t,e){await this.popoverRef.toggle(t,e)&&this.focusFirstEl()}focusFirstEl(){const t=p(this.host)[0];t&&t.focus()}render(){return s(a,{key:"d015a324a7c9fe1c3508ccd3e434435d92d74f85","data-version":r},s("post-popovercontainer",{key:"01c575c2b9370d512858e9c71a402ee08843d052",arrow:this.arrow,placement:this.placement,ref:t=>this.popoverRef=t},s("div",{key:"4be3ccad4885493091a9572c6bf95ea137ad66f9",class:"popover-container"},s("div",{key:"3b9e69e7e84f7acdb2a14cb27e11d10d4aa2900b",class:"popover-content"},s("slot",{key:"de871fc377dfdc17f64f9bb40e5421e00a103ce0"})),s("post-closebutton",{key:"d73a44affc7e09a3452988f63f16cc4eea83aa66",onClick:()=>this.hide()},this.textClose))))}get host(){return this}static get watchers(){return{placement:[{validatePlacement:0}],textClose:[{validateTextClose:0}]}}static get style(){return"*{box-sizing:border-box}:host{display:block}.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}.popover-container{color:var(--post-current-fg);background-color:var(--post-current-bg);display:flex;align-items:self-start;padding:.5em;min-width:160px;max-width:var(--post-popover-max-width, 280px)}.popover-content{padding:.5em;flex-grow:1}"}},[257,"post-popover",{placement:[1],textClose:[513,"text-close"],arrow:[4],show:[64],hide:[64],toggle:[64]},void 0,{placement:[{validatePlacement:0}],textClose:[{validateTextClose:0}]}]);function f(){"undefined"!=typeof customElements&&["post-popover","post-closebutton","post-icon","post-popovercontainer"].forEach((e=>{switch(e){case"post-popover":customElements.get(t(e))||customElements.define(t(e),h);break;case"post-closebutton":customElements.get(t(e))||l();break;case"post-icon":customElements.get(t(e))||m();break;case"post-popovercontainer":customElements.get(t(e))||i()}}))}f();const v=h,b=f;export{v as PostPopover,b as defineCustomElement}