@breadstone/mosaik-elements-foundation 0.1.47 → 0.1.48

package/Controls/Components/Primitives/Paginator/Themes/PaginatorElement.Cosmopolitan.js

@@ -64,12 +64,38 @@ export function paginatorElementCosmopolitanStyle() {
   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;
 }
 
     `;

package/Controls/Components/Primitives/Paginator/Themes/PaginatorElement.Cosmopolitan.js.map

@@ -1 +1 @@
-{"version":3,"file":"PaginatorElement.Cosmopolitan.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Primitives/Paginator/Themes/PaginatorElement.Cosmopolitan.ts"],"names":[],"mappings":"AAAA,iFAAiF;AACjF,mBAAmB;AACnB,yCAAyC;AACzC,qGAAqG;AACrG,oBAAoB;AACpB,iFAAiF;AAEjF,kBAAkB;AAElB,OAAO,EAAE,GAAG,EAAkB,MAAM,wBAAwB,CAAC;AAE7D,aAAa;AAEb;;GAEG;AACH,MAAM,UAAU,iCAAiC;IAC7C,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA6DT,CAAC;AACN,CAAC"}
+{"version":3,"file":"PaginatorElement.Cosmopolitan.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Primitives/Paginator/Themes/PaginatorElement.Cosmopolitan.ts"],"names":[],"mappings":"AAAA,iFAAiF;AACjF,mBAAmB;AACnB,yCAAyC;AACzC,qGAAqG;AACrG,oBAAoB;AACpB,iFAAiF;AAEjF,kBAAkB;AAElB,OAAO,EAAE,GAAG,EAAkB,MAAM,wBAAwB,CAAC;AAE7D,aAAa;AAEb;;GAEG;AACH,MAAM,UAAU,iCAAiC;IAC7C,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAuFT,CAAC;AACN,CAAC"}

package/Controls/Components/Primitives/Paginator/Themes/PaginatorElement.Joy.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PaginatorElement.Joy.d.ts","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Primitives/Paginator/Themes/PaginatorElement.Joy.ts"],"names":[],"mappings":"AASA,OAAO,EAAO,KAAK,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAI7D;;GAEG;AACH,wBAAgB,wBAAwB,IAAI,SAAS,CA+DpD"}
+{"version":3,"file":"PaginatorElement.Joy.d.ts","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Primitives/Paginator/Themes/PaginatorElement.Joy.ts"],"names":[],"mappings":"AASA,OAAO,EAAO,KAAK,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAI7D;;GAEG;AACH,wBAAgB,wBAAwB,IAAI,SAAS,CAyFpD"}

package/Controls/Components/Primitives/Paginator/Themes/PaginatorElement.Joy.js

@@ -64,12 +64,38 @@ export function paginatorElementJoyStyle() {
   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;
 }
 
     `;

package/Controls/Components/Primitives/Paginator/Themes/PaginatorElement.Joy.js.map

@@ -1 +1 @@
-{"version":3,"file":"PaginatorElement.Joy.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Primitives/Paginator/Themes/PaginatorElement.Joy.ts"],"names":[],"mappings":"AAAA,iFAAiF;AACjF,mBAAmB;AACnB,yCAAyC;AACzC,qGAAqG;AACrG,oBAAoB;AACpB,iFAAiF;AAEjF,kBAAkB;AAElB,OAAO,EAAE,GAAG,EAAkB,MAAM,wBAAwB,CAAC;AAE7D,aAAa;AAEb;;GAEG;AACH,MAAM,UAAU,wBAAwB;IACpC,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA6DT,CAAC;AACN,CAAC"}
+{"version":3,"file":"PaginatorElement.Joy.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Primitives/Paginator/Themes/PaginatorElement.Joy.ts"],"names":[],"mappings":"AAAA,iFAAiF;AACjF,mBAAmB;AACnB,yCAAyC;AACzC,qGAAqG;AACrG,oBAAoB;AACpB,iFAAiF;AAEjF,kBAAkB;AAElB,OAAO,EAAE,GAAG,EAAkB,MAAM,wBAAwB,CAAC;AAE7D,aAAa;AAEb;;GAEG;AACH,MAAM,UAAU,wBAAwB;IACpC,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAuFT,CAAC;AACN,CAAC"}

package/Controls/Components/Primitives/Paginator/Themes/PaginatorElement.Memphis.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PaginatorElement.Memphis.d.ts","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Primitives/Paginator/Themes/PaginatorElement.Memphis.ts"],"names":[],"mappings":"AASA,OAAO,EAAO,KAAK,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAI7D;;GAEG;AACH,wBAAgB,4BAA4B,IAAI,SAAS,CA+DxD"}
+{"version":3,"file":"PaginatorElement.Memphis.d.ts","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Primitives/Paginator/Themes/PaginatorElement.Memphis.ts"],"names":[],"mappings":"AASA,OAAO,EAAO,KAAK,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAI7D;;GAEG;AACH,wBAAgB,4BAA4B,IAAI,SAAS,CAyFxD"}

package/Controls/Components/Primitives/Paginator/Themes/PaginatorElement.Memphis.js

@@ -64,12 +64,38 @@ export function paginatorElementMemphisStyle() {
   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;
 }
 
     `;

package/Controls/Components/Primitives/Paginator/Themes/PaginatorElement.Memphis.js.map

@@ -1 +1 @@
-{"version":3,"file":"PaginatorElement.Memphis.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Primitives/Paginator/Themes/PaginatorElement.Memphis.ts"],"names":[],"mappings":"AAAA,iFAAiF;AACjF,mBAAmB;AACnB,yCAAyC;AACzC,qGAAqG;AACrG,oBAAoB;AACpB,iFAAiF;AAEjF,kBAAkB;AAElB,OAAO,EAAE,GAAG,EAAkB,MAAM,wBAAwB,CAAC;AAE7D,aAAa;AAEb;;GAEG;AACH,MAAM,UAAU,4BAA4B;IACxC,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA6DT,CAAC;AACN,CAAC"}
+{"version":3,"file":"PaginatorElement.Memphis.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Primitives/Paginator/Themes/PaginatorElement.Memphis.ts"],"names":[],"mappings":"AAAA,iFAAiF;AACjF,mBAAmB;AACnB,yCAAyC;AACzC,qGAAqG;AACrG,oBAAoB;AACpB,iFAAiF;AAEjF,kBAAkB;AAElB,OAAO,EAAE,GAAG,EAAkB,MAAM,wBAAwB,CAAC;AAE7D,aAAa;AAEb;;GAEG;AACH,MAAM,UAAU,4BAA4B;IACxC,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAuFT,CAAC;AACN,CAAC"}

package/Controls/Components/Primitives/Paginator/intl/PaginatorElementIntl.d.ts

@@ -11,6 +11,7 @@ export declare class PaginatorElementIntl extends ElementIntlBase {
     private _nextPageLabel;
     private _previousPageLabel;
     private _itemsPerPageLabel;
+    private _pageLabel;
     /**
      * Constructs a new instance of the `PaginatorElementIntl` class.
      *
@@ -60,5 +61,13 @@ export declare class PaginatorElementIntl extends ElementIntlBase {
      */
     get itemsPerPageLabel(): string;
     set itemsPerPageLabel(value: string);
+    /**
+     * Gets or sets the page button label template.
+     * Use {0} for the page number.
+     *
+     * @public
+     */
+    get pageLabel(): string;
+    set pageLabel(value: string);
 }
 //# sourceMappingURL=PaginatorElementIntl.d.ts.map

package/Controls/Components/Primitives/Paginator/intl/PaginatorElementIntl.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PaginatorElementIntl.d.ts","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Primitives/Paginator/intl/PaginatorElementIntl.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,eAAe,EAAE,MAAM,+CAA+C,CAAC;AAIhF;;;;GAIG;AACH,qBAAa,oBACT,SAAQ,eAAe;IAIvB,OAAO,CAAC,WAAW,CAAS;IAC5B,OAAO,CAAC,eAAe,CAAS;IAChC,OAAO,CAAC,cAAc,CAAS;IAC/B,OAAO,CAAC,cAAc,CAAS;IAC/B,OAAO,CAAC,kBAAkB,CAAS;IACnC,OAAO,CAAC,kBAAkB,CAAS;IAMnC;;;;OAIG;gBACgB,MAAM,CAAC,EAAE,MAAM;IAelC;;;;;OAKG;IACH,IAAW,UAAU,IAAI,MAAM,CAE9B;IACD,IAAW,UAAU,CAAC,KAAK,EAAE,MAAM,EAElC;IAED;;;;OAIG;IACH,IAAW,cAAc,IAAI,MAAM,CAElC;IACD,IAAW,cAAc,CAAC,KAAK,EAAE,MAAM,EAEtC;IAED;;;;OAIG;IACH,IAAW,aAAa,IAAI,MAAM,CAEjC;IACD,IAAW,aAAa,CAAC,KAAK,EAAE,MAAM,EAErC;IAED;;;;OAIG;IACH,IAAW,aAAa,IAAI,MAAM,CAEjC;IACD,IAAW,aAAa,CAAC,KAAK,EAAE,MAAM,EAErC;IAED;;;;OAIG;IACH,IAAW,iBAAiB,IAAI,MAAM,CAErC;IACD,IAAW,iBAAiB,CAAC,KAAK,EAAE,MAAM,EAEzC;IAED;;;;OAIG;IACH,IAAW,iBAAiB,IAAI,MAAM,CAErC;IACD,IAAW,iBAAiB,CAAC,KAAK,EAAE,MAAM,EAEzC;CAIJ"}
+{"version":3,"file":"PaginatorElementIntl.d.ts","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Primitives/Paginator/intl/PaginatorElementIntl.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,eAAe,EAAE,MAAM,+CAA+C,CAAC;AAIhF;;;;GAIG;AACH,qBAAa,oBACT,SAAQ,eAAe;IAIvB,OAAO,CAAC,WAAW,CAAS;IAC5B,OAAO,CAAC,eAAe,CAAS;IAChC,OAAO,CAAC,cAAc,CAAS;IAC/B,OAAO,CAAC,cAAc,CAAS;IAC/B,OAAO,CAAC,kBAAkB,CAAS;IACnC,OAAO,CAAC,kBAAkB,CAAS;IACnC,OAAO,CAAC,UAAU,CAAS;IAM3B;;;;OAIG;gBACgB,MAAM,CAAC,EAAE,MAAM;IAgBlC;;;;;OAKG;IACH,IAAW,UAAU,IAAI,MAAM,CAE9B;IACD,IAAW,UAAU,CAAC,KAAK,EAAE,MAAM,EAElC;IAED;;;;OAIG;IACH,IAAW,cAAc,IAAI,MAAM,CAElC;IACD,IAAW,cAAc,CAAC,KAAK,EAAE,MAAM,EAEtC;IAED;;;;OAIG;IACH,IAAW,aAAa,IAAI,MAAM,CAEjC;IACD,IAAW,aAAa,CAAC,KAAK,EAAE,MAAM,EAErC;IAED;;;;OAIG;IACH,IAAW,aAAa,IAAI,MAAM,CAEjC;IACD,IAAW,aAAa,CAAC,KAAK,EAAE,MAAM,EAErC;IAED;;;;OAIG;IACH,IAAW,iBAAiB,IAAI,MAAM,CAErC;IACD,IAAW,iBAAiB,CAAC,KAAK,EAAE,MAAM,EAEzC;IAED;;;;OAIG;IACH,IAAW,iBAAiB,IAAI,MAAM,CAErC;IACD,IAAW,iBAAiB,CAAC,KAAK,EAAE,MAAM,EAEzC;IAED;;;;;OAKG;IACH,IAAW,SAAS,IAAI,MAAM,CAE7B;IACD,IAAW,SAAS,CAAC,KAAK,EAAE,MAAM,EAEjC;CAIJ"}

package/Controls/Components/Primitives/Paginator/intl/PaginatorElementIntl.js

@@ -14,6 +14,7 @@ export class PaginatorElementIntl extends ElementIntlBase {
     _nextPageLabel;
     _previousPageLabel;
     _itemsPerPageLabel;
+    _pageLabel;
     // #endregion
     // #region Ctor
     /**
@@ -29,6 +30,7 @@ export class PaginatorElementIntl extends ElementIntlBase {
         this._nextPageLabel = 'Next page';
         this._previousPageLabel = 'Previous page';
         this._itemsPerPageLabel = 'Items per page';
+        this._pageLabel = 'Page {0}';
     }
     // #endregion
     // #region Properties
@@ -99,5 +101,17 @@ export class PaginatorElementIntl extends ElementIntlBase {
     set itemsPerPageLabel(value) {
         this._itemsPerPageLabel = value;
     }
+    /**
+     * Gets or sets the page button label template.
+     * Use {0} for the page number.
+     *
+     * @public
+     */
+    get pageLabel() {
+        return this._pageLabel;
+    }
+    set pageLabel(value) {
+        this._pageLabel = value;
+    }
 }
 //# sourceMappingURL=PaginatorElementIntl.js.map

package/Controls/Components/Primitives/Paginator/intl/PaginatorElementIntl.js.map

@@ -1 +1 @@
-{"version":3,"file":"PaginatorElementIntl.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Primitives/Paginator/intl/PaginatorElementIntl.ts"],"names":[],"mappings":"AAAA,kBAAkB;AAElB,OAAO,EAAE,eAAe,EAAE,MAAM,+CAA+C,CAAC;AAEhF,aAAa;AAEb;;;;GAIG;AACH,MAAM,OAAO,oBACT,SAAQ,eAAe;IAEvB,iBAAiB;IAET,WAAW,CAAS;IACpB,eAAe,CAAS;IACxB,cAAc,CAAS;IACvB,cAAc,CAAS;IACvB,kBAAkB,CAAS;IAC3B,kBAAkB,CAAS;IAEnC,aAAa;IAEb,eAAe;IAEf;;;;OAIG;IACH,YAAmB,MAAe;QAC9B,KAAK,CAAC,MAAM,CAAC,CAAC;QAEd,IAAI,CAAC,WAAW,GAAG,gBAAgB,CAAC;QACpC,IAAI,CAAC,eAAe,GAAG,YAAY,CAAC;QACpC,IAAI,CAAC,cAAc,GAAG,WAAW,CAAC;QAClC,IAAI,CAAC,cAAc,GAAG,WAAW,CAAC;QAClC,IAAI,CAAC,kBAAkB,GAAG,eAAe,CAAC;QAC1C,IAAI,CAAC,kBAAkB,GAAG,gBAAgB,CAAC;IAC/C,CAAC;IAED,aAAa;IAEb,qBAAqB;IAErB;;;;;OAKG;IACH,IAAW,UAAU;QACjB,OAAO,IAAI,CAAC,WAAW,CAAC;IAC5B,CAAC;IACD,IAAW,UAAU,CAAC,KAAa;QAC/B,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;IAC7B,CAAC;IAED;;;;OAIG;IACH,IAAW,cAAc;QACrB,OAAO,IAAI,CAAC,eAAe,CAAC;IAChC,CAAC;IACD,IAAW,cAAc,CAAC,KAAa;QACnC,IAAI,CAAC,eAAe,GAAG,KAAK,CAAC;IACjC,CAAC;IAED;;;;OAIG;IACH,IAAW,aAAa;QACpB,OAAO,IAAI,CAAC,cAAc,CAAC;IAC/B,CAAC;IACD,IAAW,aAAa,CAAC,KAAa;QAClC,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;IAChC,CAAC;IAED;;;;OAIG;IACH,IAAW,aAAa;QACpB,OAAO,IAAI,CAAC,cAAc,CAAC;IAC/B,CAAC;IACD,IAAW,aAAa,CAAC,KAAa;QAClC,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;IAChC,CAAC;IAED;;;;OAIG;IACH,IAAW,iBAAiB;QACxB,OAAO,IAAI,CAAC,kBAAkB,CAAC;IACnC,CAAC;IACD,IAAW,iBAAiB,CAAC,KAAa;QACtC,IAAI,CAAC,kBAAkB,GAAG,KAAK,CAAC;IACpC,CAAC;IAED;;;;OAIG;IACH,IAAW,iBAAiB;QACxB,OAAO,IAAI,CAAC,kBAAkB,CAAC;IACnC,CAAC;IACD,IAAW,iBAAiB,CAAC,KAAa;QACtC,IAAI,CAAC,kBAAkB,GAAG,KAAK,CAAC;IACpC,CAAC;CAIJ"}
+{"version":3,"file":"PaginatorElementIntl.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Primitives/Paginator/intl/PaginatorElementIntl.ts"],"names":[],"mappings":"AAAA,kBAAkB;AAElB,OAAO,EAAE,eAAe,EAAE,MAAM,+CAA+C,CAAC;AAEhF,aAAa;AAEb;;;;GAIG;AACH,MAAM,OAAO,oBACT,SAAQ,eAAe;IAEvB,iBAAiB;IAET,WAAW,CAAS;IACpB,eAAe,CAAS;IACxB,cAAc,CAAS;IACvB,cAAc,CAAS;IACvB,kBAAkB,CAAS;IAC3B,kBAAkB,CAAS;IAC3B,UAAU,CAAS;IAE3B,aAAa;IAEb,eAAe;IAEf;;;;OAIG;IACH,YAAmB,MAAe;QAC9B,KAAK,CAAC,MAAM,CAAC,CAAC;QAEd,IAAI,CAAC,WAAW,GAAG,gBAAgB,CAAC;QACpC,IAAI,CAAC,eAAe,GAAG,YAAY,CAAC;QACpC,IAAI,CAAC,cAAc,GAAG,WAAW,CAAC;QAClC,IAAI,CAAC,cAAc,GAAG,WAAW,CAAC;QAClC,IAAI,CAAC,kBAAkB,GAAG,eAAe,CAAC;QAC1C,IAAI,CAAC,kBAAkB,GAAG,gBAAgB,CAAC;QAC3C,IAAI,CAAC,UAAU,GAAG,UAAU,CAAC;IACjC,CAAC;IAED,aAAa;IAEb,qBAAqB;IAErB;;;;;OAKG;IACH,IAAW,UAAU;QACjB,OAAO,IAAI,CAAC,WAAW,CAAC;IAC5B,CAAC;IACD,IAAW,UAAU,CAAC,KAAa;QAC/B,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;IAC7B,CAAC;IAED;;;;OAIG;IACH,IAAW,cAAc;QACrB,OAAO,IAAI,CAAC,eAAe,CAAC;IAChC,CAAC;IACD,IAAW,cAAc,CAAC,KAAa;QACnC,IAAI,CAAC,eAAe,GAAG,KAAK,CAAC;IACjC,CAAC;IAED;;;;OAIG;IACH,IAAW,aAAa;QACpB,OAAO,IAAI,CAAC,cAAc,CAAC;IAC/B,CAAC;IACD,IAAW,aAAa,CAAC,KAAa;QAClC,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;IAChC,CAAC;IAED;;;;OAIG;IACH,IAAW,aAAa;QACpB,OAAO,IAAI,CAAC,cAAc,CAAC;IAC/B,CAAC;IACD,IAAW,aAAa,CAAC,KAAa;QAClC,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;IAChC,CAAC;IAED;;;;OAIG;IACH,IAAW,iBAAiB;QACxB,OAAO,IAAI,CAAC,kBAAkB,CAAC;IACnC,CAAC;IACD,IAAW,iBAAiB,CAAC,KAAa;QACtC,IAAI,CAAC,kBAAkB,GAAG,KAAK,CAAC;IACpC,CAAC;IAED;;;;OAIG;IACH,IAAW,iBAAiB;QACxB,OAAO,IAAI,CAAC,kBAAkB,CAAC;IACnC,CAAC;IACD,IAAW,iBAAiB,CAAC,KAAa;QACtC,IAAI,CAAC,kBAAkB,GAAG,KAAK,CAAC;IACpC,CAAC;IAED;;;;;OAKG;IACH,IAAW,SAAS;QAChB,OAAO,IAAI,CAAC,UAAU,CAAC;IAC3B,CAAC;IACD,IAAW,SAAS,CAAC,KAAa;QAC9B,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC;IAC5B,CAAC;CAIJ"}

package/Controls/Components/Shell/AppElement.d.ts

@@ -25,18 +25,21 @@ declare const AppElement_base: (abstract new (...args: Array<any>) => import("..
  * @slot nav - Navigation drawer content area for primary navigation links and menu items
  * @slot rail - The rail slot.
  *
- * @csspart content - Main content wrapper for application views and functionality
- * @csspart drawer - Navigation drawer container for side navigation elements
+ * @csspart body - View body layout containing the main and rail regions
  * @csspart header - Application header section containing branding and navigation controls
- * @csspart main - The main part.
- * @csspart nav - Navigation area within the drawer for menu items and links
- * @csspart rail - The rail part.
+ * @csspart main - Main content region for primary application views
+ * @csspart nav - Navigation drawer region
+ * @csspart nav-body - Navigation content region within the drawer
+ * @csspart rail - Secondary rail region next to the main content
+ * @csspart root - Root shell layout container
+ * @csspart view - View surface containing header, body, and footer content
  *
  * @cssprop {Color} --app-background-color - Background color for the application shell
+ * @cssprop {String} --app-border-color - The border color CSS custom property.
  * @cssprop {String} --app-border-radius - The border radius CSS custom property.
- * @cssprop {String} --app-content-offset-top - The content offset top CSS custom property.
- * @cssprop {String} --app-drawer-height - The drawer height CSS custom property.
- * @cssprop {String} --app-drawer-width - Width of the navigation drawer when expanded
+ * @cssprop {String} --app-border-style - The border style CSS custom property.
+ * @cssprop {String} --app-border-width - The border width CSS custom property.
+ * @cssprop {String} --app-body-offset-top - The body offset top CSS custom property.
  * @cssprop {String} --app-font-family - The font family CSS custom property.
  * @cssprop {String} --app-font-letter-spacing - The font letter spacing CSS custom property.
  * @cssprop {String} --app-font-line-height - The font line height CSS custom property.
@@ -47,6 +50,8 @@ declare const AppElement_base: (abstract new (...args: Array<any>) => import("..
  * @cssprop {String} --app-foreground-color - The foreground color CSS custom property.
  * @cssprop {String} --app-gap - The gap CSS custom property.
  * @cssprop {String} --app-line-thickness - The line thickness CSS custom property.
+ * @cssprop {String} --app-nav-height - The navigation drawer height CSS custom property.
+ * @cssprop {String} --app-nav-width - Width of the navigation drawer when expanded.
  * @cssprop {String} --app-padding-bottom - The padding bottom CSS custom property.
  * @cssprop {String} --app-padding-left - The padding left CSS custom property.
  * @cssprop {String} --app-padding-right - The padding right CSS custom property.
@@ -61,6 +66,10 @@ declare const AppElement_base: (abstract new (...args: Array<any>) => import("..
  * @cssprop {String} --app-transition-mode - The transition mode CSS custom property.
  * @cssprop {String} --app-transition-property - The transition property CSS custom property.
  * @cssprop {String} --app-translate - The translate CSS custom property.
+ * @cssprop {String} --app-view-border-color - The view border color CSS custom property.
+ * @cssprop {String} --app-view-border-radius - The view border radius CSS custom property.
+ * @cssprop {String} --app-view-border-style - The view border style CSS custom property.
+ * @cssprop {String} --app-view-border-width - The view border width CSS custom property.
  *
  * @dependency mosaik-app-header - The App Header element.
  * @dependency mosaik-drawer - The Drawer element.

package/Controls/Components/Shell/AppElement.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AppElement.d.ts","sourceRoot":"","sources":["../../../../src/Controls/Components/Shell/AppElement.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAC;AAKnD,OAAO,EAAE,UAAU,EAAa,MAAM,2BAA2B,CAAC;AAMlE,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAG3D,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;;AAOtD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiGG;AACH,qBAca,UACT,SAAQ,eACR,YAAW,gBAAgB,EAAE,UAAU;IAIvC,OAAO,CAAC,QAAQ,CAAC,qBAAqB,CAAuB;IAC7D,OAAO,CAAC,cAAc,CAAiB;IACvC,OAAO,CAAC,cAAc,CAAoB;IAC1C,OAAO,CAAC,eAAe,CAAe;IACtC,OAAO,CAAC,MAAM,CAAgB;IAC9B,OAAO,CAAC,UAAU,CAAU;IAC5B,OAAO,CAAC,OAAO,CAAU;IACzB,OAAO,CAAC,SAAS,CAAU;IAC3B,OAAO,CAAC,UAAU,CAAU;IAM5B;;OAEG;;IAqBH;;;;;;;OAOG;IACH,WAAkB,EAAE,IAAI,MAAM,CAE7B;IAED;;;;OAIG;IACH,IACW,KAAK,IAAI,MAAM,GAAG,IAAI,CAEhC;IACD,IAAW,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,EAKpC;IAED;;;;;OAKG;IACH,IAIW,SAAS,IAAI,OAAO,CAE9B;IACD,IAAW,SAAS,CAAC,KAAK,EAAE,OAAO,EAKlC;IAED;;;;;OAKG;IACH,IAIW,MAAM,IAAI,OAAO,CAE3B;IACD,IAAW,MAAM,CAAC,KAAK,EAAE,OAAO,EAK/B;IAED;;;;;;OAMG;IACH,IAIW,QAAQ,IAAI,OAAO,CAE7B;IACD,OAAO,KAAK,QAAQ,QAKnB;IAED;;;;;;OAMG;IACH,IAIW,SAAS,IAAI,OAAO,CAE9B;IACD,OAAO,KAAK,SAAS,QAKpB;IAED;;;;;;OAMG;IACH,IAAW,MAAM,IAAI,gBAAgB,CAEpC;IAED;;;;;;OAMG;IACH,IAAW,OAAO,IAAI,WAAW,CAEhC;IAMD;;;;OAIG;IACI,gBAAgB,IAAI,IAAI;IAI/B;;;;OAIG;IACI,cAAc,IAAI,IAAI;IAI7B;;;;OAIG;IACI,eAAe,IAAI,IAAI;IAId,aAAa,CAAC,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI;IActD;;;OAGG;cACgB,eAAe,IAAI,IAAI;IAQ1C;;OAEG;IAEH,SAAS,CAAC,0BAA0B,CAAC,KAAK,CAAC,EAAE,OAAO,EAAE,IAAI,CAAC,EAAE,OAAO,GAAG,IAAI;CAM9E;AAED;;GAEG;AACH,yBAAiB,UAAU,CAAC;IACxB,KAAY,KAAK,GAAG,gBAAgB,CAAC;CACxC;AAED;;GAEG;AACH,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,YAAY,EAAE,UAAU,CAAC;KAC5B;CACJ"}
+{"version":3,"file":"AppElement.d.ts","sourceRoot":"","sources":["../../../../src/Controls/Components/Shell/AppElement.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAC;AAKnD,OAAO,EAAE,UAAU,EAAa,MAAM,2BAA2B,CAAC;AAMlE,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAG3D,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;;AAOtD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0GG;AACH,qBAca,UACT,SAAQ,eACR,YAAW,gBAAgB,EAAE,UAAU;IAIvC,OAAO,CAAC,QAAQ,CAAC,qBAAqB,CAAuB;IAC7D,OAAO,CAAC,cAAc,CAAiB;IACvC,OAAO,CAAC,cAAc,CAAoB;IAC1C,OAAO,CAAC,eAAe,CAAe;IACtC,OAAO,CAAC,MAAM,CAAgB;IAC9B,OAAO,CAAC,UAAU,CAAU;IAC5B,OAAO,CAAC,OAAO,CAAU;IACzB,OAAO,CAAC,SAAS,CAAU;IAC3B,OAAO,CAAC,UAAU,CAAU;IAM5B;;OAEG;;IAqBH;;;;;;;OAOG;IACH,WAAkB,EAAE,IAAI,MAAM,CAE7B;IAED;;;;OAIG;IACH,IACW,KAAK,IAAI,MAAM,GAAG,IAAI,CAEhC;IACD,IAAW,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,EAKpC;IAED;;;;;OAKG;IACH,IAIW,SAAS,IAAI,OAAO,CAE9B;IACD,IAAW,SAAS,CAAC,KAAK,EAAE,OAAO,EAKlC;IAED;;;;;OAKG;IACH,IAIW,MAAM,IAAI,OAAO,CAE3B;IACD,IAAW,MAAM,CAAC,KAAK,EAAE,OAAO,EAK/B;IAED;;;;;;OAMG;IACH,IAIW,QAAQ,IAAI,OAAO,CAE7B;IACD,OAAO,KAAK,QAAQ,QAKnB;IAED;;;;;;OAMG;IACH,IAIW,SAAS,IAAI,OAAO,CAE9B;IACD,OAAO,KAAK,SAAS,QAKpB;IAED;;;;;;OAMG;IACH,IAAW,MAAM,IAAI,gBAAgB,CAEpC;IAED;;;;;;OAMG;IACH,IAAW,OAAO,IAAI,WAAW,CAEhC;IAMD;;;;OAIG;IACI,gBAAgB,IAAI,IAAI;IAI/B;;;;OAIG;IACI,cAAc,IAAI,IAAI;IAI7B;;;;OAIG;IACI,eAAe,IAAI,IAAI;IAId,aAAa,CAAC,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI;IActD;;;OAGG;cACgB,eAAe,IAAI,IAAI;IAQ1C;;OAEG;IAEH,SAAS,CAAC,0BAA0B,CAAC,KAAK,CAAC,EAAE,OAAO,EAAE,IAAI,CAAC,EAAE,OAAO,GAAG,IAAI;CAM9E;AAED;;GAEG;AACH,yBAAiB,UAAU,CAAC;IACxB,KAAY,KAAK,GAAG,gBAAgB,CAAC;CACxC;AAED;;GAEG;AACH,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,YAAY,EAAE,UAAU,CAAC;KAC5B;CACJ"}

package/Controls/Components/Shell/AppElement.js

@@ -47,18 +47,21 @@ import { appElementMemphisStyle } from './Themes/AppElement.Memphis';
  * @slot nav - Navigation drawer content area for primary navigation links and menu items
  * @slot rail - The rail slot.
  *
- * @csspart content - Main content wrapper for application views and functionality
- * @csspart drawer - Navigation drawer container for side navigation elements
+ * @csspart body - View body layout containing the main and rail regions
  * @csspart header - Application header section containing branding and navigation controls
- * @csspart main - The main part.
- * @csspart nav - Navigation area within the drawer for menu items and links
- * @csspart rail - The rail part.
+ * @csspart main - Main content region for primary application views
+ * @csspart nav - Navigation drawer region
+ * @csspart nav-body - Navigation content region within the drawer
+ * @csspart rail - Secondary rail region next to the main content
+ * @csspart root - Root shell layout container
+ * @csspart view - View surface containing header, body, and footer content
  *
  * @cssprop {Color} --app-background-color - Background color for the application shell
+ * @cssprop {String} --app-border-color - The border color CSS custom property.
  * @cssprop {String} --app-border-radius - The border radius CSS custom property.
- * @cssprop {String} --app-content-offset-top - The content offset top CSS custom property.
- * @cssprop {String} --app-drawer-height - The drawer height CSS custom property.
- * @cssprop {String} --app-drawer-width - Width of the navigation drawer when expanded
+ * @cssprop {String} --app-border-style - The border style CSS custom property.
+ * @cssprop {String} --app-border-width - The border width CSS custom property.
+ * @cssprop {String} --app-body-offset-top - The body offset top CSS custom property.
  * @cssprop {String} --app-font-family - The font family CSS custom property.
  * @cssprop {String} --app-font-letter-spacing - The font letter spacing CSS custom property.
  * @cssprop {String} --app-font-line-height - The font line height CSS custom property.
@@ -69,6 +72,8 @@ import { appElementMemphisStyle } from './Themes/AppElement.Memphis';
  * @cssprop {String} --app-foreground-color - The foreground color CSS custom property.
  * @cssprop {String} --app-gap - The gap CSS custom property.
  * @cssprop {String} --app-line-thickness - The line thickness CSS custom property.
+ * @cssprop {String} --app-nav-height - The navigation drawer height CSS custom property.
+ * @cssprop {String} --app-nav-width - Width of the navigation drawer when expanded.
  * @cssprop {String} --app-padding-bottom - The padding bottom CSS custom property.
  * @cssprop {String} --app-padding-left - The padding left CSS custom property.
  * @cssprop {String} --app-padding-right - The padding right CSS custom property.
@@ -83,6 +88,10 @@ import { appElementMemphisStyle } from './Themes/AppElement.Memphis';
  * @cssprop {String} --app-transition-mode - The transition mode CSS custom property.
  * @cssprop {String} --app-transition-property - The transition property CSS custom property.
  * @cssprop {String} --app-translate - The translate CSS custom property.
+ * @cssprop {String} --app-view-border-color - The view border color CSS custom property.
+ * @cssprop {String} --app-view-border-radius - The view border radius CSS custom property.
+ * @cssprop {String} --app-view-border-style - The view border style CSS custom property.
+ * @cssprop {String} --app-view-border-width - The view border width CSS custom property.
  *
  * @dependency mosaik-app-header - The App Header element.
  * @dependency mosaik-drawer - The Drawer element.
@@ -308,9 +317,9 @@ let AppElement = class AppElement extends Themeable(Slottable(CustomElement)) {
      */
     onApplyTemplate() {
         super.onApplyTemplate();
-        this._contentElement = this.getTemplatePart('content');
+        this._contentElement = this.getTemplatePart('main');
         this._headerElement = this.getTemplatePart('header');
-        this._drawerElement = this.getTemplatePart('drawer');
+        this._drawerElement = this.getTemplatePart('nav');
     }
     /**
      * @protected

package/Controls/Components/Shell/AppElement.js.map

@@ -1 +1 @@
-{"version":3,"file":"AppElement.js","sourceRoot":"","sources":["../../../../src/Controls/Components/Shell/AppElement.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"AppElement.js","sourceRoot":"","sources":["../../../../src/Controls/Components/Shell/AppElement.ts"],"names":[],"mappings":"AAAA,kBAAkB;;;;;;;;;;AAGlB,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAClD,OAAO,EAAE,eAAe,EAAE,MAAM,4CAA4C,CAAC;AAC7E,OAAO,EAAE,oBAAoB,EAAE,MAAM,iDAAiD,CAAC;AACvF,OAAO,EAAE,aAAa,EAAE,MAAM,gCAAgC,CAAC;AAC/D,OAAO,EAAc,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAClE,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AACtD,OAAO,EAAE,SAAS,EAAE,MAAM,qCAAqC,CAAC;AAChE,OAAO,EAAE,SAAS,EAAE,MAAM,qCAAqC,CAAC;AAChE,OAAO,EAAE,QAAQ,EAAE,MAAM,oCAAoC,CAAC;AAC9D,OAAO,EAAE,KAAK,EAAE,MAAM,iCAAiC,CAAC;AACxD,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAC3D,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AACjE,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAEtD,OAAO,EAAE,2BAA2B,EAAE,MAAM,kCAAkC,CAAC;AAC/E,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAC7D,OAAO,EAAE,sBAAsB,EAAE,MAAM,6BAA6B,CAAC;AAErE,aAAa;AAEb;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0GG;AAeI,IAAM,UAAU,GAAhB,MAAM,UACT,SAAQ,SAAS,CAAC,SAAS,CAAC,aAAa,CAAC,CAAC;IAG3C,iBAAiB;IAEA,qBAAqB,CAAuB;IACrD,cAAc,CAAiB;IAC/B,cAAc,CAAoB;IAClC,eAAe,CAAe;IAC9B,MAAM,CAAgB;IACtB,UAAU,CAAU;IACpB,OAAO,CAAU;IACjB,SAAS,CAAU;IACnB,UAAU,CAAU;IAE5B,aAAa;IAEb,eAAe;IAEf;;OAEG;IACH;QACI,KAAK,EAAE,CAAC;QAER,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;QACnB,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC;QACxB,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;QACrB,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;QACvB,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC;QACxB,IAAI,CAAC,qBAAqB,GAAG,IAAI,oBAAoB,CAAC,IAAI,EAAE;YACxD,KAAK,EAAE,eAAe,CAAC,cAAc;YACrC,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE;gBAChB,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;YAC1B,CAAC;SACJ,CAAC,CAAC;IACP,CAAC;IAED,aAAa;IAEb,qBAAqB;IAErB;;;;;;;OAOG;IACI,MAAM,KAAK,EAAE;QAChB,OAAO,YAAY,CAAC;IACxB,CAAC;IAED;;;;OAIG;IACH,IACW,KAAK;QACZ,OAAO,IAAI,CAAC,MAAM,CAAC;IACvB,CAAC;IACD,IAAW,KAAK,CAAC,KAAoB;QACjC,IAAI,CAAC,MAAM,CAAC,eAAe,CAAC,IAAI,CAAC,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC;YAC9C,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;YACpB,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;QAChC,CAAC;IACL,CAAC;IAED;;;;;OAKG;IACH,IAIW,SAAS;QAChB,OAAO,IAAI,CAAC,UAAU,CAAC;IAC3B,CAAC;IACD,IAAW,SAAS,CAAC,KAAc;QAC/B,IAAI,IAAI,CAAC,UAAU,KAAK,KAAK,EAAE,CAAC;YAC5B,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC;YACxB,IAAI,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC;QACpC,CAAC;IACL,CAAC;IAED;;;;;OAKG;IACH,IAIW,MAAM;QACb,OAAO,IAAI,CAAC,OAAO,CAAC;IACxB,CAAC;IACD,IAAW,MAAM,CAAC,KAAc;QAC5B,IAAI,IAAI,CAAC,OAAO,KAAK,KAAK,EAAE,CAAC;YACzB,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;YACrB,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;QACjC,CAAC;IACL,CAAC;IAED;;;;;;OAMG;IACH,IAIW,QAAQ;QACf,OAAO,IAAI,CAAC,SAAS,CAAC;IAC1B,CAAC;IACD,IAAY,QAAQ,CAAC,KAAc;QAC/B,IAAI,IAAI,CAAC,SAAS,KAAK,KAAK,EAAE,CAAC;YAC3B,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;YACvB,IAAI,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;QACnC,CAAC;IACL,CAAC;IAED;;;;;;OAMG;IACH,IAIW,SAAS;QAChB,OAAO,IAAI,CAAC,UAAU,CAAC;IAC3B,CAAC;IACD,IAAY,SAAS,CAAC,KAAc;QAChC,IAAI,IAAI,CAAC,UAAU,KAAK,KAAK,EAAE,CAAC;YAC5B,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC;YACxB,IAAI,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;QACnC,CAAC;IACL,CAAC;IAED;;;;;;OAMG;IACH,IAAW,MAAM;QACb,OAAO,IAAI,CAAC,cAAc,CAAC;IAC/B,CAAC;IAED;;;;;;OAMG;IACH,IAAW,OAAO;QACd,OAAO,IAAI,CAAC,eAAe,CAAC;IAChC,CAAC;IAED,aAAa;IAEb,kBAAkB;IAElB;;;;OAIG;IACI,gBAAgB;QACnB,IAAI,CAAC,SAAS,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC;IACrC,CAAC;IAED;;;;OAIG;IACI,cAAc;QACjB,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;IAC1B,CAAC;IAED;;;;OAIG;IACI,eAAe;QAClB,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;IAC3B,CAAC;IAEe,aAAa,CAAC,QAAiB;QAC3C,IAAI,QAAQ,KAAK,QAAQ,EAAE,CAAC;YACxB,MAAM,cAAc,GAAG,IAAI,CAAC,kBAAkB,CAAC,QAAQ,CAAC;iBACnD,MAAM,CAAC,CAAC,CAAC,EAAyB,EAAE,CAAC,CAAC,YAAY,gBAAgB,CAAC,CAAC;YAEzE,IAAI,cAAc,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;gBAC5B,IAAI,CAAC,cAAc,GAAG,cAAc,CAAC,CAAC,CAAC,CAAC;gBACxC,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;YAC1B,CAAC;iBAAM,CAAC;gBACJ,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;YAC3B,CAAC;QACL,CAAC;IACL,CAAC;IAED;;;OAGG;IACgB,eAAe;QAC9B,KAAK,CAAC,eAAe,EAAE,CAAC;QAExB,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,eAAe,CAAc,MAAM,CAAC,CAAC;QACjE,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,eAAe,CAAmB,QAAQ,CAAC,CAAC;QACvE,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,eAAe,CAAgB,KAAK,CAAC,CAAC;IACrE,CAAC;IAED;;OAEG;IAEO,0BAA0B,CAAC,KAAe,EAAE,IAAc;QAChE,IAAI,CAAC,cAAc,CAAC,SAAS,GAAG,IAAI,IAAI,KAAK,CAAC;IAClD,CAAC;CAIJ,CAAA;AAtLG;IAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;;uCAG1B;AAcD;IAAC,SAAS,CAAC;QACP,IAAI,EAAE,OAAO;QACb,UAAU,EAAE,IAAI;KACnB,CAAC;;;2CAGD;AAcD;IAAC,SAAS,CAAC;QACP,IAAI,EAAE,OAAO;QACb,UAAU,EAAE,IAAI;KACnB,CAAC;;;wCAGD;AAeD;IAAC,SAAS,CAAC;QACP,IAAI,EAAE,OAAO;QACb,UAAU,EAAE,IAAI;KACnB,CAAC;;;0CAGD;AAeD;IAAC,SAAS,CAAC;QACP,IAAI,EAAE,OAAO;QACb,UAAU,EAAE,IAAI;KACnB,CAAC;;;2CAGD;AA2FS;IADT,KAAK,CAAC,WAAW,EAAE,EAAE,oBAAoB,EAAE,IAAI,EAAE,CAAC;;;;4DAGlD;AA9OQ,UAAU;IAdtB,SAAS,CAAC;QACP,QAAQ,EAAE,YAAY;QACtB,QAAQ,EAAE,kBAAkB;QAC5B,MAAM,EAAE;YACJ,GAAG,EAAE,kBAAkB;YACvB,OAAO,EAAE,sBAAsB;YAC/B,YAAY,EAAE,2BAA2B;SAC5C;QACD,OAAO,EAAE;YACL,aAAa;YACb,gBAAgB;YAChB,aAAa;SAChB;KACJ,CAAC;;GACW,UAAU,CAkPtB"}

package/Controls/Components/Shell/AppElementTemplate.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AppElementTemplate.d.ts","sourceRoot":"","sources":["../../../../src/Controls/Components/Shell/AppElementTemplate.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,cAAc,EAAQ,MAAM,mBAAmB,CAAC;AAI9D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAI/C;;;;GAIG;AACH,wBAAgB,kBAAkB,CAAC,CAAC,SAAS,UAAU,EAAE,CAAC,EAAE,CAAC,GAAG,cAAc,CAuD7E"}
+{"version":3,"file":"AppElementTemplate.d.ts","sourceRoot":"","sources":["../../../../src/Controls/Components/Shell/AppElementTemplate.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,cAAc,EAAQ,MAAM,mBAAmB,CAAC;AAI9D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAI/C;;;;GAIG;AACH,wBAAgB,kBAAkB,CAAC,CAAC,SAAS,UAAU,EAAE,CAAC,EAAE,CAAC,GAAG,cAAc,CAyD7E"}

package/Controls/Components/Shell/AppElementTemplate.js

@@ -12,13 +12,14 @@ import { Fit } from '../../Types/Fit';
 export function appElementTemplate(e) {
     return html `
         <mosaik-theme2 .theme="${e.theme}">
-            <mosaik-drawer-container .lang="${e.lang}"
+            <mosaik-drawer-container part="root"
+                                     .lang="${e.lang}"
                                      .dir="${e.dir}"
                                      .fit="${Fit.Both}"
                                      .hasBackdrop="${e.isMobile}">
                 ${when(e.hasNav, () => html `
-                <mosaik-drawer slot="drawer"
-                               part="drawer"
+                <mosaik-drawer part="nav"
+                               slot="drawer"
                                .lang="${e.lang}"
                                .dir="${e.dir}"
                                .isOpen="${e.isNavOpen}"
@@ -26,12 +27,13 @@ export function appElementTemplate(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>
@@ -51,7 +53,7 @@ export function appElementTemplate(e) {
                               name="headerActions"></slot>
                     </mosaik-app-header>
                     `)}
-                    <div part="content">
+                    <div part="body">
                         <main part="main">
                             <slot name="content"></slot>
                         </main>

package/Controls/Components/Shell/AppElementTemplate.js.map

@@ -1 +1 @@
-{"version":3,"file":"AppElementTemplate.js","sourceRoot":"","sources":["../../../../src/Controls/Components/Shell/AppElementTemplate.ts"],"names":[],"mappings":"AAAA,kBAAkB;AAElB,OAAO,EAAuB,IAAI,EAAE,MAAM,mBAAmB,CAAC;AAC9D,OAAO,EAAE,IAAI,EAAE,MAAM,6BAA6B,CAAC;AACnD,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AACpD,OAAO,EAAE,GAAG,EAAE,MAAM,iBAAiB,CAAC;AAGtC,aAAa;AAEb;;;;GAIG;AACH,MAAM,UAAU,kBAAkB,CAAuB,CAAI;IACzD,OAAO,IAAI,CAAA;iCACkB,CAAC,CAAC,KAAK;8CACM,CAAC,CAAC,IAAI;6CACP,CAAC,CAAC,GAAG;6CACL,GAAG,CAAC,IAAI;qDACA,CAAC,CAAC,QAAQ;kBAC7C,IAAI,CAAC,CAAC,CAAC,MAAM,EAAE,GAAG,EAAE,CAAC,IAAI,CAAA;;;wCAGH,CAAC,CAAC,IAAI;uCACP,CAAC,CAAC,GAAG;0CACF,CAAC,CAAC,SAAS;wCACb,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC,UAAU,CAAC,IAAI;+CACvC,CAAC,CAAC,QAAQ;6CACZ,CAAC,CAAC,QAAQ;uDACA,CAAC,CAAC,QAAQ;;;;;iBAKhD,CAAC;;gDAE8B,CAAC,CAAC,IAAI;+CACP,CAAC,CAAC,GAAG;;sBAE9B,IAAI,CAAC,CAAC,CAAC,SAAS,EAAE,GAAG,EAAE,CAAC,IAAI,CAAA;;;;gDAIF,CAAC,CAAC,IAAI;+CACP,CAAC,CAAC,GAAG;qDACC,CAAC,CAAC,SAAS;0DACN,GAAG,EAAE,CAAC,CAAC,CAAC,OAAO;;;;;;;;qBAQpD,CAAC;;;;;;;;;;;;;KAajB,CAAC;AACN,CAAC"}
+{"version":3,"file":"AppElementTemplate.js","sourceRoot":"","sources":["../../../../src/Controls/Components/Shell/AppElementTemplate.ts"],"names":[],"mappings":"AAAA,kBAAkB;AAElB,OAAO,EAAuB,IAAI,EAAE,MAAM,mBAAmB,CAAC;AAC9D,OAAO,EAAE,IAAI,EAAE,MAAM,6BAA6B,CAAC;AACnD,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AACpD,OAAO,EAAE,GAAG,EAAE,MAAM,iBAAiB,CAAC;AAGtC,aAAa;AAEb;;;;GAIG;AACH,MAAM,UAAU,kBAAkB,CAAuB,CAAI;IACzD,OAAO,IAAI,CAAA;iCACkB,CAAC,CAAC,KAAK;;8CAEM,CAAC,CAAC,IAAI;6CACP,CAAC,CAAC,GAAG;6CACL,GAAG,CAAC,IAAI;qDACA,CAAC,CAAC,QAAQ;kBAC7C,IAAI,CAAC,CAAC,CAAC,MAAM,EAAE,GAAG,EAAE,CAAC,IAAI,CAAA;;;wCAGH,CAAC,CAAC,IAAI;uCACP,CAAC,CAAC,GAAG;0CACF,CAAC,CAAC,SAAS;wCACb,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC,UAAU,CAAC,IAAI;+CACvC,CAAC,CAAC,QAAQ;6CACZ,CAAC,CAAC,QAAQ;uDACA,CAAC,CAAC,QAAQ;;;;;iBAKhD,CAAC;;;gDAG8B,CAAC,CAAC,IAAI;+CACP,CAAC,CAAC,GAAG;;sBAE9B,IAAI,CAAC,CAAC,CAAC,SAAS,EAAE,GAAG,EAAE,CAAC,IAAI,CAAA;;;;gDAIF,CAAC,CAAC,IAAI;+CACP,CAAC,CAAC,GAAG;qDACC,CAAC,CAAC,SAAS;0DACN,GAAG,EAAE,CAAC,CAAC,CAAC,OAAO;;;;;;;;qBAQpD,CAAC;;;;;;;;;;;;;KAajB,CAAC;AACN,CAAC"}

package/Controls/Components/Shell/Themes/AppElement.Cosmopolitan.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AppElement.Cosmopolitan.d.ts","sourceRoot":"","sources":["../../../../../src/Controls/Components/Shell/Themes/AppElement.Cosmopolitan.ts"],"names":[],"mappings":"AASA,OAAO,EAAO,KAAK,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAI1D;;GAEG;AACH,wBAAgB,2BAA2B,IAAI,SAAS,CAoHvD"}
+{"version":3,"file":"AppElement.Cosmopolitan.d.ts","sourceRoot":"","sources":["../../../../../src/Controls/Components/Shell/Themes/AppElement.Cosmopolitan.ts"],"names":[],"mappings":"AASA,OAAO,EAAO,KAAK,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAI1D;;GAEG;AACH,wBAAgB,2BAA2B,IAAI,SAAS,CAsIvD"}

package/Controls/Components/Shell/Themes/AppElement.Cosmopolitan.js

@@ -14,10 +14,11 @@ export function appElementCosmopolitanStyle() {
     return css `
 :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);
@@ -28,6 +29,8 @@ export function appElementCosmopolitanStyle() {
   --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;
@@ -42,6 +45,10 @@ export function appElementCosmopolitanStyle() {
   --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) {
@@ -84,7 +91,10 @@ export function appElementCosmopolitanStyle() {
   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;
@@ -93,35 +103,43 @@ export function appElementCosmopolitanStyle() {
   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;
 }
 

package/Controls/Components/Shell/Themes/AppElement.Cosmopolitan.js.map

@@ -1 +1 @@
-{"version":3,"file":"AppElement.Cosmopolitan.js","sourceRoot":"","sources":["../../../../../src/Controls/Components/Shell/Themes/AppElement.Cosmopolitan.ts"],"names":[],"mappings":"AAAA,iFAAiF;AACjF,mBAAmB;AACnB,yCAAyC;AACzC,qGAAqG;AACrG,oBAAoB;AACpB,iFAAiF;AAEjF,kBAAkB;AAElB,OAAO,EAAE,GAAG,EAAkB,MAAM,qBAAqB,CAAC;AAE1D,aAAa;AAEb;;GAEG;AACH,MAAM,UAAU,2BAA2B;IACvC,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAkHT,CAAC;AACN,CAAC"}
+{"version":3,"file":"AppElement.Cosmopolitan.js","sourceRoot":"","sources":["../../../../../src/Controls/Components/Shell/Themes/AppElement.Cosmopolitan.ts"],"names":[],"mappings":"AAAA,iFAAiF;AACjF,mBAAmB;AACnB,yCAAyC;AACzC,qGAAqG;AACrG,oBAAoB;AACpB,iFAAiF;AAEjF,kBAAkB;AAElB,OAAO,EAAE,GAAG,EAAkB,MAAM,qBAAqB,CAAC;AAE1D,aAAa;AAEb;;GAEG;AACH,MAAM,UAAU,2BAA2B;IACvC,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAoIT,CAAC;AACN,CAAC"}

package/Controls/Components/Shell/Themes/AppElement.Joy.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AppElement.Joy.d.ts","sourceRoot":"","sources":["../../../../../src/Controls/Components/Shell/Themes/AppElement.Joy.ts"],"names":[],"mappings":"AASA,OAAO,EAAO,KAAK,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAI1D;;GAEG;AACH,wBAAgB,kBAAkB,IAAI,SAAS,CAwH9C"}
+{"version":3,"file":"AppElement.Joy.d.ts","sourceRoot":"","sources":["../../../../../src/Controls/Components/Shell/Themes/AppElement.Joy.ts"],"names":[],"mappings":"AASA,OAAO,EAAO,KAAK,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAI1D;;GAEG;AACH,wBAAgB,kBAAkB,IAAI,SAAS,CA0I9C"}