@baloise/ds-core 20.0.0-next.4 → 20.0.0-next.7

package/dist/esm/ds-drawer_2.entry.js

@@ -0,0 +1,599 @@
+/*!
+ * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
+ */
+import { B as registerInstance, I as createEvent, w as wait, E as h, F as Host, G as getElement, d as dsBrowser } from './index-B-v2Wm-V.js';
+import { _ as __decorate, L as Logger, a as __metadata } from './tslib.es6-n47B6oUi.js';
+import { S as ScrollHandler } from './scroll-v2MaEkiZ.js';
+import { T as Type } from './type-7qEQcw90.js';
+import { O as OneOf } from './one-of-CjRvS2Tk.js';
+import { L as ListenToConfig } from './config.decorator-CRYVBTkX.js';
+import { a as autoUpdate, c as computePosition, s as shift, f as flip, o as offset, b as arrow } from './floating-ui.dom-BqY0KzJC.js';
+import { F as FocusHandler } from './focus-6OAqvfus.js';
+import { i as isEscapeKey } from './keyboard-Uy_dVz21.js';
+import { P as POPUP_PLACEMENTS, a as POPUP_ROLES } from './popup.interfaces-BAY6Z8bT.js';
+import './create-validator-decorator-fUav5byo.js';
+import './config.utils-CR4Xudpz.js';
+
+const DRAWER_CONTAINERS = ['default', 'fluid', 'compact'];
+
+const drawerHostCss = () => `:host{--_drawer-background:var(--drawer-background, var(--mod-drawer-background, var(--ds-drawer-background)));--_drawer-radius:var(--drawer-radius, var(--mod-drawer-radius, var(--ds-drawer-radius)));--_drawer-max-height:var(--drawer-max-height, var(--mod-drawer-max-height, var(--ds-drawer-max-height)));--_drawer-padding:var(--drawer-padding, var(--mod-drawer-padding, var(--ds-drawer-padding)));--_drawer-backdrop-opacity:var(--drawer-backdrop-opacity, var(--mod-drawer-backdrop-opacity, var(--ds-backdrop-opacity)));display:contents}:host dialog{all:unset;-webkit-box-sizing:border-box;box-sizing:border-box;position:fixed;bottom:0;left:0;right:0;width:100%;max-height:var(--_drawer-max-height);overflow-y:auto;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;opacity:0;-webkit-transform:translateY(100%);transform:translateY(100%);pointer-events:none}:host(.is-open) dialog{opacity:1;-webkit-transform:translateY(0);transform:translateY(0);pointer-events:auto}:host(.is-animated) dialog{-webkit-transition:opacity 300ms ease,-webkit-transform 300ms ease;transition:opacity 300ms ease,-webkit-transform 300ms ease;transition:opacity 300ms ease,transform 300ms ease;transition:opacity 300ms ease,transform 300ms ease,-webkit-transform 300ms ease}:host dialog::-webkit-backdrop{background-color:rgba(0,7,57,.5);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);opacity:var(--_drawer-backdrop-opacity)}:host dialog::-ms-backdrop{background-color:rgba(0,7,57,.5);backdrop-filter:blur(4px);opacity:var(--_drawer-backdrop-opacity)}:host dialog::backdrop{background-color:rgba(0,7,57,.5);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);opacity:var(--_drawer-backdrop-opacity)}:host .container ds-close{position:absolute;top:1rem;right:1rem}:host .container{-ms-flex:1;flex:1;width:100%;margin:0 auto;max-width:var(--ds-alias-container-width-base);background:var(--_drawer-background);border-radius:var(--_drawer-radius) var(--_drawer-radius) 0 0;padding:var(--_drawer-padding);position:relative}:host .container.is-fluid{max-width:var(--ds-alias-container-width-fluid)}:host .container.is-compact{max-width:var(--ds-alias-container-width-compact)}@media (prefers-reduced-motion: reduce){:host(.is-animated) dialog{-webkit-transition:none !important;transition:none !important}}`;
+
+const Drawer = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.dsWillPresent = createEvent(this, "dsWillPresent");
+        this.dsDidPresent = createEvent(this, "dsDidPresent");
+        this.dsWillDismiss = createEvent(this, "dsWillDismiss");
+        this.dsDidDismiss = createEvent(this, "dsDidDismiss");
+        this.scrollHandler = new ScrollHandler();
+        this.transitionQueue = Promise.resolve();
+        this.animated = true;
+        this.isOpen = false;
+        /**
+         * PUBLIC PROPERTY API
+         * ------------------------------------------------------
+         */
+        /**
+         * If `true` the drawer is open.
+         */
+        this.open = false;
+        /**
+         * If `true`, the drawer can be dismissed via the Escape key and shows a close button.
+         */
+        this.closable = true;
+        /**
+         * If `true`, clicking the backdrop (outside the panel) dismisses the drawer.
+         */
+        this.backdropDismiss = true;
+        /**
+         * Accessible label for the drawer dialog (sets aria-label on the dialog element).
+         */
+        this.label = '';
+        /**
+         * Sets the inner content container width. Accepts `'default'`, `'fluid'`, or `'compact'`.
+         * Matches the `ds-container` sizing variants.
+         */
+        this.container = 'default';
+        this.handleCancel = (ev) => {
+            ev.preventDefault();
+            if (this.closable) {
+                this.open = false;
+            }
+        };
+        this.handleNativeClose = () => {
+            var _a;
+            // Re-enter the top layer if the browser closed the dialog unexpectedly.
+            if (this.open) {
+                (_a = this.dialogEl) === null || _a === void 0 ? void 0 : _a.showModal();
+            }
+        };
+        /**
+         * EVENT BINDING
+         * ------------------------------------------------------
+         */
+        this.handleBackdropClick = (ev) => {
+            if (this.backdropDismiss && ev.target === this.dialogEl) {
+                this.open = false;
+            }
+        };
+        this.handleCloseClick = () => {
+            this.open = false;
+        };
+    }
+    createLogger(log) {
+        this.log = log;
+    }
+    openChanged(newValue) {
+        newValue ? this.runOpen() : this.runClose();
+    }
+    /**
+     * LIFECYCLE
+     * ------------------------------------------------------
+     */
+    connectedCallback() {
+        this.scrollHandler.connect();
+    }
+    componentDidLoad() {
+        var _a, _b;
+        (_a = this.dialogEl) === null || _a === void 0 ? void 0 : _a.addEventListener('cancel', this.handleCancel);
+        (_b = this.dialogEl) === null || _b === void 0 ? void 0 : _b.addEventListener('close', this.handleNativeClose);
+        if (this.open) {
+            this.runOpen();
+        }
+    }
+    disconnectedCallback() {
+        var _a, _b;
+        (_a = this.dialogEl) === null || _a === void 0 ? void 0 : _a.removeEventListener('cancel', this.handleCancel);
+        (_b = this.dialogEl) === null || _b === void 0 ? void 0 : _b.removeEventListener('close', this.handleNativeClose);
+        this.scrollHandler.disconnect();
+    }
+    /**
+     * PUBLIC METHODS
+     * ------------------------------------------------------
+     */
+    /** Opens the drawer. */
+    async present() {
+        this.open = true;
+    }
+    /** Closes the drawer. */
+    async dismiss() {
+        this.open = false;
+    }
+    /**
+     * @internal
+     */
+    async configChanged(state) {
+        this.animated = state.animated;
+    }
+    /**
+     * PRIVATE METHODS
+     * ------------------------------------------------------
+     */
+    runOpen() {
+        this.transitionQueue = this.transitionQueue.then(() => this.doOpen()).catch(() => undefined);
+    }
+    runClose() {
+        this.transitionQueue = this.transitionQueue.then(() => this.doClose()).catch(() => undefined);
+    }
+    async doOpen() {
+        var _a, _b;
+        if ((_a = this.dialogEl) === null || _a === void 0 ? void 0 : _a.open)
+            return;
+        this.dsWillPresent.emit();
+        (_b = this.dialogEl) === null || _b === void 0 ? void 0 : _b.showModal();
+        this.scrollHandler.disable();
+        this.isOpen = true;
+        if (this.animated)
+            await wait(300);
+        this.dsDidPresent.emit();
+    }
+    async doClose() {
+        var _a, _b;
+        if (!((_a = this.dialogEl) === null || _a === void 0 ? void 0 : _a.open))
+            return;
+        this.dsWillDismiss.emit();
+        this.isOpen = false;
+        if (this.animated)
+            await wait(300);
+        (_b = this.dialogEl) === null || _b === void 0 ? void 0 : _b.close();
+        this.scrollHandler.enable();
+        this.dsDidDismiss.emit();
+    }
+    /**
+     * RENDER
+     * ------------------------------------------------------
+     */
+    render() {
+        return (h(Host, { key: 'bf8f75a23cda49f75931b8d2d61134268aa87024', class: { 'is-open': this.isOpen, 'is-animated': this.animated } }, h("dialog", { key: 'c84019c7626898f7d464422690654ff387840da3', part: "dialog", ref: el => (this.dialogEl = el), "aria-label": this.label || undefined, onClick: this.handleBackdropClick }, h("div", { key: '5a4f1b3d5415ba267e8f0fdd632b0be12a36b569', class: {
+                'container': true,
+                'is-fluid': this.container === 'fluid',
+                'is-compact': this.container === 'compact',
+            } }, this.closable && h("ds-close", { key: 'aaabb4ab6de152c3d21947a482aa0e0c3fccd82e', part: "close", onClick: this.handleCloseClick }), h("slot", { key: 'ef27b510ca776a39a56904b00661565101599dfe' })))));
+    }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "open": [{
+                "openChanged": 0
+            }]
+    }; }
+};
+__decorate([
+    Logger('drawer'),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Function]),
+    __metadata("design:returntype", void 0)
+], Drawer.prototype, "createLogger", null);
+__decorate([
+    Type('boolean'),
+    __metadata("design:type", Boolean)
+], Drawer.prototype, "open", void 0);
+__decorate([
+    Type('boolean'),
+    __metadata("design:type", Boolean)
+], Drawer.prototype, "closable", void 0);
+__decorate([
+    Type('boolean'),
+    __metadata("design:type", Boolean)
+], Drawer.prototype, "backdropDismiss", void 0);
+__decorate([
+    Type('string'),
+    __metadata("design:type", String)
+], Drawer.prototype, "label", void 0);
+__decorate([
+    OneOf(DRAWER_CONTAINERS),
+    __metadata("design:type", String)
+], Drawer.prototype, "container", void 0);
+__decorate([
+    ListenToConfig(),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Object]),
+    __metadata("design:returntype", Promise)
+], Drawer.prototype, "configChanged", null);
+Drawer.style = drawerHostCss();
+
+const popupHostCss = () => `:host{--_popup-background:var(--popup-background, var(--mod-popup-background, var(--ds-popup-background)));--_popup-radius:var(--popup-radius, var(--mod-popup-radius, var(--ds-popup-radius)));--_popup-shadow:var(--popup-shadow, var(--mod-popup-shadow, var(--ds-popup-shadow)));--_popup-padding:var(--popup-padding, var(--mod-popup-padding, var(--ds-popup-padding)));--_popup-min-width:var(--popup-min-width, var(--mod-popup-min-width, var(--ds-popup-min-width)));--_popup-max-width:var(--popup-max-width, var(--mod-popup-max-width, none));--_popup-z-index:var(--popup-z-index, var(--mod-popup-z-index, var(--ds-popup-z-index)));--_popup-backdrop-opacity:var(--popup-backdrop-opacity, var(--mod-popup-backdrop-opacity, var(--ds-backdrop-opacity)));--_popup-arrow-size:var(--popup-arrow-size, var(--mod-popup-arrow-size, var(--ds-popup-arrow-size, 8px)));display:contents}[part=backdrop]{background-color:rgba(0,7,57,.5);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);position:fixed;inset:0;z-index:calc(var(--_popup-z-index) - 1);opacity:0;pointer-events:none;-webkit-transition:opacity 200ms ease;transition:opacity 200ms ease}:host(.is-open) [part=backdrop]{opacity:var(--_popup-backdrop-opacity);pointer-events:auto}:host(.is-animated) [part=backdrop]{-webkit-transition:opacity 200ms ease;transition:opacity 200ms ease}[part=panel]{position:fixed;z-index:var(--_popup-z-index);background:var(--_popup-background);border-radius:var(--_popup-radius);-webkit-box-shadow:var(--_popup-shadow);box-shadow:var(--_popup-shadow);padding:var(--_popup-padding);min-width:var(--_popup-min-width);max-width:var(--_popup-max-width);opacity:0;visibility:hidden;pointer-events:none;outline:none !important}[part=panel]::-moz-focus-inner{border:0}:host(.is-open) [part=panel]{opacity:1;visibility:visible;pointer-events:auto}:host(.is-animated) [part=panel]{-webkit-transition:opacity 200ms ease,visibility 200ms ease;transition:opacity 200ms ease,visibility 200ms ease}[part=close]{position:absolute;top:.5rem;right:.5rem}:host(.is-closable) [part=panel]{padding-right:calc(var(--_popup-padding) + var(--_popup-padding))}[part=arrow]{position:absolute;width:var(--_popup-arrow-size);height:var(--_popup-arrow-size);background:var(--_popup-background);-webkit-transform:rotate(45deg);transform:rotate(45deg);pointer-events:none}[part=panel][data-placement=bottom] [part=arrow]{top:calc(var(--_popup-arrow-size)/-2)}[part=panel][data-placement=top] [part=arrow]{bottom:calc(var(--_popup-arrow-size)/-2)}[part=panel][data-placement=right] [part=arrow]{left:calc(var(--_popup-arrow-size)/-2)}[part=panel][data-placement=left] [part=arrow]{right:calc(var(--_popup-arrow-size)/-2)}@media (prefers-reduced-motion: reduce){:host(.is-animated) [part=panel],:host(.is-animated) [part=backdrop]{-webkit-transition:none !important;transition:none !important}}`;
+
+// ─── Group registry ───────────────────────────────────────────────────────────
+// Module-level map so same-group popups can dismiss each other.
+const popupGroups = new Map();
+const Popup = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.dsWillPresent = createEvent(this, "dsWillPresent");
+        this.dsDidPresent = createEvent(this, "dsDidPresent");
+        this.dsWillDismiss = createEvent(this, "dsWillDismiss");
+        this.dsDidDismiss = createEvent(this, "dsDidDismiss");
+        this.currentTrigger = undefined;
+        this.focusHandler = new FocusHandler();
+        this.transitionQueue = Promise.resolve();
+        this.animated = true;
+        this.isOpen = false;
+        /**
+         * PUBLIC PROPERTY API
+         * ------------------------------------------------------
+         */
+        /**
+         * If `true` the popup is open.
+         */
+        this.open = false;
+        /**
+         * The trigger element. Setting this wires up aria-haspopup and aria-expanded automatically.
+         */
+        this.trigger = undefined;
+        /**
+         * Preferred placement of the popup relative to the trigger.
+         */
+        this.placement = 'bottom';
+        /**
+         * Offset in pixels between the trigger element and the popup panel.
+         */
+        this.offset = 8;
+        /**
+         * ARIA role applied to the panel.
+         * Controls focus-trap behaviour and the aria-haspopup value set on the trigger.
+         * Use "dialog" for rich content, "listbox" or "menu" for interactive option lists.
+         */
+        this.role = 'dialog';
+        /**
+         * If `true`, the popup can be dismissed via the Escape key and shows a close button.
+         */
+        this.closable = false;
+        /**
+         * If `true`, clicking outside the popup panel dismisses it.
+         */
+        this.backdropDismiss = false;
+        /**
+         * If `true`, a full-screen backdrop overlay is rendered behind the popup panel.
+         */
+        this.backdrop = false;
+        /**
+         * Group name for mutual-exclusion. Only one popup within the same group is open at a time.
+         */
+        this.group = undefined;
+        /**
+         * Accessible label for the popup panel (sets aria-label on the panel element).
+         */
+        this.label = '';
+        /**
+         * If `true`, renders a small arrow indicator pointing from the panel toward the trigger.
+         */
+        this.arrow = false;
+        /**
+         * Override the automatic focus-trap behaviour.
+         * When undefined, trapping is enabled when `backdrop` is `true` and disabled otherwise.
+         */
+        this.trapFocus = undefined;
+        /**
+         * EVENT BINDING
+         * ------------------------------------------------------
+         */
+        this.handleCloseClick = () => {
+            this.dismiss();
+        };
+    }
+    createLogger(log) {
+        this.log = log;
+    }
+    openChanged(newValue) {
+        newValue ? this.runPresent() : this.runDismiss();
+    }
+    triggerChanged(newTrigger, oldTrigger) {
+        if (oldTrigger) {
+            oldTrigger.removeAttribute('aria-haspopup');
+            oldTrigger.removeAttribute('aria-expanded');
+        }
+        if (newTrigger) {
+            newTrigger.setAttribute('aria-haspopup', this.role);
+            newTrigger.setAttribute('aria-expanded', 'false');
+        }
+    }
+    /**
+     * LIFECYCLE
+     * ------------------------------------------------------
+     */
+    connectedCallback() {
+        this.registerGroup();
+    }
+    componentDidLoad() {
+        if (this.trigger) {
+            this.trigger.setAttribute('aria-haspopup', this.role);
+            this.trigger.setAttribute('aria-expanded', 'false');
+        }
+        if (this.open) {
+            this.runPresent();
+        }
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.cleanupPositioner) === null || _a === void 0 ? void 0 : _a.call(this);
+        this.focusHandler.disconnect();
+        if (this.trigger) {
+            this.trigger.removeAttribute('aria-haspopup');
+            this.trigger.removeAttribute('aria-expanded');
+        }
+        this.unregisterGroup();
+    }
+    /**
+     * PUBLIC METHODS
+     * ------------------------------------------------------
+     */
+    /** Opens the popup. */
+    async present() {
+        this.open = true;
+    }
+    /** Closes the popup. */
+    async dismiss() {
+        this.open = false;
+    }
+    /** Toggles the popup open or closed. */
+    async toggle() {
+        this.open ? this.dismiss() : this.present();
+    }
+    /**
+     * @internal
+     */
+    async configChanged(state) {
+        this.animated = state.animated;
+    }
+    /**
+     * LISTENERS
+     * ------------------------------------------------------
+     */
+    async listenToClick(ev) {
+        var _a;
+        // Declarative trigger: element with data-popup matching this element's id.
+        if (this.el.id) {
+            const closest = ev.target.closest(`[data-popup="${this.el.id}"]`);
+            if (closest) {
+                this.currentTrigger = closest;
+                await this.toggle();
+                return;
+            }
+        }
+        // Click-outside dismiss using composedPath so shadow DOM clicks are detected.
+        if (this.backdropDismiss && this.isOpen) {
+            const path = ev.composedPath();
+            const insidePanel = path.includes(this.panelEl);
+            const effectiveTrigger = (_a = this.currentTrigger) !== null && _a !== void 0 ? _a : this.trigger;
+            const insideTrigger = effectiveTrigger ? path.includes(effectiveTrigger) : false;
+            if (!insidePanel && !insideTrigger) {
+                await this.dismiss();
+            }
+        }
+    }
+    listenToKeyDown(ev) {
+        if (!this.isOpen)
+            return;
+        if (this.closable && isEscapeKey(ev)) {
+            ev.stopPropagation();
+            this.dismiss();
+        }
+    }
+    /**
+     * PRIVATE METHODS
+     * ------------------------------------------------------
+     */
+    get shouldTrapFocus() {
+        if (this.trapFocus !== undefined)
+            return this.trapFocus;
+        return this.backdrop;
+    }
+    runPresent() {
+        this.transitionQueue = this.transitionQueue.then(() => this.doPresent()).catch(() => undefined);
+    }
+    runDismiss() {
+        this.transitionQueue = this.transitionQueue.then(() => this.doDismiss()).catch(() => undefined);
+    }
+    async doPresent() {
+        var _a;
+        if (this.isOpen)
+            return;
+        const trigger = (_a = this.currentTrigger) !== null && _a !== void 0 ? _a : this.trigger;
+        await this.dismissGroupSiblings();
+        this.dsWillPresent.emit({ trigger });
+        if (trigger) {
+            trigger.setAttribute('aria-expanded', 'true');
+            // Compute initial position while panel is still invisible so there is no flash.
+            await this.updatePosition(trigger);
+            this.startPositioner(trigger);
+        }
+        this.isOpen = true;
+        if (this.animated)
+            await wait(300);
+        if (this.shouldTrapFocus) {
+            this.focusHandler.enable({ target: this.panelEl, restoreElement: trigger !== null && trigger !== void 0 ? trigger : null });
+        }
+        else {
+            this.focusPanel();
+        }
+        this.dsDidPresent.emit({ trigger });
+    }
+    async doDismiss() {
+        var _a, _b;
+        if (!this.isOpen)
+            return;
+        const trigger = (_a = this.currentTrigger) !== null && _a !== void 0 ? _a : this.trigger;
+        this.dsWillDismiss.emit({ trigger });
+        (_b = this.cleanupPositioner) === null || _b === void 0 ? void 0 : _b.call(this);
+        this.cleanupPositioner = undefined;
+        if (trigger) {
+            trigger.setAttribute('aria-expanded', 'false');
+        }
+        this.isOpen = false;
+        if (this.animated)
+            await wait(300);
+        if (this.shouldTrapFocus) {
+            this.focusHandler.disable();
+            this.focusHandler.restoreFocus();
+        }
+        else {
+            trigger === null || trigger === void 0 ? void 0 : trigger.focus();
+        }
+        this.dsDidDismiss.emit({ trigger });
+    }
+    startPositioner(trigger) {
+        if (!this.panelEl)
+            return;
+        this.cleanupPositioner = autoUpdate(trigger, this.panelEl, () => this.updatePosition(trigger), {
+            ancestorScroll: true,
+            ancestorResize: true,
+            elementResize: true,
+            layoutShift: true,
+            animationFrame: false,
+        });
+    }
+    async updatePosition(trigger) {
+        if (!this.panelEl)
+            return;
+        const { x, y, placement, middlewareData } = await computePosition(trigger, this.panelEl, {
+            placement: this.placement,
+            strategy: 'fixed',
+            middleware: [
+                dsBrowser.hasWindow && !window.frameElement ? shift() : undefined,
+                flip(),
+                offset(this.offset),
+                this.arrow && this.arrowEl ? arrow({ element: this.arrowEl }) : undefined,
+            ].filter(Boolean),
+        });
+        Object.assign(this.panelEl.style, { left: `${x}px`, top: `${y}px` });
+        this.panelEl.dataset['placement'] = placement.split('-')[0];
+        if (this.arrow && this.arrowEl && middlewareData.arrow) {
+            const { x: ax, y: ay } = middlewareData.arrow;
+            Object.assign(this.arrowEl.style, {
+                left: ax != null ? `${ax}px` : '',
+                top: ay != null ? `${ay}px` : '',
+            });
+        }
+    }
+    focusPanel() {
+        if (!this.panelEl)
+            return;
+        const focusable = Array.from(this.panelEl.querySelectorAll('button:not([disabled]):not([tabindex^="-"]),input:not([type=hidden]):not([disabled]):not([tabindex^="-"]),select:not([disabled]):not([tabindex^="-"]),textarea:not([disabled]):not([tabindex^="-"]),a[href]:not([tabindex^="-"]),[tabindex]:not([tabindex^="-"])'));
+        if (focusable.length > 0) {
+            focusable[0].focus({ preventScroll: true });
+        }
+        else {
+            this.panelEl.focus({ preventScroll: true });
+        }
+    }
+    registerGroup() {
+        if (!this.group)
+            return;
+        if (!popupGroups.has(this.group))
+            popupGroups.set(this.group, new Set());
+        popupGroups.get(this.group).add(this.el);
+    }
+    unregisterGroup() {
+        var _a;
+        if (!this.group)
+            return;
+        (_a = popupGroups.get(this.group)) === null || _a === void 0 ? void 0 : _a.delete(this.el);
+    }
+    async dismissGroupSiblings() {
+        if (!this.group)
+            return;
+        const siblings = popupGroups.get(this.group);
+        if (!siblings)
+            return;
+        for (const sibling of siblings) {
+            if (sibling !== this.el) {
+                await sibling.dismiss();
+            }
+        }
+    }
+    /**
+     * RENDER
+     * ------------------------------------------------------
+     */
+    render() {
+        return (h(Host, { key: '63b4cf37af2e73b271f9c7fee523e7c68986081f', class: { 'is-open': this.isOpen, 'is-animated': this.animated, 'is-closable': this.closable } }, this.backdrop && h("div", { key: '208a95330c83c4dd2328ce9e87a06b7aab7ab404', part: "backdrop" }), h("div", { key: '969fde6073490ce0803c0cadcaa9ec06a7704361', part: "panel", ref: el => (this.panelEl = el), role: this.role, "aria-modal": this.role === 'dialog' ? 'true' : undefined, "aria-label": this.label || undefined, tabindex: "-1", "data-testid": "ds-popup-panel" }, this.arrow && h("div", { key: '228d1a47041090c57e395e240f2ebb5678f9c8e1', part: "arrow", ref: el => (this.arrowEl = el) }), this.closable && h("ds-close", { key: 'd18c4ac4848e7ee31256384be4e7e8dd2b8b5a49', part: "close", onClick: this.handleCloseClick }), h("slot", { key: 'ad9430d619bccde71bfeee2faffd1dde34dc43bd' }))));
+    }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "open": [{
+                "openChanged": 0
+            }],
+        "trigger": [{
+                "triggerChanged": 0
+            }]
+    }; }
+};
+__decorate([
+    Logger('popup'),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Function]),
+    __metadata("design:returntype", void 0)
+], Popup.prototype, "createLogger", null);
+__decorate([
+    Type('boolean'),
+    __metadata("design:type", Boolean)
+], Popup.prototype, "open", void 0);
+__decorate([
+    OneOf(POPUP_PLACEMENTS),
+    __metadata("design:type", String)
+], Popup.prototype, "placement", void 0);
+__decorate([
+    Type('number'),
+    __metadata("design:type", Number)
+], Popup.prototype, "offset", void 0);
+__decorate([
+    OneOf(POPUP_ROLES),
+    __metadata("design:type", String)
+], Popup.prototype, "role", void 0);
+__decorate([
+    Type('boolean'),
+    __metadata("design:type", Boolean)
+], Popup.prototype, "closable", void 0);
+__decorate([
+    Type('boolean'),
+    __metadata("design:type", Boolean)
+], Popup.prototype, "backdropDismiss", void 0);
+__decorate([
+    Type('boolean'),
+    __metadata("design:type", Boolean)
+], Popup.prototype, "backdrop", void 0);
+__decorate([
+    Type('string'),
+    __metadata("design:type", Object)
+], Popup.prototype, "group", void 0);
+__decorate([
+    Type('string'),
+    __metadata("design:type", String)
+], Popup.prototype, "label", void 0);
+__decorate([
+    Type('boolean'),
+    __metadata("design:type", Boolean)
+], Popup.prototype, "arrow", void 0);
+__decorate([
+    Type('boolean'),
+    __metadata("design:type", Object)
+], Popup.prototype, "trapFocus", void 0);
+__decorate([
+    ListenToConfig(),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Object]),
+    __metadata("design:returntype", Promise)
+], Popup.prototype, "configChanged", null);
+Popup.style = popupHostCss();
+
+export { Drawer as ds_drawer, Popup as ds_popup };