@breadstone/mosaik-elements-svelte 0.1.47 → 0.1.49

package/index.mjs

@@ -177680,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 {
@@ -177691,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;
@@ -177735,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;
@@ -177749,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 {
@@ -177760,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;
@@ -177804,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;
@@ -177818,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 {
@@ -177829,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;
@@ -177873,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;
@@ -177896,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");
 	}
 };
@@ -177927,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",
@@ -179477,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;
@@ -179726,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;
@@ -179982,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;
@@ -180267,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 {
@@ -180375,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;
@@ -180426,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;
 }
@@ -180465,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;
@@ -180516,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;
 }
@@ -180555,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;
@@ -180606,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;
 }
@@ -180656,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";
@@ -180674,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;
 	}
@@ -180689,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(() => {
@@ -180731,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", [])
@@ -199246,7 +199301,9 @@ var n6;
 		variant: Gy.DEFAULTS.variant,
 		appearance: Jx.DEFAULTS.appearance,
 		total: 0,
+		totalRecords: 0,
 		size: 20,
+		rows: 20,
 		sizes: [
 			20,
 			50,
@@ -199254,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
@@ -199266,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;
@@ -199305,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}"
@@ -199335,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}"
@@ -199345,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}"
@@ -199359,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}"
@@ -199372,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}"
@@ -199390,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
@@ -199459,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;
 }
 
     `;
@@ -199525,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;
 }
 
     `;
@@ -199591,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;
 }
 
     `;
@@ -199619,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";
@@ -199630,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;
@@ -199660,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);
@@ -199684,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;
 	}
@@ -199705,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([
@@ -199735,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])
@@ -199755,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
@@ -199762,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", [])
@@ -225040,27 +225335,18 @@ l7([
 //#endregion
 //#region ../mosaik-elements-foundation/dist/Controls/Components/Selectors/Tab/TabPanelElementTemplate.js
 function f7(e) {
+	let t = e.placement === e7.Left || e.placement === e7.Right ? K.Vertical : K.Horizontal;
 	return V`
-        ${U(e.hasScrollableContent, () => V`
-        <mosaik-button part="startScrollButton"
-                       tabindex="-1"
-                       .size="${G.Large}"
-                       .icon="${X.chevronLeft}"
-                       .disabled="${e.canScrollToStart}"
-                       @click="${() => e.scrollByTabOffset("before")}"></mosaik-button>
-        `)}
-        <div part="content"
-             @scroll="${(t) => e.onScroll(t)}">
+        <mosaik-scroll part="scroll"
+                       exportparts="scroller:content, scrollButtonPrev:startScrollButton, scrollButtonNext:endScrollButton"
+                       .dir="${e.dir}"
+                       .lang="${e.lang}"
+                       .orientation="${t}"
+                       .showScrollButtons="${!0}"
+                       .showScrollbar="${!1}"
+                       @changed="${() => e.onScrollStateChanged()}">
             <slot></slot>
-        </div>
-        ${U(e.hasScrollableContent, () => V`
-        <mosaik-button part="endScrollButton"
-                       tabindex="-1"
-                       size="large"
-                       .icon="${X.chevronRight}"
-                       .disabled="${e.canScrollToEnd}"
-                       @click="${() => e.scrollByTabOffset("after")}"></mosaik-button>
-        `)}
+        </mosaik-scroll>
     `;
 }
 //#endregion
@@ -225124,33 +225410,45 @@ function gEe() {
   flex-direction: row;
   flex: 1;
   justify-content: stretch;
+  min-width: 0;
+  min-height: 0;
   display: flex;
 }
 
-:host [part="content"] {
-  scroll-behavior: smooth;
-  display: flex;
-  overflow: hidden;
+:host [part="scroll"] {
+  flex: 1;
+  width: 100%;
+  min-width: 0;
+  height: 100%;
+  min-height: 0;
+}
+
+:host([placement="top"]:not([alignment="stretch"])) slot::slotted(mosaik-tab-strip), :host([placement="bottom"]:not([alignment="stretch"])) slot::slotted(mosaik-tab-strip) {
+  flex: none;
+  width: max-content;
+}
+
+:host([placement="left"]:not([alignment="stretch"])) slot::slotted(mosaik-tab-strip), :host([placement="right"]:not([alignment="stretch"])) slot::slotted(mosaik-tab-strip) {
+  flex: none;
+  height: max-content;
 }
 
-:host([alignment="start"]) {
+:host([alignment="start"]) [part="scroll"]::part(content) {
   justify-content: flex-start;
 }
 
-:host([alignment="center"]) {
+:host([alignment="center"]) [part="scroll"]::part(content) {
   justify-content: center;
 }
 
-:host([alignment="end"]) {
+:host([alignment="end"]) [part="scroll"]::part(content) {
   justify-content: flex-end;
 }
 
-:host([alignment="stretch"]) {
-  justify-content: stretch;
-}
-
-:host([alignment="stretch"]) [part="content"] {
+:host([alignment="stretch"]) slot::slotted(mosaik-tab-strip) {
   flex: 1;
+  width: 100%;
+  height: 100%;
 }
 
     `;
@@ -225216,33 +225514,45 @@ function _Ee() {
   flex-direction: row;
   flex: 1;
   justify-content: stretch;
+  min-width: 0;
+  min-height: 0;
   display: flex;
 }
 
-:host [part="content"] {
-  scroll-behavior: smooth;
-  display: flex;
-  overflow: hidden;
+:host [part="scroll"] {
+  flex: 1;
+  width: 100%;
+  min-width: 0;
+  height: 100%;
+  min-height: 0;
+}
+
+:host([placement="top"]:not([alignment="stretch"])) slot::slotted(mosaik-tab-strip), :host([placement="bottom"]:not([alignment="stretch"])) slot::slotted(mosaik-tab-strip) {
+  flex: none;
+  width: max-content;
+}
+
+:host([placement="left"]:not([alignment="stretch"])) slot::slotted(mosaik-tab-strip), :host([placement="right"]:not([alignment="stretch"])) slot::slotted(mosaik-tab-strip) {
+  flex: none;
+  height: max-content;
 }
 
-:host([alignment="start"]) {
+:host([alignment="start"]) [part="scroll"]::part(content) {
   justify-content: flex-start;
 }
 
-:host([alignment="center"]) {
+:host([alignment="center"]) [part="scroll"]::part(content) {
   justify-content: center;
 }
 
-:host([alignment="end"]) {
+:host([alignment="end"]) [part="scroll"]::part(content) {
   justify-content: flex-end;
 }
 
-:host([alignment="stretch"]) {
-  justify-content: stretch;
-}
-
-:host([alignment="stretch"]) [part="content"] {
+:host([alignment="stretch"]) slot::slotted(mosaik-tab-strip) {
   flex: 1;
+  width: 100%;
+  height: 100%;
 }
 
     `;
@@ -225308,33 +225618,45 @@ function vEe() {
   flex-direction: row;
   flex: 1;
   justify-content: stretch;
+  min-width: 0;
+  min-height: 0;
   display: flex;
 }
 
-:host [part="content"] {
-  scroll-behavior: smooth;
-  display: flex;
-  overflow: hidden;
+:host [part="scroll"] {
+  flex: 1;
+  width: 100%;
+  min-width: 0;
+  height: 100%;
+  min-height: 0;
 }
 
-:host([alignment="start"]) {
+:host([placement="top"]:not([alignment="stretch"])) slot::slotted(mosaik-tab-strip), :host([placement="bottom"]:not([alignment="stretch"])) slot::slotted(mosaik-tab-strip) {
+  flex: none;
+  width: max-content;
+}
+
+:host([placement="left"]:not([alignment="stretch"])) slot::slotted(mosaik-tab-strip), :host([placement="right"]:not([alignment="stretch"])) slot::slotted(mosaik-tab-strip) {
+  flex: none;
+  height: max-content;
+}
+
+:host([alignment="start"]) [part="scroll"]::part(content) {
   justify-content: flex-start;
 }
 
-:host([alignment="center"]) {
+:host([alignment="center"]) [part="scroll"]::part(content) {
   justify-content: center;
 }
 
-:host([alignment="end"]) {
+:host([alignment="end"]) [part="scroll"]::part(content) {
   justify-content: flex-end;
 }
 
-:host([alignment="stretch"]) {
-  justify-content: stretch;
-}
-
-:host([alignment="stretch"]) [part="content"] {
+:host([alignment="stretch"]) slot::slotted(mosaik-tab-strip) {
   flex: 1;
+  width: 100%;
+  height: 100%;
 }
 
     `;
@@ -225349,7 +225671,7 @@ var p7 = function(e, t, n, r) {
 }, m7 = function(e, t) {
 	if (typeof Reflect == "object" && typeof Reflect.metadata == "function") return Reflect.metadata(e, t);
 }, h7 = class extends F(Y(J(j))) {
-	_containerElement;
+	_scrollElement;
 	_hasScrollableContent;
 	_canScrollToStart;
 	_canScrollToEnd;
@@ -225358,7 +225680,7 @@ var p7 = function(e, t, n, r) {
 	_hasIndicator;
 	_enableGestures;
 	constructor() {
-		super(), this._alignment = $5.Start, this._placement = e7.Top, this._hasScrollableContent = !1, this._canScrollToStart = !0, this._canScrollToEnd = !1, this._hasIndicator = !1, this._enableGestures = !1;
+		super(), this._alignment = $5.Start, this._placement = e7.Top, this._scrollElement = null, this._hasScrollableContent = !1, this._canScrollToStart = !1, this._canScrollToEnd = !1, this._hasIndicator = !1, this._enableGestures = !1;
 	}
 	static get is() {
 		return "mosaik-tab-panel";
@@ -225409,12 +225731,13 @@ var p7 = function(e, t, n, r) {
 		return f7(this);
 	}
 	onApplyTemplate() {
-		super.onApplyTemplate(), this._containerElement = this.getTemplatePart("content"), this.hasScrollableContent = this._containerElement.scrollWidth > this._containerElement.clientWidth;
+		super.onApplyTemplate(), this._scrollElement = this.getTemplatePart("scroll"), this.syncScrollState();
 	}
-	scrollByTabOffset(e) {}
-	onScroll(e) {
-		let t = e.target;
-		this.canScrollToEnd = !(t.scrollWidth <= Math.abs(this._containerElement.scrollLeft) + this._containerElement.offsetWidth), this.canScrollToStart = this._containerElement.scrollLeft !== 0;
+	onScrollStateChanged() {
+		this.syncScrollState();
+	}
+	syncScrollState() {
+		this._scrollElement && (this.hasScrollableContent = this._scrollElement.isScrollable, this.canScrollToStart = this._scrollElement.isScrollable && !this._scrollElement.isAtScrollStart, this.canScrollToEnd = this._scrollElement.isScrollable && !this._scrollElement.isAtScrollEnd);
 	}
 };
 p7([
@@ -225472,7 +225795,7 @@ p7([
 		mode: "open",
 		delegatesFocus: !0
 	},
-	imports: [MS]
+	imports: [V0]
 }), m7("design:paramtypes", [])], h7);
 //#endregion
 //#region ../mosaik-elements-foundation/dist/Controls/Components/Selectors/Tab/Themes/TabElement.Cosmopolitan.js
@@ -225680,6 +226003,10 @@ function yEe() {
   writing-mode: vertical-lr;
 }
 
+:host([placement="left"]) [part="root"] [part="tabPanel"] [part="tabStrip"] [part="tabStripItem"]::part(label) {
+  transform: rotate(180deg);
+}
+
 :host([placement="right"]) [part="root"] {
   flex-direction: row-reverse;
 }
@@ -225915,6 +226242,10 @@ function bEe() {
   writing-mode: vertical-lr;
 }
 
+:host([placement="left"]) [part="root"] [part="tabPanel"] [part="tabStrip"] [part="tabStripItem"]::part(label) {
+  transform: rotate(180deg);
+}
+
 :host([placement="right"]) [part="root"] {
   flex-direction: row-reverse;
 }
@@ -226182,6 +226513,10 @@ function xEe() {
   writing-mode: vertical-lr;
 }
 
+:host([placement="left"]) [part="root"] [part="tabPanel"] [part="tabStrip"] [part="tabStripItem"]::part(label) {
+  transform: rotate(180deg);
+}
+
 :host([placement="right"]) [part="root"] {
   flex-direction: row-reverse;
 }
@@ -229458,13 +229793,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}"
@@ -229472,12 +229808,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>
@@ -229497,7 +229834,7 @@ function aDe(e) {
                               name="headerActions"></slot>
                     </mosaik-app-header>
                     `)}
-                    <div part="content">
+                    <div part="body">
                         <main part="main">
                             <slot name="content"></slot>
                         </main>
@@ -230101,10 +230438,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);
@@ -230115,6 +230453,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;
@@ -230129,6 +230469,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) {
@@ -230171,7 +230515,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;
@@ -230180,35 +230527,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;
 }
 
@@ -230220,10 +230575,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);
@@ -230234,6 +230590,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;
@@ -230248,6 +230606,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) {
@@ -230290,7 +230652,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;
@@ -230299,35 +230664,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;
 }
 
@@ -230343,10 +230716,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);
@@ -230357,6 +230731,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;
@@ -230371,6 +230747,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) {
@@ -230413,7 +230793,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;
@@ -230422,35 +230805,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;
 }
 
@@ -230538,7 +230929,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;