@speckle/ui-components 2.15.2-alpha4 → 2.15.2-alpha5

package/dist/lib.js

@@ -7,7 +7,7 @@ import { useField as xe } from "vee-validate";
 import { nanoid as ke } from "nanoid";
 import { isNullOrUndefined as gt, SourceApps as vt, getClientOperatingSystem as bt, OperatingSystem as pe } from "@speckle/shared";
 import { useResizeObserver as yt, useMutationObserver as xt, onKeyDown as kt, isClient as Ce, computedAsync as Ct } from "@vueuse/core";
-import { Listbox as wt, ListboxLabel as $t, ListboxButton as St, ListboxOptions as It, ListboxOption as Bt, TransitionRoot as _t, Dialog as Lt, TransitionChild as je, DialogPanel as Pt, Disclosure as jt, DisclosureButton as Vt, DisclosurePanel as Ot, Menu as Mt, MenuButton as At, MenuItems as Dt, MenuItem as Tt } from "@headlessui/vue";
+import { Listbox as wt, ListboxLabel as $t, ListboxButton as St, ListboxOptions as It, ListboxOption as Bt, TransitionRoot as _t, Dialog as Lt, TransitionChild as Ve, DialogPanel as Pt, Disclosure as Vt, DisclosureButton as jt, DisclosurePanel as Ot, Menu as Mt, MenuButton as At, MenuItems as Dt, MenuItem as Tt } from "@headlessui/vue";
 import { directive as Fe } from "vue-tippy";
 import Rt from "v3-infinite-loading";
 const Ft = {
@@ -141,12 +141,12 @@ const Ft = {
   },
   emits: ["click"],
   setup(e, { emit: l }) {
-    const t = e, s = H("NuxtLink"), o = H("RouterLink"), c = r(() => t.linkComponent ? t.linkComponent : t.external ? "a" : Le(s) ? s : Le(o) ? o : "a"), f = r(() => {
+    const t = e, s = H("NuxtLink"), o = H("RouterLink"), c = r(() => t.linkComponent ? t.linkComponent : t.external ? "a" : Le(s) ? s : Le(o) ? o : "a"), d = r(() => {
       if (!t.to)
         return t.submit ? "submit" : "button";
-    }), d = r(() => t.disabled || t.loading), u = r(() => t.loading ? Ze : t.iconLeft), p = r(() => {
+    }), f = r(() => t.disabled || t.loading), u = r(() => t.loading ? Ze : t.iconLeft), p = r(() => {
       const g = [];
-      if (g.push("border-2"), d.value)
+      if (g.push("border-2"), f.value)
         g.push(
           t.outlined ? "border-foreground-disabled" : "bg-foundation-disabled border-transparent"
         );
@@ -190,7 +190,7 @@ const Ft = {
     }), b = r(() => {
       const g = [];
       if (!t.text && !t.link)
-        if (d.value)
+        if (f.value)
           g.push(
             (t.outlined, "text-foreground-disabled")
           );
@@ -237,7 +237,7 @@ const Ft = {
               break;
           }
       else
-        d.value ? g.push("text-foreground-disabled") : t.color === "invert" ? g.push(
+        f.value ? g.push("text-foreground-disabled") : t.color === "invert" ? g.push(
           "text-foundation hover:text-foundation-2 dark:text-foreground dark:hover:text-foreground"
         ) : t.color === "secondary" ? g.push("text-foreground-2 hover:text-primary-focus") : t.color === "success" ? g.push("text-success") : t.color === "warning" ? g.push("text-warning") : t.color === "info" ? g.push("text-info") : t.color === "danger" ? g.push("text-danger") : g.push("text-primary hover:text-primary-focus");
       return g.join(" ");
@@ -246,7 +246,7 @@ const Ft = {
       return g.push(t.rounded ? "rounded-full" : "rounded-md"), g.join(" ");
     }), h = r(() => {
       const g = [];
-      if (!d.value)
+      if (!f.value)
         switch (t.color) {
           case "invert":
             g.push("hover:ring-4 ring-white/50");
@@ -297,19 +297,19 @@ const Ft = {
         case "base":
           return "px-3";
       }
-    }), j = r(() => {
+    }), V = r(() => {
       const g = [];
-      return t.fullWidth && g.push("w-full"), d.value && g.push("cursor-not-allowed"), g.join(" ");
+      return t.fullWidth && g.push("w-full"), f.value && g.push("cursor-not-allowed"), g.join(" ");
     }), y = r(() => {
       const g = [];
-      return !d.value && !t.link && !t.text && g.push("active:scale-[0.97]"), !d.value && t.link && g.push(
+      return !f.value && !t.link && !t.text && g.push("active:scale-[0.97]"), !f.value && t.link && g.push(
         "underline decoration-transparent decoration-2 underline-offset-4	hover:decoration-inherit"
       ), g.join(" ");
     }), w = r(() => {
       const g = t.link || t.text;
       return [
         "transition inline-flex justify-center items-center space-x-2 outline-none select-none",
-        j.value,
+        V.value,
         k.value,
         b.value,
         g ? "" : p.value,
@@ -340,7 +340,7 @@ const Ft = {
       }
       return g.join(" ");
     }), F = (g) => {
-      if (d.value) {
+      if (f.value) {
         g.preventDefault(), g.stopPropagation(), g.stopImmediatePropagation();
         return;
       }
@@ -349,10 +349,10 @@ const Ft = {
     return (g, R) => (a(), P(H(e.to ? c.value : "button"), {
       href: e.to,
       to: e.to,
-      type: f.value,
+      type: d.value,
       external: e.external,
       class: x(w.value),
-      disabled: d.value,
+      disabled: f.value,
       role: "button",
       onClick: F
     }, {
@@ -482,16 +482,16 @@ const Ut = {
   setup(e, { emit: l }) {
     const t = e, s = r(
       () => {
-        var f, d;
-        return !((f = t.notification) != null && f.description) && !((d = t.notification) != null && d.cta);
+        var d, f;
+        return !((d = t.notification) != null && d.description) && !((f = t.notification) != null && f.cta);
       }
     ), o = () => {
       l("update:notification", null);
-    }, c = (f) => {
-      var d, u, p;
-      (p = (u = (d = t.notification) == null ? void 0 : d.cta) == null ? void 0 : u.onClick) == null || p.call(u, f), o();
+    }, c = (d) => {
+      var f, u, p;
+      (p = (u = (f = t.notification) == null ? void 0 : f.cta) == null ? void 0 : u.onClick) == null || p.call(u, d), o();
     };
-    return (f, d) => (a(), m("div", Ut, [
+    return (d, f) => (a(), m("div", Ut, [
       i("div", Wt, [
         L(ge, {
           "enter-active-class": "transform ease-out duration-300 transition",
@@ -599,12 +599,12 @@ const Ut = {
       )) : (p.push("rounded-full"), p.push(
         t.size === "lg" ? "px-2.5 py-0.5 label" : "px-2.5 py-0.5 caption font-medium"
       )), p.join(" ");
-    }), f = r(() => {
+    }), d = r(() => {
       const p = [
         "mt-0.5 ml-0.5 inline-flex h-4 w-4 flex-shrink-0 items-center justify-center rounded-full focus:outline-none"
       ];
       return t.clickableIcon ? p.push("cursor-pointer") : p.push("cursor-default"), p.join(" ");
-    }), d = r(() => [
+    }), f = r(() => [
       "-ml-0.5 mr-1.5 h-2 w-2",
       o.value
     ].join(" ")), u = (p) => {
@@ -619,7 +619,7 @@ const Ut = {
     }, [
       e.dot ? (a(), m("svg", {
         key: 0,
-        class: x(d.value),
+        class: x(f.value),
         fill: "currentColor",
         viewBox: "0 0 8 8"
       }, es, 2)) : S("", !0),
@@ -628,7 +628,7 @@ const Ut = {
       ]),
       e.iconLeft ? (a(), m("button", {
         key: 1,
-        class: x(f.value),
+        class: x(d.value),
         onClick: b[0] || (b[0] = (v) => u(v))
       }, [
         (a(), P(H(e.iconLeft), {
@@ -638,9 +638,9 @@ const Ut = {
     ], 2));
   }
 });
-let Ve = [];
+let je = [];
 function ss(e) {
-  Ve = Ve ? e : e.slice();
+  je = je ? e : e.slice();
 }
 var te = /* @__PURE__ */ ((e) => (e[e.sm = 640] = "sm", e[e.md = 746] = "md", e[e.lg = 1024] = "lg", e[e.xl = 1280] = "xl", e[e["2xl"] = 1536] = "2xl", e))(te || {});
 function Ee(e) {
@@ -651,14 +651,14 @@ function Ee(e) {
       orientation: s,
       goVerticalBelow: o,
       nonInteractive: c,
-      stepsPadding: f
+      stepsPadding: d
     },
-    emit: d
+    emit: f
   } = e, u = r(
     () => (s == null ? void 0 : s.value) === "vertical" ? "vertical" : "horizontal"
   ), p = r({
     get: () => Pe((l == null ? void 0 : l.value) || 0, -1, t.value.length),
-    set: (y) => d("update:modelValue", Pe(y, 0, t.value.length))
+    set: (y) => f("update:modelValue", Pe(y, 0, t.value.length))
   }), b = (y) => `${y + 1}`, v = (y) => y === p.value, h = (y) => y < p.value, k = (y, w) => {
     var F;
     if (c != null && c.value) {
@@ -671,7 +671,7 @@ function Ee(e) {
   }, B = r(() => {
     const y = ["flex"];
     let w, $;
-    return (f == null ? void 0 : f.value) === "xs" ? (w = "space-x-2", $ = "space-y-1") : (f == null ? void 0 : f.value) === "sm" ? (w = "space-x-4", $ = "space-y-1") : (w = "space-x-8", $ = "space-y-4"), y.push("flex"), u.value === "vertical" || o != null && o.value ? (y.push(`flex-col ${$} justify-center`), (o == null ? void 0 : o.value) === te.sm ? y.push(
+    return (d == null ? void 0 : d.value) === "xs" ? (w = "space-x-2", $ = "space-y-1") : (d == null ? void 0 : d.value) === "sm" ? (w = "space-x-4", $ = "space-y-1") : (w = "space-x-8", $ = "space-y-4"), y.push("flex"), u.value === "vertical" || o != null && o.value ? (y.push(`flex-col ${$} justify-center`), (o == null ? void 0 : o.value) === te.sm ? y.push(
       `sm:flex-row sm:space-y-0 sm:justify-start sm:${w} sm:items-center`
     ) : (o == null ? void 0 : o.value) === te.md ? y.push(
       `md:flex-row md:space-y-0 md:justify-start md:${w} md:items-center`
@@ -680,7 +680,7 @@ function Ee(e) {
     ) : (o == null ? void 0 : o.value) === te.xl && y.push(
       `xl:flex-row xl:space-y-0 xl:justify-start xl:${w} xl:items-center`
     )) : y.push(`flex-row ${w} items-center`), y.join(" ");
-  }), j = r(() => {
+  }), V = r(() => {
     const y = ["flex items-center"];
     return c != null && c.value || y.push("cursor-pointer"), y.join(" ");
   });
@@ -691,7 +691,7 @@ function Ee(e) {
     switchStep: k,
     getStepDisplayValue: b,
     listClasses: B,
-    linkClasses: j,
+    linkClasses: V,
     orientation: u
   };
 }
@@ -735,8 +735,8 @@ const ns = ["aria-label"], ls = ["href", "onClick"], as = { class: "flex space-x
       isCurrentStep: s,
       isFinishedStep: o,
       switchStep: c,
-      getStepDisplayValue: f,
-      listClasses: d,
+      getStepDisplayValue: d,
+      listClasses: f,
       linkClasses: u
     } = Ee({
       props: ae(t),
@@ -747,7 +747,7 @@ const ns = ["aria-label"], ls = ["href", "onClick"], as = { class: "flex space-x
       "aria-label": e.ariaLabel || "Progress steps"
     }, [
       i("ol", {
-        class: x(n(d))
+        class: x(n(f))
       }, [
         (a(!0), m(U, null, G(e.steps, (v, h) => (a(), m("li", {
           key: v.name
@@ -775,7 +775,7 @@ const ns = ["aria-label"], ls = ["href", "onClick"], as = { class: "flex space-x
             onClick: (k) => n(c)(h, k)
           }, [
             i("div", cs, [
-              i("div", ds, I(n(f)(h)), 1),
+              i("div", ds, I(n(d)(h)), 1),
               i("div", fs, [
                 i("div", null, I(v.name), 1),
                 v.description ? (a(), m("div", ps, I(v.description), 1)) : S("", !0)
@@ -788,7 +788,7 @@ const ns = ["aria-label"], ls = ["href", "onClick"], as = { class: "flex space-x
             onClick: (k) => n(c)(h, k)
           }, [
             i("div", ms, [
-              i("div", gs, I(n(f)(h)), 1),
+              i("div", gs, I(n(d)(h)), 1),
               i("div", vs, [
                 i("div", null, I(v.name), 1),
                 v.description ? (a(), m("div", bs, I(v.description), 1)) : S("", !0)
@@ -814,7 +814,7 @@ const ns = ["aria-label"], ls = ["href", "onClick"], as = { class: "flex space-x
 }, Ps = {
   key: 0,
   class: "h-3 w-3 rounded-full bg-foreground-2"
-}, js = {
+}, Vs = {
   key: 1,
   class: "h-4 w-4 rounded-full bg-foreground-disabled"
 }, kl = /* @__PURE__ */ M({
@@ -831,7 +831,7 @@ const ns = ["aria-label"], ls = ["href", "onClick"], as = { class: "flex space-x
   },
   emits: ["update:modelValue"],
   setup(e, { emit: l }) {
-    const t = e, { isCurrentStep: s, isFinishedStep: o, switchStep: c, listClasses: f, linkClasses: d } = Ee({
+    const t = e, { isCurrentStep: s, isFinishedStep: o, switchStep: c, listClasses: d, linkClasses: f } = Ee({
       props: ae(t),
       emit: l
     }), u = r(() => {
@@ -847,7 +847,7 @@ const ns = ["aria-label"], ls = ["href", "onClick"], as = { class: "flex space-x
       "aria-label": e.ariaLabel || "Progress steps"
     }, [
       i("ol", {
-        class: x([n(f), p.value])
+        class: x([n(d), p.value])
       }, [
         (a(!0), m(U, null, G(e.steps, (h, k) => (a(), m("li", {
           key: h.name
@@ -855,7 +855,7 @@ const ns = ["aria-label"], ls = ["href", "onClick"], as = { class: "flex space-x
           n(o)(k) ? (a(), m("a", {
             key: 0,
             href: h.href,
-            class: x(n(d)),
+            class: x(n(f)),
             onClick: (B) => n(c)(k, B)
           }, [
             i("span", ks, [
@@ -871,7 +871,7 @@ const ns = ["aria-label"], ls = ["href", "onClick"], as = { class: "flex space-x
           ], 10, xs)) : n(s)(k) ? (a(), m("a", {
             key: 1,
             href: h.href,
-            class: x(n(d)),
+            class: x(n(f)),
             "aria-current": "step",
             onClick: (B) => n(c)(k, B)
           }, [
@@ -887,11 +887,11 @@ const ns = ["aria-label"], ls = ["href", "onClick"], as = { class: "flex space-x
           ], 10, ws)) : (a(), m("a", {
             key: 2,
             href: h.href,
-            class: x(n(d)),
+            class: x(n(f)),
             onClick: (B) => n(c)(k, B)
           }, [
             i("div", Ls, [
-              e.basic ? (a(), m("span", Ps)) : (a(), m("div", js))
+              e.basic ? (a(), m("span", Ps)) : (a(), m("div", Vs))
             ]),
             i("p", {
               class: x(["text-foreground-disabled", u.value])
@@ -901,7 +901,7 @@ const ns = ["aria-label"], ls = ["href", "onClick"], as = { class: "flex space-x
       ], 2)
     ], 8, ys));
   }
-}), Vs = ["disabled"], Cl = /* @__PURE__ */ M({
+}), js = ["disabled"], Cl = /* @__PURE__ */ M({
   __name: "CardButton",
   props: {
     disabled: { type: Boolean },
@@ -924,7 +924,7 @@ const ns = ["aria-label"], ls = ["href", "onClick"], as = { class: "flex space-x
       }
       l("update:modelValue", !t.modelValue), l("click", c);
     };
-    return (c, f) => (a(), m("button", {
+    return (c, d) => (a(), m("button", {
       class: x(s.value),
       disabled: e.disabled,
       onClick: o
@@ -932,7 +932,7 @@ const ns = ["aria-label"], ls = ["href", "onClick"], as = { class: "flex space-x
       D(c.$slots, "default", {}, () => [
         A("Text")
       ])
-    ], 10, Vs));
+    ], 10, js));
   }
 }), Os = { class: "relative flex items-start" }, Ms = { class: "flex h-6 items-center" }, As = ["id", "checked", "aria-describedby", "name", "disabled", "value"], Ds = {
   class: "ml-2 text-sm",
@@ -1032,8 +1032,8 @@ const ns = ["aria-label"], ls = ["href", "onClick"], as = { class: "flex space-x
     const l = e, t = (y) => `${y}-${ke()}`, s = r(() => l.value || l.name), {
       checked: o,
       errorMessage: c,
-      handleChange: f,
-      value: d
+      handleChange: d,
+      value: f
     } = xe(l.name, l.rules, {
       validateOnMount: l.validateOnMount,
       type: "checkbox",
@@ -1042,12 +1042,12 @@ const ns = ["aria-label"], ls = ["href", "onClick"], as = { class: "flex space-x
     }), u = r(() => l.label || l.name), p = r(() => c.value ? "border-danger-lighter" : "border-foreground-4 "), b = r(() => l.description || c.value), v = r(() => `${l.name}-description`), h = r(() => {
       const y = [];
       return l.inlineDescription ? y.push("inline ml-2") : y.push("block"), c.value ? y.push("text-danger") : y.push("text-foreground-2"), y.join(" ");
-    }), k = O(t("checkbox")), B = r(() => l.id || k.value), j = (y) => {
-      l.disabled || f(y);
+    }), k = O(t("checkbox")), B = r(() => l.id || k.value), V = (y) => {
+      l.disabled || d(y);
     };
     return Y(() => {
-      const y = l.modelValue, w = d.value, $ = Array.isArray(y) ? y.includes(l.value) : y === l.value, F = Array.isArray(w) ? w.includes(l.value) : w === l.value;
-      $ !== F && f(y);
+      const y = l.modelValue, w = f.value, $ = Array.isArray(y) ? y.includes(l.value) : y === l.value, F = Array.isArray(w) ? w.includes(l.value) : w === l.value;
+      $ !== F && d(y);
     }), (y, w) => (a(), m("div", Os, [
       i("div", Ms, [
         i("input", oe({
@@ -1059,7 +1059,7 @@ const ns = ["aria-label"], ls = ["href", "onClick"], as = { class: "flex space-x
           value: s.value,
           type: "checkbox",
           class: ["h-4 w-4 rounded text-primary focus:ring-primary bg-foundation disabled:cursor-not-allowed disabled:bg-disabled disabled:text-disabled-2", p.value]
-        }, y.$attrs, { onChange: j }), null, 16, As)
+        }, y.$attrs, { onChange: V }), null, 16, As)
       ]),
       i("div", Ds, [
         i("label", {
@@ -1083,10 +1083,10 @@ function Ue(e) {
     validateOnMount: n(l.validateOnMount),
     validateOnValueUpdate: n(l.validateOnValueUpdate),
     initialValue: n(l.modelValue) || void 0
-  }), f = r(() => {
+  }), d = r(() => {
     const $ = ["block label text-foreground-2 mb-2"];
     return n(l.showLabel) || $.push("sr-only"), $.join(" ");
-  }), d = r(() => {
+  }), f = r(() => {
     const $ = [
       "block w-full rounded focus:outline-none text-foreground transition-all",
       "disabled:cursor-not-allowed disabled:bg-foundation-disabled disabled:text-disabled-muted",
@@ -1102,7 +1102,7 @@ function Ue(e) {
     () => b.value && n(l.hideErrorMessage)
   ), h = r(() => b.value || n(l.help)), k = r(() => !!h.value), B = r(
     () => k.value ? `${n(l.name)}-${u.value}` : void 0
-  ), j = r(() => {
+  ), V = r(() => {
     const $ = ["mt-2 text-sm"];
     return $.push(c.value ? "text-danger" : "text-foreground-2"), $.join(" ");
   }), y = () => {
@@ -1114,17 +1114,17 @@ function Ue(e) {
   return Y(() => {
     n(l.autoFocus) && y();
   }), {
-    coreClasses: d,
+    coreClasses: f,
     title: p,
     value: o,
     helpTipId: B,
-    helpTipClasses: j,
+    helpTipClasses: V,
     helpTip: h,
     hideHelpTip: v,
     errorMessage: b,
     clear: w,
     focus: y,
-    labelClasses: f
+    labelClasses: d
   };
 }
 const zs = ["for"], Es = { class: "relative" }, Us = ["id", "name", "placeholder", "disabled", "aria-invalid", "aria-describedby"], Ws = /* @__PURE__ */ i("span", { class: "text-xs sr-only" }, "Clear input", -1), qs = {
@@ -1154,8 +1154,8 @@ const zs = ["for"], Es = { class: "relative" }, Us = ["id", "name", "placeholder
   setup(e, { expose: l, emit: t }) {
     const s = e, o = O(null), {
       coreClasses: c,
-      title: f,
-      value: d,
+      title: d,
+      value: f,
       helpTipId: u,
       helpTipClasses: p,
       helpTip: b,
@@ -1167,7 +1167,7 @@ const zs = ["for"], Es = { class: "relative" }, Us = ["id", "name", "placeholder
       props: ae(s),
       emit: t,
       inputEl: o
-    }), j = r(() => {
+    }), V = r(() => {
       const y = ["pl-2"];
       return s.showClear && v.value ? y.push("pr-12") : (s.showClear || v.value) && y.push("pr-8"), y.join(" ");
     });
@@ -1178,25 +1178,25 @@ const zs = ["for"], Es = { class: "relative" }, Us = ["id", "name", "placeholder
         for: e.name,
         class: x(n(h))
       }, [
-        i("span", null, I(n(f)), 1)
+        i("span", null, I(n(d)), 1)
       ], 10, zs),
       i("div", Es, [
         ne(i("textarea", oe({
           id: e.name,
           ref_key: "inputElement",
           ref: o,
-          "onUpdate:modelValue": w[0] || (w[0] = ($) => ve(d) ? d.value = $ : null),
+          "onUpdate:modelValue": w[0] || (w[0] = ($) => ve(f) ? f.value = $ : null),
           name: e.name,
-          class: [n(c), j.value, "min-h-[4rem]"],
+          class: [n(c), V.value, "min-h-[4rem]"],
           placeholder: e.placeholder,
           disabled: e.disabled,
           "aria-invalid": n(v) ? "true" : "false",
           "aria-describedby": n(u)
         }, y.$attrs, {
-          onChange: w[1] || (w[1] = ($) => y.$emit("change", { event: $, value: n(d) })),
-          onInput: w[2] || (w[2] = ($) => y.$emit("input", { event: $, value: n(d) }))
+          onChange: w[1] || (w[1] = ($) => y.$emit("change", { event: $, value: n(f) })),
+          onInput: w[2] || (w[2] = ($) => y.$emit("input", { event: $, value: n(f) }))
         }), null, 16, Us), [
-          [Oe, n(d)]
+          [Oe, n(f)]
         ]),
         e.showClear ? (a(), m("a", {
           key: 0,
@@ -1378,8 +1378,8 @@ const zs = ["for"], Es = { class: "relative" }, Us = ["id", "name", "placeholder
   emits: ["update:modelValue", "change", "input", "clear", "focusin", "focusout"],
   setup(e, { expose: l, emit: t }) {
     const s = e, o = be(), c = O(null), {
-      coreClasses: f,
-      title: d,
+      coreClasses: d,
+      title: f,
       value: u,
       helpTipId: p,
       helpTipClasses: b,
@@ -1387,7 +1387,7 @@ const zs = ["for"], Es = { class: "relative" }, Us = ["id", "name", "placeholder
       hideHelpTip: h,
       errorMessage: k,
       clear: B,
-      focus: j,
+      focus: V,
       labelClasses: y
     } = Ue({
       props: ae(s),
@@ -1414,14 +1414,14 @@ const zs = ["for"], Es = { class: "relative" }, Us = ["id", "name", "placeholder
           return "h-8";
       }
     });
-    return l({ focus: j }), (R, E) => (a(), m("div", {
+    return l({ focus: V }), (R, E) => (a(), m("div", {
       class: x([e.fullWidth ? "w-full" : "", e.wrapperClasses])
     }, [
       i("label", {
         for: e.name,
         class: x(n(y))
       }, [
-        i("span", null, I(n(d)), 1)
+        i("span", null, I(n(f)), 1)
       ], 10, Gs),
       i("div", Ks, [
         $.value ? (a(), m("div", Xs, [
@@ -1446,7 +1446,7 @@ const zs = ["for"], Es = { class: "relative" }, Us = ["id", "name", "placeholder
           "onUpdate:modelValue": E[0] || (E[0] = (z) => ve(u) ? u.value = z : null),
           type: e.type,
           name: e.name,
-          class: [n(f), F.value, g.value, e.inputClasses || ""],
+          class: [n(d), F.value, g.value, e.inputClasses || ""],
           placeholder: e.placeholder,
           disabled: e.disabled,
           "aria-invalid": n(k) ? "true" : "false",
@@ -1520,7 +1520,7 @@ function on(e) {
     itemContainer: s,
     trackResize: o = !1,
     trackMutations: c = !0
-  } = e || {}, f = O(0), d = () => {
+  } = e || {}, d = O(0), f = () => {
     const u = s.value;
     if (l != null && l.value || !u)
       return;
@@ -1530,13 +1530,13 @@ function on(e) {
       const B = k.offsetTop;
       Q(h) ? (h = B, b += 1) : B === h && (b += 1), v += 1;
     }
-    f.value = v - b;
+    d.value = v - b;
   };
-  return o && yt(t, d), c && xt(t, d, {
+  return o && yt(t, f), c && xt(t, f, {
     childList: !0,
     subtree: !0
   }), {
-    hiddenItemCount: f
+    hiddenItemCount: d
   };
 }
 function rn(e) {
@@ -1571,13 +1571,13 @@ function rn(e) {
       }
       t("update:modelValue", (h = l.multiple) != null && h.value ? p || [] : p);
     }
-  }), f = (p) => q(p);
+  }), d = (p) => q(p);
   return {
     selectedValue: c,
     hiddenSelectedItemCount: o,
-    isArrayValue: f,
+    isArrayValue: d,
     isMultiItemArrayValue: (p) => q(p) && p.length > 1,
-    firstItem: (p) => f(p) ? p[0] : p
+    firstItem: (p) => d(p) ? p[0] : p
   };
 }
 const un = (e) => (Ne("data-v-60cf597b"), e = e(), Je(), e), cn = /* @__PURE__ */ un(() => /* @__PURE__ */ i("div", { class: "swoosher relative top-0 bg-blue-500/50" }, null, -1)), dn = [
@@ -1739,6 +1739,16 @@ const We = /* @__PURE__ */ ze(fn, [["__scopeId", "data-v-60cf597b"]]), pn = { cl
     fixedHeight: {
       type: Boolean,
       default: !1
+    },
+    /**
+     * By default component holds its own internal value state so that even if you don't have it tied up to a real `modelValue` ref somewhere
+     * it knows its internal state and can report it on form submits.
+     *
+     * If you set this to true, its only going to rely on `modelValue` as its primary source of truth so that you can reject updates etc.
+     */
+    fullyControlValue: {
+      type: Boolean,
+      default: !1
     }
   },
   emits: ["update:modelValue"],
@@ -1747,11 +1757,11 @@ const We = /* @__PURE__ */ ze(fn, [["__scopeId", "data-v-60cf597b"]]), pn = { cl
       validateOnMount: s.validateOnMount,
       validateOnValueUpdate: s.validateOnValueUpdate,
       initialValue: s.modelValue
-    }), f = O(null), d = O(""), u = O([]), p = O(!1), b = O(1), v = O(ke()), h = r(() => n(s.label) || n(s.name)), k = r(() => {
+    }), d = O(null), f = O(""), u = O([]), p = O(!1), b = O(1), v = O(ke()), h = r(() => n(s.label) || n(s.name)), k = r(() => {
       const C = c.value;
       return !C || !n(s.useLabelInErrors) ? C : C.replace("Value", h.value);
-    }), B = r(() => k.value || n(s.help)), j = r(() => !!B.value), y = r(
-      () => j.value ? `${n(s.name)}-${v.value}` : void 0
+    }), B = r(() => k.value || n(s.help)), V = r(() => !!B.value), y = r(
+      () => V.value ? `${n(s.name)}-${v.value}` : void 0
     ), w = r(
       () => c.value ? "text-danger" : "text-foreground-2"
     ), $ = r(
@@ -1804,36 +1814,36 @@ const We = /* @__PURE__ */ ze(fn, [["__scopeId", "data-v-60cf597b"]]), pn = { cl
         if (s.multiple)
           T = C || [];
         else {
-          const V = o.value;
-          T = s.allowUnset && V && C && ce(V) === ce(C) ? void 0 : C;
+          const j = o.value;
+          T = s.allowUnset && j && C && ce(j) === ce(C) ? void 0 : C;
         }
-        t("update:modelValue", T), b.value += 1;
+        s.fullyControlValue ? t("update:modelValue", T) : o.value = T, b.value += 1;
       }
     }), $e = r(() => s.multiple ? W.value.length !== 0 : !!W.value), qe = () => {
       s.multiple ? W.value = [] : W.value = void 0;
     }, He = r(() => {
-      const C = d.value;
+      const C = f.value;
       return !z.value || !(C != null && C.length) ? u.value : s.filterPredicate ? u.value.filter(
         (T) => {
-          var V;
-          return ((V = s.filterPredicate) == null ? void 0 : V.call(s, T, C)) || !1;
+          var j;
+          return ((j = s.filterPredicate) == null ? void 0 : j.call(s, T, C)) || !1;
         }
       ) : u.value;
     }), Se = (C) => JSON.stringify(C), ce = (C) => s.by ? C[s.by] : C, de = async () => {
       if (!(!X.value || !s.getSearchResults)) {
         p.value = !0;
         try {
-          u.value = await s.getSearchResults(d.value);
+          u.value = await s.getSearchResults(f.value);
         } finally {
           p.value = !1;
         }
       }
     }, Ge = Ae(de, 1e3), Ke = (C) => {
-      const { active: T, disabled: V } = C || {}, { hideCheckmarks: K } = s, N = [
+      const { active: T, disabled: j } = C || {}, { hideCheckmarks: K } = s, N = [
         "relative transition cursor-pointer select-none py-1.5 pl-3",
         K ? "" : "pr-9"
       ];
-      return V ? N.push("opacity-50 cursor-not-allowed") : N.push(T ? "text-primary" : "text-foreground"), N.join(" ");
+      return j ? N.push("opacity-50 cursor-not-allowed") : N.push(T ? "text-primary" : "text-foreground"), N.join(" ");
     };
     return le(
       () => s.items,
@@ -1841,7 +1851,7 @@ const We = /* @__PURE__ */ ze(fn, [["__scopeId", "data-v-60cf597b"]]), pn = { cl
         u.value = C.slice();
       },
       { immediate: !0 }
-    ), le(d, () => {
+    ), le(f, () => {
       X.value && Ge();
     }), Y(() => {
       X.value && !s.items.length && de();
@@ -1849,7 +1859,7 @@ const We = /* @__PURE__ */ ze(fn, [["__scopeId", "data-v-60cf597b"]]), pn = { cl
       (a(), P(n(wt), {
         key: b.value,
         modelValue: W.value,
-        "onUpdate:modelValue": T[4] || (T[4] = (V) => W.value = V),
+        "onUpdate:modelValue": T[4] || (T[4] = (j) => W.value = j),
         name: e.name,
         multiple: e.multiple,
         by: e.by,
@@ -1871,7 +1881,7 @@ const We = /* @__PURE__ */ ze(fn, [["__scopeId", "data-v-60cf597b"]]), pn = { cl
             L(n(St), {
               class: x(E.value)
             }, {
-              default: _(({ open: V }) => [
+              default: _(({ open: j }) => [
                 i("div", pn, [
                   i("div", hn, [
                     !W.value || n(q)(W.value) && !W.value.length ? D(C.$slots, "nothing-selected", { key: 0 }, () => [
@@ -1884,7 +1894,7 @@ const We = /* @__PURE__ */ ze(fn, [["__scopeId", "data-v-60cf597b"]]), pn = { cl
                     ])
                   ]),
                   i("div", mn, [
-                    V ? (a(), P(n(De), {
+                    j ? (a(), P(n(De), {
                       key: 0,
                       class: "h-4 w-4 text-foreground",
                       "aria-hidden": "true"
@@ -1902,7 +1912,7 @@ const We = /* @__PURE__ */ ze(fn, [["__scopeId", "data-v-60cf597b"]]), pn = { cl
               key: 0,
               class: x(R.value),
               disabled: e.disabled,
-              onClick: T[0] || (T[0] = (V) => qe())
+              onClick: T[0] || (T[0] = (j) => qe())
             }, [
               L(n(tt), { class: "w-3 h-3" })
             ], 10, gn)), [
@@ -1915,11 +1925,10 @@ const We = /* @__PURE__ */ ze(fn, [["__scopeId", "data-v-60cf597b"]]), pn = { cl
             }, {
               default: _(() => [
                 L(n(It), {
-                  unmount: !0,
                   class: "absolute top-[100%] z-10 mt-1 w-full rounded-md bg-foundation-2 py-1 label label--light outline outline-2 outline-primary-muted focus:outline-none shadow",
-                  onFocus: T[3] || (T[3] = (V) => {
+                  onFocus: T[3] || (T[3] = (j) => {
                     var K;
-                    return (K = f.value) == null ? void 0 : K.focus();
+                    return (K = d.value) == null ? void 0 : K.focus();
                   })
                 }, {
                   default: _(() => [
@@ -1931,15 +1940,15 @@ const We = /* @__PURE__ */ ze(fn, [["__scopeId", "data-v-60cf597b"]]), pn = { cl
                         ]),
                         ne(i("input", {
                           ref_key: "searchInput",
-                          ref: f,
-                          "onUpdate:modelValue": T[1] || (T[1] = (V) => d.value = V),
+                          ref: d,
+                          "onUpdate:modelValue": T[1] || (T[1] = (j) => f.value = j),
                           type: "text",
                           class: "pl-9 w-full border-0 bg-foundation-page rounded placeholder:font-normal normal placeholder:text-foreground-2 focus:outline-none focus:ring-1 focus:border-outline-1 focus:ring-outline-1",
                           placeholder: e.searchPlaceholder,
                           onKeydown: T[2] || (T[2] = ye(() => {
                           }, ["stop"]))
                         }, null, 40, kn), [
-                          [Oe, d.value]
+                          [Oe, f.value]
                         ])
                       ])
                     ])) : S("", !0),
@@ -1953,12 +1962,12 @@ const We = /* @__PURE__ */ ze(fn, [["__scopeId", "data-v-60cf597b"]]), pn = { cl
                           $n
                         ])
                       ])) : S("", !0),
-                      !X.value || !p.value ? (a(!0), m(U, { key: 2 }, G(He.value, (V) => {
+                      !X.value || !p.value ? (a(!0), m(U, { key: 2 }, G(He.value, (j) => {
                         var K;
                         return a(), P(n(Bt), {
-                          key: ce(V),
-                          value: V,
-                          disabled: ((K = e.disabledItemPredicate) == null ? void 0 : K.call(e, V)) || !1
+                          key: ce(j),
+                          value: j,
+                          disabled: ((K = e.disabledItemPredicate) == null ? void 0 : K.call(e, j)) || !1
                         }, {
                           default: _(({ active: N, selected: Ie }) => {
                             var Be, _e;
@@ -1967,18 +1976,18 @@ const We = /* @__PURE__ */ ze(fn, [["__scopeId", "data-v-60cf597b"]]), pn = { cl
                                 class: x(
                                   Ke({
                                     active: N,
-                                    disabled: ((Be = e.disabledItemPredicate) == null ? void 0 : Be.call(e, V)) || !1
+                                    disabled: ((Be = e.disabledItemPredicate) == null ? void 0 : Be.call(e, j)) || !1
                                   })
                                 )
                               }, [
                                 i("span", Sn, [
                                   D(C.$slots, "option", {
-                                    item: V,
+                                    item: j,
                                     active: N,
                                     selected: Ie,
-                                    disabled: ((_e = e.disabledItemPredicate) == null ? void 0 : _e.call(e, V)) || !1
+                                    disabled: ((_e = e.disabledItemPredicate) == null ? void 0 : _e.call(e, j)) || !1
                                   }, () => [
-                                    A(I(Se(V)), 1)
+                                    A(I(Se(j)), 1)
                                   ])
                                 ]),
                                 !e.hideCheckmarks && Ie ? (a(), m("span", {
@@ -2040,7 +2049,7 @@ const We = /* @__PURE__ */ ze(fn, [["__scopeId", "data-v-60cf597b"]]), pn = { cl
 }, Pn = {
   key: 1,
   class: "flex items-center"
-}, jn = { class: "truncate" }, Vn = { class: "flex items-center" }, On = { class: "truncate" }, Bl = /* @__PURE__ */ M({
+}, Vn = { class: "truncate" }, jn = { class: "flex items-center" }, On = { class: "truncate" }, Bl = /* @__PURE__ */ M({
   __name: "SourceApps",
   props: {
     /**
@@ -2100,7 +2109,7 @@ const We = /* @__PURE__ */ ze(fn, [["__scopeId", "data-v-60cf597b"]]), pn = { cl
   },
   emits: ["update:modelValue"],
   setup(e, { emit: l }) {
-    const t = e, s = O(null), o = O(null), { selectedValue: c, hiddenSelectedItemCount: f, isMultiItemArrayValue: d, firstItem: u } = rn({
+    const t = e, s = O(null), o = O(null), { selectedValue: c, hiddenSelectedItemCount: d, isMultiItemArrayValue: f, firstItem: u } = rn({
       props: ae(t),
       emit: l,
       dynamicVisibility: { elementToWatchForChanges: s, itemContainer: o }
@@ -2126,7 +2135,7 @@ const We = /* @__PURE__ */ ze(fn, [["__scopeId", "data-v-60cf597b"]]), pn = { cl
         ], 64))
       ]),
       "something-selected": _(({ value: h }) => [
-        n(d)(h) ? (a(), m("div", {
+        n(f)(h) ? (a(), m("div", {
           key: 0,
           ref_key: "elementToWatchForChanges",
           ref: s,
@@ -2142,17 +2151,17 @@ const We = /* @__PURE__ */ ze(fn, [["__scopeId", "data-v-60cf597b"]]), pn = { cl
               "source-app": k
             }, null, 8, ["source-app"]))), 128))
           ], 512),
-          n(f) > 0 ? (a(), m("div", Ln, " +" + I(n(f)), 1)) : S("", !0)
+          n(d) > 0 ? (a(), m("div", Ln, " +" + I(n(d)), 1)) : S("", !0)
         ], 512)) : (a(), m("div", Pn, [
           i("div", {
             class: "h-2 w-2 rounded-full mr-2",
             style: fe({ backgroundColor: n(u)(h).bgColor })
           }, null, 4),
-          i("span", jn, I(n(u)(h).name), 1)
+          i("span", Vn, I(n(u)(h).name), 1)
         ]))
       ]),
       option: _(({ item: h }) => [
-        i("div", Vn, [
+        i("div", jn, [
           i("div", {
             class: "h-2 w-2 rounded-full mr-2",
             style: fe({ backgroundColor: h.bgColor })
@@ -2185,8 +2194,8 @@ function Ll(e, ...l) {
     l[0],
     (t) => {
       const s = t.getModifierState("Alt"), o = he === pe.Mac ? t.getModifierState("Meta") : t.getModifierState("Control"), c = t.getModifierState("Shift");
-      for (const f of e)
-        switch (f) {
+      for (const d of e)
+        switch (d) {
           case se.CtrlOrCmd:
             if (!o)
               return;
@@ -2218,7 +2227,7 @@ const An = /* @__PURE__ */ i("div", { class: "fixed inset-0 bg-neutral-100/70 da
 }, Fn = { class: "text-2xl font-bold" }, zn = { class: "p-4 sm:p-6" }, En = {
   key: 2,
   class: "flex p-4 sm:px-6 sm:py-5 border-t gap-2 border-outline-3"
-}, jl = /* @__PURE__ */ M({
+}, Vl = /* @__PURE__ */ M({
   __name: "Dialog",
   props: {
     open: { type: Boolean },
@@ -2231,10 +2240,10 @@ const An = /* @__PURE__ */ i("div", { class: "fixed inset-0 bg-neutral-100/70 da
   },
   emits: ["update:open", "fully-closed"],
   setup(e, { emit: l }) {
-    const t = e, s = be(), o = r(() => !!t.onSubmit), c = r(() => t.buttons || s.buttons), f = r({
+    const t = e, s = be(), o = r(() => !!t.onSubmit), c = r(() => t.buttons || s.buttons), d = r({
       get: () => t.open,
       set: (b) => l("update:open", b)
-    }), d = r(() => {
+    }), f = r(() => {
       switch (t.maxWidth) {
         case "sm":
           return 0;
@@ -2249,13 +2258,13 @@ const An = /* @__PURE__ */ i("div", { class: "fixed inset-0 bg-neutral-100/70 da
       }
     }), u = r(() => {
       const b = ["w-full", "sm:my-8 sm:w-full sm:max-w-xl"];
-      return !t.title && !c.value && b.push("px-4 pt-4 pb-4", "sm:p-6"), d.value >= 1 && b.push("md:max-w-2xl"), d.value >= 2 && b.push("lg:max-w-4xl"), d.value >= 3 && b.push("xl:max-w-6xl"), d.value >= 4 && b.push("2xl:max-w-7xl"), b.join(" ");
+      return !t.title && !c.value && b.push("px-4 pt-4 pb-4", "sm:p-6"), f.value >= 1 && b.push("md:max-w-2xl"), f.value >= 2 && b.push("lg:max-w-4xl"), f.value >= 3 && b.push("xl:max-w-6xl"), f.value >= 4 && b.push("2xl:max-w-7xl"), b.join(" ");
     }), p = () => {
-      t.preventCloseOnClickOutside || (f.value = !1);
+      t.preventCloseOnClickOutside || (d.value = !1);
     };
     return (b, v) => (a(), P(n(_t), {
       as: "template",
-      show: f.value
+      show: d.value
     }, {
       default: _(() => [
         L(n(Lt), {
@@ -2264,7 +2273,7 @@ const An = /* @__PURE__ */ i("div", { class: "fixed inset-0 bg-neutral-100/70 da
           onClose: p
         }, {
           default: _(() => [
-            L(n(je), {
+            L(n(Ve), {
               as: "template",
               enter: "ease-out duration-300",
               "enter-from": "opacity-0",
@@ -2280,7 +2289,7 @@ const An = /* @__PURE__ */ i("div", { class: "fixed inset-0 bg-neutral-100/70 da
             }),
             i("div", Dn, [
               i("div", Tn, [
-                L(n(je), {
+                L(n(Ve), {
                   as: "template",
                   enter: "ease-out duration-300",
                   "enter-from": "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95",
@@ -2306,7 +2315,7 @@ const An = /* @__PURE__ */ i("div", { class: "fixed inset-0 bg-neutral-100/70 da
                         e.hideCloser ? S("", !0) : (a(), m("button", {
                           key: 1,
                           class: "absolute z-20 top-5 right-4 text-foreground",
-                          onClick: v[0] || (v[0] = (h) => f.value = !1)
+                          onClick: v[0] || (v[0] = (h) => d.value = !1)
                         }, [
                           L(n(ct), { class: "h-6 w-6" })
                         ])),
@@ -2340,7 +2349,7 @@ const An = /* @__PURE__ */ i("div", { class: "fixed inset-0 bg-neutral-100/70 da
       _: 3
     }, 8, ["show"]));
   }
-}), Un = { class: "inline-flex items-center space-x-2" }, Wn = { class: "label-light" }, Vl = /* @__PURE__ */ M({
+}), Un = { class: "inline-flex items-center space-x-2" }, Wn = { class: "label-light" }, jl = /* @__PURE__ */ M({
   __name: "Disclosure",
   props: {
     title: null,
@@ -2351,9 +2360,19 @@ const An = /* @__PURE__ */ i("div", { class: "fixed inset-0 bg-neutral-100/70 da
     const l = e, t = r(() => {
       const o = [
         "pr-3 h-10 w-full flex items-center justify-between border-l-2 px-2 rounded transition",
-        "ring-1"
+        "ring-1 font-medium"
       ];
       switch (l.color) {
+        case "warning":
+          o.push(
+            "border-warning text-warning ring-warning-lighter hover:ring-warning"
+          );
+          break;
+        case "success":
+          o.push(
+            "border-success text-success ring-success-lighter hover:ring-success"
+          );
+          break;
         case "danger":
           o.push("border-danger text-danger ring-danger-lighter hover:ring-danger");
           break;
@@ -2368,6 +2387,12 @@ const An = /* @__PURE__ */ i("div", { class: "fixed inset-0 bg-neutral-100/70 da
     }), s = r(() => {
       const o = ["mt-4 px-3 py-1 border-x "];
       switch (l.color) {
+        case "warning":
+          o.push("border-warning-lighter");
+          break;
+        case "success":
+          o.push("border-success-lighter");
+          break;
         case "danger":
           o.push("border-danger-lighter");
           break;
@@ -2379,9 +2404,9 @@ const An = /* @__PURE__ */ i("div", { class: "fixed inset-0 bg-neutral-100/70 da
       return o.join(" ");
     });
     return (o, c) => (a(), m("div", null, [
-      L(n(jt), null, {
-        default: _(({ open: f }) => [
-          L(n(Vt), {
+      L(n(Vt), null, {
+        default: _(({ open: d }) => [
+          L(n(jt), {
             class: x(t.value)
           }, {
             default: _(() => [
@@ -2393,7 +2418,7 @@ const An = /* @__PURE__ */ i("div", { class: "fixed inset-0 bg-neutral-100/70 da
                 i("span", null, I(e.title), 1)
               ]),
               L(n(De), {
-                class: x([f ? "" : "rotate-180 transform", "h-5 w-5"])
+                class: x([d ? "" : "rotate-180 transform", "h-5 w-5"])
               }, null, 8, ["class"])
             ]),
             _: 2
@@ -2426,15 +2451,15 @@ const Ol = /* @__PURE__ */ M({
   setup(e, { emit: l }) {
     const t = e, s = r({
       get: () => t.modelValue || J.Grid,
-      set: (f) => l("update:modelValue", f)
+      set: (d) => l("update:modelValue", d)
     }), o = r(
       () => s.value === J.Grid ? lt : at
-    ), c = (f) => {
-      l("click", f);
-      const d = s.value === J.Grid ? J.List : J.Grid;
-      s.value = d;
+    ), c = (d) => {
+      l("click", d);
+      const f = s.value === J.Grid ? J.List : J.Grid;
+      s.value = f;
     };
-    return (f, d) => (a(), m("button", {
+    return (d, f) => (a(), m("button", {
       class: "flex items-center justify-center rounded bg-foundation h-8 w-8 shadow cursor-pointer text-foreground",
       onClick: c
     }, [
@@ -2465,24 +2490,24 @@ function Gn(e) {
     Q(t) ? 1 : t
     /* Right */
   ), o = r(() => {
-    const f = n(e.stopUpdatesBelowWidth);
-    if (!Q(f))
-      return f;
-    const d = n(l);
-    return d != null && d.offsetWidth ? d.offsetWidth * 2 : void 0;
+    const d = n(e.stopUpdatesBelowWidth);
+    if (!Q(d))
+      return d;
+    const f = n(l);
+    return f != null && f.offsetWidth ? f.offsetWidth * 2 : void 0;
   }), c = () => {
     if (!Ce)
       return;
-    const f = n(l);
-    if (!f)
+    const d = n(l);
+    if (!d)
       return;
-    const d = f.getBoundingClientRect(), u = d.x + d.width > window.innerWidth, p = d.x < 0;
+    const f = d.getBoundingClientRect(), u = f.x + f.width > window.innerWidth, p = f.x < 0;
     u && p || !Q(o.value) && window.innerWidth < o.value || (u ? s.value = 0 : p && (s.value = 1));
   };
   return Hn(() => c()), le(
     () => n(l),
-    (f) => {
-      f && c();
+    (d) => {
+      d && c();
     }
   ), {
     direction: r(() => s.value),
@@ -2504,12 +2529,12 @@ const Kn = ["disabled", "onClick"], Al = /* @__PURE__ */ M({
       }),
       defaultDirection: me.Left,
       stopUpdatesBelowWidth: 300
-    }), c = O(null), f = O(!1), d = r({
+    }), c = O(null), d = O(!1), f = r({
       get: () => t.open || !1,
       set: (h) => l("update:open", h)
     }), u = (h) => {
-      const { active: k, disabled: B } = h, j = ["group flex w-full items-center rounded-md px-2 py-2 text-sm"];
-      return k ? j.push("bg-primary text-foreground-on-primary") : B ? j.push("text-foreground-disabled") : j.push("text-foreground"), j.join(" ");
+      const { active: k, disabled: B } = h, V = ["group flex w-full items-center rounded-md px-2 py-2 text-sm"];
+      return k ? V.push("bg-primary text-foreground-on-primary") : B ? V.push("text-foreground-disabled") : V.push("text-foreground"), V.join(" ");
     }, p = (h, k) => {
       l("chosen", { item: h, event: k });
     }, b = () => {
@@ -2517,12 +2542,12 @@ const Kn = ["disabled", "onClick"], Al = /* @__PURE__ */ M({
       return (h = c.value) == null ? void 0 : h.el.click();
     }, v = (h) => {
       const k = !!h;
-      return f.value = k, k;
+      return d.value = k, k;
     };
-    return le(f, (h, k) => {
-      h !== k && (d.value = h);
-    }), le(d, (h) => {
-      (h && !f.value || !h && f.value) && b();
+    return le(d, (h, k) => {
+      h !== k && (f.value = h);
+    }), le(f, (h) => {
+      (h && !d.value || !h && d.value) && b();
     }), (h, k) => (a(), P(n(Mt), {
       as: "div",
       class: "relative inline-block"
@@ -2563,11 +2588,11 @@ const Kn = ["disabled", "onClick"], Al = /* @__PURE__ */ M({
               ])
             }, {
               default: _(() => [
-                (a(!0), m(U, null, G(e.items, (j, y) => (a(), m("div", {
+                (a(!0), m(U, null, G(e.items, (V, y) => (a(), m("div", {
                   key: y,
                   class: "px-1 py-1"
                 }, [
-                  (a(!0), m(U, null, G(j, (w) => (a(), P(n(Tt), {
+                  (a(!0), m(U, null, G(V, (w) => (a(), P(n(Tt), {
                     key: w.id,
                     disabled: w.disabled
                   }, {
@@ -2608,16 +2633,16 @@ const Kn = ["disabled", "onClick"], Al = /* @__PURE__ */ M({
     const l = e, t = O(null), s = r(() => t.value && l.items.find((c) => c.id === t.value) || l.items[0]), o = (c) => {
       t.value = c.id;
     };
-    return (c, f) => (a(), m("div", Xn, [
+    return (c, d) => (a(), m("div", Xn, [
       i("div", Nn, [
-        (a(!0), m(U, null, G(e.items, (d) => (a(), P(re, {
-          key: d.id,
+        (a(!0), m(U, null, G(e.items, (f) => (a(), P(re, {
+          key: f.id,
           link: "",
-          color: s.value.id === d.id ? "default" : "secondary",
-          onClick: (u) => o(d)
+          color: s.value.id === f.id ? "default" : "secondary",
+          onClick: (u) => o(f)
         }, {
           default: _(() => [
-            A(I(d.title), 1)
+            A(I(f.title), 1)
           ]),
           _: 2
         }, 1032, ["color", "onClick"]))), 128))
@@ -2715,6 +2740,9 @@ const Kn = ["disabled", "onClick"], Al = /* @__PURE__ */ M({
     noShadow: {
       type: Boolean,
       default: !1
+    },
+    panelClasses: {
+      type: String
     }
   },
   emits: ["submit"],
@@ -2724,35 +2752,35 @@ const Kn = ["disabled", "onClick"], Al = /* @__PURE__ */ M({
     ), o = r(
       () => t.customPadding ? "" : "px-4 py-4 sm:p-6"
     ), c = r(() => {
-      const f = ["rounded-lg"];
-      return t.noShadow || f.push("shadow"), t.ring && f.push("ring-outline-2 hover:ring-2"), f.join(" ");
+      const d = ["rounded-lg"];
+      return t.noShadow || d.push("shadow"), t.ring && d.push("ring-outline-2 hover:ring-2"), t.panelClasses && d.push(t.panelClasses), d.join(" ");
     });
-    return (f, d) => (a(), m("div", sl, [
+    return (d, f) => (a(), m("div", sl, [
       e.fancyGlow ? (a(), m("div", nl)) : S("", !0),
       (a(), P(H(e.form ? "form" : "div"), {
         class: x([
           "relative divide-outline-3 bg-foundation text-foreground flex flex-col divide-y overflow-hidden",
           c.value
         ]),
-        onSubmit: d[0] || (d[0] = (u) => l("submit", u))
+        onSubmit: f[0] || (f[0] = (u) => l("submit", u))
       }, {
         default: _(() => [
-          f.$slots.header ? (a(), m("div", {
+          d.$slots.header ? (a(), m("div", {
             key: 0,
             class: x(s.value)
           }, [
-            D(f.$slots, "header")
+            D(d.$slots, "header")
           ], 2)) : S("", !0),
           i("div", {
             class: x(["grow", o.value])
           }, [
-            D(f.$slots, "default")
+            D(d.$slots, "default")
           ], 2),
-          f.$slots.footer ? (a(), m("div", {
+          d.$slots.footer ? (a(), m("div", {
             key: 1,
             class: x(s.value)
           }, [
-            D(f.$slots, "footer")
+            D(d.$slots, "footer")
           ], 2)) : S("", !0)
         ]),
         _: 3
@@ -2805,7 +2833,7 @@ const Kn = ["disabled", "onClick"], Al = /* @__PURE__ */ M({
           break;
       }
       return u.join(" ");
-    }), f = r(() => {
+    }), d = r(() => {
       const u = [];
       switch (l.color) {
         case "success":
@@ -2822,7 +2850,7 @@ const Kn = ["disabled", "onClick"], Al = /* @__PURE__ */ M({
           break;
       }
       return u.join(" ");
-    }), d = r(() => {
+    }), f = r(() => {
       const u = [];
       switch (l.color) {
         case "success":
@@ -2850,7 +2878,7 @@ const Kn = ["disabled", "onClick"], Al = /* @__PURE__ */ M({
         }, [
           i("div", ll, [
             L(n(Te), {
-              class: x(["h-5 w-5", f.value]),
+              class: x(["h-5 w-5", d.value]),
               "aria-hidden": "true"
             }, null, 8, ["class"])
           ]),
@@ -2897,7 +2925,7 @@ const Kn = ["disabled", "onClick"], Al = /* @__PURE__ */ M({
           }, [
             i("button", {
               type: "button",
-              class: x(["inline-flex rounded-md focus:outline-none focus:ring-2", d.value]),
+              class: x(["inline-flex rounded-md focus:outline-none focus:ring-2", f.value]),
               onClick: p[0] || (p[0] = (v) => u.$emit("dismiss"))
             }, [
               ol,
@@ -2913,11 +2941,11 @@ const Kn = ["disabled", "onClick"], Al = /* @__PURE__ */ M({
   }
 });
 function zl(e) {
-  var B, j;
-  const { get: l, initialState: t, readOptions: s, set: o, asyncRead: c = !0, debugging: f } = e, d = f == null ? void 0 : f.log, u = () => (new Error("Trace:").stack || "").substring(7), p = ((j = (B = e.debugging) == null ? void 0 : B.log) == null ? void 0 : j.logger) || console.debug, b = d && !d.writesOnly ? () => {
+  var B, V;
+  const { get: l, initialState: t, readOptions: s, set: o, asyncRead: c = !0, debugging: d } = e, f = d == null ? void 0 : d.log, u = () => (new Error("Trace:").stack || "").substring(7), p = ((V = (B = e.debugging) == null ? void 0 : B.log) == null ? void 0 : V.logger) || console.debug, b = f && !f.writesOnly ? () => {
     const y = l();
-    return p(`debugging: '${d.name}' read`, y, u()), y;
-  } : l, v = d && !d.readsOnly ? (y) => (p(`debugging: '${d.name}' written to`, y, u()), o(y)) : o, h = c ? Ct(b, t, s) : r(b), k = r(() => h.value);
+    return p(`debugging: '${f.name}' read`, y, u()), y;
+  } : l, v = f && !f.readsOnly ? (y) => (p(`debugging: '${f.name}' written to`, y, u()), o(y)) : o, h = c ? Ct(b, t, s) : r(b), k = r(() => h.value);
   return k.update = v, k;
 }
 export {
@@ -2938,8 +2966,8 @@ export {
   J as GridListToggleValue,
   me as HorizontalDirection,
   Tl as InfiniteLoading,
-  jl as LayoutDialog,
-  Vl as LayoutDisclosure,
+  Vl as LayoutDialog,
+  jl as LayoutDisclosure,
   Ol as LayoutGridListToggle,
   Al as LayoutMenu,
   Rl as LayoutPanel,