@exmg/exm-navigation 0.0.2-alpha.0

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/dist/styles/exm-navigation-sub-menu-css.d.ts

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

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/dist/styles/exm-navigation-topbar-css.d.ts

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

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/dist/types.d.ts

@@ -0,0 +1,8 @@
+export interface MenuItem {
+    id: string;
+    label: string;
+    path?: string;
+    url?: string;
+    icon?: string;
+    items?: MenuItem[];
+}

package/dist/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "@exmg/exm-navigation",
+  "version": "0.0.2-alpha.0+df24e0c",
+  "type": "module",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "module": "dist/index.js",
+  "exports": {
+    ".": "./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"
+  },
+  "dependencies": {
+    "@lit-labs/motion": "^1.0.7"
+  },
+  "peerDependencies": {
+    "@exmg/lit-base": "^3.0.3",
+    "@material/web": "^2.2.0",
+    "lit": "^3.2.1",
+    "tslib": "^2.6.2"
+  },
+  "keywords": [
+    "web-components",
+    "lit",
+    "navigation"
+  ],
+  "files": [
+    "**/*.scss",
+    "**/*.js",
+    "**/*.d.ts"
+  ],
+  "homepage": "https://bitbucket.org/exmachina/exm-web-components",
+  "repository": {
+    "type": "git",
+    "url": "git@bitbucket.org:exmachina/exm-web-components.git",
+    "directory": "packages/exm-navigation"
+  },
+  "license": "MIT",
+  "scripts": {},
+  "publishConfig": {
+    "access": "public"
+  },
+  "gitHead": "df24e0c74a76a7e1c258f69386036e24e7860256"
+}