@triptease/tt-navbar 0.0.8 → 0.0.10

package/dist/web/tt-navbar.js

@@ -1,12 +1,12 @@
 /**
-* @triptease/tt-navbar v0.0.8
+* @triptease/tt-navbar v0.0.10
 */
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
-  for (var i5 = decorators.length - 1, decorator; i5 >= 0; i5--)
-    if (decorator = decorators[i5])
+  for (var i6 = decorators.length - 1, decorator; i6 >= 0; i6--)
+    if (decorator = decorators[i6])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
   if (kind && result) __defProp(target, key, result);
   return result;
@@ -18,44 +18,44 @@ var e = t.ShadowRoot && (void 0 === t.ShadyCSS || t.ShadyCSS.nativeShadow) && "a
 var s = Symbol();
 var o = /* @__PURE__ */ new WeakMap();
 var n = class {
-  constructor(t3, e5, o6) {
-    if (this._$cssResult$ = true, o6 !== s) throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");
-    this.cssText = t3, this.t = e5;
+  constructor(t5, e7, o8) {
+    if (this._$cssResult$ = true, o8 !== s) throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");
+    this.cssText = t5, this.t = e7;
   }
   get styleSheet() {
-    let t3 = this.o;
+    let t5 = this.o;
     const s4 = this.t;
-    if (e && void 0 === t3) {
-      const e5 = void 0 !== s4 && 1 === s4.length;
-      e5 && (t3 = o.get(s4)), void 0 === t3 && ((this.o = t3 = new CSSStyleSheet()).replaceSync(this.cssText), e5 && o.set(s4, t3));
+    if (e && void 0 === t5) {
+      const e7 = void 0 !== s4 && 1 === s4.length;
+      e7 && (t5 = o.get(s4)), void 0 === t5 && ((this.o = t5 = new CSSStyleSheet()).replaceSync(this.cssText), e7 && o.set(s4, t5));
     }
-    return t3;
+    return t5;
   }
   toString() {
     return this.cssText;
   }
 };
-var r = (t3) => new n("string" == typeof t3 ? t3 : t3 + "", void 0, s);
-var i = (t3, ...e5) => {
-  const o6 = 1 === t3.length ? t3[0] : e5.reduce((e6, s4, o7) => e6 + ((t4) => {
-    if (true === t4._$cssResult$) return t4.cssText;
-    if ("number" == typeof t4) return t4;
-    throw Error("Value passed to 'css' function must be a 'css' function result: " + t4 + ". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.");
-  })(s4) + t3[o7 + 1], t3[0]);
-  return new n(o6, t3, s);
+var r = (t5) => new n("string" == typeof t5 ? t5 : t5 + "", void 0, s);
+var i = (t5, ...e7) => {
+  const o8 = 1 === t5.length ? t5[0] : e7.reduce((e8, s4, o9) => e8 + ((t6) => {
+    if (true === t6._$cssResult$) return t6.cssText;
+    if ("number" == typeof t6) return t6;
+    throw Error("Value passed to 'css' function must be a 'css' function result: " + t6 + ". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.");
+  })(s4) + t5[o9 + 1], t5[0]);
+  return new n(o8, t5, s);
 };
-var S = (s4, o6) => {
-  if (e) s4.adoptedStyleSheets = o6.map((t3) => t3 instanceof CSSStyleSheet ? t3 : t3.styleSheet);
-  else for (const e5 of o6) {
-    const o7 = document.createElement("style"), n5 = t.litNonce;
-    void 0 !== n5 && o7.setAttribute("nonce", n5), o7.textContent = e5.cssText, s4.appendChild(o7);
+var S = (s4, o8) => {
+  if (e) s4.adoptedStyleSheets = o8.map((t5) => t5 instanceof CSSStyleSheet ? t5 : t5.styleSheet);
+  else for (const e7 of o8) {
+    const o9 = document.createElement("style"), n5 = t.litNonce;
+    void 0 !== n5 && o9.setAttribute("nonce", n5), o9.textContent = e7.cssText, s4.appendChild(o9);
   }
 };
-var c = e ? (t3) => t3 : (t3) => t3 instanceof CSSStyleSheet ? ((t4) => {
-  let e5 = "";
-  for (const s4 of t4.cssRules) e5 += s4.cssText;
-  return r(e5);
-})(t3) : t3;
+var c = e ? (t5) => t5 : (t5) => t5 instanceof CSSStyleSheet ? ((t6) => {
+  let e7 = "";
+  for (const s4 of t6.cssRules) e7 += s4.cssText;
+  return r(e7);
+})(t5) : t5;
 
 // ../../node_modules/@lit/reactive-element/reactive-element.js
 var { is: i2, defineProperty: e2, getOwnPropertyDescriptor: h, getOwnPropertyNames: r2, getOwnPropertySymbols: o2, getPrototypeOf: n2 } = Object;
@@ -63,167 +63,167 @@ var a = globalThis;
 var c2 = a.trustedTypes;
 var l = c2 ? c2.emptyScript : "";
 var p = a.reactiveElementPolyfillSupport;
-var d = (t3, s4) => t3;
-var u = { toAttribute(t3, s4) {
+var d = (t5, s4) => t5;
+var u = { toAttribute(t5, s4) {
   switch (s4) {
     case Boolean:
-      t3 = t3 ? l : null;
+      t5 = t5 ? l : null;
       break;
     case Object:
     case Array:
-      t3 = null == t3 ? t3 : JSON.stringify(t3);
+      t5 = null == t5 ? t5 : JSON.stringify(t5);
   }
-  return t3;
-}, fromAttribute(t3, s4) {
-  let i5 = t3;
+  return t5;
+}, fromAttribute(t5, s4) {
+  let i6 = t5;
   switch (s4) {
     case Boolean:
-      i5 = null !== t3;
+      i6 = null !== t5;
       break;
     case Number:
-      i5 = null === t3 ? null : Number(t3);
+      i6 = null === t5 ? null : Number(t5);
       break;
     case Object:
     case Array:
       try {
-        i5 = JSON.parse(t3);
-      } catch (t4) {
-        i5 = null;
+        i6 = JSON.parse(t5);
+      } catch (t6) {
+        i6 = null;
       }
   }
-  return i5;
+  return i6;
 } };
-var f = (t3, s4) => !i2(t3, s4);
+var f = (t5, s4) => !i2(t5, s4);
 var b = { attribute: true, type: String, converter: u, reflect: false, useDefault: false, hasChanged: f };
 Symbol.metadata ?? (Symbol.metadata = Symbol("metadata")), a.litPropertyMetadata ?? (a.litPropertyMetadata = /* @__PURE__ */ new WeakMap());
 var y = class extends HTMLElement {
-  static addInitializer(t3) {
-    this._$Ei(), (this.l ?? (this.l = [])).push(t3);
+  static addInitializer(t5) {
+    this._$Ei(), (this.l ?? (this.l = [])).push(t5);
   }
   static get observedAttributes() {
     return this.finalize(), this._$Eh && [...this._$Eh.keys()];
   }
-  static createProperty(t3, s4 = b) {
-    if (s4.state && (s4.attribute = false), this._$Ei(), this.prototype.hasOwnProperty(t3) && ((s4 = Object.create(s4)).wrapped = true), this.elementProperties.set(t3, s4), !s4.noAccessor) {
-      const i5 = Symbol(), h3 = this.getPropertyDescriptor(t3, i5, s4);
-      void 0 !== h3 && e2(this.prototype, t3, h3);
+  static createProperty(t5, s4 = b) {
+    if (s4.state && (s4.attribute = false), this._$Ei(), this.prototype.hasOwnProperty(t5) && ((s4 = Object.create(s4)).wrapped = true), this.elementProperties.set(t5, s4), !s4.noAccessor) {
+      const i6 = Symbol(), h3 = this.getPropertyDescriptor(t5, i6, s4);
+      void 0 !== h3 && e2(this.prototype, t5, h3);
     }
   }
-  static getPropertyDescriptor(t3, s4, i5) {
-    const { get: e5, set: r5 } = h(this.prototype, t3) ?? { get() {
+  static getPropertyDescriptor(t5, s4, i6) {
+    const { get: e7, set: r5 } = h(this.prototype, t5) ?? { get() {
       return this[s4];
-    }, set(t4) {
-      this[s4] = t4;
+    }, set(t6) {
+      this[s4] = t6;
     } };
-    return { get: e5, set(s5) {
-      const h3 = e5?.call(this);
-      r5?.call(this, s5), this.requestUpdate(t3, h3, i5);
+    return { get: e7, set(s5) {
+      const h3 = e7?.call(this);
+      r5?.call(this, s5), this.requestUpdate(t5, h3, i6);
     }, configurable: true, enumerable: true };
   }
-  static getPropertyOptions(t3) {
-    return this.elementProperties.get(t3) ?? b;
+  static getPropertyOptions(t5) {
+    return this.elementProperties.get(t5) ?? b;
   }
   static _$Ei() {
     if (this.hasOwnProperty(d("elementProperties"))) return;
-    const t3 = n2(this);
-    t3.finalize(), void 0 !== t3.l && (this.l = [...t3.l]), this.elementProperties = new Map(t3.elementProperties);
+    const t5 = n2(this);
+    t5.finalize(), void 0 !== t5.l && (this.l = [...t5.l]), this.elementProperties = new Map(t5.elementProperties);
   }
   static finalize() {
     if (this.hasOwnProperty(d("finalized"))) return;
     if (this.finalized = true, this._$Ei(), this.hasOwnProperty(d("properties"))) {
-      const t4 = this.properties, s4 = [...r2(t4), ...o2(t4)];
-      for (const i5 of s4) this.createProperty(i5, t4[i5]);
+      const t6 = this.properties, s4 = [...r2(t6), ...o2(t6)];
+      for (const i6 of s4) this.createProperty(i6, t6[i6]);
     }
-    const t3 = this[Symbol.metadata];
-    if (null !== t3) {
-      const s4 = litPropertyMetadata.get(t3);
-      if (void 0 !== s4) for (const [t4, i5] of s4) this.elementProperties.set(t4, i5);
+    const t5 = this[Symbol.metadata];
+    if (null !== t5) {
+      const s4 = litPropertyMetadata.get(t5);
+      if (void 0 !== s4) for (const [t6, i6] of s4) this.elementProperties.set(t6, i6);
     }
     this._$Eh = /* @__PURE__ */ new Map();
-    for (const [t4, s4] of this.elementProperties) {
-      const i5 = this._$Eu(t4, s4);
-      void 0 !== i5 && this._$Eh.set(i5, t4);
+    for (const [t6, s4] of this.elementProperties) {
+      const i6 = this._$Eu(t6, s4);
+      void 0 !== i6 && this._$Eh.set(i6, t6);
     }
     this.elementStyles = this.finalizeStyles(this.styles);
   }
   static finalizeStyles(s4) {
-    const i5 = [];
+    const i6 = [];
     if (Array.isArray(s4)) {
-      const e5 = new Set(s4.flat(1 / 0).reverse());
-      for (const s5 of e5) i5.unshift(c(s5));
-    } else void 0 !== s4 && i5.push(c(s4));
-    return i5;
+      const e7 = new Set(s4.flat(1 / 0).reverse());
+      for (const s5 of e7) i6.unshift(c(s5));
+    } else void 0 !== s4 && i6.push(c(s4));
+    return i6;
   }
-  static _$Eu(t3, s4) {
-    const i5 = s4.attribute;
-    return false === i5 ? void 0 : "string" == typeof i5 ? i5 : "string" == typeof t3 ? t3.toLowerCase() : void 0;
+  static _$Eu(t5, s4) {
+    const i6 = s4.attribute;
+    return false === i6 ? void 0 : "string" == typeof i6 ? i6 : "string" == typeof t5 ? t5.toLowerCase() : void 0;
   }
   constructor() {
     super(), this._$Ep = void 0, this.isUpdatePending = false, this.hasUpdated = false, this._$Em = null, this._$Ev();
   }
   _$Ev() {
-    this._$ES = new Promise((t3) => this.enableUpdating = t3), this._$AL = /* @__PURE__ */ new Map(), this._$E_(), this.requestUpdate(), this.constructor.l?.forEach((t3) => t3(this));
+    this._$ES = new Promise((t5) => this.enableUpdating = t5), this._$AL = /* @__PURE__ */ new Map(), this._$E_(), this.requestUpdate(), this.constructor.l?.forEach((t5) => t5(this));
   }
-  addController(t3) {
-    (this._$EO ?? (this._$EO = /* @__PURE__ */ new Set())).add(t3), void 0 !== this.renderRoot && this.isConnected && t3.hostConnected?.();
+  addController(t5) {
+    (this._$EO ?? (this._$EO = /* @__PURE__ */ new Set())).add(t5), void 0 !== this.renderRoot && this.isConnected && t5.hostConnected?.();
   }
-  removeController(t3) {
-    this._$EO?.delete(t3);
+  removeController(t5) {
+    this._$EO?.delete(t5);
   }
   _$E_() {
-    const t3 = /* @__PURE__ */ new Map(), s4 = this.constructor.elementProperties;
-    for (const i5 of s4.keys()) this.hasOwnProperty(i5) && (t3.set(i5, this[i5]), delete this[i5]);
-    t3.size > 0 && (this._$Ep = t3);
+    const t5 = /* @__PURE__ */ new Map(), s4 = this.constructor.elementProperties;
+    for (const i6 of s4.keys()) this.hasOwnProperty(i6) && (t5.set(i6, this[i6]), delete this[i6]);
+    t5.size > 0 && (this._$Ep = t5);
   }
   createRenderRoot() {
-    const t3 = this.shadowRoot ?? this.attachShadow(this.constructor.shadowRootOptions);
-    return S(t3, this.constructor.elementStyles), t3;
+    const t5 = this.shadowRoot ?? this.attachShadow(this.constructor.shadowRootOptions);
+    return S(t5, this.constructor.elementStyles), t5;
   }
   connectedCallback() {
-    this.renderRoot ?? (this.renderRoot = this.createRenderRoot()), this.enableUpdating(true), this._$EO?.forEach((t3) => t3.hostConnected?.());
+    this.renderRoot ?? (this.renderRoot = this.createRenderRoot()), this.enableUpdating(true), this._$EO?.forEach((t5) => t5.hostConnected?.());
   }
-  enableUpdating(t3) {
+  enableUpdating(t5) {
   }
   disconnectedCallback() {
-    this._$EO?.forEach((t3) => t3.hostDisconnected?.());
+    this._$EO?.forEach((t5) => t5.hostDisconnected?.());
   }
-  attributeChangedCallback(t3, s4, i5) {
-    this._$AK(t3, i5);
+  attributeChangedCallback(t5, s4, i6) {
+    this._$AK(t5, i6);
   }
-  _$ET(t3, s4) {
-    const i5 = this.constructor.elementProperties.get(t3), e5 = this.constructor._$Eu(t3, i5);
-    if (void 0 !== e5 && true === i5.reflect) {
-      const h3 = (void 0 !== i5.converter?.toAttribute ? i5.converter : u).toAttribute(s4, i5.type);
-      this._$Em = t3, null == h3 ? this.removeAttribute(e5) : this.setAttribute(e5, h3), this._$Em = null;
+  _$ET(t5, s4) {
+    const i6 = this.constructor.elementProperties.get(t5), e7 = this.constructor._$Eu(t5, i6);
+    if (void 0 !== e7 && true === i6.reflect) {
+      const h3 = (void 0 !== i6.converter?.toAttribute ? i6.converter : u).toAttribute(s4, i6.type);
+      this._$Em = t5, null == h3 ? this.removeAttribute(e7) : this.setAttribute(e7, h3), this._$Em = null;
     }
   }
-  _$AK(t3, s4) {
-    const i5 = this.constructor, e5 = i5._$Eh.get(t3);
-    if (void 0 !== e5 && this._$Em !== e5) {
-      const t4 = i5.getPropertyOptions(e5), h3 = "function" == typeof t4.converter ? { fromAttribute: t4.converter } : void 0 !== t4.converter?.fromAttribute ? t4.converter : u;
-      this._$Em = e5, this[e5] = h3.fromAttribute(s4, t4.type) ?? this._$Ej?.get(e5) ?? null, this._$Em = null;
+  _$AK(t5, s4) {
+    const i6 = this.constructor, e7 = i6._$Eh.get(t5);
+    if (void 0 !== e7 && this._$Em !== e7) {
+      const t6 = i6.getPropertyOptions(e7), h3 = "function" == typeof t6.converter ? { fromAttribute: t6.converter } : void 0 !== t6.converter?.fromAttribute ? t6.converter : u;
+      this._$Em = e7, this[e7] = h3.fromAttribute(s4, t6.type) ?? this._$Ej?.get(e7) ?? null, this._$Em = null;
     }
   }
-  requestUpdate(t3, s4, i5) {
-    if (void 0 !== t3) {
-      const e5 = this.constructor, h3 = this[t3];
-      if (i5 ?? (i5 = e5.getPropertyOptions(t3)), !((i5.hasChanged ?? f)(h3, s4) || i5.useDefault && i5.reflect && h3 === this._$Ej?.get(t3) && !this.hasAttribute(e5._$Eu(t3, i5)))) return;
-      this.C(t3, s4, i5);
+  requestUpdate(t5, s4, i6) {
+    if (void 0 !== t5) {
+      const e7 = this.constructor, h3 = this[t5];
+      if (i6 ?? (i6 = e7.getPropertyOptions(t5)), !((i6.hasChanged ?? f)(h3, s4) || i6.useDefault && i6.reflect && h3 === this._$Ej?.get(t5) && !this.hasAttribute(e7._$Eu(t5, i6)))) return;
+      this.C(t5, s4, i6);
     }
     false === this.isUpdatePending && (this._$ES = this._$EP());
   }
-  C(t3, s4, { useDefault: i5, reflect: e5, wrapped: h3 }, r5) {
-    i5 && !(this._$Ej ?? (this._$Ej = /* @__PURE__ */ new Map())).has(t3) && (this._$Ej.set(t3, r5 ?? s4 ?? this[t3]), true !== h3 || void 0 !== r5) || (this._$AL.has(t3) || (this.hasUpdated || i5 || (s4 = void 0), this._$AL.set(t3, s4)), true === e5 && this._$Em !== t3 && (this._$Eq ?? (this._$Eq = /* @__PURE__ */ new Set())).add(t3));
+  C(t5, s4, { useDefault: i6, reflect: e7, wrapped: h3 }, r5) {
+    i6 && !(this._$Ej ?? (this._$Ej = /* @__PURE__ */ new Map())).has(t5) && (this._$Ej.set(t5, r5 ?? s4 ?? this[t5]), true !== h3 || void 0 !== r5) || (this._$AL.has(t5) || (this.hasUpdated || i6 || (s4 = void 0), this._$AL.set(t5, s4)), true === e7 && this._$Em !== t5 && (this._$Eq ?? (this._$Eq = /* @__PURE__ */ new Set())).add(t5));
   }
   async _$EP() {
     this.isUpdatePending = true;
     try {
       await this._$ES;
-    } catch (t4) {
-      Promise.reject(t4);
+    } catch (t6) {
+      Promise.reject(t6);
     }
-    const t3 = this.scheduleUpdate();
-    return null != t3 && await t3, !this.isUpdatePending;
+    const t5 = this.scheduleUpdate();
+    return null != t5 && await t5, !this.isUpdatePending;
   }
   scheduleUpdate() {
     return this.performUpdate();
@@ -232,28 +232,28 @@ var y = class extends HTMLElement {
     if (!this.isUpdatePending) return;
     if (!this.hasUpdated) {
       if (this.renderRoot ?? (this.renderRoot = this.createRenderRoot()), this._$Ep) {
-        for (const [t5, s5] of this._$Ep) this[t5] = s5;
+        for (const [t7, s5] of this._$Ep) this[t7] = s5;
         this._$Ep = void 0;
       }
-      const t4 = this.constructor.elementProperties;
-      if (t4.size > 0) for (const [s5, i5] of t4) {
-        const { wrapped: t5 } = i5, e5 = this[s5];
-        true !== t5 || this._$AL.has(s5) || void 0 === e5 || this.C(s5, void 0, i5, e5);
+      const t6 = this.constructor.elementProperties;
+      if (t6.size > 0) for (const [s5, i6] of t6) {
+        const { wrapped: t7 } = i6, e7 = this[s5];
+        true !== t7 || this._$AL.has(s5) || void 0 === e7 || this.C(s5, void 0, i6, e7);
       }
     }
-    let t3 = false;
+    let t5 = false;
     const s4 = this._$AL;
     try {
-      t3 = this.shouldUpdate(s4), t3 ? (this.willUpdate(s4), this._$EO?.forEach((t4) => t4.hostUpdate?.()), this.update(s4)) : this._$EM();
+      t5 = this.shouldUpdate(s4), t5 ? (this.willUpdate(s4), this._$EO?.forEach((t6) => t6.hostUpdate?.()), this.update(s4)) : this._$EM();
     } catch (s5) {
-      throw t3 = false, this._$EM(), s5;
+      throw t5 = false, this._$EM(), s5;
     }
-    t3 && this._$AE(s4);
+    t5 && this._$AE(s4);
   }
-  willUpdate(t3) {
+  willUpdate(t5) {
   }
-  _$AE(t3) {
-    this._$EO?.forEach((t4) => t4.hostUpdated?.()), this.hasUpdated || (this.hasUpdated = true, this.firstUpdated(t3)), this.updated(t3);
+  _$AE(t5) {
+    this._$EO?.forEach((t6) => t6.hostUpdated?.()), this.hasUpdated || (this.hasUpdated = true, this.firstUpdated(t5)), this.updated(t5);
   }
   _$EM() {
     this._$AL = /* @__PURE__ */ new Map(), this.isUpdatePending = false;
@@ -264,15 +264,15 @@ var y = class extends HTMLElement {
   getUpdateComplete() {
     return this._$ES;
   }
-  shouldUpdate(t3) {
+  shouldUpdate(t5) {
     return true;
   }
-  update(t3) {
-    this._$Eq && (this._$Eq = this._$Eq.forEach((t4) => this._$ET(t4, this[t4]))), this._$EM();
+  update(t5) {
+    this._$Eq && (this._$Eq = this._$Eq.forEach((t6) => this._$ET(t6, this[t6]))), this._$EM();
   }
-  updated(t3) {
+  updated(t5) {
   }
-  firstUpdated(t3) {
+  firstUpdated(t5) {
   }
 };
 y.elementStyles = [], y.shadowRootOptions = { mode: "open" }, y[d("elementProperties")] = /* @__PURE__ */ new Map(), y[d("finalized")] = /* @__PURE__ */ new Map(), p?.({ ReactiveElement: y }), (a.reactiveElementVersions ?? (a.reactiveElementVersions = [])).push("2.1.0");
@@ -280,16 +280,16 @@ y.elementStyles = [], y.shadowRootOptions = { mode: "open" }, y[d("elementProper
 // ../../node_modules/lit-html/lit-html.js
 var t2 = globalThis;
 var i3 = t2.trustedTypes;
-var s2 = i3 ? i3.createPolicy("lit-html", { createHTML: (t3) => t3 }) : void 0;
+var s2 = i3 ? i3.createPolicy("lit-html", { createHTML: (t5) => t5 }) : void 0;
 var e3 = "$lit$";
 var h2 = `lit$${Math.random().toFixed(9).slice(2)}$`;
 var o3 = "?" + h2;
 var n3 = `<${o3}>`;
 var r3 = document;
 var l2 = () => r3.createComment("");
-var c3 = (t3) => null === t3 || "object" != typeof t3 && "function" != typeof t3;
+var c3 = (t5) => null === t5 || "object" != typeof t5 && "function" != typeof t5;
 var a2 = Array.isArray;
-var u2 = (t3) => a2(t3) || "function" == typeof t3?.[Symbol.iterator];
+var u2 = (t5) => a2(t5) || "function" == typeof t5?.[Symbol.iterator];
 var d2 = "[ 	\n\f\r]";
 var f2 = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g;
 var v = /-->/g;
@@ -299,7 +299,7 @@ var m = RegExp(`>|${d2}(?:([^\\s"'>=/]+)(${d2}*=${d2}*(?:[^
 var p2 = /'/g;
 var g = /"/g;
 var $ = /^(?:script|style|textarea|title)$/i;
-var y2 = (t3) => (i5, ...s4) => ({ _$litType$: t3, strings: i5, values: s4 });
+var y2 = (t5) => (i6, ...s4) => ({ _$litType$: t5, strings: i6, values: s4 });
 var x = y2(1);
 var b2 = y2(2);
 var w = y2(3);
@@ -307,68 +307,68 @@ var T = Symbol.for("lit-noChange");
 var E = Symbol.for("lit-nothing");
 var A = /* @__PURE__ */ new WeakMap();
 var C = r3.createTreeWalker(r3, 129);
-function P(t3, i5) {
-  if (!a2(t3) || !t3.hasOwnProperty("raw")) throw Error("invalid template strings array");
-  return void 0 !== s2 ? s2.createHTML(i5) : i5;
+function P(t5, i6) {
+  if (!a2(t5) || !t5.hasOwnProperty("raw")) throw Error("invalid template strings array");
+  return void 0 !== s2 ? s2.createHTML(i6) : i6;
 }
-var V = (t3, i5) => {
-  const s4 = t3.length - 1, o6 = [];
-  let r5, l3 = 2 === i5 ? "<svg>" : 3 === i5 ? "<math>" : "", c4 = f2;
-  for (let i6 = 0; i6 < s4; i6++) {
-    const s5 = t3[i6];
+var V = (t5, i6) => {
+  const s4 = t5.length - 1, o8 = [];
+  let r5, l3 = 2 === i6 ? "<svg>" : 3 === i6 ? "<math>" : "", c4 = f2;
+  for (let i7 = 0; i7 < s4; i7++) {
+    const s5 = t5[i7];
     let a3, u3, d3 = -1, y3 = 0;
     for (; y3 < s5.length && (c4.lastIndex = y3, u3 = c4.exec(s5), null !== u3); ) y3 = c4.lastIndex, c4 === f2 ? "!--" === u3[1] ? c4 = v : void 0 !== u3[1] ? c4 = _ : void 0 !== u3[2] ? ($.test(u3[2]) && (r5 = RegExp("</" + u3[2], "g")), c4 = m) : void 0 !== u3[3] && (c4 = m) : c4 === m ? ">" === u3[0] ? (c4 = r5 ?? f2, d3 = -1) : void 0 === u3[1] ? d3 = -2 : (d3 = c4.lastIndex - u3[2].length, a3 = u3[1], c4 = void 0 === u3[3] ? m : '"' === u3[3] ? g : p2) : c4 === g || c4 === p2 ? c4 = m : c4 === v || c4 === _ ? c4 = f2 : (c4 = m, r5 = void 0);
-    const x2 = c4 === m && t3[i6 + 1].startsWith("/>") ? " " : "";
-    l3 += c4 === f2 ? s5 + n3 : d3 >= 0 ? (o6.push(a3), s5.slice(0, d3) + e3 + s5.slice(d3) + h2 + x2) : s5 + h2 + (-2 === d3 ? i6 : x2);
+    const x2 = c4 === m && t5[i7 + 1].startsWith("/>") ? " " : "";
+    l3 += c4 === f2 ? s5 + n3 : d3 >= 0 ? (o8.push(a3), s5.slice(0, d3) + e3 + s5.slice(d3) + h2 + x2) : s5 + h2 + (-2 === d3 ? i7 : x2);
   }
-  return [P(t3, l3 + (t3[s4] || "<?>") + (2 === i5 ? "</svg>" : 3 === i5 ? "</math>" : "")), o6];
+  return [P(t5, l3 + (t5[s4] || "<?>") + (2 === i6 ? "</svg>" : 3 === i6 ? "</math>" : "")), o8];
 };
 var N = class _N {
-  constructor({ strings: t3, _$litType$: s4 }, n5) {
+  constructor({ strings: t5, _$litType$: s4 }, n5) {
     let r5;
     this.parts = [];
     let c4 = 0, a3 = 0;
-    const u3 = t3.length - 1, d3 = this.parts, [f3, v2] = V(t3, s4);
+    const u3 = t5.length - 1, d3 = this.parts, [f3, v2] = V(t5, s4);
     if (this.el = _N.createElement(f3, n5), C.currentNode = this.el.content, 2 === s4 || 3 === s4) {
-      const t4 = this.el.content.firstChild;
-      t4.replaceWith(...t4.childNodes);
+      const t6 = this.el.content.firstChild;
+      t6.replaceWith(...t6.childNodes);
     }
     for (; null !== (r5 = C.nextNode()) && d3.length < u3; ) {
       if (1 === r5.nodeType) {
-        if (r5.hasAttributes()) for (const t4 of r5.getAttributeNames()) if (t4.endsWith(e3)) {
-          const i5 = v2[a3++], s5 = r5.getAttribute(t4).split(h2), e5 = /([.?@])?(.*)/.exec(i5);
-          d3.push({ type: 1, index: c4, name: e5[2], strings: s5, ctor: "." === e5[1] ? H : "?" === e5[1] ? I : "@" === e5[1] ? L : k }), r5.removeAttribute(t4);
-        } else t4.startsWith(h2) && (d3.push({ type: 6, index: c4 }), r5.removeAttribute(t4));
+        if (r5.hasAttributes()) for (const t6 of r5.getAttributeNames()) if (t6.endsWith(e3)) {
+          const i6 = v2[a3++], s5 = r5.getAttribute(t6).split(h2), e7 = /([.?@])?(.*)/.exec(i6);
+          d3.push({ type: 1, index: c4, name: e7[2], strings: s5, ctor: "." === e7[1] ? H : "?" === e7[1] ? I : "@" === e7[1] ? L : k }), r5.removeAttribute(t6);
+        } else t6.startsWith(h2) && (d3.push({ type: 6, index: c4 }), r5.removeAttribute(t6));
         if ($.test(r5.tagName)) {
-          const t4 = r5.textContent.split(h2), s5 = t4.length - 1;
+          const t6 = r5.textContent.split(h2), s5 = t6.length - 1;
           if (s5 > 0) {
             r5.textContent = i3 ? i3.emptyScript : "";
-            for (let i5 = 0; i5 < s5; i5++) r5.append(t4[i5], l2()), C.nextNode(), d3.push({ type: 2, index: ++c4 });
-            r5.append(t4[s5], l2());
+            for (let i6 = 0; i6 < s5; i6++) r5.append(t6[i6], l2()), C.nextNode(), d3.push({ type: 2, index: ++c4 });
+            r5.append(t6[s5], l2());
           }
         }
       } else if (8 === r5.nodeType) if (r5.data === o3) d3.push({ type: 2, index: c4 });
       else {
-        let t4 = -1;
-        for (; -1 !== (t4 = r5.data.indexOf(h2, t4 + 1)); ) d3.push({ type: 7, index: c4 }), t4 += h2.length - 1;
+        let t6 = -1;
+        for (; -1 !== (t6 = r5.data.indexOf(h2, t6 + 1)); ) d3.push({ type: 7, index: c4 }), t6 += h2.length - 1;
       }
       c4++;
     }
   }
-  static createElement(t3, i5) {
+  static createElement(t5, i6) {
     const s4 = r3.createElement("template");
-    return s4.innerHTML = t3, s4;
+    return s4.innerHTML = t5, s4;
   }
 };
-function S2(t3, i5, s4 = t3, e5) {
-  if (i5 === T) return i5;
-  let h3 = void 0 !== e5 ? s4._$Co?.[e5] : s4._$Cl;
-  const o6 = c3(i5) ? void 0 : i5._$litDirective$;
-  return h3?.constructor !== o6 && (h3?._$AO?.(false), void 0 === o6 ? h3 = void 0 : (h3 = new o6(t3), h3._$AT(t3, s4, e5)), void 0 !== e5 ? (s4._$Co ?? (s4._$Co = []))[e5] = h3 : s4._$Cl = h3), void 0 !== h3 && (i5 = S2(t3, h3._$AS(t3, i5.values), h3, e5)), i5;
+function S2(t5, i6, s4 = t5, e7) {
+  if (i6 === T) return i6;
+  let h3 = void 0 !== e7 ? s4._$Co?.[e7] : s4._$Cl;
+  const o8 = c3(i6) ? void 0 : i6._$litDirective$;
+  return h3?.constructor !== o8 && (h3?._$AO?.(false), void 0 === o8 ? h3 = void 0 : (h3 = new o8(t5), h3._$AT(t5, s4, e7)), void 0 !== e7 ? (s4._$Co ?? (s4._$Co = []))[e7] = h3 : s4._$Cl = h3), void 0 !== h3 && (i6 = S2(t5, h3._$AS(t5, i6.values), h3, e7)), i6;
 }
 var M = class {
-  constructor(t3, i5) {
-    this._$AV = [], this._$AN = void 0, this._$AD = t3, this._$AM = i5;
+  constructor(t5, i6) {
+    this._$AV = [], this._$AN = void 0, this._$AD = t5, this._$AM = i6;
   }
   get parentNode() {
     return this._$AM.parentNode;
@@ -376,35 +376,35 @@ var M = class {
   get _$AU() {
     return this._$AM._$AU;
   }
-  u(t3) {
-    const { el: { content: i5 }, parts: s4 } = this._$AD, e5 = (t3?.creationScope ?? r3).importNode(i5, true);
-    C.currentNode = e5;
-    let h3 = C.nextNode(), o6 = 0, n5 = 0, l3 = s4[0];
+  u(t5) {
+    const { el: { content: i6 }, parts: s4 } = this._$AD, e7 = (t5?.creationScope ?? r3).importNode(i6, true);
+    C.currentNode = e7;
+    let h3 = C.nextNode(), o8 = 0, n5 = 0, l3 = s4[0];
     for (; void 0 !== l3; ) {
-      if (o6 === l3.index) {
-        let i6;
-        2 === l3.type ? i6 = new R(h3, h3.nextSibling, this, t3) : 1 === l3.type ? i6 = new l3.ctor(h3, l3.name, l3.strings, this, t3) : 6 === l3.type && (i6 = new z(h3, this, t3)), this._$AV.push(i6), l3 = s4[++n5];
+      if (o8 === l3.index) {
+        let i7;
+        2 === l3.type ? i7 = new R(h3, h3.nextSibling, this, t5) : 1 === l3.type ? i7 = new l3.ctor(h3, l3.name, l3.strings, this, t5) : 6 === l3.type && (i7 = new z(h3, this, t5)), this._$AV.push(i7), l3 = s4[++n5];
       }
-      o6 !== l3?.index && (h3 = C.nextNode(), o6++);
+      o8 !== l3?.index && (h3 = C.nextNode(), o8++);
     }
-    return C.currentNode = r3, e5;
+    return C.currentNode = r3, e7;
   }
-  p(t3) {
-    let i5 = 0;
-    for (const s4 of this._$AV) void 0 !== s4 && (void 0 !== s4.strings ? (s4._$AI(t3, s4, i5), i5 += s4.strings.length - 2) : s4._$AI(t3[i5])), i5++;
+  p(t5) {
+    let i6 = 0;
+    for (const s4 of this._$AV) void 0 !== s4 && (void 0 !== s4.strings ? (s4._$AI(t5, s4, i6), i6 += s4.strings.length - 2) : s4._$AI(t5[i6])), i6++;
   }
 };
 var R = class _R {
   get _$AU() {
     return this._$AM?._$AU ?? this._$Cv;
   }
-  constructor(t3, i5, s4, e5) {
-    this.type = 2, this._$AH = E, this._$AN = void 0, this._$AA = t3, this._$AB = i5, this._$AM = s4, this.options = e5, this._$Cv = e5?.isConnected ?? true;
+  constructor(t5, i6, s4, e7) {
+    this.type = 2, this._$AH = E, this._$AN = void 0, this._$AA = t5, this._$AB = i6, this._$AM = s4, this.options = e7, this._$Cv = e7?.isConnected ?? true;
   }
   get parentNode() {
-    let t3 = this._$AA.parentNode;
-    const i5 = this._$AM;
-    return void 0 !== i5 && 11 === t3?.nodeType && (t3 = i5.parentNode), t3;
+    let t5 = this._$AA.parentNode;
+    const i6 = this._$AM;
+    return void 0 !== i6 && 11 === t5?.nodeType && (t5 = i6.parentNode), t5;
   }
   get startNode() {
     return this._$AA;
@@ -412,45 +412,45 @@ var R = class _R {
   get endNode() {
     return this._$AB;
   }
-  _$AI(t3, i5 = this) {
-    t3 = S2(this, t3, i5), c3(t3) ? t3 === E || null == t3 || "" === t3 ? (this._$AH !== E && this._$AR(), this._$AH = E) : t3 !== this._$AH && t3 !== T && this._(t3) : void 0 !== t3._$litType$ ? this.$(t3) : void 0 !== t3.nodeType ? this.T(t3) : u2(t3) ? this.k(t3) : this._(t3);
+  _$AI(t5, i6 = this) {
+    t5 = S2(this, t5, i6), c3(t5) ? t5 === E || null == t5 || "" === t5 ? (this._$AH !== E && this._$AR(), this._$AH = E) : t5 !== this._$AH && t5 !== T && this._(t5) : void 0 !== t5._$litType$ ? this.$(t5) : void 0 !== t5.nodeType ? this.T(t5) : u2(t5) ? this.k(t5) : this._(t5);
   }
-  O(t3) {
-    return this._$AA.parentNode.insertBefore(t3, this._$AB);
+  O(t5) {
+    return this._$AA.parentNode.insertBefore(t5, this._$AB);
   }
-  T(t3) {
-    this._$AH !== t3 && (this._$AR(), this._$AH = this.O(t3));
+  T(t5) {
+    this._$AH !== t5 && (this._$AR(), this._$AH = this.O(t5));
   }
-  _(t3) {
-    this._$AH !== E && c3(this._$AH) ? this._$AA.nextSibling.data = t3 : this.T(r3.createTextNode(t3)), this._$AH = t3;
+  _(t5) {
+    this._$AH !== E && c3(this._$AH) ? this._$AA.nextSibling.data = t5 : this.T(r3.createTextNode(t5)), this._$AH = t5;
   }
-  $(t3) {
-    const { values: i5, _$litType$: s4 } = t3, e5 = "number" == typeof s4 ? this._$AC(t3) : (void 0 === s4.el && (s4.el = N.createElement(P(s4.h, s4.h[0]), this.options)), s4);
-    if (this._$AH?._$AD === e5) this._$AH.p(i5);
+  $(t5) {
+    const { values: i6, _$litType$: s4 } = t5, e7 = "number" == typeof s4 ? this._$AC(t5) : (void 0 === s4.el && (s4.el = N.createElement(P(s4.h, s4.h[0]), this.options)), s4);
+    if (this._$AH?._$AD === e7) this._$AH.p(i6);
     else {
-      const t4 = new M(e5, this), s5 = t4.u(this.options);
-      t4.p(i5), this.T(s5), this._$AH = t4;
+      const t6 = new M(e7, this), s5 = t6.u(this.options);
+      t6.p(i6), this.T(s5), this._$AH = t6;
     }
   }
-  _$AC(t3) {
-    let i5 = A.get(t3.strings);
-    return void 0 === i5 && A.set(t3.strings, i5 = new N(t3)), i5;
+  _$AC(t5) {
+    let i6 = A.get(t5.strings);
+    return void 0 === i6 && A.set(t5.strings, i6 = new N(t5)), i6;
   }
-  k(t3) {
+  k(t5) {
     a2(this._$AH) || (this._$AH = [], this._$AR());
-    const i5 = this._$AH;
-    let s4, e5 = 0;
-    for (const h3 of t3) e5 === i5.length ? i5.push(s4 = new _R(this.O(l2()), this.O(l2()), this, this.options)) : s4 = i5[e5], s4._$AI(h3), e5++;
-    e5 < i5.length && (this._$AR(s4 && s4._$AB.nextSibling, e5), i5.length = e5);
-  }
-  _$AR(t3 = this._$AA.nextSibling, i5) {
-    for (this._$AP?.(false, true, i5); t3 && t3 !== this._$AB; ) {
-      const i6 = t3.nextSibling;
-      t3.remove(), t3 = i6;
+    const i6 = this._$AH;
+    let s4, e7 = 0;
+    for (const h3 of t5) e7 === i6.length ? i6.push(s4 = new _R(this.O(l2()), this.O(l2()), this, this.options)) : s4 = i6[e7], s4._$AI(h3), e7++;
+    e7 < i6.length && (this._$AR(s4 && s4._$AB.nextSibling, e7), i6.length = e7);
+  }
+  _$AR(t5 = this._$AA.nextSibling, i6) {
+    for (this._$AP?.(false, true, i6); t5 && t5 !== this._$AB; ) {
+      const i7 = t5.nextSibling;
+      t5.remove(), t5 = i7;
     }
   }
-  setConnected(t3) {
-    void 0 === this._$AM && (this._$Cv = t3, this._$AP?.(t3));
+  setConnected(t5) {
+    void 0 === this._$AM && (this._$Cv = t5, this._$AP?.(t5));
   }
 };
 var k = class {
@@ -460,74 +460,74 @@ var k = class {
   get _$AU() {
     return this._$AM._$AU;
   }
-  constructor(t3, i5, s4, e5, h3) {
-    this.type = 1, this._$AH = E, this._$AN = void 0, this.element = t3, this.name = i5, this._$AM = e5, this.options = h3, s4.length > 2 || "" !== s4[0] || "" !== s4[1] ? (this._$AH = Array(s4.length - 1).fill(new String()), this.strings = s4) : this._$AH = E;
+  constructor(t5, i6, s4, e7, h3) {
+    this.type = 1, this._$AH = E, this._$AN = void 0, this.element = t5, this.name = i6, this._$AM = e7, this.options = h3, s4.length > 2 || "" !== s4[0] || "" !== s4[1] ? (this._$AH = Array(s4.length - 1).fill(new String()), this.strings = s4) : this._$AH = E;
   }
-  _$AI(t3, i5 = this, s4, e5) {
+  _$AI(t5, i6 = this, s4, e7) {
     const h3 = this.strings;
-    let o6 = false;
-    if (void 0 === h3) t3 = S2(this, t3, i5, 0), o6 = !c3(t3) || t3 !== this._$AH && t3 !== T, o6 && (this._$AH = t3);
+    let o8 = false;
+    if (void 0 === h3) t5 = S2(this, t5, i6, 0), o8 = !c3(t5) || t5 !== this._$AH && t5 !== T, o8 && (this._$AH = t5);
     else {
-      const e6 = t3;
+      const e8 = t5;
       let n5, r5;
-      for (t3 = h3[0], n5 = 0; n5 < h3.length - 1; n5++) r5 = S2(this, e6[s4 + n5], i5, n5), r5 === T && (r5 = this._$AH[n5]), o6 || (o6 = !c3(r5) || r5 !== this._$AH[n5]), r5 === E ? t3 = E : t3 !== E && (t3 += (r5 ?? "") + h3[n5 + 1]), this._$AH[n5] = r5;
+      for (t5 = h3[0], n5 = 0; n5 < h3.length - 1; n5++) r5 = S2(this, e8[s4 + n5], i6, n5), r5 === T && (r5 = this._$AH[n5]), o8 || (o8 = !c3(r5) || r5 !== this._$AH[n5]), r5 === E ? t5 = E : t5 !== E && (t5 += (r5 ?? "") + h3[n5 + 1]), this._$AH[n5] = r5;
     }
-    o6 && !e5 && this.j(t3);
+    o8 && !e7 && this.j(t5);
   }
-  j(t3) {
-    t3 === E ? this.element.removeAttribute(this.name) : this.element.setAttribute(this.name, t3 ?? "");
+  j(t5) {
+    t5 === E ? this.element.removeAttribute(this.name) : this.element.setAttribute(this.name, t5 ?? "");
   }
 };
 var H = class extends k {
   constructor() {
     super(...arguments), this.type = 3;
   }
-  j(t3) {
-    this.element[this.name] = t3 === E ? void 0 : t3;
+  j(t5) {
+    this.element[this.name] = t5 === E ? void 0 : t5;
   }
 };
 var I = class extends k {
   constructor() {
     super(...arguments), this.type = 4;
   }
-  j(t3) {
-    this.element.toggleAttribute(this.name, !!t3 && t3 !== E);
+  j(t5) {
+    this.element.toggleAttribute(this.name, !!t5 && t5 !== E);
   }
 };
 var L = class extends k {
-  constructor(t3, i5, s4, e5, h3) {
-    super(t3, i5, s4, e5, h3), this.type = 5;
+  constructor(t5, i6, s4, e7, h3) {
+    super(t5, i6, s4, e7, h3), this.type = 5;
   }
-  _$AI(t3, i5 = this) {
-    if ((t3 = S2(this, t3, i5, 0) ?? E) === T) return;
-    const s4 = this._$AH, e5 = t3 === E && s4 !== E || t3.capture !== s4.capture || t3.once !== s4.once || t3.passive !== s4.passive, h3 = t3 !== E && (s4 === E || e5);
-    e5 && this.element.removeEventListener(this.name, this, s4), h3 && this.element.addEventListener(this.name, this, t3), this._$AH = t3;
+  _$AI(t5, i6 = this) {
+    if ((t5 = S2(this, t5, i6, 0) ?? E) === T) return;
+    const s4 = this._$AH, e7 = t5 === E && s4 !== E || t5.capture !== s4.capture || t5.once !== s4.once || t5.passive !== s4.passive, h3 = t5 !== E && (s4 === E || e7);
+    e7 && this.element.removeEventListener(this.name, this, s4), h3 && this.element.addEventListener(this.name, this, t5), this._$AH = t5;
   }
-  handleEvent(t3) {
-    "function" == typeof this._$AH ? this._$AH.call(this.options?.host ?? this.element, t3) : this._$AH.handleEvent(t3);
+  handleEvent(t5) {
+    "function" == typeof this._$AH ? this._$AH.call(this.options?.host ?? this.element, t5) : this._$AH.handleEvent(t5);
   }
 };
 var z = class {
-  constructor(t3, i5, s4) {
-    this.element = t3, this.type = 6, this._$AN = void 0, this._$AM = i5, this.options = s4;
+  constructor(t5, i6, s4) {
+    this.element = t5, this.type = 6, this._$AN = void 0, this._$AM = i6, this.options = s4;
   }
   get _$AU() {
     return this._$AM._$AU;
   }
-  _$AI(t3) {
-    S2(this, t3);
+  _$AI(t5) {
+    S2(this, t5);
   }
 };
 var j = t2.litHtmlPolyfillSupport;
 j?.(N, R), (t2.litHtmlVersions ?? (t2.litHtmlVersions = [])).push("3.3.0");
-var B = (t3, i5, s4) => {
-  const e5 = s4?.renderBefore ?? i5;
-  let h3 = e5._$litPart$;
+var B = (t5, i6, s4) => {
+  const e7 = s4?.renderBefore ?? i6;
+  let h3 = e7._$litPart$;
   if (void 0 === h3) {
-    const t4 = s4?.renderBefore ?? null;
-    e5._$litPart$ = h3 = new R(i5.insertBefore(l2(), t4), t4, void 0, s4 ?? {});
+    const t6 = s4?.renderBefore ?? null;
+    e7._$litPart$ = h3 = new R(i6.insertBefore(l2(), t6), t6, void 0, s4 ?? {});
   }
-  return h3._$AI(t3), h3;
+  return h3._$AI(t5), h3;
 };
 
 // ../../node_modules/lit-element/lit-element.js
@@ -538,12 +538,12 @@ var i4 = class extends y {
   }
   createRenderRoot() {
     var _a;
-    const t3 = super.createRenderRoot();
-    return (_a = this.renderOptions).renderBefore ?? (_a.renderBefore = t3.firstChild), t3;
+    const t5 = super.createRenderRoot();
+    return (_a = this.renderOptions).renderBefore ?? (_a.renderBefore = t5.firstChild), t5;
   }
-  update(t3) {
+  update(t5) {
     const r5 = this.render();
-    this.hasUpdated || (this.renderOptions.isConnected = this.isConnected), super.update(t3), this._$Do = B(r5, this.renderRoot, this.renderOptions);
+    this.hasUpdated || (this.renderOptions.isConnected = this.isConnected), super.update(t5), this._$Do = B(r5, this.renderRoot, this.renderOptions);
   }
   connectedCallback() {
     super.connectedCallback(), this._$Do?.setConnected(true);
@@ -562,34 +562,123 @@ o4?.({ LitElement: i4 });
 
 // ../../node_modules/@lit/reactive-element/decorators/property.js
 var o5 = { attribute: true, type: String, converter: u, reflect: false, hasChanged: f };
-var r4 = (t3 = o5, e5, r5) => {
-  const { kind: n5, metadata: i5 } = r5;
-  let s4 = globalThis.litPropertyMetadata.get(i5);
-  if (void 0 === s4 && globalThis.litPropertyMetadata.set(i5, s4 = /* @__PURE__ */ new Map()), "setter" === n5 && ((t3 = Object.create(t3)).wrapped = true), s4.set(r5.name, t3), "accessor" === n5) {
-    const { name: o6 } = r5;
+var r4 = (t5 = o5, e7, r5) => {
+  const { kind: n5, metadata: i6 } = r5;
+  let s4 = globalThis.litPropertyMetadata.get(i6);
+  if (void 0 === s4 && globalThis.litPropertyMetadata.set(i6, s4 = /* @__PURE__ */ new Map()), "setter" === n5 && ((t5 = Object.create(t5)).wrapped = true), s4.set(r5.name, t5), "accessor" === n5) {
+    const { name: o8 } = r5;
     return { set(r6) {
-      const n6 = e5.get.call(this);
-      e5.set.call(this, r6), this.requestUpdate(o6, n6, t3);
-    }, init(e6) {
-      return void 0 !== e6 && this.C(o6, void 0, t3, e6), e6;
+      const n6 = e7.get.call(this);
+      e7.set.call(this, r6), this.requestUpdate(o8, n6, t5);
+    }, init(e8) {
+      return void 0 !== e8 && this.C(o8, void 0, t5, e8), e8;
     } };
   }
   if ("setter" === n5) {
-    const { name: o6 } = r5;
+    const { name: o8 } = r5;
     return function(r6) {
-      const n6 = this[o6];
-      e5.call(this, r6), this.requestUpdate(o6, n6, t3);
+      const n6 = this[o8];
+      e7.call(this, r6), this.requestUpdate(o8, n6, t5);
     };
   }
   throw Error("Unsupported decorator location: " + n5);
 };
-function n4(t3) {
-  return (e5, o6) => "object" == typeof o6 ? r4(t3, e5, o6) : ((t4, e6, o7) => {
-    const r5 = e6.hasOwnProperty(o7);
-    return e6.constructor.createProperty(o7, t4), r5 ? Object.getOwnPropertyDescriptor(e6, o7) : void 0;
-  })(t3, e5, o6);
+function n4(t5) {
+  return (e7, o8) => "object" == typeof o8 ? r4(t5, e7, o8) : ((t6, e8, o9) => {
+    const r5 = e8.hasOwnProperty(o9);
+    return e8.constructor.createProperty(o9, t6), r5 ? Object.getOwnPropertyDescriptor(e8, o9) : void 0;
+  })(t5, e7, o8);
 }
 
+// ../../node_modules/lit-html/directive.js
+var t3 = { ATTRIBUTE: 1, CHILD: 2, PROPERTY: 3, BOOLEAN_ATTRIBUTE: 4, EVENT: 5, ELEMENT: 6 };
+var e5 = (t5) => (...e7) => ({ _$litDirective$: t5, values: e7 });
+var i5 = class {
+  constructor(t5) {
+  }
+  get _$AU() {
+    return this._$AM._$AU;
+  }
+  _$AT(t5, e7, i6) {
+    this._$Ct = t5, this._$AM = e7, this._$Ci = i6;
+  }
+  _$AS(t5, e7) {
+    return this.update(t5, e7);
+  }
+  update(t5, e7) {
+    return this.render(...e7);
+  }
+};
+
+// ../../node_modules/lit-html/directives/unsafe-html.js
+var e6 = class extends i5 {
+  constructor(i6) {
+    if (super(i6), this.it = E, i6.type !== t3.CHILD) throw Error(this.constructor.directiveName + "() can only be used in child bindings");
+  }
+  render(r5) {
+    if (r5 === E || null == r5) return this._t = void 0, this.it = r5;
+    if (r5 === T) return r5;
+    if ("string" != typeof r5) throw Error(this.constructor.directiveName + "() called with a non-string value");
+    if (r5 === this.it) return this._t;
+    this.it = r5;
+    const s4 = [r5];
+    return s4.raw = s4, this._t = { _$litType$: this.constructor.resultType, strings: s4, values: [] };
+  }
+};
+e6.directiveName = "unsafeHTML", e6.resultType = 1;
+var o6 = e5(e6);
+
+// ../../node_modules/lit-html/directives/unsafe-svg.js
+var t4 = class extends e6 {
+};
+t4.directiveName = "unsafeSVG", t4.resultType = 2;
+var o7 = e5(t4);
+
+// node_modules/@triptease/icons/dist/src/icons/chevron-down.js
+var chevronDown = `
+<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" class="bi bi-chevron-down chevron-down"
+       viewBox="0 0 16 16" role="presentation">
+    <path fill-rule="evenodd"
+          d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"
+          stroke="currentColor"/>
+  </svg>`;
+
+// node_modules/@triptease/icons/dist/src/icons/campaigns.js
+var campaigns = `<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13.75 11C13.75 9.47056 14.1646 8.11984 14.7956 7.17338C15.1658 6.61803 15.5905 6.22612 16.0341 5.99602L17.0795 5.75165C17.8298 5.78274 18.5916 6.25415 19.2044 7.17338C19.8354 8.11984 20.25 9.47056 20.25 11C20.25 12.5294 19.8354 13.8802 19.2044 14.8266C18.5916 15.7458 17.8298 16.2173 17.0794 16.2484L16.0341 16.004C15.5905 15.7739 15.1659 15.382 14.7956 14.8266C14.1646 13.8802 13.75 12.5294 13.75 11ZM12.25 11C12.25 9.3468 12.6627 7.80949 13.373 6.61808L5.48783 8.46138C4.46994 8.69932 3.75 9.60698 3.75 10.6523V11.3477C3.75 12.393 4.46994 13.3007 5.48783 13.5386L13.373 15.3819C12.6627 14.1905 12.25 12.6532 12.25 11ZM5.14639 7.00075L15.5263 4.57427C15.9817 4.36663 16.4756 4.25 17 4.25C18.4334 4.25 19.6392 5.12146 20.4525 6.34133C21.2692 7.56645 21.75 9.21573 21.75 11C21.75 12.7843 21.2692 14.4335 20.4525 15.6587C19.6392 16.8785 18.4334 17.75 17 17.75C16.4756 17.75 15.9817 17.6334 15.5263 17.4257L11.75 16.5429V17.5C11.75 19.2949 10.2949 20.75 8.5 20.75C6.70507 20.75 5.25 19.2949 5.25 17.5V15.0235L5.14639 14.9992C3.4499 14.6027 2.25 13.0899 2.25 11.3477V10.6523C2.25 8.91009 3.4499 7.39734 5.14639 7.00075ZM6.75 15.3741V17.5C6.75 18.4665 7.5335 19.25 8.5 19.25C9.4665 19.25 10.25 18.4665 10.25 17.5V16.1923L6.75 15.3741Z" />
+</svg>`;
+
+// node_modules/@triptease/icons/dist/src/icons/channels.js
+var channels = `<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+<path d="M18 3C19.6569 3 21 4.34315 21 6C21 7.65685 19.6569 9 18 9C17.4435 9 16.9243 8.84513 16.4775 8.58105L15.3076 9.75098C15.7443 10.3919 16 11.166 16 12C16 12.8334 15.7437 13.6064 15.3076 14.2471L16.4775 15.417C16.9241 15.1532 17.4438 15 18 15C19.6569 15 21 16.3431 21 18C21 19.6569 19.6569 21 18 21C16.3431 21 15 19.6569 15 18C15 17.4438 15.1532 16.9241 15.417 16.4775L14.2471 15.3076C13.6064 15.7437 12.8334 16 12 16C11.166 16 10.3919 15.7443 9.75098 15.3076L8.58105 16.4775C8.84513 16.9243 9 17.4435 9 18C9 19.6569 7.65685 21 6 21C4.34315 21 3 19.6569 3 18C3 16.3431 4.34315 15 6 15C6.55558 15 7.07429 15.1538 7.52051 15.417L8.69141 14.2471C8.2555 13.6065 8 12.8332 8 12C8 11.1665 8.25523 10.3927 8.69141 9.75195L7.52148 8.58203C7.07501 8.84569 6.55606 9 6 9C4.34315 9 3 7.65685 3 6C3 4.34315 4.34315 3 6 3C7.65685 3 9 4.34315 9 6C9 6.55606 8.84569 7.07501 8.58203 7.52148L9.75195 8.69141C9.73784 8.70101 9.72394 8.71092 9.70996 8.7207C10.3587 8.26679 11.1481 8 12 8C12.833 8 13.6066 8.25472 14.2471 8.69043L15.417 7.52051C15.1538 7.07429 15 6.55558 15 6C15 4.34315 16.3431 3 18 3ZM6 16.5C5.17157 16.5 4.5 17.1716 4.5 18C4.5 18.8284 5.17157 19.5 6 19.5C6.82843 19.5 7.5 18.8284 7.5 18C7.5 17.1716 6.82843 16.5 6 16.5ZM18 16.5C17.1716 16.5 16.5 17.1716 16.5 18C16.5 18.8284 17.1716 19.5 18 19.5C18.8284 19.5 19.5 18.8284 19.5 18C19.5 17.1716 18.8284 16.5 18 16.5ZM12 9.5C10.6193 9.5 9.5 10.6193 9.5 12C9.5 13.3807 10.6193 14.5 12 14.5C13.3807 14.5 14.5 13.3807 14.5 12C14.5 10.6193 13.3807 9.5 12 9.5ZM6 4.5C5.17157 4.5 4.5 5.17157 4.5 6C4.5 6.82843 5.17157 7.5 6 7.5C6.82843 7.5 7.5 6.82843 7.5 6C7.5 5.17157 6.82843 4.5 6 4.5ZM18 4.5C17.1716 4.5 16.5 5.17157 16.5 6C16.5 6.82843 17.1716 7.5 18 7.5C18.8284 7.5 19.5 6.82843 19.5 6C19.5 5.17157 18.8284 4.5 18 4.5Z" />
+</svg>`;
+
+// node_modules/@triptease/icons/dist/src/icons/gear.js
+var gear = `<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.4678 2C13.9142 2.00002 14.307 2.2963 14.4297 2.72559L15.0049 4.74219L16.8398 3.72363C17.1813 3.53396 17.5973 3.56262 17.9072 3.78418L18.0332 3.89062L20.1084 5.9668C20.4241 6.2825 20.4932 6.76987 20.2764 7.16016L19.2568 8.99316L21.2744 9.57031C21.6502 9.67769 21.9239 9.9921 21.9863 10.3682L22 10.5322V13.4678C22 13.9142 21.7037 14.307 21.2744 14.4297L19.2568 15.0049L20.2764 16.8398C20.4661 17.1813 20.4374 17.5972 20.2158 17.9072L20.1094 18.0332L18.0332 20.1084C17.7175 20.4241 17.2301 20.4932 16.8398 20.2764L15.0049 19.2568L14.4297 21.2744C14.3223 21.6502 14.0079 21.9239 13.6318 21.9863L13.4678 22H10.5322C10.0858 22 9.69297 21.7037 9.57031 21.2744L8.99316 19.2568L7.16016 20.2764C6.81867 20.466 6.40275 20.4374 6.09277 20.2158L5.9668 20.1094L3.8916 18.0332C3.5759 17.7175 3.50683 17.2301 3.72363 16.8398L4.74219 15.0059L2.72559 14.4297C2.34982 14.3223 2.07606 14.0079 2.01367 13.6318L2 13.4678V10.5322C2.00005 10.0858 2.29632 9.69296 2.72559 9.57031L4.74219 8.99316L3.72363 7.16016C3.53394 6.81866 3.5626 6.40276 3.78418 6.09277L3.89062 5.9668L5.9668 3.8916C6.28251 3.57589 6.76986 3.5068 7.16016 3.72363L8.99316 4.74219L9.57031 2.72559C9.67768 2.34981 9.99209 2.07606 10.3682 2.01367L10.5322 2H13.4678ZM10.4014 5.27148C9.70554 5.47089 9.05368 5.77388 8.46484 6.16504L6.76074 5.21875L5.21777 6.76074L6.22363 8.57031L6.23242 8.56738C5.91398 9.13213 5.67275 9.74545 5.52051 10.3936L5.49023 10.3398L3.5 10.9092V13.0908L5.49121 13.6592L5.52051 13.6055C5.67256 14.2532 5.91338 14.8662 6.23145 15.4307L6.22363 15.4287L5.21875 17.2393L5.21777 17.2383V17.2393H5.21875L6.76074 18.7822L8.46484 17.834C9.05398 18.2254 9.7061 18.5281 10.4023 18.7275L10.9092 20.5H13.0908L13.5488 18.8916C14.3898 18.7443 15.1787 18.4482 15.8877 18.0293L17.2393 18.7812L18.7822 17.2393L18.085 15.9863C18.6037 15.2393 18.9814 14.3876 19.1777 13.4678L20.5 13.0908V10.9092L19.1777 10.5303C18.9812 9.61065 18.6038 8.75856 18.085 8.01172L18.7812 6.76074L17.2393 5.21777L15.8857 5.96875C15.1773 5.55053 14.389 5.25458 13.5488 5.10742L13.0908 3.5H10.9092L10.4014 5.27148ZM12 8C14.2091 8 16 9.79086 16 12C16 14.2091 14.2091 16 12 16C9.79086 16 8 14.2091 8 12C8 9.79086 9.79086 8 12 8ZM12 9.5C10.6193 9.5 9.5 10.6193 9.5 12C9.5 13.3807 10.6193 14.5 12 14.5C13.3807 14.5 14.5 13.3807 14.5 12C14.5 10.6193 13.3807 9.5 12 9.5Z" />
+<path d="M13.6328 2.01367C14.0085 2.07631 14.3224 2.35007 14.4297 2.72559L15.0049 4.74219L16.8398 3.72363C17.1813 3.53396 17.5973 3.56262 17.9072 3.78418L18.0332 3.89062L20.1084 5.9668L20.2158 6.09277C20.4372 6.40274 20.466 6.81875 20.2764 7.16016L19.2568 8.99316L21.2744 9.57031C21.6502 9.67769 21.9239 9.9921 21.9863 10.3682L22 10.5322V13.4678L21.9863 13.6328C21.9237 14.0085 21.6499 14.3224 21.2744 14.4297L19.2568 15.0049L20.2764 16.8398C20.4661 17.1813 20.4374 17.5972 20.2158 17.9072L20.1094 18.0332L18.0332 20.1084L17.9072 20.2158C17.5973 20.4372 17.1813 20.466 16.8398 20.2764L15.0049 19.2568L14.4297 21.2744C14.3223 21.6502 14.0079 21.9239 13.6318 21.9863L13.4678 22H10.5322L10.3672 21.9863C9.99146 21.9237 9.6776 21.6499 9.57031 21.2744L8.99316 19.2568L7.16016 20.2764C6.81867 20.466 6.40275 20.4374 6.09277 20.2158L5.9668 20.1094L3.8916 18.0332L3.78418 17.9072C3.56278 17.5973 3.53398 17.1812 3.72363 16.8398L4.74219 15.0059L2.72559 14.4297C2.34982 14.3223 2.07606 14.0079 2.01367 13.6318L2 13.4678V10.5322L2.01367 10.3672C2.07633 9.99149 2.35009 9.6776 2.72559 9.57031L4.74219 8.99316L3.72363 7.16016C3.53394 6.81866 3.5626 6.40276 3.78418 6.09277L3.89062 5.9668L5.9668 3.8916L6.09277 3.78418C6.40275 3.56277 6.81875 3.53396 7.16016 3.72363L8.99316 4.74219L9.57031 2.72559C9.67768 2.34981 9.99209 2.07606 10.3682 2.01367L10.5322 2H13.4678L13.6328 2.01367ZM10.4014 5.27148C9.70554 5.47089 9.05368 5.77388 8.46484 6.16504L6.76074 5.21875L5.21777 6.76074L6.22363 8.57031L6.23242 8.56738C5.91398 9.13213 5.67275 9.74545 5.52051 10.3936L5.49023 10.3398L3.5 10.9092V13.0908L5.49121 13.6592L5.52051 13.6055C5.67256 14.2532 5.91338 14.8662 6.23145 15.4307L6.22363 15.4287L5.21875 17.2393L5.21777 17.2383V17.2393H5.21875L6.76074 18.7822L8.46484 17.834C9.05398 18.2254 9.7061 18.5281 10.4023 18.7275L10.9092 20.5H13.0908L13.5488 18.8916C14.3898 18.7443 15.1787 18.4482 15.8877 18.0293L17.2393 18.7812L18.7822 17.2393L18.085 15.9863C18.6037 15.2393 18.9814 14.3876 19.1777 13.4678L20.5 13.0908V10.9092L19.1777 10.5303C18.9812 9.61065 18.6038 8.75856 18.085 8.01172L18.7812 6.76074L17.2393 5.21777L15.8857 5.96875C15.1773 5.55053 14.389 5.25458 13.5488 5.10742L13.0908 3.5H10.9092L10.4014 5.27148ZM12 8C14.2091 8 16 9.79086 16 12C16 14.2091 14.2091 16 12 16C9.79086 16 8 14.2091 8 12C8 9.79086 9.79086 8 12 8ZM12 9.5C10.6193 9.5 9.5 10.6193 9.5 12C9.5 13.3807 10.6193 14.5 12 14.5C13.3807 14.5 14.5 13.3807 14.5 12C14.5 10.6193 13.3807 9.5 12 9.5Z" />
+</svg>`;
+
+// node_modules/@triptease/icons/dist/src/icons/graph.js
+var graph = `<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+<path d="M18.1543 3.00391C19.7394 3.08421 21 4.39489 21 6V18L20.9961 18.1543C20.9184 19.6883 19.6883 20.9184 18.1543 20.9961L18 21H6C4.39489 21 3.08421 19.7394 3.00391 18.1543L3 18V6C3 4.34315 4.34315 3 6 3H18L18.1543 3.00391ZM6 4.5C5.17157 4.5 4.5 5.17157 4.5 6V18C4.5 18.8284 5.17157 19.5 6 19.5H18C18.8284 19.5 19.5 18.8284 19.5 18V6C19.5 5.17157 18.8284 4.5 18 4.5H6ZM8 9C8.41421 9 8.75 9.33579 8.75 9.75V16.25C8.75 16.6642 8.41421 17 8 17C7.58579 17 7.25 16.6642 7.25 16.25V9.75C7.25 9.33579 7.58579 9 8 9ZM12 12C12.4142 12 12.75 12.3358 12.75 12.75V16.25C12.75 16.6642 12.4142 17 12 17C11.5858 17 11.25 16.6642 11.25 16.25V12.75C11.25 12.3358 11.5858 12 12 12ZM16 9C16.4142 9 16.75 9.33579 16.75 9.75V16.25C16.75 16.6642 16.4142 17 16 17C15.5858 17 15.25 16.6642 15.25 16.25V9.75C15.25 9.33579 15.5858 9 16 9Z" />
+</svg>`;
+
+// node_modules/@triptease/icons/dist/src/icons/home.js
+var home = `<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.7725 3.95499C11.4946 3.39358 12.5054 3.39358 13.2275 3.95499L20.2275 9.39936C20.7146 9.77822 20.9999 10.3614 21 10.9785V18C21 19.6051 19.7394 20.9158 18.1543 20.9961L18 21H6C4.39489 21 3.08421 19.7394 3.00391 18.1543L3 18V10.9785C3.00007 10.4386 3.21792 9.92445 3.59863 9.55073L3.77246 9.39936L10.7725 3.95499ZM12.3066 5.13859C12.1263 4.99869 11.8737 4.99869 11.6934 5.13859L4.69336 10.583C4.57163 10.6776 4.50008 10.8243 4.5 10.9785V18C4.5 18.8284 5.17157 19.5 6 19.5H8V16C8.00014 14.3432 9.34323 13 11 13H13C14.6568 13 15.9999 14.3432 16 16V19.5H18C18.8284 19.5 19.5 18.8284 19.5 18V10.9785C19.4999 10.8243 19.4284 10.6776 19.3066 10.583L12.3066 5.13859ZM11 14.5C10.1717 14.5 9.50014 15.1717 9.5 16V19.5H14.5V16C14.4999 15.1717 13.8283 14.5 13 14.5H11Z" />
+</svg>`;
+
+// node_modules/@triptease/icons/dist/src/icons/user.js
+var user = `<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 2C17.5228 2 22 6.47715 22 12C22 15.2098 20.4857 18.0638 18.1348 19.8936C18.0344 20.055 17.8763 20.1738 17.6875 20.2227C16.0725 21.3418 14.1137 22 12 22C9.88604 22 7.92664 21.3421 6.31152 20.2227C6.12294 20.1736 5.96441 20.055 5.86426 19.8936C3.51367 18.0638 2 15.2095 2 12C2 6.47715 6.47715 2 12 2ZM11.25 15.5C9.1884 15.5 7.49093 17.0597 7.27344 19.0635C8.62515 19.9698 10.2503 20.5 12 20.5C13.7494 20.5 15.374 19.9695 16.7256 19.0635C16.508 17.0598 14.8116 15.5 12.75 15.5H11.25ZM12 3.5C7.30558 3.5 3.5 7.30558 3.5 12C3.5 14.3333 4.44073 16.4464 5.96289 17.9824C6.62169 15.683 8.73895 14 11.25 14H12.75C15.2609 14 17.3772 15.6832 18.0361 17.9824C19.5586 16.4464 20.5 14.3335 20.5 12C20.5 7.30558 16.6944 3.5 12 3.5ZM12 5.25C14.0711 5.25 15.75 6.92893 15.75 9C15.75 11.0711 14.0711 12.75 12 12.75C9.92893 12.75 8.25 11.0711 8.25 9C8.25 6.92893 9.92893 5.25 12 5.25ZM12 6.75C10.7574 6.75 9.75 7.75736 9.75 9C9.75 10.2426 10.7574 11.25 12 11.25C13.2426 11.25 14.25 10.2426 14.25 9C14.25 7.75736 13.2426 6.75 12 6.75Z" />
+</svg>`;
+
+// node_modules/@triptease/icons/dist/src/icons/wallet.js
+var wallet = `<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.2275 3.02681C16.5581 2.53634 18.7497 4.3152 18.75 6.69674V7.09518C20.0437 7.42823 20.9998 8.60187 21 9.99948V16.9995C21 18.6046 19.7394 19.9153 18.1543 19.9956L18 19.9995H6C4.39489 19.9995 3.08421 18.7389 3.00391 17.1538L3 16.9995V8.43405C3.00022 6.66092 4.2424 5.12941 5.97754 4.76412L14.2275 3.02681ZM6 8.49948C5.17173 8.49948 4.50026 9.17127 4.5 9.99948V16.9995C4.5 17.8279 5.17157 18.4995 6 18.4995H18C18.8284 18.4995 19.5 17.8279 19.5 16.9995V9.99948C19.4997 9.17127 18.8283 8.49948 18 8.49948H6ZM16.5 11.9995C17.3283 11.9995 17.9997 12.6713 18 13.4995C18 14.3279 17.3284 14.9995 16.5 14.9995C15.6716 14.9995 15 14.3279 15 13.4995C15.0003 12.6713 15.6717 11.9995 16.5 11.9995ZM17.25 6.69674C17.2497 5.26791 15.9344 4.20028 14.5361 4.49459L6.28613 6.2319C5.67607 6.36042 5.16896 6.73055 4.85254 7.22799C5.20609 7.08147 5.59347 6.99948 6 6.99948H17.25V6.69674Z" />
+</svg>`;
+
 // src/styles.ts
 var styles = i`
   :host {
@@ -604,7 +693,7 @@ var styles = i`
   }
 
   nav {
-    min-width: var(--nav-bar-width);
+    max-width: var(--nav-bar-width);
     width: var(--nav-bar-width);
     min-height: 100vh;
     height: max-content;
@@ -616,58 +705,63 @@ var styles = i`
     color: var(--color-text-inverted-400);
     padding-top: var(--space-scale-2);
     padding-bottom: var(--space-scale-2);
-  }
+    z-index: 1;
 
-  nav details div {
-    display: flex;
-    flex-direction: column;
-  }
+    .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;
-  }
+    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%;
+    #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);
+      .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 {
+          width: var(--space-scale-2);
+          height: var(--space-scale-2);
+        }
       }
     }
-  }
 
-  .icon {
-    width: var(--space-scale-3);
-    height: var(--space-scale-3);
-    display: inline;
-    color: var(--nav-item-color);
-  }
+    .icon {
+      display: flex;
+      align-items: center;
+      width: var(--space-scale-3);
+      height: var(--space-scale-3);
+      color: var(--nav-item-color);
+    }
 
-  a {
-    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);
-    text-decoration: none;
-    padding: var(--space-scale-1);
-    width: 100%;
+    .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 {
-    width: 100%;
     border-radius: var(--border-radius-100);
 
     summary {
@@ -682,13 +776,13 @@ var styles = i`
       }
     }
 
-    svg.chevron {
+    .chevron > svg {
       margin-left: auto;
       margin-right: var(--space-scale-1);
       width: var(--space-scale-2);
     }
 
-    &[open] svg.chevron {
+    &[open] .chevron > svg {
       transform: rotate(180deg);
     }
 
@@ -725,6 +819,7 @@ var styles = i`
     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);
@@ -734,8 +829,8 @@ var styles = i`
 
   .sub-nav-item:hover,
   .sub-nav-item:focus-visible,
-  a:hover,
-  a: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;
@@ -746,7 +841,116 @@ var styles = i`
     }
   }
 
+  .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;
+    }
+  }
+
+  .link-page > .section {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-scale-2);
+  }
+
+  .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;
+    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;
+  }
 `;
 
 // src/TtNavbar.ts
@@ -759,90 +963,131 @@ var TtNavbar = class extends i4 {
       if (!this.baseUrl) return formattedPath;
       return new URL(formattedPath, this.baseUrl).toString();
     };
-    this.onAnchorClick = (e5) => {
+    this.onAnchorClick = (e7) => {
       if (this.navigate) {
-        this.navigate(e5);
+        this.navigate(e7);
       }
     };
   }
   render() {
     return x`
       <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}
+          >${o7(home)}Dashboard</a
+          >
+          <a class="nav-item" href="https://app.campaign-manager.triptease.io"
+          >${o7(campaigns)}Campaigns</a
+          >
+          <a
+            class="nav-item"
+            href=${this.buildUrl("/channels")}
+            @click=${this.onAnchorClick}
+          >${o7(channels)}Channels</a
+          >
+          <details>
+            <summary>
+              ${o7(graph)}
+              <span>Market Insights</span>
+              <span class="icon chevron"> ${o7(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>
+              ${o7(gear)}
+              <span>Settings</span>
+              <span class="icon chevron"> ${o7(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>
+              ${o7(user)}
+              <span>Account</span>
+              <span class="icon chevron"> ${o7(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>
+              ${o7(wallet)}
+              <span>Billing</span>
+              <span class="icon chevron"> ${o7(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>
+        <slot name="logout"></slot>
       </nav>
     `;
   }
@@ -966,5 +1211,26 @@ lit-html/is-server.js:
    * Copyright 2017 Google LLC
    * SPDX-License-Identifier: BSD-3-Clause
    *)
+
+lit-html/directive.js:
+  (**
+   * @license
+   * Copyright 2017 Google LLC
+   * SPDX-License-Identifier: BSD-3-Clause
+   *)
+
+lit-html/directives/unsafe-html.js:
+  (**
+   * @license
+   * Copyright 2017 Google LLC
+   * SPDX-License-Identifier: BSD-3-Clause
+   *)
+
+lit-html/directives/unsafe-svg.js:
+  (**
+   * @license
+   * Copyright 2017 Google LLC
+   * SPDX-License-Identifier: BSD-3-Clause
+   *)
 */
 //# sourceMappingURL=tt-navbar.js.map