@triptease/tt-navbar 0.0.7 → 0.0.9

package/dist/src/TtNavbar.js

@@ -1,6 +1,8 @@
 import { __decorate } from "tslib";
 import { html, LitElement } from 'lit';
 import { property } from 'lit/decorators.js';
+import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
+import { campaigns, channels, chevronDown, gear, graph, home, user, wallet } from '@triptease/icons';
 import { styles } from './styles.js';
 export class TtNavbar extends LitElement {
     constructor() {
@@ -22,80 +24,120 @@ export class TtNavbar extends LitElement {
     render() {
         return html `
       <nav id=${this.id}>
-        <a href=${this.buildUrl('/')} @click=${this.onAnchorClick}>Dashboard</a>
-        <a href="https://app.campaign-manager.triptease.io">Campaigns</a>
-        <a href=${this.buildUrl('/channels')} @click=${this.onAnchorClick}
-          >Channels</a
-        >
-        <details>
-          <summary>Market Insights</summary>
-          <div>
-            <a
-              href=${this.buildUrl('/parity/$CLIENT_KEY')}
-              @click=${this.onAnchorClick}
+        <div class="nav-items">
+          <a
+            class="nav-item"
+            href=${this.buildUrl('/')}
+            @click=${this.onAnchorClick}
+          >${unsafeSVG(home)}Dashboard</a
+          >
+          <a class="nav-item" href="https://app.campaign-manager.triptease.io"
+          >${unsafeSVG(campaigns)}Campaigns</a
+          >
+          <a
+            class="nav-item"
+            href=${this.buildUrl('/channels')}
+            @click=${this.onAnchorClick}
+          >${unsafeSVG(channels)}Channels</a
+          >
+          <details>
+            <summary>
+              ${unsafeSVG(graph)}
+              <span>Market Insights</span>
+              <span class="icon chevron"> ${unsafeSVG(chevronDown)}</span>
+            </summary>
+            <div class="dropdown-items">
+              <a
+                class="sub-nav-item"
+                href=${this.buildUrl('/parity/$CLIENT_KEY')}
+                @click=${this.onAnchorClick}
               >Parity</a
-            >
-            <a
-              href=${this.buildUrl('/guest-insights/$CLIENT_KEY')}
-              @click=${this.onAnchorClick}
+              >
+              <a
+                class="sub-nav-item"
+                href=${this.buildUrl('/guest-insights/$CLIENT_KEY')}
+                @click=${this.onAnchorClick}
               >Guest insights</a
-            >
-          </div>
-        </details>
-        <details>
-          <summary>Settings</summary>
-          <div>
-            <a
-              href=${this.buildUrl('/$CLIENT_KEY/guest-behavioural-data')}
-              @click=${this.onAnchorClick}
+              >
+            </div>
+          </details>
+          <details>
+            <summary>
+              ${unsafeSVG(gear)}
+              <span>Settings</span>
+              <span class="icon chevron"> ${unsafeSVG(chevronDown)}</span>
+            </summary>
+            <div class="dropdown-items">
+              <a
+                class="sub-nav-item"
+                href=${this.buildUrl('/$CLIENT_KEY/guest-behavioural-data')}
+                @click=${this.onAnchorClick}
               >Email setup</a
-            >
-            <a
-              href=${this.buildUrl('/$CLIENT_KEY/crm-config')}
-              @click=${this.onAnchorClick}
+              >
+              <a
+                class="sub-nav-item"
+                href=${this.buildUrl('/$CLIENT_KEY/crm-config')}
+                @click=${this.onAnchorClick}
               >CRM connectivity</a
-            >
-            <a
-              href=${this.buildUrl('/settings/group')}
-              @click=${this.onAnchorClick}
+              >
+              <a
+                class="sub-nav-item"
+                href=${this.buildUrl('/settings/group')}
+                @click=${this.onAnchorClick}
               >Group settings</a
-            >
-            <a
-              href=${this.buildUrl('/settings/$CLIENT_KEY/hotels/')}
-              @click=${this.onAnchorClick}
+              >
+              <a
+                class="sub-nav-item"
+                href=${this.buildUrl('/settings/$CLIENT_KEY/hotels/')}
+                @click=${this.onAnchorClick}
               >Property settings</a
-            >
-          </div>
-        </details>
-        <hr />
-        <details>
-          <summary>Account</summary>
-          <div>
-            <a href=${this.buildUrl('/account')} @click=${this.onAnchorClick}
+              >
+            </div>
+          </details>
+          <hr />
+          <details>
+            <summary>
+              ${unsafeSVG(user)}
+              <span>Account</span>
+              <span class="icon chevron"> ${unsafeSVG(chevronDown)}</span>
+            </summary>
+            <div class="dropdown-items">
+              <a
+                class="sub-nav-item"
+                href=${this.buildUrl('/account')}
+                @click=${this.onAnchorClick}
               >User settings</a
-            >
-            <a
-              href=${this.buildUrl('/account/team/$CLIENT_KEY')}
-              @click=${this.onAnchorClick}
+              >
+              <a
+                class="sub-nav-item"
+                href=${this.buildUrl('/account/team/$CLIENT_KEY')}
+                @click=${this.onAnchorClick}
               >Team and permissions</a
-            >
-          </div>
-        </details>
-        <details>
-          <summary>Billing</summary>
-          <div>
-            <a
-              href=${this.buildUrl('/account/billing-management/$CLIENT_KEY')}
-              @click=${this.onAnchorClick}
+              >
+            </div>
+          </details>
+          <details class="dropdown-items">
+            <summary>
+              ${unsafeSVG(wallet)}
+              <span>Billing</span>
+              <span class="icon chevron"> ${unsafeSVG(chevronDown)}</span>
+            </summary>
+            <div>
+              <a
+                class="sub-nav-item"
+                href=${this.buildUrl('/account/billing-management/$CLIENT_KEY')}
+                @click=${this.onAnchorClick}
               >Booking reconciliation</a
-            >
-            <a
-              href=${this.buildUrl('/subscriptions/$CLIENT_KEY')}
-              @click=${this.onAnchorClick}
+              >
+              <a
+                class="sub-nav-item"
+                href=${this.buildUrl('/subscriptions/$CLIENT_KEY')}
+                @click=${this.onAnchorClick}
               >Subscriptions</a
-            >
-          </div>
-        </details>
+              >
+            </div>
+          </details>
+        </div>
         <slot name="clientSelector"></slot>
       </nav>
     `;

package/dist/src/TtNavbar.js.map

@@ -1 +1 @@
-{"version":3,"file":"TtNavbar.js","sourceRoot":"","sources":["../../src/TtNavbar.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAErC,MAAM,OAAO,QAAS,SAAQ,UAAU;IAAxC;;QAYU,aAAQ,GAAG,CAAC,IAAY,EAAU,EAAE;YAC1C,IAAI,CAAC,IAAI,CAAC,SAAS;gBAAE,MAAM,IAAI,KAAK,CAAC,uBAAuB,CAAC,CAAC;YAE9D,MAAM,aAAa,GAAG,IAAI,CAAC,OAAO,CAAC,aAAa,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC;YAClE,IAAI,CAAC,IAAI,CAAC,OAAO;gBAAE,OAAO,aAAa,CAAC;YAExC,OAAO,IAAI,GAAG,CAAC,aAAa,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC,QAAQ,EAAE,CAAC;QACzD,CAAC,CAAC;QAEM,kBAAa,GAAG,CAAC,CAAa,EAAE,EAAE;YACxC,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;gBAClB,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;YACnB,CAAC;QACH,CAAC,CAAC;IAmFJ,CAAC;IAjFC,MAAM;QACJ,OAAO,IAAI,CAAA;gBACC,IAAI,CAAC,EAAE;kBACL,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,WAAW,IAAI,CAAC,aAAa;;kBAE/C,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC,WAAW,IAAI,CAAC,aAAa;;;;;;;qBAOpD,IAAI,CAAC,QAAQ,CAAC,qBAAqB,CAAC;uBAClC,IAAI,CAAC,aAAa;;;;qBAIpB,IAAI,CAAC,QAAQ,CAAC,6BAA6B,CAAC;uBAC1C,IAAI,CAAC,aAAa;;;;;;;;;qBASpB,IAAI,CAAC,QAAQ,CAAC,qCAAqC,CAAC;uBAClD,IAAI,CAAC,aAAa;;;;qBAIpB,IAAI,CAAC,QAAQ,CAAC,yBAAyB,CAAC;uBACtC,IAAI,CAAC,aAAa;;;;qBAIpB,IAAI,CAAC,QAAQ,CAAC,iBAAiB,CAAC;uBAC9B,IAAI,CAAC,aAAa;;;;qBAIpB,IAAI,CAAC,QAAQ,CAAC,+BAA+B,CAAC;uBAC5C,IAAI,CAAC,aAAa;;;;;;;;;sBASnB,IAAI,CAAC,QAAQ,CAAC,UAAU,CAAC,WAAW,IAAI,CAAC,aAAa;;;;qBAIvD,IAAI,CAAC,QAAQ,CAAC,2BAA2B,CAAC;uBACxC,IAAI,CAAC,aAAa;;;;;;;;;qBASpB,IAAI,CAAC,QAAQ,CAAC,yCAAyC,CAAC;uBACtD,IAAI,CAAC,aAAa;;;;qBAIpB,IAAI,CAAC,QAAQ,CAAC,4BAA4B,CAAC;uBACzC,IAAI,CAAC,aAAa;;;;;;;KAOpC,CAAC;IACJ,CAAC;;AA1GM,eAAM,GAAG,MAAM,AAAT,CAAU;AAGvB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC;0CACmB;AAGhD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,UAAU,EAAE,CAAC;yCACjC;AAGjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,YAAY,EAAE,CAAC;2CACjC","sourcesContent":["import { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { styles } from './styles.js';\n\nexport class TtNavbar extends LitElement {\n  static styles = styles;\n\n  @property({ type: Function })\n  navigate: ((e: MouseEvent) => void) | undefined;\n\n  @property({ type: String, attribute: 'base-url' })\n  baseUrl?: string;\n\n  @property({ type: String, attribute: 'client-key' })\n  clientKey?: string;\n\n  private buildUrl = (path: string): string => {\n    if (!this.clientKey) throw new Error('clientKey is required');\n\n    const formattedPath = path.replace('$CLIENT_KEY', this.clientKey);\n    if (!this.baseUrl) return formattedPath;\n\n    return new URL(formattedPath, this.baseUrl).toString();\n  };\n\n  private onAnchorClick = (e: MouseEvent) => {\n    if (this.navigate) {\n      this.navigate(e);\n    }\n  };\n\n  render() {\n    return html`\n      <nav id=${this.id}>\n        <a href=${this.buildUrl('/')} @click=${this.onAnchorClick}>Dashboard</a>\n        <a href=\"https://app.campaign-manager.triptease.io\">Campaigns</a>\n        <a href=${this.buildUrl('/channels')} @click=${this.onAnchorClick}\n          >Channels</a\n        >\n        <details>\n          <summary>Market Insights</summary>\n          <div>\n            <a\n              href=${this.buildUrl('/parity/$CLIENT_KEY')}\n              @click=${this.onAnchorClick}\n              >Parity</a\n            >\n            <a\n              href=${this.buildUrl('/guest-insights/$CLIENT_KEY')}\n              @click=${this.onAnchorClick}\n              >Guest insights</a\n            >\n          </div>\n        </details>\n        <details>\n          <summary>Settings</summary>\n          <div>\n            <a\n              href=${this.buildUrl('/$CLIENT_KEY/guest-behavioural-data')}\n              @click=${this.onAnchorClick}\n              >Email setup</a\n            >\n            <a\n              href=${this.buildUrl('/$CLIENT_KEY/crm-config')}\n              @click=${this.onAnchorClick}\n              >CRM connectivity</a\n            >\n            <a\n              href=${this.buildUrl('/settings/group')}\n              @click=${this.onAnchorClick}\n              >Group settings</a\n            >\n            <a\n              href=${this.buildUrl('/settings/$CLIENT_KEY/hotels/')}\n              @click=${this.onAnchorClick}\n              >Property settings</a\n            >\n          </div>\n        </details>\n        <hr />\n        <details>\n          <summary>Account</summary>\n          <div>\n            <a href=${this.buildUrl('/account')} @click=${this.onAnchorClick}\n              >User settings</a\n            >\n            <a\n              href=${this.buildUrl('/account/team/$CLIENT_KEY')}\n              @click=${this.onAnchorClick}\n              >Team and permissions</a\n            >\n          </div>\n        </details>\n        <details>\n          <summary>Billing</summary>\n          <div>\n            <a\n              href=${this.buildUrl('/account/billing-management/$CLIENT_KEY')}\n              @click=${this.onAnchorClick}\n              >Booking reconciliation</a\n            >\n            <a\n              href=${this.buildUrl('/subscriptions/$CLIENT_KEY')}\n              @click=${this.onAnchorClick}\n              >Subscriptions</a\n            >\n          </div>\n        </details>\n        <slot name=\"clientSelector\"></slot>\n      </nav>\n    `;\n  }\n}\n"]}
+{"version":3,"file":"TtNavbar.js","sourceRoot":"","sources":["../../src/TtNavbar.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { unsafeSVG } from 'lit/directives/unsafe-svg.js';\nimport { campaigns, channels, chevronDown, gear, graph, home, user, wallet } from '@triptease/icons';\nimport { styles } from './styles.js';\n\nexport class TtNavbar extends LitElement {\n  static styles = styles;\n\n  @property({ type: Function })\n  navigate: ((e: MouseEvent) => void) | undefined;\n\n  @property({ type: String, attribute: 'base-url' })\n  baseUrl?: string;\n\n  @property({ type: String, attribute: 'client-key' })\n  clientKey?: string;\n\n  private buildUrl = (path: string): string => {\n    if (!this.clientKey) throw new Error('clientKey is required');\n\n    const formattedPath = path.replace('$CLIENT_KEY', this.clientKey);\n    if (!this.baseUrl) return formattedPath;\n\n    return new URL(formattedPath, this.baseUrl).toString();\n  };\n\n  private onAnchorClick = (e: MouseEvent) => {\n    if (this.navigate) {\n      this.navigate(e);\n    }\n  };\n\n  render() {\n    return html`\n      <nav id=${this.id}>\n        <div class=\"nav-items\">\n          <a\n            class=\"nav-item\"\n            href=${this.buildUrl('/')}\n            @click=${this.onAnchorClick}\n          >${unsafeSVG(home)}Dashboard</a\n          >\n          <a class=\"nav-item\" href=\"https://app.campaign-manager.triptease.io\"\n          >${unsafeSVG(campaigns)}Campaigns</a\n          >\n          <a\n            class=\"nav-item\"\n            href=${this.buildUrl('/channels')}\n            @click=${this.onAnchorClick}\n          >${unsafeSVG(channels)}Channels</a\n          >\n          <details>\n            <summary>\n              ${unsafeSVG(graph)}\n              <span>Market Insights</span>\n              <span class=\"icon chevron\"> ${unsafeSVG(chevronDown)}</span>\n            </summary>\n            <div class=\"dropdown-items\">\n              <a\n                class=\"sub-nav-item\"\n                href=${this.buildUrl('/parity/$CLIENT_KEY')}\n                @click=${this.onAnchorClick}\n              >Parity</a\n              >\n              <a\n                class=\"sub-nav-item\"\n                href=${this.buildUrl('/guest-insights/$CLIENT_KEY')}\n                @click=${this.onAnchorClick}\n              >Guest insights</a\n              >\n            </div>\n          </details>\n          <details>\n            <summary>\n              ${unsafeSVG(gear)}\n              <span>Settings</span>\n              <span class=\"icon chevron\"> ${unsafeSVG(chevronDown)}</span>\n            </summary>\n            <div class=\"dropdown-items\">\n              <a\n                class=\"sub-nav-item\"\n                href=${this.buildUrl('/$CLIENT_KEY/guest-behavioural-data')}\n                @click=${this.onAnchorClick}\n              >Email setup</a\n              >\n              <a\n                class=\"sub-nav-item\"\n                href=${this.buildUrl('/$CLIENT_KEY/crm-config')}\n                @click=${this.onAnchorClick}\n              >CRM connectivity</a\n              >\n              <a\n                class=\"sub-nav-item\"\n                href=${this.buildUrl('/settings/group')}\n                @click=${this.onAnchorClick}\n              >Group settings</a\n              >\n              <a\n                class=\"sub-nav-item\"\n                href=${this.buildUrl('/settings/$CLIENT_KEY/hotels/')}\n                @click=${this.onAnchorClick}\n              >Property settings</a\n              >\n            </div>\n          </details>\n          <hr />\n          <details>\n            <summary>\n              ${unsafeSVG(user)}\n              <span>Account</span>\n              <span class=\"icon chevron\"> ${unsafeSVG(chevronDown)}</span>\n            </summary>\n            <div class=\"dropdown-items\">\n              <a\n                class=\"sub-nav-item\"\n                href=${this.buildUrl('/account')}\n                @click=${this.onAnchorClick}\n              >User settings</a\n              >\n              <a\n                class=\"sub-nav-item\"\n                href=${this.buildUrl('/account/team/$CLIENT_KEY')}\n                @click=${this.onAnchorClick}\n              >Team and permissions</a\n              >\n            </div>\n          </details>\n          <details class=\"dropdown-items\">\n            <summary>\n              ${unsafeSVG(wallet)}\n              <span>Billing</span>\n              <span class=\"icon chevron\"> ${unsafeSVG(chevronDown)}</span>\n            </summary>\n            <div>\n              <a\n                class=\"sub-nav-item\"\n                href=${this.buildUrl('/account/billing-management/$CLIENT_KEY')}\n                @click=${this.onAnchorClick}\n              >Booking reconciliation</a\n              >\n              <a\n                class=\"sub-nav-item\"\n                href=${this.buildUrl('/subscriptions/$CLIENT_KEY')}\n                @click=${this.onAnchorClick}\n              >Subscriptions</a\n              >\n            </div>\n          </details>\n        </div>\n        <slot name=\"clientSelector\"></slot>\n      </nav>\n    `;\n  }\n}\n"]}

package/dist/src/styles.js

@@ -1,27 +1,274 @@
 import { css } from 'lit';
 export const styles = css `
   :host {
+    --nav-bar-width: 260px;
+
     display: block;
     height: 100vh;
-    max-width: 260px;
+  }
+
+  * {
+    box-sizing: border-box;
   }
 
   nav {
+    max-width: var(--nav-bar-width);
+    width: var(--nav-bar-width);
+    min-height: 100vh;
+    height: max-content;
+    display: flex;
+    align-items: start;
+    gap: var(--space-scale-3-5);
+    flex-direction: column;
+    background-color: var(--color-surface-inverted-100);
+    color: var(--color-text-inverted-400);
+    padding-top: var(--space-scale-2);
+    padding-bottom: var(--space-scale-2);
+    z-index: 1;
+
+    .nav-items {
+      display: flex;
+      flex-direction: column;
+      padding: 0 var(--space-scale-1);
+      width: 100%;
+    }
+
+    hr {
+      width: 100%;
+      height: 1px;
+      background-color: var(--color-surface-inverted-200);
+      border: none;
+    }
+
+    #tertiary-nav {
+      display: flex;
+      flex-direction: column;
+      margin-top: auto;
+      gap: var(--space-scale-2);
+      width: 100%;
+
+      .external-link {
+        font-size: var(--font-size-100);
+        line-height: var(--font-line-height-100);
+
+        .icon {
+          width: var(--space-scale-2);
+          height: var(--space-scale-2);
+        }
+      }
+    }
+
+    .icon {
+      display: flex;
+      align-items: center;
+      width: var(--space-scale-3);
+      height: var(--space-scale-3);
+      color: var(--nav-item-color);
+    }
+
+    .nav-item {
+      display: flex;
+      font-size: var(--font-size-100);
+      line-height: var(--font-line-height-100);
+      gap: var(--space-scale-1-5);
+      border-radius: var(--border-radius-100);
+      color: var(--nav-item-color);
+      align-items: center;
+      padding: var(--space-scale-1);
+      width: 100%;
+      text-decoration: none;
+    }
+  }
+
+  details {
+    border-radius: var(--border-radius-100);
+
+    summary {
+      font-size: var(--font-size-100);
+      line-height: var(--font-line-height-100);
+      position: relative;
+      display: flex;
+      align-items: baseline;
+
+      &::marker {
+        content: '';
+      }
+    }
+
+    .chevron > svg {
+      margin-left: auto;
+      margin-right: var(--space-scale-1);
+      width: var(--space-scale-2);
+    }
+
+    &[open] .chevron > svg {
+      transform: rotate(180deg);
+    }
+
+    .dropdown-items {
+      display: flex;
+      flex-direction: column;
+    }
+  }
+
+  details > summary {
+    display: flex;
+    gap: var(--space-scale-1-5);
+    padding: var(--space-scale-1);
+    border-radius: var(--border-radius-100);
+    color: var(--nav-item-color);
+    align-items: center;
+
+    a {
+      color: var(--nav-item-color);
+    }
+
+    &:hover,
+    &:focus-visible {
+      background-color: var(--color-surface-inverted-200);
+      border-radius: var(--border-radius-100);
+      text-decoration: none;
+    }
+  }
+
+  .sub-nav-item {
+    padding-left: 44px;
+    padding-top: 10px;
+    padding-bottom: 10px;
+    color: var(--color-text-inverted-400);
+    font-size: var(--font-size-100);
+    line-height: var(--font-line-height-100);
+    text-decoration: none;
+
+    button {
+      color: var(--color-text-inverted-400);
+      padding: 0;
+    }
+  }
+
+  .sub-nav-item:hover,
+  .sub-nav-item:focus-visible,
+  .nav-item:hover,
+  .nav-item:focus-visible {
+    background-color: var(--color-surface-inverted-200);
+    border-radius: var(--border-radius-100);
+    text-decoration: none;
+    color: var(--color-text-inverted-400);
+
+    .icon {
+      color: var(--color-text-inverted-400);
+    }
+  }
+
+  .current-page {
+    --nav-item-color: var(--color-primary-400);
+    border-radius: var(--border-radius-100);
+    background-color: var(--color-primary-100);
+    color: var(--nav-item-color);
+  }
+
+  .link-page {
     display: flex;
+    position: absolute;
+    overflow: auto;
     flex-direction: column;
+    gap: var(--space-scale-4);
+    padding: var(--space-scale-5);
+    left: var(--nav-bar-width);
+    background-color: var(--color-surface-200);
+    width: calc(100% - var(--nav-bar-width));
     height: 100%;
+    transition-property: left, visibility;
+    transition-duration: 700ms, 400ms;
+    transition-timing-function: ease-out, ease-in;
+
+    &.hidden {
+      left: -100%;
+      visibility: hidden;
+    }
   }
 
-  nav details div {
+  .link-page > .section {
     display: flex;
     flex-direction: column;
+    gap: var(--space-scale-2);
   }
 
-  hr {
-    background: black;
-    width: 100%;
+  .section > .links-container {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: var(--space-scale-3);
+    overflow-y: auto;
+    height: 100%;
+  }
+
+  .visually-hidden {
+    position: absolute;
+    width: 1px;
     height: 1px;
-    border: none;
+    margin: -1px;
+    padding: 0;
+    border: 0;
+    overflow: hidden;
+    clip: rect(0 0 0 0);
+    clip-path: inset(50%);
+    white-space: nowrap;
+  }
+
+  .tooltip {
+    position: absolute;
+    display: flex;
+    white-space: nowrap;
+    align-items: center;
+    gap: var(--space-scale-1);
+    color: black;
+    background-color: var(--color-surface-600);
+    padding: var(--space-scale-1);
+    z-index: 1000;
+    border-radius: var(--border-radius-50);
+    font-weight: var(--font-weight-medium);
+  }
+
+  .auth-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 100vh;
+  }
+
+  .error-container {
+    padding: 4rem 1rem 1rem;
+    max-width: 1280px;
+    margin-left: auto;
+    margin-right: auto;
+  }
+
+  .error-stack {
+    width: 100%;
+    padding: 1rem;
+    overflow-x: auto;
+  }
+
+  .fullscreen-iframe {
+    width: 100%;
+    height: 100vh;
+    border: 0;
+  }
+
+  .nav-toggle-button {
+    position: relative;
+  }
+
+  .nav-toggle-tooltip {
+    left: 100%;
+    top: 100%;
+    visibility: hidden;
+    opacity: 0;
+  }
+
+  .nav-toggle-button:hover .nav-toggle-tooltip {
+    visibility: visible;
+    opacity: 1;
   }
 `;
 //# sourceMappingURL=styles.js.map

package/dist/src/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../src/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;CAwBxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n  :host {\n    display: block;\n    height: 100vh;\n    max-width: 260px;\n  }\n\n  nav {\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n  }\n\n  nav details div {\n    display: flex;\n    flex-direction: column;\n  }\n\n  hr {\n    background: black;\n    width: 100%;\n    height: 1px;\n    border: none;\n  }\n`;\n"]}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../src/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+QxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n  :host {\n    --nav-bar-width: 260px;\n\n    display: block;\n    height: 100vh;\n  }\n\n  * {\n    box-sizing: border-box;\n  }\n\n  nav {\n    max-width: var(--nav-bar-width);\n    width: var(--nav-bar-width);\n    min-height: 100vh;\n    height: max-content;\n    display: flex;\n    align-items: start;\n    gap: var(--space-scale-3-5);\n    flex-direction: column;\n    background-color: var(--color-surface-inverted-100);\n    color: var(--color-text-inverted-400);\n    padding-top: var(--space-scale-2);\n    padding-bottom: var(--space-scale-2);\n    z-index: 1;\n\n    .nav-items {\n      display: flex;\n      flex-direction: column;\n      padding: 0 var(--space-scale-1);\n      width: 100%;\n    }\n\n    hr {\n      width: 100%;\n      height: 1px;\n      background-color: var(--color-surface-inverted-200);\n      border: none;\n    }\n\n    #tertiary-nav {\n      display: flex;\n      flex-direction: column;\n      margin-top: auto;\n      gap: var(--space-scale-2);\n      width: 100%;\n\n      .external-link {\n        font-size: var(--font-size-100);\n        line-height: var(--font-line-height-100);\n\n        .icon {\n          width: var(--space-scale-2);\n          height: var(--space-scale-2);\n        }\n      }\n    }\n\n    .icon {\n      display: flex;\n      align-items: center;\n      width: var(--space-scale-3);\n      height: var(--space-scale-3);\n      color: var(--nav-item-color);\n    }\n\n    .nav-item {\n      display: flex;\n      font-size: var(--font-size-100);\n      line-height: var(--font-line-height-100);\n      gap: var(--space-scale-1-5);\n      border-radius: var(--border-radius-100);\n      color: var(--nav-item-color);\n      align-items: center;\n      padding: var(--space-scale-1);\n      width: 100%;\n      text-decoration: none;\n    }\n  }\n\n  details {\n    border-radius: var(--border-radius-100);\n\n    summary {\n      font-size: var(--font-size-100);\n      line-height: var(--font-line-height-100);\n      position: relative;\n      display: flex;\n      align-items: baseline;\n\n      &::marker {\n        content: '';\n      }\n    }\n\n    .chevron > svg {\n      margin-left: auto;\n      margin-right: var(--space-scale-1);\n      width: var(--space-scale-2);\n    }\n\n    &[open] .chevron > svg {\n      transform: rotate(180deg);\n    }\n\n    .dropdown-items {\n      display: flex;\n      flex-direction: column;\n    }\n  }\n\n  details > summary {\n    display: flex;\n    gap: var(--space-scale-1-5);\n    padding: var(--space-scale-1);\n    border-radius: var(--border-radius-100);\n    color: var(--nav-item-color);\n    align-items: center;\n\n    a {\n      color: var(--nav-item-color);\n    }\n\n    &:hover,\n    &:focus-visible {\n      background-color: var(--color-surface-inverted-200);\n      border-radius: var(--border-radius-100);\n      text-decoration: none;\n    }\n  }\n\n  .sub-nav-item {\n    padding-left: 44px;\n    padding-top: 10px;\n    padding-bottom: 10px;\n    color: var(--color-text-inverted-400);\n    font-size: var(--font-size-100);\n    line-height: var(--font-line-height-100);\n    text-decoration: none;\n\n    button {\n      color: var(--color-text-inverted-400);\n      padding: 0;\n    }\n  }\n\n  .sub-nav-item:hover,\n  .sub-nav-item:focus-visible,\n  .nav-item:hover,\n  .nav-item:focus-visible {\n    background-color: var(--color-surface-inverted-200);\n    border-radius: var(--border-radius-100);\n    text-decoration: none;\n    color: var(--color-text-inverted-400);\n\n    .icon {\n      color: var(--color-text-inverted-400);\n    }\n  }\n\n  .current-page {\n    --nav-item-color: var(--color-primary-400);\n    border-radius: var(--border-radius-100);\n    background-color: var(--color-primary-100);\n    color: var(--nav-item-color);\n  }\n\n  .link-page {\n    display: flex;\n    position: absolute;\n    overflow: auto;\n    flex-direction: column;\n    gap: var(--space-scale-4);\n    padding: var(--space-scale-5);\n    left: var(--nav-bar-width);\n    background-color: var(--color-surface-200);\n    width: calc(100% - var(--nav-bar-width));\n    height: 100%;\n    transition-property: left, visibility;\n    transition-duration: 700ms, 400ms;\n    transition-timing-function: ease-out, ease-in;\n\n    &.hidden {\n      left: -100%;\n      visibility: hidden;\n    }\n  }\n\n  .link-page > .section {\n    display: flex;\n    flex-direction: column;\n    gap: var(--space-scale-2);\n  }\n\n  .section > .links-container {\n    display: grid;\n    grid-template-columns: repeat(3, 1fr);\n    gap: var(--space-scale-3);\n    overflow-y: auto;\n    height: 100%;\n  }\n\n  .visually-hidden {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    margin: -1px;\n    padding: 0;\n    border: 0;\n    overflow: hidden;\n    clip: rect(0 0 0 0);\n    clip-path: inset(50%);\n    white-space: nowrap;\n  }\n\n  .tooltip {\n    position: absolute;\n    display: flex;\n    white-space: nowrap;\n    align-items: center;\n    gap: var(--space-scale-1);\n    color: black;\n    background-color: var(--color-surface-600);\n    padding: var(--space-scale-1);\n    z-index: 1000;\n    border-radius: var(--border-radius-50);\n    font-weight: var(--font-weight-medium);\n  }\n\n  .auth-container {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    min-height: 100vh;\n  }\n\n  .error-container {\n    padding: 4rem 1rem 1rem;\n    max-width: 1280px;\n    margin-left: auto;\n    margin-right: auto;\n  }\n\n  .error-stack {\n    width: 100%;\n    padding: 1rem;\n    overflow-x: auto;\n  }\n\n  .fullscreen-iframe {\n    width: 100%;\n    height: 100vh;\n    border: 0;\n  }\n\n  .nav-toggle-button {\n    position: relative;\n  }\n\n  .nav-toggle-tooltip {\n    left: 100%;\n    top: 100%;\n    visibility: hidden;\n    opacity: 0;\n  }\n\n  .nav-toggle-button:hover .nav-toggle-tooltip {\n    visibility: visible;\n    opacity: 1;\n  }\n`;\n"]}