@breadstone/mosaik-elements-foundation 0.0.77 → 0.0.80

package/Controls/Components/Shell/AppElement.js

@@ -23,6 +23,8 @@ import { appElementCosmopolitanStyle } from './Themes/AppElement.Cosmopolitan';
 import { Themeable } from '../../Behaviors/Themeable';
 import { Property } from '../../Decorators/PropertyDecorator';
 import { Equals } from '../../../Equality/Equals';
+import { Slottable } from '../../Behaviors/Slottable';
+import { Watch } from '../../Decorators/WatchDecorator';
 // #endregion
 /**
  * App - A container component that manages the layout and structure of the application, typically including
@@ -75,7 +77,7 @@ import { Equals } from '../../../Equality/Equals';
  *
  * @public
  */
-let AppElement = class AppElement extends Themeable(CustomElement) {
+let AppElement = class AppElement extends Themeable(Slottable(CustomElement)) {
     // #region Fields
     _breakpointController;
     _drawerElement;
@@ -128,11 +130,6 @@ let AppElement = class AppElement extends Themeable(CustomElement) {
     }
     set theme(value) {
         if (!Equals.areObjectsEqual(this._theme, value)) {
-            // if (value) {
-            //     value = Observable.observe(value, (next) => {
-            //         this.applyTheme(next);
-            //     });
-            // }
             this._theme = value;
             this.requestUpdate('theme');
         }
@@ -199,16 +196,6 @@ let AppElement = class AppElement extends Themeable(CustomElement) {
             this.requestUpdate('isMobile');
         }
     }
-    /**
-     * Returns the `drawerElement` property.
-     *
-     * @hidden
-     * @protected
-     * @readonly
-     */
-    get drawer() {
-        return this._drawerElement;
-    }
     /**
      * Returns the `appHeaderElement` property.
      *
@@ -231,6 +218,43 @@ let AppElement = class AppElement extends Themeable(CustomElement) {
     }
     // #endregion
     // #region Methods
+    /**
+     * Toggles the navigation drawer.
+     *
+     * @public
+     */
+    toggleNavigation() {
+        this.isNavOpen = !this.isNavOpen;
+    }
+    /**
+     * Opens the navigation drawer.
+     *
+     * @public
+     */
+    openNavigation() {
+        this.isNavOpen = true;
+    }
+    /**
+     * Closes the navigation drawer.
+     *
+     * @public
+     */
+    closeNavigation() {
+        this.isNavOpen = false;
+    }
+    onSlotChanges(slotName) {
+        if (slotName === 'header') {
+            const headerElements = this.getSlotAssignments('header')
+                .filter((x) => x instanceof AppHeaderElement);
+            if (headerElements.length > 0) {
+                this._headerElement = headerElements[0];
+                this.hasHeader = true;
+            }
+            else {
+                this.hasHeader = false;
+            }
+        }
+    }
     /**
      * @protected
      * @override
@@ -241,6 +265,12 @@ let AppElement = class AppElement extends Themeable(CustomElement) {
         this._headerElement = this.getTemplatePart('header');
         this._drawerElement = this.getTemplatePart('drawer');
     }
+    /**
+     * @protected
+     */
+    onIsNavOpenPropertyChanged(_prev, next) {
+        this._headerElement.isToggled = next ?? false;
+    }
 };
 __decorate([
     Property({ type: Object }),
@@ -279,6 +309,12 @@ __decorate([
     __metadata("design:type", Boolean),
     __metadata("design:paramtypes", [Boolean])
 ], AppElement.prototype, "hasHeader", null);
+__decorate([
+    Watch('isNavOpen', { waitUntilFirstUpdate: true }),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Boolean, Boolean]),
+    __metadata("design:returntype", void 0)
+], AppElement.prototype, "onIsNavOpenPropertyChanged", null);
 AppElement = __decorate([
     Component({
         selector: 'mosaik-app',

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":"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"}

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;AAK9D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAI/C;;;;GAIG;AACH,wBAAgB,kBAAkB,CAAC,CAAC,SAAS,UAAU,EAAE,CAAC,EAAE,CAAC,GAAG,cAAc,CAoD7E"}
+{"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,CAgD7E"}

package/Controls/Components/Shell/AppElementTemplate.js

@@ -1,7 +1,6 @@
 // #region Imports
 import { html } from '../../../Dom/Html';
 import { when } from '../../Directives/Directives';
-import { Appearance } from '../../Types/Appearance';
 import { DrawerMode } from '../../Types/DrawerMode';
 import { Fit } from '../../Types/Fit';
 // #endregion
@@ -34,21 +33,17 @@ export function appElementTemplate(e) {
                 <mosaik-drawer-content slot="content"
                                        .lang="${e.lang}"
                                        .dir="${e.dir}">
+                    <slot name="header"></slot>
                     ${when(e.hasHeader, () => html `
                     <mosaik-app-header part="header"
-                                       exportparts="toolbar:header-toolbar"
+
                                        .lang="${e.lang}"
                                        .dir="${e.dir}"
+                                       .isToggled="${e.isNavOpen}"
                                        .scrollTargetFn="${() => e.content}">
-                        ${when(e.hasNav, () => html `
-                        <mosaik-button slot="menu"
-                                       .appearance="${Appearance.Plain}"
-                                       .icon="${'M3 17h18a1 1 0 0 1 .117 1.993L21 19H3a1 1 0 0 1-.117-1.993L3 17h18H3Zm0-6 18-.002a1 1 0 0 1 .117 1.993l-.117.007L3 13a1 1 0 0 1-.117-1.993L3 11l18-.002L3 11Zm0-6h18a1 1 0 0 1 .117 1.993L21 7H3a1 1 0 0 1-.117-1.993L3 5h18H3Z'}"
-                                       @click="${() => e.drawer.toggle()}"></mosaik-button>
-                        `)}
                         <slot slot="menu"
                               name="headerMenu"></slot>
-                        <slot slot="logo"
+                        <slot slot="brand"
                               name="headerLogo"></slot>
                         <slot slot="actions"
                               name="headerActions"></slot>

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,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;;;;;iBAKtC,CAAC;;gDAE8B,CAAC,CAAC,IAAI;+CACP,CAAC,CAAC,GAAG;sBAC9B,IAAI,CAAC,CAAC,CAAC,SAAS,EAAE,GAAG,EAAE,CAAC,IAAI,CAAA;;;gDAGF,CAAC,CAAC,IAAI;+CACP,CAAC,CAAC,GAAG;0DACM,GAAG,EAAE,CAAC,CAAC,CAAC,OAAO;0BAC/C,IAAI,CAAC,CAAC,CAAC,MAAM,EAAE,GAAG,EAAE,CAAC,IAAI,CAAA;;sDAEG,UAAU,CAAC,KAAK;gDACtB,iOAAiO;iDAChO,GAAG,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,MAAM,EAAE;yBAC/C,CAAC;;;;;;;;qBAQL,CAAC;;;;;;;;KAQjB,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;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;;;;;iBAKtC,CAAC;;gDAE8B,CAAC,CAAC,IAAI;+CACP,CAAC,CAAC,GAAG;;sBAE9B,IAAI,CAAC,CAAC,CAAC,SAAS,EAAE,GAAG,EAAE,CAAC,IAAI,CAAA;;;gDAGF,CAAC,CAAC,IAAI;+CACP,CAAC,CAAC,GAAG;qDACC,CAAC,CAAC,SAAS;0DACN,GAAG,EAAE,CAAC,CAAC,CAAC,OAAO;;;;;;;;qBAQpD,CAAC;;;;;;;;KAQjB,CAAC;AACN,CAAC"}

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

@@ -1,6 +1,7 @@
 import { CustomElement } from '../Abstracts/CustomElement';
 import { IAppHeaderElementProps } from './IAppHeaderElementProps';
-declare const AppHeaderElement_base: (abstract new (...args: Array<any>) => import("../../Behaviors/Themeable").IThemeableProps) & typeof CustomElement & import("../../Behaviors/Themeable").IThemeableCtor;
+import { ISlottable } from '../../Behaviors/Slottable';
+declare const AppHeaderElement_base: (abstract new (...args: Array<any>) => import("../../Behaviors/Themeable").IThemeableProps) & (abstract new (...args: Array<any>) => import("../../Behaviors/Slottable").ISlottableProps & ISlottable) & (abstract new (...args: Array<any>) => import("../../Behaviors/Busyable").IBusyableProps) & typeof CustomElement & import("../../Behaviors/Themeable").IThemeableCtor;
 /**
  * AppHeader - A component representing the header section of an application, often used to display application
  *             branding, navigation, and other important elements.
@@ -12,27 +13,37 @@ declare const AppHeaderElement_base: (abstract new (...args: Array<any>) => impo
  *
  * @name AppHeader
  * @element mosaik-app-header
- * @category Layout
+ * @category Shell
+ *
+ * @slot menu - The slot for the menu button, which can be used to toggle navigation drawers or other menus.
+ * @slot brand - The slot for the application branding, such as a logo or title.
+ * @slot actions - The slot for action buttons or icons, typically used for user profile options or quick actions.
  *
- * @csspart toolbar - The toolbar part of the AppHeader component, used for containing navigation or action items.
  * @csspart root - The root part of the AppHeader component, used for applying styles and theming.
+ * @csspart toolbar - The toolbar part of the AppHeader component, used for containing navigation or action items.
+ * @csspart toggle - The toggle button part of the AppHeader, which can be used to open or close navigation drawers.
  *
- * @dependency {ToolbarElement} - The Toolbar element, which is used within the AppHeader for displaying navigation
- *                                and actions.
+ * @dependency {ToolbarElement} - The Toolbar element, which is used within the AppHeader for displaying navigation and actions.
+ * @dependency {Button} - The Button element, which can be used for the menu toggle button.
+ * @dependency {ProgressBarElement} - The ProgressBar element, which can be used to indicate loading or busy states.
  *
  * @example
  * ```html
  * <mosaik-app-header>
- *   <div slot="toolbar">
- *     <!-- Include navigation items, logos, or other header content here -->
+ *   <div slot="start">
+ *   </div>
+ *   <div slot="brand">
+ *   </div>
+ *   <div slot="actions">
  *   </div>
  * </mosaik-app-header>
  * ```
  *
  * @public
  */
-export declare class AppHeaderElement extends AppHeaderElement_base implements IAppHeaderElementProps {
+export declare class AppHeaderElement extends AppHeaderElement_base implements IAppHeaderElementProps, ISlottable {
     private readonly _scrollController;
+    private _isToggled;
     private _scrollTargetFn;
     /**
      * @public
@@ -47,6 +58,14 @@ export declare class AppHeaderElement extends AppHeaderElement_base implements I
      * @readonly
      */
     static get is(): string;
+    /**
+     * Gets or sets the `isToggled` property.
+     *
+     * @public
+     * @attr
+     */
+    get isToggled(): boolean;
+    set isToggled(value: boolean);
     /**
      * Gets or sets the `scrollTargetFn` property.
      *
@@ -54,6 +73,20 @@ export declare class AppHeaderElement extends AppHeaderElement_base implements I
      */
     get scrollTargetFn(): (() => Element | null) | null;
     set scrollTargetFn(value: (() => Element | null) | null);
+    /**
+     * @public
+     * @override
+     */
+    onSlotChanges(slotName?: string): void;
+    /**
+     * @protected
+     * @override
+     */
+    protected onApplyTemplate(): void;
+    /**
+     * @private
+     */
+    private onToggle;
 }
 /**
  * @public

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

@@ -1 +1 @@
-{"version":3,"file":"AppHeaderElement.d.ts","sourceRoot":"","sources":["../../../../src/Controls/Components/Shell/AppHeaderElement.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAG3D,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;;AAQlE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,qBAgBa,gBACT,SAAQ,qBACR,YAAW,sBAAsB;IAIjC,OAAO,CAAC,QAAQ,CAAC,iBAAiB,CAAyB;IAC3D,OAAO,CAAC,eAAe,CAAgC;IAMvD;;OAEG;;IAiBH;;;;;;;OAOG;IACH,WAAkB,EAAE,IAAI,MAAM,CAE7B;IAED;;;;OAIG;IACH,IACW,cAAc,IAAI,CAAC,MAAM,OAAO,GAAG,IAAI,CAAC,GAAG,IAAI,CAEzD;IAED,IAAW,cAAc,CAAC,KAAK,EAAE,CAAC,MAAM,OAAO,GAAG,IAAI,CAAC,GAAG,IAAI,EAO7D;CAIJ;AAED;;GAEG;AACH,yBAAiB,gBAAgB,CAAC;IAC9B,KAAY,KAAK,GAAG,sBAAsB,CAAC;CAC9C;AAED;;GAEG;AACH,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,mBAAmB,EAAE,gBAAgB,CAAC;KACzC;CACJ"}
+{"version":3,"file":"AppHeaderElement.d.ts","sourceRoot":"","sources":["../../../../src/Controls/Components/Shell/AppHeaderElement.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAG3D,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAOlE,OAAO,EAAE,UAAU,EAAa,MAAM,2BAA2B,CAAC;;AAQlE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AACH,qBAmBa,gBACT,SAAQ,qBACR,YAAW,sBAAsB,EAAE,UAAU;IAI7C,OAAO,CAAC,QAAQ,CAAC,iBAAiB,CAAyB;IAC3D,OAAO,CAAC,UAAU,CAAU;IAC5B,OAAO,CAAC,eAAe,CAAgC;IAMvD;;OAEG;;IAkBH;;;;;;;OAOG;IACH,WAAkB,EAAE,IAAI,MAAM,CAE7B;IAED;;;;;OAKG;IACH,IACW,SAAS,IAAI,OAAO,CAE9B;IACD,IAAW,SAAS,CAAC,KAAK,EAAE,OAAO,EAKlC;IAED;;;;OAIG;IACH,IACW,cAAc,IAAI,CAAC,MAAM,OAAO,GAAG,IAAI,CAAC,GAAG,IAAI,CAEzD;IACD,IAAW,cAAc,CAAC,KAAK,EAAE,CAAC,MAAM,OAAO,GAAG,IAAI,CAAC,GAAG,IAAI,EAO7D;IAMD;;;OAGG;IACa,aAAa,CAAC,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI;IAStD;;;OAGG;cACgB,eAAe,IAAI,IAAI;IAO1C;;OAEG;IACH,OAAO,CAAC,QAAQ;CAMnB;AAED;;GAEG;AACH,yBAAiB,gBAAgB,CAAC;IAC9B,KAAY,KAAK,GAAG,sBAAsB,CAAC;CAC9C;AAED;;GAEG;AACH,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,mBAAmB,EAAE,gBAAgB,CAAC;KACzC;CACJ"}

package/Controls/Components/Shell/AppHeaderElement.js

@@ -18,6 +18,12 @@ import { appHeaderElementJoyStyle } from './Themes/AppHeaderElement.Joy';
 import { appHeaderElementRetroStyle } from './Themes/AppHeaderElement.Retro';
 import { appHeaderElementCosmopolitanStyle } from './Themes/AppHeaderElement.Cosmopolitan';
 import { Themeable } from '../../Behaviors/Themeable';
+import { DomServiceLocator } from '../../../Dom/Dom';
+import { Slottable } from '../../Behaviors/Slottable';
+import { Busyable } from '../../Behaviors/Busyable';
+import { ButtonElement } from '../Buttons/Button/ButtonElement';
+import { ProgressBarElement } from '../Ranges/ProgressBar/ProgressBarElement';
+import { Attribute } from '../../Decorators/AttributeDecorator';
 // #endregion
 /**
  * AppHeader - A component representing the header section of an application, often used to display application
@@ -30,28 +36,38 @@ import { Themeable } from '../../Behaviors/Themeable';
  *
  * @name AppHeader
  * @element mosaik-app-header
- * @category Layout
+ * @category Shell
+ *
+ * @slot menu - The slot for the menu button, which can be used to toggle navigation drawers or other menus.
+ * @slot brand - The slot for the application branding, such as a logo or title.
+ * @slot actions - The slot for action buttons or icons, typically used for user profile options or quick actions.
  *
- * @csspart toolbar - The toolbar part of the AppHeader component, used for containing navigation or action items.
  * @csspart root - The root part of the AppHeader component, used for applying styles and theming.
+ * @csspart toolbar - The toolbar part of the AppHeader component, used for containing navigation or action items.
+ * @csspart toggle - The toggle button part of the AppHeader, which can be used to open or close navigation drawers.
  *
- * @dependency {ToolbarElement} - The Toolbar element, which is used within the AppHeader for displaying navigation
- *                                and actions.
+ * @dependency {ToolbarElement} - The Toolbar element, which is used within the AppHeader for displaying navigation and actions.
+ * @dependency {Button} - The Button element, which can be used for the menu toggle button.
+ * @dependency {ProgressBarElement} - The ProgressBar element, which can be used to indicate loading or busy states.
  *
  * @example
  * ```html
  * <mosaik-app-header>
- *   <div slot="toolbar">
- *     <!-- Include navigation items, logos, or other header content here -->
+ *   <div slot="start">
+ *   </div>
+ *   <div slot="brand">
+ *   </div>
+ *   <div slot="actions">
  *   </div>
  * </mosaik-app-header>
  * ```
  *
  * @public
  */
-let AppHeaderElement = class AppHeaderElement extends Themeable(CustomElement) {
+let AppHeaderElement = class AppHeaderElement extends Themeable(Slottable(Busyable(CustomElement))) {
     // #region Fields
     _scrollController;
+    _isToggled;
     _scrollTargetFn;
     // #endregion
     // #region Ctor
@@ -60,6 +76,7 @@ let AppHeaderElement = class AppHeaderElement extends Themeable(CustomElement) {
      */
     constructor() {
         super();
+        this._isToggled = false;
         this._scrollTargetFn = null;
         this._scrollController = new HideOnScrollController(this, {
             hideOnScroll: true,
@@ -81,6 +98,21 @@ let AppHeaderElement = class AppHeaderElement extends Themeable(CustomElement) {
     static get is() {
         return 'mosaik-app-header';
     }
+    /**
+     * Gets or sets the `isToggled` property.
+     *
+     * @public
+     * @attr
+     */
+    get isToggled() {
+        return this._isToggled;
+    }
+    set isToggled(value) {
+        if (this._isToggled !== value) {
+            this._isToggled = value;
+            this.requestUpdate('isToggled');
+        }
+    }
     /**
      * Gets or sets the `scrollTargetFn` property.
      *
@@ -96,7 +128,40 @@ let AppHeaderElement = class AppHeaderElement extends Themeable(CustomElement) {
             this._scrollController.scrollTargetFn = this._scrollTargetFn;
         }
     }
+    // #endregion
+    // #region Methods
+    /**
+     * @public
+     * @override
+     */
+    onSlotChanges(slotName) {
+        super.onSlotChanges(slotName);
+        if (slotName === 'menu') {
+            const toggleButton = this.getSlotAssignmentsOf(slotName, ButtonElement)[0];
+            toggleButton?.on('click', () => this.onToggle());
+        }
+    }
+    /**
+     * @protected
+     * @override
+     */
+    onApplyTemplate() {
+        super.onApplyTemplate();
+        const toggleButton = this.getTemplatePart('toggle');
+        toggleButton.on('click', () => this.onToggle());
+    }
+    /**
+     * @private
+     */
+    onToggle() {
+        DomServiceLocator.current.findAncestor(this, 'mosaik-app')?.toggleNavigation();
+    }
 };
+__decorate([
+    Attribute({ type: Boolean }),
+    __metadata("design:type", Boolean),
+    __metadata("design:paramtypes", [Boolean])
+], AppHeaderElement.prototype, "isToggled", null);
 __decorate([
     Property({ type: Function }),
     __metadata("design:type", Object),
@@ -112,11 +177,14 @@ AppHeaderElement = __decorate([
             cosmopolitan: appHeaderElementCosmopolitanStyle
         },
         host: {
-            part: 'header',
-            exportparts: 'toolbar:header-toolbar'
+            'slot': 'header',
+            'part': 'header',
+            'attr.exportparts': 'toolbar:header-toolbar'
         },
         imports: [
-            ToolbarElement
+            ProgressBarElement,
+            ToolbarElement,
+            ButtonElement
         ]
     }),
     __metadata("design:paramtypes", [])

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

@@ -1 +1 @@
-{"version":3,"file":"AppHeaderElement.js","sourceRoot":"","sources":["../../../../src/Controls/Components/Shell/AppHeaderElement.ts"],"names":[],"mappings":"AAAA,kBAAkB;;;;;;;;;;AAElB,OAAO,EAAE,sBAAsB,EAAE,MAAM,0CAA0C,CAAC;AAClF,OAAO,EAAE,SAAS,EAAE,MAAM,qCAAqC,CAAC;AAChE,OAAO,EAAE,QAAQ,EAAE,MAAM,oCAAoC,CAAC;AAC9D,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAC3D,OAAO,EAAE,cAAc,EAAE,MAAM,oCAAoC,CAAC;AACpE,OAAO,EAAE,wBAAwB,EAAE,MAAM,4BAA4B,CAAC;AAEtE,OAAO,EAAE,wBAAwB,EAAE,MAAM,+BAA+B,CAAC;AACzE,OAAO,EAAE,0BAA0B,EAAE,MAAM,iCAAiC,CAAC;AAC7E,OAAO,EAAE,iCAAiC,EAAE,MAAM,wCAAwC,CAAC;AAC3F,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAEtD,aAAa;AAEb;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AAiBI,IAAM,gBAAgB,GAAtB,MAAM,gBACT,SAAQ,SAAS,CAAC,aAAa,CAAC;IAGhC,iBAAiB;IAEA,iBAAiB,CAAyB;IACnD,eAAe,CAAgC;IAEvD,aAAa;IAEb,eAAe;IAEf;;OAEG;IACH;QACI,KAAK,EAAE,CAAC;QAER,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC;QAC5B,IAAI,CAAC,iBAAiB,GAAG,IAAI,sBAAsB,CAAC,IAAI,EAAE;YACtD,YAAY,EAAE,IAAI;YAClB,iBAAiB,EAAE,CAAC;YACpB,mBAAmB,EAAE,MAAM,CAAC,MAAM;YAClC,QAAQ,EAAE,MAAM;SACnB,CAAC,CAAC;IACP,CAAC;IAED,aAAa;IAEb,qBAAqB;IAErB;;;;;;;OAOG;IACI,MAAM,KAAK,EAAE;QAChB,OAAO,mBAAmB,CAAC;IAC/B,CAAC;IAED;;;;OAIG;IACH,IACW,cAAc;QACrB,OAAO,IAAI,CAAC,eAAe,CAAC;IAChC,CAAC;IAED,IAAW,cAAc,CAAC,KAAoC;QAC1D,IAAI,IAAI,CAAC,eAAe,KAAK,KAAK,EAAE,CAAC;YACjC,IAAI,CAAC,eAAe,GAAG,KAAK,CAAC;YAC7B,IAAI,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAAC;YAErC,IAAI,CAAC,iBAAiB,CAAC,cAAc,GAAG,IAAI,CAAC,eAAe,CAAC;QACjE,CAAC;IACL,CAAC;CAIJ,CAAA;AAhBG;IAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC;;;sDAG5B;AApDQ,gBAAgB;IAhB5B,SAAS,CAAC;QACP,QAAQ,EAAE,mBAAmB;QAC7B,QAAQ,EAAE,wBAAwB;QAClC,MAAM,EAAE;YACJ,GAAG,EAAE,wBAAwB;YAC7B,KAAK,EAAE,0BAA0B;YACjC,YAAY,EAAE,iCAAiC;SAClD;QACD,IAAI,EAAE;YACF,IAAI,EAAE,QAAQ;YACd,WAAW,EAAE,wBAAwB;SACxC;QACD,OAAO,EAAE;YACL,cAAc;SACjB;KACJ,CAAC;;GACW,gBAAgB,CAiE5B"}
+{"version":3,"file":"AppHeaderElement.js","sourceRoot":"","sources":["../../../../src/Controls/Components/Shell/AppHeaderElement.ts"],"names":[],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"AppHeaderElementTemplate.d.ts","sourceRoot":"","sources":["../../../../src/Controls/Components/Shell/AppHeaderElementTemplate.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,cAAc,EAAQ,MAAM,mBAAmB,CAAC;AAC9D,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAI3D;;;;GAIG;AACH,wBAAgB,wBAAwB,CAAC,CAAC,SAAS,gBAAgB,EAAE,CAAC,EAAE,CAAC,GAAG,cAAc,CAiBzF"}
+{"version":3,"file":"AppHeaderElementTemplate.d.ts","sourceRoot":"","sources":["../../../../src/Controls/Components/Shell/AppHeaderElementTemplate.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,cAAc,EAAQ,MAAM,mBAAmB,CAAC;AAC9D,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAM3D;;;;GAIG;AACH,wBAAgB,wBAAwB,CAAC,CAAC,SAAS,gBAAgB,EAAE,CAAC,EAAE,CAAC,GAAG,cAAc,CAuBzF"}

package/Controls/Components/Shell/AppHeaderElementTemplate.js

@@ -1,6 +1,8 @@
 // #region Imports
 import { Appearance } from '../../Types/Appearance';
 import { html } from '../../../Dom/Html';
+import { when } from '../../Directives/Directives';
+import { Icons } from '../../../Resources/Icons';
 // #endregion
 /**
  * The template of the {@link AppHeaderElement}.
@@ -9,20 +11,26 @@ import { html } from '../../../Dom/Html';
  */
 export function appHeaderElementTemplate(e) {
     return html `
-    <div part="root">
-        <!-- todo: add busy indicator here -->
-        <mosaik-toolbar part="toolbar"
-                        .appearance="${Appearance.Plain}"
-                        .dir="${e.dir}"
-                        .lang="${e.lang}">
-            <slot slot="start"
-                  name="menu"></slot>
-            <slot slot="title"
-                  name="logo"></slot>
-            <slot slot="end"
-                  name="actions"></slot>
-        </mosaik-toolbar>
-    </div>
+        <div part="root">
+            ${when(e.isBusy, () => html `
+            <mosaik-progress-bar part="progressBar" .isIndeterminate="${e.isBusy}"></mosaik-progress-bar>
+            `)}
+            <mosaik-toolbar part="toolbar"
+                            .appearance="${Appearance.Plain}"
+                            .dir="${e.dir}"
+                            .lang="${e.lang}">
+                <slot slot="start"
+                      name="menu">
+                    <mosaik-button part="toggle"
+                                   .appearance="${'plain'}"
+                                   .icon="${e.isToggled ? Icons.panelLeftCollapse : Icons.panelLeft}"></mosaik-button>
+                </slot>
+                <slot slot="title"
+                    name="brand"></slot>
+                <slot slot="end"
+                    name="actions"></slot>
+            </mosaik-toolbar>
+        </div>
     `;
 }
 //# sourceMappingURL=AppHeaderElementTemplate.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"AppHeaderElementTemplate.js","sourceRoot":"","sources":["../../../../src/Controls/Components/Shell/AppHeaderElementTemplate.ts"],"names":[],"mappings":"AAAA,kBAAkB;AAElB,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AACpD,OAAO,EAAuB,IAAI,EAAE,MAAM,mBAAmB,CAAC;AAG9D,aAAa;AAEb;;;;GAIG;AACH,MAAM,UAAU,wBAAwB,CAA6B,CAAI;IACrE,OAAO,IAAI,CAAA;;;;uCAIwB,UAAU,CAAC,KAAK;gCACvB,CAAC,CAAC,GAAG;iCACJ,CAAC,CAAC,IAAI;;;;;;;;;KASlC,CAAC;AACN,CAAC"}
+{"version":3,"file":"AppHeaderElementTemplate.js","sourceRoot":"","sources":["../../../../src/Controls/Components/Shell/AppHeaderElementTemplate.ts"],"names":[],"mappings":"AAAA,kBAAkB;AAElB,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AACpD,OAAO,EAAuB,IAAI,EAAE,MAAM,mBAAmB,CAAC;AAE9D,OAAO,EAAE,IAAI,EAAE,MAAM,6BAA6B,CAAC;AACnD,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAC;AAEjD,aAAa;AAEb;;;;GAIG;AACH,MAAM,UAAU,wBAAwB,CAA6B,CAAI;IACrE,OAAO,IAAI,CAAA;;cAED,IAAI,CAAC,CAAC,CAAC,MAAM,EAAE,GAAG,EAAE,CAAC,IAAI,CAAA;wEACiC,CAAC,CAAC,MAAM;aACnE,CAAC;;2CAE6B,UAAU,CAAC,KAAK;oCACvB,CAAC,CAAC,GAAG;qCACJ,CAAC,CAAC,IAAI;;;;kDAIO,OAAO;4CACb,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,iBAAiB,CAAC,CAAC,CAAC,KAAK,CAAC,SAAS;;;;;;;;KAQ9F,CAAC;AACN,CAAC"}

package/Controls/Components/Shell/Events/IAppMenuToggledEvent.d.ts

@@ -0,0 +1,23 @@
+import type { IEventDetail } from '@breadstone/mosaik-elements';
+import type { AppHeaderElement } from '../AppHeaderElement';
+/**
+ * Represents the `{@link IAppMenuToggledEventDetail}` interface.
+ *
+ * @public
+ */
+export interface IAppMenuToggledEventDetail extends IEventDetail<AppHeaderElement> {
+}
+/**
+ * Represents the `{@link IAppMenuToggledEvent}` interface.
+ *
+ * @public
+ */
+export interface IAppMenuToggledEvent extends CustomEvent<IAppMenuToggledEventDetail> {
+    readonly target: AppHeaderElement;
+}
+declare global {
+    interface HTMLElementEventMap {
+        'app-menu-toggled': IAppMenuToggledEvent;
+    }
+}
+//# sourceMappingURL=IAppMenuToggledEvent.d.ts.map

package/Controls/Components/Shell/Events/IAppMenuToggledEvent.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"IAppMenuToggledEvent.d.ts","sourceRoot":"","sources":["../../../../../src/Controls/Components/Shell/Events/IAppMenuToggledEvent.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAChE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAI5D;;;;GAIG;AACH,MAAM,WAAW,0BAA2B,SAAQ,YAAY,CAAC,gBAAgB,CAAC;CAEjF;AAED;;;;GAIG;AACH,MAAM,WAAW,oBAAqB,SAAQ,WAAW,CAAC,0BAA0B,CAAC;IAIjF,QAAQ,CAAC,MAAM,EAAE,gBAAgB,CAAC;CAIrC;AAED,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,mBAAmB;QACzB,kBAAkB,EAAE,oBAAoB,CAAC;KAE5C;CACJ"}

package/Controls/Components/Shell/Events/IAppMenuToggledEvent.js

@@ -0,0 +1,3 @@
+// #region Imports
+export {};
+//# sourceMappingURL=IAppMenuToggledEvent.js.map

package/Controls/Components/Shell/Events/IAppMenuToggledEvent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IAppMenuToggledEvent.js","sourceRoot":"","sources":["../../../../../src/Controls/Components/Shell/Events/IAppMenuToggledEvent.ts"],"names":[],"mappings":"AAAA,kBAAkB"}

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

@@ -1,10 +1,11 @@
 import type { ITheme } from '@breadstone/mosaik-themes';
+import type { ISlottable } from '../../Behaviors/Slottable';
 /**
  * Represents the `{@link IAppElementProps}` interface.
  *
  * @public
  */
-export interface IAppElementProps {
+export interface IAppElementProps extends ISlottable {
     theme: ITheme | null;
     isNavOpen: boolean;
     isMobile: boolean;

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

@@ -1 +1 @@
-{"version":3,"file":"IAppElementProps.d.ts","sourceRoot":"","sources":["../../../../src/Controls/Components/Shell/IAppElementProps.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAC;AAIxD;;;;GAIG;AACH,MAAM,WAAW,gBAAgB;IAE7B,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAErB,SAAS,EAAE,OAAO,CAAC;IAEnB,QAAQ,EAAE,OAAO,CAAC;IAElB,SAAS,EAAE,OAAO,CAAC;IAEnB,MAAM,EAAE,OAAO,CAAC;CAEnB"}
+{"version":3,"file":"IAppElementProps.d.ts","sourceRoot":"","sources":["../../../../src/Controls/Components/Shell/IAppElementProps.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAC;AACxD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAI5D;;;;GAIG;AACH,MAAM,WAAW,gBAAiB,SAAQ,UAAU;IAEhD,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAErB,SAAS,EAAE,OAAO,CAAC;IAEnB,QAAQ,EAAE,OAAO,CAAC;IAElB,SAAS,EAAE,OAAO,CAAC;IAEnB,MAAM,EAAE,OAAO,CAAC;CAEnB"}

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

@@ -1,9 +1,12 @@
+import type { IBusyableProps } from '../../Behaviors/Busyable';
+import type { ISlottableProps } from '../../Behaviors/Slottable';
 /**
  * Represents the `{@link IAppHeaderElementProps}` interface.
  *
  * @public
  */
-export interface IAppHeaderElementProps {
+export interface IAppHeaderElementProps extends ISlottableProps, IBusyableProps {
+    isToggled: boolean;
     scrollTargetFn: (() => Element | null) | null;
 }
 //# sourceMappingURL=IAppHeaderElementProps.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"IAppHeaderElementProps.d.ts","sourceRoot":"","sources":["../../../../src/Controls/Components/Shell/IAppHeaderElementProps.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,MAAM,WAAW,sBAAsB;IAInC,cAAc,EAAE,CAAC,MAAM,OAAO,GAAG,IAAI,CAAC,GAAG,IAAI,CAAC;CAIjD"}
+{"version":3,"file":"IAppHeaderElementProps.d.ts","sourceRoot":"","sources":["../../../../src/Controls/Components/Shell/IAppHeaderElementProps.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAC/D,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAIjE;;;;GAIG;AACH,MAAM,WAAW,sBACb,SAAQ,eAAe,EAAE,cAAc;IAIvC,SAAS,EAAE,OAAO,CAAC;IAEnB,cAAc,EAAE,CAAC,MAAM,OAAO,GAAG,IAAI,CAAC,GAAG,IAAI,CAAC;CAIjD"}

package/Controls/Components/Shell/IAppHeaderElementProps.js

@@ -1,2 +1,3 @@
+// #region Imports
 export {};
 //# sourceMappingURL=IAppHeaderElementProps.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"IAppHeaderElementProps.js","sourceRoot":"","sources":["../../../../src/Controls/Components/Shell/IAppHeaderElementProps.ts"],"names":[],"mappings":""}
+{"version":3,"file":"IAppHeaderElementProps.js","sourceRoot":"","sources":["../../../../src/Controls/Components/Shell/IAppHeaderElementProps.ts"],"names":[],"mappings":"AAAA,kBAAkB"}

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,CA2FvD"}
+{"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,CAqGvD"}

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

@@ -14,6 +14,9 @@ export function appElementCosmopolitanStyle() {
     return css `
 :host {
   --app-background-color: var(--cosmopolitan-scheme-background);
+  --app-border-radius: unset;
+  --app-drawer-height: 100%;
+  --app-drawer-width: 320px;
   --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);
@@ -74,11 +77,18 @@ export function appElementCosmopolitanStyle() {
   transition-property: var(--app-transition-property);
   background-color: var(--app-background-color);
   color: var(--app-foreground-color);
+  border-radius: var(--app-border-radius);
   width: 100vw;
   height: 100vh;
   display: block;
   position: absolute;
   inset: 0;
+  overflow: clip;
+}
+
+:host [part="drawer"] {
+  --drawer-width: var(--app-drawer-width);
+  --drawer-height: var(--app-drawer-height);
 }
 
 :host [part="content"] {
@@ -89,7 +99,7 @@ export function appElementCosmopolitanStyle() {
 
 :host [part="nav"] {
   height: 100%;
-  width: var(--drawer-width);
+  width: var(--app-drawer-width);
   flex-direction: column;
   flex: 1;
   display: flex;