@indielayer/ui 1.4.0 → 1.5.0

package/lib/components/modal/theme/Modal.base.theme.js

@@ -1,21 +1,21 @@
 const a = {
   classes: {
     wrapper: "fixed z-40 inset-0 overflow-y-auto transition-all",
-    backdrop: ({ data: s }) => {
-      const t = ["fixed inset-0 bg-gray-500 dark:bg-black transition-opacity"];
-      return s.visible ? t.push("ease-out duration-200 opacity-30 dark:opacity-70") : t.push("ease-in duration-100 opacity-0"), t;
+    backdrop: ({ data: e }) => {
+      const t = ["fixed inset-0 bg-secondary-500 dark:bg-black transition-opacity"];
+      return e.visible ? t.push("ease-out duration-200 opacity-30 dark:opacity-70") : t.push("ease-in duration-100 opacity-0"), t;
     },
-    modal: ({ props: s, data: t }) => {
-      const e = ["relative flex flex-col z-10 bg-white dark:bg-gray-900 rounded-md shadow-lg transform transition-all overflow-hidden max-h-full w-full"];
-      return t.visible ? e.push("ease-out duration-200 opacity-100 translate-y-0 sm:scale-100") : e.push("ease-in duration-200 opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"), s.size === "xs" ? e.push("sm:max-w-xs") : s.size === "sm" ? e.push("sm:max-w-sm") : s.size === "lg" ? e.push("sm:max-w-xl") : s.size === "xl" ? e.push("sm:max-w-3xl") : e.push("sm:max-w-lg"), e;
+    modal: ({ props: e, data: t }) => {
+      const s = ["relative flex flex-col z-10 bg-white dark:bg-secondary-900 rounded-md shadow-lg transform transition-all overflow-hidden max-h-full w-full"];
+      return t.visible ? s.push("ease-out duration-200 opacity-100 translate-y-0 sm:scale-100") : s.push("ease-in duration-200 opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"), e.size === "xs" ? s.push("sm:max-w-xs") : e.size === "sm" ? s.push("sm:max-w-sm") : e.size === "lg" ? s.push("sm:max-w-xl") : e.size === "xl" ? s.push("sm:max-w-3xl") : s.push("sm:max-w-lg"), s;
     },
     closeIcon: "!absolute top-2 z-10 right-2",
     header: "text-lg pl-6 py-4 border-b pr-12",
     content: "px-6 py-4",
-    actions: "bg-slate-50 dark:bg-gray-800 p-4 grid grid-flow-col gap-4",
-    label: "text-xs text-gray-500 mb-1",
-    title: "text-xl font-semibold mb-4",
-    description: "text-sm"
+    actions: ({ props: e, slots: t }) => ["flex gap-4 bg-secondary-50 dark:bg-secondary-800 p-4 justify-end"],
+    label: "text-xs text-secondary-500 mb-1",
+    title: "text-xl font-semibold",
+    description: "text-sm mb-8"
   }
 }, l = a;
 export {

package/lib/components/modal/theme/Modal.carbon.theme.js

@@ -2,11 +2,11 @@ const a = {
   classes: {
     wrapper: "fixed z-40 inset-0 overflow-y-auto transition-all",
     backdrop: ({ data: t }) => {
-      const e = ["fixed inset-0 bg-gray-500 dark:bg-black transition-opacity"];
+      const e = ["fixed inset-0 bg-secondary-500 dark:bg-black transition-opacity"];
       return t.visible ? e.push("ease-out duration-200 opacity-70 dark:opacity-70") : e.push("ease-in duration-100 opacity-0"), e;
     },
     modal: ({ props: t, data: e }) => {
-      const s = ["relative flex flex-col z-10 bg-gray-200 dark:bg-gray-900 shadow-lg transform transition-all overflow-hidden max-h-full w-full"];
+      const s = ["relative flex flex-col z-10 bg-secondary-200 dark:bg-secondary-900 shadow-lg transform transition-all overflow-hidden max-h-full w-full"];
       return e.visible ? s.push("ease-out duration-200 opacity-100 translate-y-0 sm:scale-100") : s.push("ease-in duration-200 opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"), t.size === "xs" ? s.push("sm:max-w-xs") : t.size === "sm" ? s.push("sm:max-w-sm") : t.size === "lg" ? s.push("sm:max-w-xl") : t.size === "xl" ? s.push("sm:max-w-3xl") : s.push("sm:max-w-lg"), s;
     },
     closeIcon: "!absolute top-0 z-10 right-0",
@@ -19,7 +19,7 @@ const a = {
       const s = ["grid grid-flow-col gap-[1px]"];
       return e["tertiary-action"] || e["cancel-action"] ? s.push("grid-cols-4") : s.push("grid-cols-2"), s;
     },
-    label: "text-xs text-gray-500 mb-1",
+    label: "text-xs text-secondary-500 mb-1",
     title: "text-xl mb-4",
     description: "text-sm mb-4"
   }

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

@@ -217,7 +217,7 @@ const se = { class: "flex items-center flex-wrap" }, re = {
                 e.removable ? (a(), k(E, {
                   key: 2,
                   icon: l(oe),
-                  class: "text-gray-400 hover:text-gray-500 ml-3 cursor-pointer",
+                  class: "text-secondary-400 hover:text-secondary-500 ml-3 cursor-pointer",
                   onClick: () => {
                     y(e);
                   }

package/lib/components/notifications/theme/Notifications.base.theme.js

@@ -2,7 +2,7 @@ const e = {
   classes: {
     wrapper: "fixed z-50 w-full sm:w-auto overflow-y-auto max-h-screen",
     list: "flex flex-col items-end w-full sm:w-[520px] px-4",
-    item: "w-full flex items-center rounded-md px-4 py-3 bg-gray-800 dark:bg-gray-50 text-white dark:text-gray-900 border border-gray-700 dark:border-gray-100"
+    item: "w-full flex items-center rounded-md px-4 py-3 bg-secondary-800 dark:bg-secondary-50 text-white dark:text-secondary-900 border border-secondary-700 dark:border-secondary-100"
   }
 }, r = e;
 export {

package/lib/components/notifications/theme/Notifications.carbon.theme.js

@@ -2,9 +2,9 @@ const e = {
   classes: {
     wrapper: "fixed z-50 w-full sm:w-auto overflow-y-auto max-h-screen",
     list: "flex flex-col items-end w-full sm:w-[520px] px-4",
-    item: () => ["w-full flex items-center px-4 py-3 bg-gray-800 dark:bg-gray-50 text-white dark:text-gray-900 border-l-2 border-[color:var(--x-notification-icon)]"]
+    item: () => ["w-full flex items-center px-4 py-3 bg-secondary-800 dark:bg-secondary-50 text-white dark:text-secondary-900 border-l-2 border-[color:var(--x-notification-icon)]"]
   }
-}, r = e;
+}, t = e;
 export {
-  r as default
+  t as default
 };

package/lib/components/pagination/Pagination.vue.js

@@ -1,4 +1,4 @@
-import { defineComponent as E, computed as v, ref as X, watch as D, openBlock as o, createElementBlock as n, normalizeStyle as F, unref as s, normalizeClass as c, Fragment as u, createVNode as r, createElementVNode as g, withKeys as L, toDisplayString as Q, createBlock as m, createCommentVNode as d, renderList as P } from "vue";
+import { defineComponent as E, computed as z, ref as X, watch as D, openBlock as o, createElementBlock as n, normalizeStyle as F, unref as t, normalizeClass as v, Fragment as u, createVNode as r, createElementVNode as V, withKeys as L, toDisplayString as Q, createBlock as m, createCommentVNode as d, renderList as P } from "vue";
 import { useTheme as T } from "../../composables/useTheme.js";
 import { useCommon as C } from "../../composables/useCommon.js";
 import { prevIcon as U, nextIcon as j, dotsIcon as y } from "../../common/icons.js";
@@ -6,7 +6,7 @@ import b from "../icon/Icon.vue.js";
 import A from "../input/Input.vue.js";
 import I from "../button/Button.vue.js";
 import f from "./PaginationItem.vue.js";
-const G = { class: "mx-9 flex items-center" }, H = /* @__PURE__ */ g("span", { class: "text-gray-600 mr-2" }, "Page", -1), J = { class: "text-gray-600 ml-2" }, M = ["onClick"], O = ["simple", "quick", "dots"], R = {
+const G = { class: "mx-9 flex items-center" }, H = /* @__PURE__ */ V("span", { class: "text-secondary-600 mr-2" }, "Page", -1), J = { class: "text-secondary-600 ml-2" }, M = ["onClick"], O = ["simple", "quick", "dots"], R = {
   ...C.props(),
   links: Boolean,
   totalPages: {
@@ -27,12 +27,12 @@ const G = { class: "mx-9 flex items-center" }, H = /* @__PURE__ */ g("span", { c
     ...C.validators(),
     variant: O
   }
-}, te = /* @__PURE__ */ E({
+}, se = /* @__PURE__ */ E({
   ...W,
   props: R,
   emits: ["update:modelValue"],
   setup($, { emit: w }) {
-    const l = $, p = w, B = v(() => l.totalPages === 3 ? [2] : l.totalPages > 2 ? l.modelValue === 1 || l.modelValue === 2 ? [2, 3] : l.modelValue === l.totalPages || l.modelValue === l.totalPages - 1 ? [l.totalPages - 2, l.totalPages - 1] : [l.modelValue - 1, l.modelValue, l.modelValue + 1] : []), i = X(l.modelValue + "");
+    const l = $, p = w, B = z(() => l.totalPages === 3 ? [2] : l.totalPages > 2 ? l.modelValue === 1 || l.modelValue === 2 ? [2, 3] : l.modelValue === l.totalPages || l.modelValue === l.totalPages - 1 ? [l.totalPages - 2, l.totalPages - 1] : [l.modelValue - 1, l.modelValue, l.modelValue + 1] : []), i = X(l.modelValue + "");
     function N() {
       const e = parseInt(i.value);
       e >= 0 && e <= l.totalPages ? p("update:modelValue", e) : i.value = l.modelValue + "";
@@ -46,36 +46,36 @@ const G = { class: "mx-9 flex items-center" }, H = /* @__PURE__ */ g("span", { c
     function S() {
       l.modelValue < l.totalPages && p("update:modelValue", l.modelValue + 1);
     }
-    const V = v(() => l.size === "xs" ? "xs" : l.size === "sm" ? "sm" : l.size === "lg" ? "md" : l.size === "xl" ? "lg" : "sm"), { styles: K, classes: k, className: h } = T("Pagination", {}, l);
-    return (e, t) => (o(), n("ul", {
-      style: F(s(K)),
-      class: c([
-        s(h),
-        s(k).wrapper
+    const g = z(() => l.size === "xs" ? "xs" : l.size === "sm" ? "sm" : l.size === "lg" ? "md" : l.size === "xl" ? "lg" : "sm"), { styles: K, classes: c, className: h } = T("Pagination", {}, l);
+    return (e, s) => (o(), n("ul", {
+      style: F(t(K)),
+      class: v([
+        t(h),
+        t(c).wrapper
       ])
     }, [
       e.variant === "quick" ? (o(), n(u, { key: 0 }, [
         r(I, {
-          "icon-left": s(U),
-          size: V.value,
+          "icon-left": t(U),
+          size: g.value,
           disabled: e.modelValue <= 1,
           onClick: q
         }, null, 8, ["icon-left", "size", "disabled"]),
-        g("div", G, [
+        V("div", G, [
           H,
           r(A, {
             modelValue: i.value,
-            "onUpdate:modelValue": t[0] || (t[0] = (a) => i.value = a),
+            "onUpdate:modelValue": s[0] || (s[0] = (a) => i.value = a),
             size: e.size,
             class: "text-center w-16",
             "hide-footer": "",
             onKeydown: L(N, ["enter"])
           }, null, 8, ["modelValue", "size", "onKeydown"]),
-          g("span", J, "of " + Q(e.totalPages), 1)
+          V("span", J, "of " + Q(e.totalPages), 1)
         ]),
         r(I, {
-          "icon-left": s(j),
-          size: V.value,
+          "icon-left": t(j),
+          size: g.value,
           disabled: e.modelValue >= e.totalPages,
           onClick: S
         }, null, 8, ["icon-left", "size", "disabled"])
@@ -85,12 +85,12 @@ const G = { class: "mx-9 flex items-center" }, H = /* @__PURE__ */ g("span", { c
           links: e.links,
           size: e.size,
           selected: e.modelValue === 1,
-          onInput: t[1] || (t[1] = (a) => e.$emit("update:modelValue", a))
+          onInput: s[1] || (s[1] = (a) => e.$emit("update:modelValue", a))
         }, null, 8, ["links", "size", "selected"]),
         e.totalPages > 3 && e.modelValue > 3 ? (o(), m(b, {
           key: 0,
           class: "mx-1",
-          icon: s(y),
+          icon: t(y),
           size: e.size
         }, null, 8, ["icon", "size"])) : d("", !0),
         (o(!0), n(u, null, P(B.value, (a) => (o(), m(f, {
@@ -99,12 +99,12 @@ const G = { class: "mx-9 flex items-center" }, H = /* @__PURE__ */ g("span", { c
           links: e.links,
           size: e.size,
           selected: e.modelValue === a,
-          onInput: t[2] || (t[2] = (z) => e.$emit("update:modelValue", z))
+          onInput: s[2] || (s[2] = (k) => e.$emit("update:modelValue", k))
         }, null, 8, ["value", "links", "size", "selected"]))), 128)),
         e.totalPages > 3 && e.modelValue < e.totalPages - 2 ? (o(), m(b, {
           key: 1,
           class: "mx-1",
-          icon: s(y),
+          icon: t(y),
           size: e.size
         }, null, 8, ["icon", "size"])) : d("", !0),
         e.totalPages > 1 ? (o(), m(f, {
@@ -113,19 +113,19 @@ const G = { class: "mx-9 flex items-center" }, H = /* @__PURE__ */ g("span", { c
           links: e.links,
           size: e.size,
           selected: e.modelValue === e.totalPages,
-          onInput: t[3] || (t[3] = (a) => e.$emit("update:modelValue", a))
+          onInput: s[3] || (s[3] = (a) => e.$emit("update:modelValue", a))
         }, null, 8, ["value", "links", "size", "selected"])) : d("", !0)
       ], 64)) : e.variant === "dots" ? (o(!0), n(u, { key: 2 }, P(e.totalPages, (a) => (o(), n("li", {
         key: a,
-        class: c(["rounded-full cursor-pointer", [
-          s(k).dots,
-          a === e.modelValue ? "bg-[color:var(--x-pagination-bg)]" : "bg-gray-100 hover:bg-gray-200"
+        class: v(["rounded-full cursor-pointer", [
+          t(c).dots,
+          a === e.modelValue ? "bg-[color:var(--x-pagination-bg)]" : "bg-secondary-100 hover:bg-secondary-200"
         ]]),
-        onClick: (z) => e.$emit("update:modelValue", a)
+        onClick: (k) => e.$emit("update:modelValue", a)
       }, null, 10, M))), 128)) : d("", !0)
     ], 6));
   }
 });
 export {
-  te as default
+  se as default
 };

package/lib/components/popover/Popover.vue.d.ts

@@ -23,6 +23,10 @@ declare const popoverProps: {
         type: PropType<TriggerEvent[]>;
         default: () => string[];
     };
+    hideArrow: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     showTriggers: PropType<TriggerEvent[] | ((triggers: Array<PopoverTriggerEvent>) => Array<PopoverTriggerEvent>)>;
     hideTriggers: PropType<TriggerEvent[] | ((triggers: Array<PopoverTriggerEvent>) => Array<PopoverTriggerEvent>)>;
     popperTriggers: PropType<TriggerEvent[]>;
@@ -81,6 +85,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         type: PropType<TriggerEvent[]>;
         default: () => string[];
     };
+    hideArrow: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     showTriggers: PropType<TriggerEvent[] | ((triggers: TriggerEvent[]) => TriggerEvent[])>;
     hideTriggers: PropType<TriggerEvent[] | ((triggers: TriggerEvent[]) => TriggerEvent[])>;
     popperTriggers: PropType<TriggerEvent[]>;
@@ -139,6 +147,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         type: PropType<TriggerEvent[]>;
         default: () => string[];
     };
+    hideArrow: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     showTriggers: PropType<TriggerEvent[] | ((triggers: TriggerEvent[]) => TriggerEvent[])>;
     hideTriggers: PropType<TriggerEvent[] | ((triggers: TriggerEvent[]) => TriggerEvent[])>;
     popperTriggers: PropType<TriggerEvent[]>;
@@ -191,6 +203,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     positioningDisabled: boolean;
     placement: Placement;
     triggers: TriggerEvent[];
+    hideArrow: boolean;
     container: string | boolean | Element | Record<string, any>;
     strategy: "absolute" | "fixed";
     autoHide: boolean | ((event: Event) => boolean);

package/lib/components/popover/Popover.vue.js

@@ -1,6 +1,6 @@
-import { defineComponent as b, ref as a, openBlock as v, createBlock as S, unref as r, normalizeStyle as T, normalizeClass as B, withCtx as l, renderSlot as d } from "vue";
-import { useTheme as $ } from "../../composables/useTheme.js";
-import { Dropdown as A } from "../../node_modules/.pnpm/floating-vue@5.2.0_vue@3.3.9/node_modules/floating-vue/dist/floating-vue.js";
+import { defineComponent as b, ref as a, openBlock as v, createBlock as S, unref as r, normalizeStyle as B, normalizeClass as T, withCtx as l, renderSlot as d } from "vue";
+import { useTheme as A } from "../../composables/useTheme.js";
+import { Dropdown as $ } from "../../node_modules/.pnpm/floating-vue@5.2.0_vue@3.3.9/node_modules/floating-vue/dist/floating-vue.js";
 const z = {
   placement: ["top", "top-start", "top-end", "bottom", "bottom-start", "bottom-end", "left", "left-start", "left-end", "right", "right-start", "right-end"]
 }, k = {
@@ -20,6 +20,10 @@ const z = {
     type: Array,
     default: () => ["click"]
   },
+  hideArrow: {
+    type: Boolean,
+    default: !0
+  },
   showTriggers: [Array, Function],
   hideTriggers: [Array, Function],
   popperTriggers: Array,
@@ -69,12 +73,12 @@ const z = {
     }
     const t = a(!1);
     u({ show: s, hide: n, toggle: y, isOpen: t });
-    const { styles: f, classes: p, className: h } = $("Popover", {}, m);
-    return (e, o) => (v(), S(r(A), {
+    const { styles: f, classes: p, className: h } = A("Popover", {}, m);
+    return (e, o) => (v(), S(r($), {
       ref_key: "elRef",
       ref: i,
-      style: T(r(f)),
-      class: B([r(h), r(p).wrapper]),
+      style: B(r(f)),
+      class: T([r(h), r(p).wrapper]),
       "positioning-disabled": e.positioningDisabled,
       placement: e.placement,
       disabled: e.disabled,
@@ -97,7 +101,8 @@ const z = {
       "eager-mount": e.eagerMount,
       "popper-class": [
         r(p).content,
-        e.popperClass
+        e.popperClass,
+        e.hideArrow ? "v-popper__popper--no-arrow" : ""
       ],
       "compute-transform-origin": e.computeTransformOrigin,
       onShow: o[0] || (o[0] = () => {

package/lib/components/popover/Popover.vue2.js

@@ -1,4 +1,5 @@
-const e = "";
+import o from "./Popover.vue.js";
+import "./Popover.vue3.js";
 export {
-  e as default
+  o as default
 };

package/lib/components/popover/Popover.vue3.js

@@ -1,5 +1,4 @@
-import o from "./Popover.vue.js";
-import "./Popover.vue2.js";
+const e = "";
 export {
-  o as default
+  e as default
 };

package/lib/components/popover/theme/PopoverContainer.base.theme.js

@@ -1,8 +1,8 @@
-const r = {
+const e = {
   classes: {
-    wrapper: "block w-full bg-white dark:bg-gray-700 shadow-lg rounded-md border  border-gray-200 dark:border-gray-800"
+    wrapper: "block w-full bg-white dark:bg-secondary-700 shadow-lg rounded-md border border-secondary-200 dark:border-secondary-800"
   }
-}, e = r;
+}, r = e;
 export {
-  e as default
+  r as default
 };

package/lib/components/popover/theme/PopoverContainer.carbon.theme.js

@@ -1,8 +1,8 @@
-const r = {
+const e = {
   classes: {
-    wrapper: "block w-full bg-gray-100 dark:bg-gray-700 shadow-lg border border-gray-200 dark:border-gray-800 text-sm"
+    wrapper: "block w-full bg-secondary-100 dark:bg-secondary-700 shadow-lg border border-secondary-200 dark:border-secondary-800 text-sm"
   }
-}, e = r;
+}, r = e;
 export {
-  e as default
+  r as default
 };

package/lib/components/progress/Progress.vue.js

@@ -1,8 +1,8 @@
-import { defineComponent as m, openBlock as s, createElementBlock as n, normalizeStyle as t, unref as a, normalizeClass as o, createElementVNode as g, createCommentVNode as u } from "vue";
-import { useColors as c } from "../../composables/useColors.js";
+import { defineComponent as m, openBlock as s, createElementBlock as n, normalizeStyle as t, unref as o, normalizeClass as a, createElementVNode as c, createCommentVNode as u } from "vue";
+import { useColors as g } from "../../composables/useColors.js";
 import { useTheme as f } from "../../composables/useTheme.js";
 const y = {
-  ...c.props("primary"),
+  ...g.props("primary"),
   percentage: {
     type: Number,
     default: 0,
@@ -18,16 +18,16 @@ const y = {
   ...h,
   props: y,
   setup(r) {
-    const l = r, { styles: i, classes: p, className: d } = f("Progress", {}, l);
+    const l = r, { styles: i, classes: d, className: p } = f("Progress", {}, l);
     return (e, b) => (s(), n("div", {
-      style: t(a(i)),
-      class: o([
-        a(d),
-        a(p).wrapper
+      style: t(o(i)),
+      class: a([
+        o(p),
+        o(d).wrapper
       ])
     }, [
-      g("div", {
-        class: o(["h-full", [
+      c("div", {
+        class: a(["h-full", [
           e.gradient ? "bg-gradient-to-r" : "bg-[color:var(--x-progress-bg)]",
           {
             "duration-150 transition-[width]": e.animate
@@ -37,7 +37,7 @@ const y = {
       }, null, 6),
       e.gradient ? (s(), n("div", {
         key: 0,
-        class: o(["absolute h-full bg-gray-100 dark:bg-gray-700 right-0 top-0", { "duration-150 transition-[width]": e.animate }]),
+        class: a(["absolute h-full bg-secondary-100 dark:bg-secondary-700 right-0 top-0", { "duration-150 transition-[width]": e.animate }]),
         style: t({
           width: `${100 - e.percentage}%`
         })

package/lib/components/progress/theme/Progress.base.theme.js

@@ -1,18 +1,18 @@
-const l = {
+const o = {
   classes: {
-    wrapper: ({ props: e }) => `relative rounded bg-gray-100 dark:bg-gray-700 overflow-hidden pointer-events-none ${e.thick ? "h-1.5" : "h-1"}`,
+    wrapper: ({ props: e }) => `relative rounded bg-secondary-100 dark:bg-secondary-700 overflow-hidden pointer-events-none ${e.thick ? "h-1.5" : "h-1"}`,
     list: "flex flex-col items-end w-full sm:w-[520px] px-4",
-    item: "w-full flex items-center rounded-md px-4 py-3 bg-gray-800 dark:bg-gray-50 text-white dark:text-gray-900"
+    item: "w-full flex items-center rounded-md px-4 py-3 bg-secondary-800 dark:bg-secondary-50 text-white dark:text-secondary-900"
   },
-  styles: ({ props: e, colors: s, css: a }) => {
-    const t = s.getPalette(e.color), r = [];
-    return r.push(a.variables({
+  styles: ({ props: e, colors: r, css: n }) => {
+    const t = r.getPalette(e.color), s = [];
+    return s.push(n.variables({
       bg: t[500]
-    })), e.gradient && r.push({
+    })), e.gradient && s.push({
       "--tw-gradient-stops": `${t[100]}, ${t[800]}`
-    }), r;
+    }), s;
   }
-}, n = l;
+}, a = o;
 export {
-  n as default
+  a as default
 };

package/lib/components/radio/Radio.vue.d.ts

@@ -20,6 +20,7 @@ declare const radioProps: {
         readonly type: ArrayConstructor;
         readonly default: () => never[];
     };
+    tooltip: StringConstructor;
     disabled: BooleanConstructor;
     loading: BooleanConstructor;
     loadingLabel: StringConstructor;
@@ -66,6 +67,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         readonly type: ArrayConstructor;
         readonly default: () => never[];
     };
+    tooltip: StringConstructor;
     disabled: BooleanConstructor;
     loading: BooleanConstructor;
     loadingLabel: StringConstructor;
@@ -108,6 +110,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         readonly type: ArrayConstructor;
         readonly default: () => never[];
     };
+    tooltip: StringConstructor;
     disabled: BooleanConstructor;
     loading: BooleanConstructor;
     loadingLabel: StringConstructor;

package/lib/components/radio/theme/Radio.base.theme.js

@@ -5,15 +5,15 @@ const a = {
       return e.isInsideForm && !e.isInsideFormGroup && t.push("mb-3"), t;
     },
     circle: ({ props: e }) => {
-      let t = "rounded-full flex justify-center items-center shrink-0 border-2 outline-offset-2 outline-slate-300 dark:outline-slate-500 group-focus:outline-1 group-focus:outline";
-      return (e.size === "xs" || e.size === "sm") && (t += " h-4 w-4"), e.size === "xl" ? t += " h-6 w-6" : t += " h-5 w-5", t;
+      const t = ["rounded-full flex justify-center items-center shrink-0 border outline-offset-2 outline-slate-300 dark:outline-slate-500 group-focus:outline-1 group-focus:outline"];
+      return e.size === "lg" ? t.push("h-5 w-5") : e.size === "xl" ? t.push("h-6 w-6") : t.push("h-4 w-4"), t;
     },
     circleIcon: ({ props: e, data: t }) => {
-      const r = [];
-      return t.selected || r.push("opacity-0"), e.size === "sm" || e.size === "xs" ? r.push("h-2") : e.size === "lg" ? r.push("h-2.5") : e.size === "xl" ? r.push("h-3") : r.push("h-[0.6rem]"), r;
+      const s = [];
+      return t.selected || s.push("opacity-0"), e.size === "sm" || e.size === "xs" ? s.push("h-2") : e.size === "lg" ? s.push("h-2.5") : e.size === "xl" ? s.push("h-3") : s.push("h-2"), s;
     },
     label: ({ props: e }) => {
-      let t = "font-medium text-gray-800 dark:text-gray-200 pl-2";
+      let t = "font-medium text-secondary-800 dark:text-secondary-200 pl-2";
       return e.size === "xs" ? t += " text-xs" : e.size === "sm" ? t += " text-sm" : e.size === "lg" ? t += " text-lg" : e.size === "xl" && (t += " text-xl"), t;
     },
     content: ({ props: e }) => {
@@ -21,48 +21,48 @@ const a = {
       return e.size === "xs" ? t += " text-xs" : e.size === "sm" ? t += " text-sm" : e.size === "lg" ? t += " text-lg" : e.size === "xl" && (t += " text-xl"), t;
     }
   },
-  styles: ({ props: e, colors: t, css: r, data: n }) => {
-    const l = t.getPalette("gray"), s = t.getPalette(e.color), i = [];
-    return e.loading ? r.variables({
+  styles: ({ props: e, colors: t, css: s, data: n }) => {
+    const r = t.getPalette("gray"), l = t.getPalette(e.color), i = [];
+    return e.loading ? s.variables({
       bg: "transparent",
       border: "transparent",
       dark: {
         bg: "transparent",
         border: "transparent"
       }
-    }) : (e.disabled ? n.selected ? i.push(r.variables({
+    }) : (e.disabled ? n.selected ? i.push(s.variables({
       bg: "transparent",
-      border: l[200],
-      circle: l[200],
+      border: r[200],
+      circle: r[200],
       dark: {
         bg: "transparent",
-        border: l[700],
-        circle: l[700]
+        border: r[700],
+        circle: r[700]
       }
-    })) : i.push(r.variables({
-      bg: l[200],
-      border: l[200],
+    })) : i.push(s.variables({
+      bg: r[200],
+      border: r[200],
       dark: {
-        bg: l[700],
-        border: l[700]
+        bg: r[700],
+        border: r[700]
       }
-    })) : (n.selected ? i.push(r.variables({
+    })) : (n.selected ? i.push(s.variables({
       bg: "transparent",
-      border: s[500],
-      circle: s[500],
+      border: l[500],
+      circle: l[500],
       dark: {
         bg: "transparent",
-        border: s[500],
-        circle: s[500]
+        border: l[500],
+        circle: l[500]
       }
-    })) : i.push(r.variables({
+    })) : i.push(s.variables({
       bg: "#fff",
-      border: e.glow ? s[300] : l[300],
+      border: e.glow ? l[300] : r[300],
       dark: {
-        bg: l[900],
-        border: e.glow ? s[300] : l[300]
+        bg: r[900],
+        border: e.glow ? l[300] : r[400]
       }
-    })), e.glow && i.push(r.get("glow", t.getColorOpacity(s[500], 0.5)))), i);
+    })), e.glow && i.push(s.get("glow", t.getColorOpacity(l[500], 0.5)))), i);
   }
 }, u = a;
 export {

package/lib/components/radio/theme/Radio.carbon.theme.js

@@ -12,11 +12,11 @@ const i = {
       const t = [];
       return r.selected ? e.size === "lg" ? t.push("h-2.5") : e.size === "xl" ? t.push("h-3") : t.push("h-2") : t.push("opacity-0"), t;
     },
-    label: "text-sm text-gray-800 dark:text-gray-200 pl-2",
+    label: "text-sm text-secondary-800 dark:text-secondary-200 pl-2",
     content: "pl-2"
   },
-  styles: ({ props: e, colors: r, css: t, data: n }) => {
-    const s = r.getPalette("gray"), l = r.getPalette(e.color), a = [];
+  styles: ({ props: e, colors: r, css: t, data: a }) => {
+    const s = r.getPalette("gray"), l = r.getPalette(e.color), n = [];
     return e.loading ? t.variables({
       bg: "transparent",
       border: "transparent",
@@ -24,7 +24,7 @@ const i = {
         bg: "transparent",
         border: "transparent"
       }
-    }) : (e.disabled ? n.selected ? a.push(t.variables({
+    }) : (e.disabled ? a.selected ? n.push(t.variables({
       bg: "transparent",
       border: s[200],
       circle: s[200],
@@ -33,14 +33,14 @@ const i = {
         border: s[700],
         circle: s[700]
       }
-    })) : a.push(t.variables({
+    })) : n.push(t.variables({
       bg: s[200],
       border: s[200],
       dark: {
         bg: s[700],
         border: s[700]
       }
-    })) : (n.selected ? a.push(t.variables({
+    })) : (a.selected ? n.push(t.variables({
       bg: "transparent",
       border: l[500],
       circle: l[500],
@@ -49,14 +49,14 @@ const i = {
         border: l[500],
         circle: l[500]
       }
-    })) : a.push(t.variables({
+    })) : n.push(t.variables({
       bg: "#fff",
       border: e.glow ? l[300] : s[900],
       dark: {
         bg: s[900],
         border: e.glow ? l[300] : s[300]
       }
-    })), e.glow && a.push(t.get("glow", r.getColorOpacity(l[500], 0.5)))), a);
+    })), e.glow && n.push(t.get("glow", r.getColorOpacity(l[500], 0.5)))), n);
   }
 }, o = i;
 export {