@indielayer/ui 1.5.1 → 1.5.2

package/docs/components/toolbar/Toolbar.vue

@@ -25,7 +25,7 @@ const isDev = import.meta.env.DEV
 
 <template>
   <x-container fluid class="bg-white dark:bg-secondary-800">
-    <div class="flex justify-items-center items-center py-2">
+    <div class="flex justify-items-center items-center py-2 min-h-[54px]">
       <a href="/" class="flex items-center">
         <img src="@/assets/images/logo_mini.svg" width="26" alt="Indielayer"/>
         <x-divider vertical class="!h-[24px] mx-3"/>
@@ -40,14 +40,7 @@ const isDev = import.meta.env.DEV
       <x-spacer/>
 
       <div class="flex items-center font-semibold text-sm">
-        <x-select
-          v-if="isDev"
-          v-model="selected"
-          :options="options"
-          hide-footer
-          size="sm"
-        />
-        <x-divider v-if="isDev" vertical style="height: 10px;" class="px-2"/>
+
         <div class="tracking-wide text-xs">v{{ version }}</div>
         <x-divider vertical style="height: 10px;" class="px-2 hidden sm:block"/>
         <x-link

package/docs/pages/component/form/usage.vue

@@ -33,25 +33,22 @@ function onSubmit(isValid: string) {
 
 <template>
   <x-form title="Edit user information" description="Almost all fields are required" @submit="onSubmit">
-    <div class="grid grid-cols-2 gap-4">
-      <x-input
-        v-model="email"
-        :rules="[rules.isRequired, rules.isEmail]"
-        name="email"
-        label="Email"
-        placeholder="Enter your email"
-      />
-      <x-input
-        v-model="password"
-        type="password"
-        :rules="[rules.isRequired]"
-        name="password"
-        label="Password"
-        placeholder="Enter your password"
-        helper="Must be between 8 and 10 characters"
-      />
-    </div>
-
+    <x-input
+      v-model="email"
+      :rules="[rules.isRequired, rules.isEmail]"
+      name="email"
+      label="Email"
+      placeholder="Enter your email"
+    />
+    <x-input
+      v-model="password"
+      type="password"
+      :rules="[rules.isRequired]"
+      name="password"
+      label="Password"
+      placeholder="Enter your password"
+      helper="Must be between 8 and 10 characters"
+    />
     <x-textarea
       v-model="description"
       name="description"

package/exports/nuxt.plugin.js

@@ -1,8 +1,15 @@
 import { defineNuxtPlugin } from '#app'
-import create from '../src/create'
+import { BaseTheme, injectIconsKey, injectOptionsKey, injectThemeKey, createUI } from '../src'
 
 export default defineNuxtPlugin((nuxtApp) => {
-  const UI = create(nuxtApp.$config.public?.indielayerOptions)
+  const UI = createUI({
+    ...nuxtApp.$config.public?.indielayerOptions,
+    theme: BaseTheme,
+    injectIconsKey,
+    injectOptionsKey,
+    injectThemeKey,
+
+  })
 
   nuxtApp.vueApp.use(UI)
 })

package/lib/components/accordion/AccordionItem.vue.js

@@ -27,13 +27,13 @@ const R = { class: "flex-1 overflow-hidden" }, U = {
     type: String,
     default: "right"
   }
-}, oe = {
+}, te = {
   name: "XAccordionItem",
   validators: {
     iconAlign: Z
   }
 }, ae = /* @__PURE__ */ V({
-  ...oe,
+  ...te,
   props: ee,
   emits: ["expand"],
   setup(A, { expose: x, emit: _ }) {
@@ -41,40 +41,40 @@ const R = { class: "flex-1 overflow-hidden" }, U = {
       isInsideAccordion: !1
     }), w = z(() => u.iconAlign || n.iconAlign), I = D({
       iconAlign: w
-    }), o = m(!n.expanded), t = m(!0);
+    }), t = m(!n.expanded), o = m(!0);
     H(() => n.expanded, () => {
-      o.value = !n.expanded;
+      t.value = !n.expanded;
     });
     function B(e) {
-      t.value && (e.style.height = "0px");
+      o.value && (e.style.height = "0px");
     }
     function E(e, i) {
-      t.value ? (e.addEventListener("transitionend", i), setTimeout(() => {
+      o.value ? (e.addEventListener("transitionend", i), setTimeout(() => {
         e.style.height = `${e.scrollHeight}px`;
       }, 1)) : i();
     }
-    function C(e) {
-      t.value ? e.style.removeProperty("height") : t.value = !0;
+    function b(e) {
+      o.value ? e.style.removeProperty("height") : o.value = !0;
     }
-    function $(e) {
-      t.value && (e.style.height = `${e.scrollHeight}px`);
+    function C(e) {
+      o.value && (e.style.height = `${e.scrollHeight}px`);
     }
-    function b(e, i) {
-      t.value ? (e.addEventListener("transitionend", i), setTimeout(() => {
+    function $(e, i) {
+      o.value ? (e.addEventListener("transitionend", i), setTimeout(() => {
         e.style.height = "0px";
       }, 1)) : i();
     }
     function S(e) {
-      t.value ? e.style.removeProperty("height") : t.value = !0;
+      o.value ? e.style.removeProperty("height") : o.value = !0;
     }
     function p(e = !0) {
-      t.value = e, o.value = !1;
+      o.value = e, t.value = !1;
     }
     function L(e = !0) {
-      t.value = e, o.value = !0;
+      o.value = e, t.value = !0;
     }
     function f() {
-      n.disabled || (o.value = !o.value);
+      n.disabled || (t.value = !t.value);
     }
     function P(e = !0) {
       p(e), k("expand");
@@ -82,20 +82,21 @@ const R = { class: "flex-1 overflow-hidden" }, U = {
     const { styles: N, classes: c, className: T } = J("AccordionItem", {}, {
       ...n,
       ...I
-    }, { collapsed: o, isInsideAccordion: u.isInsideAccordion });
+    }, { collapsed: t, isInsideAccordion: u.isInsideAccordion });
     return x({ toggle: f, open: p, close: L }), (e, i) => (a(), v(K(e.tag), {
       style: M(s(N)),
       class: l(s(T)),
       "aria-disabled": e.disabled,
-      "aria-expanded": o.value ? "false" : "true"
+      "aria-expanded": t.value ? "false" : "true"
     }, {
       default: h(() => [
         r("button", {
+          type: "button",
           class: l(s(c).wrapper),
           onClick: f
         }, [
           r("div", R, [
-            d(e.$slots, "default", { collapsed: o.value })
+            d(e.$slots, "default", { collapsed: t.value })
           ]),
           e.showIcon ? (a(), g("div", {
             key: 0,
@@ -111,9 +112,9 @@ const R = { class: "flex-1 overflow-hidden" }, U = {
         X(q, {
           onBeforeEnter: B,
           onEnter: E,
-          onAfterEnter: C,
-          onBeforeLeave: $,
-          onLeave: b,
+          onAfterEnter: b,
+          onBeforeLeave: C,
+          onLeave: $,
           onAfterLeave: S
         }, {
           default: h(() => [
@@ -122,10 +123,10 @@ const R = { class: "flex-1 overflow-hidden" }, U = {
             }, [
               d(e.$slots, "content", {
                 expand: P,
-                collapsed: o.value
+                collapsed: t.value
               })
             ], 2), [
-              [G, !o.value]
+              [G, !t.value]
             ])
           ]),
           _: 3

package/lib/components/accordion/theme/AccordionItem.base.theme.js

@@ -1,16 +1,16 @@
-const r = {
+const i = {
   classes: {
-    wrapper: ({ props: t, slots: i, data: e }) => {
-      const s = ["relative flex items-center w-full text-left"];
-      return e.isInsideAccordion && (i.default && (t.iconAlign === "left" ? s.push("pl-8 pr-4") : s.push("pr-8 pl-4"), s.push("py-2"), t.disabled || s.push("hover:bg-secondary-50 dark:hover:bg-secondary-600")), t.disabled || s.push("cursor-pointer")), s;
+    wrapper: ({ props: t, slots: r, data: e }) => {
+      const s = ["relative flex items-center w-full text-left rounded"];
+      return e.isInsideAccordion && (r.default && (t.iconAlign === "left" ? s.push("pl-8 pr-4") : s.push("pr-8 pl-4"), s.push("py-2"), t.disabled || s.push("hover:bg-secondary-100 dark:hover:bg-secondary-600")), t.disabled || s.push("cursor-pointer")), s;
     },
-    icon: ({ props: t, data: i }) => {
+    icon: ({ props: t, data: r }) => {
       const e = ["absolute flex transform transition-transform duration-150"];
-      return i.collapsed || e.push("rotate-180"), t.disabled && e.push("text-secondary-300"), t.iconAlign === "left" ? e.push("left-2") : e.push("right-2"), e;
+      return r.collapsed || e.push("rotate-180"), t.disabled && e.push("text-secondary-300"), t.iconAlign === "left" ? e.push("left-2") : e.push("right-2"), e;
     },
     content: "transition-[height] duration-150 overflow-y-hidden"
   }
-}, n = r;
+}, n = i;
 export {
   n as default
 };

package/lib/components/alert/Alert.vue2.js

@@ -1,4 +1,4 @@
-import { defineComponent as v, computed as g, openBlock as l, createElementBlock as a, normalizeStyle as k, unref as r, normalizeClass as w, renderSlot as t, createBlock as b, createCommentVNode as i, createElementVNode as n, Fragment as B, createVNode as $ } from "vue";
+import { defineComponent as v, computed as g, openBlock as l, createElementBlock as a, normalizeStyle as k, unref as r, normalizeClass as b, renderSlot as t, createBlock as w, createCommentVNode as i, createElementVNode as n, Fragment as B, createVNode as $ } from "vue";
 import { useColors as I } from "../../composables/useColors.js";
 import { useTheme as C } from "../../composables/useTheme.js";
 import { infoIcon as h, successIcon as N, errorIcon as S, warningIcon as V, closeIcon as z } from "../../common/icons.js";
@@ -24,7 +24,7 @@ const A = /* @__PURE__ */ n("div", { class: "flex-grow" }, null, -1), E = ["aria
     const o = m, p = g(() => o.type === "info" ? h : o.type === "success" ? N : o.type === "error" ? S : o.type === "warning" ? V : ""), { styles: u, classes: f, className: d } = C("Alert", {}, o);
     return (e, s) => (l(), a("div", {
       style: k(r(u)),
-      class: w([
+      class: b([
         r(d),
         e.$style.alert,
         e.glow ? e.$style["alert--glow"] : "",
@@ -32,7 +32,7 @@ const A = /* @__PURE__ */ n("div", { class: "flex-grow" }, null, -1), E = ["aria
       ])
     }, [
       t(e.$slots, "icon", {}, () => [
-        e.type ? (l(), b(c, {
+        e.type ? (l(), w(c, {
           key: 0,
           icon: p.value,
           class: "text-[color:var(--x-alert-icon)] dark:text-[color:var(--x-alert-dark-icon)]"
@@ -44,6 +44,7 @@ const A = /* @__PURE__ */ n("div", { class: "flex-grow" }, null, -1), E = ["aria
       e.removable ? (l(), a(B, { key: 0 }, [
         A,
         n("button", {
+          type: "button",
           class: "shrink-0",
           "aria-label": e.closeLabel,
           onClick: s[0] || (s[0] = (y) => e.$emit("remove", y))

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

@@ -1,59 +1,59 @@
-const o = {
+const i = {
   classes: {
-    wrapper: ({ data: r }) => {
-      const e = ["inline-block relative cursor-pointer align-middle"];
-      return r.isInsideForm && !r.isInsideFormGroup && e.push("mb-3"), e;
+    wrapper: ({ data: e }) => {
+      const r = ["inline-block relative cursor-pointer align-middle"];
+      return e.isInsideForm && !e.isInsideFormGroup && r.push("mb-5"), r;
     },
-    box: ({ props: r }) => {
-      const e = ["rounded flex justify-center items-center shrink-0 border border-[color:var(--x-checkbox-border)] bg-[color:var(--x-checkbox-bg)] dark:border-[color:var(--x-checkbox-dark-border)] dark:bg-[color:var(--x-checkbox-dark-bg)]"];
-      return r.size === "lg" ? e.push("h-5 w-5") : r.size === "xl" ? e.push("h-6 w-6") : e.push("h-4 w-4"), e;
+    box: ({ props: e }) => {
+      const r = ["rounded flex justify-center items-center shrink-0 border border-[color:var(--x-checkbox-border)] bg-[color:var(--x-checkbox-bg)] dark:border-[color:var(--x-checkbox-dark-border)] dark:bg-[color:var(--x-checkbox-dark-bg)]"];
+      return e.size === "lg" ? r.push("h-5 w-5") : e.size === "xl" ? r.push("h-6 w-6") : r.push("h-4 w-4"), r;
     },
-    content: ({ props: r }) => {
-      const e = ["flex items-baseline"];
-      return r.disabled && e.push("cursor-not-allowed"), e;
+    content: ({ props: e }) => {
+      const r = ["flex items-baseline"];
+      return e.disabled && r.push("cursor-not-allowed"), r;
     },
-    icon: ({ props: r }) => {
-      const e = ["fill-current text-white"];
-      return r.size === "lg" ? e.push("h-3 w-3") : r.size === "xl" ? e.push("h-4 w-4") : e.push("h-2.5 w-2.5"), e;
+    icon: ({ props: e }) => {
+      const r = ["fill-current text-white"];
+      return e.size === "lg" ? r.push("h-3 w-3") : e.size === "xl" ? r.push("h-4 w-4") : r.push("h-2.5 w-2.5"), r;
     },
-    label: ({ props: r }) => {
-      const e = ["inline-block font-medium text-secondary-800 dark:text-secondary-200 pl-2"];
-      return r.size === "xs" ? e.push("text-xs") : r.size === "sm" ? e.push("text-sm") : r.size === "lg" ? e.push("text-lg") : r.size === "xl" && e.push("text-xl"), e;
+    label: ({ props: e, data: r }) => {
+      const s = ["inline-block text-secondary-800 dark:text-secondary-200 pl-2"];
+      return s.push(r.isInsideFormGroup ? "font-normal" : "font-medium"), e.size === "xs" ? s.push("text-xs") : e.size === "sm" ? s.push("text-sm") : e.size === "lg" ? s.push("text-lg") : e.size === "xl" && s.push("text-xl"), s;
     }
   },
-  styles({ props: r, colors: e, css: l, data: i }) {
-    const s = e.getPalette("gray"), t = e.getPalette(r.color), a = [];
-    return r.loading ? l.variables({
+  styles({ props: e, colors: r, css: s, data: a }) {
+    const t = r.getPalette("gray"), l = r.getPalette(e.color), o = [];
+    return e.loading ? s.variables({
       bg: "transparent",
       border: "transparent",
       dark: {
         bg: "transparent",
         border: "transparent"
       }
-    }) : (r.disabled ? a.push(l.variables({
-      bg: s[100],
-      border: s[200],
+    }) : (e.disabled ? o.push(s.variables({
+      bg: t[100],
+      border: t[200],
       dark: {
-        bg: s[800],
-        border: s[700]
+        bg: t[800],
+        border: t[700]
       }
-    })) : (i.checked ? a.push(l.variables({
-      bg: t[500],
-      border: t[500],
+    })) : (a.checked ? o.push(s.variables({
+      bg: l[500],
+      border: l[500],
       dark: {
-        bg: t[500],
-        border: t[500]
+        bg: l[500],
+        border: l[500]
       }
-    })) : a.push(l.variables({
+    })) : o.push(s.variables({
       bg: "#fff",
-      border: r.glow ? t[300] : s[300],
+      border: e.glow ? l[300] : t[300],
       dark: {
-        bg: s[900],
-        border: r.glow ? t[300] : s[400]
+        bg: t[900],
+        border: e.glow ? l[300] : t[400]
       }
-    })), r.glow && a.push(l.get("glow", e.getColorOpacity(t[500], 0.5)))), a);
+    })), e.glow && o.push(s.get("glow", r.getColorOpacity(l[500], 0.5)))), o);
   }
-}, n = o;
+}, n = i;
 export {
   n as default
 };

package/lib/components/inputFooter/theme/InputFooter.base.theme.js

@@ -1,6 +1,6 @@
 const e = {
   classes: {
-    wrapper: "min-h-[1.3rem] text-xs mt-1",
+    wrapper: "text-xs mt-1",
     helperText: "text-secondary-500 dark:text-secondary-400",
     errorText: "text-error-500 dark:text-error-400"
   }

package/lib/components/label/theme/Label.base.theme.js

@@ -2,7 +2,7 @@ const s = {
   classes: {
     wrapper: ({ props: t }) => {
       const e = ["block relative align-bottom focus:outline-none"];
-      return t.isInsideForm && e.push("mb-3"), t.block && e.push("w-full"), e;
+      return t.isInsideForm && e.push("mb-5"), t.block && e.push("w-full"), e;
     },
     label: ({ props: t }) => {
       const e = "flex items-center gap-2 font-medium text-secondary-800 dark:text-secondary-200 mb-1";

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

@@ -208,6 +208,7 @@ const se = { class: "flex items-center flex-wrap" }, re = {
                 D(l(te)),
                 e.action ? (a(), m("button", {
                   key: 1,
+                  type: "button",
                   class: "ml-3 font-medium cursor-pointer text-[color:var(--x-notification-action)] hover:text-[color:var(--x-notification-action-hover)] dark:text-[color:var(--x-notification-dark-action)] dark:hover:text-[color:var(--x-notification-dark-action-hover)]",
                   onClick: () => {
                     var u;

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

@@ -33,16 +33,10 @@ declare const popoverProps: {
     popperShowTriggers: PropType<TriggerEvent[] | ((triggers: Array<PopoverTriggerEvent>) => Array<PopoverTriggerEvent>)>;
     popperHideTriggers: PropType<TriggerEvent[] | ((triggers: Array<PopoverTriggerEvent>) => Array<PopoverTriggerEvent>)>;
     container: {
-        type: (BooleanConstructor | ObjectConstructor | StringConstructor | {
-            new (): Element;
-            prototype: Element;
-        })[];
+        type: (BooleanConstructor | ObjectConstructor | StringConstructor)[];
         default: string;
     };
-    boundary: (StringConstructor | {
-        new (): Element;
-        prototype: Element;
-    })[];
+    boundary: (ObjectConstructor | StringConstructor)[];
     strategy: {
         type: PropType<"absolute" | "fixed">;
         default: string;
@@ -95,16 +89,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     popperShowTriggers: PropType<TriggerEvent[] | ((triggers: TriggerEvent[]) => TriggerEvent[])>;
     popperHideTriggers: PropType<TriggerEvent[] | ((triggers: TriggerEvent[]) => TriggerEvent[])>;
     container: {
-        type: (BooleanConstructor | ObjectConstructor | StringConstructor | {
-            new (): Element;
-            prototype: Element;
-        })[];
+        type: (BooleanConstructor | ObjectConstructor | StringConstructor)[];
         default: string;
     };
-    boundary: (StringConstructor | {
-        new (): Element;
-        prototype: Element;
-    })[];
+    boundary: (ObjectConstructor | StringConstructor)[];
     strategy: {
         type: PropType<"absolute" | "fixed">;
         default: string;
@@ -157,16 +145,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     popperShowTriggers: PropType<TriggerEvent[] | ((triggers: TriggerEvent[]) => TriggerEvent[])>;
     popperHideTriggers: PropType<TriggerEvent[] | ((triggers: TriggerEvent[]) => TriggerEvent[])>;
     container: {
-        type: (BooleanConstructor | ObjectConstructor | StringConstructor | {
-            new (): Element;
-            prototype: Element;
-        })[];
+        type: (BooleanConstructor | ObjectConstructor | StringConstructor)[];
         default: string;
     };
-    boundary: (StringConstructor | {
-        new (): Element;
-        prototype: Element;
-    })[];
+    boundary: (ObjectConstructor | StringConstructor)[];
     strategy: {
         type: PropType<"absolute" | "fixed">;
         default: string;
@@ -204,7 +186,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     placement: Placement;
     triggers: TriggerEvent[];
     hideArrow: boolean;
-    container: string | boolean | Element | Record<string, any>;
+    container: string | boolean | Record<string, any>;
     strategy: "absolute" | "fixed";
     autoHide: boolean | ((event: Event) => boolean);
     shown: boolean;

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

@@ -1,9 +1,9 @@
-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 = {
+import { defineComponent as b, ref as a, openBlock as v, createBlock as S, unref as r, normalizeStyle as T, normalizeClass as A, withCtx as l, renderSlot as d } from "vue";
+import { useTheme as B } from "../../composables/useTheme.js";
+import { Dropdown as $ } from "../../node_modules/.pnpm/floating-vue@5.2.2_vue@3.3.9/node_modules/floating-vue/dist/floating-vue.js";
+const k = {
   placement: ["top", "top-start", "top-end", "bottom", "bottom-start", "bottom-end", "left", "left-start", "left-end", "right", "right-start", "right-end"]
-}, k = {
+}, z = {
   disabled: Boolean,
   positioningDisabled: Boolean,
   placement: {
@@ -30,10 +30,10 @@ const z = {
   popperShowTriggers: [Array, Function],
   popperHideTriggers: [Array, Function],
   container: {
-    type: [String, Object, Element, Boolean],
+    type: [String, Object, Boolean],
     default: "body"
   },
-  boundary: [String, Element],
+  boundary: [String, Object],
   strategy: {
     type: String,
     default: "absolute"
@@ -53,10 +53,10 @@ const z = {
   computeTransformOrigin: Boolean
 }, C = {
   name: "XPopover",
-  validators: z
+  validators: k
 }, R = /* @__PURE__ */ b({
   ...C,
-  props: k,
+  props: z,
   emits: ["show", "hide", "update:shown", "apply-show", "apply-hide", "close-group", "close-directive", "auto-hide", "resize"],
   setup(g, { expose: u }) {
     const m = g, i = a(null);
@@ -73,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 } = A("Popover", {}, m);
+    const { styles: f, classes: p, className: h } = B("Popover", {}, m);
     return (e, o) => (v(), S(r($), {
       ref_key: "elRef",
       ref: i,
-      style: B(r(f)),
-      class: T([r(h), r(p).wrapper]),
+      style: T(r(f)),
+      class: A([r(h), r(p).wrapper]),
       "positioning-disabled": e.positioningDisabled,
       placement: e.placement,
       disabled: e.disabled,

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

@@ -2,51 +2,51 @@ const a = {
   classes: {
     wrapper: ({ data: e }) => {
       const t = ["inline-block relative cursor-pointer focus:outline-none group"];
-      return e.isInsideForm && !e.isInsideFormGroup && t.push("mb-3"), t;
+      return e.isInsideForm && !e.isInsideFormGroup && t.push("mb-5"), t;
     },
     circle: ({ props: e }) => {
       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 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;
+      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-2"), r;
     },
-    label: ({ props: e }) => {
-      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;
+    label: ({ props: e, data: t }) => {
+      let r = "text-secondary-800 dark:text-secondary-200 pl-2";
+      return r += t.isInsideFormGroup ? " font-normal" : " font-medium", e.size === "xs" ? r += " text-xs" : e.size === "sm" ? r += " text-sm" : e.size === "lg" ? r += " text-lg" : e.size === "xl" && (r += " text-xl"), r;
     },
     content: ({ props: e }) => {
       let t = "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;
     }
   },
-  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({
+  styles: ({ props: e, colors: t, css: r, data: n }) => {
+    const s = t.getPalette("gray"), l = t.getPalette(e.color), i = [];
+    return e.loading ? r.variables({
       bg: "transparent",
       border: "transparent",
       dark: {
         bg: "transparent",
         border: "transparent"
       }
-    }) : (e.disabled ? n.selected ? i.push(s.variables({
+    }) : (e.disabled ? n.selected ? i.push(r.variables({
       bg: "transparent",
-      border: r[200],
-      circle: r[200],
+      border: s[200],
+      circle: s[200],
       dark: {
         bg: "transparent",
-        border: r[700],
-        circle: r[700]
+        border: s[700],
+        circle: s[700]
       }
-    })) : i.push(s.variables({
-      bg: r[200],
-      border: r[200],
+    })) : i.push(r.variables({
+      bg: s[200],
+      border: s[200],
       dark: {
-        bg: r[700],
-        border: r[700]
+        bg: s[700],
+        border: s[700]
       }
-    })) : (n.selected ? i.push(s.variables({
+    })) : (n.selected ? i.push(r.variables({
       bg: "transparent",
       border: l[500],
       circle: l[500],
@@ -55,16 +55,16 @@ const a = {
         border: l[500],
         circle: l[500]
       }
-    })) : i.push(s.variables({
+    })) : i.push(r.variables({
       bg: "#fff",
-      border: e.glow ? l[300] : r[300],
+      border: e.glow ? l[300] : s[300],
       dark: {
-        bg: r[900],
-        border: e.glow ? l[300] : r[400]
+        bg: s[900],
+        border: e.glow ? l[300] : s[400]
       }
-    })), e.glow && i.push(s.get("glow", t.getColorOpacity(l[500], 0.5)))), i);
+    })), e.glow && i.push(r.get("glow", t.getColorOpacity(l[500], 0.5)))), i);
   }
-}, u = a;
+}, o = a;
 export {
-  u as default
+  o as default
 };

package/lib/components/scroll/Scroll.vue2.js

@@ -21,11 +21,11 @@ const L = {
       var e;
       (e = l.value) == null || e.dispatchEvent(new CustomEvent("scroll"));
     }
-    const { styles: h, classes: p, className: m } = C("Scroll", {}, t);
+    const { styles: h, classes: m, className: p } = C("Scroll", {}, t);
     return a({ scrollEl: l }), (e, R) => ($(), z("div", {
-      class: r(["flex relative overflow-hidden", [
-        o(m),
-        o(p).wrapper,
+      class: r(["flex relative overflow-hidden max-w-full max-h-full", [
+        o(p),
+        o(m).wrapper,
         e.$style.scrollwrap,
         e.horizontal ? [
           e.$style.horizontal,