@code-coaching/vuetiful 0.22.0 → 0.23.1

package/dist/vuetiful.es.mjs

@@ -1,20 +1,79 @@
-import { defineComponent, ref, computed, useAttrs, openBlock, createElementBlock, normalizeClass, createElementVNode, unref, toDisplayString, renderSlot, createBlock, resolveDynamicComponent, withCtx, withDirectives, createTextVNode, onMounted, Fragment, cloneVNode, h as h$1, inject, provide, watchEffect, onUnmounted, watch, nextTick, toRaw, createCommentVNode, reactive, readonly, toRefs, createVNode, Transition, renderList, pushScopeId, popScopeId, isRef, vShow, resolveComponent } from "vue";
-const _hoisted_1$h = ["src", "alt"];
-const _hoisted_2$9 = {
-  key: 1,
-  class: "avatar-initials h-full w-full",
-  viewBox: "0 0 512 512"
+import { defineComponent, ref, computed, openBlock, createElementBlock, normalizeClass, unref, createElementVNode, toDisplayString, readonly, reactive, renderSlot, createBlock, resolveDynamicComponent, withCtx, onMounted, Fragment, cloneVNode, h as h$1, inject, provide, watchEffect, onUnmounted, watch, nextTick, toRaw, createCommentVNode, toRefs, createVNode, Transition, renderList, createTextVNode, pushScopeId, popScopeId, isRef, withDirectives, vShow, useAttrs } from "vue";
+const Variant = {
+  Filled: "filled",
+  FilledPrimary: "filled-primary",
+  FilledSecondary: "filled-secondary",
+  FilledTertiary: "filled-tertiary",
+  FilledSuccess: "filled-success",
+  FilledWarning: "filled-warning",
+  FilledError: "filled-error",
+  FilledSurface: "filled-surface",
+  Ringed: "ringed",
+  RingedPrimary: "ringed-primary",
+  RingedSecondary: "ringed-secondary",
+  RingedTertiary: "ringed-tertiary",
+  RingedSuccess: "ringed-success",
+  RingedWarning: "ringed-warning",
+  RingedError: "ringed-error",
+  RingedSurface: "ringed-surface",
+  Ghost: "ghost",
+  GhostPrimary: "ghost-primary",
+  GhostSecondary: "ghost-secondary",
+  GhostTertiary: "ghost-tertiary",
+  GhostSuccess: "ghost-success",
+  GhostWarning: "ghost-warning",
+  GhostError: "ghost-error",
+  GhostSurface: "ghost-surface",
+  Soft: "soft",
+  SoftPrimary: "soft-primary",
+  SoftSecondary: "soft-secondary",
+  SoftTertiary: "soft-tertiary",
+  SoftSuccess: "soft-success",
+  SoftWarning: "soft-warning",
+  SoftError: "soft-error",
+  SoftSurface: "soft-surface",
+  Glass: "glass",
+  GlassPrimary: "glass-primary",
+  GlassSecondary: "glass-secondary",
+  GlassTertiary: "glass-tertiary",
+  GlassSuccess: "glass-success",
+  GlassWarning: "glass-warning",
+  GlassError: "glass-error",
+  GlassSurface: "glass-surface"
+};
+const Size = {
+  XS: "xs",
+  SM: "sm",
+  MD: "md",
+  LG: "lg",
+  XL: "xl"
+};
+const sizeProp = {
+  type: String,
+  default: Size.MD
+};
+const unstyledProp = {
+  type: Boolean,
+  default: false
 };
+const variantProp = {
+  type: String,
+  default: Variant.Filled
+};
+const _hoisted_1$b = ["src", "alt"];
 const _sfc_main$y = /* @__PURE__ */ defineComponent({
   __name: "VAvatar",
   props: {
     initials: { type: String, default: "" },
     fill: { type: String, default: "" },
+    classInitials: { type: String, default: "" },
     src: { type: String, default: "" },
     alt: { type: String, default: "" },
     fallback: { type: String, default: "" },
-    width: { type: String, default: "w-16" },
-    rounded: { type: String, default: "rounded-token" }
+    classImage: { type: String, default: "" },
+    size: sizeProp,
+    variant: variantProp,
+    unstyled: unstyledProp
   },
   setup(__props) {
     const props = __props;
@@ -22,24 +81,47 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
     const fillInitials = computed(() => {
       if (props.fill)
         return props.fill;
-      const attrs = useAttrs();
-      const classString = attrs.class;
-      if (classString == null ? void 0 : classString.includes("variant-filled")) {
-        return "fill-on-surface-token dark:fill-base-token";
+      const variantString = props.variant;
+      const type = variantString == null ? void 0 : variantString.split("-")[1];
+      if (variantString == null ? void 0 : variantString.includes("filled")) {
+        if (!type)
+          return "fill-white dark:fill-black";
+        return "fill-white";
+      }
+      return "fill-black dark:fill-white";
+    });
+    const avatarSize = computed(() => {
+      switch (props.size) {
+        case Size.XS:
+          return "w-8";
+        case Size.SM:
+          return "w-12";
+        case Size.MD:
+          return "w-16";
+        case Size.LG:
+          return "w-20";
+        case Size.XL:
+          return "w-24";
       }
-      return "dark:fill-on-surface-token fill-base-token";
     });
+    const { settings: settings2 } = useSettings();
+    const isUnstyled = settings2.global.unstyled || settings2.components.avatar.unstyled || props.unstyled;
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("figure", {
-        class: normalizeClass(`avatar isolate flex aspect-square items-center justify-center overflow-hidden font-semibold ${__props.rounded} ${__props.width}`)
+        "data-test": "avatar",
+        class: normalizeClass(`vuetiful-avatar ${unref(isUnstyled) ? "" : "isolate flex aspect-square items-center justify-center overflow-hidden font-semibold rounded-token"} ${unref(avatarSize)} variant-${__props.variant}`)
       }, [
         __props.src ? (openBlock(), createElementBlock("img", {
           key: 0,
-          class: "avatar-image",
+          class: normalizeClass(`vuetiful-avatar-image ${__props.classImage}`),
           src: imgSrc.value,
           alt: __props.alt,
           onError: _cache[0] || (_cache[0] = () => imgSrc.value = __props.fallback)
-        }, null, 40, _hoisted_1$h)) : (openBlock(), createElementBlock("svg", _hoisted_2$9, [
+        }, null, 42, _hoisted_1$b)) : (openBlock(), createElementBlock("svg", {
+          key: 1,
+          class: normalizeClass(`vuetiful-avatar-initials ${unref(isUnstyled) ? "" : "h-full w-full"} ${__props.classInitials}`),
+          viewBox: "0 0 512 512"
+        }, [
           createElementVNode("text", {
             x: "50%",
             y: "50%",
@@ -47,90 +129,128 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
             "text-anchor": "middle",
             "font-weight": "bold",
             "font-size": 150,
-            class: normalizeClass(`avatar-text ${unref(fillInitials)}`)
+            class: normalizeClass(`vuetiful-avatar-text ${unref(fillInitials)}`)
           }, toDisplayString(String(__props.initials).substring(0, 2).toUpperCase()), 3)
-        ]))
+        ], 2))
       ], 2);
     };
   }
 });
-var _export_sfc = (sfc, props) => {
-  const target = sfc.__vccOpts || sfc;
-  for (const [key, val] of props) {
-    target[key] = val;
-  }
-  return target;
+const usePlatform = () => {
+  const isBrowser2 = typeof window !== "undefined";
+  return {
+    isBrowser: isBrowser2
+  };
 };
-const _sfc_main$x = {};
-const _hoisted_1$g = {
-  class: /* @__PURE__ */ normalizeClass(`vuetiful-badge badge`)
+const { isBrowser: isBrowser$1 } = usePlatform();
+const MODE = {
+  LIGHT: true,
+  DARK: false
 };
-function _sfc_render$4(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", _hoisted_1$g, [
-    renderSlot(_ctx.$slots, "default")
-  ]);
-}
-var VBadge = /* @__PURE__ */ _export_sfc(_sfc_main$x, [["render", _sfc_render$4]]);
-const _sfc_main$w = /* @__PURE__ */ defineComponent({
-  __name: "VButton",
-  props: {
-    icon: {
-      type: Boolean,
-      default: false
-    },
-    tag: {
-      type: String,
-      default: "button"
+const modeOsPrefers = ref(MODE.DARK);
+const currentMode = ref(MODE.DARK);
+const modeUserPrefers = ref(void 0);
+const isDark = computed(() => currentMode.value === MODE.DARK);
+const useDarkMode = () => {
+  const getModeOsPrefers = () => {
+    let prefersLightMode = false;
+    if (isBrowser$1)
+      prefersLightMode = window.matchMedia("(prefers-color-scheme: light)").matches;
+    setModeOsPrefers(prefersLightMode);
+    return prefersLightMode;
+  };
+  const getModeUserPrefers = () => {
+    if (isBrowser$1) {
+      const mode = localStorage.getItem("modeUserPrefers");
+      if (mode !== null)
+        modeUserPrefers.value = mode === "true";
     }
-  },
-  emits: ["click"],
-  setup(__props, { emit }) {
-    const activate = () => {
-      emit("click");
-    };
-    const clickHandler = (event) => {
-      event.preventDefault();
-      activate();
-    };
-    const keydownHandler = (event) => {
-      if (["Enter", " "].includes(event.key))
-        event.preventDefault();
-      if (event.key === "Enter")
-        activate();
-    };
-    const keyupHandler = (event) => {
-      if (event.key === " ") {
-        event.preventDefault();
-        activate();
-      }
+    return modeUserPrefers.value;
+  };
+  const getModeAutoPrefers = () => {
+    const os = getModeOsPrefers();
+    const user = getModeUserPrefers();
+    if (user === void 0)
+      return os;
+    return user;
+  };
+  const setModeOsPrefers = (value) => {
+    modeOsPrefers.value = value;
+    if (isBrowser$1) {
+      localStorage.setItem("modeOsPrefers", value.toString());
+    }
+  };
+  const setModeUserPrefers = (value) => {
+    modeUserPrefers.value = value;
+    if (isBrowser$1) {
+      localStorage.setItem("modeUserPrefers", value.toString());
+    }
+  };
+  const setModeCurrent = (value) => {
+    const elemHtmlClasses = document.documentElement.classList;
+    const classDark = "dark";
+    value === MODE.LIGHT ? elemHtmlClasses.remove(classDark) : elemHtmlClasses.add(classDark);
+    currentMode.value = value;
+  };
+  const initializeMode = () => {
+    const mode = getModeAutoPrefers();
+    setModeCurrent(mode);
+  };
+  const autoModeWatcher = () => {
+    const mql = window.matchMedia("(prefers-color-scheme: light)");
+    const setMode = (value) => {
+      const elemHtmlClasses = document.documentElement.classList;
+      const classDark = `dark`;
+      value === MODE.LIGHT ? elemHtmlClasses.remove(classDark) : elemHtmlClasses.add(classDark);
+      setModeCurrent(value);
     };
-    return (_ctx, _cache) => {
-      return openBlock(), createBlock(resolveDynamicComponent(__props.tag), {
-        tabindex: "0",
-        role: "button",
-        class: normalizeClass(`vuetiful-button ${__props.icon ? "btn-icon" : "btn"} border-token hover:cursor-pointer`),
-        onClick: clickHandler,
-        onKeydown: keydownHandler,
-        onKeyup: keyupHandler
-      }, {
-        default: withCtx(() => [
-          renderSlot(_ctx.$slots, "default")
-        ]),
-        _: 3
-      }, 40, ["class"]);
+    setMode(mql.matches);
+    mql.onchange = () => {
+      setMode(mql.matches);
     };
-  }
+  };
+  return {
+    modeOsPrefers: readonly(modeOsPrefers),
+    modeUserPrefers: readonly(modeUserPrefers),
+    currentMode: readonly(currentMode),
+    isDark: readonly(isDark),
+    getModeOsPrefers,
+    getModeUserPrefers,
+    getModeAutoPrefers,
+    setModeUserPrefers,
+    setModeCurrent,
+    autoModeWatcher,
+    initializeMode,
+    MODE
+  };
+};
+const drawer = reactive({
+  id: "default",
+  open: false,
+  position: "left",
+  duration: 300,
+  regionBackdrop: "",
+  regionDrawer: ""
 });
-const _sfc_main$v = {};
-const _hoisted_1$f = {
-  class: /* @__PURE__ */ normalizeClass(`vuetiful-chip chip`)
+const useDrawer = () => {
+  const open = (settings2) => {
+    var _a, _b, _c, _d, _e;
+    drawer.open = true;
+    drawer.id = (_a = settings2 == null ? void 0 : settings2.id) != null ? _a : "default";
+    drawer.duration = (_b = settings2 == null ? void 0 : settings2.duration) != null ? _b : 300;
+    drawer.regionBackdrop = (_c = settings2 == null ? void 0 : settings2.regionBackdrop) != null ? _c : "";
+    drawer.regionDrawer = (_d = settings2 == null ? void 0 : settings2.regionDrawer) != null ? _d : "";
+    drawer.position = (_e = settings2 == null ? void 0 : settings2.position) != null ? _e : "left";
+  };
+  const close = () => {
+    drawer.open = false;
+  };
+  return {
+    drawer: readonly(drawer),
+    open,
+    close
+  };
 };
-function _sfc_render$3(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", _hoisted_1$f, [
-    renderSlot(_ctx.$slots, "default")
-  ]);
-}
-var VChip = /* @__PURE__ */ _export_sfc(_sfc_main$v, [["render", _sfc_render$3]]);
 var deepFreezeEs6 = { exports: {} };
 function deepFreeze(obj) {
   if (obj instanceof Map) {
@@ -46470,100 +46590,205 @@ const useHighlight = () => {
     highlight: highlight2
   };
 };
-var githubDark = "";
-const _hoisted_1$e = { class: "code-block max-w-full bg-neutral-900/90 text-sm text-white shadow rounded-container-token" };
-const _hoisted_2$8 = {
-  class: /* @__PURE__ */ normalizeClass(`code-block-language`)
+const selectedRailTile = ref("");
+const useRail = () => {
+  return {
+    selectedRailTile
+  };
 };
-const _hoisted_3$5 = ["innerHTML"];
-const _sfc_main$u = /* @__PURE__ */ defineComponent({
-  __name: "VCodeBlock",
-  props: {
-    language: {
-      type: String,
-      default: "plaintext"
+const settings = reactive({
+  global: {
+    unstyled: false
+  },
+  components: {
+    radioGroup: {
+      unstyled: false
     },
-    code: {
-      type: String,
-      default: ""
+    radioItem: {
+      unstyled: false
     },
-    preventOverflow: {
-      type: Boolean,
-      default: false
+    switch: {
+      unstyled: false
     },
-    headerClass: {
-      type: String,
-      default: ""
+    avatar: {
+      unstyled: false
     },
-    preClass: {
-      type: String,
-      default: ""
+    badge: {
+      unstyled: false
     },
-    buttonClass: {
-      type: String,
-      default: "btn-sm"
+    button: {
+      unstyled: false
     },
-    buttonText: {
-      type: String,
-      default: "Copy"
+    chip: {
+      unstyled: false
     },
-    buttonCopiedText: {
-      type: String,
-      default: "\u{1F44D}"
+    codeBlock: {
+      unstyled: false
+    },
+    listbox: {
+      unstyled: false
+    },
+    listboxItem: {
+      unstyled: false
+    },
+    accordion: {
+      unstyled: false
+    },
+    accordionItem: {
+      unstyled: false
+    },
+    alert: {
+      unstyled: false
+    },
+    card: {
+      unstyled: false
+    },
+    cardHeader: {
+      unstyled: false
+    },
+    cardBody: {
+      unstyled: false
+    },
+    cardFooter: {
+      unstyled: false
+    },
+    tabs: {
+      unstyled: false
+    },
+    tab: {
+      unstyled: false
     }
+  }
+});
+const useSettings = () => {
+  const updateSettings = (partialSettings) => {
+    for (const key in partialSettings) {
+      if (key in settings) {
+        Object.assign(settings[key], partialSettings[key]);
+      }
+    }
+  };
+  return {
+    updateSettings,
+    settings
+  };
+};
+const _sfc_main$x = /* @__PURE__ */ defineComponent({
+  __name: "VBadge",
+  props: {
+    variant: variantProp,
+    unstyled: unstyledProp
   },
-  emits: ["copy"],
+  setup(__props) {
+    const props = __props;
+    const { settings: settings2 } = useSettings();
+    const isUnstyled = settings2.global.unstyled || settings2.components.badge.unstyled || props.unstyled;
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(`vuetiful-badge ${unref(isUnstyled) ? "" : "badge"} variant-${__props.variant}`)
+      }, [
+        renderSlot(_ctx.$slots, "default")
+      ], 2);
+    };
+  }
+});
+const _sfc_main$w = /* @__PURE__ */ defineComponent({
+  __name: "VButton",
+  props: {
+    icon: {
+      type: Boolean,
+      default: false
+    },
+    tag: {
+      type: String,
+      default: "button"
+    },
+    size: sizeProp,
+    variant: variantProp,
+    unstyled: unstyledProp
+  },
+  emits: ["click"],
   setup(__props, { emit }) {
     const props = __props;
-    const { highlight: highlight2 } = useHighlight();
-    const copyState = ref(false);
-    function languageFormatter(lang) {
-      if (lang === "js")
-        return "javascript";
-      if (lang === "ts")
-        return "typescript";
-      if (["sh", "bash", "zsh", "shell"].includes(lang))
-        return "console";
-      return lang;
-    }
-    function onCopyClick() {
-      copyState.value = true;
-      setTimeout(() => {
-        copyState.value = false;
-      }, 2e3);
-      emit("copy");
-    }
+    const activate = () => {
+      emit("click");
+    };
+    const clickHandler = (event) => {
+      event.preventDefault();
+      activate();
+    };
+    const keydownHandler = (event) => {
+      if (["Enter", " "].includes(event.key))
+        event.preventDefault();
+      if (event.key === "Enter")
+        activate();
+    };
+    const keyupHandler = (event) => {
+      if (event.key === " ") {
+        event.preventDefault();
+        activate();
+      }
+    };
+    const btnSize = computed(() => {
+      switch (props.size) {
+        case "xs":
+          return "px-2.5 py-1.5 text-xs";
+        case "sm":
+          return "px-3 py-2 text-sm leading-4";
+        case "md":
+          return "px-4 py-2 text-sm";
+        case "lg":
+          return "px-4 py-2 text-base";
+        case "xl":
+          return "px-6 py-3 text-base";
+      }
+    });
+    const { settings: settings2 } = useSettings();
+    const isUnstyled = settings2.global.unstyled || settings2.components.button.unstyled || props.unstyled;
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$e, [
-        createElementVNode("header", {
-          class: normalizeClass(`code-block-header flex items-center justify-between p-2 pb-0 pl-4 text-xs uppercase text-white/50 ${__props.headerClass}`)
-        }, [
-          createElementVNode("span", _hoisted_2$8, toDisplayString(languageFormatter(__props.language)), 1),
-          withDirectives((openBlock(), createBlock(unref(_sfc_main$w), {
-            class: normalizeClass(`code-block-btn ${__props.buttonClass}`),
-            onClick: _cache[0] || (_cache[0] = ($event) => onCopyClick())
-          }, {
-            default: withCtx(() => [
-              createTextVNode(toDisplayString(!copyState.value ? __props.buttonText : __props.buttonCopiedText), 1)
-            ]),
-            _: 1
-          }, 8, ["class"])), [
-            [unref(clipboard), props.code]
-          ])
-        ], 2),
-        createElementVNode("pre", {
-          class: normalizeClass(`code-block-pre ${__props.preventOverflow ? "whitespace-pre-wrap break-all" : "overflow-auto"} p-4 pt-1 ${__props.preClass}`)
-        }, [
-          createElementVNode("code", {
-            class: normalizeClass(`code-block-code language-${__props.language}`),
-            innerHTML: unref(highlight2)(props.code, props.language)
-          }, null, 10, _hoisted_3$5)
-        ], 2)
-      ]);
+      return openBlock(), createBlock(resolveDynamicComponent(__props.tag), {
+        tabindex: "0",
+        role: "button",
+        class: normalizeClass(`vuetiful-button ${unref(isUnstyled) ? "" : `${__props.icon ? "btn-icon" : "btn"} border-token hover:cursor-pointer`} ${unref(btnSize)} variant-${__props.variant}`),
+        onClick: clickHandler,
+        onKeydown: keydownHandler,
+        onKeyup: keyupHandler
+      }, {
+        default: withCtx(() => [
+          renderSlot(_ctx.$slots, "default")
+        ]),
+        _: 3
+      }, 40, ["class"]);
+    };
+  }
+});
+const _sfc_main$v = /* @__PURE__ */ defineComponent({
+  __name: "VChip",
+  props: {
+    unstyled: unstyledProp,
+    variant: variantProp
+  },
+  setup(__props) {
+    const props = __props;
+    const { settings: settings2 } = useSettings();
+    const isUnstyled = settings2.global.unstyled || settings2.components.chip.unstyled || props.unstyled;
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(`vuetiful-chip ${unref(isUnstyled) ? "" : "chip"} variant-${__props.variant}`)
+      }, [
+        renderSlot(_ctx.$slots, "default")
+      ], 2);
     };
   }
 });
-const _sfc_main$t = defineComponent({
+var _export_sfc = (sfc, props) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props) {
+    target[key] = val;
+  }
+  return target;
+};
+const _sfc_main$u = defineComponent({
   props: {
     bgLight: {
       type: String,
@@ -46654,9 +46879,9 @@ const _sfc_main$t = defineComponent({
     };
   }
 });
-const _hoisted_1$d = ["aria-checked", "title"];
-const _hoisted_2$7 = ["d"];
-function _sfc_render$2(_ctx, _cache, $props, $setup, $data, $options) {
+const _hoisted_1$a = ["aria-checked", "title"];
+const _hoisted_2$6 = ["d"];
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("div", {
     class: normalizeClass(`lightswitch-track ${_ctx.classesTrack}`),
     onClick: _cache[0] || (_cache[0] = (...args) => _ctx.onToggleHandler && _ctx.onToggleHandler(...args)),
@@ -46680,12 +46905,12 @@ function _sfc_render$2(_ctx, _cache, $props, $setup, $data, $options) {
         createElementVNode("path", {
           fill: "currentColor",
           d: _ctx.currentMode ? _ctx.svgPath.sun : _ctx.svgPath.moon
-        }, null, 8, _hoisted_2$7)
+        }, null, 8, _hoisted_2$6)
       ], 2))
     ], 2)
-  ], 42, _hoisted_1$d);
+  ], 42, _hoisted_1$a);
 }
-var VLightSwitch = /* @__PURE__ */ _export_sfc(_sfc_main$t, [["render", _sfc_render$2]]);
+var VLightSwitch = /* @__PURE__ */ _export_sfc(_sfc_main$u, [["render", _sfc_render]]);
 function u$2(r2, n2, ...a2) {
   if (r2 in n2) {
     let e2 = n2[r2];
@@ -47796,7 +48021,7 @@ let j = Symbol("TabsSSRContext"), xe = defineComponent({ name: "TabGroup", emits
     return !m2.value && a2.unmount && !a2.static ? h$1(f$1, { as: "span", ...h2 }) : H$2({ ourProps: h2, theirProps: w2, slot: r2, attrs: v2, slots: i2, features: N$1.Static | N$1.RenderStrategy, visible: m2.value, name: "TabPanel" });
   };
 } });
-const _sfc_main$s = /* @__PURE__ */ defineComponent({
+const _sfc_main$t = /* @__PURE__ */ defineComponent({
   __name: "VRadioDescription",
   props: {
     as: {
@@ -47806,7 +48031,10 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
   },
   setup(__props) {
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(unref(Se$1), { as: __props.as }, {
+      return openBlock(), createBlock(unref(Se$1), {
+        as: __props.as,
+        class: "vuetiful-radio-group-description"
+      }, {
         default: withCtx(() => [
           renderSlot(_ctx.$slots, "default")
         ]),
@@ -47815,7 +48043,7 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$r = /* @__PURE__ */ defineComponent({
+const _sfc_main$s = /* @__PURE__ */ defineComponent({
   __name: "VRadioGroup",
   props: {
     as: {
@@ -47846,6 +48074,10 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
       type: String,
       default: "text-surface-900 dark:text-surface-50"
     },
+    classItem: {
+      type: String,
+      default: ""
+    },
     unstyled: {
       type: Boolean,
       default: false
@@ -47869,13 +48101,16 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
     );
     provide("active", props.active);
     provide("hover", props.hover);
+    provide("classItem", props.classItem);
+    const { settings: settings2 } = useSettings();
+    const isUnstyled = settings2.global.unstyled || settings2.components.radioGroup.unstyled || props.unstyled;
     return (_ctx, _cache) => {
       return openBlock(), createBlock(unref(ke), {
         "data-test": "radio-group",
         as: __props.as,
         disabled: __props.disabled,
         by: __props.by,
-        class: normalizeClass(`${__props.unstyled ? "" : `radio-group ${__props.background} ${__props.text} inline-flex gap-1 p-1 border-token border-surface-400-500-token rounded-container-token`}`),
+        class: normalizeClass(`vuetiful-radio-group inline-flex ${unref(isUnstyled) ? "" : `gap-1 p-1 border-token border-surface-400-500-token rounded-container-token`} ${__props.background} ${__props.text}`),
         modelValue: parentModelValue.value,
         "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => parentModelValue.value = $event)
       }, {
@@ -47887,7 +48122,7 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$q = /* @__PURE__ */ defineComponent({
+const _sfc_main$r = /* @__PURE__ */ defineComponent({
   __name: "VRadioItem",
   props: {
     value: {
@@ -47900,14 +48135,18 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
     }
   },
   setup(__props) {
+    const props = __props;
     const active = inject("active");
     const hover = inject("hover");
+    const classItem = inject("classItem");
+    const { settings: settings2 } = useSettings();
+    const isUnstyled = settings2.global.unstyled || settings2.components.radioItem.unstyled || props.unstyled;
     return (_ctx, _cache) => {
       return openBlock(), createBlock(unref(Ee), { value: __props.value }, {
         default: withCtx(({ checked, disabled }) => [
           createElementVNode("div", {
             "data-test": "radio-item",
-            class: normalizeClass(`radio-item ${__props.unstyled ? "" : `px-4 py-1 text-center text-base rounded-token ${checked ? unref(active) : unref(hover)} ${disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer"}`}`)
+            class: normalizeClass(`vuetiful-radio-item ${unref(isUnstyled) ? "" : `px-4 py-1 text-center text-base rounded-token`} ${checked ? unref(active) : unref(hover)} ${disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer"} ${unref(classItem)}`)
           }, [
             renderSlot(_ctx.$slots, "default")
           ], 2)
@@ -47917,7 +48156,7 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$p = /* @__PURE__ */ defineComponent({
+const _sfc_main$q = /* @__PURE__ */ defineComponent({
   __name: "VRadioLabel",
   props: {
     as: {
@@ -47927,7 +48166,10 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
   },
   setup(__props) {
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(unref(we), { as: __props.as }, {
+      return openBlock(), createBlock(unref(we), {
+        as: __props.as,
+        class: "vuetiful-radio-label"
+      }, {
         default: withCtx(() => [
           renderSlot(_ctx.$slots, "default")
         ]),
@@ -47936,11 +48178,11 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$c = {
+const _hoisted_1$9 = {
   key: 0,
   class: "sr-only"
 };
-const _sfc_main$o = /* @__PURE__ */ defineComponent({
+const _sfc_main$p = /* @__PURE__ */ defineComponent({
   __name: "VSwitch",
   props: {
     modelValue: {
@@ -47951,15 +48193,11 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
       type: Boolean,
       default: false
     },
-    size: {
-      type: String,
-      default: "md"
-    },
-    switchClass: {
+    classTrack: {
       type: String,
       default: "variant-filled"
     },
-    thumbClass: {
+    classThumb: {
       type: String,
       default: "bg-surface-100-800-token"
     },
@@ -47970,7 +48208,9 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
     name: {
       type: String,
       default: ""
-    }
+    },
+    size: sizeProp,
+    unstyled: unstyledProp
   },
   emits: ["update:modelValue"],
   setup(__props, { emit }) {
@@ -48000,13 +48240,14 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
           return "w-20 h-10";
         case "xl":
           return "w-24 h-12";
-        default:
-          return props.size;
       }
     });
+    const { settings: settings2 } = useSettings();
+    const isUnstyled = settings2.global.unstyled || settings2.components.switch.unstyled || props.unstyled;
     return (_ctx, _cache) => {
       return openBlock(), createBlock(unref(ue), {
-        class: normalizeClass(`slide-toggle rounded-container-token ${__props.disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer"}`),
+        "data-test": "switch",
+        class: normalizeClass(`vuetiful-slide-toggle ${unref(isUnstyled) ? "" : `rounded-container-token ${__props.disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer"}`}`),
         name: __props.name,
         as: __props.as,
         modelValue: parentModelValue.value,
@@ -48014,13 +48255,19 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
       }, {
         default: withCtx(({ checked }) => [
           createElementVNode("div", {
-            class: normalizeClass(`slide-toggle-track flex transition-all duration-[150ms] border-token rounded-token ${unref(trackSize)} ${__props.disabled ? "cursor-not-allowed" : "cursor-pointer"} ${__props.switchClass}`)
+            "data-test": "switch-track",
+            class: normalizeClass(`vuetiful-slide-toggle-track flex ${unref(isUnstyled) ? "" : `transition-all duration-[150ms] border-token rounded-token`}
+      ${__props.disabled ? "cursor-not-allowed" : "cursor-pointer"}
+      ${unref(trackSize)} ${__props.classTrack}`)
           }, [
-            _ctx.$slots.default ? (openBlock(), createElementBlock("span", _hoisted_1$c, [
+            _ctx.$slots.default ? (openBlock(), createElementBlock("span", _hoisted_1$9, [
               renderSlot(_ctx.$slots, "default")
             ])) : createCommentVNode("", true),
             createElementVNode("div", {
-              class: normalizeClass(`slide-toggle-thumb h-full w-[50%] scale-[0.8] shadow transition-all duration-[150ms] rounded-token ${checked ? "translate-x-full" : "opacity-90"} ${__props.disabled ? "cursor-not-allowed" : "cursor-pointer"} ${__props.thumbClass} bg-opacity-90`)
+              "data-test": "switch-thumb",
+              class: normalizeClass(`vuetiful-slide-toggle-thumb w-[50%] scale-[0.8] ${unref(isUnstyled) ? "" : `bg-opactiy-90 shadow transition-all duration-[150ms] rounded-token `}
+        ${__props.disabled ? "cursor-not-allowed" : "cursor-pointer"}
+        ${checked ? "translate-x-full" : `${unref(isUnstyled) ? "" : "opacity-90"}`} ${__props.classThumb}`)
             }, null, 2)
           ], 2)
         ]),
@@ -48029,7 +48276,7 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$n = /* @__PURE__ */ defineComponent({
+const _sfc_main$o = /* @__PURE__ */ defineComponent({
   __name: "VSwitchDescription",
   props: {
     as: {
@@ -48039,7 +48286,10 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
   },
   setup(__props) {
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(unref(ce), { as: __props.as }, {
+      return openBlock(), createBlock(unref(ce), {
+        class: "vuetiful-switch-description",
+        as: __props.as
+      }, {
         default: withCtx(() => [
           renderSlot(_ctx.$slots, "default")
         ]),
@@ -48048,17 +48298,20 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$m = /* @__PURE__ */ defineComponent({
+const _sfc_main$n = /* @__PURE__ */ defineComponent({
   __name: "VSwitchGroup",
   props: {
     as: {
       type: String,
-      default: "template"
+      default: "div"
     }
   },
   setup(__props) {
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(unref(ae), { as: __props.as }, {
+      return openBlock(), createBlock(unref(ae), {
+        class: "vuetiful-switch-group",
+        as: __props.as
+      }, {
         default: withCtx(() => [
           renderSlot(_ctx.$slots, "default")
         ]),
@@ -48067,7 +48320,7 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$l = /* @__PURE__ */ defineComponent({
+const _sfc_main$m = /* @__PURE__ */ defineComponent({
   __name: "VSwitchLabel",
   props: {
     as: {
@@ -48082,6 +48335,7 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
   setup(__props) {
     return (_ctx, _cache) => {
       return openBlock(), createBlock(unref(de), {
+        class: "vuetiful-switch-label",
         as: __props.as,
         passive: __props.passive
       }, {
@@ -48093,129 +48347,8 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const selectedRailTile = ref("");
-const useRail = () => {
-  return {
-    selectedRailTile
-  };
-};
-const drawer = reactive({
-  id: "default",
-  open: false,
-  position: "left",
-  duration: 300,
-  regionBackdrop: "",
-  regionDrawer: ""
-});
-const useDrawer = () => {
-  const open = (settings) => {
-    var _a, _b, _c, _d, _e;
-    drawer.open = true;
-    drawer.id = (_a = settings == null ? void 0 : settings.id) != null ? _a : "default";
-    drawer.duration = (_b = settings == null ? void 0 : settings.duration) != null ? _b : 300;
-    drawer.regionBackdrop = (_c = settings == null ? void 0 : settings.regionBackdrop) != null ? _c : "";
-    drawer.regionDrawer = (_d = settings == null ? void 0 : settings.regionDrawer) != null ? _d : "";
-    drawer.position = (_e = settings == null ? void 0 : settings.position) != null ? _e : "left";
-  };
-  const close = () => {
-    drawer.open = false;
-  };
-  return {
-    drawer: readonly(drawer),
-    open,
-    close
-  };
-};
-const usePlatform = () => {
-  const isBrowser2 = typeof window !== "undefined";
-  return {
-    isBrowser: isBrowser2
-  };
-};
-const { isBrowser: isBrowser$1 } = usePlatform();
-const MODE = {
-  LIGHT: true,
-  DARK: false
-};
-const modeOsPrefers = ref(MODE.DARK);
-const currentMode = ref(MODE.DARK);
-const modeUserPrefers = ref(void 0);
-const isDark = computed(() => currentMode.value === MODE.DARK);
-const useDarkMode = () => {
-  const getModeOsPrefers = () => {
-    let prefersLightMode = false;
-    if (isBrowser$1)
-      prefersLightMode = window.matchMedia("(prefers-color-scheme: light)").matches;
-    setModeOsPrefers(prefersLightMode);
-    return prefersLightMode;
-  };
-  const getModeUserPrefers = () => {
-    if (isBrowser$1) {
-      const mode = localStorage.getItem("modeUserPrefers");
-      if (mode !== null)
-        modeUserPrefers.value = mode === "true";
-    }
-    return modeUserPrefers.value;
-  };
-  const getModeAutoPrefers = () => {
-    const os = getModeOsPrefers();
-    const user = getModeUserPrefers();
-    if (user === void 0)
-      return os;
-    return user;
-  };
-  const setModeOsPrefers = (value) => {
-    modeOsPrefers.value = value;
-    if (isBrowser$1) {
-      localStorage.setItem("modeOsPrefers", value.toString());
-    }
-  };
-  const setModeUserPrefers = (value) => {
-    modeUserPrefers.value = value;
-    if (isBrowser$1) {
-      localStorage.setItem("modeUserPrefers", value.toString());
-    }
-  };
-  const setModeCurrent = (value) => {
-    const elemHtmlClasses = document.documentElement.classList;
-    const classDark = "dark";
-    value === MODE.LIGHT ? elemHtmlClasses.remove(classDark) : elemHtmlClasses.add(classDark);
-    currentMode.value = value;
-  };
-  const initializeMode = () => {
-    const mode = getModeAutoPrefers();
-    setModeCurrent(mode);
-  };
-  const autoModeWatcher = () => {
-    const mql = window.matchMedia("(prefers-color-scheme: light)");
-    const setMode = (value) => {
-      const elemHtmlClasses = document.documentElement.classList;
-      const classDark = `dark`;
-      value === MODE.LIGHT ? elemHtmlClasses.remove(classDark) : elemHtmlClasses.add(classDark);
-      setModeCurrent(value);
-    };
-    setMode(mql.matches);
-    mql.onchange = () => {
-      setMode(mql.matches);
-    };
-  };
-  return {
-    modeOsPrefers: readonly(modeOsPrefers),
-    modeUserPrefers: readonly(modeUserPrefers),
-    currentMode: readonly(currentMode),
-    isDark: readonly(isDark),
-    getModeOsPrefers,
-    getModeUserPrefers,
-    getModeAutoPrefers,
-    setModeUserPrefers,
-    setModeCurrent,
-    autoModeWatcher,
-    initializeMode,
-    MODE
-  };
-};
-const _hoisted_1$b = ["aria-labelledby", "aria-describedby"];
-const _sfc_main$k = /* @__PURE__ */ defineComponent({
+const _hoisted_1$8 = ["aria-labelledby", "aria-describedby"];
+const _sfc_main$l = /* @__PURE__ */ defineComponent({
   __name: "VDrawer",
   props: {
     regionBackdrop: {
@@ -48279,7 +48412,7 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
               "aria-describedby": unref(describedby)
             }, [
               renderSlot(_ctx.$slots, "default")
-            ], 10, _hoisted_1$b)) : createCommentVNode("", true)
+            ], 10, _hoisted_1$8)) : createCommentVNode("", true)
           ]),
           _: 3
         }, 8, ["name"]),
@@ -48303,9 +48436,9 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
   }
 });
 var VPreview_vue_vue_type_style_index_0_scoped_true_lang = "";
-const _withScopeId$3 = (n2) => (pushScopeId("data-v-0d055d3d"), n2 = n2(), popScopeId(), n2);
-const _hoisted_1$a = { class: "vuetiful-previewer overflow-hidden shadow-2xl shadow-surface-500/10 rounded-container-token dark:shadow-black/10" };
-const _hoisted_2$6 = { class: "flex items-center gap-2" };
+const _withScopeId$3 = (n2) => (pushScopeId("data-v-73195296"), n2 = n2(), popScopeId(), n2);
+const _hoisted_1$7 = { class: "vuetiful-previewer overflow-hidden shadow-2xl shadow-surface-500/10 rounded-container-token dark:shadow-black/10" };
+const _hoisted_2$5 = { class: "flex items-center gap-2" };
 const _hoisted_3$4 = /* @__PURE__ */ _withScopeId$3(() => /* @__PURE__ */ createElementVNode("svg", {
   class: "icon",
   xmlns: "http://www.w3.org/2000/svg",
@@ -48313,21 +48446,21 @@ const _hoisted_3$4 = /* @__PURE__ */ _withScopeId$3(() => /* @__PURE__ */ create
 }, [
   /* @__PURE__ */ createElementVNode("path", { d: "M288 32c-80.8 0-145.5 36.8-192.6 80.6C48.6 156 17.3 208 2.5 243.7c-3.3 7.9-3.3 16.7 0 24.6C17.3 304 48.6 356 95.4 399.4C142.5 443.2 207.2 480 288 480s145.5-36.8 192.6-80.6c46.8-43.5 78.1-95.4 93-131.1c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C433.5 68.8 368.8 32 288 32zM144 256a144 144 0 1 1 288 0 144 144 0 1 1 -288 0zm144-64c0 35.3-28.7 64-64 64c-7.1 0-13.9-1.2-20.3-3.3c-5.5-1.8-11.9 1.6-11.7 7.4c.3 6.9 1.3 13.8 3.2 20.7c13.7 51.2 66.4 81.6 117.6 67.9s81.6-66.4 67.9-117.6c-11.1-41.5-47.8-69.4-88.6-71.1c-5.8-.2-9.2 6.1-7.4 11.7c2.1 6.4 3.3 13.2 3.3 20.3z" })
 ], -1));
-const _hoisted_4$2 = /* @__PURE__ */ _withScopeId$3(() => /* @__PURE__ */ createElementVNode("svg", {
+const _hoisted_4$1 = /* @__PURE__ */ _withScopeId$3(() => /* @__PURE__ */ createElementVNode("svg", {
   class: "icon",
   xmlns: "http://www.w3.org/2000/svg",
   viewBox: "0 0 640 512"
 }, [
   /* @__PURE__ */ createElementVNode("path", { d: "M392.8 1.2c-17-4.9-34.7 5-39.6 22l-128 448c-4.9 17 5 34.7 22 39.6s34.7-5 39.6-22l128-448c4.9-17-5-34.7-22-39.6zm80.6 120.1c-12.5 12.5-12.5 32.8 0 45.3L562.7 256l-89.4 89.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l112-112c12.5-12.5 12.5-32.8 0-45.3l-112-112c-12.5-12.5-32.8-12.5-45.3 0zm-306.7 0c-12.5-12.5-32.8-12.5-45.3 0l-112 112c-12.5 12.5-12.5 32.8 0 45.3l112 112c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256l89.4-89.4c12.5-12.5 12.5-32.8 0-45.3z" })
 ], -1));
-const _hoisted_5$2 = /* @__PURE__ */ _withScopeId$3(() => /* @__PURE__ */ createElementVNode("svg", {
+const _hoisted_5$1 = /* @__PURE__ */ _withScopeId$3(() => /* @__PURE__ */ createElementVNode("svg", {
   class: "icon",
   xmlns: "http://www.w3.org/2000/svg",
   viewBox: "0 0 384 512"
 }, [
   /* @__PURE__ */ createElementVNode("path", { d: "M16 64C16 28.7 44.7 0 80 0H304c35.3 0 64 28.7 64 64V448c0 35.3-28.7 64-64 64H80c-35.3 0-64-28.7-64-64V64zM144 448c0 8.8 7.2 16 16 16h64c8.8 0 16-7.2 16-16s-7.2-16-16-16H160c-8.8 0-16 7.2-16 16zM304 64H80V384H304V64z" })
 ], -1));
-const _hoisted_6$2 = /* @__PURE__ */ _withScopeId$3(() => /* @__PURE__ */ createElementVNode("svg", {
+const _hoisted_6$1 = /* @__PURE__ */ _withScopeId$3(() => /* @__PURE__ */ createElementVNode("svg", {
   class: "icon",
   xmlns: "http://www.w3.org/2000/svg",
   viewBox: "0 0 576 512"
@@ -48355,7 +48488,7 @@ const _hoisted_9$1 = /* @__PURE__ */ _withScopeId$3(() => /* @__PURE__ */ create
 }, [
   /* @__PURE__ */ createElementVNode("path", { d: "M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z" })
 ], -1));
-const _sfc_main$j = /* @__PURE__ */ defineComponent({
+const _sfc_main$k = /* @__PURE__ */ defineComponent({
   __name: "VPreview",
   props: {
     hideMobileToggle: {
@@ -48411,17 +48544,17 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
     const swatches = ref(false);
     const toggleSwatches = () => swatches.value = !swatches.value;
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$a, [
+      return openBlock(), createElementBlock("div", _hoisted_1$7, [
         createElementVNode("header", {
           class: normalizeClass(`vuetiful-previewer-header flex items-center justify-between gap-4 p-4 bg-surface-200-700-token ${__props.regionHeader}`)
         }, [
-          createElementVNode("div", _hoisted_2$6, [
-            createVNode(unref(_sfc_main$r), {
+          createElementVNode("div", _hoisted_2$5, [
+            createVNode(unref(_sfc_main$s), {
               modelValue: tabView.value,
               "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => tabView.value = $event)
             }, {
               default: withCtx(() => [
-                createVNode(unref(_sfc_main$q), {
+                createVNode(unref(_sfc_main$r), {
                   "data-test": "radio-item-preview",
                   value: "preview",
                   title: "Preview"
@@ -48433,14 +48566,14 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
                   ]),
                   _: 3
                 }),
-                createVNode(unref(_sfc_main$q), {
+                createVNode(unref(_sfc_main$r), {
                   "data-test": "radio-item-code",
                   value: "code",
                   title: "Code"
                 }, {
                   default: withCtx(() => [
                     renderSlot(_ctx.$slots, "code-item", {}, () => [
-                      _hoisted_4$2
+                      _hoisted_4$1
                     ], true)
                   ]),
                   _: 3
@@ -48448,28 +48581,28 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
               ]),
               _: 3
             }, 8, ["modelValue"]),
-            !__props.hideMobileToggle && tabView.value === "preview" ? (openBlock(), createBlock(unref(_sfc_main$r), {
+            !__props.hideMobileToggle && tabView.value === "preview" ? (openBlock(), createBlock(unref(_sfc_main$s), {
               key: 0,
               class: "hidden sm:!inline-flex",
               modelValue: radioSize.value,
               "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => radioSize.value = $event)
             }, {
               default: withCtx(() => [
-                createVNode(unref(_sfc_main$q), {
+                createVNode(unref(_sfc_main$r), {
                   "data-test": "radio-item-mobile",
                   value: "mobile"
                 }, {
                   default: withCtx(() => [
                     renderSlot(_ctx.$slots, "mobile-item", {}, () => [
-                      _hoisted_5$2
+                      _hoisted_5$1
                     ], true)
                   ]),
                   _: 3
                 }),
-                createVNode(unref(_sfc_main$q), { value: "full" }, {
+                createVNode(unref(_sfc_main$r), { value: "full" }, {
                   default: withCtx(() => [
                     renderSlot(_ctx.$slots, "desktop-item", {}, () => [
-                      _hoisted_6$2
+                      _hoisted_6$1
                     ], true)
                   ]),
                   _: 3
@@ -48481,7 +48614,11 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
           !__props.hideSwatches ? (openBlock(), createBlock(unref(_sfc_main$w), {
             key: 0,
             "data-test": "swatch-button",
-            class: normalizeClass(`${swatches.value ? "variant-filled" : "variant-ghost"} px-4 py-1 border-token border-surface-400-500-token`),
+            variant: swatches.value ? "filled" : "",
+            class: normalizeClass([
+              "px-4 py-1 border-token border-surface-400-500-token",
+              swatches.value ? "" : "text-center text-base rounded-token hover:variant-ghost hover:text-surface-900 dark:hover:text-surface-50"
+            ]),
             onClick: toggleSwatches,
             title: "Backgrounds"
           }, {
@@ -48491,9 +48628,9 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
               ], true)
             ]),
             _: 3
-          }, 8, ["class"])) : createCommentVNode("", true)
+          }, 8, ["variant", "class"])) : createCommentVNode("", true)
         ], 2),
-        swatches.value ? (openBlock(), createBlock(unref(_sfc_main$r), {
+        swatches.value ? (openBlock(), createBlock(unref(_sfc_main$s), {
           key: 0,
           "data-test": "swatches",
           class: normalizeClass(`vuetiful-previewer-swatches variant-soft grid grid-cols-6 gap-2 !rounded-none p-4 sm:grid-cols-12`),
@@ -48504,7 +48641,7 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
         }, {
           default: withCtx(() => [
             (openBlock(true), createElementBlock(Fragment, null, renderList(Object.entries(backgrounds), ([key, value], index2) => {
-              return openBlock(), createBlock(unref(_sfc_main$q), {
+              return openBlock(), createBlock(unref(_sfc_main$r), {
                 value: key,
                 key: index2,
                 class: normalizeClass(`${value} flex aspect-square cursor-pointer items-center justify-center rounded ring-[1px] ring-surface-500/50`),
@@ -48547,7 +48684,7 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
         tabView.value === "code" ? (openBlock(), createElementBlock("div", {
           key: 2,
           "data-test": "previewer-source",
-          class: normalizeClass(`vuetiful-previewer-source p-4 ${backgrounds["neutral"]} ${__props.regionSource}`)
+          class: normalizeClass(`vuetiful-previewer-source p-4 md:p-10 ${backgrounds["neutral"]} ${__props.regionSource}`)
         }, [
           renderSlot(_ctx.$slots, "source", {}, () => [
             createTextVNode("(source)")
@@ -48557,8 +48694,8 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
     };
   }
 });
-var VPreview = /* @__PURE__ */ _export_sfc(_sfc_main$j, [["__scopeId", "data-v-0d055d3d"]]);
-const _sfc_main$i = /* @__PURE__ */ defineComponent({
+var VPreview = /* @__PURE__ */ _export_sfc(_sfc_main$k, [["__scopeId", "data-v-73195296"]]);
+const _sfc_main$j = /* @__PURE__ */ defineComponent({
   __name: "VRail",
   props: {
     active: {
@@ -48573,26 +48710,26 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
   setup(__props) {
     const props = __props;
     const { selectedRailTile: selectedRailTile2 } = useRail();
-    provide("active", props.active);
-    provide("hover", props.hover);
+    provide("activeRail", props.active);
+    provide("hoverRail", props.hover);
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(unref(_sfc_main$r), {
-        unstyled: "",
-        active: __props.active,
-        hover: __props.hover,
+      return openBlock(), createBlock(unref(_sfc_main$s), {
         modelValue: unref(selectedRailTile2),
         "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isRef(selectedRailTile2) ? selectedRailTile2.value = $event : null),
-        class: "vuetiful-rail flex h-full w-[70px] flex-col overflow-y-auto sm:w-20"
+        unstyled: "",
+        hover: "",
+        active: "",
+        class: "flex h-full w-[70px] flex-col overflow-y-auto"
       }, {
         default: withCtx(() => [
           renderSlot(_ctx.$slots, "default")
         ]),
         _: 3
-      }, 8, ["active", "hover", "modelValue"]);
+      }, 8, ["modelValue"]);
     };
   }
 });
-const _sfc_main$h = /* @__PURE__ */ defineComponent({
+const _sfc_main$i = /* @__PURE__ */ defineComponent({
   __name: "VRailTile",
   props: {
     value: {
@@ -48614,13 +48751,13 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
   },
   setup(__props) {
     const { selectedRailTile: selectedRailTile2 } = useRail();
-    const active = inject("active");
-    const hover = inject("hover");
+    const activeRail = inject("activeRail");
+    const hoverRail = inject("hoverRail");
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(unref(_sfc_main$q), {
-        value: __props.value,
+      return openBlock(), createBlock(unref(_sfc_main$r), {
         unstyled: "",
-        class: normalizeClass(`vuetiful-rail-tile grid aspect-square w-full cursor-pointer place-content-center place-items-center space-y-1.5 ${unref(hover)} ${unref(selectedRailTile2) === __props.value ? `${unref(active)}` : ""}`)
+        value: __props.value,
+        class: normalizeClass(`vuetiful-rail-tile grid aspect-square w-full cursor-pointer place-content-center place-items-center ${unref(selectedRailTile2) === __props.value ? `${unref(activeRail)}` : `${unref(hoverRail)}`}`)
       }, {
         default: withCtx(() => [
           _ctx.$slots.default ? (openBlock(), createElementBlock("div", {
@@ -48639,9 +48776,9 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$9 = { class: "vuetiful-shell flex h-full w-full flex-col overflow-hidden" };
-const _hoisted_2$5 = { class: "vuetiful-shell-content flex h-full w-full flex-auto overflow-hidden" };
-const _sfc_main$g = defineComponent({
+const _hoisted_1$6 = { class: "vuetiful-shell flex h-full w-full flex-col overflow-hidden" };
+const _hoisted_2$4 = { class: "vuetiful-shell-content flex h-full w-full flex-auto overflow-hidden" };
+const _sfc_main$h = defineComponent({
   __name: "VShell",
   props: {
     regionPage: { type: String, default: "" },
@@ -48656,14 +48793,14 @@ const _sfc_main$g = defineComponent({
   setup(__props) {
     return (_ctx, _cache) => {
       var _a;
-      return openBlock(), createElementBlock("div", _hoisted_1$9, [
+      return openBlock(), createElementBlock("div", _hoisted_1$6, [
         _ctx.$slots.fixedHeader ? (openBlock(), createElementBlock("header", {
           key: 0,
           class: normalizeClass(`vuetiful-fixed-header ${__props.slotFixedHeader}`)
         }, [
           renderSlot(_ctx.$slots, "fixedHeader")
         ], 2)) : createCommentVNode("", true),
-        createElementVNode("div", _hoisted_2$5, [
+        createElementVNode("div", _hoisted_2$4, [
           _ctx.$slots.sidebarLeft ? (openBlock(), createElementBlock("aside", {
             key: 0,
             class: normalizeClass(`vuetiful-sidebar-left overflow-y-auto overflow-x-hidden ${__props.slotSidebarLeft}`)
@@ -48710,9 +48847,9 @@ const _sfc_main$g = defineComponent({
   }
 });
 var VListboxButton_vue_vue_type_style_index_0_scoped_true_lang = "";
-const _withScopeId$2 = (n2) => (pushScopeId("data-v-85546624"), n2 = n2(), popScopeId(), n2);
-const _hoisted_1$8 = { key: 0 };
-const _hoisted_2$4 = /* @__PURE__ */ _withScopeId$2(() => /* @__PURE__ */ createElementVNode("svg", {
+const _withScopeId$2 = (n2) => (pushScopeId("data-v-5635c35e"), n2 = n2(), popScopeId(), n2);
+const _hoisted_1$5 = { key: 0 };
+const _hoisted_2$3 = /* @__PURE__ */ _withScopeId$2(() => /* @__PURE__ */ createElementVNode("svg", {
   class: "icon",
   xmlns: "http://www.w3.org/2000/svg",
   viewBox: "0 0 512 512"
@@ -48726,7 +48863,7 @@ const _hoisted_3$3 = /* @__PURE__ */ _withScopeId$2(() => /* @__PURE__ */ create
 }, [
   /* @__PURE__ */ createElementVNode("path", { d: "M233.4 105.4c12.5-12.5 32.8-12.5 45.3 0l192 192c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L256 173.3 86.6 342.6c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l192-192z" })
 ], -1));
-const _sfc_main$f = /* @__PURE__ */ defineComponent({
+const _sfc_main$g = /* @__PURE__ */ defineComponent({
   __name: "VListboxButton",
   props: {
     as: {
@@ -48739,16 +48876,19 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
     }
   },
   setup(__props) {
+    const unstyled = inject("unstyled");
+    const { settings: settings2 } = useSettings();
+    const isUnstyled = settings2.global.unstyled || settings2.components.listbox.unstyled || unstyled;
     return (_ctx, _cache) => {
       return openBlock(), createBlock(unref(Fe), {
         as: __props.as,
-        class: "variant-filled btn flex w-full justify-between active:scale-[100%]"
+        class: normalizeClass(`vuetiful-listbox-button ${unref(isUnstyled) ? "flex" : "variant-filled btn flex w-full justify-between active:scale-[100%]"}`)
       }, {
         default: withCtx(({ open }) => [
           renderSlot(_ctx.$slots, "default", {}, void 0, true),
-          !__props.hideIcon ? (openBlock(), createElementBlock("span", _hoisted_1$8, [
+          !__props.hideIcon ? (openBlock(), createElementBlock("span", _hoisted_1$5, [
             !open ? renderSlot(_ctx.$slots, "open-icon", { key: 0 }, () => [
-              _hoisted_2$4
+              _hoisted_2$3
             ], true) : createCommentVNode("", true),
             open ? renderSlot(_ctx.$slots, "close-icon", { key: 1 }, () => [
               _hoisted_3$3
@@ -48756,12 +48896,12 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
           ])) : createCommentVNode("", true)
         ]),
         _: 3
-      }, 8, ["as"]);
+      }, 8, ["as", "class"]);
     };
   }
 });
-var VListboxButton = /* @__PURE__ */ _export_sfc(_sfc_main$f, [["__scopeId", "data-v-85546624"]]);
-const _sfc_main$e = /* @__PURE__ */ defineComponent({
+var VListboxButton = /* @__PURE__ */ _export_sfc(_sfc_main$g, [["__scopeId", "data-v-5635c35e"]]);
+const _sfc_main$f = /* @__PURE__ */ defineComponent({
   __name: "VListboxItems",
   props: {
     as: {
@@ -48771,32 +48911,36 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
     static: {
       type: Boolean,
       default: false
+    },
+    unstyled: {
+      type: Boolean,
+      default: false
     }
   },
   setup(__props) {
+    const props = __props;
     const background = inject("background");
     const text = inject("text");
     const horizontal = inject("horizontal");
+    const classItems = inject("classItems");
+    const { settings: settings2 } = useSettings();
+    const isUnstyled = settings2.global.unstyled || settings2.components.listbox.unstyled || props.unstyled;
     return (_ctx, _cache) => {
       return openBlock(), createBlock(unref(Be), {
         as: __props.as,
         static: __props.static,
-        class: normalizeClass(`p-4 border-token border-surface-400-500-token rounded-container-token ${unref(background)} ${unref(text)}`)
+        class: normalizeClass(`z-10 ${unref(isUnstyled) ? "" : `rounded-container-token' gap-1 p-4 border-token border-surface-400-500-token`} ${unref(background)} ${unref(text)} ${unref(horizontal) ? "flex" : "flex-col"} ${unref(classItems)}`),
+        "data-test": "listbox-items"
       }, {
         default: withCtx(() => [
-          createElementVNode("div", {
-            "data-test": "listbox-items",
-            class: normalizeClass(`flex ${unref(horizontal) ? "flex" : "flex-col"} gap-1`)
-          }, [
-            renderSlot(_ctx.$slots, "default")
-          ], 2)
+          renderSlot(_ctx.$slots, "default")
         ]),
         _: 3
       }, 8, ["as", "static", "class"]);
     };
   }
 });
-const _sfc_main$d = /* @__PURE__ */ defineComponent({
+const _sfc_main$e = /* @__PURE__ */ defineComponent({
   __name: "VListboxLabel",
   props: {
     as: {
@@ -48806,7 +48950,10 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
   },
   setup(__props) {
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(unref(Ae), { as: __props.as }, {
+      return openBlock(), createBlock(unref(Ae), {
+        class: "vuetiful-listbox-label",
+        as: __props.as
+      }, {
         default: withCtx(() => [
           renderSlot(_ctx.$slots, "default")
         ]),
@@ -48815,27 +48962,39 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$c = /* @__PURE__ */ defineComponent({
+const _sfc_main$d = /* @__PURE__ */ defineComponent({
   __name: "VListbox",
   props: {
+    modelValue: je.props["modelValue"],
     by: {
       type: String
     },
     display: {
       type: String
     },
-    labelText: {
+    textLabel: {
       type: String
     },
-    labelClasses: {
-      type: Boolean,
-      default: false
+    classLabel: {
+      type: String,
+      default: ""
     },
-    buttonText: {
+    textButton: {
       type: String,
       default: "Select an option"
     },
-    modelValue: je.props["modelValue"],
+    classButton: {
+      type: String,
+      default: ""
+    },
+    classItem: {
+      type: String,
+      default: ""
+    },
+    classItems: {
+      type: String,
+      default: ""
+    },
     horizontal: {
       type: Boolean,
       default: false
@@ -48850,7 +49009,7 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
     },
     hover: {
       type: String,
-      default: "variant-ghost"
+      default: "hover:variant-ghost"
     },
     background: {
       type: String,
@@ -48859,7 +49018,8 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
     text: {
       type: String,
       default: "text-surface-900 dark:text-surface-50"
-    }
+    },
+    unstyled: unstyledProp
   },
   emits: ["update:modelValue"],
   setup(__props, { emit }) {
@@ -48882,44 +49042,49 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
     provide("background", props.background);
     provide("text", props.text);
     provide("horizontal", props.horizontal);
+    provide("unstyled", props.unstyled);
+    provide("classItem", props.classItem);
+    provide("classItems", props.classItems);
     const showText = computed(() => {
       var _a;
       if (props.display && parentModelValue.value)
         return parentModelValue.value[props.display];
       const length = (_a = parentModelValue.value) == null ? void 0 : _a.length;
       if (props.multiple && length === 0)
-        return props.buttonText;
+        return props.textButton;
       if (props.multiple && length === 1)
         return parentModelValue.value[0];
       if (props.multiple && length > 1)
         return `${length} options selected`;
       if (parentModelValue.value)
         return parentModelValue.value;
-      return props.buttonText;
+      return props.textButton;
     });
+    const { settings: settings2 } = useSettings();
+    const isUnstyled = settings2.global.unstyled || settings2.components.listbox.unstyled || props.unstyled;
     return (_ctx, _cache) => {
       return openBlock(), createBlock(unref(je), {
-        "data-test": "v-listbox",
+        "data-test": "listbox",
         as: "div",
         by: __props.by,
         multiple: __props.multiple,
-        class: "vuetiful-listbox relative rounded-container-token",
+        class: normalizeClass(`vuetiful-listbox ${unref(isUnstyled) ? "" : "relative rounded-container-token"}`),
         modelValue: parentModelValue.value,
         "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => parentModelValue.value = $event)
       }, {
         default: withCtx(() => [
-          __props.labelText ? (openBlock(), createBlock(_sfc_main$d, {
+          __props.textLabel ? (openBlock(), createBlock(_sfc_main$e, {
             key: 0,
-            class: normalizeClass(__props.labelClasses)
+            class: normalizeClass(__props.classLabel)
           }, {
             default: withCtx(() => [
-              createTextVNode(toDisplayString(__props.labelText), 1)
+              createTextVNode(toDisplayString(__props.textLabel), 1)
             ]),
             _: 1
           }, 8, ["class"])) : createCommentVNode("", true),
           createVNode(VListboxButton, {
-            "data-test": "v-listbox-button",
-            class: normalizeClass(`${__props.background} ${__props.text}`)
+            "data-test": "listbox-button",
+            class: normalizeClass(`${__props.background} ${__props.text} ${__props.classButton}`)
           }, {
             default: withCtx(() => [
               createTextVNode(toDisplayString(unref(showText)), 1)
@@ -48935,38 +49100,54 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
             "leave-to-class": "opacity-0"
           }, {
             default: withCtx(() => [
-              createVNode(_sfc_main$e, { class: "absolute mt-1 min-w-full" }, {
+              createVNode(_sfc_main$f, {
+                "data-test": "listbox-items",
+                unstyled: __props.unstyled,
+                class: normalizeClass(`${unref(isUnstyled) ? "" : "absolute mt-1 min-w-full"}`)
+              }, {
                 default: withCtx(() => [
                   renderSlot(_ctx.$slots, "default")
                 ]),
                 _: 3
-              })
+              }, 8, ["unstyled", "class"])
             ]),
             _: 3
           })
         ]),
         _: 3
-      }, 8, ["by", "multiple", "modelValue"]);
+      }, 8, ["by", "multiple", "class", "modelValue"]);
     };
   }
 });
-const _sfc_main$b = /* @__PURE__ */ defineComponent({
+const _sfc_main$c = /* @__PURE__ */ defineComponent({
   __name: "VListboxItem",
   props: {
     value: {
       type: [String, Number, Boolean, Object],
       required: true
+    },
+    unstyled: {
+      type: Boolean,
+      default: false
     }
   },
   setup(__props) {
+    const props = __props;
     const activeClass = inject("active");
     const hoverClass = inject("hover");
+    const classItem = inject("classItem");
+    const { settings: settings2 } = useSettings();
+    const isUnstyled = settings2.global.unstyled || settings2.components.listboxItem.unstyled || props.unstyled;
     return (_ctx, _cache) => {
       return openBlock(), createBlock(unref(Ke), { value: __props.value }, {
         default: withCtx(({ selected, disabled, active }) => [
           createElementVNode("div", {
-            "data-test": "v-listbox-item",
-            class: normalizeClass(`vuetiful-listbox-item px-4 py-1 text-base rounded-token ${selected ? unref(activeClass) : `hover:${unref(hoverClass)}`} ${disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer"} ${active && !selected ? unref(hoverClass) : ""}`)
+            "data-test": "listbox-item",
+            class: normalizeClass(`vuetiful-listbox-item ${unref(isUnstyled) ? "" : "px-4 py-1 text-base rounded-token"} 
+      ${selected ? unref(activeClass) : unref(hoverClass)} 
+      ${disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer"}
+      ${active && !selected ? unref(hoverClass) : ""}
+      ${unref(classItem)}`)
           }, [
             renderSlot(_ctx.$slots, "default")
           ], 2)
@@ -48976,37 +49157,42 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$a = /* @__PURE__ */ defineComponent({
+const _sfc_main$b = /* @__PURE__ */ defineComponent({
   __name: "VTab",
   props: {
     disabled: {
       type: Boolean,
       default: false
-    }
+    },
+    unstyled: unstyledProp
   },
   setup(__props) {
+    const props = __props;
     const activeClass = inject("active");
     const hoverClass = inject("hover");
     const vertical = inject("vertical");
     const classTab = inject("classTab");
     const hideSeparator = inject("hideSeparator");
+    const classTabSeparator = inject("classTabSeparator");
     const tabClass = computed(() => {
       return classTab ? classTab : "w-full px-4 py-2";
     });
+    const { settings: settings2 } = useSettings();
+    const isUnstyled = settings2.global.unstyled || settings2.components.tab.unstyled || props.unstyled;
     return (_ctx, _cache) => {
       return openBlock(), createBlock(unref(ye), {
         disabled: __props.disabled,
-        class: normalizeClass(`flex ${unref(vertical) ? "flex-row justify-between" : "flex-col"}`)
+        class: normalizeClass(["vuetiful-tab", `flex ${unref(vertical) ? "flex-row justify-between" : "flex-col"}`])
       }, {
         default: withCtx(({ selected }) => [
           createElementVNode("div", {
             "data-test": "slot-container",
-            class: normalizeClass(`text-base rounded-token ${selected ? unref(activeClass) : unref(hoverClass)} ${unref(tabClass)}`)
+            class: normalizeClass(["vuetiful-tab-content", `text-base ${unref(isUnstyled) ? "" : "rounded-token"} ${selected ? unref(activeClass) : unref(hoverClass)} ${unref(tabClass)}`])
           }, [
             renderSlot(_ctx.$slots, "default")
           ], 2),
           withDirectives(createElementVNode("div", {
-            class: normalizeClass(`z-10 border-surface-900-50-token ${unref(vertical) ? "mr-[-2px] h-full border-r-2" : "mb-[-2px] border-b-2"}`)
+            class: normalizeClass(["vuetiful-tab-separator", `z-10 ${unref(vertical) ? "mr-[-2px] h-full border-r-2" : "mb-[-2px] w-full border-b-2"} ${unref(classTabSeparator)}`])
           }, null, 2), [
             [vShow, selected && !unref(hideSeparator)]
           ])
@@ -49016,11 +49202,11 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$9 = /* @__PURE__ */ defineComponent({
+const _sfc_main$a = /* @__PURE__ */ defineComponent({
   __name: "VTabPanel",
   setup(__props) {
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(unref(ge), null, {
+      return openBlock(), createBlock(unref(ge), { class: "vuetiful-tab-panel" }, {
         default: withCtx(() => [
           renderSlot(_ctx.$slots, "default")
         ]),
@@ -49029,7 +49215,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$8 = /* @__PURE__ */ defineComponent({
+const _sfc_main$9 = /* @__PURE__ */ defineComponent({
   __name: "VTabs",
   props: {
     hideSeparator: {
@@ -49062,12 +49248,17 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
     },
     classSeparator: {
       type: String,
-      default: "border border-surface-400-500-token"
+      default: "border-surface-400-500-token"
+    },
+    classTabSeparator: {
+      type: String,
+      default: "border-surface-900-50-token"
     },
     defaultIndex: {
       type: Number,
       default: 0
-    }
+    },
+    unstyled: unstyledProp
   },
   setup(__props) {
     const props = __props;
@@ -49076,17 +49267,22 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
     provide("vertical", props.vertical);
     provide("classTab", props.classTab);
     provide("hideSeparator", props.hideSeparator);
+    provide("classTabSeparator", props.classTabSeparator);
+    const { settings: settings2 } = useSettings();
+    const isUnstyled = settings2.global.unstyled || settings2.components.tabs.unstyled || props.unstyled;
     return (_ctx, _cache) => {
       return openBlock(), createBlock(unref(xe), {
         as: "div",
         vertical: __props.vertical,
         defaultIndex: __props.defaultIndex,
-        class: normalizeClass(`${__props.vertical ? "flex" : ""}`)
+        class: normalizeClass(["vuetiful-tab-group", `${__props.vertical ? "flex" : ""}`])
       }, {
         default: withCtx(() => [
           createVNode(unref(Ie), {
             "data-test": "vuetiful-tab-list",
-            class: normalizeClass(`vuetiful-tab-list flex ${__props.vertical ? "flex-col" : ""} ${__props.vertical ? "!rounded-br-none !rounded-tr-none" : "!rounded-bl-none !rounded-br-none"} rounded-container-token ${__props.classTabs}`)
+            class: normalizeClass(`vuetiful-tab-list flex ${__props.vertical ? "flex-col" : ""}
+      ${unref(isUnstyled) ? "" : `${__props.vertical ? "!rounded-br-none !rounded-tr-none" : "!rounded-bl-none !rounded-br-none"} rounded-container-token `} 
+      ${__props.classTabs}`)
           }, {
             default: withCtx(() => [
               renderSlot(_ctx.$slots, "tabs")
@@ -49096,11 +49292,12 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
           !__props.hideSeparator ? (openBlock(), createElementBlock("div", {
             key: 0,
             "data-test": "vuetiful-tab-separator",
-            class: normalizeClass(`${__props.classSeparator}`)
+            class: normalizeClass(`border ${__props.classSeparator}`)
           }, null, 2)) : createCommentVNode("", true),
           createVNode(unref(Se), {
             "data-test": "vuetiful-tab-panels",
-            class: normalizeClass(`vuetiful-tab-panels ${__props.vertical ? "!rounded-bl-none !rounded-tl-none" : "!rounded-tl-none !rounded-tr-none"} rounded-container-token ${__props.classPanels}`)
+            class: normalizeClass(`vuetiful-tab-panels
+      ${unref(isUnstyled) ? "" : `p-4 ${__props.vertical ? "!rounded-bl-none !rounded-tl-none" : "!rounded-tl-none !rounded-tr-none"} rounded-container-token`} ${__props.classPanels}`)
           }, {
             default: withCtx(() => [
               renderSlot(_ctx.$slots, "default")
@@ -49113,58 +49310,72 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$7 = { class: "vuetiful-accordion flex w-full flex-col gap-1" };
-const _sfc_main$7 = /* @__PURE__ */ defineComponent({
+const _sfc_main$8 = /* @__PURE__ */ defineComponent({
   __name: "VAccordion",
   props: {
-    hover: {
+    classQuestion: {
       type: String,
-      default: "hover:variant-soft"
+      default: "bg-surface-200-700-token hover:variant-soft"
     },
-    background: {
+    classAnswer: {
       type: String,
       default: "bg-surface-200-700-token"
+    },
+    unstyled: {
+      type: Boolean,
+      default: false
     }
   },
   setup(__props) {
     const props = __props;
-    provide("hover", props.hover);
-    provide("background", props.background);
+    provide("classQuestion", props.classQuestion);
+    provide("classAnswer", props.classAnswer);
+    const { settings: settings2 } = useSettings();
+    const isUnstyled = settings2.global.unstyled || settings2.components.accordion.unstyled || props.unstyled;
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$7, [
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(`vuetiful-accordion ${unref(isUnstyled) ? "" : "flex w-full flex-col gap-1"}`)
+      }, [
         renderSlot(_ctx.$slots, "default")
-      ]);
+      ], 2);
     };
   }
 });
 var VAccordionItem_vue_vue_type_style_index_0_scoped_true_lang = "";
-const _withScopeId$1 = (n2) => (pushScopeId("data-v-75f8b8b4"), n2 = n2(), popScopeId(), n2);
-const _hoisted_1$6 = { class: "vuetiful-accordion-title" };
-const _hoisted_2$3 = /* @__PURE__ */ _withScopeId$1(() => /* @__PURE__ */ createElementVNode("svg", {
-  class: "icon",
+const _withScopeId$1 = (n2) => (pushScopeId("data-v-6c055e30"), n2 = n2(), popScopeId(), n2);
+const _hoisted_1$4 = { class: "vuetiful-accordion-title" };
+const _hoisted_2$2 = /* @__PURE__ */ _withScopeId$1(() => /* @__PURE__ */ createElementVNode("svg", {
+  class: "vuetiful-accordion-item-icon-plus icon",
   xmlns: "http://www.w3.org/2000/svg",
   viewBox: "0 0 448 512"
 }, [
   /* @__PURE__ */ createElementVNode("path", { d: "M256 80c0-17.7-14.3-32-32-32s-32 14.3-32 32V224H48c-17.7 0-32 14.3-32 32s14.3 32 32 32H192V432c0 17.7 14.3 32 32 32s32-14.3 32-32V288H400c17.7 0 32-14.3 32-32s-14.3-32-32-32H256V80z" })
 ], -1));
 const _hoisted_3$2 = /* @__PURE__ */ _withScopeId$1(() => /* @__PURE__ */ createElementVNode("svg", {
-  class: "icon",
+  class: "vuetiful-accordion-item-icon-minus icon",
   xmlns: "http://www.w3.org/2000/svg",
   viewBox: "0 0 448 512"
 }, [
   /* @__PURE__ */ createElementVNode("path", { d: "M432 256c0 17.7-14.3 32-32 32L48 288c-17.7 0-32-14.3-32-32s14.3-32 32-32l352 0c17.7 0 32 14.3 32 32z" })
 ], -1));
-const _sfc_main$6 = /* @__PURE__ */ defineComponent({
+const _sfc_main$7 = /* @__PURE__ */ defineComponent({
   __name: "VAccordionItem",
   props: {
     title: {
       type: String,
       required: true
+    },
+    unstyled: {
+      type: Boolean,
+      default: false
     }
   },
   setup(__props) {
-    const hover = inject("hover");
-    const background = inject("background");
+    const props = __props;
+    const classQuestion = inject("classQuestion");
+    const classAnswer = inject("classAnswer");
+    const { settings: settings2 } = useSettings();
+    const isUnstyled = settings2.global.unstyled || settings2.components.accordionItem.unstyled || props.unstyled;
     return (_ctx, _cache) => {
       return openBlock(), createBlock(unref(Q), {
         class: "vuetiful-accordion-item",
@@ -49172,25 +49383,23 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
       }, {
         default: withCtx(({ open }) => [
           createVNode(unref(V), {
-            class: normalizeClass([`${unref(background)} ${unref(hover)} ${open ? "!rounded-bl-none !rounded-br-none" : ""}`, "vuetiful-accordion-item-button w-full rounded-container-token"])
+            class: normalizeClass([`${unref(isUnstyled) ? "" : `${open ? "!rounded-bl-none !rounded-br-none" : ""}`}
+      ${unref(isUnstyled) ? "" : "items-center justify-between p-4 py-2 rounded-container-token hover:cursor-pointer"}
+      ${unref(classQuestion)}`, "vuetiful-accordion-item-button flex w-full"])
           }, {
             default: withCtx(() => [
-              createElementVNode("div", {
-                class: normalizeClass(["flex items-center justify-between p-4 rounded-container-token hover:cursor-pointer", `${unref(background)} ${unref(hover)} ${open ? "!rounded-bl-none !rounded-br-none" : ""}`])
-              }, [
-                createElementVNode("span", _hoisted_1$6, toDisplayString(__props.title), 1),
-                !open ? renderSlot(_ctx.$slots, "open-item", { key: 0 }, () => [
-                  _hoisted_2$3
-                ], true) : createCommentVNode("", true),
-                open ? renderSlot(_ctx.$slots, "close-item", { key: 1 }, () => [
-                  _hoisted_3$2
-                ], true) : createCommentVNode("", true)
-              ], 2)
+              createElementVNode("span", _hoisted_1$4, toDisplayString(__props.title), 1),
+              !open ? renderSlot(_ctx.$slots, "open-item", { key: 0 }, () => [
+                _hoisted_2$2
+              ], true) : createCommentVNode("", true),
+              open ? renderSlot(_ctx.$slots, "close-item", { key: 1 }, () => [
+                _hoisted_3$2
+              ], true) : createCommentVNode("", true)
             ]),
             _: 2
           }, 1032, ["class"]),
           createVNode(unref(X), {
-            class: normalizeClass(["vuetiful-accordion-item-panel p-4 pt-0 rounded-container-token", `${open ? `${unref(background)} !rounded-tl-none !rounded-tr-none` : ""}`])
+            class: normalizeClass(["vuetiful-accordion-item-panel", `${open ? `${unref(isUnstyled) ? "" : "!rounded-tl-none !rounded-tr-none"}` : ""} ${unref(isUnstyled) ? "" : "p-4 py-2 rounded-container-token"} ${unref(classAnswer)}`])
           }, {
             default: withCtx(() => [
               renderSlot(_ctx.$slots, "default", {}, void 0, true)
@@ -49203,56 +49412,54 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-var VAccordionItem = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["__scopeId", "data-v-75f8b8b4"]]);
+var VAccordionItem = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["__scopeId", "data-v-6c055e30"]]);
 var VAlert_vue_vue_type_style_index_0_scoped_true_lang = "";
-const _withScopeId = (n2) => (pushScopeId("data-v-c395555e"), n2 = n2(), popScopeId(), n2);
-const _hoisted_1$5 = { key: 0 };
-const _hoisted_2$2 = {
+const _withScopeId = (n2) => (pushScopeId("data-v-5df26a83"), n2 = n2(), popScopeId(), n2);
+const _hoisted_1$3 = {
   key: 0,
   class: "icon",
   xmlns: "http://www.w3.org/2000/svg",
   viewBox: "0 0 512 512"
 };
-const _hoisted_3$1 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createElementVNode("path", { d: "M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336h24V272H216c-13.3 0-24-10.7-24-24s10.7-24 24-24h48c13.3 0 24 10.7 24 24v88h8c13.3 0 24 10.7 24 24s-10.7 24-24 24H216c-13.3 0-24-10.7-24-24s10.7-24 24-24zm40-208a32 32 0 1 1 0 64 32 32 0 1 1 0-64z" }, null, -1));
-const _hoisted_4$1 = [
-  _hoisted_3$1
+const _hoisted_2$1 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createElementVNode("path", { d: "M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336h24V272H216c-13.3 0-24-10.7-24-24s10.7-24 24-24h48c13.3 0 24 10.7 24 24v88h8c13.3 0 24 10.7 24 24s-10.7 24-24 24H216c-13.3 0-24-10.7-24-24s10.7-24 24-24zm40-208a32 32 0 1 1 0 64 32 32 0 1 1 0-64z" }, null, -1));
+const _hoisted_3$1 = [
+  _hoisted_2$1
 ];
-const _hoisted_5$1 = {
+const _hoisted_4 = {
   key: 1,
   class: "icon",
   xmlns: "http://www.w3.org/2000/svg",
   viewBox: "0 0 512 512"
 };
-const _hoisted_6$1 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createElementVNode("path", { d: "M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z" }, null, -1));
-const _hoisted_7 = [
-  _hoisted_6$1
+const _hoisted_5 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createElementVNode("path", { d: "M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z" }, null, -1));
+const _hoisted_6 = [
+  _hoisted_5
 ];
-const _hoisted_8 = {
+const _hoisted_7 = {
   key: 2,
   class: "icon",
   xmlns: "http://www.w3.org/2000/svg",
   viewBox: "0 0 512 512"
 };
-const _hoisted_9 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createElementVNode("path", { d: "M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24V264c0 13.3-10.7 24-24 24s-24-10.7-24-24V152c0-13.3 10.7-24 24-24zM224 352a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z" }, null, -1));
-const _hoisted_10 = [
-  _hoisted_9
+const _hoisted_8 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createElementVNode("path", { d: "M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24V264c0 13.3-10.7 24-24 24s-24-10.7-24-24V152c0-13.3 10.7-24 24-24zM224 352a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z" }, null, -1));
+const _hoisted_9 = [
+  _hoisted_8
 ];
-const _hoisted_11 = {
+const _hoisted_10 = {
   key: 3,
   class: "icon",
   xmlns: "http://www.w3.org/2000/svg",
   viewBox: "0 0 512 512"
 };
-const _hoisted_12 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createElementVNode("path", { d: "M256 32c14.2 0 27.3 7.5 34.5 19.8l216 368c7.3 12.4 7.3 27.7 .2 40.1S486.3 480 472 480H40c-14.3 0-27.6-7.7-34.7-20.1s-7-27.8 .2-40.1l216-368C228.7 39.5 241.8 32 256 32zm0 128c-13.3 0-24 10.7-24 24V296c0 13.3 10.7 24 24 24s24-10.7 24-24V184c0-13.3-10.7-24-24-24zm32 224a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z" }, null, -1));
-const _hoisted_13 = [
-  _hoisted_12
+const _hoisted_11 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createElementVNode("path", { d: "M256 32c14.2 0 27.3 7.5 34.5 19.8l216 368c7.3 12.4 7.3 27.7 .2 40.1S486.3 480 472 480H40c-14.3 0-27.6-7.7-34.7-20.1s-7-27.8 .2-40.1l216-368C228.7 39.5 241.8 32 256 32zm0 128c-13.3 0-24 10.7-24 24V296c0 13.3 10.7 24 24 24s24-10.7 24-24V184c0-13.3-10.7-24-24-24zm32 224a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z" }, null, -1));
+const _hoisted_12 = [
+  _hoisted_11
 ];
-const _hoisted_14 = { class: "vuetiful-alert-message flex-auto" };
-const _hoisted_15 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createElementVNode("path", { d: "M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z" }, null, -1));
-const _hoisted_16 = [
-  _hoisted_15
+const _hoisted_13 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createElementVNode("path", { d: "M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z" }, null, -1));
+const _hoisted_14 = [
+  _hoisted_13
 ];
-const _sfc_main$5 = /* @__PURE__ */ defineComponent({
+const _sfc_main$6 = /* @__PURE__ */ defineComponent({
   __name: "VAlert",
   props: {
     hideIcon: {
@@ -49270,6 +49477,22 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
     type: {
       type: String,
       default: ""
+    },
+    classPre: {
+      type: String,
+      default: ""
+    },
+    classMessage: {
+      type: String,
+      default: ""
+    },
+    classClose: {
+      type: String,
+      default: ""
+    },
+    unstyled: {
+      type: Boolean,
+      default: false
     }
   },
   emits: ["close"],
@@ -49285,8 +49508,8 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
           return "variant-filled-warning";
         case "error":
           return "variant-filled-error";
-        default:
-          return "variant-filled-primary";
+        case "":
+          return "";
       }
     });
     const close = () => emit("close");
@@ -49295,23 +49518,30 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
         close();
       }
     };
+    const { settings: settings2 } = useSettings();
+    const isUnstyled = settings2.global.unstyled || settings2.components.alert.unstyled || props.unstyled;
     return (_ctx, _cache) => {
       return __props.show ? (openBlock(), createElementBlock("aside", {
         key: 0,
-        class: normalizeClass(`vuetiful-alert flex w-full flex-row items-center gap-4 p-4 border-token rounded-container-token ${unref(typeBackground)}`)
+        class: normalizeClass(`vuetiful-alert flex ${unref(isUnstyled) ? "" : "w-full items-center gap-4 p-4 border-token rounded-container-token"} ${unref(typeBackground)}`)
       }, [
-        !__props.hideIcon ? (openBlock(), createElementBlock("div", _hoisted_1$5, [
+        !__props.hideIcon ? (openBlock(), createElementBlock("div", {
+          key: 0,
+          class: normalizeClass(`vuetiful-alert-pre ${__props.classPre}`)
+        }, [
           _ctx.$slots.pre ? renderSlot(_ctx.$slots, "pre", { key: 0 }, void 0, true) : createCommentVNode("", true),
           !_ctx.$slots.pre ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
-            __props.type === "info" ? (openBlock(), createElementBlock("svg", _hoisted_2$2, _hoisted_4$1)) : createCommentVNode("", true),
-            __props.type === "success" ? (openBlock(), createElementBlock("svg", _hoisted_5$1, _hoisted_7)) : createCommentVNode("", true),
-            __props.type === "warning" ? (openBlock(), createElementBlock("svg", _hoisted_8, _hoisted_10)) : createCommentVNode("", true),
-            __props.type === "error" ? (openBlock(), createElementBlock("svg", _hoisted_11, _hoisted_13)) : createCommentVNode("", true)
+            __props.type === "info" ? (openBlock(), createElementBlock("svg", _hoisted_1$3, _hoisted_3$1)) : createCommentVNode("", true),
+            __props.type === "success" ? (openBlock(), createElementBlock("svg", _hoisted_4, _hoisted_6)) : createCommentVNode("", true),
+            __props.type === "warning" ? (openBlock(), createElementBlock("svg", _hoisted_7, _hoisted_9)) : createCommentVNode("", true),
+            __props.type === "error" ? (openBlock(), createElementBlock("svg", _hoisted_10, _hoisted_12)) : createCommentVNode("", true)
           ], 64)) : createCommentVNode("", true)
-        ])) : createCommentVNode("", true),
-        createElementVNode("div", _hoisted_14, [
+        ], 2)) : createCommentVNode("", true),
+        createElementVNode("div", {
+          class: normalizeClass(`vuetiful-alert-message ${unref(isUnstyled) ? "" : "flex-auto"} ${__props.classMessage}`)
+        }, [
           renderSlot(_ctx.$slots, "default", {}, void 0, true)
-        ]),
+        ], 2),
         renderSlot(_ctx.$slots, "actions", {}, void 0, true),
         __props.showClose ? (openBlock(), createElementBlock("svg", {
           key: 1,
@@ -49319,18 +49549,18 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
           tabindex: "0",
           onKeydown: handleKeydown,
           onClick: close,
-          class: "icon hover:cursor-pointer",
+          class: normalizeClass(`vuetiful-alert-close-icon icon hover:cursor-pointer ${__props.classClose}`),
           xmlns: "http://www.w3.org/2000/svg",
           viewBox: "0 0 384 512"
-        }, _hoisted_16, 32)) : createCommentVNode("", true)
+        }, _hoisted_14, 34)) : createCommentVNode("", true)
       ], 2)) : createCommentVNode("", true);
     };
   }
 });
-var VAlert = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["__scopeId", "data-v-c395555e"]]);
+var VAlert = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["__scopeId", "data-v-5df26a83"]]);
 var VCard_vue_vue_type_style_index_0_lang = "";
-const _hoisted_1$4 = ["tabindex"];
-const _sfc_main$4 = /* @__PURE__ */ defineComponent({
+const _hoisted_1$2 = ["tabindex"];
+const _sfc_main$5 = /* @__PURE__ */ defineComponent({
   __name: "VCard",
   props: {
     hideSeparator: {
@@ -49345,14 +49575,11 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
       type: String,
       default: "text-surface-900-50-token"
     },
-    horizontal: {
-      type: Boolean,
-      default: false
-    },
     clickable: {
       type: Boolean,
       default: false
-    }
+    },
+    unstyled: unstyledProp
   },
   emits: ["click"],
   setup(__props, { emit }) {
@@ -49375,61 +49602,84 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
         emit("click");
       }
     };
+    const { settings: settings2 } = useSettings();
+    const isUnstyled = settings2.global.unstyled || settings2.components.card.unstyled || props.unstyled;
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
         onClick,
         onKeydown,
         tabindex: __props.clickable ? 0 : void 0,
-        class: normalizeClass(`vuetiful-card flex border-token rounded-container-token ring-outline-token ${__props.horizontal ? "flex-row" : "flex-col"} ${__props.background} ${__props.text} ${__props.clickable ? "card-hover hover:cursor-pointer" : ""}`)
+        class: normalizeClass(`vuetiful-card flex flex-col ${unref(isUnstyled) ? "" : "border-token rounded-container-token ring-outline-token"} ${__props.background} ${__props.text} ${__props.clickable ? `${unref(isUnstyled) ? "" : "card-hover"} hover:cursor-pointer` : ""}`)
       }, [
         renderSlot(_ctx.$slots, "default")
-      ], 42, _hoisted_1$4);
+      ], 42, _hoisted_1$2);
     };
   }
 });
-const _sfc_main$3 = {};
-const _hoisted_1$3 = {
-  "data-test": "vuetiful-card-body-content",
-  class: "vuetiful-card-body p-4"
-};
-function _sfc_render$1(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", _hoisted_1$3, [
-    renderSlot(_ctx.$slots, "default")
-  ]);
-}
-var VCardBody = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["render", _sfc_render$1]]);
-const _hoisted_1$2 = {
-  key: 0,
-  "data-test": "vuetiful-card-footer-separator",
-  class: "opacity-90"
-};
-const _hoisted_2$1 = {
-  "data-test": "vuetiful-card-footer-content",
-  class: "vuetiful-card-footer p-4"
-};
-const _sfc_main$2 = /* @__PURE__ */ defineComponent({
+const _sfc_main$4 = /* @__PURE__ */ defineComponent({
+  __name: "VCardBody",
+  props: {
+    unstyled: unstyledProp
+  },
+  setup(__props) {
+    const props = __props;
+    const { settings: settings2 } = useSettings();
+    const isUnstyled = settings2.global.unstyled || settings2.components.cardBody.unstyled || props.unstyled;
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        "data-test": "vuetiful-card-body-content",
+        class: normalizeClass(`vuetiful-card-body ${unref(isUnstyled) ? "" : "p-4"}`)
+      }, [
+        renderSlot(_ctx.$slots, "default")
+      ], 2);
+    };
+  }
+});
+const _sfc_main$3 = /* @__PURE__ */ defineComponent({
   __name: "VCardFooter",
+  props: {
+    classSeparator: {
+      type: String,
+      default: "opacity-90"
+    },
+    unstyled: unstyledProp
+  },
   setup(__props) {
+    const props = __props;
     const hideSeparator = inject("hideSeparator", false);
+    const attrs = useAttrs();
+    const classAttribute = attrs.class;
+    const { settings: settings2 } = useSettings();
+    const isUnstyled = settings2.global.unstyled || settings2.components.cardBody.unstyled || props.unstyled;
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock(Fragment, null, [
-        !unref(hideSeparator) ? (openBlock(), createElementBlock("hr", _hoisted_1$2)) : createCommentVNode("", true),
-        createElementVNode("div", _hoisted_2$1, [
+        !unref(hideSeparator) ? (openBlock(), createElementBlock("hr", {
+          key: 0,
+          "data-test": "vuetiful-card-footer-separator",
+          class: normalizeClass(["divider", __props.classSeparator])
+        }, null, 2)) : createCommentVNode("", true),
+        createElementVNode("div", {
+          "data-test": "vuetiful-card-footer-content",
+          class: normalizeClass(`vuetiful-card-footer ${unref(isUnstyled) ? "" : "p-4"} ${unref(classAttribute)}`)
+        }, [
           renderSlot(_ctx.$slots, "default")
-        ])
+        ], 2)
       ], 64);
     };
   }
 });
 var VCardHeader_vue_vue_type_style_index_0_lang = "";
-const _hoisted_1$1 = {
-  key: 0,
-  "data-test": "vuetiful-card-header-separator",
-  class: "opacity-90"
-};
-const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+const _sfc_main$2 = /* @__PURE__ */ defineComponent({
   __name: "VCardHeader",
+  props: {
+    classSeparator: {
+      type: String,
+      default: "opacity-90"
+    },
+    unstyled: unstyledProp
+  },
   setup(__props) {
+    const props = __props;
     const headerRef = ref();
     const hasImageAsChild = computed(() => {
       var _a;
@@ -49440,204 +49690,255 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
       return childrenArray.some((child) => child.tagName === "IMG");
     });
     const hideSeparator = inject("hideSeparator", false);
+    const attrs = useAttrs();
+    const classAttribute = attrs.class;
+    const { settings: settings2 } = useSettings();
+    const isUnstyled = settings2.global.unstyled || settings2.components.cardHeader.unstyled || props.unstyled;
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock(Fragment, null, [
         createElementVNode("div", {
           ref_key: "headerRef",
           ref: headerRef,
           "data-test": "vuetiful-card-header-content",
-          class: normalizeClass(`vuetiful-card-header ${unref(hasImageAsChild) ? "" : "p-4"}`)
+          class: normalizeClass(`vuetiful-card-header ${unref(hasImageAsChild) ? "" : `${unref(isUnstyled) ? "" : "p-4"}`} ${unref(classAttribute)}`)
         }, [
           renderSlot(_ctx.$slots, "default")
         ], 2),
-        !unref(hideSeparator) ? (openBlock(), createElementBlock("hr", _hoisted_1$1)) : createCommentVNode("", true)
+        !unref(hideSeparator) ? (openBlock(), createElementBlock("hr", {
+          key: 0,
+          "data-test": "vuetiful-card-header-separator",
+          class: normalizeClass(["divider", __props.classSeparator])
+        }, null, 2)) : createCommentVNode("", true)
       ], 64);
     };
   }
 });
+var githubDark = "";
+const _hoisted_1$1 = ["innerHTML"];
+const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+  __name: "VCodeBlock",
+  props: {
+    language: {
+      type: String,
+      default: "plaintext"
+    },
+    code: {
+      type: String,
+      default: ""
+    },
+    preventOverflow: {
+      type: Boolean,
+      default: false
+    },
+    classHeader: {
+      type: String,
+      default: ""
+    },
+    classLanguage: {
+      type: String,
+      default: ""
+    },
+    classPre: {
+      type: String,
+      default: ""
+    },
+    classCode: {
+      type: String,
+      default: ""
+    },
+    classButton: {
+      type: String,
+      default: ""
+    },
+    buttonText: {
+      type: String,
+      default: "Copy"
+    },
+    buttonCopiedText: {
+      type: String,
+      default: "\u{1F44D}"
+    },
+    unstyled: unstyledProp
+  },
+  emits: ["copy"],
+  setup(__props, { emit }) {
+    const props = __props;
+    const { highlight: highlight2 } = useHighlight();
+    const copyState = ref(false);
+    function languageFormatter(lang) {
+      if (lang === "js")
+        return "javascript";
+      if (lang === "ts")
+        return "typescript";
+      if (["sh", "bash", "zsh", "shell"].includes(lang))
+        return "console";
+      return lang;
+    }
+    function onCopyClick() {
+      copyState.value = true;
+      setTimeout(() => {
+        copyState.value = false;
+      }, 2e3);
+      emit("copy");
+    }
+    const { settings: settings2 } = useSettings();
+    const isUnstyled = settings2.global.unstyled || settings2.components.codeBlock.unstyled || props.unstyled;
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(`vuetiful-code-block code-block ${unref(isUnstyled) ? "" : "max-w-full bg-[#171717] text-sm text-white shadow rounded-container-token"}`)
+      }, [
+        createElementVNode("header", {
+          class: normalizeClass(`vuetiful-code-block-header ${unref(isUnstyled) ? "" : "flex items-center justify-between p-2 pb-0 pl-4 text-xs uppercase text-[#a4a4a4]"} ${__props.classHeader}`)
+        }, [
+          createElementVNode("span", {
+            class: normalizeClass(`vuetiful-code-block-language ${__props.classLanguage}`)
+          }, toDisplayString(languageFormatter(__props.language)), 3),
+          withDirectives((openBlock(), createBlock(unref(_sfc_main$w), {
+            size: "sm",
+            class: normalizeClass(`vuetiful-code-block-button ${__props.classButton ? __props.classButton : "bg-[#171717] dark:bg-[#171717] text-[#a4a4a4] dark:text-[#a4a4a4]"}`),
+            onClick: _cache[0] || (_cache[0] = ($event) => onCopyClick())
+          }, {
+            default: withCtx(() => [
+              createTextVNode(toDisplayString(!copyState.value ? __props.buttonText : __props.buttonCopiedText), 1)
+            ]),
+            _: 1
+          }, 8, ["class"])), [
+            [unref(clipboard), __props.code]
+          ])
+        ], 2),
+        createElementVNode("pre", {
+          class: normalizeClass(`vuetiful-code-block-pre ${unref(isUnstyled) ? "" : "!rounded-t-none bg-transparent p-4 !pt-0"} ${__props.preventOverflow ? "whitespace-pre-wrap break-all" : "overflow-auto"} ${__props.classPre}`)
+        }, [
+          createElementVNode("code", {
+            class: normalizeClass(`vuetiful-code-block-code language-${__props.language} ${__props.classCode}`),
+            innerHTML: unref(highlight2)(__props.code, __props.language)
+          }, null, 10, _hoisted_1$1)
+        ], 2)
+      ], 2);
+    };
+  }
+});
 var components = /* @__PURE__ */ Object.freeze({
   __proto__: null,
   [Symbol.toStringTag]: "Module",
   VAvatar: _sfc_main$y,
   VButton: _sfc_main$w,
-  VBadge,
-  VChip,
-  VCodeBlock: _sfc_main$u,
+  VBadge: _sfc_main$x,
+  VChip: _sfc_main$v,
   VLightSwitch,
-  VRadioGroup: _sfc_main$r,
-  VRadioItem: _sfc_main$q,
-  VRadioLabel: _sfc_main$p,
-  VRadioDescription: _sfc_main$s,
-  VSwitchGroup: _sfc_main$m,
-  VSwitchLabel: _sfc_main$l,
-  VSwitchDescription: _sfc_main$n,
-  VSwitch: _sfc_main$o,
-  VAccordion: _sfc_main$7,
+  VRadioGroup: _sfc_main$s,
+  VRadioItem: _sfc_main$r,
+  VRadioLabel: _sfc_main$q,
+  VRadioDescription: _sfc_main$t,
+  VSwitchGroup: _sfc_main$n,
+  VSwitchLabel: _sfc_main$m,
+  VSwitchDescription: _sfc_main$o,
+  VSwitch: _sfc_main$p,
+  VAccordion: _sfc_main$8,
   VAccordionItem,
   VAlert,
-  VCard: _sfc_main$4,
-  VCardBody,
-  VCardFooter: _sfc_main$2,
-  VCardHeader: _sfc_main$1,
-  VDrawer: _sfc_main$k,
-  VListbox: _sfc_main$c,
+  VCard: _sfc_main$5,
+  VCardBody: _sfc_main$4,
+  VCardFooter: _sfc_main$3,
+  VCardHeader: _sfc_main$2,
+  VCodeBlock: _sfc_main$1,
+  VDrawer: _sfc_main$l,
+  VListbox: _sfc_main$d,
   VListboxButton,
-  VListboxItem: _sfc_main$b,
-  VListboxItems: _sfc_main$e,
-  VListboxLabel: _sfc_main$d,
+  VListboxItem: _sfc_main$c,
+  VListboxItems: _sfc_main$f,
+  VListboxLabel: _sfc_main$e,
   VPreview,
-  VRail: _sfc_main$i,
-  VRailTile: _sfc_main$h,
-  VShell: _sfc_main$g,
-  VTab: _sfc_main$a,
-  VTabPanel: _sfc_main$9,
-  VTabs: _sfc_main$8
+  VRail: _sfc_main$j,
+  VRailTile: _sfc_main$i,
+  VShell: _sfc_main$h,
+  VTab: _sfc_main$b,
+  VTabPanel: _sfc_main$a,
+  VTabs: _sfc_main$9
 });
 var main = "";
 var tailwind = "";
-const _sfc_main = defineComponent({
-  components: {
-    VLightSwitch,
-    VButton: _sfc_main$w
-  },
+const _hoisted_1 = { class: "vuetiful-theme-switcher" };
+const _hoisted_2 = { class: "flex items-center justify-between" };
+const _hoisted_3 = /* @__PURE__ */ createElementVNode("div", { class: "text-lg" }, "Mode", -1);
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "theme-switcher",
   props: {
-    bgLight: {
-      type: String,
-      default: "bg-surface-50"
-    },
-    bgDark: {
+    background: {
       type: String,
-      default: "bg-surface-900"
+      default: "bg-surface-50-900-token"
     },
-    textOnLight: {
-      type: String,
-      default: "text-surface-900"
-    },
-    textOnDark: {
+    text: {
       type: String,
-      default: "text-surface-50"
+      default: "text-surface-900-50-token"
     },
-    width: {
+    widthPopup: {
       type: String,
       default: "w-60"
     },
-    height: {
+    heightList: {
       type: String,
       default: "max-h-64 lg:max-h-[500px]"
     },
-    ring: {
-      type: String,
-      default: "ring-[1px] ring-surface-500/30"
-    },
-    rounded: {
+    classButton: {
       type: String,
-      default: "rounded-token"
+      default: ""
     },
-    roundedContainer: {
+    classList: {
       type: String,
-      default: "rounded-container-token"
+      default: ""
     },
-    buttonClasses: {
+    classListItem: {
       type: String,
-      default: "w-24"
+      default: ""
     }
   },
-  setup(props) {
+  setup(__props) {
     const { initializeTheme, loadTheme, themes: themes2, chosenTheme: chosenTheme2 } = useTheme();
-    const { currentMode: currentMode2, MODE: MODE2 } = useDarkMode();
     const showPopup = ref(false);
     onMounted(() => {
       initializeTheme();
     });
-    const cTransition = `transition-all duration-[200ms]`;
-    function onKeyDown(event) {
-      if (["Enter", "Space"].includes(event.code)) {
-        event.preventDefault();
-        event.currentTarget.click();
-      }
-    }
-    const background = computed(() => {
-      return currentMode2.value === MODE2.LIGHT ? props.bgLight : props.bgDark;
-    });
-    const text = computed(() => {
-      return currentMode2.value === MODE2.LIGHT ? props.textOnLight : props.textOnDark;
-    });
-    const classes = computed(() => {
-      return `${cTransition} 
-      ${background.value} 
-      ${text.value} 
-      ${props.width} 
-      ${props.ring}
-      ${props.roundedContainer}`;
-    });
-    const listClasses = computed(() => {
-      return `${cTransition} 
-      ${props.height}`;
-    });
-    const listItemClasses = computed(() => {
-      return `${cTransition} 
-      ${props.ring} 
-      ${props.rounded}`;
-    });
-    return {
-      onKeyDown,
-      loadTheme,
-      currentMode: currentMode2,
-      classes,
-      chosenTheme: chosenTheme2,
-      themes: themes2,
-      showPopup,
-      listClasses,
-      listItemClasses
-    };
-  }
-});
-const _hoisted_1 = { class: "cc-theme-switcher" };
-const _hoisted_2 = { class: "space-y-4" };
-const _hoisted_3 = { class: "flex items-center justify-between" };
-const _hoisted_4 = /* @__PURE__ */ createElementVNode("h6", null, "Mode", -1);
-const _hoisted_5 = { class: "flex flex-col gap-4" };
-const _hoisted_6 = ["onClick"];
-function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_VButton = resolveComponent("VButton");
-  const _component_v_light_switch = resolveComponent("v-light-switch");
-  return openBlock(), createElementBlock("div", _hoisted_1, [
-    createVNode(_component_VButton, {
-      class: normalizeClass(`cc-theme-switcher__button ${_ctx.buttonClasses}`),
-      onClick: _cache[0] || (_cache[0] = ($event) => _ctx.showPopup = !_ctx.showPopup)
-    }, {
-      default: withCtx(() => [
-        createTextVNode(" Theme ")
-      ]),
-      _: 1
-    }, 8, ["class"]),
-    _ctx.showPopup ? (openBlock(), createElementBlock("div", {
-      key: 0,
-      class: normalizeClass(["cc-theme-switcher__popup absolute z-10 mt-1 p-4 shadow-xl", _ctx.classes])
-    }, [
-      createElementVNode("div", _hoisted_2, [
-        createElementVNode("section", _hoisted_3, [
-          _hoisted_4,
-          createVNode(_component_v_light_switch)
-        ]),
-        createElementVNode("nav", {
-          class: normalizeClass(["list-nav -m-4 overflow-y-auto p-4", _ctx.listClasses])
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        createVNode(unref(_sfc_main$w), {
+          class: normalizeClass(`vuetiful-theme-switcher__button ${__props.classButton}`),
+          onClick: _cache[0] || (_cache[0] = ($event) => showPopup.value = !showPopup.value)
+        }, {
+          default: withCtx(() => [
+            createTextVNode(" Theme ")
+          ]),
+          _: 1
+        }, 8, ["class"]),
+        showPopup.value ? (openBlock(), createElementBlock("div", {
+          key: 0,
+          class: normalizeClass(["vuetiful-theme-switcher__popup absolute z-10 mt-1 space-y-4 p-4 shadow-xl rounded-container-token", `${__props.background} ${__props.text} ${__props.widthPopup} ${__props.classList}`])
         }, [
-          createElementVNode("ul", _hoisted_5, [
-            (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.themes, (theme, index2) => {
-              return openBlock(), createElementBlock("li", {
-                class: normalizeClass(["h-full w-full p-2 text-center capitalize hover:cursor-pointer hover:bg-primary-100 hover:text-primary-900", `${_ctx.listItemClasses} ${_ctx.chosenTheme === theme.name ? "bg-primary-50 text-primary-900" : "bg-surface-200 text-surface-900"}`]),
+          createElementVNode("section", _hoisted_2, [
+            _hoisted_3,
+            createVNode(unref(VLightSwitch))
+          ]),
+          createElementVNode("nav", {
+            class: normalizeClass(["vuetiful-theme-switcher__popup-list -m-4 flex flex-col gap-4 overflow-y-auto p-4", `${__props.heightList} ${__props.classList}`])
+          }, [
+            (openBlock(true), createElementBlock(Fragment, null, renderList(unref(themes2), (theme, index2) => {
+              return openBlock(), createBlock(unref(_sfc_main$w), {
+                class: normalizeClass(["vuetiful-theme-switcher__popup-list-item h-full w-full p-2 text-center capitalize hover:cursor-pointer", `${__props.classListItem} ${unref(chosenTheme2) === theme.name ? "variant-filled-surface" : ""}`]),
                 key: index2,
-                onClick: ($event) => _ctx.loadTheme(theme.name)
-              }, toDisplayString(theme.name), 11, _hoisted_6);
+                onClick: ($event) => unref(loadTheme)(theme.name)
+              }, {
+                default: withCtx(() => [
+                  createTextVNode(toDisplayString(theme.name), 1)
+                ]),
+                _: 2
+              }, 1032, ["class", "onClick"]);
             }), 128))
-          ])
-        ], 2)
-      ])
-    ], 2)) : createCommentVNode("", true)
-  ]);
-}
-var themeSwitcher = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+          ], 2)
+        ], 2)) : createCommentVNode("", true)
+      ]);
+    };
+  }
+});
 const { isBrowser } = usePlatform();
 const THEMES = {
   VUETIFUL: "vuetiful",
@@ -49738,4 +50039,4 @@ function install(app) {
   }
 }
 var index = { install };
-export { themeSwitcher as ThemeSwitcher, _sfc_main$7 as VAccordion, VAccordionItem, VAlert, _sfc_main$y as VAvatar, VBadge, _sfc_main$w as VButton, _sfc_main$4 as VCard, VCardBody, _sfc_main$2 as VCardFooter, _sfc_main$1 as VCardHeader, VChip, _sfc_main$u as VCodeBlock, _sfc_main$k as VDrawer, VLightSwitch, _sfc_main$c as VListbox, VListboxButton, _sfc_main$b as VListboxItem, _sfc_main$e as VListboxItems, _sfc_main$d as VListboxLabel, VPreview, _sfc_main$s as VRadioDescription, _sfc_main$r as VRadioGroup, _sfc_main$q as VRadioItem, _sfc_main$p as VRadioLabel, _sfc_main$i as VRail, _sfc_main$h as VRailTile, _sfc_main$g as VShell, _sfc_main$o as VSwitch, _sfc_main$n as VSwitchDescription, _sfc_main$m as VSwitchGroup, _sfc_main$l as VSwitchLabel, _sfc_main$a as VTab, _sfc_main$9 as VTabPanel, _sfc_main$8 as VTabs, index as default, useDarkMode, useDrawer, useHighlight, useRail, useTheme, clipboard as vClipboard };
+export { _sfc_main as ThemeSwitcher, _sfc_main$8 as VAccordion, VAccordionItem, VAlert, _sfc_main$y as VAvatar, _sfc_main$x as VBadge, _sfc_main$w as VButton, _sfc_main$5 as VCard, _sfc_main$4 as VCardBody, _sfc_main$3 as VCardFooter, _sfc_main$2 as VCardHeader, _sfc_main$v as VChip, _sfc_main$1 as VCodeBlock, _sfc_main$l as VDrawer, VLightSwitch, _sfc_main$d as VListbox, VListboxButton, _sfc_main$c as VListboxItem, _sfc_main$f as VListboxItems, _sfc_main$e as VListboxLabel, VPreview, _sfc_main$t as VRadioDescription, _sfc_main$s as VRadioGroup, _sfc_main$r as VRadioItem, _sfc_main$q as VRadioLabel, _sfc_main$j as VRail, _sfc_main$i as VRailTile, _sfc_main$h as VShell, _sfc_main$p as VSwitch, _sfc_main$o as VSwitchDescription, _sfc_main$n as VSwitchGroup, _sfc_main$m as VSwitchLabel, _sfc_main$b as VTab, _sfc_main$a as VTabPanel, _sfc_main$9 as VTabs, index as default, useDarkMode, useDrawer, useHighlight, useRail, useSettings, useTheme, clipboard as vClipboard };