@indielayer/ui 1.4.0 → 1.5.1

package/docs/pages/index.vue

@@ -1,51 +1,49 @@
 <template>
-  <div>
-    <section class="p-4 lg:p-8 max-w-4xl xl:max-w-7xl mx-auto">
-      <h2 class="text-4xl font-semibold">Getting Started</h2>
-      <h1 class="text-lg my-2 text-gray-500 dark:text-gray-400">Tailwind CSS UI components for Vue.js 3 / Nuxt.js 3. Build and prototype fast web applications.</h1>
-      <x-divider class="mt-4 mb-8"/>
+  <h2 class="text-4xl font-semibold">Getting Started</h2>
+  <h1 class="text-lg my-2 text-gray-500 dark:text-gray-400">Tailwind CSS UI components for Vue.js 3 / Nuxt.js 3. Build and prototype fast web applications.</h1>
+  <x-divider class="mt-4 mb-8"/>
 
-      <h3 class="text-2xl mb-4">Quickstart a new Vue 3 or Nuxt 3 project</h3>
-      <p class="my-4">
-        This following command will install and execute <x-link
-          external
-          href="https://github.com/indielayer/ui/tree/main/packages/create-ui"
-          target="_blank"
-          shadow
-          color="primary"
-        >@indielayer/create-ui</x-link>, the official Indielayer UI project scaffolding tool. You will be presented with prompts for a number of optional features such as TypeScript.
-      </p>
-      <code-snippet :code="`npm init @indielayer/ui`" lang="bash"/>
-      <pre class="bg-slate-600 text-slate-50 text-xs mt-4 px-4 py-2 rounded-md">? Project type: › - Use arrow-keys. Return to submit.
+  <h3 class="text-2xl mb-4">Quickstart a new Vue 3 or Nuxt 3 project</h3>
+  <p class="my-4">
+    This following command will install and execute <x-link
+      external
+      href="https://github.com/indielayer/ui/tree/main/packages/create-ui"
+      target="_blank"
+      shadow
+      color="primary"
+    >@indielayer/create-ui</x-link>, the official Indielayer UI project scaffolding tool. You will be presented with prompts for a number of optional features such as TypeScript.
+  </p>
+  <code-snippet :code="`npm init @indielayer/ui`" lang="bash"/>
+  <pre class="bg-slate-600 text-slate-50 text-xs mt-4 px-4 py-2 rounded-md">? Project type: › - Use arrow-keys. Return to submit.
 ❯   Vue 3
     Nuxt 3</pre>
 
-      <h3 class="text-2xl mt-16 mb-4 text-gray-500">Manual guide</h3>
-      <h3 class="text-2xl mb-4">1. Install via package manager</h3>
-      <multi-snippet
-        :snippets="[{
-          label: 'npm',
-          lang: 'bash',
-          code: 'npm install @indielayer/ui'
-        }, {
-          label: 'yarn',
-          lang: 'bash',
-          code: 'yarn add @indielayer/ui'
-        }, {
-          label: 'pnpm',
-          lang: 'bash',
-          code: 'pnpm add @indielayer/ui'
-        }]"
-      />
+  <h3 class="text-2xl mt-16 mb-4 text-gray-500">Manual guide</h3>
+  <h3 class="text-2xl mb-4">1. Install via package manager</h3>
+  <multi-snippet
+    :snippets="[{
+      label: 'npm',
+      lang: 'bash',
+      code: 'npm install @indielayer/ui'
+    }, {
+      label: 'yarn',
+      lang: 'bash',
+      code: 'yarn add @indielayer/ui'
+    }, {
+      label: 'pnpm',
+      lang: 'bash',
+      code: 'pnpm add @indielayer/ui'
+    }]"
+  />
 
-      <h3 class="text-2xl mt-8 mb-4">2. Setup TailwindCSS</h3>
-      <p>If you do not have Tailwind CSS 3 installed in your project, please see the <x-link href="https://tailwindcss.com/docs/guides/vite" external shadow color="primary">Tailwind 3 Vite install guide here</x-link> before proceeding.</p>
-      <p class="my-4">
-        Add Indielayer Tailwind CSS preset <b>tailwind.preset.js</b> to your Tailwind CSS configuration file tailwind.config.js and <b>purge css configurations.</b>
-      </p>
-      <code-snippet
-        lang="js"
-        :code="`// tailwind.config.js
+  <h3 class="text-2xl mt-8 mb-4">2. Setup TailwindCSS</h3>
+  <p>If you do not have Tailwind CSS 3 installed in your project, please see the <x-link href="https://tailwindcss.com/docs/guides/vite" external shadow color="primary">Tailwind 3 Vite install guide here</x-link> before proceeding.</p>
+  <p class="my-4">
+    Add Indielayer Tailwind CSS preset <b>tailwind.preset.js</b> to your Tailwind CSS configuration file tailwind.config.js and <b>purge css configurations.</b>
+  </p>
+  <code-snippet
+    lang="js"
+    :code="`// tailwind.config.js
 const colors = require('tailwindcss/colors')
 const indielayer = require('@indielayer/ui/tailwind.preset')
 
@@ -73,12 +71,12 @@ module.exports = {
   },
   plugins: [],
 }`"
-      />
-      <h3 class="text-2xl mt-8 mb-4">3. Load the UI in your project</h3>
-      <h4 class="text-xl mt-8 mb-4">Load on a Vue 3 project</h4>
-      <code-snippet
-        lang="js"
-        :code="`import { createApp } from 'vue'
+  />
+  <h3 class="text-2xl mt-8 mb-4">3. Load the UI in your project</h3>
+  <h4 class="text-xl mt-8 mb-4">Load on a Vue 3 project</h4>
+  <code-snippet
+    lang="js"
+    :code="`import { createApp } from 'vue'
 import UI from '@indielayer/ui'
 
 const app = createApp(App)
@@ -86,27 +84,27 @@ const app = createApp(App)
 app.use(UI, {
   prefix: 'X',
 })`"
-      />
-      <h4 class="text-xl mt-8 mb-4">Load on a Nuxt 3 project</h4>
-      <multi-snippet
-        class="my-4"
-        :snippets="[{
-          label: 'npm',
-          lang: 'bash',
-          code: 'npm install @indielayer/ui @vueuse/core floating-vue -D'
-        }, {
-          label: 'yarn',
-          lang: 'bash',
-          code: 'yarn add @indielayer/ui @vueuse/core floating-vue -D'
-        }, {
-          label: 'pnpm',
-          lang: 'bash',
-          code: 'pnpm add @indielayer/ui @vueuse/core floating-vue -D'
-        }]"
-      />
-      <code-snippet
-        lang="js"
-        :code="`import { colors } from '@indielayer/ui'
+  />
+  <h4 class="text-xl mt-8 mb-4">Load on a Nuxt 3 project</h4>
+  <multi-snippet
+    class="my-4"
+    :snippets="[{
+      label: 'npm',
+      lang: 'bash',
+      code: 'npm install @indielayer/ui @vueuse/core floating-vue -D'
+    }, {
+      label: 'yarn',
+      lang: 'bash',
+      code: 'yarn add @indielayer/ui @vueuse/core floating-vue -D'
+    }, {
+      label: 'pnpm',
+      lang: 'bash',
+      code: 'pnpm add @indielayer/ui @vueuse/core floating-vue -D'
+    }]"
+  />
+  <code-snippet
+    lang="js"
+    :code="`import { colors } from '@indielayer/ui'
 
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
@@ -137,11 +135,11 @@ export default defineNuxtConfig({
     },
   },
 })`"
-      />
-      <h3 class="text-2xl mt-8 mb-4">4. (optional) Load only the components you want</h3>
-      <code-snippet
-        lang="js"
-        :code="`import { createApp } from 'vue'
+  />
+  <h3 class="text-2xl mt-8 mb-4">4. (optional) Load only the components you want</h3>
+  <code-snippet
+    lang="js"
+    :code="`import { createApp } from 'vue'
 import { createUI, XButton, XAlert } from '@indielayer/ui'
 
 const app = createApp(App)
@@ -151,7 +149,5 @@ const UI = createUI({
 })
 
 app.use(UI)`"
-      />
-    </section>
-  </div>
+  />
 </template>

package/docs/pages/play.vue

@@ -1,19 +1,7 @@
-<script>
+<script setup lang="ts">
 
-export default {
-  components: {
-
-  },
-  data() {
-    return {
-
-    }
-  },
-}
 </script>
 
 <template>
-  <div class="p-10">
-    hello
-  </div>
+  <div>playground</div>
 </template>

package/docs/pages/typography.vue

@@ -57,39 +57,35 @@ const textClasses = {
 </script>
 
 <template>
-  <div>
-    <section class="p-4 lg:p-8 max-w-4xl xl:max-w-7xl mx-auto">
-      <h1 class="text-4xl font-semibold">Typography</h1>
-      <h2 class="text-lg my-2 text-gray-500 dark:text-gray-400">Big letters, small letters, fonts and stuff</h2>
+  <h1 class="text-4xl font-semibold">Typography</h1>
+  <h2 class="text-lg my-2 text-gray-500 dark:text-gray-400">Big letters, small letters, fonts and stuff</h2>
 
-      <x-divider class="mt-4 mb-8"/>
+  <x-divider class="mt-4 mb-8"/>
 
-      <div>
-        <div>Main font</div>
-        <div class="text-gray-500 dark:text-gray-400">Inter</div>
-        <div class="text-6xl mt-4">AaBbCc</div>
-      </div>
+  <div>
+    <div>Main font</div>
+    <div class="text-gray-500 dark:text-gray-400">Inter</div>
+    <div class="text-6xl mt-4">AaBbCc</div>
+  </div>
 
-      <div class="mt-10">
-        <table class="text-left w-full">
-          <tr>
-            <th class="py-2">Class</th>
-            <th>Size</th>
-            <th>Line Height</th>
-            <th>Preview</th>
-          </tr>
-          <tr v-for="(c, key) in textClasses" :key="key" class="border-t">
-            <td class="py-2">{{ key }}</td>
-            <td class="text-secondary-500 font-light">{{ c.size }}</td>
-            <td class="text-secondary-500 font-light">{{ c.line }}</td>
-            <td :class="key" class="max-w-lg truncate">Preview text</td>
-          </tr>
-        </table>
-      </div>
+  <div class="mt-10">
+    <table class="text-left w-full">
+      <tr>
+        <th class="py-2">Class</th>
+        <th>Size</th>
+        <th>Line Height</th>
+        <th>Preview</th>
+      </tr>
+      <tr v-for="(c, key) in textClasses" :key="key" class="border-t">
+        <td class="py-2">{{ key }}</td>
+        <td class="text-secondary-500 font-light">{{ c.size }}</td>
+        <td class="text-secondary-500 font-light">{{ c.line }}</td>
+        <td :class="key" class="max-w-lg truncate">Preview text</td>
+      </tr>
+    </table>
+  </div>
 
-      <div class="text-secondary-500 mt-4">
-        See more about Tailwind typography classes here -> <x-link href="https://tailwindcss.com/docs/font-size" target="_blank" underline>Tailwind Documentation</x-link>
-      </div>
-    </section>
+  <div class="text-secondary-500 mt-4">
+    See more about Tailwind typography classes here -> <x-link href="https://tailwindcss.com/docs/font-size" target="_blank" underline>Tailwind Documentation</x-link>
   </div>
 </template>

package/docs/router/index.ts

@@ -58,6 +58,8 @@ const routes: RouteRecordRaw[] = [{
 }, {
   path: '/play',
   component: PlayPage,
+}, {
+  path: '/:pathMatch(.*)*', name: 'NotFound', redirect: { name: 'getting-started' },
 }]
 
 const router = createRouter({

package/exports/tailwind.preset.js

@@ -28,7 +28,6 @@ module.exports = () => ({
         secondary: getColorVarPallete('secondary'),
         success: getColorVarPallete('success'),
         warning: getColorVarPallete('warning'),
-        danger: getColorVarPallete('error'),
         error: getColorVarPallete('error'),
       },
       borderColor: getColorVar('border'),

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

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

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

@@ -1,12 +1,12 @@
 import { defineComponent as v, useSlots as z, computed as l, openBlock as o, createBlock as S, resolveDynamicComponent as B, normalizeStyle as n, unref as s, normalizeClass as i, withCtx as w, createElementVNode as r, renderSlot as a, createElementBlock as p, createCommentVNode as f } from "vue";
 import { useTheme as C } from "../../composables/useTheme.js";
-import { useCommon as m } from "../../composables/useCommon.js";
+import { useCommon as d } from "../../composables/useCommon.js";
 import { useColors as k } from "../../composables/useColors.js";
 const N = { class: "relative inline-block" }, X = {
   key: 0,
   class: "animate-ping opacity-75 absolute top-0 left-0 rounded-full h-full w-full z-10 bg-[color:var(--x-badge-bg)]"
 }, x = ["left", "right"], Y = ["top", "bottom"], $ = {
-  ...m.props(),
+  ...d.props(),
   ...k.props("primary"),
   tag: {
     type: String,
@@ -32,17 +32,17 @@ const N = { class: "relative inline-block" }, X = {
 }, E = {
   name: "XBadge",
   validators: {
-    ...m.validators(),
+    ...d.validators(),
     position: Y,
     align: x
   }
 }, D = /* @__PURE__ */ v({
   ...E,
   props: $,
-  setup(u) {
-    const t = u, d = z(), g = l(() => {
+  setup(m) {
+    const t = m, u = z(), g = l(() => {
       const e = [];
-      return t.position === "top" && e.push("top-0"), t.position === "bottom" && e.push("bottom-0"), t.align === "left" && e.push("left-0"), t.align === "right" && e.push("right-0"), d.content ? e.push("-m-[7.5%]") : t.outlined ? e.push("-m-[5%]") : e.push("-m-[3.5%]"), e;
+      return t.position === "top" && e.push("top-0"), t.position === "bottom" && e.push("bottom-0"), t.align === "left" && e.push("left-0"), t.align === "right" && e.push("right-0"), u.content ? e.push("-m-[7.5%]") : t.outlined ? e.push("-m-[5%]") : e.push("-m-[3.5%]"), e;
     }), c = l(() => {
       const e = {};
       return t.offsetX && (e[t.align === "left" ? "marginLeft" : "marginRight"] = t.offsetX + "px"), t.offsetY && (e[t.position === "top" ? "marginTop" : "marginBottom"] = t.offsetY + "px"), e;
@@ -62,7 +62,7 @@ const N = { class: "relative inline-block" }, X = {
             class: i(["absolute rounded-full z-10 bg-[color:var(--x-badge-bg)]", [
               g.value,
               {
-                "border-2 border-gray-50 dark:border-gray-900": e.outlined
+                "border-2 border-secondary-50 dark:border-secondary-900": e.outlined
               }
             ]]),
             style: n(c.value)

package/lib/components/breadcrumbs/theme/Breadcrumbs.base.theme.js

@@ -2,7 +2,7 @@ const e = {
   classes: {
     wrapper: "flex items-center flex-wrap",
     item: "flex items-center last-of-type:font-semibold",
-    separator: "text-gray-400 mx-1.5"
+    separator: "text-secondary-400 mx-1.5"
   }
 }, t = e;
 export {

package/lib/components/button/Button.vue.js

@@ -1,9 +1,9 @@
 import o from "./Button.vue2.js";
 import s from "./Button.vue3.js";
 import t from "../../_virtual/_plugin-vue_export-helper.js";
-const c = {
+const e = {
   $style: s
-}, m = /* @__PURE__ */ t(o, [["__cssModules", c], ["__scopeId", "data-v-46c0001b"]]);
+}, m = /* @__PURE__ */ t(o, [["__cssModules", e], ["__scopeId", "data-v-b25d6b6e"]]);
 export {
   m as default
 };

package/lib/components/button/Button.vue2.js

@@ -1,4 +1,4 @@
-import { defineComponent as D, ref as I, inject as T, computed as l, useAttrs as V, unref as e, openBlock as a, createBlock as r, resolveDynamicComponent as A, normalizeClass as u, normalizeStyle as E, withCtx as F, createCommentVNode as d, createElementVNode as m, renderSlot as K } from "vue";
+import { defineComponent as D, ref as I, inject as T, computed as l, useAttrs as V, unref as t, openBlock as a, createBlock as r, resolveDynamicComponent as A, normalizeClass as u, normalizeStyle as E, withCtx as F, createCommentVNode as d, createElementVNode as m, renderSlot as K } from "vue";
 import { useTheme as O } from "../../composables/useTheme.js";
 import { useColors as X } from "../../composables/useColors.js";
 import { useCommon as b } from "../../composables/useCommon.js";
@@ -34,42 +34,42 @@ const J = {
   validators: {
     ...b.validators()
   }
-}, eo = /* @__PURE__ */ D({
+}, to = /* @__PURE__ */ D({
   ...M,
   props: J,
   setup(y, { expose: v }) {
-    const t = y, g = I(null), s = T(q, {
+    const e = y, g = I(null), s = T(q, {
       isButtonGroup: !1,
       groupProps: {}
-    }), { isButtonGroup: B } = s, n = l(() => s.groupProps.size || t.size), z = l(() => s.groupProps.flat || t.flat), k = l(() => t.color || s.groupProps.color), P = l(() => t.ghost || s.groupProps.ghost), S = l(() => t.light || s.groupProps.light), w = l(() => t.outlined || s.groupProps.outlined), i = l(() => t.disabled || s.groupProps.disabled), p = l(() => t.icon || t.iconLeft), C = V(), R = l(() => C.href ? "a" : t.to ? "router-link" : t.tag), L = l(() => ({
-      size: e(n),
-      flat: e(z),
-      color: e(k),
-      ghost: e(P),
-      light: e(S),
-      outlined: e(w),
-      disabled: e(i),
-      loading: t.loading,
-      block: t.block,
-      glow: t.glow,
-      iconLeft: e(p),
-      iconRight: t.iconRight,
-      rounded: t.rounded
+    }), { isButtonGroup: B } = s, n = l(() => s.groupProps.size || e.size), z = l(() => s.groupProps.flat || e.flat), k = l(() => e.color || s.groupProps.color), P = l(() => e.ghost || s.groupProps.ghost), S = l(() => e.light || s.groupProps.light), w = l(() => e.outlined || s.groupProps.outlined), i = l(() => e.disabled || s.groupProps.disabled), p = l(() => e.icon || e.iconLeft), C = V(), R = l(() => C.href ? "a" : e.to ? "router-link" : e.tag), L = l(() => ({
+      size: t(n),
+      flat: t(z),
+      color: t(k),
+      ghost: t(P),
+      light: t(S),
+      outlined: t(w),
+      disabled: t(i),
+      loading: e.loading,
+      block: e.block,
+      glow: e.glow,
+      iconLeft: t(p),
+      iconRight: e.iconRight,
+      rounded: e.rounded
     })), { className: G, classes: c, styles: $ } = O("Button", {}, L, {
       isButtonGroup: B
-    }), { focus: N, blur: j } = h(g);
-    return v({ focus: N, blur: j }), (o, Q) => (a(), r(A(R.value), {
+    }), { focus: j, blur: N } = h(g);
+    return v({ focus: j, blur: N }), (o, Q) => (a(), r(A(R.value), {
       ref_key: "elRef",
       ref: g,
       to: o.to,
       class: u([
-        e(G),
+        t(G),
         o.$style.button,
         o.glow && !i.value && !o.loading ? o.$style["button--glow"] : "",
-        e(c).wrapper,
+        t(c).wrapper,
         { "w-full": o.block }
       ]),
-      style: E(e($)),
+      style: E(t($)),
       "aria-busy": o.loading ? "true" : null,
       "aria-disabled": o.tag !== "button" && i.value ? "true" : null,
       disabled: i.value || o.loading,
@@ -84,14 +84,14 @@ const J = {
           status: o.loadingStatus
         }, null, 8, ["size", "label", "status"])) : d("", !0),
         m("div", {
-          class: u({ invisible: o.loading })
+          class: u(["inline-flex items-center justify-center", { invisible: o.loading }])
         }, [
           p.value ? (a(), r(f, {
             key: 0,
             size: n.value,
             icon: p.value,
             class: u([
-              e(c).iconLeft
+              t(c).iconLeft
             ])
           }, null, 8, ["size", "icon", "class"])) : d("", !0),
           m("span", null, [
@@ -103,7 +103,7 @@ const J = {
           size: n.value,
           icon: o.iconRight,
           class: u([
-            e(c).iconRight,
+            t(c).iconRight,
             { invisible: o.loading }
           ])
         }, null, 8, ["size", "icon", "class"])) : d("", !0)
@@ -113,5 +113,5 @@ const J = {
   }
 });
 export {
-  eo as default
+  to as default
 };

package/lib/components/button/theme/Button.base.theme.js

@@ -1,4 +1,4 @@
-const g = {
+const r = {
   classes: {
     wrapper({ props: e, slots: n, data: i }) {
       const d = ["relative transition duration-150 focus:outline-none inline-flex items-center justify-center font-medium whitespace-nowrap overflow-hidden align-middle active:!shadow-none border appearance-none"];
@@ -8,8 +8,8 @@ const g = {
     iconRight: ({ slots: e }) => e.default ? "ml-2" : "m-0.5"
   },
   styles({ props: e, colors: n, css: i, data: d }) {
-    const a = n.getPalette("gray"), t = e.color ? n.getPalette(e.color) : a, l = [], r = e.color && e.light, b = !e.color && !e.ghost;
-    return e.glow && l.push(i.get("glow", n.getColorOpacity(e.color ? t[500] : a[500], 0.5))), b ? e.disabled ? l.push(i.variables({
+    const a = n.getPalette("gray"), t = e.color ? n.getPalette(e.color) : a, l = [], b = e.color && e.light, g = !e.color && !e.ghost;
+    return e.glow && l.push(i.get("glow", n.getColorOpacity(e.color ? t[500] : a[500], 0.5))), g ? e.disabled ? l.push(i.variables({
       bg: a[50],
       text: a[300],
       border: a[200],
@@ -31,7 +31,7 @@ const g = {
         hover: { bg: e.loading ? "" : a[700], border: a[600] },
         active: { bg: e.loading ? "" : a[600], border: a[500] }
       }
-    })) : r ? ((!e.outlined || e.disabled) && l.push(i.get("border", "transparent")), e.disabled ? l.push(i.variables({
+    })) : b ? ((!e.outlined || e.disabled) && l.push(i.get("border", "transparent")), e.disabled ? l.push(i.variables({
       bg: t[50],
       text: t[200],
       border: "transparent",
@@ -110,10 +110,10 @@ const g = {
       }
     }))) : (l.push(i.variables({
       text: "#fff",
-      border: d.isButtonGroup ? t[600] : "transparent",
+      border: t[600],
       dark: {
         text: "#fff",
-        border: d.isButtonGroup ? t[500] : "transparent"
+        border: t[500]
       }
     })), e.disabled ? l.push(i.variables({
       bg: t[100],
@@ -132,7 +132,7 @@ const g = {
       }
     }))), l;
   }
-}, u = g;
+}, u = r;
 export {
   u as default
 };

package/lib/components/card/theme/Card.base.theme.js

@@ -1,6 +1,6 @@
 const a = {
   classes: {
-    wrapper: ({ props: e }) => `rounded bg-white dark:bg-gray-800${e.flat ? "" : " shadow"}`
+    wrapper: ({ props: e }) => `bg-slate-50 dark:bg-slate-800 rounded-md ${e.flat ? "" : "shadow"}`
   }
 }, s = a;
 export {

package/lib/components/checkbox/Checkbox.vue.d.ts

@@ -21,6 +21,7 @@ declare const checkboxProps: {
         readonly type: ArrayConstructor;
         readonly default: () => never[];
     };
+    tooltip: StringConstructor;
     disabled: BooleanConstructor;
     loading: BooleanConstructor;
     loadingLabel: StringConstructor;
@@ -68,6 +69,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         readonly type: ArrayConstructor;
         readonly default: () => never[];
     };
+    tooltip: StringConstructor;
     disabled: BooleanConstructor;
     loading: BooleanConstructor;
     loadingLabel: StringConstructor;
@@ -112,6 +114,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         readonly type: ArrayConstructor;
         readonly default: () => never[];
     };
+    tooltip: StringConstructor;
     disabled: BooleanConstructor;
     loading: BooleanConstructor;
     loadingLabel: StringConstructor;