@stachelock/ui 0.2.7 → 0.2.9

package/dist/{UiLoading.vue_vue_type_script_setup_true_lang-DCz52-Me.js → UiLoading.vue_vue_type_script_setup_true_lang-KbLKA4SA.js}

@@ -1,4 +1,4 @@
-import { defineComponent as d, computed as n, createElementBlock as a, openBlock as r, normalizeClass as o, createCommentVNode as p, createElementVNode as l, toDisplayString as x } from "vue";
+import { defineComponent as d, computed as n, createElementBlock as a, openBlock as r, normalizeClass as o, createCommentVNode as p, createElementVNode as l, toDisplayString as m } from "vue";
 const g = {
   key: 0,
   class: "sl-absolute sl-inset-0 sl-bg-white sl-bg-opacity-75 dark:sl-bg-gray-900 dark:sl-bg-opacity-75 sl-flex sl-items-center sl-justify-center sl-z-50"
@@ -11,11 +11,11 @@ const g = {
     overlay: { type: Boolean, default: !1 },
     className: {}
   },
-  setup(m) {
-    const t = m, y = n(() => {
+  setup(x) {
+    const t = x, y = n(() => {
       const s = ["sl-flex sl-items-center sl-justify-center"];
       return t.overlay ? s.push("sl-relative") : s.push("sl-flex-col sl-space-y-2"), t.className && s.push(t.className), s;
-    }), c = n(() => {
+    }), i = n(() => {
       const e = {
         xs: "sl-h-3 sl-w-3",
         sm: "sl-h-4 sl-w-4",
@@ -24,7 +24,7 @@ const g = {
         xl: "sl-h-10 sl-w-10",
         "2xl": "sl-h-12 sl-w-12"
       }, s = {
-        primary: "sl-text-stachelock-600",
+        primary: "sl-text-primary-600",
         secondary: "sl-text-gray-600",
         dark: "sl-text-gray-700",
         light: "sl-text-gray-400",
@@ -37,7 +37,7 @@ const g = {
         e[t.size || "md"],
         s[t.theme || "primary"]
       ];
-    }), i = n(() => {
+    }), c = n(() => {
       const e = {
         xs: "sl-text-xs",
         sm: "sl-text-sm",
@@ -67,7 +67,7 @@ const g = {
       e.overlay ? (r(), a("div", g, [
         l("div", u, [
           l("div", {
-            class: o(c.value)
+            class: o(i.value)
           }, s[0] || (s[0] = [
             l("svg", {
               class: "sl-animate-spin",
@@ -91,12 +91,12 @@ const g = {
           ]), 2),
           e.text ? (r(), a("p", {
             key: 0,
-            class: o(i.value)
-          }, x(e.text), 3)) : p("", !0)
+            class: o(c.value)
+          }, m(e.text), 3)) : p("", !0)
         ])
       ])) : (r(), a("div", {
         key: 1,
-        class: o(c.value)
+        class: o(i.value)
       }, s[1] || (s[1] = [
         l("svg", {
           class: "sl-animate-spin",
@@ -120,12 +120,12 @@ const g = {
       ]), 2)),
       e.text && !e.overlay ? (r(), a("p", {
         key: 2,
-        class: o(i.value)
-      }, x(e.text), 3)) : p("", !0)
+        class: o(c.value)
+      }, m(e.text), 3)) : p("", !0)
     ], 2));
   }
 });
 export {
   f as _
 };
-//# sourceMappingURL=UiLoading.vue_vue_type_script_setup_true_lang-DCz52-Me.js.map
+//# sourceMappingURL=UiLoading.vue_vue_type_script_setup_true_lang-KbLKA4SA.js.map

package/dist/UiLoading.vue_vue_type_script_setup_true_lang-KbLKA4SA.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UiLoading.vue_vue_type_script_setup_true_lang-KbLKA4SA.js","sources":["../src/components/UiLoading.vue"],"sourcesContent":["<template>\n  <div :class=\"containerClasses\">\n    <div v-if=\"overlay\" class=\"sl-absolute sl-inset-0 sl-bg-white sl-bg-opacity-75 dark:sl-bg-gray-900 dark:sl-bg-opacity-75 sl-flex sl-items-center sl-justify-center sl-z-50\">\n      <div class=\"sl-flex sl-flex-col sl-items-center\">\n        <div :class=\"spinnerClasses\">\n          <svg class=\"sl-animate-spin\" fill=\"none\" viewBox=\"0 0 24 24\">\n            <circle\n              class=\"sl-opacity-25\"\n              cx=\"12\"\n              cy=\"12\"\n              r=\"10\"\n              stroke=\"currentColor\"\n              stroke-width=\"4\"\n            />\n            <path\n              class=\"sl-opacity-75\"\n              fill=\"currentColor\"\n              d=\"m4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"\n            />\n          </svg>\n        </div>\n        <p v-if=\"text\" :class=\"textClasses\">{{ text }}</p>\n      </div>\n    </div>\n    <div v-else :class=\"spinnerClasses\">\n      <svg class=\"sl-animate-spin\" fill=\"none\" viewBox=\"0 0 24 24\">\n        <circle\n          class=\"sl-opacity-25\"\n          cx=\"12\"\n          cy=\"12\"\n          r=\"10\"\n          stroke=\"currentColor\"\n          stroke-width=\"4\"\n        />\n        <path\n          class=\"sl-opacity-75\"\n          fill=\"currentColor\"\n          d=\"m4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"\n        />\n      </svg>\n    </div>\n    <p v-if=\"text && !overlay\" :class=\"textClasses\">{{ text }}</p>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed } from 'vue';\nimport type { LoadingType } from '../types/ui';\n\ninterface LoadingProps extends LoadingType {}\n\nconst props = withDefaults(defineProps<LoadingProps>(), {\n  theme: 'primary',\n  size: 'md',\n  overlay: false,\n});\n\nconst containerClasses = computed(() => {\n  const base = 'sl-flex sl-items-center sl-justify-center';\n  const classes = [base];\n\n  if (props.overlay) {\n    classes.push('sl-relative');\n  } else {\n    classes.push('sl-flex-col sl-space-y-2');\n  }\n\n  if (props.className) {\n    classes.push(props.className);\n  }\n\n  return classes;\n});\n\nconst spinnerClasses = computed(() => {\n  const sizeMapping: Record<string, string> = {\n    xs: 'sl-h-3 sl-w-3',\n    sm: 'sl-h-4 sl-w-4',\n    md: 'sl-h-6 sl-w-6',\n    lg: 'sl-h-8 sl-w-8',\n    xl: 'sl-h-10 sl-w-10',\n    '2xl': 'sl-h-12 sl-w-12',\n  };\n\n  const colorMapping: Record<string, string> = {\n    primary: 'sl-text-primary-600',\n    secondary: 'sl-text-gray-600',\n    dark: 'sl-text-gray-700',\n    light: 'sl-text-gray-400',\n    success: 'sl-text-green-600',\n    warning: 'sl-text-yellow-600',\n    danger: 'sl-text-red-600',\n    ghost: 'sl-text-gray-600',\n  };\n\n  return [\n    sizeMapping[props.size || 'md'],\n    colorMapping[props.theme || 'primary']\n  ];\n});\n\nconst textClasses = computed(() => {\n  const sizeMapping: Record<string, string> = {\n    xs: 'sl-text-xs',\n    sm: 'sl-text-sm',\n    md: 'sl-text-base',\n    lg: 'sl-text-lg',\n    xl: 'sl-text-xl',\n    '2xl': 'sl-text-2xl',\n  };\n\n  const colorMapping: Record<string, string> = {\n    primary: 'sl-text-stachelock-700',\n    secondary: 'sl-text-gray-700',\n    dark: 'sl-text-gray-800',\n    light: 'sl-text-gray-500',\n    success: 'sl-text-green-700',\n    warning: 'sl-text-yellow-700',\n    danger: 'sl-text-red-700',\n    ghost: 'sl-text-gray-700',\n  };\n\n  return [\n    sizeMapping[props.size || 'md'],\n    colorMapping[props.theme || 'primary'],\n    'sl-font-medium'\n  ];\n});\n</script>\n\n\n"],"names":["props","__props","containerClasses","computed","classes","spinnerClasses","sizeMapping","colorMapping","textClasses","_createElementBlock","overlay","_openBlock","_hoisted_1","_createElementVNode","_hoisted_2","text"],"mappings":";;;;;;;;;;;;;;AAmDA,UAAMA,IAAQC,GAMRC,IAAmBC,EAAS,MAAM;AAEtC,YAAMC,IAAU,CADH,2CACQ;AAErB,aAAIJ,EAAM,UACRI,EAAQ,KAAK,aAAa,IAE1BA,EAAQ,KAAK,0BAA0B,GAGrCJ,EAAM,aACRI,EAAQ,KAAKJ,EAAM,SAAS,GAGvBI;AAAA,IACT,CAAC,GAEKC,IAAiBF,EAAS,MAAM;AACpC,YAAMG,IAAsC;AAAA,QAC1C,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,OAAO;AAAA,MAAA,GAGHC,IAAuC;AAAA,QAC3C,SAAS;AAAA,QACT,WAAW;AAAA,QACX,MAAM;AAAA,QACN,OAAO;AAAA,QACP,SAAS;AAAA,QACT,SAAS;AAAA,QACT,QAAQ;AAAA,QACR,OAAO;AAAA,MAAA;AAGT,aAAO;AAAA,QACLD,EAAYN,EAAM,QAAQ,IAAI;AAAA,QAC9BO,EAAaP,EAAM,SAAS,SAAS;AAAA,MAAA;AAAA,IAEzC,CAAC,GAEKQ,IAAcL,EAAS,MAAM;AACjC,YAAMG,IAAsC;AAAA,QAC1C,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,OAAO;AAAA,MAAA,GAGHC,IAAuC;AAAA,QAC3C,SAAS;AAAA,QACT,WAAW;AAAA,QACX,MAAM;AAAA,QACN,OAAO;AAAA,QACP,SAAS;AAAA,QACT,SAAS;AAAA,QACT,QAAQ;AAAA,QACR,OAAO;AAAA,MAAA;AAGT,aAAO;AAAA,QACLD,EAAYN,EAAM,QAAQ,IAAI;AAAA,QAC9BO,EAAaP,EAAM,SAAS,SAAS;AAAA,QACrC;AAAA,MAAA;AAAA,IAEJ,CAAC;2BA9HCS,EAyCM,OAAA;AAAA,MAzCA,SAAOP,EAAA,KAAgB;AAAA,IAAA;MAChBQ,EAAAA,WAAXC,EAAA,GAAAF,EAqBM,OArBNG,GAqBM;AAAA,QApBJC,EAmBM,OAnBNC,GAmBM;AAAA,UAlBJD,EAgBM,OAAA;AAAA,YAhBA,SAAOR,EAAA,KAAc;AAAA,UAAA;YACzBQ,EAcM,OAAA;AAAA,cAdD,OAAM;AAAA,cAAkB,MAAK;AAAA,cAAO,SAAQ;AAAA,YAAA;cAC/CA,EAOE,UAAA;AAAA,gBANA,OAAM;AAAA,gBACN,IAAG;AAAA,gBACH,IAAG;AAAA,gBACH,GAAE;AAAA,gBACF,QAAO;AAAA,gBACP,gBAAa;AAAA,cAAA;cAEfA,EAIE,QAAA;AAAA,gBAHA,OAAM;AAAA,gBACN,MAAK;AAAA,gBACL,GAAE;AAAA,cAAA;;;UAICE,EAAAA,aAATN,EAAkD,KAAA;AAAA;YAAlC,SAAOD,EAAA,KAAW;AAAA,UAAA,KAAKO,EAAAA,IAAI,GAAA,CAAA;;kBAG/CN,EAgBM,OAAA;AAAA;QAhBO,SAAOJ,EAAA,KAAc;AAAA,MAAA;QAChCQ,EAcM,OAAA;AAAA,UAdD,OAAM;AAAA,UAAkB,MAAK;AAAA,UAAO,SAAQ;AAAA,QAAA;UAC/CA,EAOE,UAAA;AAAA,YANA,OAAM;AAAA,YACN,IAAG;AAAA,YACH,IAAG;AAAA,YACH,GAAE;AAAA,YACF,QAAO;AAAA,YACP,gBAAa;AAAA,UAAA;UAEfA,EAIE,QAAA;AAAA,YAHA,OAAM;AAAA,YACN,MAAK;AAAA,YACL,GAAE;AAAA,UAAA;;;MAICE,EAAAA,SAASL,EAAAA,gBAAlBD,EAA8D,KAAA;AAAA;QAAlC,SAAOD,EAAA,KAAW;AAAA,MAAA,KAAKO,EAAAA,IAAI,GAAA,CAAA;;;;"}

package/dist/UiProgressBar.vue_vue_type_script_setup_true_lang-D4-B3A7K.js

@@ -0,0 +1,51 @@
+import { defineComponent as i, ref as u, watch as d, createElementBlock as s, openBlock as t, createElementVNode as r, createCommentVNode as n, toDisplayString as c, normalizeStyle as m } from "vue";
+const b = { class: "sl-flex sl-justify-between sl-mb-1" }, f = {
+  key: 0,
+  class: "sl-text-base sl-font-medium",
+  style: { color: "var(--sl-color-primary-700, #566e4b)" }
+}, y = {
+  key: 1,
+  class: "sl-text-sm sl-font-medium",
+  style: { color: "var(--sl-color-primary-700, #566e4b)" }
+}, p = { class: "sl-w-full sl-bg-gray-200 sl-rounded-full sl-h-2.5" }, v = /* @__PURE__ */ i({
+  __name: "UiProgressBar",
+  props: {
+    progress: {
+      type: Number,
+      default: 0,
+      required: !0
+    },
+    label: {
+      type: String,
+      default: ""
+    },
+    showProgressLabel: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  setup(e) {
+    const o = e, l = u(o.progress);
+    return d(() => o.progress, (a) => {
+      l.value = a;
+    }), (a, g) => (t(), s("div", null, [
+      r("div", b, [
+        e.label && e.label.length > 0 ? (t(), s("span", f, c(e.label), 1)) : n("", !0),
+        e.showProgressLabel ? (t(), s("span", y, c(l.value) + "%", 1)) : n("", !0)
+      ]),
+      r("div", p, [
+        r("div", {
+          class: "sl-h-2.5 sl-rounded-full sl-transition-all sl-duration-500 sl-ease-out",
+          style: m({
+            width: `${l.value}%`,
+            backgroundColor: "var(--sl-color-primary-600, #6b8a5e)"
+          })
+        }, null, 4)
+      ])
+    ]));
+  }
+});
+export {
+  v as _
+};
+//# sourceMappingURL=UiProgressBar.vue_vue_type_script_setup_true_lang-D4-B3A7K.js.map

package/dist/UiProgressBar.vue_vue_type_script_setup_true_lang-D4-B3A7K.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UiProgressBar.vue_vue_type_script_setup_true_lang-D4-B3A7K.js","sources":["../src/components/UiProgressBar.vue"],"sourcesContent":["<template>\n  <div>\n    <div class=\"sl-flex sl-justify-between sl-mb-1\">\n      <span v-if=\"label && label.length > 0\" class=\"sl-text-base sl-font-medium\" style=\"color: var(--sl-color-primary-700, #566e4b);\">{{ label }}</span>\n      <span v-if=\"showProgressLabel\" class=\"sl-text-sm sl-font-medium\" style=\"color: var(--sl-color-primary-700, #566e4b);\">{{ progress }}%</span>\n    </div>\n    <div class=\"sl-w-full sl-bg-gray-200 sl-rounded-full sl-h-2.5\">\n      <div class=\"sl-h-2.5 sl-rounded-full sl-transition-all sl-duration-500 sl-ease-out\" \n        :style=\"{ \n          width: `${progress}%`,\n          backgroundColor: 'var(--sl-color-primary-600, #6b8a5e)'\n        }\" />\n    </div>\n  </div>\n</template>\n  \n<script setup lang=\"ts\">\nimport { ref, watch } from 'vue';\n\n// Props\nconst props = defineProps({\n  progress: {\n    type: Number,\n    default: 0,\n    required: true\n  },\n  label: {\n    type: String,\n    default: ''\n  },\n  showProgressLabel: {\n    type: Boolean,\n    default: false\n  }\n});\n\nconst progress = ref(props.progress);\n\n// Watch for changes to props.progress and update local state\nwatch(() => props.progress, (newValue) => {\n  progress.value = newValue;\n});\n</script>\n  \n<style scoped>\n</style>\n"],"names":["props","__props","progress","ref","watch","newValue","_createElementBlock","_createElementVNode","_hoisted_1","_hoisted_2","_toDisplayString","_openBlock","_hoisted_3","_hoisted_4","_normalizeStyle"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAoBA,UAAMA,IAAQC,GAgBRC,IAAWC,EAAIH,EAAM,QAAQ;AAGnC,WAAAI,EAAM,MAAMJ,EAAM,UAAU,CAACK,MAAa;AACxC,MAAAH,EAAS,QAAQG;AAAA,IACnB,CAAC,mBAxCCC,EAYM,OAAA,MAAA;AAAA,MAXJC,EAGM,OAHNC,GAGM;AAAA,QAFQP,EAAA,SAASA,EAAA,MAAM,SAAM,UAAjCK,EAAkJ,QAAlJG,GAAkJC,EAAfT,EAAA,KAAK,GAAA,CAAA;QAC5HA,EAAA,qBAAZU,EAAA,GAAAL,EAA4I,QAA5IM,GAA4IF,EAAnBR,EAAA,KAAQ,IAAG,KAAC,CAAA;;MAEvIK,EAMM,OANNM,GAMM;AAAA,QALJN,EAIO,OAAA;AAAA,UAJF,OAAM;AAAA,UACR,OAAKO,EAAA;AAAA,sBAAyBZ,EAAA,KAAQ;AAAA;;;;;;;"}

package/dist/components/Badge.js

@@ -1,16 +1,16 @@
-import { defineComponent as o, computed as g, createElementBlock as d, openBlock as i, normalizeClass as c, unref as l, renderSlot as p } from "vue";
-import { _ as u } from "../_plugin-vue_export-helper-CHgC5LLL.js";
-const m = "sl-inline-flex sl-items-center sl-font-medium sl-ring-1 sl-ring-inset sl-p-4", x = /* @__PURE__ */ o({
+import { defineComponent as g, computed as o, createElementBlock as d, openBlock as i, normalizeClass as p, unref as l, renderSlot as c } from "vue";
+import { _ as m } from "../_plugin-vue_export-helper-CHgC5LLL.js";
+const u = "sl-inline-flex sl-items-center sl-font-medium sl-ring-1 sl-ring-inset sl-p-4", y = /* @__PURE__ */ g({
   __name: "UiBadge",
   props: {
     theme: { default: "primary" },
     shape: { default: "default" },
     size: { default: "md" }
   },
-  setup(t) {
-    const s = t, r = g(() => ({
+  setup(r) {
+    const s = r, t = o(() => ({
       // Use the same color scheme as in UiButton
-      primary: "sl-bg-stachelock-050 sl-text-stachelock-600 sl-ring-stachelock-600/10",
+      primary: "sl-bg-primary-50 sl-text-primary-600 sl-ring-primary-600/10",
       dark: "sl-bg-gray-50 sl-text-gray-600 sl-ring-gray-500/10",
       secondary: "sl-bg-gray-100 sl-text-gray-800 sl-ring-gray-300",
       light: "sl-bg-white sl-text-gray-800 sl-ring-gray-300",
@@ -29,14 +29,14 @@ const m = "sl-inline-flex sl-items-center sl-font-medium sl-ring-1 sl-ring-inset
       md: "sl-px-3 sl-py-1 sl-text-sm",
       lg: "sl-px-4 sl-py-1.5 sl-text-md"
     }[s.size];
-    return (e, y) => (i(), d("span", {
-      class: c([m, l(a), r.value, l(n)])
+    return (e, x) => (i(), d("span", {
+      class: p([u, l(a), t.value, l(n)])
     }, [
-      p(e.$slots, "default", {}, void 0, !0)
+      c(e.$slots, "default", {}, void 0, !0)
     ], 2));
   }
-}), b = /* @__PURE__ */ u(x, [["__scopeId", "data-v-4f93de9f"]]);
+}), _ = /* @__PURE__ */ m(y, [["__scopeId", "data-v-22c23dac"]]);
 export {
-  b as default
+  _ as default
 };
 //# sourceMappingURL=Badge.js.map

package/dist/components/Badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.js","sources":["../../src/components/UiBadge.vue"],"sourcesContent":["<template>\n  <span :class=\"[badgeClass, roundedClass, colorClass, sizeClass]\">\n    <slot />\n  </span>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed } from 'vue';\n\ninterface BadgeProps {\n  theme?: 'primary' | 'dark' | 'secondary' | 'light' | 'warning' | 'danger' | 'success' | 'ghost';\n  shape?: 'circular' | 'rounded' | 'default';\n  size?: 'xs' | 'sm' | 'md' | 'lg';\n}\n\nconst props = withDefaults(defineProps<BadgeProps>(), {\n  theme: 'primary',\n  shape: 'default',\n  size: 'md'\n});\n\nconst badgeClass = 'sl-inline-flex sl-items-center sl-font-medium sl-ring-1 sl-ring-inset sl-p-4';\n\nconst colorClass = computed(() => {\n  const baseClasses = {\n    // Use the same color scheme as in UiButton\n    primary: 'sl-bg-stachelock-050 sl-text-stachelock-600 sl-ring-stachelock-600/10',\n    dark: 'sl-bg-gray-50 sl-text-gray-600 sl-ring-gray-500/10',\n    secondary: 'sl-bg-gray-100 sl-text-gray-800 sl-ring-gray-300',\n    light: 'sl-bg-white sl-text-gray-800 sl-ring-gray-300',\n    warning: 'sl-bg-yellow-50 sl-text-yellow-800 sl-ring-yellow-600/20',\n    danger: 'sl-bg-red-50 sl-text-red-700 sl-ring-red-600/10',\n    success: 'sl-bg-green-50 sl-text-green-700 sl-ring-green-600/20',\n    ghost: 'sl-bg-white sl-text-gray-400 sl-ring-gray-400/20',\n  };\n  return baseClasses[props.theme];\n});\n\nconst roundedClass = {\n  circular: 'sl-rounded-full',\n  rounded: 'sl-rounded-lg',\n  default: 'sl-rounded-md', // Default rounded class\n}[props.shape];\n\nconst sizeClass = {\n  xs: 'sl-px-1 sl-py-0.5 sl-text-4xs',\n  sm: 'sl-px-2 sl-py-0.5 sl-text-xs',\n  md: 'sl-px-3 sl-py-1 sl-text-sm',\n  lg: 'sl-px-4 sl-py-1.5 sl-text-md',\n}[props.size];\n</script>\n\n<style scoped>\n/* Add any additional styling here */\n</style>\n"],"names":["badgeClass","props","__props","colorClass","computed","roundedClass","sizeClass","_createElementBlock","_unref","_renderSlot","_ctx"],"mappings":";;AAqBA,MAAMA,IAAa;;;;;;;;AANnB,UAAMC,IAAQC,GAQRC,IAAaC,EAAS,OACN;AAAA;AAAA,MAElB,SAAS;AAAA,MACT,MAAM;AAAA,MACN,WAAW;AAAA,MACX,OAAO;AAAA,MACP,SAAS;AAAA,MACT,QAAQ;AAAA,MACR,SAAS;AAAA,MACT,OAAO;AAAA,IAAA,GAEUH,EAAM,KAAK,CAC/B,GAEKI,IAAe;AAAA,MACnB,UAAU;AAAA,MACV,SAAS;AAAA,MACT,SAAS;AAAA;AAAA,IAAA,EACTJ,EAAM,KAAK,GAEPK,IAAY;AAAA,MAChB,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,IAAA,EACJL,EAAM,IAAI;2BAhDVM,EAEO,QAAA;AAAA,MAFA,UAAQP,GAAYQ,MAAcL,EAAA,OAAYK,EAAAF,CAAA,CAAS,CAAA;AAAA,IAAA;MAC5DG,EAAQC,EAAA,QAAA,WAAA,CAAA,GAAA,QAAA,EAAA;AAAA,IAAA;;;"}
+{"version":3,"file":"Badge.js","sources":["../../src/components/UiBadge.vue"],"sourcesContent":["<template>\n  <span :class=\"[badgeClass, roundedClass, colorClass, sizeClass]\">\n    <slot />\n  </span>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed } from 'vue';\n\ninterface BadgeProps {\n  theme?: 'primary' | 'dark' | 'secondary' | 'light' | 'warning' | 'danger' | 'success' | 'ghost';\n  shape?: 'circular' | 'rounded' | 'default';\n  size?: 'xs' | 'sm' | 'md' | 'lg';\n}\n\nconst props = withDefaults(defineProps<BadgeProps>(), {\n  theme: 'primary',\n  shape: 'default',\n  size: 'md'\n});\n\nconst badgeClass = 'sl-inline-flex sl-items-center sl-font-medium sl-ring-1 sl-ring-inset sl-p-4';\n\nconst colorClass = computed(() => {\n  const baseClasses = {\n    // Use the same color scheme as in UiButton\n    primary: 'sl-bg-primary-50 sl-text-primary-600 sl-ring-primary-600/10',\n    dark: 'sl-bg-gray-50 sl-text-gray-600 sl-ring-gray-500/10',\n    secondary: 'sl-bg-gray-100 sl-text-gray-800 sl-ring-gray-300',\n    light: 'sl-bg-white sl-text-gray-800 sl-ring-gray-300',\n    warning: 'sl-bg-yellow-50 sl-text-yellow-800 sl-ring-yellow-600/20',\n    danger: 'sl-bg-red-50 sl-text-red-700 sl-ring-red-600/10',\n    success: 'sl-bg-green-50 sl-text-green-700 sl-ring-green-600/20',\n    ghost: 'sl-bg-white sl-text-gray-400 sl-ring-gray-400/20',\n  };\n  return baseClasses[props.theme];\n});\n\nconst roundedClass = {\n  circular: 'sl-rounded-full',\n  rounded: 'sl-rounded-lg',\n  default: 'sl-rounded-md', // Default rounded class\n}[props.shape];\n\nconst sizeClass = {\n  xs: 'sl-px-1 sl-py-0.5 sl-text-4xs',\n  sm: 'sl-px-2 sl-py-0.5 sl-text-xs',\n  md: 'sl-px-3 sl-py-1 sl-text-sm',\n  lg: 'sl-px-4 sl-py-1.5 sl-text-md',\n}[props.size];\n</script>\n\n<style scoped>\n/* Add any additional styling here */\n</style>\n"],"names":["badgeClass","props","__props","colorClass","computed","roundedClass","sizeClass","_createElementBlock","_unref","_renderSlot","_ctx"],"mappings":";;AAqBA,MAAMA,IAAa;;;;;;;;AANnB,UAAMC,IAAQC,GAQRC,IAAaC,EAAS,OACN;AAAA;AAAA,MAElB,SAAS;AAAA,MACT,MAAM;AAAA,MACN,WAAW;AAAA,MACX,OAAO;AAAA,MACP,SAAS;AAAA,MACT,QAAQ;AAAA,MACR,SAAS;AAAA,MACT,OAAO;AAAA,IAAA,GAEUH,EAAM,KAAK,CAC/B,GAEKI,IAAe;AAAA,MACnB,UAAU;AAAA,MACV,SAAS;AAAA,MACT,SAAS;AAAA;AAAA,IAAA,EACTJ,EAAM,KAAK,GAEPK,IAAY;AAAA,MAChB,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,IAAA,EACJL,EAAM,IAAI;2BAhDVM,EAEO,QAAA;AAAA,MAFA,UAAQP,GAAYQ,MAAcL,EAAA,OAAYK,EAAAF,CAAA,CAAS,CAAA;AAAA,IAAA;MAC5DG,EAAQC,EAAA,QAAA,WAAA,CAAA,GAAA,QAAA,EAAA;AAAA,IAAA;;;"}

package/dist/components/Button.js

@@ -1,9 +1,9 @@
-import { defineComponent as P, defineAsyncComponent as R, computed as o, ref as C, onMounted as q, nextTick as B, watch as D, createElementBlock as t, openBlock as n, normalizeClass as r, createCommentVNode as u, createElementVNode as U, renderSlot as c, Fragment as G, createVNode as h, unref as d, toDisplayString as H } from "vue";
-import { _ as J } from "../_plugin-vue_export-helper-CHgC5LLL.js";
-const K = ["disabled"], Q = { class: "sl-absolute sl-top-0 sl-right-0 sl-transform sl-translate-x-1/2 -sl-translate-y-1/2" }, X = {
+import { defineComponent as R, defineAsyncComponent as q, computed as o, ref as k, onMounted as D, nextTick as B, watch as U, createElementBlock as t, openBlock as r, normalizeStyle as G, normalizeClass as n, createCommentVNode as u, createElementVNode as H, renderSlot as f, Fragment as J, createVNode as h, unref as d, toDisplayString as K } from "vue";
+import { _ as Q } from "../_plugin-vue_export-helper-CHgC5LLL.js";
+const X = ["disabled", "data-theme"], Y = { class: "sl-absolute sl-top-0 sl-right-0 sl-transform sl-translate-x-1/2 -sl-translate-y-1/2" }, Z = {
   key: 6,
   class: "sl-absolute sl-inset-0 sl-flex sl-items-center sl-justify-center sl-bg-opacity-75 sl-bg-white dark:sl-bg-opacity-75 dark:sl-bg-gray-700 sl-rounded sl-z-10"
-}, Y = { key: 0 }, Z = "sl-ml-auto sl-flex sl-items-center", L = "sl-absolute sl-right-0 sl-top-1/2 -sl-translate-y-1/2 sl-pr-0 sl-flex sl-items-center", ee = /* @__PURE__ */ P({
+}, ee = { key: 0 }, se = "sl-ml-auto sl-flex sl-items-center", L = "sl-absolute sl-right-0 sl-top-1/2 -sl-translate-y-1/2 sl-pr-0 sl-flex sl-items-center", le = /* @__PURE__ */ R({
   __name: "UiButton",
   props: {
     replaceLeadingIconWithLoading: { type: Boolean, default: !1 },
@@ -31,7 +31,7 @@ const K = ["disabled"], Q = { class: "sl-absolute sl-top-0 sl-right-0 sl-transfo
   },
   emits: ["button-click", "hover-enter", "hover-leave"],
   setup(I, { emit: z }) {
-    const y = R(() => import("./Loading.js")), e = I, b = z, f = o(() => !!e.loading), m = o(() => e.replaceLeadingIconWithLoading || !1), v = C(null), g = C(e.theme ?? "primary"), _ = (s) => {
+    const y = q(() => import("./Loading.js")), e = I, m = z, c = o(() => !!e.loading), b = o(() => e.replaceLeadingIconWithLoading || !1), v = k(null), g = k(e.theme ?? "primary"), _ = (s) => {
       for (; s && s !== document.documentElement; ) {
         const l = window.getComputedStyle(s).backgroundColor;
         if (l && l !== "rgba(0, 0, 0, 0)" && l !== "transparent")
@@ -47,16 +47,16 @@ const K = ["disabled"], Q = { class: "sl-absolute sl-top-0 sl-right-0 sl-transfo
       if (!l) return;
       window.getComputedStyle(s).backgroundColor === l && (g.value = g.value === "light" ? "primary" : "light");
     };
-    q(() => {
+    D(() => {
       B(x);
-    }), D(
+    }), U(
       () => e.theme,
       (s) => {
         g.value = s || "primary", B(x);
       },
       { immediate: !1 }
     );
-    const i = o(() => g.value), w = o(() => e.loadingSize || e.size || "md"), M = o(() => {
+    const i = o(() => g.value), w = o(() => e.loadingSize || e.size || "md"), S = o(() => {
       const s = {
         primary: "sl-text-stachelock-600 sl-border sl-border-stachelock-600 hover:sl-bg-stachelock-50 hover:sl-border-stachelock-400 focus:sl-outline-none focus:sl-ring-2 focus:sl-ring-stachelock-300 focus:sl-ring-offset-2 focus:sl-ring-offset-gray-50",
         dark: "sl-text-gray-700 sl-border sl-border-gray-700 hover:sl-bg-gray-50 hover:sl-border-gray-800 focus:sl-outline-none focus:sl-ring-2 focus:sl-ring-gray-300 focus:sl-ring-offset-2 focus:sl-ring-offset-gray-50",
@@ -67,7 +67,7 @@ const K = ["disabled"], Q = { class: "sl-absolute sl-top-0 sl-right-0 sl-transfo
         success: "sl-text-green-500 sl-border sl-border-green-500 hover:sl-bg-green-50 hover:sl-border-green-400 focus:sl-outline-none focus:sl-ring-2 focus:sl-ring-green-300 focus:sl-ring-offset-2 focus:sl-ring-offset-gray-50",
         ghost: "sl-text-gray-800 sl-border sl-border-transparent sl-bg-transparent hover:sl-text-gray-700 focus:sl-outline-none"
       }, l = {
-        primary: "sl-border sl-border-transparent sl-bg-stachelock-600 sl-text-white sl-shadow-sm hover:sl-bg-stachelock-700 focus:sl-outline-none focus:sl-ring-2 focus:sl-ring-stachelock-500 focus:sl-ring-offset-2 focus:sl-ring-offset-gray-50",
+        primary: "sl-border sl-border-transparent sl-text-white sl-shadow-sm focus:sl-outline-none focus:sl-ring-2 focus:sl-ring-offset-2 focus:sl-ring-offset-gray-50",
         dark: "sl-border sl-border-transparent sl-bg-gray-700 sl-text-white sl-shadow-sm hover:sl-bg-gray-800 focus:sl-outline-none focus:sl-ring-2 focus:sl-ring-gray-500 focus:sl-ring-offset-2 focus:sl-ring-offset-gray-50",
         secondary: "sl-text-gray-800 sl-bg-gray-200 hover:sl-bg-gray-100 focus:sl-outline-none focus:sl-ring-2 focus:sl-ring-gray-300 focus:sl-ring-offset-2 focus:sl-ring-offset-gray-50 sl-border sl-border-gray-300",
         light: "sl-text-gray-800 sl-bg-gray-200 hover:sl-bg-gray-100 focus:sl-outline-none focus:sl-ring-2 focus:sl-ring-gray-300 focus:sl-ring-offset-2 focus:sl-ring-offset-gray-50 sl-border sl-border-gray-300",
@@ -77,13 +77,13 @@ const K = ["disabled"], Q = { class: "sl-absolute sl-top-0 sl-right-0 sl-transfo
         ghost: "sl-border sl-border-transparent sl-text-gray-800 sl-bg-transparent hover:sl-text-gray-700 focus:sl-outline-none"
       };
       return e.outlined ? `${s[i.value] || ""} sl-bg-transparent` : l[i.value] || "";
-    }), S = {
+    }), M = {
       square: "",
       rounded: "sl-rounded",
       "rounded-md": "sl-rounded-md",
       "rounded-lg": "sl-rounded-lg",
       "rounded-full": "sl-rounded-full"
-    }, k = o(() => S[e.rounded || "rounded-md"]), j = o(() => ({
+    }, C = o(() => M[e.rounded || "rounded-md"]), j = o(() => ({
       xs: "sl-p-0.5",
       sm: "sl-p-1",
       md: "sl-p-2",
@@ -101,11 +101,11 @@ const K = ["disabled"], Q = { class: "sl-absolute sl-top-0 sl-right-0 sl-transfo
       if (e.customClass)
         return e.customClass;
       const l = [...[
-        k.value,
+        C.value,
         j.value,
         $.value,
         E.value,
-        M.value,
+        S.value,
         e.disabled ? "sl-cursor-not-allowed" : "sl-cursor-pointer",
         "focus:sl-ring-0",
         "sl-relative",
@@ -113,85 +113,90 @@ const K = ["disabled"], Q = { class: "sl-absolute sl-top-0 sl-right-0 sl-transfo
         "sl-items-center",
         "sl-justify-center"
       ]];
-      return k.value === "sl-rounded-full" ? l.push("sl-px-1", "sl-py-1") : l.push("sl-px-2.5", "sl-py-2"), e.centerLeadingIcon && !a.value ? l.push("sl-w-full", "sl-h-full") : (e.leadingIcon || e.inlineFlex || e.trailingIcon) && l.push("sl-inline-flex"), l.filter(Boolean);
-    }), O = o(() => e.trailingOverlay ? L : Z), F = o(() => e.trailingOverlay ? `${L} sl-h-5 sl-w-5` : "sl-ml-2 sl-h-5 sl-w-5 sl-flex sl-items-center"), p = o(() => e.centerLeadingIcon && !a.value ? "sl-absolute sl-inset-0 sl-flex sl-items-center sl-justify-center sl-w-full sl-h-full" : e.centerLeadingIcon ? "sl-h-full sl-flex sl-items-center sl-justify-center" : a.value ? "-sl-ml-0.5 sl-h-5 sl-w-5 sl-flex sl-items-center sl-justify-center" : "sl-flex sl-items-center sl-justify-center"), N = () => {
-      b("button-click");
-    }, V = () => {
-      b("hover-enter");
+      return C.value === "sl-rounded-full" ? l.push("sl-px-1", "sl-py-1") : l.push("sl-px-2.5", "sl-py-2"), e.centerLeadingIcon && !a.value ? l.push("sl-w-full", "sl-h-full") : (e.leadingIcon || e.inlineFlex || e.trailingIcon) && l.push("sl-inline-flex"), l.filter(Boolean);
+    }), O = o(() => e.theme === "primary" ? {
+      backgroundColor: "var(--sl-color-primary-600, #6b8a5e)",
+      "--tw-ring-color": "var(--sl-color-primary-500, #7a966e)"
+    } : {}), F = o(() => e.trailingOverlay ? L : se), N = o(() => e.trailingOverlay ? `${L} sl-h-5 sl-w-5` : "sl-ml-2 sl-h-5 sl-w-5 sl-flex sl-items-center"), p = o(() => e.centerLeadingIcon && !a.value ? "sl-absolute sl-inset-0 sl-flex sl-items-center sl-justify-center sl-w-full sl-h-full" : e.centerLeadingIcon ? "sl-h-full sl-flex sl-items-center sl-justify-center" : a.value ? "-sl-ml-0.5 sl-h-5 sl-w-5 sl-flex sl-items-center sl-justify-center" : "sl-flex sl-items-center sl-justify-center"), V = () => {
+      m("button-click");
     }, W = () => {
-      b("hover-leave");
-    }, A = e.showLoadingTitle || !1;
-    return (s, l) => (n(), t("button", {
+      m("hover-enter");
+    }, A = () => {
+      m("hover-leave");
+    }, P = e.showLoadingTitle || !1;
+    return (s, l) => (r(), t("button", {
       ref_key: "buttonRef",
       ref: v,
       type: "button",
       disabled: e.disabled,
-      class: r(T.value),
-      onClick: N,
-      onMouseenter: V,
-      onMouseleave: W
+      class: n(T.value),
+      style: G(O.value),
+      "data-theme": e.theme,
+      onClick: V,
+      onMouseenter: W,
+      onMouseleave: A
     }, [
-      e.centerLeadingIcon && !a.value ? (n(), t("div", {
+      e.centerLeadingIcon && !a.value ? (r(), t("div", {
         key: 0,
-        class: r(p.value)
+        class: n(p.value)
       }, [
-        c(s.$slots, "leading-icon", {}, void 0, !0)
-      ], 2)) : (n(), t(G, { key: 1 }, [
-        m.value && f.value ? (n(), t("div", {
+        f(s.$slots, "leading-icon", {}, void 0, !0)
+      ], 2)) : (r(), t(J, { key: 1 }, [
+        b.value && c.value ? (r(), t("div", {
           key: 0,
-          class: r(["sl-flex sl-items-center sl-justify-center", [p.value, a.value ? "" : "sl-h-full sl-w-full"]])
+          class: n(["sl-flex sl-items-center sl-justify-center", [p.value, a.value ? "" : "sl-h-full sl-w-full"]])
         }, [
           h(d(y), {
             theme: i.value,
             size: w.value
           }, null, 8, ["theme", "size"])
-        ], 2)) : e.leadingIcon ? (n(), t("div", {
+        ], 2)) : e.leadingIcon ? (r(), t("div", {
           key: 1,
-          class: r(p.value)
+          class: n(p.value)
         }, [
-          c(s.$slots, "leading-icon", {}, void 0, !0)
+          f(s.$slots, "leading-icon", {}, void 0, !0)
         ], 2)) : u("", !0)
       ], 64)),
-      a.value ? (n(), t("span", {
+      a.value ? (r(), t("span", {
         key: 2,
-        class: r(["sl-flex-1 sl-text-center", [
+        class: n(["sl-flex-1 sl-text-center", [
           { "sl-truncate sl-max-w-[150px]": s.truncateLabel },
           { "sl-mx-auto": !e.leadingIcon && !e.trailingIcon }
         ]])
-      }, H(e.label), 3)) : (!m.value || !f.value) && !e.centerLeadingIcon ? (n(), t("span", {
+      }, K(e.label), 3)) : (!b.value || !c.value) && !e.centerLeadingIcon ? (r(), t("span", {
         key: 3,
-        class: r(["sl-flex", e.centerLabel || !e.leadingIcon && !e.trailingIcon ? "sl-justify-center sl-items-center sl-flex-1" : "sl-flex-1"])
+        class: n(["sl-flex", e.centerLabel || !e.leadingIcon && !e.trailingIcon ? "sl-justify-center sl-items-center sl-flex-1" : "sl-flex-1"])
       }, [
-        c(s.$slots, "default", {}, void 0, !0)
+        f(s.$slots, "default", {}, void 0, !0)
       ], 2)) : u("", !0),
-      e.trailingLoading && f.value ? (n(), t("div", {
+      e.trailingLoading && c.value ? (r(), t("div", {
         key: 4,
-        class: r(O.value)
+        class: n(F.value)
       }, [
         h(d(y), {
           theme: i.value,
           size: e.trailingLoadingSize || "sm"
         }, null, 8, ["theme", "size"])
-      ], 2)) : e.trailingIcon ? (n(), t("div", {
+      ], 2)) : e.trailingIcon ? (r(), t("div", {
         key: 5,
-        class: r(F.value)
+        class: n(N.value)
       }, [
-        c(s.$slots, "trailing-icon", {}, void 0, !0)
+        f(s.$slots, "trailing-icon", {}, void 0, !0)
       ], 2)) : u("", !0),
-      U("div", Q, [
-        c(s.$slots, "badge", {}, void 0, !0)
+      H("div", Y, [
+        f(s.$slots, "badge", {}, void 0, !0)
       ]),
-      f.value && !m.value && !e.trailingLoading ? (n(), t("div", X, [
+      c.value && !b.value && !e.trailingLoading ? (r(), t("div", Z, [
         h(d(y), {
           theme: i.value,
           size: w.value
         }, null, 8, ["theme", "size"]),
-        d(A) ? (n(), t("p", Y, "Loading...")) : u("", !0)
+        d(P) ? (r(), t("p", ee, "Loading...")) : u("", !0)
       ])) : u("", !0)
-    ], 42, K));
+    ], 46, X));
   }
-}), te = /* @__PURE__ */ J(ee, [["__scopeId", "data-v-43795fb6"]]);
+}), ne = /* @__PURE__ */ Q(le, [["__scopeId", "data-v-1fe16850"]]);
 export {
-  te as default
+  ne as default
 };
 //# sourceMappingURL=Button.js.map

package/dist/components/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sources":["../../src/components/UiButton.vue"],"sourcesContent":["<template>\n  <button\n    ref=\"buttonRef\"\n    type=\"button\"\n    :disabled=\"props.disabled\"\n    :class=\"buttonClasses\"\n    @click=\"onClick\"\n    @mouseenter=\"onMouseEnter\"\n    @mouseleave=\"onMouseLeave\"\n  >\n    <!-- Leading Icon Area (or Loading Replacement) -->\n    <template v-if=\"props.centerLeadingIcon && !isLabelPresent\">\n      <div :class=\"leadingIconClasses\">\n        <slot name=\"leading-icon\" />\n      </div>\n    </template>\n    <template v-else>\n      <div\n        v-if=\"replaceLeadingIconWithLoading && loading\"\n        class=\"sl-flex sl-items-center sl-justify-center\"\n        :class=\"[leadingIconClasses, !isLabelPresent ? 'sl-h-full sl-w-full' : '']\"\n      >\n        <Loading :theme=\"theme\" :size=\"loadingSize\" />\n      </div>\n      <div v-else-if=\"props.leadingIcon\" :class=\"leadingIconClasses\">\n        <slot name=\"leading-icon\" />\n      </div>\n    </template>\n\n    <!-- Button Content -->\n    <span\n      v-if=\"isLabelPresent\"\n      class=\"sl-flex-1 sl-text-center\"\n      :class=\"[\n        { 'sl-truncate sl-max-w-[150px]': truncateLabel },\n        { 'sl-mx-auto': !props.leadingIcon && !props.trailingIcon }\n      ]\"\n    >\n      {{ props.label }}\n    </span>\n    <span\n      v-else-if=\"(!replaceLeadingIconWithLoading || !loading) && !props.centerLeadingIcon\"\n      class=\"sl-flex\"\n      :class=\"props.centerLabel || (!props.leadingIcon && !props.trailingIcon) ? 'sl-justify-center sl-items-center sl-flex-1' : 'sl-flex-1'\"\n    >\n      <slot />\n    </span>\n\n    <!-- Trailing Icon or Loading -->\n    <div v-if=\"props.trailingLoading && loading\" :class=\"trailingLoadingClasses\">\n      <Loading :theme=\"theme\" :size=\"props.trailingLoadingSize || 'sm'\" />\n    </div>\n    <div v-else-if=\"props.trailingIcon\" :class=\"trailingIconClasses\">\n      <slot name=\"trailing-icon\" />\n    </div>\n\n    <!-- Badge Slot -->\n    <div class=\"sl-absolute sl-top-0 sl-right-0 sl-transform sl-translate-x-1/2 -sl-translate-y-1/2\">\n      <slot name=\"badge\" />\n    </div>\n\n    <!-- Overlay Loading (if not replacing the leading icon and not using trailing loading) -->\n    <div\n      v-if=\"loading && !replaceLeadingIconWithLoading && !props.trailingLoading\"\n      class=\"sl-absolute sl-inset-0 sl-flex sl-items-center sl-justify-center sl-bg-opacity-75 sl-bg-white dark:sl-bg-opacity-75 dark:sl-bg-gray-700 sl-rounded sl-z-10\"\n    >\n      <Loading :theme=\"theme\" :size=\"loadingSize\" />\n      <p v-if=\"showLoadingTitle\">Loading...</p>\n    </div>\n  </button>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed, defineAsyncComponent, ref, onMounted, watch, nextTick } from 'vue';\nimport type { ButtonType, RoundedType, Theme } from '../types/ui';\n\n// Asynchronously load the Loading component\nconst Loading = defineAsyncComponent(() => import('./UiLoading.vue'));\n\n// Define props using the ButtonType interface\ninterface ButtonProps extends ButtonType {\n  replaceLeadingIconWithLoading?: boolean;\n  centerLeadingIcon?: boolean;\n  /**\n   * When enabled, shows loading indicator in trailing position instead of overlay\n   */\n  trailingLoading?: boolean;\n  /**\n   * Size of the loading indicator when using trailingLoading\n   */\n  trailingLoadingSize?: import('../types/ui').Size;\n  /**\n   * Positions trailing loading/icon absolutely at the far right, centered vertically.\n   */\n  trailingOverlay?: boolean;\n  /**\n   * When enabled the button will attempt to automatically choose a contrasting\n   * colour theme if its background matches that of its closest non-transparent\n   * ancestor.\n   */\n  autoContrast?: boolean;\n}\n\nconst props = withDefaults(defineProps<ButtonProps>(), {\n  theme: 'primary',\n  size: 'md',\n  rounded: 'rounded-md',\n  disabled: false,\n  expanded: false,\n  outlined: false,\n  loading: false,\n  leadingIcon: false,\n  trailingIcon: false,\n  showLoadingTitle: false,\n  truncateLabel: false,\n  centerLabel: false,\n  inlineFlex: false,\n  replaceLeadingIconWithLoading: false,\n  centerLeadingIcon: false,\n  trailingLoading: false,\n  trailingOverlay: false,\n  autoContrast: false,\n});\n\n// Define the emits\nconst emit = defineEmits<{\n  'button-click': []\n  'hover-enter': []\n  'hover-leave': []\n}>();\n\n// Reactive computed properties\nconst loading = computed(() => Boolean(props.loading));\nconst replaceLeadingIconWithLoading = computed(() => props.replaceLeadingIconWithLoading || false);\n\n// Reference to the underlying button element\nconst buttonRef = ref<HTMLElement | null>(null);\n\n// Internal reactive theme value that may be overridden for auto-contrast\nconst resolvedTheme = ref<Theme>(props.theme ?? 'primary');\n\nconst findParentBackground = (node: HTMLElement | null): string | null => {\n  while (node && node !== document.documentElement) {\n    const bg = window.getComputedStyle(node).backgroundColor;\n    if (bg && bg !== 'rgba(0, 0, 0, 0)' && bg !== 'transparent') {\n      return bg;\n    }\n    node = node.parentElement as HTMLElement | null;\n  }\n  return null;\n};\n\nconst adjustThemeBasedOnBackground = (): void => {\n  if (!props.autoContrast) return;\n  const el = buttonRef.value;\n  if (!el) return;\n\n  const parentBg = findParentBackground(el.parentElement as HTMLElement | null);\n  if (!parentBg) return;\n\n  const buttonBg = window.getComputedStyle(el).backgroundColor;\n\n  if (buttonBg === parentBg) {\n    resolvedTheme.value = resolvedTheme.value === 'light' ? 'primary' : 'light';\n  }\n};\n\nonMounted(() => {\n  nextTick(adjustThemeBasedOnBackground);\n});\n\nwatch(\n  () => props.theme,\n  (newTheme) => {\n    resolvedTheme.value = newTheme || 'primary';\n    nextTick(adjustThemeBasedOnBackground);\n  },\n  { immediate: false }\n);\n\n// Public computed theme\nconst theme = computed(() => resolvedTheme.value);\n\n// Compute loading size with fallback\nconst loadingSize = computed(() => props.loadingSize || props.size || 'md');\n\n// Styling computed properties\nconst colorClass = computed(() => {\n  const outlineBaseClasses: Record<string, string> = {\n    primary: 'sl-text-stachelock-600 sl-border sl-border-stachelock-600 hover:sl-bg-stachelock-50 hover:sl-border-stachelock-400 focus:sl-outline-none focus:sl-ring-2 focus:sl-ring-stachelock-300 focus:sl-ring-offset-2 focus:sl-ring-offset-gray-50',\n    dark: 'sl-text-gray-700 sl-border sl-border-gray-700 hover:sl-bg-gray-50 hover:sl-border-gray-800 focus:sl-outline-none focus:sl-ring-2 focus:sl-ring-gray-300 focus:sl-ring-offset-2 focus:sl-ring-offset-gray-50',\n    secondary: 'sl-text-gray-800 sl-border sl-border-gray-300 hover:sl-bg-gray-100 focus:sl-outline-none focus:sl-ring-2 focus:sl-ring-gray-300 focus:sl-ring-offset-2 focus:sl-ring-offset-gray-50',\n    light: 'sl-text-gray-800 sl-border sl-border-gray-300 hover:sl-bg-gray-100 focus:sl-outline-none focus:sl-ring-2 focus:sl-ring-gray-300 focus:sl-ring-offset-2 focus:sl-ring-offset-gray-50',\n    warning: 'sl-text-yellow-500 sl-border sl-border-yellow-500 hover:sl-bg-yellow-50 hover:sl-border-yellow-400 focus:sl-outline-none focus:sl-ring-2 focus:sl-ring-yellow-300 focus:sl-ring-offset-2 focus:sl-ring-offset-gray-50',\n    danger: 'sl-text-red-500 sl-border sl-border-red-500 hover:sl-bg-red-50 hover:sl-border-red-400 focus:sl-outline-none focus:sl-ring-2 focus:sl-ring-red-300 focus:sl-ring-offset-2 focus:sl-ring-offset-gray-50',\n    success: 'sl-text-green-500 sl-border sl-border-green-500 hover:sl-bg-green-50 hover:sl-border-green-400 focus:sl-outline-none focus:sl-ring-2 focus:sl-ring-green-300 focus:sl-ring-offset-2 focus:sl-ring-offset-gray-50',\n    ghost: 'sl-text-gray-800 sl-border sl-border-transparent sl-bg-transparent hover:sl-text-gray-700 focus:sl-outline-none',\n  };\n\n  const filledBaseClasses: Record<string, string> = {\n    primary: 'sl-border sl-border-transparent sl-bg-stachelock-600 sl-text-white sl-shadow-sm hover:sl-bg-stachelock-700 focus:sl-outline-none focus:sl-ring-2 focus:sl-ring-stachelock-500 focus:sl-ring-offset-2 focus:sl-ring-offset-gray-50',\n    dark: 'sl-border sl-border-transparent sl-bg-gray-700 sl-text-white sl-shadow-sm hover:sl-bg-gray-800 focus:sl-outline-none focus:sl-ring-2 focus:sl-ring-gray-500 focus:sl-ring-offset-2 focus:sl-ring-offset-gray-50',\n    secondary: 'sl-text-gray-800 sl-bg-gray-200 hover:sl-bg-gray-100 focus:sl-outline-none focus:sl-ring-2 focus:sl-ring-gray-300 focus:sl-ring-offset-2 focus:sl-ring-offset-gray-50 sl-border sl-border-gray-300',\n    light: 'sl-text-gray-800 sl-bg-gray-200 hover:sl-bg-gray-100 focus:sl-outline-none focus:sl-ring-2 focus:sl-ring-gray-300 focus:sl-ring-offset-2 focus:sl-ring-offset-gray-50 sl-border sl-border-gray-300',\n    warning: 'sl-border sl-border-transparent sl-bg-yellow-400 sl-text-white sl-shadow-sm hover:sl-bg-yellow-600 focus:sl-outline-none focus:sl-ring-2 focus:sl-ring-yellow-400 focus:sl-ring-offset-2 focus:sl-ring-offset-gray-50',\n    danger: 'sl-border sl-border-transparent sl-bg-red-500 sl-text-white sl-shadow-sm hover:sl-bg-red-600 focus:sl-outline-none focus:sl-ring-2 focus:sl-ring-red-400 focus:sl-ring-offset-2 focus:sl-ring-offset-gray-50',\n    success: 'sl-border sl-border-transparent sl-bg-green-500 sl-text-white sl-shadow-sm hover:sl-bg-green-600 focus:sl-outline-none focus:sl-ring-2 focus:sl-ring-green-400 focus:sl-ring-offset-2 focus:sl-ring-offset-gray-50',\n    ghost: 'sl-border sl-border-transparent sl-text-gray-800 sl-bg-transparent hover:sl-text-gray-700 focus:sl-outline-none',\n  };\n\n  if (props.outlined) {\n    return `${outlineBaseClasses[theme.value] || ''} sl-bg-transparent`;\n  } else {\n    return filledBaseClasses[theme.value] || '';\n  }\n});\n\nconst roundedClassMap: Record<RoundedType, string> = {\n  square: '',\n  rounded: 'sl-rounded',\n  'rounded-md': 'sl-rounded-md',\n  'rounded-lg': 'sl-rounded-lg',\n  'rounded-full': 'sl-rounded-full',\n};\n\nconst roundedClass = computed(() => roundedClassMap[props.rounded || 'rounded-md']);\n\nconst sizeClass = computed(() => {\n  const sizeMapping: Record<string, string> = {\n    xs: 'sl-p-0.5',\n    sm: 'sl-p-1',\n    md: 'sl-p-2',\n    lg: 'sl-p-3',\n    xl: 'sl-p-4',\n    '2xl': 'sl-p-5',\n  };\n  return sizeMapping[props.size || 'md'];\n});\n\nconst textClass = computed(() => {\n  const textMapping: Record<string, string> = {\n    xs: 'sl-text-xs sl-font-regular',\n    sm: 'sl-text-sm sl-font-regular',\n    md: 'sl-text-base sl-font-medium',\n    lg: 'sl-text-lg sl-font-medium',\n    xl: 'sl-text-xl sl-font-medium',\n    '2xl': 'sl-text-2xl sl-font-medium',\n  };\n  return textMapping[props.size || 'sm'];\n});\n\nconst expandedClass = computed(() => (props.expanded ? 'sl-w-full' : ''));\n\nconst isLabelPresent = computed(() => !!props.label && props.label.length > 0);\n\nconst buttonClasses = computed(() => {\n  if (props.customClass) {\n    return props.customClass;\n  }\n\n  const coreClasses = [\n    roundedClass.value,\n    sizeClass.value,\n    textClass.value,\n    expandedClass.value,\n    colorClass.value,\n    props.disabled ? 'sl-cursor-not-allowed' : 'sl-cursor-pointer',\n    'focus:sl-ring-0',\n    'sl-relative',\n    'sl-flex',\n    'sl-items-center',\n    'sl-justify-center',\n  ];\n\n  const finalClasses = [...coreClasses];\n\n  if (roundedClass.value === 'sl-rounded-full') {\n    finalClasses.push('sl-px-1', 'sl-py-1');\n  } else {\n    finalClasses.push('sl-px-2.5', 'sl-py-2');\n  }\n\n  if (props.centerLeadingIcon && !isLabelPresent.value) {\n    finalClasses.push('sl-w-full', 'sl-h-full');\n  } else {\n    if (props.leadingIcon || props.inlineFlex || props.trailingIcon) {\n      finalClasses.push('sl-inline-flex');\n    }\n  }\n\n  return finalClasses.filter(Boolean);\n});\n\nconst trailingBaseClasses = 'sl-ml-auto sl-flex sl-items-center';\nconst trailingAbsoluteClasses = 'sl-absolute sl-right-0 sl-top-1/2 -sl-translate-y-1/2 sl-pr-0 sl-flex sl-items-center';\nconst trailingLoadingClasses = computed(() => props.trailingOverlay ? trailingAbsoluteClasses : trailingBaseClasses);\nconst trailingIconClasses = computed(() => props.trailingOverlay ? `${trailingAbsoluteClasses} sl-h-5 sl-w-5` : 'sl-ml-2 sl-h-5 sl-w-5 sl-flex sl-items-center');\n\nconst leadingIconClasses = computed(() => {\n  if (props.centerLeadingIcon && !isLabelPresent.value) {\n    return 'sl-absolute sl-inset-0 sl-flex sl-items-center sl-justify-center sl-w-full sl-h-full';\n  }\n  if (props.centerLeadingIcon) {\n    return 'sl-h-full sl-flex sl-items-center sl-justify-center';\n  }\n  if (!isLabelPresent.value) {\n    return 'sl-flex sl-items-center sl-justify-center';\n  }\n  return '-sl-ml-0.5 sl-h-5 sl-w-5 sl-flex sl-items-center sl-justify-center';\n});\n\nconst onClick = (): void => {\n  emit('button-click');\n};\n\nconst onMouseEnter = (): void => {\n  emit('hover-enter');\n};\n\nconst onMouseLeave = (): void => {\n  emit('hover-leave');\n};\n\nconst showLoadingTitle = props.showLoadingTitle || false;\n</script>\n\n<style scoped>\n/* Component-specific styles if needed */\n</style>\n\n\n"],"names":["trailingBaseClasses","trailingAbsoluteClasses","Loading","defineAsyncComponent","props","__props","emit","__emit","loading","computed","replaceLeadingIconWithLoading","buttonRef","ref","resolvedTheme","findParentBackground","node","bg","adjustThemeBasedOnBackground","el","parentBg","onMounted","nextTick","watch","newTheme","theme","loadingSize","colorClass","outlineBaseClasses","filledBaseClasses","roundedClassMap","roundedClass","sizeClass","textClass","expandedClass","isLabelPresent","buttonClasses","finalClasses","trailingLoadingClasses","trailingIconClasses","leadingIconClasses","onClick","onMouseEnter","onMouseLeave","showLoadingTitle","_createElementBlock","_renderSlot","_ctx","_Fragment","_normalizeClass","_createVNode","_unref","truncateLabel","_toDisplayString","_createElementVNode","_hoisted_2","_openBlock","_hoisted_3"],"mappings":"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"}
+{"version":3,"file":"Button.js","sources":["../../src/components/UiButton.vue"],"sourcesContent":["<template>\n  <button\n    ref=\"buttonRef\"\n    type=\"button\"\n    :disabled=\"props.disabled\"\n    :class=\"buttonClasses\"\n    :style=\"buttonStyles\"\n    :data-theme=\"props.theme\"\n    @click=\"onClick\"\n    @mouseenter=\"onMouseEnter\"\n    @mouseleave=\"onMouseLeave\"\n  >\n    <!-- Leading Icon Area (or Loading Replacement) -->\n    <template v-if=\"props.centerLeadingIcon && !isLabelPresent\">\n      <div :class=\"leadingIconClasses\">\n        <slot name=\"leading-icon\" />\n      </div>\n    </template>\n    <template v-else>\n      <div\n        v-if=\"replaceLeadingIconWithLoading && loading\"\n        class=\"sl-flex sl-items-center sl-justify-center\"\n        :class=\"[leadingIconClasses, !isLabelPresent ? 'sl-h-full sl-w-full' : '']\"\n      >\n        <Loading :theme=\"theme\" :size=\"loadingSize\" />\n      </div>\n      <div v-else-if=\"props.leadingIcon\" :class=\"leadingIconClasses\">\n        <slot name=\"leading-icon\" />\n      </div>\n    </template>\n\n    <!-- Button Content -->\n    <span\n      v-if=\"isLabelPresent\"\n      class=\"sl-flex-1 sl-text-center\"\n      :class=\"[\n        { 'sl-truncate sl-max-w-[150px]': truncateLabel },\n        { 'sl-mx-auto': !props.leadingIcon && !props.trailingIcon }\n      ]\"\n    >\n      {{ props.label }}\n    </span>\n    <span\n      v-else-if=\"(!replaceLeadingIconWithLoading || !loading) && !props.centerLeadingIcon\"\n      class=\"sl-flex\"\n      :class=\"props.centerLabel || (!props.leadingIcon && !props.trailingIcon) ? 'sl-justify-center sl-items-center sl-flex-1' : 'sl-flex-1'\"\n    >\n      <slot />\n    </span>\n\n    <!-- Trailing Icon or Loading -->\n    <div v-if=\"props.trailingLoading && loading\" :class=\"trailingLoadingClasses\">\n      <Loading :theme=\"theme\" :size=\"props.trailingLoadingSize || 'sm'\" />\n    </div>\n    <div v-else-if=\"props.trailingIcon\" :class=\"trailingIconClasses\">\n      <slot name=\"trailing-icon\" />\n    </div>\n\n    <!-- Badge Slot -->\n    <div class=\"sl-absolute sl-top-0 sl-right-0 sl-transform sl-translate-x-1/2 -sl-translate-y-1/2\">\n      <slot name=\"badge\" />\n    </div>\n\n    <!-- Overlay Loading (if not replacing the leading icon and not using trailing loading) -->\n    <div\n      v-if=\"loading && !replaceLeadingIconWithLoading && !props.trailingLoading\"\n      class=\"sl-absolute sl-inset-0 sl-flex sl-items-center sl-justify-center sl-bg-opacity-75 sl-bg-white dark:sl-bg-opacity-75 dark:sl-bg-gray-700 sl-rounded sl-z-10\"\n    >\n      <Loading :theme=\"theme\" :size=\"loadingSize\" />\n      <p v-if=\"showLoadingTitle\">Loading...</p>\n    </div>\n  </button>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed, defineAsyncComponent, ref, onMounted, watch, nextTick } from 'vue';\nimport type { ButtonType, RoundedType, Theme } from '../types/ui';\n\n// Asynchronously load the Loading component\nconst Loading = defineAsyncComponent(() => import('./UiLoading.vue'));\n\n// Define props using the ButtonType interface\ninterface ButtonProps extends ButtonType {\n  replaceLeadingIconWithLoading?: boolean;\n  centerLeadingIcon?: boolean;\n  /**\n   * When enabled, shows loading indicator in trailing position instead of overlay\n   */\n  trailingLoading?: boolean;\n  /**\n   * Size of the loading indicator when using trailingLoading\n   */\n  trailingLoadingSize?: import('../types/ui').Size;\n  /**\n   * Positions trailing loading/icon absolutely at the far right, centered vertically.\n   */\n  trailingOverlay?: boolean;\n  /**\n   * When enabled the button will attempt to automatically choose a contrasting\n   * colour theme if its background matches that of its closest non-transparent\n   * ancestor.\n   */\n  autoContrast?: boolean;\n}\n\nconst props = withDefaults(defineProps<ButtonProps>(), {\n  theme: 'primary',\n  size: 'md',\n  rounded: 'rounded-md',\n  disabled: false,\n  expanded: false,\n  outlined: false,\n  loading: false,\n  leadingIcon: false,\n  trailingIcon: false,\n  showLoadingTitle: false,\n  truncateLabel: false,\n  centerLabel: false,\n  inlineFlex: false,\n  replaceLeadingIconWithLoading: false,\n  centerLeadingIcon: false,\n  trailingLoading: false,\n  trailingOverlay: false,\n  autoContrast: false,\n});\n\n// Define the emits\nconst emit = defineEmits<{\n  'button-click': []\n  'hover-enter': []\n  'hover-leave': []\n}>();\n\n// Reactive computed properties\nconst loading = computed(() => Boolean(props.loading));\nconst replaceLeadingIconWithLoading = computed(() => props.replaceLeadingIconWithLoading || false);\n\n// Reference to the underlying button element\nconst buttonRef = ref<HTMLElement | null>(null);\n\n// Internal reactive theme value that may be overridden for auto-contrast\nconst resolvedTheme = ref<Theme>(props.theme ?? 'primary');\n\nconst findParentBackground = (node: HTMLElement | null): string | null => {\n  while (node && node !== document.documentElement) {\n    const bg = window.getComputedStyle(node).backgroundColor;\n    if (bg && bg !== 'rgba(0, 0, 0, 0)' && bg !== 'transparent') {\n      return bg;\n    }\n    node = node.parentElement as HTMLElement | null;\n  }\n  return null;\n};\n\nconst adjustThemeBasedOnBackground = (): void => {\n  if (!props.autoContrast) return;\n  const el = buttonRef.value;\n  if (!el) return;\n\n  const parentBg = findParentBackground(el.parentElement as HTMLElement | null);\n  if (!parentBg) return;\n\n  const buttonBg = window.getComputedStyle(el).backgroundColor;\n\n  if (buttonBg === parentBg) {\n    resolvedTheme.value = resolvedTheme.value === 'light' ? 'primary' : 'light';\n  }\n};\n\nonMounted(() => {\n  nextTick(adjustThemeBasedOnBackground);\n});\n\nwatch(\n  () => props.theme,\n  (newTheme) => {\n    resolvedTheme.value = newTheme || 'primary';\n    nextTick(adjustThemeBasedOnBackground);\n  },\n  { immediate: false }\n);\n\n// Public computed theme\nconst theme = computed(() => resolvedTheme.value);\n\n// Compute loading size with fallback\nconst loadingSize = computed(() => props.loadingSize || props.size || 'md');\n\n// Styling computed properties\nconst colorClass = computed(() => {\n  const outlineBaseClasses: Record<string, string> = {\n    primary: 'sl-text-stachelock-600 sl-border sl-border-stachelock-600 hover:sl-bg-stachelock-50 hover:sl-border-stachelock-400 focus:sl-outline-none focus:sl-ring-2 focus:sl-ring-stachelock-300 focus:sl-ring-offset-2 focus:sl-ring-offset-gray-50',\n    dark: 'sl-text-gray-700 sl-border sl-border-gray-700 hover:sl-bg-gray-50 hover:sl-border-gray-800 focus:sl-outline-none focus:sl-ring-2 focus:sl-ring-gray-300 focus:sl-ring-offset-2 focus:sl-ring-offset-gray-50',\n    secondary: 'sl-text-gray-800 sl-border sl-border-gray-300 hover:sl-bg-gray-100 focus:sl-outline-none focus:sl-ring-2 focus:sl-ring-gray-300 focus:sl-ring-offset-2 focus:sl-ring-offset-gray-50',\n    light: 'sl-text-gray-800 sl-border sl-border-gray-300 hover:sl-bg-gray-100 focus:sl-outline-none focus:sl-ring-2 focus:sl-ring-gray-300 focus:sl-ring-offset-2 focus:sl-ring-offset-gray-50',\n    warning: 'sl-text-yellow-500 sl-border sl-border-yellow-500 hover:sl-bg-yellow-50 hover:sl-border-yellow-400 focus:sl-outline-none focus:sl-ring-2 focus:sl-ring-yellow-300 focus:sl-ring-offset-2 focus:sl-ring-offset-gray-50',\n    danger: 'sl-text-red-500 sl-border sl-border-red-500 hover:sl-bg-red-50 hover:sl-border-red-400 focus:sl-outline-none focus:sl-ring-2 focus:sl-ring-red-300 focus:sl-ring-offset-2 focus:sl-ring-offset-gray-50',\n    success: 'sl-text-green-500 sl-border sl-border-green-500 hover:sl-bg-green-50 hover:sl-border-green-400 focus:sl-outline-none focus:sl-ring-2 focus:sl-ring-green-300 focus:sl-ring-offset-2 focus:sl-ring-offset-gray-50',\n    ghost: 'sl-text-gray-800 sl-border sl-border-transparent sl-bg-transparent hover:sl-text-gray-700 focus:sl-outline-none',\n  };\n\n  const filledBaseClasses: Record<string, string> = {\n    primary: 'sl-border sl-border-transparent sl-text-white sl-shadow-sm focus:sl-outline-none focus:sl-ring-2 focus:sl-ring-offset-2 focus:sl-ring-offset-gray-50',\n    dark: 'sl-border sl-border-transparent sl-bg-gray-700 sl-text-white sl-shadow-sm hover:sl-bg-gray-800 focus:sl-outline-none focus:sl-ring-2 focus:sl-ring-gray-500 focus:sl-ring-offset-2 focus:sl-ring-offset-gray-50',\n    secondary: 'sl-text-gray-800 sl-bg-gray-200 hover:sl-bg-gray-100 focus:sl-outline-none focus:sl-ring-2 focus:sl-ring-gray-300 focus:sl-ring-offset-2 focus:sl-ring-offset-gray-50 sl-border sl-border-gray-300',\n    light: 'sl-text-gray-800 sl-bg-gray-200 hover:sl-bg-gray-100 focus:sl-outline-none focus:sl-ring-2 focus:sl-ring-gray-300 focus:sl-ring-offset-2 focus:sl-ring-offset-gray-50 sl-border sl-border-gray-300',\n    warning: 'sl-border sl-border-transparent sl-bg-yellow-400 sl-text-white sl-shadow-sm hover:sl-bg-yellow-600 focus:sl-outline-none focus:sl-ring-2 focus:sl-ring-yellow-400 focus:sl-ring-offset-2 focus:sl-ring-offset-gray-50',\n    danger: 'sl-border sl-border-transparent sl-bg-red-500 sl-text-white sl-shadow-sm hover:sl-bg-red-600 focus:sl-outline-none focus:sl-ring-2 focus:sl-ring-red-400 focus:sl-ring-offset-2 focus:sl-ring-offset-gray-50',\n    success: 'sl-border sl-border-transparent sl-bg-green-500 sl-text-white sl-shadow-sm hover:sl-bg-green-600 focus:sl-outline-none focus:sl-ring-2 focus:sl-ring-green-400 focus:sl-ring-offset-2 focus:sl-ring-offset-gray-50',\n    ghost: 'sl-border sl-border-transparent sl-text-gray-800 sl-bg-transparent hover:sl-text-gray-700 focus:sl-outline-none',\n  };\n\n  if (props.outlined) {\n    return `${outlineBaseClasses[theme.value] || ''} sl-bg-transparent`;\n  } else {\n    return filledBaseClasses[theme.value] || '';\n  }\n});\n\nconst roundedClassMap: Record<RoundedType, string> = {\n  square: '',\n  rounded: 'sl-rounded',\n  'rounded-md': 'sl-rounded-md',\n  'rounded-lg': 'sl-rounded-lg',\n  'rounded-full': 'sl-rounded-full',\n};\n\nconst roundedClass = computed(() => roundedClassMap[props.rounded || 'rounded-md']);\n\nconst sizeClass = computed(() => {\n  const sizeMapping: Record<string, string> = {\n    xs: 'sl-p-0.5',\n    sm: 'sl-p-1',\n    md: 'sl-p-2',\n    lg: 'sl-p-3',\n    xl: 'sl-p-4',\n    '2xl': 'sl-p-5',\n  };\n  return sizeMapping[props.size || 'md'];\n});\n\nconst textClass = computed(() => {\n  const textMapping: Record<string, string> = {\n    xs: 'sl-text-xs sl-font-regular',\n    sm: 'sl-text-sm sl-font-regular',\n    md: 'sl-text-base sl-font-medium',\n    lg: 'sl-text-lg sl-font-medium',\n    xl: 'sl-text-xl sl-font-medium',\n    '2xl': 'sl-text-2xl sl-font-medium',\n  };\n  return textMapping[props.size || 'sm'];\n});\n\nconst expandedClass = computed(() => (props.expanded ? 'sl-w-full' : ''));\n\nconst isLabelPresent = computed(() => !!props.label && props.label.length > 0);\n\nconst buttonClasses = computed(() => {\n  if (props.customClass) {\n    return props.customClass;\n  }\n\n  const coreClasses = [\n    roundedClass.value,\n    sizeClass.value,\n    textClass.value,\n    expandedClass.value,\n    colorClass.value,\n    props.disabled ? 'sl-cursor-not-allowed' : 'sl-cursor-pointer',\n    'focus:sl-ring-0',\n    'sl-relative',\n    'sl-flex',\n    'sl-items-center',\n    'sl-justify-center',\n  ];\n\n  const finalClasses = [...coreClasses];\n\n  if (roundedClass.value === 'sl-rounded-full') {\n    finalClasses.push('sl-px-1', 'sl-py-1');\n  } else {\n    finalClasses.push('sl-px-2.5', 'sl-py-2');\n  }\n\n  if (props.centerLeadingIcon && !isLabelPresent.value) {\n    finalClasses.push('sl-w-full', 'sl-h-full');\n  } else {\n    if (props.leadingIcon || props.inlineFlex || props.trailingIcon) {\n      finalClasses.push('sl-inline-flex');\n    }\n  }\n\n  return finalClasses.filter(Boolean);\n});\n\nconst buttonStyles = computed(() => {\n  if (props.theme === 'primary') {\n    return {\n      backgroundColor: 'var(--sl-color-primary-600, #6b8a5e)',\n      '--tw-ring-color': 'var(--sl-color-primary-500, #7a966e)',\n    };\n  }\n  return {};\n});\n\nconst trailingBaseClasses = 'sl-ml-auto sl-flex sl-items-center';\nconst trailingAbsoluteClasses = 'sl-absolute sl-right-0 sl-top-1/2 -sl-translate-y-1/2 sl-pr-0 sl-flex sl-items-center';\nconst trailingLoadingClasses = computed(() => props.trailingOverlay ? trailingAbsoluteClasses : trailingBaseClasses);\nconst trailingIconClasses = computed(() => props.trailingOverlay ? `${trailingAbsoluteClasses} sl-h-5 sl-w-5` : 'sl-ml-2 sl-h-5 sl-w-5 sl-flex sl-items-center');\n\nconst leadingIconClasses = computed(() => {\n  if (props.centerLeadingIcon && !isLabelPresent.value) {\n    return 'sl-absolute sl-inset-0 sl-flex sl-items-center sl-justify-center sl-w-full sl-h-full';\n  }\n  if (props.centerLeadingIcon) {\n    return 'sl-h-full sl-flex sl-items-center sl-justify-center';\n  }\n  if (!isLabelPresent.value) {\n    return 'sl-flex sl-items-center sl-justify-center';\n  }\n  return '-sl-ml-0.5 sl-h-5 sl-w-5 sl-flex sl-items-center sl-justify-center';\n});\n\nconst onClick = (): void => {\n  emit('button-click');\n};\n\nconst onMouseEnter = (): void => {\n  emit('hover-enter');\n};\n\nconst onMouseLeave = (): void => {\n  emit('hover-leave');\n};\n\nconst showLoadingTitle = props.showLoadingTitle || false;\n</script>\n\n<style scoped>\n/* Component-specific styles if needed */\nbutton[data-theme=\"primary\"]:hover {\n  background-color: var(--sl-color-primary-700, #566e4b) !important;\n}\n</style>\n\n\n"],"names":["trailingBaseClasses","trailingAbsoluteClasses","Loading","defineAsyncComponent","props","__props","emit","__emit","loading","computed","replaceLeadingIconWithLoading","buttonRef","ref","resolvedTheme","findParentBackground","node","bg","adjustThemeBasedOnBackground","el","parentBg","onMounted","nextTick","watch","newTheme","theme","loadingSize","colorClass","outlineBaseClasses","filledBaseClasses","roundedClassMap","roundedClass","sizeClass","textClass","expandedClass","isLabelPresent","buttonClasses","finalClasses","buttonStyles","trailingLoadingClasses","trailingIconClasses","leadingIconClasses","onClick","onMouseEnter","onMouseLeave","showLoadingTitle","_createElementBlock","_renderSlot","_ctx","_Fragment","_normalizeClass","_createVNode","_unref","truncateLabel","_toDisplayString","_createElementVNode","_hoisted_2","_openBlock","_hoisted_3"],"mappings":"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"}

package/dist/components/Loading.js

@@ -1,4 +1,4 @@
-import { _ as f } from "../UiLoading.vue_vue_type_script_setup_true_lang-DCz52-Me.js";
+import { _ as f } from "../UiLoading.vue_vue_type_script_setup_true_lang-KbLKA4SA.js";
 export {
   f as default
 };

package/dist/components/LoadingDots.js

@@ -1,9 +1,12 @@
-import { defineComponent as m, computed as g, createElementBlock as l, openBlock as e, createElementVNode as s, toDisplayString as a, normalizeClass as n, Fragment as d, renderList as c, normalizeStyle as r } from "vue";
-import { _ as x } from "../_plugin-vue_export-helper-CHgC5LLL.js";
-const y = {
+import { defineComponent as m, computed as g, createElementBlock as s, openBlock as e, createElementVNode as l, toDisplayString as a, normalizeClass as n, Fragment as d, renderList as r, normalizeStyle as c } from "vue";
+import { _ as y } from "../_plugin-vue_export-helper-CHgC5LLL.js";
+const x = {
   key: 0,
   class: "sl-bg-white sl-px-6 sl-py-24 sm:sl-py-32 lg:sl-px-8"
-}, f = { class: "sl-mx-auto sl-max-w-2xl sl-text-center" }, v = { class: "sl-text-base sl-font-semibold sl-leading-7 sl-text-stachelock-600" }, b = { class: "sl-mt-2 sl-text-4xl sl-font-bold sl-tracking-tight sl-text-gray-900 sm:sl-text-6xl" }, k = { class: "sl-flex sl-justify-center sl-mt-6" }, h = { class: "sl-mt-6 sl-text-lg sl-leading-8 sl-text-gray-600" }, p = {
+}, f = { class: "sl-mx-auto sl-max-w-2xl sl-text-center" }, v = {
+  class: "sl-text-base sl-font-semibold sl-leading-7",
+  style: { color: "var(--sl-color-primary-600, #6b8a5e)" }
+}, b = { class: "sl-mt-2 sl-text-4xl sl-font-bold sl-tracking-tight sl-text-gray-900 sm:sl-text-6xl" }, p = { class: "sl-flex sl-justify-center sl-mt-6" }, k = { class: "sl-mt-6 sl-text-lg sl-leading-8 sl-text-gray-600" }, h = {
   key: 1,
   class: "sl-flex sl-justify-center sl-mt-6"
 }, _ = /* @__PURE__ */ m({
@@ -11,7 +14,7 @@ const y = {
   props: {
     backgroundColor: {
       type: String,
-      default: "#3e4b9a"
+      default: "var(--sl-color-primary-600, #6b8a5e)"
     },
     size: {
       type: String,
@@ -33,36 +36,36 @@ const y = {
   },
   setup(t) {
     const u = t, i = g(() => `dots-${u.size}`);
-    return (C, S) => t.title && t.subtitle && t.caption ? (e(), l("div", y, [
-      s("div", f, [
-        s("p", v, a(t.caption), 1),
-        s("h2", b, a(t.title), 1),
-        s("div", k, [
-          s("div", {
+    return (C, S) => t.title && t.subtitle && t.caption ? (e(), s("div", x, [
+      l("div", f, [
+        l("p", v, a(t.caption), 1),
+        l("h2", b, a(t.title), 1),
+        l("div", p, [
+          l("div", {
             class: n(["loader-dots", i.value])
           }, [
-            (e(), l(d, null, c(4, (o) => s("div", {
+            (e(), s(d, null, r(4, (o) => l("div", {
               key: o,
               class: "dots-div",
-              style: r({ backgroundColor: t.backgroundColor })
+              style: c({ backgroundColor: t.backgroundColor })
             }, null, 4)), 64))
           ], 2)
         ]),
-        s("p", h, a(t.subtitle), 1)
+        l("p", k, a(t.subtitle), 1)
       ])
-    ])) : (e(), l("div", p, [
-      s("div", {
+    ])) : (e(), s("div", h, [
+      l("div", {
         class: n(["loader-dots", i.value])
       }, [
-        (e(), l(d, null, c(4, (o) => s("div", {
+        (e(), s(d, null, r(4, (o) => l("div", {
           key: o,
           class: "dots-div",
-          style: r({ backgroundColor: t.backgroundColor })
+          style: c({ backgroundColor: t.backgroundColor })
         }, null, 4)), 64))
       ], 2)
     ]));
   }
-}), L = /* @__PURE__ */ x(_, [["__scopeId", "data-v-8f791736"]]);
+}), L = /* @__PURE__ */ y(_, [["__scopeId", "data-v-b6dd98d0"]]);
 export {
   L as default
 };