@exmg/exm-navigation 1.1.0 → 1.1.1

package/README.md

@@ -0,0 +1,72 @@
+# `<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                  |
+
+#### 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.1",
   "type": "module",
   "main": "index.js",
   "module": "index.js",
@@ -51,5 +51,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "1973df6ecaaf0a57b688f5eb8852516295bc04d6"
-}
+  "gitHead": "e7086831faea0bdfe8628b0de9b7ddcc45174558"
+}

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

@@ -43,7 +43,7 @@ export declare class ExmNavigationBase extends ExmNavigationBase_base {
      * 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

@@ -64,6 +64,7 @@ export class ExmNavigationBase extends MediaQueries(ExmgElement) {
     loadPage(path) {
         this.path = path;
         this.selectedItem = path;
+        this.fire('navigation-change', path);
     }
     /**
      * Handle Rail item click or Drawer sub menu click.
@@ -241,7 +242,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 +253,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() {

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-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

@@ -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,56 @@
 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;
+  }
+
+  .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;
+  }
+`;
 //# 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;

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

@@ -1,4 +1,24 @@
 import { css } from 'lit';
-export const style = css `:root{--md-sys-color-background: var(--md-sys-color-surface-container-high)}:host{--mdc-drawer-width: 319px;display:grid;grid-template-columns:var(--mdc-drawer-width, 300px) 1fr;height:100vh;width:100%;box-sizing:border-box;transition:grid-template-columns .3s ease;position:relative}@media screen and (min-width: 961px){slot[name=appContent]{background-color:rgba(0,0,0,0)}}`;
-export default style;
+export const style = css `
+  :root {
+    --md-sys-color-background: var(--md-sys-color-surface-container-high);
+  }
+
+  :host {
+    --mdc-drawer-width: 319px;
+    display: grid;
+    grid-template-columns: var(--mdc-drawer-width, 300px) 1fr;
+    height: 100vh;
+    width: 100%;
+    box-sizing: border-box;
+    transition: grid-template-columns 0.3s ease;
+    position: relative;
+  }
+
+  @media screen and (min-width: 961px) {
+    slot[name='appContent'] {
+      background-color: rgba(0, 0, 0, 0);
+    }
+  }
+`;
 //# sourceMappingURL=exm-navigation-drawer-css.js.map

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

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

package/src/styles/exm-navigation-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}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-trailing-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;
+  }
+
+  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-trailing-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-navigation-drawer-nav-item-css.js.map

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

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

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

@@ -1,4 +1,23 @@
 import { css } from 'lit';
-export const style = css `.icon-button{border:none;background-color:rgba(0,0,0,0);color:#fff;width:48px;height:48px;display:flex;align-items:center}.icon-button.has-label{width:auto}.icon-button .label{padding:0 8px;white-space:nowrap;font-size:16px}`;
-export default style;
+export const style = css `
+  .icon-button {
+    border: none;
+    background-color: rgba(0, 0, 0, 0);
+    color: #fff;
+    width: 48px;
+    height: 48px;
+    display: flex;
+    align-items: center;
+  }
+
+  .icon-button.has-label {
+    width: auto;
+  }
+
+  .icon-button .label {
+    padding: 0 8px;
+    white-space: nowrap;
+    font-size: 16px;
+  }
+`;
 //# sourceMappingURL=exm-navigation-icon-button-css.js.map

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

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

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

@@ -1,4 +1,22 @@
 import { css } from 'lit';
-export const style = css `.icon{align-items:center;justify-content:center;display:flex;position:relative;height:100%;width:100%;font-variation-settings:"wght" 400,"opsz" 24;transition:font-variation-settings .2s cubic-bezier(0.2, 0, 0, 1);border-radius:16px;font-family:"Material Symbols Outlined";font-size:24px;line-height:1;direction:ltr;-webkit-font-smoothing:antialiased}`;
-export default style;
+export const style = css `
+  .icon {
+    align-items: center;
+    justify-content: center;
+    display: flex;
+    position: relative;
+    height: 100%;
+    width: 100%;
+    font-variation-settings:
+      'wght' 400,
+      'opsz' 24;
+    transition: font-variation-settings 0.2s cubic-bezier(0.2, 0, 0, 1);
+    border-radius: 16px;
+    font-family: 'Material Symbols Outlined';
+    font-size: 24px;
+    line-height: 1;
+    direction: ltr;
+    -webkit-font-smoothing: antialiased;
+  }
+`;
 //# sourceMappingURL=exm-navigation-icon-css.js.map

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

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