@triptease/tt-navbar 0.0.13 → 0.0.15

package/dist/web/index.js

@@ -1,5 +1,5 @@
 /**
-* @triptease/tt-navbar v0.0.13
+* @triptease/tt-navbar v0.0.15
 */
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -18,16 +18,16 @@ var e = t.ShadowRoot && (void 0 === t.ShadyCSS || t.ShadyCSS.nativeShadow) && "a
 var s = Symbol();
 var o = /* @__PURE__ */ new WeakMap();
 var n = class {
-  constructor(t5, e7, o8) {
+  constructor(t5, e8, o8) {
     if (this._$cssResult$ = true, o8 !== s) throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");
-    this.cssText = t5, this.t = e7;
+    this.cssText = t5, this.t = e8;
   }
   get styleSheet() {
     let t5 = this.o;
     const s4 = this.t;
     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));
+      const e8 = void 0 !== s4 && 1 === s4.length;
+      e8 && (t5 = o.get(s4)), void 0 === t5 && ((this.o = t5 = new CSSStyleSheet()).replaceSync(this.cssText), e8 && o.set(s4, t5));
     }
     return t5;
   }
@@ -36,8 +36,8 @@ var n = class {
   }
 };
 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) => {
+var i = (t5, ...e8) => {
+  const o8 = 1 === t5.length ? t5[0] : e8.reduce((e9, s4, o9) => e9 + ((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.");
@@ -46,15 +46,15 @@ var i = (t5, ...e7) => {
 };
 var S = (s4, o8) => {
   if (e) s4.adoptedStyleSheets = o8.map((t5) => t5 instanceof CSSStyleSheet ? t5 : t5.styleSheet);
-  else for (const e7 of o8) {
+  else for (const e8 of o8) {
     const o9 = document.createElement("style"), n5 = t.litNonce;
-    void 0 !== n5 && o9.setAttribute("nonce", n5), o9.textContent = e7.cssText, s4.appendChild(o9);
+    void 0 !== n5 && o9.setAttribute("nonce", n5), o9.textContent = e8.cssText, s4.appendChild(o9);
   }
 };
 var c = e ? (t5) => t5 : (t5) => t5 instanceof CSSStyleSheet ? ((t6) => {
-  let e7 = "";
-  for (const s4 of t6.cssRules) e7 += s4.cssText;
-  return r(e7);
+  let e8 = "";
+  for (const s4 of t6.cssRules) e8 += s4.cssText;
+  return r(e8);
 })(t5) : t5;
 
 // ../../node_modules/@lit/reactive-element/reactive-element.js
@@ -110,14 +110,14 @@ var y = class extends HTMLElement {
     }
   }
   static getPropertyDescriptor(t5, s4, i6) {
-    const { get: e7, set: r5 } = h(this.prototype, t5) ?? { get() {
+    const { get: e8, set: r7 } = h(this.prototype, t5) ?? { get() {
       return this[s4];
     }, set(t6) {
       this[s4] = t6;
     } };
-    return { get: e7, set(s5) {
-      const h3 = e7?.call(this);
-      r5?.call(this, s5), this.requestUpdate(t5, h3, i6);
+    return { get: e8, set(s5) {
+      const h3 = e8?.call(this);
+      r7?.call(this, s5), this.requestUpdate(t5, h3, i6);
     }, configurable: true, enumerable: true };
   }
   static getPropertyOptions(t5) {
@@ -149,8 +149,8 @@ var y = class extends HTMLElement {
   static finalizeStyles(s4) {
     const i6 = [];
     if (Array.isArray(s4)) {
-      const e7 = new Set(s4.flat(1 / 0).reverse());
-      for (const s5 of e7) i6.unshift(c(s5));
+      const e8 = new Set(s4.flat(1 / 0).reverse());
+      for (const s5 of e8) i6.unshift(c(s5));
     } else void 0 !== s4 && i6.push(c(s4));
     return i6;
   }
@@ -191,29 +191,29 @@ var y = class extends HTMLElement {
     this._$AK(t5, i6);
   }
   _$ET(t5, s4) {
-    const i6 = this.constructor.elementProperties.get(t5), e7 = this.constructor._$Eu(t5, i6);
-    if (void 0 !== e7 && true === i6.reflect) {
+    const i6 = this.constructor.elementProperties.get(t5), e8 = this.constructor._$Eu(t5, i6);
+    if (void 0 !== e8 && 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;
+      this._$Em = t5, null == h3 ? this.removeAttribute(e8) : this.setAttribute(e8, h3), 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;
+    const i6 = this.constructor, e8 = i6._$Eh.get(t5);
+    if (void 0 !== e8 && this._$Em !== e8) {
+      const t6 = i6.getPropertyOptions(e8), h3 = "function" == typeof t6.converter ? { fromAttribute: t6.converter } : void 0 !== t6.converter?.fromAttribute ? t6.converter : u;
+      this._$Em = e8, this[e8] = h3.fromAttribute(s4, t6.type) ?? this._$Ej?.get(e8) ?? null, this._$Em = null;
     }
   }
   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;
+      const e8 = this.constructor, h3 = this[t5];
+      if (i6 ?? (i6 = e8.getPropertyOptions(t5)), !((i6.hasChanged ?? f)(h3, s4) || i6.useDefault && i6.reflect && h3 === this._$Ej?.get(t5) && !this.hasAttribute(e8._$Eu(t5, i6)))) return;
       this.C(t5, s4, i6);
     }
     false === this.isUpdatePending && (this._$ES = this._$EP());
   }
-  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));
+  C(t5, s4, { useDefault: i6, reflect: e8, wrapped: h3 }, r7) {
+    i6 && !(this._$Ej ?? (this._$Ej = /* @__PURE__ */ new Map())).has(t5) && (this._$Ej.set(t5, r7 ?? s4 ?? this[t5]), true !== h3 || void 0 !== r7) || (this._$AL.has(t5) || (this.hasUpdated || i6 || (s4 = void 0), this._$AL.set(t5, s4)), true === e8 && this._$Em !== t5 && (this._$Eq ?? (this._$Eq = /* @__PURE__ */ new Set())).add(t5));
   }
   async _$EP() {
     this.isUpdatePending = true;
@@ -237,8 +237,8 @@ var y = class extends HTMLElement {
       }
       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);
+        const { wrapped: t7 } = i6, e8 = this[s5];
+        true !== t7 || this._$AL.has(s5) || void 0 === e8 || this.C(s5, void 0, i6, e8);
       }
     }
     let t5 = false;
@@ -313,11 +313,11 @@ function P(t5, i6) {
 }
 var V = (t5, i6) => {
   const s4 = t5.length - 1, o8 = [];
-  let r5, l3 = 2 === i6 ? "<svg>" : 3 === i6 ? "<math>" : "", c4 = f2;
+  let r7, 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);
+    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]) && (r7 = RegExp("</" + u3[2], "g")), c4 = m) : void 0 !== u3[3] && (c4 = m) : c4 === m ? ">" === u3[0] ? (c4 = r7 ?? 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, r7 = void 0);
     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);
   }
@@ -325,7 +325,7 @@ var V = (t5, i6) => {
 };
 var N = class _N {
   constructor({ strings: t5, _$litType$: s4 }, n5) {
-    let r5;
+    let r7;
     this.parts = [];
     let c4 = 0, a3 = 0;
     const u3 = t5.length - 1, d3 = this.parts, [f3, v2] = V(t5, s4);
@@ -333,24 +333,24 @@ var N = class _N {
       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 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 t6 = r5.textContent.split(h2), s5 = t6.length - 1;
+    for (; null !== (r7 = C.nextNode()) && d3.length < u3; ) {
+      if (1 === r7.nodeType) {
+        if (r7.hasAttributes()) for (const t6 of r7.getAttributeNames()) if (t6.endsWith(e3)) {
+          const i6 = v2[a3++], s5 = r7.getAttribute(t6).split(h2), e8 = /([.?@])?(.*)/.exec(i6);
+          d3.push({ type: 1, index: c4, name: e8[2], strings: s5, ctor: "." === e8[1] ? H : "?" === e8[1] ? I : "@" === e8[1] ? L : k }), r7.removeAttribute(t6);
+        } else t6.startsWith(h2) && (d3.push({ type: 6, index: c4 }), r7.removeAttribute(t6));
+        if ($.test(r7.tagName)) {
+          const t6 = r7.textContent.split(h2), s5 = t6.length - 1;
           if (s5 > 0) {
-            r5.textContent = i3 ? i3.emptyScript : "";
-            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());
+            r7.textContent = i3 ? i3.emptyScript : "";
+            for (let i6 = 0; i6 < s5; i6++) r7.append(t6[i6], l2()), C.nextNode(), d3.push({ type: 2, index: ++c4 });
+            r7.append(t6[s5], l2());
           }
         }
-      } else if (8 === r5.nodeType) if (r5.data === o3) d3.push({ type: 2, index: c4 });
+      } else if (8 === r7.nodeType) if (r7.data === o3) d3.push({ type: 2, index: c4 });
       else {
         let t6 = -1;
-        for (; -1 !== (t6 = r5.data.indexOf(h2, t6 + 1)); ) d3.push({ type: 7, index: c4 }), t6 += h2.length - 1;
+        for (; -1 !== (t6 = r7.data.indexOf(h2, t6 + 1)); ) d3.push({ type: 7, index: c4 }), t6 += h2.length - 1;
       }
       c4++;
     }
@@ -360,11 +360,11 @@ var N = class _N {
     return s4.innerHTML = t5, s4;
   }
 };
-function S2(t5, i6, s4 = t5, e7) {
+function S2(t5, i6, s4 = t5, e8) {
   if (i6 === T) return i6;
-  let h3 = void 0 !== e7 ? s4._$Co?.[e7] : s4._$Cl;
+  let h3 = void 0 !== e8 ? s4._$Co?.[e8] : 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;
+  return h3?.constructor !== o8 && (h3?._$AO?.(false), void 0 === o8 ? h3 = void 0 : (h3 = new o8(t5), h3._$AT(t5, s4, e8)), void 0 !== e8 ? (s4._$Co ?? (s4._$Co = []))[e8] = h3 : s4._$Cl = h3), void 0 !== h3 && (i6 = S2(t5, h3._$AS(t5, i6.values), h3, e8)), i6;
 }
 var M = class {
   constructor(t5, i6) {
@@ -377,8 +377,8 @@ var M = class {
     return this._$AM._$AU;
   }
   u(t5) {
-    const { el: { content: i6 }, parts: s4 } = this._$AD, e7 = (t5?.creationScope ?? r3).importNode(i6, true);
-    C.currentNode = e7;
+    const { el: { content: i6 }, parts: s4 } = this._$AD, e8 = (t5?.creationScope ?? r3).importNode(i6, true);
+    C.currentNode = e8;
     let h3 = C.nextNode(), o8 = 0, n5 = 0, l3 = s4[0];
     for (; void 0 !== l3; ) {
       if (o8 === l3.index) {
@@ -387,7 +387,7 @@ var M = class {
       }
       o8 !== l3?.index && (h3 = C.nextNode(), o8++);
     }
-    return C.currentNode = r3, e7;
+    return C.currentNode = r3, e8;
   }
   p(t5) {
     let i6 = 0;
@@ -398,8 +398,8 @@ var R = class _R {
   get _$AU() {
     return this._$AM?._$AU ?? this._$Cv;
   }
-  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;
+  constructor(t5, i6, s4, e8) {
+    this.type = 2, this._$AH = E, this._$AN = void 0, this._$AA = t5, this._$AB = i6, this._$AM = s4, this.options = e8, this._$Cv = e8?.isConnected ?? true;
   }
   get parentNode() {
     let t5 = this._$AA.parentNode;
@@ -425,10 +425,10 @@ var R = class _R {
     this._$AH !== E && c3(this._$AH) ? this._$AA.nextSibling.data = t5 : this.T(r3.createTextNode(t5)), this._$AH = t5;
   }
   $(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);
+    const { values: i6, _$litType$: s4 } = t5, e8 = "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 === e8) this._$AH.p(i6);
     else {
-      const t6 = new M(e7, this), s5 = t6.u(this.options);
+      const t6 = new M(e8, this), s5 = t6.u(this.options);
       t6.p(i6), this.T(s5), this._$AH = t6;
     }
   }
@@ -439,9 +439,9 @@ var R = class _R {
   k(t5) {
     a2(this._$AH) || (this._$AH = [], this._$AR());
     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);
+    let s4, e8 = 0;
+    for (const h3 of t5) e8 === i6.length ? i6.push(s4 = new _R(this.O(l2()), this.O(l2()), this, this.options)) : s4 = i6[e8], s4._$AI(h3), e8++;
+    e8 < i6.length && (this._$AR(s4 && s4._$AB.nextSibling, e8), i6.length = e8);
   }
   _$AR(t5 = this._$AA.nextSibling, i6) {
     for (this._$AP?.(false, true, i6); t5 && t5 !== this._$AB; ) {
@@ -460,19 +460,19 @@ var k = class {
   get _$AU() {
     return this._$AM._$AU;
   }
-  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;
+  constructor(t5, i6, s4, e8, h3) {
+    this.type = 1, this._$AH = E, this._$AN = void 0, this.element = t5, this.name = i6, this._$AM = e8, 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(t5, i6 = this, s4, e7) {
+  _$AI(t5, i6 = this, s4, e8) {
     const h3 = this.strings;
     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 e8 = t5;
-      let 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;
+      const e9 = t5;
+      let n5, r7;
+      for (t5 = h3[0], n5 = 0; n5 < h3.length - 1; n5++) r7 = S2(this, e9[s4 + n5], i6, n5), r7 === T && (r7 = this._$AH[n5]), o8 || (o8 = !c3(r7) || r7 !== this._$AH[n5]), r7 === E ? t5 = E : t5 !== E && (t5 += (r7 ?? "") + h3[n5 + 1]), this._$AH[n5] = r7;
     }
-    o8 && !e7 && this.j(t5);
+    o8 && !e8 && this.j(t5);
   }
   j(t5) {
     t5 === E ? this.element.removeAttribute(this.name) : this.element.setAttribute(this.name, t5 ?? "");
@@ -495,13 +495,13 @@ var I = class extends k {
   }
 };
 var L = class extends k {
-  constructor(t5, i6, s4, e7, h3) {
-    super(t5, i6, s4, e7, h3), this.type = 5;
+  constructor(t5, i6, s4, e8, h3) {
+    super(t5, i6, s4, e8, h3), this.type = 5;
   }
   _$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;
+    const s4 = this._$AH, e8 = t5 === E && s4 !== E || t5.capture !== s4.capture || t5.once !== s4.once || t5.passive !== s4.passive, h3 = t5 !== E && (s4 === E || e8);
+    e8 && this.element.removeEventListener(this.name, this, s4), h3 && this.element.addEventListener(this.name, this, t5), this._$AH = t5;
   }
   handleEvent(t5) {
     "function" == typeof this._$AH ? this._$AH.call(this.options?.host ?? this.element, t5) : this._$AH.handleEvent(t5);
@@ -521,11 +521,11 @@ var z = class {
 var j = t2.litHtmlPolyfillSupport;
 j?.(N, R), (t2.litHtmlVersions ?? (t2.litHtmlVersions = [])).push("3.3.0");
 var B = (t5, i6, s4) => {
-  const e7 = s4?.renderBefore ?? i6;
-  let h3 = e7._$litPart$;
+  const e8 = s4?.renderBefore ?? i6;
+  let h3 = e8._$litPart$;
   if (void 0 === h3) {
     const t6 = s4?.renderBefore ?? null;
-    e7._$litPart$ = h3 = new R(i6.insertBefore(l2(), t6), t6, void 0, s4 ?? {});
+    e8._$litPart$ = h3 = new R(i6.insertBefore(l2(), t6), t6, void 0, s4 ?? {});
   }
   return h3._$AI(t5), h3;
 };
@@ -542,8 +542,8 @@ var i4 = class extends y {
     return (_a = this.renderOptions).renderBefore ?? (_a.renderBefore = t5.firstChild), t5;
   }
   update(t5) {
-    const r5 = this.render();
-    this.hasUpdated || (this.renderOptions.isConnected = this.isConnected), super.update(t5), this._$Do = B(r5, this.renderRoot, this.renderOptions);
+    const r7 = this.render();
+    this.hasUpdated || (this.renderOptions.isConnected = this.isConnected), super.update(t5), this._$Do = B(r7, this.renderRoot, this.renderOptions);
   }
   connectedCallback() {
     super.connectedCallback(), this._$Do?.setConnected(true);
@@ -562,77 +562,93 @@ 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 = (t5 = o5, e7, r5) => {
-  const { kind: n5, metadata: i6 } = r5;
+var r4 = (t5 = o5, e8, r7) => {
+  const { kind: n5, metadata: i6 } = r7;
   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 = 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 (void 0 === s4 && globalThis.litPropertyMetadata.set(i6, s4 = /* @__PURE__ */ new Map()), "setter" === n5 && ((t5 = Object.create(t5)).wrapped = true), s4.set(r7.name, t5), "accessor" === n5) {
+    const { name: o8 } = r7;
+    return { set(r8) {
+      const n6 = e8.get.call(this);
+      e8.set.call(this, r8), this.requestUpdate(o8, n6, t5);
+    }, init(e9) {
+      return void 0 !== e9 && this.C(o8, void 0, t5, e9), e9;
     } };
   }
   if ("setter" === n5) {
-    const { name: o8 } = r5;
-    return function(r6) {
+    const { name: o8 } = r7;
+    return function(r8) {
       const n6 = this[o8];
-      e7.call(this, r6), this.requestUpdate(o8, n6, t5);
+      e8.call(this, r8), this.requestUpdate(o8, n6, t5);
     };
   }
   throw Error("Unsupported decorator location: " + n5);
 };
 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);
+  return (e8, o8) => "object" == typeof o8 ? r4(t5, e8, o8) : ((t6, e9, o9) => {
+    const r7 = e9.hasOwnProperty(o9);
+    return e9.constructor.createProperty(o9, t6), r7 ? Object.getOwnPropertyDescriptor(e9, o9) : void 0;
+  })(t5, e8, o8);
+}
+
+// ../../node_modules/@lit/reactive-element/decorators/state.js
+function r5(r7) {
+  return n4({ ...r7, state: true, attribute: false });
+}
+
+// ../../node_modules/@lit/reactive-element/decorators/base.js
+var e4 = (e8, t5, c4) => (c4.configurable = true, c4.enumerable = true, Reflect.decorate && "object" != typeof t5 && Object.defineProperty(e8, t5, c4), c4);
+
+// ../../node_modules/@lit/reactive-element/decorators/query-all.js
+var e5;
+function r6(r7) {
+  return (n5, o8) => e4(n5, o8, { get() {
+    return (this.renderRoot ?? (e5 ?? (e5 = document.createDocumentFragment()))).querySelectorAll(r7);
+  } });
 }
 
 // ../../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 e6 = (t5) => (...e8) => ({ _$litDirective$: t5, values: e8 });
 var i5 = class {
   constructor(t5) {
   }
   get _$AU() {
     return this._$AM._$AU;
   }
-  _$AT(t5, e7, i6) {
-    this._$Ct = t5, this._$AM = e7, this._$Ci = i6;
+  _$AT(t5, e8, i6) {
+    this._$Ct = t5, this._$AM = e8, this._$Ci = i6;
   }
-  _$AS(t5, e7) {
-    return this.update(t5, e7);
+  _$AS(t5, e8) {
+    return this.update(t5, e8);
   }
-  update(t5, e7) {
-    return this.render(...e7);
+  update(t5, e8) {
+    return this.render(...e8);
   }
 };
 
 // ../../node_modules/lit-html/directives/unsafe-html.js
-var e6 = class extends i5 {
+var e7 = 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];
+  render(r7) {
+    if (r7 === E || null == r7) return this._t = void 0, this.it = r7;
+    if (r7 === T) return r7;
+    if ("string" != typeof r7) throw Error(this.constructor.directiveName + "() called with a non-string value");
+    if (r7 === this.it) return this._t;
+    this.it = r7;
+    const s4 = [r7];
     return s4.raw = s4, this._t = { _$litType$: this.constructor.resultType, strings: s4, values: [] };
   }
 };
-e6.directiveName = "unsafeHTML", e6.resultType = 1;
-var o6 = e5(e6);
+e7.directiveName = "unsafeHTML", e7.resultType = 1;
+var o6 = e6(e7);
 
 // ../../node_modules/lit-html/directives/unsafe-svg.js
-var t4 = class extends e6 {
+var t4 = class extends e7 {
 };
 t4.directiveName = "unsafeSVG", t4.resultType = 2;
-var o7 = e5(t4);
+var o7 = e6(t4);
 
 // node_modules/@triptease/icons/dist/src/icons/chevron-down.js
 var chevronDown = `
@@ -679,6 +695,11 @@ var logout = `<svg width="17" height="20" viewBox="0 0 17 20" fill="currentColor
     <path d="M12 0C12.4142 0 12.75 0.335786 12.75 0.75C12.75 1.16421 12.4142 1.5 12 1.5H3.75C2.50736 1.5 1.5 2.50736 1.5 3.75V16.25C1.5 17.4926 2.50736 18.5 3.75 18.5H12C12.4142 18.5 12.75 18.8358 12.75 19.25C12.75 19.6642 12.4142 20 12 20H3.75C1.67893 20 0 18.3211 0 16.25V3.75C2.57706e-07 1.67893 1.67893 1.28851e-07 3.75 0H12ZM10.7197 5.71973C11.0125 5.42693 11.4874 5.42713 11.7803 5.71973L16.0605 10L11.7803 14.2803C11.4874 14.5729 11.0126 14.573 10.7197 14.2803C10.4272 13.9874 10.4272 13.5125 10.7197 13.2197L13.1895 10.75H6.5C6.08605 10.7498 5.7501 10.414 5.75 10C5.75009 9.58601 6.08604 9.25023 6.5 9.25H13.1895L10.7197 6.78027C10.4272 6.48743 10.4272 6.01254 10.7197 5.71973Z" />
 </svg>`;
 
+// node_modules/@triptease/icons/dist/src/icons/sidebar-collapsed.js
+var sidebarCollapsed = `<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+    <path d="M17 3.25C19.0711 3.25 20.75 4.92893 20.75 7V17C20.75 19.0711 19.0711 20.75 17 20.75H7C4.92893 20.75 3.25 19.0711 3.25 17V7C3.25 4.92893 4.92893 3.25 7 3.25H17ZM10 19.25H17C18.2426 19.25 19.25 18.2426 19.25 17V7C19.25 5.75736 18.2426 4.75 17 4.75H10V19.25Z"/>
+</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" />
@@ -690,6 +711,18 @@ var wallet = `<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor
 </svg>`;
 
 // src/styles.ts
+var visuallyHiddenCss = i`
+  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;
+`;
 var styles = i`
   :host {
     --nav-bar-width: 260px;
@@ -724,6 +757,39 @@ var styles = i`
       width: 100%;
     }
 
+    .nav-items.sidebar-closed {
+      a span {
+        ${visuallyHiddenCss}
+      }
+
+      details summary span {
+        ${visuallyHiddenCss}
+      }
+    }
+
+    .sidebar-header {
+      width: 100%;
+      display: grid;
+      grid-template-columns: 1fr auto;
+      align-items: center;
+      justify-content: center;
+      padding: 0 var(--space-scale-2);
+
+      button {
+        background-color: transparent;
+        color: var(--color-text-inverted-400);
+        border: none;
+      }
+    }
+
+    .sidebar-header.sidebar-closed {
+      padding: 0 var(--space-scale-1);
+      .logo {
+        display: none;
+        visibility: hidden;
+      }
+    }
+
     hr {
       width: 100%;
       height: 1px;
@@ -749,6 +815,19 @@ var styles = i`
       }
     }
 
+    .tertiary-nav.sidebar-closed {
+      .external-link,
+      slot,
+      hr {
+        display: none;
+        visibility: hidden;
+      }
+
+      a span {
+        ${visuallyHiddenCss}
+      }
+    }
+
     .icon {
       display: flex;
       align-items: center;
@@ -771,6 +850,10 @@ var styles = i`
     }
   }
 
+  nav.sidebar-closed {
+    width: fit-content;
+  }
+
   details {
     border-radius: var(--border-radius-100);
 
@@ -839,10 +922,6 @@ var styles = i`
     }
   }
 
-  .logo {
-    padding: 0 var(--space-scale-2);
-  }
-
   .sub-nav-item:hover,
   .sub-nav-item:focus-visible,
   .nav-item:hover,
@@ -984,41 +1063,75 @@ var tripteaseLogo = `<svg  width="112" height="32" viewBox="0 0 112 32" fill="no
 var TtNavbar = class extends i4 {
   constructor() {
     super(...arguments);
+    this.sidebarOpen = true;
+    this.closeAllDetails = (element) => {
+      this.allDetailsElements.forEach((detail) => {
+        if (element && !detail.contains(element)) {
+          detail.removeAttribute("open");
+        } else if (!element) {
+          detail.removeAttribute("open");
+        }
+      });
+    };
+    this.toggleSidebar = () => {
+      this.closeAllDetails();
+      this.sidebarOpen = !this.sidebarOpen;
+    };
+    this.handleToggle = (e8) => {
+      const { newState } = e8;
+      const target = e8.currentTarget;
+      if (newState === "open") {
+        if (!this.sidebarOpen) {
+          this.sidebarOpen = true;
+        }
+        this.closeAllDetails(target);
+      }
+    };
     this.buildUrl = (path) => {
       if (!this.clientKey) throw new Error("clientKey is required");
       const formattedPath = path.replace("$CLIENT_KEY", this.clientKey);
       if (!this.baseUrl) return formattedPath;
       return new URL(formattedPath, this.baseUrl).toString();
     };
-    this.onAnchorClick = (e7) => {
+    this.onAnchorClick = (e8) => {
       if (this.navigate) {
-        this.navigate(e7);
+        this.navigate(e8);
       }
     };
   }
   render() {
     return x`
-      <nav id=${this.id}>
-        <div class="logo">
-          ${o7(tripteaseLogo)}
+      <nav id=${this.id} class="${this.sidebarOpen ? "" : "sidebar-closed"}">
+        <div class="sidebar-header ${this.sidebarOpen ? "" : "sidebar-closed"}">
+          <div class="logo">
+            ${o7(tripteaseLogo)}
+          </div>
+          <button id="navbar-toggle-btn" class="nav-item nav-toggle-button" @click=${this.toggleSidebar}>
+            ${o7(sidebarCollapsed)}
+            <span class="tooltip nav-toggle-tooltip">
+              ${o7(sidebarCollapsed)}
+              <span>Collapse sidebar</span>
+            </span>
+          </button>
         </div>
-        <div class="nav-items">
+
+        <div class="nav-items ${this.sidebarOpen ? "" : "sidebar-closed"}">
           <a
             class="nav-item"
             href=${this.buildUrl("/")}
             @click=${this.onAnchorClick}
-          >${o7(home)}Dashboard</a
+          >${o7(home)}<span>Dashboard</span></a
           >
           <a class="nav-item" href="https://app.campaign-manager.triptease.io"
-          >${o7(campaigns)}Campaigns</a
+          >${o7(campaigns)}<span>Campaigns</span></a
           >
           <a
             class="nav-item"
             href=${this.buildUrl("/channels")}
             @click=${this.onAnchorClick}
-          >${o7(channels)}Channels</a
+          >${o7(channels)}<span>Channels</span></a
           >
-          <details>
+          <details id="market-insights" @toggle=${this.handleToggle}>
             <summary>
               ${o7(graph)}
               <span>Market Insights</span>
@@ -1039,7 +1152,7 @@ var TtNavbar = class extends i4 {
               >
             </div>
           </details>
-          <details>
+          <details id="settings" @toggle=${this.handleToggle}>
             <summary>
               ${o7(gear)}
               <span>Settings</span>
@@ -1073,7 +1186,7 @@ var TtNavbar = class extends i4 {
             </div>
           </details>
           <hr />
-          <details>
+          <details id="account" @toggle=${this.handleToggle}>
             <summary>
               ${o7(user)}
               <span>Account</span>
@@ -1094,7 +1207,7 @@ var TtNavbar = class extends i4 {
               >
             </div>
           </details>
-          <details class="dropdown-items">
+          <details id="billing-routes" @toggle=${this.handleToggle}>
             <summary>
               ${o7(wallet)}
               <span>Billing</span>
@@ -1116,8 +1229,8 @@ var TtNavbar = class extends i4 {
             </div>
           </details>
         </div>
-        <div class="tertiary-nav">
-          <div class="nav-items">
+        <div class="tertiary-nav ${this.sidebarOpen ? "" : "sidebar-closed"}">
+          <div id="external-links" class="nav-items">
             <a
               class="nav-item external-link"
               href='https://triptease.canny.io/feature-requests'
@@ -1148,12 +1261,13 @@ var TtNavbar = class extends i4 {
             <hr />
           </div>
           <div class='nav-items'>
-            <slot name="clientSelector"></slot>
+            <slot id="client-selector" name="clientSelector"></slot>
             <a
+              id="logout-link"
               class="nav-item"
               href=${this.buildUrl("/logout")}
               @click=${this.onAnchorClick}
-            >${o7(logout)}Logout</a>
+            >${o7(logout)}<span>Logout</span></a>
           </div>
           <div>
       </nav>
@@ -1170,6 +1284,12 @@ __decorateClass([
 __decorateClass([
   n4({ type: String, attribute: "client-key" })
 ], TtNavbar.prototype, "clientKey", 2);
+__decorateClass([
+  r5()
+], TtNavbar.prototype, "sidebarOpen", 2);
+__decorateClass([
+  r6("details")
+], TtNavbar.prototype, "allDetailsElements", 2);
 export {
   TtNavbar
 };