@beeq/core 1.5.0 → 1.6.0

package/dist/cjs/{app-globals-53e231d9.js → app-globals-b11284b9.js}

@@ -35,15 +35,15 @@ class te {
     return this.#e.add(t), () => this.#e.delete(t);
   }
 }
-const At = (e) => new te(e), V = Symbol.for("atomico.hooks");
-globalThis[V] = globalThis[V] || {};
-let k = globalThis[V];
-const ee = Symbol.for("Atomico.suspense"), Ft = Symbol.for("Atomico.effect"), ne = Symbol.for("Atomico.layoutEffect"), Rt = Symbol.for("Atomico.insertionEffect"), M = (e, t, n) => {
-  const { i: s, hooks: o } = k.c, r = o[s] = o[s] || {};
-  return r.value = e(r.value), r.effect = t, r.tag = n, k.c.i++, o[s].value;
-}, se = (e) => M((t = At(e)) => t), L = () => M((e = At(k.c.host)) => e), It = () => k.c.update, oe = (e, t, n = 0) => {
-  let s = {}, o = !1;
-  const r = () => o, c = (i, f) => {
+const Mt = (e) => new te(e), tt = Symbol.for("atomico.hooks");
+globalThis[tt] = globalThis[tt] || {};
+let k = globalThis[tt];
+const ee = Symbol.for("Atomico.suspense"), At = Symbol.for("Atomico.effect"), ne = Symbol.for("Atomico.layoutEffect"), Ft = Symbol.for("Atomico.insertionEffect"), O = (e, t, n) => {
+  const { i: s, hooks: r } = k.c, o = r[s] = r[s] || {};
+  return o.value = e(o.value), o.effect = t, o.tag = n, k.c.i++, r[s].value;
+}, se = (e) => O((t = Mt(e)) => t), _ = () => O((e = Mt(k.c.host)) => e), Rt = () => k.c.update, oe = (e, t, n = 0) => {
+  let s = {}, r = !1;
+  const o = () => r, c = (i, f) => {
     for (const d in s) {
       const l = s[d];
       l.effect && l.tag === i && (l.value = l.effect(l.value, f));
@@ -53,37 +53,37 @@ const ee = Symbol.for("Atomico.suspense"), Ft = Symbol.for("Atomico.effect"), ne
     k.c = { host: t, hooks: s, update: e, i: 0, id: n };
     let f;
     try {
-      o = !1, f = i();
+      r = !1, f = i();
     } catch (d) {
       if (d !== ee)
         throw d;
-      o = !0;
+      r = !0;
     } finally {
       k.c = null;
     }
     return f;
-  }, cleanEffects: (i) => (c(Rt, i), () => (c(ne, i), () => {
-    c(Ft, i);
-  })), isSuspense: r };
-}, A = Symbol.for;
-function Ut(e, t) {
+  }, cleanEffects: (i) => (c(Ft, i), () => (c(ne, i), () => {
+    c(At, i);
+  })), isSuspense: o };
+}, M = Symbol.for;
+function It(e, t) {
   const n = e.length;
   if (n !== t.length)
     return !1;
   for (let s = 0; s < n; s++) {
-    let o = e[s], r = t[s];
-    if (o !== r)
+    let r = e[s], o = t[s];
+    if (r !== o)
       return !1;
   }
   return !0;
 }
-const C = (e) => typeof e == "function", R = (e) => typeof e == "object", { isArray: re } = Array, tt = (e, t) => (t ? e instanceof HTMLStyleElement : !0) && "hydrate" in (e?.dataset || {});
-function $t(e, t) {
+const w = (e) => typeof e == "function", R = (e) => typeof e == "object", { isArray: re } = Array, et = (e, t) => (t ? e instanceof HTMLStyleElement : !0) && "hydrate" in (e?.dataset || {});
+function Ut(e, t) {
   let n;
-  const s = (o) => {
-    let { length: r } = o;
-    for (let c = 0; c < r; c++) {
-      const u = o[c];
+  const s = (r) => {
+    let { length: o } = r;
+    for (let c = 0; c < o; c++) {
+      const u = r[c];
       if (u && Array.isArray(u))
         s(u);
       else {
@@ -96,8 +96,8 @@ function $t(e, t) {
   };
   s(e), n != null && t(n);
 }
-const Lt = (e, t, n) => (e.addEventListener(t, n), () => e.removeEventListener(t, n));
-class _t {
+const $t = (e, t, n) => (e.addEventListener(t, n), () => e.removeEventListener(t, n));
+class Lt {
   /**
    *
    * @param {HTMLElement} target
@@ -108,19 +108,19 @@ class _t {
     this.message = n, this.target = t, this.value = s;
   }
 }
-class jt extends _t {
+class _t extends Lt {
 }
-class ce extends _t {
+class ce extends Lt {
 }
-const q = "Custom", ae = null, ie = { true: 1, "": 1, 1: 1 };
-function le(e, t, n, s, o) {
+const q = "Custom", ie = null, ae = { true: 1, "": 1, 1: 1 };
+function le(e, t, n, s, r) {
   const {
-    type: r,
+    type: o,
     reflect: c,
     event: u,
     value: a,
     attr: i = ue(t)
-  } = n?.name != q && R(n) && n != ae ? n : { type: n }, f = r?.name === q && r.map, d = a != null ? r == Function || !C(a) ? () => a : a : null;
+  } = n?.name != q && R(n) && n != ie ? n : { type: n }, f = o?.name === q && o.map, d = a != null ? o == Function || !w(a) ? () => a : a : null;
   Object.defineProperty(e, t, {
     configurable: !0,
     /**
@@ -129,19 +129,19 @@ function le(e, t, n, s, o) {
      */
     set(l) {
       const m = this[t];
-      d && r != Boolean && l == null && (l = d());
-      const { error: p, value: y } = (f ? he : me)(
-        r,
+      d && o != Boolean && l == null && (l = d());
+      const { error: v, value: p } = (f ? he : me)(
+        o,
         l
       );
-      if (p && y != null)
-        throw new jt(
+      if (v && p != null)
+        throw new _t(
           this,
-          `The value defined for prop '${t}' must be of type '${r.name}'`,
-          y
+          `The value defined for prop '${t}' must be of type '${o.name}'`,
+          p
         );
-      m != y && (this._props[t] = y ?? void 0, this.update(), u && Yt(this, u), this.updated.then(() => {
-        c && (this._ignoreAttr = i, fe(this, r, i, this[t]), this._ignoreAttr = null);
+      m != p && (this._props[t] = p ?? void 0, this.update(), u && jt(this, u), this.updated.then(() => {
+        c && (this._ignoreAttr = i, fe(this, o, i, this[t]), this._ignoreAttr = null);
       }));
     },
     /**
@@ -150,12 +150,12 @@ function le(e, t, n, s, o) {
     get() {
       return this._props[t];
     }
-  }), d && (o[t] = d()), s[i] = { prop: t, type: r };
+  }), d && (r[t] = d()), s[i] = { prop: t, type: o };
 }
-const Yt = (e, { type: t, base: n = CustomEvent, ...s }) => e.dispatchEvent(new n(t, s)), ue = (e) => e.replace(/([A-Z])/g, "-$1").toLowerCase(), fe = (e, t, n, s) => s == null || t == Boolean && !s ? e.removeAttribute(n) : e.setAttribute(
+const jt = (e, { type: t, base: n = CustomEvent, ...s }) => e.dispatchEvent(new n(t, s)), ue = (e) => e.replace(/([A-Z])/g, "-$1").toLowerCase(), fe = (e, t, n, s) => s == null || t == Boolean && !s ? e.removeAttribute(n) : e.setAttribute(
   n,
   t?.name === q && t?.serialize ? t?.serialize(s) : R(s) ? JSON.stringify(s) : t == Boolean ? "" : s
-), de = (e, t) => e == Boolean ? !!ie[t] : e == Number ? Number(t) : e == String ? t : e == Array || e == Object ? JSON.parse(t) : e.name == q ? t : (
+), de = (e, t) => e == Boolean ? !!ae[t] : e == Number ? Number(t) : e == String ? t : e == Array || e == Object ? JSON.parse(t) : e.name == q ? t : (
   // TODO: If when defining reflect the prop can also be of type string?
   new e(t)
 ), he = ({ map: e }, t) => {
@@ -178,9 +178,9 @@ let ye = 0;
 const pe = (e) => {
   const t = (e?.dataset || {})?.hydrate || "";
   return t || "c" + ye++;
-}, _ = (e, t = HTMLElement) => {
-  const n = {}, s = {}, o = "prototype" in t && t.prototype instanceof Element, r = o ? t : "base" in t ? t.base : HTMLElement, { props: c, styles: u } = o ? e : t;
-  class a extends r {
+}, j = (e, t = HTMLElement) => {
+  const n = {}, s = {}, r = "prototype" in t && t.prototype instanceof Element, o = r ? t : "base" in t ? t.base : HTMLElement, { props: c, styles: u } = r ? e : t;
+  class a extends o {
     constructor() {
       super(), this._setup(), this._render = () => e({ ...this._props });
       for (const f in s)
@@ -198,12 +198,12 @@ const pe = (e) => {
       this._props = {};
       let f, d;
       this.mounted = new Promise(
-        (E) => this.mount = () => {
-          E(), f != this.parentNode && (d != f ? this.unmounted.then(this.update) : this.update()), f = this.parentNode;
+        (h) => this.mount = () => {
+          h(), f != this.parentNode && (d != f ? this.unmounted.then(this.update) : this.update()), f = this.parentNode;
         }
       ), this.unmounted = new Promise(
-        (E) => this.unmount = () => {
-          E(), (f != this.parentNode || !this.isConnected) && (l.cleanEffects(!0)()(), d = this.parentNode, f = null);
+        (h) => this.unmount = () => {
+          h(), (f != this.parentNode || !this.isConnected) && (l.cleanEffects(!0)()(), d = this.parentNode, f = null);
         }
       ), this.symbolId = this.symbolId || Symbol(), this.symbolIdParent = Symbol();
       const l = oe(
@@ -211,13 +211,13 @@ const pe = (e) => {
         this,
         pe(this)
       );
-      let m, p = !0;
-      const y = tt(this);
+      let m, v = !0;
+      const p = et(this);
       this.update = () => (m || (m = !0, this.updated = (this.updated || this.mounted).then(() => {
         try {
-          const E = l.load(this._render), h = l.cleanEffects();
-          return E && //@ts-ignore
-          E.render(this, this.symbolId, y), m = !1, p && !l.isSuspense() && (p = !1, !y && be(this)), h();
+          const h = l.load(this._render), b = l.cleanEffects();
+          return h && //@ts-ignore
+          h.render(this, this.symbolId, p), m = !1, v && !l.isSuspense() && (v = !1, !p && be(this)), b();
         } finally {
           m = !1;
         }
@@ -225,8 +225,8 @@ const pe = (e) => {
         /**
          * @param {import("internal/hooks.js").CleanUseEffects} [cleanUseEffect]
          */
-        (E) => {
-          E && E();
+        (h) => {
+          h && h();
         }
       )), this.updated), this.update();
     }
@@ -246,13 +246,13 @@ const pe = (e) => {
       if (n[f]) {
         if (f === this._ignoreAttr || d === l)
           return;
-        const { prop: m, type: p } = n[f];
+        const { prop: m, type: v } = n[f];
         try {
-          this[m] = de(p, l);
+          this[m] = de(v, l);
         } catch {
           throw new ce(
             this,
-            `The value defined as attr '${f}' cannot be parsed by type '${p.name}'`,
+            `The value defined as attr '${f}' cannot be parsed by type '${v.name}'`,
             l
           );
         }
@@ -275,26 +275,26 @@ function be(e) {
   const { styles: t } = e.constructor, { shadowRoot: n } = e;
   if (n && t.length) {
     const s = [];
-    $t(t, (o) => {
-      o && (o instanceof Element ? n.appendChild(o.cloneNode(!0)) : s.push(o));
+    Ut(t, (r) => {
+      r && (r instanceof Element ? n.appendChild(r.cloneNode(!0)) : s.push(r));
     }), s.length && (n.adoptedStyleSheets = s);
   }
 }
-const qt = (e) => (t, n) => {
-  M(
+const Yt = (e) => (t, n) => {
+  O(
     /**
      * Clean the effect hook
      * @type {import("internal/hooks.js").CollectorEffect}
      */
-    ([s, o] = []) => ((o || !o) && (o && Ut(o, n) ? s = s || !0 : (C(s) && s(), s = null)), [s, n]),
+    ([s, r] = []) => ((r || !r) && (r && It(r, n) ? s = s || !0 : (w(s) && s(), s = null)), [s, n]),
     /**
      * @returns {any}
      */
-    ([s, o], r) => r ? (C(s) && s(), []) : [s || t(), o],
+    ([s, r], o) => o ? (w(s) && s(), []) : [s || t(), r],
     e
   );
-}, ot = qt(Ft), ge = qt(Rt);
-class xt extends Array {
+}, $ = Yt(At), ge = Yt(Ft);
+class Bt extends Array {
   /**
    *
    * @param {any} initialState
@@ -302,14 +302,14 @@ class xt extends Array {
    */
   constructor(t, n) {
     let s = !0;
-    const o = (r) => {
+    const r = (o) => {
       try {
-        n(r, this, s);
+        n(o, this, s);
       } finally {
         s = !1;
       }
     };
-    super(void 0, o, n), o(t);
+    super(void 0, r, n), r(t);
   }
   /**
    * The following code allows a mutable approach to useState
@@ -325,44 +325,44 @@ class xt extends Array {
   // }
 }
 const rt = (e) => {
-  const t = It();
-  return M(
-    (n = new xt(e, (s, o, r) => {
-      s = C(s) ? s(o[0]) : s, s !== o[0] && (o[0] = s, r || t());
+  const t = Rt();
+  return O(
+    (n = new Bt(e, (s, r, o) => {
+      s = w(s) ? s(r[0]) : s, s !== r[0] && (r[0] = s, o || t());
     })) => n
   );
-}, P = (e, t) => {
-  const [n] = M(([s, o, r = 0] = []) => ((!o || o && !Ut(o, t)) && (s = e()), [s, t, r]));
+}, T = (e, t) => {
+  const [n] = O(([s, r, o = 0] = []) => ((!r || r && !It(r, t)) && (s = e()), [s, t, o]));
   return n;
 }, ct = (e) => {
-  const { current: t } = L();
+  const { current: t } = _();
   if (!(e in t))
-    throw new jt(
+    throw new _t(
       t,
       `For useProp("${e}"), the prop does not exist on the host.`,
       e
     );
-  return M(
-    (n = new xt(t[e], (s, o) => {
-      s = C(s) ? s(t[e]) : s, t[e] = s;
+  return O(
+    (n = new Bt(t[e], (s, r) => {
+      s = w(s) ? s(t[e]) : s, t[e] = s;
     })) => (n[0] = t[e], n)
   );
-}, T = (e, t = {}) => {
-  const n = L();
-  return n[e] || (n[e] = (s = t.detail) => Yt(n.current, {
+}, C = (e, t = {}) => {
+  const n = _();
+  return n[e] || (n[e] = (s = t.detail) => jt(n.current, {
     type: e,
     ...t,
     detail: s
   })), n[e];
-}, et = A("atomico/options");
-globalThis[et] = globalThis[et] || {
+}, nt = M("atomico/options");
+globalThis[nt] = globalThis[nt] || {
   sheet: !!document.adoptedStyleSheets
 };
-const Bt = globalThis[et], Ee = {
+const qt = globalThis[nt], Ee = {
   checked: 1,
   value: 1,
   selected: 1
-}, De = {
+}, ve = {
   list: 1,
   type: 1,
   size: 1,
@@ -372,39 +372,39 @@ const Bt = globalThis[et], Ee = {
   src: 1,
   href: 1,
   slot: 1
-}, Se = {
+}, De = {
   shadowDom: 1,
   staticNode: 1,
   cloneNode: 1,
   children: 1,
   key: 1
-}, Y = {}, nt = [];
-class st extends Text {
+}, B = {}, st = [];
+class ot extends Text {
 }
-const ve = A("atomico/id"), I = A("atomico/type"), Z = A("atomico/ref"), zt = A("atomico/vnode"), we = () => {
+const Se = M("atomico/id"), I = M("atomico/type"), Z = M("atomico/ref"), xt = M("atomico/vnode"), we = () => {
 };
 function Ce(e, t, n) {
-  return Kt(this, e, t, n);
+  return Ht(this, e, t, n);
 }
-const Ht = (e, t, ...n) => {
-  const s = t || Y;
-  let { children: o } = s;
-  if (o = o ?? (n.length ? n : nt), e === we)
-    return o;
-  const r = e ? e instanceof Node ? 1 : (
+const zt = (e, t, ...n) => {
+  const s = t || B;
+  let { children: r } = s;
+  if (r = r ?? (n.length ? n : st), e === we)
+    return r;
+  const o = e ? e instanceof Node ? 1 : (
     //@ts-ignore
     e.prototype instanceof HTMLElement && 2
   ) : 0;
-  if (r === !1 && e instanceof Function)
+  if (o === !1 && e instanceof Function)
     return e(
-      o != nt ? { children: o, ...s } : s
+      r != st ? { children: r, ...s } : s
     );
-  const c = Bt.render || Ce;
+  const c = qt.render || Ce;
   return {
-    [I]: zt,
+    [I]: xt,
     type: e,
     props: s,
-    children: o,
+    children: r,
     key: s.key,
     // key for lists by keys
     // define if the node declares its shadowDom
@@ -412,7 +412,7 @@ const Ht = (e, t, ...n) => {
     // allows renderings to run only once
     static: s.staticNode,
     // defines whether the type is a childNode `1` or a constructor `2`
-    raw: r,
+    raw: o,
     // defines whether to use the second parameter for document.createElement
     is: s.is,
     // clone the node if it comes from a reference
@@ -420,24 +420,24 @@ const Ht = (e, t, ...n) => {
     render: c
   };
 };
-function Kt(e, t, n = ve, s, o) {
-  let r;
-  if (t && t[n] && t[n].vnode == e || e[I] != zt)
+function Ht(e, t, n = Se, s, r) {
+  let o;
+  if (t && t[n] && t[n].vnode == e || e[I] != xt)
     return t;
-  (e || !t) && (o = o || e.type == "svg", r = e.type != "host" && (e.raw == 1 ? (t && e.clone ? t[Z] : t) != e.type : e.raw == 2 ? !(t instanceof e.type) : t ? t[Z] || t.localName != e.type : !t), r && e.type != null && (e.raw == 1 && e.clone ? (s = !0, t = e.type.cloneNode(!0), t[Z] = e.type) : t = e.raw == 1 ? e.type : e.raw == 2 ? new e.type() : o ? document.createElementNS(
+  (e || !t) && (r = r || e.type == "svg", o = e.type != "host" && (e.raw == 1 ? (t && e.clone ? t[Z] : t) != e.type : e.raw == 2 ? !(t instanceof e.type) : t ? t[Z] || t.localName != e.type : !t), o && e.type != null && (e.raw == 1 && e.clone ? (s = !0, t = e.type.cloneNode(!0), t[Z] = e.type) : t = e.raw == 1 ? e.type : e.raw == 2 ? new e.type() : r ? document.createElementNS(
     "http://www.w3.org/2000/svg",
     e.type
   ) : document.createElement(
     e.type,
     e.is ? { is: e.is } : void 0
   )));
-  const c = t[n] ? t[n] : Y, { vnode: u = Y, cycle: a = 0 } = c;
+  const c = t[n] ? t[n] : B, { vnode: u = B, cycle: a = 0 } = c;
   let { fragment: i, handlers: f } = c;
-  const { children: d = nt, props: l = Y } = u;
-  if (f = r ? {} : f || {}, e.static && !r)
+  const { children: d = st, props: l = B } = u;
+  if (f = o ? {} : f || {}, e.static && !o)
     return t;
   if (e.shadow && !t.shadowRoot && // @ts-ignore
-  t.attachShadow({ mode: "open", ...e.shadow }), e.props != l && Ne(t, l, e.props, f, o), e.children !== d) {
+  t.attachShadow({ mode: "open", ...e.shadow }), e.props != l && Ne(t, l, e.props, f, r), e.children !== d) {
     const m = e.shadow ? t.shadowRoot : t;
     i = Pe(
       e.children,
@@ -449,50 +449,50 @@ function Kt(e, t, n = ve, s, o) {
       n,
       // add support to foreignObject, children will escape from svg
       !a && s,
-      o && e.type == "foreignObject" ? !1 : o
+      r && e.type == "foreignObject" ? !1 : r
     );
   }
   return t[n] = { vnode: e, handlers: f, fragment: i, cycle: a + 1 }, t;
 }
 function Te(e, t) {
-  const n = new st(""), s = new st("");
-  let o;
+  const n = new ot(""), s = new ot("");
+  let r;
   if (e[t ? "prepend" : "append"](n), t) {
-    let { lastElementChild: r } = e;
-    for (; r; ) {
-      const { previousElementSibling: c } = r;
-      if (tt(r, !0) && !tt(c, !0)) {
-        o = r;
+    let { lastElementChild: o } = e;
+    for (; o; ) {
+      const { previousElementSibling: c } = o;
+      if (et(o, !0) && !et(c, !0)) {
+        r = o;
         break;
       }
-      r = c;
+      o = c;
     }
   }
-  return o ? o.before(s) : e.append(s), {
+  return r ? r.before(s) : e.append(s), {
     markStart: n,
     markEnd: s
   };
 }
-function Pe(e, t, n, s, o, r) {
+function Pe(e, t, n, s, r, o) {
   e = e == null ? null : re(e) ? e : [e];
-  const c = t || Te(n, o), { markStart: u, markEnd: a, keyes: i } = c;
+  const c = t || Te(n, r), { markStart: u, markEnd: a, keyes: i } = c;
   let f;
   const d = i && /* @__PURE__ */ new Set();
   let l = u;
-  if (e && $t(e, (m) => {
+  if (e && Ut(e, (m) => {
     if (typeof m == "object" && !m[I])
       return;
-    const p = m[I] && m.key, y = i && p != null && i.get(p);
-    l != a && l === y ? d.delete(l) : l = l == a ? a : l.nextSibling;
-    const E = i ? y : l;
-    let h = E;
+    const v = m[I] && m.key, p = i && v != null && i.get(v);
+    l != a && l === p ? d.delete(l) : l = l == a ? a : l.nextSibling;
+    const h = i ? p : l;
+    let b = h;
     if (m[I])
-      h = Kt(m, E, s, o, r);
+      b = Ht(m, h, s, r, o);
     else {
-      const w = m + "";
-      !(h instanceof Text) || h instanceof st ? h = new Text(w) : h.data != w && (h.data = w);
+      const A = m + "";
+      !(b instanceof Text) || b instanceof ot ? b = new Text(A) : b.data != A && (b.data = A);
     }
-    h != l && (i && d.delete(h), !E || i ? (n.insertBefore(h, l), i && l != a && d.add(l)) : E == a ? n.insertBefore(h, a) : (n.replaceChild(h, E), l = h)), p != null && (f = f || /* @__PURE__ */ new Map(), f.set(p, h));
+    b != l && (i && d.delete(b), !h || i ? (n.insertBefore(b, l), i && l != a && d.add(l)) : h == a ? n.insertBefore(b, a) : (n.replaceChild(b, h), l = b)), v != null && (f = f || /* @__PURE__ */ new Map(), f.set(v, b));
   }), l = l == a ? a : l.nextSibling, t && l != a)
     for (; l != a; ) {
       const m = l;
@@ -500,18 +500,18 @@ function Pe(e, t, n, s, o, r) {
     }
   return d && d.forEach((m) => m.remove()), c.keyes = f, c;
 }
-function Ne(e, t, n, s, o) {
-  for (const r in t)
-    !(r in n) && St(e, r, t[r], null, o, s);
-  for (const r in n)
-    St(e, r, t[r], n[r], o, s);
+function Ne(e, t, n, s, r) {
+  for (const o in t)
+    !(o in n) && Dt(e, o, t[o], null, r, s);
+  for (const o in n)
+    Dt(e, o, t[o], n[o], r, s);
 }
-function St(e, t, n, s, o, r) {
-  if (t = t == "class" && !o ? "className" : t, n = n ?? null, s = s ?? null, t in e && Ee[t] && (n = e[t]), !(s === n || Se[t] || t[0] == "_"))
-    if (t[0] == "o" && t[1] == "n" && (C(s) || C(n)))
-      ke(e, t.slice(2), s, r);
+function Dt(e, t, n, s, r, o) {
+  if (t = t == "class" && !r ? "className" : t, n = n ?? null, s = s ?? null, t in e && Ee[t] && (n = e[t]), !(s === n || De[t] || t[0] == "_"))
+    if (t[0] == "o" && t[1] == "n" && (w(s) || w(n)))
+      ke(e, t.slice(2), s, o);
     else if (t == "ref")
-      s && (C(s) ? s(e) : s.current = e);
+      s && (w(s) ? s(e) : s.current = e);
     else if (t == "style") {
       const { style: c } = e;
       n = n || "", s = s || "";
@@ -519,48 +519,48 @@ function St(e, t, n, s, o, r) {
       if (u)
         for (const i in n)
           if (a)
-            !(i in s) && vt(c, i, null);
+            !(i in s) && St(c, i, null);
           else
             break;
       if (a)
         for (const i in s) {
           const f = s[i];
-          u && n[i] === f || vt(c, i, f);
+          u && n[i] === f || St(c, i, f);
         }
       else
         c.cssText = s;
     } else {
       const c = t[0] == "$" ? t.slice(1) : t;
-      c === t && (!o && !De[t] && t in e || C(s) || C(n)) ? e[t] = s ?? "" : s == null ? e.removeAttribute(c) : e.setAttribute(
+      c === t && (!r && !ve[t] && t in e || w(s) || w(n)) ? e[t] = s ?? "" : s == null ? e.removeAttribute(c) : e.setAttribute(
         c,
         R(s) ? JSON.stringify(s) : s
       );
     }
 }
 function ke(e, t, n, s) {
-  if (s.handleEvent || (s.handleEvent = (o) => s[o.type].call(e, o)), n) {
+  if (s.handleEvent || (s.handleEvent = (r) => s[r.type].call(e, r)), n) {
     if (!s[t]) {
-      const o = n.capture || n.once || n.passive ? Object.assign({}, n) : null;
-      e.addEventListener(t, s, o);
+      const r = n.capture || n.once || n.passive ? Object.assign({}, n) : null;
+      e.addEventListener(t, s, r);
     }
     s[t] = n;
   } else
     s[t] && (e.removeEventListener(t, s), delete s[t]);
 }
-function vt(e, t, n) {
+function St(e, t, n) {
   let s = "setProperty";
   n == null && (s = "removeProperty", n = null), ~t.indexOf("-") ? e[s](t, n) : e[t] = n;
 }
 const wt = {};
-function B(e, ...t) {
+function z(e, ...t) {
   const n = (e.raw || e).reduce(
-    (s, o, r) => s + o + (t[r] || ""),
+    (s, r, o) => s + r + (t[o] || ""),
     ""
   );
   return wt[n] = wt[n] || Oe(n);
 }
 function Oe(e) {
-  if (Bt.sheet) {
+  if (qt.sheet) {
     const t = new CSSStyleSheet();
     return t.replaceSync(e), t;
   } else {
@@ -568,10 +568,10 @@ function Oe(e) {
     return t.textContent = e, t;
   }
 }
-const Me = Ht("host", { style: "display: contents" }), W = A("atomico/context"), Ae = (e, t) => {
-  const n = L();
+const Me = zt("host", { style: "display: contents" }), W = M("atomico/context"), Ae = (e, t) => {
+  const n = _();
   ge(
-    () => Lt(
+    () => $t(
       n.current,
       "ConnectContext",
       /**
@@ -584,36 +584,36 @@ const Me = Ht("host", { style: "display: contents" }), W = A("atomico/context"),
     [e]
   );
 }, Fe = (e) => {
-  const t = T("ConnectContext", {
+  const t = C("ConnectContext", {
     bubbles: !0,
     composed: !0
   }), n = () => {
-    let r;
+    let o;
     return t({
       id: e,
       connect(c) {
-        r = c;
+        o = c;
       }
-    }), r;
-  }, [s, o] = rt(
+    }), o;
+  }, [s, r] = rt(
     n
   );
-  return ot(() => {
+  return $(() => {
     s || (e[W] || (e[W] = customElements.whenDefined(
       new e().localName
     )), e[W].then(
-      () => o(n)
+      () => r(n)
     ));
   }, [e]), s;
 }, Re = (e) => {
-  const t = Fe(e), n = It();
-  return ot(() => {
+  const t = Fe(e), n = Rt();
+  return $(() => {
     if (t)
-      return Lt(t, "UpdatedValue", n);
+      return $t(t, "UpdatedValue", n);
   }, [t]), (t || e).value;
 }, Ie = (e) => {
-  const t = _(
-    () => (Ae(t, L().current), Me),
+  const t = j(
+    () => (Ae(t, _().current), Me),
     {
       props: {
         value: {
@@ -625,40 +625,40 @@ const Me = Ht("host", { style: "display: contents" }), W = A("atomico/context"),
     }
   );
   return t.value = e, t;
-}, b = (e, t, n) => (t == null ? t = { key: n } : t.key = n, Ht(e, t)), U = b, Jt = B`*,*:before,*:after{box-sizing:border-box}button{padding:0;touch-action:manipulation;cursor:pointer;user-select:none}`, Zt = B`.vh{position:absolute;transform:scale(0)}`;
-function at() {
-  return D.from(/* @__PURE__ */ new Date());
+}, y = (e, t, n) => (t == null ? t = { key: n } : t.key = n, zt(e, t)), U = y, Kt = z`*,*:before,*:after{box-sizing:border-box}button{padding:0;touch-action:manipulation;cursor:pointer;user-select:none}`, Jt = z`.vh{position:absolute;transform:scale(0)}`;
+function it() {
+  return E.from(/* @__PURE__ */ new Date());
 }
-function it(e, t = 0) {
-  const n = v(e), s = n.getUTCDay(), o = (s < t ? 7 : 0) + s - t;
-  return n.setUTCDate(n.getUTCDate() - o), D.from(n);
+function at(e, t = 0) {
+  const n = S(e), s = n.getUTCDay(), r = (s < t ? 7 : 0) + s - t;
+  return n.setUTCDate(n.getUTCDate() - r), E.from(n);
 }
-function Wt(e, t = 0) {
-  return it(e, t).add({ days: 6 });
+function Zt(e, t = 0) {
+  return at(e, t).add({ days: 6 });
 }
-function Xt(e) {
-  return D.from(new Date(Date.UTC(e.year, e.month, 0)));
+function Wt(e) {
+  return E.from(new Date(Date.UTC(e.year, e.month, 0)));
 }
-function z(e, t, n) {
-  return t && D.compare(e, t) < 0 ? t : n && D.compare(e, n) > 0 ? n : e;
+function H(e, t, n) {
+  return t && E.compare(e, t) < 0 ? t : n && E.compare(e, n) > 0 ? n : e;
 }
 const Ue = { days: 1 };
 function $e(e, t = 0) {
-  let n = it(e.toPlainDate(), t);
-  const s = Wt(Xt(e), t), o = [];
-  for (; D.compare(n, s) < 0; ) {
-    const r = [];
+  let n = at(e.toPlainDate(), t);
+  const s = Zt(Wt(e), t), r = [];
+  for (; E.compare(n, s) < 0; ) {
+    const o = [];
     for (let c = 0; c < 7; c++)
-      r.push(n), n = n.add(Ue);
-    o.push(r);
+      o.push(n), n = n.add(Ue);
+    r.push(o);
   }
-  return o;
+  return r;
 }
-function v(e) {
+function S(e) {
   return new Date(Date.UTC(e.year, e.month - 1, e.day ?? 1));
 }
 const Le = /^(\d{4})-(0[1-9]|1[0-2])-(0[1-9]|[12][0-9]|3[0-1])$/, X = (e, t) => e.toString().padStart(t, "0");
-class D {
+class E {
   constructor(t, n, s) {
     this.year = t, this.month = n, this.day = s;
   }
@@ -666,22 +666,22 @@ class D {
   // i didn't want to get into more complex arithmetic since it get tricky fast
   // this is enough to serve my needs and will still be a drop-in replacement when actual Temporal API lands
   add(t) {
-    const n = v(this);
+    const n = S(this);
     if ("days" in t)
-      return n.setUTCDate(this.day + t.days), D.from(n);
-    let { year: s, month: o } = this;
-    "months" in t ? (o = this.month + t.months, n.setUTCMonth(o - 1)) : (s = this.year + t.years, n.setUTCFullYear(s));
-    const r = D.from(v({ year: s, month: o, day: 1 }));
-    return z(D.from(n), r, Xt(r));
+      return n.setUTCDate(this.day + t.days), E.from(n);
+    let { year: s, month: r } = this;
+    "months" in t ? (r = this.month + t.months, n.setUTCMonth(r - 1)) : (s = this.year + t.years, n.setUTCFullYear(s));
+    const o = E.from(S({ year: s, month: r, day: 1 }));
+    return H(E.from(n), o, Wt(o));
   }
   toString() {
     return `${X(this.year, 4)}-${X(this.month, 2)}-${X(this.day, 2)}`;
   }
   toPlainYearMonth() {
-    return new H(this.year, this.month);
+    return new K(this.year, this.month);
   }
   equals(t) {
-    return D.compare(this, t) === 0;
+    return E.compare(this, t) === 0;
   }
   static compare(t, n) {
     return t.year < n.year ? -1 : t.year > n.year ? 1 : t.month < n.month ? -1 : t.month > n.month ? 1 : t.day < n.day ? -1 : t.day > n.day ? 1 : 0;
@@ -691,33 +691,33 @@ class D {
       const n = t.match(Le);
       if (!n)
         throw new TypeError(t);
-      const [, s, o, r] = n;
-      return new D(
+      const [, s, r, o] = n;
+      return new E(
         parseInt(s, 10),
-        parseInt(o, 10),
-        parseInt(r, 10)
+        parseInt(r, 10),
+        parseInt(o, 10)
       );
     }
-    return new D(
+    return new E(
       t.getUTCFullYear(),
       t.getUTCMonth() + 1,
       t.getUTCDate()
     );
   }
 }
-class H {
+class K {
   constructor(t, n) {
     this.year = t, this.month = n;
   }
   add(t) {
-    const n = v(this), s = (t.months ?? 0) + (t.years ?? 0) * 12;
-    return n.setUTCMonth(n.getUTCMonth() + s), new H(n.getUTCFullYear(), n.getUTCMonth() + 1);
+    const n = S(this), s = (t.months ?? 0) + (t.years ?? 0) * 12;
+    return n.setUTCMonth(n.getUTCMonth() + s), new K(n.getUTCFullYear(), n.getUTCMonth() + 1);
   }
   equals(t) {
     return this.year === t.year && this.month === t.month;
   }
   toPlainDate() {
-    return new D(this.year, this.month, 1);
+    return new E(this.year, this.month, 1);
   }
 }
 function x(e, t) {
@@ -727,136 +727,136 @@ function x(e, t) {
     } catch {
     }
 }
-function O(e) {
+function P(e) {
   const [t, n] = ct(e);
-  return [P(() => x(D, t), [t]), (r) => n(r.toString())];
+  return [T(() => x(E, t), [t]), (o) => n(o?.toString())];
 }
 function _e(e) {
   const [t = "", n] = ct(e);
-  return [P(() => {
-    const [r, c] = t.split("/"), u = x(D, r), a = x(D, c);
+  return [T(() => {
+    const [o, c] = t.split("/"), u = x(E, o), a = x(E, c);
     return u && a ? [u, a] : [];
-  }, [t]), (r) => n(`${r[0]}/${r[1]}`)];
+  }, [t]), (o) => n(`${o[0]}/${o[1]}`)];
 }
 function je(e) {
   const [t = "", n] = ct(e);
-  return [P(() => {
-    const r = [];
+  return [T(() => {
+    const o = [];
     for (const c of t.trim().split(/\s+/)) {
-      const u = x(D, c);
-      u && r.push(u);
+      const u = x(E, c);
+      u && o.push(u);
     }
-    return r;
-  }, [t]), (r) => n(r.join(" "))];
+    return o;
+  }, [t]), (o) => n(o.join(" "))];
 }
-function $(e, t) {
-  return P(
+function L(e, t) {
+  return T(
     () => new Intl.DateTimeFormat(t, { timeZone: "UTC", ...e }),
     [t, e]
   );
 }
 function Ct(e, t, n) {
-  const s = $(e, n);
-  return P(() => {
-    const o = [], r = /* @__PURE__ */ new Date();
+  const s = L(e, n);
+  return T(() => {
+    const r = [], o = /* @__PURE__ */ new Date();
     for (var c = 0; c < 7; c++) {
-      const u = (r.getUTCDay() - t + 7) % 7;
-      o[u] = s.format(r), r.setUTCDate(r.getUTCDate() + 1);
+      const u = (o.getUTCDay() - t + 7) % 7;
+      r[u] = s.format(o), o.setUTCDate(o.getUTCDate() + 1);
     }
-    return o;
+    return r;
   }, [t, s]);
 }
-const Tt = (e, t, n) => z(e, t, n) === e, Pt = (e) => e.target.matches(":dir(ltr)"), Ye = { month: "long", day: "numeric" }, qe = { month: "long" }, xe = { weekday: "narrow" }, Be = { weekday: "long" }, G = { bubbles: !0 };
+const Tt = (e, t, n) => H(e, t, n) === e, Pt = (e) => e.target.matches(":dir(ltr)"), Ye = { month: "long", day: "numeric" }, Be = { month: "long" }, qe = { weekday: "narrow" }, xe = { weekday: "long" }, G = { bubbles: !0 };
 function ze({ props: e, context: t }) {
   const { offset: n } = e, {
     firstDayOfWeek: s,
-    isDateDisallowed: o,
-    min: r,
+    isDateDisallowed: r,
+    min: o,
     max: c,
     page: u,
     locale: a,
     focusedDate: i
-  } = t, f = at(), d = Ct(Be, s, a), l = Ct(xe, s, a), m = $(Ye, a), p = $(qe, a), y = P(
+  } = t, f = it(), d = Ct(xe, s, a), l = Ct(qe, s, a), m = L(Ye, a), v = L(Be, a), p = T(
     () => u.start.add({ months: n }),
     [u, n]
-  ), E = P(
-    () => $e(y, s),
-    [y, s]
-  ), h = T("focusday", G), w = T("selectday", G), K = T("hoverday", G);
+  ), h = T(
+    () => $e(p, s),
+    [p, s]
+  ), b = C("focusday", G), A = C("selectday", G), Xt = C("hoverday", G);
   function mt(g) {
-    h(z(g, r, c));
+    b(H(g, o, c));
   }
   function Gt(g) {
-    let S;
+    let D;
     switch (g.key) {
       case "ArrowRight":
-        S = i.add({ days: Pt(g) ? 1 : -1 });
+        D = i.add({ days: Pt(g) ? 1 : -1 });
         break;
       case "ArrowLeft":
-        S = i.add({ days: Pt(g) ? -1 : 1 });
+        D = i.add({ days: Pt(g) ? -1 : 1 });
         break;
       case "ArrowDown":
-        S = i.add({ days: 7 });
+        D = i.add({ days: 7 });
         break;
       case "ArrowUp":
-        S = i.add({ days: -7 });
+        D = i.add({ days: -7 });
         break;
       case "PageUp":
-        S = i.add(g.shiftKey ? { years: -1 } : { months: -1 });
+        D = i.add(g.shiftKey ? { years: -1 } : { months: -1 });
         break;
       case "PageDown":
-        S = i.add(g.shiftKey ? { years: 1 } : { months: 1 });
+        D = i.add(g.shiftKey ? { years: 1 } : { months: 1 });
         break;
       case "Home":
-        S = it(i, s);
+        D = at(i, s);
         break;
       case "End":
-        S = Wt(i, s);
+        D = Zt(i, s);
         break;
       default:
         return;
     }
-    mt(S), g.preventDefault();
+    mt(D), g.preventDefault();
   }
   function Qt(g) {
-    const S = y.equals(g);
-    if (!t.showOutsideDays && !S)
+    const D = p.equals(g);
+    if (!t.showOutsideDays && !D)
       return;
-    const Vt = g.equals(i), yt = g.equals(f), pt = v(g), j = o?.(pt), bt = !Tt(g, r, c);
+    const Vt = g.equals(i), yt = g.equals(f), pt = S(g), Y = r?.(pt), bt = !Tt(g, o, c);
     let gt = "", N;
     if (t.type === "range") {
-      const [F, J] = t.value, Et = F?.equals(g), Dt = J?.equals(g);
-      N = F && J && Tt(g, F, J), gt = `${Et ? "range-start" : ""} ${Dt ? "range-end" : ""} ${N && !Et && !Dt ? "range-inner" : ""}`;
+      const [F, J] = t.value, Et = F?.equals(g), vt = J?.equals(g);
+      N = F && J && Tt(g, F, J), gt = `${Et ? "range-start" : ""} ${vt ? "range-end" : ""} ${N && !Et && !vt ? "range-inner" : ""}`;
     } else
       t.type === "multi" ? N = t.value.some((F) => F.equals(g)) : N = t.value?.equals(g);
     return {
       part: `${`button day ${// we don't want outside days to ever be shown as selected
-      S ? N ? "selected" : "" : "outside"} ${j ? "disallowed" : ""} ${yt ? "today" : ""}`} ${gt}`,
-      tabindex: S && Vt ? 0 : -1,
+      D ? N ? "selected" : "" : "outside"} ${Y ? "disallowed" : ""} ${yt ? "today" : ""}`} ${gt}`,
+      tabindex: D && Vt ? 0 : -1,
       disabled: bt,
-      "aria-disabled": j ? "true" : void 0,
-      "aria-pressed": S && N,
+      "aria-disabled": Y ? "true" : void 0,
+      "aria-pressed": D && N,
       "aria-current": yt ? "date" : void 0,
       "aria-label": m.format(pt),
       onkeydown: Gt,
       onclick() {
-        j || w(g), mt(g);
+        Y || A(g), mt(g);
       },
       onmouseover() {
-        !j && !bt && K(g);
+        !Y && !bt && Xt(g);
       }
     };
   }
   return {
-    weeks: E,
-    yearMonth: y,
+    weeks: h,
+    yearMonth: p,
     daysLong: d,
     daysShort: l,
-    formatter: p,
+    formatter: v,
     getDayProps: Qt
   };
 }
-const Q = at(), lt = Ie({
+const Q = it(), lt = Ie({
   type: "date",
   firstDayOfWeek: 1,
   isDateDisallowed: () => !1,
@@ -864,22 +864,22 @@ const Q = at(), lt = Ie({
   page: { start: Q.toPlainYearMonth(), end: Q.toPlainYearMonth() }
 });
 customElements.define("calendar-month-ctx", lt);
-const He = _(
+const He = j(
   (e) => {
     const t = Re(lt), n = se(), s = ze({ props: e, context: t });
-    function o() {
+    function r() {
       n.current.querySelector("button[tabindex='0']")?.focus();
     }
-    return /* @__PURE__ */ U("host", { shadowDom: !0, focus: o, children: [
-      /* @__PURE__ */ b("div", { id: "h", part: "heading", children: s.formatter.format(v(s.yearMonth)) }),
+    return /* @__PURE__ */ U("host", { shadowDom: !0, focus: r, children: [
+      /* @__PURE__ */ y("div", { id: "h", part: "heading", children: s.formatter.format(S(s.yearMonth)) }),
       /* @__PURE__ */ U("table", { ref: n, "aria-labelledby": "h", part: "table", children: [
-        /* @__PURE__ */ b("thead", { children: /* @__PURE__ */ b("tr", { part: "tr head", children: s.daysLong.map((r, c) => /* @__PURE__ */ U("th", { part: "th", scope: "col", children: [
-          /* @__PURE__ */ b("span", { class: "vh", children: r }),
-          /* @__PURE__ */ b("span", { "aria-hidden": "true", children: s.daysShort[c] })
+        /* @__PURE__ */ y("thead", { children: /* @__PURE__ */ y("tr", { part: "tr head", children: s.daysLong.map((o, c) => /* @__PURE__ */ U("th", { part: "th", scope: "col", children: [
+          /* @__PURE__ */ y("span", { class: "vh", children: o }),
+          /* @__PURE__ */ y("span", { "aria-hidden": "true", children: s.daysShort[c] })
         ] })) }) }),
-        /* @__PURE__ */ b("tbody", { children: s.weeks.map((r, c) => /* @__PURE__ */ b("tr", { part: "tr week", children: r.map((u, a) => {
+        /* @__PURE__ */ y("tbody", { children: s.weeks.map((o, c) => /* @__PURE__ */ y("tr", { part: "tr week", children: o.map((u, a) => {
           const i = s.getDayProps(u);
-          return /* @__PURE__ */ b("td", { part: "td", children: i && /* @__PURE__ */ b("button", { ...i, children: u.day }) }, a);
+          return /* @__PURE__ */ y("td", { part: "td", children: i && /* @__PURE__ */ y("button", { ...i, children: u.day }) }, a);
         }) }, c)) })
       ] })
     ] });
@@ -892,41 +892,41 @@ const He = _(
       }
     },
     styles: [
+      Kt,
       Jt,
-      Zt,
-      B`:host{--color-accent: black;--color-text-on-accent: white;display:flex;flex-direction:column;gap:.25rem;text-align:center;inline-size:fit-content}table{border-collapse:collapse;font-size:.875rem}th{font-weight:700;block-size:2.25rem}td{padding-inline:0}button{color:inherit;font-size:inherit;background:transparent;border:0;font-variant-numeric:tabular-nums;block-size:2.25rem;inline-size:2.25rem}button:hover:where(:not(:disabled,[aria-disabled])){background:#0000000d}button:is([aria-pressed=true],:focus-visible){background:var(--color-accent);color:var(--color-text-on-accent)}button:focus-visible{outline:1px solid var(--color-text-on-accent);outline-offset:-2px}button:disabled,:host::part(outside),:host::part(disallowed){cursor:default;opacity:.5}`
+      z`:host{--color-accent: black;--color-text-on-accent: white;display:flex;flex-direction:column;gap:.25rem;text-align:center;inline-size:fit-content}table{border-collapse:collapse;font-size:.875rem}th{font-weight:700;block-size:2.25rem}td{padding-inline:0}button{color:inherit;font-size:inherit;background:transparent;border:0;font-variant-numeric:tabular-nums;block-size:2.25rem;inline-size:2.25rem}button:hover:where(:not(:disabled,[aria-disabled])){background:#0000000d}button:is([aria-pressed=true],:focus-visible){background:var(--color-accent);color:var(--color-text-on-accent)}button:focus-visible{outline:1px solid var(--color-text-on-accent);outline-offset:-2px}button:disabled,:host::part(outside),:host::part(disallowed){cursor:default;opacity:.5}`
     ]
   }
 );
 customElements.define("calendar-month", He);
 function Nt(e) {
-  return /* @__PURE__ */ b(
+  return /* @__PURE__ */ y(
     "button",
     {
       part: `button ${e.name} ${e.onclick ? "" : "disabled"}`,
       onclick: e.onclick,
       "aria-disabled": e.onclick ? null : "true",
-      children: /* @__PURE__ */ b("slot", { name: e.name, children: e.children })
+      children: /* @__PURE__ */ y("slot", { name: e.name, children: e.children })
     }
   );
 }
 function ut(e) {
-  const t = v(e.page.start), n = v(e.page.end);
+  const t = S(e.page.start), n = S(e.page.end);
   return /* @__PURE__ */ U("div", { role: "group", "aria-labelledby": "h", part: "container", children: [
-    /* @__PURE__ */ b("div", { id: "h", class: "vh", "aria-live": "polite", "aria-atomic": "true", children: e.formatVerbose.formatRange(t, n) }),
+    /* @__PURE__ */ y("div", { id: "h", class: "vh", "aria-live": "polite", "aria-atomic": "true", children: e.formatVerbose.formatRange(t, n) }),
     /* @__PURE__ */ U("div", { part: "header", children: [
-      /* @__PURE__ */ b(Nt, { name: "previous", onclick: e.previous, children: "Previous" }),
-      /* @__PURE__ */ b("slot", { part: "heading", name: "heading", children: /* @__PURE__ */ b("div", { "aria-hidden": "true", children: e.format.formatRange(t, n) }) }),
-      /* @__PURE__ */ b(Nt, { name: "next", onclick: e.next, children: "Next" })
+      /* @__PURE__ */ y(Nt, { name: "previous", onclick: e.previous, children: "Previous" }),
+      /* @__PURE__ */ y("slot", { part: "heading", name: "heading", children: /* @__PURE__ */ y("div", { "aria-hidden": "true", children: e.format.formatRange(t, n) }) }),
+      /* @__PURE__ */ y(Nt, { name: "next", onclick: e.next, children: "Next" })
     ] }),
-    /* @__PURE__ */ b(
+    /* @__PURE__ */ y(
       lt,
       {
         value: e,
         onselectday: e.onSelect,
         onfocusday: e.onFocus,
         onhoverday: e.onHover,
-        children: /* @__PURE__ */ b("slot", {})
+        children: /* @__PURE__ */ y("slot", {})
       }
     )
   ] });
@@ -969,81 +969,109 @@ const ft = {
     type: String,
     value: () => {
     }
+  },
+  pageBy: {
+    type: String,
+    value: () => "months"
   }
 }, dt = [
+  Kt,
   Jt,
-  Zt,
-  B`:host{display:block;inline-size:fit-content}[role=group]{display:flex;flex-direction:column;gap:1em}:host::part(header){display:flex;align-items:center;justify-content:space-between}:host::part(heading){font-weight:700;font-size:1.25em}button{display:flex;align-items:center;justify-content:center}button[aria-disabled]{cursor:default;opacity:.5}`
+  z`:host{display:block;inline-size:fit-content}[role=group]{display:flex;flex-direction:column;gap:1em}:host::part(header){display:flex;align-items:center;justify-content:space-between}:host::part(heading){font-weight:700;font-size:1.25em}button{display:flex;align-items:center;justify-content:center}button[aria-disabled]{cursor:default;opacity:.5}`
 ], Ke = { year: "numeric" }, Je = { year: "numeric", month: "long" };
-function kt(e, t) {
+function V(e, t) {
   return (t.year - e.year) * 12 + t.month - e.month;
 }
-const Ot = (e, t) => (e = t === 12 ? new H(e.year, 1) : e, {
+const kt = (e, t) => (e = t === 12 ? new K(e.year, 1) : e, {
   start: e,
   end: e.add({ months: t - 1 })
 });
+function Ze({
+  pageBy: e,
+  focusedDate: t,
+  months: n,
+  max: s,
+  min: r,
+  goto: o
+}) {
+  const c = e === "single" ? 1 : n, [u, a] = rt(
+    () => kt(t.toPlainYearMonth(), n)
+  ), i = (d) => a(kt(u.start.add({ months: d }), n)), f = (d) => {
+    const l = V(u.start, d.toPlainYearMonth());
+    return l >= 0 && l < n;
+  };
+  return $(() => {
+    if (f(t))
+      return;
+    const d = V(t.toPlainYearMonth(), u.start);
+    o(t.add({ months: d }));
+  }, [u.start]), $(() => {
+    if (f(t))
+      return;
+    const d = V(u.start, t.toPlainYearMonth());
+    i(d === -1 ? -c : d === n ? c : Math.floor(d / n) * n);
+  }, [t, c, n]), {
+    page: u,
+    previous: !r || !f(r) ? () => i(-c) : void 0,
+    next: !s || !f(s) ? () => i(c) : void 0
+  };
+}
 function ht({
   months: e,
-  locale: t,
-  focusedDate: n,
-  setFocusedDate: s
+  pageBy: t,
+  locale: n,
+  focusedDate: s,
+  setFocusedDate: r
 }) {
-  const [o] = O("min"), [r] = O("max"), c = T("focusday"), u = T("change"), a = P(
-    () => z(n ?? at(), o, r),
-    [n, o, r]
-  ), [i, f] = rt(
-    () => Ot(a.toPlainYearMonth(), e)
-  ), d = (h) => {
-    const w = kt(i.start, h.toPlainYearMonth());
-    return w >= 0 && w < e;
-  };
-  ot(() => {
-    let h = i.start;
-    if (!d(a)) {
-      const w = kt(h, a.toPlainYearMonth()), K = Math.floor(w / e);
-      h = h.add({ months: K * e });
-    }
-    f(Ot(h, e));
-  }, [a, e]);
-  const l = L();
-  function m() {
-    l.current.querySelectorAll("calendar-month").forEach((h) => h.focus());
+  const [o] = P("min"), [c] = P("max"), u = C("focusday"), a = C("change"), i = T(
+    () => H(s ?? it(), o, c),
+    [s, o, c]
+  );
+  function f(h) {
+    r(h), u(S(h));
   }
-  function p(h) {
-    s(h), c(v(h));
+  const { next: d, previous: l, page: m } = Ze({
+    pageBy: t,
+    focusedDate: i,
+    months: e,
+    min: o,
+    max: c,
+    goto: f
+  }), v = _();
+  function p() {
+    v.current.querySelectorAll("calendar-month").forEach((h) => h.focus());
   }
-  const y = $(Ke, t), E = $(Je, t);
   return {
-    format: y,
-    formatVerbose: E,
-    page: i,
-    focusedDate: a,
-    dispatch: u,
+    format: L(Ke, n),
+    formatVerbose: L(Je, n),
+    page: m,
+    focusedDate: i,
+    dispatch: a,
     onFocus(h) {
-      h.stopPropagation(), p(h.detail), setTimeout(m);
+      h.stopPropagation(), f(h.detail), setTimeout(p);
     },
     min: o,
-    max: r,
-    next: r == null || !d(r) ? () => p(a.add({ months: e })) : void 0,
-    previous: o == null || !d(o) ? () => p(a.add({ months: -e })) : void 0,
-    focus: m
+    max: c,
+    next: d,
+    previous: l,
+    focus: p
   };
 }
-const Ze = _(
+const We = j(
   (e) => {
-    const [t, n] = O("value"), [s = t, o] = O("focusedDate"), r = ht({
+    const [t, n] = P("value"), [s = t, r] = P("focusedDate"), o = ht({
       ...e,
       focusedDate: s,
-      setFocusedDate: o
+      setFocusedDate: r
     });
     function c(u) {
-      n(u.detail), r.dispatch();
+      n(u.detail), o.dispatch();
     }
-    return /* @__PURE__ */ b("host", { shadowDom: !0, focus: r.focus, children: /* @__PURE__ */ b(
+    return /* @__PURE__ */ y("host", { shadowDom: !0, focus: o.focus, children: /* @__PURE__ */ y(
       ut,
       {
         ...e,
-        ...r,
+        ...o,
         type: "date",
         value: t,
         onSelect: c
@@ -1052,57 +1080,69 @@ const Ze = _(
   },
   { props: ft, styles: dt }
 );
-customElements.define("calendar-date", Ze);
-const Mt = (e, t) => D.compare(e, t) < 0 ? [e, t] : [t, e], We = _(
+customElements.define("calendar-date", We);
+const Ot = (e, t) => E.compare(e, t) < 0 ? [e, t] : [t, e], Xe = j(
   (e) => {
-    const [t, n] = _e("value"), [s = t[0], o] = O("focusedDate"), r = ht({
+    const [t, n] = _e("value"), [s = t[0], r] = P("focusedDate"), o = ht({
       ...e,
       focusedDate: s,
-      setFocusedDate: o
-    }), c = T("rangestart"), u = T("rangeend"), [a, i] = rt();
-    function f(p) {
-      r.onFocus(p), d(p);
+      setFocusedDate: r
+    }), c = C("rangestart"), u = C("rangeend"), [a, i] = P(
+      "tentative"
+    ), [f, d] = rt();
+    $(() => d(void 0), [a]);
+    function l(h) {
+      o.onFocus(h), m(h);
     }
-    function d(p) {
-      p.stopPropagation(), i((y) => y && { ...y, b: p.detail });
+    function m(h) {
+      h.stopPropagation(), a && d(h.detail);
     }
-    function l(p) {
-      const y = p.detail;
-      p.stopPropagation(), a ? (n(Mt(a.a, y)), i(void 0), u(v(y)), r.dispatch()) : (i({ a: y, b: y }), c(v(y)));
+    function v(h) {
+      const b = h.detail;
+      h.stopPropagation(), a ? (n(Ot(a, b)), i(void 0), u(S(b)), o.dispatch()) : (i(b), c(S(b)));
     }
-    const m = a ? Mt(a.a, a.b) : t;
-    return /* @__PURE__ */ b("host", { shadowDom: !0, focus: r.focus, children: /* @__PURE__ */ b(
+    const p = a ? Ot(a, f ?? a) : t;
+    return /* @__PURE__ */ y("host", { shadowDom: !0, focus: o.focus, children: /* @__PURE__ */ y(
       ut,
       {
         ...e,
-        ...r,
+        ...o,
         type: "range",
-        value: m,
-        onFocus: f,
-        onHover: d,
-        onSelect: l
+        value: p,
+        onFocus: l,
+        onHover: m,
+        onSelect: v
       }
     ) });
   },
-  { props: ft, styles: dt }
+  {
+    props: {
+      ...ft,
+      tentative: {
+        type: String,
+        value: ""
+      }
+    },
+    styles: dt
+  }
 );
-customElements.define("calendar-range", We);
-const Xe = _(
+customElements.define("calendar-range", Xe);
+const Ge = j(
   (e) => {
-    const [t, n] = je("value"), [s = t[0], o] = O("focusedDate"), r = ht({
+    const [t, n] = je("value"), [s = t[0], r] = P("focusedDate"), o = ht({
       ...e,
       focusedDate: s,
-      setFocusedDate: o
+      setFocusedDate: r
     });
     function c(u) {
       const a = [...t], i = t.findIndex((f) => f.equals(u.detail));
-      i < 0 ? a.push(u.detail) : a.splice(i, 1), n(a), r.dispatch();
+      i < 0 ? a.push(u.detail) : a.splice(i, 1), n(a), o.dispatch();
     }
-    return /* @__PURE__ */ b("host", { shadowDom: !0, focus: r.focus, children: /* @__PURE__ */ b(
+    return /* @__PURE__ */ y("host", { shadowDom: !0, focus: o.focus, children: /* @__PURE__ */ y(
       ut,
       {
         ...e,
-        ...r,
+        ...o,
         type: "multi",
         value: t,
         onSelect: c
@@ -1111,7 +1151,7 @@ const Xe = _(
   },
   { props: ft, styles: dt }
 );
-customElements.define("calendar-multi", Xe);
+customElements.define("calendar-multi", Ge);
 
 const globalFn = () => { };
 
@@ -1119,4 +1159,4 @@ const globalScripts = globalFn;
 
 exports.globalScripts = globalScripts;
 
-//# sourceMappingURL=app-globals-53e231d9.js.map
+//# sourceMappingURL=app-globals-b11284b9.js.map