vlite3 1.4.9 → 1.4.10

package/components/Cart/CartVariant2.vue.js

@@ -28,7 +28,7 @@ const I = { class: "flex items-center justify-center gap-1.5" }, R = { class: "f
       () => c.value.totals.itemCount ?? c.value.items?.reduce((h, t) => h + (t.quantity || 0), 0) ?? 0
     );
     return (h, t) => (a(), s("div", {
-      class: o(["v-cart v-cart-v2 flex flex-col bg-background text-foreground border border-border max-w-md mx-auto overflow-hidden h-full", [e.containerClass, e.compact ? "rounded-sm" : "rounded-md"]])
+      class: o(["v-cart v-cart-v2 flex flex-col bg-background text-foreground border border-border overflow-hidden h-full", [e.containerClass, e.compact ? "rounded-sm" : "rounded-md"]])
     }, [
       n("div", {
         class: o(["text-center border-b border-dashed border-border shrink-0", e.compact ? "p-3" : "p-4"])

package/components/Cart/CartVariant4.vue.js

@@ -1,4 +1,4 @@
-import { defineComponent as q, computed as c, openBlock as a, createElementBlock as i, normalizeClass as r, createElementVNode as m, createVNode as v, toDisplayString as b, createCommentVNode as u, unref as z, createBlock as y, Fragment as B, renderList as N, withCtx as k, createTextVNode as C } from "vue";
+import { defineComponent as q, computed as c, openBlock as o, createElementBlock as i, normalizeClass as r, createElementVNode as m, createVNode as v, toDisplayString as b, createCommentVNode as u, unref as z, createBlock as y, Fragment as B, renderList as N, withCtx as k, createTextVNode as C } from "vue";
 import D from "../Icon.vue.js";
 import E from "../Price/Price.vue.js";
 import w from "../Button.vue.js";
@@ -28,11 +28,11 @@ const T = { class: "flex items-center gap-2 min-w-0" }, A = {
   },
   emits: ["update:quantity", "remove", "clear", "apply-coupon", "remove-coupon", "coupon-change", "continue", "continue-shopping"],
   setup(e, { emit: $ }) {
-    const p = e, l = $, s = c(() => p.data), g = c(() => p.labels || {}), o = c(() => p.actions || {}), f = c(() => p.features || {}), d = c(() => s.value.empty || !s.value.items || s.value.items.length === 0), S = c(
+    const p = e, l = $, s = c(() => p.data), g = c(() => p.labels || {}), n = c(() => p.actions || {}), f = c(() => p.features || {}), d = c(() => s.value.empty || !s.value.items || s.value.items.length === 0), S = c(
       () => s.value.totals.itemCount ?? s.value.items?.reduce((h, t) => h + (t.quantity || 0), 0) ?? 0
     );
-    return (h, t) => (a(), i("div", {
-      class: r(["v-cart v-cart-v4 flex flex-col bg-background text-foreground border border-border rounded-lg overflow-hidden w-full h-full", [e.containerClass, e.compact ? "max-w-xs" : "max-w-sm"]])
+    return (h, t) => (o(), i("div", {
+      class: r(["v-cart v-cart-v4 flex flex-col bg-background text-foreground border border-border rounded-lg overflow-hidden w-full h-full", [e.containerClass]])
     }, [
       m("div", {
         class: r(["flex items-center justify-between gap-2 border-b border-border shrink-0", e.compact ? "px-3 py-2" : "px-4 py-2.5"])
@@ -45,9 +45,9 @@ const T = { class: "flex items-center gap-2 min-w-0" }, A = {
           m("p", {
             class: r(["font-bold text-foreground truncate", (e.compact, "text-sm")])
           }, b(s.value.title || g.value.cart || "Cart"), 3),
-          d.value ? u("", !0) : (a(), i("span", A, b(S.value), 1))
+          d.value ? u("", !0) : (o(), i("span", A, b(S.value), 1))
         ]),
-        !d.value && !e.compact ? (a(), i("p", F, [
+        !d.value && !e.compact ? (o(), i("p", F, [
           m("span", U, [
             v(z(E), {
               value: e.data.totals.grandTotal,
@@ -57,20 +57,20 @@ const T = { class: "flex items-center gap-2 min-w-0" }, A = {
         ])) : u("", !0)
       ], 2),
       m("div", G, [
-        d.value ? (a(), y(R, {
+        d.value ? (o(), y(R, {
           key: 0,
           labels: e.labels,
           compact: !0,
-          onContinueShopping: t[0] || (t[0] = (n) => l("continue-shopping"))
-        }, null, 8, ["labels"])) : (a(), i("ul", {
+          onContinueShopping: t[0] || (t[0] = (a) => l("continue-shopping"))
+        }, null, 8, ["labels"])) : (o(), i("ul", {
           key: 1,
           class: r(["divide-y divide-border", e.compact ? "px-3" : "px-4"])
         }, [
-          (a(!0), i(B, null, N(e.data.items, (n) => (a(), i("li", {
-            key: n.id
+          (o(!0), i(B, null, N(e.data.items, (a) => (o(), i("li", {
+            key: a.id
           }, [
             v(L, {
-              item: n,
+              item: a,
               features: e.features,
               labels: e.labels,
               compact: e.compact,
@@ -82,7 +82,7 @@ const T = { class: "flex items-center gap-2 min-w-0" }, A = {
           ]))), 128))
         ], 2))
       ]),
-      d.value ? u("", !0) : (a(), i("div", {
+      d.value ? u("", !0) : (o(), i("div", {
         key: 0,
         class: r(["border-t border-border bg-muted/30 shrink-0", e.compact ? "p-3 space-y-2" : "p-4 space-y-3"])
       }, [
@@ -94,44 +94,44 @@ const T = { class: "flex items-center gap-2 min-w-0" }, A = {
           coupon: e.data.coupon,
           variant: "Variant4"
         }, null, 8, ["totals", "features", "labels", "compact", "coupon"]),
-        e.features.coupon ? (a(), y(I, {
+        e.features.coupon ? (o(), y(I, {
           key: 0,
           coupon: e.data.coupon,
           labels: e.labels,
           compact: e.compact,
           readonly: e.data.readonly,
-          onApply: t[3] || (t[3] = (n) => l("apply-coupon", n)),
-          onRemove: t[4] || (t[4] = (n) => l("remove-coupon")),
-          onChange: t[5] || (t[5] = (n) => l("coupon-change", n))
+          onApply: t[3] || (t[3] = (a) => l("apply-coupon", a)),
+          onRemove: t[4] || (t[4] = (a) => l("remove-coupon")),
+          onChange: t[5] || (t[5] = (a) => l("coupon-change", a))
         }, null, 8, ["coupon", "labels", "compact", "readonly"])) : u("", !0),
-        o.value.showContinue && f.value.continue || o.value.showContinueShopping && f.value.continueShopping ? (a(), i("div", H, [
-          o.value.showContinue && f.value.continue ? (a(), y(w, {
+        n.value.showContinue && f.value.continue || n.value.showContinueShopping && f.value.continueShopping ? (o(), i("div", H, [
+          n.value.showContinue && f.value.continue ? (o(), y(w, {
             key: 0,
             variant: "primary",
             size: e.compact ? "sm" : "md",
             block: !0,
-            icon: o.value.continueIcon || "lucide:arrow-right",
-            disabled: o.value.continueDisabled || d.value,
+            icon: n.value.continueIcon || "lucide:arrow-right",
+            disabled: n.value.continueDisabled || d.value,
             class: "w-full",
-            onClick: t[6] || (t[6] = (n) => l("continue"))
+            onClick: t[6] || (t[6] = (a) => l("continue"))
           }, {
             default: k(() => [
-              C(b(o.value.continueLabel || g.value.continue || "Checkout"), 1)
+              C(b(n.value.continueLabel || g.value.continue || "Checkout"), 1)
             ]),
             _: 1
           }, 8, ["size", "icon", "disabled"])) : u("", !0),
-          o.value.showContinueShopping && f.value.continueShopping ? (a(), y(w, {
+          n.value.showContinueShopping && f.value.continueShopping ? (o(), y(w, {
             key: 1,
             variant: "ghost",
             size: "sm",
             block: !0,
-            icon: o.value.continueShoppingIcon || "lucide:arrow-left",
-            disabled: o.value.continueShoppingDisabled,
+            icon: n.value.continueShoppingIcon || "lucide:arrow-left",
+            disabled: n.value.continueShoppingDisabled,
             class: "w-full",
-            onClick: t[7] || (t[7] = (n) => l("continue-shopping"))
+            onClick: t[7] || (t[7] = (a) => l("continue-shopping"))
           }, {
             default: k(() => [
-              C(b(o.value.continueShoppingLabel || g.value.continueShopping || "Continue shopping"), 1)
+              C(b(n.value.continueShoppingLabel || g.value.continueShopping || "Continue shopping"), 1)
             ]),
             _: 1
           }, 8, ["icon", "disabled"])) : u("", !0)

package/components/CategoryManager/CategoryManager.vue2.js

@@ -17,13 +17,13 @@ import "v-datepicker-lite";
 import "v-datepicker-lite/style.css";
 import "@jaames/iro";
 import "@vueuse/core";
-/* empty css                           */
+/* empty css                          */
 import qe from "../IconPicker.vue.js";
 /* empty css                                 */
 /* empty css                 */
 /* empty css                                         */
-/* empty css                                     */
-/* empty css                                         */
+/* empty css                                    */
+/* empty css                                        */
 import "../../core/config.js";
 /* empty css                                    */
 /* empty css                      */

package/components/ColorPicker/ColorIro.vue3.js

@@ -1,5 +1,5 @@
-import o from "./ColorIro.vue.js";
-/* empty css              */
+import o from "./ColorIro.vue2.js";
+/* empty css             */
 export {
   o as default
 };

package/components/ColorPicker/ColorPicker.vue.js

@@ -7,8 +7,8 @@ import "../../core/config.js";
 /* empty css                                    */
 /* empty css                            */
 import E from "../Button.vue.js";
-import _ from "./ColorIro.vue.js";
-/* empty css              */
+import _ from "./ColorIro.vue2.js";
+/* empty css             */
 import { useEyeDropper as I } from "@vueuse/core";
 const N = { class: "absolute left-2.5 top-1/2 -translate-y-1/2 flex items-center justify-center z-20 pointer-events-none" }, j = {
   key: 0,

package/components/CommandPalette/CommandPaletteContent.vue2.js

@@ -4,7 +4,7 @@ import k from "../Icon.vue.js";
 import { $t as E } from "../../utils/i18n.js";
 import { useCommandPaletteItems as Y } from "./useCommandPaletteItems.js";
 import { useCommandPaletteNav as Z } from "./useCommandPaletteNav.js";
-import ee from "./CommandPaletteItem.vue2.js";
+import ee from "./CommandPaletteItem.vue.js";
 const te = { class: "command-palette-content flex flex-col w-full h-full max-h-[70vh]" }, oe = { class: "flex items-center gap-3 px-4 py-3 border-b border-border/80 shrink-0" }, se = ["placeholder"], ne = ["aria-label"], re = {
   key: 0,
   class: "flex flex-col items-center justify-center py-14 px-6 text-center select-none",

package/components/CommandPalette/{CommandPaletteItem.vue2.js → CommandPaletteItem.vue.js}

@@ -1,5 +1,5 @@
 import t from "./CommandPaletteItem.vue3.js";
-/* empty css                       */
+/* empty css                        */
 import o from "../../_virtual/_plugin-vue_export-helper.js";
 const r = /* @__PURE__ */ o(t, [["__scopeId", "data-v-66b1ae06"]]);
 export {

package/components/NavbarCommandPalette.vue.js

@@ -3,7 +3,7 @@ import L from "./Icon.vue.js";
 import v from "./Modal.vue.js";
 import N from "./CommandPalette/CommandPaletteContent.vue.js";
 import { $t as U } from "../utils/i18n.js";
-/* empty css                                      */
+/* empty css                                       */
 const V = { class: "block truncate -text-fs-1.5" }, S = { class: "ml-auto inline-flex items-center gap-0.5 px-1.5 py-0.5 rounded text-[10px] font-mono font-medium border border-border/80 bg-background text-muted-foreground ml-1" }, A = /* @__PURE__ */ x({
   __name: "NavbarCommandPalette",
   props: {

package/components/RichTextEditor/RichTextEditor.vue.js

@@ -1,9 +1,9 @@
 import { defineComponent as te, ref as v, shallowRef as ne, watch as oe, computed as h, onMounted as le, onUnmounted as ae, openBlock as C, createElementBlock as L, normalizeClass as re, toDisplayString as I, createCommentVNode as U, createElementVNode as w, createVNode as q, unref as a, normalizeStyle as ie } from "vue";
 /* empty css                         */
-import se from "./RichTextToolbar.vue.js";
-/* empty css                     */
-import de from "./RichTextLinkPopover.vue.js";
-/* empty css                         */
+import se from "./RichTextToolbar.vue2.js";
+/* empty css                    */
+import de from "./RichTextLinkPopover.vue2.js";
+/* empty css                        */
 import { useRichTextImageUpload as ue } from "./composables/useRichTextImageUpload.js";
 import { useRichTextLinks as ce } from "./composables/useRichTextLinks.js";
 const fe = ["aria-labelledby", "aria-describedby"], me = ["id", "for"], ve = { class: "rte-wrapper" }, ye = { class: "rte-body-wrap" }, ge = ["id", "contenteditable", "aria-label", "aria-readonly", "aria-disabled", "aria-invalid"], be = ["id"], Se = /* @__PURE__ */ te({

package/components/RichTextEditor/RichTextLinkPopover.vue3.js

@@ -1,5 +1,5 @@
-import o from "./RichTextLinkPopover.vue.js";
-/* empty css                         */
+import o from "./RichTextLinkPopover.vue2.js";
+/* empty css                        */
 export {
   o as default
 };

package/components/RichTextEditor/RichTextToolbar.vue3.js

@@ -1,5 +1,5 @@
-import o from "./RichTextToolbar.vue.js";
-/* empty css                     */
+import o from "./RichTextToolbar.vue2.js";
+/* empty css                    */
 export {
   o as default
 };

package/components/Screen/ScreenFilter.vue.js

@@ -15,14 +15,14 @@ import "v-datepicker-lite";
 import "v-datepicker-lite/style.css";
 import "@jaames/iro";
 import "@vueuse/core";
-/* empty css                           */
+/* empty css                          */
 import "iconify-icon-picker";
 import "iconify-icon-picker/style.css";
 /* empty css                                 */
 /* empty css                 */
 /* empty css                                         */
-/* empty css                                     */
-/* empty css                                         */
+/* empty css                                    */
+/* empty css                                        */
 import "../../core/config.js";
 /* empty css                                    */
 /* empty css                      */

package/components/ThemeProvider/themeVars.d.ts

@@ -12,5 +12,12 @@ export declare function buildCardOverrideStyles(bg: string, isDark: boolean): st
 /**
  * Compute the full theme-styles record from a {@link ThemeProviderProps}.
  * Pure: no DOM, no Vue. Re-usable from tests and from server-side code.
+ *
+ * Every value is suffixed with `!important` so the provider's tokens
+ * reliably win the cascade against host-app stylesheets that may declare
+ * the same custom properties (e.g. an app-level `.dark { --color-primary:
+ * #xxx }` rule). The provider is the source of truth for the tokens it
+ * generates; `!important` in the value is the correct way to express
+ * that without forcing every consumer to re-style the entire app.
  */
 export declare function buildThemeVariables(props: ThemeProviderProps): ThemeStyles;

package/components/ThemeProvider/themeVars.js

@@ -1,11 +1,11 @@
 import { hexToHSL as s, mixColorHex as a } from "../../utils/colorUtils.js";
-const x = 16, k = 1.25, y = 8, $ = 1440, g = (r, o) => {
+const x = 16, k = 1.25, y = 8, $ = 1440, F = (r) => `${r} !important`, g = (r, o) => {
   const l = Number(r);
   return Number.isFinite(l) && l > 0 ? l : o;
-}, F = (r, o) => {
+}, w = (r, o) => {
   const l = Number(r);
   return Number.isFinite(l) && l >= 0 ? l : o;
-}, i = (r) => Number.parseFloat(r.toFixed(8)).toString(), w = [
+}, i = (r) => Number.parseFloat(r.toFixed(8)).toString(), E = [
   "0.5",
   "1",
   "1.5",
@@ -46,7 +46,7 @@ const x = 16, k = 1.25, y = 8, $ = 1440, g = (r, o) => {
   "19",
   "19.5",
   "20"
-], E = {
+], B = {
   1: 0.95,
   "1.5": 0.91,
   2: 0.85,
@@ -58,7 +58,7 @@ const x = 16, k = 1.25, y = 8, $ = 1440, g = (r, o) => {
   6: 0.55,
   7: 0.5,
   8: 0.45
-}, B = {
+}, T = {
   "0.5": 1,
   1: 1.03030303,
   "1.5": 1.06060606,
@@ -99,7 +99,7 @@ const x = 16, k = 1.25, y = 8, $ = 1440, g = (r, o) => {
   19: 2.95,
   "19.5": 3,
   20: 3.05
-}, T = [
+}, C = [
   ["xs", 0.75, 1],
   ["sm", 0.875, 1.25],
   ["base", 1, 1.5],
@@ -110,7 +110,7 @@ const x = 16, k = 1.25, y = 8, $ = 1440, g = (r, o) => {
   ["4xl", 2.25, 2.5],
   ["5xl", 3, 3],
   ["6xl", 3.75, 3.75]
-], C = {
+], L = {
   "--font-weight-extralight": "200",
   "--font-weight-light": "300",
   "--font-weight-normal": "400",
@@ -119,23 +119,23 @@ const x = 16, k = 1.25, y = 8, $ = 1440, g = (r, o) => {
   "--font-weight-bold": "700",
   "--font-weight-extrabold": "800",
   "--font-weight-black": "900"
-}, L = (r, o, l) => {
+}, _ = (r, o, l) => {
   const t = o / x;
-  r["font-size"] = `${o}px`, r["--font-size-base"] = `${o}px`, T.forEach(([c, e, f]) => {
+  r["font-size"] = `${o}px`, r["--font-size-base"] = `${o}px`, C.forEach(([c, e, n]) => {
     const u = e * t;
-    r[`--text-${c}`] = `${i(u)}rem`, r[`--text-${c}--line-height`] = f === e ? "1" : `calc(${i(f * t)} / ${i(u)})`;
-  }), Object.entries(E).forEach(([c, e]) => {
+    r[`--text-${c}`] = `${i(u)}rem`, r[`--text-${c}--line-height`] = n === e ? "1" : `calc(${i(n * t)} / ${i(u)})`;
+  }), Object.entries(B).forEach(([c, e]) => {
     r[`--text--fs-${c}`] = `${i(e)}em`;
   });
-  const n = l / k;
-  w.forEach((c) => {
-    const f = 1 + (B[c] - 1) * n;
-    r[`--text-fs-${c}`] = `${i(f)}em`;
+  const f = l / k;
+  E.forEach((c) => {
+    const n = 1 + (T[c] - 1) * f;
+    r[`--text-fs-${c}`] = `${i(n)}em`;
   });
-}, _ = (r, o) => {
+}, S = (r, o) => {
   const l = o / x;
   r["--radius"] = `${i(l)}rem`, r["--radius-sm"] = `${i(l * 0.8)}rem`, r["--radius-md"] = `${i(l)}rem`, r["--radius-lg"] = `${i(l * 1.34)}rem`, r["--radius-xl"] = `${i(l * 1.6)}rem`, r["--radius-2xl"] = `${i(l * 2)}rem`, r["--radius-3xl"] = `${i(l * 3)}rem`;
-}, S = (r, o) => {
+}, A = (r, o) => {
   if (typeof o == "string") {
     const t = o.trim().toLowerCase();
     r["--shop-max-width"] = t === "full" || t === "none" ? "none" : o;
@@ -147,7 +147,7 @@ const x = 16, k = 1.25, y = 8, $ = 1440, g = (r, o) => {
   }
   const l = g(o ?? void 0, $);
   r["--shop-max-width"] = `${l}px`;
-}, A = {
+}, N = {
   danger: {
     light: "#ffeeee",
     default: "#ff3b30",
@@ -200,7 +200,7 @@ const x = 16, k = 1.25, y = 8, $ = 1440, g = (r, o) => {
   pink: { subtle: "#fdebf3", subtleFg: "#be185d", subtleBorder: "#f8c6db" },
   cyan: { subtle: "#E1F8F8", subtleFg: "#0e7490", subtleBorder: "#c2ecf5" },
   chart: ["#6366f1", "#22c55e", "#f59e0b", "#ef4444", "#3b82f6", "#ec4899"]
-}, N = {
+}, D = {
   danger: {
     light: "#391413",
     default: "#7F1D1D",
@@ -253,8 +253,8 @@ const x = 16, k = 1.25, y = 8, $ = 1440, g = (r, o) => {
   pink: { subtle: "#2a0f1c", subtleFg: "#f472b6", subtleBorder: "#9d174d" },
   cyan: { subtle: "#0e242a", subtleFg: "#22d3ee", subtleBorder: "#0e7490" },
   chart: ["#818cf8", "#34d399", "#fbbf24", "#fb7185", "#60a5fa", "#f472b6"]
-}, D = (r, o) => {
-  const l = o ? N : A;
+}, I = (r, o) => {
+  const l = o ? D : N;
   ["danger", "warning", "info", "success"].forEach((c) => {
     const e = l[c];
     r[`--color-${c}-light`] = e.light, r[`--color-${c}`] = e.default, r[`--color-${c}-dark`] = e.dark, r[`--color-${c}-fg`] = e.fg, r[`--color-${c}-fg-light`] = e.fgLight, r[`--color-${c}-subtle`] = e.subtle, r[`--color-${c}-subtle-fg`] = e.subtleFg, r[`--color-${c}-subtle-border`] = e.subtleBorder, c === "danger" && (r["--color-destructive"] = e.default, r["--color-destructive-foreground"] = e.fg);
@@ -273,10 +273,10 @@ const x = 16, k = 1.25, y = 8, $ = 1440, g = (r, o) => {
     r[`--color-chart-${e + 1}`] = c;
   });
 };
-function O(r, o) {
+function R(r, o) {
   if (!r) return "";
   if (o) {
-    const c = a(r, "#ffffff", 0.07), e = a(r, "#ffffff", 0.12), f = a(r, "#ffffff", 0.1), u = a(r, "#ffffff", 0.14), d = a(r, "#ffffff", 0.13), v = a(r, "#ffffff", 0.16), b = a(r, "#ffffff", 0.07), h = a(r, "#ffffff", 0.11), m = a(r, "#ffffff", 0.1), p = a(r, "#ffffff", 0.14);
+    const c = a(r, "#ffffff", 0.07), e = a(r, "#ffffff", 0.12), n = a(r, "#ffffff", 0.1), u = a(r, "#ffffff", 0.14), d = a(r, "#ffffff", 0.13), h = a(r, "#ffffff", 0.16), b = a(r, "#ffffff", 0.07), v = a(r, "#ffffff", 0.11), m = a(r, "#ffffff", 0.1), p = a(r, "#ffffff", 0.14);
     return `
 .vlite-theme-provider.dark .bg-card {
   --color-body: ${c} !important;
@@ -286,23 +286,23 @@ function O(r, o) {
   background-color: ${c} !important;
 }
 .vlite-theme-provider.dark .bg-card .bg-card {
-  --color-body: ${f} !important;
-  --color-white: ${f} !important;
+  --color-body: ${n} !important;
+  --color-white: ${n} !important;
   --color-mixture-1: ${u} !important;
   --color-mixture-2: #000000;
-  background-color: ${f} !important;
+  background-color: ${n} !important;
 }
 .vlite-theme-provider.dark .bg-card .bg-card .bg-card {
   --color-body: ${d} !important;
   --color-white: ${d} !important;
-  --color-mixture-1: ${v} !important;
+  --color-mixture-1: ${h} !important;
   --color-mixture-2: #000000;
   background-color: ${d} !important;
 }
 .vlite-theme-provider.dark .bg-card-light {
   --color-body: ${b} !important;
   --color-white: ${b} !important;
-  --color-mixture-1: ${h} !important;
+  --color-mixture-1: ${v} !important;
   --color-mixture-2: #ffffff !important;
   background-color: ${b} !important;
 }
@@ -315,7 +315,7 @@ function O(r, o) {
 }
 `;
   }
-  const l = a(r, "#000000", 0.03), t = a(r, "#000000", 0.055), n = a(r, "#000000", 0.09);
+  const l = a(r, "#000000", 0.03), t = a(r, "#000000", 0.055), f = a(r, "#000000", 0.09);
   return `
 .vlite-theme-provider .bg-card,
 .vlite-theme-provider .bg-card-light {
@@ -336,37 +336,41 @@ function O(r, o) {
 }
 .vlite-theme-provider .bg-card .bg-card .bg-card,
 .vlite-theme-provider .bg-card-light .bg-card-light .bg-card-light {
-  --color-body: ${n} !important;
-  --color-white: ${n} !important;
-  --color-mixture-1: ${n};
+  --color-body: ${f} !important;
+  --color-white: ${f} !important;
+  --color-mixture-1: ${f};
   --color-mixture-2: #000000;
-  background-color: ${n} !important;
+  background-color: ${f} !important;
 }
 `;
 }
-function R(r) {
+function U(r) {
   const o = {};
   if (o["--color-white"] = r.bgColor ?? "#ffffff", o["--color-black"] = "#000000", r.bgColor) {
     o["--color-background"] = r.bgColor, o["--color-body"] = r.bgColor;
-    const l = s(r.bgColor).l < 50;
-    l ? (o["--color-mixture-1"] = "#0c0c0c", o["--color-mixture-2"] = "#ffffff", o["--color-white"] = r.bgColor, o["--color-black"] = "#ffffff", o["--color-gray-50"] = "color-mix(in oklab, var(--color-mixture-1) 96.5%, var(--color-mixture-2))", o["--color-gray-100"] = "color-mix(in oklab, var(--color-mixture-1) 94.5%, var(--color-mixture-2))", o["--color-gray-150"] = "color-mix(in oklab, var(--color-mixture-1) 90.5%, var(--color-mixture-2))", o["--color-gray-200"] = "color-mix(in oklab, var(--color-mixture-1) 86.5%, var(--color-mixture-2))", o["--color-gray-250"] = "color-mix(in oklab, var(--color-mixture-1) 82.5%, var(--color-mixture-2))", o["--color-gray-300"] = "color-mix(in oklab, var(--color-mixture-1) 79.5%, var(--color-mixture-2))", o["--color-gray-350"] = "color-mix(in oklab, var(--color-mixture-1) 70%, var(--color-mixture-2))", o["--color-gray-400"] = "color-mix(in oklab, var(--color-mixture-1) 62%, var(--color-mixture-2))", o["--color-gray-500"] = "color-mix(in oklab, var(--color-mixture-1) 49%, var(--color-mixture-2))", o["--color-gray-600"] = "color-mix(in oklab, var(--color-mixture-1) 39%, var(--color-mixture-2))", o["--color-gray-700"] = "color-mix(in oklab, var(--color-mixture-1) 27%, var(--color-mixture-2))", o["--color-gray-800"] = "color-mix(in oklab, var(--color-mixture-1) 17%, var(--color-mixture-2))", o["--color-gray-850"] = "color-mix(in oklab, var(--color-mixture-1) 10%, var(--color-mixture-2))", o["--color-gray-900"] = "color-mix(in oklab, var(--color-mixture-1) 6%, var(--color-mixture-2))", o["--color-gray-950"] = "var(--color-mixture-2)", o["--color-foreground"] = "var(--color-gray-850)", o["--color-border"] = "color-mix(in oklab, var(--color-background) 74%, #ffffff)", o["--color-input"] = "color-mix(in oklab, var(--color-background) 70%, #ffffff)", o["--color-card"] = "color-mix(in oklab, var(--color-background) 94%, #ffffff)", o["--color-card-light"] = "color-mix(in oklab, var(--color-background) 96%, #ffffff)", o["--color-secondary"] = "color-mix(in oklab, var(--color-background) 87.5%, #ffffff)", o["--color-secondary-foreground"] = "var(--color-foreground)", o["--color-muted"] = "color-mix(in oklab, var(--color-background) 92.5%, #ffffff)", o["--color-muted-light"] = "color-mix(in oklab, var(--color-background) 95%, #ffffff)", o["--color-muted-foreground"] = "var(--color-gray-600)", o["--color-accent"] = "color-mix(in oklab, var(--color-background) 90%, #ffffff)", o["--color-accent-foreground"] = "var(--color-foreground)", o["--color-scrollbar"] = "color-mix(in oklab, var(--color-background) 80%, #ffffff)", o["--color-scrollbar-hover"] = "color-mix(in oklab, var(--color-background) 75%, #ffffff)", o["--shadow-sm"] = "none", o["--shadow-DEFAULT"] = "none", o["--shadow-md"] = "none", o["--shadow-lg"] = "none", o["--shadow-xl"] = "none") : (o["--color-mixture-1"] = "#ffffff", o["--color-mixture-2"] = "#000000", o["--color-gray-50"] = "color-mix(in oklab, var(--color-mixture-1) 98%, var(--color-mixture-2))", o["--color-gray-100"] = "color-mix(in oklab, var(--color-mixture-1) 97%, var(--color-mixture-2))", o["--color-gray-150"] = "color-mix(in oklab, var(--color-mixture-1) 96%, var(--color-mixture-2))", o["--color-gray-200"] = "color-mix(in oklab, var(--color-mixture-1) 94%, var(--color-mixture-2))", o["--color-gray-250"] = "color-mix(in oklab, var(--color-mixture-1) 92%, var(--color-mixture-2))", o["--color-gray-300"] = "color-mix(in oklab, var(--color-mixture-1) 86%, var(--color-mixture-2))", o["--color-gray-350"] = "color-mix(in oklab, var(--color-mixture-1) 80%, var(--color-mixture-2))", o["--color-gray-400"] = "color-mix(in oklab, var(--color-mixture-1) 62%, var(--color-mixture-2))", o["--color-gray-500"] = "color-mix(in oklab, var(--color-mixture-1) 49%, var(--color-mixture-2))", o["--color-gray-600"] = "color-mix(in oklab, var(--color-mixture-1) 39%, var(--color-mixture-2))", o["--color-gray-700"] = "color-mix(in oklab, var(--color-mixture-1) 27%, var(--color-mixture-2))", o["--color-gray-800"] = "color-mix(in oklab, var(--color-mixture-1) 17%, var(--color-mixture-2))", o["--color-gray-850"] = "color-mix(in oklab, var(--color-mixture-1) 10%, var(--color-mixture-2))", o["--color-gray-900"] = "color-mix(in oklab, var(--color-mixture-1) 6%, var(--color-mixture-2))", o["--color-gray-950"] = "var(--color-mixture-2)", o["--color-foreground"] = "var(--color-gray-850)", o["--color-border"] = "color-mix(in oklab, var(--color-background) 88%, #000000)", o["--color-input"] = "color-mix(in oklab, var(--color-background) 87%, #000000)", o["--color-card"] = "color-mix(in oklab, var(--color-background) 96%, #000000)", o["--color-card-light"] = "color-mix(in oklab, var(--color-background) 98%, #000000)", o["--color-secondary"] = "color-mix(in oklab, var(--color-background) 94.8%, #000000)", o["--color-secondary-foreground"] = "var(--color-foreground)", o["--color-muted"] = "color-mix(in oklab, var(--color-background) 94%, #000000)", o["--color-muted-light"] = "color-mix(in oklab, var(--color-background) 97%, #000000)", o["--color-muted-foreground"] = "color-mix(in oklab, var(--color-background) 10%, #000000)", o["--color-accent"] = "color-mix(in oklab, var(--color-background) 95%, #000000)", o["--color-accent-foreground"] = "var(--color-foreground)", o["--color-scrollbar"] = "color-mix(in oklab, var(--color-background) 80%, #000000)", o["--color-scrollbar-hover"] = "color-mix(in oklab, var(--color-background) 75%, #000000)", o["--shadow-sm"] = "rgba(95, 97, 100, 0.07) 0px 15px 90px 0px, rgba(0, 0, 0, 0.02) 0.2px 0.2px 1px 0px", o["--shadow-DEFAULT"] = "rgba(55, 59, 74, 0.074) 0px 10px 55px 3px", o["--shadow-md"] = "var(--shadow-DEFAULT)", o["--shadow-lg"] = "rgba(100, 100, 111, 0.15) 0px 7px 40px -1px", o["--shadow-xl"] = "rgba(0, 0, 0, 0.2) 0px 15px 50px -12px"), D(o, l);
+    const t = s(r.bgColor).l < 50;
+    t ? (o["--color-mixture-1"] = "#0c0c0c", o["--color-mixture-2"] = "#ffffff", o["--color-white"] = r.bgColor, o["--color-black"] = "#ffffff", o["--color-gray-50"] = "color-mix(in oklab, var(--color-mixture-1) 96.5%, var(--color-mixture-2))", o["--color-gray-100"] = "color-mix(in oklab, var(--color-mixture-1) 94.5%, var(--color-mixture-2))", o["--color-gray-150"] = "color-mix(in oklab, var(--color-mixture-1) 90.5%, var(--color-mixture-2))", o["--color-gray-200"] = "color-mix(in oklab, var(--color-mixture-1) 86.5%, var(--color-mixture-2))", o["--color-gray-250"] = "color-mix(in oklab, var(--color-mixture-1) 82.5%, var(--color-mixture-2))", o["--color-gray-300"] = "color-mix(in oklab, var(--color-mixture-1) 79.5%, var(--color-mixture-2))", o["--color-gray-350"] = "color-mix(in oklab, var(--color-mixture-1) 70%, var(--color-mixture-2))", o["--color-gray-400"] = "color-mix(in oklab, var(--color-mixture-1) 62%, var(--color-mixture-2))", o["--color-gray-500"] = "color-mix(in oklab, var(--color-mixture-1) 49%, var(--color-mixture-2))", o["--color-gray-600"] = "color-mix(in oklab, var(--color-mixture-1) 39%, var(--color-mixture-2))", o["--color-gray-700"] = "color-mix(in oklab, var(--color-mixture-1) 27%, var(--color-mixture-2))", o["--color-gray-800"] = "color-mix(in oklab, var(--color-mixture-1) 17%, var(--color-mixture-2))", o["--color-gray-850"] = "color-mix(in oklab, var(--color-mixture-1) 10%, var(--color-mixture-2))", o["--color-gray-900"] = "color-mix(in oklab, var(--color-mixture-1) 6%, var(--color-mixture-2))", o["--color-gray-950"] = "var(--color-mixture-2)", o["--color-foreground"] = "var(--color-gray-850)", o["--color-border"] = "color-mix(in oklab, var(--color-background) 74%, #ffffff)", o["--color-input"] = "color-mix(in oklab, var(--color-background) 70%, #ffffff)", o["--color-card"] = "color-mix(in oklab, var(--color-background) 94%, #ffffff)", o["--color-card-light"] = "color-mix(in oklab, var(--color-background) 96%, #ffffff)", o["--color-secondary"] = "color-mix(in oklab, var(--color-background) 87.5%, #ffffff)", o["--color-secondary-foreground"] = "var(--color-foreground)", o["--color-muted"] = "color-mix(in oklab, var(--color-background) 92.5%, #ffffff)", o["--color-muted-light"] = "color-mix(in oklab, var(--color-background) 95%, #ffffff)", o["--color-muted-foreground"] = "var(--color-gray-600)", o["--color-accent"] = "color-mix(in oklab, var(--color-background) 90%, #ffffff)", o["--color-accent-foreground"] = "var(--color-foreground)", o["--color-scrollbar"] = "color-mix(in oklab, var(--color-background) 80%, #ffffff)", o["--color-scrollbar-hover"] = "color-mix(in oklab, var(--color-background) 75%, #ffffff)", o["--shadow-sm"] = "none", o["--shadow-DEFAULT"] = "none", o["--shadow-md"] = "none", o["--shadow-lg"] = "none", o["--shadow-xl"] = "none") : (o["--color-mixture-1"] = "#ffffff", o["--color-mixture-2"] = "#000000", o["--color-gray-50"] = "color-mix(in oklab, var(--color-mixture-1) 98%, var(--color-mixture-2))", o["--color-gray-100"] = "color-mix(in oklab, var(--color-mixture-1) 97%, var(--color-mixture-2))", o["--color-gray-150"] = "color-mix(in oklab, var(--color-mixture-1) 96%, var(--color-mixture-2))", o["--color-gray-200"] = "color-mix(in oklab, var(--color-mixture-1) 94%, var(--color-mixture-2))", o["--color-gray-250"] = "color-mix(in oklab, var(--color-mixture-1) 92%, var(--color-mixture-2))", o["--color-gray-300"] = "color-mix(in oklab, var(--color-mixture-1) 86%, var(--color-mixture-2))", o["--color-gray-350"] = "color-mix(in oklab, var(--color-mixture-1) 80%, var(--color-mixture-2))", o["--color-gray-400"] = "color-mix(in oklab, var(--color-mixture-1) 62%, var(--color-mixture-2))", o["--color-gray-500"] = "color-mix(in oklab, var(--color-mixture-1) 49%, var(--color-mixture-2))", o["--color-gray-600"] = "color-mix(in oklab, var(--color-mixture-1) 39%, var(--color-mixture-2))", o["--color-gray-700"] = "color-mix(in oklab, var(--color-mixture-1) 27%, var(--color-mixture-2))", o["--color-gray-800"] = "color-mix(in oklab, var(--color-mixture-1) 17%, var(--color-mixture-2))", o["--color-gray-850"] = "color-mix(in oklab, var(--color-mixture-1) 10%, var(--color-mixture-2))", o["--color-gray-900"] = "color-mix(in oklab, var(--color-mixture-1) 6%, var(--color-mixture-2))", o["--color-gray-950"] = "var(--color-mixture-2)", o["--color-foreground"] = "var(--color-gray-850)", o["--color-border"] = "color-mix(in oklab, var(--color-background) 88%, #000000)", o["--color-input"] = "color-mix(in oklab, var(--color-background) 87%, #000000)", o["--color-card"] = "color-mix(in oklab, var(--color-background) 96%, #000000)", o["--color-card-light"] = "color-mix(in oklab, var(--color-background) 98%, #000000)", o["--color-secondary"] = "color-mix(in oklab, var(--color-background) 94.8%, #000000)", o["--color-secondary-foreground"] = "var(--color-foreground)", o["--color-muted"] = "color-mix(in oklab, var(--color-background) 94%, #000000)", o["--color-muted-light"] = "color-mix(in oklab, var(--color-background) 97%, #000000)", o["--color-muted-foreground"] = "color-mix(in oklab, var(--color-background) 10%, #000000)", o["--color-accent"] = "color-mix(in oklab, var(--color-background) 95%, #000000)", o["--color-accent-foreground"] = "var(--color-foreground)", o["--color-scrollbar"] = "color-mix(in oklab, var(--color-background) 80%, #000000)", o["--color-scrollbar-hover"] = "color-mix(in oklab, var(--color-background) 75%, #000000)", o["--shadow-sm"] = "rgba(95, 97, 100, 0.07) 0px 15px 90px 0px, rgba(0, 0, 0, 0.02) 0.2px 0.2px 1px 0px", o["--shadow-DEFAULT"] = "rgba(55, 59, 74, 0.074) 0px 10px 55px 3px", o["--shadow-md"] = "var(--shadow-DEFAULT)", o["--shadow-lg"] = "rgba(100, 100, 111, 0.15) 0px 7px 40px -1px", o["--shadow-xl"] = "rgba(0, 0, 0, 0.2) 0px 15px 50px -12px"), I(o, t);
   }
   if (r.primaryColor) {
     o["--color-primary"] = r.primaryColor;
-    const { l } = s(r.primaryColor), t = l > 50 ? "#171717" : "#fafafa";
-    o["--color-primary-foreground"] = t, o["--color-primary-fg"] = t, o["--color-primary-dark"] = `color-mix(in oklab, ${r.primaryColor} 80%, #000000)`, o["--color-primary-light"] = `color-mix(in oklab, ${t} 92%, ${r.primaryColor})`, o["--color-primary-fg-light"] = o["--color-primary-dark"];
+    const { l: t } = s(r.primaryColor), f = t > 50 ? "#171717" : "#fafafa";
+    o["--color-primary-foreground"] = f, o["--color-primary-fg"] = f, o["--color-primary-dark"] = `color-mix(in oklab, ${r.primaryColor} 80%, #000000)`, o["--color-primary-light"] = `color-mix(in oklab, ${f} 92%, ${r.primaryColor})`, o["--color-primary-fg-light"] = o["--color-primary-dark"];
   }
-  return r.footerBgColor && (o["--color-footer"] = r.footerBgColor), o["--spacing"] = "0.25rem", Object.assign(o, C), L(
+  r.footerBgColor && (o["--color-footer"] = r.footerBgColor), o["--spacing"] = "0.25rem", Object.assign(o, L), _(
     o,
     g(r.baseFontSize, x),
     g(r.headingScale, k)
-  ), _(o, F(r.borderRadius, y)), S(o, r.maxWidth), o["--tooltip-bg"] = "var(--color-background)", o["--tooltip-text"] = "var(--color-foreground)", o["--tooltip-border"] = "color-mix(in oklab, var(--color-mixture-1) 90%, var(--color-mixture-2))", o["--tooltip-radius"] = "var(--radius)", o["--tooltip-shadow"] = "var(--shadow-DEFAULT)", o["--tooltip-arrow-size"] = "0.5em", o["--tooltip-z-index"] = "50", o["--date-picker-border"] = "var(--color-border)", o["--date-picker-radius"] = "var(--radius)", o["--timer-picker-bg"] = "var(--color-background)", o["--iconPicker-border"] = "var(--color-border)", o;
+  ), S(o, w(r.borderRadius, y)), A(o, r.maxWidth), o["--tooltip-bg"] = "var(--color-background)", o["--tooltip-text"] = "var(--color-foreground)", o["--tooltip-border"] = "color-mix(in oklab, var(--color-mixture-1) 90%, var(--color-mixture-2))", o["--tooltip-radius"] = "var(--radius)", o["--tooltip-shadow"] = "var(--shadow-DEFAULT)", o["--tooltip-arrow-size"] = "0.5em", o["--tooltip-z-index"] = "50", o["--date-picker-border"] = "var(--color-border)", o["--date-picker-radius"] = "var(--radius)", o["--timer-picker-bg"] = "var(--color-background)", o["--iconPicker-border"] = "var(--color-border)";
+  const l = {};
+  for (const t of Object.keys(o))
+    l[t] = F(o[t]);
+  return l;
 }
 export {
   x as DEFAULT_BASE_FONT_SIZE,
   y as DEFAULT_BORDER_RADIUS,
   k as DEFAULT_HEADING_SCALE,
   $ as DEFAULT_MAX_WIDTH,
-  O as buildCardOverrideStyles,
-  R as buildThemeVariables
+  R as buildCardOverrideStyles,
+  U as buildThemeVariables
 };

package/package.json

@@ -3,7 +3,7 @@
   "private": false,
   "description": "A Vue 3 UI component library built with Tailwind CSS.",
   "license": "MIT",
-  "version": "1.4.9",
+  "version": "1.4.10",
   "type": "module",
   "main": "index.js",
   "module": "index.js",