@nextrap/nte-nav 1.1.16 → 1.1.17

package/CHANGELOG.md

@@ -1,3 +1,7 @@
+## 1.1.17 (2025-09-11)
+
+This was a version bump only for nte-nav to align it with other projects, there were no code changes.
+
 ## 1.1.16 (2025-09-11)
 
 This was a version bump only for nte-nav to align it with other projects, there were no code changes.

package/components/nte-nav-brand-relocator/nte-nav-brand-relocator.d.ts

@@ -25,6 +25,7 @@ export declare class NteNavBrandRelocator extends NteNavBrandRelocator_base {
     private accessor done;
     private onScroll;
     private onanimationEnd;
+    private get brandElement();
     render(): import('lit-html').TemplateResult<1>;
     update(changedProperties: Map<string, any>): void;
     firstUpdated(): Promise<void>;

package/index.js

@@ -1,32 +1,32 @@
-import { waitForDomContentLoaded as q, isBiggerThanBreakpoint as wt, Debouncer as ie, SlotTool as Tt } from "@nextrap/nt-framework";
+import { waitForDomContentLoaded as q, isBiggerThanBreakpoint as mt, Debouncer as ie, SlotTool as Tt } from "@nextrap/nt-framework";
 import "@nextrap/nte-offcanvas";
-import { html as T, unsafeCSS as H, LitElement as j } from "lit";
-import { customElement as J, property as O, state as zt } from "lit/decorators.js";
-import { createRef as mt, ref as yt } from "lit/directives/ref.js";
+import { html as z, unsafeCSS as H, LitElement as j } from "lit";
+import { customElement as J, property as N, state as zt } from "lit/decorators.js";
+import { createRef as wt, ref as yt } from "lit/directives/ref.js";
 import { EventBindingsMixin as ae, LoggingMixin as oe, Listen as ne } from "@trunkjs/browser-utils";
 import { styleMap as se } from "lit/directives/style-map.js";
 import "@nextrap/nte-burger";
 const le = ":host{--container-width: var(--nt-container-width);--text-color: var(--nt-text);--hover-color: var(--nt-primary);--hover-text-color: var(--nt-text-on-primary);--transition: .2s ease-in-out;--submenu-bg: var(--nt-light);--submenu-text-color: var(--nt-text);--justify-content: center;--sidemenu-bg: var(--nt-primary-subtle);--justify-sidebar-burger: flex-end;--height: auto;--default-alpha: .7;height:var(--height);display:block}nav{height:100%}#main{height:100%}#burger-wrapper{padding:15px}#text{padding-right:10px}#burger-default{cursor:pointer}#burger-default slot::slotted(span){color:rgb(from var(--text-color) r g b/var(--default-alpha));transition:color var(--transition)}#burger-default nte-burger{--color: rgb(from var(--text-color) r g b / var(--default-alpha))}#burger-default:hover slot::slotted(span){color:rgb(from var(--text-color) r g b/1)}#burger-default:hover nte-burger{--color: rgb(from var(--text-color) r g b / 1)}";
-var de = Object.create, tt = Object.defineProperty, ce = Object.getOwnPropertyDescriptor, Ct = (t, e) => (e = Symbol[t]) ? e : Symbol.for("Symbol." + t), C = (t) => {
+var de = Object.create, tt = Object.defineProperty, ce = Object.getOwnPropertyDescriptor, Ct = (t, e) => (e = Symbol[t]) ? e : Symbol.for("Symbol." + t), P = (t) => {
   throw TypeError(t);
-}, he = (t, e, r) => e in t ? tt(t, e, { enumerable: !0, configurable: !0, writable: !0, value: r }) : t[e] = r, St = (t, e) => tt(t, "name", { value: e, configurable: !0 }), pe = (t) => [, , , de((t == null ? void 0 : t[Ct("metadata")]) ?? null)], Pt = ["class", "method", "getter", "setter", "accessor", "field", "value", "get", "set"], D = (t) => t !== void 0 && typeof t != "function" ? C("Function expected") : t, ve = (t, e, r, n, a) => ({ kind: Pt[t], name: e, metadata: n, addInitializer: (o) => r._ ? C("Already initialized") : a.push(D(o || null)) }), ue = (t, e) => he(e, Ct("metadata"), t[3]), y = (t, e, r, n) => {
+}, he = (t, e, r) => e in t ? tt(t, e, { enumerable: !0, configurable: !0, writable: !0, value: r }) : t[e] = r, St = (t, e) => tt(t, "name", { value: e, configurable: !0 }), pe = (t) => [, , , de((t == null ? void 0 : t[Ct("metadata")]) ?? null)], Pt = ["class", "method", "getter", "setter", "accessor", "field", "value", "get", "set"], Y = (t) => t !== void 0 && typeof t != "function" ? P("Function expected") : t, ve = (t, e, r, n, a) => ({ kind: Pt[t], name: e, metadata: n, addInitializer: (o) => r._ ? P("Already initialized") : a.push(Y(o || null)) }), ue = (t, e) => he(e, Ct("metadata"), t[3]), y = (t, e, r, n) => {
   for (var a = 0, o = t[e >> 1], h = o && o.length; a < h; a++) e & 1 ? o[a].call(r) : n = o[a].call(r, n);
   return n;
-}, P = (t, e, r, n, a, o) => {
-  var h, s, b, p, f, i = e & 7, g = !!(e & 8), d = !!(e & 16), _ = i > 3 ? t.length + 1 : i ? g ? 1 : 2 : 0, k = Pt[i + 5], N = i > 3 && (t[_ - 1] = []), W = t[_] || (t[_] = []), c = i && (!d && !g && (a = a.prototype), i < 5 && (i > 3 || !d) && ce(i < 4 ? a : { get [r]() {
+}, M = (t, e, r, n, a, o) => {
+  var h, s, b, p, f, i = e & 7, g = !!(e & 8), d = !!(e & 16), _ = i > 3 ? t.length + 1 : i ? g ? 1 : 2 : 0, k = Pt[i + 5], E = i > 3 && (t[_ - 1] = []), W = t[_] || (t[_] = []), c = i && (!d && !g && (a = a.prototype), i < 5 && (i > 3 || !d) && ce(i < 4 ? a : { get [r]() {
     return $t(this, o);
   }, set [r](l) {
     return xt(this, o, l);
   } }, r));
   i ? d && i < 4 && St(o, (i > 2 ? "set " : i > 1 ? "get " : "") + r) : St(a, r);
-  for (var w = n.length - 1; w >= 0; w--)
-    p = ve(i, r, b = {}, t[3], W), i && (p.static = g, p.private = d, f = p.access = { has: d ? (l) => _e(a, l) : (l) => r in l }, i ^ 3 && (f.get = d ? (l) => (i ^ 1 ? $t : fe)(l, a, i ^ 4 ? o : c.get) : (l) => l[r]), i > 2 && (f.set = d ? (l, m) => xt(l, a, m, i ^ 4 ? o : c.set) : (l, m) => l[r] = m)), s = (0, n[w])(i ? i < 4 ? d ? o : c[k] : i > 4 ? void 0 : { get: c.get, set: c.set } : a, p), b._ = 1, i ^ 4 || s === void 0 ? D(s) && (i > 4 ? N.unshift(s) : i ? d ? o = s : c[k] = s : a = s) : typeof s != "object" || s === null ? C("Object expected") : (D(h = s.get) && (c.get = h), D(h = s.set) && (c.set = h), D(h = s.init) && N.unshift(h));
+  for (var m = n.length - 1; m >= 0; m--)
+    p = ve(i, r, b = {}, t[3], W), i && (p.static = g, p.private = d, f = p.access = { has: d ? (l) => _e(a, l) : (l) => r in l }, i ^ 3 && (f.get = d ? (l) => (i ^ 1 ? $t : fe)(l, a, i ^ 4 ? o : c.get) : (l) => l[r]), i > 2 && (f.set = d ? (l, w) => xt(l, a, w, i ^ 4 ? o : c.set) : (l, w) => l[r] = w)), s = (0, n[m])(i ? i < 4 ? d ? o : c[k] : i > 4 ? void 0 : { get: c.get, set: c.set } : a, p), b._ = 1, i ^ 4 || s === void 0 ? Y(s) && (i > 4 ? E.unshift(s) : i ? d ? o = s : c[k] = s : a = s) : typeof s != "object" || s === null ? P("Object expected") : (Y(h = s.get) && (c.get = h), Y(h = s.set) && (c.set = h), Y(h = s.init) && E.unshift(h));
   return i || ue(t, a), c && tt(a, r, c), d ? i ^ 4 ? o : c : a;
-}, et = (t, e, r) => e.has(t) || C("Cannot " + r), _e = (t, e) => Object(e) !== e ? C('Cannot use the "in" operator on this value') : t.has(e), $t = (t, e, r) => (et(t, e, "read from private field"), r ? r.call(t) : e.get(t)), R = (t, e, r) => e.has(t) ? C("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(t) : e.set(t, r), xt = (t, e, r, n) => (et(t, e, "write to private field"), n ? n.call(t, r) : e.set(t, r), r), fe = (t, e, r) => (et(t, e, "access private method"), r), Mt, Lt, It, Wt, Rt, K, Bt, v, rt, it, at, ot, nt;
+}, et = (t, e, r) => e.has(t) || P("Cannot " + r), _e = (t, e) => Object(e) !== e ? P('Cannot use the "in" operator on this value') : t.has(e), $t = (t, e, r) => (et(t, e, "read from private field"), r ? r.call(t) : e.get(t)), B = (t, e, r) => e.has(t) ? P("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(t) : e.set(t, r), xt = (t, e, r, n) => (et(t, e, "write to private field"), n ? n.call(t, r) : e.set(t, r), r), fe = (t, e, r) => (et(t, e, "access private method"), r), Mt, Lt, It, Rt, Wt, K, Bt, v, rt, it, at, ot, nt;
 Bt = [J("nte-nav")];
-class $ extends (K = j, Rt = [O({ type: String, reflect: !0 })], Wt = [O({ type: String, reflect: !0 })], It = [O({ type: String, reflect: !0, attribute: "transfer-to" })], Lt = [O({ type: String, reflect: !1, attribute: "data-group-name" })], Mt = [zt()], K) {
+class $ extends (K = j, Wt = [N({ type: String, reflect: !0 })], Rt = [N({ type: String, reflect: !0 })], It = [N({ type: String, reflect: !0, attribute: "transfer-to" })], Lt = [N({ type: String, reflect: !1, attribute: "data-group-name" })], Mt = [zt()], K) {
   constructor() {
-    super(), R(this, rt, y(v, 8, this, "slave")), y(v, 11, this), R(this, it, y(v, 12, this, "99999px")), y(v, 15, this), R(this, at, y(v, 16, this, "")), y(v, 19, this), R(this, ot, y(v, 20, this, "")), y(v, 23, this), R(this, nt, y(v, 24, this, !1)), y(v, 27, this);
+    super(), B(this, rt, y(v, 8, this, "slave")), y(v, 11, this), B(this, it, y(v, 12, this, "99999px")), y(v, 15, this), B(this, at, y(v, 16, this, "")), y(v, 19, this), B(this, ot, y(v, 20, this, "")), y(v, 23, this), B(this, nt, y(v, 24, this, !1)), y(v, 27, this);
   }
   getOffcanvas() {
     return this.transferTo ? document.querySelector(this.transferTo) : null;
@@ -36,7 +36,7 @@ class $ extends (K = j, Rt = [O({ type: String, reflect: !0 })], Wt = [O({ type:
     return e ? e.querySelector("nte-nav") : null;
   }
   render() {
-    return T` <nav>
+    return z` <nav>
       <div id="burger-wrapper" ?hidden=${!this._isTransferred}>
         <slot
           name="burger"
@@ -50,7 +50,7 @@ class $ extends (K = j, Rt = [O({ type: String, reflect: !0 })], Wt = [O({ type:
     }}
         >
           <!-- fallback icon -->
-          ${this._isTransferred ? T`<div id="burger-default" style="display:flex; align-items: center; justify-content: center;">
+          ${this._isTransferred ? z`<div id="burger-default" style="display:flex; align-items: center; justify-content: center;">
                 <div id="text"><slot name="menu-text"></slot></div>
                 <nte-burger
                   data-group-name="${this.dataGroupName}"
@@ -89,8 +89,8 @@ class $ extends (K = j, Rt = [O({ type: String, reflect: !0 })], Wt = [O({ type:
     !r.contains("nav-vertical") && !r.contains("nav-horizontal") && r.add(this.closest("nte-offcanvas") === null ? "nav-horizontal" : "nav-vertical");
   }
   async connectedCallback() {
-    await q(), super.connectedCallback(), this.mode !== "slave" && this.transferTo !== "" && (this._isTransferred = !1, this.breakpoint !== "" && (wt(this.breakpoint) || (this._isTransferred = !0), window.addEventListener("breakpoint-changed", (e) => {
-      wt(this.breakpoint) ? this._isTransferred = !1 : this._isTransferred = !0;
+    await q(), super.connectedCallback(), this.mode !== "slave" && this.transferTo !== "" && (this._isTransferred = !1, this.breakpoint !== "" && (mt(this.breakpoint) || (this._isTransferred = !0), window.addEventListener("breakpoint-changed", (e) => {
+      mt(this.breakpoint) ? this._isTransferred = !1 : this._isTransferred = !0;
     })));
   }
 }
@@ -100,35 +100,35 @@ it = /* @__PURE__ */ new WeakMap();
 at = /* @__PURE__ */ new WeakMap();
 ot = /* @__PURE__ */ new WeakMap();
 nt = /* @__PURE__ */ new WeakMap();
-P(v, 4, "mode", Rt, $, rt);
-P(v, 4, "breakpoint", Wt, $, it);
-P(v, 4, "transferTo", It, $, at);
-P(v, 4, "dataGroupName", Lt, $, ot);
-P(v, 4, "_isTransferred", Mt, $, nt);
-$ = P(v, 0, "NteNav", Bt, $);
+M(v, 4, "mode", Wt, $, rt);
+M(v, 4, "breakpoint", Rt, $, it);
+M(v, 4, "transferTo", It, $, at);
+M(v, 4, "dataGroupName", Lt, $, ot);
+M(v, 4, "_isTransferred", Mt, $, nt);
+$ = M(v, 0, "NteNav", Bt, $);
 $.styles = [H(le)];
 y(v, 1, $);
 const ge = "*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;width:100%;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}img,picture,video,canvas,svg{display:block;max-width:100%}input,button,textarea,select{font:inherit;color:inherit;background:none;border:none;outline:none}a,i{color:inherit;text-decoration:none}ul,ol{list-style:none}table{border-collapse:collapse;border-spacing:0}slot{display:contents}:host{--bg: transparent;--spacer-bg: transparent;--container-width: var(--nt-container-width, 100%);--brand-height: 80px;--spacer-height: 80px;width:100vw;margin:0}:host(a){height:85px;width:auto}#wrapper{position:relative;left:0;top:0;right:0;width:100%}#spacer{position:relative;top:0;left:0;width:100%;transition:height .3s ease-in-out;height:var(--spacer-height);background-color:var(--spacer-bg)}#navbar{position:absolute;top:0;width:100vw;height:auto;background-color:var(--bg);z-index:1000}#main{width:100vw;display:block}";
-var be = Object.create, st = Object.defineProperty, we = Object.getOwnPropertyDescriptor, Dt = (t, e) => (e = Symbol[t]) ? e : Symbol.for("Symbol." + t), M = (t) => {
+var be = Object.create, st = Object.defineProperty, me = Object.getOwnPropertyDescriptor, Dt = (t, e) => (e = Symbol[t]) ? e : Symbol.for("Symbol." + t), L = (t) => {
   throw TypeError(t);
-}, me = (t, e, r) => e in t ? st(t, e, { enumerable: !0, configurable: !0, writable: !0, value: r }) : t[e] = r, kt = (t, e) => st(t, "name", { value: e, configurable: !0 }), ye = (t) => [, , , be((t == null ? void 0 : t[Dt("metadata")]) ?? null)], Yt = ["class", "method", "getter", "setter", "accessor", "field", "value", "get", "set"], Y = (t) => t !== void 0 && typeof t != "function" ? M("Function expected") : t, Se = (t, e, r, n, a) => ({ kind: Yt[t], name: e, metadata: n, addInitializer: (o) => r._ ? M("Already initialized") : a.push(Y(o || null)) }), $e = (t, e) => me(e, Dt("metadata"), t[3]), Q = (t, e, r, n) => {
+}, we = (t, e, r) => e in t ? st(t, e, { enumerable: !0, configurable: !0, writable: !0, value: r }) : t[e] = r, kt = (t, e) => st(t, "name", { value: e, configurable: !0 }), ye = (t) => [, , , be((t == null ? void 0 : t[Dt("metadata")]) ?? null)], Yt = ["class", "method", "getter", "setter", "accessor", "field", "value", "get", "set"], A = (t) => t !== void 0 && typeof t != "function" ? L("Function expected") : t, Se = (t, e, r, n, a) => ({ kind: Yt[t], name: e, metadata: n, addInitializer: (o) => r._ ? L("Already initialized") : a.push(A(o || null)) }), $e = (t, e) => we(e, Dt("metadata"), t[3]), Q = (t, e, r, n) => {
   for (var a = 0, o = t[e >> 1], h = o && o.length; a < h; a++) e & 1 ? o[a].call(r) : n = o[a].call(r, n);
   return n;
 }, At = (t, e, r, n, a, o) => {
-  var h, s, b, p, f, i = e & 7, g = !!(e & 8), d = !!(e & 16), _ = i > 3 ? t.length + 1 : i ? g ? 1 : 2 : 0, k = Yt[i + 5], N = i > 3 && (t[_ - 1] = []), W = t[_] || (t[_] = []), c = i && (!d && !g && (a = a.prototype), i < 5 && (i > 3 || !d) && we(i < 4 ? a : { get [r]() {
-    return Nt(this, o);
+  var h, s, b, p, f, i = e & 7, g = !!(e & 8), d = !!(e & 16), _ = i > 3 ? t.length + 1 : i ? g ? 1 : 2 : 0, k = Yt[i + 5], E = i > 3 && (t[_ - 1] = []), W = t[_] || (t[_] = []), c = i && (!d && !g && (a = a.prototype), i < 5 && (i > 3 || !d) && me(i < 4 ? a : { get [r]() {
+    return Et(this, o);
   }, set [r](l) {
-    return Ot(this, o, l);
+    return Nt(this, o, l);
   } }, r));
   i ? d && i < 4 && kt(o, (i > 2 ? "set " : i > 1 ? "get " : "") + r) : kt(a, r);
-  for (var w = n.length - 1; w >= 0; w--)
-    p = Se(i, r, b = {}, t[3], W), i && (p.static = g, p.private = d, f = p.access = { has: d ? (l) => xe(a, l) : (l) => r in l }, i ^ 3 && (f.get = d ? (l) => (i ^ 1 ? Nt : Ne)(l, a, i ^ 4 ? o : c.get) : (l) => l[r]), i > 2 && (f.set = d ? (l, m) => Ot(l, a, m, i ^ 4 ? o : c.set) : (l, m) => l[r] = m)), s = (0, n[w])(i ? i < 4 ? d ? o : c[k] : i > 4 ? void 0 : { get: c.get, set: c.set } : a, p), b._ = 1, i ^ 4 || s === void 0 ? Y(s) && (i > 4 ? N.unshift(s) : i ? d ? o = s : c[k] = s : a = s) : typeof s != "object" || s === null ? M("Object expected") : (Y(h = s.get) && (c.get = h), Y(h = s.set) && (c.set = h), Y(h = s.init) && N.unshift(h));
+  for (var m = n.length - 1; m >= 0; m--)
+    p = Se(i, r, b = {}, t[3], W), i && (p.static = g, p.private = d, f = p.access = { has: d ? (l) => xe(a, l) : (l) => r in l }, i ^ 3 && (f.get = d ? (l) => (i ^ 1 ? Et : Ee)(l, a, i ^ 4 ? o : c.get) : (l) => l[r]), i > 2 && (f.set = d ? (l, w) => Nt(l, a, w, i ^ 4 ? o : c.set) : (l, w) => l[r] = w)), s = (0, n[m])(i ? i < 4 ? d ? o : c[k] : i > 4 ? void 0 : { get: c.get, set: c.set } : a, p), b._ = 1, i ^ 4 || s === void 0 ? A(s) && (i > 4 ? E.unshift(s) : i ? d ? o = s : c[k] = s : a = s) : typeof s != "object" || s === null ? L("Object expected") : (A(h = s.get) && (c.get = h), A(h = s.set) && (c.set = h), A(h = s.init) && E.unshift(h));
   return i || $e(t, a), c && st(a, r, c), d ? i ^ 4 ? o : c : a;
-}, lt = (t, e, r) => e.has(t) || M("Cannot " + r), xe = (t, e) => Object(e) !== e ? M('Cannot use the "in" operator on this value') : t.has(e), Nt = (t, e, r) => (lt(t, e, "read from private field"), r ? r.call(t) : e.get(t)), ke = (t, e, r) => e.has(t) ? M("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(t) : e.set(t, r), Ot = (t, e, r, n) => (lt(t, e, "write to private field"), n ? n.call(t, r) : e.set(t, r), r), Ne = (t, e, r) => (lt(t, e, "access private method"), r), Ft, V, Ut, z, dt;
+}, lt = (t, e, r) => e.has(t) || L("Cannot " + r), xe = (t, e) => Object(e) !== e ? L('Cannot use the "in" operator on this value') : t.has(e), Et = (t, e, r) => (lt(t, e, "read from private field"), r ? r.call(t) : e.get(t)), ke = (t, e, r) => e.has(t) ? L("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(t) : e.set(t, r), Nt = (t, e, r, n) => (lt(t, e, "write to private field"), n ? n.call(t, r) : e.set(t, r), r), Ee = (t, e, r) => (lt(t, e, "access private method"), r), Ft, V, Ut, C, dt;
 Ut = [J("nte-navbar")];
-class U extends (V = j, Ft = [O({ type: Number, attribute: "scroll-threshold", reflect: !0 })], V) {
+class U extends (V = j, Ft = [N({ type: Number, attribute: "scroll-threshold", reflect: !0 })], V) {
   constructor() {
-    super(), this.navbarRef = mt(), this.spacerRef = mt(), ke(this, dt, Q(z, 8, this, 0)), Q(z, 11, this), this._lastScrollY = window.scrollY, this._scrollUpPixels = 0, this._debouncer = void 0, this._debouncer = new ie(100, 300), document.addEventListener(
+    super(), this.navbarRef = wt(), this.spacerRef = wt(), ke(this, dt, Q(C, 8, this, 0)), Q(C, 11, this), this._lastScrollY = window.scrollY, this._scrollUpPixels = 0, this._debouncer = void 0, this._debouncer = new ie(100, 300), document.addEventListener(
       "scroll",
       async () => {
         this.updateScrollState();
@@ -154,7 +154,7 @@ class U extends (V = j, Ft = [O({ type: Number, attribute: "scroll-threshold", r
     Tt.observeEmptySlots(this);
   }
   render() {
-    return T`
+    return z`
       <div id="wrapper" part="wrapper">
         <div id="spacer" part="spacer" ${yt(this.spacerRef)}></div>
         <div id="navbar" part="navbar" ${yt(this.navbarRef)}>
@@ -169,19 +169,19 @@ class U extends (V = j, Ft = [O({ type: Number, attribute: "scroll-threshold", r
     `;
   }
 }
-z = ye(V);
+C = ye(V);
 dt = /* @__PURE__ */ new WeakMap();
-At(z, 4, "scrollThreshold", Ft, U, dt);
-U = At(z, 0, "NteNavbar", Ut, U);
+At(C, 4, "scrollThreshold", Ft, U, dt);
+U = At(C, 0, "NteNavbar", Ut, U);
 U.styles = [H(ge)];
-Q(z, 1, U);
-const Oe = "*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;width:100%;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}img,picture,video,canvas,svg{display:block;max-width:100%}input,button,textarea,select{font:inherit;color:inherit;background:none;border:none;outline:none}a,i{color:inherit;text-decoration:none}ul,ol{list-style:none}table{border-collapse:collapse;border-spacing:0}slot{display:contents}:host{--container-width: var(--nt-container-width, 100%);--background: transparent;--text-color: var(--nt-text);--height: auto;--brand-height: 80px;display:block;height:100%;width:100vw}:host(.hide-on-scroll){transition:max-height .3s ease-in-out;max-height:100px}:host(.hide-on-scroll.is-scrolled){max-height:0;overflow:hidden}#main{height:var(--height);transition:height .2s ease-in-out;overflow:visible;width:100%;display:flex;background:var(--background)}#container{width:var(--container-width);margin:0 auto;display:flex}#container #brand:has(slot[empty]){display:none}#container #brand{min-width:0;flex-shrink:1;width:auto;align-items:start;display:flex;height:100%;justify-items:center}#container #nav{display:flex;flex-grow:1;justify-content:end;align-items:center;gap:1rem}";
-var Ee = Object.create, ct = Object.defineProperty, Te = Object.getOwnPropertyDescriptor, Gt = (t, e) => (e = Symbol[t]) ? e : Symbol.for("Symbol." + t), qt = (t) => {
+Q(C, 1, U);
+const Ne = "*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;width:100%;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}img,picture,video,canvas,svg{display:block;max-width:100%}input,button,textarea,select{font:inherit;color:inherit;background:none;border:none;outline:none}a,i{color:inherit;text-decoration:none}ul,ol{list-style:none}table{border-collapse:collapse;border-spacing:0}slot{display:contents}:host{--container-width: var(--nt-container-width, 100%);--background: transparent;--text-color: var(--nt-text);--height: auto;--brand-height: 80px;display:block;height:100%;width:100vw}:host(.hide-on-scroll){transition:max-height .3s ease-in-out;max-height:100px}:host(.hide-on-scroll.is-scrolled){max-height:0;overflow:hidden}#main{height:var(--height);transition:height .2s ease-in-out;overflow:visible;width:100%;display:flex;background:var(--background)}#container{width:var(--container-width);margin:0 auto;display:flex}#container #brand:has(slot[empty]){display:none}#container #brand{min-width:0;flex-shrink:1;width:auto;align-items:start;display:flex;height:100%;justify-items:center}#container #nav{display:flex;flex-grow:1;justify-content:end;align-items:center;gap:1rem}";
+var Oe = Object.create, ct = Object.defineProperty, Te = Object.getOwnPropertyDescriptor, Gt = (t, e) => (e = Symbol[t]) ? e : Symbol.for("Symbol." + t), qt = (t) => {
   throw TypeError(t);
-}, ze = (t, e, r) => e in t ? ct(t, e, { enumerable: !0, configurable: !0, writable: !0, value: r }) : t[e] = r, Ce = (t, e) => ct(t, "name", { value: e, configurable: !0 }), Pe = (t) => [, , , Ee((t == null ? void 0 : t[Gt("metadata")]) ?? null)], Me = ["class", "method", "getter", "setter", "accessor", "field", "value", "get", "set"], Ht = (t) => t !== void 0 && typeof t != "function" ? qt("Function expected") : t, Le = (t, e, r, n, a) => ({ kind: Me[t], name: e, metadata: n, addInitializer: (o) => r._ ? qt("Already initialized") : a.push(Ht(o || null)) }), Ie = (t, e) => ze(e, Gt("metadata"), t[3]), We = (t, e, r, n) => {
+}, ze = (t, e, r) => e in t ? ct(t, e, { enumerable: !0, configurable: !0, writable: !0, value: r }) : t[e] = r, Ce = (t, e) => ct(t, "name", { value: e, configurable: !0 }), Pe = (t) => [, , , Oe((t == null ? void 0 : t[Gt("metadata")]) ?? null)], Me = ["class", "method", "getter", "setter", "accessor", "field", "value", "get", "set"], Ht = (t) => t !== void 0 && typeof t != "function" ? qt("Function expected") : t, Le = (t, e, r, n, a) => ({ kind: Me[t], name: e, metadata: n, addInitializer: (o) => r._ ? qt("Already initialized") : a.push(Ht(o || null)) }), Ie = (t, e) => ze(e, Gt("metadata"), t[3]), Re = (t, e, r, n) => {
   for (var a = 0, o = t[e >> 1], h = o && o.length; a < h; a++) o[a].call(r);
   return n;
-}, Re = (t, e, r, n, a, o) => {
+}, We = (t, e, r, n, a, o) => {
   var h, s, b, p = e & 7, f = !1, i = 0, g = t[i] || (t[i] = []), d = p && (a = a.prototype, p < 5 && (p > 3 || !f) && Te(a, r));
   Ce(a, r);
   for (var _ = n.length - 1; _ >= 0; _--)
@@ -207,7 +207,7 @@ const bt = class bt extends (Jt = j) {
     Tt.observeEmptySlots(this), this.updateScrollState();
   }
   render() {
-    return T`
+    return z`
       <div id="main" part="main">
         <div id="container" part="container">
           <div id="brand" part="brand">
@@ -221,32 +221,32 @@ const bt = class bt extends (Jt = j) {
     `;
   }
 };
-bt.styles = [H(Oe)];
+bt.styles = [H(Ne)];
 let G = bt;
 ht = Pe(Jt);
-G = Re(ht, 0, "NteNavbarLine", jt, G);
-We(ht, 1, G);
-const Be = ":host{display:table;--animation-duration: .3s}.wrapper{--orig-top: 0;--orig-left: 0;--orig-width: 0;--orig-height: 0;--self-top: 0;--self-left: 0;--self-width: 100%;--self-height: 100%;display:block;width:var(--self-width);height:var(--self-height);object-fit:contain;overflow:visible;position:fixed;top:var(--self-top);left:var(--self-left);transition:all var(--animation-duration) ease-in-out}.wrapper.inactive{z-index:99999;top:calc(var(--orig-top));left:calc(var(--orig-left));width:var(--orig-width);height:var(--orig-height)}.wrapper.inactive.done{z-index:inherit;visibility:hidden}.wrapper>slot{display:contents}.wrapper ::slotted(*){width:100%;height:100%;object-fit:contain;transition:all .3s ease-in-out}";
-var De = Object.create, pt = Object.defineProperty, Ye = Object.getOwnPropertyDescriptor, Kt = (t, e) => (e = Symbol[t]) ? e : Symbol.for("Symbol." + t), L = (t) => {
+G = We(ht, 0, "NteNavbarLine", jt, G);
+Re(ht, 1, G);
+const Be = ":host{display:block;--animation-duration: .3s;--auto-aspect-ratio: unset;aspect-ratio:var(--auto-aspect-ratio);height:auto;width:auto}.wrapper{--orig-top: 0;--orig-left: 0;--orig-width: 0;--orig-height: 0;--self-top: 0;--self-left: 0;--self-width: 100%;--self-height: 100%;display:inline-block;width:var(--self-width);height:var(--self-height);object-fit:contain;overflow:visible;position:fixed;top:var(--self-top);left:var(--self-left);transition:all var(--animation-duration) ease-in-out}.wrapper.inactive{z-index:99999;top:calc(var(--orig-top));left:calc(var(--orig-left));width:var(--orig-width);height:var(--orig-height)}.wrapper.inactive.done{z-index:inherit;visibility:hidden}.wrapper>slot{display:contents}.wrapper ::slotted(*){width:100%;height:100%;object-fit:contain;transition:all .3s ease-in-out}";
+var De = Object.create, pt = Object.defineProperty, Ye = Object.getOwnPropertyDescriptor, Kt = (t, e) => (e = Symbol[t]) ? e : Symbol.for("Symbol." + t), I = (t) => {
   throw TypeError(t);
-}, Ae = (t, e, r) => e in t ? pt(t, e, { enumerable: !0, configurable: !0, writable: !0, value: r }) : t[e] = r, Et = (t, e) => pt(t, "name", { value: e, configurable: !0 }), Fe = (t) => [, , , De((t == null ? void 0 : t[Kt("metadata")]) ?? null)], Qt = ["class", "method", "getter", "setter", "accessor", "field", "value", "get", "set"], A = (t) => t !== void 0 && typeof t != "function" ? L("Function expected") : t, Ue = (t, e, r, n, a) => ({ kind: Qt[t], name: e, metadata: n, addInitializer: (o) => r._ ? L("Already initialized") : a.push(A(o || null)) }), Ge = (t, e) => Ae(e, Kt("metadata"), t[3]), S = (t, e, r, n) => {
+}, Ae = (t, e, r) => e in t ? pt(t, e, { enumerable: !0, configurable: !0, writable: !0, value: r }) : t[e] = r, Ot = (t, e) => pt(t, "name", { value: e, configurable: !0 }), Fe = (t) => [, , , De((t == null ? void 0 : t[Kt("metadata")]) ?? null)], Qt = ["class", "method", "getter", "setter", "accessor", "field", "value", "get", "set"], F = (t) => t !== void 0 && typeof t != "function" ? I("Function expected") : t, Ue = (t, e, r, n, a) => ({ kind: Qt[t], name: e, metadata: n, addInitializer: (o) => r._ ? I("Already initialized") : a.push(F(o || null)) }), Ge = (t, e) => Ae(e, Kt("metadata"), t[3]), S = (t, e, r, n) => {
   for (var a = 0, o = t[e >> 1], h = o && o.length; a < h; a++) e & 1 ? o[a].call(r) : n = o[a].call(r, n);
   return n;
-}, I = (t, e, r, n, a, o) => {
-  var h, s, b, p, f, i = e & 7, g = !!(e & 8), d = !!(e & 16), _ = i > 3 ? t.length + 1 : i ? g ? 1 : 2 : 0, k = Qt[i + 5], N = i > 3 && (t[_ - 1] = []), W = t[_] || (t[_] = []), c = i && (!d && !g && (a = a.prototype), i < 5 && (i > 3 || !d) && Ye(i < 4 ? a : { get [r]() {
-    return F(this, o);
+}, R = (t, e, r, n, a, o) => {
+  var h, s, b, p, f, i = e & 7, g = !!(e & 8), d = !!(e & 16), _ = i > 3 ? t.length + 1 : i ? g ? 1 : 2 : 0, k = Qt[i + 5], E = i > 3 && (t[_ - 1] = []), W = t[_] || (t[_] = []), c = i && (!d && !g && (a = a.prototype), i < 5 && (i > 3 || !d) && Ye(i < 4 ? a : { get [r]() {
+    return T(this, o);
   }, set [r](l) {
     return X(this, o, l);
   } }, r));
-  i ? d && i < 4 && Et(o, (i > 2 ? "set " : i > 1 ? "get " : "") + r) : Et(a, r);
-  for (var w = n.length - 1; w >= 0; w--)
-    p = Ue(i, r, b = {}, t[3], W), i && (p.static = g, p.private = d, f = p.access = { has: d ? (l) => qe(a, l) : (l) => r in l }, i ^ 3 && (f.get = d ? (l) => (i ^ 1 ? F : He)(l, a, i ^ 4 ? o : c.get) : (l) => l[r]), i > 2 && (f.set = d ? (l, m) => X(l, a, m, i ^ 4 ? o : c.set) : (l, m) => l[r] = m)), s = (0, n[w])(i ? i < 4 ? d ? o : c[k] : i > 4 ? void 0 : { get: c.get, set: c.set } : a, p), b._ = 1, i ^ 4 || s === void 0 ? A(s) && (i > 4 ? N.unshift(s) : i ? d ? o = s : c[k] = s : a = s) : typeof s != "object" || s === null ? L("Object expected") : (A(h = s.get) && (c.get = h), A(h = s.set) && (c.set = h), A(h = s.init) && N.unshift(h));
+  i ? d && i < 4 && Ot(o, (i > 2 ? "set " : i > 1 ? "get " : "") + r) : Ot(a, r);
+  for (var m = n.length - 1; m >= 0; m--)
+    p = Ue(i, r, b = {}, t[3], W), i && (p.static = g, p.private = d, f = p.access = { has: d ? (l) => qe(a, l) : (l) => r in l }, i ^ 3 && (f.get = d ? (l) => (i ^ 1 ? T : He)(l, a, i ^ 4 ? o : c.get) : (l) => l[r]), i > 2 && (f.set = d ? (l, w) => X(l, a, w, i ^ 4 ? o : c.set) : (l, w) => l[r] = w)), s = (0, n[m])(i ? i < 4 ? d ? o : c[k] : i > 4 ? void 0 : { get: c.get, set: c.set } : a, p), b._ = 1, i ^ 4 || s === void 0 ? F(s) && (i > 4 ? E.unshift(s) : i ? d ? o = s : c[k] = s : a = s) : typeof s != "object" || s === null ? I("Object expected") : (F(h = s.get) && (c.get = h), F(h = s.set) && (c.set = h), F(h = s.init) && E.unshift(h));
   return i || Ge(t, a), c && pt(a, r, c), d ? i ^ 4 ? o : c : a;
-}, vt = (t, e, r) => e.has(t) || L("Cannot " + r), qe = (t, e) => Object(e) !== e ? L('Cannot use the "in" operator on this value') : t.has(e), F = (t, e, r) => (vt(t, e, "read from private field"), r ? r.call(t) : e.get(t)), B = (t, e, r) => e.has(t) ? L("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(t) : e.set(t, r), X = (t, e, r, n) => (vt(t, e, "write to private field"), n ? n.call(t, r) : e.set(t, r), r), He = (t, e, r) => (vt(t, e, "access private method"), r), Vt, Xt, Zt, te, ee, Z, re, u, ut, _t, ft, gt, E;
+}, vt = (t, e, r) => e.has(t) || I("Cannot " + r), qe = (t, e) => Object(e) !== e ? I('Cannot use the "in" operator on this value') : t.has(e), T = (t, e, r) => (vt(t, e, "read from private field"), r ? r.call(t) : e.get(t)), D = (t, e, r) => e.has(t) ? I("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(t) : e.set(t, r), X = (t, e, r, n) => (vt(t, e, "write to private field"), n ? n.call(t, r) : e.set(t, r), r), He = (t, e, r) => (vt(t, e, "access private method"), r), Vt, Xt, Zt, te, ee, Z, re, u, ut, _t, ft, gt, O;
 re = [J("nte-nav-brand-relocator")];
-class x extends (Z = ae(oe(j)), ee = [O({ type: String, reflect: !0 })], te = [O({ type: Boolean, reflect: !0 })], Zt = [O({ type: String, reflect: !0 })], Xt = [zt()], Vt = [ne("scroll", { target: "window", options: { passive: !0 } })], Z) {
+class x extends (Z = ae(oe(j)), ee = [N({ type: String, reflect: !0 })], te = [N({ type: Boolean, reflect: !0 })], Zt = [N({ type: String, reflect: !0 })], Xt = [zt()], Vt = [ne("scroll", { target: "window", options: { passive: !0 } })], Z) {
   constructor() {
-    super(...arguments), S(u, 5, this), B(this, ut, S(u, 8, this, ".brand-image")), S(u, 11, this), B(this, _t, S(u, 12, this, null)), S(u, 15, this), B(this, ft, S(u, 16, this, "auto")), S(u, 19, this), B(this, gt, S(u, 20, this, !1)), S(u, 23, this), B(this, E, null);
+    super(...arguments), S(u, 5, this), D(this, ut, S(u, 8, this, ".brand-image")), S(u, 11, this), D(this, _t, S(u, 12, this, null)), S(u, 15, this), D(this, ft, S(u, 16, this, "auto")), S(u, 19, this), D(this, gt, S(u, 20, this, !1)), S(u, 23, this), D(this, O, null);
   }
   onScroll() {
     if (this.mode !== "auto") {
@@ -257,26 +257,30 @@ class x extends (Z = ae(oe(j)), ee = [O({ type: String, reflect: !0 })], te = [O
     e !== this.active && (this.active = e);
   }
   onanimationEnd() {
-    this.log("Animation ended - finalizing state"), this.active || (F(this, E).style.visibility = "visible", this.done = !0);
+    this.log("Animation ended - finalizing state"), this.active || (this.brandElement.style.visibility = "visible", this.done = !0);
+  }
+  get brandElement() {
+    return T(this, O) || (X(this, O, document.querySelector(this.brandSelector)), T(this, O) || this.warn(`Brand element not found using selector: ${this.brandSelector}`)), T(this, O);
   }
   render() {
-    var a;
-    const e = (a = F(this, E)) == null ? void 0 : a.getBoundingClientRect(), r = this.getBoundingClientRect();
+    const e = this.brandElement.getBoundingClientRect(), r = e.width / e.height;
+    this.style.setProperty("--auto-aspect-ratio", r.toString());
+    const n = this.getBoundingClientRect();
     if (!e)
-      return T`<div>No brand element found</div>`;
-    const n = {
+      return z`<div>No brand element found</div>`;
+    const a = {
       "--orig-top": e.top + "px",
       "--orig-left": e.left + "px",
       "--orig-width": e.width + "px",
       "--orig-height": e.height + "px",
-      "--self-top": r.top + "px",
-      "--self-left": r.left + "px",
-      "--self-width": r.width + "px",
-      "--self-height": r.height + "px"
+      "--self-top": n.top + "px",
+      "--self-left": n.left + "px",
+      "--self-width": n.width + "px",
+      "--self-height": n.height + "px"
     };
-    return T`<div
+    return z`<div
       class="wrapper ${this.active ? "" : "inactive"} ${this.done ? "done" : ""}"
-      style=${se(n)}
+      style=${se(a)}
       @transitionend=${() => this.onanimationEnd()}
     >
       <slot></slot>
@@ -284,11 +288,11 @@ class x extends (Z = ae(oe(j)), ee = [O({ type: String, reflect: !0 })], te = [O
   }
   update(e) {
     var r;
-    e.has("active") && this.active === !0 && ((r = F(this, E)) == null || r.style.setProperty("visibility", "hidden"), this.done = !1), super.update(e);
+    e.has("active") && this.active === !0 && ((r = T(this, O)) == null || r.style.setProperty("visibility", "hidden"), this.done = !1), super.update(e);
   }
   async firstUpdated() {
     await q();
-    const e = X(this, E, document.querySelector(this.brandSelector));
+    const e = this.brandElement;
     if (!e) {
       this.warn(`Brand element not found using selector: ${this.brandSelector}`);
       return;
@@ -302,13 +306,13 @@ ut = /* @__PURE__ */ new WeakMap();
 _t = /* @__PURE__ */ new WeakMap();
 ft = /* @__PURE__ */ new WeakMap();
 gt = /* @__PURE__ */ new WeakMap();
-E = /* @__PURE__ */ new WeakMap();
-I(u, 4, "brandSelector", ee, x, ut);
-I(u, 4, "active", te, x, _t);
-I(u, 4, "mode", Zt, x, ft);
-I(u, 4, "done", Xt, x, gt);
-I(u, 1, "onScroll", Vt, x);
-x = I(u, 0, "NteNavBrandRelocator", re, x);
+O = /* @__PURE__ */ new WeakMap();
+R(u, 4, "brandSelector", ee, x, ut);
+R(u, 4, "active", te, x, _t);
+R(u, 4, "mode", Zt, x, ft);
+R(u, 4, "done", Xt, x, gt);
+R(u, 1, "onScroll", Vt, x);
+x = R(u, 0, "NteNavBrandRelocator", re, x);
 x.styles = [H(Be)];
 S(u, 1, x);
 console.log("Loading nte-nav...");

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@nextrap/nte-nav",
-    "version": "1.1.16",
+    "version": "1.1.17",
     "main": "./index.js",
     "dependencies": {
         "@nextrap/nt-framework": "^1.1.1",