@pacem/pacem 1.0.0-bernoulli → 1.0.0-bessel

package/dist/bundle/pacem.mjs

@@ -1,5 +1,5 @@
 /*!
- * @pacem/pacem v1.0.0-bernoulli (https://js.pacem.it)
+ * @pacem/pacem v1.0.0-bessel (https://js.pacem.it)
  * Pacem (https://pacem.it)
  * Licensed under Apache-2.0
  */
@@ -5500,6 +5500,13 @@ var Utils4 = class _Utils {
   static set scrollLeft(x) {
     window.scrollTo(x, _Utils.scrollTop);
   }
+  static scrollTo(x, y = true, smooth = true) {
+    const yFirst = _Utils.isNull(y) || typeof y === "boolean";
+    const left = yFirst ? _Utils.scrollLeft : x;
+    const top = yFirst ? x : y;
+    const behavior = (yFirst ? y : smooth) ? "smooth" : "instant";
+    window.scrollTo({ behavior, left, top });
+  }
   static get scrollTop() {
     return window.scrollY || document.documentElement.scrollTop || document.body.scrollTop || 0;
   }
@@ -6597,6 +6604,18 @@ var PropertyChangeEvent = class extends CustomTypedEvent {
     super(PropertyChangeEventName, args);
   }
 };
+var RouterNavigatingEventName = "navigating";
+var RouterNavigateEventName = "navigate";
+var RouterNavigateEvent = class extends CustomTypedEvent {
+  constructor(path) {
+    super(RouterNavigateEventName, typeof path === "string" ? { path } : path, { cancelable: false, bubbles: false });
+  }
+};
+var RouterNavigatingEvent = class extends CustomTypedEvent {
+  constructor(path) {
+    super(RouterNavigatingEventName, path, { cancelable: true, bubbles: false });
+  }
+};
 
 // packages/core/src/adapter.ts
 var CurrentIndexChangeEvent = class extends CustomTypedEvent {
@@ -9876,6 +9895,7 @@ __export(index_components_exports, {
   PacemRotateElement: () => PacemRotateElement,
   PacemRouterElement: () => PacemRouterElement,
   PacemRouterHashStateElement: () => PacemRouterHashStateElement,
+  PacemRouterViewScrollElement: () => PacemRouterViewScrollElement,
   PacemSafeContentElement: () => PacemSafeContentElement,
   PacemScrollAwareElement: () => PacemScrollAwareElement,
   PacemSearchElement: () => PacemSearchElement,
@@ -9903,10 +9923,6 @@ __export(index_components_exports, {
   RepeaterItemRemoveEventName: () => RepeaterItemRemoveEventName,
   ResizeEvent: () => ResizeEvent,
   ResizeEventName: () => ResizeEventName,
-  RouterNavigateEvent: () => RouterNavigateEvent,
-  RouterNavigateEventName: () => RouterNavigateEventName,
-  RouterNavigatingEvent: () => RouterNavigatingEvent,
-  RouterNavigatingEventName: () => RouterNavigatingEventName,
   Scaffolding: () => index_components_scaffolding_exports,
   ScrollEvent: () => ScrollEvent,
   ScrollEventName: () => ScrollEventName,
@@ -12066,18 +12082,6 @@ PacemResizeElement = __decorateClass([
 ], PacemResizeElement);
 
 // packages/core/src/components/basic/router.ts
-var RouterNavigatingEventName = "navigating";
-var RouterNavigateEventName = "navigate";
-var RouterNavigateEvent = class extends CustomTypedEvent {
-  constructor(path) {
-    super(RouterNavigateEventName, typeof path === "string" ? { path } : path, { cancelable: false, bubbles: false });
-  }
-};
-var RouterNavigatingEvent = class extends CustomTypedEvent {
-  constructor(path) {
-    super(RouterNavigatingEventName, path, { cancelable: true, bubbles: false });
-  }
-};
 var CHECK_PATTERN = /^([\w\.]:)?\/\/[^\/]+/;
 var _cancelingNavigation, _template;
 var PacemRouterElement = class extends PacemEventTarget {
@@ -12085,9 +12089,18 @@ var PacemRouterElement = class extends PacemEventTarget {
     super(...arguments);
     __privateAdd(this, _cancelingNavigation);
     __privateAdd(this, _template);
+    this._onScroll = (e) => {
+      const scrollRestoration = this.scrollRestoration ?? true;
+      if (!scrollRestoration) {
+        return;
+      }
+      const y = Math.floor(Utils4.scrollTop);
+      window.history.replaceState(Utils4.extend({}, window.history.state, { $scrollY: y }), document.title);
+    };
     this._onPopState = (evt) => {
       if (!Utils4.isNull(evt.state) && !__privateGet(this, _cancelingNavigation)) {
-        this.path = evt.state.$path;
+        const state = evt.state;
+        this.path = state.$path;
       }
     };
   }
@@ -12128,12 +12141,13 @@ var PacemRouterElement = class extends PacemEventTarget {
         this.path = from;
         return;
       }
-      this.state = state;
+      const newState = !poppingState ? Utils4.extend({ $scrollY: 0 }, state) : Utils4.extend({ $scrollY: 0 }, window.history.state, state);
+      this.state = newState;
+      window.history.scrollRestoration = this.scrollRestoration ?? true ? "manual" : "auto";
       if (poppingState) {
-        window.history.scrollRestoration = "manual";
-        window.history.replaceState(state, title);
+        window.history.replaceState(newState, document.title);
       } else {
-        window.history.pushState(state, title, path);
+        window.history.pushState(newState, title, path);
       }
       if (!Utils4.isNullOrEmpty(title)) {
         document.title = title;
@@ -12158,6 +12172,7 @@ var PacemRouterElement = class extends PacemEventTarget {
   connectedCallback() {
     super.connectedCallback();
     window.addEventListener("popstate", this._onPopState, false);
+    document.addEventListener("scroll", this._onScroll, false);
   }
   viewActivatedCallback() {
     super.viewActivatedCallback();
@@ -12167,6 +12182,7 @@ var PacemRouterElement = class extends PacemEventTarget {
     }
   }
   disconnectedCallback() {
+    document.removeEventListener("scroll", this._onScroll, false);
     window.removeEventListener("popstate", this._onPopState, false);
     super.disconnectedCallback();
   }
@@ -12222,6 +12238,9 @@ __decorateClass([
 __decorateClass([
   Watch({ emit: false, converter: PropertyConverters.String })
 ], PacemRouterElement.prototype, "path", 2);
+__decorateClass([
+  Watch({ emit: false, reflectBack: true, converter: PropertyConverters.Boolean })
+], PacemRouterElement.prototype, "scrollRestoration", 2);
 PacemRouterElement = __decorateClass([
   CustomElement({ tagName: P + "-router" })
 ], PacemRouterElement);
@@ -20374,7 +20393,7 @@ PacemVibrateElement = __decorateClass([
 ], PacemVibrateElement);
 
 // packages/ui/src/view.ts
-import { P as P41, CustomElement as CustomElement40, Watch as Watch41, PacemEventTarget as PacemEventTarget11, Components as Components37, Utils as Utils48, PropertyConverters as PropertyConverters39, Logging as Logging7 } from "@pacem/pacem-core";
+import { P as P41, CustomElement as CustomElement40, Watch as Watch41, PacemEventTarget as PacemEventTarget11, Components as Components37, Utils as Utils48, PropertyConverters as PropertyConverters39, Logging as Logging7, CustomElementUtils as CustomElementUtils12 } from "@pacem/pacem-core";
 var ANIM_TIMEOUT = 500;
 var ElementOrStringPropertyConverter = {
   convert: (attr, element) => {
@@ -20387,7 +20406,7 @@ var ElementOrStringPropertyConverter = {
   convertBack: (prop) => prop instanceof Element && prop.id ? "#" + prop.id : prop,
   retryConversionWhenReady: true
 };
-var _aborter2;
+var _aborter2, _resizeHandle;
 var PacemViewElement = class extends PacemEventTarget11 {
   constructor() {
     super(...arguments);
@@ -20396,6 +20415,22 @@ var PacemViewElement = class extends PacemEventTarget11 {
       this._setTmpl(tmplProxy.target);
     };
     __privateAdd(this, _aborter2);
+    __privateAdd(this, _resizeHandle);
+    this._debounceDispatchHandler = (e) => {
+      clearTimeout(__privateGet(this, _resizeHandle));
+      __privateSet(this, _resizeHandle, setTimeout(
+        () => {
+          if (e) {
+            const resizer = e.srcElement;
+            resizer.removeEventListener(Components37.ResizeEventName, this._debounceDispatchHandler);
+            resizer.remove();
+          }
+          this.dispatchEvent(new CustomEvent("render"));
+        },
+        100
+        /* tenth of a second limit */
+      ));
+    };
   }
   propertyChangedCallback(name, old, val, first) {
     super.propertyChangedCallback(name, old, val, first);
@@ -20454,6 +20489,7 @@ var PacemViewElement = class extends PacemEventTarget11 {
   _setTmpl(tmpl) {
     cancelAnimationFrame(this._renderHandle);
     this.innerHTML = "";
+    this._dispatchPrerender();
     this._renderHandle = requestAnimationFrame(() => {
       if (Utils48.isNull(tmpl)) {
         this.log(Logging7.LogLevel.Error, `Template element not found.`);
@@ -20514,6 +20550,7 @@ var PacemViewElement = class extends PacemEventTarget11 {
     cancelAnimationFrame(this._renderHandle);
     this.scrollTo({ top: 0, left: 0, behavior: "instant" });
     this.innerHTML = "";
+    this._dispatchPrerender();
     this._renderHandle = requestAnimationFrame(() => {
       this.innerHTML = result;
       this.fetching = false;
@@ -20524,10 +20561,18 @@ var PacemViewElement = class extends PacemEventTarget11 {
     });
   }
   _dispatchRender() {
-    this.dispatchEvent(new CustomEvent("render"));
+    const resizer = new Components37.PacemResizeElement();
+    resizer.target = this;
+    resizer.addEventListener(Components37.ResizeEventName, this._debounceDispatchHandler);
+    CustomElementUtils12.findAncestorShell(this).appendChild(resizer);
+    this._debounceDispatchHandler();
+  }
+  _dispatchPrerender() {
+    this.dispatchEvent(new CustomEvent("prerender"));
   }
 };
 _aborter2 = new WeakMap();
+_resizeHandle = new WeakMap();
 __decorateClass([
   Watch41({ reflectBack: true, converter: ElementOrStringPropertyConverter })
 ], PacemViewElement.prototype, "url", 2);
@@ -20553,7 +20598,7 @@ PacemViewElement = __decorateClass([
 ], PacemViewElement);
 
 // packages/ui/src/window.ts
-import { P as P42, PCSS as PCSS28, CustomElement as CustomElement41, Watch as Watch42, Components as Components38, UI as UI5, Utils as Utils49, PropertyConverters as PropertyConverters40, Defaults as Defaults12, CustomElementUtils as CustomElementUtils12, PropertyChangeEventName as PropertyChangeEventName4 } from "@pacem/pacem-core";
+import { P as P42, PCSS as PCSS28, CustomElement as CustomElement41, Watch as Watch42, Components as Components38, UI as UI5, Utils as Utils49, PropertyConverters as PropertyConverters40, Defaults as Defaults12, CustomElementUtils as CustomElementUtils13, PropertyChangeEventName as PropertyChangeEventName4 } from "@pacem/pacem-core";
 var HANDLE_CSS = "window-title";
 var PacemWindowAreaElement = class extends Components38.PacemIterativeElement {
   constructor() {
@@ -20594,7 +20639,7 @@ var PacemWindowAreaElement = class extends Components38.PacemIterativeElement {
   }
   connectedCallback() {
     super.connectedCallback();
-    let shell = CustomElementUtils12.findAncestorShell(this);
+    let shell = CustomElementUtils13.findAncestorShell(this);
     this._behaviors = [
       shell.appendChild(this._dragDrop = document.createElement(P42 + "-drag-drop")),
       shell.appendChild(this._rescale = document.createElement(P42 + "-rescale"))
@@ -20829,10 +20874,10 @@ import { CustomTypedEvent as CustomTypedEvent7, CustomEventUtils as CustomEventU
 import { HistoryService as HistoryService3 } from "@pacem/pacem-foundation";
 
 // packages/scaffolding/src/types-components.ts
-import { P as P44, PCSS as PCSS30, CustomElementUtils as CustomElementUtils14, Utils as Utils51, Components as Components40, PropertyConverters as PropertyConverters42, CustomElement as CustomElement43, Watch as Watch44, stopPropagationHandler as stopPropagationHandler5, DefaultComparer as DefaultComparer2, PropertyChangeEventName as PropertyChangeEventName6, Debounce as Debounce8 } from "@pacem/pacem-core";
+import { P as P44, PCSS as PCSS30, CustomElementUtils as CustomElementUtils15, Utils as Utils51, Components as Components40, PropertyConverters as PropertyConverters42, CustomElement as CustomElement43, Watch as Watch44, stopPropagationHandler as stopPropagationHandler5, DefaultComparer as DefaultComparer2, PropertyChangeEventName as PropertyChangeEventName6, Debounce as Debounce8 } from "@pacem/pacem-core";
 
 // packages/scaffolding/src/form.ts
-import { P as P43, PCSS as PCSS29, CustomElement as CustomElement42, Watch as Watch43, Utils as Utils50, PropertyConverters as PropertyConverters41, CustomTypedEvent as CustomTypedEvent6, CommandEventName as CommandEventName2, Components as Components39, Net as Net5, Debounce as Debounce7, avoidHandler as avoidHandler7, PropertyChangeEvent as PropertyChangeEvent9, PropertyChangeEventName as PropertyChangeEventName5, DeferPromise as DeferPromise2, Logging as Logging8, CustomElementUtils as CustomElementUtils13 } from "@pacem/pacem-core";
+import { P as P43, PCSS as PCSS29, CustomElement as CustomElement42, Watch as Watch43, Utils as Utils50, PropertyConverters as PropertyConverters41, CustomTypedEvent as CustomTypedEvent6, CommandEventName as CommandEventName2, Components as Components39, Net as Net5, Debounce as Debounce7, avoidHandler as avoidHandler7, PropertyChangeEvent as PropertyChangeEvent9, PropertyChangeEventName as PropertyChangeEventName5, DeferPromise as DeferPromise2, Logging as Logging8, CustomElementUtils as CustomElementUtils14 } from "@pacem/pacem-core";
 var FormSubmitEventName = "submit";
 var FormResetEventName = "reset";
 var FormSubmitEvent = class extends CustomTypedEvent6 {
@@ -20868,7 +20913,7 @@ var FormEventEmitter = class {
 var PacemFormRelevantElement = class extends Components39.PacemElement {
   viewActivatedCallback() {
     super.viewActivatedCallback();
-    this.form = CustomElementUtils13.findAncestorOfType(this, PacemFormElement);
+    this.form = CustomElementUtils14.findAncestorOfType(this, PacemFormElement);
   }
 };
 __decorateClass([
@@ -21482,10 +21527,10 @@ var _PacemModelElement = class _PacemModelElement extends PacemFormRelevantEleme
     super.disconnectedCallback();
   }
   get originalValue() {
-    return CustomElementUtils14.getAttachedPropertyValue(this, ORIGINAL_VALUE_FIELD);
+    return CustomElementUtils15.getAttachedPropertyValue(this, ORIGINAL_VALUE_FIELD);
   }
   _setAsOriginalValue(v) {
-    CustomElementUtils14.setAttachedPropertyValue(this, ORIGINAL_VALUE_FIELD, v);
+    CustomElementUtils15.setAttachedPropertyValue(this, ORIGINAL_VALUE_FIELD, v);
   }
   reset() {
     this.value = this.originalValue;
@@ -21716,7 +21761,7 @@ var PacemItemElement2 = class extends Components40.PacemElement {
   #container;
   /** @overridable */
   findContainer() {
-    return CustomElementUtils14.findAncestor(this, (n) => n instanceof PacemItemsContainerBaseElement);
+    return CustomElementUtils15.findAncestor(this, (n) => n instanceof PacemItemsContainerBaseElement);
   }
   get container() {
     return this.#container;
@@ -23284,7 +23329,7 @@ PacemContenteditableWrapCommandElement = __decorateClass([
 ], PacemContenteditableWrapCommandElement);
 
 // packages/scaffolding/src/calendar-picker.ts
-import { Components as Components43, CustomElement as CustomElement53, CustomElementUtils as CustomElementUtils16, CustomEventUtils as CustomEventUtils4, Defaults as Defaults22, P as P55, PCSS as PCSS36, PropertyConverters as PropertyConverters51, stopPropagationHandler as stopPropagationHandler7, Utils as Utils63, ViewChild as ViewChild24, Watch as Watch54 } from "@pacem/pacem-core";
+import { Components as Components43, CustomElement as CustomElement53, CustomElementUtils as CustomElementUtils17, CustomEventUtils as CustomEventUtils4, Defaults as Defaults22, P as P55, PCSS as PCSS36, PropertyConverters as PropertyConverters51, stopPropagationHandler as stopPropagationHandler7, Utils as Utils63, ViewChild as ViewChild24, Watch as Watch54 } from "@pacem/pacem-core";
 import { Components as ComponentsUI } from "@pacem/pacem-ui";
 var JsonOrStringConverter = {
   convert: (attr, el) => {
@@ -23516,7 +23561,7 @@ var PacemCalendarPickerElement = class extends PacemBaseElement {
     monthPicker.behaviors.push(swiper);
     yearPicker.behaviors.push(swiper);
     swiper.addEventListener("swipe", this._swipeHandler, false);
-    const body = CustomElementUtils16.findAncestorShell(this);
+    const body = CustomElementUtils17.findAncestorShell(this);
     this._swiper = body.appendChild(swiper);
   }
   disconnectedCallback() {
@@ -24411,7 +24456,7 @@ PacemDatetimePickerElement = __decorateClass([
 ], PacemDatetimePickerElement);
 
 // packages/scaffolding/src/formfield.ts
-import { Logging as Logging10, PropertyConverters as PropertyConverters56, Net as Net8, Utils as Utils69, P as P61, PCSS as PCSS42, CustomElement as CustomElement59, Watch as Watch59, PropertyChangeEvent as PropertyChangeEvent14, PropertyChangeEventName as PropertyChangeEventName10, ViewChild as ViewChild30, CustomElementUtils as CustomElementUtils17, JsonFunctionConversion as JsonFunctionConversion2 } from "@pacem/pacem-core";
+import { Logging as Logging10, PropertyConverters as PropertyConverters56, Net as Net8, Utils as Utils69, P as P61, PCSS as PCSS42, CustomElement as CustomElement59, Watch as Watch59, PropertyChangeEvent as PropertyChangeEvent14, PropertyChangeEventName as PropertyChangeEventName10, ViewChild as ViewChild30, CustomElementUtils as CustomElementUtils18, JsonFunctionConversion as JsonFunctionConversion2 } from "@pacem/pacem-core";
 import { Components as ComponentsUI2 } from "@pacem/pacem-ui";
 
 // packages/scaffolding/src/validators.ts
@@ -24886,7 +24931,7 @@ var PacemFormFieldElement = class extends PacemFormRelevantElement {
         align: tooltip.align || ComponentsUI2.UI.BalloonAlignment.Auto
       };
       Utils69.addClass(balloon2, PCSS42 + "-field-tooltip");
-      var shell = CustomElementUtils17.findAncestorShell(this);
+      var shell = CustomElementUtils18.findAncestorShell(this);
       shell.appendChild(this._balloon = balloon2);
     }
     const balloon = this._balloon;
@@ -24976,7 +25021,7 @@ var PacemFormFieldElement = class extends PacemFormRelevantElement {
     if (evt.detail.propertyName === "value") {
       const value2 = evt.detail.currentValue, prop = this.metadata.prop;
       if (this.entity instanceof HTMLElement) {
-        let attr = CustomElementUtils17.camelToKebab(prop);
+        let attr = CustomElementUtils18.camelToKebab(prop);
         if (Utils69.isNullOrEmpty(value2)) {
           this.entity.removeAttribute(attr);
         } else {
@@ -25054,8 +25099,8 @@ var PacemFormFieldElement = class extends PacemFormRelevantElement {
         }
         if (!Utils69.isNullOrEmpty(depAttrs.disabledAttr)) {
           disabledAttr = depAttrs.disabledAttr;
-          if (CustomElementUtils17.isBindingAttribute(disabledAttr)) {
-            dependingDisabling = CustomElementUtils17.extractBindingAttributeExpression(disabledAttr);
+          if (CustomElementUtils18.isBindingAttribute(disabledAttr)) {
+            dependingDisabling = CustomElementUtils18.extractBindingAttributeExpression(disabledAttr);
           }
         }
         if (!Utils69.isNullOrEmpty(depAttrs.parameterAttrs)) {
@@ -25932,7 +25977,7 @@ PacemGeolocateElement = __decorateClass([
 ], PacemGeolocateElement);
 
 // packages/scaffolding/src/hierarchy.ts
-import { Components as Components49, PropertyConverters as PropertyConverters58, Utils as Utils71, P as P63, PCSS as PCSS43, CustomElement as CustomElement61, Watch as Watch61, Defaults as Defaults28, ViewChild as ViewChild32, CustomEventUtils as CustomEventUtils5, CustomElementUtils as CustomElementUtils18, avoidHandler as avoidHandler9, UI as UI10 } from "@pacem/pacem-core";
+import { Components as Components49, PropertyConverters as PropertyConverters58, Utils as Utils71, P as P63, PCSS as PCSS43, CustomElement as CustomElement61, Watch as Watch61, Defaults as Defaults28, ViewChild as ViewChild32, CustomEventUtils as CustomEventUtils5, CustomElementUtils as CustomElementUtils19, avoidHandler as avoidHandler9, UI as UI10 } from "@pacem/pacem-core";
 import { Components as ComponentsUI3 } from "@pacem/pacem-ui";
 var HierarchyChangeEvent = class extends CustomEvent {
   constructor(v) {
@@ -26047,7 +26092,7 @@ var PacemHierarchyElement = class extends PacemBaseElement {
   }
   viewActivatedCallback() {
     super.viewActivatedCallback();
-    __privateSet(this, _shell4, CustomElementUtils18.findAncestorShell(this));
+    __privateSet(this, _shell4, CustomElementUtils19.findAncestorShell(this));
     this._setupItemTemplate();
     this._setupDragger();
     this._setupBalloon();
@@ -26420,7 +26465,7 @@ PacemHierarchyElement = __decorateClass([
 ], PacemHierarchyElement);
 
 // packages/scaffolding/src/input.ts
-import { PropertyConverters as PropertyConverters59, Utils as Utils72, Watch as Watch62, CustomElementUtils as CustomElementUtils19 } from "@pacem/pacem-core";
+import { PropertyConverters as PropertyConverters59, Utils as Utils72, Watch as Watch62, CustomElementUtils as CustomElementUtils20 } from "@pacem/pacem-core";
 var ChangePolicy = /* @__PURE__ */ ((ChangePolicy2) => {
   ChangePolicy2["Input"] = "input";
   ChangePolicy2["Blur"] = "blur";
@@ -26502,10 +26547,10 @@ var PacemBaseInputElement = class extends PacemBaseElement {
       if (!(field instanceof HTMLInputElement) && !(field instanceof HTMLTextAreaElement)) {
         continue;
       }
-      if (CustomElementUtils19.getAttachedPropertyValue(field, INPUT_FIELD_ACTIVATED_PROP, "off") === "on") {
+      if (CustomElementUtils20.getAttachedPropertyValue(field, INPUT_FIELD_ACTIVATED_PROP, "off") === "on") {
         continue;
       }
-      CustomElementUtils19.setAttachedPropertyValue(field, INPUT_FIELD_ACTIVATED_PROP, "on");
+      CustomElementUtils20.setAttachedPropertyValue(field, INPUT_FIELD_ACTIVATED_PROP, "on");
       if ("size" in field) {
         field.size = 1;
       }
@@ -26520,10 +26565,10 @@ var PacemBaseInputElement = class extends PacemBaseElement {
       inputFields = [inputFields];
     }
     for (let field of inputFields ?? []) {
-      if (CustomElementUtils19.getAttachedPropertyValue(field, INPUT_FIELD_ACTIVATED_PROP) !== "on") {
+      if (CustomElementUtils20.getAttachedPropertyValue(field, INPUT_FIELD_ACTIVATED_PROP) !== "on") {
         continue;
       }
-      CustomElementUtils19.deleteAttachedPropertyValue(field, INPUT_FIELD_ACTIVATED_PROP);
+      CustomElementUtils20.deleteAttachedPropertyValue(field, INPUT_FIELD_ACTIVATED_PROP);
       field.removeEventListener("input", this.changeHandler, false);
       field.removeEventListener("focus", this._focusHandler, false);
     }
@@ -28757,7 +28802,7 @@ PacemNameValueListElement = __decorateClass([
 ], PacemNameValueListElement);
 
 // packages/scaffolding/src/property-picker.ts
-import { P as P79, ViewChild as ViewChild47, CustomElement as CustomElement77, Watch as Watch75, Utils as Utils82, PropertyConverters as PropertyConverters67, Defaults as Defaults44, CustomElementUtils as CustomElementUtils20 } from "@pacem/pacem-core";
+import { P as P79, ViewChild as ViewChild47, CustomElement as CustomElement77, Watch as Watch75, Utils as Utils82, PropertyConverters as PropertyConverters67, Defaults as Defaults44, CustomElementUtils as CustomElementUtils21 } from "@pacem/pacem-core";
 var PacemPropertyPickerElement = class extends PacemBaseElement {
   get inputFields() {
     return [this._select];
@@ -28804,7 +28849,7 @@ var PacemPropertyPickerElement = class extends PacemBaseElement {
     };
     let src = this.target;
     if (!Utils82.isNull(src)) {
-      let observed = CustomElementUtils20.getWatchedProperties(src);
+      let observed = CustomElementUtils21.getWatchedProperties(src);
       for (let obs of observed) {
         let name = obs.name;
         props.push(name);
@@ -29345,7 +29390,7 @@ PacemSliderElement = __decorateClass([
 ], PacemSliderElement);
 
 // packages/scaffolding/src/suggest.ts
-import { CustomTypedEvent as CustomTypedEvent10, CustomElement as CustomElement82, Watch as Watch79, ViewChild as ViewChild52, Defaults as Defaults49, PCSS as PCSS62, P as P84, Components as Components60, PropertyConverters as PropertyConverters71, Utils as Utils87, avoidHandler as avoidHandler15, Logging as Logging12, CustomElementUtils as CustomElementUtils21 } from "@pacem/pacem-core";
+import { CustomTypedEvent as CustomTypedEvent10, CustomElement as CustomElement82, Watch as Watch79, ViewChild as ViewChild52, Defaults as Defaults49, PCSS as PCSS62, P as P84, Components as Components60, PropertyConverters as PropertyConverters71, Utils as Utils87, avoidHandler as avoidHandler15, Logging as Logging12, CustomElementUtils as CustomElementUtils22 } from "@pacem/pacem-core";
 import { Components as ComponentsUI6 } from "@pacem/pacem-ui";
 var SuggestionSelectEvent = class extends CustomTypedEvent10 {
   constructor(value2) {
@@ -29523,7 +29568,7 @@ var PacemSuggestElement = class extends PacemDataSourceElement {
     var balloon = this._createBalloon();
     balloon.appendChild(this._repeater);
     this._checkBalloon(balloon);
-    const shell = CustomElementUtils21.findAncestorShell(this);
+    const shell = CustomElementUtils22.findAncestorShell(this);
     shell.appendChild(balloon);
     this._balloon = balloon;
     this._input.addEventListener("mousedown", this._focusHandler, false);
@@ -30138,7 +30183,7 @@ __export(index_components_charts_exports, {
 });
 
 // packages/charts/src/types.ts
-import { CustomElement as CustomElement86, Watch as Watch83, PropertyConverters as PropertyConverters75, P as P88, PCSS as PCSS66, Components as Components63, CustomUIEvent as CustomUIEvent6, CustomElementUtils as CustomElementUtils22, Utils as Utils89, Throttle as Throttle3, PropertyChangeEventName as PropertyChangeEventName13 } from "@pacem/pacem-core";
+import { CustomElement as CustomElement86, Watch as Watch83, PropertyConverters as PropertyConverters75, P as P88, PCSS as PCSS66, Components as Components63, CustomUIEvent as CustomUIEvent6, CustomElementUtils as CustomElementUtils23, Utils as Utils89, Throttle as Throttle3, PropertyChangeEventName as PropertyChangeEventName13 } from "@pacem/pacem-core";
 var MANAGED_EVENTS = ["keydown", "keyup", "click", "dblclick", "mouseover", "mouseout", "mouseenter", "mouseleave", "mousedown", "mouseup", "mousemove", "contextmenu"];
 var MSECS_PER_DAY2 = 1e3 * 60 * 60 * 24;
 var MAX_X_LABELS = 10;
@@ -30273,13 +30318,13 @@ var PacemSeriesChartElement = class extends Components63.PacemItemsContainerElem
     // #endregion
     this._broadcastHandler = (e) => {
       const element = e.currentTarget;
-      const dataItem = CustomElementUtils22.getAttachedPropertyValue(element, SERIES_DATAITEM);
+      const dataItem = CustomElementUtils23.getAttachedPropertyValue(element, SERIES_DATAITEM);
       if (Utils89.isNull(dataItem)) {
         return;
       }
       const chart = this, anchorPoint = chart.getAnchorPoint(element);
       const evt = new ChartEvent("item" + e.type, { detail: { dataItem, anchorPoint } }, e);
-      const series = CustomElementUtils22.getAttachedPropertyValue(element, SERIES_SERIES);
+      const series = CustomElementUtils23.getAttachedPropertyValue(element, SERIES_SERIES);
       if (series instanceof PacemChartSeriesElement) {
         series.dispatchEvent(evt);
       }
@@ -30366,7 +30411,7 @@ var PacemSeriesChartElement = class extends Components63.PacemItemsContainerElem
   }
   _ensureResizer(target = this.target || this._div) {
     if (Utils89.isNull(this._resizer)) {
-      const shell = CustomElementUtils22.findAncestorShell(this);
+      const shell = CustomElementUtils23.findAncestorShell(this);
       const resizer = this._resizer = shell.appendChild(new Components63.PacemResizeElement());
       resizer.addEventListener(Components63.ResizeEventName, this._resizeHandler, false);
     }
@@ -30395,10 +30440,10 @@ var PacemSeriesChartElement = class extends Components63.PacemItemsContainerElem
     return this._div;
   }
   assignUiBehaviors(ui, series, data, color) {
-    const alreadyRegistered = !Utils89.isNull(CustomElementUtils22.getAttachedPropertyValue(ui, SERIES_DATAITEM));
+    const alreadyRegistered = !Utils89.isNull(CustomElementUtils23.getAttachedPropertyValue(ui, SERIES_DATAITEM));
     const item = Utils89.extend({ series: series.label, color: color || series.color }, data);
-    CustomElementUtils22.setAttachedPropertyValue(ui, SERIES_DATAITEM, item);
-    CustomElementUtils22.setAttachedPropertyValue(ui, SERIES_SERIES, series);
+    CustomElementUtils23.setAttachedPropertyValue(ui, SERIES_DATAITEM, item);
+    CustomElementUtils23.setAttachedPropertyValue(ui, SERIES_SERIES, series);
     if (!alreadyRegistered) {
       MANAGED_EVENTS.forEach((type) => {
         ui.addEventListener(type, this._broadcastHandler);
@@ -30406,8 +30451,8 @@ var PacemSeriesChartElement = class extends Components63.PacemItemsContainerElem
     }
   }
   disposeUiBehaviors(ui) {
-    CustomElementUtils22.deleteAttachedPropertyValue(ui, SERIES_DATAITEM);
-    CustomElementUtils22.deleteAttachedPropertyValue(ui, SERIES_SERIES);
+    CustomElementUtils23.deleteAttachedPropertyValue(ui, SERIES_DATAITEM);
+    CustomElementUtils23.deleteAttachedPropertyValue(ui, SERIES_SERIES);
     MANAGED_EVENTS.forEach((type) => {
       ui.removeEventListener(type, this._broadcastHandler);
     });
@@ -30603,7 +30648,7 @@ __decorateClass([
 ], PacemSeriesChartElement.prototype, "draw", 1);
 
 // packages/charts/src/generic.ts
-import { CustomElement as CustomElement87, Watch as Watch84, PropertyConverters as PropertyConverters76, P as P89, PCSS as PCSS67, Utils as Utils90, CustomElementUtils as CustomElementUtils23, Logging as Logging13 } from "@pacem/pacem-core";
+import { CustomElement as CustomElement87, Watch as Watch84, PropertyConverters as PropertyConverters76, P as P89, PCSS as PCSS67, Utils as Utils90, CustomElementUtils as CustomElementUtils24, Logging as Logging13 } from "@pacem/pacem-core";
 function getSplineCtrlPoints(p, p0, p1) {
   let c0 = p, c1 = p;
   const p0Null = Utils90.isNull(p0), p1Null = Utils90.isNull(p1);
@@ -30624,9 +30669,9 @@ function getSplineCtrlPoints(p, p0, p1) {
   }
   return { c0, c1 };
 }
-var GET_VAL8 = CustomElementUtils23.getAttachedPropertyValue;
-var SET_VAL8 = CustomElementUtils23.setAttachedPropertyValue;
-var DEL_VAL6 = CustomElementUtils23.deleteAttachedPropertyValue;
+var GET_VAL8 = CustomElementUtils24.getAttachedPropertyValue;
+var SET_VAL8 = CustomElementUtils24.setAttachedPropertyValue;
+var DEL_VAL6 = CustomElementUtils24.deleteAttachedPropertyValue;
 var PADDING_PIXELS = 24;
 var SERIES_MAGNITUDE = "pacem:chart-series:area";
 var SVG_NS2 = "http://www.w3.org/2000/svg";
@@ -31268,7 +31313,7 @@ PacemColumnChartElement = __decorateClass([
 ], PacemColumnChartElement);
 
 // packages/charts/src/pie.ts
-import { CustomElement as CustomElement89, Watch as Watch86, PropertyConverters as PropertyConverters78, P as P91, PCSS as PCSS68, Components as Components64, Utils as Utils92, CustomElementUtils as CustomElementUtils24, Debounce as Debounce12 } from "@pacem/pacem-core";
+import { CustomElement as CustomElement89, Watch as Watch86, PropertyConverters as PropertyConverters78, P as P91, PCSS as PCSS68, Components as Components64, Utils as Utils92, CustomElementUtils as CustomElementUtils25, Debounce as Debounce12 } from "@pacem/pacem-core";
 var PacemPieSliceElement = class extends Components64.PacemItemElement {
   constructor() {
     super(...arguments);
@@ -31277,7 +31322,7 @@ var PacemPieSliceElement = class extends Components64.PacemItemElement {
     };
   }
   findContainer() {
-    return CustomElementUtils24.findAncestorOfType(this, PacemPieChartElement);
+    return CustomElementUtils25.findAncestorOfType(this, PacemPieChartElement);
   }
   get chart() {
     return this.container;
@@ -31587,7 +31632,7 @@ __export(index_components_maps_exports, {
 });
 
 // packages/maps/src/types-components.ts
-import { P as P92, PCSS as PCSS69, CustomElement as CustomElement90, Watch as Watch87, Utils as Utils93, PropertyConverters as PropertyConverters79, CustomTypedEvent as CustomTypedEvent12, PropertyChangeEvent as PropertyChangeEvent18, CustomElementUtils as CustomElementUtils25, Debounce as Debounce13, PropertyChangeEventName as PropertyChangeEventName14, PacemEventTarget as PacemEventTarget14 } from "@pacem/pacem-core";
+import { P as P92, PCSS as PCSS69, CustomElement as CustomElement90, Watch as Watch87, Utils as Utils93, PropertyConverters as PropertyConverters79, CustomTypedEvent as CustomTypedEvent12, PropertyChangeEvent as PropertyChangeEvent18, CustomElementUtils as CustomElementUtils26, Debounce as Debounce13, PropertyChangeEventName as PropertyChangeEventName14, PacemEventTarget as PacemEventTarget14 } from "@pacem/pacem-core";
 var MapType = /* @__PURE__ */ ((MapType2) => {
   MapType2["ROAD"] = "road";
   MapType2["SATELLITE"] = "satellite";
@@ -31673,7 +31718,7 @@ var MapUtils = class {
 };
 var MapRelevantElement = class extends PacemEventTarget14 {
   get map() {
-    return this["_map"] = this["_map"] || CustomElementUtils25.findAncestorOfType(this, PacemMapElement);
+    return this["_map"] = this["_map"] || CustomElementUtils26.findAncestorOfType(this, PacemMapElement);
   }
   propertyChangedCallback(name, old, val, first) {
     super.propertyChangedCallback(name, old, val, first);
@@ -32598,7 +32643,7 @@ var PacemMapElement = class extends PacemEventTarget14 {
     this._initialized = false;
     this._afterInit = (_, old) => {
       this._initialized = true;
-      for (var child of CustomElementUtils25.findDescendants(this, (n) => n instanceof MapRelevantElement)) {
+      for (var child of CustomElementUtils26.findDescendants(this, (n) => n instanceof MapRelevantElement)) {
         this._erase(child, old);
         this._draw(child);
       }
@@ -32920,7 +32965,7 @@ PacemMapGeolocateElement = __decorateClass([
 ], PacemMapGeolocateElement);
 
 // packages/maps/src/azure.ts
-import { Utils as Utils95, CustomElement as CustomElement92, Watch as Watch89, P as P94, PropertyConverters as PropertyConverters81, CustomElementUtils as CustomElementUtils26, Debounce as Debounce14 } from "@pacem/pacem-core";
+import { Utils as Utils95, CustomElement as CustomElement92, Watch as Watch89, P as P94, PropertyConverters as PropertyConverters81, CustomElementUtils as CustomElementUtils27, Debounce as Debounce14 } from "@pacem/pacem-core";
 var consts2 = {
   TIMEOUT: 1e3,
   API_JS: "https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.js",
@@ -33321,8 +33366,8 @@ var PacemAzureMapAdapterElement = class extends PacemMapAdapterElement {
   }
   async init(container) {
     await Promise.all([
-      CustomElementUtils26.importjs(consts2.API_JS),
-      CustomElementUtils26.importcss(consts2.API_CSS, void 0, true)
+      CustomElementUtils27.importjs(consts2.API_JS),
+      CustomElementUtils27.importcss(consts2.API_CSS, void 0, true)
     ]);
     const ctrl = container;
     const scale = ctrl.scale;
@@ -33443,7 +33488,7 @@ PacemAzureMapAdapterElement = __decorateClass([
 ], PacemAzureMapAdapterElement);
 
 // packages/maps/src/leaflet.ts
-import { Utils as Utils96, CustomElement as CustomElement93, Watch as Watch90, P as P95, PropertyConverters as PropertyConverters82, Debounce as Debounce15, CustomTypedEvent as CustomTypedEvent13, CustomElementUtils as CustomElementUtils27 } from "@pacem/pacem-core";
+import { Utils as Utils96, CustomElement as CustomElement93, Watch as Watch90, P as P95, PropertyConverters as PropertyConverters82, Debounce as Debounce15, CustomTypedEvent as CustomTypedEvent13, CustomElementUtils as CustomElementUtils28 } from "@pacem/pacem-core";
 var consts3 = {
   API_JS: "https://cdn.jsdelivr.net/npm/leaflet@1.9.4/dist/leaflet.min.js",
   //'https://unpkg.com/leaflet@1.5.1/dist/leaflet.js',
@@ -33745,8 +33790,8 @@ var PacemLeafletMapAdapterElement = class extends PacemMapAdapterElement {
   }
   async init(container) {
     await Promise.all([
-      CustomElementUtils27.importjs(consts3.API_JS, consts3.API_JS_INTEGRITY, true),
-      CustomElementUtils27.importcss(consts3.API_CSS, consts3.API_CSS_INTEGRITY, true)
+      CustomElementUtils28.importjs(consts3.API_JS, consts3.API_JS_INTEGRITY, true),
+      CustomElementUtils28.importcss(consts3.API_CSS, consts3.API_CSS_INTEGRITY, true)
     ]);
     const ctrl = container;
     var scale = ctrl.scale;
@@ -35281,7 +35326,7 @@ PacemFxListElement = __decorateClass([
 ], PacemFxListElement);
 
 // packages/fx/src/gradient.ts
-import { CustomElement as CustomElement99, Watch as Watch94, PropertyConverters as PropertyConverters86, P as P101, PCSS as PCSS73, Components as Components67, CustomElementUtils as CustomElementUtils28, Utils as Utils102, Debounce as Debounce17 } from "@pacem/pacem-core";
+import { CustomElement as CustomElement99, Watch as Watch94, PropertyConverters as PropertyConverters86, P as P101, PCSS as PCSS73, Components as Components67, CustomElementUtils as CustomElementUtils29, Utils as Utils102, Debounce as Debounce17 } from "@pacem/pacem-core";
 import { Size as Size3, Colors as Colors5 } from "@pacem/pacem-foundation";
 var GradientChangeEventName = "gradientchange";
 var GradientChangeEvent = class extends Event {
@@ -35303,7 +35348,7 @@ function pctFormatter(v) {
 }
 var PacemFxGradientStopElement = class extends Components67.PacemItemElement {
   findContainer() {
-    return CustomElementUtils28.findAncestor(this, (i) => i instanceof PacemFxGradientItemElement);
+    return CustomElementUtils29.findAncestor(this, (i) => i instanceof PacemFxGradientItemElement);
   }
   propertyChangedCallback(name, old, val, first) {
     super.propertyChangedCallback(name, old, val, first);
@@ -35658,7 +35703,7 @@ __export(index_components_networking_exports, {
 });
 
 // packages/networking/src/hub-proxy.ts
-import { P as P103, CustomElement as CustomElement101, Watch as Watch96, PropertyConverters as PropertyConverters88, Utils as Utils104, PropertyChangeEventName as PropertyChangeEventName15, CustomElementUtils as CustomElementUtils29, Components as Components68 } from "@pacem/pacem-core";
+import { P as P103, CustomElement as CustomElement101, Watch as Watch96, PropertyConverters as PropertyConverters88, Utils as Utils104, PropertyChangeEventName as PropertyChangeEventName15, CustomElementUtils as CustomElementUtils30, Components as Components68 } from "@pacem/pacem-core";
 var API_JS = "https://cdn.jsdelivr.net/npm/@microsoft/signalr@10.0.0/dist/browser/signalr.min.js";
 var consts5 = { API_JS };
 var _streamSubscription;
@@ -35842,7 +35887,7 @@ var PacemHubProxyElement = class extends Components68.PacemItemsContainerElement
     if ("signalR" in window) {
       return;
     }
-    await CustomElementUtils29.importjs(consts5.API_JS);
+    await CustomElementUtils30.importjs(consts5.API_JS);
   }
   async _setupProxy() {
     const listeners = this.items || [];
@@ -36331,7 +36376,7 @@ __export(index_components_drawing_exports, {
 });
 
 // packages/2d/src/drawable-element.ts
-import { Components as Components71, CustomElementUtils as CustomElementUtils30, PropertyConverters as PropertyConverters93, Watch as Watch101 } from "@pacem/pacem-core";
+import { Components as Components71, CustomElementUtils as CustomElementUtils31, PropertyConverters as PropertyConverters93, Watch as Watch101 } from "@pacem/pacem-core";
 
 // packages/2d/src/stage.ts
 import { CustomElement as CustomElement105, Watch as Watch100, ViewChild as ViewChild58, Debounce as Debounce19, PCSS as PCSS75, P as P107, Utils as Utils107, PropertyConverters as PropertyConverters92, PropertyChangeEvent as PropertyChangeEvent23, CustomEventUtils as CustomEventUtils9, avoidHandler as avoidHandler16, EventKeyModifier as EventKeyModifier2, Components as Components70 } from "@pacem/pacem-core";
@@ -36696,10 +36741,10 @@ var _DrawableElement = class _DrawableElement extends Components71.PacemCrossIte
     return this.parent || this.stage;
   }
   get stage() {
-    return this["_scene"] = this["_scene"] || CustomElementUtils30.findAncestorOfType(this, Pacem2DElement);
+    return this["_scene"] = this["_scene"] || CustomElementUtils31.findAncestorOfType(this, Pacem2DElement);
   }
   get parent() {
-    return this["_drawableParent"] = this["_drawableParent"] || CustomElementUtils30.findAncestor(this, (i) => i instanceof _DrawableElement);
+    return this["_drawableParent"] = this["_drawableParent"] || CustomElementUtils31.findAncestor(this, (i) => i instanceof _DrawableElement);
   }
   disconnectedCallback() {
     delete this["_scene"];
@@ -37555,7 +37600,7 @@ var AdapterUtils = class {
 };
 
 // packages/2d/src/adapters/canvasadapter.ts
-import { CustomElement as CustomElement115, P as P117, CustomElementUtils as CustomElementUtils31, Utils as Utils118, Logging as Logging15, CustomEventUtils as CustomEventUtils10, UI as UI13, avoidHandler as avoidHandler17 } from "@pacem/pacem-core";
+import { CustomElement as CustomElement115, P as P117, CustomElementUtils as CustomElementUtils32, Utils as Utils118, Logging as Logging15, CustomEventUtils as CustomEventUtils10, UI as UI13, avoidHandler as avoidHandler17 } from "@pacem/pacem-core";
 import { Matrix2D as Matrix2D11, Rect as Rect12 } from "@pacem/pacem-foundation";
 
 // packages/2d/src/adapter.ts
@@ -37580,8 +37625,8 @@ var Pacem2DAdapterElement = class extends PacemEventTarget20 {
 var CANVAS_SCENE_VAR = "pacem:2d-canvas-scene";
 var PARENT_MATRIX_VAR = "pacem:2d-parent-matrix";
 var WORLD_MATRIX_VAR = "pacem:2d-world-matrix";
-var SETVAR = CustomElementUtils31.setAttachedPropertyValue;
-var GETVAR = CustomElementUtils31.getAttachedPropertyValue;
+var SETVAR = CustomElementUtils32.setAttachedPropertyValue;
+var GETVAR = CustomElementUtils32.getAttachedPropertyValue;
 function isNone(fillOrStroke) {
   return fillOrStroke === "none" || Utils118.isNullOrEmpty(fillOrStroke);
 }
@@ -37728,7 +37773,7 @@ var PacemCanvasAdapterElement = class extends Pacem2DAdapterElement {
     const floater = document.createElement("div");
     floater.hidden = true;
     dragDrop.floater = floater;
-    const shell = CustomElementUtils31.findAncestorShell(this);
+    const shell = CustomElementUtils32.findAncestorShell(this);
     shell.appendChild(dragDrop);
     dragDrop.addEventListener(UI13.DragDropEventType.Init, this._dragInitHandler, false);
     dragDrop.addEventListener(UI13.DragDropEventType.Drag, this._draggingHandler, false);
@@ -38129,14 +38174,14 @@ PacemCanvasAdapterElement = __decorateClass([
 ], PacemCanvasAdapterElement);
 
 // packages/2d/src/adapters/svgadapter.ts
-import { CustomElement as CustomElement116, P as P118, CustomElementUtils as CustomElementUtils32, CustomEventUtils as CustomEventUtils11, Utils as Utils119, UI as UI14, avoidHandler as avoidHandler18 } from "@pacem/pacem-core";
+import { CustomElement as CustomElement116, P as P118, CustomElementUtils as CustomElementUtils33, CustomEventUtils as CustomEventUtils11, Utils as Utils119, UI as UI14, avoidHandler as avoidHandler18 } from "@pacem/pacem-core";
 import { Matrix2D as Matrix2D12 } from "@pacem/pacem-foundation";
 var SVG_NS5 = "http://www.w3.org/2000/svg";
 var DRAWABLE_VAR = "pacem:2-svg-drawable";
 var STAGE_VAR = "pacem:2d-svg-stage";
-var GETVAR2 = CustomElementUtils32.getAttachedPropertyValue;
-var SETVAR2 = CustomElementUtils32.setAttachedPropertyValue;
-var DELVAR = CustomElementUtils32.deleteAttachedPropertyValue;
+var GETVAR2 = CustomElementUtils33.getAttachedPropertyValue;
+var SETVAR2 = CustomElementUtils33.setAttachedPropertyValue;
+var DELVAR = CustomElementUtils33.deleteAttachedPropertyValue;
 function fallback2(v, f) {
   return Utils119.isNull(v) ? f : v;
 }
@@ -38289,7 +38334,7 @@ var PacemSvgAdapterElement = class extends Pacem2DAdapterElement {
     super.viewActivatedCallback();
     const dragDrop = __privateSet(this, _dragger2, document.createElement(P118 + "-drag-drop"));
     dragDrop.mode = UI14.DragDataMode.Self;
-    const shell = CustomElementUtils32.findAncestorShell(this);
+    const shell = CustomElementUtils33.findAncestorShell(this);
     shell.appendChild(dragDrop);
     dragDrop.addEventListener(UI14.DragDropEventType.Init, this._dragInitHandler, false);
     dragDrop.addEventListener(UI14.DragDropEventType.Drag, this._draggingHandler, false);
@@ -40492,7 +40537,7 @@ var AdapterUtils2 = class _AdapterUtils {
 };
 
 // packages/3d/src/adapters/threejsadapter.ts
-import { CustomElement as CustomElement130, P as P132, Watch as Watch125, PropertyConverters as PropertyConverters116, Utils as Utils126, CustomElementUtils as CustomElementUtils33 } from "@pacem/pacem-core";
+import { CustomElement as CustomElement130, P as P132, Watch as Watch125, PropertyConverters as PropertyConverters116, Utils as Utils126, CustomElementUtils as CustomElementUtils34 } from "@pacem/pacem-core";
 import { Colors as Colors6 } from "@pacem/pacem-foundation";
 import { Geometry as Geometry5 } from "@pacem/pacem-numerical";
 function flattenVectorArray(array) {
@@ -40899,10 +40944,10 @@ var Pacem3DThreeAdapterElement = class extends Pacem3DAdapterElement2 {
     wrapper.innerHTML = "";
     wrapper.appendChild(stage);
     if (!isTHREEAvailable()) {
-      await CustomElementUtils33.importjs(consts6.API_URI);
+      await CustomElementUtils34.importjs(consts6.API_URI);
       await whenTHREEAvailable();
       await Promise.all(
-        [CustomElementUtils33.importjs(consts6.ORBIT_URI)].concat(consts6.LOADERS.map((js) => CustomElementUtils33.importjs(js)))
+        [CustomElementUtils34.importjs(consts6.ORBIT_URI)].concat(consts6.LOADERS.map((js) => CustomElementUtils34.importjs(js)))
       );
     }
     this._scene = new THREE.Scene();
@@ -41117,7 +41162,7 @@ Pacem3DThreeAdapterElement = __decorateClass([
 
 // packages/3d/src/adapters/webgpu/webgpuadapter.ts
 import {
-  CustomElementUtils as CustomElementUtils34,
+  CustomElementUtils as CustomElementUtils35,
   CustomElement as CustomElement131,
   P as P134,
   Watch as Watch126,
@@ -44590,9 +44635,9 @@ var RendererClass = class {
 // packages/3d/src/adapters/webgpu/webgpuadapter.ts
 var WEBGPU_RAYCAST_CALLBACK_PROP = "WebGPURaycastCallback";
 var WEBGPU_RAYCAST_PIXEL_PROP = "WebGPURaycastPixel";
-var GETVAL = CustomElementUtils34.getAttachedPropertyValue;
-var SETVAL = CustomElementUtils34.setAttachedPropertyValue;
-var DELVAL = CustomElementUtils34.deleteAttachedPropertyValue;
+var GETVAL = CustomElementUtils35.getAttachedPropertyValue;
+var SETVAL = CustomElementUtils35.setAttachedPropertyValue;
+var DELVAL = CustomElementUtils35.deleteAttachedPropertyValue;
 var _version2, _observer3;
 var Pacem3DWgslScriptElement = class extends Components74.PacemItemElement {
   constructor() {
@@ -44603,7 +44648,7 @@ var Pacem3DWgslScriptElement = class extends Components74.PacemItemElement {
     }));
   }
   findContainer() {
-    return CustomElementUtils34.findAncestor(this, (n) => n instanceof Pacem3DWebgpuAdapterElement);
+    return CustomElementUtils35.findAncestor(this, (n) => n instanceof Pacem3DWebgpuAdapterElement);
   }
   get version() {
     return __privateGet(this, _version2);
@@ -45307,7 +45352,7 @@ import {
   Watch as Watch129,
   PropertyConverters as PropertyConverters120,
   Utils as Utils142,
-  CustomElementUtils as CustomElementUtils35,
+  CustomElementUtils as CustomElementUtils36,
   avoidHandler as avoidHandler20,
   Debounce as Debounce21,
   ViewChild as ViewChild60,
@@ -45484,7 +45529,7 @@ var PacemContextMenuElement = class extends Components75.PacemItemsContainerElem
     if (!Utils142.isNull(balloon)) {
       return balloon;
     }
-    const shell = CustomElementUtils35.findAncestorShell(this);
+    const shell = CustomElementUtils36.findAncestorShell(this);
     if (Utils142.isNull(shell)) {
       return null;
     }
@@ -46553,9 +46598,104 @@ PacemRouterHashStateElement = __decorateClass([
   CustomElement138({ tagName: P141 + "-router-hash-state" })
 ], PacemRouterHashStateElement);
 
+// packages/plus/src/router-view-scroll.ts
+import { CustomElement as CustomElement139, P as P142, Watch as Watch134, PropertyConverters as PropertyConverters125, Utils as Utils147, PacemEventTarget as PacemEventTarget23 } from "@pacem/pacem-core";
+var PacemRouterViewScrollElement = class extends PacemEventTarget23 {
+  constructor() {
+    super(...arguments);
+    /** The old content is already gone and the new content hasn't landed yet - jump to the top now, instantly, so the transition never shows a scrolled-down blank/stale view. */
+    this._prerenderHandler = (_) => {
+      Utils147.scrollTo(0, false);
+    };
+    /**
+     * New content has landed and its size has settled (see class remarks on `render`'s debounce). Restores the
+     * router's persisted scroll position for this entry, if any: `$scrollY` is `undefined` (or `0`) for a
+     * freshly-pushed page - never explicitly set on push, only captured when *leaving* a page - so this
+     * correctly leaves new pages at the top without any special-casing.
+     */
+    this._renderHandler = (_) => {
+      const state = this.router?.state;
+      if (state.$scrollY > 0) {
+        const smooth = this.scrollBehavior != "instant";
+        Utils147.scrollTo(state.$scrollY, smooth);
+      }
+    };
+  }
+  viewActivatedCallback() {
+    super.viewActivatedCallback();
+    this._setupRouter();
+    this._setupView();
+  }
+  propertyChangedCallback(name, old, val, first) {
+    super.propertyChangedCallback(name, old, val, first);
+    if (first) {
+      return;
+    }
+    switch (name) {
+      case "router":
+        if (!Utils147.isNull(old)) {
+          this._disposeRouter(old);
+        }
+        if (!Utils147.isNull(val)) {
+          this._setupRouter(val);
+        }
+        break;
+      case "view":
+        if (!Utils147.isNull(old)) {
+          this._disposeView(old);
+        }
+        if (!Utils147.isNull(val)) {
+          this._setupView(val);
+        }
+        break;
+    }
+  }
+  disconnectedCallback() {
+    this._disposeRouter();
+    this._disposeView();
+    super.disconnectedCallback();
+  }
+  /** Turns on the router's own scroll-position bookkeeping (capturing `state.$scrollY` per history entry); see `PacemRouterElement.scrollRestoration`. */
+  _setupRouter(router = this.router) {
+    if (Utils147.isNull(router)) {
+      return;
+    }
+    router.scrollRestoration = true;
+  }
+  /** No-op: `_setupRouter` only flips a flag on the router, there's no subscription to tear down. Kept for symmetry with `_disposeView`, and in case this grows one later. */
+  _disposeRouter(router = this.router) {
+  }
+  _setupView(view2 = this.view) {
+    if (Utils147.isNull(view2)) {
+      return;
+    }
+    view2.addEventListener("prerender", this._prerenderHandler, false);
+    view2.addEventListener("render", this._renderHandler, false);
+  }
+  _disposeView(view2 = this.view) {
+    if (Utils147.isNull(view2)) {
+      return;
+    }
+    view2.removeEventListener("prerender", this._prerenderHandler);
+    view2.removeEventListener("render", this._renderHandler);
+  }
+};
+__decorateClass([
+  Watch134({ converter: PropertyConverters125.Element, emit: false })
+], PacemRouterViewScrollElement.prototype, "router", 2);
+__decorateClass([
+  Watch134({ converter: PropertyConverters125.Element, emit: false })
+], PacemRouterViewScrollElement.prototype, "view", 2);
+__decorateClass([
+  Watch134({ converter: PropertyConverters125.String, emit: false })
+], PacemRouterViewScrollElement.prototype, "scrollBehavior", 2);
+PacemRouterViewScrollElement = __decorateClass([
+  CustomElement139({ tagName: P142 + "-router-view-scroll" })
+], PacemRouterViewScrollElement);
+
 // packages/plus/src/search.ts
-import { CustomElement as CustomElement139, Defaults as Defaults58, P as P142, Watch as Watch134, PropertyConverters as PropertyConverters125, ViewChild as ViewChild63, Components as Components80 } from "@pacem/pacem-core";
-var PacemSearchElement = class extends Components80.PacemElement {
+import { CustomElement as CustomElement140, Defaults as Defaults58, P as P143, Watch as Watch135, PropertyConverters as PropertyConverters126, ViewChild as ViewChild63, Components as Components81 } from "@pacem/pacem-core";
+var PacemSearchElement = class extends Components81.PacemElement {
   constructor() {
     super(...arguments);
     this.hintParameter = "q";
@@ -46570,37 +46710,37 @@ var PacemSearchElement = class extends Components80.PacemElement {
   }
 };
 __decorateClass([
-  ViewChild63(P142 + "-fetch")
+  ViewChild63(P143 + "-fetch")
 ], PacemSearchElement.prototype, "_fetcher", 2);
 __decorateClass([
-  Watch134()
+  Watch135()
 ], PacemSearchElement.prototype, "datasource", 2);
 __decorateClass([
-  Watch134({ converter: PropertyConverters125.String })
+  Watch135({ converter: PropertyConverters126.String })
 ], PacemSearchElement.prototype, "hint", 2);
 __decorateClass([
-  Watch134({ converter: PropertyConverters125.String })
+  Watch135({ converter: PropertyConverters126.String })
 ], PacemSearchElement.prototype, "url", 2);
 __decorateClass([
-  Watch134({ converter: PropertyConverters125.String })
+  Watch135({ converter: PropertyConverters126.String })
 ], PacemSearchElement.prototype, "method", 2);
 __decorateClass([
-  Watch134({ emit: false, converter: PropertyConverters125.String })
+  Watch135({ emit: false, converter: PropertyConverters126.String })
 ], PacemSearchElement.prototype, "hintParameter", 2);
 PacemSearchElement = __decorateClass([
-  CustomElement139({
-    tagName: P142 + "-search",
+  CustomElement140({
+    tagName: P143 + "-search",
     shadow: Defaults58.USE_SHADOW_ROOT,
-    template: `<${P142}-fetch debounce="800" url="{{ :host.url }}" method="{{ :host.method }}">
-</${P142}-fetch><${P142}-input-search value="{{ :host.hint, twoway }}"></${P142}-input-search>
-<${P142}-repeater datasource="{{ ::_fetch.result }}">
-    <${P142}-content></${P142}-content>
-</${P142}-repeater>`
+    template: `<${P143}-fetch debounce="800" url="{{ :host.url }}" method="{{ :host.method }}">
+</${P143}-fetch><${P143}-input-search value="{{ :host.hint, twoway }}"></${P143}-input-search>
+<${P143}-repeater datasource="{{ ::_fetch.result }}">
+    <${P143}-content></${P143}-content>
+</${P143}-repeater>`
   })
 ], PacemSearchElement);
 
 // packages/plus/src/datagrid/datacell.ts
-import { CustomElement as CustomElement140, P as P143, PCSS as PCSS81, Watch as Watch135, PropertyConverters as PropertyConverters126, Utils as Utils147, CustomElementUtils as CustomElementUtils36, ViewChild as ViewChild64 } from "@pacem/pacem-core";
+import { CustomElement as CustomElement141, P as P144, PCSS as PCSS81, Watch as Watch136, PropertyConverters as PropertyConverters127, Utils as Utils148, CustomElementUtils as CustomElementUtils37, ViewChild as ViewChild64 } from "@pacem/pacem-core";
 var DataRowSelectChangeEventName = "datarowselectchange";
 var DataRowSelectChangeEvent = class extends CustomEvent {
   constructor(detail) {
@@ -46615,7 +46755,7 @@ var PacemDataCellElement = class extends PacemBaseCellElement {
   }
   connectedCallback() {
     super.connectedCallback();
-    Utils147.addClass(this, PCSS81 + "-datacell");
+    Utils148.addClass(this, PCSS81 + "-datacell");
   }
   propertyChangedCallback(name, old, val, first) {
     super.propertyChangedCallback(name, old, val, first);
@@ -46633,7 +46773,7 @@ var PacemDataCellElement = class extends PacemBaseCellElement {
   }
   _updateTooltipJustInCase() {
     const tip = this.metadata.dataCell?.autoTooltip ?? true;
-    if (tip && !Utils147.isNullOrEmpty(this._contentTooltip)) {
+    if (tip && !Utils148.isNullOrEmpty(this._contentTooltip)) {
       this.setAttribute("tooltip", this._contentTooltip);
     } else {
       this.removeAttribute("tooltip");
@@ -46645,7 +46785,7 @@ var PacemDataCellElement = class extends PacemBaseCellElement {
     const nullValue = metadata.dataCell?.null ?? "";
     if (typeof format === "function") {
       const htmlOrNode = format(this, metadata, item, index);
-      if (Utils147.isNullOrEmpty(htmlOrNode)) {
+      if (Utils148.isNullOrEmpty(htmlOrNode)) {
         return nullValue;
       }
       if (typeof htmlOrNode === "string") {
@@ -46653,19 +46793,19 @@ var PacemDataCellElement = class extends PacemBaseCellElement {
       }
       return htmlOrNode;
     }
-    const tget = CustomElementUtils36.resolvePath(metadata.prop, item)?.target;
+    const tget = CustomElementUtils37.resolvePath(metadata.prop, item)?.target;
     const plainValue = tget?.value;
-    if (Utils147.isNullOrEmpty(plainValue)) {
+    if (Utils148.isNullOrEmpty(plainValue)) {
       return nullValue;
     }
-    const culture = Utils147.lang(this);
+    const culture = Utils148.lang(this);
     switch (metadata.dataType) {
       case "boolean":
-        return `<${P143}-icon icon="material ${!plainValue ? "radio_button_unchecked" : "check_circle_outline"} text-big-steady"></${P143}-icon>`;
+        return `<${P144}-icon icon="material ${!plainValue ? "radio_button_unchecked" : "check_circle_outline"} text-big-steady"></${P144}-icon>`;
       case "time":
       case "date":
       case "datetime":
-        return this._contentTooltip = Utils147.core.date(plainValue, format, culture);
+        return this._contentTooltip = Utils148.core.date(plainValue, format, culture);
       case "byte":
       case "int16":
       case "int32":
@@ -46679,20 +46819,20 @@ var PacemDataCellElement = class extends PacemBaseCellElement {
       case "float":
       case "single":
       case "number":
-        return this._contentTooltip = Utils147.core.number(plainValue, format || "", culture);
+        return this._contentTooltip = Utils148.core.number(plainValue, format || "", culture);
       case "currency":
         format ??= "EUR";
         if (typeof format === "string") {
-          return this._contentTooltip = Utils147.core.currency(plainValue, format, culture);
+          return this._contentTooltip = Utils148.core.currency(plainValue, format, culture);
         }
-        return this._contentTooltip = Utils147.core.number(plainValue, format, culture);
+        return this._contentTooltip = Utils148.core.number(plainValue, format, culture);
       case "percent":
       case "percentage":
         format ??= { style: "percent", maximumFractionDigits: 2 };
         if (typeof format === "string") {
-          return this._contentTooltip = Utils147.core.currency(plainValue, format, culture);
+          return this._contentTooltip = Utils148.core.currency(plainValue, format, culture);
         }
-        return this._contentTooltip = Utils147.core.number(plainValue, format, culture);
+        return this._contentTooltip = Utils148.core.number(plainValue, format, culture);
       case "url":
       case "emailaddress":
       case "phonenumber":
@@ -46703,7 +46843,7 @@ var PacemDataCellElement = class extends PacemBaseCellElement {
   }
   // @Debounce(true)
   _inflateCssClass(item = this.dataitem, index = this.rowindex, metadata = this.metadata, datasource) {
-    if (Utils147.isNull(item) || Utils147.isNullOrEmpty(metadata)) {
+    if (Utils148.isNull(item) || Utils148.isNullOrEmpty(metadata)) {
       return EMPTY_CSSCLASS;
     }
     const cssClass = metadata.dataCell && metadata.dataCell.cssClass || EMPTY_CSSCLASS;
@@ -46747,7 +46887,7 @@ var PacemDataCellElement = class extends PacemBaseCellElement {
     return retval;
   }
   _inflateCss(item = this.dataitem, index = this.rowindex, metadata = this.metadata) {
-    if (Utils147.isNull(item) || Utils147.isNullOrEmpty(metadata)) {
+    if (Utils148.isNull(item) || Utils148.isNullOrEmpty(metadata)) {
       return EMPTY_CSS;
     }
     const css = metadata.dataCell && metadata.dataCell.css || EMPTY_CSS;
@@ -46775,30 +46915,30 @@ var PacemDataCellElement = class extends PacemBaseCellElement {
   _updateSelection() {
     const selectedRows = this.gridState?.selectedRows ?? [];
     if (selectedRows.indexOf(this.rowindex) >= 0) {
-      Utils147.addClass(this, "datarow-selected datacell-filled datacell-primary");
+      Utils148.addClass(this, "datarow-selected datacell-filled datacell-primary");
     } else {
-      Utils147.removeClass(this, "datarow-selected datacell-filled datacell-primary");
+      Utils148.removeClass(this, "datarow-selected datacell-filled datacell-primary");
     }
   }
 };
 __decorateClass([
-  Watch135({ emit: false, converter: PropertyConverters126.Eval })
+  Watch136({ emit: false, converter: PropertyConverters127.Eval })
 ], PacemDataCellElement.prototype, "dataitem", 2);
 __decorateClass([
-  Watch135({ emit: false, converter: PropertyConverters126.Number })
+  Watch136({ emit: false, converter: PropertyConverters127.Number })
 ], PacemDataCellElement.prototype, "rowindex", 2);
 __decorateClass([
-  Watch135({ emit: false, converter: PropertyConverters126.String, debounce: 200 })
+  Watch136({ emit: false, converter: PropertyConverters127.String, debounce: 200 })
 ], PacemDataCellElement.prototype, "_contentTooltip", 2);
 __decorateClass([
-  ViewChild64(P143 + "-span")
+  ViewChild64(P144 + "-span")
 ], PacemDataCellElement.prototype, "_content", 2);
 PacemDataCellElement = __decorateClass([
-  CustomElement140({ tagName: P143 + "-datacell", shadow: false, template: `<${P143}-span content="{{ :host._inflateContent(^item, ^index, :host.metadata) }}"></${P143}-span>` })
+  CustomElement141({ tagName: P144 + "-datacell", shadow: false, template: `<${P144}-span content="{{ :host._inflateContent(^item, ^index, :host.metadata) }}"></${P144}-span>` })
 ], PacemDataCellElement);
 
 // packages/plus/src/datagrid/headcell.ts
-import { CustomElement as CustomElement141, P as P144, PCSS as PCSS82, Utils as Utils148, CustomElementUtils as CustomElementUtils37, Components as Components82, UI as CoreUI } from "@pacem/pacem-core";
+import { CustomElement as CustomElement142, P as P145, PCSS as PCSS82, Utils as Utils149, CustomElementUtils as CustomElementUtils38, Components as Components83, UI as CoreUI } from "@pacem/pacem-core";
 import { Components as UIPkgComponents } from "@pacem/pacem-ui";
 var UI20 = UIPkgComponents.UI;
 var DataColumnSortEventName = "datacolumnsort";
@@ -46830,14 +46970,14 @@ var PacemHeadCellElement = class extends PacemBaseCellElement {
       this.dispatchEvent(new DataColumnRescaleEvent({ width }));
     };
     this._rescaleStartHandler = (evt) => {
-      this._columnBBox = Utils148.offsetRect(this);
+      this._columnBBox = Utils149.offsetRect(this);
     };
     this._rescaleEndHandler = (evt) => {
     };
   }
   connectedCallback() {
     super.connectedCallback();
-    Utils148.addClass(this, PCSS82 + "-headcell");
+    Utils149.addClass(this, PCSS82 + "-headcell");
   }
   propertyChangedCallback(name, old, val, first) {
     super.propertyChangedCallback(name, old, val, first);
@@ -46861,50 +47001,50 @@ var PacemHeadCellElement = class extends PacemBaseCellElement {
     const btn = new UI20.PacemButtonElement();
     btn.className = `button-flat headcell-sort ${PCSS82}-inert`;
     this.addEventListener("click", this._sortButtonClickHandler, false);
-    Utils148.addClass(this, PCSS82 + "-clickable");
+    Utils149.addClass(this, PCSS82 + "-clickable");
     return btn;
   }
   _disposeSortButton(btn = this._sortButton) {
-    if (Utils148.isNull(btn)) {
+    if (Utils149.isNull(btn)) {
       return;
     }
-    Utils148.removeClass(this, PCSS82 + "-clickable");
+    Utils149.removeClass(this, PCSS82 + "-clickable");
     this.removeEventListener("click", this._sortButtonClickHandler, false);
     btn.remove();
     this._sortButton = null;
   }
   _updateSortButtonIconGlyph(btn = this._sortButton, state = this.gridState, metadata = this.metadata) {
-    if (Utils148.isNull(btn) || Utils148.isNullOrEmpty(metadata)) {
+    if (Utils149.isNull(btn) || Utils149.isNullOrEmpty(metadata)) {
       return;
     }
     btn.iconGlyph = state?.sort?.column === metadata.prop ? state.sort.dir === "desc" ? "arrow_drop_down" : "arrow_drop_up" : "";
   }
   _ensureRescaler() {
-    if (Utils148.isNull(this._rescaler)) {
-      const r = this._rescaler = this._rescaler || new Components82.PacemRescaleElement();
+    if (Utils149.isNull(this._rescaler)) {
+      const r = this._rescaler = this._rescaler || new Components83.PacemRescaleElement();
       r.handles = [CoreUI.RescaleHandle.Right];
       r.addEventListener(CoreUI.RescaleEventType.Rescale, this._rescaleHandler, false);
       r.addEventListener(CoreUI.RescaleEventType.Start, this._rescaleStartHandler, false);
       r.addEventListener(CoreUI.RescaleEventType.End, this._rescaleEndHandler, false);
-      CustomElementUtils37.findAncestorShell(this).appendChild(r);
+      CustomElementUtils38.findAncestorShell(this).appendChild(r);
     }
   }
   _setupRescaleContainer() {
     this._ensureRescaler();
-    const c = new Components82.PacemPanelElement();
+    const c = new Components83.PacemPanelElement();
     c.className = "headcell-rescale";
     c.behaviors = [this._rescaler];
     return c;
   }
   _disposeRescaleContainer(c = this._rescaleContainer) {
-    if (Utils148.isNull(c)) {
+    if (Utils149.isNull(c)) {
       return;
     }
     c.remove();
     this._rescaleContainer = null;
   }
   _disposeRescaler(r = this._rescaler) {
-    if (Utils148.isNull(r)) {
+    if (Utils149.isNull(r)) {
       return;
     }
     r.removeEventListener(CoreUI.RescaleEventType.Rescale, this._rescaleHandler, false);
@@ -46921,13 +47061,13 @@ var PacemHeadCellElement = class extends PacemBaseCellElement {
     const cssClass = truncate ? ["text-truncate"] : [];
     switch (metadata.headCell?.verticalAlign?.toLowerCase()) {
       case "top":
-        Utils148.addClass(this, "headcell-top");
+        Utils149.addClass(this, "headcell-top");
         break;
       case "bottom":
-        Utils148.addClass(this, "headcell-bottom");
+        Utils149.addClass(this, "headcell-bottom");
         break;
       case "middle":
-        Utils148.addClass(this, "headcell-middle");
+        Utils149.addClass(this, "headcell-middle");
         break;
     }
     switch (metadata.headCell?.horizontalAlign?.toLowerCase()) {
@@ -46943,7 +47083,7 @@ var PacemHeadCellElement = class extends PacemBaseCellElement {
         break;
     }
     this.removeAttribute("content");
-    const css = !Utils148.isNullOrEmpty(cssClass) ? ` class="${cssClass.join(" ")}"` : "";
+    const css = !Utils149.isNullOrEmpty(cssClass) ? ` class="${cssClass.join(" ")}"` : "";
     const headContent = metadata.headCell?.name ?? metadata.prop;
     this.innerHTML = `<div${css}>${headContent}</div>`;
     if (metadata.isSortable) {
@@ -46970,8 +47110,8 @@ var PacemHeadCellElement = class extends PacemBaseCellElement {
   }
   _ensureBalloon() {
     var innerText, tooltip;
-    const noBalloon = (tooltip = this._normalizeTooltip()).type === false || Utils148.isNullOrEmpty(innerText = this.metadata.headCell?.description);
-    if (Utils148.isNull(this._balloon) && !noBalloon) {
+    const noBalloon = (tooltip = this._normalizeTooltip()).type === false || Utils149.isNullOrEmpty(innerText = this.metadata.headCell?.description);
+    if (Utils149.isNull(this._balloon) && !noBalloon) {
       let balloon2 = new UI20.PacemBalloonElement();
       balloon2.options = {
         behavior: UI20.BalloonBehavior.Tooltip,
@@ -46981,12 +47121,12 @@ var PacemHeadCellElement = class extends PacemBaseCellElement {
         hoverTimeout: 50,
         align: tooltip.align || UI20.BalloonAlignment.Auto
       };
-      Utils148.addClass(balloon2, PCSS82 + "-headcell-tooltip");
-      var shell = CustomElementUtils37.findAncestorShell(this);
+      Utils149.addClass(balloon2, PCSS82 + "-headcell-tooltip");
+      var shell = CustomElementUtils38.findAncestorShell(this);
       shell.appendChild(this._balloon = balloon2);
     }
     const balloon = this._balloon;
-    if (!Utils148.isNull(balloon)) {
+    if (!Utils149.isNull(balloon)) {
       balloon.target = this;
       if (!(balloon.disabled = noBalloon)) {
         const content = innerText || "";
@@ -47006,7 +47146,7 @@ var PacemHeadCellElement = class extends PacemBaseCellElement {
     }
   }
   _disposeBalloon() {
-    if (!Utils148.isNull(this._balloon)) {
+    if (!Utils149.isNull(this._balloon)) {
       this._balloon.remove();
       this._balloon = null;
     }
@@ -47014,22 +47154,22 @@ var PacemHeadCellElement = class extends PacemBaseCellElement {
   //#endregion
 };
 PacemHeadCellElement = __decorateClass([
-  CustomElement141({ tagName: P144 + "-headcell" })
+  CustomElement142({ tagName: P145 + "-headcell" })
 ], PacemHeadCellElement);
 
 // packages/plus/src/datagrid/datagrid.ts
 import {
-  CustomElement as CustomElement142,
-  P as P145,
+  CustomElement as CustomElement143,
+  P as P146,
   PCSS as PCSS83,
-  Watch as Watch137,
-  PropertyConverters as PropertyConverters128,
-  Utils as Utils149,
+  Watch as Watch138,
+  PropertyConverters as PropertyConverters129,
+  Utils as Utils150,
   Debounce as Debounce22,
   ViewChild as ViewChild65,
   CommandEventName as CommandEventName4,
   CustomUIEvent as CustomUIEvent7,
-  Components as Components83,
+  Components as Components84,
   Logging as Logging19
 } from "@pacem/pacem-core";
 var DataColumnRebuildEventName = "datacolumnchange";
@@ -47053,7 +47193,7 @@ var DataCellUIEvent = class extends CustomUIEvent7 {
     super(type, detail, { bubbles: false, cancelable: true }, orig);
   }
 };
-var PacemDataColumnElement = class extends Components83.PacemItemElement {
+var PacemDataColumnElement = class extends Components84.PacemItemElement {
   propertyChangedCallback(name, old, val, first) {
     super.propertyChangedCallback(name, old, val, first);
     if (!first) {
@@ -47078,56 +47218,56 @@ var PacemDataColumnElement = class extends Components83.PacemItemElement {
   }
 };
 __decorateClass([
-  Watch137({ emit: false, converter: PropertyConverters128.String })
+  Watch138({ emit: false, converter: PropertyConverters129.String })
 ], PacemDataColumnElement.prototype, "field", 2);
 __decorateClass([
-  Watch137({ emit: false, converter: PropertyConverters128.String })
+  Watch138({ emit: false, converter: PropertyConverters129.String })
 ], PacemDataColumnElement.prototype, "label", 2);
 __decorateClass([
-  Watch137({ emit: false, converter: PropertyConverters128.Boolean })
+  Watch138({ emit: false, converter: PropertyConverters129.Boolean })
 ], PacemDataColumnElement.prototype, "resizable", 2);
 __decorateClass([
-  Watch137({ emit: false, converter: PropertyConverters128.Boolean })
+  Watch138({ emit: false, converter: PropertyConverters129.Boolean })
 ], PacemDataColumnElement.prototype, "togglable", 2);
 __decorateClass([
-  Watch137({ emit: false, converter: PropertyConverters128.Boolean })
+  Watch138({ emit: false, converter: PropertyConverters129.Boolean })
 ], PacemDataColumnElement.prototype, "sortable", 2);
 __decorateClass([
-  Watch137({ emit: false, converter: PropertyConverters128.Number })
+  Watch138({ emit: false, converter: PropertyConverters129.Number })
 ], PacemDataColumnElement.prototype, "order", 2);
 __decorateClass([
-  Watch137({
+  Watch138({
     emit: false,
-    converter: PropertyConverters128.Json
+    converter: PropertyConverters129.Json
     /*OrString (TODO)*/
   })
 ], PacemDataColumnElement.prototype, "format", 2);
 __decorateClass([
-  Watch137({ emit: false, converter: PropertyConverters128.Number })
+  Watch138({ emit: false, converter: PropertyConverters129.Number })
 ], PacemDataColumnElement.prototype, "headcellCss", 2);
 __decorateClass([
-  Watch137({ emit: false, converter: PropertyConverters128.Number })
+  Watch138({ emit: false, converter: PropertyConverters129.Number })
 ], PacemDataColumnElement.prototype, "headcellCssClass", 2);
 __decorateClass([
-  Watch137({ emit: false, converter: PropertyConverters128.Number })
+  Watch138({ emit: false, converter: PropertyConverters129.Number })
 ], PacemDataColumnElement.prototype, "datacellCss", 2);
 __decorateClass([
-  Watch137({ emit: false, converter: PropertyConverters128.Number })
+  Watch138({ emit: false, converter: PropertyConverters129.Number })
 ], PacemDataColumnElement.prototype, "datacellCssClass", 2);
 PacemDataColumnElement = __decorateClass([
-  CustomElement142({ tagName: P145 + "-datacolumn" })
+  CustomElement143({ tagName: P146 + "-datacolumn" })
 ], PacemDataColumnElement);
 function headColumnHtml(c) {
-  return `<${P145}-headcell metadata="{{ :host._getColumnMetadata('${c.prop}') }}" state="{{ :host._columnState.${c.prop} }}" grid-state="{{ :host._gridState }}"
+  return `<${P146}-headcell metadata="{{ :host._getColumnMetadata('${c.prop}') }}" state="{{ :host._columnState.${c.prop} }}" grid-state="{{ :host._gridState }}"
 on-${DataColumnSortEventName}=":host._broadcastSortCommand($event)"
-on-${DataColumnRescaleEventName}=":host._broadcastRescaleCommand($event)"></${P145}-headcell>`;
+on-${DataColumnRescaleEventName}=":host._broadcastRescaleCommand($event)"></${P146}-headcell>`;
 }
 function dataColumnHtml(c, extra) {
-  return `<${P145}-datacell metadata="{{ :host._getColumnMetadata('${c.prop}') }}" state="{{ :host._columnState.${c.prop} }}" grid-state="{{ :host._gridState }}"
-dataitem="{{ ^item }}" rowindex="{{ ^index }}" ${extra}></${P145}-datacell>`;
+  return `<${P146}-datacell metadata="{{ :host._getColumnMetadata('${c.prop}') }}" state="{{ :host._columnState.${c.prop} }}" grid-state="{{ :host._gridState }}"
+dataitem="{{ ^item }}" rowindex="{{ ^index }}" ${extra}></${P146}-datacell>`;
 }
-var PacemDataGridElement = class extends Components83.PacemItemsContainerElement {
-  constructor(_key3 = Utils149.uniqueCode()) {
+var PacemDataGridElement = class extends Components84.PacemItemsContainerElement {
+  constructor(_key3 = Utils150.uniqueCode()) {
     super();
     this._key = _key3;
     this.state = {};
@@ -47212,7 +47352,7 @@ var PacemDataGridElement = class extends Components83.PacemItemsContainerElement
     this.dispatchEvent(evt);
     if (!evt.defaultPrevented) {
       let retval = evt.detail.selectedRows;
-      if (!Utils149.isArray(retval)) {
+      if (!Utils150.isArray(retval)) {
         retval = [];
       }
       this._doSetRowSelection(retval.map((i) => i?.index ?? -1).filter((i) => i >= 0));
@@ -47229,8 +47369,8 @@ var PacemDataGridElement = class extends Components83.PacemItemsContainerElement
   _mergeState(state = this.state) {
     state ??= {};
     const normalizedState = { selectedRows: (state.selectedRows || []).map((i) => typeof i === "number" ? i : i.index) };
-    const newState = this._gridState = Utils149.extend({}, this._gridState, state, normalizedState);
-    this.state = Utils149.extend(this.state ?? {}, newState);
+    const newState = this._gridState = Utils150.extend({}, this._gridState, state, normalizedState);
+    this.state = Utils150.extend(this.state ?? {}, newState);
   }
   _adaptColumnMetadata(items = this.items, metadata = this.metadata) {
     const output = Array.prototype.concat.apply((items || []).map((i) => {
@@ -47264,20 +47404,20 @@ var PacemDataGridElement = class extends Components83.PacemItemsContainerElement
   }
   _buildUpGrid(metadata) {
     const container = this._tableContainer;
-    if (Utils149.isNull(container)) {
+    if (Utils150.isNull(container)) {
       return;
     }
-    if (Utils149.isNullOrEmpty(metadata)) {
+    if (Utils150.isNullOrEmpty(metadata)) {
       container.innerHTML = "";
       return;
     }
-    const options = this.options = Utils149.extend({}, DataGridConsts.Defaults, this.options || {}), hasCommands = options.allowDelete || options.allowEdit || options.allowSelect, multiSelect = options.allowMultiSelect && hasCommands;
-    let css = multiSelect ? "auto " : "", headcells = multiSelect ? `<div class="${PCSS83}-headcell"></div>` : "", datacells = multiSelect ? `<${P145}-panel class="${PCSS83}-datacell" style="grid-column: 1;" css="{{ {'grid-row': ^index+2} }}"></${P145}-panel>` : "", footcells = multiSelect ? `<div class="${PCSS83}-footcell"></div>` : "";
+    const options = this.options = Utils150.extend({}, DataGridConsts.Defaults, this.options || {}), hasCommands = options.allowDelete || options.allowEdit || options.allowSelect, multiSelect = options.allowMultiSelect && hasCommands;
+    let css = multiSelect ? "auto " : "", headcells = multiSelect ? `<div class="${PCSS83}-headcell"></div>` : "", datacells = multiSelect ? `<${P146}-panel class="${PCSS83}-datacell" style="grid-column: 1;" css="{{ {'grid-row': ^index+2} }}"></${P146}-panel>` : "", footcells = multiSelect ? `<div class="${PCSS83}-footcell"></div>` : "";
     let colIndex = multiSelect ? 2 : 1;
     const colCount = multiSelect ? metadata.length + 2 : hasCommands ? metadata.length + 1 : metadata.length;
     this._gridState.orderedColumns = metadata.sort((i, j) => (i.order ?? 0) - (j.order ?? 0)).map((i) => i.prop);
     let extraUi = "";
-    for (let evtType of Components83.PacemElement.emittedEventTypes) {
+    for (let evtType of Components84.PacemElement.emittedEventTypes) {
       extraUi += ` on-${evtType}=":host._broadcastUiEvent(^item, ^index, $event)"`;
     }
     for (let c of metadata) {
@@ -47289,19 +47429,19 @@ var PacemDataGridElement = class extends Components83.PacemItemsContainerElement
       datacells += dataColumnHtml(c, extraUi);
       colIndex++;
     }
-    datacells += `<${P145}-panel class="${PCSS83}-datarow" css-class="{{ {'datarow-alt': ^index % 2 === 1, 'datarow-first': ^index === 0, 'datarow-last': ^index === (:host.datasource.length - 1), 'datarow-selected': :host._gridState.selectedRows.indexOf(^index) >= 0 } }}" style="grid-column: 1 /span ${colCount};" css="{{ {'grid-row': ^index+2} }}"></${P145}-panel>`;
-    const html = `<${P145}-repeater datasource="{{ :host.datasource }}">
-<${P145}-panel class="${PCSS83}-datatable" css="{{ {'grid-template-columns': :host._getColumnSizes(:host._columnState, '${css.trimEnd()}', :host._gridState) } }}">
+    datacells += `<${P146}-panel class="${PCSS83}-datarow" css-class="{{ {'datarow-alt': ^index % 2 === 1, 'datarow-first': ^index === 0, 'datarow-last': ^index === (:host.datasource.length - 1), 'datarow-selected': :host._gridState.selectedRows.indexOf(^index) >= 0 } }}" style="grid-column: 1 /span ${colCount};" css="{{ {'grid-row': ^index+2} }}"></${P146}-panel>`;
+    const html = `<${P146}-repeater datasource="{{ :host.datasource }}">
+<${P146}-panel class="${PCSS83}-datatable" css="{{ {'grid-template-columns': :host._getColumnSizes(:host._columnState, '${css.trimEnd()}', :host._gridState) } }}">
     ${headcells}
     <template>
     ${datacells}
     </template>
     ${footcells}
-</${P145}-panel>`;
+</${P146}-panel>`;
     container.innerHTML = html;
   }
   _getColumnSizes(state = this._columnState, css, grid = this._gridState) {
-    if (Utils149.isNullOrEmpty(state)) {
+    if (Utils150.isNullOrEmpty(state)) {
       return css;
     }
     const split = css.split(" ");
@@ -47337,11 +47477,11 @@ var PacemDataGridElement = class extends Components83.PacemItemsContainerElement
   //#endregion
   //#region events
   _onCommand(evt) {
-    this.dispatchEvent(new Components83.ItemCommandEvent(
+    this.dispatchEvent(new Components84.ItemCommandEvent(
       /* 'originalEvent' */
       evt
     ));
-    this.dispatchEvent(new Components83.CustomItemCommandEvent(
+    this.dispatchEvent(new Components84.CustomItemCommandEvent(
       /* 'originalEvent' */
       evt
     ));
@@ -47374,7 +47514,7 @@ var PacemDataGridElement = class extends Components83.PacemItemsContainerElement
       if (typeof event.detail.dir === "string") {
         sort2.dir = event.detail.dir === "desc" ? "desc" : "asc";
       }
-      this._gridState = Utils149.extend(
+      this._gridState = Utils150.extend(
         {},
         this._gridState,
         /* let it be manipulated on the "other side" */
@@ -47394,7 +47534,7 @@ var PacemDataGridElement = class extends Components83.PacemItemsContainerElement
       const column = evt.srcElement.metadata;
       const newState = {};
       newState[column.prop] = { pixelWidth: width2 };
-      this._columnState = Utils149.extend({}, this._columnState, newState);
+      this._columnState = Utils150.extend({}, this._columnState, newState);
     }
   }
   _broadcastSelectCommand(toggledRowIndex) {
@@ -47412,7 +47552,7 @@ var PacemDataGridElement = class extends Components83.PacemItemsContainerElement
       } else {
         trigger = false;
         const msg = `Cannot select the row at index ${toggledRowIndex} since datagrid options do not allow any row selection.`;
-        if (Utils149.isNull(this.logger)) {
+        if (Utils150.isNull(this.logger)) {
           console.warn(msg);
         } else {
           this.log(Logging19.LogLevel.Warn, msg);
@@ -47426,34 +47566,34 @@ var PacemDataGridElement = class extends Components83.PacemItemsContainerElement
   //#endregion
 };
 __decorateClass([
-  Watch137({ emit: false, converter: PropertyConverters128.Json })
+  Watch138({ emit: false, converter: PropertyConverters129.Json })
 ], PacemDataGridElement.prototype, "metadata", 2);
 __decorateClass([
-  Watch137({ emit: false, converter: PropertyConverters128.Json })
+  Watch138({ emit: false, converter: PropertyConverters129.Json })
 ], PacemDataGridElement.prototype, "options", 2);
 __decorateClass([
-  Watch137({ emit: false, converter: PropertyConverters128.Json })
+  Watch138({ emit: false, converter: PropertyConverters129.Json })
 ], PacemDataGridElement.prototype, "state", 2);
 __decorateClass([
-  Watch137({ emit: true, converter: PropertyConverters128.Json })
+  Watch138({ emit: true, converter: PropertyConverters129.Json })
 ], PacemDataGridElement.prototype, "datasource", 2);
 __decorateClass([
   ViewChild65("." + PCSS83 + "-datagrid")
 ], PacemDataGridElement.prototype, "_tableContainer", 2);
 __decorateClass([
-  Watch137()
+  Watch138()
 ], PacemDataGridElement.prototype, "_adaptedColumnMetadata", 2);
 __decorateClass([
-  Watch137()
+  Watch138()
 ], PacemDataGridElement.prototype, "_columnState", 2);
 __decorateClass([
-  Watch137()
+  Watch138()
 ], PacemDataGridElement.prototype, "_gridState", 2);
 __decorateClass([
   Debounce22()
 ], PacemDataGridElement.prototype, "_adaptColumnMetadata", 1);
 PacemDataGridElement = __decorateClass([
-  CustomElement142({ tagName: P145 + "-datagrid", shadow: false, template: `<div class="${PCSS83}-datagrid"></div><${P145}-content></${P145}-content>` })
+  CustomElement143({ tagName: P146 + "-datagrid", shadow: false, template: `<div class="${PCSS83}-datagrid"></div><${P146}-content></${P146}-content>` })
 ], PacemDataGridElement);
 export {
   Angle,
@@ -47511,6 +47651,10 @@ export {
   Regex,
   Repeater,
   RepeaterItem2 as RepeaterItem,
+  RouterNavigateEvent,
+  RouterNavigateEventName,
+  RouterNavigatingEvent,
+  RouterNavigatingEventName,
   index_scaffolding_exports as Scaffolding,
   Size,
   Storage,