ds-one 0.3.0-alpha.3 → 0.3.0-alpha.5

package/dist/ds-one.bundle.min.js

@@ -1,4 +1,4 @@
-var or = Object.defineProperty, nr = (t, e, r) => e in t ? or(t, e, { enumerable: !0, configurable: !0, writable: !0, value: r }) : t[e] = r, $e = (t, e, r) => (nr(t, typeof e != "symbol" ? e + "" : e, r), r), sr = (t, e, r) => {
+var nr = Object.defineProperty, or = (t, e, r) => e in t ? nr(t, e, { enumerable: !0, configurable: !0, writable: !0, value: r }) : t[e] = r, $e = (t, e, r) => (or(t, typeof e != "symbol" ? e + "" : e, r), r), sr = (t, e, r) => {
   if (!e.has(t))
     throw TypeError("Cannot " + r);
 }, _e = (t, e) => {
@@ -9,7 +9,7 @@ var or = Object.defineProperty, nr = (t, e, r) => e in t ? or(t, e, { enumerable
   if (e.has(t))
     throw TypeError("Cannot add the same private member more than once");
   e instanceof WeakSet ? e.add(t) : e.set(t, r);
-}, ft = (t, e, r) => (sr(t, e, "access private method"), r);
+}, vt = (t, e, r) => (sr(t, e, "access private method"), r);
 /**
  * @license
  * Copyright Google LLC All Rights Reserved.
@@ -17,7 +17,7 @@ var or = Object.defineProperty, nr = (t, e, r) => e in t ? or(t, e, { enumerable
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://angular.io/license
  */
-function Pt(t, e) {
+function Bt(t, e) {
   return Object.is(t, e);
 }
 /**
@@ -27,7 +27,7 @@ function Pt(t, e) {
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://angular.io/license
  */
-let m = null, R = !1, ie = 1;
+let m = null, R = !1, ae = 1;
 const se = /* @__PURE__ */ Symbol("SIGNAL");
 function z(t) {
   const e = m;
@@ -75,15 +75,15 @@ function Ce(t) {
   m.producerNode[e] !== t && (m.producerNode[e] = t, m.producerIndexOfThis[e] = Me(m) ? Rt(t, m, e) : 0), m.producerLastReadVersion[e] = t.version;
 }
 function cr() {
-  ie++;
+  ae++;
 }
-function Bt(t) {
-  if (!(!t.dirty && t.lastCleanEpoch === ie)) {
-    if (!t.producerMustRecompute(t) && !fr(t)) {
-      t.dirty = !1, t.lastCleanEpoch = ie;
+function Pt(t) {
+  if (!(!t.dirty && t.lastCleanEpoch === ae)) {
+    if (!t.producerMustRecompute(t) && !vr(t)) {
+      t.dirty = !1, t.lastCleanEpoch = ae;
       return;
     }
-    t.producerRecomputeValue(t), t.dirty = !1, t.lastCleanEpoch = ie;
+    t.producerRecomputeValue(t), t.dirty = !1, t.lastCleanEpoch = ae;
   }
 }
 function Dt(t) {
@@ -117,21 +117,21 @@ function gr(t, e) {
       t.producerNode.pop(), t.producerLastReadVersion.pop(), t.producerIndexOfThis.pop();
   }
 }
-function fr(t) {
+function vr(t) {
   I(t);
   for (let e = 0; e < t.producerNode.length; e++) {
-    const r = t.producerNode[e], a = t.producerLastReadVersion[e];
-    if (a !== r.version || (Bt(r), a !== r.version))
+    const r = t.producerNode[e], i = t.producerLastReadVersion[e];
+    if (i !== r.version || (Pt(r), i !== r.version))
       return !0;
   }
   return !1;
 }
 function Rt(t, e, r) {
-  var a;
+  var i;
   if (rt(t), I(t), t.liveConsumerNode.length === 0) {
-    (a = t.watched) == null || a.call(t.wrapper);
-    for (let i = 0; i < t.producerNode.length; i++)
-      t.producerIndexOfThis[i] = Rt(t.producerNode[i], t, i);
+    (i = t.watched) == null || i.call(t.wrapper);
+    for (let a = 0; a < t.producerNode.length; a++)
+      t.producerIndexOfThis[a] = Rt(t.producerNode[a], t, a);
   }
   return t.liveConsumerIndexOfThis.push(r), t.liveConsumerNode.push(e) - 1;
 }
@@ -143,13 +143,13 @@ function Le(t, e) {
     );
   if (t.liveConsumerNode.length === 1) {
     (r = t.unwatched) == null || r.call(t.wrapper);
-    for (let i = 0; i < t.producerNode.length; i++)
-      Le(t.producerNode[i], t.producerIndexOfThis[i]);
+    for (let a = 0; a < t.producerNode.length; a++)
+      Le(t.producerNode[a], t.producerIndexOfThis[a]);
   }
-  const a = t.liveConsumerNode.length - 1;
-  if (t.liveConsumerNode[e] = t.liveConsumerNode[a], t.liveConsumerIndexOfThis[e] = t.liveConsumerIndexOfThis[a], t.liveConsumerNode.length--, t.liveConsumerIndexOfThis.length--, e < t.liveConsumerNode.length) {
-    const i = t.liveConsumerIndexOfThis[e], o = t.liveConsumerNode[e];
-    I(o), o.producerIndexOfThis[i] = e;
+  const i = t.liveConsumerNode.length - 1;
+  if (t.liveConsumerNode[e] = t.liveConsumerNode[i], t.liveConsumerIndexOfThis[e] = t.liveConsumerIndexOfThis[i], t.liveConsumerNode.length--, t.liveConsumerIndexOfThis.length--, e < t.liveConsumerNode.length) {
+    const a = t.liveConsumerIndexOfThis[e], n = t.liveConsumerNode[e];
+    I(n), n.producerIndexOfThis[a] = e;
   }
 }
 function Me(t) {
@@ -170,11 +170,11 @@ function rt(t) {
  * found in the LICENSE file at https://angular.io/license
  */
 function jt(t) {
-  if (Bt(t), Ce(t), t.value === Te)
+  if (Pt(t), Ce(t), t.value === Te)
     throw t.error;
   return t.value;
 }
-function vr(t) {
+function fr(t) {
   const e = Object.create(mr);
   e.computation = t;
   const r = () => jt(e);
@@ -185,7 +185,7 @@ const Ae = /* @__PURE__ */ Symbol("UNSET"), Se = /* @__PURE__ */ Symbol("COMPUTI
   value: Ae,
   dirty: !0,
   error: null,
-  equal: Pt,
+  equal: Bt,
   producerMustRecompute(t) {
     return t.value === Ae || t.value === Se;
   },
@@ -195,19 +195,19 @@ const Ae = /* @__PURE__ */ Symbol("UNSET"), Se = /* @__PURE__ */ Symbol("COMPUTI
     const e = t.value;
     t.value = Se;
     const r = pr(t);
-    let a, i = !1;
+    let i, a = !1;
     try {
-      a = t.computation.call(t.wrapper), i = e !== Ae && e !== Te && t.equal.call(t.wrapper, e, a);
-    } catch (o) {
-      a = Te, t.error = o;
+      i = t.computation.call(t.wrapper), a = e !== Ae && e !== Te && t.equal.call(t.wrapper, e, i);
+    } catch (n) {
+      i = Te, t.error = n;
     } finally {
       gr(t, r);
     }
-    if (i) {
+    if (a) {
       t.value = e;
       return;
     }
-    t.value = a, t.version++;
+    t.value = i, t.version++;
   }
 };
 /**
@@ -220,9 +220,9 @@ const Ae = /* @__PURE__ */ Symbol("UNSET"), Se = /* @__PURE__ */ Symbol("COMPUTI
 function wr() {
   throw new Error();
 }
-let br = wr;
-function yr() {
-  br();
+let yr = wr;
+function br() {
+  yr();
 }
 /**
  * @license
@@ -241,11 +241,11 @@ function Cr() {
   return Ce(this), this.value;
 }
 function Lr(t, e) {
-  hr() || yr(), t.equal.call(t.wrapper, t.value, e) || (t.value = e, kr(t));
+  hr() || br(), t.equal.call(t.wrapper, t.value, e) || (t.value = e, kr(t));
 }
 const Er = {
   ...tt,
-  equal: Pt,
+  equal: Bt,
   value: void 0
 };
 function kr(t) {
@@ -267,54 +267,54 @@ function kr(t) {
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-const y = Symbol("node");
+const b = Symbol("node");
 var F;
 ((t) => {
-  var e, r, a, i;
-  class o {
+  var e, r, i, a;
+  class n {
     constructor(d, u = {}) {
       re(this, r), $e(this, e);
       const c = xr(d)[se];
-      if (this[y] = c, c.wrapper = this, u) {
-        const b = u.equals;
-        b && (c.equal = b), c.watched = u[t.subtle.watched], c.unwatched = u[t.subtle.unwatched];
+      if (this[b] = c, c.wrapper = this, u) {
+        const y = u.equals;
+        y && (c.equal = y), c.watched = u[t.subtle.watched], c.unwatched = u[t.subtle.unwatched];
       }
     }
     get() {
       if (!(0, t.isState)(this))
         throw new TypeError("Wrong receiver type for Signal.State.prototype.get");
-      return Cr.call(this[y]);
+      return Cr.call(this[b]);
     }
     set(d) {
       if (!(0, t.isState)(this))
         throw new TypeError("Wrong receiver type for Signal.State.prototype.set");
       if (dr())
         throw new Error("Writes to signals not permitted during Watcher callback");
-      const u = this[y];
+      const u = this[b];
       Lr(u, d);
     }
   }
-  e = y, r = /* @__PURE__ */ new WeakSet(), t.isState = (s) => typeof s == "object" && _e(r, s), t.State = o;
-  class n {
+  e = b, r = /* @__PURE__ */ new WeakSet(), t.isState = (s) => typeof s == "object" && _e(r, s), t.State = n;
+  class o {
     // Create a Signal which evaluates to the value returned by the callback.
     // Callback is called with this signal as the parameter.
     constructor(d, u) {
-      re(this, i), $e(this, a);
-      const c = vr(d)[se];
-      if (c.consumerAllowSignalWrites = !0, this[y] = c, c.wrapper = this, u) {
-        const b = u.equals;
-        b && (c.equal = b), c.watched = u[t.subtle.watched], c.unwatched = u[t.subtle.unwatched];
+      re(this, a), $e(this, i);
+      const c = fr(d)[se];
+      if (c.consumerAllowSignalWrites = !0, this[b] = c, c.wrapper = this, u) {
+        const y = u.equals;
+        y && (c.equal = y), c.watched = u[t.subtle.watched], c.unwatched = u[t.subtle.unwatched];
       }
     }
     get() {
       if (!(0, t.isComputed)(this))
         throw new TypeError("Wrong receiver type for Signal.Computed.prototype.get");
-      return jt(this[y]);
+      return jt(this[b]);
     }
   }
-  a = y, i = /* @__PURE__ */ new WeakSet(), t.isComputed = (s) => typeof s == "object" && _e(i, s), t.Computed = n, ((s) => {
-    var d, u, f, c;
-    function b(g) {
+  i = b, a = /* @__PURE__ */ new WeakSet(), t.isComputed = (s) => typeof s == "object" && _e(a, s), t.Computed = o, ((s) => {
+    var d, u, v, c;
+    function y(g) {
       let p, h = null;
       try {
         h = z(null), p = g();
@@ -323,32 +323,32 @@ var F;
       }
       return p;
     }
-    s.untrack = b;
+    s.untrack = y;
     function k(g) {
       var p;
       if (!(0, t.isComputed)(g) && !(0, t.isWatcher)(g))
         throw new TypeError("Called introspectSources without a Computed or Watcher argument");
-      return ((p = g[y].producerNode) == null ? void 0 : p.map((h) => h.wrapper)) ?? [];
+      return ((p = g[b].producerNode) == null ? void 0 : p.map((h) => h.wrapper)) ?? [];
     }
     s.introspectSources = k;
     function T(g) {
       var p;
       if (!(0, t.isComputed)(g) && !(0, t.isState)(g))
         throw new TypeError("Called introspectSinks without a Signal argument");
-      return ((p = g[y].liveConsumerNode) == null ? void 0 : p.map((h) => h.wrapper)) ?? [];
+      return ((p = g[b].liveConsumerNode) == null ? void 0 : p.map((h) => h.wrapper)) ?? [];
     }
     s.introspectSinks = T;
     function er(g) {
       if (!(0, t.isComputed)(g) && !(0, t.isState)(g))
         throw new TypeError("Called hasSinks without a Signal argument");
-      const p = g[y].liveConsumerNode;
+      const p = g[b].liveConsumerNode;
       return p ? p.length > 0 : !1;
     }
     s.hasSinks = er;
     function tr(g) {
       if (!(0, t.isComputed)(g) && !(0, t.isWatcher)(g))
         throw new TypeError("Called hasSources without a Computed or Watcher argument");
-      const p = g[y].producerNode;
+      const p = g[b].producerNode;
       return p ? p.length > 0 : !1;
     }
     s.hasSources = tr;
@@ -357,9 +357,9 @@ var F;
       // if it hasn't already been called since the last `watch` call.
       // No signals may be read or written during the notify.
       constructor(p) {
-        re(this, u), re(this, f), $e(this, d);
+        re(this, u), re(this, v), $e(this, d);
         let h = Object.create(tt);
-        h.wrapper = this, h.consumerMarkedDirty = p, h.consumerIsAlwaysLive = !0, h.consumerAllowSignalWrites = !1, h.producerNode = [], this[y] = h;
+        h.wrapper = this, h.consumerMarkedDirty = p, h.consumerIsAlwaysLive = !0, h.consumerAllowSignalWrites = !1, h.producerNode = [], this[b] = h;
       }
       // Add these signals to the Watcher's set, and set the watcher to run its
       // notify callback next time any signal in the set (or one of its dependencies) changes.
@@ -368,28 +368,28 @@ var F;
       watch(...p) {
         if (!(0, t.isWatcher)(this))
           throw new TypeError("Called unwatch without Watcher receiver");
-        ft(this, f, c).call(this, p);
-        const h = this[y];
+        vt(this, v, c).call(this, p);
+        const h = this[b];
         h.dirty = !1;
         const C = z(h);
         for (const te of p)
-          Ce(te[y]);
+          Ce(te[b]);
         z(C);
       }
       // Remove these signals from the watched set (e.g., for an effect which is disposed)
       unwatch(...p) {
         if (!(0, t.isWatcher)(this))
           throw new TypeError("Called unwatch without Watcher receiver");
-        ft(this, f, c).call(this, p);
-        const h = this[y];
+        vt(this, v, c).call(this, p);
+        const h = this[b];
         I(h);
         for (let C = h.producerNode.length - 1; C >= 0; C--)
           if (p.includes(h.producerNode[C].wrapper)) {
             Le(h.producerNode[C], h.producerIndexOfThis[C]);
             const te = h.producerNode.length - 1;
             if (h.producerNode[C] = h.producerNode[te], h.producerIndexOfThis[C] = h.producerIndexOfThis[te], h.producerNode.length--, h.producerIndexOfThis.length--, h.nextProducerIndex--, C < h.producerNode.length) {
-              const ir = h.producerIndexOfThis[C], gt = h.producerNode[C];
-              rt(gt), gt.liveConsumerIndexOfThis[ir] = C;
+              const ar = h.producerIndexOfThis[C], gt = h.producerNode[C];
+              rt(gt), gt.liveConsumerIndexOfThis[ar] = C;
             }
           }
       }
@@ -398,19 +398,19 @@ var F;
       getPending() {
         if (!(0, t.isWatcher)(this))
           throw new TypeError("Called getPending without Watcher receiver");
-        return this[y].producerNode.filter((h) => h.dirty).map((h) => h.wrapper);
+        return this[b].producerNode.filter((h) => h.dirty).map((h) => h.wrapper);
       }
     }
-    d = y, u = /* @__PURE__ */ new WeakSet(), f = /* @__PURE__ */ new WeakSet(), c = function(g) {
+    d = b, u = /* @__PURE__ */ new WeakSet(), v = /* @__PURE__ */ new WeakSet(), c = function(g) {
       for (const p of g)
         if (!(0, t.isComputed)(p) && !(0, t.isState)(p))
           throw new TypeError("Called watch/unwatch without a Computed or State argument");
     }, t.isWatcher = (g) => _e(u, g), s.Watcher = rr;
-    function ar() {
+    function ir() {
       var g;
       return (g = lr()) == null ? void 0 : g.wrapper;
     }
-    s.currentComputed = ar, s.watched = Symbol("watched"), s.unwatched = Symbol("unwatched");
+    s.currentComputed = ir, s.watched = Symbol("watched"), s.unwatched = Symbol("unwatched");
   })(t.subtle || (t.subtle = {}));
 })(F || (F = {}));
 /**
@@ -433,8 +433,8 @@ let Ar = class {
   get _$AU() {
     return this._$AM._$AU;
   }
-  _$AT(e, r, a) {
-    this._$Ct = e, this._$AM = r, this._$Ci = a;
+  _$AT(e, r, i) {
+    this._$Ct = e, this._$AM = r, this._$Ci = i;
   }
   _$AS(e, r) {
     return this.update(e, r);
@@ -448,67 +448,67 @@ let Ar = class {
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const j = globalThis, le = j.trustedTypes, vt = le ? le.createPolicy("lit-html", { createHTML: (t) => t }) : void 0, Ut = "$lit$", $ = `lit$${Math.random().toFixed(9).slice(2)}$`, qt = "?" + $, Sr = `<${qt}>`, H = document, K = () => H.createComment(""), G = (t) => t === null || typeof t != "object" && typeof t != "function", at = Array.isArray, Vr = (t) => at(t) || typeof t?.[Symbol.iterator] == "function", Ve = `[ 	
-\f\r]`, B = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g, mt = /-->/g, wt = />/g, S = RegExp(`>|${Ve}(?:([^\\s"'>=/]+)(${Ve}*=${Ve}*(?:[^ 	
-\f\r"'\`<>=]|("|')|))|$)`, "g"), bt = /'/g, yt = /"/g, Wt = /^(?:script|style|textarea|title)$/i, Hr = (t) => (e, ...r) => ({ _$litType$: t, strings: e, values: r }), l = Hr(1), M = Symbol.for("lit-noChange"), w = Symbol.for("lit-nothing"), xt = /* @__PURE__ */ new WeakMap(), V = H.createTreeWalker(H, 129);
+const j = globalThis, le = j.trustedTypes, ft = le ? le.createPolicy("lit-html", { createHTML: (t) => t }) : void 0, Ut = "$lit$", $ = `lit$${Math.random().toFixed(9).slice(2)}$`, qt = "?" + $, Sr = `<${qt}>`, V = document, K = () => V.createComment(""), G = (t) => t === null || typeof t != "object" && typeof t != "function", it = Array.isArray, Hr = (t) => it(t) || typeof t?.[Symbol.iterator] == "function", He = `[ 	
+\f\r]`, P = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g, mt = /-->/g, wt = />/g, S = RegExp(`>|${He}(?:([^\\s"'>=/]+)(${He}*=${He}*(?:[^ 	
+\f\r"'\`<>=]|("|')|))|$)`, "g"), yt = /'/g, bt = /"/g, Wt = /^(?:script|style|textarea|title)$/i, Vr = (t) => (e, ...r) => ({ _$litType$: t, strings: e, values: r }), l = Vr(1), M = Symbol.for("lit-noChange"), w = Symbol.for("lit-nothing"), xt = /* @__PURE__ */ new WeakMap(), H = V.createTreeWalker(V, 129);
 function Ft(t, e) {
-  if (!at(t) || !t.hasOwnProperty("raw")) throw Error("invalid template strings array");
-  return vt !== void 0 ? vt.createHTML(e) : e;
+  if (!it(t) || !t.hasOwnProperty("raw")) throw Error("invalid template strings array");
+  return ft !== void 0 ? ft.createHTML(e) : e;
 }
 const Mr = (t, e) => {
-  const r = t.length - 1, a = [];
-  let i, o = e === 2 ? "<svg>" : e === 3 ? "<math>" : "", n = B;
+  const r = t.length - 1, i = [];
+  let a, n = e === 2 ? "<svg>" : e === 3 ? "<math>" : "", o = P;
   for (let s = 0; s < r; s++) {
     const d = t[s];
-    let u, f, c = -1, b = 0;
-    for (; b < d.length && (n.lastIndex = b, f = n.exec(d), f !== null); ) b = n.lastIndex, n === B ? f[1] === "!--" ? n = mt : f[1] !== void 0 ? n = wt : f[2] !== void 0 ? (Wt.test(f[2]) && (i = RegExp("</" + f[2], "g")), n = S) : f[3] !== void 0 && (n = S) : n === S ? f[0] === ">" ? (n = i ?? B, c = -1) : f[1] === void 0 ? c = -2 : (c = n.lastIndex - f[2].length, u = f[1], n = f[3] === void 0 ? S : f[3] === '"' ? yt : bt) : n === yt || n === bt ? n = S : n === mt || n === wt ? n = B : (n = S, i = void 0);
-    const k = n === S && t[s + 1].startsWith("/>") ? " " : "";
-    o += n === B ? d + Sr : c >= 0 ? (a.push(u), d.slice(0, c) + Ut + d.slice(c) + $ + k) : d + $ + (c === -2 ? s : k);
+    let u, v, c = -1, y = 0;
+    for (; y < d.length && (o.lastIndex = y, v = o.exec(d), v !== null); ) y = o.lastIndex, o === P ? v[1] === "!--" ? o = mt : v[1] !== void 0 ? o = wt : v[2] !== void 0 ? (Wt.test(v[2]) && (a = RegExp("</" + v[2], "g")), o = S) : v[3] !== void 0 && (o = S) : o === S ? v[0] === ">" ? (o = a ?? P, c = -1) : v[1] === void 0 ? c = -2 : (c = o.lastIndex - v[2].length, u = v[1], o = v[3] === void 0 ? S : v[3] === '"' ? bt : yt) : o === bt || o === yt ? o = S : o === mt || o === wt ? o = P : (o = S, a = void 0);
+    const k = o === S && t[s + 1].startsWith("/>") ? " " : "";
+    n += o === P ? d + Sr : c >= 0 ? (i.push(u), d.slice(0, c) + Ut + d.slice(c) + $ + k) : d + $ + (c === -2 ? s : k);
   }
-  return [Ft(t, o + (t[r] || "<?>") + (e === 2 ? "</svg>" : e === 3 ? "</math>" : "")), a];
+  return [Ft(t, n + (t[r] || "<?>") + (e === 2 ? "</svg>" : e === 3 ? "</math>" : "")), i];
 };
 class J {
-  constructor({ strings: e, _$litType$: r }, a) {
-    let i;
+  constructor({ strings: e, _$litType$: r }, i) {
+    let a;
     this.parts = [];
-    let o = 0, n = 0;
-    const s = e.length - 1, d = this.parts, [u, f] = Mr(e, r);
-    if (this.el = J.createElement(u, a), V.currentNode = this.el.content, r === 2 || r === 3) {
+    let n = 0, o = 0;
+    const s = e.length - 1, d = this.parts, [u, v] = Mr(e, r);
+    if (this.el = J.createElement(u, i), H.currentNode = this.el.content, r === 2 || r === 3) {
       const c = this.el.content.firstChild;
       c.replaceWith(...c.childNodes);
     }
-    for (; (i = V.nextNode()) !== null && d.length < s; ) {
-      if (i.nodeType === 1) {
-        if (i.hasAttributes()) for (const c of i.getAttributeNames()) if (c.endsWith(Ut)) {
-          const b = f[n++], k = i.getAttribute(c).split($), T = /([.?@])?(.*)/.exec(b);
-          d.push({ type: 1, index: o, name: T[2], strings: k, ctor: T[1] === "." ? Nr : T[1] === "?" ? Zr : T[1] === "@" ? zr : Ee }), i.removeAttribute(c);
-        } else c.startsWith($) && (d.push({ type: 6, index: o }), i.removeAttribute(c));
-        if (Wt.test(i.tagName)) {
-          const c = i.textContent.split($), b = c.length - 1;
-          if (b > 0) {
-            i.textContent = le ? le.emptyScript : "";
-            for (let k = 0; k < b; k++) i.append(c[k], K()), V.nextNode(), d.push({ type: 2, index: ++o });
-            i.append(c[b], K());
+    for (; (a = H.nextNode()) !== null && d.length < s; ) {
+      if (a.nodeType === 1) {
+        if (a.hasAttributes()) for (const c of a.getAttributeNames()) if (c.endsWith(Ut)) {
+          const y = v[o++], k = a.getAttribute(c).split($), T = /([.?@])?(.*)/.exec(y);
+          d.push({ type: 1, index: n, name: T[2], strings: k, ctor: T[1] === "." ? Nr : T[1] === "?" ? Zr : T[1] === "@" ? zr : Ee }), a.removeAttribute(c);
+        } else c.startsWith($) && (d.push({ type: 6, index: n }), a.removeAttribute(c));
+        if (Wt.test(a.tagName)) {
+          const c = a.textContent.split($), y = c.length - 1;
+          if (y > 0) {
+            a.textContent = le ? le.emptyScript : "";
+            for (let k = 0; k < y; k++) a.append(c[k], K()), H.nextNode(), d.push({ type: 2, index: ++n });
+            a.append(c[y], K());
           }
         }
-      } else if (i.nodeType === 8) if (i.data === qt) d.push({ type: 2, index: o });
+      } else if (a.nodeType === 8) if (a.data === qt) d.push({ type: 2, index: n });
       else {
         let c = -1;
-        for (; (c = i.data.indexOf($, c + 1)) !== -1; ) d.push({ type: 7, index: o }), c += $.length - 1;
+        for (; (c = a.data.indexOf($, c + 1)) !== -1; ) d.push({ type: 7, index: n }), c += $.length - 1;
       }
-      o++;
+      n++;
     }
   }
   static createElement(e, r) {
-    const a = H.createElement("template");
-    return a.innerHTML = e, a;
+    const i = V.createElement("template");
+    return i.innerHTML = e, i;
   }
 }
-function O(t, e, r = t, a) {
+function O(t, e, r = t, i) {
   if (e === M) return e;
-  let i = a !== void 0 ? r._$Co?.[a] : r._$Cl;
-  const o = G(e) ? void 0 : e._$litDirective$;
-  return i?.constructor !== o && (i?._$AO?.(!1), o === void 0 ? i = void 0 : (i = new o(t), i._$AT(t, r, a)), a !== void 0 ? (r._$Co ?? (r._$Co = []))[a] = i : r._$Cl = i), i !== void 0 && (e = O(t, i._$AS(t, e.values), i, a)), e;
+  let a = i !== void 0 ? r._$Co?.[i] : r._$Cl;
+  const n = G(e) ? void 0 : e._$litDirective$;
+  return a?.constructor !== n && (a?._$AO?.(!1), n === void 0 ? a = void 0 : (a = new n(t), a._$AT(t, r, i)), i !== void 0 ? (r._$Co ?? (r._$Co = []))[i] = a : r._$Cl = a), a !== void 0 && (e = O(t, a._$AS(t, e.values), a, i)), e;
 }
 class Tr {
   constructor(e, r) {
@@ -521,29 +521,29 @@ class Tr {
     return this._$AM._$AU;
   }
   u(e) {
-    const { el: { content: r }, parts: a } = this._$AD, i = (e?.creationScope ?? H).importNode(r, !0);
-    V.currentNode = i;
-    let o = V.nextNode(), n = 0, s = 0, d = a[0];
+    const { el: { content: r }, parts: i } = this._$AD, a = (e?.creationScope ?? V).importNode(r, !0);
+    H.currentNode = a;
+    let n = H.nextNode(), o = 0, s = 0, d = i[0];
     for (; d !== void 0; ) {
-      if (n === d.index) {
+      if (o === d.index) {
         let u;
-        d.type === 2 ? u = new Q(o, o.nextSibling, this, e) : d.type === 1 ? u = new d.ctor(o, d.name, d.strings, this, e) : d.type === 6 && (u = new Ir(o, this, e)), this._$AV.push(u), d = a[++s];
+        d.type === 2 ? u = new Q(n, n.nextSibling, this, e) : d.type === 1 ? u = new d.ctor(n, d.name, d.strings, this, e) : d.type === 6 && (u = new Ir(n, this, e)), this._$AV.push(u), d = i[++s];
       }
-      n !== d?.index && (o = V.nextNode(), n++);
+      o !== d?.index && (n = H.nextNode(), o++);
     }
-    return V.currentNode = H, i;
+    return H.currentNode = V, a;
   }
   p(e) {
     let r = 0;
-    for (const a of this._$AV) a !== void 0 && (a.strings !== void 0 ? (a._$AI(e, a, r), r += a.strings.length - 2) : a._$AI(e[r])), r++;
+    for (const i of this._$AV) i !== void 0 && (i.strings !== void 0 ? (i._$AI(e, i, r), r += i.strings.length - 2) : i._$AI(e[r])), r++;
   }
 }
 class Q {
   get _$AU() {
     return this._$AM?._$AU ?? this._$Cv;
   }
-  constructor(e, r, a, i) {
-    this.type = 2, this._$AH = w, this._$AN = void 0, this._$AA = e, this._$AB = r, this._$AM = a, this.options = i, this._$Cv = i?.isConnected ?? !0;
+  constructor(e, r, i, a) {
+    this.type = 2, this._$AH = w, this._$AN = void 0, this._$AA = e, this._$AB = r, this._$AM = i, this.options = a, this._$Cv = a?.isConnected ?? !0;
   }
   get parentNode() {
     let e = this._$AA.parentNode;
@@ -557,7 +557,7 @@ class Q {
     return this._$AB;
   }
   _$AI(e, r = this) {
-    e = O(this, e, r), G(e) ? e === w || e == null || e === "" ? (this._$AH !== w && this._$AR(), this._$AH = w) : e !== this._$AH && e !== M && this._(e) : e._$litType$ !== void 0 ? this.$(e) : e.nodeType !== void 0 ? this.T(e) : Vr(e) ? this.k(e) : this._(e);
+    e = O(this, e, r), G(e) ? e === w || e == null || e === "" ? (this._$AH !== w && this._$AR(), this._$AH = w) : e !== this._$AH && e !== M && this._(e) : e._$litType$ !== void 0 ? this.$(e) : e.nodeType !== void 0 ? this.T(e) : Hr(e) ? this.k(e) : this._(e);
   }
   O(e) {
     return this._$AA.parentNode.insertBefore(e, this._$AB);
@@ -566,14 +566,14 @@ class Q {
     this._$AH !== e && (this._$AR(), this._$AH = this.O(e));
   }
   _(e) {
-    this._$AH !== w && G(this._$AH) ? this._$AA.nextSibling.data = e : this.T(H.createTextNode(e)), this._$AH = e;
+    this._$AH !== w && G(this._$AH) ? this._$AA.nextSibling.data = e : this.T(V.createTextNode(e)), this._$AH = e;
   }
   $(e) {
-    const { values: r, _$litType$: a } = e, i = typeof a == "number" ? this._$AC(e) : (a.el === void 0 && (a.el = J.createElement(Ft(a.h, a.h[0]), this.options)), a);
-    if (this._$AH?._$AD === i) this._$AH.p(r);
+    const { values: r, _$litType$: i } = e, a = typeof i == "number" ? this._$AC(e) : (i.el === void 0 && (i.el = J.createElement(Ft(i.h, i.h[0]), this.options)), i);
+    if (this._$AH?._$AD === a) this._$AH.p(r);
     else {
-      const o = new Tr(i, this), n = o.u(this.options);
-      o.p(r), this.T(n), this._$AH = o;
+      const n = new Tr(a, this), o = n.u(this.options);
+      n.p(r), this.T(o), this._$AH = n;
     }
   }
   _$AC(e) {
@@ -581,16 +581,16 @@ class Q {
     return r === void 0 && xt.set(e.strings, r = new J(e)), r;
   }
   k(e) {
-    at(this._$AH) || (this._$AH = [], this._$AR());
+    it(this._$AH) || (this._$AH = [], this._$AR());
     const r = this._$AH;
-    let a, i = 0;
-    for (const o of e) i === r.length ? r.push(a = new Q(this.O(K()), this.O(K()), this, this.options)) : a = r[i], a._$AI(o), i++;
-    i < r.length && (this._$AR(a && a._$AB.nextSibling, i), r.length = i);
+    let i, a = 0;
+    for (const n of e) a === r.length ? r.push(i = new Q(this.O(K()), this.O(K()), this, this.options)) : i = r[a], i._$AI(n), a++;
+    a < r.length && (this._$AR(i && i._$AB.nextSibling, a), r.length = a);
   }
   _$AR(e = this._$AA.nextSibling, r) {
     for (this._$AP?.(!1, !0, r); e !== this._$AB; ) {
-      const a = e.nextSibling;
-      e.remove(), e = a;
+      const i = e.nextSibling;
+      e.remove(), e = i;
     }
   }
   setConnected(e) {
@@ -604,19 +604,19 @@ class Ee {
   get _$AU() {
     return this._$AM._$AU;
   }
-  constructor(e, r, a, i, o) {
-    this.type = 1, this._$AH = w, this._$AN = void 0, this.element = e, this.name = r, this._$AM = i, this.options = o, a.length > 2 || a[0] !== "" || a[1] !== "" ? (this._$AH = Array(a.length - 1).fill(new String()), this.strings = a) : this._$AH = w;
+  constructor(e, r, i, a, n) {
+    this.type = 1, this._$AH = w, this._$AN = void 0, this.element = e, this.name = r, this._$AM = a, this.options = n, i.length > 2 || i[0] !== "" || i[1] !== "" ? (this._$AH = Array(i.length - 1).fill(new String()), this.strings = i) : this._$AH = w;
   }
-  _$AI(e, r = this, a, i) {
-    const o = this.strings;
-    let n = !1;
-    if (o === void 0) e = O(this, e, r, 0), n = !G(e) || e !== this._$AH && e !== M, n && (this._$AH = e);
+  _$AI(e, r = this, i, a) {
+    const n = this.strings;
+    let o = !1;
+    if (n === void 0) e = O(this, e, r, 0), o = !G(e) || e !== this._$AH && e !== M, o && (this._$AH = e);
     else {
       const s = e;
       let d, u;
-      for (e = o[0], d = 0; d < o.length - 1; d++) u = O(this, s[a + d], r, d), u === M && (u = this._$AH[d]), n || (n = !G(u) || u !== this._$AH[d]), u === w ? e = w : e !== w && (e += (u ?? "") + o[d + 1]), this._$AH[d] = u;
+      for (e = n[0], d = 0; d < n.length - 1; d++) u = O(this, s[i + d], r, d), u === M && (u = this._$AH[d]), o || (o = !G(u) || u !== this._$AH[d]), u === w ? e = w : e !== w && (e += (u ?? "") + n[d + 1]), this._$AH[d] = u;
     }
-    n && !i && this.j(e);
+    o && !a && this.j(e);
   }
   j(e) {
     e === w ? this.element.removeAttribute(this.name) : this.element.setAttribute(this.name, e ?? "");
@@ -639,21 +639,21 @@ class Zr extends Ee {
   }
 }
 class zr extends Ee {
-  constructor(e, r, a, i, o) {
-    super(e, r, a, i, o), this.type = 5;
+  constructor(e, r, i, a, n) {
+    super(e, r, i, a, n), this.type = 5;
   }
   _$AI(e, r = this) {
     if ((e = O(this, e, r, 0) ?? w) === M) return;
-    const a = this._$AH, i = e === w && a !== w || e.capture !== a.capture || e.once !== a.once || e.passive !== a.passive, o = e !== w && (a === w || i);
-    i && this.element.removeEventListener(this.name, this, a), o && this.element.addEventListener(this.name, this, e), this._$AH = e;
+    const i = this._$AH, a = e === w && i !== w || e.capture !== i.capture || e.once !== i.once || e.passive !== i.passive, n = e !== w && (i === w || a);
+    a && this.element.removeEventListener(this.name, this, i), n && this.element.addEventListener(this.name, this, e), this._$AH = e;
   }
   handleEvent(e) {
     typeof this._$AH == "function" ? this._$AH.call(this.options?.host ?? this.element, e) : this._$AH.handleEvent(e);
   }
 }
 class Ir {
-  constructor(e, r, a) {
-    this.element = e, this.type = 6, this._$AN = void 0, this._$AM = r, this.options = a;
+  constructor(e, r, i) {
+    this.element = e, this.type = 6, this._$AN = void 0, this._$AM = r, this.options = i;
   }
   get _$AU() {
     return this._$AM._$AU;
@@ -664,14 +664,14 @@ class Ir {
 }
 const Or = j.litHtmlPolyfillSupport;
 Or?.(J, Q), (j.litHtmlVersions ?? (j.litHtmlVersions = [])).push("3.3.1");
-const Pr = (t, e, r) => {
-  const a = r?.renderBefore ?? e;
-  let i = a._$litPart$;
-  if (i === void 0) {
-    const o = r?.renderBefore ?? null;
-    a._$litPart$ = i = new Q(e.insertBefore(K(), o), o, void 0, r ?? {});
-  }
-  return i._$AI(t), i;
+const Br = (t, e, r) => {
+  const i = r?.renderBefore ?? e;
+  let a = i._$litPart$;
+  if (a === void 0) {
+    const n = r?.renderBefore ?? null;
+    i._$litPart$ = a = new Q(e.insertBefore(K(), n), n, void 0, r ?? {});
+  }
+  return a._$AI(t), a;
 };
 /**
  * @license
@@ -680,80 +680,80 @@ const Pr = (t, e, r) => {
  */
 F.State;
 F.Computed;
-const it = (t, e) => new F.State(t, e), Br = {
+const at = (t, e) => new F.State(t, e), Pr = {
   mode: "auto",
   baseWidth: 280,
   minScale: 0.75,
   maxScale: 2
-}, P = it(1), Y = it(Br);
-function ot() {
+}, B = at(1), Y = at(Pr);
+function nt() {
   if (typeof navigator > "u" || typeof window > "u")
     return !1;
-  const t = navigator, e = window, r = t && (t.userAgent || t.vendor) || e && e.opera || "", a = /Mobile|Android|iP(ad|hone|od)|IEMobile|BlackBerry|Kindle|Silk-Accelerated|(hpw|web)OS|Opera M(obi|ini)|Windows Phone|Phone|Tablet/i.test(
+  const t = navigator, e = window, r = t && (t.userAgent || t.vendor) || e && e.opera || "", i = /Mobile|Android|iP(ad|hone|od)|IEMobile|BlackBerry|Kindle|Silk-Accelerated|(hpw|web)OS|Opera M(obi|ini)|Windows Phone|Phone|Tablet/i.test(
     r
-  ), o = (t && t.maxTouchPoints || 0) > 1, n = e ? Math.min(e.innerWidth || 0, e.innerHeight || 0) <= 820 : !1;
-  return a || o && n;
+  ), n = (t && t.maxTouchPoints || 0) > 1, o = e ? Math.min(e.innerWidth || 0, e.innerHeight || 0) <= 820 : !1;
+  return i || n && o;
 }
 function Dr() {
-  const t = ot(), e = navigator, r = window, i = (e && e.maxTouchPoints || 0) > 1, o = typeof document < "u" ? document.documentElement.clientWidth : r?.innerWidth || 0, n = typeof document < "u" ? document.documentElement.clientHeight : r?.innerHeight || 0, s = t && Math.min(o, n) >= 600;
+  const t = nt(), e = navigator, r = window, a = (e && e.maxTouchPoints || 0) > 1, n = typeof document < "u" ? document.documentElement.clientWidth : r?.innerWidth || 0, o = typeof document < "u" ? document.documentElement.clientHeight : r?.innerHeight || 0, s = t && Math.min(n, o) >= 600;
   return {
     isMobile: t,
     isTablet: s,
     isDesktop: !t,
-    isTouchCapable: i,
+    isTouchCapable: a,
     deviceType: t ? s ? "tablet" : "mobile" : "desktop",
     userAgent: e && (e.userAgent || e.vendor) || "",
-    screenWidth: o,
-    screenHeight: n
+    screenWidth: n,
+    screenHeight: o
   };
 }
 function Rr(t, e = Y.get()) {
   if (e.mode === "fixed")
     return 1;
-  const r = t / e.baseWidth, a = Math.max(
+  const r = t / e.baseWidth, i = Math.max(
     e.minScale,
     Math.min(e.maxScale, r)
   );
-  return Number(a.toFixed(3));
+  return Number(i.toFixed(3));
 }
-function Ta(t) {
+function Ti(t) {
   const r = { ...Y.get(), ...t };
   Y.set(r), typeof window < "u" && Kt();
 }
 function Kt() {
   if (typeof window > "u" || typeof document > "u")
     return;
-  if (!ot()) {
-    P.set(1), document.documentElement.style.setProperty("--sf", "1"), window.dispatchEvent(
+  if (!nt()) {
+    B.set(1), document.documentElement.style.setProperty("--sf", "1"), window.dispatchEvent(
       new CustomEvent("scaling-changed", {
         detail: { scalingFactor: 1, config: Y.get() }
       })
     );
     return;
   }
-  const e = document.documentElement.clientWidth, r = Y.get(), a = Rr(e, r);
-  P.set(a), document.documentElement.style.setProperty("--sf", a.toString()), window.dispatchEvent(
+  const e = document.documentElement.clientWidth, r = Y.get(), i = Rr(e, r);
+  B.set(i), document.documentElement.style.setProperty("--sf", i.toString()), window.dispatchEvent(
     new CustomEvent("scaling-changed", {
-      detail: { scalingFactor: a, config: r }
+      detail: { scalingFactor: i, config: r }
     })
   );
 }
-function Na() {
-  return P.get();
+function Ni() {
+  return B.get();
 }
-function Za(t) {
-  return t * P.get();
+function Zi(t) {
+  return t * B.get();
 }
-function za(t) {
-  const e = P.get();
+function zi(t) {
+  const e = B.get();
   return e === 0 ? t : t / e;
 }
-function ae() {
+function ie() {
   const t = Dr();
   if (typeof document > "u")
     return t;
   t.isMobile ? (document.documentElement.classList.add("mobile"), document.documentElement.classList.remove("desktop")) : (document.documentElement.classList.add("desktop"), document.documentElement.classList.remove("mobile")), Kt();
-  const e = P.get();
+  const e = B.get();
   return t.isMobile ? console.log(
     `[DS one] Mobile device detected - ${t.deviceType} (${t.screenWidth}x${t.screenHeight}), scaling factor: ${e.toFixed(2)}`
   ) : console.log(
@@ -771,18 +771,18 @@ function ae() {
 }
 if (typeof window < "u") {
   document.readyState === "loading" ? document.addEventListener("DOMContentLoaded", () => {
-    ae();
-  }) : ae();
+    ie();
+  }) : ie();
   let t;
   window.addEventListener("resize", () => {
     clearTimeout(t), t = setTimeout(() => {
-      ae();
+      ie();
     }, 100);
   }), window.addEventListener("orientationchange", () => {
-    setTimeout(ae, 100);
+    setTimeout(ie, 100);
   });
 }
-function Ia() {
+function Ii() {
   if (typeof document > "u" || typeof window > "u")
     return;
   let t = document.querySelector('meta[name="viewport"]');
@@ -803,8 +803,8 @@ function Ia() {
   `;
   const r = document.getElementById("ds-one-applike-style");
   r && r.remove(), document.head.appendChild(e);
-  let a = 0, i = 0;
-  const o = (s) => {
+  let i = 0, a = 0;
+  const n = (s) => {
     if (s instanceof TouchEvent) {
       if (s.touches.length > 1) {
         s.preventDefault(), s.stopPropagation();
@@ -812,17 +812,17 @@ function Ia() {
       }
       const d = Date.now();
       if (s.type === "touchstart") {
-        if (d - a < 300) {
+        if (d - i < 300) {
           s.preventDefault(), s.stopPropagation();
           return;
         }
-        i = d;
+        a = d;
       } else if (s.type === "touchend") {
-        if (d - i < 300 && d - a < 300) {
+        if (d - a < 300 && d - i < 300) {
           s.preventDefault(), s.stopPropagation();
           return;
         }
-        a = d;
+        i = d;
       } else if (s.type === "touchmove" && s.touches.length > 1) {
         s.preventDefault(), s.stopPropagation();
         return;
@@ -832,25 +832,25 @@ function Ia() {
       s.preventDefault(), s.stopPropagation();
       return;
     }
-  }, n = { passive: !1, capture: !0 };
-  document.addEventListener("touchstart", o, n), document.addEventListener("touchmove", o, n), document.addEventListener("touchend", o, n), document.addEventListener("touchcancel", o, n), document.addEventListener("wheel", o, n), document.addEventListener(
+  }, o = { passive: !1, capture: !0 };
+  document.addEventListener("touchstart", n, o), document.addEventListener("touchmove", n, o), document.addEventListener("touchend", n, o), document.addEventListener("touchcancel", n, o), document.addEventListener("wheel", n, o), document.addEventListener(
     "gesturestart",
     (s) => {
       s.preventDefault(), s.stopPropagation();
     },
-    n
+    o
   ), document.addEventListener(
     "gesturechange",
     (s) => {
       s.preventDefault(), s.stopPropagation();
     },
-    n
+    o
   ), document.addEventListener(
     "gestureend",
     (s) => {
       s.preventDefault(), s.stopPropagation();
     },
-    n
+    o
   );
 }
 let jr = {};
@@ -914,14 +914,14 @@ function qr() {
   const r = document.querySelector('meta[name="ds-one:translations"]')?.getAttribute("content");
   if (r)
     return r;
-  const a = document.querySelector('link[rel="ds-one-translations"]')?.getAttribute("href");
-  return a || null;
+  const i = document.querySelector('link[rel="ds-one-translations"]')?.getAttribute("href");
+  return i || null;
 }
 function Wr() {
-  const t = [], e = typeof window < "u" ? window.DS_ONE_TRANSLATIONS_FILE : null, r = qr(), a = $t(e ?? "");
-  a && t.push(a);
-  const i = $t(r ?? "");
-  return i && !t.includes(i) && t.push(i), t.length === 0 && t.push(Jt), t;
+  const t = [], e = typeof window < "u" ? window.DS_ONE_TRANSLATIONS_FILE : null, r = qr(), i = $t(e ?? "");
+  i && t.push(i);
+  const a = $t(r ?? "");
+  return a && !t.includes(a) && t.push(a), t.length === 0 && t.push(Jt), t;
 }
 function Fr(t) {
   return !t || typeof t != "object" ? !1 : Object.values(t).every(
@@ -954,9 +954,9 @@ async function _t() {
     if (!r)
       continue;
     window.DS_ONE_TRANSLATIONS = r;
-    const a = Object.keys(r);
+    const i = Object.keys(r);
     return console.log(
-      `[DS one] External translations loaded from ${e}: ${a.length} language(s) – ${a.join(", ")}`
+      `[DS one] External translations loaded from ${e}: ${i.length} language(s) – ${i.join(", ")}`
     ), window.dispatchEvent(new CustomEvent("translations-ready")), !0;
   }
   return console.info(
@@ -977,24 +977,24 @@ function At(t) {
 }
 function Yt(t) {
   return [...t].sort((e, r) => {
-    const a = At(e), i = At(r);
-    return a !== i ? a - i : e.localeCompare(r);
+    const i = At(e), a = At(r);
+    return i !== a ? i - a : e.localeCompare(r);
   });
 }
 function Gr(t, e) {
   const r = t?.replace("_", "-");
   if (r)
     try {
-      let a = Lt.get(r);
-      a || (a = new Intl.DisplayNames([r], {
+      let i = Lt.get(r);
+      i || (i = new Intl.DisplayNames([r], {
         type: "language"
-      }), Lt.set(r, a));
-      const i = e.replace("_", "-"), o = a.of(i);
-      if (o && o !== i)
-        return o;
-      const n = a.of(ee(i));
-      if (n)
+      }), Lt.set(r, i));
+      const a = e.replace("_", "-"), n = i.of(a);
+      if (n && n !== a)
         return n;
+      const o = i.of(ee(a));
+      if (o)
+        return o;
     } catch {
       Et || (console.info(
         "[DS one] Intl.DisplayNames is not available, using fallback language names."
@@ -1005,28 +1005,28 @@ function Jr(t) {
   const e = t.toLowerCase().replace("_", "-"), r = Ct[e];
   if (r)
     return r;
-  const a = ee(e);
-  return Ct[a];
+  const i = ee(e);
+  return Ct[i];
 }
 function Yr(t, e = {}) {
   if (!t)
     return "";
   const r = [];
   e.locale && r.push(e.locale), typeof navigator < "u" && (Array.isArray(navigator.languages) && r.push(...navigator.languages), navigator.language && r.push(navigator.language)), r.push(E), r.push("en");
-  const a = /* @__PURE__ */ new Set();
-  for (const n of r) {
-    if (!n || a.has(n))
+  const i = /* @__PURE__ */ new Set();
+  for (const o of r) {
+    if (!o || i.has(o))
       continue;
-    a.add(n);
-    const s = Gr(n, t);
+    i.add(o);
+    const s = Gr(o, t);
     if (s)
       return s;
   }
-  const i = Jr(t);
-  if (i)
-    return i;
-  const o = ee(t);
-  return o ? o.toUpperCase() : t;
+  const a = Jr(t);
+  if (a)
+    return a;
+  const n = ee(t);
+  return n ? n.toUpperCase() : t;
 }
 const St = {
   da: "da",
@@ -1056,27 +1056,27 @@ const St = {
   "zh-tw": "zh",
   "zh-hant": "zh"
 };
-function Vt(t) {
+function Ht(t) {
   if (!t)
     return null;
   const e = t.toLowerCase().replace("_", "-"), r = St[e];
   if (r)
     return r;
-  const a = ee(e), i = St[a];
-  return i || t;
+  const i = ee(e), a = St[i];
+  return a || t;
 }
 function Xr() {
   if (typeof navigator > "u")
     return E;
   const t = navigator.language;
   if (t) {
-    const e = Vt(t);
+    const e = Ht(t);
     if (e)
       return e;
   }
   if (Array.isArray(navigator.languages))
     for (const e of navigator.languages) {
-      const r = Vt(e);
+      const r = Ht(e);
       if (r)
         return r;
     }
@@ -1128,16 +1128,16 @@ function U(t) {
     `[DS one (Internationalization)] No translation found for key "${t}"`
   ), t);
 }
-function Oa(t, e = L.value) {
+function Oi(t, e = L.value) {
   if (!t)
     return !1;
   const r = _?.[e];
   return !!(r && Object.prototype.hasOwnProperty.call(r, t) || e !== E && _?.[E] && Object.prototype.hasOwnProperty.call(_[E], t));
 }
-function oe(t) {
+function ne(t) {
   return U(t);
 }
-function Pa() {
+function Bi() {
   const t = ke();
   if (t && Object.keys(t).length > 0) {
     const e = Object.keys(t);
@@ -1145,11 +1145,11 @@ function Pa() {
   }
   return Promise.resolve([E]);
 }
-function Ht() {
+function Vt() {
   const t = ke();
   return t && Object.keys(t).length > 0 ? Yt(Object.keys(t)) : [E];
 }
-function Ba(t, e) {
+function Pi(t, e) {
   console.log(
     `Loading additional translations for ${t}:`,
     Object.keys(e).length,
@@ -1168,8 +1168,8 @@ function Mt(t) {
 function N(t) {
   if (!(typeof window > "u"))
     try {
-      const e = window.localStorage?.getItem("ds-one:preferences"), a = { ...e ? JSON.parse(e) : {}, ...t };
-      window.localStorage?.setItem("ds-one:preferences", JSON.stringify(a));
+      const e = window.localStorage?.getItem("ds-one:preferences"), i = { ...e ? JSON.parse(e) : {}, ...t };
+      window.localStorage?.setItem("ds-one:preferences", JSON.stringify(i));
     } catch (e) {
       console.warn("ds-one: unable to persist preferences", e);
     }
@@ -1186,30 +1186,30 @@ const Qr = {
   ja: "¥",
   ko: "₩"
 };
-function Da(t) {
+function Di(t) {
   const { language: e, country: r } = t;
   if (r) {
-    const i = r.toUpperCase();
-    if (i === "US" || i === "USA")
+    const a = r.toUpperCase();
+    if (a === "US" || a === "USA")
       return "$";
-    if (i === "GB" || i === "UK")
+    if (a === "GB" || a === "UK")
       return "£";
-    if (i === "JP" || i === "JPN" || i === "CN" || i === "CHN")
+    if (a === "JP" || a === "JPN" || a === "CN" || a === "CHN")
       return "¥";
-    if (i === "KR" || i === "KOR")
+    if (a === "KR" || a === "KOR")
       return "₩";
   }
-  const a = e.toLowerCase().split(/[-_]/)[0];
-  return Qr[a] || "$";
+  const i = e.toLowerCase().split(/[-_]/)[0];
+  return Qr[i] || "$";
 }
-function ea() {
+function ei() {
   if (typeof window > "u")
     return "light";
   const t = window.localStorage?.getItem("ds-one:theme");
   return t === "light" || t === "dark" ? t : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
 }
-const X = it(ea());
-function ta(t) {
+const X = at(ei());
+function ti(t) {
   if (t !== X.get() && (X.set(t), typeof window < "u")) {
     try {
       window.localStorage?.setItem("ds-one:theme", t);
@@ -1231,18 +1231,18 @@ if (typeof window < "u") {
  * Copyright 2019 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const ne = globalThis, nt = ne.ShadowRoot && (ne.ShadyCSS === void 0 || ne.ShadyCSS.nativeShadow) && "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype, st = Symbol(), Tt = /* @__PURE__ */ new WeakMap();
+const oe = globalThis, ot = oe.ShadowRoot && (oe.ShadyCSS === void 0 || oe.ShadyCSS.nativeShadow) && "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype, st = Symbol(), Tt = /* @__PURE__ */ new WeakMap();
 let Xt = class {
-  constructor(e, r, a) {
-    if (this._$cssResult$ = !0, a !== st) throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");
+  constructor(e, r, i) {
+    if (this._$cssResult$ = !0, i !== st) throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");
     this.cssText = e, this.t = r;
   }
   get styleSheet() {
     let e = this.o;
     const r = this.t;
-    if (nt && e === void 0) {
-      const a = r !== void 0 && r.length === 1;
-      a && (e = Tt.get(r)), e === void 0 && ((this.o = e = new CSSStyleSheet()).replaceSync(this.cssText), a && Tt.set(r, e));
+    if (ot && e === void 0) {
+      const i = r !== void 0 && r.length === 1;
+      i && (e = Tt.get(r)), e === void 0 && ((this.o = e = new CSSStyleSheet()).replaceSync(this.cssText), i && Tt.set(r, e));
     }
     return e;
   }
@@ -1251,21 +1251,21 @@ let Xt = class {
   }
 };
 const x = (t) => new Xt(typeof t == "string" ? t : t + "", void 0, st), lt = (t, ...e) => {
-  const r = t.length === 1 ? t[0] : e.reduce(((a, i, o) => a + ((n) => {
-    if (n._$cssResult$ === !0) return n.cssText;
-    if (typeof n == "number") return n;
-    throw Error("Value passed to 'css' function must be a 'css' function result: " + n + ". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.");
-  })(i) + t[o + 1]), t[0]);
+  const r = t.length === 1 ? t[0] : e.reduce(((i, a, n) => i + ((o) => {
+    if (o._$cssResult$ === !0) return o.cssText;
+    if (typeof o == "number") return o;
+    throw Error("Value passed to 'css' function must be a 'css' function result: " + o + ". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.");
+  })(a) + t[n + 1]), t[0]);
   return new Xt(r, t, st);
-}, ra = (t, e) => {
-  if (nt) t.adoptedStyleSheets = e.map(((r) => r instanceof CSSStyleSheet ? r : r.styleSheet));
+}, ri = (t, e) => {
+  if (ot) t.adoptedStyleSheets = e.map(((r) => r instanceof CSSStyleSheet ? r : r.styleSheet));
   else for (const r of e) {
-    const a = document.createElement("style"), i = ne.litNonce;
-    i !== void 0 && a.setAttribute("nonce", i), a.textContent = r.cssText, t.appendChild(a);
+    const i = document.createElement("style"), a = oe.litNonce;
+    a !== void 0 && i.setAttribute("nonce", a), i.textContent = r.cssText, t.appendChild(i);
   }
-}, Nt = nt ? (t) => t : (t) => t instanceof CSSStyleSheet ? ((e) => {
+}, Nt = ot ? (t) => t : (t) => t instanceof CSSStyleSheet ? ((e) => {
   let r = "";
-  for (const a of e.cssRules) r += a.cssText;
+  for (const i of e.cssRules) r += i.cssText;
   return x(r);
 })(t) : t;
 /**
@@ -1273,10 +1273,10 @@ const x = (t) => new Xt(typeof t == "string" ? t : t + "", void 0, st), lt = (t,
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const { is: aa, defineProperty: ia, getOwnPropertyDescriptor: oa, getOwnPropertyNames: na, getOwnPropertySymbols: sa, getPrototypeOf: la } = Object, A = globalThis, Zt = A.trustedTypes, da = Zt ? Zt.emptyScript : "", ca = A.reactiveElementPolyfillSupport, q = (t, e) => t, Ne = { toAttribute(t, e) {
+const { is: ii, defineProperty: ai, getOwnPropertyDescriptor: ni, getOwnPropertyNames: oi, getOwnPropertySymbols: si, getPrototypeOf: li } = Object, A = globalThis, Zt = A.trustedTypes, di = Zt ? Zt.emptyScript : "", ci = A.reactiveElementPolyfillSupport, q = (t, e) => t, Ne = { toAttribute(t, e) {
   switch (e) {
     case Boolean:
-      t = t ? da : null;
+      t = t ? di : null;
       break;
     case Object:
     case Array:
@@ -1301,7 +1301,7 @@ const { is: aa, defineProperty: ia, getOwnPropertyDescriptor: oa, getOwnProperty
       }
   }
   return r;
-} }, Qt = (t, e) => !aa(t, e), zt = { attribute: !0, type: String, converter: Ne, reflect: !1, useDefault: !1, hasChanged: Qt };
+} }, Qt = (t, e) => !ii(t, e), zt = { attribute: !0, type: String, converter: Ne, reflect: !1, useDefault: !1, hasChanged: Qt };
 Symbol.metadata ?? (Symbol.metadata = Symbol("metadata")), A.litPropertyMetadata ?? (A.litPropertyMetadata = /* @__PURE__ */ new WeakMap());
 class Z extends HTMLElement {
   static addInitializer(e) {
@@ -1312,19 +1312,19 @@ class Z extends HTMLElement {
   }
   static createProperty(e, r = zt) {
     if (r.state && (r.attribute = !1), this._$Ei(), this.prototype.hasOwnProperty(e) && ((r = Object.create(r)).wrapped = !0), this.elementProperties.set(e, r), !r.noAccessor) {
-      const a = Symbol(), i = this.getPropertyDescriptor(e, a, r);
-      i !== void 0 && ia(this.prototype, e, i);
+      const i = Symbol(), a = this.getPropertyDescriptor(e, i, r);
+      a !== void 0 && ai(this.prototype, e, a);
     }
   }
-  static getPropertyDescriptor(e, r, a) {
-    const { get: i, set: o } = oa(this.prototype, e) ?? { get() {
+  static getPropertyDescriptor(e, r, i) {
+    const { get: a, set: n } = ni(this.prototype, e) ?? { get() {
       return this[r];
-    }, set(n) {
-      this[r] = n;
+    }, set(o) {
+      this[r] = o;
     } };
-    return { get: i, set(n) {
-      const s = i?.call(this);
-      o?.call(this, n), this.requestUpdate(e, s, a);
+    return { get: a, set(o) {
+      const s = a?.call(this);
+      n?.call(this, o), this.requestUpdate(e, s, i);
     }, configurable: !0, enumerable: !0 };
   }
   static getPropertyOptions(e) {
@@ -1332,38 +1332,38 @@ class Z extends HTMLElement {
   }
   static _$Ei() {
     if (this.hasOwnProperty(q("elementProperties"))) return;
-    const e = la(this);
+    const e = li(this);
     e.finalize(), e.l !== void 0 && (this.l = [...e.l]), this.elementProperties = new Map(e.elementProperties);
   }
   static finalize() {
     if (this.hasOwnProperty(q("finalized"))) return;
     if (this.finalized = !0, this._$Ei(), this.hasOwnProperty(q("properties"))) {
-      const r = this.properties, a = [...na(r), ...sa(r)];
-      for (const i of a) this.createProperty(i, r[i]);
+      const r = this.properties, i = [...oi(r), ...si(r)];
+      for (const a of i) this.createProperty(a, r[a]);
     }
     const e = this[Symbol.metadata];
     if (e !== null) {
       const r = litPropertyMetadata.get(e);
-      if (r !== void 0) for (const [a, i] of r) this.elementProperties.set(a, i);
+      if (r !== void 0) for (const [i, a] of r) this.elementProperties.set(i, a);
     }
     this._$Eh = /* @__PURE__ */ new Map();
-    for (const [r, a] of this.elementProperties) {
-      const i = this._$Eu(r, a);
-      i !== void 0 && this._$Eh.set(i, r);
+    for (const [r, i] of this.elementProperties) {
+      const a = this._$Eu(r, i);
+      a !== void 0 && this._$Eh.set(a, r);
     }
     this.elementStyles = this.finalizeStyles(this.styles);
   }
   static finalizeStyles(e) {
     const r = [];
     if (Array.isArray(e)) {
-      const a = new Set(e.flat(1 / 0).reverse());
-      for (const i of a) r.unshift(Nt(i));
+      const i = new Set(e.flat(1 / 0).reverse());
+      for (const a of i) r.unshift(Nt(a));
     } else e !== void 0 && r.push(Nt(e));
     return r;
   }
   static _$Eu(e, r) {
-    const a = r.attribute;
-    return a === !1 ? void 0 : typeof a == "string" ? a : typeof e == "string" ? e.toLowerCase() : void 0;
+    const i = r.attribute;
+    return i === !1 ? void 0 : typeof i == "string" ? i : typeof e == "string" ? e.toLowerCase() : void 0;
   }
   constructor() {
     super(), this._$Ep = void 0, this.isUpdatePending = !1, this.hasUpdated = !1, this._$Em = null, this._$Ev();
@@ -1379,12 +1379,12 @@ class Z extends HTMLElement {
   }
   _$E_() {
     const e = /* @__PURE__ */ new Map(), r = this.constructor.elementProperties;
-    for (const a of r.keys()) this.hasOwnProperty(a) && (e.set(a, this[a]), delete this[a]);
+    for (const i of r.keys()) this.hasOwnProperty(i) && (e.set(i, this[i]), delete this[i]);
     e.size > 0 && (this._$Ep = e);
   }
   createRenderRoot() {
     const e = this.shadowRoot ?? this.attachShadow(this.constructor.shadowRootOptions);
-    return ra(e, this.constructor.elementStyles), e;
+    return ri(e, this.constructor.elementStyles), e;
   }
   connectedCallback() {
     this.renderRoot ?? (this.renderRoot = this.createRenderRoot()), this.enableUpdating(!0), this._$EO?.forEach(((e) => e.hostConnected?.()));
@@ -1394,35 +1394,35 @@ class Z extends HTMLElement {
   disconnectedCallback() {
     this._$EO?.forEach(((e) => e.hostDisconnected?.()));
   }
-  attributeChangedCallback(e, r, a) {
-    this._$AK(e, a);
+  attributeChangedCallback(e, r, i) {
+    this._$AK(e, i);
   }
   _$ET(e, r) {
-    const a = this.constructor.elementProperties.get(e), i = this.constructor._$Eu(e, a);
-    if (i !== void 0 && a.reflect === !0) {
-      const o = (a.converter?.toAttribute !== void 0 ? a.converter : Ne).toAttribute(r, a.type);
-      this._$Em = e, o == null ? this.removeAttribute(i) : this.setAttribute(i, o), this._$Em = null;
+    const i = this.constructor.elementProperties.get(e), a = this.constructor._$Eu(e, i);
+    if (a !== void 0 && i.reflect === !0) {
+      const n = (i.converter?.toAttribute !== void 0 ? i.converter : Ne).toAttribute(r, i.type);
+      this._$Em = e, n == null ? this.removeAttribute(a) : this.setAttribute(a, n), this._$Em = null;
     }
   }
   _$AK(e, r) {
-    const a = this.constructor, i = a._$Eh.get(e);
-    if (i !== void 0 && this._$Em !== i) {
-      const o = a.getPropertyOptions(i), n = typeof o.converter == "function" ? { fromAttribute: o.converter } : o.converter?.fromAttribute !== void 0 ? o.converter : Ne;
-      this._$Em = i;
-      const s = n.fromAttribute(r, o.type);
-      this[i] = s ?? this._$Ej?.get(i) ?? s, this._$Em = null;
+    const i = this.constructor, a = i._$Eh.get(e);
+    if (a !== void 0 && this._$Em !== a) {
+      const n = i.getPropertyOptions(a), o = typeof n.converter == "function" ? { fromAttribute: n.converter } : n.converter?.fromAttribute !== void 0 ? n.converter : Ne;
+      this._$Em = a;
+      const s = o.fromAttribute(r, n.type);
+      this[a] = s ?? this._$Ej?.get(a) ?? s, this._$Em = null;
     }
   }
-  requestUpdate(e, r, a) {
+  requestUpdate(e, r, i) {
     if (e !== void 0) {
-      const i = this.constructor, o = this[e];
-      if (a ?? (a = i.getPropertyOptions(e)), !((a.hasChanged ?? Qt)(o, r) || a.useDefault && a.reflect && o === this._$Ej?.get(e) && !this.hasAttribute(i._$Eu(e, a)))) return;
-      this.C(e, r, a);
+      const a = this.constructor, n = this[e];
+      if (i ?? (i = a.getPropertyOptions(e)), !((i.hasChanged ?? Qt)(n, r) || i.useDefault && i.reflect && n === this._$Ej?.get(e) && !this.hasAttribute(a._$Eu(e, i)))) return;
+      this.C(e, r, i);
     }
     this.isUpdatePending === !1 && (this._$ES = this._$EP());
   }
-  C(e, r, { useDefault: a, reflect: i, wrapped: o }, n) {
-    a && !(this._$Ej ?? (this._$Ej = /* @__PURE__ */ new Map())).has(e) && (this._$Ej.set(e, n ?? r ?? this[e]), o !== !0 || n !== void 0) || (this._$AL.has(e) || (this.hasUpdated || a || (r = void 0), this._$AL.set(e, r)), i === !0 && this._$Em !== e && (this._$Eq ?? (this._$Eq = /* @__PURE__ */ new Set())).add(e));
+  C(e, r, { useDefault: i, reflect: a, wrapped: n }, o) {
+    i && !(this._$Ej ?? (this._$Ej = /* @__PURE__ */ new Map())).has(e) && (this._$Ej.set(e, o ?? r ?? this[e]), n !== !0 || o !== void 0) || (this._$AL.has(e) || (this.hasUpdated || i || (r = void 0), this._$AL.set(e, r)), a === !0 && this._$Em !== e && (this._$Eq ?? (this._$Eq = /* @__PURE__ */ new Set())).add(e));
   }
   async _$EP() {
     this.isUpdatePending = !0;
@@ -1441,21 +1441,21 @@ class Z extends HTMLElement {
     if (!this.isUpdatePending) return;
     if (!this.hasUpdated) {
       if (this.renderRoot ?? (this.renderRoot = this.createRenderRoot()), this._$Ep) {
-        for (const [i, o] of this._$Ep) this[i] = o;
+        for (const [a, n] of this._$Ep) this[a] = n;
         this._$Ep = void 0;
       }
-      const a = this.constructor.elementProperties;
-      if (a.size > 0) for (const [i, o] of a) {
-        const { wrapped: n } = o, s = this[i];
-        n !== !0 || this._$AL.has(i) || s === void 0 || this.C(i, void 0, o, s);
+      const i = this.constructor.elementProperties;
+      if (i.size > 0) for (const [a, n] of i) {
+        const { wrapped: o } = n, s = this[a];
+        o !== !0 || this._$AL.has(a) || s === void 0 || this.C(a, void 0, n, s);
       }
     }
     let e = !1;
     const r = this._$AL;
     try {
-      e = this.shouldUpdate(r), e ? (this.willUpdate(r), this._$EO?.forEach(((a) => a.hostUpdate?.())), this.update(r)) : this._$EM();
-    } catch (a) {
-      throw e = !1, this._$EM(), a;
+      e = this.shouldUpdate(r), e ? (this.willUpdate(r), this._$EO?.forEach(((i) => i.hostUpdate?.())), this.update(r)) : this._$EM();
+    } catch (i) {
+      throw e = !1, this._$EM(), i;
     }
     e && this._$AE(r);
   }
@@ -1484,14 +1484,14 @@ class Z extends HTMLElement {
   firstUpdated(e) {
   }
 }
-Z.elementStyles = [], Z.shadowRootOptions = { mode: "open" }, Z[q("elementProperties")] = /* @__PURE__ */ new Map(), Z[q("finalized")] = /* @__PURE__ */ new Map(), ca?.({ ReactiveElement: Z }), (A.reactiveElementVersions ?? (A.reactiveElementVersions = [])).push("2.1.1");
+Z.elementStyles = [], Z.shadowRootOptions = { mode: "open" }, Z[q("elementProperties")] = /* @__PURE__ */ new Map(), Z[q("finalized")] = /* @__PURE__ */ new Map(), ci?.({ ReactiveElement: Z }), (A.reactiveElementVersions ?? (A.reactiveElementVersions = [])).push("2.1.1");
 /**
  * @license
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
 const W = globalThis;
-class v extends Z {
+class f extends Z {
   constructor() {
     super(...arguments), this.renderOptions = { host: this }, this._$Do = void 0;
   }
@@ -1502,7 +1502,7 @@ class v extends Z {
   }
   update(e) {
     const r = this.render();
-    this.hasUpdated || (this.renderOptions.isConnected = this.isConnected), super.update(e), this._$Do = Pr(r, this.renderRoot, this.renderOptions);
+    this.hasUpdated || (this.renderOptions.isConnected = this.isConnected), super.update(e), this._$Do = Br(r, this.renderRoot, this.renderOptions);
   }
   connectedCallback() {
     super.connectedCallback(), this._$Do?.setConnected(!0);
@@ -1514,21 +1514,19 @@ class v extends Z {
     return M;
   }
 }
-v._$litElement$ = !0, v.finalized = !0, W.litElementHydrateSupport?.({ LitElement: v });
-const ha = W.litElementPolyfillSupport;
-ha?.({ LitElement: v });
+f._$litElement$ = !0, f.finalized = !0, W.litElementHydrateSupport?.({ LitElement: f });
+const hi = W.litElementPolyfillSupport;
+hi?.({ LitElement: f });
 (W.litElementVersions ?? (W.litElementVersions = [])).push("4.2.1");
-const ua = ':host{display:inline-flex;align-items:center;justify-content:center;height:calc(16px * var(--sf));font-family:var(--typeface-regular);font-size:var(--type-size-default);font-weight:var(--type-weight-default);line-height:calc(var(--type-lineheight-default) * var(--sf));letter-spacing:calc(var(--type-letterspacing-default) * var(--sf));text-align:center;text-transform:var(--text-transform-default);text-decoration:var(--text-decoration-default);vertical-align:middle}:host([data-language="ja"]){font-family:var(--typeface-regular-jp)}:host([data-language="zh"]),:host([data-language="zh-hant"]){font-family:var(--typeface-regular-zh-hant);font-weight:800}:host([data-language="zh-hans"]){font-family:var(--typeface-regular-zh-hans);font-weight:800}', dt = class dt extends v {
+const ui = ':host{display:inline-flex;align-items:center;justify-content:flex-start;height:calc(16px * var(--sf));font-family:var(--typeface-regular);font-size:var(--type-size-default);font-weight:var(--type-weight-default);line-height:calc(var(--type-lineheight-default) * var(--sf));letter-spacing:calc(var(--type-letterspacing-default) * var(--sf));text-align:left;text-transform:var(--text-transform-default);text-decoration:var(--text-decoration-default);vertical-align:middle;white-space:nowrap}:host([data-language="ja"]){font-family:var(--typeface-regular-jp)}:host([data-language="zh"]),:host([data-language="zh-hant"]){font-family:var(--typeface-regular-zh-hant);font-weight:800}:host([data-language="zh-hans"]){font-family:var(--typeface-regular-zh-hans);font-weight:800}', dt = class dt extends f {
   static get properties() {
     return {
       text: { type: String, reflect: !0 },
-      fallback: { type: String, reflect: !0 },
-      // Kept for backward compatibility
       _text: { type: String, state: !0 }
     };
   }
   constructor() {
-    super(), this.text = "", this.fallback = "", this._text = "", this._currentLanguage = L.value, this.boundHandlers = {
+    super(), this.text = "", this._text = "", this._currentLanguage = L.value, this.boundHandlers = {
       languageChanged: (() => {
         console.log("Language changed event received in ds-text"), this._currentLanguage = L.value, this._updateLanguageAttribute(), this._loadText(), this.requestUpdate();
       })
@@ -1556,28 +1554,28 @@ const ua = ':host{display:inline-flex;align-items:center;justify-content:center;
     super.updated(e), e.has("text") && this._loadText();
   }
   _updateLanguageAttribute() {
-    const r = (this._currentLanguage || L.value || "").toLowerCase().split(/[-_]/).filter(Boolean), a = r[0] || "";
-    if (a === "ja") {
+    const r = (this._currentLanguage || L.value || "").toLowerCase().split(/[-_]/).filter(Boolean), i = r[0] || "";
+    if (i === "ja") {
       this.setAttribute("data-language", "ja");
       return;
     }
-    if (a === "zh") {
-      const i = r.includes("hans") || r.includes("cn") || r.includes("sg"), o = r.includes("hant") || r.includes("tw") || r.includes("hk") || r.includes("mo");
-      i ? this.setAttribute("data-language", "zh-hans") : o ? this.setAttribute("data-language", "zh-hant") : this.setAttribute("data-language", "zh");
+    if (i === "zh") {
+      const a = r.includes("hans") || r.includes("cn") || r.includes("sg"), n = r.includes("hant") || r.includes("tw") || r.includes("hk") || r.includes("mo");
+      a ? this.setAttribute("data-language", "zh-hans") : n ? this.setAttribute("data-language", "zh-hant") : this.setAttribute("data-language", "zh");
       return;
     }
     this.removeAttribute("data-language");
   }
   _loadText() {
     if (!this.text) {
-      this._text = this.fallback || "", this._updateLanguageAttribute(), this.requestUpdate();
+      this._text = "", this._updateLanguageAttribute(), this.requestUpdate();
       return;
     }
     try {
-      const e = oe(this.text);
-      this._text = e || this.fallback || this.text;
+      const e = ne(this.text);
+      this._text = e || this.text;
     } catch (e) {
-      console.error("Error loading text for text:", this.text, e), this._text = this.fallback || this.text;
+      console.error("Error loading text for text:", this.text, e), this._text = this.text;
     }
     this._updateLanguageAttribute(), this.requestUpdate();
   }
@@ -1585,31 +1583,26 @@ const ua = ':host{display:inline-flex;align-items:center;justify-content:center;
     return l`<span>${this._text || this.text}</span>`;
   }
 };
-dt.styles = x(ua);
+dt.styles = x(ui);
 let Ze = dt;
 customElements.define("ds-text", Ze);
-const pa = "button{max-height:calc(var(--08) * var(--sf));height:calc(var(--08) * var(--sf));min-height:calc(var(--08) * var(--sf));width:fit-content;display:inline-flex;align-items:center;justify-content:center;border:none;cursor:pointer;padding:0 calc(.5px * var(--sf));color:var(--button-text-color);font-family:var(--typeface-regular);-webkit-tap-highlight-color:transparent}button.title{background-color:var(--button-background-color-secondary);color:var(--button-text-color)}button.primary{background-color:var(--accent-color);color:var(--button-text-color);text-decoration-line:none;font-family:var(--typeface-regular)}button.secondary{background-color:var(--button-background-color-secondary);color:var(--button-text-color);font-family:var(--typeface-regular)}button.text{background-color:transparent;color:var(--button-color, var(--button-text-color));font-family:var(--typeface-regular);padding:0;text-decoration:none}button.text:hover{opacity:.8;text-decoration:none}button[bold]{font-weight:var(--type-weight-bold);font-family:var(--typeface-medium)}button[no-background]{background-color:transparent;max-height:var(--1);padding:0;color:var(--button-color, var(--button-text-color-secondary))}button[no-background][bold]{font-weight:var(--type-weight-bold);font-family:var(--typeface-medium);color:var(--button-color, var(--button-text-color-secondary))}.loading{opacity:.7}", de = class de extends v {
+const pi = ":host{display:inline-flex;min-width:0;flex:0 1 auto;max-width:100%;overflow:hidden}button{max-height:calc(var(--08) * var(--sf));height:calc(var(--08) * var(--sf));min-height:calc(var(--08) * var(--sf));width:100%;max-width:100%;min-width:0;display:inline-flex;align-items:center;justify-content:flex-start;border:none;cursor:pointer;padding:0;color:var(--button-color, var(--button-text-color));font-family:var(--typeface-regular);-webkit-tap-highlight-color:transparent;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background-color:transparent;text-decoration:none}button ds-text,button ::slotted(*){overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%;text-align:left;justify-content:flex-start}button[primary]{background-color:var(--accent-color);color:var(--button-text-color);text-decoration-line:none;font-family:var(--typeface-regular);padding:0 calc(.5px * var(--sf))}button[secondary]{background-color:var(--button-background-color-secondary);color:var(--button-text-color);font-family:var(--typeface-regular);padding:0 calc(.5px * var(--sf))}.loading{opacity:.7}", de = class de extends f {
   constructor() {
-    super(), this.variant = "title", this.disabled = !1, this.bold = !1, this["no-background"] = !1, this.blank = !1, this.text = "", this.fallback = "", this.language = "en-US", this.defaultText = "", this.href = "", this._loading = !1;
+    super(), this.primary = !1, this.secondary = !1, this.disabled = !1, this.blank = !1, this.language = "en-US", this.text = "", this.href = "", this._loading = !1;
   }
   connectedCallback() {
     super.connectedCallback();
   }
   render() {
-    const e = this.text || this.defaultText || this.fallback;
+    const e = this.text;
     return l`
       <button
-        class=${this.variant}
+        ?primary=${this.primary}
+        ?secondary=${this.secondary}
         ?disabled=${this.disabled}
-        ?bold=${this.bold}
-        ?no-background=${this["no-background"]}
         @click=${this._handleClick}
       >
-        ${e ? l`<ds-text
-              .text=${this.text}
-              .defaultValue=${this.defaultText}
-              .fallback=${this.fallback}
-            ></ds-text>` : l`<slot></slot>`}
+        ${e ? l`<ds-text .text=${this.text}></ds-text>` : l`<slot></slot>`}
       </button>
     `;
   }
@@ -1625,25 +1618,18 @@ const pa = "button{max-height:calc(var(--08) * var(--sf));height:calc(var(--08)
   }
 };
 de.properties = {
-  variant: { type: String, reflect: !0 },
+  primary: { type: Boolean, reflect: !0 },
+  secondary: { type: Boolean, reflect: !0 },
   disabled: { type: Boolean, reflect: !0 },
-  bold: { type: Boolean, reflect: !0 },
-  "no-background": {
-    type: Boolean,
-    reflect: !0,
-    attribute: "no-background"
-  },
   blank: { type: Boolean, reflect: !0 },
-  text: { type: String },
-  fallback: { type: String },
   language: { type: String },
-  defaultText: { type: String, attribute: "default-text" },
+  text: { type: String },
   href: { type: String },
   _loading: { type: Boolean, state: !0 }
-}, de.styles = x(pa);
+}, de.styles = x(pi);
 let ze = de;
 customElements.define("ds-button", ze);
-const ga = ':host{display:flex;position:absolute;top:0;left:0;right:0;width:100%;height:calc(var(--unit) * var(--sf, 1));align-items:center;justify-content:space-between;padding:0 calc(var(--unit) * var(--sf, 1));box-sizing:border-box;z-index:9999}:host([variant="warning"]){background-color:color-mix(in srgb,var(--yellow) 50%,transparent);--banner-text-color: color-mix(in srgb, var(--black) 50%, transparent);--banner-action-color: var(--slate)}:host([variant="info"]){background-color:rgba(var(--sharp-blue-rgb, 0, 122, 255),.7);--banner-text-color: var(--white, #fff);--banner-action-color: var(--white, #fff)}:host([variant="success"]){background-color:rgba(var(--apple-green-rgb, 52, 199, 89),.7);--banner-text-color: var(--white, #fff);--banner-action-color: var(--white, #fff)}:host([variant="error"]){background-color:rgba(var(--tuned-red-rgb, 255, 59, 48),.7);--banner-text-color: var(--white, #fff);--banner-action-color: var(--slate, #1e1e1e)}.text-wrapper{flex:1;cursor:pointer;user-select:none}.text-wrapper ds-text,.text-wrapper .version{color:var(--banner-text-color)}.action-wrapper{font-size:calc(12px * var(--sf, 1))}.action-wrapper a{color:var(--banner-action-color);text-decoration:none;font-family:var(--typeface-regular);font-size:calc(12px * var(--sf, 1));cursor:pointer;pointer-events:auto;display:inline-block}.action-wrapper a:hover{opacity:.8}.action-wrapper ds-text{color:var(--banner-action-color);font-family:var(--typeface-regular);font-size:calc(12px * var(--sf, 1));pointer-events:none}', ce = class ce extends v {
+const gi = ':host{display:flex;position:absolute;top:0;left:0;right:0;width:100%;height:calc(var(--unit) * var(--sf, 1));align-items:center;justify-content:space-between;padding:0 calc(var(--unit) * var(--sf, 1));box-sizing:border-box;z-index:9999}:host([variant="warning"]){background-color:color-mix(in srgb,var(--yellow) 50%,transparent);--banner-text-color: color-mix(in srgb, var(--black) 50%, transparent);--banner-action-color: var(--slate)}:host([variant="info"]){background-color:rgba(var(--sharp-blue-rgb, 0, 122, 255),.7);--banner-text-color: var(--white, #fff);--banner-action-color: var(--white, #fff)}:host([variant="success"]){background-color:rgba(var(--apple-green-rgb, 52, 199, 89),.7);--banner-text-color: var(--white, #fff);--banner-action-color: var(--white, #fff)}:host([variant="error"]){background-color:rgba(var(--tuned-red-rgb, 255, 59, 48),.7);--banner-text-color: var(--white, #fff);--banner-action-color: var(--slate, #1e1e1e)}.text-wrapper{flex:1;cursor:pointer;user-select:none}.text-wrapper ds-text,.text-wrapper .version{color:var(--banner-text-color)}.action-wrapper{font-size:calc(12px * var(--sf, 1))}.action-wrapper a{color:var(--banner-action-color);text-decoration:none;font-family:var(--typeface-regular);font-size:calc(12px * var(--sf, 1));cursor:pointer;pointer-events:auto;display:inline-block}.action-wrapper a:hover{opacity:.8}.action-wrapper ds-text{color:var(--banner-action-color);font-family:var(--typeface-regular);font-size:calc(12px * var(--sf, 1));pointer-events:none}', ce = class ce extends f {
   constructor() {
     super(...arguments), this.text = "", this.action = "", this.href = "", this.mailto = "", this.subject = "", this.describe = "", this.appVersion = "", this.variant = "warning", this.version = "", this._showVersion = !1, this._boundUpdate = () => this.requestUpdate();
   }
@@ -1660,11 +1646,11 @@ const ga = ':host{display:flex;position:absolute;top:0;left:0;right:0;width:100%
     if (this.href && this.href !== "#") return this.href;
     if (this.mailto)
       try {
-        const e = this.subject ? oe(this.subject) || this.subject : "Issue report", r = this.describe ? oe(this.describe) || this.describe : "Describe the issue:", a = this.appVersion ? oe(this.appVersion) || this.appVersion : "App version:", i = `${r}
+        const e = this.subject ? ne(this.subject) || this.subject : "Issue report", r = this.describe ? ne(this.describe) || this.describe : "Describe the issue:", i = this.appVersion ? ne(this.appVersion) || this.appVersion : "App version:", a = `${r}
 
 
-${a} ${this.version || ""}`;
-        return `mailto:${this.mailto}?subject=${encodeURIComponent(e)}&body=${encodeURIComponent(i)}`;
+${i} ${this.version || ""}`;
+        return `mailto:${this.mailto}?subject=${encodeURIComponent(e)}&body=${encodeURIComponent(a)}`;
       } catch {
         return `mailto:${this.mailto}?subject=Issue%20report&body=Describe%20the%20issue%3A%0A%0A%0AApp%20version%3A%20${this.version || ""}`;
       }
@@ -1697,10 +1683,10 @@ ce.properties = {
   variant: { type: String },
   version: { type: String },
   _showVersion: { type: Boolean, state: !0 }
-}, ce.styles = x(ga);
+}, ce.styles = x(gi);
 let Ie = ce;
 customElements.define("ds-banner", Ie);
-const he = class he extends v {
+const he = class he extends f {
   constructor() {
     super(), this.variant = "default", this.elevation = 1, this.interactive = !1, this.disabled = !1, this.padding = "medium";
   }
@@ -1816,7 +1802,7 @@ customElements.define("ds-card", Oe);
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-class Pe extends Ar {
+class Be extends Ar {
   constructor(e) {
     if (super(e), this.it = w, e.type !== $r.CHILD) throw Error(this.constructor.directiveName + "() can only be used in child bindings");
   }
@@ -1830,8 +1816,8 @@ class Pe extends Ar {
     return r.raw = r, this._t = { _$litType$: this.constructor.resultType, strings: r, values: [] };
   }
 }
-Pe.directiveName = "unsafeHTML", Pe.resultType = 1;
-const fa = _r(Pe), va = ':host{display:inline-flex;justify-content:center;align-items:center;width:calc(14px * var(--sf, 1));height:calc(14px * var(--sf, 1));color:var(--icon-color, currentColor);background:transparent}:host([variant="glyph"]),:host(:not([variant])){color:var(--icon-color, currentColor);background:transparent}:host([variant="primary"]){color:var(--icon-color, var(--button-text-color, currentColor));background:var(--accent-color)}:host([variant="secondary"]){color:var(--icon-color, var(--icon-color, currentColor));background:var( --icon-background, light-dark(var(--slate-light, #e6e6e6), var(--slate-dark, #3c3c3c)) )}svg{display:block;width:calc(14px * var(--sf, 1));height:calc(14px * var(--sf, 1))}', ma = {
+Be.directiveName = "unsafeHTML", Be.resultType = 1;
+const vi = _r(Be), fi = ':host{display:inline-flex;justify-content:center;align-items:center;width:calc(14px * var(--sf, 1));height:calc(14px * var(--sf, 1));color:var(--icon-color, currentColor);background:transparent}:host([variant="glyph"]),:host(:not([variant])){color:var(--icon-color, currentColor);background:transparent}:host([variant="primary"]){color:var(--icon-color, var(--button-text-color, currentColor));background:var(--accent-color)}:host([variant="secondary"]){color:var(--icon-color, var(--icon-color, currentColor));background:var( --icon-background, light-dark(var(--slate-light, #e6e6e6), var(--slate-dark, #3c3c3c)) )}svg{display:block;width:calc(14px * var(--sf, 1));height:calc(14px * var(--sf, 1))}', mi = {
   "1x": `<svg width="9" height="8" viewBox="0 0 9 8" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M2.20008 2.1176C1.96088 2.3776 1.48248 2.5024 1.09768 2.5024H0.848083V1.4H1.01448C1.68008 1.4 2.21048 1.0464 2.41848 0.307999H3.39608V7.692H2.20008V2.1176Z" fill="#2A2A2A"/>
 <path d="M4.27992 7.692L5.81912 4.9776L4.39432 2.492H5.68392L6.30792 3.7816C6.41192 3.9896 6.48472 4.1456 6.52632 4.312H6.54712C6.57832 4.156 6.65112 3.9792 6.75512 3.7712L7.33752 2.492H8.60632L7.21272 5.0088L8.75192 7.692H7.44152L6.72392 6.2672C6.61992 6.0592 6.53672 5.872 6.50552 5.7368H6.48472C6.45352 5.8512 6.37032 6.0488 6.25592 6.2672L5.53832 7.692H4.27992Z" fill="#2A2A2A"/>
@@ -1959,6 +1945,9 @@ const fa = _r(Pe), va = ':host{display:inline-flex;justify-content:center;align-
 </svg>`,
   email: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="11" viewBox="0 0 16 11" fill="none">
   <path fill-rule="evenodd" clip-rule="evenodd" d="M14.0871 0.989435L0.930906 0.988037L0.930542 11L13.0753 11H14.0871V0.989435ZM7.50709 8.0566L1.94249 2.49201L1.94248 9.98814H13.0753V2.48839L7.50709 8.0566ZM2.85116 2L7.50709 6.65593L12.1515 1.99952L2.85116 2Z" fill="currentColor"/>
+</svg>`,
+  exercise: `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.11131 4.50523C8.89226 4.50523 8.69548 4.45325 8.52098 4.3493C8.34648 4.24163 8.20539 4.10054 8.09772 3.92604C7.99377 3.75154 7.94179 3.55662 7.94179 3.34128C7.94179 3.12594 7.99377 2.93102 8.09772 2.75652C8.20539 2.5783 8.34648 2.43722 8.52098 2.33326C8.69548 2.2293 8.89226 2.17732 9.11131 2.17732C9.32665 2.17732 9.52157 2.2293 9.69607 2.33326C9.87057 2.43722 10.0098 2.5783 10.1138 2.75652C10.2214 2.93102 10.2753 3.12594 10.2753 3.34128C10.2753 3.55662 10.2214 3.75154 10.1138 3.92604C10.0098 4.10054 9.87057 4.24163 9.69607 4.3493C9.52157 4.45325 9.32665 4.50523 9.11131 4.50523ZM7.29019 9.12207C7.13797 9.03668 6.98389 8.94386 6.82795 8.84361C6.67202 8.73965 6.55692 8.60228 6.48267 8.43149C6.40841 8.25699 6.41584 8.01938 6.50494 7.71864L6.9282 6.19269C6.9579 6.09616 6.94305 6.0219 6.88365 5.96992C6.82424 5.91794 6.7537 5.89567 6.67202 5.90309L5.93132 5.95322L5.70855 7.49031C5.66029 7.83559 5.48022 7.99524 5.16834 7.96925C5.01983 7.9544 4.90659 7.89314 4.82862 7.78547C4.75066 7.67409 4.72281 7.53486 4.74509 7.36778L5.00127 5.47984C5.01983 5.3239 5.07738 5.19952 5.17391 5.1067C5.27044 5.01388 5.39482 4.9619 5.54705 4.95077L7.40715 4.82268C7.89723 4.78555 8.30193 4.83753 8.62123 4.97861C8.94052 5.11598 9.22084 5.34989 9.46217 5.68033L10.3755 6.94453L11.701 6.3542C11.8495 6.28737 11.985 6.27251 12.1075 6.30964C12.2338 6.34677 12.3284 6.43402 12.3915 6.57139C12.4584 6.70877 12.4658 6.83871 12.4138 6.96123C12.3618 7.08376 12.2597 7.17843 12.1075 7.24526L10.4256 7.9971C10.3143 8.04908 10.1992 8.05836 10.0803 8.02495C9.96525 7.99153 9.87429 7.92284 9.80746 7.81889L9.21713 6.9668C9.16143 6.88512 9.09089 6.84985 9.0055 6.86099C8.9201 6.87213 8.86441 6.92596 8.83842 7.0225L8.44301 8.38137L10.4312 9.68456C10.5834 9.7848 10.6688 9.9296 10.6874 10.119C10.7059 10.3083 10.6503 10.4568 10.5203 10.5645L8.69362 12.1183C8.54511 12.2445 8.3966 12.3021 8.24809 12.2909C8.10329 12.2835 7.98634 12.2297 7.89723 12.1294C7.81184 12.0292 7.77286 11.9085 7.78028 11.7674C7.78771 11.6226 7.86382 11.4908 8.00862 11.372L9.30066 10.2526L7.29019 9.12207ZM3.73707 13.6999C3.6294 13.6034 3.56814 13.4772 3.55329 13.3212C3.54215 13.1653 3.60712 13.0186 3.74821 12.8813L5.53034 11.1103L6.15409 8.89373C6.25062 9.01997 6.37128 9.13878 6.51608 9.25016C6.66088 9.35783 6.83352 9.46736 7.03401 9.57874L7.2178 9.68456L6.50494 11.5224C6.46039 11.6338 6.42326 11.7117 6.39356 11.7563C6.36386 11.7971 6.31188 11.8547 6.23762 11.9289L4.51675 13.6275C4.38309 13.7575 4.24572 13.8224 4.10463 13.8224C3.96355 13.8262 3.84103 13.7853 3.73707 13.6999Z" fill="currentColor"/>
 </svg>`,
   expand: `<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none">
   <path d="M0 5.81415V0H5.80924L5.81842 0.990424H1.70698L11.0089 10.2943L10.9997 6.18585H12V12H6.19076L6.18158 11.0096H10.293L0.99115 1.70573L1.00033 5.81415H0Z" fill="currentColor"/>
@@ -2029,6 +2018,14 @@ const fa = _r(Pe), va = ':host{display:inline-flex;justify-content:center;align-
 </svg>`,
   left: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="9" viewBox="0 0 16 9" fill="none">
   <path d="M1.90697 3.60594H15.0636V4.61651L1.90734 4.61791L4.81456 7.52513L4.10774 8.21898L-1.23978e-05 4.11123L4.11122 0L4.81855 0.707338L1.90697 3.60594Z" fill="currentColor"/>
+</svg>`,
+  life: `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.76595 12.3556L12.2336 12.3556V13.3529L4.76332 13.3529L3.76595 13.3529V12.3556Z" fill="currentColor"/>
+<path d="M4.76332 13.3529L3.76595 13.3529V7.16597L4.76329 7.16597L4.76332 13.3529Z" fill="currentColor"/>
+<path d="M12.2336 13.3529H11.2363L11.2363 7.16599L12.2336 7.16597V13.3529Z" fill="currentColor"/>
+<path d="M11.6251 6.4395H10.6278L10.6278 4.16374L11.6251 4.16372V6.4395Z" fill="currentColor"/>
+<path d="M7.99993 2.64708L13.4713 8.11835L12.7661 8.82358L7.2947 3.35231L7.99993 2.64708Z" fill="currentColor"/>
+<path d="M3.23393 8.82358L2.52869 8.11832L7.99993 2.64708L8.70517 3.3523L3.23393 8.82358Z" fill="currentColor"/>
 </svg>`,
   lock: `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path fill-rule="evenodd" clip-rule="evenodd" d="M8 2.60742C9.53669 2.60746 10.7822 3.85296 10.7822 5.38965V7.64746H11.5996V13.3926H4.40039V7.64746H5.21777V5.38965C5.21779 3.85295 6.4633 2.60744 8 2.60742ZM8 3.62695C7.02663 3.62697 6.23733 4.41628 6.2373 5.38965V7.64746H9.7627V5.38965C9.76267 4.41629 8.97336 3.62699 8 3.62695Z" fill="#1E1E1E"/>
@@ -2071,6 +2068,10 @@ const fa = _r(Pe), va = ':host{display:inline-flex;justify-content:center;align-
 </svg>`,
   row: `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M3.87698 4.67614L8.01617 0.536957L12.1488 4.66961L11.4503 5.38124L8.5254 2.45639L8.49306 13.5436L11.4114 10.6122L12.123 11.3239L7.98382 15.463L3.85117 11.3304L4.54974 10.6188L7.47459 13.5436L7.50693 2.45639L4.58861 5.38777L3.87698 4.67614Z" fill="#1E1E1E"/>
+</svg>`,
+  school: `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.48751 11.2972L10.4354 11.2964H5.49535L5.48751 11.2972Z" fill="currentColor"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.49535 13.0423C4.81691 13.0423 4.2588 12.5265 4.19152 11.8658L4.18468 4.00851C4.18468 3.42828 4.65521 2.95775 5.23544 2.95775H10.7646C11.3448 2.95775 11.8153 3.42829 11.8153 4.00851V10.4123C11.8153 10.7646 11.6092 11.0692 11.3109 11.2115V12.1689C11.5526 12.169 11.7527 12.3649 11.7527 12.6066C11.7527 12.8483 11.5526 13.0421 11.3109 13.0423H5.49535ZM5.06017 11.7316C5.06017 11.5214 5.20914 11.3456 5.40729 11.3049L5.48751 11.2972L5.49535 11.2964H10.4354V12.1668H5.49535L5.40729 12.1574C5.20923 12.1167 5.06023 11.9417 5.06017 11.7316ZM10.798 4.09446H5.20187V5.49349H10.798V4.09446Z" fill="currentColor"/>
 </svg>`,
   sdown: `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M8.50361 11.1717L8.50222 2.92134L7.49165 2.92134L7.49165 11.1713L4.58442 8.26409L3.89058 8.97091L7.99833 13.0787L12.1096 8.96744L11.4022 8.2601L8.50361 11.1717Z" fill="#1E1E1E"/>
@@ -2160,8 +2161,11 @@ const fa = _r(Pe), va = ':host{display:inline-flex;justify-content:center;align-
 </svg>`,
   up: `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M7.49645 3.48222V16H8.50702L8.50841 3.48259L11.4156 6.38982L12.1095 5.68299L8.00173 1.57524L3.8905 5.68647L4.59784 6.39381L7.49645 3.48222Z" fill="#1E1E1E"/>
+</svg>`,
+  work: `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13.8153 4.78289C13.8153 4.20267 13.3448 3.73213 12.7646 3.73213H8H3.23544C2.65521 3.73213 2.18468 4.20267 2.18468 4.78289V7.31419H13.8153L13.8153 4.78289ZM2.18468 8V11.2171C2.18468 11.7973 2.65521 12.2679 3.23544 12.2679H12.7646C13.3448 12.2679 13.8153 11.7973 13.8153 11.2171L13.8153 8L9.33239 7.98014V8.63222C9.33239 8.92233 9.09712 9.1576 8.807 9.1576H8H7.19299C6.90287 9.1576 6.66761 8.92233 6.66761 8.63222V7.98014L2.18468 8Z" fill="currentColor"/>
 </svg>`
-}, ue = class ue extends v {
+}, ue = class ue extends f {
   constructor() {
     super(...arguments), this._type = "", this.variant = "glyph";
   }
@@ -2175,26 +2179,26 @@ const fa = _r(Pe), va = ':host{display:inline-flex;justify-content:center;align-
   render() {
     if (!this._type)
       return l`<slot></slot>`;
-    const e = ma[this._type.toLowerCase()];
-    return e ? l`${fa(e)}` : l`<slot></slot>`;
+    const e = mi[this._type.toLowerCase()];
+    return e ? l`${vi(e)}` : l`<slot></slot>`;
   }
 };
 ue.properties = {
   type: { type: String, reflect: !0 },
   variant: { type: String, reflect: !0 }
-}, ue.styles = x(va);
-let Be = ue;
-customElements.define("ds-icon", Be);
-const wa = ":host{display:inline-flex;align-items:center}.cycle{display:inline-flex;align-items:center;gap:var(--025)}.color-preview{width:var(--05);height:var(--05);border-radius:999px;border:1px solid color-mix(in srgb,var(--text-color-primary) 20%,transparent);flex:0 0 auto}", ba = (t) => {
+}, ue.styles = x(fi);
+let Pe = ue;
+customElements.define("ds-icon", Pe);
+const wi = ":host{display:inline-flex;align-items:center}.cycle{display:inline-flex;align-items:center}", yi = (t) => {
   localStorage.setItem("accentColor", t);
-}, De = () => localStorage.getItem("accentColor") || "--sharp-blue", He = () => {
+}, De = () => localStorage.getItem("accentColor") || "--sharp-blue", Ve = () => {
   const t = De();
   document.documentElement.style.setProperty("--accent-color", `var(${t})`);
-}, ya = (t) => {
+}, bi = (t) => {
   localStorage.setItem("notesStyleMedium", t);
 }, It = () => localStorage.getItem("notesStyleMedium") || "note", Ot = (t) => {
   localStorage.setItem("pageStyle", t);
-}, D = () => localStorage.getItem("pageStyle") || "note", ct = class ct extends v {
+}, D = () => localStorage.getItem("pageStyle") || "note", ct = class ct extends f {
   // Define reactive properties using Lit's property system
   static get properties() {
     return {
@@ -2238,7 +2242,7 @@ const wa = ":host{display:inline-flex;align-items:center}.cycle{display:inline-f
   }
   async initializeValues() {
     if (this.type === "language") {
-      const e = Ht();
+      const e = Vt();
       this.values = e, this.currentValue = L.value;
     } else if (this.type === "theme") {
       this.values = ["light", "dark"];
@@ -2256,7 +2260,7 @@ const wa = ":host{display:inline-flex;align-items:center}.cycle{display:inline-f
         "--yellow"
       ];
       const e = De();
-      this.currentValue = e, He();
+      this.currentValue = e, Ve();
     } else if (this.type === "notes-style-medium") {
       this.values = ["default", "big", "gallery"];
       const e = It();
@@ -2272,14 +2276,14 @@ const wa = ":host{display:inline-flex;align-items:center}.cycle{display:inline-f
   }
   ensureThemeInitialized() {
     if (!localStorage.getItem("theme")) {
-      const a = window.matchMedia(
+      const i = window.matchMedia(
         "(prefers-color-scheme: dark)"
       ).matches ? "dark" : "light";
-      localStorage.setItem("theme", a), document.documentElement.classList.add(`${a}-theme`);
+      localStorage.setItem("theme", i), document.documentElement.classList.add(`${i}-theme`);
     }
   }
-  attributeChangedCallback(e, r, a) {
-    super.attributeChangedCallback(e, r, a), e === "type" && r !== a && this.initializeValues();
+  attributeChangedCallback(e, r, i) {
+    super.attributeChangedCallback(e, r, i), e === "type" && r !== i && this.initializeValues();
   }
   async setupInitialValue() {
     if (this.type === "language") {
@@ -2290,7 +2294,7 @@ const wa = ":host{display:inline-flex;align-items:center}.cycle{display:inline-f
       this.currentValue = e;
     } else if (this.type === "accent-color") {
       const e = De();
-      this.currentValue = e, He();
+      this.currentValue = e, Ve();
     } else if (this.type === "notes-style-medium") {
       const e = It();
       this.currentValue = e;
@@ -2329,43 +2333,43 @@ const wa = ":host{display:inline-flex;align-items:center}.cycle{display:inline-f
   handleButtonClick(e) {
     if (e.preventDefault(), e.stopPropagation(), !this.disabled) {
       if (this.type === "language") {
-        const a = (this.values.indexOf(this.currentValue) + 1) % this.values.length, i = this.values[a];
-        this.currentValue = i, document.startViewTransition ? document.startViewTransition(() => {
-          Mt(i);
-        }) : Mt(i), N({ language: i }), window.dispatchEvent(
+        const i = (this.values.indexOf(this.currentValue) + 1) % this.values.length, a = this.values[i];
+        this.currentValue = a, document.startViewTransition ? document.startViewTransition(() => {
+          Mt(a);
+        }) : Mt(a), N({ language: a }), window.dispatchEvent(
           new CustomEvent("language-changed", {
-            detail: { language: i }
+            detail: { language: a }
           })
         );
       } else if (this.type === "theme") {
-        const a = (this.values.indexOf(this.currentValue) + 1) % this.values.length, i = this.values[a];
-        this.currentValue = i, ta(i), N({ theme: i });
+        const i = (this.values.indexOf(this.currentValue) + 1) % this.values.length, a = this.values[i];
+        this.currentValue = a, ti(a), N({ theme: a });
       } else if (this.type === "accent-color") {
-        const a = (this.values.indexOf(this.currentValue) + 1) % this.values.length, i = this.values[a];
-        this.currentValue = i, ba(i), He(), N({ accentColor: i }), window.dispatchEvent(
+        const i = (this.values.indexOf(this.currentValue) + 1) % this.values.length, a = this.values[i];
+        this.currentValue = a, yi(a), Ve(), N({ accentColor: a }), window.dispatchEvent(
           new CustomEvent("accent-color-changed", {
-            detail: { color: i }
+            detail: { color: a }
           })
         );
       } else if (this.type === "notes-style-medium") {
-        const a = (this.values.indexOf(this.currentValue) + 1) % this.values.length, i = this.values[a];
-        this.currentValue = i, ya(i), N({ notesStyleMedium: i }), window.dispatchEvent(
+        const i = (this.values.indexOf(this.currentValue) + 1) % this.values.length, a = this.values[i];
+        this.currentValue = a, bi(a), N({ notesStyleMedium: a }), window.dispatchEvent(
           new CustomEvent("notes-style-medium-changed", {
-            detail: { style: i }
+            detail: { style: a }
           })
         );
       } else if (this.type === "page-style") {
-        const a = (this.values.indexOf(this.currentValue) + 1) % this.values.length, i = this.values[a];
-        this.currentValue = i, Ot(i), N({ pageStyle: i }), window.dispatchEvent(
+        const i = (this.values.indexOf(this.currentValue) + 1) % this.values.length, a = this.values[i];
+        this.currentValue = a, Ot(a), N({ pageStyle: a }), window.dispatchEvent(
           new CustomEvent("page-style-changed", {
-            detail: { behavior: i }
+            detail: { behavior: a }
           })
         );
       } else if (this.type === "icon-only") {
-        const a = (this.values.indexOf(this.currentValue) + 1) % this.values.length, i = this.values[a];
-        this.currentValue = i, Ot(i), N({ pageStyle: i }), window.dispatchEvent(
+        const i = (this.values.indexOf(this.currentValue) + 1) % this.values.length, a = this.values[i];
+        this.currentValue = a, Ot(a), N({ pageStyle: a }), window.dispatchEvent(
           new CustomEvent("page-style-changed", {
-            detail: { behavior: i }
+            detail: { behavior: a }
           })
         );
       }
@@ -2414,7 +2418,7 @@ const wa = ":host{display:inline-flex;align-items:center}.cycle{display:inline-f
     }[e] || e.replace("--", "").replace("-", " ");
   }
   getColorName(e) {
-    const a = {
+    const i = {
       "--tuned-red": "Red",
       "--orange": "Orange",
       "--yellow": "Yellow",
@@ -2424,10 +2428,10 @@ const wa = ":host{display:inline-flex;align-items:center}.cycle{display:inline-f
       "--sharp-blue": "Blue",
       "--pink": "Pink"
     }[e];
-    if (a && this.translationsReady) {
-      const i = U(a);
-      if (i && i !== a)
-        return i;
+    if (i && this.translationsReady) {
+      const a = U(i);
+      if (a && a !== i)
+        return a;
     }
     return e.replace("--", "").replace("-", " ");
   }
@@ -2438,7 +2442,7 @@ const wa = ":host{display:inline-flex;align-items:center}.cycle{display:inline-f
     return l`
       <div class="cycle">
         <ds-button
-          variant=${this.variant || (this.type === "language" || this.type === "theme" ? "secondary" : "primary")}
+          variant=${this.type === "accent-color" ? "primary" : this.variant || (this.type === "language" || this.type === "theme" ? "secondary" : "primary")}
           ?disabled=${this.disabled}
           @click=${this.handleButtonClick}
         >
@@ -2448,7 +2452,7 @@ const wa = ":host{display:inline-flex;align-items:center}.cycle{display:inline-f
               >` : this.type === "language" ? l`<ds-text
                   text=${this.getValueDisplay(this.currentValue)}
                 ></ds-text>` : this.type === "theme" ? l`<ds-text
-                    text=${this.currentValue}
+                    text=${this.currentValue === "light" ? "Light" : "Dark"}
                   ></ds-text>` : this.type === "accent-color" ? l`<ds-text
                       text=${this.getColorKey(this.currentValue)}
                     ></ds-text>` : this.type === "page-style" ? l`<ds-text
@@ -2457,13 +2461,6 @@ const wa = ":host{display:inline-flex;align-items:center}.cycle{display:inline-f
                         text=${this.getValueDisplay(this.currentValue)}
                       ></ds-text>`}
         </ds-button>
-
-        ${this.type === "accent-color" ? l`
-              <div
-                class="color-preview"
-                style="background-color: var(${this.currentValue})"
-              ></div>
-            ` : ""}
       </div>
     `;
   }
@@ -2485,7 +2482,7 @@ const wa = ":host{display:inline-flex;align-items:center}.cycle{display:inline-f
   }
   handleTranslationsLoaded() {
     if (this.translationsReady = !0, this.type === "language") {
-      const e = Ht();
+      const e = Vt();
       this.values = e;
     }
     this.setupInitialValue();
@@ -2503,19 +2500,19 @@ const wa = ":host{display:inline-flex;align-items:center}.cycle{display:inline-f
     this.setupInitialValue();
   }
 };
-ct.styles = x(wa);
+ct.styles = x(wi);
 let Re = ct;
 customElements.define("ds-cycle", Re);
-const xa = ":host{display:inline;font-family:var(--typeface-regular, var(--typeface-regular-regular));font-size:inherit;color:inherit}", ht = class ht extends v {
+const xi = ":host{display:inline;font-family:var(--typeface-regular, var(--typeface-regular-regular));font-size:inherit;color:inherit}", ht = class ht extends f {
   render() {
     const e = (/* @__PURE__ */ new Date()).getFullYear();
     return l`<span>${e}</span>`;
   }
 };
-ht.styles = x(xa);
+ht.styles = x(xi);
 let je = ht;
 customElements.define("ds-date", je);
-const Ca = ':host{display:block;width:100%;--gap-size: var(--unit);height:var(--gap-size);flex:0 0 auto}:host([tenth]){--gap-size: var(--tenth)}:host([quarter]){--gap-size: var(--quarter)}:host([half]){--gap-size: var(--half)}:host([eight-tenth]){--gap-size: var(--eight-tenth)}:host([unit]){--gap-size: var(--unit)}:host([double]){--gap-size: var(--double)}:host([triple]){--gap-size: var(--triple)}:host([quad]){--gap-size: var(--quad)}:host([oct]){--gap-size: var(--oct)}:host([dozen]){--gap-size: var(--dozen)}:host([size="01"]){--gap-size: var(--01)}:host([size="025"]){--gap-size: var(--025)}:host([size="05"]){--gap-size: var(--05)}:host([size="08"]){--gap-size: var(--08)}:host([size="1"]){--gap-size: var(--1)}:host([size="2"]){--gap-size: var(--2)}:host([size="3"]){--gap-size: var(--3)}:host([size="4"]){--gap-size: var(--4)}:host([size="8"]){--gap-size: var(--8)}:host([size="12"]){--gap-size: var(--12)}', pe = class pe extends v {
+const Ci = ':host{display:block;width:100%;--gap-size: var(--unit);height:var(--gap-size);flex:0 0 auto}:host([tenth]){--gap-size: var(--tenth)}:host([quarter]){--gap-size: var(--quarter)}:host([half]){--gap-size: var(--half)}:host([eight-tenth]){--gap-size: var(--eight-tenth)}:host([unit]){--gap-size: var(--unit)}:host([double]){--gap-size: var(--double)}:host([triple]){--gap-size: var(--triple)}:host([quad]){--gap-size: var(--quad)}:host([oct]){--gap-size: var(--oct)}:host([dozen]){--gap-size: var(--dozen)}:host([size="01"]){--gap-size: var(--01)}:host([size="025"]){--gap-size: var(--025)}:host([size="05"]){--gap-size: var(--05)}:host([size="08"]){--gap-size: var(--08)}:host([size="1"]){--gap-size: var(--1)}:host([size="2"]){--gap-size: var(--2)}:host([size="3"]){--gap-size: var(--3)}:host([size="4"]){--gap-size: var(--4)}:host([size="8"]){--gap-size: var(--8)}:host([size="12"]){--gap-size: var(--12)}', pe = class pe extends f {
   constructor() {
     super(), this.size = "";
   }
@@ -2526,10 +2523,10 @@ const Ca = ':host{display:block;width:100%;--gap-size: var(--unit);height:var(--
 pe.properties = {
   /** Raw scale token selector ("01", "025", "05", "08", "1", "2", "3", "4", "8", "12") */
   size: { type: String, reflect: !0 }
-}, pe.styles = x(Ca);
+}, pe.styles = x(Ci);
 let Ue = pe;
 customElements.define("ds-gap", Ue);
-const La = ':host{display:block;width:100%}.input-wrapper{display:flex;flex-direction:column;gap:calc(var(--025) * var(--sf, 1));width:100%}label{font-family:var(--typeface-regular);font-size:calc(12px * var(--sf, 1));color:var(--text-color-secondary)}.input-container{position:relative;display:flex;align-items:center;width:100%}input{background:var(--base-light-grey, #e8e8e8);border:none;padding:0 calc(2px * var(--sf, 1));font-size:var(--type-size-default);font-family:var(--typeface-regular, "GT-America-Standard-Regular");color:var(--base-darker-grey, #797979);line-height:calc(16px * var(--sf, 1));letter-spacing:calc(-.4px * var(--sf, 1));opacity:.5;height:calc(unit * var(--sf, 1));width:100%;box-sizing:border-box;outline:none;transition:border-color .2s ease,box-shadow .2s ease}input:focus{outline:none;opacity:1;color:var(--base-slate, #1e1e1e)}input::placeholder{color:var(--base-darker-grey, #797979);opacity:.5}input:disabled{cursor:not-allowed;opacity:.5}input:read-only{background-color:var(--input-readonly-background, #fafafa)}:host([variant="filled"]) input{background-color:var( --input-filled-background, var(--surface-color-secondary, #f5f5f5) );border:none;border-bottom:2px solid var(--border-color, #ccc);border-radius:calc(var(--025) * var(--sf, 1)) calc(var(--025) * var(--sf, 1)) 0 0}:host([variant="filled"]) input:focus{border-bottom-color:var(--accent-color, #007aff);box-shadow:none}:host([variant="outlined"]) input{background-color:transparent;border:2px solid var(--border-color, #ccc)}:host([variant="outlined"]) input:focus{border-color:var(--accent-color, #007aff)}.error-message{font-family:var(--typeface-regular);font-size:calc(12px * var(--sf, 1));color:var(--error-color, #ff3b30);margin-top:calc(var(--025) * var(--sf, 1))}:host([required]) label:after{content:" *";color:var(--error-color, #ff3b30)}input.has-error{border-color:var(--error-color, #ff3b30)}input.has-error:focus{box-shadow:0 0 0 2px #ff3b3033}', ge = class ge extends v {
+const Li = ':host{display:block;width:100%}.input-wrapper{display:flex;flex-direction:column;gap:calc(var(--025) * var(--sf, 1));width:100%}label{font-family:var(--typeface-regular);font-size:calc(12px * var(--sf, 1));color:var(--text-color-secondary)}.input-container{position:relative;display:flex;align-items:center;width:100%}input{background:var(--base-light-grey, #e8e8e8);border:none;padding:0 calc(2px * var(--sf, 1));font-size:var(--type-size-default);font-family:var(--typeface-regular, "GT-America-Standard-Regular");color:var(--base-darker-grey, #797979);line-height:calc(16px * var(--sf, 1));letter-spacing:calc(-.4px * var(--sf, 1));opacity:.5;height:calc(unit * var(--sf, 1));width:100%;box-sizing:border-box;outline:none;transition:border-color .2s ease,box-shadow .2s ease}input:focus{outline:none;opacity:1;color:var(--base-slate, #1e1e1e)}input::placeholder{color:var(--base-darker-grey, #797979);opacity:.5}input:disabled{cursor:not-allowed;opacity:.5}input:read-only{background-color:var(--input-readonly-background, #fafafa)}:host([variant="filled"]) input{background-color:var( --input-filled-background, var(--surface-color-secondary, #f5f5f5) );border:none;border-bottom:2px solid var(--border-color, #ccc);border-radius:calc(var(--025) * var(--sf, 1)) calc(var(--025) * var(--sf, 1)) 0 0}:host([variant="filled"]) input:focus{border-bottom-color:var(--accent-color, #007aff);box-shadow:none}:host([variant="outlined"]) input{background-color:transparent;border:2px solid var(--border-color, #ccc)}:host([variant="outlined"]) input:focus{border-color:var(--accent-color, #007aff)}.error-message{font-family:var(--typeface-regular);font-size:calc(12px * var(--sf, 1));color:var(--error-color, #ff3b30);margin-top:calc(var(--025) * var(--sf, 1))}:host([required]) label:after{content:" *";color:var(--error-color, #ff3b30)}input.has-error{border-color:var(--error-color, #ff3b30)}input.has-error:focus{box-shadow:0 0 0 2px #ff3b3033}', ge = class ge extends f {
   constructor() {
     super(), this.type = "text", this.name = "", this.value = "", this.placeholder = "", this.placeholderKey = "", this.label = "", this.labelText = "", this.disabled = !1, this.readonly = !1, this.required = !1, this.autofocus = !1, this.autocomplete = "off", this.pattern = "", this.minlength = 0, this.maxlength = 0, this.min = "", this.max = "", this.step = "", this.variant = "default", this.error = "", this.errorText = "", this._focused = !1;
   }
@@ -2633,10 +2630,10 @@ ge.properties = {
   error: { type: String },
   errorText: { type: String, attribute: "error-text" },
   _focused: { type: Boolean, state: !0 }
-}, ge.styles = x(La);
+}, ge.styles = x(Li);
 let qe = ge;
 customElements.define("ds-input", qe);
-const Ea = ':host{position:relative;display:inline-block}.slot-wrapper{display:inline-flex;align-items:center}.bubble{display:flex;align-items:center;justify-content:center;position:absolute;left:50%;bottom:100%;transform:translate(-50%,calc(-2px * var(--sf)));z-index:1000;pointer-events:none;height:calc(var(--08) * var(--sf));opacity:0;transition:opacity .12s ease,transform .12s ease;background-color:light-dark(var(--black),var(--white));color:light-dark(var(--white),var(--black));border-radius:0;font-size:var(--type-size-default);padding:0px calc(1px * var(--sf));font-family:var( --typeface-regular, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif );font-weight:500;white-space:nowrap;min-width:max-content}.bubble.visible{opacity:1}', fe = class fe extends v {
+const Ei = ':host{position:relative;display:inline-block}.slot-wrapper{display:inline-flex;align-items:center}.bubble{display:flex;align-items:center;justify-content:center;position:absolute;left:50%;bottom:100%;transform:translate(-50%,calc(-2px * var(--sf)));z-index:1000;pointer-events:none;height:calc(var(--08) * var(--sf));opacity:0;transition:opacity .12s ease,transform .12s ease;background-color:light-dark(var(--black),var(--white));color:light-dark(var(--white),var(--black));border-radius:0;font-size:var(--type-size-default);padding:0px calc(1px * var(--sf));font-family:var( --typeface-regular, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif );font-weight:500;white-space:nowrap;min-width:max-content}.bubble.visible{opacity:1}', ve = class ve extends f {
   constructor() {
     super(), this.text = "", this.defaultValue = "", this._text = "", this._visible = !1, this.boundWindowHandlers = {
       languageChanged: (() => {
@@ -2702,15 +2699,15 @@ const Ea = ':host{position:relative;display:inline-block}.slot-wrapper{display:i
     `;
   }
 };
-fe.properties = {
+ve.properties = {
   text: { type: String, reflect: !0 },
   defaultValue: { type: String, reflect: !0, attribute: "default-value" },
   _text: { state: !0 },
   _visible: { state: !0 }
-}, fe.styles = x(Ea);
-let We = fe;
+}, ve.styles = x(Ei);
+let We = ve;
 customElements.define("ds-tooltip", We);
-const ka = ":host{display:flex;flex-direction:row;align-items:end}:host([fill]){justify-content:space-between;height:calc(var(--1) * var(--sf))}:host([centered]){justify-content:center;height:calc(var(--1) * var(--sf));gap:calc(var(--025) * var(--sf))}:host([end]){justify-content:flex-end;height:calc(var(--1) * var(--sf));gap:calc(var(--025) * var(--sf))}", ve = class ve extends v {
+const ki = ":host{display:flex;flex-direction:row;align-items:end}:host([fill]){justify-content:space-between;height:calc(var(--1) * var(--sf));width:100%}:host([centered]){justify-content:center;height:calc(var(--1) * var(--sf));gap:calc(var(--025) * var(--sf))}:host([end]){justify-content:flex-end;height:calc(var(--1) * var(--sf));gap:calc(var(--025) * var(--sf))}", fe = class fe extends f {
   constructor() {
     super(), this.fill = !1, this.centered = !1, this.end = !1;
   }
@@ -2718,22 +2715,22 @@ const ka = ":host{display:flex;flex-direction:row;align-items:end}:host([fill]){
     return l`<slot></slot>`;
   }
 };
-ve.properties = {
+fe.properties = {
   fill: { type: Boolean, reflect: !0 },
   centered: { type: Boolean, reflect: !0 },
   end: { type: Boolean, reflect: !0 }
-}, ve.styles = x(ka);
-let Fe = ve;
+}, fe.styles = x(ki);
+let Fe = fe;
 customElements.define("ds-row", Fe);
-const $a = ":host{display:block;width:calc(240px * var(--sf));color:var(--text-color-primary)}details{width:100%}summary{cursor:pointer;user-select:none;list-style:none;outline:none}summary::-webkit-details-marker{display:none}.summaryRow{width:100%}ds-icon.chevron{transform:rotate(0);transition:transform .14s ease}details[open] ds-icon.chevron{transform:rotate(180deg)}.detailsBody{padding-top:calc(var(--half) * var(--sf))}.detailsText{display:block;white-space:normal;text-align:left}", me = class me extends v {
+const $i = ":host{display:block;width:calc(240px * var(--sf));color:var(--text-color-primary)}details{width:100%}summary{cursor:pointer;user-select:none;list-style:none;outline:none}summary::-webkit-details-marker{display:none}.summaryRow{width:100%}ds-icon.chevron{transform:rotate(0);transition:transform .14s ease}details[open] ds-icon.chevron{transform:rotate(180deg)}.detailsBody{padding-top:calc(var(--half) * var(--sf))}.detailsText{display:block;white-space:normal;text-align:left}", me = class me extends f {
   constructor() {
     super(), this.summary = "", this.details = "", this.open = !1, this._hasSlottedContent = !1;
   }
   _handleSlotChange(e) {
-    const i = e.target.assignedNodes({ flatten: !0 }).some(
-      (o) => o.nodeType === Node.ELEMENT_NODE || o.nodeType === Node.TEXT_NODE && o.textContent?.trim()
+    const a = e.target.assignedNodes({ flatten: !0 }).some(
+      (n) => n.nodeType === Node.ELEMENT_NODE || n.nodeType === Node.TEXT_NODE && n.textContent?.trim()
     );
-    this._hasSlottedContent = i;
+    this._hasSlottedContent = a;
   }
   render() {
     return l`
@@ -2773,10 +2770,10 @@ me.properties = {
   details: { type: String },
   open: { type: Boolean, reflect: !0 },
   _hasSlottedContent: { type: Boolean, state: !0 }
-}, me.styles = x($a);
+}, me.styles = x($i);
 let Ke = me;
 customElements.define("ds-accordion", Ke);
-const we = class we extends v {
+const we = class we extends f {
   constructor() {
     super(), this.action = "", this.method = "post", this.name = "", this.novalidate = !1, this.autocomplete = "on", this._isSubmitting = !1;
   }
@@ -2784,19 +2781,19 @@ const we = class we extends v {
    * Get all form data as an object
    */
   getFormData() {
-    const e = {}, a = this.shadowRoot?.querySelector("slot")?.assignedElements({ flatten: !0 }) || [];
-    for (const i of a)
-      this._collectFormData(i, e);
+    const e = {}, i = this.shadowRoot?.querySelector("slot")?.assignedElements({ flatten: !0 }) || [];
+    for (const a of i)
+      this._collectFormData(a, e);
     return e;
   }
   _collectFormData(e, r) {
-    const a = e.getAttribute("name") || e.name;
-    if (a) {
-      const o = e.value;
-      o !== void 0 && (e instanceof HTMLInputElement && (e.type === "checkbox" || e.type === "radio") ? e.type === "checkbox" ? r[a] = e.checked : e.type === "radio" && e.checked && (r[a] = o) : r[a] = o);
+    const i = e.getAttribute("name") || e.name;
+    if (i) {
+      const n = e.value;
+      n !== void 0 && (e instanceof HTMLInputElement && (e.type === "checkbox" || e.type === "radio") ? e.type === "checkbox" ? r[i] = e.checked : e.type === "radio" && e.checked && (r[i] = n) : r[i] = n);
     }
-    (e.shadowRoot?.querySelectorAll("*") || e.querySelectorAll("*")).forEach((o) => {
-      this._collectFormData(o, r);
+    (e.shadowRoot?.querySelectorAll("*") || e.querySelectorAll("*")).forEach((n) => {
+      this._collectFormData(n, r);
     });
   }
   /**
@@ -2809,19 +2806,19 @@ const we = class we extends v {
     };
     if (this.novalidate)
       return e;
-    const a = this.shadowRoot?.querySelector("slot")?.assignedElements({ flatten: !0 }) || [];
-    for (const i of a)
-      this._validateElement(i, e);
+    const i = this.shadowRoot?.querySelector("slot")?.assignedElements({ flatten: !0 }) || [];
+    for (const a of i)
+      this._validateElement(a, e);
     return e;
   }
   _validateElement(e, r) {
-    const a = e.getAttribute("name") || e.name;
+    const i = e.getAttribute("name") || e.name;
     if (e.tagName.toLowerCase() === "ds-input") {
-      const o = e;
-      o.required && !o.value && (r.valid = !1, r.errors[a || "unknown"] = "This field is required");
+      const n = e;
+      n.required && !n.value && (r.valid = !1, r.errors[i || "unknown"] = "This field is required");
     }
-    (e instanceof HTMLInputElement || e instanceof HTMLTextAreaElement || e instanceof HTMLSelectElement) && (e.checkValidity() || (r.valid = !1, r.errors[a || "unknown"] = e.validationMessage)), (e.shadowRoot?.querySelectorAll("*") || e.querySelectorAll("*")).forEach((o) => {
-      this._validateElement(o, r);
+    (e instanceof HTMLInputElement || e instanceof HTMLTextAreaElement || e instanceof HTMLSelectElement) && (e.checkValidity() || (r.valid = !1, r.errors[i || "unknown"] = e.validationMessage)), (e.shadowRoot?.querySelectorAll("*") || e.querySelectorAll("*")).forEach((n) => {
+      this._validateElement(n, r);
     });
   }
   /**
@@ -2829,13 +2826,13 @@ const we = class we extends v {
    */
   reset() {
     const r = this.shadowRoot?.querySelector("slot")?.assignedElements({ flatten: !0 }) || [];
-    for (const a of r)
-      this._resetElement(a);
+    for (const i of r)
+      this._resetElement(i);
     this.dispatchEvent(new CustomEvent("form-reset", { bubbles: !0 }));
   }
   _resetElement(e) {
-    (e instanceof HTMLInputElement || e instanceof HTMLTextAreaElement || e instanceof HTMLSelectElement) && (e instanceof HTMLInputElement && e.type === "checkbox" ? e.checked = !1 : e.value = ""), e.tagName.toLowerCase() === "ds-input" && (e.value = ""), (e.shadowRoot?.querySelectorAll("*") || e.querySelectorAll("*")).forEach((a) => {
-      this._resetElement(a);
+    (e instanceof HTMLInputElement || e instanceof HTMLTextAreaElement || e instanceof HTMLSelectElement) && (e instanceof HTMLInputElement && e.type === "checkbox" ? e.checked = !1 : e.value = ""), e.tagName.toLowerCase() === "ds-input" && (e.value = ""), (e.shadowRoot?.querySelectorAll("*") || e.querySelectorAll("*")).forEach((i) => {
+      this._resetElement(i);
     });
   }
   /**
@@ -2862,7 +2859,7 @@ const we = class we extends v {
       })
     ), this.action)
       try {
-        const a = await fetch(this.action, {
+        const i = await fetch(this.action, {
           method: this.method.toUpperCase(),
           headers: {
             "Content-Type": "application/json"
@@ -2871,14 +2868,14 @@ const we = class we extends v {
         });
         this.dispatchEvent(
           new CustomEvent("form-response", {
-            detail: { response: a, data: r },
+            detail: { response: i, data: r },
             bubbles: !0
           })
         );
-      } catch (a) {
+      } catch (i) {
         this.dispatchEvent(
           new CustomEvent("form-error", {
-            detail: { error: a, data: r },
+            detail: { error: i, data: r },
             bubbles: !0
           })
         );
@@ -2938,15 +2935,15 @@ we.properties = {
   `;
 let Ge = we;
 customElements.define("ds-form", Ge);
-const _a = ":host{display:flex;flex-direction:column;gap:0;width:100%}", ut = class ut extends v {
+const _i = ":host{display:flex;flex-direction:column;gap:0;width:100%}", ut = class ut extends f {
   render() {
     return l`<slot></slot>`;
   }
 };
-ut.styles = x(_a);
+ut.styles = x(_i);
 let Je = ut;
 customElements.define("ds-list", Je);
-const Aa = ":host{display:block;width:100%}.table-container{display:flex;flex-direction:column;width:100%}.table-header{display:grid;grid-template-columns:160px 80px 80px 80px;height:20px;width:400px}.table-body{display:grid;grid-template-columns:160px 80px 80px 80px;border:1px solid var(--black);width:400px}.header-cell{height:20px;display:flex;align-items:center;justify-content:left;padding:0 2px;font-family:var(--typeface-regular);font-size:var(--type-size-default);font-weight:var(--type-weight-default);line-height:var(--type-lineheight-default);color:var(--black);letter-spacing:-.26px}.data-cell{height:20px;margin-top:-1px;display:flex;align-items:center;justify-content:left;outline:1px solid var(--black);font-family:var(--typeface-regular);font-size:var(--type-size-default);font-weight:var(--type-weight-default);line-height:var(--type-lineheight-default);color:var(--black);letter-spacing:-.26px}.status-cell{background-color:var(--apple-green);text-align:center}.product-cell{text-align:left;justify-content:flex-start}.users-cell,.retention-cell{text-align:center}@media (max-width: 480px){.table-header,.table-body{width:100%;grid-template-columns:1fr 60px 60px 60px}}", be = class be extends v {
+const Ai = ":host{display:block;width:100%}.table-container{display:flex;flex-direction:column;width:100%}.table-header{display:grid;grid-template-columns:160px 80px 80px 80px;height:20px;width:400px}.table-body{display:grid;grid-template-columns:160px 80px 80px 80px;border:1px solid var(--black);width:400px}.header-cell{height:20px;display:flex;align-items:center;justify-content:left;padding:0 2px;font-family:var(--typeface-regular);font-size:var(--type-size-default);font-weight:var(--type-weight-default);line-height:var(--type-lineheight-default);color:var(--black);letter-spacing:-.26px}.data-cell{height:20px;margin-top:-1px;display:flex;align-items:center;justify-content:left;outline:1px solid var(--black);font-family:var(--typeface-regular);font-size:var(--type-size-default);font-weight:var(--type-weight-default);line-height:var(--type-lineheight-default);color:var(--black);letter-spacing:-.26px}.status-cell{background-color:var(--apple-green);text-align:center}.product-cell{text-align:left;justify-content:flex-start}.users-cell,.retention-cell{text-align:center}@media (max-width: 480px){.table-header,.table-body{width:100%;grid-template-columns:1fr 60px 60px 60px}}", ye = class ye extends f {
   constructor() {
     super(), this.data = [], this.columns = ["Product", "Users", "Retention"], this.showStatus = !0;
   }
@@ -2975,22 +2972,22 @@ const Aa = ":host{display:block;width:100%}.table-container{display:flex;flex-di
     `;
   }
 };
-be.properties = {
+ye.properties = {
   data: { type: Array },
   columns: { type: Array },
   showStatus: { type: Boolean, attribute: "show-status" }
-}, be.styles = x(Aa);
-let Ye = be;
+}, ye.styles = x(Ai);
+let Ye = ye;
 customElements.define("ds-table", Ye);
-const Sa = ":host{display:flex;width:100%;max-width:100%;flex-direction:column;background-color:var(--background-color);box-sizing:border-box}:host ::slotted(*){max-width:100%;box-sizing:border-box}@media (max-width: 820px){:host{width:100%;max-width:100%}}@media (min-width: 821px){:host{max-width:1000px;margin-left:auto;margin-right:auto;width:100%}}", pt = class pt extends v {
+const Si = ":host{display:flex;width:100%;max-width:100%;flex-direction:column;background-color:var(--background-color);box-sizing:border-box}:host ::slotted(*){max-width:100%;box-sizing:border-box}@media (max-width: 820px){:host{width:100%;max-width:100%}}@media (min-width: 821px){:host{max-width:1000px;margin-left:auto;margin-right:auto;width:100%}}", pt = class pt extends f {
   render() {
     return l`<slot></slot>`;
   }
 };
-pt.styles = x(Sa);
+pt.styles = x(Si);
 let Xe = pt;
 customElements.define("ds-container", Xe);
-const Va = ':host{margin-top:.5px!important;margin-left:.5px!important;display:grid;width:1440px;height:1280px;grid-template-columns:repeat(auto-fill,19px);grid-template-rows:repeat(auto-fill,19px);gap:1px;row-rule:calc(1px * var(--sf)) solid var(--grid-color);column-rule:calc(1px * var(--sf)) solid var(--grid-color);outline:calc(1px * var(--sf)) solid light-dark(var(--sharp-blue),var(--yellow));position:fixed;top:0;left:50%;transform:translate(-50%);pointer-events:none;z-index:300}:host(.mobile){width:calc(100% - calc(1px * var(--sf)));max-width:100vw;margin-left:.5px!important;margin-top:0!important;box-sizing:border-box;position:fixed;top:calc(.5px * var(--sf));left:50%;transform:translate(-50%);pointer-events:none;z-index:300;gap:calc(1px * var(--sf));grid-template-columns:repeat(14,calc(19px * var(--sf)));grid-template-rows:repeat(auto-fill,calc(19px * var(--sf)))}:host([align="left"]){left:0;transform:none}:host([align="center"]){left:50%;transform:translate(-50%)}:host([align="right"]){left:auto;right:0;transform:none}', ye = class ye extends v {
+const Hi = ':host{margin-top:.5px!important;margin-left:.5px!important;display:grid;width:1440px;height:1280px;grid-template-columns:repeat(auto-fill,19px);grid-template-rows:repeat(auto-fill,19px);gap:1px;row-rule:calc(1px * var(--sf)) solid var(--grid-color);column-rule:calc(1px * var(--sf)) solid var(--grid-color);outline:calc(1px * var(--sf)) solid light-dark(var(--sharp-blue),var(--yellow));position:fixed;top:0;left:50%;transform:translate(-50%);pointer-events:none;z-index:300}:host(.mobile){width:calc(100% - calc(1px * var(--sf)));max-width:100vw;margin-left:.5px!important;margin-top:0!important;box-sizing:border-box;position:fixed;top:calc(.5px * var(--sf));left:50%;transform:translate(-50%);pointer-events:none;z-index:300;gap:calc(1px * var(--sf));grid-template-columns:repeat(14,calc(19px * var(--sf)));grid-template-rows:repeat(auto-fill,calc(19px * var(--sf)))}:host([align="left"]){left:0;transform:none}:host([align="center"]){left:50%;transform:translate(-50%)}:host([align="right"]){left:auto;right:0;transform:none}', be = class be extends f {
   connectedCallback() {
     super.connectedCallback(), this.updateMobileClass(), this.resizeObserver = () => {
       this.resizeTimeout && clearTimeout(this.resizeTimeout), this.resizeTimeout = setTimeout(() => {
@@ -3002,51 +2999,36 @@ const Va = ':host{margin-top:.5px!important;margin-left:.5px!important;display:g
     super.disconnectedCallback(), this.resizeObserver && window.removeEventListener("resize", this.resizeObserver), this.resizeTimeout && clearTimeout(this.resizeTimeout);
   }
   updateMobileClass() {
-    ot() ? (this.classList.add("mobile"), this.classList.remove("desktop")) : (this.classList.add("desktop"), this.classList.remove("mobile"));
+    nt() ? (this.classList.add("mobile"), this.classList.remove("desktop")) : (this.classList.add("desktop"), this.classList.remove("mobile"));
   }
   render() {
     return l``;
   }
 };
-ye.properties = {
+be.properties = {
   align: { type: String }
-}, ye.styles = x(Va);
-let Qe = ye;
+}, be.styles = x(Hi);
+let Qe = be;
 customElements.define("ds-grid", Qe);
-const Ha = ':host{display:grid;position:relative;width:100%}slot{display:contents}:host([mode="portfolio"]){--portfolio-cols: 120px 480px 40px;--portfolio-rows: 120px 120px 60px 180px 60px 120px 60px 20px 120px 120px;--portfolio-areas: "square . ." ". title ." ". header ." ". projects ." ". . ." ". bio ." ". . ." ". nav ." ". . ." ". footer ." ". . .";--portfolio-overlay-cols: 120px 480px;--portfolio-overlay-areas: "square ." ". title" ". header" ". projects" ". ." ". bio" ". ." ". nav" ". ." ". footer" ". .";grid-template-columns:var(--portfolio-cols);grid-template-rows:var(--portfolio-rows);grid-template-areas:var(--portfolio-areas);min-height:600px;background-color:#a5a5a508;max-width:640px;margin:0}:host([mode="portfolio"]) .view-overlay{grid-template-columns:var(--portfolio-overlay-cols);grid-template-rows:var(--portfolio-rows);grid-template-areas:var(--portfolio-overlay-areas)}:host([mode="company"]){--company-cols: auto 400px auto;--company-rows: 80px 20px 20px 120px 20px 120px;--company-areas: ". . ." ". header ." ". . ." ". content ." ". . ." ". footer .";grid-template-columns:var(--company-cols);grid-template-rows:var(--company-rows);grid-template-areas:var(--company-areas);gap:0;max-width:100%}:host([mode="company"]) .view-overlay{grid-template-columns:var(--company-cols);grid-template-rows:var(--company-rows);grid-template-areas:var(--company-areas);gap:0}:host([align="left"]),:host([mode="portfolio"][align="left"]),:host([mode="company"][align="left"]),:host([mode="app"][align="left"]){margin:0;justify-self:start}:host([align="center"]),:host([mode="portfolio"][align="center"]),:host([mode="company"][align="center"]),:host([mode="app"][align="center"]){margin:0 auto;justify-self:center}:host([align="right"]),:host([mode="portfolio"][align="right"]),:host([mode="company"][align="right"]),:host([mode="app"][align="right"]){margin:0 0 0 auto;justify-self:end}:host([mode="app"]){--app-cols: 100%;--app-rows: calc(var(--unit) * var(--sf)) calc(var(--unit) * var(--sf)) calc(var(--unit) * var(--sf)) calc(var(--double) * var(--sf)) calc(var(--dozen) * var(--sf)) calc(var(--unit) * var(--sf)) calc(var(--quad) * var(--sf)) calc(var(--double) * var(--sf));--app-areas: "banner" "." "header" "." "main" "page-dots" "." "footer";--app-overlay-cols: 100%;--app-overlay-rows: calc(var(--unit) * var(--sf)) calc(var(--unit) * var(--sf)) calc(var(--unit) * var(--sf)) calc(var(--double) * var(--sf)) calc(var(--dozen) * var(--sf)) calc(var(--unit) * var(--sf)) calc(var(--quad) * var(--sf)) calc(var(--double) * var(--sf));--app-overlay-areas: "banner" "." "header" "." "main" "page-dots" "." "footer";grid-template-columns:var(--app-cols);grid-template-rows:var(--app-rows);grid-template-areas:var(--app-areas);min-height:100vh;background-color:transparent;width:calc(240px * var(--sf, 1));max-width:calc(240px * var(--sf, 1));margin:0 auto}:host([mode="app"]) .view-overlay{grid-template-columns:var(--app-overlay-cols);grid-template-rows:var(--app-overlay-rows);grid-template-areas:var(--app-overlay-areas)}.view-overlay{position:absolute;margin-left:-1px;inset:0;pointer-events:none;z-index:1000;display:grid}.view-area{display:flex;width:calc(240px * var(--sf, 1));height:100%;align-items:center;justify-content:center;font-family:var(--typeface-regular);font-size:calc(var(--type-size-default) * var(--05));color:color-mix(in srgb,var(--tuned-red) 25%,transparent);background-color:color-mix(in srgb,var(--accent-color) 25%,transparent);opacity:1}:host([mode="portfolio"]) .view-area:nth-of-type(1){background-color:color-mix(in srgb,var(--tuned-red) 25%,transparent)}:host([mode="portfolio"]) .view-area:nth-of-type(2){border-color:var(--sharp-blue)}:host([mode="portfolio"]) .view-area:nth-of-type(3){border-color:var(--yellow)}:host([mode="portfolio"]) .view-area:nth-of-type(4){border-color:var(--apple-green)}:host([mode="portfolio"]) .view-area:nth-of-type(5){border-color:var(--pink)}:host([mode="portfolio"]) .view-area:nth-of-type(6){border-color:var(--orange)}:host([mode="portfolio"]) .view-area:nth-of-type(7){border-color:var(--zenith-blue)}:host([mode="company"]) .view-area:nth-of-type(1){border-color:var(--tuned-red)}:host([mode="company"]) .view-area:nth-of-type(2){border-color:var(--sharp-blue)}:host([mode="company"]) .view-area:nth-of-type(3){border-color:var(--yellow)}:host([mode="app"]) .view-area:nth-of-type(1){background-color:color-mix(in srgb,var(--tuned-red) 25%,transparent)}:host([mode="app"]) .view-area:nth-of-type(2){background-color:color-mix(in srgb,var(--sharp-blue) 25%,transparent)}:host([mode="app"]) .view-area:nth-of-type(3){background-color:color-mix(in srgb,var(--yellow) 25%,transparent)}:host([mode="app"]) .view-area:nth-of-type(4){background-color:color-mix(in srgb,var(--apple-green) 25%,transparent)}:host([mode="app"]) .view-area:nth-of-type(5){background-color:color-mix(in srgb,var(--pink) 25%,transparent)}.view-square{grid-area:square}.view-title{grid-area:title}.view-header{grid-area:header}.view-projects{grid-area:projects}.view-bio{grid-area:bio}.view-nav{grid-area:nav}.view-footer{grid-area:footer}.view-content{grid-area:content}.view-banner{grid-area:banner}.view-main{grid-area:main}.view-page-dots{grid-area:page-dots}', xe = class xe extends v {
+const Vi = ':host{display:grid;position:relative;width:100%}slot{display:contents}:host([mode="portfolio"]){--portfolio-cols: 120px 480px 40px;--portfolio-rows: 120px 120px 60px 180px 60px 120px 60px 20px 120px 120px;--portfolio-areas: "square . ." ". title ." ". header ." ". projects ." ". . ." ". bio ." ". . ." ". nav ." ". . ." ". footer ." ". . .";--portfolio-overlay-cols: 120px 480px;--portfolio-overlay-areas: "square ." ". title" ". header" ". projects" ". ." ". bio" ". ." ". nav" ". ." ". footer" ". .";grid-template-columns:var(--portfolio-cols);grid-template-rows:var(--portfolio-rows);grid-template-areas:var(--portfolio-areas);min-height:600px;background-color:#a5a5a508;max-width:640px;margin:0}:host([mode="portfolio"]) .view-overlay{grid-template-columns:var(--portfolio-overlay-cols);grid-template-rows:var(--portfolio-rows);grid-template-areas:var(--portfolio-overlay-areas)}:host([mode="company"]){--company-cols: auto 400px auto;--company-rows: 80px 20px 20px 120px 20px 120px;--company-areas: ". . ." ". header ." ". . ." ". content ." ". . ." ". footer .";grid-template-columns:var(--company-cols);grid-template-rows:var(--company-rows);grid-template-areas:var(--company-areas);gap:0;max-width:100%}:host([mode="company"]) .view-overlay{grid-template-columns:var(--company-cols);grid-template-rows:var(--company-rows);grid-template-areas:var(--company-areas);gap:0}:host([align="left"]),:host([mode="portfolio"][align="left"]),:host([mode="company"][align="left"]),:host([mode="app"][align="left"]){margin:0;justify-self:start}:host([align="center"]),:host([mode="portfolio"][align="center"]),:host([mode="company"][align="center"]),:host([mode="app"][align="center"]){margin:0 auto;justify-self:center}:host([align="right"]),:host([mode="portfolio"][align="right"]),:host([mode="company"][align="right"]),:host([mode="app"][align="right"]){margin:0 0 0 auto;justify-self:end}:host([mode="app"]){--app-cols: 100%;--app-rows: calc(var(--unit) * var(--sf)) calc(var(--unit) * var(--sf)) calc(var(--unit) * var(--sf)) calc(var(--double) * var(--sf)) calc(var(--dozen) * var(--sf)) calc(var(--unit) * var(--sf)) calc(var(--quad) * var(--sf)) calc(var(--double) * var(--sf));--app-areas: "banner" "." "header" "." "main" "page-dots" "." "footer";--app-overlay-cols: 100%;--app-overlay-rows: calc(var(--unit) * var(--sf)) calc(var(--unit) * var(--sf)) calc(var(--unit) * var(--sf)) calc(var(--double) * var(--sf)) calc(var(--dozen) * var(--sf)) calc(var(--unit) * var(--sf)) calc(var(--quad) * var(--sf)) calc(var(--double) * var(--sf));--app-overlay-areas: "banner" "." "header" "." "main" "page-dots" "." "footer";grid-template-columns:var(--app-cols);grid-template-rows:var(--app-rows);grid-template-areas:var(--app-areas);min-height:100vh;background-color:transparent;width:calc(240px * var(--sf, 1));max-width:calc(240px * var(--sf, 1));margin:0 auto}:host([mode="app"]) .view-overlay{grid-template-columns:var(--app-overlay-cols);grid-template-rows:var(--app-overlay-rows);grid-template-areas:var(--app-overlay-areas)}.view-overlay{position:absolute;margin-left:-1px;inset:0;pointer-events:none;z-index:1000;display:grid}.view-area{display:flex;width:calc(240px * var(--sf, 1));height:100%;align-items:center;justify-content:center;font-family:var(--typeface-regular);font-size:calc(var(--type-size-default) * var(--05));color:color-mix(in srgb,var(--tuned-red) 25%,transparent);background-color:color-mix(in srgb,var(--accent-color) 25%,transparent);opacity:1}:host([mode="portfolio"]) .view-area:nth-of-type(1){background-color:color-mix(in srgb,var(--tuned-red) 25%,transparent)}:host([mode="portfolio"]) .view-area:nth-of-type(2){border-color:var(--sharp-blue)}:host([mode="portfolio"]) .view-area:nth-of-type(3){border-color:var(--yellow)}:host([mode="portfolio"]) .view-area:nth-of-type(4){border-color:var(--apple-green)}:host([mode="portfolio"]) .view-area:nth-of-type(5){border-color:var(--pink)}:host([mode="portfolio"]) .view-area:nth-of-type(6){border-color:var(--orange)}:host([mode="portfolio"]) .view-area:nth-of-type(7){border-color:var(--zenith-blue)}:host([mode="company"]) .view-area:nth-of-type(1){border-color:var(--tuned-red)}:host([mode="company"]) .view-area:nth-of-type(2){border-color:var(--sharp-blue)}:host([mode="company"]) .view-area:nth-of-type(3){border-color:var(--yellow)}:host([mode="app"]) .view-area:nth-of-type(1){background-color:color-mix(in srgb,var(--tuned-red) 25%,transparent)}:host([mode="app"]) .view-area:nth-of-type(2){background-color:color-mix(in srgb,var(--sharp-blue) 25%,transparent)}:host([mode="app"]) .view-area:nth-of-type(3){background-color:color-mix(in srgb,var(--yellow) 25%,transparent)}:host([mode="app"]) .view-area:nth-of-type(4){background-color:color-mix(in srgb,var(--apple-green) 25%,transparent)}:host([mode="app"]) .view-area:nth-of-type(5){background-color:color-mix(in srgb,var(--pink) 25%,transparent)}.view-square{grid-area:square}.view-title{grid-area:title}.view-header{grid-area:header}.view-projects{grid-area:projects}.view-bio{grid-area:bio}.view-nav{grid-area:nav}.view-footer{grid-area:footer}.view-content{grid-area:content}.view-banner{grid-area:banner}.view-main{grid-area:main}.view-page-dots{grid-area:page-dots}', xe = class xe extends f {
   constructor() {
     super(...arguments), this.mode = "portfolio";
   }
   render() {
-    const e = this.view || this.mode === "view", r = this.mode === "portfolio", a = this.mode === "company", i = this.mode === "app", o = this.mode === "list", n = this.mode === "home";
+    const e = this.view || this.mode === "view", r = this.mode === "portfolio", i = this.mode === "company", a = this.mode === "app", n = this.mode === "list", o = this.mode === "home", s = this.mode === "settings";
     return l`
       <slot></slot>
       ${e ? l`
             <div class="view-overlay">
-              ${n ? l`
+              ${s ? l`
                     <div class="view-area view-banner">
                       <div class="grid-area-label">
                         <ds-text text="banner"></ds-text>
                       </div>
                     </div>
-                    <div class="view-area view-header">
+                    <div class="view-area view-settings">
                       <div class="grid-area-label">
-                        <ds-text text="header"></ds-text>
-                      </div>
-                    </div>
-                    <div class="view-area view-message">
-                      <div class="grid-area-label">
-                        <ds-text text="message"></ds-text>
-                      </div>
-                    </div>
-                    <div class="view-area view-lists">
-                      <div class="grid-area-label">
-                        <ds-text text="lists"></ds-text>
-                      </div>
-                    </div>
-                    <div class="view-area view-footer">
-                      <div class="grid-area-label">
-                        <ds-text text="footer"></ds-text>
+                        <ds-text text="settings"></ds-text>
                       </div>
                     </div>
                   ` : o ? l`
@@ -3060,12 +3042,22 @@ const Ha = ':host{display:grid;position:relative;width:100%}slot{display:content
                           <ds-text text="header"></ds-text>
                         </div>
                       </div>
-                      <div class="view-area view-board">
+                      <div class="view-area view-message">
+                        <div class="grid-area-label">
+                          <ds-text text="message"></ds-text>
+                        </div>
+                      </div>
+                      <div class="view-area view-lists">
+                        <div class="grid-area-label">
+                          <ds-text text="lists"></ds-text>
+                        </div>
+                      </div>
+                      <div class="view-area view-footer">
                         <div class="grid-area-label">
-                          <ds-text text="board"></ds-text>
+                          <ds-text text="footer"></ds-text>
                         </div>
                       </div>
-                    ` : i ? l`
+                    ` : n ? l`
                         <div class="view-area view-banner">
                           <div class="grid-area-label">
                             <ds-text text="banner"></ds-text>
@@ -3076,30 +3068,30 @@ const Ha = ':host{display:grid;position:relative;width:100%}slot{display:content
                             <ds-text text="header"></ds-text>
                           </div>
                         </div>
-                        <div class="view-area view-main">
+                        <div class="view-area view-board">
                           <div class="grid-area-label">
-                            <ds-text text="main"></ds-text>
-                          </div>
-                        </div>
-                        <div class="view-area view-page-dots">
-                          <div class="grid-area-label">
-                            <ds-text text="page-dots"></ds-text>
-                          </div>
-                        </div>
-                        <div class="view-area view-footer">
-                          <div class="grid-area-label">
-                            <ds-text text="footer"></ds-text>
+                            <ds-text text="board"></ds-text>
                           </div>
                         </div>
                       ` : a ? l`
+                          <div class="view-area view-banner">
+                            <div class="grid-area-label">
+                              <ds-text text="banner"></ds-text>
+                            </div>
+                          </div>
                           <div class="view-area view-header">
                             <div class="grid-area-label">
                               <ds-text text="header"></ds-text>
                             </div>
                           </div>
-                          <div class="view-area view-content">
+                          <div class="view-area view-main">
                             <div class="grid-area-label">
-                              <ds-text text="content"></ds-text>
+                              <ds-text text="main"></ds-text>
+                            </div>
+                          </div>
+                          <div class="view-area view-page-dots">
+                            <div class="grid-area-label">
+                              <ds-text text="page-dots"></ds-text>
                             </div>
                           </div>
                           <div class="view-area view-footer">
@@ -3107,35 +3099,15 @@ const Ha = ':host{display:grid;position:relative;width:100%}slot{display:content
                               <ds-text text="footer"></ds-text>
                             </div>
                           </div>
-                        ` : r ? l`
-                            <div class="view-area view-square">
-                              <div class="grid-area-label">
-                                <ds-text text="square"></ds-text>
-                              </div>
-                            </div>
-                            <div class="view-area view-title">
-                              <div class="grid-area-label">
-                                <ds-text text="title"></ds-text>
-                              </div>
-                            </div>
+                        ` : i ? l`
                             <div class="view-area view-header">
                               <div class="grid-area-label">
                                 <ds-text text="header"></ds-text>
                               </div>
                             </div>
-                            <div class="view-area view-projects">
-                              <div class="grid-area-label">
-                                <ds-text text="projects"></ds-text>
-                              </div>
-                            </div>
-                            <div class="view-area view-bio">
+                            <div class="view-area view-content">
                               <div class="grid-area-label">
-                                <ds-text text="bio"></ds-text>
-                              </div>
-                            </div>
-                            <div class="view-area view-nav">
-                              <div class="grid-area-label">
-                                <ds-text text="nav"></ds-text>
+                                <ds-text text="content"></ds-text>
                               </div>
                             </div>
                             <div class="view-area view-footer">
@@ -3143,7 +3115,43 @@ const Ha = ':host{display:grid;position:relative;width:100%}slot{display:content
                                 <ds-text text="footer"></ds-text>
                               </div>
                             </div>
-                          ` : ""}
+                          ` : r ? l`
+                              <div class="view-area view-square">
+                                <div class="grid-area-label">
+                                  <ds-text text="square"></ds-text>
+                                </div>
+                              </div>
+                              <div class="view-area view-title">
+                                <div class="grid-area-label">
+                                  <ds-text text="title"></ds-text>
+                                </div>
+                              </div>
+                              <div class="view-area view-header">
+                                <div class="grid-area-label">
+                                  <ds-text text="header"></ds-text>
+                                </div>
+                              </div>
+                              <div class="view-area view-projects">
+                                <div class="grid-area-label">
+                                  <ds-text text="projects"></ds-text>
+                                </div>
+                              </div>
+                              <div class="view-area view-bio">
+                                <div class="grid-area-label">
+                                  <ds-text text="bio"></ds-text>
+                                </div>
+                              </div>
+                              <div class="view-area view-nav">
+                                <div class="grid-area-label">
+                                  <ds-text text="nav"></ds-text>
+                                </div>
+                              </div>
+                              <div class="view-area view-footer">
+                                <div class="grid-area-label">
+                                  <ds-text text="footer"></ds-text>
+                                </div>
+                              </div>
+                            ` : ""}
             </div>
           ` : ""}
     `;
@@ -3154,570 +3162,755 @@ xe.properties = {
   align: { type: String },
   view: { type: Boolean }
 }, xe.styles = [
-  x(Ha),
+  x(Vi),
   lt`
-    :host {
-      display: grid;
-      position: relative;
-      width: 100%;
-    }
+      :host {
+        display: grid;
+        position: relative;
+        width: 100%;
+      }
 
-    slot {
-      display: contents;
-    }
-
-    :host([mode="portfolio"]) {
-      --portfolio-cols: 120px 480px 40px;
-      --portfolio-rows: 120px 120px 60px 180px 60px 120px 60px 20px 120px 120px;
-      --portfolio-areas: "square . ." ". title ." ". header ." ". projects ."
-        ". . ." ". bio ." ". . ." ". nav ." ". . ." ". footer ." ". . .";
-      --portfolio-overlay-cols: 120px 480px;
-      --portfolio-overlay-areas: "square ." ". title" ". header" ". projects"
-        ". ." ". bio" ". ." ". nav" ". ." ". footer" ". .";
-      grid-template-columns: var(--portfolio-cols);
-      grid-template-rows: var(--portfolio-rows);
-      grid-template-areas: var(--portfolio-areas);
-      min-height: 600px;
-      background-color: rgba(165, 165, 165, 0.03);
-      max-width: 640px;
-      margin: 0;
-    }
-
-    :host([mode="portfolio"]) .view-overlay {
-      grid-template-columns: var(--portfolio-overlay-cols);
-      grid-template-rows: var(--portfolio-rows);
-      grid-template-areas: var(--portfolio-overlay-areas);
-    }
-
-    :host([mode="company"]) {
-      --company-cols: auto 400px auto;
-      --company-rows: 80px 20px 20px 120px 20px 120px;
-      --company-areas: ". . ." ". header ." ". . ." ". content ." ". . ."
-        ". footer .";
-      grid-template-columns: var(--company-cols);
-      grid-template-rows: var(--company-rows);
-      grid-template-areas: var(--company-areas);
-      gap: 0;
-      max-width: 100%;
-    }
-
-    :host([mode="company"]) .view-overlay {
-      grid-template-columns: var(--company-cols);
-      grid-template-rows: var(--company-rows);
-      grid-template-areas: var(--company-areas);
-      gap: 0;
-    }
-
-    :host([align="left"]),
-    :host([mode="portfolio"][align="left"]),
-    :host([mode="company"][align="left"]),
-    :host([mode="app"][align="left"]),
-    :host([mode="list"][align="left"]),
-    :host([mode="home"][align="left"]) {
-      margin: 0;
-      justify-self: start;
-    }
-
-    :host([align="center"]),
-    :host([mode="portfolio"][align="center"]),
-    :host([mode="company"][align="center"]),
-    :host([mode="app"][align="center"]),
-    :host([mode="list"][align="center"]),
-    :host([mode="home"][align="center"]) {
-      margin: 0 auto;
-      justify-self: center;
-    }
-
-    :host([align="right"]),
-    :host([mode="portfolio"][align="right"]),
-    :host([mode="company"][align="right"]),
-    :host([mode="app"][align="right"]),
-    :host([mode="list"][align="right"]),
-    :host([mode="home"][align="right"]) {
-      margin: 0 0 0 auto;
-      justify-self: end;
-    }
-
-    /* App mode - Base */
-    :host([mode="app"]) {
-      --app-cols: 100%;
-      --app-overlay-cols: 100%;
-      grid-template-columns: var(--app-cols);
-      grid-template-rows: var(--app-layout);
-      grid-template-areas: var(--app-layout-areas);
-      min-height: 100vh;
-      background-color: transparent;
-      width: calc(240px * var(--sf, 1));
-      max-width: calc(240px * var(--sf, 1));
-      margin: 0 auto;
-    }
-
-    :host([mode="app"]) .view-overlay {
-      grid-template-columns: var(--app-overlay-cols);
-      grid-template-rows: var(--app-layout);
-      grid-template-areas: var(--app-layout-areas);
-    }
-
-    /* List mode - Base */
-    :host([mode="list"]) {
-      --list-cols: 100%;
-      --list-rows: calc(var(--unit) * var(--sf)) calc(var(--unit) * var(--sf))
-        calc(var(--unit) * var(--sf)) calc(var(--twenty) * var(--sf));
-      --list-areas: "banner" "." "header" "board";
-      --list-overlay-cols: 100%;
-      --list-overlay-rows: calc(var(--unit) * var(--sf))
-        calc(var(--unit) * var(--sf)) calc(var(--unit) * var(--sf))
-        calc(var(--twenty) * var(--sf));
-      --list-overlay-areas: "banner" "." "header" "board";
-      grid-template-columns: var(--list-cols);
-      grid-template-rows: var(--list-rows);
-      grid-template-areas: var(--list-areas);
-      min-height: 100vh;
-      background-color: transparent;
-      width: calc(240px * var(--sf, 1));
-      max-width: calc(240px * var(--sf, 1));
-      margin: 0 auto;
-    }
-
-    :host([mode="list"]) .view-overlay {
-      grid-template-columns: var(--list-overlay-cols);
-      grid-template-rows: var(--list-overlay-rows);
-      grid-template-areas: var(--list-overlay-areas);
-    }
-
-    /* Home mode - Base */
-    :host([mode="home"]) {
-      --home-cols: 100%;
-      --home-areas: "banner" "." "header" "." "message" "lists" "." "footer";
-      --home-overlay-cols: 100%;
-      --home-overlay-areas: "banner" "." "header" "." "message" "lists" "."
-        "footer";
-      grid-template-columns: var(--home-cols);
-      grid-template-rows: var(--home-layout);
-      grid-template-areas: var(--home-areas);
-      min-height: 100vh;
-      background-color: transparent;
-      width: calc(240px * var(--sf, 1));
-      max-width: calc(240px * var(--sf, 1));
-      margin: 0 auto;
-    }
+      slot {
+        display: contents;
+      }
 
-    :host([mode="home"]) .view-overlay {
-      grid-template-columns: var(--home-overlay-cols);
-      grid-template-rows: var(--home-layout);
-      grid-template-areas: var(--home-overlay-areas);
-    }
+      :host([mode="portfolio"]) {
+        --portfolio-cols: 120px 480px 40px;
+        --portfolio-rows: 120px 120px 60px 180px 60px 120px 60px 20px 120px
+          120px;
+        --portfolio-areas: "square . ." ". title ." ". header ." ". projects ."
+          ". . ." ". bio ." ". . ." ". nav ." ". . ." ". footer ." ". . .";
+        --portfolio-overlay-cols: 120px 480px;
+        --portfolio-overlay-areas: "square ." ". title" ". header" ". projects"
+          ". ." ". bio" ". ." ". nav" ". ." ". footer" ". .";
+        grid-template-columns: var(--portfolio-cols);
+        grid-template-rows: var(--portfolio-rows);
+        grid-template-areas: var(--portfolio-areas);
+        min-height: 600px;
+        background-color: rgba(165, 165, 165, 0.03);
+        max-width: 640px;
+        margin: 0;
+      }
 
-    .view-overlay {
-      position: absolute;
-      margin-left: -1px;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      pointer-events: none;
-      z-index: 1000;
-      display: grid;
-    }
+      :host([mode="portfolio"]) .view-overlay {
+        grid-template-columns: var(--portfolio-overlay-cols);
+        grid-template-rows: var(--portfolio-rows);
+        grid-template-areas: var(--portfolio-overlay-areas);
+      }
 
-    .view-area {
-      display: flex;
-      width: calc(240px * var(--sf, 1));
-      height: 100%;
-      align-items: center;
-      justify-content: center;
-      font-family: var(--typeface-regular);
-      font-size: calc(var(--type-size-default) * var(--05));
-      color: color-mix(in srgb, var(--tuned-red) 25%, transparent);
-      background-color: color-mix(
-        in srgb,
-        var(--accent-color) 25%,
-        transparent
-      );
-      opacity: 1;
-      position: relative;
-    }
-
-    .grid-area-label {
-      position: absolute;
-      top: calc(-20px * var(--sf, 1));
-      left: 0;
-      height: calc(20px * var(--sf, 1));
-      width: fit-content;
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      padding: 0 calc(4px * var(--sf, 1));
-      border-radius: calc(2px * var(--sf, 1));
-      z-index: 10000;
-      pointer-events: none;
-      white-space: nowrap;
-    }
+      :host([mode="company"]) {
+        --company-cols: auto 400px auto;
+        --company-rows: 80px 20px 20px 120px 20px 120px;
+        --company-areas: ". . ." ". header ." ". . ." ". content ." ". . ."
+          ". footer .";
+        grid-template-columns: var(--company-cols);
+        grid-template-rows: var(--company-rows);
+        grid-template-areas: var(--company-areas);
+        gap: 0;
+        max-width: 100%;
+      }
 
-    /* Banner label stays inside the area (first item) */
-    :host([mode="app"]) .view-area.view-banner .grid-area-label,
-    :host([mode="list"]) .view-area.view-banner .grid-area-label,
-    :host([mode="home"]) .view-area.view-banner .grid-area-label,
-    :host([mode="company"]) .view-area.view-header .grid-area-label,
-    :host([mode="portfolio"]) .view-area.view-square .grid-area-label {
-      top: 0;
-    }
+      :host([mode="company"]) .view-overlay {
+        grid-template-columns: var(--company-cols);
+        grid-template-rows: var(--company-rows);
+        grid-template-areas: var(--company-areas);
+        gap: 0;
+      }
 
-    .grid-area-label ds-text {
-      font-size: calc(11px * var(--sf, 1));
-      line-height: 1;
-      color: white;
-      text-transform: lowercase;
-    }
+      :host([align="left"]),
+      :host([mode="portfolio"][align="left"]),
+      :host([mode="company"][align="left"]),
+      :host([mode="app"][align="left"]),
+      :host([mode="list"][align="left"]),
+      :host([mode="home"][align="left"]),
+      :host([mode="settings"][align="left"]) {
+        margin: 0;
+        justify-self: start;
+      }
 
-    :host([mode="portfolio"]) .view-area:nth-of-type(1) {
-      background-color: color-mix(in srgb, var(--tuned-red) 25%, transparent);
-    }
-    :host([mode="portfolio"]) .view-area:nth-of-type(1) .grid-area-label {
-      background-image:
-        linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%),
-        linear-gradient(
-          90deg,
-          color-mix(in srgb, var(--tuned-red) 70%, black) 0%,
-          color-mix(in srgb, var(--tuned-red) 70%, black) 100%
-        );
-    }
-    :host([mode="portfolio"]) .view-area:nth-of-type(2) {
-      border-color: var(--sharp-blue);
-    }
-    :host([mode="portfolio"]) .view-area:nth-of-type(2) .grid-area-label {
-      background-image:
-        linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%),
-        linear-gradient(
-          90deg,
-          color-mix(in srgb, var(--sharp-blue) 70%, black) 0%,
-          color-mix(in srgb, var(--sharp-blue) 70%, black) 100%
-        );
-    }
-    :host([mode="portfolio"]) .view-area:nth-of-type(3) {
-      border-color: var(--yellow);
-    }
-    :host([mode="portfolio"]) .view-area:nth-of-type(3) .grid-area-label {
-      background-image:
-        linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%),
-        linear-gradient(
-          90deg,
-          color-mix(in srgb, var(--yellow) 70%, black) 0%,
-          color-mix(in srgb, var(--yellow) 70%, black) 100%
-        );
-    }
-    :host([mode="portfolio"]) .view-area:nth-of-type(4) {
-      border-color: var(--apple-green);
-    }
-    :host([mode="portfolio"]) .view-area:nth-of-type(4) .grid-area-label {
-      background-image:
-        linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%),
-        linear-gradient(
-          90deg,
-          color-mix(in srgb, var(--apple-green) 70%, black) 0%,
-          color-mix(in srgb, var(--apple-green) 70%, black) 100%
-        );
-    }
-    :host([mode="portfolio"]) .view-area:nth-of-type(5) {
-      border-color: var(--pink);
-    }
-    :host([mode="portfolio"]) .view-area:nth-of-type(5) .grid-area-label {
-      background-image:
-        linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%),
-        linear-gradient(
-          90deg,
-          color-mix(in srgb, var(--pink) 70%, black) 0%,
-          color-mix(in srgb, var(--pink) 70%, black) 100%
-        );
-    }
-    :host([mode="portfolio"]) .view-area:nth-of-type(6) {
-      border-color: var(--orange);
-    }
-    :host([mode="portfolio"]) .view-area:nth-of-type(6) .grid-area-label {
-      background-image:
-        linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%),
-        linear-gradient(
-          90deg,
-          color-mix(in srgb, var(--orange) 70%, black) 0%,
-          color-mix(in srgb, var(--orange) 70%, black) 100%
-        );
-    }
-    :host([mode="portfolio"]) .view-area:nth-of-type(7) {
-      border-color: var(--zenith-blue);
-    }
-    :host([mode="portfolio"]) .view-area:nth-of-type(7) .grid-area-label {
-      background-image:
-        linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%),
-        linear-gradient(
-          90deg,
-          color-mix(in srgb, var(--zenith-blue) 70%, black) 0%,
-          color-mix(in srgb, var(--zenith-blue) 70%, black) 100%
-        );
-    }
+      :host([align="center"]),
+      :host([mode="portfolio"][align="center"]),
+      :host([mode="company"][align="center"]),
+      :host([mode="app"][align="center"]),
+      :host([mode="list"][align="center"]),
+      :host([mode="home"][align="center"]),
+      :host([mode="settings"][align="center"]) {
+        margin: 0 auto;
+        justify-self: center;
+      }
 
-    :host([mode="company"]) .view-area:nth-of-type(1) {
-      border-color: var(--tuned-red);
-    }
-    :host([mode="company"]) .view-area:nth-of-type(1) .grid-area-label {
-      background-image:
-        linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%),
-        linear-gradient(
-          90deg,
-          color-mix(in srgb, var(--tuned-red) 70%, black) 0%,
-          color-mix(in srgb, var(--tuned-red) 70%, black) 100%
-        );
-    }
-    :host([mode="company"]) .view-area:nth-of-type(2) {
-      border-color: var(--sharp-blue);
-    }
-    :host([mode="company"]) .view-area:nth-of-type(2) .grid-area-label {
-      background-image:
-        linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%),
-        linear-gradient(
-          90deg,
-          color-mix(in srgb, var(--sharp-blue) 70%, black) 0%,
-          color-mix(in srgb, var(--sharp-blue) 70%, black) 100%
-        );
-    }
-    :host([mode="company"]) .view-area:nth-of-type(3) {
-      border-color: var(--yellow);
-    }
-    :host([mode="company"]) .view-area:nth-of-type(3) .grid-area-label {
-      background-image:
-        linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%),
-        linear-gradient(
-          90deg,
-          color-mix(in srgb, var(--yellow) 70%, black) 0%,
-          color-mix(in srgb, var(--yellow) 70%, black) 100%
-        );
-    }
+      :host([align="right"]),
+      :host([mode="portfolio"][align="right"]),
+      :host([mode="company"][align="right"]),
+      :host([mode="app"][align="right"]),
+      :host([mode="list"][align="right"]),
+      :host([mode="home"][align="right"]),
+      :host([mode="settings"][align="right"]) {
+        margin: 0 0 0 auto;
+        justify-self: end;
+      }
 
-    :host([mode="app"]) .view-area:nth-of-type(1) {
-      background-color: color-mix(in srgb, var(--tuned-red) 25%, transparent);
-    }
-    :host([mode="app"]) .view-area:nth-of-type(1) .grid-area-label {
-      background-image:
-        linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%),
-        linear-gradient(
-          90deg,
-          color-mix(in srgb, var(--tuned-red) 70%, black) 0%,
-          color-mix(in srgb, var(--tuned-red) 70%, black) 100%
-        );
-    }
-    :host([mode="app"]) .view-area:nth-of-type(2) {
-      background-color: color-mix(in srgb, var(--sharp-blue) 25%, transparent);
-    }
-    :host([mode="app"]) .view-area:nth-of-type(2) .grid-area-label {
-      background-image:
-        linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%),
-        linear-gradient(
-          90deg,
-          color-mix(in srgb, var(--sharp-blue) 70%, black) 0%,
-          color-mix(in srgb, var(--sharp-blue) 70%, black) 100%
-        );
-    }
-    :host([mode="app"]) .view-area:nth-of-type(3) {
-      background-color: color-mix(in srgb, var(--yellow) 25%, transparent);
-    }
-    :host([mode="app"]) .view-area:nth-of-type(3) .grid-area-label {
-      background-image:
-        linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%),
-        linear-gradient(
-          90deg,
-          color-mix(in srgb, var(--yellow) 70%, black) 0%,
-          color-mix(in srgb, var(--yellow) 70%, black) 100%
-        );
-    }
-    :host([mode="app"]) .view-area:nth-of-type(4) {
-      background-color: color-mix(in srgb, var(--apple-green) 25%, transparent);
-    }
-    :host([mode="app"]) .view-area:nth-of-type(4) .grid-area-label {
-      background-image:
-        linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%),
-        linear-gradient(
-          90deg,
-          color-mix(in srgb, var(--apple-green) 70%, black) 0%,
-          color-mix(in srgb, var(--apple-green) 70%, black) 100%
-        );
-    }
-    :host([mode="app"]) .view-area:nth-of-type(5) {
-      background-color: color-mix(in srgb, var(--pink) 25%, transparent);
-    }
-    :host([mode="app"]) .view-area:nth-of-type(5) .grid-area-label {
-      background-image:
-        linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%),
-        linear-gradient(
-          90deg,
-          color-mix(in srgb, var(--pink) 70%, black) 0%,
-          color-mix(in srgb, var(--pink) 70%, black) 100%
-        );
-    }
+      /* App mode - Base */
+      :host([mode="app"]) {
+        --app-cols: 100%;
+        --app-overlay-cols: 100%;
+        grid-template-columns: var(--app-cols);
+        grid-template-rows: var(--app-layout);
+        grid-template-areas: var(--app-layout-areas);
+        min-height: 100vh;
+        background-color: transparent;
+        width: calc(240px * var(--sf, 1));
+        max-width: calc(240px * var(--sf, 1));
+        margin: 0 auto;
+      }
 
-    :host([mode="list"]) .view-area:nth-of-type(1) {
-      background-color: color-mix(in srgb, var(--tuned-red) 25%, transparent);
-    }
-    :host([mode="list"]) .view-area:nth-of-type(1) .grid-area-label {
-      background-image:
-        linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%),
-        linear-gradient(
-          90deg,
-          color-mix(in srgb, var(--tuned-red) 70%, black) 0%,
-          color-mix(in srgb, var(--tuned-red) 70%, black) 100%
-        );
-    }
-    :host([mode="list"]) .view-area:nth-of-type(2) {
-      background-color: color-mix(in srgb, var(--sharp-blue) 25%, transparent);
-    }
-    :host([mode="list"]) .view-area:nth-of-type(2) .grid-area-label {
-      background-image:
-        linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%),
-        linear-gradient(
-          90deg,
-          color-mix(in srgb, var(--sharp-blue) 70%, black) 0%,
-          color-mix(in srgb, var(--sharp-blue) 70%, black) 100%
+      :host([mode="app"]) .view-overlay {
+        grid-template-columns: var(--app-overlay-cols);
+        grid-template-rows: var(--app-layout);
+        grid-template-areas: var(--app-layout-areas);
+      }
+
+      /* List mode - Base */
+      :host([mode="list"]) {
+        --list-cols: 100%;
+        --list-rows: calc(var(--unit) * var(--sf)) calc(var(--unit) * var(--sf))
+          calc(var(--unit) * var(--sf)) calc(var(--twenty) * var(--sf));
+        --list-areas: "banner" "." "header" "board";
+        --list-overlay-cols: 100%;
+        --list-overlay-rows: calc(var(--unit) * var(--sf))
+          calc(var(--unit) * var(--sf)) calc(var(--unit) * var(--sf))
+          calc(var(--twenty) * var(--sf));
+        --list-overlay-areas: "banner" "." "header" "board";
+        grid-template-columns: var(--list-cols);
+        grid-template-rows: var(--list-rows);
+        grid-template-areas: var(--list-areas);
+        min-height: 100vh;
+        background-color: transparent;
+        width: calc(240px * var(--sf, 1));
+        max-width: calc(240px * var(--sf, 1));
+        margin: 0 auto;
+      }
+
+      :host([mode="list"]) .view-overlay {
+        grid-template-columns: var(--list-overlay-cols);
+        grid-template-rows: var(--list-overlay-rows);
+        grid-template-areas: var(--list-overlay-areas);
+      }
+
+      /* Home mode - Base */
+      :host([mode="home"]) {
+        --home-cols: 100%;
+        --home-areas: "banner" "." "header" "." "lists";
+        --home-overlay-cols: 100%;
+        --home-overlay-areas: "banner" "." "header" "." "lists";
+        grid-template-columns: var(--home-cols);
+        grid-template-rows: var(--home-layout);
+        grid-template-areas: var(--home-areas);
+        min-height: 100vh;
+        background-color: transparent;
+        width: calc(240px * var(--sf, 1));
+        max-width: calc(240px * var(--sf, 1));
+        margin: 0 auto;
+      }
+
+      :host([mode="home"]) .view-overlay {
+        grid-template-columns: var(--home-overlay-cols);
+        grid-template-rows: var(--home-layout);
+        grid-template-areas: var(--home-overlay-areas);
+      }
+
+      /* Settings mode - Base */
+      :host([mode="settings"]) {
+        --settings-cols: 100%;
+        --settings-overlay-cols: 100%;
+        grid-template-columns: var(--settings-cols);
+        grid-template-rows: var(--settings-layout);
+        grid-template-areas: var(--settings-layout-areas);
+        min-height: 100vh;
+        background-color: transparent;
+        width: calc(240px * var(--sf, 1));
+        max-width: calc(240px * var(--sf, 1));
+        margin: 0 auto;
+      }
+
+      :host([mode="settings"]) .view-overlay {
+        grid-template-columns: var(--settings-overlay-cols);
+        grid-template-rows: var(--settings-layout);
+        grid-template-areas: var(--settings-layout-areas);
+      }
+
+      .view-overlay {
+        position: absolute;
+        margin-left: -1px;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        pointer-events: none;
+        z-index: 1000;
+        display: grid;
+      }
+
+      .view-area {
+        display: flex;
+        width: calc(240px * var(--sf, 1));
+        height: 100%;
+        align-items: center;
+        justify-content: center;
+        font-family: var(--typeface-regular);
+        font-size: calc(var(--type-size-default) * var(--05));
+        color: color-mix(in srgb, var(--tuned-red) 25%, transparent);
+        background-color: color-mix(
+          in srgb,
+          var(--accent-color) 25%,
+          transparent
         );
-    }
-    :host([mode="list"]) .view-area:nth-of-type(3) {
-      background-color: color-mix(in srgb, var(--yellow) 25%, transparent);
-    }
-    :host([mode="list"]) .view-area:nth-of-type(3) .grid-area-label {
-      background-image:
-        linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%),
-        linear-gradient(
-          90deg,
-          color-mix(in srgb, var(--yellow) 70%, black) 0%,
-          color-mix(in srgb, var(--yellow) 70%, black) 100%
+        opacity: 1;
+        position: relative;
+      }
+
+      .grid-area-label {
+        position: absolute;
+        top: calc(-20px * var(--sf, 1));
+        left: 0;
+        height: calc(20px * var(--sf, 1));
+        width: fit-content;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        padding: 0 calc(4px * var(--sf, 1));
+        border-radius: calc(2px * var(--sf, 1));
+        z-index: 10000;
+        pointer-events: none;
+        white-space: nowrap;
+      }
+
+      /* Banner label stays inside the area (first item) */
+      :host([mode="app"]) .view-area.view-banner .grid-area-label,
+      :host([mode="list"]) .view-area.view-banner .grid-area-label,
+      :host([mode="home"]) .view-area.view-banner .grid-area-label,
+      :host([mode="settings"]) .view-area.view-banner .grid-area-label,
+      :host([mode="company"]) .view-area.view-header .grid-area-label,
+      :host([mode="portfolio"]) .view-area.view-square .grid-area-label {
+        top: 0;
+      }
+
+      .grid-area-label ds-text {
+        font-size: calc(11px * var(--sf, 1));
+        line-height: 1;
+        color: white;
+        text-transform: lowercase;
+      }
+
+      :host([mode="portfolio"]) .view-area:nth-of-type(1) {
+        background-color: color-mix(in srgb, var(--tuned-red) 25%, transparent);
+      }
+      :host([mode="portfolio"]) .view-area:nth-of-type(1) .grid-area-label {
+        background-image:
+          linear-gradient(
+            90deg,
+            rgba(0, 0, 0, 0.2) 0%,
+            rgba(0, 0, 0, 0.2) 100%
+          ),
+          linear-gradient(
+            90deg,
+            color-mix(in srgb, var(--tuned-red) 70%, black) 0%,
+            color-mix(in srgb, var(--tuned-red) 70%, black) 100%
+          );
+      }
+      :host([mode="portfolio"]) .view-area:nth-of-type(2) {
+        border-color: var(--sharp-blue);
+      }
+      :host([mode="portfolio"]) .view-area:nth-of-type(2) .grid-area-label {
+        background-image:
+          linear-gradient(
+            90deg,
+            rgba(0, 0, 0, 0.2) 0%,
+            rgba(0, 0, 0, 0.2) 100%
+          ),
+          linear-gradient(
+            90deg,
+            color-mix(in srgb, var(--sharp-blue) 70%, black) 0%,
+            color-mix(in srgb, var(--sharp-blue) 70%, black) 100%
+          );
+      }
+      :host([mode="portfolio"]) .view-area:nth-of-type(3) {
+        border-color: var(--yellow);
+      }
+      :host([mode="portfolio"]) .view-area:nth-of-type(3) .grid-area-label {
+        background-image:
+          linear-gradient(
+            90deg,
+            rgba(0, 0, 0, 0.2) 0%,
+            rgba(0, 0, 0, 0.2) 100%
+          ),
+          linear-gradient(
+            90deg,
+            color-mix(in srgb, var(--yellow) 70%, black) 0%,
+            color-mix(in srgb, var(--yellow) 70%, black) 100%
+          );
+      }
+      :host([mode="portfolio"]) .view-area:nth-of-type(4) {
+        border-color: var(--apple-green);
+      }
+      :host([mode="portfolio"]) .view-area:nth-of-type(4) .grid-area-label {
+        background-image:
+          linear-gradient(
+            90deg,
+            rgba(0, 0, 0, 0.2) 0%,
+            rgba(0, 0, 0, 0.2) 100%
+          ),
+          linear-gradient(
+            90deg,
+            color-mix(in srgb, var(--apple-green) 70%, black) 0%,
+            color-mix(in srgb, var(--apple-green) 70%, black) 100%
+          );
+      }
+      :host([mode="portfolio"]) .view-area:nth-of-type(5) {
+        border-color: var(--pink);
+      }
+      :host([mode="portfolio"]) .view-area:nth-of-type(5) .grid-area-label {
+        background-image:
+          linear-gradient(
+            90deg,
+            rgba(0, 0, 0, 0.2) 0%,
+            rgba(0, 0, 0, 0.2) 100%
+          ),
+          linear-gradient(
+            90deg,
+            color-mix(in srgb, var(--pink) 70%, black) 0%,
+            color-mix(in srgb, var(--pink) 70%, black) 100%
+          );
+      }
+      :host([mode="portfolio"]) .view-area:nth-of-type(6) {
+        border-color: var(--orange);
+      }
+      :host([mode="portfolio"]) .view-area:nth-of-type(6) .grid-area-label {
+        background-image:
+          linear-gradient(
+            90deg,
+            rgba(0, 0, 0, 0.2) 0%,
+            rgba(0, 0, 0, 0.2) 100%
+          ),
+          linear-gradient(
+            90deg,
+            color-mix(in srgb, var(--orange) 70%, black) 0%,
+            color-mix(in srgb, var(--orange) 70%, black) 100%
+          );
+      }
+      :host([mode="portfolio"]) .view-area:nth-of-type(7) {
+        border-color: var(--zenith-blue);
+      }
+      :host([mode="portfolio"]) .view-area:nth-of-type(7) .grid-area-label {
+        background-image:
+          linear-gradient(
+            90deg,
+            rgba(0, 0, 0, 0.2) 0%,
+            rgba(0, 0, 0, 0.2) 100%
+          ),
+          linear-gradient(
+            90deg,
+            color-mix(in srgb, var(--zenith-blue) 70%, black) 0%,
+            color-mix(in srgb, var(--zenith-blue) 70%, black) 100%
+          );
+      }
+
+      :host([mode="company"]) .view-area:nth-of-type(1) {
+        border-color: var(--tuned-red);
+      }
+      :host([mode="company"]) .view-area:nth-of-type(1) .grid-area-label {
+        background-image:
+          linear-gradient(
+            90deg,
+            rgba(0, 0, 0, 0.2) 0%,
+            rgba(0, 0, 0, 0.2) 100%
+          ),
+          linear-gradient(
+            90deg,
+            color-mix(in srgb, var(--tuned-red) 70%, black) 0%,
+            color-mix(in srgb, var(--tuned-red) 70%, black) 100%
+          );
+      }
+      :host([mode="company"]) .view-area:nth-of-type(2) {
+        border-color: var(--sharp-blue);
+      }
+      :host([mode="company"]) .view-area:nth-of-type(2) .grid-area-label {
+        background-image:
+          linear-gradient(
+            90deg,
+            rgba(0, 0, 0, 0.2) 0%,
+            rgba(0, 0, 0, 0.2) 100%
+          ),
+          linear-gradient(
+            90deg,
+            color-mix(in srgb, var(--sharp-blue) 70%, black) 0%,
+            color-mix(in srgb, var(--sharp-blue) 70%, black) 100%
+          );
+      }
+      :host([mode="company"]) .view-area:nth-of-type(3) {
+        border-color: var(--yellow);
+      }
+      :host([mode="company"]) .view-area:nth-of-type(3) .grid-area-label {
+        background-image:
+          linear-gradient(
+            90deg,
+            rgba(0, 0, 0, 0.2) 0%,
+            rgba(0, 0, 0, 0.2) 100%
+          ),
+          linear-gradient(
+            90deg,
+            color-mix(in srgb, var(--yellow) 70%, black) 0%,
+            color-mix(in srgb, var(--yellow) 70%, black) 100%
+          );
+      }
+
+      :host([mode="app"]) .view-area:nth-of-type(1) {
+        background-color: color-mix(in srgb, var(--tuned-red) 25%, transparent);
+      }
+      :host([mode="app"]) .view-area:nth-of-type(1) .grid-area-label {
+        background-image:
+          linear-gradient(
+            90deg,
+            rgba(0, 0, 0, 0.2) 0%,
+            rgba(0, 0, 0, 0.2) 100%
+          ),
+          linear-gradient(
+            90deg,
+            color-mix(in srgb, var(--tuned-red) 70%, black) 0%,
+            color-mix(in srgb, var(--tuned-red) 70%, black) 100%
+          );
+      }
+      :host([mode="app"]) .view-area:nth-of-type(2) {
+        background-color: color-mix(
+          in srgb,
+          var(--sharp-blue) 25%,
+          transparent
         );
-    }
-    :host([mode="list"]) .view-area:nth-of-type(4) {
-      background-color: color-mix(in srgb, var(--apple-green) 25%, transparent);
-    }
-    :host([mode="list"]) .view-area:nth-of-type(4) .grid-area-label {
-      background-image:
-        linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%),
-        linear-gradient(
-          90deg,
-          color-mix(in srgb, var(--apple-green) 70%, black) 0%,
-          color-mix(in srgb, var(--apple-green) 70%, black) 100%
+      }
+      :host([mode="app"]) .view-area:nth-of-type(2) .grid-area-label {
+        background-image:
+          linear-gradient(
+            90deg,
+            rgba(0, 0, 0, 0.2) 0%,
+            rgba(0, 0, 0, 0.2) 100%
+          ),
+          linear-gradient(
+            90deg,
+            color-mix(in srgb, var(--sharp-blue) 70%, black) 0%,
+            color-mix(in srgb, var(--sharp-blue) 70%, black) 100%
+          );
+      }
+      :host([mode="app"]) .view-area:nth-of-type(3) {
+        background-color: color-mix(in srgb, var(--yellow) 25%, transparent);
+      }
+      :host([mode="app"]) .view-area:nth-of-type(3) .grid-area-label {
+        background-image:
+          linear-gradient(
+            90deg,
+            rgba(0, 0, 0, 0.2) 0%,
+            rgba(0, 0, 0, 0.2) 100%
+          ),
+          linear-gradient(
+            90deg,
+            color-mix(in srgb, var(--yellow) 70%, black) 0%,
+            color-mix(in srgb, var(--yellow) 70%, black) 100%
+          );
+      }
+      :host([mode="app"]) .view-area:nth-of-type(4) {
+        background-color: color-mix(
+          in srgb,
+          var(--apple-green) 25%,
+          transparent
         );
-    }
+      }
+      :host([mode="app"]) .view-area:nth-of-type(4) .grid-area-label {
+        background-image:
+          linear-gradient(
+            90deg,
+            rgba(0, 0, 0, 0.2) 0%,
+            rgba(0, 0, 0, 0.2) 100%
+          ),
+          linear-gradient(
+            90deg,
+            color-mix(in srgb, var(--apple-green) 70%, black) 0%,
+            color-mix(in srgb, var(--apple-green) 70%, black) 100%
+          );
+      }
+      :host([mode="app"]) .view-area:nth-of-type(5) {
+        background-color: color-mix(in srgb, var(--pink) 25%, transparent);
+      }
+      :host([mode="app"]) .view-area:nth-of-type(5) .grid-area-label {
+        background-image:
+          linear-gradient(
+            90deg,
+            rgba(0, 0, 0, 0.2) 0%,
+            rgba(0, 0, 0, 0.2) 100%
+          ),
+          linear-gradient(
+            90deg,
+            color-mix(in srgb, var(--pink) 70%, black) 0%,
+            color-mix(in srgb, var(--pink) 70%, black) 100%
+          );
+      }
 
-    :host([mode="home"]) .view-area:nth-of-type(1) {
-      background-color: color-mix(in srgb, var(--tuned-red) 25%, transparent);
-    }
-    :host([mode="home"]) .view-area:nth-of-type(1) .grid-area-label {
-      background-image:
-        linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%),
-        linear-gradient(
-          90deg,
-          color-mix(in srgb, var(--tuned-red) 70%, black) 0%,
-          color-mix(in srgb, var(--tuned-red) 70%, black) 100%
-        );
-    }
-    :host([mode="home"]) .view-area:nth-of-type(2) {
-      background-color: color-mix(in srgb, var(--sharp-blue) 25%, transparent);
-    }
-    :host([mode="home"]) .view-area:nth-of-type(2) .grid-area-label {
-      background-image:
-        linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%),
-        linear-gradient(
-          90deg,
-          color-mix(in srgb, var(--sharp-blue) 70%, black) 0%,
-          color-mix(in srgb, var(--sharp-blue) 70%, black) 100%
+      :host([mode="list"]) .view-area:nth-of-type(1) {
+        background-color: color-mix(in srgb, var(--tuned-red) 25%, transparent);
+      }
+      :host([mode="list"]) .view-area:nth-of-type(1) .grid-area-label {
+        background-image:
+          linear-gradient(
+            90deg,
+            rgba(0, 0, 0, 0.2) 0%,
+            rgba(0, 0, 0, 0.2) 100%
+          ),
+          linear-gradient(
+            90deg,
+            color-mix(in srgb, var(--tuned-red) 70%, black) 0%,
+            color-mix(in srgb, var(--tuned-red) 70%, black) 100%
+          );
+      }
+      :host([mode="list"]) .view-area:nth-of-type(2) {
+        background-color: color-mix(
+          in srgb,
+          var(--sharp-blue) 25%,
+          transparent
         );
-    }
-    :host([mode="home"]) .view-area:nth-of-type(3) {
-      background-color: color-mix(in srgb, var(--yellow) 25%, transparent);
-    }
-    :host([mode="home"]) .view-area:nth-of-type(3) .grid-area-label {
-      background-image:
-        linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%),
-        linear-gradient(
-          90deg,
-          color-mix(in srgb, var(--yellow) 70%, black) 0%,
-          color-mix(in srgb, var(--yellow) 70%, black) 100%
+      }
+      :host([mode="list"]) .view-area:nth-of-type(2) .grid-area-label {
+        background-image:
+          linear-gradient(
+            90deg,
+            rgba(0, 0, 0, 0.2) 0%,
+            rgba(0, 0, 0, 0.2) 100%
+          ),
+          linear-gradient(
+            90deg,
+            color-mix(in srgb, var(--sharp-blue) 70%, black) 0%,
+            color-mix(in srgb, var(--sharp-blue) 70%, black) 100%
+          );
+      }
+      :host([mode="list"]) .view-area:nth-of-type(3) {
+        background-color: color-mix(in srgb, var(--yellow) 25%, transparent);
+      }
+      :host([mode="list"]) .view-area:nth-of-type(3) .grid-area-label {
+        background-image:
+          linear-gradient(
+            90deg,
+            rgba(0, 0, 0, 0.2) 0%,
+            rgba(0, 0, 0, 0.2) 100%
+          ),
+          linear-gradient(
+            90deg,
+            color-mix(in srgb, var(--yellow) 70%, black) 0%,
+            color-mix(in srgb, var(--yellow) 70%, black) 100%
+          );
+      }
+      :host([mode="list"]) .view-area:nth-of-type(4) {
+        background-color: color-mix(
+          in srgb,
+          var(--apple-green) 25%,
+          transparent
         );
-    }
-    :host([mode="home"]) .view-area:nth-of-type(4) {
-      background-color: color-mix(in srgb, var(--apple-green) 25%, transparent);
-    }
-    :host([mode="home"]) .view-area:nth-of-type(4) .grid-area-label {
-      background-image:
-        linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%),
-        linear-gradient(
-          90deg,
-          color-mix(in srgb, var(--apple-green) 70%, black) 0%,
-          color-mix(in srgb, var(--apple-green) 70%, black) 100%
+      }
+      :host([mode="list"]) .view-area:nth-of-type(4) .grid-area-label {
+        background-image:
+          linear-gradient(
+            90deg,
+            rgba(0, 0, 0, 0.2) 0%,
+            rgba(0, 0, 0, 0.2) 100%
+          ),
+          linear-gradient(
+            90deg,
+            color-mix(in srgb, var(--apple-green) 70%, black) 0%,
+            color-mix(in srgb, var(--apple-green) 70%, black) 100%
+          );
+      }
+
+      :host([mode="home"]) .view-area:nth-of-type(1) {
+        background-color: color-mix(in srgb, var(--tuned-red) 25%, transparent);
+      }
+      :host([mode="home"]) .view-area:nth-of-type(1) .grid-area-label {
+        background-image:
+          linear-gradient(
+            90deg,
+            rgba(0, 0, 0, 0.2) 0%,
+            rgba(0, 0, 0, 0.2) 100%
+          ),
+          linear-gradient(
+            90deg,
+            color-mix(in srgb, var(--tuned-red) 70%, black) 0%,
+            color-mix(in srgb, var(--tuned-red) 70%, black) 100%
+          );
+      }
+      :host([mode="home"]) .view-area:nth-of-type(2) {
+        background-color: color-mix(
+          in srgb,
+          var(--sharp-blue) 25%,
+          transparent
         );
-    }
-    :host([mode="home"]) .view-area:nth-of-type(5) {
-      background-color: color-mix(in srgb, var(--pink) 25%, transparent);
-    }
-    :host([mode="home"]) .view-area:nth-of-type(5) .grid-area-label {
-      background-image:
-        linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%),
-        linear-gradient(
-          90deg,
-          color-mix(in srgb, var(--pink) 70%, black) 0%,
-          color-mix(in srgb, var(--pink) 70%, black) 100%
+      }
+      :host([mode="home"]) .view-area:nth-of-type(2) .grid-area-label {
+        background-image:
+          linear-gradient(
+            90deg,
+            rgba(0, 0, 0, 0.2) 0%,
+            rgba(0, 0, 0, 0.2) 100%
+          ),
+          linear-gradient(
+            90deg,
+            color-mix(in srgb, var(--sharp-blue) 70%, black) 0%,
+            color-mix(in srgb, var(--sharp-blue) 70%, black) 100%
+          );
+      }
+      :host([mode="home"]) .view-area:nth-of-type(3) {
+        background-color: color-mix(in srgb, var(--yellow) 25%, transparent);
+      }
+      :host([mode="home"]) .view-area:nth-of-type(3) .grid-area-label {
+        background-image:
+          linear-gradient(
+            90deg,
+            rgba(0, 0, 0, 0.2) 0%,
+            rgba(0, 0, 0, 0.2) 100%
+          ),
+          linear-gradient(
+            90deg,
+            color-mix(in srgb, var(--yellow) 70%, black) 0%,
+            color-mix(in srgb, var(--yellow) 70%, black) 100%
+          );
+      }
+      :host([mode="home"]) .view-area:nth-of-type(4) {
+        background-color: color-mix(
+          in srgb,
+          var(--apple-green) 25%,
+          transparent
         );
-    }
+      }
+      :host([mode="home"]) .view-area:nth-of-type(4) .grid-area-label {
+        background-image:
+          linear-gradient(
+            90deg,
+            rgba(0, 0, 0, 0.2) 0%,
+            rgba(0, 0, 0, 0.2) 100%
+          ),
+          linear-gradient(
+            90deg,
+            color-mix(in srgb, var(--apple-green) 70%, black) 0%,
+            color-mix(in srgb, var(--apple-green) 70%, black) 100%
+          );
+      }
+      :host([mode="home"]) .view-area:nth-of-type(5) {
+        background-color: color-mix(in srgb, var(--pink) 25%, transparent);
+      }
+      :host([mode="home"]) .view-area:nth-of-type(5) .grid-area-label {
+        background-image:
+          linear-gradient(
+            90deg,
+            rgba(0, 0, 0, 0.2) 0%,
+            rgba(0, 0, 0, 0.2) 100%
+          ),
+          linear-gradient(
+            90deg,
+            color-mix(in srgb, var(--pink) 70%, black) 0%,
+            color-mix(in srgb, var(--pink) 70%, black) 100%
+          );
+      }
 
-    .view-square {
-      grid-area: square;
-    }
+      .view-square {
+        grid-area: square;
+      }
 
-    .view-title {
-      grid-area: title;
-    }
+      .view-title {
+        grid-area: title;
+      }
 
-    .view-header {
-      grid-area: header;
-    }
+      .view-header {
+        grid-area: header;
+      }
 
-    .view-projects {
-      grid-area: projects;
-    }
+      .view-projects {
+        grid-area: projects;
+      }
 
-    .view-bio {
-      grid-area: bio;
-    }
+      .view-bio {
+        grid-area: bio;
+      }
 
-    .view-nav {
-      grid-area: nav;
-    }
+      .view-nav {
+        grid-area: nav;
+      }
 
-    .view-footer {
-      grid-area: footer;
-    }
+      .view-footer {
+        grid-area: footer;
+      }
 
-    .view-content {
-      grid-area: content;
-    }
+      .view-content {
+        grid-area: content;
+      }
 
-    .view-banner {
-      grid-area: banner;
-    }
+      .view-banner {
+        grid-area: banner;
+      }
 
-    .view-main {
-      grid-area: main;
-    }
+      .view-main {
+        grid-area: main;
+      }
 
-    .view-page-dots {
-      grid-area: page-dots;
-    }
+      .view-page-dots {
+        grid-area: page-dots;
+      }
 
-    .view-board {
-      grid-area: board;
-    }
+      .view-board {
+        grid-area: board;
+      }
 
-    .view-message {
-      grid-area: message;
-    }
+      .view-message {
+        grid-area: message;
+      }
 
-    .view-lists {
-      grid-area: lists;
-    }
+      .view-lists {
+        grid-area: lists;
+      }
+
+      .view-settings {
+        grid-area: settings;
+      }
+
+      :host([mode="settings"]) .view-area:nth-of-type(1) {
+        background-color: color-mix(in srgb, var(--tuned-red) 25%, transparent);
+      }
+      :host([mode="settings"]) .view-area:nth-of-type(1) .grid-area-label {
+        background-image:
+          linear-gradient(
+            90deg,
+            rgba(0, 0, 0, 0.2) 0%,
+            rgba(0, 0, 0, 0.2) 100%
+          ),
+          linear-gradient(
+            90deg,
+            color-mix(in srgb, var(--tuned-red) 70%, black) 0%,
+            color-mix(in srgb, var(--tuned-red) 70%, black) 100%
+          );
+      }
+      :host([mode="settings"]) .view-area:nth-of-type(2) {
+        background-color: color-mix(
+          in srgb,
+          var(--sharp-blue) 25%,
+          transparent
+        );
+      }
+      :host([mode="settings"]) .view-area:nth-of-type(2) .grid-area-label {
+        background-image:
+          linear-gradient(
+            90deg,
+            rgba(0, 0, 0, 0.2) 0%,
+            rgba(0, 0, 0, 0.2) 100%
+          ),
+          linear-gradient(
+            90deg,
+            color-mix(in srgb, var(--sharp-blue) 70%, black) 0%,
+            color-mix(in srgb, var(--sharp-blue) 70%, black) 100%
+          );
+      }
     `
 ];
 let et = xe;
@@ -3734,38 +3927,38 @@ export {
   Ge as Form,
   Ue as Gap,
   Qe as Grid,
-  Be as Icon,
+  Pe as Icon,
   qe as Input,
   et as Layout,
   Je as List,
   Fe as Row,
   Ze as Text,
   We as Tooltip,
-  Ia as applike,
+  Ii as applike,
   Rr as calculateScalingFactor,
   L as currentLanguage,
   X as currentTheme,
-  ot as detectMobileDevice,
-  Pa as getAvailableLanguages,
-  Ht as getAvailableLanguagesSync,
+  nt as detectMobileDevice,
+  Bi as getAvailableLanguages,
+  Vt as getAvailableLanguagesSync,
   Xr as getBrowserLanguage,
   Dr as getDeviceInfo,
   Yr as getLanguageDisplayName,
-  Da as getPriceLabel,
-  Na as getScalingFactor,
-  oe as getText,
-  Oa as hasTranslation,
-  ae as initDeviceDetection,
-  Ba as loadTranslations,
+  Di as getPriceLabel,
+  Ni as getScalingFactor,
+  ne as getText,
+  Oi as hasTranslation,
+  ie as initDeviceDetection,
+  Pi as loadTranslations,
   N as savePreferences,
-  Za as scale,
+  Zi as scale,
   Y as scalingConfig,
-  P as scalingFactor,
+  B as scalingFactor,
   Mt as setLanguage,
-  Ta as setScalingConfig,
-  ta as setTheme,
+  Ti as setScalingConfig,
+  ti as setTheme,
   U as translate,
-  za as unscale,
+  zi as unscale,
   Kt as updateScalingFactor
 };
 //# sourceMappingURL=ds-one.bundle.min.js.map