@exmg/exm-navigation 1.1.0 → 1.1.2

package/README.md

@@ -0,0 +1,73 @@
+# `<exm-navigation>` [![Published on npm](https://img.shields.io/npm/v/@exmg/exm-navigation.svg)](https://www.npmjs.com/package/@exmg/exm-navigation)
+
+# @exmg/exm-navigation
+
+## Install
+
+```bash
+npm install @exmg/exm-navigation
+```
+
+## Anatomy
+
+This library contains following component:
+
+1. Navigation (main component and fully composed navigation component)
+
+Conceptual usage:
+
+```html
+  <exm-navigation .items=${menuItems} .path=${['spaces']}>
+    <!-- Slot for adding a title to the topbar. Topbar is only visible on mobile -->
+    <section slot="topbar-title">My Title</section>
+    <!-- Slot for adding actions to the right of the topbar. Topbar is only visible on mobile -->
+    <section slot="topbar-actions">Actions</section>
+    <!-- Slot for adding a logo in the top part of the rail. This is not visible on mobile -->
+    <section slot="rail-top">Rail top</section>
+    <!-- Slot for adding extra actions or other content to the bottom of the rail. This is not visible on mobile -->
+    <section slot="rail-bottom">Rail bottom</section>
+    <!-- The actual page content to display -->
+    <section class="content">${this.renderPage()}</section>
+  </exm-navigation>
+```
+
+Some of the components used in the navigation c an be used separately. Please check the code for implementation
+
+## API
+
+### Slots
+
+| Name             | Description                                                                                             |
+| ---------------- | ------------------------------------------------------------------------------------------------------- |
+| `topbar-title`   | Slot for adding a title to the topbar. Topbar is only visible on mobile                                 |
+| `topbar-actions` | Slot for adding actions to the right of the topbar. Topbar is only visible on mobile                    |
+| `rail-top`       | Slot for adding a logo in the top part of the rail. This is not visible on mobile                       |
+| `rail-bottom`    | Slot for adding extra actions or other content to the bottom of the rail. This is not visible on mobile |
+| `default`        | The actual page content to display                                                                      |
+
+### Properties/Attributes
+
+| Name                 | Type         | Default | Description                                                                                |
+| -------------------- | ------------ | ------- | ------------------------------------------------------------------------------------------ |
+| `items`              | `MenuItem[]` | _[]_    | The list of menuitems to display in the navigation component                               |
+| `path`               | `string[]`   | _[]_    | The current/initial path for the navigation                                                |
+| `disable-navigation` | `boolean`    | _false_ | Disable navigation managed by the component. In that case you can use the event to trigger |
+
+#### MenuItem
+
+```typescript
+interface MenuItem {
+  id: string;
+  label: string;
+  path?: string;
+  url?: string;
+  icon?: string;
+  items?: MenuItem[];
+}
+```
+
+### Events
+
+| Name                | Detail           | Description                         |
+| ------------------- | ---------------- | ----------------------------------- |
+| `navigation-change` | `['one', 'two']` | The path selected in the navigation |

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@exmg/exm-navigation",
-  "version": "1.1.0",
+  "version": "1.1.2",
   "type": "module",
   "main": "index.js",
   "module": "index.js",
@@ -51,5 +51,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "1973df6ecaaf0a57b688f5eb8852516295bc04d6"
-}
+  "gitHead": "3423f0a9b57aa88161bddceec081fa0ba608c605"
+}

package/src/exm-navigation-base.d.ts

@@ -15,6 +15,7 @@ export declare class ExmNavigationBase extends ExmNavigationBase_base {
     items: MenuItem[];
     path: string[];
     drawerWidth: number;
+    disableNavigate: boolean;
     drawer?: ExmNavigationDrawer;
     navContent?: HTMLDivElement;
     persistent: boolean;
@@ -37,13 +38,14 @@ export declare class ExmNavigationBase extends ExmNavigationBase_base {
      * Set the correct values when the media changes.
      */
     handleMediaTypeChange(): void;
+    private getPathEndpoint;
     loadPage(path: string[]): void;
     /**
      * Handle Rail item click or Drawer sub menu click.
      * If the selected menu item has children, we add the first item to the list (as per Google implementation).
      * In this case we also do not close the drawer in non persistent mode, so the user is able to select a next level in the menu
      */
-    handleRailItemClick({ detail }: CustomEvent<string>): void;
+    private handleRailItemClick;
     /**
      * Handle the mouse enter of the rail item.
      */

package/src/exm-navigation-base.js

@@ -19,6 +19,7 @@ export class ExmNavigationBase extends MediaQueries(ExmgElement) {
         this.items = [];
         this.path = ['chat'];
         this.drawerWidth = 319;
+        this.disableNavigate = false;
         this.persistent = true;
         this.selectedItem = [];
         this.activeItem = [];
@@ -61,9 +62,29 @@ export class ExmNavigationBase extends MediaQueries(ExmgElement) {
         this.drawerOpen = this.media === 'desktop' && this.navigationHasSubmenu[this.selectedItem[0]];
         this.railOpen = this.media !== 'mobile';
     }
+    getPathEndpoint() {
+        let items = this.items;
+        let result;
+        const checkItems = (path, last) => {
+            const item = items.find((item) => item.id === path);
+            if (last) {
+                return (item === null || item === void 0 ? void 0 : item.path) || '/';
+            }
+            items = (item === null || item === void 0 ? void 0 : item.items) || [];
+            return;
+        };
+        for (let i = 0; i < this.selectedItem.length; i++) {
+            result = checkItems(this.selectedItem[i], i === this.selectedItem.length - 1);
+        }
+        return result || window.location.href;
+    }
     loadPage(path) {
         this.path = path;
         this.selectedItem = path;
+        this.fire('navigation-change', path);
+        if (!this.disableNavigate) {
+            window.history.pushState({}, '', this.getPathEndpoint());
+        }
     }
     /**
      * Handle Rail item click or Drawer sub menu click.
@@ -151,6 +172,7 @@ export class ExmNavigationBase extends MediaQueries(ExmgElement) {
         if ((!this.railOpen || !this.persistent) && !this.currentSelectedHasChildren(detail)) {
             this.drawerOpen = false;
         }
+        this.loadPage(this.selectedItem);
     }
     /**
      * Handle the topbar menu click.
@@ -185,7 +207,7 @@ export class ExmNavigationBase extends MediaQueries(ExmgElement) {
     renderDrawerMenuButton() {
         return !this.railOpen
             ? html `
-          <section>
+          <section class="drawer-menu-button">
             <exm-navigation-icon-button
               icon=${this.drawerOpen ? 'menu_open' : 'menu'}
               @navigation-icon-button-click=${this.handleTopbarMenuClick}
@@ -209,7 +231,7 @@ export class ExmNavigationBase extends MediaQueries(ExmgElement) {
         ></exm-navigation-drawer-menu>`
             : !this.railOpen
                 ? html `
-            <section>
+            <section class="drawer-back-button">
               <exm-navigation-icon-button
                 icon="arrow_back"
                 label="Main menu"
@@ -227,6 +249,9 @@ export class ExmNavigationBase extends MediaQueries(ExmgElement) {
       <exm-navigation-sub-menu
         .items=${this.items}
         .path=${this.activeItem}
+        ?has-back-button=${!this.railOpen &&
+            (this.activeItem.length > 1 ||
+                (this.activeItem.length > 0 && this.currentSelectedHasChildren(this.activeItem)))}
         @sub-menu-item-click=${this.handleSubMenuClick}
       ></exm-navigation-sub-menu>
     `;
@@ -241,7 +266,10 @@ export class ExmNavigationBase extends MediaQueries(ExmgElement) {
       @rail-item-click=${this.handleRailItemClick}
       @rail-item-mouseenter=${this.handleRailItemMouseEnter}
       @rail-item-mouseleave=${this.handleRailItemMouseLeave}
-    ></exm-navigation-rail>`;
+    >
+      <slot name="rail-top" slot="rail-top"></slot>
+      <slot name="rail-bottom" slot="rail-bottom"></slot>
+    </exm-navigation-rail>`;
     }
     /**
      * Render the topbar. This is displayed on mobile and contains the menu button and a slot for the title
@@ -249,6 +277,7 @@ export class ExmNavigationBase extends MediaQueries(ExmgElement) {
     renderTopbar() {
         return html `<exm-navigation-topbar ?drawer-open=${this.drawerOpen} @topbar-menu-click=${this.handleTopbarMenuClick}>
       <slot name="topbar-title" slot="topbar-title"></slot>
+      <slot name="topbar-actions" slot="topbar-actions"></slot>
     </exm-navigation-topbar>`;
     }
     render() {
@@ -271,7 +300,6 @@ export class ExmNavigationBase extends MediaQueries(ExmgElement) {
           <slot></slot>
         </section>
       </section>
-      <slot></slot>
     `;
     }
 }
@@ -285,6 +313,9 @@ __decorate([
 __decorate([
     property({ type: Number, attribute: 'drawer-width' })
 ], ExmNavigationBase.prototype, "drawerWidth", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'disable-navigation' })
+], ExmNavigationBase.prototype, "disableNavigate", void 0);
 __decorate([
     query('exm-navigation-drawer')
 ], ExmNavigationBase.prototype, "drawer", void 0);

package/src/exm-navigation-drawer-base.js

@@ -33,7 +33,9 @@ export class ExmNavigationDrawerBase extends ExmgElement {
         this.addEventListener('drawer-close', this.handleDrawerClose.bind(this));
     }
     render() {
-        return html `<mwc-drawer type="dismissible" ?open=${this.open}><slot></slot></mwc-drawer>`;
+        return html `<mwc-drawer type="dismissible" ?open=${this.open}>
+      <slot></slot>
+    </mwc-drawer>`;
     }
 }
 ExmNavigationDrawerBase.styles = [style];

package/src/exm-navigation-drawer-nav.d.ts

@@ -0,0 +1,9 @@
+import '@material/web/list/list.js';
+import '@material/web/list/list-item.js';
+import { ExmgElement } from '@exmg/lit-base';
+declare const ExmNavigationDrawerNav_base: typeof ExmgElement;
+export declare class ExmNavigationDrawerNav extends ExmNavigationDrawerNav_base {
+    static styles: import("lit").CSSResult[];
+    render(): import("lit-html").TemplateResult<1>;
+}
+export {};

package/src/exm-navigation-drawer-nav.js

@@ -0,0 +1,47 @@
+import { __decorate } from "tslib";
+import { html, css } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import { navigationRailHidden, navigationRailActive } from './exm-navigation-signals.js';
+import { SignalWatcher } from '@lit-labs/preact-signals';
+import '@material/web/list/list.js';
+import '@material/web/list/list-item.js';
+import { ExmgElement } from '@exmg/lit-base';
+let ExmNavigationDrawerNav = class ExmNavigationDrawerNav extends SignalWatcher(ExmgElement) {
+    render() {
+        return navigationRailHidden.value
+            ? html `<div class="nav">
+          <div class="header">
+            <md-icon-button @click=${() => this.fire('drawer-close', null, true)}
+              ><md-icon>menu_open</md-icon></md-icon-button
+            >
+          </div>
+          <div class="navigation">
+            ${navigationRailActive.value === null
+                ? html `<div class="nav top-level"><slot name="topLevel"></slot></div>`
+                : html `<div class="nav"><slot name="navTop"></slot><slot></slot></div>`}
+          </div>
+        </div>`
+            : html `<slot></slot>`;
+    }
+};
+ExmNavigationDrawerNav.styles = [
+    css `
+      :host {
+        display: block;
+      }
+
+      .nav {
+        margin: 8px 0 auto;
+      }
+
+      .header md-icon-button {
+        margin: 4px 12px 8px 16px;
+      }
+    `,
+];
+ExmNavigationDrawerNav = __decorate([
+    customElement('exm-navigation-drawer-nav')
+    // eslint-disable-next-line
+], ExmNavigationDrawerNav);
+export { ExmNavigationDrawerNav };
+//# sourceMappingURL=exm-navigation-drawer-nav.js.map

package/src/exm-navigation-rail-base.js

@@ -21,7 +21,7 @@ export class ExmNavigationRailBase extends ExmgElement {
         this.fire('rail-item-mouseleave', itemId);
     }
     render() {
-        return html `<div class="top"><slot name="top"></slot></div>
+        return html `<div class="rail-top"><slot name="rail-top"></slot></div>
       <nav class="nav">
         <ul>
           ${repeat(this.items, (item) => {
@@ -42,7 +42,7 @@ export class ExmNavigationRailBase extends ExmgElement {
         })}
         </ul>
       </nav>
-      <div class="bottom"><slot name="bottom"></slot></div>`;
+      <div class="rail-bottom"><slot name="rail-bottom"></slot></div>`;
     }
 }
 ExmNavigationRailBase.styles = [style];

package/src/exm-navigation-rail-nav-base.d.ts

@@ -0,0 +1,4 @@
+import { LitElement } from 'lit';
+export declare class ExmNavigationRailNavBase extends LitElement {
+    render(): import("lit-html").TemplateResult<1>;
+}

package/src/exm-navigation-rail-nav-base.js

@@ -0,0 +1,9 @@
+import { LitElement, html } from 'lit';
+export class ExmNavigationRailNavBase extends LitElement {
+    render() {
+        return html `<nav aria-label="Main">
+      <slot></slot>
+    </nav>`;
+    }
+}
+//# sourceMappingURL=exm-navigation-rail-nav-base.js.map

package/src/exm-navigation-rail-nav.d.ts

@@ -0,0 +1,9 @@
+import { ExmNavigationRailNavBase } from './exm-navigation-rail-nav-base.js';
+export declare class ExmNavigationRailNav extends ExmNavigationRailNavBase {
+    static styles: import("lit").CSSResult[];
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'exm-navigation-rail-nav': ExmNavigationRailNav;
+    }
+}

package/src/exm-navigation-rail-nav.js

@@ -0,0 +1,12 @@
+import { __decorate } from "tslib";
+import { customElement } from 'lit/decorators.js';
+import { style } from './styles/exm-navigation-rail-nav-css.js';
+import { ExmNavigationRailNavBase } from './exm-navigation-rail-nav-base.js';
+let ExmNavigationRailNav = class ExmNavigationRailNav extends ExmNavigationRailNavBase {
+};
+ExmNavigationRailNav.styles = [style];
+ExmNavigationRailNav = __decorate([
+    customElement('exm-navigation-rail-nav')
+], ExmNavigationRailNav);
+export { ExmNavigationRailNav };
+//# sourceMappingURL=exm-navigation-rail-nav.js.map

package/src/exm-navigation-signals.d.ts

@@ -1,4 +1,11 @@
+export declare const navigationItemHover: import("@preact/signals-core").Signal<boolean>;
 export declare const navigationDrawerHover: import("@preact/signals-core").Signal<boolean>;
+export declare const navigationDrawerOpen: import("@preact/signals-core").Signal<boolean>;
 export declare const navigationActiveHasSubmenu: import("@preact/signals-core").Signal<{
-    [menuItem: string]: boolean;
+    [k: string]: boolean;
 }>;
+export declare const navigationRailSelected: import("@preact/signals-core").Signal<string | null>;
+export declare const navigationSubSelected: import("@preact/signals-core").Signal<string | null>;
+export declare const navigationRailActive: import("@preact/signals-core").Signal<string | null>;
+export declare const navigationRailHidden: import("@preact/signals-core").Signal<boolean>;
+export declare const navigationDrawerPersistent: import("@preact/signals-core").Signal<boolean>;

package/src/exm-navigation-signals.js

@@ -0,0 +1,11 @@
+import { signal } from '@lit-labs/preact-signals';
+export const navigationItemHover = signal(false);
+export const navigationDrawerHover = signal(false);
+export const navigationDrawerOpen = signal(false);
+export const navigationActiveHasSubmenu = signal({});
+export const navigationRailSelected = signal(null);
+export const navigationSubSelected = signal(null);
+export const navigationRailActive = signal(null);
+export const navigationRailHidden = signal(false);
+export const navigationDrawerPersistent = signal(false);
+//# sourceMappingURL=exm-navigation-signals.js.map

package/src/exm-navigation-sub-menu-base.d.ts

@@ -8,6 +8,7 @@ import '@exmg/exm-collapsed/exm-collapsed.js';
 export declare class ExmNavigationSubMenuBase extends ExmgElement {
     items: MenuItem[];
     path: (string | null)[];
+    hasBackButton: boolean;
     currentItem?: MenuItem['items'];
     static styles: import("lit").CSSResult[];
     protected updated(changedProperties: PropertyValues): void;

package/src/exm-navigation-sub-menu-base.js

@@ -8,11 +8,13 @@ import './exm-navigation-rail-nav-item.js';
 import './exm-navigation-drawer-nav-item.js';
 import '@material/web/list/list.js';
 import '@exmg/exm-collapsed/exm-collapsed.js';
+import { classMap } from 'lit/directives/class-map.js';
 export class ExmNavigationSubMenuBase extends ExmgElement {
     constructor() {
         super(...arguments);
         this.items = [];
         this.path = [];
+        this.hasBackButton = false;
     }
     updated(changedProperties) {
         var _a;
@@ -56,8 +58,9 @@ export class ExmNavigationSubMenuBase extends ExmgElement {
     `;
     }
     render() {
+        const navClass = { nav: true, 'has-back-button': this.hasBackButton };
         return html `<div class="top"><slot name="top"></slot></div>
-      <nav class="nav">
+      <nav class=${classMap(navClass)}>
         <md-list>
           ${repeat(this.currentItem || [], ({ id }) => id, (item) => (item.items || []).length === 0
             ? html `
@@ -82,6 +85,9 @@ __decorate([
 __decorate([
     property({ type: Array })
 ], ExmNavigationSubMenuBase.prototype, "path", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'has-back-button' })
+], ExmNavigationSubMenuBase.prototype, "hasBackButton", void 0);
 __decorate([
     state()
 ], ExmNavigationSubMenuBase.prototype, "currentItem", void 0);

package/src/exm-navigation-toolbar-base.d.ts

@@ -0,0 +1,8 @@
+import { ExmgElement } from '@exmg/lit-base';
+import '@material/web/iconbutton/icon-button.js';
+import '@material/web/icon/icon.js';
+import '@material/mwc-top-app-bar-fixed';
+export declare class ExmNavigationToolbarBase extends ExmgElement {
+    protected firstUpdated(): void;
+    render(): import("lit-html").TemplateResult<1>;
+}

package/src/exm-navigation-toolbar-base.js

@@ -0,0 +1,33 @@
+import { ExmgElement } from '@exmg/lit-base';
+import { html } from 'lit';
+import '@material/web/iconbutton/icon-button.js';
+import '@material/web/icon/icon.js';
+import '@material/mwc-top-app-bar-fixed';
+export class ExmNavigationToolbarBase extends ExmgElement {
+    firstUpdated() {
+        const appToolbar = this.shadowRoot.querySelector('mwc-top-app-bar-fixed');
+        if (appToolbar) {
+            const observer = new MutationObserver((_, obs) => {
+                const shadowRoot = appToolbar.shadowRoot;
+                const header = shadowRoot ? shadowRoot.querySelector('header') : null;
+                if (header) {
+                    header.style.left = '0px';
+                    header.style.right = '0px';
+                    obs.disconnect(); // Stop observing once we have made the changes
+                }
+            });
+            observer.observe(appToolbar.shadowRoot, {
+                childList: true,
+                subtree: true,
+            });
+        }
+    }
+    render() {
+        return html `<mwc-top-app-bar-fixed>
+      <slot name="navigationIcon" slot="navigationIcon"></slot>
+      <slot name="title" slot="title"></slot>
+      <slot name="actionItems" slot="actionItems"></slot>
+    </mwc-top-app-bar-fixed>`;
+    }
+}
+//# sourceMappingURL=exm-navigation-toolbar-base.js.map

package/src/exm-navigation-toolbar.d.ts

@@ -0,0 +1,9 @@
+import { ExmNavigationToolbarBase } from './exm-navigation-toolbar-base.js';
+export declare class ExmNavigationToolbar extends ExmNavigationToolbarBase {
+    static styles: import("lit").CSSResult[];
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'exm-navigation-toolbar': ExmNavigationToolbar;
+    }
+}

package/src/exm-navigation-toolbar.js

@@ -0,0 +1,12 @@
+import { __decorate } from "tslib";
+import { customElement } from 'lit/decorators.js';
+import { style } from './styles/exm-navigation-toolbar-css.js';
+import { ExmNavigationToolbarBase } from './exm-navigation-toolbar-base.js';
+let ExmNavigationToolbar = class ExmNavigationToolbar extends ExmNavigationToolbarBase {
+};
+ExmNavigationToolbar.styles = [style];
+ExmNavigationToolbar = __decorate([
+    customElement('exm-navigation-toolbar')
+], ExmNavigationToolbar);
+export { ExmNavigationToolbar };
+//# sourceMappingURL=exm-navigation-toolbar.js.map

package/src/exm-navigation-topbar-base.js

@@ -19,7 +19,8 @@ export class ExmNavigationTopbarBase extends ExmgElement {
         icon=${this.drawerOpen ? 'menu_open' : 'menu'}
         @navigation-icon-button-click=${this.handleMenuButtonClick}
       ></exm-navigation-icon-button>
-      <slot name="topbar-title"></slot>
+      <slot name="topbar-title" class="topbar-title"></slot>
+      <slot name="topbar-actions"></slot>
     `;
     }
 }

package/src/mixins/media-queries.js

@@ -5,8 +5,8 @@ export const MediaQueries = (superClass) => {
         constructor() {
             super(...arguments);
             this.media = 'desktop';
-            this.mobileMedia = window.matchMedia('(max-width: 400px)');
-            this.tabletMedia = window.matchMedia('(min-width: 401px) and (max-width: 1200px)');
+            this.mobileMedia = window.matchMedia('(max-width: 960px)');
+            this.tabletMedia = window.matchMedia('(min-width: 961px) and (max-width: 1200px)');
             this.desktopMedia = window.matchMedia('(min-width: 1201px)');
         }
         updateMedia(media) {
@@ -15,7 +15,6 @@ export const MediaQueries = (superClass) => {
                     this.media = media;
                     this.requestUpdate();
                 }
-                console.log(media, mediaMatch.matches);
             };
         }
         connectedCallback() {

package/src/styles/exm-navigate-drawer-nav-item-css.d.ts

@@ -1,2 +1 @@
 export declare const style: import("lit").CSSResult;
-export default style;

package/src/styles/exm-navigate-drawer-nav-item-css.js

@@ -1,4 +1,40 @@
 import { css } from 'lit';
-export const style = css `:host{--_exm-navigation-item-background-color-selected: var( --exm-navigation-item-background-color-selected, var(--md-sys-color-secondary) );--_exm-navigation-item-color-selected: var(--exm-navigation-item-color-selected, var(--md-sys-color-on-secondary))}md-list-item{margin-right:8px;margin-left:8px;border-radius:1rem;--md-list-item-container-shape: 1rem;display:grid;grid-template-columns:auto 1fr auto}md-list-item[selected]{--md-list-item-label-text-color: var(--_exm-navigation-item-color-selected);background-color:var(--_exm-navigation-item-background-color-selected);--md-list-item-leading-icon-color: var(--_exm-navigation-item-color-selected) --md-list-item-trailing-icon-color: var(--_exm-navigation-item-color-selected)}md-list-item.collapsed-item[selected]{--md-list-item-label-text-color: var(--_exm-navigation-item-color-selected);background-color:var(--_exm-navigation-item-background-color-selected)}md-list-item[selected] md-icon{color:var(--md-sys-color-primary)}.sub-menu{margin-left:1rem}`;
-export default style;
+export const style = css `
+  :host {
+    --_exm-navigation-item-background-color-selected: var(
+      --exm-navigation-item-background-color-selected,
+      var(--md-sys-color-secondary)
+    );
+    --_exm-navigation-item-color-selected: var(--exm-navigation-item-color-selected, var(--md-sys-color-on-secondary));
+  }
+
+  md-list-item {
+    margin-right: 8px;
+    margin-left: 8px;
+    border-radius: 1rem;
+    --md-list-item-container-shape: 1rem;
+    display: grid;
+    grid-template-columns: auto 1fr auto;
+  }
+
+  md-list-item[selected] {
+    --md-list-item-label-text-color: var(--_exm-navigation-item-color-selected);
+    background-color: var(--_exm-navigation-item-background-color-selected);
+    --md-list-item-leading-icon-color: var(--_exm-navigation-item-color-selected)
+      --md-list-item-trailing-icon-color: var(--_exm-navigation-item-color-selected);
+  }
+
+  md-list-item.collapsed-item[selected] {
+    --md-list-item-label-text-color: var(--_exm-navigation-item-color-selected);
+    background-color: var(--_exm-navigation-item-background-color-selected);
+  }
+
+  md-list-item[selected] md-icon {
+    color: var(--md-sys-color-primary);
+  }
+
+  .sub-menu {
+    margin-left: 1rem;
+  }
+`;
 //# sourceMappingURL=exm-navigate-drawer-nav-item-css.js.map

package/src/styles/exm-navigation-css.d.ts

@@ -1,2 +1 @@
 export declare const style: import("lit").CSSResult;
-export default style;

package/src/styles/exm-navigation-css.js

@@ -1,4 +1,66 @@
 import { css } from 'lit';
-export const style = css `.navigation-container{display:grid;grid-template-columns:auto var(--exm-drawer-width, 500px) 1fr;grid-template-rows:1fr;width:100%;transition:grid-template-columns .3s ease}.navigation-container.show-topbar{grid-template-columns:1fr;grid-template-rows:auto 1fr}.navigation-container.show-topbar exm-navigation-topbar{grid-area:1/1/2/2;z-index:2}.navigation-container.show-topbar exm-navigation-drawer{grid-area:1/1/3/2}.navigation-container.show-topbar .content{grid-area:2/1/3/2}exm-navigation-rail{grid-area:1/1/2/2}exm-navigation-drawer{grid-area:1/2/2/3}.content{grid-area:1/3/2/4;z-index:1}exm-navigation-drawer{--md-list-container-color: none;--md-list-item-label-text-color: var(--md-sys-color-on-surface-variant);--md-list-item-supporting-text-color: var(--md-sys-color-on-surface-variant);--md-list-item-trailing-supporting-text-color: var(--md-sys-color-on-surface-variant);--md-list-item-container-shape: 24px;--mdc-theme-surface: var(--md-sys-color-surface-container-high);--mdc-shape-large: 1rem}.left-margin{margin-left:2.5rem}`;
-export default style;
+export const style = css `
+  .navigation-container {
+    display: grid;
+    grid-template-columns: auto var(--exm-drawer-width, 500px) 1fr;
+    grid-template-rows: 1fr;
+    width: 100%;
+    transition: grid-template-columns 0.3s ease;
+    max-height: 100vh;
+  }
+
+  .navigation-container.show-topbar {
+    grid-template-columns: 1fr;
+    grid-template-rows: auto 1fr;
+  }
+
+  .navigation-container.show-topbar exm-navigation-topbar {
+    grid-area: 1/1/2/2;
+    z-index: 2;
+  }
+
+  .navigation-container.show-topbar exm-navigation-drawer {
+    grid-area: 1/1/3/2;
+  }
+
+  .navigation-container.show-topbar .content {
+    grid-area: 2/1/3/2;
+  }
+
+  exm-navigation-rail {
+    grid-area: 1/1/2/2;
+  }
+
+  exm-navigation-drawer {
+    grid-area: 1/2/2/3;
+  }
+
+  .content {
+    grid-area: 1/3/2/4;
+    z-index: 1;
+    overflow: scroll;
+  }
+
+  exm-navigation-drawer {
+    --md-list-container-color: none;
+    --md-list-item-label-text-color: var(--md-sys-color-on-surface-variant);
+    --md-list-item-supporting-text-color: var(--md-sys-color-on-surface-variant);
+    --md-list-item-trailing-supporting-text-color: var(--md-sys-color-on-surface-variant);
+    --md-list-item-container-shape: 24px;
+    --mdc-theme-surface: var(--md-sys-color-surface-container-high);
+    --mdc-shape-large: 1rem;
+  }
+
+  .left-margin {
+    margin-left: 2.5rem;
+  }
+
+  .drawer-menu-button {
+    padding: 8px 12px;
+  }
+
+  .drawer-back-button {
+    padding: 8px 12px 0;
+  }
+`;
 //# sourceMappingURL=exm-navigation-css.js.map

package/src/styles/exm-navigation-drawer-css.d.ts

@@ -1,2 +1 @@
 export declare const style: import("lit").CSSResult;
-export default style;