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

package/dist/bundle/pacem-ui.mjs

@@ -1,5 +1,5 @@
 /*!
- * @pacem/pacem-ui v2.0.0-goldbach (https://js.pacem.it)
+ * @pacem/pacem-ui v2.0.0-hadamard (https://js.pacem.it)
  * Pacem (https://pacem.it)
  * Licensed under Apache-2.0
  */
@@ -18,11 +18,13 @@ __export(index_components_exports, {
 // packages/ui/dist/esm/index-components-ui.js
 var index_components_ui_exports = {};
 __export(index_components_ui_exports, {
+  AVAILABLE_HEIGHT_VAR: () => AVAILABLE_HEIGHT_VAR,
   AdapterOrientation: () => AdapterOrientation,
   AdapterPageButtonRefreshEvent: () => AdapterPageButtonRefreshEvent,
   AdapterPageButtonRefreshEventName: () => AdapterPageButtonRefreshEventName,
   BalloonAlignment: () => BalloonAlignment,
   BalloonBehavior: () => BalloonBehavior,
+  BalloonPlacement: () => BalloonPlacement,
   BalloonPopoutEventName: () => BalloonPopoutEventName,
   BalloonPopupEventName: () => BalloonPopupEventName,
   BalloonPosition: () => BalloonPosition,
@@ -628,16 +630,21 @@ var BalloonAlignment;
   BalloonAlignment2["End"] = "end";
   BalloonAlignment2["Auto"] = "auto";
 })(BalloonAlignment || (BalloonAlignment = {}));
-var BalloonPosition;
-(function(BalloonPosition2) {
-  BalloonPosition2["Top"] = "top";
-  BalloonPosition2["Left"] = "left";
-  BalloonPosition2["Bottom"] = "bottom";
-  BalloonPosition2["Right"] = "right";
-  BalloonPosition2["Auto"] = "auto";
-  BalloonPosition2["HorizontalAuto"] = "x";
-  BalloonPosition2["VerticalAuto"] = "y";
-})(BalloonPosition || (BalloonPosition = {}));
+var BalloonPlacement = {
+  Top: "top",
+  Left: "left",
+  Bottom: "bottom",
+  Right: "right"
+};
+var BalloonPlacementOption = {
+  Auto: "auto",
+  HorizontalAuto: "x",
+  VerticalAuto: "y"
+};
+var BalloonPosition = {
+  ...BalloonPlacement,
+  ...BalloonPlacementOption
+};
 var BalloonSizing;
 (function(BalloonSizing2) {
   BalloonSizing2["Auto"] = "auto";
@@ -659,6 +666,8 @@ var BalloonConsts = {
     "track": true
   }
 };
+var AVAILABLE_HEIGHT_VAR = "--pacem-balloon-available-height";
+var AVAILABLE_HEIGHT_GUTTER = 8;
 var positioningStyles = "balloon-right balloon-left balloon-bottom balloon-top balloon-start balloon-center balloon-end";
 var allStyles = PCSS3 + "-balloon " + positioningStyles + " balloon-out balloon-in balloon-on";
 var PacemBalloonElement = class PacemBalloonElement2 extends Components3.PacemElement {
@@ -843,6 +852,32 @@ var PacemBalloonElement = class PacemBalloonElement2 extends Components3.PacemEl
       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 (Utils3.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 (Utils3.isNull(el)) {
@@ -852,22 +887,31 @@ var PacemBalloonElement = class PacemBalloonElement2 extends Components3.PacemEl
     const vieportSize = Utils3.windowSize;
     var opts = this._options;
     var chosenPosition = opts.position, chosenAlignment = opts.align;
+    const viewportHeight = vieportSize.height;
+    const viewportWidth = vieportSize.width;
+    const offsetLeft = coords.left - Utils3.scrollLeft;
+    const offsetTop = coords.top - Utils3.scrollTop;
+    const offsetBottom = viewportHeight - (offsetTop + coords.height);
+    const offsetRight = viewportWidth - (offsetLeft + coords.width);
+    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 - Utils3.scrollLeft;
-      const offsetTop = coords.top - Utils3.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:
-          chosenPosition = offsetTop > offsetBottom ? BalloonPosition.Top : BalloonPosition.Bottom;
-          break;
+      const room = { top: offsetTop, bottom: offsetBottom, left: offsetLeft, right: offsetRight };
+      const preferred = this._preferredSide(opts, room);
+      if (!Utils3.isNull(preferred)) {
+        chosenPosition = preferred;
+      } else {
+        switch (chosenPosition) {
+          case BalloonPosition.HorizontalAuto:
+            chosenPosition = offsetLeft > offsetRight ? BalloonPosition.Left : BalloonPosition.Right;
+            break;
+          default:
+            chosenPosition = offsetTop > offsetBottom ? BalloonPosition.Top : BalloonPosition.Bottom;
+            break;
+        }
       }
     }
+    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:
@@ -1026,11 +1070,12 @@ var PacemBalloonElement = class PacemBalloonElement2 extends Components3.PacemEl
       this._timer = setTimeout(() => this.popup(), delay);
       return;
     }
-    const popup = this, isVisible = Utils3.isVisible(popup);
+    const popup = this, isVisible = Utils3.isVisible(popup), isLeaving = Utils3.hasClass(popup, "balloon-out");
     this._adjustWatchers(true);
-    if (isVisible || this.disabled) {
+    if (isVisible && !isLeaving || this.disabled) {
       return;
     }
+    Utils3.removeClass(popup, "balloon-out");
     this._registerEvents();
     popup.style.pointerEvents = "none";
     this._visible = true;
@@ -1064,6 +1109,9 @@ var PacemBalloonElement = class PacemBalloonElement2 extends Components3.PacemEl
     Utils3.removeClass(popup, "balloon-in balloon-on");
     Utils3.addClass(popup, "balloon-out");
     Utils3.addAnimationEndCallback(popup, () => {
+      if (!Utils3.hasClass(popup, "balloon-out")) {
+        return;
+      }
       popup.style.visibility = "hidden";
       this._visible = false;
       Utils3.removeClass(popup, allStyles);
@@ -1146,7 +1194,7 @@ PacemBalloonElement = __decorate3([
     shadow: true,
     template: `<${P3}-resize target="{{ :host.target }}" disabled="true" watch-position="true" on-${Components3.ResizeEventName}=":host._onLayoutChange($event)"></${P3}-resize>
 <div class="${PCSS3}-balloon-face"></div>
-<div class="${PCSS3}-balloon"><${P3}-resize on-${Components3.ResizeEventName}=":host._onLayoutChange($event)" disabled="true" content><slot></slot></${P3}-resize></div>
+<div class="${PCSS3}-balloon"><${P3}-resize on-${Components3.ResizeEventName}=":host._onLayoutChange($event)" disabled="true" content style="display: block"><slot></slot></${P3}-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);
@@ -2193,79 +2241,14 @@ PacemBottomSheetElement = __decorate6([
 ], PacemBottomSheetElement);
 
 // packages/ui/dist/esm/button.js
-import { P as P7, PCSS as PCSS6, CustomElement as CustomElement7, Watch as Watch8, Utils as Utils8, PropertyConverters as PropertyConverters7, Components as Components8, CommandEvent } from "@pacem/pacem-core";
-
-// packages/ui/dist/esm/dialog-abstractions.js
-import { Watch as Watch7, Utils as Utils7, Components as Components7, CustomTypedEvent, Logging, avoidHandler as avoidHandler3 } from "@pacem/pacem-core";
+import { P as P7, PCSS as PCSS6, CustomElement as CustomElement7, Watch as Watch7, Utils as Utils7, PropertyConverters as PropertyConverters7, Components as Components7, CommandEvent } from "@pacem/pacem-core";
 var __decorate7 = 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;
 };
-var DialogButtons;
-(function(DialogButtons2) {
-  DialogButtons2["YesNo"] = "yesno";
-  DialogButtons2["YesNoCancel"] = "yesnocancel";
-  DialogButtons2["Ok"] = "ok";
-  DialogButtons2["OkCancel"] = "okcancel";
-})(DialogButtons || (DialogButtons = {}));
-var DialogButton;
-(function(DialogButton2) {
-  DialogButton2["Yes"] = "yes";
-  DialogButton2["No"] = "no";
-  DialogButton2["Cancel"] = "cancel";
-  DialogButton2["Ok"] = "ok";
-})(DialogButton || (DialogButton = {}));
-var DialogResultEventName = "commit";
-var DialogResultEvent = class extends CustomTypedEvent {
-  constructor(args) {
-    super(DialogResultEventName, args);
-  }
-};
-var PacemDialogBase = class extends Components7.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 (!Utils7.isNull(this.#deferred)) {
-      throw `Dialog already open.`;
-    }
-    const deferred = this.#deferred = Promise.withResolvers();
-    if (this.hide || this.disabled) {
-      this.log(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) {
-    avoidHandler3(evt);
-    this.log(Logging.LogLevel.Debug, `Committing dialog by clicking '${btn}'.`);
-    const state = this.state;
-    var drevt = new DialogResultEvent({ button: btn, state });
-    this.lightbox.show = false;
-    this.#deferred.resolve(drevt.detail);
-    this.#deferred = null;
-    this.dispatchEvent(drevt);
-  }
-};
-__decorate7([
-  Watch7()
-], PacemDialogBase.prototype, "state", void 0);
-
-// packages/ui/dist/esm/button.js
-var __decorate8 = 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;
-};
-var PacemButtonElement = class PacemButtonElement2 extends Components8.PacemIterableElement {
+var PacemButtonElement = class PacemButtonElement2 extends Components7.PacemIterableElement {
   constructor() {
     super("button");
   }
@@ -2289,68 +2272,67 @@ var PacemButtonElement = class PacemButtonElement2 extends Components8.PacemIter
     let fn = (ev) => {
       super.emit(ev);
       if (!ev.defaultPrevented) {
-        if (ev.type === "click" && !Utils8.isNullOrEmpty(this.commandName)) {
+        if (ev.type === "click" && !Utils7.isNullOrEmpty(this.commandName)) {
           this.dispatchEvent(new CommandEvent({ commandName: this.commandName, commandArgument: this.commandArgument }));
         }
         switch (ev.type) {
           case "mousedown":
             if (evt.button === 0) {
-              Utils8.addClass(this, PCSS6 + "-active");
+              Utils7.addClass(this, PCSS6 + "-active");
             }
             break;
           case "pointerdown":
-            Utils8.addClass(this, PCSS6 + "-active");
+            Utils7.addClass(this, PCSS6 + "-active");
             break;
           case "keydown":
             if (ev.keyCode === 32 || ev.keyCode === 13) {
               evt.preventDefault();
-              Utils8.addClass(this, PCSS6 + "-active");
+              Utils7.addClass(this, PCSS6 + "-active");
             }
             break;
           case "blur":
           case "mouseup":
           case "pointerup":
           case "click":
-            Utils8.removeClass(this, PCSS6 + "-active");
+            Utils7.removeClass(this, PCSS6 + "-active");
             break;
           case "keyup":
             if (ev.keyCode === 32 || ev.keyCode === 13) {
               this.click();
-              Utils8.removeClass(this, PCSS6 + "-active");
+              Utils7.removeClass(this, PCSS6 + "-active");
             }
             break;
         }
       }
     };
-    if (!this.disabled && evt.type === "click" && !Utils8.isNull(this.confirmationDialog)) {
-      this.confirmationDialog.open(this.confirmationMessage).then((r) => {
-        if (r.button === DialogButton.Yes || r.button === DialogButton.Ok)
-          fn(evt);
+    if (!this.disabled && evt.type === "click" && !Utils7.isNull(this.confirmationDialog)) {
+      this.confirmationDialog.open(this.confirmationMessage, true).then((r) => {
+        fn(evt);
       });
     } else if (!(evt instanceof MouseEvent) || evt.button === 0) {
       fn(evt);
     }
   }
 };
-__decorate8([
-  Watch8({ emit: false, converter: PropertyConverters7.String })
+__decorate7([
+  Watch7({ emit: false, converter: PropertyConverters7.String })
 ], PacemButtonElement.prototype, "iconGlyph", void 0);
-__decorate8([
-  Watch8({ emit: false, converter: PropertyConverters7.String })
+__decorate7([
+  Watch7({ emit: false, converter: PropertyConverters7.String })
 ], PacemButtonElement.prototype, "iconUrl", void 0);
-__decorate8([
-  Watch8({ emit: false, converter: PropertyConverters7.String })
+__decorate7([
+  Watch7({ emit: false, converter: PropertyConverters7.String })
 ], PacemButtonElement.prototype, "commandName", void 0);
-__decorate8([
-  Watch8({ emit: false, converter: PropertyConverters7.Json })
+__decorate7([
+  Watch7({ emit: false, converter: PropertyConverters7.Json })
 ], PacemButtonElement.prototype, "commandArgument", void 0);
-__decorate8([
-  Watch8({ emit: false, converter: PropertyConverters7.String })
+__decorate7([
+  Watch7({ emit: false, converter: PropertyConverters7.String })
 ], PacemButtonElement.prototype, "confirmationMessage", void 0);
-__decorate8([
-  Watch8({ emit: false, converter: PropertyConverters7.Element })
+__decorate7([
+  Watch7({ emit: false, converter: PropertyConverters7.Element })
 ], PacemButtonElement.prototype, "confirmationDialog", void 0);
-PacemButtonElement = __decorate8([
+PacemButtonElement = __decorate7([
   CustomElement7({
     tagName: P7 + "-button",
     modifiers: ["hoverable", "focusable", "clickable"]
@@ -2358,14 +2340,14 @@ PacemButtonElement = __decorate8([
 ], PacemButtonElement);
 
 // packages/ui/dist/esm/buttonset.js
-import { P as P8, CustomElement as CustomElement8, Components as Components9 } from "@pacem/pacem-core";
-var __decorate9 = function(decorators, target, key, desc) {
+import { P as P8, CustomElement as CustomElement8, Components as Components8 } from "@pacem/pacem-core";
+var __decorate8 = 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;
 };
-var PacemButtonsetElement = class PacemButtonsetElement2 extends Components9.PacemIterativeElement {
+var PacemButtonsetElement = class PacemButtonsetElement2 extends Components8.PacemIterativeElement {
   connectedCallback() {
     super.connectedCallback();
     if (!("tabindex" in this.attributes))
@@ -2390,15 +2372,15 @@ var PacemButtonsetElement = class PacemButtonsetElement2 extends Components9.Pac
     return item instanceof PacemButtonElement;
   }
 };
-PacemButtonsetElement = __decorate9([
+PacemButtonsetElement = __decorate8([
   CustomElement8({
     tagName: P8 + "-buttonset"
   })
 ], PacemButtonsetElement);
 
 // packages/ui/dist/esm/calendar.js
-import { P as P9, PCSS as PCSS7, CustomElement as CustomElement9, Watch as Watch9, ViewChild as ViewChild4, Utils as Utils9, PropertyConverters as PropertyConverters8, Components as Components10, CustomTypedEvent as CustomTypedEvent2, PropertyChangeEvent as PropertyChangeEvent3, Defaults as Defaults2, CustomElementUtils as CustomElementUtils4, Debounce as Debounce2, PropertyChangeEventName } from "@pacem/pacem-core";
-var __decorate10 = function(decorators, target, key, desc) {
+import { P as P9, PCSS as PCSS7, CustomElement as CustomElement9, Watch as Watch8, ViewChild as ViewChild4, Utils as Utils8, PropertyConverters as PropertyConverters8, Components as Components9, CustomTypedEvent, PropertyChangeEvent as PropertyChangeEvent3, Defaults as Defaults2, CustomElementUtils as CustomElementUtils4, Debounce as Debounce2, PropertyChangeEventName } from "@pacem/pacem-core";
+var __decorate9 = 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;
@@ -2410,17 +2392,17 @@ var CalendarZoom;
   CalendarZoom2["Week"] = "week";
   CalendarZoom2["Day"] = "day";
 })(CalendarZoom || (CalendarZoom = {}));
-var ViewDateChangeEvent = class extends CustomTypedEvent2 {
+var ViewDateChangeEvent = class extends CustomTypedEvent {
   constructor(date) {
     super("viewdatechange", date);
   }
 };
-var DateSelectEvent = class extends CustomTypedEvent2 {
+var DateSelectEvent = class extends CustomTypedEvent {
   constructor(date) {
     super("dateselect", date, { bubbles: true });
   }
 };
-var TimeSelectEvent = class extends CustomTypedEvent2 {
+var TimeSelectEvent = class extends CustomTypedEvent {
   constructor(date) {
     super("timeselect", date, { bubbles: true });
   }
@@ -2478,51 +2460,51 @@ var DAY_HOURS = [
   23.5
 ];
 var now = /* @__PURE__ */ new Date();
-var DUMMY_DATE = Utils9.Dates.dateOnly(now).valueOf();
+var DUMMY_DATE = Utils8.Dates.dateOnly(now).valueOf();
 var DAYS_OF_WEEK = ["sunday", "monday", "tuesday", "wednesday", "thursday", "friday", "saturday"];
-var PacemCalendarEventElement = class PacemCalendarEventElement2 extends Components10.PacemItemElement {
+var PacemCalendarEventElement = class PacemCalendarEventElement2 extends Components9.PacemItemElement {
   propertyChangedCallback(name, old, val, first) {
     super.propertyChangedCallback(name, old, val, first);
     cancelAnimationFrame(this._handle);
     this._handle = requestAnimationFrame(() => {
       let container = this.container;
-      if (!Utils9.isNull(container)) {
+      if (!Utils8.isNull(container)) {
         container.dispatchEvent(new PropertyChangeEvent3({ propertyName: "items", oldValue: container.items, currentValue: container.items }));
       }
     });
   }
 };
-__decorate10([
-  Watch9({ converter: PropertyConverters8.Datetime })
+__decorate9([
+  Watch8({ converter: PropertyConverters8.Datetime })
 ], PacemCalendarEventElement.prototype, "start", void 0);
-__decorate10([
-  Watch9({ converter: PropertyConverters8.Datetime })
+__decorate9([
+  Watch8({ converter: PropertyConverters8.Datetime })
 ], PacemCalendarEventElement.prototype, "end", void 0);
-__decorate10([
-  Watch9({ converter: PropertyConverters8.String })
+__decorate9([
+  Watch8({ converter: PropertyConverters8.String })
 ], PacemCalendarEventElement.prototype, "caption", void 0);
-__decorate10([
-  Watch9({ converter: PropertyConverters8.Json })
+__decorate9([
+  Watch8({ converter: PropertyConverters8.Json })
 ], PacemCalendarEventElement.prototype, "place", void 0);
-__decorate10([
-  Watch9({ converter: PropertyConverters8.Boolean })
+__decorate9([
+  Watch8({ converter: PropertyConverters8.Boolean })
 ], PacemCalendarEventElement.prototype, "allDay", void 0);
-PacemCalendarEventElement = __decorate10([
+PacemCalendarEventElement = __decorate9([
   CustomElement9({
     tagName: P9 + "-calendar-event"
   })
 ], PacemCalendarEventElement);
-var CalendarEventSelectEvent = class extends CustomTypedEvent2 {
+var CalendarEventSelectEvent = class extends CustomTypedEvent {
   constructor(args) {
     super("eventselect", args, { bubbles: false, cancelable: true });
   }
 };
-var CalendarEventUnselectEvent = class extends CustomTypedEvent2 {
+var CalendarEventUnselectEvent = class extends CustomTypedEvent {
   constructor(args) {
     super("eventunselect", args, { bubbles: false, cancelable: true });
   }
 };
-var PacemCalendarBaseElement = class extends Components10.PacemItemsContainerElement {
+var PacemCalendarBaseElement = class extends Components9.PacemItemsContainerElement {
   validate(item) {
     return item instanceof PacemCalendarEventElement;
   }
@@ -2534,13 +2516,13 @@ var PacemCalendarBaseElement = class extends Components10.PacemItemsContainerEle
     switch (name) {
       case "viewDate":
         this.dispatchEvent(new ViewDateChangeEvent(val));
-        Utils9.removeClass(this, "viewdate-next viewdate-previous");
+        Utils8.removeClass(this, "viewdate-next viewdate-previous");
         requestAnimationFrame(() => {
-          Utils9.addClass(this, old > val ? "viewdate-previous" : "viewdate-next");
+          Utils8.addClass(this, old > val ? "viewdate-previous" : "viewdate-next");
         });
         break;
       case "zoom":
-        Utils9.removeClass(this, "viewdate-next viewdate-previous");
+        Utils8.removeClass(this, "viewdate-next viewdate-previous");
         break;
     }
   }
@@ -2556,25 +2538,25 @@ var PacemCalendarBaseElement = class extends Components10.PacemItemsContainerEle
       /* fallback: month */
       { weekday: "short" }
     );
-    return Utils9.parseDate(d).toLocaleString(Utils9.lang(this), options);
+    return Utils8.parseDate(d).toLocaleString(Utils8.lang(this), options);
   }
   getDayLabel(d) {
     const options = d.getDate() == 1 ? { month: "short", day: "numeric" } : { day: "numeric" };
-    return Utils9.parseDate(d).toLocaleString(Utils9.lang(this), options);
+    return Utils8.parseDate(d).toLocaleString(Utils8.lang(this), options);
   }
   getHourLabel(d) {
     const options = {
       hour: "numeric"
       /*, minute: 'numeric'*/
     };
-    return Utils9.parseDate(d).toLocaleString(Utils9.lang(this), options);
+    return Utils8.parseDate(d).toLocaleString(Utils8.lang(this), options);
   }
   getTimeLabel(d) {
     const options = { hour: "numeric", minute: "numeric" };
-    return Utils9.parseDate(d).toLocaleString(Utils9.lang(this), options);
+    return Utils8.parseDate(d).toLocaleString(Utils8.lang(this), options);
   }
   isNow(d, now2) {
-    const d0 = Utils9.parseDate(d), v = Utils9.parseDate(now2 || /* @__PURE__ */ new Date());
+    const d0 = Utils8.parseDate(d), v = Utils8.parseDate(now2 || /* @__PURE__ */ new Date());
     return d0.getHours() === v.getHours() && this.isToday(d, now2);
   }
   isToday(d, now2) {
@@ -2584,26 +2566,26 @@ var PacemCalendarBaseElement = class extends Components10.PacemItemsContainerEle
     return this.isDate(d, vd || this.viewDate || /* @__PURE__ */ new Date());
   }
   isDate(expected, d) {
-    if (!Utils9.Dates.isDate(d) || !Utils9.Dates.isDate(expected)) {
+    if (!Utils8.Dates.isDate(d) || !Utils8.Dates.isDate(expected)) {
       return false;
     }
-    const d0 = Utils9.parseDate(expected), v = Utils9.parseDate(d);
+    const d0 = Utils8.parseDate(expected), v = Utils8.parseDate(d);
     return d0.getDate() === v.getDate() && d0.getMonth() == v.getMonth() && d0.getFullYear() === v.getFullYear();
   }
   isViewWeek(d) {
-    const d0 = Utils9.parseDate(d);
+    const d0 = Utils8.parseDate(d);
     return this.week && this.week.find((d1) => d1.getDate() == d0.getDate() && d1.getMonth() == d0.getMonth() && d1.getDate() == d0.getDate());
   }
   isViewMonth(d) {
-    const d0 = Utils9.parseDate(d), v = Utils9.parseDate(this.viewDate || /* @__PURE__ */ new Date());
+    const d0 = Utils8.parseDate(d), v = Utils8.parseDate(this.viewDate || /* @__PURE__ */ new Date());
     return d0.getMonth() == v.getMonth() && d0.getFullYear() === v.getFullYear();
   }
   isTimeSlotDisabled(ranges, d, h) {
-    if (!Utils9.isNullOrEmpty(ranges)) {
+    if (!Utils8.isNullOrEmpty(ranges)) {
       h = h || 0;
       const slotDate = new Date(d.getFullYear(), d.getMonth(), d.getDate(), Math.floor(h), 60 * (h % 1)), tz = slotDate.getTimezoneOffset(), slot = slotDate.valueOf() - tz * 60 * 1e3;
       for (let range of ranges) {
-        let from = Utils9.Dates.parse(range.from), to = Utils9.Dates.parse(range.to);
+        let from = Utils8.Dates.parse(range.from), to = Utils8.Dates.parse(range.to);
         if ((!from || from && from.valueOf() <= slot) && (!to || to && to.valueOf() > slot) && (to || from)) {
           return true;
         }
@@ -2625,10 +2607,10 @@ var PacemCalendarBaseElement = class extends Components10.PacemItemsContainerEle
     return v + (tget - dow) * MSECS_PER_DAY;
   }
   _getDatasource(d, w = this.weekStart) {
-    let day = Utils9.Dates.dateOnly(Utils9.parseDate(d));
+    let day = Utils8.Dates.dateOnly(Utils8.parseDate(d));
     const ds = this.month;
     let _d0 = ds && ds.length && ds[0] && ds[0].length && ds[0][0];
-    if (_d0 && _d0.getMonth() == day.getMonth() && _d0.getFullYear() == day.getFullYear() && ds.find((wk) => !Utils9.isNull(wk.find((dy) => dy.valueOf() == day.valueOf())))) {
+    if (_d0 && _d0.getMonth() == day.getMonth() && _d0.getFullYear() == day.getFullYear() && ds.find((wk) => !Utils8.isNull(wk.find((dy) => dy.valueOf() == day.valueOf())))) {
       return ds;
     }
     let d1 = new Date(day.getFullYear(), day.getMonth(), 1);
@@ -2636,7 +2618,7 @@ var PacemCalendarBaseElement = class extends Components10.PacemItemsContainerEle
     let month = [];
     let week = [];
     do {
-      let date = Utils9.Dates.dateOnly(new Date(date1));
+      let date = Utils8.Dates.dateOnly(new Date(date1));
       week.push(date);
       if (week.length == 7) {
         month.push(week.splice(0));
@@ -2647,7 +2629,7 @@ var PacemCalendarBaseElement = class extends Components10.PacemItemsContainerEle
     return this.month = month;
   }
   _synchronizeWeek() {
-    const viewDate = Utils9.parseDate(this.viewDate);
+    const viewDate = Utils8.parseDate(this.viewDate);
     const vd = new Date(viewDate.getFullYear(), viewDate.getMonth(), 1);
     const ds = this._getDatasource(vd, this.weekStart);
     const week = ds.filter((w, j) => w.some((d) => d.getDate() == viewDate.getDate() && d.getMonth() == viewDate.getMonth() && d.getFullYear() == viewDate.getFullYear()))[0];
@@ -2656,26 +2638,26 @@ var PacemCalendarBaseElement = class extends Components10.PacemItemsContainerEle
     }
   }
 };
-__decorate10([
-  Watch9({ converter: PropertyConverters8.Datetime })
+__decorate9([
+  Watch8({ converter: PropertyConverters8.Datetime })
 ], PacemCalendarBaseElement.prototype, "viewDate", void 0);
-__decorate10([
-  Watch9({ converter: PropertyConverters8.Datetime })
+__decorate9([
+  Watch8({ converter: PropertyConverters8.Datetime })
 ], PacemCalendarBaseElement.prototype, "now", void 0);
-__decorate10([
-  Watch9({ converter: PropertyConverters8.String })
+__decorate9([
+  Watch8({ converter: PropertyConverters8.String })
 ], PacemCalendarBaseElement.prototype, "zoom", void 0);
-__decorate10([
-  Watch9({ converter: PropertyConverters8.String })
+__decorate9([
+  Watch8({ converter: PropertyConverters8.String })
 ], PacemCalendarBaseElement.prototype, "weekStart", void 0);
-__decorate10([
-  Watch9({ converter: PropertyConverters8.Eval })
+__decorate9([
+  Watch8({ converter: PropertyConverters8.Eval })
 ], PacemCalendarBaseElement.prototype, "week", void 0);
-__decorate10([
-  Watch9({ converter: PropertyConverters8.Eval })
+__decorate9([
+  Watch8({ converter: PropertyConverters8.Eval })
 ], PacemCalendarBaseElement.prototype, "month", void 0);
-__decorate10([
-  Watch9({ converter: PropertyConverters8.Eval })
+__decorate9([
+  Watch8({ converter: PropertyConverters8.Eval })
 ], PacemCalendarBaseElement.prototype, "disabledRanges", void 0);
 var PacemCalendarWithEventsBaseElement = class extends PacemCalendarBaseElement {
   constructor() {
@@ -2720,12 +2702,12 @@ var PacemCalendarWithEventsBaseElement = class extends PacemCalendarBaseElement
 function getWeeklyEventDataItems(items, week) {
   let lbound = week.length - 1, wstart = week[0].valueOf(), wend = week[lbound].valueOf();
   return items.filter((evt) => {
-    let startDate = Utils9.Dates.dateOnly(evt.start);
-    let endDate = Utils9.Dates.dateOnly(evt.end);
+    let startDate = Utils8.Dates.dateOnly(evt.start);
+    let endDate = Utils8.Dates.dateOnly(evt.end);
     return startDate.valueOf() <= wend && endDate.valueOf() >= wstart;
   }).map((evt) => {
-    let startDate = Utils9.Dates.dateOnly(evt.start), start = week.find((d) => d.valueOf() == startDate.valueOf()), startIndex = week.indexOf(start);
-    let endDate = Utils9.Dates.dateOnly(evt.end), end = week.find((d) => d.valueOf() == endDate.valueOf()), endIndex = week.indexOf(end);
+    let startDate = Utils8.Dates.dateOnly(evt.start), start = week.find((d) => d.valueOf() == startDate.valueOf()), startIndex = week.indexOf(start);
+    let endDate = Utils8.Dates.dateOnly(evt.end), end = week.find((d) => d.valueOf() == endDate.valueOf()), endIndex = week.indexOf(end);
     let ndx0 = startIndex == -1 ? 0 : startIndex, ndx1 = endIndex == -1 ? lbound : endIndex;
     return {
       start: evt.start,
@@ -2769,10 +2751,10 @@ var PacemAgendaElement = class PacemAgendaElement2 extends PacemCalendarWithEven
   buildDataSource(items) {
     var week = this.week;
     if (this.zoom === CalendarZoom.Day) {
-      week = [Utils9.Dates.dateOnly(this.viewDate)];
+      week = [Utils8.Dates.dateOnly(this.viewDate)];
     }
     let ds = [];
-    if (!Utils9.isNull(week)) {
+    if (!Utils8.isNull(week)) {
       this.dispatchEvent(new PropertyChangeEvent3({
         propertyName: "allDayDatasource",
         oldValue: this._allDayDatasource,
@@ -2782,8 +2764,8 @@ var PacemAgendaElement = class PacemAgendaElement2 extends PacemCalendarWithEven
       }));
       for (let j = 0; j < week.length; j++) {
         let day = week[j], dayValue = day.valueOf(), dayItems = items.filter((evt) => {
-          let startDate = Utils9.Dates.dateOnly(evt.start);
-          let endDate = Utils9.Dates.dateOnly(evt.end);
+          let startDate = Utils8.Dates.dateOnly(evt.start);
+          let endDate = Utils8.Dates.dateOnly(evt.end);
           return startDate.valueOf() <= dayValue && endDate.valueOf() >= dayValue;
         }).map((evt) => {
           let evtStart = evt.start.valueOf(), evtEnd = evt.end.valueOf();
@@ -2823,7 +2805,7 @@ var PacemAgendaElement = class PacemAgendaElement2 extends PacemCalendarWithEven
     const clock = this._clock;
     if (name === "time") {
       this.dispatchEvent(new TimeSelectEvent(val));
-    } else if (!Utils9.isNull(clock)) {
+    } else if (!Utils8.isNull(clock)) {
       if (name === "now") {
         clock.now = val;
         clock.className = `hour-${val.getHours()} minute-${val.getMinutes()}`;
@@ -2836,13 +2818,13 @@ var PacemAgendaElement = class PacemAgendaElement2 extends PacemCalendarWithEven
     }
   }
 };
-__decorate10([
+__decorate9([
   ViewChild4(P9 + "-clock")
 ], PacemAgendaElement.prototype, "_clock", void 0);
-__decorate10([
-  Watch9({ converter: PropertyConverters8.Datetime })
+__decorate9([
+  Watch8({ converter: PropertyConverters8.Datetime })
 ], PacemAgendaElement.prototype, "time", void 0);
-PacemAgendaElement = __decorate10([
+PacemAgendaElement = __decorate9([
   CustomElement9({
     tagName: P9 + "-agenda",
     shadow: Defaults2.USE_SHADOW_ROOT,
@@ -2885,7 +2867,7 @@ var PacemCalendarElement = class PacemCalendarElement2 extends PacemCalendarWith
   buildDataSource(items) {
     const month = this.month;
     let ds = [];
-    if (!Utils9.isNull(month)) {
+    if (!Utils8.isNull(month)) {
       for (let j = 0; j < month.length; j++) {
         let week = month[j], weekItems = getWeeklyEventDataItems(items, week);
         ds.push(weekItems);
@@ -2918,16 +2900,16 @@ var PacemCalendarElement = class PacemCalendarElement2 extends PacemCalendarWith
     return super.getDayLabel(d);
   }
 };
-__decorate10([
-  Watch9({ converter: PropertyConverters8.Datetime })
+__decorate9([
+  Watch8({ converter: PropertyConverters8.Datetime })
 ], PacemCalendarElement.prototype, "date", void 0);
-__decorate10([
-  Watch9({ emit: false })
+__decorate9([
+  Watch8({ emit: false })
 ], PacemCalendarElement.prototype, "dayLabelFormatter", void 0);
-__decorate10([
-  Watch9()
+__decorate9([
+  Watch8()
 ], PacemCalendarElement.prototype, "_formatVersion", void 0);
-PacemCalendarElement = __decorate10([
+PacemCalendarElement = __decorate9([
   CustomElement9({
     tagName: P9 + "-calendar",
     shadow: Defaults2.USE_SHADOW_ROOT,
@@ -2947,12 +2929,12 @@ PacemCalendarElement = __decorate10([
 </${P9}-repeater><${P9}-content></${P9}-content>`
   })
 ], PacemCalendarElement);
-var PacemClockElement = class PacemClockElement2 extends Components10.PacemElement {
+var PacemClockElement = class PacemClockElement2 extends Components9.PacemElement {
 };
-__decorate10([
-  Watch9({ converter: PropertyConverters8.Datetime })
+__decorate9([
+  Watch8({ converter: PropertyConverters8.Datetime })
 ], PacemClockElement.prototype, "now", void 0);
-PacemClockElement = __decorate10([
+PacemClockElement = __decorate9([
   CustomElement9({ tagName: P9 + "-clock" })
 ], PacemClockElement);
 function buildCalendarHeader() {
@@ -2960,7 +2942,7 @@ function buildCalendarHeader() {
   for (let day = 0; day < 7; day++) {
     header += `<${P9}-span culture="{{ :host.culture }}" css-class="{{ {'viewday': :host.isViewDay(:host.week[${day}], :host.viewDate)} }}" class="schedule-heading day-${day + 1} text-ellipsed" text="{{ :host.getHeaderLabel(:host.week[${day}], :host.zoom) }}"></${P9}-span>`;
   }
-  const id = "dock_" + Utils9.uniqueCode();
+  const id = "dock_" + Utils8.uniqueCode();
   return `<div class="schedule-header schedule-grid"><div class="heading-left"></div>${header}</div>`;
 }
 var PacemScheduleElement = class PacemScheduleElement2 extends PacemCalendarBaseElement {
@@ -2978,13 +2960,13 @@ var PacemScheduleElement = class PacemScheduleElement2 extends PacemCalendarBase
     super.disconnectedCallback();
   }
 };
-__decorate10([
+__decorate9([
   ViewChild4(P9 + "-calendar")
 ], PacemScheduleElement.prototype, "_calendar", void 0);
-__decorate10([
+__decorate9([
   ViewChild4(P9 + "-agenda")
 ], PacemScheduleElement.prototype, "_agenda", void 0);
-PacemScheduleElement = __decorate10([
+PacemScheduleElement = __decorate9([
   CustomElement9({
     tagName: P9 + "-schedule",
     shadow: Defaults2.USE_SHADOW_ROOT,
@@ -3003,7 +2985,7 @@ var PacemCalendarRuleBaseElement = class extends HTMLElement {
     this._disabledRanges = [];
   }
   viewActivatedCallback() {
-    if (!Utils9.isNull(this._target = CustomElementUtils4.findAncestor(this, (node) => node instanceof PacemCalendarBaseElement))) {
+    if (!Utils8.isNull(this._target = CustomElementUtils4.findAncestor(this, (node) => node instanceof PacemCalendarBaseElement))) {
       this.refreshDisabledRanges();
     } else {
       throw `Missing ancestor calendar element for ${this.constructor.name}.`;
@@ -3017,7 +2999,7 @@ var PacemCalendarRuleBaseElement = class extends HTMLElement {
     return this._target;
   }
   refreshDisabledRanges() {
-    if (Utils9.isNullOrEmpty(this._target)) {
+    if (Utils8.isNullOrEmpty(this._target)) {
       return;
     }
     let actualRanges = this._target.disabledRanges || [];
@@ -3034,7 +3016,7 @@ var PacemCalendarRuleBaseElement = class extends HTMLElement {
     this._target.disabledRanges = actualRanges;
   }
 };
-__decorate10([
+__decorate9([
   Debounce2(true)
 ], PacemCalendarRuleBaseElement.prototype, "refreshDisabledRanges", null);
 var PacemCalendarDayOfWeekRuleElement = class PacemCalendarDayOfWeekRuleElement2 extends PacemCalendarRuleBaseElement {
@@ -3062,7 +3044,7 @@ var PacemCalendarDayOfWeekRuleElement = class PacemCalendarDayOfWeekRuleElement2
     for (let week of this.target.month) {
       for (let day of week) {
         if (this._daysOfWeek.indexOf(day.getDay()) == -1) {
-          let from = Utils9.Dates.dateOnly(day), to = Utils9.Dates.dateOnly(new Date(from.valueOf() + MSECS_PER_DAY + /* get rid of daylight saving switches */
+          let from = Utils8.Dates.dateOnly(day), to = Utils8.Dates.dateOnly(new Date(from.valueOf() + MSECS_PER_DAY + /* get rid of daylight saving switches */
           MSECS_PER_HOUR));
           retval.push({ from, to });
         }
@@ -3071,16 +3053,16 @@ var PacemCalendarDayOfWeekRuleElement = class PacemCalendarDayOfWeekRuleElement2
     return retval;
   }
 };
-__decorate10([
-  Watch9({ emit: false, converter: PropertyConverters8.StringArray })
+__decorate9([
+  Watch8({ emit: false, converter: PropertyConverters8.StringArray })
 ], PacemCalendarDayOfWeekRuleElement.prototype, "days", void 0);
-PacemCalendarDayOfWeekRuleElement = __decorate10([
+PacemCalendarDayOfWeekRuleElement = __decorate9([
   CustomElement9({ tagName: P9 + "-calendar-daysofweek-rule" })
 ], PacemCalendarDayOfWeekRuleElement);
 
 // packages/ui/dist/esm/collapse.js
-import { P as P10, PCSS as PCSS8, CustomElement as CustomElement10, Watch as Watch10, ViewChild as ViewChild5, Utils as Utils10, PropertyConverters as PropertyConverters9, PacemEventTarget, Components as Components11 } from "@pacem/pacem-core";
-var __decorate11 = function(decorators, target, key, desc) {
+import { P as P10, PCSS as PCSS8, CustomElement as CustomElement10, Watch as Watch9, ViewChild as ViewChild5, Utils as Utils9, PropertyConverters as PropertyConverters9, PacemEventTarget, Components as Components10 } from "@pacem/pacem-core";
+var __decorate10 = 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;
@@ -3102,7 +3084,7 @@ var PacemCollapseElement = class PacemCollapseElement2 extends PacemEventTarget
         case "collapse":
           this._toggle();
         case "disabled":
-          if (!Utils10.isNull(this._resizer)) {
+          if (!Utils9.isNull(this._resizer)) {
             this._resizer.disabled = this.disabled || this.collapse;
           }
           break;
@@ -3117,38 +3099,112 @@ var PacemCollapseElement = class PacemCollapseElement2 extends PacemEventTarget
   }
   _toggle() {
     const div = this, collapse = this.collapse, state = this.#state;
-    if (this.disabled || Utils10.isNull(div))
+    if (this.disabled || Utils9.isNull(div))
       return;
     if (this.horizontal) {
-      Utils10.addClass(div, PCSS8 + "-horizontal");
+      Utils9.addClass(div, PCSS8 + "-horizontal");
       div.style.height = state && state.height + "px" || "";
       div.style.width = collapse ? "0" : state && state.width + "px" || "";
     } else {
-      Utils10.removeClass(div, PCSS8 + "-horizontal");
+      Utils9.removeClass(div, PCSS8 + "-horizontal");
       div.style.height = collapse ? "0" : state && state.height + "px" || "";
     }
   }
 };
-__decorate11([
-  Watch10({ converter: PropertyConverters9.Boolean })
+__decorate10([
+  Watch9({ converter: PropertyConverters9.Boolean })
 ], PacemCollapseElement.prototype, "collapse", void 0);
-__decorate11([
-  Watch10({ emit: false, converter: PropertyConverters9.Boolean })
+__decorate10([
+  Watch9({ emit: false, converter: PropertyConverters9.Boolean })
 ], PacemCollapseElement.prototype, "horizontal", void 0);
-__decorate11([
+__decorate10([
   ViewChild5(P10 + "-resize")
 ], PacemCollapseElement.prototype, "_resizer", void 0);
-__decorate11([
+__decorate10([
   ViewChild5(`[part=content]`)
 ], PacemCollapseElement.prototype, "_container", void 0);
-PacemCollapseElement = __decorate11([
+PacemCollapseElement = __decorate10([
   CustomElement10({
     tagName: P10 + "-collapse",
     shadow: true,
-    template: `<${P10}-resize on-${Components11.ResizeEventName}=":host._resizeHandler($event)" target="{{ ::_container }}"></${P10}-resize><div part="container"><div part="content"><slot></slot></div></div>`
+    template: `<${P10}-resize on-${Components10.ResizeEventName}=":host._resizeHandler($event)" target="{{ ::_container }}"></${P10}-resize><div part="container"><div part="content"><slot></slot></div></div>`
   })
 ], PacemCollapseElement);
 
+// packages/ui/dist/esm/dialog-abstractions.js
+import { Watch as Watch10, Utils as Utils10, Components as Components11, CustomTypedEvent as CustomTypedEvent2, Logging, avoidHandler as avoidHandler3 } from "@pacem/pacem-core";
+var __decorate11 = 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;
+};
+var DialogButtons;
+(function(DialogButtons2) {
+  DialogButtons2["YesNo"] = "yesno";
+  DialogButtons2["YesNoCancel"] = "yesnocancel";
+  DialogButtons2["Ok"] = "ok";
+  DialogButtons2["OkCancel"] = "okcancel";
+})(DialogButtons || (DialogButtons = {}));
+var DialogButton;
+(function(DialogButton2) {
+  DialogButton2["Yes"] = "yes";
+  DialogButton2["No"] = "no";
+  DialogButton2["Cancel"] = "cancel";
+  DialogButton2["Ok"] = "ok";
+})(DialogButton || (DialogButton = {}));
+var DialogResultEventName = "commit";
+var DialogResultEvent = class extends CustomTypedEvent2 {
+  constructor(args) {
+    super(DialogResultEventName, args);
+  }
+};
+var PacemDialogBase = class extends Components11.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 (!Utils10.isNull(this.#deferred)) {
+      throw `Dialog already open.`;
+    }
+    const deferred = (this.#deferred = { promise: Promise.withResolvers(), rejectOnDeny }).promise;
+    if (this.hide || this.disabled) {
+      this.log(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) {
+    avoidHandler3(evt);
+    this.log(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);
+  }
+};
+__decorate11([
+  Watch10()
+], PacemDialogBase.prototype, "state", void 0);
+
 // packages/ui/dist/esm/dialog.js
 import { P as P11, PCSS as PCSS9, Defaults as Defaults3, CustomElement as CustomElement11, ViewChild as ViewChild6, Watch as Watch11, PropertyConverters as PropertyConverters10 } from "@pacem/pacem-core";
 var __decorate12 = function(decorators, target, key, desc) {
@@ -5233,7 +5289,7 @@ var PacemTickerElement = class PacemTickerElement2 extends Components29.PacemSaf
     }
     if (typeof content === "string") {
       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);
       this.replaceChildren(...this.#newContent = [safeContent]);