@indielayer/ui 1.14.1 → 1.14.3

package/lib/components/badge/Badge.vue.js

@@ -1,4 +1,4 @@
-import { defineComponent as v, useSlots as z, computed as l, openBlock as o, createBlock as S, resolveDynamicComponent as B, normalizeStyle as n, unref as s, normalizeClass as i, withCtx as w, createElementVNode as r, renderSlot as a, createElementBlock as p, createCommentVNode as f } from "vue";
+import { defineComponent as v, useSlots as z, computed as i, openBlock as o, createBlock as S, resolveDynamicComponent as B, normalizeStyle as l, unref as s, normalizeClass as n, withCtx as w, createElementVNode as r, renderSlot as a, createElementBlock as p, createCommentVNode as f } from "vue";
 import { useTheme as C } from "../../composables/useTheme.js";
 import { useCommon as d } from "../../composables/useCommon.js";
 import { useColors as k } from "../../composables/useColors.js";
@@ -40,16 +40,16 @@ const N = { class: "relative inline-block" }, X = {
   ...E,
   props: $,
   setup(m) {
-    const t = m, u = z(), g = l(() => {
+    const t = m, u = z(), g = i(() => {
       const e = [];
       return t.position === "top" && e.push("top-0"), t.position === "bottom" && e.push("bottom-0"), t.align === "left" && e.push("left-0"), t.align === "right" && e.push("right-0"), u.content ? e.push("-m-[7.5%]") : t.outlined ? e.push("-m-[5%]") : e.push("-m-[3.5%]"), e;
-    }), c = l(() => {
+    }), c = i(() => {
       const e = {};
       return t.offsetX && (e[t.align === "left" ? "marginLeft" : "marginRight"] = t.offsetX + "px"), t.offsetY && (e[t.position === "top" ? "marginTop" : "marginBottom"] = t.offsetY + "px"), e;
     }), { styles: h, classes: b, className: y } = C("Badge", {}, t);
     return (e, P) => (o(), S(B(e.tag), {
-      style: n(s(h)),
-      class: i([
+      style: l(s(h)),
+      class: n([
         s(y),
         s(b).wrapper
       ])
@@ -59,17 +59,17 @@ const N = { class: "relative inline-block" }, X = {
           a(e.$slots, "default"),
           e.show ? (o(), p("div", {
             key: 0,
-            class: i(["absolute rounded-full z-10 bg-[color:var(--x-badge-bg)]", [
+            class: n(["absolute rounded-full z-10 bg-[color:var(--x-badge-bg)] pointer-events-none", [
               g.value,
               {
                 "border-2 border-secondary-50 dark:border-secondary-900": e.outlined
               }
             ]]),
-            style: n(c.value)
+            style: l(c.value)
           }, [
             e.animated ? (o(), p("div", X)) : f("", !0),
             r("div", {
-              class: i(["text-xs text-white overflow-hidden", [
+              class: n(["text-xs text-white overflow-hidden", [
                 e.$slots.content ? "flex items-center justify-center min-w-[1.25rem] h-5 px-1.5" : {
                   "p-1": e.size === "xs",
                   "p-[0.312rem]": e.size === "sm",

package/lib/components/checkbox/Checkbox.vue2.js

@@ -1,4 +1,4 @@
-import { defineComponent as R, ref as w, watch as m, unref as o, openBlock as i, createElementBlock as p, normalizeStyle as T, normalizeClass as u, createElementVNode as d, withKeys as H, withModifiers as O, withDirectives as U, mergeProps as X, toHandlers as j, vModelCheckbox as J, createBlock as V, renderSlot as C, toDisplayString as Q, createCommentVNode as W } from "vue";
+import { defineComponent as R, ref as w, watch as m, unref as r, openBlock as i, createElementBlock as p, normalizeStyle as T, normalizeClass as t, createElementVNode as d, withKeys as H, withModifiers as O, withDirectives as U, mergeProps as X, toHandlers as j, vModelCheckbox as J, createBlock as V, renderSlot as C, toDisplayString as Q, createCommentVNode as W } from "vue";
 import { useColors as Y } from "../../composables/useColors.js";
 import { useCommon as I } from "../../composables/useCommon.js";
 import { useInputtable as f } from "../../composables/useInputtable.js";
@@ -6,11 +6,7 @@ import { useInteractive as z } from "../../composables/useInteractive.js";
 import { useTheme as Z } from "../../composables/useTheme.js";
 import x from "../inputFooter/InputFooter.vue.js";
 import _ from "../spinner/Spinner.vue.js";
-const ee = ["onKeypress"], se = ["id", "name", "aria-checked", "aria-disabled", "disabled", "required"], le = {
-  key: 1,
-  name: "check-icon",
-  class: "w-2/3 h-[2px] bg-white dark:bg-secondary-900"
-}, ae = ["textContent"], oe = {
+const ee = ["onKeypress"], le = ["id", "name", "aria-checked", "aria-disabled", "disabled", "required"], se = ["textContent"], ae = {
   ...I.props(),
   ...Y.props("primary"),
   ...z.props(),
@@ -23,14 +19,14 @@ const ee = ["onKeypress"], se = ["id", "name", "aria-checked", "aria-disabled",
   validators: {
     ...I.validators()
   }
-}, fe = /* @__PURE__ */ R({
+}, ce = /* @__PURE__ */ R({
   ...re,
-  props: oe,
+  props: ae,
   emits: f.emits(!1),
   setup(A, { expose: B, emit: $ }) {
     const l = A, v = $, b = w(null), a = w(!1);
     function y() {
-      a.value = !a.value;
+      l.disabled || l.loading || l.readonly || (a.value = !a.value);
     }
     const { focus: h, blur: F } = z(b), {
       errorInternal: G,
@@ -38,29 +34,29 @@ const ee = ["onKeypress"], se = ["id", "name", "aria-checked", "aria-disabled",
       isInsideForm: S,
       isInsideFormGroup: c,
       isFirstValidation: q,
-      formGroup: r,
+      formGroup: o,
       reset: E,
       validate: k,
       setError: K
     } = f(l, { focus: h, emit: v, withListeners: !1 });
-    c ? (m(() => r.value, () => {
-      const e = o(r.value);
+    c ? (m(() => o.value, () => {
+      const e = r(o.value);
       e && Array.isArray(e) && e.includes(l.value) ? a.value = !0 : a.value = !1;
     }, { immediate: !0, deep: !0 }), m(() => a.value, (e) => {
       if (!l.value)
         return;
-      const s = o(r.value);
+      const s = r(o.value);
       if (e)
         if (s && Array.isArray(s)) {
           if (!s.includes(l.value)) {
-            const n = [...s, l.value];
-            r.setValue(n);
+            const u = [...s, l.value];
+            o.setValue(u);
           }
         } else
-          r.setValue([l.value]);
+          o.setValue([l.value]);
       else if (s && Array.isArray(s) && s.includes(l.value)) {
-        const n = s.findIndex((P) => P === l.value), g = [...s];
-        g.splice(n, 1), r.setValue(g);
+        const u = s.findIndex((P) => P === l.value), g = [...s];
+        g.splice(u, 1), o.setValue(g);
       }
     })) : (m(() => l.modelValue, (e) => {
       a.value = !!e;
@@ -73,37 +69,37 @@ const ee = ["onKeypress"], se = ["id", "name", "aria-checked", "aria-disabled",
           l.validateOnInput && !q.value && k(l.modelValue);
         }, 0);
       }
-    }, { styles: M, classes: t, className: D } = Z("Checkbox", {}, l, { checked: a, isInsideForm: S, isInsideFormGroup: c });
+    }, { styles: M, classes: n, className: D } = Z("Checkbox", {}, l, { checked: a, isInsideForm: S, isInsideFormGroup: c });
     return B({ focus: h, blur: F, toggle: y, reset: E, validate: k, setError: K }), (e, s) => (i(), p("label", {
-      style: T(o(M)),
-      class: u([
-        o(D),
-        o(t).wrapper
+      style: T(r(M)),
+      class: t([
+        r(D),
+        r(n).wrapper
       ])
     }, [
       d("div", {
         ref_key: "elRef",
         ref: b,
-        class: u(o(t).content),
+        class: t(r(n).content),
         tabindex: "0",
         onKeypress: H(O(y, ["prevent", "stop"]), ["space"])
       }, [
         U(d("input", X({
           id: e.id,
-          "onUpdate:modelValue": s[0] || (s[0] = (n) => a.value = n),
+          "onUpdate:modelValue": s[0] || (s[0] = (u) => a.value = u),
           name: e.name,
           "aria-checked": e.indeterminate ? "mixed" : a.value ? "true" : "false",
           "aria-disabled": e.disabled ? "true" : void 0,
           type: "checkbox",
           class: "invisible absolute",
-          disabled: e.disabled || e.loading,
+          disabled: e.disabled || e.loading || e.readonly,
           required: e.required
-        }, j(L, !0)), null, 16, se), [
+        }, j(L, !0)), null, 16, le), [
           [J, a.value]
         ]),
         d("div", {
-          class: u([
-            o(t).box,
+          class: t([
+            r(n).box,
             [e.glow && !e.disabled && !e.loading ? e.$style["checkbox--glow"] : ""]
           ])
         }, [
@@ -111,32 +107,36 @@ const ee = ["onKeypress"], se = ["id", "name", "aria-checked", "aria-disabled",
             key: 0,
             size: e.size,
             class: "absolute"
-          }, null, 8, ["size"])) : e.indeterminate ? (i(), p("span", le)) : C(e.$slots, "icon", { key: 2 }, () => [
+          }, null, 8, ["size"])) : e.indeterminate ? (i(), p("span", {
+            key: 1,
+            name: "check-icon",
+            class: t(["w-2/3 h-[1.5px]", [e.disabled ? "bg-secondary-400 dark:bg-secondary-500" : "bg-white"]])
+          }, null, 2)) : C(e.$slots, "icon", { key: 2 }, () => [
             (i(), p("svg", {
               viewBox: "0 0 20 20",
-              class: u([o(t).icon, { "opacity-0": !a.value }])
+              class: t([r(n).icon, { "opacity-0": !a.value }])
             }, s[1] || (s[1] = [
               d("path", { d: "M0 11l2-2 5 5L18 3l2 2L7 18z" }, null, -1)
             ]), 2))
           ])
         ], 2),
         d("div", {
-          class: u(o(t).label)
+          class: t(r(n).label)
         }, [
           e.label ? (i(), p("span", {
             key: 0,
             textContent: Q(e.label)
-          }, null, 8, ae)) : C(e.$slots, "default", { key: 1 })
+          }, null, 8, se)) : C(e.$slots, "default", { key: 1 })
         ], 2)
       ], 42, ee),
-      o(N) ? W("", !0) : (i(), V(x, {
+      r(N) ? W("", !0) : (i(), V(x, {
         key: 0,
-        error: o(G),
+        error: r(G),
         helper: e.helper
       }, null, 8, ["error", "helper"]))
     ], 6));
   }
 });
 export {
-  fe as default
+  ce as default
 };

package/lib/components/checkbox/theme/Checkbox.base.theme.js

@@ -13,16 +13,16 @@ const i = {
       return e.disabled && r.push("cursor-not-allowed"), r;
     },
     icon: ({ props: e }) => {
-      const r = ["fill-current text-white"];
-      return e.size === "lg" ? r.push("h-3 w-3") : e.size === "xl" ? r.push("h-4 w-4") : r.push("h-2.5 w-2.5"), r;
+      const r = ["fill-current"];
+      return e.disabled ? r.push("text-secondary-400 dark:text-secondary-500") : r.push("text-white"), e.size === "lg" ? r.push("h-3 w-3") : e.size === "xl" ? r.push("h-4 w-4") : r.push("h-2.5 w-2.5"), r;
     },
     label: ({ props: e, data: r }) => {
       const s = ["inline-block text-secondary-800 dark:text-secondary-200 pl-2"];
       return s.push(r.isInsideFormGroup ? "font-normal" : "font-medium"), e.size === "xs" ? s.push("text-xs") : e.size === "sm" ? s.push("text-sm") : e.size === "lg" ? s.push("text-lg") : e.size === "xl" && s.push("text-xl"), s;
     }
   },
-  styles({ props: e, colors: r, css: s, data: a }) {
-    const t = r.getPalette("gray"), l = r.getPalette(e.color), o = [];
+  styles({ props: e, colors: r, css: s, data: o }) {
+    const t = r.getPalette("gray"), l = r.getPalette(e.color), a = [];
     return e.loading ? s.variables({
       bg: "transparent",
       border: "transparent",
@@ -30,28 +30,28 @@ const i = {
         bg: "transparent",
         border: "transparent"
       }
-    }) : (e.disabled ? o.push(s.variables({
+    }) : (e.disabled ? a.push(s.variables({
       bg: t[100],
       border: t[200],
       dark: {
         bg: t[800],
         border: t[700]
       }
-    })) : (a.checked ? o.push(s.variables({
+    })) : (o.checked ? a.push(s.variables({
       bg: l[500],
       border: l[500],
       dark: {
         bg: l[500],
         border: l[500]
       }
-    })) : o.push(s.variables({
+    })) : a.push(s.variables({
       bg: "#fff",
       border: e.glow ? l[300] : t[300],
       dark: {
         bg: t[900],
         border: e.glow ? l[300] : t[400]
       }
-    })), e.glow && o.push(s.get("glow", r.getColorOpacity(l[500], 0.5)))), o);
+    })), e.glow && a.push(s.get("glow", r.getColorOpacity(l[500], 0.5)))), a);
   }
 }, n = i;
 export {

package/lib/components/notifications/Notifications.vue.d.ts

@@ -27,6 +27,10 @@ declare const notificationsProps: {
         type: (SymbolConstructor | StringConstructor)[];
         default: import("vue").InjectionKey<NotificationInjection>;
     };
+    offset: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
     color: {
         readonly type: StringConstructor;
         readonly default: string | undefined;
@@ -97,6 +101,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<im
         type: (SymbolConstructor | StringConstructor)[];
         default: import("vue").InjectionKey<NotificationInjection>;
     };
+    offset: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
     color: {
         readonly type: StringConstructor;
         readonly default: string | undefined;
@@ -135,6 +143,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<im
         type: (SymbolConstructor | StringConstructor)[];
         default: import("vue").InjectionKey<NotificationInjection>;
     };
+    offset: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
     color: {
         readonly type: StringConstructor;
         readonly default: string | undefined;
@@ -144,6 +156,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<im
     color: string;
     position: "top" | "bottom";
     align: "left" | "right";
+    offset: string | number;
     timeout: number;
     pauseOnHover: boolean;
     injectKey: string | symbol;

package/lib/components/notifications/Notifications.vue.js

@@ -1,25 +1,25 @@
-import { defineComponent as I, ref as g, provide as q, watch as j, openBlock as a, createElementBlock as p, Fragment as H, renderSlot as J, createBlock as x, Teleport as Q, createElementVNode as b, normalizeStyle as D, unref as i, normalizeClass as _, createVNode as O, TransitionGroup as U, withCtx as W, renderList as Y, createCommentVNode as y, toDisplayString as C } from "vue";
-import { injectNotificationKey as Z } from "../../composables/keys.js";
-import { useColors as A } from "../../composables/useColors.js";
-import { useCSS as ee } from "../../composables/useCSS.js";
-import { useTheme as te } from "../../composables/useTheme.js";
-import { closeIcon as oe } from "../../common/icons.js";
-import K from "../icon/Icon.vue.js";
-import re from "../spacer/Spacer.js";
-const se = ["onMouseenter", "onMouseleave"], ae = { class: "flex items-center flex-wrap" }, le = {
+import { defineComponent as q, ref as g, provide as J, watch as D, computed as Q, openBlock as a, createElementBlock as p, Fragment as O, renderSlot as U, createBlock as x, Teleport as W, createElementVNode as k, normalizeStyle as _, unref as i, normalizeClass as C, createVNode as K, TransitionGroup as Y, withCtx as Z, renderList as ee, createCommentVNode as y, toDisplayString as M } from "vue";
+import { injectNotificationKey as te } from "../../composables/keys.js";
+import { useColors as E } from "../../composables/useColors.js";
+import { useCSS as oe } from "../../composables/useCSS.js";
+import { useTheme as re } from "../../composables/useTheme.js";
+import { closeIcon as se } from "../../common/icons.js";
+import A from "../icon/Icon.vue.js";
+import ae from "../spacer/Spacer.js";
+const le = ["onMouseenter", "onMouseleave"], ne = { class: "flex items-center flex-wrap" }, ie = {
   key: 0,
   class: "font-medium mr-2"
-}, ne = ["onClick"], ie = {
-  ...A.props("primary"),
+}, ce = ["onClick"], ue = {
+  ...E.props("primary"),
   align: {
     type: String,
     default: "right",
-    validator: (c) => M.align.includes(c)
+    validator: (c) => S.align.includes(c)
   },
   position: {
     type: String,
     default: "bottom",
-    validator: (c) => M.position.includes(c)
+    validator: (c) => S.position.includes(c)
   },
   timeout: {
     type: Number,
@@ -35,32 +35,36 @@ const se = ["onMouseenter", "onMouseleave"], ae = { class: "flex items-center fl
   },
   injectKey: {
     type: [Symbol, String],
-    default: Z
+    default: te
+  },
+  offset: {
+    type: [String, Number],
+    default: 0
   }
-}, M = {
+}, S = {
   align: ["left", "right"],
   position: ["bottom", "top"]
-}, ce = {
+}, me = {
   name: "XNotifications",
-  validators: M
-}, he = /* @__PURE__ */ I({
-  ...ce,
-  props: ie,
-  setup(c, { expose: E }) {
-    const r = c, u = g(r.align), s = g(r.position), d = g([]), z = g(null), L = ee("notification"), S = A();
-    q(r.injectKey, {
-      log: w,
-      info: N,
+  validators: S
+}, xe = /* @__PURE__ */ q({
+  ...me,
+  props: ue,
+  setup(c, { expose: L }) {
+    const r = c, u = g(r.align), s = g(r.position), d = g([]), z = g(null), R = oe("notification"), w = E();
+    J(r.injectKey, {
+      log: N,
+      info: $,
       warn: v,
       error: B,
       warning: v,
       success: T
-    }), j(() => r.align, (e) => {
+    }), D(() => r.align, (e) => {
       u.value = e;
-    }), j(() => r.position, (e) => {
+    }), D(() => r.position, (e) => {
       s.value = e;
     });
-    function w(e) {
+    function N(e) {
       const o = typeof e == "string", t = {
         message: o ? e : void 0
       };
@@ -69,7 +73,7 @@ const se = ["onMouseenter", "onMouseleave"], ae = { class: "flex items-center fl
         ...e
       });
     }
-    function N(e) {
+    function $(e) {
       const o = typeof e == "string", t = {
         icon: '<path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd" />',
         iconColor: "sky",
@@ -114,7 +118,7 @@ const se = ["onMouseenter", "onMouseleave"], ae = { class: "flex items-center fl
       });
     }
     function m(e) {
-      var $;
+      var H;
       const t = {
         ...{
           id: Date.now(),
@@ -127,7 +131,7 @@ const se = ["onMouseenter", "onMouseleave"], ae = { class: "flex items-center fl
         ...e
       };
       u.value = t.align, s.value = t.position;
-      const l = S.getPalette(t.iconColor), f = S.getPalette((($ = t.action) == null ? void 0 : $.color) || "primary"), V = L.variables({
+      const l = w.getPalette(t.iconColor), f = w.getPalette(((H = t.action) == null ? void 0 : H.color) || "primary"), j = R.variables({
         icon: l[400],
         action: f[400],
         hover: {
@@ -141,7 +145,7 @@ const se = ["onMouseenter", "onMouseleave"], ae = { class: "flex items-center fl
           }
         }
       });
-      if (t.style = Object.keys(V).map((n) => `${n}: ${V[n]}`).join(";"), t.timeout) {
+      if (t.style = Object.keys(j).map((n) => `${n}: ${j[n]}`).join(";"), t.timeout) {
         const n = P(t, t.timeout);
         t.timer = n, t.timerStart = Date.now();
       }
@@ -158,26 +162,26 @@ const se = ["onMouseenter", "onMouseleave"], ae = { class: "flex items-center fl
         h(e);
       }, o);
     }
-    function R(e) {
+    function X(e) {
       r.pauseOnHover && e.timer && (clearTimeout(e.timer), e.timer = void 0);
     }
-    function X(e) {
+    function F(e) {
       if (r.pauseOnHover && e.timeout && e.timerStart) {
         const o = Math.max(e.timeout - (Date.now() - e.timerStart), 1e3);
         e.timer = P(e, o);
       }
     }
-    const { styles: F, classes: k, className: G } = te("Notifications", {}, r);
-    return E({ log: w, info: N, success: T, warn: v, warning: v, error: B }), (e, o) => (a(), p(H, null, [
-      J(e.$slots, "default"),
-      (a(), x(Q, { to: "body" }, [
-        b("div", {
+    const V = Q(() => `${r.offset}px`), { styles: G, classes: b, className: I } = re("Notifications", {}, r);
+    return L({ log: N, info: $, success: T, warn: v, warning: v, error: B }), (e, o) => (a(), p(O, null, [
+      U(e.$slots, "default"),
+      (a(), x(W, { to: "body" }, [
+        k("div", {
           ref_key: "listRef",
           ref: z,
-          style: D(i(F)),
-          class: _([
-            i(G),
-            i(k).wrapper,
+          style: _(i(G)),
+          class: C([
+            i(I),
+            i(b).wrapper,
             {
               // align
               "left-0": u.value === "left",
@@ -188,10 +192,13 @@ const se = ["onMouseenter", "onMouseleave"], ae = { class: "flex items-center fl
             }
           ])
         }, [
-          O(U, {
+          K(Y, {
             tag: "ul",
-            class: _([
-              i(k).list,
+            style: _([
+              s.value === "bottom" ? `padding-bottom: ${V.value};` : `padding-top: ${V.value};`
+            ]),
+            class: C([
+              i(b).list,
               { "flex-col-reverse": s.value }
             ]),
             "enter-active-class": "transition ease-out duration-200",
@@ -202,32 +209,32 @@ const se = ["onMouseenter", "onMouseleave"], ae = { class: "flex items-center fl
             "leave-to-class": "transform translate-y-2 opacity-0",
             "move-class": "ease-in-out duration-200"
           }, {
-            default: W(() => [
-              (a(!0), p(H, null, Y(d.value, (t) => (a(), p("li", {
+            default: Z(() => [
+              (a(!0), p(O, null, ee(d.value, (t) => (a(), p("li", {
                 key: t.id,
-                class: _([
-                  i(k).item,
+                class: C([
+                  i(b).item,
                   {
                     "mb-2": s.value === "bottom",
                     "mt-2": s.value === "top"
                   }
                 ]),
-                style: D(t.style),
-                onMouseenter: (l) => R(t),
-                onMouseleave: (l) => X(t)
+                style: _(t.style),
+                onMouseenter: (l) => X(t),
+                onMouseleave: (l) => F(t)
               }, [
-                t.icon ? (a(), x(K, {
+                t.icon ? (a(), x(A, {
                   key: 0,
                   filled: "",
                   icon: t.icon,
                   class: "mr-4 text-[color:var(--x-notification-icon)] dark:text-[color:var(--x-notification-dark-icon)]",
                   viewBox: "0 0 20 20"
                 }, null, 8, ["icon"])) : y("", !0),
-                b("div", ae, [
-                  t.title ? (a(), p("span", le, C(t.title), 1)) : y("", !0),
-                  b("span", null, C(t.message), 1)
+                k("div", ne, [
+                  t.title ? (a(), p("span", ie, M(t.title), 1)) : y("", !0),
+                  k("span", null, M(t.message), 1)
                 ]),
-                O(i(re)),
+                K(i(ae)),
                 t.action ? (a(), p("button", {
                   key: 1,
                   type: "button",
@@ -236,24 +243,24 @@ const se = ["onMouseenter", "onMouseleave"], ae = { class: "flex items-center fl
                     var l;
                     (l = t.action) == null || l.onClick(), h(t);
                   }
-                }, C(t.action.label), 9, ne)) : y("", !0),
-                t.removable ? (a(), x(K, {
+                }, M(t.action.label), 9, ce)) : y("", !0),
+                t.removable ? (a(), x(A, {
                   key: 2,
-                  icon: i(oe),
+                  icon: i(se),
                   class: "text-secondary-400 hover:text-secondary-500 ml-3 cursor-pointer",
                   onClick: () => {
                     h(t);
                   }
                 }, null, 8, ["icon", "onClick"])) : y("", !0)
-              ], 46, se))), 128))
+              ], 46, le))), 128))
             ]),
             _: 1
-          }, 8, ["class"])
+          }, 8, ["style", "class"])
         ], 6)
       ]))
     ], 64));
   }
 });
 export {
-  he as default
+  xe as default
 };

package/lib/components/tag/theme/Tag.base.theme.js

@@ -9,11 +9,11 @@ const s = {
     const l = t.getPalette(e.color);
     return r.variables({
       bg: l[100],
-      text: l[600],
-      border: l[600],
+      text: l[800],
+      border: l[700],
       dark: {
         bg: l[600],
-        border: l[400],
+        border: l[500],
         text: l[100]
       }
     });