@exmg/exm-navigation 1.1.0 → 1.1.1-alpha.9

package/dist/styles/exm-navigation-rail-nav-item-css.js

@@ -0,0 +1,94 @@
+import { css } from 'lit';
+export const style = css `
+  :host {
+    --_exm-navigation-rail-nav-item-color: var(
+      --exm-navigation-rail-nav-item-color,
+      var(--md-sys-color-on-surface-variant)
+    );
+    --_exm-navigation-rail-nav-item-icon-color: var(
+      --exm-navigation-rail-nav-item-icon-color,
+      var(--md-sys-color-on-surface-variant)
+    );
+    --_exm-navigation-rail-nav-item-icon-color-hover: var(
+      --exm-navigation-rail-nav-item-icon-color-hover,
+      var(--md-sys-color-surface-container-highest)
+    );
+    --_exm-navigation-rail-nav-item-icon-color-selected: var(
+      --exm-navigation-rail-nav-item-icon-color-selected,
+      var(--md-sys-color-secondary)
+    );
+    --_exm-navigation-rail-nav-item-color-selected: var(
+      --exm-navigation-rail-nav-item-color-selected,
+      var(--md-sys-color-on-secondary)
+    );
+    --_exm-navigation-rail-nav-item-width: var(--exm-navigation-rail-nav-item-width, 80px);
+    display: flex;
+    flex-direction: column;
+    width: var(--_exm-navigation-rail-nav-item-width);
+    margin: -2px 0 14px;
+    padding: 2px 0;
+    vertical-align: baseline;
+    align-items: center;
+    cursor: pointer;
+    width: 100%;
+  }
+
+  button {
+    position: relative;
+    background: none;
+    border: none;
+    color: var(--_exm-navigation-rail-nav-item-color);
+  }
+
+  button:focus {
+    outline: none;
+  }
+
+  .symbols {
+    display: flex;
+    position: relative;
+    align-items: center;
+    justify-content: center;
+    width: 56px;
+    height: 32px;
+    margin: 0 auto 4px;
+    transition: font-variation-settings 0.2s cubic-bezier(0.2, 0, 0, 1);
+    border-radius: 16px;
+    color: var(--_exm-navigation-rail-nav-item-icon-color);
+  }
+
+  .symbols:before {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    opacity: 0;
+    transform: scaleX(0.32);
+    transition-duration: 0.2s;
+    transition-property: transform, opacity;
+    transition-timing-function: linear;
+    border-radius: 100px;
+    background: var(--md-sys-color-secondary-container);
+    content: '';
+    z-index: -1;
+  }
+
+  :host(:hover) .symbols {
+    background: var(--_exm-navigation-rail-nav-item-icon-color-hover);
+    font-variation-settings:
+      'wght' 600,
+      'opsz' 24;
+  }
+
+  :host([selected]) .symbols {
+    background: var(--_exm-navigation-rail-nav-item-icon-color-selected);
+    color: var(--_exm-navigation-rail-nav-item-color-selected);
+    font-variation-settings:
+      'wght' 600,
+      'opsz' 24;
+  }
+
+  :host([selected]:hover) .symbols {
+    opacity: 0.7;
+  }
+`;
+//# sourceMappingURL=exm-navigation-rail-nav-item-css.js.map

package/{src → dist}/styles/exm-navigation-sub-menu-css.d.ts

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

package/dist/styles/exm-navigation-sub-menu-css.js

@@ -0,0 +1,21 @@
+import { css } from 'lit';
+export const style = css `
+  .nav {
+    padding: 8px;
+  }
+
+  md-list {
+    padding-top: 0;
+    display: grid;
+    grid-template-rows: repeat(auto-fit, auto);
+  }
+
+  .has-back-button {
+    padding-left: 48px;
+  }
+
+  .sub-menu {
+    margin-left: 1rem;
+  }
+`;
+//# sourceMappingURL=exm-navigation-sub-menu-css.js.map

package/{src → dist}/styles/exm-navigation-topbar-css.d.ts

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

package/dist/styles/exm-navigation-topbar-css.js

@@ -0,0 +1,30 @@
+import { css } from 'lit';
+export const style = css `
+  :host {
+    --_exm-navigation-topbar-background-color: var(
+      --exm-navigation-topbar-background-color,
+      var(--md-sys-color-surface-container)
+    );
+    --_exm-navigation-top-bar-height: var(--exm-navigation-top-bar-height, 64px);
+    background: var(--_exm-navigation-rail-background-color);
+    box-sizing: border-box;
+    display: grid;
+    grid-template-columns: auto 1fr auto;
+    height: var(--_exm-navigation-top-bar-height);
+    gap: 16px;
+    justify-content: space-between;
+    width: 100%;
+    padding: 8px 12px;
+  }
+
+  md-icon-button {
+    align-self: center;
+    grid-area: 1/1/2/2;
+    justify-self: center;
+  }
+
+  ::slotted(*) {
+    align-self: center;
+  }
+`;
+//# sourceMappingURL=exm-navigation-topbar-css.js.map

package/package.json

@@ -1,25 +1,25 @@
 {
   "name": "@exmg/exm-navigation",
-  "version": "1.1.0",
+  "version": "1.1.1-alpha.9+837d9ca",
   "type": "module",
-  "main": "index.js",
-  "module": "index.js",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
   "exports": {
-    ".": "./index.js",
-    "./exm-navigation.js": "./src/exm-navigation.js",
-    "./exm-navigation-drawer.js": "./src/exm-navigation-drawer.js",
-    "./exm-navigation-drawer-menu.js": "./src/exm-navigation-drawer-menu.js",
-    "./exm-navigation-drawer-nav-item.js": "./src/exm-navigation-drawer-nav-item.js",
-    "./exm-navigation-icon.js": "./src/exm-navigation-icon.js",
-    "./exm-navigation-icon-button.js": "./src/exm-navigation-icon-button.js",
-    "./exm-navigation-rail.js": "./src/exm-navigation-rail.js",
-    "./exm-navigation-rail-nav-item.js": "./src/exm-navigation-rail-nav-item.js",
-    "./exm-navigation-topbar.js": "./src/exm-navigation-topbar.js",
-    "./exm-navigation-base.js": "./src/ExmNavigationBase.js"
+    ".": "./dist/index.js",
+    "./exm-navigation.js": "./dist/exm-navigation.js",
+    "./exm-navigation-drawer.js": "./dist/exm-navigation-drawer.js",
+    "./exm-navigation-drawer-menu.js": "./dist/exm-navigation-drawer-menu.js",
+    "./exm-navigation-drawer-nav-item.js": "./dist/exm-navigation-drawer-nav-item.js",
+    "./exm-navigation-icon.js": "./dist/exm-navigation-icon.js",
+    "./exm-navigation-icon-button.js": "./dist/exm-navigation-icon-button.js",
+    "./exm-navigation-rail.js": "./dist/exm-navigation-rail.js",
+    "./exm-navigation-rail-nav-item.js": "./dist/exm-navigation-rail-nav-item.js",
+    "./exm-navigation-topbar.js": "./dist/exm-navigation-topbar.js",
+    "./exm-navigation-base.js": "./dist/ExmNavigationBase.js"
   },
   "dependencies": {
     "@exmg/lit-base": "^3.0.0",
-    "@material/mwc-drawer": "^0.27.0",
+    "@lit-labs/motion": "^1.0.7",
     "@material/mwc-top-app-bar-fixed": "^0.27.0",
     "@material/web": "^2.2.0",
     "lit": "^3.0.0",
@@ -38,18 +38,16 @@
     "**/*.js",
     "**/*.d.ts"
   ],
-  "homepage": "https://github.com/exmg/exmachina-web-components",
+  "homepage": "https://bitbucket.org/exmachina/exm-web-components",
   "repository": {
     "type": "git",
-    "url": "git@github.com:exmg/exm-web-components.git",
+    "url": "git@bitbucket.org:exmachina/exm-web-components.git",
     "directory": "packages/exm-navigation"
   },
   "license": "MIT",
-  "scripts": {
-    "build:styles": "exmg-lit-cli sass -f \"./**/*.scss\""
-  },
+  "scripts": {},
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "1973df6ecaaf0a57b688f5eb8852516295bc04d6"
-}
+  "gitHead": "837d9ca5424b3436826a18d1d542483134448e73"
+}

package/index.d.ts

@@ -1,12 +0,0 @@
-export { ExmNavigation } from './src/exm-navigation.js';
-export { ExmNavigationBase } from './src/exm-navigation-base.js';
-export { ExmNavigationDrawerBase } from './src/exm-navigation-drawer-base.js';
-export { ExmNavigationDrawerMenuBase } from './src/exm-navigation-drawer-menu-base.js';
-export { ExmNavigationDrawerNavItemBase } from './src/exm-navigation-drawer-nav-item-base.js';
-export { ExmNavigationIconBase } from './src/exm-navigation-icon-base.js';
-export { ExmNavigationIconButtonBase } from './src/exm-navigation-icon-button-base.js';
-export { ExmNavigationRailBase } from './src/exm-navigation-rail-base.js';
-export { ExmNavigationRailNavItemBase } from './src/exm-navigation-rail-nav-item-base.js';
-export { ExmNavigationSubMenuBase } from './src/exm-navigation-sub-menu-base.js';
-export { ExmNavigationTopbarBase } from './src/exm-navigation-topbar-base.js';
-export { style as exmgNavigationStyles } from './src/styles/exm-navigation-css.js';

package/index.js

@@ -1,13 +0,0 @@
-export { ExmNavigation } from './src/exm-navigation.js';
-export { ExmNavigationBase } from './src/exm-navigation-base.js';
-export { ExmNavigationDrawerBase } from './src/exm-navigation-drawer-base.js';
-export { ExmNavigationDrawerMenuBase } from './src/exm-navigation-drawer-menu-base.js';
-export { ExmNavigationDrawerNavItemBase } from './src/exm-navigation-drawer-nav-item-base.js';
-export { ExmNavigationIconBase } from './src/exm-navigation-icon-base.js';
-export { ExmNavigationIconButtonBase } from './src/exm-navigation-icon-button-base.js';
-export { ExmNavigationRailBase } from './src/exm-navigation-rail-base.js';
-export { ExmNavigationRailNavItemBase } from './src/exm-navigation-rail-nav-item-base.js';
-export { ExmNavigationSubMenuBase } from './src/exm-navigation-sub-menu-base.js';
-export { ExmNavigationTopbarBase } from './src/exm-navigation-topbar-base.js';
-export { style as exmgNavigationStyles } from './src/styles/exm-navigation-css.js';
-//# sourceMappingURL=index.js.map

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

@@ -1,7 +0,0 @@
-import { ExmgElement } from '@exmg/lit-base/index.js';
-import './exm-navigation-rail-nav-item.js';
-export declare class ExmNavigationMenuButtonBase extends ExmgElement {
-    open: boolean;
-    handleMenuButtonClick(itemId: string): void;
-    render(): import("lit-html").TemplateResult<1>;
-}

package/src/exm-navigation-menu-button.d.ts

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

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

@@ -1,4 +0,0 @@
-export declare const navigationDrawerHover: import("@preact/signals-core").Signal<boolean>;
-export declare const navigationActiveHasSubmenu: import("@preact/signals-core").Signal<{
-    [menuItem: string]: boolean;
-}>;

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

@@ -1,88 +0,0 @@
-import { __decorate } from "tslib";
-import { html } from 'lit';
-import { ExmgElement } from '@exmg/lit-base/index.js';
-import { property, state } from 'lit/decorators.js';
-import { repeat } from 'lit/directives/repeat.js';
-import { style } from './styles/exm-navigation-sub-menu-css.js';
-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';
-export class ExmNavigationSubMenuBase extends ExmgElement {
-    constructor() {
-        super(...arguments);
-        this.items = [];
-        this.path = [];
-    }
-    updated(changedProperties) {
-        var _a;
-        if (changedProperties.has('path') || changedProperties.has('items')) {
-            console.log('updated', this.path);
-            this.currentItem = ((_a = this.items.find((item) => item.id === this.path[0])) === null || _a === void 0 ? void 0 : _a.items) || [];
-        }
-    }
-    handleSubMenuItemClick(path) {
-        this.fire('sub-menu-item-click', path);
-    }
-    renderSubMenu(item, path) {
-        return html `
-      <exm-navigation-drawer-nav-item
-        type="button"
-        ?selected=${this.path.includes(item.id)}
-        class="has-submenu"
-        @click=${this.handleSubMenuItemClick.bind(this, [...path])}
-        ?has-submenu=${true}
-        submenu-icon=${this.path.includes(item.id) ? 'expand_less' : 'expand_more'}
-        >${item.label}
-      </exm-navigation-drawer-nav-item>
-      <exm-collapsed id="collapsed" ?opened=${this.path.includes(item.id)}>
-        <div class="sub-menu">
-          <md-list>
-            <!-- Need to check for multiple items -->
-            ${(item.items || []).map((subItem) => (subItem.items || []).length === 0
-            ? html `
-                    <exm-navigation-drawer-nav-item
-                      class="collapsed-item"
-                      ?selected=${this.path.includes(subItem.id)}
-                      @click=${this.handleSubMenuItemClick.bind(this, [...path, subItem.id])}
-                    >
-                      ${subItem.label}
-                    </exm-navigation-drawer-nav-item>
-                  `
-            : this.renderSubMenu(item, [this.path[0] || '', item.id]))}
-          </md-list>
-        </div>
-      </exm-collapsed>
-    `;
-    }
-    render() {
-        return html `<div class="top"><slot name="top"></slot></div>
-      <nav class="nav">
-        <md-list>
-          ${repeat(this.currentItem || [], ({ id }) => id, (item) => (item.items || []).length === 0
-            ? html `
-                    <exm-navigation-drawer-nav-item
-                      type="button"
-                      ?selected=${this.path.includes(item.id)}
-                      @click=${this.handleSubMenuItemClick.bind(this, [this.path[0] || '', item.id])}
-                    >
-                      ${item.label}
-                    </exm-navigation-drawer-nav-item>
-                  `
-            : this.renderSubMenu(item, [this.path[0] || '', item.id]))}
-        </md-list>
-      </nav>
-      <div class="bottom"><slot name="bottom"></slot></div>`;
-    }
-}
-ExmNavigationSubMenuBase.styles = [style];
-__decorate([
-    property({ type: Array })
-], ExmNavigationSubMenuBase.prototype, "items", void 0);
-__decorate([
-    property({ type: Array })
-], ExmNavigationSubMenuBase.prototype, "path", void 0);
-__decorate([
-    state()
-], ExmNavigationSubMenuBase.prototype, "currentItem", void 0);
-//# sourceMappingURL=exm-navigation-sub-menu-base.js.map

package/src/mediaQueries.d.ts

@@ -1,7 +0,0 @@
-import { LitElement } from 'lit';
-type Constructor<T = {}> = new (...args: any[]) => T;
-type MediaType = 'mobile' | 'tablet' | 'desktop';
-export declare const MediaQueries: <T extends Constructor<LitElement>>(superClass: T) => Constructor<{
-    media: MediaType;
-}> & T;
-export {};

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

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

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

@@ -1,4 +0,0 @@
-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;
-//# sourceMappingURL=exm-navigate-drawer-nav-item-css.js.map

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

@@ -1,4 +0,0 @@
-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;
-//# sourceMappingURL=exm-navigation-css.js.map

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

@@ -1,4 +0,0 @@
-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;
-//# sourceMappingURL=exm-navigation-drawer-css.js.map

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

@@ -1,4 +0,0 @@
-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;
-//# sourceMappingURL=exm-navigation-drawer-nav-item-css.js.map

package/src/styles/exm-navigation-drawer-nav-item.scss

@@ -1,36 +0,0 @@
-: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;
-}

package/src/styles/exm-navigation-drawer.scss

@@ -1,24 +0,0 @@
-: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;
-
-  // This is needed because the aside is positioned absolute.
-  // This will tie them together and makes positioning the aside easier
-  position: relative;
-}
-
-@media screen and (min-width: 961px) {
-  slot[name='appContent'] {
-    background-color: transparent;
-  }
-}

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

@@ -1,4 +0,0 @@
-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;
-//# sourceMappingURL=exm-navigation-icon-button-css.js.map

package/src/styles/exm-navigation-icon-button.scss

@@ -1,19 +0,0 @@
-.icon-button {
-  border: none;
-  background-color: transparent;
-  color: white;
-  width: 48px;
-  height: 48px;
-  display: flex;
-  align-items: center;
-
-  &.has-label {
-    width: auto;
-  }
-
-  .label {
-    padding: 0 8px;
-    white-space: nowrap;
-    font-size: 16px;
-  }
-}

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

@@ -1,4 +0,0 @@
-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;
-//# sourceMappingURL=exm-navigation-icon-css.js.map

package/src/styles/exm-navigation-icon.scss

@@ -1,18 +0,0 @@
-.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;
-}

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

@@ -1,4 +0,0 @@
-import { css } from 'lit';
-export const style = css `:host{--_exm-navigation-rail-background-color: var( --exm-navigation-rail-background-color, var(--md-sys-color-surface-container) );--_exm-navigation-rail-width: var(--exm-navigation-rail-nav-width, 88px);display:flex;flex-direction:column;justify-content:space-between;height:100%;background:var(--_exm-navigation-rail-background-color);overflow-y:auto;z-index:8;box-sizing:border-box;width:var(--_exm-navigation-rail-width)}@media screen and (min-width: 961px){:host{display:flex}}nav{flex:1}nav ul{list-style:none;padding:0;margin:0}nav li{padding:0;margin:0}.bottom{display:flex;flex-direction:column;flex-grow:1;justify-content:flex-end}`;
-export default style;
-//# sourceMappingURL=exm-navigation-rail-css.js.map

package/src/styles/exm-navigation-rail-nav-item-css.js

@@ -1,4 +0,0 @@
-import { css } from 'lit';
-export const style = css `:host{--_exm-navigation-rail-nav-item-color: var( --exm-navigation-rail-nav-item-color, var(--md-sys-color-on-surface-variant) );--_exm-navigation-rail-nav-item-icon-color: var( --exm-navigation-rail-nav-item-icon-color, var(--md-sys-color-on-surface-variant) );--_exm-navigation-rail-nav-item-icon-color-hover: var( --exm-navigation-rail-nav-item-icon-color-hover, var(--md-sys-color-surface-container-highest) );--_exm-navigation-rail-nav-item-icon-color-selected: var( --exm-navigation-rail-nav-item-icon-color-selected, var(--md-sys-color-secondary) );--_exm-navigation-rail-nav-item-color-selected: var( --exm-navigation-rail-nav-item-color-selected, var(--md-sys-color-on-secondary) );--_exm-navigation-rail-nav-item-width: var(--exm-navigation-rail-nav-item-width, 80px);display:flex;flex-direction:column;width:var(--_exm-navigation-rail-nav-item-width);margin:-2px 0 14px;padding:2px 0;vertical-align:baseline;align-items:center;cursor:pointer;width:100%}button{position:relative;background:none;border:none;color:var(--_exm-navigation-rail-nav-item-color)}button:focus{outline:none}.symbols{display:flex;position:relative;align-items:center;justify-content:center;width:56px;height:32px;margin:0 auto 4px;transition:font-variation-settings .2s cubic-bezier(0.2, 0, 0, 1);border-radius:16px;color:var(--_exm-navigation-rail-nav-item-icon-color)}.symbols:before{position:absolute;width:100%;height:100%;opacity:0;transform:scaleX(0.32);transition-duration:.2s;transition-property:transform,opacity;transition-timing-function:linear;border-radius:100px;background:var(--md-sys-color-secondary-container);content:"";z-index:-1}:host(:hover) .symbols{background:var(--_exm-navigation-rail-nav-item-icon-color-hover);font-variation-settings:"wght" 600,"opsz" 24}:host([selected]) .symbols{background:var(--_exm-navigation-rail-nav-item-icon-color-selected);color:var(--_exm-navigation-rail-nav-item-color-selected);font-variation-settings:"wght" 600,"opsz" 24}:host([selected]:hover) .symbols{opacity:.7}`;
-export default style;
-//# sourceMappingURL=exm-navigation-rail-nav-item-css.js.map

package/src/styles/exm-navigation-rail-nav-item.scss

@@ -1,92 +0,0 @@
-:host {
-  --_exm-navigation-rail-nav-item-color: var(
-    --exm-navigation-rail-nav-item-color,
-    var(--md-sys-color-on-surface-variant)
-  );
-  --_exm-navigation-rail-nav-item-icon-color: var(
-    --exm-navigation-rail-nav-item-icon-color,
-    var(--md-sys-color-on-surface-variant)
-  );
-  --_exm-navigation-rail-nav-item-icon-color-hover: var(
-    --exm-navigation-rail-nav-item-icon-color-hover,
-    var(--md-sys-color-surface-container-highest)
-  );
-  --_exm-navigation-rail-nav-item-icon-color-selected: var(
-    --exm-navigation-rail-nav-item-icon-color-selected,
-    var(--md-sys-color-secondary)
-  );
-  --_exm-navigation-rail-nav-item-color-selected: var(
-    --exm-navigation-rail-nav-item-color-selected,
-    var(--md-sys-color-on-secondary)
-  );
-
-  --_exm-navigation-rail-nav-item-width: var(--exm-navigation-rail-nav-item-width, 80px);
-
-  display: flex;
-  flex-direction: column;
-  width: var(--_exm-navigation-rail-nav-item-width);
-  margin: -2px 0 14px;
-  padding: 2px 0;
-  vertical-align: baseline;
-  align-items: center;
-  cursor: pointer;
-  width: 100%;
-}
-
-button {
-  position: relative;
-  background: none;
-  border: none;
-  color: var(--_exm-navigation-rail-nav-item-color);
-}
-
-button:focus {
-  outline: none;
-}
-
-.symbols {
-  display: flex;
-  position: relative;
-  align-items: center;
-  justify-content: center;
-  width: 56px;
-  height: 32px;
-  margin: 0 auto 4px;
-  transition: font-variation-settings 0.2s cubic-bezier(0.2, 0, 0, 1);
-  border-radius: 16px;
-  color: var(--_exm-navigation-rail-nav-item-icon-color);
-}
-
-.symbols:before {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  opacity: 0;
-  transform: scaleX(0.32);
-  transition-duration: 0.2s;
-  transition-property: transform, opacity;
-  transition-timing-function: linear;
-  border-radius: 100px;
-  background: var(--md-sys-color-secondary-container);
-  content: '';
-  z-index: -1;
-}
-
-:host(:hover) .symbols {
-  background: var(--_exm-navigation-rail-nav-item-icon-color-hover);
-  font-variation-settings:
-    'wght' 600,
-    'opsz' 24;
-}
-
-:host([selected]) .symbols {
-  background: var(--_exm-navigation-rail-nav-item-icon-color-selected);
-  color: var(--_exm-navigation-rail-nav-item-color-selected);
-  font-variation-settings:
-    'wght' 600,
-    'opsz' 24;
-}
-
-:host([selected]:hover) .symbols {
-  opacity: 0.7;
-}