cally 0.5.2 → 0.6.0

package/dist/cally.d.ts

@@ -79,6 +79,37 @@ export declare const CalendarMonth: Atomico<{
 
 export declare type CalendarMonthProps = ComponentProps<typeof CalendarMonth>;
 
+export declare const CalendarMulti: Atomico<{
+    months: number;
+    value: string;
+    firstDayOfWeek: DaysOfWeek;
+    isDateDisallowed: (date: Date) => boolean;
+    min: string;
+    max: string;
+    locale: string | undefined;
+    focusedDate: string | undefined;
+    onFocusDay: (event: CustomEvent<Date>) => any;
+    showOutsideDays: boolean;
+    onChange: (event: Event) => any;
+} & {}, {
+    months: number;
+    value: string;
+    firstDayOfWeek: DaysOfWeek;
+    isDateDisallowed: (date: Date) => boolean;
+    min: string;
+    max: string;
+    locale: string | undefined;
+    focusedDate: string | undefined;
+    onFocusDay: (event: CustomEvent<Date>) => any;
+    showOutsideDays: boolean;
+    onChange: (event: Event) => any;
+} & {}, {
+    new (): HTMLElement;
+    prototype: HTMLElement;
+}>;
+
+export declare type CalendarMultiProps = ComponentProps<typeof CalendarMulti>;
+
 export declare const CalendarRange: Atomico<{
     months: number;
     value: string;

package/dist/cally.js

@@ -29,38 +29,38 @@ class te {
     return this.#e.add(t), () => this.#e.delete(t);
   }
 }
-const Ct = (e) => new te(e), Q = Symbol.for("atomico.hooks");
-globalThis[Q] = globalThis[Q] || {};
-let N = globalThis[Q];
-const ee = Symbol.for("Atomico.suspense"), Pt = Symbol.for("Atomico.effect"), ne = Symbol.for("Atomico.layoutEffect"), Nt = Symbol.for("Atomico.insertionEffect"), k = (e, t, n) => {
-  const { i: s, hooks: o } = N.c, r = o[s] = o[s] || {};
-  return r.value = e(r.value), r.effect = t, r.tag = n, N.c.i++, o[s].value;
-}, se = (e) => k((t = Ct(e)) => t), $ = () => k((e = Ct(N.c.host)) => e), kt = () => N.c.update, oe = (e, t, n = 0) => {
+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, u) => {
+  const r = () => o, c = (i, f) => {
     for (const d in s) {
       const l = s[d];
-      l.effect && l.tag === i && (l.value = l.effect(l.value, u));
+      l.effect && l.tag === i && (l.value = l.effect(l.value, f));
     }
   };
   return { load: (i) => {
-    N.c = { host: t, hooks: s, update: e, i: 0, id: n };
-    let u;
+    k.c = { host: t, hooks: s, update: e, i: 0, id: n };
+    let f;
     try {
-      o = !1, u = i();
+      o = !1, f = i();
     } catch (d) {
       if (d !== ee)
         throw d;
       o = !0;
     } finally {
-      N.c = null;
+      k.c = null;
     }
-    return u;
-  }, cleanEffects: (i) => (c(Nt, i), () => (c(ne, i), () => {
-    c(Pt, i);
+    return f;
+  }, cleanEffects: (i) => (c(Rt, i), () => (c(ne, i), () => {
+    c(Ft, i);
   })), isSuspense: r };
-}, O = Symbol.for;
-function Ot(e, t) {
+}, A = Symbol.for;
+function $t(e, t) {
   const n = e.length;
   if (n !== t.length)
     return !1;
@@ -71,27 +71,27 @@ function Ot(e, t) {
   }
   return !0;
 }
-const T = (e) => typeof e == "function", R = (e) => typeof e == "object", { isArray: re } = Array, V = (e, t) => (t ? e instanceof HTMLStyleElement : !0) && "hydrate" in (e?.dataset || {});
-function At(e, t) {
+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 Ut(e, t) {
   let n;
   const s = (o) => {
     let { length: r } = o;
     for (let c = 0; c < r; c++) {
-      const f = o[c];
-      if (f && Array.isArray(f))
-        s(f);
+      const u = o[c];
+      if (u && Array.isArray(u))
+        s(u);
       else {
-        const a = typeof f;
-        if (f == null || a === "function" || a === "boolean")
+        const a = typeof u;
+        if (u == null || a === "function" || a === "boolean")
           continue;
-        a === "string" || a === "number" ? (n == null && (n = ""), n += f) : (n != null && (t(n), n = null), t(f));
+        a === "string" || a === "number" ? (n == null && (n = ""), n += u) : (n != null && (t(n), n = null), t(u));
       }
     }
   };
   s(e), n != null && t(n);
 }
-const Rt = (e, t, n) => (e.addEventListener(t, n), () => e.removeEventListener(t, n));
-class Mt {
+const Lt = (e, t, n) => (e.addEventListener(t, n), () => e.removeEventListener(t, n));
+class _t {
   /**
    *
    * @param {HTMLElement} target
@@ -102,19 +102,19 @@ class Mt {
     this.message = n, this.target = t, this.value = s;
   }
 }
-class Ft extends Mt {
+class jt extends _t {
 }
-class ce extends Mt {
+class ce extends _t {
 }
-const _ = "Custom", ie = null, ae = { true: 1, "": 1, 1: 1 };
+const q = "Custom", ae = null, ie = { true: 1, "": 1, 1: 1 };
 function le(e, t, n, s, o) {
   const {
     type: r,
     reflect: c,
-    event: f,
+    event: u,
     value: a,
     attr: i = ue(t)
-  } = n?.name != _ && R(n) && n != ie ? n : { type: n }, u = r?.name === _ && r.map, d = a != null ? r == Function || !T(a) ? () => a : a : null;
+  } = 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;
   Object.defineProperty(e, t, {
     configurable: !0,
     /**
@@ -124,17 +124,17 @@ 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 } = (u ? he : me)(
+      const { error: p, value: y } = (f ? he : me)(
         r,
         l
       );
       if (p && y != null)
-        throw new Ft(
+        throw new jt(
           this,
           `The value defined for prop '${t}' must be of type '${r.name}'`,
           y
         );
-      m != y && (this._props[t] = y ?? void 0, this.update(), f && It(this, f), this.updated.then(() => {
+      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);
       }));
     },
@@ -146,10 +146,10 @@ function le(e, t, n, s, o) {
     }
   }), d && (o[t] = d()), s[i] = { prop: t, type: r };
 }
-const It = (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 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(
   n,
-  t?.name === _ && t?.serialize ? t?.serialize(s) : R(s) ? JSON.stringify(s) : t == Boolean ? "" : s
-), de = (e, t) => e == Boolean ? !!ae[t] : e == Number ? Number(t) : e == String ? t : e == Array || e == Object ? JSON.parse(t) : e.name == _ ? t : (
+  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 : (
   // TODO: If when defining reflect the prop can also be of type string?
   new e(t)
 ), he = ({ map: e }, t) => {
@@ -172,32 +172,32 @@ let ye = 0;
 const pe = (e) => {
   const t = (e?.dataset || {})?.hydrate || "";
   return t || "c" + ye++;
-}, j = (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: f } = o ? e : t;
+}, _ = (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 {
     constructor() {
       super(), this._setup(), this._render = () => e({ ...this._props });
-      for (const u in s)
-        this[u] = s[u];
+      for (const f in s)
+        this[f] = s[f];
     }
     /**
      * @returns {import("core").Sheets[]}
      */
     static get styles() {
-      return [super.styles, f];
+      return [super.styles, u];
     }
     async _setup() {
       if (this._props)
         return;
       this._props = {};
-      let u, d;
+      let f, d;
       this.mounted = new Promise(
         (E) => this.mount = () => {
-          E(), u != this.parentNode && (d != u ? this.unmounted.then(this.update) : this.update()), u = this.parentNode;
+          E(), f != this.parentNode && (d != f ? this.unmounted.then(this.update) : this.update()), f = this.parentNode;
         }
       ), this.unmounted = new Promise(
         (E) => this.unmount = () => {
-          E(), (u != this.parentNode || !this.isConnected) && (l.cleanEffects(!0)()(), d = this.parentNode, u = null);
+          E(), (f != this.parentNode || !this.isConnected) && (l.cleanEffects(!0)()(), d = this.parentNode, f = null);
         }
       ), this.symbolId = this.symbolId || Symbol(), this.symbolIdParent = Symbol();
       const l = oe(
@@ -206,7 +206,7 @@ const pe = (e) => {
         pe(this)
       );
       let m, p = !0;
-      const y = V(this);
+      const y = tt(this);
       this.update = () => (m || (m = !0, this.updated = (this.updated || this.mounted).then(() => {
         try {
           const E = l.load(this._render), h = l.cleanEffects();
@@ -236,31 +236,31 @@ const pe = (e) => {
      * @param {(string|null)} oldValue
      * @param {(string|null)} value
      */
-    attributeChangedCallback(u, d, l) {
-      if (n[u]) {
-        if (u === this._ignoreAttr || d === l)
+    attributeChangedCallback(f, d, l) {
+      if (n[f]) {
+        if (f === this._ignoreAttr || d === l)
           return;
-        const { prop: m, type: p } = n[u];
+        const { prop: m, type: p } = n[f];
         try {
           this[m] = de(p, l);
         } catch {
           throw new ce(
             this,
-            `The value defined as attr '${u}' cannot be parsed by type '${p.name}'`,
+            `The value defined as attr '${f}' cannot be parsed by type '${p.name}'`,
             l
           );
         }
       } else
-        super.attributeChangedCallback(u, d, l);
+        super.attributeChangedCallback(f, d, l);
     }
     static get props() {
       return { ...super.props, ...c };
     }
     static get observedAttributes() {
-      const u = super.observedAttributes || [];
+      const f = super.observedAttributes || [];
       for (const d in c)
         le(this.prototype, d, c[d], n, s);
-      return Object.keys(n).concat(u);
+      return Object.keys(n).concat(f);
     }
   }
   return a;
@@ -269,26 +269,26 @@ function be(e) {
   const { styles: t } = e.constructor, { shadowRoot: n } = e;
   if (n && t.length) {
     const s = [];
-    At(t, (o) => {
+    Ut(t, (o) => {
       o && (o instanceof Element ? n.appendChild(o.cloneNode(!0)) : s.push(o));
     }), s.length && (n.adoptedStyleSheets = s);
   }
 }
-const Ut = (e) => (t, n) => {
-  k(
+const qt = (e) => (t, n) => {
+  M(
     /**
      * Clean the effect hook
      * @type {import("internal/hooks.js").CollectorEffect}
      */
-    ([s, o] = []) => ((o || !o) && (o && Ot(o, n) ? s = s || !0 : (T(s) && s(), s = null)), [s, n]),
+    ([s, o] = []) => ((o || !o) && (o && $t(o, n) ? s = s || !0 : (C(s) && s(), s = null)), [s, n]),
     /**
      * @returns {any}
      */
-    ([s, o], r) => r ? (T(s) && s(), []) : [s || t(), o],
+    ([s, o], r) => r ? (C(s) && s(), []) : [s || t(), o],
     e
   );
-}, ot = Ut(Pt), ge = Ut(Nt);
-class $t extends Array {
+}, ot = qt(Ft), ge = qt(Rt);
+class xt extends Array {
   /**
    *
    * @param {any} initialState
@@ -319,40 +319,40 @@ class $t extends Array {
   // }
 }
 const rt = (e) => {
-  const t = kt();
-  return k(
-    (n = new $t(e, (s, o, r) => {
-      s = T(s) ? s(o[0]) : s, s !== o[0] && (o[0] = s, r || t());
+  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());
     })) => n
   );
 }, P = (e, t) => {
-  const [n] = k(([s, o, r = 0] = []) => ((!o || o && !Ot(o, t)) && (s = e()), [s, t, r]));
+  const [n] = M(([s, o, r = 0] = []) => ((!o || o && !$t(o, t)) && (s = e()), [s, t, r]));
   return n;
-}, Lt = (e) => {
-  const { current: t } = $();
+}, ct = (e) => {
+  const { current: t } = L();
   if (!(e in t))
-    throw new Ft(
+    throw new jt(
       t,
       `For useProp("${e}"), the prop does not exist on the host.`,
       e
     );
-  return k(
-    (n = new $t(t[e], (s, o) => {
-      s = T(s) ? s(t[e]) : s, t[e] = s;
+  return M(
+    (n = new xt(t[e], (s, o) => {
+      s = C(s) ? s(t[e]) : s, t[e] = s;
     })) => (n[0] = t[e], n)
   );
-}, C = (e, t = {}) => {
-  const n = $();
-  return n[e] || (n[e] = (s = t.detail) => It(n.current, {
+}, T = (e, t = {}) => {
+  const n = L();
+  return n[e] || (n[e] = (s = t.detail) => Yt(n.current, {
     type: e,
     ...t,
     detail: s
   })), n[e];
-}, tt = O("atomico/options");
-globalThis[tt] = globalThis[tt] || {
+}, et = A("atomico/options");
+globalThis[et] = globalThis[et] || {
   sheet: !!document.adoptedStyleSheets
 };
-const _t = globalThis[tt], Ee = {
+const Bt = globalThis[et], Ee = {
   checked: 1,
   value: 1,
   selected: 1
@@ -372,18 +372,18 @@ const _t = globalThis[tt], Ee = {
   cloneNode: 1,
   children: 1,
   key: 1
-}, L = {}, et = [];
-class nt extends Text {
+}, Y = {}, nt = [];
+class st extends Text {
 }
-const we = O("atomico/id"), M = O("atomico/type"), J = O("atomico/ref"), jt = O("atomico/vnode"), ve = () => {
+const ve = A("atomico/id"), I = A("atomico/type"), Z = A("atomico/ref"), zt = A("atomico/vnode"), we = () => {
 };
-function Te(e, t, n) {
-  return xt(this, e, t, n);
+function Ce(e, t, n) {
+  return Kt(this, e, t, n);
 }
-const Yt = (e, t, ...n) => {
-  const s = t || L;
+const Ht = (e, t, ...n) => {
+  const s = t || Y;
   let { children: o } = s;
-  if (o = o ?? (n.length ? n : et), e === ve)
+  if (o = o ?? (n.length ? n : nt), e === we)
     return o;
   const r = e ? e instanceof Node ? 1 : (
     //@ts-ignore
@@ -391,11 +391,11 @@ const Yt = (e, t, ...n) => {
   ) : 0;
   if (r === !1 && e instanceof Function)
     return e(
-      o != et ? { children: o, ...s } : s
+      o != nt ? { children: o, ...s } : s
     );
-  const c = _t.render || Te;
+  const c = Bt.render || Ce;
   return {
-    [M]: jt,
+    [I]: zt,
     type: e,
     props: s,
     children: o,
@@ -414,24 +414,24 @@ const Yt = (e, t, ...n) => {
     render: c
   };
 };
-function xt(e, t, n = we, s, o) {
+function Kt(e, t, n = ve, s, o) {
   let r;
-  if (t && t[n] && t[n].vnode == e || e[M] != jt)
+  if (t && t[n] && t[n].vnode == e || e[I] != zt)
     return t;
-  (e || !t) && (o = o || e.type == "svg", r = e.type != "host" && (e.raw == 1 ? (t && e.clone ? t[J] : t) != e.type : e.raw == 2 ? !(t instanceof e.type) : t ? t[J] || t.localName != e.type : !t), r && e.type != null && (e.raw == 1 && e.clone ? (s = !0, t = e.type.cloneNode(!0), t[J] = e.type) : t = e.raw == 1 ? e.type : e.raw == 2 ? new e.type() : o ? document.createElementNS(
+  (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(
     "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] : L, { vnode: f = L, cycle: a = 0 } = c;
-  let { fragment: i, handlers: u } = c;
-  const { children: d = et, props: l = L } = f;
-  if (u = r ? {} : u || {}, e.static && !r)
+  const c = t[n] ? t[n] : Y, { vnode: u = Y, 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)
     return t;
   if (e.shadow && !t.shadowRoot && // @ts-ignore
-  t.attachShadow({ mode: "open", ...e.shadow }), e.props != l && Ne(t, l, e.props, u, o), e.children !== d) {
+  t.attachShadow({ mode: "open", ...e.shadow }), e.props != l && Ne(t, l, e.props, f, o), e.children !== d) {
     const m = e.shadow ? t.shadowRoot : t;
     i = Pe(
       e.children,
@@ -446,16 +446,16 @@ function xt(e, t, n = we, s, o) {
       o && e.type == "foreignObject" ? !1 : o
     );
   }
-  return t[n] = { vnode: e, handlers: u, fragment: i, cycle: a + 1 }, t;
+  return t[n] = { vnode: e, handlers: f, fragment: i, cycle: a + 1 }, t;
 }
-function Ce(e, t) {
-  const n = new nt(""), s = new nt("");
+function Te(e, t) {
+  const n = new st(""), s = new st("");
   let o;
   if (e[t ? "prepend" : "append"](n), t) {
     let { lastElementChild: r } = e;
     for (; r; ) {
       const { previousElementSibling: c } = r;
-      if (V(r, !0) && !V(c, !0)) {
+      if (tt(r, !0) && !tt(c, !0)) {
         o = r;
         break;
       }
@@ -469,63 +469,63 @@ function Ce(e, t) {
 }
 function Pe(e, t, n, s, o, r) {
   e = e == null ? null : re(e) ? e : [e];
-  const c = t || Ce(n, o), { markStart: f, markEnd: a, keyes: i } = c;
-  let u;
+  const c = t || Te(n, o), { markStart: u, markEnd: a, keyes: i } = c;
+  let f;
   const d = i && /* @__PURE__ */ new Set();
-  let l = f;
-  if (e && At(e, (m) => {
-    if (typeof m == "object" && !m[M])
+  let l = u;
+  if (e && Ut(e, (m) => {
+    if (typeof m == "object" && !m[I])
       return;
-    const p = m[M] && m.key, y = i && p != null && i.get(p);
+    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;
-    if (m[M])
-      h = xt(m, E, s, o, r);
+    if (m[I])
+      h = Kt(m, E, s, o, r);
     else {
-      const v = m + "";
-      !(h instanceof Text) || h instanceof nt ? h = new Text(v) : h.data != v && (h.data = v);
+      const w = m + "";
+      !(h instanceof Text) || h instanceof st ? h = new Text(w) : h.data != w && (h.data = w);
     }
-    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 && (u = u || /* @__PURE__ */ new Map(), u.set(p, h));
+    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));
   }), l = l == a ? a : l.nextSibling, t && l != a)
     for (; l != a; ) {
       const m = l;
       l = l.nextSibling, m.remove();
     }
-  return d && d.forEach((m) => m.remove()), c.keyes = u, c;
+  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) && yt(e, r, t[r], null, o, s);
+    !(r in n) && St(e, r, t[r], null, o, s);
   for (const r in n)
-    yt(e, r, t[r], n[r], o, s);
+    St(e, r, t[r], n[r], o, s);
 }
-function yt(e, t, n, s, o, r) {
+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" && (T(s) || T(n)))
+    if (t[0] == "o" && t[1] == "n" && (C(s) || C(n)))
       ke(e, t.slice(2), s, r);
     else if (t == "ref")
-      s && (T(s) ? s(e) : s.current = e);
+      s && (C(s) ? s(e) : s.current = e);
     else if (t == "style") {
       const { style: c } = e;
       n = n || "", s = s || "";
-      const f = R(n), a = R(s);
-      if (f)
+      const u = R(n), a = R(s);
+      if (u)
         for (const i in n)
           if (a)
-            !(i in s) && pt(c, i, null);
+            !(i in s) && vt(c, i, null);
           else
             break;
       if (a)
         for (const i in s) {
-          const u = s[i];
-          f && n[i] === u || pt(c, i, u);
+          const f = s[i];
+          u && n[i] === f || vt(c, i, f);
         }
       else
         c.cssText = s;
     } else {
       const c = t[0] == "$" ? t.slice(1) : t;
-      c === t && (!o && !De[t] && t in e || T(s) || T(n)) ? e[t] = s ?? "" : s == null ? e.removeAttribute(c) : e.setAttribute(
+      c === t && (!o && !De[t] && t in e || C(s) || C(n)) ? e[t] = s ?? "" : s == null ? e.removeAttribute(c) : e.setAttribute(
         c,
         R(s) ? JSON.stringify(s) : s
       );
@@ -541,20 +541,20 @@ function ke(e, t, n, s) {
   } else
     s[t] && (e.removeEventListener(t, s), delete s[t]);
 }
-function pt(e, t, n) {
+function vt(e, t, n) {
   let s = "setProperty";
   n == null && (s = "removeProperty", n = null), ~t.indexOf("-") ? e[s](t, n) : e[t] = n;
 }
-const bt = {};
-function Y(e, ...t) {
+const wt = {};
+function B(e, ...t) {
   const n = (e.raw || e).reduce(
     (s, o, r) => s + o + (t[r] || ""),
     ""
   );
-  return bt[n] = bt[n] || Oe(n);
+  return wt[n] = wt[n] || Oe(n);
 }
 function Oe(e) {
-  if (_t.sheet) {
+  if (Bt.sheet) {
     const t = new CSSStyleSheet();
     return t.replaceSync(e), t;
   } else {
@@ -562,10 +562,10 @@ function Oe(e) {
     return t.textContent = e, t;
   }
 }
-const Ae = Yt("host", { style: "display: contents" }), Z = O("atomico/context"), Re = (e, t) => {
-  const n = $();
+const Me = Ht("host", { style: "display: contents" }), W = A("atomico/context"), Ae = (e, t) => {
+  const n = L();
   ge(
-    () => Rt(
+    () => Lt(
       n.current,
       "ConnectContext",
       /**
@@ -577,8 +577,8 @@ const Ae = Yt("host", { style: "display: contents" }), Z = O("atomico/context"),
     ),
     [e]
   );
-}, Me = (e) => {
-  const t = C("ConnectContext", {
+}, Fe = (e) => {
+  const t = T("ConnectContext", {
     bubbles: !0,
     composed: !0
   }), n = () => {
@@ -593,21 +593,21 @@ const Ae = Yt("host", { style: "display: contents" }), Z = O("atomico/context"),
     n
   );
   return ot(() => {
-    s || (e[Z] || (e[Z] = customElements.whenDefined(
+    s || (e[W] || (e[W] = customElements.whenDefined(
       new e().localName
-    )), e[Z].then(
+    )), e[W].then(
       () => o(n)
     ));
   }, [e]), s;
-}, Fe = (e) => {
-  const t = Me(e), n = kt();
+}, Re = (e) => {
+  const t = Fe(e), n = It();
   return ot(() => {
     if (t)
-      return Rt(t, "UpdatedValue", n);
+      return Lt(t, "UpdatedValue", n);
   }, [t]), (t || e).value;
 }, Ie = (e) => {
-  const t = j(
-    () => (Re(t, $().current), Ae),
+  const t = _(
+    () => (Ae(t, L().current), Me),
     {
       props: {
         value: {
@@ -619,39 +619,39 @@ const Ae = Yt("host", { style: "display: contents" }), Z = O("atomico/context"),
     }
   );
   return t.value = e, t;
-}, b = (e, t, n) => (t == null ? t = { key: n } : t.key = n, Yt(e, t)), F = b, Bt = Y`*,*:before,*:after{box-sizing:border-box}button{padding:0;touch-action:manipulation;cursor:pointer;user-select:none}`, zt = Y`.vh{position:absolute;transform:scale(0)}`;
-function ct() {
+}, b = (e, t, n) => (t == null ? t = { key: n } : t.key = n, Ht(e, t)), $ = 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());
 }
 function it(e, t = 0) {
-  const n = w(e), s = n.getUTCDay(), o = (s < t ? 7 : 0) + s - t;
+  const n = v(e), s = n.getUTCDay(), o = (s < t ? 7 : 0) + s - t;
   return n.setUTCDate(n.getUTCDate() - o), D.from(n);
 }
-function qt(e, t = 0) {
+function Wt(e, t = 0) {
   return it(e, t).add({ days: 6 });
 }
-function Ht(e) {
+function Xt(e) {
   return D.from(new Date(Date.UTC(e.year, e.month, 0)));
 }
-function x(e, t, n) {
+function z(e, t, n) {
   return t && D.compare(e, t) < 0 ? t : n && D.compare(e, n) > 0 ? n : e;
 }
-const Ue = { days: 1 };
-function $e(e, t = 0) {
+const $e = { days: 1 };
+function Ue(e, t = 0) {
   let n = it(e.toPlainDate(), t);
-  const s = qt(Ht(e), t), o = [];
+  const s = Wt(Xt(e), t), o = [];
   for (; D.compare(n, s) < 0; ) {
     const r = [];
     for (let c = 0; c < 7; c++)
-      r.push(n), n = n.add(Ue);
+      r.push(n), n = n.add($e);
     o.push(r);
   }
   return o;
 }
-function w(e) {
+function v(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])$/, W = (e, t) => e.toString().padStart(t, "0");
+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 {
   constructor(t, n, s) {
     this.year = t, this.month = n, this.day = s;
@@ -660,19 +660,19 @@ 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 = w(this);
+    const n = v(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(w({ year: s, month: o, day: 1 }));
-    return x(D.from(n), r, Ht(r));
+    const r = D.from(v({ year: s, month: o, day: 1 }));
+    return z(D.from(n), r, Xt(r));
   }
   toString() {
-    return `${W(this.year, 4)}-${W(this.month, 2)}-${W(this.day, 2)}`;
+    return `${X(this.year, 4)}-${X(this.month, 2)}-${X(this.day, 2)}`;
   }
   toPlainYearMonth() {
-    return new B(this.year, this.month);
+    return new H(this.year, this.month);
   }
   equals(t) {
     return D.compare(this, t) === 0;
@@ -699,13 +699,13 @@ class D {
     );
   }
 }
-class B {
+class H {
   constructor(t, n) {
     this.year = t, this.month = n;
   }
   add(t) {
-    const n = w(this), s = (t.months ?? 0) + (t.years ?? 0) * 12;
-    return n.setUTCMonth(n.getUTCMonth() + s), new B(n.getUTCFullYear(), n.getUTCMonth() + 1);
+    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);
   }
   equals(t) {
     return this.year === t.year && this.month === t.month;
@@ -714,28 +714,34 @@ class B {
     return new D(this.year, this.month, 1);
   }
 }
-function st(e, t) {
+function x(e, t) {
   if (t)
     try {
       return e.from(t);
     } catch {
     }
 }
-function I(e) {
-  const [t, n] = Lt(e);
-  return [P(() => st(D, t), [t]), (r) => n(r.toString())];
+function O(e) {
+  const [t, n] = ct(e);
+  return [P(() => x(D, t), [t]), (r) => n(r.toString())];
 }
 function _e(e) {
-  if (e) {
-    const [t, n] = e.split("/"), s = st(D, t), o = st(D, n);
-    if (s && o)
-      return [s, o];
-  }
-  return [];
+  const [t = "", n] = ct(e);
+  return [P(() => {
+    const [r, c] = t.split("/"), u = x(D, r), a = x(D, c);
+    return u && a ? [u, a] : [];
+  }, [t]), (r) => n(`${r[0]}/${r[1]}`)];
 }
 function je(e) {
-  const [t, n] = Lt(e);
-  return [P(() => _e(t), [t]), (r) => n(`${r[0]}/${r[1]}`)];
+  const [t = "", n] = ct(e);
+  return [P(() => {
+    const r = [];
+    for (const c of t.trim().split(/\s+/)) {
+      const u = x(D, c);
+      u && r.push(u);
+    }
+    return r;
+  }, [t]), (r) => n(r.join(" "))];
 }
 function U(e, t) {
   return P(
@@ -743,45 +749,45 @@ function U(e, t) {
     [t, e]
   );
 }
-function gt(e, t, n) {
+function Ct(e, t, n) {
   const s = U(e, n);
   return P(() => {
     const o = [], r = /* @__PURE__ */ new Date();
     for (var c = 0; c < 7; c++) {
-      const f = (r.getDay() - t + 7) % 7;
-      o[f] = s.format(r), r.setDate(r.getDate() + 1);
+      const u = (r.getDay() - t + 7) % 7;
+      o[u] = s.format(r), r.setDate(r.getDate() + 1);
     }
     return o;
   }, [t, s]);
 }
-const Et = (e, t, n) => x(e, t, n) === e, Dt = (e) => e.target.matches(":dir(ltr)"), Ye = { month: "long", day: "numeric" }, xe = { month: "long" }, Be = { weekday: "narrow" }, ze = { weekday: "long" }, X = { bubbles: !0 };
-function qe({ props: e, context: t }) {
+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 };
+function ze({ props: e, context: t }) {
   const { offset: n } = e, {
     firstDayOfWeek: s,
     isDateDisallowed: o,
     min: r,
     max: c,
-    page: f,
+    page: u,
     locale: a,
     focusedDate: i
-  } = t, u = ct(), d = gt(ze, s, a), l = gt(Be, s, a), m = U(Ye, a), p = U(xe, a), y = P(
-    () => f.start.add({ months: n }),
-    [f, n]
+  } = t, f = at(), d = Ct(Be, s, a), l = Ct(xe, s, a), m = U(Ye, a), p = U(qe, a), y = P(
+    () => u.start.add({ months: n }),
+    [u, n]
   ), E = P(
-    () => $e(y, s),
+    () => Ue(y, s),
     [y, s]
-  ), h = C("focusday", X), v = C("selectday", X), z = C("hoverday", X);
-  function lt(g) {
-    h(x(g, r, c));
+  ), h = T("focusday", G), w = T("selectday", G), K = T("hoverday", G);
+  function mt(g) {
+    h(z(g, r, c));
   }
-  function Xt(g) {
+  function Gt(g) {
     let S;
     switch (g.key) {
       case "ArrowRight":
-        S = i.add({ days: Dt(g) ? 1 : -1 });
+        S = i.add({ days: Pt(g) ? 1 : -1 });
         break;
       case "ArrowLeft":
-        S = i.add({ days: Dt(g) ? -1 : 1 });
+        S = i.add({ days: Pt(g) ? -1 : 1 });
         break;
       case "ArrowDown":
         S = i.add({ days: 7 });
@@ -799,38 +805,39 @@ function qe({ props: e, context: t }) {
         S = it(i, s);
         break;
       case "End":
-        S = qt(i, s);
+        S = Wt(i, s);
         break;
       default:
         return;
     }
-    lt(S), g.preventDefault();
+    mt(S), g.preventDefault();
   }
-  function Gt(g) {
+  function Qt(g) {
     const S = y.equals(g);
-    if (!S && !t.showOutsideDays)
+    if (!t.showOutsideDays && !S)
       return;
-    const Qt = g.equals(i), Vt = g.equals(u), ut = w(g), q = o?.(ut), ft = !Et(g, r, c);
-    let dt = "", A;
-    if ("highlightedRange" in t) {
-      const [H, K] = t.highlightedRange, ht = H?.equals(g), mt = K?.equals(g);
-      A = H && K && Et(g, H, K), dt = `${ht ? "range-start" : ""} ${mt ? "range-end" : ""} ${A && !ht && !mt ? "range-inner" : ""}`;
+    const Vt = g.equals(i), yt = g.equals(f), pt = v(g), j = o?.(pt), bt = !Tt(g, r, 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" : ""}`;
     } else
-      A = t.value?.equals(g);
+      t.type === "multi" ? N = t.value.some((F) => F.equals(g)) : N = t.value?.equals(g);
     return {
-      part: `button day ${S ? A ? "selected" : "" : "outside"} ${dt}`,
-      tabindex: S && Qt ? 0 : -1,
-      disabled: ft,
-      "aria-disabled": q ? "true" : void 0,
-      "aria-pressed": S && A,
-      "aria-current": Vt ? "date" : void 0,
-      "aria-label": m.format(ut),
-      onkeydown: Xt,
+      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,
+      disabled: bt,
+      "aria-disabled": j ? "true" : void 0,
+      "aria-pressed": S && N,
+      "aria-current": yt ? "date" : void 0,
+      "aria-label": m.format(pt),
+      onkeydown: Gt,
       onclick() {
-        q || v(g), lt(g);
+        j || w(g), mt(g);
       },
       onmouseover() {
-        !q && !ft && z(g);
+        !j && !bt && K(g);
       }
     };
   }
@@ -840,32 +847,33 @@ function qe({ props: e, context: t }) {
     daysLong: d,
     daysShort: l,
     formatter: p,
-    getDayProps: Gt
+    getDayProps: Qt
   };
 }
-const G = ct(), at = Ie({
+const Q = at(), lt = Ie({
+  type: "date",
   firstDayOfWeek: 1,
   isDateDisallowed: () => !1,
-  focusedDate: G,
-  page: { start: G.toPlainYearMonth(), end: G.toPlainYearMonth() }
+  focusedDate: Q,
+  page: { start: Q.toPlainYearMonth(), end: Q.toPlainYearMonth() }
 });
-customElements.define("calendar-month-ctx", at);
-const He = j(
+customElements.define("calendar-month-ctx", lt);
+const He = _(
   (e) => {
-    const t = Fe(at), n = se(), s = qe({ props: e, context: t });
+    const t = Re(lt), n = se(), s = ze({ props: e, context: t });
     function o() {
       n.current.querySelector("button[tabindex='0']")?.focus();
     }
-    return /* @__PURE__ */ F("host", { shadowDom: !0, focus: o, children: [
-      /* @__PURE__ */ b("div", { id: "h", part: "heading", children: s.formatter.format(w(s.yearMonth)) }),
-      /* @__PURE__ */ F("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__ */ F("th", { part: "th", scope: "col", children: [
+    return /* @__PURE__ */ $("host", { shadowDom: !0, focus: o, children: [
+      /* @__PURE__ */ b("div", { id: "h", part: "heading", children: s.formatter.format(v(s.yearMonth)) }),
+      /* @__PURE__ */ $("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__ */ $("th", { part: "th", scope: "col", children: [
           /* @__PURE__ */ b("span", { class: "vh", children: r }),
           /* @__PURE__ */ b("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((f, a) => {
-          const i = s.getDayProps(f);
-          return /* @__PURE__ */ b("td", { part: "td", children: i && /* @__PURE__ */ b("button", { ...i, children: f.day }) }, a);
+        /* @__PURE__ */ b("tbody", { children: s.weeks.map((r, c) => /* @__PURE__ */ b("tr", { part: "tr week", children: r.map((u, a) => {
+          const i = s.getDayProps(u);
+          return /* @__PURE__ */ b("td", { part: "td", children: i && /* @__PURE__ */ b("button", { ...i, children: u.day }) }, a);
         }) }, c)) })
       ] })
     ] });
@@ -878,14 +886,14 @@ const He = j(
       }
     },
     styles: [
-      Bt,
-      zt,
-      Y`: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)){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}`
+      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}`
     ]
   }
 );
 customElements.define("calendar-month", He);
-function St(e) {
+function Nt(e) {
   return /* @__PURE__ */ b(
     "button",
     {
@@ -896,17 +904,17 @@ function St(e) {
     }
   );
 }
-function Kt(e) {
-  const t = w(e.page.start), n = w(e.page.end);
-  return /* @__PURE__ */ F("div", { role: "group", "aria-labelledby": "h", part: "container", children: [
+function ut(e) {
+  const t = v(e.page.start), n = v(e.page.end);
+  return /* @__PURE__ */ $("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__ */ F("div", { part: "header", children: [
-      /* @__PURE__ */ b(St, { name: "previous", onclick: e.previous, children: "Previous" }),
-      /* @__PURE__ */ b("div", { part: "heading", "aria-hidden": "true", children: e.format.formatRange(t, n) }),
-      /* @__PURE__ */ b(St, { name: "next", onclick: e.next, children: "Next" })
+    /* @__PURE__ */ $("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__ */ b(
-      at,
+      lt,
       {
         value: e,
         onselectday: e.onSelect,
@@ -917,7 +925,7 @@ function Kt(e) {
     )
   ] });
 }
-const Jt = {
+const ft = {
   value: {
     type: String,
     value: ""
@@ -956,47 +964,47 @@ const Jt = {
     value: () => {
     }
   }
-}, Zt = [
-  Bt,
-  zt,
-  Y`: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}`
+}, dt = [
+  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}`
 ], Ke = { year: "numeric" }, Je = { year: "numeric", month: "long" };
-function wt(e, t) {
+function kt(e, t) {
   return (t.year - e.year) * 12 + t.month - e.month;
 }
-const vt = (e, t) => (e = t === 12 ? new B(e.year, 1) : e, {
+const Ot = (e, t) => (e = t === 12 ? new H(e.year, 1) : e, {
   start: e,
   end: e.add({ months: t - 1 })
 });
-function Wt({
+function ht({
   months: e,
   locale: t,
   focusedDate: n,
   setFocusedDate: s
 }) {
-  const [o] = I("min"), [r] = I("max"), c = C("focusday"), f = C("change"), a = P(
-    () => x(n ?? ct(), o, 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, u] = rt(
-    () => vt(a.toPlainYearMonth(), e)
+  ), [i, f] = rt(
+    () => Ot(a.toPlainYearMonth(), e)
   ), d = (h) => {
-    const v = wt(i.start, h.toPlainYearMonth());
-    return v >= 0 && v < e;
+    const w = kt(i.start, h.toPlainYearMonth());
+    return w >= 0 && w < e;
   };
   ot(() => {
     let h = i.start;
     if (!d(a)) {
-      const v = wt(h, a.toPlainYearMonth()), z = Math.floor(v / e);
-      h = h.add({ months: z * e });
+      const w = kt(h, a.toPlainYearMonth()), K = Math.floor(w / e);
+      h = h.add({ months: K * e });
     }
-    u(vt(h, e));
+    f(Ot(h, e));
   }, [a, e]);
-  const l = $();
+  const l = L();
   function m() {
     l.current.querySelectorAll("calendar-month").forEach((h) => h.focus());
   }
   function p(h) {
-    s(h), c(w(h));
+    s(h), c(v(h));
   }
   const y = U(Ke, t), E = U(Je, t);
   return {
@@ -1004,7 +1012,7 @@ function Wt({
     formatVerbose: E,
     page: i,
     focusedDate: a,
-    dispatch: f,
+    dispatch: u,
     onFocus(h) {
       h.stopPropagation(), p(h.detail), setTimeout(m);
     },
@@ -1015,37 +1023,38 @@ function Wt({
     focus: m
   };
 }
-const Ze = j(
+const Ze = _(
   (e) => {
-    const [t, n] = I("value"), [s = t, o] = I("focusedDate"), r = Wt({
+    const [t, n] = O("value"), [s = t, o] = O("focusedDate"), r = ht({
       ...e,
       focusedDate: s,
       setFocusedDate: o
     });
-    function c(f) {
-      n(f.detail), r.dispatch();
+    function c(u) {
+      n(u.detail), r.dispatch();
     }
     return /* @__PURE__ */ b("host", { shadowDom: !0, focus: r.focus, children: /* @__PURE__ */ b(
-      Kt,
+      ut,
       {
         ...e,
         ...r,
+        type: "date",
         value: t,
         onSelect: c
       }
     ) });
   },
-  { props: Jt, styles: Zt }
+  { props: ft, styles: dt }
 );
 customElements.define("calendar-date", Ze);
-const Tt = (e, t) => D.compare(e, t) < 0 ? [e, t] : [t, e], We = j(
+const Mt = (e, t) => D.compare(e, t) < 0 ? [e, t] : [t, e], We = _(
   (e) => {
-    const [t, n] = je("value"), [s = t[0], o] = I("focusedDate"), r = Wt({
+    const [t, n] = _e("value"), [s = t[0], o] = O("focusedDate"), r = ht({
       ...e,
       focusedDate: s,
       setFocusedDate: o
-    }), c = C("rangestart"), f = C("rangeend"), [a, i] = rt();
-    function u(p) {
+    }), c = T("rangestart"), u = T("rangeend"), [a, i] = rt();
+    function f(p) {
       r.onFocus(p), d(p);
     }
     function d(p) {
@@ -1053,26 +1062,53 @@ const Tt = (e, t) => D.compare(e, t) < 0 ? [e, t] : [t, e], We = j(
     }
     function l(p) {
       const y = p.detail;
-      p.stopPropagation(), a ? (n(Tt(a.a, y)), i(void 0), f(w(y)), r.dispatch()) : (i({ a: y, b: y }), c(w(y)));
+      p.stopPropagation(), a ? (n(Mt(a.a, y)), i(void 0), u(v(y)), r.dispatch()) : (i({ a: y, b: y }), c(v(y)));
     }
-    const m = a ? Tt(a.a, a.b) : t;
+    const m = a ? Mt(a.a, a.b) : t;
     return /* @__PURE__ */ b("host", { shadowDom: !0, focus: r.focus, children: /* @__PURE__ */ b(
-      Kt,
+      ut,
       {
         ...e,
         ...r,
-        highlightedRange: m,
-        onFocus: u,
+        type: "range",
+        value: m,
+        onFocus: f,
         onHover: d,
         onSelect: l
       }
     ) });
   },
-  { props: Jt, styles: Zt }
+  { props: ft, styles: dt }
 );
 customElements.define("calendar-range", We);
+const Xe = _(
+  (e) => {
+    const [t, n] = je("value"), [s = t[0], o] = O("focusedDate"), r = ht({
+      ...e,
+      focusedDate: s,
+      setFocusedDate: o
+    });
+    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();
+    }
+    return /* @__PURE__ */ b("host", { shadowDom: !0, focus: r.focus, children: /* @__PURE__ */ b(
+      ut,
+      {
+        ...e,
+        ...r,
+        type: "multi",
+        value: t,
+        onSelect: c
+      }
+    ) });
+  },
+  { props: ft, styles: dt }
+);
+customElements.define("calendar-multi", Xe);
 export {
   Ze as CalendarDate,
   He as CalendarMonth,
+  Xe as CalendarMulti,
   We as CalendarRange
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cally",
-  "version": "0.5.2",
+  "version": "0.6.0",
   "description": "small, feature-rich calendar components",
   "license": "MIT",
   "type": "module",