@pacem/pacem-ui 2.0.0-grothendieck → 2.0.0-hadamard

package/dist/browser/pacem-ui.js

@@ -1,5 +1,5 @@
 /*!
- * @pacem/pacem-ui v2.0.0-grothendieck (https://js.pacem.it)
+ * @pacem/pacem-ui v2.0.0-hadamard (https://js.pacem.it)
  * Pacem (https://pacem.it)
  * Licensed under Apache-2.0
  */
@@ -550,17 +550,24 @@
         BalloonAlignment["End"] = "end";
         BalloonAlignment["Auto"] = "auto";
     })(BalloonAlignment || (BalloonAlignment = {}));
+    /** A side of `target` a {@link PacemBalloonElement} can sit on. */
+    const BalloonPlacement = {
+        Top: 'top',
+        Left: 'left',
+        Bottom: 'bottom',
+        Right: 'right',
+    };
+    /** The automatic placements of a {@link PacemBalloonElement}: the side with the most room, on both axes or on one. */
+    const BalloonPlacementOption = {
+        Auto: 'auto',
+        HorizontalAuto: 'x',
+        VerticalAuto: 'y'
+    };
     /** Side of `target` a {@link PacemBalloonElement} is anchored to (with automatic variants that pick the side with the most room). */
-    var BalloonPosition;
-    (function (BalloonPosition) {
-        BalloonPosition["Top"] = "top";
-        BalloonPosition["Left"] = "left";
-        BalloonPosition["Bottom"] = "bottom";
-        BalloonPosition["Right"] = "right";
-        BalloonPosition["Auto"] = "auto";
-        BalloonPosition["HorizontalAuto"] = "x";
-        BalloonPosition["VerticalAuto"] = "y";
-    })(BalloonPosition || (BalloonPosition = {}));
+    const BalloonPosition = {
+        ...BalloonPlacement,
+        ...BalloonPlacementOption
+    };
     /** Whether a {@link PacemBalloonElement} sizes itself freely or matches its `target`'s size along the anchored axis. */
     var BalloonSizing;
     (function (BalloonSizing) {
@@ -585,9 +592,20 @@
             'track': true
         }
     };
+    /**
+     * CSS custom property a balloon publishes on itself when placed: the room left (px) on its side of the target, within
+     * the viewport, so that its contents can fit (e.g. `max-height: var(--pacem-balloon-available-height)` on a scrolling
+     * list). Updated whenever the balloon repositions (scroll, resize, when tracking).
+     */
+    const AVAILABLE_HEIGHT_VAR = '--pacem-balloon-available-height';
+    /** Breathing room (px) kept between a balloon and the viewport's edge when computing {@link AVAILABLE_HEIGHT_VAR}. */
+    const AVAILABLE_HEIGHT_GUTTER = 8;
     const positioningStyles = 'balloon-right balloon-left balloon-bottom balloon-top balloon-start balloon-center balloon-end';
     const allStyles = pacemCore.PCSS + '-balloon ' + positioningStyles + ' balloon-out balloon-in balloon-on';
     /** Positions its content as a floating popup (menu or tooltip) anchored to a `target` element or point; see {@link BalloonOptions}. */
+    // (the content's `<p-resize>` is `display: block` inline: in the shadow root the theme's `pacem-resize { display: block }`
+    // does not apply, and an inline element never reports a resize, i.e. the balloon would not reposition when its content
+    // grows or shrinks, e.g. a filtered list above its target)
     let PacemBalloonElement = class PacemBalloonElement extends pacemCore.Components.PacemElement {
         constructor() {
             super(...arguments);
@@ -781,6 +799,32 @@
                 this._adjust();
             }
         }
+        /**
+         * The side {@link BalloonOptions.prefer} asks for, when the balloon fits there (its natural size, on that side of the
+         * target, within the viewport); `null` otherwise, or when nothing is preferred.
+         * @param room The room around the target, per side.
+         */
+        _preferredSide(opts, room) {
+            const prefer = opts.prefer;
+            if (pacemCore.Utils.isNull(prefer) || !(prefer in room)) {
+                return null;
+            }
+            const isVertical = prefer === BalloonPlacement.Top || prefer === BalloonPlacement.Bottom;
+            const size = isVertical ? this.offsetHeight : this.offsetWidth;
+            const fits = size + AVAILABLE_HEIGHT_GUTTER <= room[prefer];
+            return fits ? prefer : null;
+        }
+        /** The room left on a side of the target (the whole viewport height for a side that is not above or below). */
+        _availableHeight(position, offsetTop, offsetBottom, viewportHeight) {
+            switch (position) {
+                case BalloonPosition.Top:
+                    return Math.max(offsetTop - AVAILABLE_HEIGHT_GUTTER, 0);
+                case BalloonPosition.Bottom:
+                    return Math.max(offsetBottom - AVAILABLE_HEIGHT_GUTTER, 0);
+                default:
+                    return viewportHeight;
+            }
+        }
         _adjust() {
             const popup = this, el = popup.target;
             if (pacemCore.Utils.isNull(el)) {
@@ -790,24 +834,39 @@
             const vieportSize = pacemCore.Utils.windowSize;
             var opts = this._options;
             var chosenPosition = opts.position, chosenAlignment = opts.align;
+            // room around the target, in the viewport
+            const viewportHeight = vieportSize.height;
+            const viewportWidth = vieportSize.width;
+            const offsetLeft = coords.left - pacemCore.Utils.scrollLeft;
+            const offsetTop = coords.top - pacemCore.Utils.scrollTop;
+            const offsetBottom = viewportHeight - (offsetTop + coords.height);
+            const offsetRight = viewportWidth - (offsetLeft + coords.width);
+            // (the natural size, uncapped: see AVAILABLE_HEIGHT_VAR below)
+            popup.style.removeProperty(AVAILABLE_HEIGHT_VAR);
             if (chosenPosition != BalloonPosition.Top &&
                 chosenPosition != BalloonPosition.Bottom && chosenPosition != BalloonPosition.Left && chosenPosition != BalloonPosition.Right) {
-                let viewportHeight = vieportSize.height;
-                let viewportWidth = vieportSize.width;
-                const offsetLeft = coords.left - pacemCore.Utils.scrollLeft;
-                const offsetTop = coords.top - pacemCore.Utils.scrollTop;
-                const offsetBottom = viewportHeight - (offsetTop + coords.height);
-                const offsetRight = viewportWidth - (offsetLeft + coords.width);
-                switch (chosenPosition) {
-                    case BalloonPosition.HorizontalAuto:
-                        chosenPosition = offsetLeft > offsetRight ? BalloonPosition.Left : BalloonPosition.Right;
-                        break;
-                    default:
-                        // (!) exclude 'left' and 'right' also when position is simply set to 'auto'
-                        chosenPosition = offsetTop > offsetBottom ? BalloonPosition.Top : BalloonPosition.Bottom;
-                        break;
+                // an automatic position: the preferred side wins, whenever the balloon fits there (on either axis)...
+                const room = { top: offsetTop, bottom: offsetBottom, left: offsetLeft, right: offsetRight };
+                const preferred = this._preferredSide(opts, room);
+                if (!pacemCore.Utils.isNull(preferred)) {
+                    chosenPosition = preferred;
+                }
+                else {
+                    // ...otherwise the larger side
+                    switch (chosenPosition) {
+                        case BalloonPosition.HorizontalAuto:
+                            chosenPosition = offsetLeft > offsetRight ? BalloonPosition.Left : BalloonPosition.Right;
+                            break;
+                        default:
+                            // (!) exclude 'left' and 'right' also when position is simply set to 'auto'
+                            chosenPosition = offsetTop > offsetBottom ? BalloonPosition.Top : BalloonPosition.Bottom;
+                            break;
+                    }
                 }
             }
+            // the room left on the chosen side, for contents that must fit in the viewport (e.g. a scrolling list)
+            const availableHeight = this._availableHeight(chosenPosition, offsetTop, offsetBottom, viewportHeight);
+            popup.style.setProperty(AVAILABLE_HEIGHT_VAR, `${availableHeight}px`);
             if (opts.size === BalloonSizing.Match) {
                 switch (chosenPosition) {
                     case BalloonPosition.Bottom:
@@ -975,11 +1034,14 @@
                 this._timer = setTimeout(() => this.popup(), delay);
                 return;
             }
-            const popup = this, isVisible = pacemCore.Utils.isVisible(popup);
+            const popup = this, isVisible = pacemCore.Utils.isVisible(popup), 
+            // (popping out: still visible, but leaving; popping up again cancels that)
+            isLeaving = pacemCore.Utils.hasClass(popup, 'balloon-out');
             this._adjustWatchers(true);
-            if (isVisible || this.disabled) {
+            if ((isVisible && !isLeaving) || this.disabled) {
                 return;
             }
+            pacemCore.Utils.removeClass(popup, 'balloon-out');
             // attach closured behavior to popup
             //if (!sameTrigger) {
             this._registerEvents(); // $popup.on('mouseenter', obj.methods.hover).on('mouseleave', obj.methods.out).data(vars.TRIGGER, obj);
@@ -1021,6 +1083,10 @@
             pacemCore.Utils.removeClass(popup, 'balloon-in balloon-on');
             pacemCore.Utils.addClass(popup, 'balloon-out');
             pacemCore.Utils.addAnimationEndCallback(popup, () => {
+                // (popped up again meanwhile: stays)
+                if (!pacemCore.Utils.hasClass(popup, 'balloon-out')) {
+                    return;
+                }
                 popup.style.visibility = 'hidden';
                 this._visible = false;
                 pacemCore.Utils.removeClass(popup, allStyles);
@@ -1105,7 +1171,7 @@
             shadow: true,
             template: `<${pacemCore.P}-resize target="{{ :host.target }}" disabled="true" watch-position="true" on-${pacemCore.Components.ResizeEventName}=":host._onLayoutChange($event)"></${pacemCore.P}-resize>
 <div class="${pacemCore.PCSS}-balloon-face"></div>
-<div class="${pacemCore.PCSS}-balloon"><${pacemCore.P}-resize on-${pacemCore.Components.ResizeEventName}=":host._onLayoutChange($event)" disabled="true" content><slot></slot></${pacemCore.P}-resize></div>
+<div class="${pacemCore.PCSS}-balloon"><${pacemCore.P}-resize on-${pacemCore.Components.ResizeEventName}=":host._onLayoutChange($event)" disabled="true" content style="display: block"><slot></slot></${pacemCore.P}-resize></div>
 <div class="corner top-left" part="corner-topleft"></div><div class="corner bottom-left" part="corner-bottomleft"></div><div class="corner top-right" part="corner-topright"></div><div class="corner bottom-right" part="corner-bottomright"></div>`
         })
     ], PacemBalloonElement);
@@ -2198,74 +2264,6 @@
         return c > 3 && r && Object.defineProperty(target, key, r), r;
     };
     //namespace Pacem.Components.UI {
-    /** Set of buttons shown by a dialog (e.g. {@link PacemDialogBase}), controlling which {@link DialogButton}s are visible. */
-    var DialogButtons;
-    (function (DialogButtons) {
-        DialogButtons["YesNo"] = "yesno";
-        DialogButtons["YesNoCancel"] = "yesnocancel";
-        DialogButtons["Ok"] = "ok";
-        DialogButtons["OkCancel"] = "okcancel";
-    })(DialogButtons || (DialogButtons = {}));
-    /** Single button a dialog can be committed/closed with. */
-    var DialogButton;
-    (function (DialogButton) {
-        DialogButton["Yes"] = "yes";
-        DialogButton["No"] = "no";
-        DialogButton["Cancel"] = "cancel";
-        DialogButton["Ok"] = "ok";
-    })(DialogButton || (DialogButton = {}));
-    /** Event name dispatched by a {@link PacemDialogBase} when it is committed/closed via one of its buttons. */
-    const DialogResultEventName = 'commit';
-    /** Event dispatched by a {@link PacemDialogBase} when it is committed/closed via one of its buttons; also the resolution value of `open()`'s promise. */
-    class DialogResultEvent extends pacemCore.CustomTypedEvent {
-        constructor(args) {
-            super(DialogResultEventName, args);
-        }
-    }
-    /** Base class for modal dialog elements (see {@link PacemDialogElement}): wraps a {@link Lightbox} with an open/commit lifecycle resolved through a promise. */
-    class PacemDialogBase extends pacemCore.Components.PacemElement {
-        #deferred;
-        /** Opens the dialog, optionally seeding its `state`. @returns A promise resolved with the {@link DialogResultEventArgs} once the dialog is committed. */
-        open(state) {
-            const lb = this.lightbox;
-            if (!pacemCore.Utils.isNull(this.#deferred)) {
-                throw `Dialog already open.`;
-            }
-            const deferred = this.#deferred = Promise.withResolvers();
-            if (this.hide || this.disabled) {
-                this.log(pacemCore.Logging.LogLevel.Warn, 'Dialog hidden or disabled, opening forbidden.');
-                deferred.reject();
-            }
-            else {
-                this.dispatchEvent(new Event('open'));
-                lb.show = true;
-                this.state = state;
-            }
-            return deferred.promise;
-        }
-        /** Closes the dialog with the given button outcome, resolving the pending `open()` promise and dispatching a {@link DialogResultEvent}. */
-        commit(btn, evt) {
-            pacemCore.avoidHandler(evt);
-            this.log(pacemCore.Logging.LogLevel.Debug, `Committing dialog by clicking '${btn}'.`);
-            const state = this.state;
-            var drevt = new DialogResultEvent({ button: btn, state: state });
-            this.lightbox.show = false;
-            this.#deferred.resolve(drevt.detail);
-            this.#deferred = null;
-            this.dispatchEvent(drevt);
-        }
-    }
-    __decorate$v([
-        pacemCore.Watch()
-    ], PacemDialogBase.prototype, "state", void 0);
-
-    var __decorate$u = (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;
-        if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-        else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-        return c > 3 && r && Object.defineProperty(target, key, r), r;
-    };
-    //namespace Pacem.Components.UI {
     /** Clickable button element with optional icon, command dispatching (via {@link CommandEvent}) and an optional confirmation dialog gate. */
     let PacemButtonElement = class PacemButtonElement extends pacemCore.Components.PacemIterableElement {
         constructor() {
@@ -2332,9 +2330,9 @@
                 }
             };
             if (!this.disabled && evt.type === 'click' && !pacemCore.Utils.isNull(this.confirmationDialog)) {
-                this.confirmationDialog.open(this.confirmationMessage).then(r => {
-                    if (r.button === DialogButton.Yes || r.button === DialogButton.Ok)
-                        fn(evt);
+                this.confirmationDialog.open(this.confirmationMessage, true).then(r => {
+                    //if (r.button === DialogButton.Yes || r.button === DialogButton.Ok)
+                    fn(evt);
                 });
             }
             else if (!(evt instanceof MouseEvent) || evt.button === 0) {
@@ -2342,25 +2340,25 @@
             }
         }
     };
-    __decorate$u([
+    __decorate$v([
         pacemCore.Watch({ emit: false, converter: pacemCore.PropertyConverters.String })
     ], PacemButtonElement.prototype, "iconGlyph", void 0);
-    __decorate$u([
+    __decorate$v([
         pacemCore.Watch({ emit: false, converter: pacemCore.PropertyConverters.String })
     ], PacemButtonElement.prototype, "iconUrl", void 0);
-    __decorate$u([
+    __decorate$v([
         pacemCore.Watch({ emit: false, converter: pacemCore.PropertyConverters.String })
     ], PacemButtonElement.prototype, "commandName", void 0);
-    __decorate$u([
+    __decorate$v([
         pacemCore.Watch({ emit: false, converter: pacemCore.PropertyConverters.Json })
     ], PacemButtonElement.prototype, "commandArgument", void 0);
-    __decorate$u([
+    __decorate$v([
         pacemCore.Watch({ emit: false, converter: pacemCore.PropertyConverters.String })
     ], PacemButtonElement.prototype, "confirmationMessage", void 0);
-    __decorate$u([
+    __decorate$v([
         pacemCore.Watch({ emit: false, converter: pacemCore.PropertyConverters.Element })
     ], PacemButtonElement.prototype, "confirmationDialog", void 0);
-    PacemButtonElement = __decorate$u([
+    PacemButtonElement = __decorate$v([
         pacemCore.CustomElement({
             tagName: pacemCore.P + '-button',
             modifiers: ['hoverable', 'focusable', 'clickable']
@@ -2368,7 +2366,7 @@
     ], PacemButtonElement);
     //}
 
-    var __decorate$t = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+    var __decorate$u = (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;
         if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
         else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -2401,14 +2399,14 @@
             return item instanceof PacemButtonElement;
         }
     };
-    PacemButtonsetElement = __decorate$t([
+    PacemButtonsetElement = __decorate$u([
         pacemCore.CustomElement({
             tagName: pacemCore.P + '-buttonset'
         })
     ], PacemButtonsetElement);
     //}
 
-    var __decorate$s = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+    var __decorate$t = (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;
         if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
         else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -2461,22 +2459,22 @@
             });
         }
     };
-    __decorate$s([
+    __decorate$t([
         pacemCore.Watch({ converter: pacemCore.PropertyConverters.Datetime })
     ], PacemCalendarEventElement.prototype, "start", void 0);
-    __decorate$s([
+    __decorate$t([
         pacemCore.Watch({ converter: pacemCore.PropertyConverters.Datetime })
     ], PacemCalendarEventElement.prototype, "end", void 0);
-    __decorate$s([
+    __decorate$t([
         pacemCore.Watch({ converter: pacemCore.PropertyConverters.String })
     ], PacemCalendarEventElement.prototype, "caption", void 0);
-    __decorate$s([
+    __decorate$t([
         pacemCore.Watch({ converter: pacemCore.PropertyConverters.Json })
     ], PacemCalendarEventElement.prototype, "place", void 0);
-    __decorate$s([
+    __decorate$t([
         pacemCore.Watch({ converter: pacemCore.PropertyConverters.Boolean })
     ], PacemCalendarEventElement.prototype, "allDay", void 0);
-    PacemCalendarEventElement = __decorate$s([
+    PacemCalendarEventElement = __decorate$t([
         pacemCore.CustomElement({
             tagName: pacemCore.P + '-calendar-event'
         })
@@ -2630,25 +2628,25 @@
             }
         }
     }
-    __decorate$s([
+    __decorate$t([
         pacemCore.Watch({ converter: pacemCore.PropertyConverters.Datetime })
     ], PacemCalendarBaseElement.prototype, "viewDate", void 0);
-    __decorate$s([
+    __decorate$t([
         pacemCore.Watch({ converter: pacemCore.PropertyConverters.Datetime })
     ], PacemCalendarBaseElement.prototype, "now", void 0);
-    __decorate$s([
+    __decorate$t([
         pacemCore.Watch({ converter: pacemCore.PropertyConverters.String })
     ], PacemCalendarBaseElement.prototype, "zoom", void 0);
-    __decorate$s([
+    __decorate$t([
         pacemCore.Watch({ converter: pacemCore.PropertyConverters.String })
     ], PacemCalendarBaseElement.prototype, "weekStart", void 0);
-    __decorate$s([
+    __decorate$t([
         pacemCore.Watch({ converter: pacemCore.PropertyConverters.Eval })
     ], PacemCalendarBaseElement.prototype, "week", void 0);
-    __decorate$s([
+    __decorate$t([
         pacemCore.Watch({ converter: pacemCore.PropertyConverters.Eval })
     ], PacemCalendarBaseElement.prototype, "month", void 0);
-    __decorate$s([
+    __decorate$t([
         pacemCore.Watch({ converter: pacemCore.PropertyConverters.Eval })
     ], PacemCalendarBaseElement.prototype, "disabledRanges", void 0);
     /** Base class for calendar-family elements that render their {@link PacemCalendarEventElement} items into a positioned grid (see {@link PacemCalendarElement}, {@link PacemAgendaElement}); subclasses supply the grid-building logic via `buildDataSource`. */
@@ -2822,13 +2820,13 @@
             }
         }
     };
-    __decorate$s([
+    __decorate$t([
         pacemCore.ViewChild(pacemCore.P + '-clock')
     ], PacemAgendaElement.prototype, "_clock", void 0);
-    __decorate$s([
+    __decorate$t([
         pacemCore.Watch({ converter: pacemCore.PropertyConverters.Datetime })
     ], PacemAgendaElement.prototype, "time", void 0);
-    PacemAgendaElement = __decorate$s([
+    PacemAgendaElement = __decorate$t([
         pacemCore.CustomElement({
             tagName: pacemCore.P + '-agenda', shadow: pacemCore.Defaults.USE_SHADOW_ROOT,
             template: `<${pacemCore.P}-repeater class="${pacemCore.PCSS}-agenda agenda-grid" datasource="{{ :host.datasource }}">${buildAgendaGrid()}<${pacemCore.P}-clock hidden></${pacemCore.P}-clock>
@@ -2909,16 +2907,16 @@ css-class="{{ ['hour-start-'+ (^item.hour + 1), 'hour-end-'+ (^item.hour + ^item
             return super.getDayLabel(d);
         }
     };
-    __decorate$s([
+    __decorate$t([
         pacemCore.Watch({ converter: pacemCore.PropertyConverters.Datetime })
     ], PacemCalendarElement.prototype, "date", void 0);
-    __decorate$s([
+    __decorate$t([
         pacemCore.Watch({ emit: false })
     ], PacemCalendarElement.prototype, "dayLabelFormatter", void 0);
-    __decorate$s([
+    __decorate$t([
         pacemCore.Watch()
     ], PacemCalendarElement.prototype, "_formatVersion", void 0);
-    PacemCalendarElement = __decorate$s([
+    PacemCalendarElement = __decorate$t([
         pacemCore.CustomElement({
             tagName: pacemCore.P + '-calendar', shadow: pacemCore.Defaults.USE_SHADOW_ROOT,
             template: `<${pacemCore.P}-repeater class="${pacemCore.PCSS}-calendar calendar-grid" datasource="{{ :host.datasource }}">${buildCalendarGrid()}
@@ -2942,10 +2940,10 @@ css-class="{{ ['hour-start-'+ (^item.hour + 1), 'hour-end-'+ (^item.hour + ^item
     /** Displays (and CSS-classes itself by) the current hour/minute; typically overlaid on a {@link PacemAgendaElement} to mark the current-time line. */
     let PacemClockElement = class PacemClockElement extends pacemCore.Components.PacemElement {
     };
-    __decorate$s([
+    __decorate$t([
         pacemCore.Watch({ converter: pacemCore.PropertyConverters.Datetime })
     ], PacemClockElement.prototype, "now", void 0);
-    PacemClockElement = __decorate$s([
+    PacemClockElement = __decorate$t([
         pacemCore.CustomElement({ tagName: pacemCore.P + '-clock' })
     ], PacemClockElement);
     // #endregion
@@ -2975,13 +2973,13 @@ css-class="{{ ['hour-start-'+ (^item.hour + 1), 'hour-end-'+ (^item.hour + ^item
             super.disconnectedCallback();
         }
     };
-    __decorate$s([
+    __decorate$t([
         pacemCore.ViewChild(pacemCore.P + '-calendar')
     ], PacemScheduleElement.prototype, "_calendar", void 0);
-    __decorate$s([
+    __decorate$t([
         pacemCore.ViewChild(pacemCore.P + '-agenda')
     ], PacemScheduleElement.prototype, "_agenda", void 0);
-    PacemScheduleElement = __decorate$s([
+    PacemScheduleElement = __decorate$t([
         pacemCore.CustomElement({
             tagName: pacemCore.P + '-schedule', shadow: pacemCore.Defaults.USE_SHADOW_ROOT,
             template: `<${pacemCore.P}-panel class="${pacemCore.PCSS}-schedule" css-class="{{ ['schedule-'+ (:host.zoom || '${CalendarZoom.Month}')] }}">
@@ -3037,7 +3035,7 @@ css-class="{{ ['hour-start-'+ (^item.hour + 1), 'hour-end-'+ (^item.hour + ^item
             this._target.disabledRanges = actualRanges;
         }
     }
-    __decorate$s([
+    __decorate$t([
         pacemCore.Debounce(true)
     ], PacemCalendarRuleBaseElement.prototype, "refreshDisabledRanges", null);
     /** Declarative {@link PacemCalendarRuleBaseElement} that disables every day of the ancestor calendar not listed in `days` (e.g. weekends). */
@@ -3074,15 +3072,15 @@ css-class="{{ ['hour-start-'+ (^item.hour + 1), 'hour-end-'+ (^item.hour + ^item
             return retval;
         }
     };
-    __decorate$s([
+    __decorate$t([
         pacemCore.Watch({ emit: false, converter: pacemCore.PropertyConverters.StringArray })
     ], PacemCalendarDayOfWeekRuleElement.prototype, "days", void 0);
-    PacemCalendarDayOfWeekRuleElement = __decorate$s([
+    PacemCalendarDayOfWeekRuleElement = __decorate$t([
         pacemCore.CustomElement({ tagName: pacemCore.P + '-calendar-daysofweek-rule' })
     ], PacemCalendarDayOfWeekRuleElement);
     // #endregion
 
-    var __decorate$r = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+    var __decorate$s = (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;
         if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
         else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -3135,25 +3133,105 @@ css-class="{{ ['hour-start-'+ (^item.hour + 1), 'hour-end-'+ (^item.hour + ^item
             }
         }
     };
-    __decorate$r([
+    __decorate$s([
         pacemCore.Watch({ converter: pacemCore.PropertyConverters.Boolean })
     ], PacemCollapseElement.prototype, "collapse", void 0);
-    __decorate$r([
+    __decorate$s([
         pacemCore.Watch({ emit: false, converter: pacemCore.PropertyConverters.Boolean })
     ], PacemCollapseElement.prototype, "horizontal", void 0);
-    __decorate$r([
+    __decorate$s([
         pacemCore.ViewChild(pacemCore.P + '-resize')
     ], PacemCollapseElement.prototype, "_resizer", void 0);
-    __decorate$r([
+    __decorate$s([
         pacemCore.ViewChild(`[part=content]`)
     ], PacemCollapseElement.prototype, "_container", void 0);
-    PacemCollapseElement = __decorate$r([
+    PacemCollapseElement = __decorate$s([
         pacemCore.CustomElement({
             tagName: pacemCore.P + '-collapse', shadow: true,
             template: `<${pacemCore.P}-resize on-${pacemCore.Components.ResizeEventName}=":host._resizeHandler($event)" target="{{ ::_container }}"></${pacemCore.P}-resize><div part="container"><div part="content"><slot></slot></div></div>`
         })
     ], PacemCollapseElement);
 
+    var __decorate$r = (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;
+        if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+        else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+        return c > 3 && r && Object.defineProperty(target, key, r), r;
+    };
+    //namespace Pacem.Components.UI {
+    /** Set of buttons shown by a dialog (e.g. {@link PacemDialogBase}), controlling which {@link DialogButton}s are visible. */
+    var DialogButtons;
+    (function (DialogButtons) {
+        DialogButtons["YesNo"] = "yesno";
+        DialogButtons["YesNoCancel"] = "yesnocancel";
+        DialogButtons["Ok"] = "ok";
+        DialogButtons["OkCancel"] = "okcancel";
+    })(DialogButtons || (DialogButtons = {}));
+    /** Single button a dialog can be committed/closed with. */
+    var DialogButton;
+    (function (DialogButton) {
+        DialogButton["Yes"] = "yes";
+        DialogButton["No"] = "no";
+        DialogButton["Cancel"] = "cancel";
+        DialogButton["Ok"] = "ok";
+    })(DialogButton || (DialogButton = {}));
+    /** Event name dispatched by a {@link PacemDialogBase} when it is committed/closed via one of its buttons. */
+    const DialogResultEventName = 'commit';
+    /** Event dispatched by a {@link PacemDialogBase} when it is committed/closed via one of its buttons; also the resolution value of `open()`'s promise. */
+    class DialogResultEvent extends pacemCore.CustomTypedEvent {
+        constructor(args) {
+            super(DialogResultEventName, args);
+        }
+    }
+    /** Base class for modal dialog elements (see {@link PacemDialogElement}): wraps a {@link Lightbox} with an open/commit lifecycle resolved through a promise. */
+    class PacemDialogBase extends pacemCore.Components.PacemElement {
+        #deferred;
+        /** Opens the dialog, optionally seeding its `state`. @returns A promise resolved with the {@link DialogResultEventArgs} once the dialog is committed. */
+        open(state, rejectOnDeny = false) {
+            const lb = this.lightbox;
+            if (!pacemCore.Utils.isNull(this.#deferred)) {
+                throw `Dialog already open.`;
+            }
+            const deferred = (this.#deferred = { promise: Promise.withResolvers(), rejectOnDeny }).promise;
+            if (this.hide || this.disabled) {
+                this.log(pacemCore.Logging.LogLevel.Warn, 'Dialog hidden or disabled, opening forbidden.');
+                deferred.reject();
+            }
+            else {
+                this.dispatchEvent(new Event('open'));
+                lb.show = true;
+                this.state = state;
+            }
+            return deferred.promise;
+        }
+        /** Closes the dialog with the given button outcome, resolving the pending `open()` promise and dispatching a {@link DialogResultEvent}. */
+        commit(btn, evt) {
+            pacemCore.avoidHandler(evt);
+            this.log(pacemCore.Logging.LogLevel.Debug, `Committing dialog by clicking '${btn}'.`);
+            const state = this.state;
+            var drevt = new DialogResultEvent({ button: btn, state });
+            this.lightbox.show = false;
+            const { promise, rejectOnDeny } = this.#deferred;
+            if (rejectOnDeny) {
+                switch (btn) {
+                    case DialogButton.Cancel:
+                    case DialogButton.No:
+                        promise.reject(drevt.detail);
+                    default:
+                        promise.resolve(drevt.detail);
+                }
+            }
+            else {
+                promise.resolve(drevt.detail);
+            }
+            this.#deferred = null;
+            this.dispatchEvent(drevt);
+        }
+    }
+    __decorate$r([
+        pacemCore.Watch()
+    ], PacemDialogBase.prototype, "state", void 0);
+
     var __decorate$q = (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;
         if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
@@ -5305,8 +5383,11 @@ css-class="{{ ['hour-start-'+ (^item.hour + 1), 'hour-end-'+ (^item.hour + ^item
                 content = content.toLocaleString();
             }
             if (typeof content === 'string') {
+                // (sanitizing a string parses it: a fragment comes back)
                 const safeContent = this.sanitize(content);
-                this.#newContent = this._buildMarkupNode(safeContent);
+                this.#newContent = typeof safeContent === 'string'
+                    ? this._buildMarkupNode(safeContent)
+                    : Array.from(safeContent.childNodes);
             }
             else if (content instanceof Node) {
                 const safeContent = this.sanitize(content);
@@ -6368,14 +6449,16 @@ css-class="{{ ['hour-start-'+ (^item.hour + 1), 'hour-end-'+ (^item.hour + ^item
 
     var indexComponentsUi = /*#__PURE__*/Object.freeze({
         __proto__: null,
+        AVAILABLE_HEIGHT_VAR: AVAILABLE_HEIGHT_VAR,
         get AdapterOrientation () { return AdapterOrientation; },
         AdapterPageButtonRefreshEvent: AdapterPageButtonRefreshEvent,
         AdapterPageButtonRefreshEventName: AdapterPageButtonRefreshEventName,
         get BalloonAlignment () { return BalloonAlignment; },
         get BalloonBehavior () { return BalloonBehavior; },
+        BalloonPlacement: BalloonPlacement,
         BalloonPopoutEventName: BalloonPopoutEventName,
         BalloonPopupEventName: BalloonPopupEventName,
-        get BalloonPosition () { return BalloonPosition; },
+        BalloonPosition: BalloonPosition,
         get BalloonSizing () { return BalloonSizing; },
         get BalloonTrigger () { return BalloonTrigger; },
         get BinderAnchor () { return BinderAnchor; },