@code-coaching/vuetiful 0.20.0 → 0.21.0

package/dist/vuetiful.es.mjs

@@ -1,11 +1,11 @@
 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, mergeProps, vShow, resolveComponent } from "vue";
-const _hoisted_1$e = ["src", "alt"];
-const _hoisted_2$8 = {
+const _hoisted_1$i = ["src", "alt"];
+const _hoisted_2$9 = {
   key: 1,
   class: "avatar-initials h-full w-full",
   viewBox: "0 0 512 512"
 };
-const _sfc_main$u = /* @__PURE__ */ defineComponent({
+const _sfc_main$y = /* @__PURE__ */ defineComponent({
   __name: "VAvatar",
   props: {
     initials: { type: String, default: "" },
@@ -39,7 +39,7 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
           src: imgSrc.value,
           alt: __props.alt,
           onError: _cache[0] || (_cache[0] = () => imgSrc.value = __props.fallback)
-        }, null, 40, _hoisted_1$e)) : (openBlock(), createElementBlock("svg", _hoisted_2$8, [
+        }, null, 40, _hoisted_1$i)) : (openBlock(), createElementBlock("svg", _hoisted_2$9, [
           createElementVNode("text", {
             x: "50%",
             y: "50%",
@@ -61,17 +61,17 @@ var _export_sfc = (sfc, props) => {
   }
   return target;
 };
-const _sfc_main$t = {};
-const _hoisted_1$d = {
+const _sfc_main$x = {};
+const _hoisted_1$h = {
   class: /* @__PURE__ */ normalizeClass(`vuetiful-badge badge`)
 };
-function _sfc_render$3(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", _hoisted_1$d, [
+function _sfc_render$4(_ctx, _cache) {
+  return openBlock(), createElementBlock("div", _hoisted_1$h, [
     renderSlot(_ctx.$slots, "default")
   ]);
 }
-var VBadge = /* @__PURE__ */ _export_sfc(_sfc_main$t, [["render", _sfc_render$3]]);
-const _sfc_main$s = /* @__PURE__ */ defineComponent({
+var VBadge = /* @__PURE__ */ _export_sfc(_sfc_main$x, [["render", _sfc_render$4]]);
+const _sfc_main$w = /* @__PURE__ */ defineComponent({
   __name: "VButton",
   props: {
     icon: {
@@ -121,16 +121,16 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$r = {};
-const _hoisted_1$c = {
+const _sfc_main$v = {};
+const _hoisted_1$g = {
   class: /* @__PURE__ */ normalizeClass(`vuetiful-chip chip`)
 };
-function _sfc_render$2(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", _hoisted_1$c, [
+function _sfc_render$3(_ctx, _cache) {
+  return openBlock(), createElementBlock("div", _hoisted_1$g, [
     renderSlot(_ctx.$slots, "default")
   ]);
 }
-var VChip = /* @__PURE__ */ _export_sfc(_sfc_main$r, [["render", _sfc_render$2]]);
+var VChip = /* @__PURE__ */ _export_sfc(_sfc_main$v, [["render", _sfc_render$3]]);
 var deepFreezeEs6 = { exports: {} };
 function deepFreeze(obj) {
   if (obj instanceof Map) {
@@ -46471,12 +46471,12 @@ const useHighlight = () => {
   };
 };
 var githubDark = "";
-const _hoisted_1$b = { class: "code-block max-w-full bg-neutral-900/90 text-sm text-white shadow rounded-container-token" };
-const _hoisted_2$7 = {
+const _hoisted_1$f = { 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 _hoisted_3$5 = ["innerHTML"];
-const _sfc_main$q = /* @__PURE__ */ defineComponent({
+const _sfc_main$u = /* @__PURE__ */ defineComponent({
   __name: "VCodeBlock",
   props: {
     language: {
@@ -46534,12 +46534,12 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
       emit("copy");
     }
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$b, [
+      return openBlock(), createElementBlock("div", _hoisted_1$f, [
         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$7, toDisplayString(languageFormatter(__props.language)), 1),
-          withDirectives((openBlock(), createBlock(unref(_sfc_main$s), {
+          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())
           }, {
@@ -46563,7 +46563,7 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$p = defineComponent({
+const _sfc_main$t = defineComponent({
   props: {
     bgLight: {
       type: String,
@@ -46654,9 +46654,9 @@ const _sfc_main$p = defineComponent({
     };
   }
 });
-const _hoisted_1$a = ["aria-checked", "title"];
-const _hoisted_2$6 = ["d"];
-function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
+const _hoisted_1$e = ["aria-checked", "title"];
+const _hoisted_2$7 = ["d"];
+function _sfc_render$2(_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 +46680,12 @@ function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
         createElementVNode("path", {
           fill: "currentColor",
           d: _ctx.currentMode ? _ctx.svgPath.sun : _ctx.svgPath.moon
-        }, null, 8, _hoisted_2$6)
+        }, null, 8, _hoisted_2$7)
       ], 2))
     ], 2)
-  ], 42, _hoisted_1$a);
+  ], 42, _hoisted_1$e);
 }
-var VLightSwitch = /* @__PURE__ */ _export_sfc(_sfc_main$p, [["render", _sfc_render$1]]);
+var VLightSwitch = /* @__PURE__ */ _export_sfc(_sfc_main$t, [["render", _sfc_render$2]]);
 function u$2(r2, n2, ...a2) {
   if (r2 in n2) {
     let e2 = n2[r2];
@@ -47796,7 +47796,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$o = /* @__PURE__ */ defineComponent({
+const _sfc_main$s = /* @__PURE__ */ defineComponent({
   __name: "VRadioDescription",
   props: {
     as: {
@@ -47815,7 +47815,7 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$n = /* @__PURE__ */ defineComponent({
+const _sfc_main$r = /* @__PURE__ */ defineComponent({
   __name: "VRadioGroup",
   props: {
     as: {
@@ -47883,7 +47883,7 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$m = /* @__PURE__ */ defineComponent({
+const _sfc_main$q = /* @__PURE__ */ defineComponent({
   __name: "VRadioItem",
   props: {
     value: {
@@ -47909,7 +47909,7 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$l = /* @__PURE__ */ defineComponent({
+const _sfc_main$p = /* @__PURE__ */ defineComponent({
   __name: "VRadioLabel",
   props: {
     as: {
@@ -47928,11 +47928,11 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$9 = {
+const _hoisted_1$d = {
   key: 0,
   class: "sr-only"
 };
-const _sfc_main$k = /* @__PURE__ */ defineComponent({
+const _sfc_main$o = /* @__PURE__ */ defineComponent({
   __name: "VSwitch",
   props: {
     modelValue: {
@@ -48008,7 +48008,7 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
           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}`)
           }, [
-            _ctx.$slots.default ? (openBlock(), createElementBlock("span", _hoisted_1$9, [
+            _ctx.$slots.default ? (openBlock(), createElementBlock("span", _hoisted_1$d, [
               renderSlot(_ctx.$slots, "default")
             ])) : createCommentVNode("", true),
             createElementVNode("div", {
@@ -48021,7 +48021,7 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$j = /* @__PURE__ */ defineComponent({
+const _sfc_main$n = /* @__PURE__ */ defineComponent({
   __name: "VSwitchDescription",
   props: {
     as: {
@@ -48040,7 +48040,7 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$i = /* @__PURE__ */ defineComponent({
+const _sfc_main$m = /* @__PURE__ */ defineComponent({
   __name: "VSwitchGroup",
   props: {
     as: {
@@ -48059,7 +48059,7 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$h = /* @__PURE__ */ defineComponent({
+const _sfc_main$l = /* @__PURE__ */ defineComponent({
   __name: "VSwitchLabel",
   props: {
     as: {
@@ -48204,8 +48204,8 @@ const useDarkMode = () => {
     MODE
   };
 };
-const _hoisted_1$8 = ["aria-labelledby", "aria-describedby"];
-const _sfc_main$g = /* @__PURE__ */ defineComponent({
+const _hoisted_1$c = ["aria-labelledby", "aria-describedby"];
+const _sfc_main$k = /* @__PURE__ */ defineComponent({
   __name: "VDrawer",
   props: {
     regionBackdrop: {
@@ -48269,7 +48269,7 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
               "aria-describedby": unref(describedby)
             }, [
               renderSlot(_ctx.$slots, "default")
-            ], 10, _hoisted_1$8)) : createCommentVNode("", true)
+            ], 10, _hoisted_1$c)) : createCommentVNode("", true)
           ]),
           _: 3
         }, 8, ["name"]),
@@ -48294,8 +48294,8 @@ const _sfc_main$g = /* @__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$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_1$b = { 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 _hoisted_3$4 = /* @__PURE__ */ _withScopeId$3(() => /* @__PURE__ */ createElementVNode("svg", {
   class: "icon",
   xmlns: "http://www.w3.org/2000/svg",
@@ -48345,7 +48345,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$f = /* @__PURE__ */ defineComponent({
+const _sfc_main$j = /* @__PURE__ */ defineComponent({
   __name: "VPreview",
   props: {
     hideMobileToggle: {
@@ -48401,17 +48401,17 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
     const swatches = ref(false);
     const toggleSwatches = () => swatches.value = !swatches.value;
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$7, [
+      return openBlock(), createElementBlock("div", _hoisted_1$b, [
         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$5, [
-            createVNode(unref(_sfc_main$n), {
+          createElementVNode("div", _hoisted_2$6, [
+            createVNode(unref(_sfc_main$r), {
               modelValue: tabView.value,
               "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => tabView.value = $event)
             }, {
               default: withCtx(() => [
-                createVNode(unref(_sfc_main$m), {
+                createVNode(unref(_sfc_main$q), {
                   "data-test": "radio-item-preview",
                   value: "preview",
                   title: "Preview"
@@ -48423,7 +48423,7 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
                   ]),
                   _: 3
                 }),
-                createVNode(unref(_sfc_main$m), {
+                createVNode(unref(_sfc_main$q), {
                   "data-test": "radio-item-code",
                   value: "code",
                   title: "Code"
@@ -48438,14 +48438,14 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
               ]),
               _: 3
             }, 8, ["modelValue"]),
-            !__props.hideMobileToggle && tabView.value === "preview" ? (openBlock(), createBlock(unref(_sfc_main$n), {
+            !__props.hideMobileToggle && tabView.value === "preview" ? (openBlock(), createBlock(unref(_sfc_main$r), {
               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$m), {
+                createVNode(unref(_sfc_main$q), {
                   "data-test": "radio-item-mobile",
                   value: "mobile"
                 }, {
@@ -48456,7 +48456,7 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
                   ]),
                   _: 3
                 }),
-                createVNode(unref(_sfc_main$m), { value: "full" }, {
+                createVNode(unref(_sfc_main$q), { value: "full" }, {
                   default: withCtx(() => [
                     renderSlot(_ctx.$slots, "desktop-item", {}, () => [
                       _hoisted_6$2
@@ -48468,7 +48468,7 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
               _: 3
             }, 8, ["modelValue"])) : createCommentVNode("", true)
           ]),
-          !__props.hideSwatches ? (openBlock(), createBlock(unref(_sfc_main$s), {
+          !__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`),
@@ -48483,7 +48483,7 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
             _: 3
           }, 8, ["class"])) : createCommentVNode("", true)
         ], 2),
-        swatches.value ? (openBlock(), createBlock(unref(_sfc_main$n), {
+        swatches.value ? (openBlock(), createBlock(unref(_sfc_main$r), {
           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`),
@@ -48494,7 +48494,7 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
         }, {
           default: withCtx(() => [
             (openBlock(true), createElementBlock(Fragment, null, renderList(Object.entries(backgrounds), ([key, value], index2) => {
-              return openBlock(), createBlock(unref(_sfc_main$m), {
+              return openBlock(), createBlock(unref(_sfc_main$q), {
                 value: key,
                 key: index2,
                 class: normalizeClass(`${value} flex aspect-square cursor-pointer items-center justify-center rounded ring-[1px] ring-surface-500/50`),
@@ -48547,9 +48547,9 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
     };
   }
 });
-var VPreview = /* @__PURE__ */ _export_sfc(_sfc_main$f, [["__scopeId", "data-v-0d055d3d"]]);
-const _hoisted_1$6 = { class: "v-rail grid h-full w-[70px] grid-rows-[auto_1fr_auto] gap-0 overflow-y-auto sm:w-20" };
-const _sfc_main$e = /* @__PURE__ */ defineComponent({
+var VPreview = /* @__PURE__ */ _export_sfc(_sfc_main$j, [["__scopeId", "data-v-0d055d3d"]]);
+const _hoisted_1$a = { class: "v-rail grid h-full w-[70px] grid-rows-[auto_1fr_auto] gap-0 overflow-y-auto sm:w-20" };
+const _sfc_main$i = /* @__PURE__ */ defineComponent({
   __name: "VRail",
   props: {
     active: {
@@ -48578,7 +48578,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
     provide("active", props.active);
     provide("hover", props.hover);
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$6, [
+      return openBlock(), createElementBlock("div", _hoisted_1$a, [
         createElementVNode("div", {
           class: normalizeClass(["v-bar-lead", __props.regionLead])
         }, [
@@ -48598,7 +48598,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$d = /* @__PURE__ */ defineComponent({
+const _sfc_main$h = /* @__PURE__ */ defineComponent({
   __name: "VRailTile",
   props: {
     value: {
@@ -48674,9 +48674,9 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$5 = { 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$c = 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({
   __name: "VShell",
   props: {
     regionPage: { type: String, default: "" },
@@ -48691,14 +48691,14 @@ const _sfc_main$c = defineComponent({
   setup(__props) {
     return (_ctx, _cache) => {
       var _a;
-      return openBlock(), createElementBlock("div", _hoisted_1$5, [
+      return openBlock(), createElementBlock("div", _hoisted_1$9, [
         _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$4, [
+        createElementVNode("div", _hoisted_2$5, [
           _ctx.$slots.sidebarLeft ? (openBlock(), createElementBlock("aside", {
             key: 0,
             class: normalizeClass(`vuetiful-sidebar-left overflow-y-auto overflow-x-hidden ${__props.slotSidebarLeft}`)
@@ -48746,8 +48746,8 @@ const _sfc_main$c = 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$4 = { key: 0 };
-const _hoisted_2$3 = /* @__PURE__ */ _withScopeId$2(() => /* @__PURE__ */ createElementVNode("svg", {
+const _hoisted_1$8 = { key: 0 };
+const _hoisted_2$4 = /* @__PURE__ */ _withScopeId$2(() => /* @__PURE__ */ createElementVNode("svg", {
   class: "icon",
   xmlns: "http://www.w3.org/2000/svg",
   viewBox: "0 0 512 512"
@@ -48761,7 +48761,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$b = /* @__PURE__ */ defineComponent({
+const _sfc_main$f = /* @__PURE__ */ defineComponent({
   __name: "VListboxButton",
   props: {
     as: {
@@ -48781,9 +48781,9 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
       }, {
         default: withCtx(({ open }) => [
           renderSlot(_ctx.$slots, "default", {}, void 0, true),
-          !__props.hideIcon ? (openBlock(), createElementBlock("span", _hoisted_1$4, [
+          !__props.hideIcon ? (openBlock(), createElementBlock("span", _hoisted_1$8, [
             !open ? renderSlot(_ctx.$slots, "open-icon", { key: 0 }, () => [
-              _hoisted_2$3
+              _hoisted_2$4
             ], true) : createCommentVNode("", true),
             open ? renderSlot(_ctx.$slots, "close-icon", { key: 1 }, () => [
               _hoisted_3$3
@@ -48795,8 +48795,8 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
     };
   }
 });
-var VListboxButton = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["__scopeId", "data-v-85546624"]]);
-const _sfc_main$a = /* @__PURE__ */ defineComponent({
+var VListboxButton = /* @__PURE__ */ _export_sfc(_sfc_main$f, [["__scopeId", "data-v-85546624"]]);
+const _sfc_main$e = /* @__PURE__ */ defineComponent({
   __name: "VListboxItems",
   props: {
     as: {
@@ -48831,7 +48831,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$9 = /* @__PURE__ */ defineComponent({
+const _sfc_main$d = /* @__PURE__ */ defineComponent({
   __name: "VListboxLabel",
   props: {
     as: {
@@ -48850,7 +48850,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$8 = /* @__PURE__ */ defineComponent({
+const _sfc_main$c = /* @__PURE__ */ defineComponent({
   __name: "VListbox",
   props: {
     by: {
@@ -48943,7 +48943,7 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
         "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => parentModelValue.value = $event)
       }, {
         default: withCtx(() => [
-          __props.labelText ? (openBlock(), createBlock(_sfc_main$9, {
+          __props.labelText ? (openBlock(), createBlock(_sfc_main$d, {
             key: 0,
             class: normalizeClass(__props.labelClasses)
           }, {
@@ -48970,7 +48970,7 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
             "leave-to-class": "opacity-0"
           }, {
             default: withCtx(() => [
-              createVNode(_sfc_main$a, { class: "absolute mt-1 min-w-full" }, {
+              createVNode(_sfc_main$e, { class: "absolute mt-1 min-w-full" }, {
                 default: withCtx(() => [
                   renderSlot(_ctx.$slots, "default")
                 ]),
@@ -48985,7 +48985,7 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$7 = /* @__PURE__ */ defineComponent({
+const _sfc_main$b = /* @__PURE__ */ defineComponent({
   __name: "VListboxItem",
   props: {
     value: {
@@ -49011,7 +49011,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$6 = /* @__PURE__ */ defineComponent({
+const _sfc_main$a = /* @__PURE__ */ defineComponent({
   __name: "VTab",
   props: {
     disabled: {
@@ -49051,7 +49051,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$5 = /* @__PURE__ */ defineComponent({
+const _sfc_main$9 = /* @__PURE__ */ defineComponent({
   __name: "VTabPanel",
   setup(__props) {
     return (_ctx, _cache) => {
@@ -49064,7 +49064,7 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$4 = /* @__PURE__ */ defineComponent({
+const _sfc_main$8 = /* @__PURE__ */ defineComponent({
   __name: "VTabs",
   props: {
     hideSeparator: {
@@ -49148,8 +49148,8 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$3 = { class: "vuetiful-accordion flex w-full flex-col gap-1" };
-const _sfc_main$3 = /* @__PURE__ */ defineComponent({
+const _hoisted_1$7 = { class: "vuetiful-accordion flex w-full flex-col gap-1" };
+const _sfc_main$7 = /* @__PURE__ */ defineComponent({
   __name: "VAccordion",
   props: {
     hover: {
@@ -49166,7 +49166,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
     provide("hover", props.hover);
     provide("background", props.background);
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$3, [
+      return openBlock(), createElementBlock("div", _hoisted_1$7, [
         renderSlot(_ctx.$slots, "default")
       ]);
     };
@@ -49174,8 +49174,8 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
 });
 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$2 = { class: "vuetiful-accordion-title" };
-const _hoisted_2$2 = /* @__PURE__ */ _withScopeId$1(() => /* @__PURE__ */ createElementVNode("svg", {
+const _hoisted_1$6 = { class: "vuetiful-accordion-title" };
+const _hoisted_2$3 = /* @__PURE__ */ _withScopeId$1(() => /* @__PURE__ */ createElementVNode("svg", {
   class: "icon",
   xmlns: "http://www.w3.org/2000/svg",
   viewBox: "0 0 448 512"
@@ -49189,7 +49189,7 @@ const _hoisted_3$2 = /* @__PURE__ */ _withScopeId$1(() => /* @__PURE__ */ create
 }, [
   /* @__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$2 = /* @__PURE__ */ defineComponent({
+const _sfc_main$6 = /* @__PURE__ */ defineComponent({
   __name: "VAccordionItem",
   props: {
     title: {
@@ -49213,9 +49213,9 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
               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$2, toDisplayString(__props.title), 1),
+                createElementVNode("span", _hoisted_1$6, toDisplayString(__props.title), 1),
                 !open ? renderSlot(_ctx.$slots, "open-item", { key: 0 }, () => [
-                  _hoisted_2$2
+                  _hoisted_2$3
                 ], true) : createCommentVNode("", true),
                 open ? renderSlot(_ctx.$slots, "close-item", { key: 1 }, () => [
                   _hoisted_3$2
@@ -49238,11 +49238,11 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-var VAccordionItem = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-75f8b8b4"]]);
+var VAccordionItem = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["__scopeId", "data-v-75f8b8b4"]]);
 var VAlert_vue_vue_type_style_index_0_scoped_true_lang = "";
 const _withScopeId = (n2) => (pushScopeId("data-v-5669e826"), n2 = n2(), popScopeId(), n2);
-const _hoisted_1$1 = { key: 0 };
-const _hoisted_2$1 = {
+const _hoisted_1$5 = { key: 0 };
+const _hoisted_2$2 = {
   key: 0,
   class: "icon",
   xmlns: "http://www.w3.org/2000/svg",
@@ -49287,7 +49287,7 @@ const _hoisted_15 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createEle
 const _hoisted_16 = [
   _hoisted_15
 ];
-const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+const _sfc_main$5 = /* @__PURE__ */ defineComponent({
   __name: "VAlert",
   props: {
     hideIcon: {
@@ -49335,10 +49335,10 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
         key: 0,
         class: normalizeClass(`vuetiful-alert flex w-full flex-row items-center gap-4 p-4 border-token rounded-container-token ${unref(typeBackground)}`)
       }, [
-        !__props.hideIcon ? (openBlock(), createElementBlock("div", _hoisted_1$1, [
+        !__props.hideIcon ? (openBlock(), createElementBlock("div", _hoisted_1$5, [
           _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$1, _hoisted_4$1)) : createCommentVNode("", true),
+            __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)
@@ -49362,47 +49362,178 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-var VAlert = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-5669e826"]]);
+var VAlert = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["__scopeId", "data-v-5669e826"]]);
+var VCard_vue_vue_type_style_index_0_lang = "";
+const _hoisted_1$4 = ["tabindex"];
+const _sfc_main$4 = /* @__PURE__ */ defineComponent({
+  __name: "VCard",
+  props: {
+    hideSeparator: {
+      type: Boolean,
+      default: false
+    },
+    background: {
+      type: String,
+      default: "bg-surface-200-700-token"
+    },
+    text: {
+      type: String,
+      default: "text-surface-900-50-token"
+    },
+    horizontal: {
+      type: Boolean,
+      default: false
+    },
+    clickable: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: ["click"],
+  setup(__props, { emit }) {
+    const props = __props;
+    provide("hideSeparator", props.hideSeparator);
+    const onClick = () => {
+      if (!props.clickable)
+        return;
+      emit("click");
+    };
+    const onKeydown = (event) => {
+      if (!props.clickable)
+        return;
+      if (event.key === "Enter") {
+        event.preventDefault();
+        emit("click");
+      }
+      if (event.key === " ") {
+        event.preventDefault();
+        emit("click");
+      }
+    };
+    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" : ""}`)
+      }, [
+        renderSlot(_ctx.$slots, "default")
+      ], 42, _hoisted_1$4);
+    };
+  }
+});
+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({
+  __name: "VCardFooter",
+  setup(__props) {
+    const hideSeparator = inject("hideSeparator", false);
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock(Fragment, null, [
+        !unref(hideSeparator) ? (openBlock(), createElementBlock("hr", _hoisted_1$2)) : createCommentVNode("", true),
+        createElementVNode("div", _hoisted_2$1, [
+          renderSlot(_ctx.$slots, "default")
+        ])
+      ], 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({
+  __name: "VCardHeader",
+  setup(__props) {
+    const headerRef = ref();
+    const hasImageAsChild = computed(() => {
+      var _a;
+      const children = (_a = headerRef.value) == null ? void 0 : _a.children;
+      if (!children)
+        return false;
+      const childrenArray = Array.from(children);
+      return childrenArray.some((child) => child.tagName === "IMG");
+    });
+    const hideSeparator = inject("hideSeparator", false);
+    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"}`)
+        }, [
+          renderSlot(_ctx.$slots, "default")
+        ], 2),
+        !unref(hideSeparator) ? (openBlock(), createElementBlock("hr", _hoisted_1$1)) : createCommentVNode("", true)
+      ], 64);
+    };
+  }
+});
 var components = /* @__PURE__ */ Object.freeze({
   __proto__: null,
   [Symbol.toStringTag]: "Module",
-  VAvatar: _sfc_main$u,
-  VButton: _sfc_main$s,
+  VAvatar: _sfc_main$y,
+  VButton: _sfc_main$w,
   VBadge,
   VChip,
-  VCodeBlock: _sfc_main$q,
+  VCodeBlock: _sfc_main$u,
   VLightSwitch,
-  VRadioGroup: _sfc_main$n,
-  VRadioItem: _sfc_main$m,
-  VRadioLabel: _sfc_main$l,
-  VRadioDescription: _sfc_main$o,
-  VSwitchGroup: _sfc_main$i,
-  VSwitchLabel: _sfc_main$h,
-  VSwitchDescription: _sfc_main$j,
-  VSwitch: _sfc_main$k,
-  VAccordion: _sfc_main$3,
+  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,
   VAccordionItem,
   VAlert,
-  VDrawer: _sfc_main$g,
-  VListbox: _sfc_main$8,
+  VCard: _sfc_main$4,
+  VCardBody,
+  VCardFooter: _sfc_main$2,
+  VCardHeader: _sfc_main$1,
+  VDrawer: _sfc_main$k,
+  VListbox: _sfc_main$c,
   VListboxButton,
-  VListboxItem: _sfc_main$7,
-  VListboxItems: _sfc_main$a,
-  VListboxLabel: _sfc_main$9,
+  VListboxItem: _sfc_main$b,
+  VListboxItems: _sfc_main$e,
+  VListboxLabel: _sfc_main$d,
   VPreview,
-  VRail: _sfc_main$e,
-  VRailTile: _sfc_main$d,
-  VShell: _sfc_main$c,
-  VTab: _sfc_main$6,
-  VTabPanel: _sfc_main$5,
-  VTabs: _sfc_main$4
+  VRail: _sfc_main$i,
+  VRailTile: _sfc_main$h,
+  VShell: _sfc_main$g,
+  VTab: _sfc_main$a,
+  VTabPanel: _sfc_main$9,
+  VTabs: _sfc_main$8
 });
 var main = "";
 var tailwind = "";
 const _sfc_main = defineComponent({
   components: {
     VLightSwitch,
-    VButton: _sfc_main$s
+    VButton: _sfc_main$w
   },
   props: {
     bgLight: {
@@ -49642,4 +49773,4 @@ function install(app) {
   }
 }
 var index = { install };
-export { themeSwitcher as ThemeSwitcher, _sfc_main$3 as VAccordion, VAccordionItem, VAlert, _sfc_main$u as VAvatar, VBadge, _sfc_main$s as VButton, VChip, _sfc_main$q as VCodeBlock, _sfc_main$g as VDrawer, VLightSwitch, _sfc_main$8 as VListbox, VListboxButton, _sfc_main$7 as VListboxItem, _sfc_main$a as VListboxItems, _sfc_main$9 as VListboxLabel, VPreview, _sfc_main$o as VRadioDescription, _sfc_main$n as VRadioGroup, _sfc_main$m as VRadioItem, _sfc_main$l as VRadioLabel, _sfc_main$e as VRail, _sfc_main$d as VRailTile, _sfc_main$c as VShell, _sfc_main$k as VSwitch, _sfc_main$j as VSwitchDescription, _sfc_main$i as VSwitchGroup, _sfc_main$h as VSwitchLabel, _sfc_main$6 as VTab, _sfc_main$5 as VTabPanel, _sfc_main$4 as VTabs, index as default, useDarkMode, useDrawer, useHighlight, useRail, useTheme, clipboard as vClipboard };
+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 };