@breadstone/mosaik-elements-svelte 0.0.61 → 0.0.63

package/index.mjs

@@ -9,7 +9,7 @@ function TE() {
   Xh = !0;
 }
 TE();
-const PE = 2, DE = 8, wn = Symbol(), LE = "http://www.w3.org/1999/xhtml", Jw = !1;
+const PE = 2, DE = 8, xn = Symbol(), LE = "http://www.w3.org/1999/xhtml", Jw = !1;
 var K1 = Array.isArray, IE = Array.prototype.indexOf, Tf = Object.getOwnPropertyDescriptor, Z1 = Object.getOwnPropertyDescriptors, HE = Object.prototype, NE = Array.prototype, s0 = Object.getPrototypeOf;
 function ME(o) {
   return o();
@@ -133,7 +133,7 @@ function th(o) {
         var d = t.get(l);
         if (d === void 0) {
           if (l in s) {
-            const u = i(() => /* @__PURE__ */ ul(wn));
+            const u = i(() => /* @__PURE__ */ ul(xn));
             t.set(l, u), gy(n);
           }
         } else {
@@ -144,7 +144,7 @@ function th(o) {
             ), c = Number(l);
             Number.isInteger(c) && c < p.v && yi(p, c);
           }
-          yi(d, wn), gy(n);
+          yi(d, xn), gy(n);
         }
         return !0;
       },
@@ -154,11 +154,11 @@ function th(o) {
           return o;
         var p = t.get(l), c = l in s;
         if (p === void 0 && (!c || (g = Tf(s, l)) != null && g.writable) && (p = i(() => {
-          var f = th(c ? s[l] : wn), b = /* @__PURE__ */ ul(f);
+          var f = th(c ? s[l] : xn), b = /* @__PURE__ */ ul(f);
           return b;
         }), t.set(l, p)), p !== void 0) {
           var u = lr(p);
-          return u === wn ? void 0 : u;
+          return u === xn ? void 0 : u;
         }
         return Reflect.get(s, l, d);
       },
@@ -169,7 +169,7 @@ function th(o) {
           p && (d.value = lr(p));
         } else if (d === void 0) {
           var c = t.get(l), u = c == null ? void 0 : c.v;
-          if (c !== void 0 && u !== wn)
+          if (c !== void 0 && u !== xn)
             return {
               enumerable: !0,
               configurable: !0,
@@ -183,14 +183,14 @@ function th(o) {
         var u;
         if (l === Md)
           return !0;
-        var d = t.get(l), p = d !== void 0 && d.v !== wn || Reflect.has(s, l);
+        var d = t.get(l), p = d !== void 0 && d.v !== xn || Reflect.has(s, l);
         if (d !== void 0 || Ge !== null && (!p || (u = Tf(s, l)) != null && u.writable)) {
           d === void 0 && (d = i(() => {
-            var g = p ? th(s[l]) : wn, f = /* @__PURE__ */ ul(g);
+            var g = p ? th(s[l]) : xn, f = /* @__PURE__ */ ul(g);
             return f;
           }), t.set(l, d));
           var c = lr(d);
-          if (c === wn)
+          if (c === xn)
             return !1;
         }
         return p;
@@ -202,12 +202,12 @@ function th(o) {
           for (var g = d; g < /** @type {Source<number>} */
           c.v; g += 1) {
             var f = t.get(g + "");
-            f !== void 0 ? yi(f, wn) : g in s && (f = i(() => /* @__PURE__ */ ul(wn)), t.set(g + "", f));
+            f !== void 0 ? yi(f, xn) : g in s && (f = i(() => /* @__PURE__ */ ul(xn)), t.set(g + "", f));
           }
         if (c === void 0)
           (!u || (z = Tf(s, l)) != null && z.writable) && (c = i(() => /* @__PURE__ */ ul(void 0)), yi(c, th(d)), t.set(l, c));
         else {
-          u = c.v !== wn;
+          u = c.v !== xn;
           var b = i(() => th(d));
           yi(c, b);
         }
@@ -228,10 +228,10 @@ function th(o) {
         lr(n);
         var l = Reflect.ownKeys(s).filter((c) => {
           var u = t.get(c);
-          return u === void 0 || u.v !== wn;
+          return u === void 0 || u.v !== xn;
         });
         for (var [d, p] of t)
-          p.v !== wn && !(d in s) && l.push(d);
+          p.v !== xn && !(d in s) && l.push(d);
         return l;
       },
       setPrototypeOf() {
@@ -557,7 +557,7 @@ let Jo = null;
 function mC(o) {
   ye !== null && ye.f & Wy && (Jo === null ? Jo = [ye, [o]] : Jo[1].push(o));
 }
-let Nr = null, zn = 0, ea = null;
+let Nr = null, jn = 0, ea = null;
 function yC(o) {
   ea = o;
 }
@@ -615,9 +615,9 @@ function mj(o, e, t = !0) {
 }
 function yj(o) {
   var g;
-  var e = Nr, t = zn, r = ea, n = ye, a = yl, i = Jo, s = so, l = vi, d = o.f;
+  var e = Nr, t = jn, r = ea, n = ye, a = yl, i = Jo, s = so, l = vi, d = o.f;
   Nr = /** @type {null | Value[]} */
-  null, zn = 0, ea = null, yl = (d & An) !== 0 && (vi || !Bd || ye === null), ye = (d & (Kh | yg)) === 0 ? o : null, Jo = null, Qw(o.ctx), vi = !1, Xf++, o.f |= Wy;
+  null, jn = 0, ea = null, yl = (d & An) !== 0 && (vi || !Bd || ye === null), ye = (d & (Kh | yg)) === 0 ? o : null, Jo = null, Qw(o.ctx), vi = !1, Xf++, o.f |= Wy;
   try {
     var p = (
       /** @type {Function} */
@@ -625,15 +625,15 @@ function yj(o) {
     ), c = o.deps;
     if (Nr !== null) {
       var u;
-      if (Kf(o, zn), c !== null && zn > 0)
-        for (c.length = zn + Nr.length, u = 0; u < Nr.length; u++)
-          c[zn + u] = Nr[u];
+      if (Kf(o, jn), c !== null && jn > 0)
+        for (c.length = jn + Nr.length, u = 0; u < Nr.length; u++)
+          c[jn + u] = Nr[u];
       else
         o.deps = c = Nr;
       if (!yl)
-        for (u = zn; u < c.length; u++)
+        for (u = jn; u < c.length; u++)
           ((g = c[u]).reactions ?? (g.reactions = [])).push(o);
-    } else c !== null && zn < c.length && (Kf(o, zn), c.length = zn);
+    } else c !== null && jn < c.length && (Kf(o, jn), c.length = jn);
     if (am() && ea !== null && !vi && c !== null && (o.f & (Ma | Ic | Cs)) === 0)
       for (u = 0; u < /** @type {Source[]} */
       ea.length; u++)
@@ -647,7 +647,7 @@ function yj(o) {
   } catch (f) {
     bC(f);
   } finally {
-    Nr = e, zn = t, ea = r, ye = n, yl = a, Jo = i, Qw(s), vi = l, o.f ^= Wy;
+    Nr = e, jn = t, ea = r, ye = n, yl = a, Jo = i, Qw(s), vi = l, o.f ^= Wy;
   }
 }
 function vC(o, e) {
@@ -764,7 +764,7 @@ function lr(o) {
   if (ye !== null && !vi) {
     if (!(Jo != null && Jo[1].includes(o)) || Jo[0] !== ye) {
       var r = ye.deps;
-      o.rv < Xf && (o.rv = Xf, Nr === null && r !== null && r[zn] === o ? zn++ : Nr === null ? Nr = [o] : (!yl || !Nr.includes(o)) && Nr.push(o));
+      o.rv < Xf && (o.rv = Xf, Nr === null && r !== null && r[jn] === o ? jn++ : Nr === null ? Nr = [o] : (!yl || !Nr.includes(o)) && Nr.push(o));
     }
   } else if (t && /** @type {Derived} */
   o.deps === null && /** @type {Derived} */
@@ -4080,9 +4080,9 @@ function nB(o) {
   return Math.round(parseFloat(o) * 255).toString(16);
 }
 function Ok(o) {
-  return _n(o) / 255;
+  return kn(o) / 255;
 }
-function _n(o) {
+function kn(o) {
   return parseInt(o, 16);
 }
 function aB(o) {
@@ -4244,7 +4244,7 @@ const rv = {
 };
 function iB(o) {
   let e = { r: 0, g: 0, b: 0 }, t = 1, r = null, n = null, a = null, i = !1, s = !1;
-  return typeof o == "string" && (o = dB(o)), typeof o == "object" && (kn(o.r) && kn(o.g) && kn(o.b) ? (e = QM(o.r, o.g, o.b), i = !0, s = String(o.r).substr(-1) === "%" ? "prgb" : "rgb") : kn(o.h) && kn(o.s) && kn(o.v) ? (r = cf(o.s), n = cf(o.v), e = eB(o.h, r, n), i = !0, s = "hsv") : kn(o.h) && kn(o.s) && kn(o.l) ? (r = cf(o.s), a = cf(o.l), e = tB(o.h, r, a), i = !0, s = "hsl") : kn(o.c) && kn(o.m) && kn(o.y) && kn(o.k) && (e = rB(o.c, o.m, o.y, o.k), i = !0, s = "cmyk"), Object.prototype.hasOwnProperty.call(o, "a") && (t = o.a)), t = $j(t), {
+  return typeof o == "string" && (o = dB(o)), typeof o == "object" && (wn(o.r) && wn(o.g) && wn(o.b) ? (e = QM(o.r, o.g, o.b), i = !0, s = String(o.r).substr(-1) === "%" ? "prgb" : "rgb") : wn(o.h) && wn(o.s) && wn(o.v) ? (r = cf(o.s), n = cf(o.v), e = eB(o.h, r, n), i = !0, s = "hsv") : wn(o.h) && wn(o.s) && wn(o.l) ? (r = cf(o.s), a = cf(o.l), e = tB(o.h, r, a), i = !0, s = "hsl") : wn(o.c) && wn(o.m) && wn(o.y) && wn(o.k) && (e = rB(o.c, o.m, o.y, o.k), i = !0, s = "cmyk"), Object.prototype.hasOwnProperty.call(o, "a") && (t = o.a)), t = $j(t), {
     ok: i,
     format: o.format || s,
     r: Math.min(255, Math.max(e.r, 0)),
@@ -4285,30 +4285,30 @@ function dB(o) {
     y: t[3],
     k: t[4]
   } : (t = Qn.hex8.exec(o), t ? {
-    r: _n(t[1]),
-    g: _n(t[2]),
-    b: _n(t[3]),
+    r: kn(t[1]),
+    g: kn(t[2]),
+    b: kn(t[3]),
     a: Ok(t[4]),
     format: e ? "name" : "hex8"
   } : (t = Qn.hex6.exec(o), t ? {
-    r: _n(t[1]),
-    g: _n(t[2]),
-    b: _n(t[3]),
+    r: kn(t[1]),
+    g: kn(t[2]),
+    b: kn(t[3]),
     format: e ? "name" : "hex"
   } : (t = Qn.hex4.exec(o), t ? {
-    r: _n(t[1] + t[1]),
-    g: _n(t[2] + t[2]),
-    b: _n(t[3] + t[3]),
+    r: kn(t[1] + t[1]),
+    g: kn(t[2] + t[2]),
+    b: kn(t[3] + t[3]),
     a: Ok(t[4] + t[4]),
     format: e ? "name" : "hex8"
   } : (t = Qn.hex3.exec(o), t ? {
-    r: _n(t[1] + t[1]),
-    g: _n(t[2] + t[2]),
-    b: _n(t[3] + t[3]),
+    r: kn(t[1] + t[1]),
+    g: kn(t[2] + t[2]),
+    b: kn(t[3] + t[3]),
     format: e ? "name" : "hex"
   } : !1))))))))));
 }
-function kn(o) {
+function wn(o) {
   return typeof o == "number" ? !Number.isNaN(o) : Qn.CSS_UNIT.test(o);
 }
 class _e {
@@ -9692,7 +9692,7 @@ var Xk = function(o, e, t, r) {
 }, Ip = function(o, e) {
   if (typeof Reflect == "object" && typeof Reflect.metadata == "function") return Reflect.metadata(o, e);
 };
-const bn = (o) => {
+const fn = (o) => {
   class e extends o {
     // #endregion
     // #region Ctor
@@ -10492,7 +10492,7 @@ var wg = function(o, e, t, r) {
 }, Rs = function(o, e) {
   if (typeof Reflect == "object" && typeof Reflect.metadata == "function") return Reflect.metadata(o, e);
 };
-let yh = class extends D(et(bn(yt(X(N))))) {
+let yh = class extends D(et(fn(yt(X(N))))) {
   // #endregion
   // #region Ctor
   /**
@@ -12080,7 +12080,7 @@ var h4 = function(o, e, t, r) {
 }, Zk = function(o, e) {
   if (typeof Reflect == "object" && typeof Reflect.metadata == "function") return Reflect.metadata(o, e);
 };
-class Br extends et(yt(bn(Tt(X(Tr(N)))))) {
+class Br extends et(yt(fn(Tt(X(Tr(N)))))) {
   // #endregion
   // #region Ctor
   /**
@@ -15055,7 +15055,7 @@ function _4() {
 
     `;
 }
-class mn {
+class bn {
   // #endregion
   // #region Ctor
   /**
@@ -15127,7 +15127,7 @@ class mn {
   hostFirstUpdated() {
   }
 }
-class Zj extends mn {
+class Zj extends bn {
   // #endregion
   // #region Ctor
   /**
@@ -17122,7 +17122,7 @@ const Kl = (o) => {
     tn("design:paramtypes", [Boolean])
   ], e.prototype, "isDropDownOpen", null), e;
 };
-class Ki extends mn {
+class Ki extends bn {
   // #endregion
   // #region Ctor
   /**
@@ -18221,10 +18221,10 @@ var or;
 (function(o) {
   o.Quad = "cubic-bezier(0.250, 0.460, 0.450, 0.940)", o.Cubic = "cubic-bezier(0.215, 0.610, 0.355, 1.000)", o.Quart = "cubic-bezier(0.165, 0.840, 0.440, 1.000)", o.Quint = "cubic-bezier(0.230, 1.000, 0.320, 1.000)", o.Sine = "cubic-bezier(0.390, 0.575, 0.565, 1.000)", o.Expo = "cubic-bezier(0.190, 1.000, 0.220, 1.000)", o.Circ = "cubic-bezier(0.075, 0.820, 0.165, 1.000)", o.Back = "cubic-bezier(0.175, 0.885, 0.320, 1.275)";
 })(or || (or = {}));
-var nn;
+var rn;
 (function(o) {
   o.Quad = "cubic-bezier(0.455, 0.030, 0.515, 0.955)", o.Cubic = "cubic-bezier(0.645, 0.045, 0.355, 1.000)", o.Quart = "cubic-bezier(0.770, 0.000, 0.175, 1.000)", o.Quint = "cubic-bezier(0.860, 0.000, 0.070, 1.000)", o.Sine = "cubic-bezier(0.445, 0.050, 0.550, 0.950)", o.Expo = "cubic-bezier(1.000, 0.000, 0.000, 1.000)", o.Circ = "cubic-bezier(0.785, 0.135, 0.150, 0.860)", o.Back = "cubic-bezier(0.680, -0.550, 0.265, 1.550)";
-})(nn || (nn = {}));
+})(rn || (rn = {}));
 function Xo(o, e) {
   return {
     steps: o,
@@ -23693,7 +23693,7 @@ var np = function(o, e, t, r) {
   if (typeof Reflect == "object" && typeof Reflect.decorate == "function") a = Reflect.decorate(o, e, t, r);
   else for (var s = o.length - 1; s >= 0; s--) (i = o[s]) && (a = (n < 3 ? i(a) : n > 3 ? i(e, t, a) : i(e, t)) || a);
   return n > 3 && a && Object.defineProperty(e, t, a), a;
-}, an = function(o, e) {
+}, nn = function(o, e) {
   if (typeof Reflect == "object" && typeof Reflect.metadata == "function") return Reflect.metadata(o, e);
 };
 let Jd = class extends D(zm(rp(X(yt(et(It(Wi(Ot(N))))))))) {
@@ -23830,31 +23830,31 @@ np([
     type: Boolean,
     useDefault: !0
   }),
-  an("design:type", Boolean),
-  an("design:paramtypes", [Boolean])
+  nn("design:type", Boolean),
+  nn("design:paramtypes", [Boolean])
 ], Jd.prototype, "isOpen", null);
 np([
   m({ type: cz }),
-  an("design:type", String),
-  an("design:paramtypes", [String])
+  nn("design:type", String),
+  nn("design:paramtypes", [String])
 ], Jd.prototype, "direction", null);
 np([
   I("disabled"),
-  an("design:type", Function),
-  an("design:paramtypes", [Boolean, Boolean]),
-  an("design:returntype", void 0)
+  nn("design:type", Function),
+  nn("design:paramtypes", [Boolean, Boolean]),
+  nn("design:returntype", void 0)
 ], Jd.prototype, "onDisabledPropertyChange", null);
 np([
   I("appearance"),
-  an("design:type", Function),
-  an("design:paramtypes", [String, String]),
-  an("design:returntype", void 0)
+  nn("design:type", Function),
+  nn("design:paramtypes", [String, String]),
+  nn("design:returntype", void 0)
 ], Jd.prototype, "onAppearancePropertyChanged", null);
 np([
   I("variant"),
-  an("design:type", Function),
-  an("design:paramtypes", [String, String]),
-  an("design:returntype", void 0)
+  nn("design:type", Function),
+  nn("design:paramtypes", [String, String]),
+  nn("design:returntype", void 0)
 ], Jd.prototype, "onVariantPropertyChanged", null);
 Jd = np([
   T({
@@ -23869,7 +23869,7 @@ Jd = np([
       role: "group"
     }
   }),
-  an("design:paramtypes", [])
+  nn("design:paramtypes", [])
 ], Jd);
 function YF(o) {
   return k`
@@ -42103,7 +42103,7 @@ const no = (o) => {
   /** The Delete key, Del. */
   Delete: "Delete"
 };
-class yn extends mn {
+class mn extends bn {
   // #endregion
   // #region Ctor
   /**
@@ -43700,7 +43700,7 @@ let Eo = class extends D(Ot(Un(yt(et(X(It(no(Tt(Fn(Zr)))))))))) {
     h(this, "_maxlength");
     h(this, "_resize");
     h(this, "_textAlign");
-    this._value = "", this._multiline = !1, this._multilineRows = 3, this._multilineMaxRows = null, this._readonly = !1, this._required = !1, this._autofocus = !1, this._name = "", this._keyboard = aS.Text, this._type = Am.Text, this._pattern = "", this._placeholder = "", this._autocomplete = !1, this._minlength = null, this._maxlength = null, this._resize = Rm.None, this._textAlign = $t.Left, this._keyboardController = new yn(this);
+    this._value = "", this._multiline = !1, this._multilineRows = 3, this._multilineMaxRows = null, this._readonly = !1, this._required = !1, this._autofocus = !1, this._name = "", this._keyboard = aS.Text, this._type = Am.Text, this._pattern = "", this._placeholder = "", this._autocomplete = !1, this._minlength = null, this._maxlength = null, this._resize = Rm.None, this._textAlign = $t.Left, this._keyboardController = new mn(this);
   }
   // #endregion
   // #region Properties
@@ -44267,7 +44267,7 @@ const W6 = Xo([
 ], {
   delay: 0,
   duration: 800,
-  easing: nn.Quad
+  easing: rn.Quad
 });
 Xo([
   {
@@ -44319,7 +44319,7 @@ Xo([
 ], {
   delay: 0,
   duration: 800,
-  easing: nn.Quad
+  easing: rn.Quad
 });
 function V6(o) {
   return k`
@@ -55414,7 +55414,7 @@ let Wa = class extends D(et(yt(Ot(N)))) {
     h(this, "_lastTriggeredExpander");
     h(this, "_mode");
     h(this, "_direction");
-    this._mode = Gp.Single, this._direction = Aa.Down, this._toggled = new st(this, "toggled"), this._itemSubscriptions = [], this._lastTriggeredExpander = null, this._keyboardController = new yn(this, { capture: !0 });
+    this._mode = Gp.Single, this._direction = Aa.Down, this._toggled = new st(this, "toggled"), this._itemSubscriptions = [], this._lastTriggeredExpander = null, this._keyboardController = new mn(this, { capture: !0 });
   }
   // #endregion
   // #region Properties
@@ -56597,7 +56597,7 @@ var Ch;
     return d.startsWith(l);
   }
 })(Ch || (Ch = {}));
-class t8 extends mn {
+class t8 extends bn {
   // #endregion
   // #region Ctor
   /**
@@ -58445,7 +58445,7 @@ var m8 = function(o, e, t, r) {
 }, y8 = function(o, e) {
   if (typeof Reflect == "object" && typeof Reflect.metadata == "function") return Reflect.metadata(o, e);
 };
-let q_ = class extends D(bn(et(X(N)))) {
+let q_ = class extends D(fn(et(X(N)))) {
   // #region Ctor
   /**
    * @public
@@ -62695,7 +62695,7 @@ class el extends Tr(N) {
     h(this, "_keyboardController");
     h(this, "_isChecked");
     h(this, "_isThreeState");
-    this._isChecked = !1, this._isThreeState = !1, this._checked = new st(this, "checked"), this._unchecked = new st(this, "unchecked"), this._indeterminate = new st(this, "indeterminate"), this._keyboardController = new yn(this);
+    this._isChecked = !1, this._isThreeState = !1, this._checked = new st(this, "checked"), this._unchecked = new st(this, "unchecked"), this._indeterminate = new st(this, "indeterminate"), this._keyboardController = new mn(this);
   }
   // #endregion
   // #region Properties
@@ -66600,7 +66600,7 @@ var Dm = function(o, e, t, r) {
 }, ic = function(o, e) {
   if (typeof Reflect == "object" && typeof Reflect.metadata == "function") return Reflect.metadata(o, e);
 };
-let $u = class extends D(rp(et(yt(L0(X(bn(Tr(It(Ot(Tt(N))))))))))) {
+let $u = class extends D(rp(et(yt(L0(X(fn(Tr(It(Ot(Tt(N))))))))))) {
   // #endregion
   // #region Ctor
   /**
@@ -67622,7 +67622,7 @@ let Co = class extends D(Ot(Un(X(no(Tt(et(yt(It(Zr))))))))) {
     h(this, "_pattern");
     h(this, "_placeholder");
     h(this, "_autocomplete");
-    this._value = "", this._readonly = !1, this._required = !1, this._autofocus = !1, this._name = "", this._pattern = "", this._placeholder = "", this._autocomplete = !1, this._isEditable = !1, this._readonly = !1, this._chips = [], this._separatorKeys = new Array(kt.Enter, kt.Comma), this._pressBackspaceToRemove = !1, this._transform = null, this._chipAdded = new st(this, "chipAdded"), this._chipRemoved = new st(this, "chipRemoved"), this._keyboardController = new yn(this);
+    this._value = "", this._readonly = !1, this._required = !1, this._autofocus = !1, this._name = "", this._pattern = "", this._placeholder = "", this._autocomplete = !1, this._isEditable = !1, this._readonly = !1, this._chips = [], this._separatorKeys = new Array(kt.Enter, kt.Comma), this._pressBackspaceToRemove = !1, this._transform = null, this._chipAdded = new st(this, "chipAdded"), this._chipRemoved = new st(this, "chipRemoved"), this._keyboardController = new mn(this);
   }
   // #endregion
   // #region Properties
@@ -70348,7 +70348,7 @@ var Im = function(o, e, t, r) {
 }, sc = function(o, e) {
   if (typeof Reflect == "object" && typeof Reflect.metadata == "function") return Reflect.metadata(o, e);
 };
-let Pu = class extends D(Tt(bn(N))) {
+let Pu = class extends D(Tt(fn(N))) {
   // #endregion
   // #region Ctor
   /**
@@ -71442,7 +71442,7 @@ function UG() {
 
     `;
 }
-var vn = function(o, e, t, r) {
+var yn = function(o, e, t, r) {
   var n = arguments.length, a = n < 3 ? e : r === null ? r = Object.getOwnPropertyDescriptor(e, t) : r, i;
   if (typeof Reflect == "object" && typeof Reflect.decorate == "function") a = Reflect.decorate(o, e, t, r);
   else for (var s = o.length - 1; s >= 0; s--) (i = o[s]) && (a = (n < 3 ? i(a) : n > 3 ? i(e, t, a) : i(e, t)) || a);
@@ -71725,12 +71725,12 @@ let qr = class extends D(Ot(Un(X(no(Tt(et(yt(Kl(It(Zr)))))))))) {
     r ? this._clickOutsideController.observe() : this._clickOutsideController.unobserve();
   }
 };
-vn([
+yn([
   m({ type: String }),
   Ee("design:type", String),
   Ee("design:paramtypes", [String])
 ], qr.prototype, "value", null);
-vn([
+yn([
   m({
     type: Boolean,
     useDefault: !0
@@ -71738,7 +71738,7 @@ vn([
   Ee("design:type", Boolean),
   Ee("design:paramtypes", [Boolean])
 ], qr.prototype, "readonly", null);
-vn([
+yn([
   m({
     type: Boolean,
     useDefault: !0
@@ -71746,7 +71746,7 @@ vn([
   Ee("design:type", Boolean),
   Ee("design:paramtypes", [Boolean])
 ], qr.prototype, "required", null);
-vn([
+yn([
   m({
     type: Boolean,
     useDefault: !0
@@ -71754,22 +71754,22 @@ vn([
   Ee("design:type", Boolean),
   Ee("design:paramtypes", [Boolean])
 ], qr.prototype, "autofocus", null);
-vn([
+yn([
   m({ type: String }),
   Ee("design:type", String),
   Ee("design:paramtypes", [String])
 ], qr.prototype, "name", null);
-vn([
+yn([
   m({ type: String }),
   Ee("design:type", String),
   Ee("design:paramtypes", [String])
 ], qr.prototype, "pattern", null);
-vn([
+yn([
   m({ type: String }),
   Ee("design:type", String),
   Ee("design:paramtypes", [String])
 ], qr.prototype, "placeholder", null);
-vn([
+yn([
   m({
     type: Boolean,
     useDefault: !0
@@ -71777,17 +71777,17 @@ vn([
   Ee("design:type", Boolean),
   Ee("design:paramtypes", [Boolean])
 ], qr.prototype, "autocomplete", null);
-vn([
+yn([
   m({ type: Array }),
   Ee("design:type", Array),
   Ee("design:paramtypes", [Array])
 ], qr.prototype, "swatches", null);
-vn([
+yn([
   m({ type: $t }),
   Ee("design:type", String),
   Ee("design:paramtypes", [String])
 ], qr.prototype, "textAlign", null);
-vn([
+yn([
   m({
     type: Boolean,
     useDefault: !0
@@ -71795,7 +71795,7 @@ vn([
   Ee("design:type", Boolean),
   Ee("design:paramtypes", [])
 ], qr.prototype, "hasPrefix", null);
-vn([
+yn([
   m({
     type: Boolean,
     useDefault: !0
@@ -71803,13 +71803,13 @@ vn([
   Ee("design:type", Boolean),
   Ee("design:paramtypes", [])
 ], qr.prototype, "hasSuffix", null);
-vn([
+yn([
   I("isDropDownOpen", { waitUntilFirstUpdate: !0 }),
   Ee("design:type", Function),
   Ee("design:paramtypes", [Boolean, Boolean]),
   Ee("design:returntype", void 0)
 ], qr.prototype, "onIsDropDownOpenPropertyChanged", null);
-qr = vn([
+qr = yn([
   T({
     selector: "mosaik-colorbox",
     template: BG,
@@ -71898,7 +71898,7 @@ class jS {
     return !isNaN(e.getTime());
   }
 }
-class od extends mn {
+class od extends bn {
   // #endregion
   // #region Ctor
   constructor(t, r) {
@@ -73416,7 +73416,7 @@ let te = class extends D(Ot(Un(tl(X(no(Tt(et(yt(Kl(It(Zr))))))))))) {
       callback: () => {
         this.close();
       }
-    }), this._keyboardController = new yn(this);
+    }), this._keyboardController = new mn(this);
   }
   // #endregion
   // #region Properties
@@ -75218,7 +75218,7 @@ let ne = class extends D(Ot(Un(tl(X(no(Tt(et(yt(Kl(It(Zr))))))))))) {
     this.maxDropDownHeight = "auto", this._value = /* @__PURE__ */ new Date(), this._displayValue = "", this._readonly = !1, this._required = !1, this._autofocus = !1, this._name = "", this._placeholder = "", this._autocomplete = !1, this._values = new Array(), this._view = go.Day, this._blackoutDates = new Array(), this._specialDates = new Array(), this._minDate = null, this._maxDate = null, this._firstDayOfWeek = Ql.Sunday, this._isTodayHighlighted = !1, this._isWeekendHighlighted = !1, this._showWeekNumbers = !1, this._markerHandler = (t) => [], this._showAdjacent = !1, this._format = "yyyy-MM-dd HH:mm:ss", this._invalidInput = !1, this._textAlign = $t.Right, this._clickOutsideController = new Ki(this, {
       skipInitial: !0,
       callback: () => this.close()
-    }), this._keyboardController = new yn(this);
+    }), this._keyboardController = new mn(this);
   }
   // #endregion
   // #region Properties
@@ -76863,7 +76863,7 @@ class _a extends N {
     h(this, "_selectedItem");
     h(this, "_selectedIndex");
     h(this, "_slotChangeSubscription");
-    this._selectedItem = null, this._selectedIndex = -1, this._selectionChanged = new st(this, "selectionChanged"), this._itemsChanged = new st(this, "itemsChanged"), this._slotChangeSubscription = null, this._keyboardController = new yn(this);
+    this._selectedItem = null, this._selectedIndex = -1, this._selectionChanged = new st(this, "selectionChanged"), this._itemsChanged = new st(this, "itemsChanged"), this._slotChangeSubscription = null, this._keyboardController = new mn(this);
   }
   // #endregion
   // #region Properties
@@ -78725,7 +78725,7 @@ var up = function(o, e, t, r) {
   if (typeof Reflect == "object" && typeof Reflect.decorate == "function") a = Reflect.decorate(o, e, t, r);
   else for (var s = o.length - 1; s >= 0; s--) (i = o[s]) && (a = (n < 3 ? i(a) : n > 3 ? i(e, t, a) : i(e, t)) || a);
   return n > 3 && a && Object.defineProperty(e, t, a), a;
-}, sn = function(o, e) {
+}, an = function(o, e) {
   if (typeof Reflect == "object" && typeof Reflect.metadata == "function") return Reflect.metadata(o, e);
 };
 let Nl = class extends D(X(zS(_a))) {
@@ -78826,31 +78826,31 @@ let Nl = class extends D(X(zS(_a))) {
 };
 up([
   m({ type: lo }),
-  sn("design:type", String),
-  sn("design:paramtypes", [String])
+  an("design:type", String),
+  an("design:paramtypes", [String])
 ], Nl.prototype, "selectionMode", null);
 up([
   m({ type: String }),
-  sn("design:type", Object),
-  sn("design:paramtypes", [Object])
+  an("design:type", Object),
+  an("design:paramtypes", [Object])
 ], Nl.prototype, "value", null);
 up([
   I("selectionMode"),
-  sn("design:type", Function),
-  sn("design:paramtypes", [String, String]),
-  sn("design:returntype", void 0)
+  an("design:type", Function),
+  an("design:paramtypes", [String, String]),
+  an("design:returntype", void 0)
 ], Nl.prototype, "onSelectionModePropertyChanged", null);
 up([
   I("disabled"),
-  sn("design:type", Function),
-  sn("design:paramtypes", [Boolean, Boolean]),
-  sn("design:returntype", void 0)
+  an("design:type", Function),
+  an("design:paramtypes", [Boolean, Boolean]),
+  an("design:returntype", void 0)
 ], Nl.prototype, "onDisabledPropertyChanged", null);
 up([
   I("filter"),
-  sn("design:type", Function),
-  sn("design:paramtypes", [String, String]),
-  sn("design:returntype", void 0)
+  an("design:type", Function),
+  an("design:paramtypes", [String, String]),
+  an("design:returntype", void 0)
 ], Nl.prototype, "onFilterPropertyChanged", null);
 Nl = up([
   T({
@@ -78866,7 +78866,7 @@ Nl = up([
       role: "listbox"
     }
   }),
-  sn("design:paramtypes", [])
+  an("design:paramtypes", [])
 ], Nl);
 function AW(o) {
   return k`
@@ -81115,7 +81115,7 @@ var rs = function(o, e, t, r) {
 }, Wo = function(o, e) {
   if (typeof Reflect == "object" && typeof Reflect.metadata == "function") return Reflect.metadata(o, e);
 };
-let ln = class extends D(et(bn(yt(ee(X(N)))))) {
+let sn = class extends D(et(fn(yt(ee(X(N)))))) {
   // #endregion
   // #region Ctor
   /**
@@ -81294,48 +81294,48 @@ rs([
   m({ type: Number }),
   Wo("design:type", Number),
   Wo("design:paramtypes", [Number])
-], ln.prototype, "delay", null);
+], sn.prototype, "delay", null);
 rs([
   m({ type: Number }),
   Wo("design:type", Number),
   Wo("design:paramtypes", [Number])
-], ln.prototype, "interval", null);
+], sn.prototype, "interval", null);
 rs([
   m({ type: Nm }),
   Wo("design:type", String),
   Wo("design:paramtypes", [String])
-], ln.prototype, "position", null);
+], sn.prototype, "position", null);
 rs([
   m({ type: Boolean, useDefault: !0 }),
   Wo("design:type", Boolean),
   Wo("design:paramtypes", [Boolean])
-], ln.prototype, "increaseDisabled", null);
+], sn.prototype, "increaseDisabled", null);
 rs([
   m({ type: String }),
   Wo("design:type", String),
   Wo("design:paramtypes", [String])
-], ln.prototype, "increaseIcon", null);
+], sn.prototype, "increaseIcon", null);
 rs([
   m({ type: Boolean, useDefault: !0 }),
   Wo("design:type", Boolean),
   Wo("design:paramtypes", [Boolean])
-], ln.prototype, "decreaseDisabled", null);
+], sn.prototype, "decreaseDisabled", null);
 rs([
   m({ type: String }),
   Wo("design:type", String),
   Wo("design:paramtypes", [String])
-], ln.prototype, "decreaseIcon", null);
+], sn.prototype, "decreaseIcon", null);
 rs([
   m({ type: Boolean, useDefault: !0 }),
   Wo("design:type", Boolean),
   Wo("design:paramtypes", [Boolean])
-], ln.prototype, "focusable", null);
+], sn.prototype, "focusable", null);
 rs([
   it(),
   Wo("design:type", Object),
   Wo("design:paramtypes", [])
-], ln.prototype, "spinned", null);
-ln = rs([
+], sn.prototype, "spinned", null);
+sn = rs([
   T({
     selector: "mosaik-updown-spinner",
     template: UW,
@@ -81346,7 +81346,7 @@ ln = rs([
     }
   }),
   Wo("design:paramtypes", [])
-], ln);
+], sn);
 class VW extends Zr {
   // #endregion
   // #region Ctor
@@ -81478,21 +81478,21 @@ class Fg extends VW {
    */
   onApplyTemplate() {
     super.onApplyTemplate();
-    const t = this.shadowRoot ? gt.current.findDescendant(this.shadowRoot, ln.is) : null;
+    const t = this.shadowRoot ? gt.current.findDescendant(this.shadowRoot, sn.is) : null;
     t && (this._spinnerSpinedSubscription = ot(t, "spinned", (r) => this.onSpinned(r)));
   }
   /**
    * @protected
    */
   onInputChanged(t) {
-    const r = t.target, n = this.convertToNumber(r.min, Number.MIN_SAFE_INTEGER), a = this.convertToNumber(r.max, Number.MAX_SAFE_INTEGER), i = this.convertToNumber(r.value, 0), s = this.imposeMinMax(i, n, a), l = this.shadowRoot ? gt.current.findDescendant(this.shadowRoot, ln.is) : null;
+    const r = t.target, n = this.convertToNumber(r.min, Number.MIN_SAFE_INTEGER), a = this.convertToNumber(r.max, Number.MAX_SAFE_INTEGER), i = this.convertToNumber(r.value, 0), s = this.imposeMinMax(i, n, a), l = this.shadowRoot ? gt.current.findDescendant(this.shadowRoot, sn.is) : null;
     l && (l.increaseDisabled = !(i < a), l.decreaseDisabled = !(i > n)), (i !== s || r.valueAsNumber !== s) && this.setInputValue(s.toFixed(this._decimalPlaces));
   }
   /**
    * @private
    */
   onSpinned(t) {
-    const r = this.input, n = this.shadowRoot ? gt.current.findDescendant(this.shadowRoot, ln.is) : null;
+    const r = this.input, n = this.shadowRoot ? gt.current.findDescendant(this.shadowRoot, sn.is) : null;
     if (r && n) {
       r.focus();
       const a = this.convertToNumber(r.min, Number.MIN_SAFE_INTEGER), i = this.convertToNumber(r.max, Number.MAX_SAFE_INTEGER);
@@ -84783,7 +84783,7 @@ let ba = class extends D(X(no(Tt(et(yt(Zr)))))) {
     h(this, "_length");
     h(this, "_focusedIndex");
     h(this, "_mode");
-    this._value = "", this._readonly = !1, this._required = !1, this._autofocus = !1, this._name = "", this._pattern = "", this._placeholder = "", this._autocomplete = !1, this._length = 4, this._focusedIndex = -1, this._mode = pw.Text, this._keyboardController = new yn(this);
+    this._value = "", this._readonly = !1, this._required = !1, this._autofocus = !1, this._name = "", this._pattern = "", this._placeholder = "", this._autocomplete = !1, this._length = 4, this._focusedIndex = -1, this._mode = pw.Text, this._keyboardController = new mn(this);
   }
   // #endregion
   // #region Properties
@@ -86647,7 +86647,7 @@ var Ir = function(o, e, t, r) {
 }, Ft = function(o, e) {
   if (typeof Reflect == "object" && typeof Reflect.metadata == "function") return Reflect.metadata(o, e);
 };
-let fr = class extends D(X(Tt(It(ee(bn(et(N))))))) {
+let fr = class extends D(X(Tt(It(ee(fn(et(N))))))) {
   // #endregion
   // #region Ctor
   /**
@@ -90202,7 +90202,7 @@ let $r = class extends D(Ot(Un(X(no(Tt(et(Fn(yt(Zr))))))))) {
     h(this, "_delay");
     h(this, "_delayTimeoutId");
     h(this, "_textAlign");
-    this._value = "", this._readonly = !1, this._required = !1, this._autofocus = !1, this._name = "", this._pattern = "", this._placeholder = "", this._autocomplete = !1, this._mode = fl.Input, this._delay = 0, this._delayTimeoutId = null, this._textAlign = $t.Left, this._searched = new st(this, "searched"), this._keyboardController = new yn(this);
+    this._value = "", this._readonly = !1, this._required = !1, this._autofocus = !1, this._name = "", this._pattern = "", this._placeholder = "", this._autocomplete = !1, this._mode = fl.Input, this._delay = 0, this._delayTimeoutId = null, this._textAlign = $t.Left, this._searched = new st(this, "searched"), this._keyboardController = new mn(this);
   }
   // #endregion
   // #region Properties
@@ -92570,7 +92570,7 @@ Ob = gw([
   }),
   Hu("design:paramtypes", [])
 ], Ob);
-class tV extends mn {
+class tV extends bn {
   // #endregion
   // #region Ctor
   constructor(t, r) {
@@ -95061,7 +95061,7 @@ function fV() {
   display: none !important;
 }
 
-:host [part="root"] {
+:host {
   font-family: var(--menu-item-font-family);
   font-size: var(--menu-item-font-size);
   line-height: var(--menu-item-font-line-height);
@@ -95073,6 +95073,11 @@ function fV() {
   transition-duration: var(--menu-item-transition-duration);
   transition-timing-function: var(--menu-item-transition-mode);
   transition-property: var(--menu-item-transition-property);
+}
+
+:host [part="root"] {
+  transition-duration: inherit;
+  transition-timing-function: inherit;
   background-color: var(--menu-item-background-color);
   color: var(--menu-item-foreground-color);
   border: var(--menu-item-border-width) var(--menu-item-border-style) var(--menu-item-border-color);
@@ -95081,6 +95086,7 @@ function fV() {
   min-height: var(--menu-item-height);
   gap: var(--menu-item-gap);
   align-items: center;
+  transition-property: inherit;
   display: flex;
   position: relative;
   overflow: hidden;
@@ -95246,7 +95252,7 @@ function bV() {
   display: none !important;
 }
 
-:host [part="root"] {
+:host {
   font-family: var(--menu-item-font-family);
   font-size: var(--menu-item-font-size);
   line-height: var(--menu-item-font-line-height);
@@ -95258,6 +95264,11 @@ function bV() {
   transition-duration: var(--menu-item-transition-duration);
   transition-timing-function: var(--menu-item-transition-mode);
   transition-property: var(--menu-item-transition-property);
+}
+
+:host [part="root"] {
+  transition-duration: inherit;
+  transition-timing-function: inherit;
   background-color: var(--menu-item-background-color);
   color: var(--menu-item-foreground-color);
   border: var(--menu-item-border-width) var(--menu-item-border-style) var(--menu-item-border-color);
@@ -95266,6 +95277,7 @@ function bV() {
   min-height: var(--menu-item-height);
   gap: var(--menu-item-gap);
   align-items: center;
+  transition-property: inherit;
   display: flex;
   position: relative;
   overflow: hidden;
@@ -95386,7 +95398,7 @@ function mV() {
   display: none !important;
 }
 
-:host [part="root"] {
+:host {
   font-family: var(--menu-item-font-family);
   font-size: var(--menu-item-font-size);
   line-height: var(--menu-item-font-line-height);
@@ -95398,6 +95410,11 @@ function mV() {
   transition-duration: var(--menu-item-transition-duration);
   transition-timing-function: var(--menu-item-transition-mode);
   transition-property: var(--menu-item-transition-property);
+}
+
+:host [part="root"] {
+  transition-duration: inherit;
+  transition-timing-function: inherit;
   background-color: var(--menu-item-background-color);
   color: var(--menu-item-foreground-color);
   border: var(--menu-item-border-width) var(--menu-item-border-style) var(--menu-item-border-color);
@@ -95406,6 +95423,7 @@ function mV() {
   min-height: var(--menu-item-height);
   gap: var(--menu-item-gap);
   align-items: center;
+  transition-property: inherit;
   display: flex;
   position: relative;
   overflow: hidden;
@@ -96740,7 +96758,7 @@ let Lo = class extends D(Ot(Un(tl(X(no(Tt(et(yt(Kl(It(Zr))))))))))) {
     this._interval = 60, this._value = null, this._readonly = !1, this._required = !1, this._autofocus = !1, this._name = "", this._placeholder = "", this._autocomplete = !1, this._isEditable = !1, this._blackoutTimes = [], this._specialTimes = [], this._minTime = null, this._maxTime = null, this._textAlign = $t.Left, this._markerHandler = (t) => [], this._clickOutsideController = new Ki(this, {
       skipInitial: !0,
       callback: () => this.close()
-    }), this._keyboardController = new yn(this, {});
+    }), this._keyboardController = new mn(this, {});
   }
   // #endregion
   // #region Properties
@@ -100149,7 +100167,7 @@ function JV() {
 
     `;
 }
-class QV extends mn {
+class QV extends bn {
   // #endregion
   // #region Ctor
   constructor(t, r) {
@@ -106698,7 +106716,7 @@ var is = function(o, e, t, r) {
 }, xo = function(o, e) {
   if (typeof Reflect == "object" && typeof Reflect.metadata == "function") return Reflect.metadata(o, e);
 };
-let ya = class extends D(bn(yt(et(X(N))))) {
+let ya = class extends D(fn(yt(et(X(N))))) {
   // #endregion
   // #region Ctor
   /**
@@ -107168,7 +107186,7 @@ var Gc = function(o, e, t, r) {
 }, Qo = function(o, e) {
   if (typeof Reflect == "object" && typeof Reflect.metadata == "function") return Reflect.metadata(o, e);
 };
-let ql = class extends D(X(bn(et(yt(N))))) {
+let ql = class extends D(X(fn(et(yt(N))))) {
   // #endregion
   // #region Ctor
   /**
@@ -107816,7 +107834,7 @@ var Vg = function(o, e, t, r) {
 }, Hs = function(o, e) {
   if (typeof Reflect == "object" && typeof Reflect.metadata == "function") return Reflect.metadata(o, e);
 };
-let Ih = class extends D(yt(et(bn(X(It(N)))))) {
+let Ih = class extends D(yt(et(fn(X(It(N)))))) {
   // #endregion
   // #region Ctor
   /**
@@ -109412,7 +109430,7 @@ var BS = function(o, e, t, r) {
 }, wx = function(o, e) {
   if (typeof Reflect == "object" && typeof Reflect.metadata == "function") return Reflect.metadata(o, e);
 };
-let kx = class extends D(bn(N)) {
+let kx = class extends D(fn(N)) {
   // #endregion
   // #region Ctor
   /**
@@ -113811,7 +113829,7 @@ var il = function(o, e, t, r) {
   if (typeof Reflect == "object" && typeof Reflect.decorate == "function") a = Reflect.decorate(o, e, t, r);
   else for (var s = o.length - 1; s >= 0; s--) (i = o[s]) && (a = (n < 3 ? i(a) : n > 3 ? i(e, t, a) : i(e, t)) || a);
   return n > 3 && a && Object.defineProperty(e, t, a), a;
-}, pn = function(o, e) {
+}, hn = function(o, e) {
   if (typeof Reflect == "object" && typeof Reflect.metadata == "function") return Reflect.metadata(o, e);
 };
 let Mi = class extends D(X(Tr(N))) {
@@ -114056,40 +114074,40 @@ let Mi = class extends D(X(Tr(N))) {
 };
 il([
   Je('[part="thumb"]'),
-  pn("design:type", Hh)
+  hn("design:type", Hh)
 ], Mi.prototype, "_thumb", void 0);
 il([
   Je('[part="slider x"]'),
-  pn("design:type", HTMLInputElement)
+  hn("design:type", HTMLInputElement)
 ], Mi.prototype, "_inputX", void 0);
 il([
   Je('[part="slider y"]'),
-  pn("design:type", HTMLInputElement)
+  hn("design:type", HTMLInputElement)
 ], Mi.prototype, "_inputY", void 0);
 il([
   m({ type: String }),
-  pn("design:type", String),
-  pn("design:paramtypes", [String])
+  hn("design:type", String),
+  hn("design:paramtypes", [String])
 ], Mi.prototype, "color", null);
 il([
   P({ type: Number }),
-  pn("design:type", Number),
-  pn("design:paramtypes", [Number])
+  hn("design:type", Number),
+  hn("design:paramtypes", [Number])
 ], Mi.prototype, "x", null);
 il([
   P({ type: Number }),
-  pn("design:type", Number),
-  pn("design:paramtypes", [Number])
+  hn("design:type", Number),
+  hn("design:paramtypes", [Number])
 ], Mi.prototype, "y", null);
 il([
   P({ type: Number }),
-  pn("design:type", Number),
-  pn("design:paramtypes", [Number])
+  hn("design:type", Number),
+  hn("design:paramtypes", [Number])
 ], Mi.prototype, "hue", null);
 il([
   P({ type: Number }),
-  pn("design:type", Number),
-  pn("design:paramtypes", [Number])
+  hn("design:type", Number),
+  hn("design:paramtypes", [Number])
 ], Mi.prototype, "step", null);
 Mi = il([
   T({
@@ -114101,7 +114119,7 @@ Mi = il([
       cosmopolitan: fK
     }
   }),
-  pn("design:paramtypes", [])
+  hn("design:paramtypes", [])
 ], Mi);
 function bK() {
   return y`
@@ -114713,7 +114731,7 @@ var US = function(o, e, t, r) {
 }, qf = function(o, e) {
   if (typeof Reflect == "object" && typeof Reflect.metadata == "function") return Reflect.metadata(o, e);
 };
-let _x = class extends D(X(bn(et(yt(N))))) {
+let _x = class extends D(X(fn(et(yt(N))))) {
   // #region Ctor
   /**
    * @public
@@ -116387,7 +116405,7 @@ var Wn = function(o, e, t, r) {
 }, ue = function(o, e) {
   if (typeof Reflect == "object" && typeof Reflect.metadata == "function") return Reflect.metadata(o, e);
 };
-let un = class extends D(N) {
+let pn = class extends D(N) {
   // #endregion
   // #region Ctor
   /**
@@ -116585,69 +116603,69 @@ Wn([
   P({ type: String }),
   ue("design:type", String),
   ue("design:paramtypes", [String])
-], un.prototype, "text", null);
+], pn.prototype, "text", null);
 Wn([
   P({ type: Number }),
   ue("design:type", Number),
   ue("design:paramtypes", [Number])
-], un.prototype, "radius", null);
+], pn.prototype, "radius", null);
 Wn([
   P({ type: Number }),
   ue("design:type", Number),
   ue("design:paramtypes", [Number])
-], un.prototype, "dimension", null);
+], pn.prototype, "dimension", null);
 Wn([
   m({ type: WS }),
   ue("design:type", String),
   ue("design:paramtypes", [String])
-], un.prototype, "errorCorrection", null);
+], pn.prototype, "errorCorrection", null);
 Wn([
   m({ type: String }),
   ue("design:type", Object),
   ue("design:paramtypes", [Object])
-], un.prototype, "backgroundColor", null);
+], pn.prototype, "backgroundColor", null);
 Wn([
   m({ type: String }),
   ue("design:type", Object),
   ue("design:paramtypes", [Object])
-], un.prototype, "foregroundColor", null);
+], pn.prototype, "foregroundColor", null);
 Wn([
   I("text"),
   ue("design:type", Function),
   ue("design:paramtypes", [String, String]),
   ue("design:returntype", void 0)
-], un.prototype, "onTextPropertyChanged", null);
+], pn.prototype, "onTextPropertyChanged", null);
 Wn([
   I("radius"),
   ue("design:type", Function),
   ue("design:paramtypes", [Number, Number]),
   ue("design:returntype", void 0)
-], un.prototype, "onRadiusPropertyChanged", null);
+], pn.prototype, "onRadiusPropertyChanged", null);
 Wn([
   I("dimension"),
   ue("design:type", Function),
   ue("design:paramtypes", [Number, Number]),
   ue("design:returntype", void 0)
-], un.prototype, "onDimensionPropertyChanged", null);
+], pn.prototype, "onDimensionPropertyChanged", null);
 Wn([
   I("errorCorrection"),
   ue("design:type", Function),
   ue("design:paramtypes", [String, String]),
   ue("design:returntype", void 0)
-], un.prototype, "onErrorCorrectionPropertyChanged", null);
+], pn.prototype, "onErrorCorrectionPropertyChanged", null);
 Wn([
   I("backgroundColor"),
   ue("design:type", Function),
   ue("design:paramtypes", [Object, Object]),
   ue("design:returntype", void 0)
-], un.prototype, "onBackgroundColorPropertyChanged", null);
+], pn.prototype, "onBackgroundColorPropertyChanged", null);
 Wn([
   I("foregroundColor"),
   ue("design:type", Function),
   ue("design:paramtypes", [Object, Object]),
   ue("design:returntype", void 0)
-], un.prototype, "onForegroundColorPropertyChanged", null);
-un = Wn([
+], pn.prototype, "onForegroundColorPropertyChanged", null);
+pn = Wn([
   T({
     selector: "mosaik-qrcode",
     template: $K,
@@ -116658,7 +116676,7 @@ un = Wn([
     }
   }),
   ue("design:paramtypes", [])
-], un);
+], pn);
 const LK = {
   None: "none"
 }, _w = {
@@ -117192,7 +117210,7 @@ var Vn = function(o, e, t, r) {
 }, Ie = function(o, e) {
   if (typeof Reflect == "object" && typeof Reflect.metadata == "function") return Reflect.metadata(o, e);
 };
-let gn = class extends D(X(Ks(N))) {
+let un = class extends D(X(Ks(N))) {
   // #endregion
   // #region Ctor
   /**
@@ -117380,65 +117398,65 @@ let gn = class extends D(X(Ks(N))) {
 Vn([
   Je('[part="video"]'),
   Ie("design:type", HTMLVideoElement)
-], gn.prototype, "_videoElement", void 0);
+], un.prototype, "_videoElement", void 0);
 Vn([
   P({ type: Object }),
   Ie("design:type", Object),
   Ie("design:paramtypes", [Object])
-], gn.prototype, "src", null);
+], un.prototype, "src", null);
 Vn([
   P({ type: String }),
   Ie("design:type", String),
   Ie("design:paramtypes", [String])
-], gn.prototype, "poster", null);
+], un.prototype, "poster", null);
 Vn([
   m({ type: Boolean, useDefault: !0 }),
   Ie("design:type", Boolean),
   Ie("design:paramtypes", [Boolean])
-], gn.prototype, "autoPlay", null);
+], un.prototype, "autoPlay", null);
 Vn([
   m({ type: Boolean, useDefault: !0 }),
   Ie("design:type", Boolean),
   Ie("design:paramtypes", [Boolean])
-], gn.prototype, "autoFullScreen", null);
+], un.prototype, "autoFullScreen", null);
 Vn([
   m({ type: Boolean, useDefault: !0 }),
   Ie("design:type", Boolean),
   Ie("design:paramtypes", [Boolean])
-], gn.prototype, "showControls", null);
+], un.prototype, "showControls", null);
 Vn([
   m({ type: String }),
   Ie("design:type", String),
   Ie("design:paramtypes", [String])
-], gn.prototype, "fit", null);
+], un.prototype, "fit", null);
 Vn([
   m({ type: String }),
   Ie("design:type", String),
   Ie("design:paramtypes", [String])
-], gn.prototype, "legend", null);
+], un.prototype, "legend", null);
 Vn([
   m({ type: _w }),
   Ie("design:type", String),
   Ie("design:paramtypes", [String])
-], gn.prototype, "legendPosition", null);
+], un.prototype, "legendPosition", null);
 Vn([
   m({ type: String }),
   Ie("design:type", String),
   Ie("design:paramtypes", [String])
-], gn.prototype, "ratio", null);
+], un.prototype, "ratio", null);
 Vn([
   I("disabled", { waitUntilFirstUpdate: !0 }),
   Ie("design:type", Function),
   Ie("design:paramtypes", [Boolean, Boolean]),
   Ie("design:returntype", void 0)
-], gn.prototype, "onDisabledPropertyChanged", null);
+], un.prototype, "onDisabledPropertyChanged", null);
 Vn([
   Jt("click"),
   Ie("design:type", Function),
   Ie("design:paramtypes", []),
   Ie("design:returntype", void 0)
-], gn.prototype, "onClick", null);
-gn = Vn([
+], un.prototype, "onClick", null);
+un = Vn([
   T({
     selector: "mosaik-video",
     template: IK,
@@ -117449,7 +117467,7 @@ gn = Vn([
     }
   }),
   Ie("design:paramtypes", [])
-], gn);
+], un);
 function BK(o) {
   return k`
         <mosaik-banner part="banner"
@@ -119897,7 +119915,7 @@ y1 = cZ([
   }),
   hZ("design:paramtypes", [])
 ], y1);
-class XS extends mn {
+class XS extends bn {
   // #endregion
   // #region Ctor
   constructor(t, r) {
@@ -120667,7 +120685,7 @@ Zu = Jm([
   }),
   wc("design:paramtypes", [])
 ], Zu);
-class xZ extends mn {
+class xZ extends bn {
   // #endregion
   // #region Ctor
   /**
@@ -123198,7 +123216,7 @@ Xo([
   duration: 300,
   easing: or.Sine
 });
-class QZ extends mn {
+class QZ extends bn {
   // #endregion
   // #region Ctor
   constructor(t, r) {
@@ -124890,7 +124908,7 @@ const nh = {
   size: tt.Medium,
   thickness: [],
   invert: !1
-}, jn = {
+}, _n = {
   Top: "top",
   Right: "right",
   Bottom: "bottom",
@@ -124903,10 +124921,10 @@ function gJ(o) {
   return k`
         <style>
             :host {
-                margin-top: ${o.tryGetThickness([jn.Top, jn.Vertical, jn.All]) ?? 0};
-                margin-right: ${o.tryGetThickness([jn.Right, jn.Horizontal, jn.All]) ?? 0};
-                margin-bottom: ${o.tryGetThickness([jn.Bottom, jn.Vertical, jn.All]) ?? 0};
-                margin-left: ${o.tryGetThickness([jn.Left, jn.Horizontal, jn.All]) ?? 0};
+                margin-top: ${o.tryGetThickness([_n.Top, _n.Vertical, _n.All]) ?? 0};
+                margin-right: ${o.tryGetThickness([_n.Right, _n.Horizontal, _n.All]) ?? 0};
+                margin-bottom: ${o.tryGetThickness([_n.Bottom, _n.Vertical, _n.All]) ?? 0};
+                margin-left: ${o.tryGetThickness([_n.Left, _n.Horizontal, _n.All]) ?? 0};
             }
         </style>
         <slot></slot>
@@ -125316,7 +125334,7 @@ function yJ(o) {
                                  .size="${tt.Large}"
                                  .data="${o.icon}"></mosaik-icon>
                     `)}
-                    <mosaik-spacer .thickness="${jn.Vertical}"></mosaik-spacer>
+                    <mosaik-spacer .thickness="${_n.Vertical}"></mosaik-spacer>
                     ${O(o.message, () => k`
                     <mosaik-text part="content"
                                  .text="${o.message}"
@@ -127969,7 +127987,7 @@ var kp = function(o, e, t, r) {
   if (typeof Reflect == "object" && typeof Reflect.decorate == "function") a = Reflect.decorate(o, e, t, r);
   else for (var s = o.length - 1; s >= 0; s--) (i = o[s]) && (a = (n < 3 ? i(a) : n > 3 ? i(e, t, a) : i(e, t)) || a);
   return n > 3 && a && Object.defineProperty(e, t, a), a;
-}, dn = function(o, e) {
+}, ln = function(o, e) {
   if (typeof Reflect == "object" && typeof Reflect.metadata == "function") return Reflect.metadata(o, e);
 };
 let zc = class extends D(X(N)) {
@@ -128110,8 +128128,8 @@ let zc = class extends D(X(N)) {
 };
 kp([
   m({ type: Number }),
-  dn("design:type", Number),
-  dn("design:paramtypes", [Number])
+  ln("design:type", Number),
+  ln("design:paramtypes", [Number])
 ], zc.prototype, "angle", null);
 kp([
   m({
@@ -128120,26 +128138,26 @@ kp([
       y: Number
     }
   }),
-  dn("design:type", Object),
-  dn("design:paramtypes", [Object])
+  ln("design:type", Object),
+  ln("design:paramtypes", [Object])
 ], zc.prototype, "transformOrigin", null);
 kp([
   I("angle"),
-  dn("design:type", Function),
-  dn("design:paramtypes", [Number, Number]),
-  dn("design:returntype", void 0)
+  ln("design:type", Function),
+  ln("design:paramtypes", [Number, Number]),
+  ln("design:returntype", void 0)
 ], zc.prototype, "onAnglePropertyChanged", null);
 kp([
   I("transformOrigin"),
-  dn("design:type", Function),
-  dn("design:paramtypes", [Object, Object]),
-  dn("design:returntype", void 0)
+  ln("design:type", Function),
+  ln("design:paramtypes", [Object, Object]),
+  ln("design:returntype", void 0)
 ], zc.prototype, "onTransformOriginPropertyChanged", null);
 kp([
   I("disabled"),
-  dn("design:type", Function),
-  dn("design:paramtypes", [Boolean, Boolean]),
-  dn("design:returntype", void 0)
+  ln("design:type", Function),
+  ln("design:paramtypes", [Boolean, Boolean]),
+  ln("design:returntype", void 0)
 ], zc.prototype, "onDisabledPropertyChanged", null);
 zc = kp([
   T({
@@ -128151,7 +128169,7 @@ zc = kp([
       cosmopolitan: MJ
     }
   }),
-  dn("design:paramtypes", [])
+  ln("design:paramtypes", [])
 ], zc);
 function BJ(o) {
   return k`
@@ -128616,7 +128634,7 @@ function UJ() {
 
     `;
 }
-class qJ extends mn {
+class qJ extends bn {
   // #endregion
   // #region Ctor
   /**
@@ -128672,7 +128690,7 @@ var _p = function(o, e, t, r) {
   if (typeof Reflect == "object" && typeof Reflect.decorate == "function") a = Reflect.decorate(o, e, t, r);
   else for (var s = o.length - 1; s >= 0; s--) (i = o[s]) && (a = (n < 3 ? i(a) : n > 3 ? i(e, t, a) : i(e, t)) || a);
   return n > 3 && a && Object.defineProperty(e, t, a), a;
-}, cn = function(o, e) {
+}, dn = function(o, e) {
   if (typeof Reflect == "object" && typeof Reflect.metadata == "function") return Reflect.metadata(o, e);
 };
 let Sc = class extends D(Vo(Ks(Zl(N)))) {
@@ -128752,34 +128770,34 @@ _p([
     type: Boolean,
     useDefault: !0
   }),
-  cn("design:type", Boolean),
-  cn("design:paramtypes", [Boolean])
+  dn("design:type", Boolean),
+  dn("design:paramtypes", [Boolean])
 ], Sc.prototype, "highlighted", null);
 _p([
   m({
     type: Boolean,
     useDefault: !0
   }),
-  cn("design:type", Boolean),
-  cn("design:paramtypes", [Boolean])
+  dn("design:type", Boolean),
+  dn("design:paramtypes", [Boolean])
 ], Sc.prototype, "cornered", null);
 _p([
   I("width"),
-  cn("design:type", Function),
-  cn("design:paramtypes", [Object, Object]),
-  cn("design:returntype", void 0)
+  dn("design:type", Function),
+  dn("design:paramtypes", [Object, Object]),
+  dn("design:returntype", void 0)
 ], Sc.prototype, "onWidthPropertyChanged", null);
 _p([
   I("height"),
-  cn("design:type", Function),
-  cn("design:paramtypes", [Object, Object]),
-  cn("design:returntype", void 0)
+  dn("design:type", Function),
+  dn("design:paramtypes", [Object, Object]),
+  dn("design:returntype", void 0)
 ], Sc.prototype, "onHeightPropertyChanged", null);
 _p([
   I("fit"),
-  cn("design:type", Function),
-  cn("design:paramtypes", [String, String]),
-  cn("design:returntype", void 0)
+  dn("design:type", Function),
+  dn("design:paramtypes", [String, String]),
+  dn("design:returntype", void 0)
 ], Sc.prototype, "onFitPropertyChanged", null);
 Sc = _p([
   T({
@@ -128791,7 +128809,7 @@ Sc = _p([
       cosmopolitan: UJ
     }
   }),
-  cn("design:paramtypes", [])
+  dn("design:paramtypes", [])
 ], Sc);
 function GJ(o) {
   return k`
@@ -130985,7 +131003,7 @@ const Od = class Od {
 h(Od, "_current");
 let ph = Od;
 ph.set(new Hx());
-class bQ extends mn {
+class bQ extends bn {
   // #endregion
   // #region Ctor
   /**
@@ -131515,7 +131533,6 @@ function _Q(o) {
                         .dir="${o.dir}"
                         .wrap="${!0}"></mosaik-text>
         </slot>
-
     `;
 }
 function jQ() {
@@ -131831,6 +131848,9 @@ Ub = $w([
       joy: jQ,
       retro: zQ,
       cosmopolitan: SQ
+    },
+    host: {
+      slot: "header"
     }
   }),
   rg("design:paramtypes", [])
@@ -132161,6 +132181,9 @@ qb = Tw([
       joy: CQ,
       retro: RQ,
       cosmopolitan: AQ
+    },
+    host: {
+      slot: "subHeader"
     }
   }),
   ng("design:paramtypes", [])
@@ -135090,7 +135113,7 @@ var Dw = function(o, e, t, r) {
 }, ig = function(o, e) {
   if (typeof Reflect == "object" && typeof Reflect.metadata == "function") return Reflect.metadata(o, e);
 };
-let Wb = class extends D(bn(et(X(It(N))))) {
+let Wb = class extends D(fn(et(X(It(N))))) {
   // #endregion
   // #region Ctor
   /**
@@ -135894,7 +135917,7 @@ Vb = Lw([
   }),
   sg("design:paramtypes", [])
 ], Vb);
-class ctt extends mn {
+class ctt extends bn {
   // #endregion
   // #region Ctor
   /**
@@ -136286,7 +136309,7 @@ z-indexz-indexz-indexz-index z-indexz-index :host [part="panable-container"] [pa
 
     `;
 }
-var xn = function(o, e, t, r) {
+var vn = function(o, e, t, r) {
   var n = arguments.length, a = n < 3 ? e : r === null ? r = Object.getOwnPropertyDescriptor(e, t) : r, i;
   if (typeof Reflect == "object" && typeof Reflect.decorate == "function") a = Reflect.decorate(o, e, t, r);
   else for (var s = o.length - 1; s >= 0; s--) (i = o[s]) && (a = (n < 3 ? i(a) : n > 3 ? i(e, t, a) : i(e, t)) || a);
@@ -136443,40 +136466,40 @@ let Gr = class extends D(N) {
     this._contentContainerElement.style.transform = `translateX(${this._panOffset = t}px)`;
   }
 };
-xn([
+vn([
   Je('[part="before-panning-container"]'),
   ho("design:type", HTMLElement)
 ], Gr.prototype, "_beforePanningContainerElement", void 0);
-xn([
+vn([
   Je('[part="after-panning-container"]'),
   ho("design:type", HTMLElement)
 ], Gr.prototype, "_afterPanningContainerElement", void 0);
-xn([
+vn([
   Je('[part="content-container"]'),
   ho("design:type", HTMLElement)
 ], Gr.prototype, "_contentContainerElement", void 0);
-xn([
+vn([
   it({ eventName: "leftPanned" }),
   ho("design:type", Object)
 ], Gr.prototype, "_leftPanned", void 0);
-xn([
+vn([
   it({ eventName: "rightPanned" }),
   ho("design:type", Object)
 ], Gr.prototype, "_rightPanned", void 0);
-xn([
+vn([
   nE(),
   ho("design:type", Number)
 ], Gr.prototype, "_panOffset", void 0);
-xn([
+vn([
   nE(),
   ho("design:type", String)
 ], Gr.prototype, "_panState", void 0);
-xn([
+vn([
   m({ type: Number }),
   ho("design:type", Number),
   ho("design:paramtypes", [Number])
 ], Gr.prototype, "panEndTriggeringThreshold", null);
-xn([
+vn([
   m({
     type: Boolean,
     useDefault: !0
@@ -136484,7 +136507,7 @@ xn([
   ho("design:type", Boolean),
   ho("design:paramtypes", [Boolean])
 ], Gr.prototype, "panLeftDisabled", null);
-xn([
+vn([
   m({
     type: Boolean,
     useDefault: !0
@@ -136492,25 +136515,25 @@ xn([
   ho("design:type", Boolean),
   ho("design:paramtypes", [Boolean])
 ], Gr.prototype, "panRightDisabled", null);
-xn([
+vn([
   Jt("panstart", "self"),
   ho("design:type", Function),
   ho("design:paramtypes", [Event]),
   ho("design:returntype", void 0)
 ], Gr.prototype, "onPanStart", null);
-xn([
+vn([
   Jt("panmove", "self"),
   ho("design:type", Function),
   ho("design:paramtypes", [CustomEvent]),
   ho("design:returntype", void 0)
 ], Gr.prototype, "onPanMove", null);
-xn([
+vn([
   Jt("panend", "self"),
   ho("design:type", Function),
   ho("design:paramtypes", [Event]),
   ho("design:returntype", void 0)
 ], Gr.prototype, "onPanEnd", null);
-Gr = xn([
+Gr = vn([
   T({
     selector: "mosaik-swipe",
     template: htt,
@@ -137616,7 +137639,7 @@ var Xn = function(o, e, t, r) {
 }, He = function(o, e) {
   if (typeof Reflect == "object" && typeof Reflect.metadata == "function") return Reflect.metadata(o, e);
 };
-let fn = class extends D(X(bn(Ae(N)))) {
+let gn = class extends D(X(fn(Ae(N)))) {
   // #endregion
   // #region Ctor
   /**
@@ -137788,65 +137811,65 @@ let fn = class extends D(X(bn(Ae(N)))) {
 Xn([
   Je('[part="tooltip"]'),
   He("design:type", Do)
-], fn.prototype, "_tooltipElement", void 0);
+], gn.prototype, "_tooltipElement", void 0);
 Xn([
   m({ type: String }),
   He("design:type", String),
   He("design:paramtypes", [String])
-], fn.prototype, "content", null);
+], gn.prototype, "content", null);
 Xn([
   m({ type: Ht }),
   He("design:type", String),
   He("design:paramtypes", [String])
-], fn.prototype, "placement", null);
+], gn.prototype, "placement", null);
 Xn([
   m({ type: Number }),
   He("design:type", Number),
   He("design:paramtypes", [Number])
-], fn.prototype, "horizontalOffset", null);
+], gn.prototype, "horizontalOffset", null);
 Xn([
   m({ type: Number }),
   He("design:type", Number),
   He("design:paramtypes", [Number])
-], fn.prototype, "verticalOffset", null);
+], gn.prototype, "verticalOffset", null);
 Xn([
   m({ type: Boolean, useDefault: !0 }),
   He("design:type", Boolean),
   He("design:paramtypes", [Boolean])
-], fn.prototype, "isOpen", null);
+], gn.prototype, "isOpen", null);
 Xn([
   m({ type: Number }),
   He("design:type", Number),
   He("design:paramtypes", [Number])
-], fn.prototype, "showDelay", null);
+], gn.prototype, "showDelay", null);
 Xn([
   m({ type: Number }),
   He("design:type", Number),
   He("design:paramtypes", [Number])
-], fn.prototype, "hideDelay", null);
+], gn.prototype, "hideDelay", null);
 Xn([
   m({ type: Ra }),
   He("design:type", String),
   He("design:paramtypes", [String])
-], fn.prototype, "trigger", null);
+], gn.prototype, "trigger", null);
 Xn([
   m({ type: Boolean, useDefault: !0 }),
   He("design:type", Boolean),
   He("design:paramtypes", [Boolean])
-], fn.prototype, "staysOpen", null);
+], gn.prototype, "staysOpen", null);
 Xn([
   Jt("tooltipOpened"),
   He("design:type", Function),
   He("design:paramtypes", []),
   He("design:returntype", void 0)
-], fn.prototype, "onOpened", null);
+], gn.prototype, "onOpened", null);
 Xn([
   Jt("tooltipClosed"),
   He("design:type", Function),
   He("design:paramtypes", []),
   He("design:returntype", void 0)
-], fn.prototype, "onClosed", null);
-fn = Xn([
+], gn.prototype, "onClosed", null);
+gn = Xn([
   T({
     selector: "mosaik-toggletip",
     template: _tt,
@@ -137857,7 +137880,7 @@ fn = Xn([
     }
   }),
   He("design:paramtypes", [])
-], fn);
+], gn);
 const ra = {
   /**
    * `normal` -
@@ -138147,7 +138170,7 @@ var Xc = function(o, e, t, r) {
   if (typeof Reflect == "object" && typeof Reflect.decorate == "function") a = Reflect.decorate(o, e, t, r);
   else for (var s = o.length - 1; s >= 0; s--) (i = o[s]) && (a = (n < 3 ? i(a) : n > 3 ? i(e, t, a) : i(e, t)) || a);
   return n > 3 && a && Object.defineProperty(e, t, a), a;
-}, hn = function(o, e) {
+}, cn = function(o, e) {
   if (typeof Reflect == "object" && typeof Reflect.metadata == "function") return Reflect.metadata(o, e);
 };
 let Gl = class extends D(et(ee(X(It(Xl))))) {
@@ -138247,28 +138270,28 @@ let Gl = class extends D(et(ee(X(It(Xl))))) {
 };
 Xc([
   m({ type: Number }),
-  hn("design:type", Number),
-  hn("design:paramtypes", [Number])
+  cn("design:type", Number),
+  cn("design:paramtypes", [Number])
 ], Gl.prototype, "thickness", null);
 Xc([
   m({ type: Number }),
-  hn("design:type", Number),
-  hn("design:paramtypes", [Number])
+  cn("design:type", Number),
+  cn("design:paramtypes", [Number])
 ], Gl.prototype, "high", null);
 Xc([
   m({ type: Number }),
-  hn("design:type", Number),
-  hn("design:paramtypes", [Number])
+  cn("design:type", Number),
+  cn("design:paramtypes", [Number])
 ], Gl.prototype, "low", null);
 Xc([
   m({ type: Number }),
-  hn("design:type", Number),
-  hn("design:paramtypes", [Number])
+  cn("design:type", Number),
+  cn("design:paramtypes", [Number])
 ], Gl.prototype, "optimum", null);
 Xc([
   m({ type: ra }),
-  hn("design:type", String),
-  hn("design:paramtypes", [String])
+  cn("design:type", String),
+  cn("design:paramtypes", [String])
 ], Gl.prototype, "range", null);
 Xc([
   I("value"),
@@ -138277,9 +138300,9 @@ Xc([
   I("low"),
   I("high"),
   I("optimum"),
-  hn("design:type", Function),
-  hn("design:paramtypes", []),
-  hn("design:returntype", void 0)
+  cn("design:type", Function),
+  cn("design:paramtypes", []),
+  cn("design:returntype", void 0)
 ], Gl.prototype, "onPropertyChanged", null);
 Gl = Xc([
   T({
@@ -138294,7 +138317,7 @@ Gl = Xc([
       role: "meter"
     }
   }),
-  hn("design:paramtypes", [])
+  cn("design:paramtypes", [])
 ], Gl);
 function Ott(o) {
   return k`
@@ -147903,7 +147926,7 @@ let Vl = Kx = class extends D(Ot(X(et(yt(N))))) {
     h(this, "_indicatorElement");
     h(this, "_resizeController");
     h(this, "_keyboardController");
-    this._indicatorElement = null, this._keyboardController = new yn(this, { capture: !0 }), this._resizeController = new od(this, {
+    this._indicatorElement = null, this._keyboardController = new mn(this, { capture: !0 }), this._resizeController = new od(this, {
       callback: () => {
         const t = this.getCurrent();
         t && this.alignIndicatorTo(t);
@@ -148954,7 +148977,7 @@ let gh = class extends D(It(Wi(X(Tr(et(ee(dE(Tt(N))))))))) {
     // #region Fields
     h(this, "_keyboardController");
     h(this, "_placement");
-    this._placement = Rn.Bottom, this._keyboardController = new yn(this, { capture: !0 });
+    this._placement = Rn.Bottom, this._keyboardController = new mn(this, { capture: !0 });
   }
   // #endregion
   // #region Properties
@@ -149364,7 +149387,7 @@ let wa = class extends D(Ot(X(et(yt(N))))) {
     h(this, "_indicatorElement");
     h(this, "_placement");
     h(this, "_hasIndicator");
-    this._placement = Rn.Top, this._hasIndicator = !0, this._indicatorElement = null, this._keyboardController = new yn(this, { capture: !0 }), this._resizeController = new od(this, {
+    this._placement = Rn.Top, this._hasIndicator = !0, this._indicatorElement = null, this._keyboardController = new mn(this, { capture: !0 }), this._resizeController = new od(this, {
       callback: () => {
         const t = this.getCurrent();
         t && this.alignIndicatorTo(t);
@@ -154944,7 +154967,7 @@ let jl = class extends hW(tl(Fw(et(yt(X(Tr(Tt(N)))))))) {
     h(this, "_boardElement");
     h(this, "_header");
     h(this, "_lane");
-    this._boardElement = null, this._header = "", this._lane = 0, this._keyboardController = new yn(this);
+    this._boardElement = null, this._header = "", this._lane = 0, this._keyboardController = new mn(this);
   }
   // #endregion
   // #region Properties
@@ -156271,7 +156294,7 @@ function Ort(o) {
         </mosaik-theme2>
     `;
 }
-const rn = class rn extends mn {
+const zn = class zn extends bn {
   // #endregion
   // #region Ctor
   /**
@@ -156356,15 +156379,15 @@ const rn = class rn extends mn {
    * @public
    * @override
    */
-  hostConnected() {
-    this.observe(), this._headerOnTop && this.showHeader();
+  hostFirstUpdated() {
+    super.hostFirstUpdated(), this.observe(), this._headerOnTop && this.showHeader();
   }
   /**
    * @public
    * @override
    */
   hostDisconnected() {
-    this.unobserve();
+    this.unobserve(), super.hostDisconnected();
   }
   /**
    * Restores the header to its original state.
@@ -156419,7 +156442,7 @@ const rn = class rn extends mn {
    */
   handleScrollWithHide() {
     const t = this.getCurrentScrollProperty("scrollTop");
-    this.isBouncingAtEdge(t) || (this.host.toggleAttribute(rn.SHADOW_ATTR, t !== 0), this.isScrollingDown(t) ? this.hideHeader() : this.isScrollingUp(t) && this.showHeader(), this._lastScroll = Math.max(0, t));
+    this.isBouncingAtEdge(t) || (this.isScrollingDown(t) ? this.hideHeader() : this.isScrollingUp(t) && this.showHeader(), this._lastScroll = Math.max(0, t));
   }
   /**
    * Handles the scroll events when hideOnScroll is false.
@@ -156427,7 +156450,7 @@ const rn = class rn extends mn {
    * @private
    */
   handleScrollWithShadow() {
-    this.host.toggleAttribute(rn.SHADOW_ATTR, this.getCurrentScrollProperty("scrollTop") !== 0);
+    this.host.toggleAttribute(zn.SHADOW_ATTR, this.getCurrentScrollProperty("scrollTop") !== 0);
   }
   /**
    * Returns the requested scroll property of the scroll context.
@@ -156475,8 +156498,8 @@ const rn = class rn extends mn {
   hideHeader() {
     if (this._behavior === "auto")
       this._headerOnTop = !1, [
-        rn.SHADOW_ATTR,
-        rn.VISIBLE_ATTR
+        zn.SHADOW_ATTR,
+        zn.VISIBLE_ATTR
       ].forEach((t) => {
         this.host.removeAttribute(t);
       });
@@ -156484,7 +156507,7 @@ const rn = class rn extends mn {
       const t = this.getCurrentScrollProperty("scrollTop");
       if (t > this._scrollDownThreshold) {
         const r = this.host.offsetHeight, n = t - r;
-        n > 0 && n < r && (this._headerOnTop = !1, this.host.style.top = `-${n}px`);
+        n > 0 && n < r && (this._headerOnTop = !1, Y.current.setStyle(this.host, "top", `-${n}px`));
       }
     }
   }
@@ -156496,29 +156519,33 @@ const rn = class rn extends mn {
   showHeader() {
     if (this._behavior === "auto")
       this._headerOnTop = !0, [
-        rn.FIXED_ATTR,
-        rn.ANIMATED_ATTR,
-        rn.VISIBLE_ATTR
-      ].forEach((t) => this.host.toggleAttribute(t, !0)), [rn.SHADOW_ATTR].forEach((t) => this.host.toggleAttribute(t, this.getCurrentScrollProperty("scrollTop") !== 0));
+        zn.FIXED_ATTR,
+        zn.ANIMATED_ATTR,
+        zn.VISIBLE_ATTR
+      ].forEach((t) => this.host.toggleAttribute(t, !0)), [zn.SHADOW_ATTR].forEach((t) => this.host.toggleAttribute(t, this.getCurrentScrollProperty("scrollTop") !== 0));
     else {
       const t = this.getCurrentScrollProperty("scrollTop"), r = this._lastScroll - t;
-      this.host.style.top = `${r}px`;
+      Y.current.setStyle(this.host, "top", `${r}px`);
     }
   }
 };
 // #region Fields
-h(rn, "SHADOW_ATTR", "data-shadow"), h(rn, "VISIBLE_ATTR", "data-visible"), h(rn, "FIXED_ATTR", "data-fixed"), h(rn, "ANIMATED_ATTR", "data-animated");
-let Qx = rn;
+h(zn, "SHADOW_ATTR", "data-shadow"), h(zn, "VISIBLE_ATTR", "data-visible"), h(zn, "FIXED_ATTR", "data-fixed"), h(zn, "ANIMATED_ATTR", "data-animated");
+let Qx = zn;
 function $rt(o) {
   return k`
     <div part="root">
+        <!-- todo: add busy indicator here -->
         <mosaik-toolbar part="toolbar"
                         .appearance="${J.Plain}"
                         .dir="${o.dir}"
                         .lang="${o.lang}">
-            <slot slot="start" name="menu"></slot>
-            <slot slot="title" name="logo"></slot>
-            <slot slot="end" name="actions"></slot>
+            <slot slot="start"
+                  name="menu"></slot>
+            <slot slot="title"
+                  name="logo"></slot>
+            <slot slot="end"
+                  name="actions"></slot>
         </mosaik-toolbar>
     </div>
     `;
@@ -156611,6 +156638,36 @@ function Trt() {
   right: 0;
 }
 
+:host([data-shadow]) [part="toolbar"] {
+  box-shadow: var(--joy-elevation-regular);
+}
+
+:host([data-visible]) {
+  opacity: 1;
+  visibility: visible;
+  top: 0;
+}
+
+:host([data-fixed]) {
+  z-index: 1000;
+  position: sticky;
+  top: 24px;
+  left: 24px;
+  right: 0;
+}
+
+:host([data-animated]), :host([data-animated]) [part="toolbar"] {
+  transition-duration: var(--app-header-transition-duration);
+  transition-timing-function: var(--app-header-transition-mode);
+  transition-property: var(--app-header-transition-property);
+}
+
+:host(:not([data-visible])) {
+  top: calc((64px + env(safe-area-inset-top)) * -1);
+  opacity: 0;
+  visibility: hidden;
+}
+
     `;
 }
 function Prt() {
@@ -156937,10 +156994,10 @@ function Lrt() {
 }
 
 :host [part="nav"] {
+  height: 100%;
+  width: var(--drawer-width);
   flex-direction: column;
   flex: 1;
-  width: 320px;
-  height: 100%;
   display: flex;
   overflow: auto;
 }
@@ -157028,10 +157085,10 @@ function Irt() {
 }
 
 :host [part="nav"] {
+  height: 100%;
+  width: var(--drawer-width);
   flex-direction: column;
   flex: 1;
-  width: 320px;
-  height: 100%;
   display: flex;
   overflow: auto;
 }
@@ -157119,10 +157176,10 @@ function Hrt() {
 }
 
 :host [part="nav"] {
+  height: 100%;
+  width: var(--drawer-width);
   flex-direction: column;
   flex: 1;
-  width: 320px;
-  height: 100%;
   display: flex;
   overflow: auto;
 }
@@ -158271,7 +158328,7 @@ var $1;
   }
   o.isWebApp = r;
 })($1 || ($1 = {}));
-nn.Quad, nn.Quad, nn.Quad, nn.Quad, nn.Quad, nn.Quad, nn.Quad, nn.Quad, nn.Quad, nn.Quad;
+rn.Quad, rn.Quad, rn.Quad, rn.Quad, rn.Quad, rn.Quad, rn.Quad, rn.Quad, rn.Quad, rn.Quad;
 class Wrt {
   // #endregion
   // #region Ctor