@triptease/tt-navbar 0.0.41 → 0.0.43

package/dist/src/NavbarController.d.ts

@@ -3,8 +3,10 @@ export declare class NavbarController implements ReactiveController {
     host: ReactiveControllerHost;
     private _isOpen;
     private _hasInitialized;
+    private _removeClerkListener?;
     constructor(host: ReactiveControllerHost);
     get isOpen(): boolean;
     hostUpdate(): void;
+    hostDisconnected(): void;
     toggle(): Promise<void>;
 }

package/dist/src/NavbarController.js

@@ -9,12 +9,22 @@ export class NavbarController {
     }
     hostUpdate() {
         if (!this._hasInitialized && window.Clerk) {
-            const userSetting = window.Clerk.user?.unsafeMetadata?.preferences?.ui?.navigationOpen;
-            if (userSetting !== undefined) {
-                this._isOpen = userSetting;
-                this._hasInitialized = true;
-                this.host.requestUpdate();
-            }
+            this._removeClerkListener = window.Clerk.addListener(resources => {
+                const { user } = resources;
+                if (user && !this._hasInitialized) {
+                    const navigationOpen = user.unsafeMetadata?.preferences?.ui?.navigationOpen;
+                    if (navigationOpen !== undefined) {
+                        this._isOpen = navigationOpen;
+                        this.host.requestUpdate();
+                    }
+                    this._hasInitialized = true;
+                }
+            });
+        }
+    }
+    hostDisconnected() {
+        if (this._removeClerkListener) {
+            this._removeClerkListener();
         }
     }
     async toggle() {

package/dist/src/NavbarController.js.map

@@ -1 +1 @@
-{"version":3,"file":"NavbarController.js","sourceRoot":"","sources":["../../src/NavbarController.ts"],"names":[],"mappings":"AAEA,MAAM,OAAO,gBAAgB;IAO3B,YAAY,IAA4B;QAJhC,YAAO,GAAG,IAAI,CAAC;QAEf,oBAAe,GAAG,KAAK,CAAC;QAG9B,CAAC,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;IACzC,CAAC;IAED,IAAI,MAAM;QACR,OAAO,IAAI,CAAC,OAAO,CAAC;IACtB,CAAC;IAED,UAAU;QACR,IAAI,CAAC,IAAI,CAAC,eAAe,IAAI,MAAM,CAAC,KAAK,EAAE,CAAC;YAC1C,MAAM,WAAW,GACf,MAAM,CAAC,KAAK,CAAC,IAAI,EAAE,cAAc,EAAE,WAAW,EAAE,EAAE,EAAE,cAAc,CAAC;YAErE,IAAI,WAAW,KAAK,SAAS,EAAE,CAAC;gBAC9B,IAAI,CAAC,OAAO,GAAG,WAAW,CAAC;gBAC3B,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC;gBAC5B,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC;YAC5B,CAAC;QACH,CAAC;IACH,CAAC;IAED,KAAK,CAAC,MAAM;QACV,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;QAE7B,IAAI,MAAM,CAAC,KAAK,EAAE,CAAC;YACjB,MAAM,MAAM,CAAC,KAAK,CAAC,IAAI,EAAE,MAAM,CAAC;gBAC9B,cAAc,EAAE;oBACd,GAAG,MAAM,CAAC,KAAK,CAAC,IAAI,EAAE,cAAc;oBACpC,WAAW,EAAE;wBACX,GAAG,MAAM,CAAC,KAAK,CAAC,IAAI,EAAE,cAAc,EAAE,WAAW;wBACjD,EAAE,EAAE;4BACF,GAAG,MAAM,CAAC,KAAK,CAAC,IAAI,EAAE,cAAc,EAAE,WAAW,EAAE,EAAE;4BACrD,cAAc,EAAE,IAAI,CAAC,MAAM;yBAC5B;qBACF;iBACF;aACF,CAAC,CAAC;QACL,CAAC;QAED,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC;IAC5B,CAAC;CACF","sourcesContent":["import { ReactiveController, ReactiveControllerHost } from 'lit';\n\nexport class NavbarController implements ReactiveController {\n  host: ReactiveControllerHost;\n\n  private _isOpen = true;\n\n  private _hasInitialized = false;\n\n  constructor(host: ReactiveControllerHost) {\n    (this.host = host).addController(this);\n  }\n\n  get isOpen() {\n    return this._isOpen;\n  }\n\n  hostUpdate() {\n    if (!this._hasInitialized && window.Clerk) {\n      const userSetting =\n        window.Clerk.user?.unsafeMetadata?.preferences?.ui?.navigationOpen;\n\n      if (userSetting !== undefined) {\n        this._isOpen = userSetting;\n        this._hasInitialized = true;\n        this.host.requestUpdate();\n      }\n    }\n  }\n\n  async toggle() {\n    this._isOpen = !this._isOpen;\n\n    if (window.Clerk) {\n      await window.Clerk.user?.update({\n        unsafeMetadata: {\n          ...window.Clerk.user?.unsafeMetadata,\n          preferences: {\n            ...window.Clerk.user?.unsafeMetadata?.preferences,\n            ui: {\n              ...window.Clerk.user?.unsafeMetadata?.preferences?.ui,\n              navigationOpen: this.isOpen,\n            },\n          },\n        },\n      });\n    }\n\n    this.host.requestUpdate();\n  }\n}\n"]}
+{"version":3,"file":"NavbarController.js","sourceRoot":"","sources":["../../src/NavbarController.ts"],"names":[],"mappings":"AAGA,MAAM,OAAO,gBAAgB;IAS3B,YAAY,IAA4B;QANhC,YAAO,GAAG,IAAI,CAAC;QAEf,oBAAe,GAAG,KAAK,CAAC;QAK9B,CAAC,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;IACzC,CAAC;IAED,IAAI,MAAM;QACR,OAAO,IAAI,CAAC,OAAO,CAAC;IACtB,CAAC;IAED,UAAU;QACR,IAAI,CAAC,IAAI,CAAC,eAAe,IAAI,MAAM,CAAC,KAAK,EAAE,CAAC;YAC1C,IAAI,CAAC,oBAAoB,GAAG,MAAM,CAAC,KAAK,CAAC,WAAW,CAAC,SAAS,CAAC,EAAE;gBAC/D,MAAM,EAAE,IAAI,EAAE,GAAG,SAAS,CAAC;gBAC3B,IAAI,IAAI,IAAI,CAAC,IAAI,CAAC,eAAe,EAAE,CAAC;oBAClC,MAAM,cAAc,GAClB,IAAI,CAAC,cAAc,EAAE,WAAW,EAAE,EAAE,EAAE,cAAc,CAAC;oBAEvD,IAAI,cAAc,KAAK,SAAS,EAAE,CAAC;wBACjC,IAAI,CAAC,OAAO,GAAG,cAAc,CAAC;wBAC9B,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC;oBAC5B,CAAC;oBAED,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC;gBAC9B,CAAC;YACH,CAAC,CAAC,CAAC;QACL,CAAC;IACH,CAAC;IAED,gBAAgB;QACd,IAAI,IAAI,CAAC,oBAAoB,EAAE,CAAC;YAC9B,IAAI,CAAC,oBAAoB,EAAE,CAAC;QAC9B,CAAC;IACH,CAAC;IAED,KAAK,CAAC,MAAM;QACV,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;QAE7B,IAAI,MAAM,CAAC,KAAK,EAAE,CAAC;YACjB,MAAM,MAAM,CAAC,KAAK,CAAC,IAAI,EAAE,MAAM,CAAC;gBAC9B,cAAc,EAAE;oBACd,GAAG,MAAM,CAAC,KAAK,CAAC,IAAI,EAAE,cAAc;oBACpC,WAAW,EAAE;wBACX,GAAG,MAAM,CAAC,KAAK,CAAC,IAAI,EAAE,cAAc,EAAE,WAAW;wBACjD,EAAE,EAAE;4BACF,GAAG,MAAM,CAAC,KAAK,CAAC,IAAI,EAAE,cAAc,EAAE,WAAW,EAAE,EAAE;4BACrD,cAAc,EAAE,IAAI,CAAC,MAAM;yBAC5B;qBACF;iBACF;aACF,CAAC,CAAC;QACL,CAAC;QAED,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC;IAC5B,CAAC;CACF","sourcesContent":["import { ReactiveController, ReactiveControllerHost } from 'lit';\nimport { UnsubscribeCallback } from '@clerk/types';\n\nexport class NavbarController implements ReactiveController {\n  host: ReactiveControllerHost;\n\n  private _isOpen = true;\n\n  private _hasInitialized = false;\n\n  private _removeClerkListener?: UnsubscribeCallback;\n\n  constructor(host: ReactiveControllerHost) {\n    (this.host = host).addController(this);\n  }\n\n  get isOpen() {\n    return this._isOpen;\n  }\n\n  hostUpdate() {\n    if (!this._hasInitialized && window.Clerk) {\n      this._removeClerkListener = window.Clerk.addListener(resources => {\n        const { user } = resources;\n        if (user && !this._hasInitialized) {\n          const navigationOpen =\n            user.unsafeMetadata?.preferences?.ui?.navigationOpen;\n\n          if (navigationOpen !== undefined) {\n            this._isOpen = navigationOpen;\n            this.host.requestUpdate();\n          }\n\n          this._hasInitialized = true;\n        }\n      });\n    }\n  }\n\n  hostDisconnected() {\n    if (this._removeClerkListener) {\n      this._removeClerkListener();\n    }\n  }\n\n  async toggle() {\n    this._isOpen = !this._isOpen;\n\n    if (window.Clerk) {\n      await window.Clerk.user?.update({\n        unsafeMetadata: {\n          ...window.Clerk.user?.unsafeMetadata,\n          preferences: {\n            ...window.Clerk.user?.unsafeMetadata?.preferences,\n            ui: {\n              ...window.Clerk.user?.unsafeMetadata?.preferences?.ui,\n              navigationOpen: this.isOpen,\n            },\n          },\n        },\n      });\n    }\n\n    this.host.requestUpdate();\n  }\n}\n"]}

package/dist/src/styles.js

@@ -172,7 +172,7 @@ export const styles = css `
       width: var(--space-scale-2);
     }
 
-    &[open] .chevron {
+    &[open] .chevron svg {
       transform: rotate(180deg);
     }
 

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,iBAAiB,GAAG,GAAG,CAAA;;;;;;;;;;;CAW5B,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;UAyCf,iBAAiB;;;;UAIjB,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;UA6DjB,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmQ1B,CAAC","sourcesContent":["import { css } from 'lit';\n\nconst visuallyHiddenCss = css`\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\nexport const styles = css`\n  :host {\n    --nav-bar-width: 260px;\n\n    display: block;\n    height: 100vh;\n  }\n\n  :host:has(.sidebar-closed) {\n    --nav-bar-width: fit-content;\n  }\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    .nav-items.sidebar-closed {\n      a span {\n        ${visuallyHiddenCss}\n      }\n\n      details summary span {\n        ${visuallyHiddenCss}\n      }\n    }\n\n    .sidebar-header {\n      width: 100%;\n      display: grid;\n      grid-template-columns: 1fr auto;\n      align-items: center;\n      justify-content: center;\n      padding: 0 var(--space-scale-2);\n\n      button {\n        background-color: transparent;\n        color: var(--color-text-inverted-400);\n        border: none;\n      }\n    }\n\n    .sidebar-header.sidebar-closed {\n      padding: 0 var(--space-scale-1);\n      .logo {\n        display: none;\n        visibility: hidden;\n      }\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    .tertiary-nav.sidebar-closed {\n      .external-link,\n      hr,\n      #client-selector {\n        display: none;\n        visibility: hidden;\n      }\n\n      a span {\n        ${visuallyHiddenCss}\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  nav.sidebar-closed {\n    width: fit-content;\n\n    :host {\n      --nav-bar-width: fit-content;\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 {\n      margin-left: auto;\n      margin-right: var(--space-scale-1);\n      width: var(--space-scale-2);\n    }\n\n    &[open] .chevron {\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  .sidebar-closed details:has(.current-page) > summary {\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  .sub-nav-item {\n    width: 100%;\n    display: flex;\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  #client-selector {\n    display: flex;\n    align-items: center;\n  }\n\n  #client-selector tt-combobox {\n    --tt-combobox-color: var(--color-text-inverted-400);\n    --tt-combobox-dropdown-color: var(--color-text-inverted-400);\n    --tt-combobox-list-background-color: var(--color-surface-inverted-100);\n    --tt-combobox-option-background-color-hover: var(--color-surface-inverted-200);\n    --tt-combobox-placeholder-color: var(--color-text-inverted-300);\n    --tt-combobox-background-color: var(--color-surface-inverted-100);\n    --tt-combobox-hover-background-color: var(--color-surface-inverted-200);\n    --tt-combobox-list-max-width: 80ch;\n    --tt-combobox-min-width: 244px;\n    --tt-combobox-max-width: 244px;\n    --tt-combobox-option-selected-color: var(--color-text-inverted-500);\n  }\n\n  .single-client-name {\n    height: 39px;\n    padding: var(--space-scale-1); /* match tt-combobox height */\n    font-size: var(--font-size-100);\n    color: var(--color-text-inverted-400);\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,iBAAiB,GAAG,GAAG,CAAA;;;;;;;;;;;CAW5B,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;UAyCf,iBAAiB;;;;UAIjB,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;UA6DjB,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmQ1B,CAAC","sourcesContent":["import { css } from 'lit';\n\nconst visuallyHiddenCss = css`\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\nexport const styles = css`\n  :host {\n    --nav-bar-width: 260px;\n\n    display: block;\n    height: 100vh;\n  }\n\n  :host:has(.sidebar-closed) {\n    --nav-bar-width: fit-content;\n  }\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    .nav-items.sidebar-closed {\n      a span {\n        ${visuallyHiddenCss}\n      }\n\n      details summary span {\n        ${visuallyHiddenCss}\n      }\n    }\n\n    .sidebar-header {\n      width: 100%;\n      display: grid;\n      grid-template-columns: 1fr auto;\n      align-items: center;\n      justify-content: center;\n      padding: 0 var(--space-scale-2);\n\n      button {\n        background-color: transparent;\n        color: var(--color-text-inverted-400);\n        border: none;\n      }\n    }\n\n    .sidebar-header.sidebar-closed {\n      padding: 0 var(--space-scale-1);\n      .logo {\n        display: none;\n        visibility: hidden;\n      }\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    .tertiary-nav.sidebar-closed {\n      .external-link,\n      hr,\n      #client-selector {\n        display: none;\n        visibility: hidden;\n      }\n\n      a span {\n        ${visuallyHiddenCss}\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  nav.sidebar-closed {\n    width: fit-content;\n\n    :host {\n      --nav-bar-width: fit-content;\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 {\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  .sidebar-closed details:has(.current-page) > summary {\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  .sub-nav-item {\n    width: 100%;\n    display: flex;\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  #client-selector {\n    display: flex;\n    align-items: center;\n  }\n\n  #client-selector tt-combobox {\n    --tt-combobox-color: var(--color-text-inverted-400);\n    --tt-combobox-dropdown-color: var(--color-text-inverted-400);\n    --tt-combobox-list-background-color: var(--color-surface-inverted-100);\n    --tt-combobox-option-background-color-hover: var(--color-surface-inverted-200);\n    --tt-combobox-placeholder-color: var(--color-text-inverted-300);\n    --tt-combobox-background-color: var(--color-surface-inverted-100);\n    --tt-combobox-hover-background-color: var(--color-surface-inverted-200);\n    --tt-combobox-list-max-width: 80ch;\n    --tt-combobox-min-width: 244px;\n    --tt-combobox-max-width: 244px;\n    --tt-combobox-option-selected-color: var(--color-text-inverted-500);\n  }\n\n  .single-client-name {\n    height: 39px;\n    padding: var(--space-scale-1); /* match tt-combobox height */\n    font-size: var(--font-size-100);\n    color: var(--color-text-inverted-400);\n  }\n`;\n"]}

package/dist/test/tt-navbar.test.js

@@ -268,10 +268,15 @@ describe('TtNavbar', () => {
         expect(logo.checkVisibility()).to.be.true;
     });
     it('should default to state stored in Clerk when set', async () => {
+        const mockUser = {
+            unsafeMetadata: { preferences: { ui: { navigationOpen: false } } },
+        };
+        const mockAddListener = (func) => {
+            func({ user: mockUser });
+        };
         window.Clerk = {
-            user: {
-                unsafeMetadata: { preferences: { ui: { navigationOpen: false } } },
-            },
+            addListener: mockAddListener,
+            user: mockUser,
         };
         const navbar = await fixture(`<tt-navbar client-key=${CLIENT_KEY}></tt-navbar>`);
         const logo = navbar.shadowRoot.querySelector('.logo');
@@ -286,18 +291,23 @@ describe('TtNavbar', () => {
             timesCalled += 1;
             calledWith = args;
         };
-        window.Clerk = {
-            user: {
-                update: mockUpdate,
-                unsafeMetadata: {
-                    foo: 'foo',
-                    preferences: {
-                        bar: 'bar',
-                        ui: { duck: 'duck', navigationOpen: false },
-                    },
+        const mockUser = {
+            update: mockUpdate,
+            unsafeMetadata: {
+                foo: 'foo',
+                preferences: {
+                    bar: 'bar',
+                    ui: { duck: 'duck', navigationOpen: false },
                 },
             },
         };
+        const mockAddListener = (func) => {
+            func({ user: mockUser });
+        };
+        window.Clerk = {
+            addListener: mockAddListener,
+            user: mockUser,
+        };
         const navbar = await fixture(`<tt-navbar client-key=${CLIENT_KEY}></tt-navbar>`);
         const navbarToggleBtn = navbar.shadowRoot.querySelector('#navbar-toggle-btn');
         navbarToggleBtn.click();

package/dist/test/tt-navbar.test.js.map

@@ -1 +1 @@
-{"version":3,"file":"tt-navbar.test.js","sourceRoot":"","sources":["../../test/tt-navbar.test.ts"],"names":[],"mappings":"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","sourcesContent":["import { Clerk } from '@clerk/clerk-js';\nimport '../src/tt-navbar.js';\nimport {\n  elementUpdated,\n  expect,\n  fixture,\n  nextFrame,\n  waitUntil,\n} from '@open-wc/testing';\nimport { TtNavbar } from '../src/index.js';\nimport { Routes } from '../src/Routes.js';\n\n// eslint-disable-next-line no-undef\nconst getLinkByHref = (links: NodeListOf<HTMLAnchorElement>, href: string) => {\n  for (const link of links) {\n    if (link.getAttribute('href') === href) {\n      return link;\n    }\n  }\n\n  return undefined;\n};\n\nconst selectComboboxOption = async (combobox: Element, value: string) => {\n  const input = combobox.shadowRoot!.querySelector(\n    '[role=\"combobox\"]',\n  ) as HTMLInputElement;\n  input.click();\n\n  await elementUpdated(combobox);\n\n  const option = combobox.shadowRoot!.querySelector(\n    `[role=\"option\"][data-value=\"${value}\"]`,\n  ) as HTMLLIElement;\n  option.click();\n};\n\nconst isVisuallyHidden = (element: Element) => {\n  const style = getComputedStyle(element);\n\n  return Boolean(\n    style.position === 'absolute' &&\n      style.width === '1px' &&\n      style.height === '1px' &&\n      style.margin === '-1px' &&\n      style.padding === '0px' &&\n      style.borderWidth === '0px' &&\n      style.overflow === 'hidden' &&\n      style.clip === 'rect(0px, 0px, 0px, 0px)' &&\n      style.clipPath === 'inset(50%)' &&\n      style.whiteSpace === 'nowrap',\n  );\n};\n\nconst CLIENT_KEY = 'zxd47KQGAP';\n\ndescribe('TtNavbar', () => {\n  it('should throw an error if the clientKey is not provided', async () => {\n    try {\n      await fixture<TtNavbar>(`<tt-navbar></tt-navbar>`);\n    } catch (e) {\n      expect(e).to.match(/clientKey is required/);\n    }\n  });\n  it('should render with the default links', async () => {\n    const navbar = await fixture<TtNavbar>(\n      `<tt-navbar client-key=${CLIENT_KEY}></tt-navbar>`,\n    );\n    const links = navbar.shadowRoot?.querySelectorAll('a');\n\n    if (links) {\n      expect(getLinkByHref(links, '/')).to.exist;\n      expect(getLinkByHref(links, 'https://app.campaign-manager.triptease.io'))\n        .to.exist;\n      expect(getLinkByHref(links, `/${CLIENT_KEY}/channels`)).to.exist;\n      expect(getLinkByHref(links, `/parity/${CLIENT_KEY}`)).to.exist;\n      expect(getLinkByHref(links, `/guest-insights/${CLIENT_KEY}`)).to.exist;\n      expect(getLinkByHref(links, `/${CLIENT_KEY}/guest-behavioural-data`)).to\n        .exist;\n      expect(getLinkByHref(links, `/${CLIENT_KEY}/crm-config`)).to.exist;\n      expect(getLinkByHref(links, `/settings/${CLIENT_KEY}/guides`)).to.exist;\n      expect(getLinkByHref(links, `/settings/${CLIENT_KEY}/hotels`)).to.exist;\n      expect(getLinkByHref(links, `/account`)).to.exist;\n      expect(getLinkByHref(links, `/account/team/${CLIENT_KEY}`)).to.exist;\n      expect(getLinkByHref(links, `/account/billing-management/${CLIENT_KEY}`))\n        .to.exist;\n      expect(getLinkByHref(links, `/subscriptions/${CLIENT_KEY}`)).to.exist;\n    }\n  });\n\n  it('should render platform URLs against the base URL when it is defined', async () => {\n    const platformUrl = 'https://app.triptease.io';\n    const navbar = await fixture<TtNavbar>(\n      `<tt-navbar client-key=${CLIENT_KEY} platform-url=\"${platformUrl}\"></tt-navbar>`,\n    );\n    const links = navbar.shadowRoot?.querySelectorAll('a');\n\n    if (links) {\n      expect(getLinkByHref(links, `${platformUrl}/`)).to.exist;\n      expect(getLinkByHref(links, 'https://app.campaign-manager.triptease.io'))\n        .to.exist; // This shouldn't change\n      expect(getLinkByHref(links, `${platformUrl}/${CLIENT_KEY}/channels`)).to\n        .exist;\n    }\n  });\n\n  it.skip('should allow navigation events to be handled externally', async () => {\n    let navigateEventCount = 0;\n\n    const onNavigate = (e: MouseEvent) => {\n      e.preventDefault();\n      navigateEventCount += 1;\n    };\n\n    const navbar = await fixture<TtNavbar>(\n      `<tt-navbar client-key=${CLIENT_KEY}></tt-navbar>`,\n    );\n    navbar.navigate = onNavigate;\n    await navbar.updateComplete;\n\n    const links = navbar.shadowRoot?.querySelectorAll('a');\n    links?.forEach(l => l.click());\n\n    await waitUntil(\n      () => expect(navigateEventCount).to.equal(13),\n      'navigate event did not fire',\n    );\n  });\n\n  it('should render a combobox when multiple clients are provided', async () => {\n    const navbar = await fixture<TtNavbar>(\n      `<tt-navbar client-key=${CLIENT_KEY}></tt-navbar>`,\n    );\n    navbar.clients = [\n      { clientKey: CLIENT_KEY, displayName: 'Client One' },\n      { clientKey: 'abc123', displayName: 'Client Two' },\n    ];\n    await navbar.updateComplete;\n\n    const combobox = navbar.shadowRoot?.querySelector('tt-combobox');\n    const singleClientName = navbar.shadowRoot?.querySelector(\n      '.single-client-name',\n    );\n\n    expect(combobox).to.exist;\n    expect(singleClientName).to.not.exist;\n    expect(combobox?.value).to.deep.equal([CLIENT_KEY]);\n  });\n\n  it('should render the client name when only one client is provided', async () => {\n    const navbar = await fixture<TtNavbar>(\n      `<tt-navbar client-key=${CLIENT_KEY}></tt-navbar>`,\n    );\n    navbar.clients = [{ clientKey: CLIENT_KEY, displayName: 'Single Client' }];\n    await navbar.updateComplete;\n\n    const singleClientName = navbar.shadowRoot?.querySelector(\n      '.single-client-name',\n    );\n    const combobox = navbar.shadowRoot?.querySelector('tt-combobox');\n\n    expect(singleClientName).to.exist;\n    expect(singleClientName?.textContent?.trim()).to.equal('Single Client');\n    expect(combobox).to.not.exist;\n  });\n\n  it('should render the logout link', async () => {\n    const navbar = await fixture<TtNavbar>(\n      `<tt-navbar client-key=${CLIENT_KEY}></tt-navbar>`,\n    );\n\n    const links = navbar.shadowRoot?.querySelectorAll('a');\n    const logoutLink = getLinkByHref(links!, '/logout');\n\n    expect(logoutLink).to.exist;\n  });\n\n  it('should close other details when one is being opened', async () => {\n    const navbar = await fixture<TtNavbar>(\n      `<tt-navbar client-key=${CLIENT_KEY}></tt-navbar>`,\n    );\n\n    const allDetails = navbar.shadowRoot!.querySelectorAll('summary');\n    const [marketInsights, settings] = allDetails;\n\n    marketInsights.click();\n    /*\n     * Wait for the DOM to update before continuing. This is necessary because helpers like elementUpdated don't wait for\n     * the browser to fire the $toggle handler as well as adding the open attribute.\n     */\n    await nextFrame();\n    await nextFrame();\n\n    expect(marketInsights.closest('details')?.open).to.be.true;\n\n    settings.click();\n    await nextFrame();\n    await nextFrame();\n\n    expect(settings.closest('details')?.open).to.be.true;\n    expect(marketInsights.closest('details')?.open).to.be.false;\n  });\n\n  it('should collapse the navbar when toggle clicked', async () => {\n    const navbar = await fixture<TtNavbar>(\n      `<tt-navbar client-key=${CLIENT_KEY}></tt-navbar>`,\n    );\n\n    const navbarToggleBtn = navbar.shadowRoot!.querySelector(\n      '#navbar-toggle-btn',\n    ) as HTMLButtonElement;\n\n    navbarToggleBtn.click();\n    await elementUpdated(navbar);\n\n    const logo = navbar.shadowRoot!.querySelector('.logo');\n    const rootLinksHiddenElements =\n      navbar.shadowRoot!.querySelectorAll('nav a span');\n    const summaryHiddenElements =\n      navbar.shadowRoot!.querySelectorAll('nav summary span');\n    const externalLinks =\n      navbar.shadowRoot!.querySelectorAll('#external-links a');\n    const logoutLink = navbar.shadowRoot!.querySelector('#logout-link span');\n    const clientSelector = navbar.shadowRoot!.querySelector('#client-selector');\n\n    // Visually and accessibly hidden\n    expect(logo?.checkVisibility()).to.be.false;\n    expect(clientSelector?.checkVisibility()).to.be.false;\n    for (const link of externalLinks) {\n      expect(link.checkVisibility()).to.be.false;\n    }\n\n    // Visually hidden only\n    expect(logoutLink).to.exist;\n    expect(rootLinksHiddenElements.length).to.be.greaterThan(1);\n    expect(summaryHiddenElements.length).to.be.greaterThan(1);\n    for (const element of [\n      ...rootLinksHiddenElements,\n      ...summaryHiddenElements,\n      logoutLink!,\n    ]) {\n      expect(isVisuallyHidden(element)).to.be.true;\n    }\n  });\n\n  const collapsibleIds: string[] = [\n    'market-insights',\n    'settings',\n    'account',\n    'billing-routes',\n  ];\n  collapsibleIds.forEach(id => {\n    it(`should open the nav bar when the ${id} collapsible is clicked`, async () => {\n      const navbar = await fixture<TtNavbar>(\n        `<tt-navbar client-key=${CLIENT_KEY}></tt-navbar>`,\n      );\n\n      const navbarToggleBtn = navbar.shadowRoot!.querySelector(\n        '#navbar-toggle-btn',\n      ) as HTMLButtonElement;\n\n      navbarToggleBtn.click();\n      await elementUpdated(navbar);\n\n      const logo = navbar.shadowRoot!.querySelector('.logo');\n      expect(logo?.checkVisibility()).to.be.false;\n\n      const element: HTMLDetailsElement | null =\n        navbar.shadowRoot!.querySelector(`#${id} summary`);\n\n      expect(element).to.exist;\n\n      element!.click();\n\n      await waitUntil(() => logo?.checkVisibility(), 'navbar should be open', {\n        timeout: 500,\n      });\n    });\n  });\n\n  const URLs = [\n    ['/', 'Dashboard'],\n    [`/${CLIENT_KEY}/channels`, 'Channels'],\n    [`/parity/${CLIENT_KEY}`, 'Parity'],\n    [`/parity/${CLIENT_KEY}`, 'Parity'],\n    [`/parity/${CLIENT_KEY}/foo`, 'Parity'],\n    [`/meta/${CLIENT_KEY}/performance`, 'Channels'],\n    [`/chat/insights/${CLIENT_KEY}`, 'Channels'],\n    [`/${CLIENT_KEY}/email`, 'Channels'],\n    [`/settings/${CLIENT_KEY}/branding`, 'Group settings'],\n    [`/settings/${CLIENT_KEY}/price-check`, 'Group settings'],\n  ];\n\n  URLs.forEach(([route, text]) => {\n    it(`should show the current page as active when link is ${route}`, async () => {\n      // eslint-disable-next-line no-restricted-globals\n      history.pushState({}, '', route); // 👈 mock URL\n\n      const navbar = await fixture<TtNavbar>(\n        `<tt-navbar client-key=${CLIENT_KEY}></tt-navbar>`,\n      );\n\n      const anchor = navbar.shadowRoot!.querySelector('a[aria-current=\"page\"]');\n\n      expect(anchor).to.exist;\n      expect(anchor!.textContent).to.include(text);\n    });\n  });\n\n  it('should show the current page as campaign manager when on the given campaign manager url', async () => {\n    const platformUrl = 'https://app.triptease.io';\n    const campaignManagerUrl = 'http://localhost:8000';\n\n    const navbar = await fixture<TtNavbar>(\n      `<tt-navbar client-key=${CLIENT_KEY} platform-url=${platformUrl} campaign-manager-url=${campaignManagerUrl} active-route=\"${Routes.CampaignManager}\"></tt-navbar>`,\n    );\n    const anchor = navbar.shadowRoot!.querySelector('a[aria-current=\"page\"]');\n    expect(anchor).to.exist;\n    expect(anchor!.textContent).to.include('Campaigns');\n  });\n\n  it('should fire an event when the client is changed', async () => {\n    let selectedClientKey: string | undefined;\n    const onClientChange = (clientKey: string) => {\n      selectedClientKey = clientKey;\n    };\n\n    const navbar = await fixture<TtNavbar>(\n      `<tt-navbar client-key=${CLIENT_KEY}></tt-navbar>`,\n    );\n    navbar.clients = [\n      { clientKey: CLIENT_KEY, displayName: 'Client One' },\n      { clientKey: 'abc123', displayName: 'Client Two' },\n    ];\n    navbar.onClientChange = onClientChange;\n\n    await navbar.updateComplete;\n\n    const combobox = navbar.shadowRoot?.querySelector('tt-combobox');\n    expect(combobox).to.exist;\n\n    await selectComboboxOption(combobox!, 'abc123');\n\n    expect(selectedClientKey).to.equal('abc123');\n  });\n\n  it('should set the --nav-bar-width css variable when collapsed', async () => {\n    const navbar = await fixture<TtNavbar>(\n      `<tt-navbar client-key=${CLIENT_KEY}></tt-navbar>`,\n    );\n\n    await expect(\n      getComputedStyle(navbar).getPropertyValue('--nav-bar-width').trim(),\n    ).to.equal('260px');\n\n    const navbarToggleBtn = navbar.shadowRoot!.querySelector(\n      '#navbar-toggle-btn',\n    ) as HTMLButtonElement;\n\n    navbarToggleBtn.click();\n    await elementUpdated(navbar);\n\n    await expect(\n      getComputedStyle(navbar).getPropertyValue('--nav-bar-width').trim(),\n    ).to.equal('fit-content');\n  });\n\n  it('should expand the details when the current page is within that section', async () => {\n    // eslint-disable-next-line no-restricted-globals\n    history.pushState({}, '', `/parity/${CLIENT_KEY}`);\n\n    const navbar = await fixture<TtNavbar>(\n      `<tt-navbar client-key=${CLIENT_KEY}></tt-navbar>`,\n    );\n\n    const marketInsightsDetails = navbar.shadowRoot!.querySelector(\n      '#market-insights',\n    ) as HTMLDetailsElement;\n\n    expect(marketInsightsDetails).to.exist;\n    expect(marketInsightsDetails.open).to.be.true;\n  });\n\n  it('should set the active route when receives `tetris:navigate` event', async () => {\n    const navbar = await fixture<TtNavbar>(\n      `<tt-navbar client-key=${CLIENT_KEY}></tt-navbar>`,\n    );\n    // eslint-disable-next-line no-restricted-globals\n    history.pushState({}, '', `/account/billing-management/${CLIENT_KEY}`);\n\n    // Dispatch the event to change to Channels route\n    const navigateEvent = new CustomEvent('tetris:navigate', {});\n    window.dispatchEvent(navigateEvent);\n\n    await elementUpdated(navbar);\n    const anchor = navbar.shadowRoot!.querySelector('a[aria-current=\"page\"]');\n\n    expect(anchor).to.exist;\n    expect(anchor!.textContent).to.include('Booking reconciliation');\n  });\n\n  it('should default to open when Clerk is not available', async () => {\n    const navbar = await fixture<TtNavbar>(\n      `<tt-navbar client-key=${CLIENT_KEY}></tt-navbar>`,\n    );\n\n    const logo = navbar.shadowRoot!.querySelector('.logo');\n\n    expect(window.Clerk).to.be.undefined;\n    expect(logo).to.exist;\n    expect(logo!.checkVisibility()).to.be.true;\n  });\n\n  it('should default to state stored in Clerk when set', async () => {\n    window.Clerk = {\n      user: {\n        unsafeMetadata: { preferences: { ui: { navigationOpen: false } } },\n      },\n    } as Clerk;\n\n    const navbar = await fixture<TtNavbar>(\n      `<tt-navbar client-key=${CLIENT_KEY}></tt-navbar>`,\n    );\n\n    const logo = navbar.shadowRoot!.querySelector('.logo');\n\n    expect(logo).to.exist;\n    expect(logo!.checkVisibility()).to.be.false;\n\n    window.Clerk = undefined; // Cleanup\n  });\n\n  it('should update Clerk state when toggling if Clerk is available', async () => {\n    let timesCalled = 0;\n    let calledWith: unknown;\n\n    const mockUpdate = (args: unknown) => {\n      timesCalled += 1;\n      calledWith = args;\n    };\n\n    window.Clerk = {\n      user: {\n        update: mockUpdate,\n        unsafeMetadata: {\n          foo: 'foo',\n          preferences: {\n            bar: 'bar',\n            ui: { duck: 'duck', navigationOpen: false },\n          },\n        },\n      },\n    } as unknown as Clerk;\n\n    const navbar = await fixture<TtNavbar>(\n      `<tt-navbar client-key=${CLIENT_KEY}></tt-navbar>`,\n    );\n\n    const navbarToggleBtn = navbar.shadowRoot!.querySelector(\n      '#navbar-toggle-btn',\n    ) as HTMLButtonElement;\n\n    navbarToggleBtn.click();\n    await elementUpdated(navbar);\n\n    await expect(timesCalled).to.equal(1);\n    expect(calledWith).to.deep.equal({\n      unsafeMetadata: {\n        foo: 'foo',\n        preferences: {\n          bar: 'bar',\n          ui: {\n            duck: 'duck',\n            navigationOpen: true,\n          },\n        },\n      },\n    });\n\n    window.Clerk = undefined; // Cleanup\n  });\n});\n"]}
+{"version":3,"file":"tt-navbar.test.js","sourceRoot":"","sources":["../../test/tt-navbar.test.ts"],"names":[],"mappings":"AACA,OAAO,qBAAqB,CAAC;AAC7B,OAAO,EACL,cAAc,EACd,MAAM,EACN,OAAO,EACP,SAAS,EACT,SAAS,GACV,MAAM,kBAAkB,CAAC;AAG1B,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAE1C,oCAAoC;AACpC,MAAM,aAAa,GAAG,CAAC,KAAoC,EAAE,IAAY,EAAE,EAAE;IAC3E,KAAK,MAAM,IAAI,IAAI,KAAK,EAAE,CAAC;QACzB,IAAI,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,KAAK,IAAI,EAAE,CAAC;YACvC,OAAO,IAAI,CAAC;QACd,CAAC;IACH,CAAC;IAED,OAAO,SAAS,CAAC;AACnB,CAAC,CAAC;AAEF,MAAM,oBAAoB,GAAG,KAAK,EAAE,QAAiB,EAAE,KAAa,EAAE,EAAE;IACtE,MAAM,KAAK,GAAG,QAAQ,CAAC,UAAW,CAAC,aAAa,CAC9C,mBAAmB,CACA,CAAC;IACtB,KAAK,CAAC,KAAK,EAAE,CAAC;IAEd,MAAM,cAAc,CAAC,QAAQ,CAAC,CAAC;IAE/B,MAAM,MAAM,GAAG,QAAQ,CAAC,UAAW,CAAC,aAAa,CAC/C,+BAA+B,KAAK,IAAI,CACxB,CAAC;IACnB,MAAM,CAAC,KAAK,EAAE,CAAC;AACjB,CAAC,CAAC;AAEF,MAAM,gBAAgB,GAAG,CAAC,OAAgB,EAAE,EAAE;IAC5C,MAAM,KAAK,GAAG,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAExC,OAAO,OAAO,CACZ,KAAK,CAAC,QAAQ,KAAK,UAAU;QAC3B,KAAK,CAAC,KAAK,KAAK,KAAK;QACrB,KAAK,CAAC,MAAM,KAAK,KAAK;QACtB,KAAK,CAAC,MAAM,KAAK,MAAM;QACvB,KAAK,CAAC,OAAO,KAAK,KAAK;QACvB,KAAK,CAAC,WAAW,KAAK,KAAK;QAC3B,KAAK,CAAC,QAAQ,KAAK,QAAQ;QAC3B,KAAK,CAAC,IAAI,KAAK,0BAA0B;QACzC,KAAK,CAAC,QAAQ,KAAK,YAAY;QAC/B,KAAK,CAAC,UAAU,KAAK,QAAQ,CAChC,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,UAAU,GAAG,YAAY,CAAC;AAEhC,QAAQ,CAAC,UAAU,EAAE,GAAG,EAAE;IACxB,EAAE,CAAC,wDAAwD,EAAE,KAAK,IAAI,EAAE;QACtE,IAAI,CAAC;YACH,MAAM,OAAO,CAAW,yBAAyB,CAAC,CAAC;QACrD,CAAC;QAAC,OAAO,CAAC,EAAE,CAAC;YACX,MAAM,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,uBAAuB,CAAC,CAAC;QAC9C,CAAC;IACH,CAAC,CAAC,CAAC;IACH,EAAE,CAAC,sCAAsC,EAAE,KAAK,IAAI,EAAE;QACpD,MAAM,MAAM,GAAG,MAAM,OAAO,CAC1B,yBAAyB,UAAU,eAAe,CACnD,CAAC;QACF,MAAM,KAAK,GAAG,MAAM,CAAC,UAAU,EAAE,gBAAgB,CAAC,GAAG,CAAC,CAAC;QAEvD,IAAI,KAAK,EAAE,CAAC;YACV,MAAM,CAAC,aAAa,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC;YAC3C,MAAM,CAAC,aAAa,CAAC,KAAK,EAAE,2CAA2C,CAAC,CAAC;iBACtE,EAAE,CAAC,KAAK,CAAC;YACZ,MAAM,CAAC,aAAa,CAAC,KAAK,EAAE,IAAI,UAAU,WAAW,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC;YACjE,MAAM,CAAC,aAAa,CAAC,KAAK,EAAE,WAAW,UAAU,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC;YAC/D,MAAM,CAAC,aAAa,CAAC,KAAK,EAAE,mBAAmB,UAAU,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC;YACvE,MAAM,CAAC,aAAa,CAAC,KAAK,EAAE,IAAI,UAAU,yBAAyB,CAAC,CAAC,CAAC,EAAE;iBACrE,KAAK,CAAC;YACT,MAAM,CAAC,aAAa,CAAC,KAAK,EAAE,IAAI,UAAU,aAAa,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC;YACnE,MAAM,CAAC,aAAa,CAAC,KAAK,EAAE,aAAa,UAAU,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC;YACxE,MAAM,CAAC,aAAa,CAAC,KAAK,EAAE,aAAa,UAAU,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC;YACxE,MAAM,CAAC,aAAa,CAAC,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC;YAClD,MAAM,CAAC,aAAa,CAAC,KAAK,EAAE,iBAAiB,UAAU,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC;YACrE,MAAM,CAAC,aAAa,CAAC,KAAK,EAAE,+BAA+B,UAAU,EAAE,CAAC,CAAC;iBACtE,EAAE,CAAC,KAAK,CAAC;YACZ,MAAM,CAAC,aAAa,CAAC,KAAK,EAAE,kBAAkB,UAAU,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC;QACxE,CAAC;IACH,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,qEAAqE,EAAE,KAAK,IAAI,EAAE;QACnF,MAAM,WAAW,GAAG,0BAA0B,CAAC;QAC/C,MAAM,MAAM,GAAG,MAAM,OAAO,CAC1B,yBAAyB,UAAU,kBAAkB,WAAW,gBAAgB,CACjF,CAAC;QACF,MAAM,KAAK,GAAG,MAAM,CAAC,UAAU,EAAE,gBAAgB,CAAC,GAAG,CAAC,CAAC;QAEvD,IAAI,KAAK,EAAE,CAAC;YACV,MAAM,CAAC,aAAa,CAAC,KAAK,EAAE,GAAG,WAAW,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC;YACzD,MAAM,CAAC,aAAa,CAAC,KAAK,EAAE,2CAA2C,CAAC,CAAC;iBACtE,EAAE,CAAC,KAAK,CAAC,CAAC,wBAAwB;YACrC,MAAM,CAAC,aAAa,CAAC,KAAK,EAAE,GAAG,WAAW,IAAI,UAAU,WAAW,CAAC,CAAC,CAAC,EAAE;iBACrE,KAAK,CAAC;QACX,CAAC;IACH,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,IAAI,CAAC,yDAAyD,EAAE,KAAK,IAAI,EAAE;QAC5E,IAAI,kBAAkB,GAAG,CAAC,CAAC;QAE3B,MAAM,UAAU,GAAG,CAAC,CAAa,EAAE,EAAE;YACnC,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,kBAAkB,IAAI,CAAC,CAAC;QAC1B,CAAC,CAAC;QAEF,MAAM,MAAM,GAAG,MAAM,OAAO,CAC1B,yBAAyB,UAAU,eAAe,CACnD,CAAC;QACF,MAAM,CAAC,QAAQ,GAAG,UAAU,CAAC;QAC7B,MAAM,MAAM,CAAC,cAAc,CAAC;QAE5B,MAAM,KAAK,GAAG,MAAM,CAAC,UAAU,EAAE,gBAAgB,CAAC,GAAG,CAAC,CAAC;QACvD,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC,CAAC;QAE/B,MAAM,SAAS,CACb,GAAG,EAAE,CAAC,MAAM,CAAC,kBAAkB,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,CAAC,EAC7C,6BAA6B,CAC9B,CAAC;IACJ,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,6DAA6D,EAAE,KAAK,IAAI,EAAE;QAC3E,MAAM,MAAM,GAAG,MAAM,OAAO,CAC1B,yBAAyB,UAAU,eAAe,CACnD,CAAC;QACF,MAAM,CAAC,OAAO,GAAG;YACf,EAAE,SAAS,EAAE,UAAU,EAAE,WAAW,EAAE,YAAY,EAAE;YACpD,EAAE,SAAS,EAAE,QAAQ,EAAE,WAAW,EAAE,YAAY,EAAE;SACnD,CAAC;QACF,MAAM,MAAM,CAAC,cAAc,CAAC;QAE5B,MAAM,QAAQ,GAAG,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,aAAa,CAAC,CAAC;QACjE,MAAM,gBAAgB,GAAG,MAAM,CAAC,UAAU,EAAE,aAAa,CACvD,qBAAqB,CACtB,CAAC;QAEF,MAAM,CAAC,QAAQ,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC;QAC1B,MAAM,CAAC,gBAAgB,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,KAAK,CAAC;QACtC,MAAM,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC;IACtD,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,gEAAgE,EAAE,KAAK,IAAI,EAAE;QAC9E,MAAM,MAAM,GAAG,MAAM,OAAO,CAC1B,yBAAyB,UAAU,eAAe,CACnD,CAAC;QACF,MAAM,CAAC,OAAO,GAAG,CAAC,EAAE,SAAS,EAAE,UAAU,EAAE,WAAW,EAAE,eAAe,EAAE,CAAC,CAAC;QAC3E,MAAM,MAAM,CAAC,cAAc,CAAC;QAE5B,MAAM,gBAAgB,GAAG,MAAM,CAAC,UAAU,EAAE,aAAa,CACvD,qBAAqB,CACtB,CAAC;QACF,MAAM,QAAQ,GAAG,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,aAAa,CAAC,CAAC;QAEjE,MAAM,CAAC,gBAAgB,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC;QAClC,MAAM,CAAC,gBAAgB,EAAE,WAAW,EAAE,IAAI,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,eAAe,CAAC,CAAC;QACxE,MAAM,CAAC,QAAQ,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,KAAK,CAAC;IAChC,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,+BAA+B,EAAE,KAAK,IAAI,EAAE;QAC7C,MAAM,MAAM,GAAG,MAAM,OAAO,CAC1B,yBAAyB,UAAU,eAAe,CACnD,CAAC;QAEF,MAAM,KAAK,GAAG,MAAM,CAAC,UAAU,EAAE,gBAAgB,CAAC,GAAG,CAAC,CAAC;QACvD,MAAM,UAAU,GAAG,aAAa,CAAC,KAAM,EAAE,SAAS,CAAC,CAAC;QAEpD,MAAM,CAAC,UAAU,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC;IAC9B,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,qDAAqD,EAAE,KAAK,IAAI,EAAE;QACnE,MAAM,MAAM,GAAG,MAAM,OAAO,CAC1B,yBAAyB,UAAU,eAAe,CACnD,CAAC;QAEF,MAAM,UAAU,GAAG,MAAM,CAAC,UAAW,CAAC,gBAAgB,CAAC,SAAS,CAAC,CAAC;QAClE,MAAM,CAAC,cAAc,EAAE,QAAQ,CAAC,GAAG,UAAU,CAAC;QAE9C,cAAc,CAAC,KAAK,EAAE,CAAC;QACvB;;;WAGG;QACH,MAAM,SAAS,EAAE,CAAC;QAClB,MAAM,SAAS,EAAE,CAAC;QAElB,MAAM,CAAC,cAAc,CAAC,OAAO,CAAC,SAAS,CAAC,EAAE,IAAI,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,IAAI,CAAC;QAE3D,QAAQ,CAAC,KAAK,EAAE,CAAC;QACjB,MAAM,SAAS,EAAE,CAAC;QAClB,MAAM,SAAS,EAAE,CAAC;QAElB,MAAM,CAAC,QAAQ,CAAC,OAAO,CAAC,SAAS,CAAC,EAAE,IAAI,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,IAAI,CAAC;QACrD,MAAM,CAAC,cAAc,CAAC,OAAO,CAAC,SAAS,CAAC,EAAE,IAAI,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,KAAK,CAAC;IAC9D,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,gDAAgD,EAAE,KAAK,IAAI,EAAE;QAC9D,MAAM,MAAM,GAAG,MAAM,OAAO,CAC1B,yBAAyB,UAAU,eAAe,CACnD,CAAC;QAEF,MAAM,eAAe,GAAG,MAAM,CAAC,UAAW,CAAC,aAAa,CACtD,oBAAoB,CACA,CAAC;QAEvB,eAAe,CAAC,KAAK,EAAE,CAAC;QACxB,MAAM,cAAc,CAAC,MAAM,CAAC,CAAC;QAE7B,MAAM,IAAI,GAAG,MAAM,CAAC,UAAW,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;QACvD,MAAM,uBAAuB,GAC3B,MAAM,CAAC,UAAW,CAAC,gBAAgB,CAAC,YAAY,CAAC,CAAC;QACpD,MAAM,qBAAqB,GACzB,MAAM,CAAC,UAAW,CAAC,gBAAgB,CAAC,kBAAkB,CAAC,CAAC;QAC1D,MAAM,aAAa,GACjB,MAAM,CAAC,UAAW,CAAC,gBAAgB,CAAC,mBAAmB,CAAC,CAAC;QAC3D,MAAM,UAAU,GAAG,MAAM,CAAC,UAAW,CAAC,aAAa,CAAC,mBAAmB,CAAC,CAAC;QACzE,MAAM,cAAc,GAAG,MAAM,CAAC,UAAW,CAAC,aAAa,CAAC,kBAAkB,CAAC,CAAC;QAE5E,iCAAiC;QACjC,MAAM,CAAC,IAAI,EAAE,eAAe,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,KAAK,CAAC;QAC5C,MAAM,CAAC,cAAc,EAAE,eAAe,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,KAAK,CAAC;QACtD,KAAK,MAAM,IAAI,IAAI,aAAa,EAAE,CAAC;YACjC,MAAM,CAAC,IAAI,CAAC,eAAe,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,KAAK,CAAC;QAC7C,CAAC;QAED,uBAAuB;QACvB,MAAM,CAAC,UAAU,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC;QAC5B,MAAM,CAAC,uBAAuB,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC;QAC5D,MAAM,CAAC,qBAAqB,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC;QAC1D,KAAK,MAAM,OAAO,IAAI;YACpB,GAAG,uBAAuB;YAC1B,GAAG,qBAAqB;YACxB,UAAW;SACZ,EAAE,CAAC;YACF,MAAM,CAAC,gBAAgB,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,IAAI,CAAC;QAC/C,CAAC;IACH,CAAC,CAAC,CAAC;IAEH,MAAM,cAAc,GAAa;QAC/B,iBAAiB;QACjB,UAAU;QACV,SAAS;QACT,gBAAgB;KACjB,CAAC;IACF,cAAc,CAAC,OAAO,CAAC,EAAE,CAAC,EAAE;QAC1B,EAAE,CAAC,oCAAoC,EAAE,yBAAyB,EAAE,KAAK,IAAI,EAAE;YAC7E,MAAM,MAAM,GAAG,MAAM,OAAO,CAC1B,yBAAyB,UAAU,eAAe,CACnD,CAAC;YAEF,MAAM,eAAe,GAAG,MAAM,CAAC,UAAW,CAAC,aAAa,CACtD,oBAAoB,CACA,CAAC;YAEvB,eAAe,CAAC,KAAK,EAAE,CAAC;YACxB,MAAM,cAAc,CAAC,MAAM,CAAC,CAAC;YAE7B,MAAM,IAAI,GAAG,MAAM,CAAC,UAAW,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;YACvD,MAAM,CAAC,IAAI,EAAE,eAAe,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,KAAK,CAAC;YAE5C,MAAM,OAAO,GACX,MAAM,CAAC,UAAW,CAAC,aAAa,CAAC,IAAI,EAAE,UAAU,CAAC,CAAC;YAErD,MAAM,CAAC,OAAO,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC;YAEzB,OAAQ,CAAC,KAAK,EAAE,CAAC;YAEjB,MAAM,SAAS,CAAC,GAAG,EAAE,CAAC,IAAI,EAAE,eAAe,EAAE,EAAE,uBAAuB,EAAE;gBACtE,OAAO,EAAE,GAAG;aACb,CAAC,CAAC;QACL,CAAC,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,MAAM,IAAI,GAAG;QACX,CAAC,GAAG,EAAE,WAAW,CAAC;QAClB,CAAC,IAAI,UAAU,WAAW,EAAE,UAAU,CAAC;QACvC,CAAC,WAAW,UAAU,EAAE,EAAE,QAAQ,CAAC;QACnC,CAAC,WAAW,UAAU,EAAE,EAAE,QAAQ,CAAC;QACnC,CAAC,WAAW,UAAU,MAAM,EAAE,QAAQ,CAAC;QACvC,CAAC,SAAS,UAAU,cAAc,EAAE,UAAU,CAAC;QAC/C,CAAC,kBAAkB,UAAU,EAAE,EAAE,UAAU,CAAC;QAC5C,CAAC,IAAI,UAAU,QAAQ,EAAE,UAAU,CAAC;QACpC,CAAC,aAAa,UAAU,WAAW,EAAE,gBAAgB,CAAC;QACtD,CAAC,aAAa,UAAU,cAAc,EAAE,gBAAgB,CAAC;KAC1D,CAAC;IAEF,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,EAAE,IAAI,CAAC,EAAE,EAAE;QAC7B,EAAE,CAAC,uDAAuD,KAAK,EAAE,EAAE,KAAK,IAAI,EAAE;YAC5E,iDAAiD;YACjD,OAAO,CAAC,SAAS,CAAC,EAAE,EAAE,EAAE,EAAE,KAAK,CAAC,CAAC,CAAC,cAAc;YAEhD,MAAM,MAAM,GAAG,MAAM,OAAO,CAC1B,yBAAyB,UAAU,eAAe,CACnD,CAAC;YAEF,MAAM,MAAM,GAAG,MAAM,CAAC,UAAW,CAAC,aAAa,CAAC,wBAAwB,CAAC,CAAC;YAE1E,MAAM,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC;YACxB,MAAM,CAAC,MAAO,CAAC,WAAW,CAAC,CAAC,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;QAC/C,CAAC,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,yFAAyF,EAAE,KAAK,IAAI,EAAE;QACvG,MAAM,WAAW,GAAG,0BAA0B,CAAC;QAC/C,MAAM,kBAAkB,GAAG,uBAAuB,CAAC;QAEnD,MAAM,MAAM,GAAG,MAAM,OAAO,CAC1B,yBAAyB,UAAU,iBAAiB,WAAW,yBAAyB,kBAAkB,kBAAkB,MAAM,CAAC,eAAe,gBAAgB,CACnK,CAAC;QACF,MAAM,MAAM,GAAG,MAAM,CAAC,UAAW,CAAC,aAAa,CAAC,wBAAwB,CAAC,CAAC;QAC1E,MAAM,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC;QACxB,MAAM,CAAC,MAAO,CAAC,WAAW,CAAC,CAAC,EAAE,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC;IACtD,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,iDAAiD,EAAE,KAAK,IAAI,EAAE;QAC/D,IAAI,iBAAqC,CAAC;QAC1C,MAAM,cAAc,GAAG,CAAC,SAAiB,EAAE,EAAE;YAC3C,iBAAiB,GAAG,SAAS,CAAC;QAChC,CAAC,CAAC;QAEF,MAAM,MAAM,GAAG,MAAM,OAAO,CAC1B,yBAAyB,UAAU,eAAe,CACnD,CAAC;QACF,MAAM,CAAC,OAAO,GAAG;YACf,EAAE,SAAS,EAAE,UAAU,EAAE,WAAW,EAAE,YAAY,EAAE;YACpD,EAAE,SAAS,EAAE,QAAQ,EAAE,WAAW,EAAE,YAAY,EAAE;SACnD,CAAC;QACF,MAAM,CAAC,cAAc,GAAG,cAAc,CAAC;QAEvC,MAAM,MAAM,CAAC,cAAc,CAAC;QAE5B,MAAM,QAAQ,GAAG,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,aAAa,CAAC,CAAC;QACjE,MAAM,CAAC,QAAQ,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC;QAE1B,MAAM,oBAAoB,CAAC,QAAS,EAAE,QAAQ,CAAC,CAAC;QAEhD,MAAM,CAAC,iBAAiB,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;IAC/C,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,4DAA4D,EAAE,KAAK,IAAI,EAAE;QAC1E,MAAM,MAAM,GAAG,MAAM,OAAO,CAC1B,yBAAyB,UAAU,eAAe,CACnD,CAAC;QAEF,MAAM,MAAM,CACV,gBAAgB,CAAC,MAAM,CAAC,CAAC,gBAAgB,CAAC,iBAAiB,CAAC,CAAC,IAAI,EAAE,CACpE,CAAC,EAAE,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;QAEpB,MAAM,eAAe,GAAG,MAAM,CAAC,UAAW,CAAC,aAAa,CACtD,oBAAoB,CACA,CAAC;QAEvB,eAAe,CAAC,KAAK,EAAE,CAAC;QACxB,MAAM,cAAc,CAAC,MAAM,CAAC,CAAC;QAE7B,MAAM,MAAM,CACV,gBAAgB,CAAC,MAAM,CAAC,CAAC,gBAAgB,CAAC,iBAAiB,CAAC,CAAC,IAAI,EAAE,CACpE,CAAC,EAAE,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC;IAC5B,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,wEAAwE,EAAE,KAAK,IAAI,EAAE;QACtF,iDAAiD;QACjD,OAAO,CAAC,SAAS,CAAC,EAAE,EAAE,EAAE,EAAE,WAAW,UAAU,EAAE,CAAC,CAAC;QAEnD,MAAM,MAAM,GAAG,MAAM,OAAO,CAC1B,yBAAyB,UAAU,eAAe,CACnD,CAAC;QAEF,MAAM,qBAAqB,GAAG,MAAM,CAAC,UAAW,CAAC,aAAa,CAC5D,kBAAkB,CACG,CAAC;QAExB,MAAM,CAAC,qBAAqB,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC;QACvC,MAAM,CAAC,qBAAqB,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,IAAI,CAAC;IAChD,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,mEAAmE,EAAE,KAAK,IAAI,EAAE;QACjF,MAAM,MAAM,GAAG,MAAM,OAAO,CAC1B,yBAAyB,UAAU,eAAe,CACnD,CAAC;QACF,iDAAiD;QACjD,OAAO,CAAC,SAAS,CAAC,EAAE,EAAE,EAAE,EAAE,+BAA+B,UAAU,EAAE,CAAC,CAAC;QAEvE,iDAAiD;QACjD,MAAM,aAAa,GAAG,IAAI,WAAW,CAAC,iBAAiB,EAAE,EAAE,CAAC,CAAC;QAC7D,MAAM,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC;QAEpC,MAAM,cAAc,CAAC,MAAM,CAAC,CAAC;QAC7B,MAAM,MAAM,GAAG,MAAM,CAAC,UAAW,CAAC,aAAa,CAAC,wBAAwB,CAAC,CAAC;QAE1E,MAAM,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC;QACxB,MAAM,CAAC,MAAO,CAAC,WAAW,CAAC,CAAC,EAAE,CAAC,OAAO,CAAC,wBAAwB,CAAC,CAAC;IACnE,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,oDAAoD,EAAE,KAAK,IAAI,EAAE;QAClE,MAAM,MAAM,GAAG,MAAM,OAAO,CAC1B,yBAAyB,UAAU,eAAe,CACnD,CAAC;QAEF,MAAM,IAAI,GAAG,MAAM,CAAC,UAAW,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;QAEvD,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,SAAS,CAAC;QACrC,MAAM,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC;QACtB,MAAM,CAAC,IAAK,CAAC,eAAe,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,IAAI,CAAC;IAC7C,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,kDAAkD,EAAE,KAAK,IAAI,EAAE;QAChE,MAAM,QAAQ,GAAG;YACf,cAAc,EAAE,EAAE,WAAW,EAAE,EAAE,EAAE,EAAE,EAAE,cAAc,EAAE,KAAK,EAAE,EAAE,EAAE;SACnE,CAAC;QAEF,MAAM,eAAe,GAAG,CAAC,IAAoC,EAAE,EAAE;YAC/D,IAAI,CAAC,EAAE,IAAI,EAAE,QAAQ,EAA0B,CAAC,CAAC;QACnD,CAAC,CAAC;QAEF,MAAM,CAAC,KAAK,GAAG;YACb,WAAW,EAAE,eAAe;YAC5B,IAAI,EAAE,QAAQ;SACN,CAAC;QAEX,MAAM,MAAM,GAAG,MAAM,OAAO,CAC1B,yBAAyB,UAAU,eAAe,CACnD,CAAC;QAEF,MAAM,IAAI,GAAG,MAAM,CAAC,UAAW,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;QAEvD,MAAM,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC;QACtB,MAAM,CAAC,IAAK,CAAC,eAAe,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,KAAK,CAAC;QAE5C,MAAM,CAAC,KAAK,GAAG,SAAS,CAAC,CAAC,UAAU;IACtC,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,+DAA+D,EAAE,KAAK,IAAI,EAAE;QAC7E,IAAI,WAAW,GAAG,CAAC,CAAC;QACpB,IAAI,UAAmB,CAAC;QAExB,MAAM,UAAU,GAAG,CAAC,IAAa,EAAE,EAAE;YACnC,WAAW,IAAI,CAAC,CAAC;YACjB,UAAU,GAAG,IAAI,CAAC;QACpB,CAAC,CAAC;QAEF,MAAM,QAAQ,GAAG;YACf,MAAM,EAAE,UAAU;YAClB,cAAc,EAAE;gBACd,GAAG,EAAE,KAAK;gBACV,WAAW,EAAE;oBACX,GAAG,EAAE,KAAK;oBACV,EAAE,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,cAAc,EAAE,KAAK,EAAE;iBAC5C;aACF;SACF,CAAC;QAEF,MAAM,eAAe,GAAG,CAAC,IAAoC,EAAE,EAAE;YAC/D,IAAI,CAAC,EAAE,IAAI,EAAE,QAAQ,EAA0B,CAAC,CAAC;QACnD,CAAC,CAAC;QAEF,MAAM,CAAC,KAAK,GAAG;YACb,WAAW,EAAE,eAAe;YAC5B,IAAI,EAAE,QAAQ;SACK,CAAC;QAEtB,MAAM,MAAM,GAAG,MAAM,OAAO,CAC1B,yBAAyB,UAAU,eAAe,CACnD,CAAC;QAEF,MAAM,eAAe,GAAG,MAAM,CAAC,UAAW,CAAC,aAAa,CACtD,oBAAoB,CACA,CAAC;QAEvB,eAAe,CAAC,KAAK,EAAE,CAAC;QACxB,MAAM,cAAc,CAAC,MAAM,CAAC,CAAC;QAE7B,MAAM,MAAM,CAAC,WAAW,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;QACtC,MAAM,CAAC,UAAU,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC;YAC/B,cAAc,EAAE;gBACd,GAAG,EAAE,KAAK;gBACV,WAAW,EAAE;oBACX,GAAG,EAAE,KAAK;oBACV,EAAE,EAAE;wBACF,IAAI,EAAE,MAAM;wBACZ,cAAc,EAAE,IAAI;qBACrB;iBACF;aACF;SACF,CAAC,CAAC;QAEH,MAAM,CAAC,KAAK,GAAG,SAAS,CAAC,CAAC,UAAU;IACtC,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { Clerk } from '@clerk/clerk-js';\nimport '../src/tt-navbar.js';\nimport {\n  elementUpdated,\n  expect,\n  fixture,\n  nextFrame,\n  waitUntil,\n} from '@open-wc/testing';\nimport { Resources } from '@clerk/types';\nimport { TtNavbar } from '../src/index.js';\nimport { Routes } from '../src/Routes.js';\n\n// eslint-disable-next-line no-undef\nconst getLinkByHref = (links: NodeListOf<HTMLAnchorElement>, href: string) => {\n  for (const link of links) {\n    if (link.getAttribute('href') === href) {\n      return link;\n    }\n  }\n\n  return undefined;\n};\n\nconst selectComboboxOption = async (combobox: Element, value: string) => {\n  const input = combobox.shadowRoot!.querySelector(\n    '[role=\"combobox\"]',\n  ) as HTMLInputElement;\n  input.click();\n\n  await elementUpdated(combobox);\n\n  const option = combobox.shadowRoot!.querySelector(\n    `[role=\"option\"][data-value=\"${value}\"]`,\n  ) as HTMLLIElement;\n  option.click();\n};\n\nconst isVisuallyHidden = (element: Element) => {\n  const style = getComputedStyle(element);\n\n  return Boolean(\n    style.position === 'absolute' &&\n      style.width === '1px' &&\n      style.height === '1px' &&\n      style.margin === '-1px' &&\n      style.padding === '0px' &&\n      style.borderWidth === '0px' &&\n      style.overflow === 'hidden' &&\n      style.clip === 'rect(0px, 0px, 0px, 0px)' &&\n      style.clipPath === 'inset(50%)' &&\n      style.whiteSpace === 'nowrap',\n  );\n};\n\nconst CLIENT_KEY = 'zxd47KQGAP';\n\ndescribe('TtNavbar', () => {\n  it('should throw an error if the clientKey is not provided', async () => {\n    try {\n      await fixture<TtNavbar>(`<tt-navbar></tt-navbar>`);\n    } catch (e) {\n      expect(e).to.match(/clientKey is required/);\n    }\n  });\n  it('should render with the default links', async () => {\n    const navbar = await fixture<TtNavbar>(\n      `<tt-navbar client-key=${CLIENT_KEY}></tt-navbar>`,\n    );\n    const links = navbar.shadowRoot?.querySelectorAll('a');\n\n    if (links) {\n      expect(getLinkByHref(links, '/')).to.exist;\n      expect(getLinkByHref(links, 'https://app.campaign-manager.triptease.io'))\n        .to.exist;\n      expect(getLinkByHref(links, `/${CLIENT_KEY}/channels`)).to.exist;\n      expect(getLinkByHref(links, `/parity/${CLIENT_KEY}`)).to.exist;\n      expect(getLinkByHref(links, `/guest-insights/${CLIENT_KEY}`)).to.exist;\n      expect(getLinkByHref(links, `/${CLIENT_KEY}/guest-behavioural-data`)).to\n        .exist;\n      expect(getLinkByHref(links, `/${CLIENT_KEY}/crm-config`)).to.exist;\n      expect(getLinkByHref(links, `/settings/${CLIENT_KEY}/guides`)).to.exist;\n      expect(getLinkByHref(links, `/settings/${CLIENT_KEY}/hotels`)).to.exist;\n      expect(getLinkByHref(links, `/account`)).to.exist;\n      expect(getLinkByHref(links, `/account/team/${CLIENT_KEY}`)).to.exist;\n      expect(getLinkByHref(links, `/account/billing-management/${CLIENT_KEY}`))\n        .to.exist;\n      expect(getLinkByHref(links, `/subscriptions/${CLIENT_KEY}`)).to.exist;\n    }\n  });\n\n  it('should render platform URLs against the base URL when it is defined', async () => {\n    const platformUrl = 'https://app.triptease.io';\n    const navbar = await fixture<TtNavbar>(\n      `<tt-navbar client-key=${CLIENT_KEY} platform-url=\"${platformUrl}\"></tt-navbar>`,\n    );\n    const links = navbar.shadowRoot?.querySelectorAll('a');\n\n    if (links) {\n      expect(getLinkByHref(links, `${platformUrl}/`)).to.exist;\n      expect(getLinkByHref(links, 'https://app.campaign-manager.triptease.io'))\n        .to.exist; // This shouldn't change\n      expect(getLinkByHref(links, `${platformUrl}/${CLIENT_KEY}/channels`)).to\n        .exist;\n    }\n  });\n\n  it.skip('should allow navigation events to be handled externally', async () => {\n    let navigateEventCount = 0;\n\n    const onNavigate = (e: MouseEvent) => {\n      e.preventDefault();\n      navigateEventCount += 1;\n    };\n\n    const navbar = await fixture<TtNavbar>(\n      `<tt-navbar client-key=${CLIENT_KEY}></tt-navbar>`,\n    );\n    navbar.navigate = onNavigate;\n    await navbar.updateComplete;\n\n    const links = navbar.shadowRoot?.querySelectorAll('a');\n    links?.forEach(l => l.click());\n\n    await waitUntil(\n      () => expect(navigateEventCount).to.equal(13),\n      'navigate event did not fire',\n    );\n  });\n\n  it('should render a combobox when multiple clients are provided', async () => {\n    const navbar = await fixture<TtNavbar>(\n      `<tt-navbar client-key=${CLIENT_KEY}></tt-navbar>`,\n    );\n    navbar.clients = [\n      { clientKey: CLIENT_KEY, displayName: 'Client One' },\n      { clientKey: 'abc123', displayName: 'Client Two' },\n    ];\n    await navbar.updateComplete;\n\n    const combobox = navbar.shadowRoot?.querySelector('tt-combobox');\n    const singleClientName = navbar.shadowRoot?.querySelector(\n      '.single-client-name',\n    );\n\n    expect(combobox).to.exist;\n    expect(singleClientName).to.not.exist;\n    expect(combobox?.value).to.deep.equal([CLIENT_KEY]);\n  });\n\n  it('should render the client name when only one client is provided', async () => {\n    const navbar = await fixture<TtNavbar>(\n      `<tt-navbar client-key=${CLIENT_KEY}></tt-navbar>`,\n    );\n    navbar.clients = [{ clientKey: CLIENT_KEY, displayName: 'Single Client' }];\n    await navbar.updateComplete;\n\n    const singleClientName = navbar.shadowRoot?.querySelector(\n      '.single-client-name',\n    );\n    const combobox = navbar.shadowRoot?.querySelector('tt-combobox');\n\n    expect(singleClientName).to.exist;\n    expect(singleClientName?.textContent?.trim()).to.equal('Single Client');\n    expect(combobox).to.not.exist;\n  });\n\n  it('should render the logout link', async () => {\n    const navbar = await fixture<TtNavbar>(\n      `<tt-navbar client-key=${CLIENT_KEY}></tt-navbar>`,\n    );\n\n    const links = navbar.shadowRoot?.querySelectorAll('a');\n    const logoutLink = getLinkByHref(links!, '/logout');\n\n    expect(logoutLink).to.exist;\n  });\n\n  it('should close other details when one is being opened', async () => {\n    const navbar = await fixture<TtNavbar>(\n      `<tt-navbar client-key=${CLIENT_KEY}></tt-navbar>`,\n    );\n\n    const allDetails = navbar.shadowRoot!.querySelectorAll('summary');\n    const [marketInsights, settings] = allDetails;\n\n    marketInsights.click();\n    /*\n     * Wait for the DOM to update before continuing. This is necessary because helpers like elementUpdated don't wait for\n     * the browser to fire the $toggle handler as well as adding the open attribute.\n     */\n    await nextFrame();\n    await nextFrame();\n\n    expect(marketInsights.closest('details')?.open).to.be.true;\n\n    settings.click();\n    await nextFrame();\n    await nextFrame();\n\n    expect(settings.closest('details')?.open).to.be.true;\n    expect(marketInsights.closest('details')?.open).to.be.false;\n  });\n\n  it('should collapse the navbar when toggle clicked', async () => {\n    const navbar = await fixture<TtNavbar>(\n      `<tt-navbar client-key=${CLIENT_KEY}></tt-navbar>`,\n    );\n\n    const navbarToggleBtn = navbar.shadowRoot!.querySelector(\n      '#navbar-toggle-btn',\n    ) as HTMLButtonElement;\n\n    navbarToggleBtn.click();\n    await elementUpdated(navbar);\n\n    const logo = navbar.shadowRoot!.querySelector('.logo');\n    const rootLinksHiddenElements =\n      navbar.shadowRoot!.querySelectorAll('nav a span');\n    const summaryHiddenElements =\n      navbar.shadowRoot!.querySelectorAll('nav summary span');\n    const externalLinks =\n      navbar.shadowRoot!.querySelectorAll('#external-links a');\n    const logoutLink = navbar.shadowRoot!.querySelector('#logout-link span');\n    const clientSelector = navbar.shadowRoot!.querySelector('#client-selector');\n\n    // Visually and accessibly hidden\n    expect(logo?.checkVisibility()).to.be.false;\n    expect(clientSelector?.checkVisibility()).to.be.false;\n    for (const link of externalLinks) {\n      expect(link.checkVisibility()).to.be.false;\n    }\n\n    // Visually hidden only\n    expect(logoutLink).to.exist;\n    expect(rootLinksHiddenElements.length).to.be.greaterThan(1);\n    expect(summaryHiddenElements.length).to.be.greaterThan(1);\n    for (const element of [\n      ...rootLinksHiddenElements,\n      ...summaryHiddenElements,\n      logoutLink!,\n    ]) {\n      expect(isVisuallyHidden(element)).to.be.true;\n    }\n  });\n\n  const collapsibleIds: string[] = [\n    'market-insights',\n    'settings',\n    'account',\n    'billing-routes',\n  ];\n  collapsibleIds.forEach(id => {\n    it(`should open the nav bar when the ${id} collapsible is clicked`, async () => {\n      const navbar = await fixture<TtNavbar>(\n        `<tt-navbar client-key=${CLIENT_KEY}></tt-navbar>`,\n      );\n\n      const navbarToggleBtn = navbar.shadowRoot!.querySelector(\n        '#navbar-toggle-btn',\n      ) as HTMLButtonElement;\n\n      navbarToggleBtn.click();\n      await elementUpdated(navbar);\n\n      const logo = navbar.shadowRoot!.querySelector('.logo');\n      expect(logo?.checkVisibility()).to.be.false;\n\n      const element: HTMLDetailsElement | null =\n        navbar.shadowRoot!.querySelector(`#${id} summary`);\n\n      expect(element).to.exist;\n\n      element!.click();\n\n      await waitUntil(() => logo?.checkVisibility(), 'navbar should be open', {\n        timeout: 500,\n      });\n    });\n  });\n\n  const URLs = [\n    ['/', 'Dashboard'],\n    [`/${CLIENT_KEY}/channels`, 'Channels'],\n    [`/parity/${CLIENT_KEY}`, 'Parity'],\n    [`/parity/${CLIENT_KEY}`, 'Parity'],\n    [`/parity/${CLIENT_KEY}/foo`, 'Parity'],\n    [`/meta/${CLIENT_KEY}/performance`, 'Channels'],\n    [`/chat/insights/${CLIENT_KEY}`, 'Channels'],\n    [`/${CLIENT_KEY}/email`, 'Channels'],\n    [`/settings/${CLIENT_KEY}/branding`, 'Group settings'],\n    [`/settings/${CLIENT_KEY}/price-check`, 'Group settings'],\n  ];\n\n  URLs.forEach(([route, text]) => {\n    it(`should show the current page as active when link is ${route}`, async () => {\n      // eslint-disable-next-line no-restricted-globals\n      history.pushState({}, '', route); // 👈 mock URL\n\n      const navbar = await fixture<TtNavbar>(\n        `<tt-navbar client-key=${CLIENT_KEY}></tt-navbar>`,\n      );\n\n      const anchor = navbar.shadowRoot!.querySelector('a[aria-current=\"page\"]');\n\n      expect(anchor).to.exist;\n      expect(anchor!.textContent).to.include(text);\n    });\n  });\n\n  it('should show the current page as campaign manager when on the given campaign manager url', async () => {\n    const platformUrl = 'https://app.triptease.io';\n    const campaignManagerUrl = 'http://localhost:8000';\n\n    const navbar = await fixture<TtNavbar>(\n      `<tt-navbar client-key=${CLIENT_KEY} platform-url=${platformUrl} campaign-manager-url=${campaignManagerUrl} active-route=\"${Routes.CampaignManager}\"></tt-navbar>`,\n    );\n    const anchor = navbar.shadowRoot!.querySelector('a[aria-current=\"page\"]');\n    expect(anchor).to.exist;\n    expect(anchor!.textContent).to.include('Campaigns');\n  });\n\n  it('should fire an event when the client is changed', async () => {\n    let selectedClientKey: string | undefined;\n    const onClientChange = (clientKey: string) => {\n      selectedClientKey = clientKey;\n    };\n\n    const navbar = await fixture<TtNavbar>(\n      `<tt-navbar client-key=${CLIENT_KEY}></tt-navbar>`,\n    );\n    navbar.clients = [\n      { clientKey: CLIENT_KEY, displayName: 'Client One' },\n      { clientKey: 'abc123', displayName: 'Client Two' },\n    ];\n    navbar.onClientChange = onClientChange;\n\n    await navbar.updateComplete;\n\n    const combobox = navbar.shadowRoot?.querySelector('tt-combobox');\n    expect(combobox).to.exist;\n\n    await selectComboboxOption(combobox!, 'abc123');\n\n    expect(selectedClientKey).to.equal('abc123');\n  });\n\n  it('should set the --nav-bar-width css variable when collapsed', async () => {\n    const navbar = await fixture<TtNavbar>(\n      `<tt-navbar client-key=${CLIENT_KEY}></tt-navbar>`,\n    );\n\n    await expect(\n      getComputedStyle(navbar).getPropertyValue('--nav-bar-width').trim(),\n    ).to.equal('260px');\n\n    const navbarToggleBtn = navbar.shadowRoot!.querySelector(\n      '#navbar-toggle-btn',\n    ) as HTMLButtonElement;\n\n    navbarToggleBtn.click();\n    await elementUpdated(navbar);\n\n    await expect(\n      getComputedStyle(navbar).getPropertyValue('--nav-bar-width').trim(),\n    ).to.equal('fit-content');\n  });\n\n  it('should expand the details when the current page is within that section', async () => {\n    // eslint-disable-next-line no-restricted-globals\n    history.pushState({}, '', `/parity/${CLIENT_KEY}`);\n\n    const navbar = await fixture<TtNavbar>(\n      `<tt-navbar client-key=${CLIENT_KEY}></tt-navbar>`,\n    );\n\n    const marketInsightsDetails = navbar.shadowRoot!.querySelector(\n      '#market-insights',\n    ) as HTMLDetailsElement;\n\n    expect(marketInsightsDetails).to.exist;\n    expect(marketInsightsDetails.open).to.be.true;\n  });\n\n  it('should set the active route when receives `tetris:navigate` event', async () => {\n    const navbar = await fixture<TtNavbar>(\n      `<tt-navbar client-key=${CLIENT_KEY}></tt-navbar>`,\n    );\n    // eslint-disable-next-line no-restricted-globals\n    history.pushState({}, '', `/account/billing-management/${CLIENT_KEY}`);\n\n    // Dispatch the event to change to Channels route\n    const navigateEvent = new CustomEvent('tetris:navigate', {});\n    window.dispatchEvent(navigateEvent);\n\n    await elementUpdated(navbar);\n    const anchor = navbar.shadowRoot!.querySelector('a[aria-current=\"page\"]');\n\n    expect(anchor).to.exist;\n    expect(anchor!.textContent).to.include('Booking reconciliation');\n  });\n\n  it('should default to open when Clerk is not available', async () => {\n    const navbar = await fixture<TtNavbar>(\n      `<tt-navbar client-key=${CLIENT_KEY}></tt-navbar>`,\n    );\n\n    const logo = navbar.shadowRoot!.querySelector('.logo');\n\n    expect(window.Clerk).to.be.undefined;\n    expect(logo).to.exist;\n    expect(logo!.checkVisibility()).to.be.true;\n  });\n\n  it('should default to state stored in Clerk when set', async () => {\n    const mockUser = {\n      unsafeMetadata: { preferences: { ui: { navigationOpen: false } } },\n    };\n\n    const mockAddListener = (func: (resources: Resources) => void) => {\n      func({ user: mockUser } as unknown as Resources);\n    };\n\n    window.Clerk = {\n      addListener: mockAddListener,\n      user: mockUser,\n    } as Clerk;\n\n    const navbar = await fixture<TtNavbar>(\n      `<tt-navbar client-key=${CLIENT_KEY}></tt-navbar>`,\n    );\n\n    const logo = navbar.shadowRoot!.querySelector('.logo');\n\n    expect(logo).to.exist;\n    expect(logo!.checkVisibility()).to.be.false;\n\n    window.Clerk = undefined; // Cleanup\n  });\n\n  it('should update Clerk state when toggling if Clerk is available', async () => {\n    let timesCalled = 0;\n    let calledWith: unknown;\n\n    const mockUpdate = (args: unknown) => {\n      timesCalled += 1;\n      calledWith = args;\n    };\n\n    const mockUser = {\n      update: mockUpdate,\n      unsafeMetadata: {\n        foo: 'foo',\n        preferences: {\n          bar: 'bar',\n          ui: { duck: 'duck', navigationOpen: false },\n        },\n      },\n    };\n\n    const mockAddListener = (func: (resources: Resources) => void) => {\n      func({ user: mockUser } as unknown as Resources);\n    };\n\n    window.Clerk = {\n      addListener: mockAddListener,\n      user: mockUser,\n    } as unknown as Clerk;\n\n    const navbar = await fixture<TtNavbar>(\n      `<tt-navbar client-key=${CLIENT_KEY}></tt-navbar>`,\n    );\n\n    const navbarToggleBtn = navbar.shadowRoot!.querySelector(\n      '#navbar-toggle-btn',\n    ) as HTMLButtonElement;\n\n    navbarToggleBtn.click();\n    await elementUpdated(navbar);\n\n    await expect(timesCalled).to.equal(1);\n    expect(calledWith).to.deep.equal({\n      unsafeMetadata: {\n        foo: 'foo',\n        preferences: {\n          bar: 'bar',\n          ui: {\n            duck: 'duck',\n            navigationOpen: true,\n          },\n        },\n      },\n    });\n\n    window.Clerk = undefined; // Cleanup\n  });\n});\n"]}

package/dist/web/NavbarController.js

@@ -1,5 +1,5 @@
 /**
-* @triptease/tt-navbar v0.0.41
+* @triptease/tt-navbar v0.0.43
 */
 
 // src/NavbarController.ts
@@ -14,12 +14,22 @@ var NavbarController = class {
   }
   hostUpdate() {
     if (!this._hasInitialized && window.Clerk) {
-      const userSetting = window.Clerk.user?.unsafeMetadata?.preferences?.ui?.navigationOpen;
-      if (userSetting !== void 0) {
-        this._isOpen = userSetting;
-        this._hasInitialized = true;
-        this.host.requestUpdate();
-      }
+      this._removeClerkListener = window.Clerk.addListener((resources) => {
+        const { user } = resources;
+        if (user && !this._hasInitialized) {
+          const navigationOpen = user.unsafeMetadata?.preferences?.ui?.navigationOpen;
+          if (navigationOpen !== void 0) {
+            this._isOpen = navigationOpen;
+            this.host.requestUpdate();
+          }
+          this._hasInitialized = true;
+        }
+      });
+    }
+  }
+  hostDisconnected() {
+    if (this._removeClerkListener) {
+      this._removeClerkListener();
     }
   }
   async toggle() {

package/dist/web/NavbarController.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/NavbarController.ts"],
-  "sourcesContent": ["import { ReactiveController, ReactiveControllerHost } from 'lit';\n\nexport class NavbarController implements ReactiveController {\n  host: ReactiveControllerHost;\n\n  private _isOpen = true;\n\n  private _hasInitialized = false;\n\n  constructor(host: ReactiveControllerHost) {\n    (this.host = host).addController(this);\n  }\n\n  get isOpen() {\n    return this._isOpen;\n  }\n\n  hostUpdate() {\n    if (!this._hasInitialized && window.Clerk) {\n      const userSetting =\n        window.Clerk.user?.unsafeMetadata?.preferences?.ui?.navigationOpen;\n\n      if (userSetting !== undefined) {\n        this._isOpen = userSetting;\n        this._hasInitialized = true;\n        this.host.requestUpdate();\n      }\n    }\n  }\n\n  async toggle() {\n    this._isOpen = !this._isOpen;\n\n    if (window.Clerk) {\n      await window.Clerk.user?.update({\n        unsafeMetadata: {\n          ...window.Clerk.user?.unsafeMetadata,\n          preferences: {\n            ...window.Clerk.user?.unsafeMetadata?.preferences,\n            ui: {\n              ...window.Clerk.user?.unsafeMetadata?.preferences?.ui,\n              navigationOpen: this.isOpen,\n            },\n          },\n        },\n      });\n    }\n\n    this.host.requestUpdate();\n  }\n}\n"],
-  "mappings": ";;;;;AAEO,IAAM,mBAAN,MAAqD;AAAA,EAO1D,YAAY,MAA8B;AAJ1C,SAAQ,UAAU;AAElB,SAAQ,kBAAkB;AAGxB,KAAC,KAAK,OAAO,MAAM,cAAc,IAAI;AAAA,EACvC;AAAA,EAEA,IAAI,SAAS;AACX,WAAO,KAAK;AAAA,EACd;AAAA,EAEA,aAAa;AACX,QAAI,CAAC,KAAK,mBAAmB,OAAO,OAAO;AACzC,YAAM,cACJ,OAAO,MAAM,MAAM,gBAAgB,aAAa,IAAI;AAEtD,UAAI,gBAAgB,QAAW;AAC7B,aAAK,UAAU;AACf,aAAK,kBAAkB;AACvB,aAAK,KAAK,cAAc;AAAA,MAC1B;AAAA,IACF;AAAA,EACF;AAAA,EAEA,MAAM,SAAS;AACb,SAAK,UAAU,CAAC,KAAK;AAErB,QAAI,OAAO,OAAO;AAChB,YAAM,OAAO,MAAM,MAAM,OAAO;AAAA,QAC9B,gBAAgB;AAAA,UACd,GAAG,OAAO,MAAM,MAAM;AAAA,UACtB,aAAa;AAAA,YACX,GAAG,OAAO,MAAM,MAAM,gBAAgB;AAAA,YACtC,IAAI;AAAA,cACF,GAAG,OAAO,MAAM,MAAM,gBAAgB,aAAa;AAAA,cACnD,gBAAgB,KAAK;AAAA,YACvB;AAAA,UACF;AAAA,QACF;AAAA,MACF,CAAC;AAAA,IACH;AAEA,SAAK,KAAK,cAAc;AAAA,EAC1B;AACF;",
+  "sourcesContent": ["import { ReactiveController, ReactiveControllerHost } from 'lit';\nimport { UnsubscribeCallback } from '@clerk/types';\n\nexport class NavbarController implements ReactiveController {\n  host: ReactiveControllerHost;\n\n  private _isOpen = true;\n\n  private _hasInitialized = false;\n\n  private _removeClerkListener?: UnsubscribeCallback;\n\n  constructor(host: ReactiveControllerHost) {\n    (this.host = host).addController(this);\n  }\n\n  get isOpen() {\n    return this._isOpen;\n  }\n\n  hostUpdate() {\n    if (!this._hasInitialized && window.Clerk) {\n      this._removeClerkListener = window.Clerk.addListener(resources => {\n        const { user } = resources;\n        if (user && !this._hasInitialized) {\n          const navigationOpen =\n            user.unsafeMetadata?.preferences?.ui?.navigationOpen;\n\n          if (navigationOpen !== undefined) {\n            this._isOpen = navigationOpen;\n            this.host.requestUpdate();\n          }\n\n          this._hasInitialized = true;\n        }\n      });\n    }\n  }\n\n  hostDisconnected() {\n    if (this._removeClerkListener) {\n      this._removeClerkListener();\n    }\n  }\n\n  async toggle() {\n    this._isOpen = !this._isOpen;\n\n    if (window.Clerk) {\n      await window.Clerk.user?.update({\n        unsafeMetadata: {\n          ...window.Clerk.user?.unsafeMetadata,\n          preferences: {\n            ...window.Clerk.user?.unsafeMetadata?.preferences,\n            ui: {\n              ...window.Clerk.user?.unsafeMetadata?.preferences?.ui,\n              navigationOpen: this.isOpen,\n            },\n          },\n        },\n      });\n    }\n\n    this.host.requestUpdate();\n  }\n}\n"],
+  "mappings": ";;;;;AAGO,IAAM,mBAAN,MAAqD;AAAA,EAS1D,YAAY,MAA8B;AAN1C,SAAQ,UAAU;AAElB,SAAQ,kBAAkB;AAKxB,KAAC,KAAK,OAAO,MAAM,cAAc,IAAI;AAAA,EACvC;AAAA,EAEA,IAAI,SAAS;AACX,WAAO,KAAK;AAAA,EACd;AAAA,EAEA,aAAa;AACX,QAAI,CAAC,KAAK,mBAAmB,OAAO,OAAO;AACzC,WAAK,uBAAuB,OAAO,MAAM,YAAY,eAAa;AAChE,cAAM,EAAE,KAAK,IAAI;AACjB,YAAI,QAAQ,CAAC,KAAK,iBAAiB;AACjC,gBAAM,iBACJ,KAAK,gBAAgB,aAAa,IAAI;AAExC,cAAI,mBAAmB,QAAW;AAChC,iBAAK,UAAU;AACf,iBAAK,KAAK,cAAc;AAAA,UAC1B;AAEA,eAAK,kBAAkB;AAAA,QACzB;AAAA,MACF,CAAC;AAAA,IACH;AAAA,EACF;AAAA,EAEA,mBAAmB;AACjB,QAAI,KAAK,sBAAsB;AAC7B,WAAK,qBAAqB;AAAA,IAC5B;AAAA,EACF;AAAA,EAEA,MAAM,SAAS;AACb,SAAK,UAAU,CAAC,KAAK;AAErB,QAAI,OAAO,OAAO;AAChB,YAAM,OAAO,MAAM,MAAM,OAAO;AAAA,QAC9B,gBAAgB;AAAA,UACd,GAAG,OAAO,MAAM,MAAM;AAAA,UACtB,aAAa;AAAA,YACX,GAAG,OAAO,MAAM,MAAM,gBAAgB;AAAA,YACtC,IAAI;AAAA,cACF,GAAG,OAAO,MAAM,MAAM,gBAAgB,aAAa;AAAA,cACnD,gBAAgB,KAAK;AAAA,YACvB;AAAA,UACF;AAAA,QACF;AAAA,MACF,CAAC;AAAA,IACH;AAEA,SAAK,KAAK,cAAc;AAAA,EAC1B;AACF;",
   "names": []
 }

package/dist/web/Routes.js

@@ -1,5 +1,5 @@
 /**
-* @triptease/tt-navbar v0.0.41
+* @triptease/tt-navbar v0.0.43
 */
 
 // src/Routes.ts

package/dist/web/TtNavbar.js

@@ -1,5 +1,5 @@
 /**
-* @triptease/tt-navbar v0.0.41
+* @triptease/tt-navbar v0.0.43
 */
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -1785,7 +1785,7 @@ var styles2 = i`
       width: var(--space-scale-2);
     }
 
-    &[open] .chevron {
+    &[open] .chevron svg {
       transform: rotate(180deg);
     }
 
@@ -2035,12 +2035,22 @@ var NavbarController = class {
   }
   hostUpdate() {
     if (!this._hasInitialized && window.Clerk) {
-      const userSetting = window.Clerk.user?.unsafeMetadata?.preferences?.ui?.navigationOpen;
-      if (userSetting !== void 0) {
-        this._isOpen = userSetting;
-        this._hasInitialized = true;
-        this.host.requestUpdate();
-      }
+      this._removeClerkListener = window.Clerk.addListener((resources) => {
+        const { user: user2 } = resources;
+        if (user2 && !this._hasInitialized) {
+          const navigationOpen = user2.unsafeMetadata?.preferences?.ui?.navigationOpen;
+          if (navigationOpen !== void 0) {
+            this._isOpen = navigationOpen;
+            this.host.requestUpdate();
+          }
+          this._hasInitialized = true;
+        }
+      });
+    }
+  }
+  hostDisconnected() {
+    if (this._removeClerkListener) {
+      this._removeClerkListener();
     }
   }
   async toggle() {