@breadstone/mosaik-elements-svelte 0.1.46 → 0.1.48

package/index.mjs

@@ -21813,10 +21813,10 @@ function Ede() {
   --menu-font-weight: var(--joy-typography-body1-font-weight);
   --menu-foreground-color: var(--joy-scheme-foreground);
   --menu-gap: unset;
-  --menu-padding-bottom: var(--joy-layout-spacing);
-  --menu-padding-left: calc(var(--joy-layout-spacing) * 2);
-  --menu-padding-right: calc(var(--joy-layout-spacing) * 2);
-  --menu-padding-top: var(--joy-layout-spacing);
+  --menu-padding-bottom: var(--joy-layout-space);
+  --menu-padding-left: calc(var(--joy-layout-space) * 2);
+  --menu-padding-right: calc(var(--joy-layout-space) * 2);
+  --menu-padding-top: var(--joy-layout-space);
   --menu-shadow: unset unset unset unset unset;
   --menu-shadow-blur: unset;
   --menu-shadow-color: unset;
@@ -107188,26 +107188,32 @@ var DU = class extends iL {
 //#region ../mosaik-elements-foundation/dist/Controls/Components/Selectors/List/ListElementTemplate.js
 function OU(e) {
 	return V`
-        ${U(e.showFilter, () => V`
-        <div part="filter">
-            <slot name="filter"></slot>
-            <mosaik-spacer .thickness="${"all"}"
-                           .size="${"tiny"}">
-                <mosaik-textbox .value="${e.filter}"
-                                .placeholder="${e.filterPlaceholder.trim() || e.intl.filterPlaceholder}"
-                                ?disabled="${e.disabled}"
-                                @input="${(t) => e.filter = t.target.value}"></mosaik-textbox>
-            </mosaik-spacer>
+        <div part="header"
+             ?hidden="${!AM(e, "has-header", e.hasSlotContent("header"))}">
+            <slot name="header"></slot>
         </div>
-        `)}
-        <slot name="header"></slot>
         <div part="items">
+            ${U(e.showFilter, () => V`
+            <div part="filter">
+                <slot name="filter"></slot>
+                <mosaik-spacer .thickness="${"all"}"
+                            .size="${"tiny"}">
+                    <mosaik-textbox .value="${e.filter}"
+                                    .placeholder="${e.filterPlaceholder.trim() || e.intl.filterPlaceholder}"
+                                    ?disabled="${e.disabled}"
+                                    @input="${(t) => e.filter = t.target.value}"></mosaik-textbox>
+                </mosaik-spacer>
+            </div>
+            `)}
             <slot></slot>
         </div>
          <div part="empty">
             <slot name="empty"></slot>
         </div>
-        <slot name="footer"></slot>
+        <div part="footer"
+             ?hidden="${!AM(e, "has-footer", e.hasSlotContent("footer"))}">
+            <slot name="footer"></slot>
+        </div>
     `;
 }
 //#endregion
@@ -108468,6 +108474,7 @@ function tW() {
   --list-font-weight: unset;
   --list-foreground-color: unset;
   --list-gap: unset;
+  --list-line-thickness: unset;
   --list-padding-bottom: unset;
   --list-padding-left: unset;
   --list-padding-right: unset;
@@ -108529,38 +108536,78 @@ function tW() {
   transition-timing-function: var(--list-transition-mode);
   transition-property: var(--list-transition-property);
   box-shadow: var(--list-shadow);
+  outline: none;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  overflow: hidden;
+}
+
+:host [part="header"], :host [part="footer"] {
   padding-top: var(--list-padding-top);
   padding-left: var(--list-padding-left);
   padding-bottom: var(--list-padding-bottom);
   padding-right: var(--list-padding-right);
-  gap: var(--list-gap);
-  overflow: overlay;
-  outline: none;
-  width: 100%;
-  height: 100%;
+  flex: none;
+  position: relative;
 }
 
-:host [part="filter"] {
-  z-index: 2;
-  position: sticky;
-  top: 8px;
+:host [part="header"][hidden], :host [part="footer"][hidden] {
+  display: none;
+}
+
+:host [part="header"] {
+  background-color: var(--list-background-color);
+}
+
+:host [part="header"]:after {
+  content: "";
+  height: var(--list-line-thickness);
+  background-color: var(--list-border-color);
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+
+:host [part="footer"] {
+  background-color: var(--list-background-color);
+}
+
+:host [part="footer"]:before {
+  content: "";
+  height: var(--list-line-thickness);
+  background-color: var(--list-border-color);
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+}
+
+:host [part="footer"] ::slotted(mosaik-paginator) {
+  flex-direction: row-reverse;
+  align-items: center;
+  display: flex;
 }
 
 :host [part="items"] {
   gap: var(--list-gap);
+  min-height: 0;
+  overflow-y: overlay;
   flex-direction: column;
+  flex: auto;
   display: flex;
 }
 
-:host([orientation="horizontal"]) [part="items"] {
-  flex-flow: wrap;
+:host [part="items"] [part="filter"] {
+  z-index: 2;
+  position: sticky;
+  top: 8px;
 }
 
-:host([inset*="none"]), :host([empty]) {
-  --list-padding-top: 0px;
-  --list-padding-left: 0px;
-  --list-padding-bottom: 0px;
-  --list-padding-right: 0px;
+:host([orientation="horizontal"]) [part="items"] {
+  flex-flow: wrap;
 }
 
 :host([mosaik-dropdown-button-projection]), :host([mosaik-split-button-projection]) {
@@ -108596,10 +108643,11 @@ function nW() {
   --list-font-weight: var(--joy-typography-body1-font-weight);
   --list-foreground-color: var(--joy-scheme-foreground);
   --list-gap: var(--joy-layout-space);
-  --list-padding-bottom: var(--joy-layout-spacing);
-  --list-padding-left: calc(var(--joy-layout-spacing) * 2);
-  --list-padding-right: calc(var(--joy-layout-spacing) * 2);
-  --list-padding-top: var(--joy-layout-spacing);
+  --list-line-thickness: var(--joy-layout-thickness);
+  --list-padding-bottom: calc(var(--joy-layout-space) * 2);
+  --list-padding-left: calc(var(--joy-layout-space) * 2);
+  --list-padding-right: calc(var(--joy-layout-space) * 2);
+  --list-padding-top: calc(var(--joy-layout-space) * 2);
   --list-shadow: unset unset unset unset unset;
   --list-shadow-blur: unset;
   --list-shadow-color: unset;
@@ -108657,38 +108705,78 @@ function nW() {
   transition-timing-function: var(--list-transition-mode);
   transition-property: var(--list-transition-property);
   box-shadow: var(--list-shadow);
+  outline: none;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  overflow: hidden;
+}
+
+:host [part="header"], :host [part="footer"] {
   padding-top: var(--list-padding-top);
   padding-left: var(--list-padding-left);
   padding-bottom: var(--list-padding-bottom);
   padding-right: var(--list-padding-right);
-  gap: var(--list-gap);
-  overflow: overlay;
-  outline: none;
-  width: 100%;
-  height: 100%;
+  flex: none;
+  position: relative;
 }
 
-:host [part="filter"] {
-  z-index: 2;
-  position: sticky;
-  top: 8px;
+:host [part="header"][hidden], :host [part="footer"][hidden] {
+  display: none;
+}
+
+:host [part="header"] {
+  background-color: var(--list-background-color);
+}
+
+:host [part="header"]:after {
+  content: "";
+  height: var(--list-line-thickness);
+  background-color: var(--list-border-color);
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+
+:host [part="footer"] {
+  background-color: var(--list-background-color);
+}
+
+:host [part="footer"]:before {
+  content: "";
+  height: var(--list-line-thickness);
+  background-color: var(--list-border-color);
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+}
+
+:host [part="footer"] ::slotted(mosaik-paginator) {
+  flex-direction: row-reverse;
+  align-items: center;
+  display: flex;
 }
 
 :host [part="items"] {
   gap: var(--list-gap);
+  min-height: 0;
+  overflow-y: overlay;
   flex-direction: column;
+  flex: auto;
   display: flex;
 }
 
-:host([orientation="horizontal"]) [part="items"] {
-  flex-flow: wrap;
+:host [part="items"] [part="filter"] {
+  z-index: 2;
+  position: sticky;
+  top: 8px;
 }
 
-:host([inset*="none"]), :host([empty]) {
-  --list-padding-top: 0px;
-  --list-padding-left: 0px;
-  --list-padding-bottom: 0px;
-  --list-padding-right: 0px;
+:host([orientation="horizontal"]) [part="items"] {
+  flex-flow: wrap;
 }
 
 :host([mosaik-dropdown-button-projection]), :host([mosaik-split-button-projection]) {
@@ -108724,6 +108812,7 @@ function rW() {
   --list-font-weight: unset;
   --list-foreground-color: unset;
   --list-gap: unset;
+  --list-line-thickness: unset;
   --list-padding-bottom: unset;
   --list-padding-left: unset;
   --list-padding-right: unset;
@@ -108785,38 +108874,78 @@ function rW() {
   transition-timing-function: var(--list-transition-mode);
   transition-property: var(--list-transition-property);
   box-shadow: var(--list-shadow);
+  outline: none;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  overflow: hidden;
+}
+
+:host [part="header"], :host [part="footer"] {
   padding-top: var(--list-padding-top);
   padding-left: var(--list-padding-left);
   padding-bottom: var(--list-padding-bottom);
   padding-right: var(--list-padding-right);
-  gap: var(--list-gap);
-  overflow: overlay;
-  outline: none;
-  width: 100%;
-  height: 100%;
+  flex: none;
+  position: relative;
 }
 
-:host [part="filter"] {
-  z-index: 2;
-  position: sticky;
-  top: 8px;
+:host [part="header"][hidden], :host [part="footer"][hidden] {
+  display: none;
+}
+
+:host [part="header"] {
+  background-color: var(--list-background-color);
+}
+
+:host [part="header"]:after {
+  content: "";
+  height: var(--list-line-thickness);
+  background-color: var(--list-border-color);
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+
+:host [part="footer"] {
+  background-color: var(--list-background-color);
+}
+
+:host [part="footer"]:before {
+  content: "";
+  height: var(--list-line-thickness);
+  background-color: var(--list-border-color);
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+}
+
+:host [part="footer"] ::slotted(mosaik-paginator) {
+  flex-direction: row-reverse;
+  align-items: center;
+  display: flex;
 }
 
 :host [part="items"] {
   gap: var(--list-gap);
+  min-height: 0;
+  overflow-y: overlay;
   flex-direction: column;
+  flex: auto;
   display: flex;
 }
 
-:host([orientation="horizontal"]) [part="items"] {
-  flex-flow: wrap;
+:host [part="items"] [part="filter"] {
+  z-index: 2;
+  position: sticky;
+  top: 8px;
 }
 
-:host([inset*="none"]), :host([empty]) {
-  --list-padding-top: 0px;
-  --list-padding-left: 0px;
-  --list-padding-bottom: 0px;
-  --list-padding-right: 0px;
+:host([orientation="horizontal"]) [part="items"] {
+  flex-flow: wrap;
 }
 
 :host([mosaik-dropdown-button-projection]), :host([mosaik-split-button-projection]) {
@@ -108842,7 +108971,7 @@ var iW = function(e, t, n, r) {
 	return i > 3 && a && Object.defineProperty(t, n, a), a;
 }, aW = function(e, t) {
 	if (typeof Reflect == "object" && typeof Reflect.metadata == "function") return Reflect.metadata(e, t);
-}, oW = class extends F(R(dU(hx(Xw(EU))))) {
+}, oW = class extends F(R(dU(hx(Xw(Y(EU)))))) {
 	_provider = FS(this, {
 		context: kU,
 		values: () => ({ disabled: this.disabled })
@@ -109240,10 +109369,10 @@ function pW() {
   --table-foreground-color: var(--joy-scheme-foreground);
   --table-gap: var(--joy-layout-space);
   --table-line-thickness: var(--joy-layout-thickness);
-  --table-padding-bottom: var(--joy-layout-space);
+  --table-padding-bottom: calc(var(--joy-layout-space) * 2);
   --table-padding-left: calc(var(--joy-layout-space) * 2);
   --table-padding-right: calc(var(--joy-layout-space) * 2);
-  --table-padding-top: var(--joy-layout-space);
+  --table-padding-top: calc(var(--joy-layout-space) * 2);
   --table-row-border-color: var(--joy-scheme-highlight);
   --table-row-border-radius: unset;
   --table-row-border-style: solid;
@@ -177551,7 +177680,7 @@ function Ive(e) {
     `;
 }
 //#endregion
-//#region ../mosaik-elements-foundation/dist/Controls/Components/Overlays/Drawer/Themes/DrawerContentElement.Joy.js
+//#region ../mosaik-elements-foundation/dist/Controls/Components/Overlays/Drawer/Themes/DrawerContentElement.Cosmopolitan.js
 function Lve() {
 	return B`
 :host {
@@ -177562,7 +177691,11 @@ function Lve() {
   --drawer-content-font-text-decoration: unset;
   --drawer-content-font-text-transform: unset;
   --drawer-content-font-weight: unset;
-  --drawer-content-gap: var(--joy-layout-space);
+  --drawer-content-gap: unset;
+  --drawer-content-inset-bottom: unset;
+  --drawer-content-inset-left: unset;
+  --drawer-content-inset-right: unset;
+  --drawer-content-inset-top: unset;
   --drawer-content-padding-bottom: unset;
   --drawer-content-padding-left: unset;
   --drawer-content-padding-right: unset;
@@ -177606,10 +177739,13 @@ function Lve() {
 }
 
 :host {
+  margin-left: var(--drawer-content-inset-left);
+  margin-right: var(--drawer-content-inset-right);
+  margin-top: var(--drawer-content-inset-top);
+  margin-bottom: var(--drawer-content-inset-bottom);
+  height: calc(100% - var(--drawer-content-inset-top) - var(--drawer-content-inset-bottom));
   z-index: 1;
-  height: 100%;
-  padding: var(--drawer-content-padding-top) var(--drawer-content-padding-right) var(--drawer-content-padding-bottom) var(--drawer-content-padding-left);
-  transition-property: transform, margin-left, margin-right;
+  transition-property: transform, margin-left, margin-right, margin-top, margin-bottom;
   transition-duration: .4s;
   transition-timing-function: cubic-bezier(.25, .8, .25, 1);
   display: block;
@@ -177620,7 +177756,7 @@ function Lve() {
     `;
 }
 //#endregion
-//#region ../mosaik-elements-foundation/dist/Controls/Components/Overlays/Drawer/Themes/DrawerContentElement.Memphis.js
+//#region ../mosaik-elements-foundation/dist/Controls/Components/Overlays/Drawer/Themes/DrawerContentElement.Joy.js
 function Rve() {
 	return B`
 :host {
@@ -177631,7 +177767,11 @@ function Rve() {
   --drawer-content-font-text-decoration: unset;
   --drawer-content-font-text-transform: unset;
   --drawer-content-font-weight: unset;
-  --drawer-content-gap: var(--memphis-layout-space);
+  --drawer-content-gap: var(--joy-layout-space);
+  --drawer-content-inset-bottom: var(--joy-layout-space);
+  --drawer-content-inset-left: unset;
+  --drawer-content-inset-right: var(--joy-layout-space);
+  --drawer-content-inset-top: var(--joy-layout-space);
   --drawer-content-padding-bottom: unset;
   --drawer-content-padding-left: unset;
   --drawer-content-padding-right: unset;
@@ -177675,10 +177815,13 @@ function Rve() {
 }
 
 :host {
+  margin-left: var(--drawer-content-inset-left);
+  margin-right: var(--drawer-content-inset-right);
+  margin-top: var(--drawer-content-inset-top);
+  margin-bottom: var(--drawer-content-inset-bottom);
+  height: calc(100% - var(--drawer-content-inset-top) - var(--drawer-content-inset-bottom));
   z-index: 1;
-  height: 100%;
-  padding: var(--drawer-content-padding-top) var(--drawer-content-padding-right) var(--drawer-content-padding-bottom) var(--drawer-content-padding-left);
-  transition-property: transform, margin-left, margin-right;
+  transition-property: transform, margin-left, margin-right, margin-top, margin-bottom;
   transition-duration: .4s;
   transition-timing-function: cubic-bezier(.25, .8, .25, 1);
   display: block;
@@ -177689,7 +177832,7 @@ function Rve() {
     `;
 }
 //#endregion
-//#region ../mosaik-elements-foundation/dist/Controls/Components/Overlays/Drawer/Themes/DrawerContentElement.Cosmopolitan.js
+//#region ../mosaik-elements-foundation/dist/Controls/Components/Overlays/Drawer/Themes/DrawerContentElement.Memphis.js
 function zve() {
 	return B`
 :host {
@@ -177700,7 +177843,11 @@ function zve() {
   --drawer-content-font-text-decoration: unset;
   --drawer-content-font-text-transform: unset;
   --drawer-content-font-weight: unset;
-  --drawer-content-gap: unset;
+  --drawer-content-gap: var(--memphis-layout-space);
+  --drawer-content-inset-bottom: unset;
+  --drawer-content-inset-left: unset;
+  --drawer-content-inset-right: unset;
+  --drawer-content-inset-top: unset;
   --drawer-content-padding-bottom: unset;
   --drawer-content-padding-left: unset;
   --drawer-content-padding-right: unset;
@@ -177744,10 +177891,13 @@ function zve() {
 }
 
 :host {
+  margin-left: var(--drawer-content-inset-left);
+  margin-right: var(--drawer-content-inset-right);
+  margin-top: var(--drawer-content-inset-top);
+  margin-bottom: var(--drawer-content-inset-bottom);
+  height: calc(100% - var(--drawer-content-inset-top) - var(--drawer-content-inset-bottom));
   z-index: 1;
-  height: 100%;
-  padding: var(--drawer-content-padding-top) var(--drawer-content-padding-right) var(--drawer-content-padding-bottom) var(--drawer-content-padding-left);
-  transition-property: transform, margin-left, margin-right;
+  transition-property: transform, margin-left, margin-right, margin-top, margin-bottom;
   transition-duration: .4s;
   transition-timing-function: cubic-bezier(.25, .8, .25, 1);
   display: block;
@@ -177767,27 +177917,25 @@ var p2 = function(e, t, n, r) {
 }, m2 = function(e, t) {
 	if (typeof Reflect == "object" && typeof Reflect.metadata == "function") return Reflect.metadata(e, t);
 }, h2 = class extends F(j) {
-	_opened;
+	_isOpen;
 	constructor() {
-		super(), this._opened = !1;
+		super(), this._isOpen = !1;
 	}
 	static get is() {
 		return "mosaik-drawer-content";
 	}
-	get opened() {
-		return this._opened;
+	get isOpen() {
+		return this._isOpen;
 	}
-	set opened(e) {
-		this._opened !== e && (this._opened = e);
+	set isOpen(e) {
+		this._isOpen !== e && (this._isOpen = e, this.requestUpdate("isOpen"));
 	}
 	onApplyTemplate() {
-		super.onApplyTemplate();
-		let e = O.current.findAncestor(this, z2, { strict: !1 });
-		e?.on("contentMarginChanged", (t) => {
-			I.current.setStyle(this, "margin-left", `${t.detail.left}px`), I.current.setStyle(this, "margin-right", `${t.detail.right}px`), this.opened = e.drawer?.isOpen ?? !1;
+		super.onApplyTemplate(), O.current.findAncestor(this, z2, { strict: !1 })?.on("contentMarginChanged", (e) => {
+			I.current.setStyle(this, "margin-left", `calc(${e.detail.left}px + var(--drawer-content-inset-left, 0px))`), I.current.setStyle(this, "margin-right", `calc(${e.detail.right}px + var(--drawer-content-inset-right, 0px))`);
 		}, { passive: !0 });
 	}
-	onOpenedPropertyChanged(e, t) {
+	onIsOpenPropertyChanged(e, t) {
 		t ? I.current.addClass(this, "drawer-opened") : I.current.removeClass(this, "drawer-opened");
 	}
 };
@@ -177798,18 +177946,18 @@ p2([
 	}),
 	m2("design:type", Boolean),
 	m2("design:paramtypes", [Boolean])
-], h2.prototype, "opened", null), p2([
-	L("opened"),
+], h2.prototype, "isOpen", null), p2([
+	L("isOpen"),
 	m2("design:type", Function),
 	m2("design:paramtypes", [Boolean, Boolean]),
 	m2("design:returntype", void 0)
-], h2.prototype, "onOpenedPropertyChanged", null), h2 = p2([H({
+], h2.prototype, "onIsOpenPropertyChanged", null), h2 = p2([H({
 	selector: "mosaik-drawer-content",
 	template: Ive,
 	themes: {
-		joy: Lve,
-		memphis: Rve,
-		cosmopolitan: zve
+		joy: Rve,
+		memphis: zve,
+		cosmopolitan: Lve
 	},
 	options: {
 		mode: "open",
@@ -179348,8 +179496,12 @@ function cye() {
   transition-duration: var(--drawer-transition-duration);
   transition-timing-function: var(--drawer-transition-mode);
   transition-property: var(--drawer-transition-property);
+  padding: 0;
+  padding-top: env(safe-area-inset-top);
+  padding-bottom: env(safe-area-inset-bottom);
   border-radius: 0;
   flex-direction: column;
+  margin: 0;
   display: flex;
   position: absolute;
   overflow: hidden;
@@ -179597,8 +179749,12 @@ function lye() {
   transition-duration: var(--drawer-transition-duration);
   transition-timing-function: var(--drawer-transition-mode);
   transition-property: var(--drawer-transition-property);
+  padding: 0;
+  padding-top: env(safe-area-inset-top);
+  padding-bottom: env(safe-area-inset-bottom);
   border-radius: 0;
   flex-direction: column;
+  margin: 0;
   display: flex;
   position: absolute;
   overflow: hidden;
@@ -179853,8 +180009,12 @@ function uye() {
   transition-duration: var(--drawer-transition-duration);
   transition-timing-function: var(--drawer-transition-mode);
   transition-property: var(--drawer-transition-property);
+  padding: 0;
+  padding-top: env(safe-area-inset-top);
+  padding-bottom: env(safe-area-inset-bottom);
   border-radius: 0;
   flex-direction: column;
+  margin: 0;
   display: flex;
   position: absolute;
   overflow: hidden;
@@ -180138,6 +180298,9 @@ var N2 = function(e, t, n, r) {
 	onApplyTemplate() {
 		super.onApplyTemplate(), O.current.findAncestor(this, z2) && (this.isComposed = !0);
 	}
+	onIsOpenChanged(e, t) {
+		super.onIsOpenChanged(e, t), O.current.findAncestor(this, z2, { strict: !1 })?.updateDrawerState();
+	}
 	createVerticalDrawerRootStyles(e) {
 		let t = this.getDrawerViewportInset(), n = this.createInsetSize(F2.FULL_SIZE, t);
 		return {
@@ -180246,6 +180409,7 @@ N2([
 function dye() {
 	return B`
 :host {
+  --drawer-container-background-color: unset;
   --drawer-container-font-family: unset;
   --drawer-container-font-letter-spacing: unset;
   --drawer-container-font-line-height: unset;
@@ -180297,8 +180461,8 @@ function dye() {
 }
 
 :host {
+  background-color: var(--drawer-container-background-color);
   z-index: 1;
-  box-sizing: border-box;
   -webkit-overflow-scrolling: touch;
   overflow: hidden;
 }
@@ -180336,6 +180500,7 @@ function dye() {
 function fye() {
 	return B`
 :host {
+  --drawer-container-background-color: var(--joy-scheme-surface);
   --drawer-container-font-family: unset;
   --drawer-container-font-letter-spacing: unset;
   --drawer-container-font-line-height: unset;
@@ -180387,8 +180552,8 @@ function fye() {
 }
 
 :host {
+  background-color: var(--drawer-container-background-color);
   z-index: 1;
-  box-sizing: border-box;
   -webkit-overflow-scrolling: touch;
   overflow: hidden;
 }
@@ -180426,6 +180591,7 @@ function fye() {
 function pye() {
 	return B`
 :host {
+  --drawer-container-background-color: unset;
   --drawer-container-font-family: unset;
   --drawer-container-font-letter-spacing: unset;
   --drawer-container-font-line-height: unset;
@@ -180477,8 +180643,8 @@ function pye() {
 }
 
 :host {
+  background-color: var(--drawer-container-background-color);
   z-index: 1;
-  box-sizing: border-box;
   -webkit-overflow-scrolling: touch;
   overflow: hidden;
 }
@@ -180527,8 +180693,9 @@ var L2 = function(e, t, n, r) {
 	_content;
 	_autoSize;
 	_hasBackdrop;
+	_isOpen;
 	constructor() {
-		super(), this._drawer = null, this._content = null, this._autoSize = !1, this._hasBackdrop = !1, this._contentMarginChanged = new E(this, "contentMarginChanged", { bubbles: !1 }), this._resizeController = new Yz(this, { callback: () => this.updateContentMargins() });
+		super(), this._drawer = null, this._content = null, this._autoSize = !1, this._hasBackdrop = !1, this._isOpen = !1, this._contentMarginChanged = new E(this, "contentMarginChanged", { bubbles: !1 }), this._resizeController = new Yz(this, { callback: () => this.updateContentMargins() });
 	}
 	static get is() {
 		return "mosaik-drawer-container";
@@ -180545,6 +180712,12 @@ var L2 = function(e, t, n, r) {
 	set hasBackdrop(e) {
 		this._hasBackdrop !== e && (this._hasBackdrop = e, this.requestUpdate("hasBackdrop"));
 	}
+	get isOpen() {
+		return this._isOpen;
+	}
+	set isOpen(e) {
+		this._isOpen !== e && (this._isOpen = e, this.classList.toggle("drawer-container-has-open", e), this.requestUpdate("isOpen"));
+	}
 	get contentMarginChanged() {
 		return this._contentMarginChanged;
 	}
@@ -180560,8 +180733,12 @@ var L2 = function(e, t, n, r) {
 	close() {
 		this._drawer?.close();
 	}
+	updateDrawerState() {
+		let e = this._drawer?.isOpen ?? !1;
+		this.isOpen = e, this._content && (this._content.isOpen = e), this.updateContentMargins();
+	}
 	onApplyTemplate() {
-		super.onApplyTemplate(), this._drawer = O.current.findDescendant(this, I2), this._content = O.current.findDescendant(this, h2), this._drawer?.parentElement === this && (this._drawer.on("opened", () => this.updateContentMargins()), this._drawer.on("closed", () => this.updateContentMargins()), this.updateContentMargins());
+		super.onApplyTemplate(), this._drawer = O.current.findDescendant(this, I2), this._content = O.current.findDescendant(this, h2), this._drawer?.parentElement === this && (this._drawer.on("opened", () => this.updateContentMargins()), this._drawer.on("closed", () => this.updateContentMargins()), this.updateDrawerState());
 	}
 	updateContentMargins() {
 		this.updateComplete.then(() => {
@@ -180602,6 +180779,13 @@ L2([
 	R2("design:type", Boolean),
 	R2("design:paramtypes", [Boolean])
 ], z2.prototype, "hasBackdrop", null), L2([
+	A({
+		type: Boolean,
+		useDefault: !0
+	}),
+	R2("design:type", Boolean),
+	R2("design:paramtypes", [Boolean])
+], z2.prototype, "isOpen", null), L2([
 	k({ eventName: "contentMarginChanged" }),
 	R2("design:type", Object),
 	R2("design:paramtypes", [])
@@ -189357,7 +189541,7 @@ function Jbe() {
   --dropdown-transition-duration: unset;
   --dropdown-transition-mode: unset;
   --dropdown-transition-property: unset;
-  --dropdown-translate: unset;
+  --dropdown-translate: none;
 }
 
 @media screen and (prefers-reduced-motion: reduce) {
@@ -199117,7 +199301,9 @@ var n6;
 		variant: Gy.DEFAULTS.variant,
 		appearance: Jx.DEFAULTS.appearance,
 		total: 0,
+		totalRecords: 0,
 		size: 20,
+		rows: 20,
 		sizes: [
 			20,
 			50,
@@ -199125,7 +199311,14 @@ var n6;
 		],
 		showSizes: !1,
 		currentPage: 0,
-		showFirstLastButtons: !0
+		first: 0,
+		pageLinkSize: 5,
+		alwaysShow: !0,
+		showPageLinks: !0,
+		showFirstLastIcon: !0,
+		showFirstLastButtons: !0,
+		showCurrentPageReport: !1,
+		currentPageReportTemplate: "{currentPage} of {totalPages}"
 	};
 })(n6 ||= {});
 //#endregion
@@ -199137,8 +199330,9 @@ var r6 = class extends iL {
 	_nextPageLabel;
 	_previousPageLabel;
 	_itemsPerPageLabel;
+	_pageLabel;
 	constructor(e) {
-		super(e), this._rangeLabel = "{0}-{1} of {2}", this._firstPageLabel = "First page", this._lastPageLabel = "Last page", this._nextPageLabel = "Next page", this._previousPageLabel = "Previous page", this._itemsPerPageLabel = "Items per page";
+		super(e), this._rangeLabel = "{0}-{1} of {2}", this._firstPageLabel = "First page", this._lastPageLabel = "Last page", this._nextPageLabel = "Next page", this._previousPageLabel = "Previous page", this._itemsPerPageLabel = "Items per page", this._pageLabel = "Page {0}";
 	}
 	get rangeLabel() {
 		return this._rangeLabel;
@@ -199176,17 +199370,23 @@ var r6 = class extends iL {
 	set itemsPerPageLabel(e) {
 		this._itemsPerPageLabel = e;
 	}
+	get pageLabel() {
+		return this._pageLabel;
+	}
+	set pageLabel(e) {
+		this._pageLabel = e;
+	}
 };
 //#endregion
 //#region ../mosaik-elements-foundation/dist/Controls/Components/Primitives/Paginator/PaginatorElementTemplate.js
 function CSe(e) {
 	return V`
-        <mosaik-stack part="container"
-                      .lang="${e.lang}"
-                      .dir="${e.dir}"
-                      .gap="${"8px"}"
-                      .verticalAlignment="${Zb.Center}">
-            ${U(e.showFirstLastButtons, () => V`
+        ${U(e.isVisible, () => V`
+        <div part="container navigation-container"
+             lang="${e.lang}"
+             dir="${e.dir}"
+             role="navigation">
+            ${U(e.showFirstLastIcon, () => V`
                 <mosaik-button part="first"
                                .lang="${e.lang}"
                                .dir="${e.dir}"
@@ -199206,8 +199406,10 @@ function CSe(e) {
                            .disabled="${e.disabled || !e.hasPreviousPage}"
                            .ariaLabel="${e.intl.previousPageLabel}"
                            @click="${() => e.goToPreviousPage()}"></mosaik-button>
-            <mosaik-stack part="pages-container" .lang="${e.lang}"
-                          .dir="${e.dir}">
+            ${U(e.showPageLinks, () => V`
+            <div part="pages-container page-links"
+                 lang="${e.lang}"
+                 dir="${e.dir}">
                 ${Pb(e.calculatePages(e.total, e.size), (e) => e, (t) => V`
                 <mosaik-button part="page"
                                .lang="${e.lang}"
@@ -199216,11 +199418,12 @@ function CSe(e) {
                                .appearance="${t - 1 === e.currentPage ? e.appearance : q.Plain}"
                                .variant="${t - 1 === e.currentPage ? e.variant : Uy.Default}"
                                .disabled="${e.disabled}"
-                               .ariaLabel="${"Page " + t}"
+                               .ariaLabel="${CR(e.intl.pageLabel, t)}"
                                .ariaCurrent="${t - 1 === e.currentPage ? "page" : null}"
                                @click="${() => e.goToPage(t - 1)}"></mosaik-button>
                 `)}
-            </mosaik-stack>
+            </div>
+            `)}
             <mosaik-button part="next"
                            .lang="${e.lang}"
                            .dir="${e.dir}"
@@ -199230,7 +199433,7 @@ function CSe(e) {
                            .disabled="${e.disabled || !e.hasNextPage}"
                            .ariaLabel="${e.intl.nextPageLabel}"
                            @click="${() => e.goToNextPage()}"></mosaik-button>
-            ${U(e.showFirstLastButtons, () => V`
+            ${U(e.showFirstLastIcon, () => V`
                 <mosaik-button part="last"
                                .lang="${e.lang}"
                                .dir="${e.dir}"
@@ -199243,17 +199446,18 @@ function CSe(e) {
             `)}
 
             ${U(e.showSizes, () => V`
-            <mosaik-stack part="size-selector-container"
-                          .lang="${e.lang}"
-                          .dir="${e.dir}">
-                <mosaik-select part="size-selector" .lang="${e.lang}"
+            <div part="size-selector-container page-size-container"
+                 lang="${e.lang}"
+                 dir="${e.dir}">
+                <mosaik-select part="size-selector"
+                               .lang="${e.lang}"
                                .dir="${e.dir}"
-                               .appearance="${e.appearance}"
+                               .appearance="${"plain"}"
                                .variant="${e.variant}"
                                .disabled="${e.disabled}"
                                .value="${e.size.toString()}"
                                .ariaLabel="${e.intl.itemsPerPageLabel}"
-                               @selectionChanged="${(t) => e.changePageSize(t.detail.newValue.value)}">
+                               @selectionChanged="${(t) => e.changePageSize(Number(t.detail.newValue.value))}">
                     ${Pb(e.sizes, (e) => e, (t) => V`
                     <mosaik-select-item .lang="${e.lang}"
                                         .dir="${e.dir}"
@@ -199261,17 +199465,21 @@ function CSe(e) {
                                         .label="${t.toString()}"></mosaik-select-item>
                     `)}
                 </mosaik-select>
-            </mosaik-stack>
+            </div>
             `)}
-        </mosaik-stack>
-        <mosaik-stack part="range-container"
-                      .lang="${e.lang}"
-                      .dir="${e.dir}">
-            <mosaik-text part="range"
-                         .lang="${e.lang}"
-                         .dir="${e.dir}"
-                         .text="${CR(e.intl.rangeLabel, e.rangeStart, e.rangeEnd, e.total)}"></mosaik-text>
-        </mosaik-stack>
+            ${U(e.showCurrentPageReport, () => V`
+            <div part="range-container report-container"
+                 lang="${e.lang}"
+                 dir="${e.dir}">
+                <mosaik-text part="range current-page-report"
+                             .lang="${e.lang}"
+                             .dir="${e.dir}"
+                             .ariaLive="${"polite"}"
+                             .text="${e.currentPageReport}"></mosaik-text>
+            </div>
+            `)}
+        </div>
+        `)}
     `;
 }
 //#endregion
@@ -199330,12 +199538,38 @@ function wSe() {
   display: none !important;
 }
 
-:host [part^="page"], :host [part="page more"] {
+:host [part~="container"] {
+  flex-wrap: nowrap;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+  display: flex;
+}
+
+:host [part~="pages-container"], :host [part~="size-selector-container"], :host [part~="range-container"] {
+  flex: none;
+  align-items: center;
+  min-width: 0;
+  display: flex;
+}
+
+:host [part~="pages-container"], :host [part~="range-container"] {
+  flex-wrap: nowrap;
+}
+
+:host [part~="range"] {
+  white-space: nowrap;
+}
+
+:host [part~="page"] {
+  flex: none;
   min-width: 40px;
 }
 
-:host [part="size-selector"] {
+:host [part~="size-selector"] {
+  flex: none;
   width: 160px;
+  min-width: 160px;
 }
 
     `;
@@ -199396,12 +199630,38 @@ function TSe() {
   display: none !important;
 }
 
-:host [part^="page"], :host [part="page more"] {
+:host [part~="container"] {
+  flex-wrap: nowrap;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+  display: flex;
+}
+
+:host [part~="pages-container"], :host [part~="size-selector-container"], :host [part~="range-container"] {
+  flex: none;
+  align-items: center;
+  min-width: 0;
+  display: flex;
+}
+
+:host [part~="pages-container"], :host [part~="range-container"] {
+  flex-wrap: nowrap;
+}
+
+:host [part~="range"] {
+  white-space: nowrap;
+}
+
+:host [part~="page"] {
+  flex: none;
   min-width: 40px;
 }
 
-:host [part="size-selector"] {
+:host [part~="size-selector"] {
+  flex: none;
   width: 160px;
+  min-width: 160px;
 }
 
     `;
@@ -199462,12 +199722,38 @@ function ESe() {
   display: none !important;
 }
 
-:host [part^="page"], :host [part="page more"] {
+:host [part~="container"] {
+  flex-wrap: nowrap;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+  display: flex;
+}
+
+:host [part~="pages-container"], :host [part~="size-selector-container"], :host [part~="range-container"] {
+  flex: none;
+  align-items: center;
+  min-width: 0;
+  display: flex;
+}
+
+:host [part~="pages-container"], :host [part~="range-container"] {
+  flex-wrap: nowrap;
+}
+
+:host [part~="range"] {
+  white-space: nowrap;
+}
+
+:host [part~="page"] {
+  flex: none;
   min-width: 40px;
 }
 
-:host [part="size-selector"] {
+:host [part~="size-selector"] {
+  flex: none;
   width: 160px;
+  min-width: 160px;
 }
 
     `;
@@ -199490,9 +199776,14 @@ var i6 = function(e, t, n, r) {
 	_sizes;
 	_showSizes;
 	_currentPage;
-	_showFirstLastButtons;
+	_pageLinkSize;
+	_alwaysShow;
+	_showPageLinks;
+	_showFirstLastIcon;
+	_showCurrentPageReport;
+	_currentPageReportTemplate;
 	constructor() {
-		super(), this._intl = new OI(this, { factory: () => new r6() }), this._pageChanged = new E(this, "pageChanged"), this._pageSizeChanged = new E(this, "pageSizeChanged"), this._total = n6.DEFAULTS.total, this._size = n6.DEFAULTS.size, this._sizes = n6.DEFAULTS.sizes, this._showSizes = n6.DEFAULTS.showSizes, this._currentPage = n6.DEFAULTS.currentPage, this._showFirstLastButtons = n6.DEFAULTS.showFirstLastButtons;
+		super(), this._intl = new OI(this, { factory: () => new r6() }), this._pageChanged = new E(this, "pageChanged"), this._pageSizeChanged = new E(this, "pageSizeChanged"), this._total = n6.DEFAULTS.total, this._size = n6.DEFAULTS.size, this._sizes = n6.DEFAULTS.sizes, this._showSizes = n6.DEFAULTS.showSizes, this._currentPage = n6.DEFAULTS.currentPage, this._pageLinkSize = n6.DEFAULTS.pageLinkSize, this._alwaysShow = n6.DEFAULTS.alwaysShow, this._showPageLinks = n6.DEFAULTS.showPageLinks, this._showFirstLastIcon = n6.DEFAULTS.showFirstLastIcon, this._showCurrentPageReport = n6.DEFAULTS.showCurrentPageReport, this._currentPageReportTemplate = n6.DEFAULTS.currentPageReportTemplate;
 	}
 	static get is() {
 		return "mosaik-paginator";
@@ -199501,13 +199792,27 @@ var i6 = function(e, t, n, r) {
 		return this._total;
 	}
 	set total(e) {
-		this._total !== e && (this._total = e, this.requestUpdate("total"));
+		let t = this.normalizeNonNegativeNumber(e);
+		this._total !== t && (this._total = t, this.clampCurrentPage(), this.requestUpdate("total"), this.requestUpdate("totalRecords"));
+	}
+	get totalRecords() {
+		return this._total;
+	}
+	set totalRecords(e) {
+		this.total = e, this.requestUpdate("totalRecords");
 	}
 	get size() {
 		return this._size;
 	}
 	set size(e) {
-		this._size !== e && (this._size = e, this.requestUpdate("size"));
+		let t = this.normalizeNonNegativeNumber(e);
+		this._size !== t && (this._size = t, this.clampCurrentPage(), this.requestUpdate("size"), this.requestUpdate("rows"), this.requestUpdate("first"));
+	}
+	get rows() {
+		return this._size;
+	}
+	set rows(e) {
+		this.size = e, this.requestUpdate("rows");
 	}
 	get sizes() {
 		return this._sizes;
@@ -199531,14 +199836,58 @@ var i6 = function(e, t, n, r) {
 		return this._currentPage;
 	}
 	set currentPage(e) {
-		let t = Math.max(0, Math.min(e, this.totalPages - 1));
-		this._currentPage !== t && (this._currentPage = t, this.requestUpdate("currentPage"));
+		let t = this.normalizePageIndex(e);
+		this._currentPage !== t && (this._currentPage = t, this.requestUpdate("currentPage"), this.requestUpdate("first"));
+	}
+	get first() {
+		return this._currentPage * this._size;
+	}
+	set first(e) {
+		let t = this.normalizeNonNegativeNumber(e), n = this._size > 0 ? Math.floor(t / this._size) : 0;
+		this._currentPage !== this.normalizePageIndex(n) && (this.currentPage = n, this.requestUpdate("first"));
+	}
+	get pageLinkSize() {
+		return this._pageLinkSize;
+	}
+	set pageLinkSize(e) {
+		let t = this.normalizeNonNegativeNumber(e);
+		this._pageLinkSize !== t && (this._pageLinkSize = t, this.requestUpdate("pageLinkSize"));
+	}
+	get alwaysShow() {
+		return this._alwaysShow;
+	}
+	set alwaysShow(e) {
+		this._alwaysShow !== e && (this._alwaysShow = e, this.requestUpdate("alwaysShow"));
+	}
+	get showPageLinks() {
+		return this._showPageLinks;
+	}
+	set showPageLinks(e) {
+		this._showPageLinks !== e && (this._showPageLinks = e, this.requestUpdate("showPageLinks"));
+	}
+	get showFirstLastIcon() {
+		return this._showFirstLastIcon;
+	}
+	set showFirstLastIcon(e) {
+		this._showFirstLastIcon !== e && (this._showFirstLastIcon = e, this.requestUpdate("showFirstLastIcon"), this.requestUpdate("showFirstLastButtons"));
 	}
 	get showFirstLastButtons() {
-		return this._showFirstLastButtons;
+		return this._showFirstLastIcon;
 	}
 	set showFirstLastButtons(e) {
-		this._showFirstLastButtons !== e && (this._showFirstLastButtons = e, this.requestUpdate("showFirstLastButtons"));
+		this.showFirstLastIcon = e, this.requestUpdate("showFirstLastButtons");
+	}
+	get showCurrentPageReport() {
+		return this._showCurrentPageReport;
+	}
+	set showCurrentPageReport(e) {
+		this._showCurrentPageReport !== e && (this._showCurrentPageReport = e, this.requestUpdate("showCurrentPageReport"));
+	}
+	get currentPageReportTemplate() {
+		return this._currentPageReportTemplate;
+	}
+	set currentPageReportTemplate(e) {
+		this._currentPageReportTemplate !== e && (this._currentPageReportTemplate = e, this.requestUpdate("currentPageReportTemplate"));
 	}
 	get totalPages() {
 		return this._total <= 0 || this._size <= 0 ? 0 : Math.ceil(this._total / this._size);
@@ -199555,6 +199904,12 @@ var i6 = function(e, t, n, r) {
 	get hasNextPage() {
 		return this._currentPage < this.totalPages - 1;
 	}
+	get isVisible() {
+		return this._alwaysShow || this.totalPages > 1;
+	}
+	get currentPageReport() {
+		return this._currentPageReportTemplate.replace("{currentPage}", String(this.currentPageNumber)).replace("{totalPages}", String(this.totalPages)).replace("{rows}", String(this._size)).replace("{first}", String(this._total > 0 ? this.first + 1 : 0)).replace("{last}", String(this.rangeEnd)).replace("{totalRecords}", String(this._total));
+	}
 	get pageChanged() {
 		return this._pageChanged;
 	}
@@ -199576,26 +199931,47 @@ var i6 = function(e, t, n, r) {
 	goToPage(e) {
 		if (this.disabled) return;
 		let t = this._currentPage;
-		this.currentPage = e, t !== this._currentPage && this._pageChanged.emit({
-			pageIndex: this._currentPage,
-			pageSize: this._size,
-			totalItems: this._total
-		});
+		this.currentPage = e, t !== this._currentPage && this._pageChanged.emit(this.createPaginatedEventDetail());
 	}
 	changePageSize(e) {
-		if (this.disabled || e <= 0) return;
-		let t = this._size;
-		this._size = e, this._currentPage = 0, this.requestUpdate("size"), this.requestUpdate("currentPage"), t !== this._size && this._pageSizeChanged.emit({
-			pageIndex: this._currentPage,
-			pageSize: this._size,
-			totalItems: this._total
-		});
+		let t = this.normalizeNonNegativeNumber(e);
+		if (this.disabled || t <= 0) return;
+		let n = this._size;
+		this._size = t, this._currentPage = 0, this.requestUpdate("size"), this.requestUpdate("rows"), this.requestUpdate("currentPage"), this.requestUpdate("first"), n !== this._size && this._pageSizeChanged.emit(this.createPaginatedEventDetail());
 	}
 	calculatePages(e, t) {
 		if (e <= 0 || t <= 0) return [];
-		let n = Math.ceil(e / t), r = [];
-		for (let e = 1; e <= n; e++) r.push(e);
-		return r;
+		let n = Math.ceil(e / t), r = Math.min(this._pageLinkSize, n);
+		if (r <= 0) return [];
+		let i = [], a = Math.max(0, Math.ceil(this._currentPage - r / 2)), o = Math.min(n - 1, a + r - 1), s = this._pageLinkSize - (o - a + 1);
+		a = Math.max(0, a - s);
+		for (let e = a; e <= o; e++) i.push(e + 1);
+		return i;
+	}
+	get currentPageNumber() {
+		return this.totalPages > 0 ? this._currentPage + 1 : 0;
+	}
+	clampCurrentPage() {
+		let e = this.normalizePageIndex(this._currentPage);
+		this._currentPage !== e && (this._currentPage = e, this.requestUpdate("currentPage"), this.requestUpdate("first"));
+	}
+	normalizeNonNegativeNumber(e) {
+		return Number.isFinite(e) ? Math.max(0, Math.floor(e)) : 0;
+	}
+	normalizePageIndex(e) {
+		return Number.isFinite(e) ? Math.max(0, Math.min(Math.floor(e), Math.max(this.totalPages - 1, 0))) : 0;
+	}
+	createPaginatedEventDetail() {
+		return {
+			pageIndex: this._currentPage,
+			page: this._currentPage,
+			first: this.first,
+			pageSize: this._size,
+			rows: this._size,
+			pageCount: this.totalPages,
+			totalItems: this._total,
+			totalRecords: this._total
+		};
 	}
 };
 i6([
@@ -199606,7 +199982,15 @@ i6([
 	A({ type: Number }),
 	a6("design:type", Number),
 	a6("design:paramtypes", [Number])
+], o6.prototype, "totalRecords", null), i6([
+	A({ type: Number }),
+	a6("design:type", Number),
+	a6("design:paramtypes", [Number])
 ], o6.prototype, "size", null), i6([
+	A({ type: Number }),
+	a6("design:type", Number),
+	a6("design:paramtypes", [Number])
+], o6.prototype, "rows", null), i6([
 	A({ type: Array }),
 	a6("design:type", Array),
 	a6("design:paramtypes", [Array])
@@ -199626,6 +200010,35 @@ i6([
 	a6("design:type", Number),
 	a6("design:paramtypes", [Number])
 ], o6.prototype, "currentPage", null), i6([
+	A({ type: Number }),
+	a6("design:type", Number),
+	a6("design:paramtypes", [Number])
+], o6.prototype, "first", null), i6([
+	A({ type: Number }),
+	a6("design:type", Number),
+	a6("design:paramtypes", [Number])
+], o6.prototype, "pageLinkSize", null), i6([
+	A({
+		type: Boolean,
+		useDefault: !0
+	}),
+	a6("design:type", Boolean),
+	a6("design:paramtypes", [Boolean])
+], o6.prototype, "alwaysShow", null), i6([
+	A({
+		type: Boolean,
+		useDefault: !0
+	}),
+	a6("design:type", Boolean),
+	a6("design:paramtypes", [Boolean])
+], o6.prototype, "showPageLinks", null), i6([
+	A({
+		type: Boolean,
+		useDefault: !0
+	}),
+	a6("design:type", Boolean),
+	a6("design:paramtypes", [Boolean])
+], o6.prototype, "showFirstLastIcon", null), i6([
 	A({
 		type: Boolean,
 		useDefault: !0
@@ -199633,6 +200046,17 @@ i6([
 	a6("design:type", Boolean),
 	a6("design:paramtypes", [Boolean])
 ], o6.prototype, "showFirstLastButtons", null), i6([
+	A({
+		type: Boolean,
+		useDefault: !0
+	}),
+	a6("design:type", Boolean),
+	a6("design:paramtypes", [Boolean])
+], o6.prototype, "showCurrentPageReport", null), i6([
+	A({ type: String }),
+	a6("design:type", String),
+	a6("design:paramtypes", [String])
+], o6.prototype, "currentPageReportTemplate", null), i6([
 	k({ eventName: "pageChanged" }),
 	a6("design:type", Object),
 	a6("design:paramtypes", [])
@@ -212993,18 +213417,10 @@ function Cwe() {
 :host {
   width: 100%;
   height: 100%;
-  overflow: overlay;
   display: block;
   position: relative;
 }
 
-:host [part="list"] {
-  overflow: unset;
-  position: unset;
-  width: 100%;
-  height: 100%;
-}
-
     `;
 }
 //#endregion
@@ -213065,18 +213481,10 @@ function wwe() {
 :host {
   width: 100%;
   height: 100%;
-  overflow: overlay;
   display: block;
   position: relative;
 }
 
-:host [part="list"] {
-  overflow: unset;
-  position: unset;
-  width: 100%;
-  height: 100%;
-}
-
     `;
 }
 //#endregion
@@ -213137,18 +213545,10 @@ function Twe() {
 :host {
   width: 100%;
   height: 100%;
-  overflow: overlay;
   display: block;
   position: relative;
 }
 
-:host [part="list"] {
-  overflow: unset;
-  position: unset;
-  width: 100%;
-  height: 100%;
-}
-
     `;
 }
 //#endregion
@@ -229353,13 +229753,14 @@ R7([
 function aDe(e) {
 	return V`
         <mosaik-theme2 .theme="${e.theme}">
-            <mosaik-drawer-container .lang="${e.lang}"
+            <mosaik-drawer-container part="root"
+                                     .lang="${e.lang}"
                                      .dir="${e.dir}"
                                      .fit="${nx.Both}"
                                      .hasBackdrop="${e.isMobile}">
                 ${U(e.hasNav, () => V`
-                <mosaik-drawer slot="drawer"
-                               part="drawer"
+                <mosaik-drawer part="nav"
+                               slot="drawer"
                                .lang="${e.lang}"
                                .dir="${e.dir}"
                                .isOpen="${e.isNavOpen}"
@@ -229367,12 +229768,13 @@ function aDe(e) {
                                .hasBackdrop="${e.isMobile}"
                                .hasShadow="${e.isMobile}"
                                .clickOutsideToClose="${e.isMobile}">
-                    <nav part="nav">
+                    <nav part="nav-body">
                         <slot name="nav"></slot>
                     </nav>
                 </mosaik-drawer>
                 `)}
-                <mosaik-drawer-content slot="content"
+                <mosaik-drawer-content part="view"
+                                       slot="content"
                                        .lang="${e.lang}"
                                        .dir="${e.dir}">
                     <slot name="header"></slot>
@@ -229392,7 +229794,7 @@ function aDe(e) {
                               name="headerActions"></slot>
                     </mosaik-app-header>
                     `)}
-                    <div part="content">
+                    <div part="body">
                         <main part="main">
                             <slot name="content"></slot>
                         </main>
@@ -229996,10 +230398,11 @@ function dDe() {
 	return B`
 :host {
   --app-background-color: var(--cosmopolitan-scheme-background);
+  --app-body-offset-top: unset;
+  --app-border-color: unset;
   --app-border-radius: unset;
-  --app-content-offset-top: unset;
-  --app-drawer-height: 100%;
-  --app-drawer-width: 320px;
+  --app-border-style: solid;
+  --app-border-width: unset;
   --app-font-family: var(--cosmopolitan-typography-body1-font-family);
   --app-font-letter-spacing: var(--cosmopolitan-typography-body1-letter-spacing);
   --app-font-line-height: var(--cosmopolitan-typography-body1-line-height);
@@ -230010,6 +230413,8 @@ function dDe() {
   --app-foreground-color: var(--cosmopolitan-scheme-foreground);
   --app-gap: var(--cosmopolitan-layout-space);
   --app-line-thickness: var(--cosmopolitan-layout-thickness);
+  --app-nav-height: 100%;
+  --app-nav-width: 320px;
   --app-padding-bottom: unset;
   --app-padding-left: unset;
   --app-padding-right: unset;
@@ -230024,6 +230429,10 @@ function dDe() {
   --app-transition-mode: ease;
   --app-transition-property: background-color, color, border-color, opacity, box-shadow, translate;
   --app-translate: none;
+  --app-view-border-color: unset;
+  --app-view-border-radius: unset;
+  --app-view-border-style: solid;
+  --app-view-border-width: unset;
 }
 
 @media screen and (prefers-reduced-motion: reduce) {
@@ -230066,7 +230475,10 @@ function dDe() {
   transition-property: var(--app-transition-property);
   background-color: var(--app-background-color);
   color: var(--app-foreground-color);
+  border-color: var(--app-border-color);
   border-radius: var(--app-border-radius);
+  border-style: var(--app-border-style);
+  border-width: var(--app-border-width);
   width: 100vw;
   height: 100vh;
   display: block;
@@ -230075,35 +230487,43 @@ function dDe() {
   overflow: clip;
 }
 
-:host [part="drawer"] {
-  --drawer-width: var(--app-drawer-width);
-  --drawer-height: var(--app-drawer-height);
+:host [part="nav"] {
+  --drawer-width: var(--app-nav-width);
+  --drawer-height: var(--app-nav-height);
+  --drawer-line-thickness: var(--app-line-thickness);
   --drawer-viewport-inset: 0px;
 }
 
-:host [part="content"] {
-  height: calc(100% - var(--app-content-offset-top));
+:host [part="nav-body"] {
+  height: 100%;
+  width: var(--app-nav-width);
+  flex-direction: column;
+  flex: 1;
+  display: flex;
+  overflow: auto;
+}
+
+:host [part="view"] {
+  border-color: var(--app-view-border-color);
+  border-radius: var(--app-view-border-radius);
+  border-style: var(--app-view-border-style);
+  border-width: var(--app-view-border-width);
+}
+
+:host [part="body"] {
+  height: calc(100% - var(--app-body-offset-top));
   flex-direction: row;
   width: 100%;
   display: flex;
 }
 
-:host [part="content"] [part="main"] {
+:host [part="body"] [part="main"] {
   flex: 1;
   width: 100%;
   overflow: auto;
 }
 
-:host [part="content"] [part="rail"] {
-  overflow: auto;
-}
-
-:host [part="nav"] {
-  height: 100%;
-  width: var(--app-drawer-width);
-  flex-direction: column;
-  flex: 1;
-  display: flex;
+:host [part="body"] [part="rail"] {
   overflow: auto;
 }
 
@@ -230115,10 +230535,11 @@ function fDe() {
 	return B`
 :host {
   --app-background-color: var(--joy-scheme-background);
-  --app-border-radius: none;
-  --app-content-offset-top: none;
-  --app-drawer-height: 100%;
-  --app-drawer-width: 320px;
+  --app-body-offset-top: none;
+  --app-border-color: unset;
+  --app-border-radius: unset;
+  --app-border-style: solid;
+  --app-border-width: unset;
   --app-font-family: var(--joy-typography-body1-font-family);
   --app-font-letter-spacing: var(--joy-typography-body1-letter-spacing);
   --app-font-line-height: var(--joy-typography-body1-line-height);
@@ -230129,6 +230550,8 @@ function fDe() {
   --app-foreground-color: var(--joy-scheme-foreground);
   --app-gap: var(--joy-layout-space);
   --app-line-thickness: var(--joy-layout-thickness);
+  --app-nav-height: 100%;
+  --app-nav-width: 320px;
   --app-padding-bottom: unset;
   --app-padding-left: unset;
   --app-padding-right: unset;
@@ -230143,6 +230566,10 @@ function fDe() {
   --app-transition-mode: ease;
   --app-transition-property: background-color, color, border-color, opacity, box-shadow, translate;
   --app-translate: none;
+  --app-view-border-color: unset;
+  --app-view-border-radius: unset;
+  --app-view-border-style: solid;
+  --app-view-border-width: unset;
 }
 
 @media screen and (prefers-reduced-motion: reduce) {
@@ -230185,7 +230612,10 @@ function fDe() {
   transition-property: var(--app-transition-property);
   background-color: var(--app-background-color);
   color: var(--app-foreground-color);
+  border-color: var(--app-border-color);
   border-radius: var(--app-border-radius);
+  border-style: var(--app-border-style);
+  border-width: var(--app-border-width);
   width: 100vw;
   height: 100vh;
   display: block;
@@ -230194,35 +230624,43 @@ function fDe() {
   overflow: clip;
 }
 
-:host [part="drawer"] {
-  --drawer-width: var(--app-drawer-width);
-  --drawer-height: var(--app-drawer-height);
+:host [part="nav"] {
+  --drawer-width: var(--app-nav-width);
+  --drawer-height: var(--app-nav-height);
+  --drawer-line-thickness: var(--app-line-thickness);
   --drawer-viewport-inset: 0px;
 }
 
-:host [part="content"] {
-  height: calc(100% - var(--app-content-offset-top));
+:host [part="nav-body"] {
+  height: 100%;
+  width: var(--app-nav-width);
+  flex-direction: column;
+  flex: 1;
+  display: flex;
+  overflow: auto;
+}
+
+:host [part="view"] {
+  border-color: var(--app-view-border-color);
+  border-radius: var(--app-view-border-radius);
+  border-style: var(--app-view-border-style);
+  border-width: var(--app-view-border-width);
+}
+
+:host [part="body"] {
+  height: calc(100% - var(--app-body-offset-top));
   flex-direction: row;
   width: 100%;
   display: flex;
 }
 
-:host [part="content"] [part="main"] {
+:host [part="body"] [part="main"] {
   flex: 1;
   width: 100%;
   overflow: auto;
 }
 
-:host [part="content"] [part="rail"] {
-  overflow: auto;
-}
-
-:host [part="nav"] {
-  height: 100%;
-  width: var(--app-drawer-width);
-  flex-direction: column;
-  flex: 1;
-  display: flex;
+:host [part="body"] [part="rail"] {
   overflow: auto;
 }
 
@@ -230238,10 +230676,11 @@ function pDe() {
 	return B`
 :host {
   --app-background-color: var(--memphis-scheme-background);
+  --app-body-offset-top: unset;
+  --app-border-color: unset;
   --app-border-radius: unset;
-  --app-content-offset-top: unset;
-  --app-drawer-height: 100%;
-  --app-drawer-width: 320px;
+  --app-border-style: solid;
+  --app-border-width: unset;
   --app-font-family: var(--memphis-typography-body1-font-family);
   --app-font-letter-spacing: var(--memphis-typography-body1-letter-spacing);
   --app-font-line-height: var(--memphis-typography-body1-line-height);
@@ -230252,6 +230691,8 @@ function pDe() {
   --app-foreground-color: var(--memphis-scheme-foreground);
   --app-gap: var(--memphis-layout-space);
   --app-line-thickness: var(--memphis-layout-thickness);
+  --app-nav-height: 100%;
+  --app-nav-width: 320px;
   --app-padding-bottom: unset;
   --app-padding-left: unset;
   --app-padding-right: unset;
@@ -230266,6 +230707,10 @@ function pDe() {
   --app-transition-mode: ease;
   --app-transition-property: background-color, color, border-color, opacity, box-shadow, translate;
   --app-translate: none;
+  --app-view-border-color: unset;
+  --app-view-border-radius: unset;
+  --app-view-border-style: solid;
+  --app-view-border-width: unset;
 }
 
 @media screen and (prefers-reduced-motion: reduce) {
@@ -230308,7 +230753,10 @@ function pDe() {
   transition-property: var(--app-transition-property);
   background-color: var(--app-background-color);
   color: var(--app-foreground-color);
+  border-color: var(--app-border-color);
   border-radius: var(--app-border-radius);
+  border-style: var(--app-border-style);
+  border-width: var(--app-border-width);
   width: 100vw;
   height: 100vh;
   display: block;
@@ -230317,35 +230765,43 @@ function pDe() {
   overflow: clip;
 }
 
-:host [part="drawer"] {
-  --drawer-width: var(--app-drawer-width);
-  --drawer-height: var(--app-drawer-height);
+:host [part="nav"] {
+  --drawer-width: var(--app-nav-width);
+  --drawer-height: var(--app-nav-height);
+  --drawer-line-thickness: var(--app-line-thickness);
   --drawer-viewport-inset: 0px;
 }
 
-:host [part="content"] {
-  height: calc(100% - var(--app-content-offset-top));
+:host [part="nav-body"] {
+  height: 100%;
+  width: var(--app-nav-width);
+  flex-direction: column;
+  flex: 1;
+  display: flex;
+  overflow: auto;
+}
+
+:host [part="view"] {
+  border-color: var(--app-view-border-color);
+  border-radius: var(--app-view-border-radius);
+  border-style: var(--app-view-border-style);
+  border-width: var(--app-view-border-width);
+}
+
+:host [part="body"] {
+  height: calc(100% - var(--app-body-offset-top));
   flex-direction: row;
   width: 100%;
   display: flex;
 }
 
-:host [part="content"] [part="main"] {
+:host [part="body"] [part="main"] {
   flex: 1;
   width: 100%;
   overflow: auto;
 }
 
-:host [part="content"] [part="rail"] {
-  overflow: auto;
-}
-
-:host [part="nav"] {
-  height: 100%;
-  width: var(--app-drawer-width);
-  flex-direction: column;
-  flex: 1;
-  display: flex;
+:host [part="body"] [part="rail"] {
   overflow: auto;
 }
 
@@ -230433,7 +230889,7 @@ var W7 = function(e, t, n, r) {
 		}
 	}
 	onApplyTemplate() {
-		super.onApplyTemplate(), this._contentElement = this.getTemplatePart("content"), this._headerElement = this.getTemplatePart("header"), this._drawerElement = this.getTemplatePart("drawer");
+		super.onApplyTemplate(), this._contentElement = this.getTemplatePart("main"), this._headerElement = this.getTemplatePart("header"), this._drawerElement = this.getTemplatePart("nav");
 	}
 	onIsNavOpenPropertyChanged(e, t) {
 		this._headerElement.isToggled = t ?? !1;