@code-coaching/vuetiful 0.18.0 → 0.19.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$b = ["src", "alt"];
-const _hoisted_2$6 = {
+const _hoisted_1$d = ["src", "alt"];
+const _hoisted_2$7 = {
   key: 1,
   class: "avatar-initials h-full w-full",
   viewBox: "0 0 512 512"
 };
-const _sfc_main$r = /* @__PURE__ */ defineComponent({
+const _sfc_main$t = /* @__PURE__ */ defineComponent({
   __name: "VAvatar",
   props: {
     initials: { type: String, default: "" },
@@ -39,7 +39,7 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
           src: imgSrc.value,
           alt: __props.alt,
           onError: _cache[0] || (_cache[0] = () => imgSrc.value = __props.fallback)
-        }, null, 40, _hoisted_1$b)) : (openBlock(), createElementBlock("svg", _hoisted_2$6, [
+        }, null, 40, _hoisted_1$d)) : (openBlock(), createElementBlock("svg", _hoisted_2$7, [
           createElementVNode("text", {
             x: "50%",
             y: "50%",
@@ -61,17 +61,17 @@ var _export_sfc = (sfc, props) => {
   }
   return target;
 };
-const _sfc_main$q = {};
-const _hoisted_1$a = {
+const _sfc_main$s = {};
+const _hoisted_1$c = {
   class: /* @__PURE__ */ normalizeClass(`vuetiful-badge badge`)
 };
 function _sfc_render$3(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", _hoisted_1$a, [
+  return openBlock(), createElementBlock("div", _hoisted_1$c, [
     renderSlot(_ctx.$slots, "default")
   ]);
 }
-var VBadge = /* @__PURE__ */ _export_sfc(_sfc_main$q, [["render", _sfc_render$3]]);
-const _sfc_main$p = /* @__PURE__ */ defineComponent({
+var VBadge = /* @__PURE__ */ _export_sfc(_sfc_main$s, [["render", _sfc_render$3]]);
+const _sfc_main$r = /* @__PURE__ */ defineComponent({
   __name: "VButton",
   props: {
     icon: {
@@ -121,16 +121,16 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$o = {};
-const _hoisted_1$9 = {
+const _sfc_main$q = {};
+const _hoisted_1$b = {
   class: /* @__PURE__ */ normalizeClass(`vuetiful-chip chip`)
 };
 function _sfc_render$2(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", _hoisted_1$9, [
+  return openBlock(), createElementBlock("div", _hoisted_1$b, [
     renderSlot(_ctx.$slots, "default")
   ]);
 }
-var VChip = /* @__PURE__ */ _export_sfc(_sfc_main$o, [["render", _sfc_render$2]]);
+var VChip = /* @__PURE__ */ _export_sfc(_sfc_main$q, [["render", _sfc_render$2]]);
 var deepFreezeEs6 = { exports: {} };
 function deepFreeze(obj) {
   if (obj instanceof Map) {
@@ -46471,12 +46471,12 @@ const useHighlight = () => {
   };
 };
 var githubDark = "";
-const _hoisted_1$8 = { class: "code-block max-w-full bg-neutral-900/90 text-sm text-white shadow rounded-container-token" };
-const _hoisted_2$5 = {
+const _hoisted_1$a = { class: "code-block max-w-full bg-neutral-900/90 text-sm text-white shadow rounded-container-token" };
+const _hoisted_2$6 = {
   class: /* @__PURE__ */ normalizeClass(`code-block-language`)
 };
-const _hoisted_3$3 = ["innerHTML"];
-const _sfc_main$n = /* @__PURE__ */ defineComponent({
+const _hoisted_3$4 = ["innerHTML"];
+const _sfc_main$p = /* @__PURE__ */ defineComponent({
   __name: "VCodeBlock",
   props: {
     language: {
@@ -46534,12 +46534,12 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
       emit("copy");
     }
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$8, [
+      return openBlock(), createElementBlock("div", _hoisted_1$a, [
         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$5, toDisplayString(languageFormatter(__props.language)), 1),
-          withDirectives((openBlock(), createBlock(unref(_sfc_main$p), {
+          createElementVNode("span", _hoisted_2$6, toDisplayString(languageFormatter(__props.language)), 1),
+          withDirectives((openBlock(), createBlock(unref(_sfc_main$r), {
             class: normalizeClass(`code-block-btn ${__props.buttonClass}`),
             onClick: _cache[0] || (_cache[0] = ($event) => onCopyClick())
           }, {
@@ -46557,13 +46557,13 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
           createElementVNode("code", {
             class: normalizeClass(`code-block-code language-${__props.language}`),
             innerHTML: unref(highlight2)(props.code, props.language)
-          }, null, 10, _hoisted_3$3)
+          }, null, 10, _hoisted_3$4)
         ], 2)
       ]);
     };
   }
 });
-const _sfc_main$m = defineComponent({
+const _sfc_main$o = defineComponent({
   props: {
     bgLight: {
       type: String,
@@ -46654,8 +46654,8 @@ const _sfc_main$m = defineComponent({
     };
   }
 });
-const _hoisted_1$7 = ["aria-checked", "title"];
-const _hoisted_2$4 = ["d"];
+const _hoisted_1$9 = ["aria-checked", "title"];
+const _hoisted_2$5 = ["d"];
 function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("div", {
     class: normalizeClass(`lightswitch-track ${_ctx.classesTrack}`),
@@ -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$4)
+        }, null, 8, _hoisted_2$5)
       ], 2))
     ], 2)
-  ], 42, _hoisted_1$7);
+  ], 42, _hoisted_1$9);
 }
-var VLightSwitch = /* @__PURE__ */ _export_sfc(_sfc_main$m, [["render", _sfc_render$1]]);
+var VLightSwitch = /* @__PURE__ */ _export_sfc(_sfc_main$o, [["render", _sfc_render$1]]);
 function u$2(r2, n2, ...a2) {
   if (r2 in n2) {
     let e2 = n2[r2];
@@ -46697,7 +46697,7 @@ function u$2(r2, n2, ...a2) {
 var N$1 = ((o2) => (o2[o2.None = 0] = "None", o2[o2.RenderStrategy = 1] = "RenderStrategy", o2[o2.Static = 2] = "Static", o2))(N$1 || {}), S$1 = ((e2) => (e2[e2.Unmount = 0] = "Unmount", e2[e2.Hidden = 1] = "Hidden", e2))(S$1 || {});
 function H$2({ visible: r2 = true, features: t2 = 0, ourProps: e2, theirProps: o2, ...i2 }) {
   var a2;
-  let n2 = j$3(o2, e2), l2 = Object.assign(i2, { props: n2 });
+  let n2 = j$4(o2, e2), l2 = Object.assign(i2, { props: n2 });
   if (r2 || t2 & 2 && n2.static)
     return y$2(l2);
   if (t2 & 1) {
@@ -46723,11 +46723,11 @@ function y$2({ props: r2, attrs: t2, slots: e2, slot: o2, name: i2 }) {
     if (a2 = b$2(a2 != null ? a2 : []), Object.keys(l2).length > 0 || Object.keys(t2).length > 0) {
       let [u2, ...c2] = a2 != null ? a2 : [];
       if (!v(u2) || c2.length > 0)
-        throw new Error(['Passing props on "template"!', "", `The current component <${i2} /> is rendering a "template".`, "However we need to passthrough the following props:", Object.keys(l2).concat(Object.keys(t2)).map((s2) => s2.trim()).filter((s2, g, R) => R.indexOf(s2) === g).sort((s2, g) => s2.localeCompare(g)).map((s2) => `  - ${s2}`).join(`
+        throw new Error(['Passing props on "template"!', "", `The current component <${i2} /> is rendering a "template".`, "However we need to passthrough the following props:", Object.keys(l2).concat(Object.keys(t2)).map((s2) => s2.trim()).filter((s2, g2, R) => R.indexOf(s2) === g2).sort((s2, g2) => s2.localeCompare(g2)).map((s2) => `  - ${s2}`).join(`
 `), "", "You can apply a few solutions:", ['Add an `as="..."` prop, to ensure that we render an actual element instead of a "template".', "Render a single element as the child so that we can forward the props onto that element."].map((s2) => `  - ${s2}`).join(`
 `)].join(`
 `));
-      let p2 = j$3((h2 = u2.props) != null ? h2 : {}, l2), f2 = cloneVNode(u2, p2);
+      let p2 = j$4((h2 = u2.props) != null ? h2 : {}, l2), f2 = cloneVNode(u2, p2);
       for (let s2 in p2)
         s2.startsWith("on") && (f2.props || (f2.props = {}), f2.props[s2] = p2[s2]);
       return f2;
@@ -46739,7 +46739,7 @@ function y$2({ props: r2, attrs: t2, slots: e2, slot: o2, name: i2 }) {
 function b$2(r2) {
   return r2.flatMap((t2) => t2.type === Fragment ? b$2(t2.children) : [t2]);
 }
-function j$3(...r2) {
+function j$4(...r2) {
   if (r2.length === 0)
     return {};
   if (r2.length === 1)
@@ -46788,7 +46788,7 @@ function f$2(r2) {
   throw new Error("Unexpected object: " + r2);
 }
 var a$2 = ((e2) => (e2[e2.First = 0] = "First", e2[e2.Previous = 1] = "Previous", e2[e2.Next = 2] = "Next", e2[e2.Last = 3] = "Last", e2[e2.Specific = 4] = "Specific", e2[e2.Nothing = 5] = "Nothing", e2))(a$2 || {});
-function x(r2, n2) {
+function x$1(r2, n2) {
   let t2 = n2.resolveItems();
   if (t2.length <= 0)
     return null;
@@ -47082,10 +47082,96 @@ function M({ slot: t2 = ref({}), name: i2 = "Description", props: o2 = {} } = {}
 let E = defineComponent({ name: "Description", props: { as: { type: [Object, String], default: "p" }, id: { type: String, default: () => `headlessui-description-${t$1()}` } }, setup(t2, { attrs: i2, slots: o2 }) {
   let e2 = b();
   return onMounted(() => onUnmounted(e2.register(t2.id))), () => {
-    let { name: s2 = "Description", slot: n2 = ref({}), props: r2 = {} } = e2, { id: d2, ...l2 } = t2, c2 = { ...Object.entries(r2).reduce((f2, [a2, g]) => Object.assign(f2, { [a2]: unref(g) }), {}), id: d2 };
+    let { name: s2 = "Description", slot: n2 = ref({}), props: r2 = {} } = e2, { id: d2, ...l2 } = t2, c2 = { ...Object.entries(r2).reduce((f2, [a2, g2]) => Object.assign(f2, { [a2]: unref(g2) }), {}), id: d2 };
     return H$2({ ourProps: c2, theirProps: l2, slot: n2.value, attrs: i2, slots: o2, name: s2 });
   };
 } });
+var j$3 = ((o2) => (o2[o2.Open = 0] = "Open", o2[o2.Closed = 1] = "Closed", o2))(j$3 || {});
+let x = Symbol("DisclosureContext");
+function g(t2) {
+  let r2 = inject(x, null);
+  if (r2 === null) {
+    let o2 = new Error(`<${t2} /> is missing a parent <Disclosure /> component.`);
+    throw Error.captureStackTrace && Error.captureStackTrace(o2, g), o2;
+  }
+  return r2;
+}
+let B = Symbol("DisclosurePanelContext");
+function $() {
+  return inject(B, null);
+}
+let Q = defineComponent({ name: "Disclosure", props: { as: { type: [Object, String], default: "template" }, defaultOpen: { type: [Boolean], default: false } }, setup(t2, { slots: r2, attrs: o$12 }) {
+  let u2 = ref(t2.defaultOpen ? 0 : 1), e2 = ref(null), i2 = ref(null), s2 = { buttonId: ref(null), panelId: ref(null), disclosureState: u2, panel: e2, button: i2, toggleDisclosure() {
+    u2.value = u$2(u2.value, { [0]: 1, [1]: 0 });
+  }, closeDisclosure() {
+    u2.value !== 1 && (u2.value = 1);
+  }, close(l2) {
+    s2.closeDisclosure();
+    let a2 = (() => l2 ? l2 instanceof HTMLElement ? l2 : l2.value instanceof HTMLElement ? o(l2) : o(s2.button) : o(s2.button))();
+    a2 == null || a2.focus();
+  } };
+  return provide(x, s2), c$2(computed(() => u$2(u2.value, { [0]: l.Open, [1]: l.Closed }))), () => {
+    let { defaultOpen: l2, ...a2 } = t2, c2 = { open: u2.value === 0, close: s2.close };
+    return H$2({ theirProps: a2, ourProps: {}, slot: c2, slots: r2, attrs: o$12, name: "Disclosure" });
+  };
+} }), V = defineComponent({ name: "DisclosureButton", props: { as: { type: [Object, String], default: "button" }, disabled: { type: [Boolean], default: false }, id: { type: String, default: () => `headlessui-disclosure-button-${t$1()}` } }, setup(t2, { attrs: r2, slots: o$2, expose: u2 }) {
+  let e2 = g("DisclosureButton");
+  onMounted(() => {
+    e2.buttonId.value = t2.id;
+  }), onUnmounted(() => {
+    e2.buttonId.value = null;
+  });
+  let i2 = $(), s2 = computed(() => i2 === null ? false : i2.value === e2.panelId.value), l2 = ref(null);
+  u2({ el: l2, $el: l2 }), s2.value || watchEffect(() => {
+    e2.button.value = l2.value;
+  });
+  let a2 = b$1(computed(() => ({ as: t2.as, type: r2.type })), l2);
+  function c2() {
+    var n2;
+    t2.disabled || (s2.value ? (e2.toggleDisclosure(), (n2 = o(e2.button)) == null || n2.focus()) : e2.toggleDisclosure());
+  }
+  function D(n2) {
+    var S2;
+    if (!t2.disabled)
+      if (s2.value)
+        switch (n2.key) {
+          case o$1.Space:
+          case o$1.Enter:
+            n2.preventDefault(), n2.stopPropagation(), e2.toggleDisclosure(), (S2 = o(e2.button)) == null || S2.focus();
+            break;
+        }
+      else
+        switch (n2.key) {
+          case o$1.Space:
+          case o$1.Enter:
+            n2.preventDefault(), n2.stopPropagation(), e2.toggleDisclosure();
+            break;
+        }
+  }
+  function T2(n2) {
+    switch (n2.key) {
+      case o$1.Space:
+        n2.preventDefault();
+        break;
+    }
+  }
+  return () => {
+    let n2 = { open: e2.disclosureState.value === 0 }, { id: S2, ...k2 } = t2, K2 = s2.value ? { ref: l2, type: a2.value, onClick: c2, onKeydown: D } : { id: S2, ref: l2, type: a2.value, "aria-expanded": t2.disabled ? void 0 : e2.disclosureState.value === 0, "aria-controls": o(e2.panel) ? e2.panelId.value : void 0, disabled: t2.disabled ? true : void 0, onClick: c2, onKeydown: D, onKeyup: T2 };
+    return H$2({ ourProps: K2, theirProps: k2, slot: n2, attrs: r2, slots: o$2, name: "DisclosureButton" });
+  };
+} }), X = defineComponent({ name: "DisclosurePanel", props: { as: { type: [Object, String], default: "div" }, static: { type: Boolean, default: false }, unmount: { type: Boolean, default: true }, id: { type: String, default: () => `headlessui-disclosure-panel-${t$1()}` } }, setup(t2, { attrs: r2, slots: o2, expose: u2 }) {
+  let e2 = g("DisclosurePanel");
+  onMounted(() => {
+    e2.panelId.value = t2.id;
+  }), onUnmounted(() => {
+    e2.panelId.value = null;
+  }), u2({ el: e2.panel, $el: e2.panel }), provide(B, e2.panelId);
+  let i2 = p$3(), s2 = computed(() => i2 !== null ? (i2.value & l.Open) === l.Open : e2.disclosureState.value === 0);
+  return () => {
+    let l2 = { open: e2.disclosureState.value === 0, close: e2.close }, { id: a2, ...c2 } = t2, D = { id: a2, ref: e2.panel };
+    return H$2({ ourProps: D, theirProps: c2, slot: l2, attrs: r2, slots: o2, features: N$1.RenderStrategy | N$1.Static, visible: s2.value, name: "DisclosurePanel" });
+  };
+} });
 function de$1(t2, b2) {
   return t2 === b2;
 }
@@ -47103,7 +47189,7 @@ function j$2(t2) {
   return b2;
 }
 let je = defineComponent({ name: "Listbox", emits: { "update:modelValue": (t2) => true }, props: { as: { type: [Object, String], default: "template" }, disabled: { type: [Boolean], default: false }, by: { type: [String, Function], default: () => de$1 }, horizontal: { type: [Boolean], default: false }, modelValue: { type: [Object, String, Number, Boolean], default: void 0 }, defaultValue: { type: [Object, String, Number, Boolean], default: void 0 }, form: { type: String, optional: true }, name: { type: String, optional: true }, multiple: { type: [Boolean], default: false } }, inheritAttrs: false, setup(t2, { slots: b2, attrs: u2, emit: L }) {
-  let e$12 = ref(1), d2 = ref(null), m2 = ref(null), x$1 = ref(null), f2 = ref([]), o$12 = ref(""), i2 = ref(null), w$1 = ref(1);
+  let e$12 = ref(1), d2 = ref(null), m2 = ref(null), x2 = ref(null), f2 = ref([]), o$12 = ref(""), i2 = ref(null), w$1 = ref(1);
   function R(a2 = (l2) => l2) {
     let l2 = i2.value !== null ? f2.value[i2.value] : null, r2 = O(a2(f2.value.slice()), (S2) => o(S2.dataRef.domRef)), s2 = l2 ? r2.indexOf(l2) : null;
     return s2 === -1 && (s2 = null), { options: r2, activeOptionIndex: s2 };
@@ -47114,21 +47200,21 @@ let je = defineComponent({ name: "Listbox", emits: { "update:modelValue": (t2) =
       return (a2 == null ? void 0 : a2[r2]) === (l2 == null ? void 0 : l2[r2]);
     }
     return t2.by(a2, l2);
-  }, orientation: computed(() => t2.horizontal ? "horizontal" : "vertical"), labelRef: d2, buttonRef: m2, optionsRef: x$1, disabled: computed(() => t2.disabled), options: f2, searchQuery: o$12, activeOptionIndex: i2, activationTrigger: w$1, closeListbox() {
+  }, orientation: computed(() => t2.horizontal ? "horizontal" : "vertical"), labelRef: d2, buttonRef: m2, optionsRef: x2, disabled: computed(() => t2.disabled), options: f2, searchQuery: o$12, activeOptionIndex: i2, activationTrigger: w$1, closeListbox() {
     t2.disabled || e$12.value !== 1 && (e$12.value = 1, i2.value = null);
   }, openListbox() {
     t2.disabled || e$12.value !== 0 && (e$12.value = 0);
   }, goToOption(a2, l2, r2) {
     if (t2.disabled || e$12.value === 1)
       return;
-    let s2 = R(), S2 = x(a2 === a$2.Specific ? { focus: a$2.Specific, id: l2 } : { focus: a2 }, { resolveItems: () => s2.options, resolveActiveIndex: () => s2.activeOptionIndex, resolveId: (k2) => k2.id, resolveDisabled: (k2) => k2.dataRef.disabled });
+    let s2 = R(), S2 = x$1(a2 === a$2.Specific ? { focus: a$2.Specific, id: l2 } : { focus: a2 }, { resolveItems: () => s2.options, resolveActiveIndex: () => s2.activeOptionIndex, resolveId: (k2) => k2.id, resolveDisabled: (k2) => k2.dataRef.disabled });
     o$12.value = "", i2.value = S2, w$1.value = r2 != null ? r2 : 1, f2.value = s2.options;
   }, search(a2) {
     if (t2.disabled || e$12.value === 1)
       return;
     let r2 = o$12.value !== "" ? 0 : 1;
     o$12.value += a2.toLowerCase();
-    let S2 = (i2.value !== null ? f2.value.slice(i2.value + r2).concat(f2.value.slice(0, i2.value + r2)) : f2.value).find((V) => V.dataRef.textValue.startsWith(o$12.value) && !V.dataRef.disabled), k2 = S2 ? f2.value.indexOf(S2) : -1;
+    let S2 = (i2.value !== null ? f2.value.slice(i2.value + r2).concat(f2.value.slice(0, i2.value + r2)) : f2.value).find((V2) => V2.dataRef.textValue.startsWith(o$12.value) && !V2.dataRef.disabled), k2 = S2 ? f2.value.indexOf(S2) : -1;
     k2 === -1 || k2 === i2.value || (i2.value = k2, w$1.value = 1);
   }, clearSearch() {
     t2.disabled || e$12.value !== 1 && o$12.value !== "" && (o$12.value = "");
@@ -47147,7 +47233,7 @@ let je = defineComponent({ name: "Listbox", emits: { "update:modelValue": (t2) =
       return s2 === -1 ? l2.push(r2) : l2.splice(s2, 1), l2;
     } }));
   } };
-  y([m2, x$1], (a2, l2) => {
+  y([m2, x2], (a2, l2) => {
     var r2;
     n2.closeListbox(), w(l2, h.Loose) || (a2.preventDefault(), (r2 = o(m2)) == null || r2.focus());
   }, computed(() => e$12.value === 0)), provide(U$1, n2), c$2(computed(() => u$2(e$12.value, { [0]: l.Open, [1]: l.Closed })));
@@ -47169,7 +47255,7 @@ let je = defineComponent({ name: "Listbox", emits: { "update:modelValue": (t2) =
     }, { immediate: true });
   }), () => {
     let { name: a2, modelValue: l2, disabled: r2, form: s2, ...S2 } = t2, k2 = { open: e$12.value === 0, disabled: r2, value: y$12.value };
-    return h$1(Fragment, [...a2 != null && y$12.value != null ? e({ [a2]: y$12.value }).map(([V, $]) => h$1(f$1, K$1({ features: a$1.Hidden, key: V, as: "input", type: "hidden", hidden: true, readOnly: true, form: s2, name: V, value: $ }))) : [], H$2({ ourProps: {}, theirProps: { ...u2, ...T$2(S2, ["defaultValue", "onUpdate:modelValue", "horizontal", "multiple", "by"]) }, slot: k2, slots: b2, attrs: u2, name: "Listbox" })]);
+    return h$1(Fragment, [...a2 != null && y$12.value != null ? e({ [a2]: y$12.value }).map(([V2, $2]) => h$1(f$1, K$1({ features: a$1.Hidden, key: V2, as: "input", type: "hidden", hidden: true, readOnly: true, form: s2, name: V2, value: $2 }))) : [], H$2({ ourProps: {}, theirProps: { ...u2, ...T$2(S2, ["defaultValue", "onUpdate:modelValue", "horizontal", "multiple", "by"]) }, slot: k2, slots: b2, attrs: u2, name: "Listbox" })]);
   };
 } }), Ae = defineComponent({ name: "ListboxLabel", props: { as: { type: [Object, String], default: "label" }, id: { type: String, default: () => `headlessui-listbox-label-${t$1()}` } }, setup(t2, { attrs: b2, slots: u2 }) {
   let L = j$2("ListboxLabel");
@@ -47348,7 +47434,7 @@ function K({ slot: t2 = {}, name: n2 = "Label", props: i2 = {} } = {}) {
 let T = defineComponent({ name: "Label", props: { as: { type: [Object, String], default: "label" }, passive: { type: [Boolean], default: false }, id: { type: String, default: () => `headlessui-label-${t$1()}` } }, setup(t2, { slots: n2, attrs: i2 }) {
   let e2 = d$1();
   return onMounted(() => onUnmounted(e2.register(t2.id))), () => {
-    let { name: l2 = "Label", slot: r2 = {}, props: o2 = {} } = e2, { id: p2, passive: c2, ...u2 } = t2, s2 = { ...Object.entries(o2).reduce((f2, [b2, g]) => Object.assign(f2, { [b2]: unref(g) }), {}), id: p2 };
+    let { name: l2 = "Label", slot: r2 = {}, props: o2 = {} } = e2, { id: p2, passive: c2, ...u2 } = t2, s2 = { ...Object.entries(o2).reduce((f2, [b2, g2]) => Object.assign(f2, { [b2]: unref(g2) }), {}), id: p2 };
     return c2 && (delete s2.onClick, delete s2.htmlFor, delete u2.onClick), H$2({ ourProps: s2, theirProps: u2, slot: r2, attrs: i2, slots: n2, name: l2 });
   };
 } });
@@ -47489,7 +47575,7 @@ let S = Symbol("GroupContext"), ae = defineComponent({ name: "SwitchGroup", prop
   function s2() {
     r2(!i2.value);
   }
-  let w2 = ref(null), u2 = t2 === null ? w2 : t2.switchRef, g = b$1(computed(() => ({ as: l2.as, type: a2.type })), u2);
+  let w2 = ref(null), u2 = t2 === null ? w2 : t2.switchRef, g2 = b$1(computed(() => ({ as: l2.as, type: a2.type })), u2);
   f2({ el: u2, $el: u2 });
   function k2(e2) {
     e2.preventDefault(), s2();
@@ -47517,7 +47603,7 @@ let S = Symbol("GroupContext"), ae = defineComponent({ name: "SwitchGroup", prop
       };
     }, { immediate: true });
   }), () => {
-    let { id: e2, name: n2, value: L, form: D, ...R } = l2, K2 = { checked: i2.value }, x2 = { id: e2, ref: u2, role: "switch", type: g.value, tabIndex: 0, "aria-checked": i2.value, "aria-labelledby": t2 == null ? void 0 : t2.labelledby.value, "aria-describedby": t2 == null ? void 0 : t2.describedby.value, onClick: k2, onKeyup: C, onKeypress: E2 };
+    let { id: e2, name: n2, value: L, form: D, ...R } = l2, K2 = { checked: i2.value }, x2 = { id: e2, ref: u2, role: "switch", type: g2.value, tabIndex: 0, "aria-checked": i2.value, "aria-labelledby": t2 == null ? void 0 : t2.labelledby.value, "aria-describedby": t2 == null ? void 0 : t2.describedby.value, onClick: k2, onKeyup: C, onKeypress: E2 };
     return h$1(Fragment, [n2 != null && i2.value != null ? h$1(f$1, K$1({ features: a$1.Hidden, as: "input", type: "checkbox", hidden: true, readOnly: true, checked: i2.value, form: D, name: n2, value: L })) : null, H$2({ ourProps: x2, theirProps: { ...a2, ...T$2(R, ["modelValue", "defaultChecked"]) }, slot: K2, attrs: a2, slots: o$2, name: "Switch" })]);
   };
 } }), de = T, ce = E;
@@ -47567,8 +47653,8 @@ let j = Symbol("TabsSSRContext"), xe = defineComponent({ name: "TabGroup", emits
       let p2 = e2.slice(0, t2), G = [...e2.slice(t2), ...p2].find((W) => f2.includes(W));
       if (!G)
         return;
-      let B = (S2 = e2.indexOf(G)) != null ? S2 : r2.selectedIndex.value;
-      B === -1 && (B = r2.selectedIndex.value), l2.value = B, r2.tabs.value = e2, r2.panels.value = u2;
+      let B2 = (S2 = e2.indexOf(G)) != null ? S2 : r2.selectedIndex.value;
+      B2 === -1 && (B2 = r2.selectedIndex.value), l2.value = B2, r2.tabs.value = e2, r2.panels.value = u2;
     }
   }
   let r2 = { selectedIndex: computed(() => {
@@ -47710,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$l = /* @__PURE__ */ defineComponent({
+const _sfc_main$n = /* @__PURE__ */ defineComponent({
   __name: "VRadioDescription",
   props: {
     as: {
@@ -47729,7 +47815,7 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$k = /* @__PURE__ */ defineComponent({
+const _sfc_main$m = /* @__PURE__ */ defineComponent({
   __name: "VRadioGroup",
   props: {
     as: {
@@ -47797,7 +47883,7 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$j = /* @__PURE__ */ defineComponent({
+const _sfc_main$l = /* @__PURE__ */ defineComponent({
   __name: "VRadioItem",
   props: {
     value: {
@@ -47823,7 +47909,7 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$i = /* @__PURE__ */ defineComponent({
+const _sfc_main$k = /* @__PURE__ */ defineComponent({
   __name: "VRadioLabel",
   props: {
     as: {
@@ -47842,11 +47928,11 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$6 = {
+const _hoisted_1$8 = {
   key: 0,
   class: "sr-only"
 };
-const _sfc_main$h = /* @__PURE__ */ defineComponent({
+const _sfc_main$j = /* @__PURE__ */ defineComponent({
   __name: "VSwitch",
   props: {
     modelValue: {
@@ -47922,7 +48008,7 @@ const _sfc_main$h = /* @__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$6, [
+            _ctx.$slots.default ? (openBlock(), createElementBlock("span", _hoisted_1$8, [
               renderSlot(_ctx.$slots, "default")
             ])) : createCommentVNode("", true),
             createElementVNode("div", {
@@ -47935,7 +48021,7 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$g = /* @__PURE__ */ defineComponent({
+const _sfc_main$i = /* @__PURE__ */ defineComponent({
   __name: "VSwitchDescription",
   props: {
     as: {
@@ -47954,7 +48040,7 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$f = /* @__PURE__ */ defineComponent({
+const _sfc_main$h = /* @__PURE__ */ defineComponent({
   __name: "VSwitchGroup",
   props: {
     as: {
@@ -47973,7 +48059,7 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$e = /* @__PURE__ */ defineComponent({
+const _sfc_main$g = /* @__PURE__ */ defineComponent({
   __name: "VSwitchLabel",
   props: {
     as: {
@@ -48118,8 +48204,8 @@ const useDarkMode = () => {
     MODE
   };
 };
-const _hoisted_1$5 = ["aria-labelledby", "aria-describedby"];
-const _sfc_main$d = /* @__PURE__ */ defineComponent({
+const _hoisted_1$7 = ["aria-labelledby", "aria-describedby"];
+const _sfc_main$f = /* @__PURE__ */ defineComponent({
   __name: "VDrawer",
   props: {
     regionBackdrop: {
@@ -48183,7 +48269,7 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
               "aria-describedby": unref(describedby)
             }, [
               renderSlot(_ctx.$slots, "default")
-            ], 10, _hoisted_1$5)) : createCommentVNode("", true)
+            ], 10, _hoisted_1$7)) : createCommentVNode("", true)
           ]),
           _: 3
         }, 8, ["name"]),
@@ -48207,59 +48293,59 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
   }
 });
 var VPreview_vue_vue_type_style_index_0_scoped_true_lang = "";
-const _withScopeId$1 = (n2) => (pushScopeId("data-v-0d055d3d"), n2 = n2(), popScopeId(), n2);
-const _hoisted_1$4 = { class: "vuetiful-previewer overflow-hidden shadow-2xl shadow-surface-500/10 rounded-container-token dark:shadow-black/10" };
-const _hoisted_2$3 = { class: "flex items-center gap-2" };
-const _hoisted_3$2 = /* @__PURE__ */ _withScopeId$1(() => /* @__PURE__ */ createElementVNode("svg", {
+const _withScopeId$2 = (n2) => (pushScopeId("data-v-0d055d3d"), n2 = n2(), popScopeId(), n2);
+const _hoisted_1$6 = { class: "vuetiful-previewer overflow-hidden shadow-2xl shadow-surface-500/10 rounded-container-token dark:shadow-black/10" };
+const _hoisted_2$4 = { class: "flex items-center gap-2" };
+const _hoisted_3$3 = /* @__PURE__ */ _withScopeId$2(() => /* @__PURE__ */ createElementVNode("svg", {
   class: "icon",
   xmlns: "http://www.w3.org/2000/svg",
   viewBox: "0 0 576 512"
 }, [
   /* @__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$1 = /* @__PURE__ */ _withScopeId$1(() => /* @__PURE__ */ createElementVNode("svg", {
+const _hoisted_4$1 = /* @__PURE__ */ _withScopeId$2(() => /* @__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$1 = /* @__PURE__ */ _withScopeId$1(() => /* @__PURE__ */ createElementVNode("svg", {
+const _hoisted_5$1 = /* @__PURE__ */ _withScopeId$2(() => /* @__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$1 = /* @__PURE__ */ _withScopeId$1(() => /* @__PURE__ */ createElementVNode("svg", {
+const _hoisted_6$1 = /* @__PURE__ */ _withScopeId$2(() => /* @__PURE__ */ createElementVNode("svg", {
   class: "icon",
   xmlns: "http://www.w3.org/2000/svg",
   viewBox: "0 0 576 512"
 }, [
   /* @__PURE__ */ createElementVNode("path", { d: "M64 0C28.7 0 0 28.7 0 64V352c0 35.3 28.7 64 64 64H240l-10.7 32H160c-17.7 0-32 14.3-32 32s14.3 32 32 32H416c17.7 0 32-14.3 32-32s-14.3-32-32-32H346.7L336 416H512c35.3 0 64-28.7 64-64V64c0-35.3-28.7-64-64-64H64zM512 64V352H64V64H512z" })
 ], -1));
-const _hoisted_7 = /* @__PURE__ */ _withScopeId$1(() => /* @__PURE__ */ createElementVNode("svg", {
+const _hoisted_7 = /* @__PURE__ */ _withScopeId$2(() => /* @__PURE__ */ createElementVNode("svg", {
   class: "icon",
   xmlns: "http://www.w3.org/2000/svg",
   viewBox: "0 0 512 512"
 }, [
   /* @__PURE__ */ createElementVNode("path", { d: "M0 32C0 14.3 14.3 0 32 0H160c17.7 0 32 14.3 32 32V416c0 53-43 96-96 96s-96-43-96-96V32zM223.6 425.9c.3-3.3 .4-6.6 .4-9.9V154l75.4-75.4c12.5-12.5 32.8-12.5 45.3 0l90.5 90.5c12.5 12.5 12.5 32.8 0 45.3L223.6 425.9zM182.8 512l192-192H480c17.7 0 32 14.3 32 32V480c0 17.7-14.3 32-32 32H182.8zM128 64H64v64h64V64zM64 192v64h64V192H64zM96 440a24 24 0 1 0 0-48 24 24 0 1 0 0 48z" })
 ], -1));
-const _hoisted_8 = /* @__PURE__ */ _withScopeId$1(() => /* @__PURE__ */ createElementVNode("svg", {
+const _hoisted_8 = /* @__PURE__ */ _withScopeId$2(() => /* @__PURE__ */ createElementVNode("svg", {
   class: "icon",
   xmlns: "http://www.w3.org/2000/svg",
   viewBox: "0 0 512 512"
 }, [
   /* @__PURE__ */ createElementVNode("path", { d: "M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM175 175c9.4-9.4 24.6-9.4 33.9 0l47 47 47-47c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9l-47 47 47 47c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0l-47-47-47 47c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l47-47-47-47c-9.4-9.4-9.4-24.6 0-33.9z" })
 ], -1));
-const _hoisted_9 = /* @__PURE__ */ _withScopeId$1(() => /* @__PURE__ */ createElementVNode("svg", {
+const _hoisted_9 = /* @__PURE__ */ _withScopeId$2(() => /* @__PURE__ */ createElementVNode("svg", {
   class: "icon",
   xmlns: "http://www.w3.org/2000/svg",
   viewBox: "0 0 512 512"
 }, [
   /* @__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$c = /* @__PURE__ */ defineComponent({
+const _sfc_main$e = /* @__PURE__ */ defineComponent({
   __name: "VPreview",
   props: {
     hideMobileToggle: {
@@ -48315,29 +48401,29 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
     const swatches = ref(false);
     const toggleSwatches = () => swatches.value = !swatches.value;
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$4, [
+      return openBlock(), createElementBlock("div", _hoisted_1$6, [
         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$3, [
-            createVNode(unref(_sfc_main$k), {
+          createElementVNode("div", _hoisted_2$4, [
+            createVNode(unref(_sfc_main$m), {
               modelValue: tabView.value,
               "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => tabView.value = $event)
             }, {
               default: withCtx(() => [
-                createVNode(unref(_sfc_main$j), {
+                createVNode(unref(_sfc_main$l), {
                   "data-test": "radio-item-preview",
                   value: "preview",
                   title: "Preview"
                 }, {
                   default: withCtx(() => [
                     renderSlot(_ctx.$slots, "preview-item", {}, () => [
-                      _hoisted_3$2
+                      _hoisted_3$3
                     ], true)
                   ]),
                   _: 3
                 }),
-                createVNode(unref(_sfc_main$j), {
+                createVNode(unref(_sfc_main$l), {
                   "data-test": "radio-item-code",
                   value: "code",
                   title: "Code"
@@ -48352,14 +48438,14 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
               ]),
               _: 3
             }, 8, ["modelValue"]),
-            !__props.hideMobileToggle && tabView.value === "preview" ? (openBlock(), createBlock(unref(_sfc_main$k), {
+            !__props.hideMobileToggle && tabView.value === "preview" ? (openBlock(), createBlock(unref(_sfc_main$m), {
               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$j), {
+                createVNode(unref(_sfc_main$l), {
                   "data-test": "radio-item-mobile",
                   value: "mobile"
                 }, {
@@ -48370,7 +48456,7 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
                   ]),
                   _: 3
                 }),
-                createVNode(unref(_sfc_main$j), { value: "full" }, {
+                createVNode(unref(_sfc_main$l), { value: "full" }, {
                   default: withCtx(() => [
                     renderSlot(_ctx.$slots, "desktop-item", {}, () => [
                       _hoisted_6$1
@@ -48382,7 +48468,7 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
               _: 3
             }, 8, ["modelValue"])) : createCommentVNode("", true)
           ]),
-          !__props.hideSwatches ? (openBlock(), createBlock(unref(_sfc_main$p), {
+          !__props.hideSwatches ? (openBlock(), createBlock(unref(_sfc_main$r), {
             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`),
@@ -48397,7 +48483,7 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
             _: 3
           }, 8, ["class"])) : createCommentVNode("", true)
         ], 2),
-        swatches.value ? (openBlock(), createBlock(unref(_sfc_main$k), {
+        swatches.value ? (openBlock(), createBlock(unref(_sfc_main$m), {
           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`),
@@ -48408,7 +48494,7 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
         }, {
           default: withCtx(() => [
             (openBlock(true), createElementBlock(Fragment, null, renderList(Object.entries(backgrounds), ([key, value], index2) => {
-              return openBlock(), createBlock(unref(_sfc_main$j), {
+              return openBlock(), createBlock(unref(_sfc_main$l), {
                 value: key,
                 key: index2,
                 class: normalizeClass(`${value} flex aspect-square cursor-pointer items-center justify-center rounded ring-[1px] ring-surface-500/50`),
@@ -48461,9 +48547,9 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
     };
   }
 });
-var VPreview = /* @__PURE__ */ _export_sfc(_sfc_main$c, [["__scopeId", "data-v-0d055d3d"]]);
-const _hoisted_1$3 = { class: "v-rail grid h-full w-[70px] grid-rows-[auto_1fr_auto] gap-0 overflow-y-auto sm:w-20" };
-const _sfc_main$b = /* @__PURE__ */ defineComponent({
+var VPreview = /* @__PURE__ */ _export_sfc(_sfc_main$e, [["__scopeId", "data-v-0d055d3d"]]);
+const _hoisted_1$5 = { class: "v-rail grid h-full w-[70px] grid-rows-[auto_1fr_auto] gap-0 overflow-y-auto sm:w-20" };
+const _sfc_main$d = /* @__PURE__ */ defineComponent({
   __name: "VRail",
   props: {
     active: {
@@ -48492,7 +48578,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
     provide("active", props.active);
     provide("hover", props.hover);
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$3, [
+      return openBlock(), createElementBlock("div", _hoisted_1$5, [
         createElementVNode("div", {
           class: normalizeClass(["v-bar-lead", __props.regionLead])
         }, [
@@ -48512,7 +48598,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$a = /* @__PURE__ */ defineComponent({
+const _sfc_main$c = /* @__PURE__ */ defineComponent({
   __name: "VRailTile",
   props: {
     value: {
@@ -48588,9 +48674,9 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$2 = { class: "vuetiful-shell flex h-full w-full flex-col overflow-hidden" };
-const _hoisted_2$2 = { class: "vuetiful-shell-content flex h-full w-full flex-auto overflow-hidden" };
-const _sfc_main$9 = defineComponent({
+const _hoisted_1$4 = { class: "vuetiful-shell flex h-full w-full flex-col overflow-hidden" };
+const _hoisted_2$3 = { class: "vuetiful-shell-content flex h-full w-full flex-auto overflow-hidden" };
+const _sfc_main$b = defineComponent({
   __name: "VShell",
   props: {
     regionPage: { type: String, default: "" },
@@ -48605,14 +48691,14 @@ const _sfc_main$9 = defineComponent({
   setup(__props) {
     return (_ctx, _cache) => {
       var _a;
-      return openBlock(), createElementBlock("div", _hoisted_1$2, [
+      return openBlock(), createElementBlock("div", _hoisted_1$4, [
         _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$2, [
+        createElementVNode("div", _hoisted_2$3, [
           _ctx.$slots.sidebarLeft ? (openBlock(), createElementBlock("aside", {
             key: 0,
             class: normalizeClass(`vuetiful-sidebar-left overflow-y-auto overflow-x-hidden ${__props.slotSidebarLeft}`)
@@ -48659,23 +48745,23 @@ const _sfc_main$9 = defineComponent({
   }
 });
 var VListboxButton_vue_vue_type_style_index_0_scoped_true_lang = "";
-const _withScopeId = (n2) => (pushScopeId("data-v-85546624"), n2 = n2(), popScopeId(), n2);
-const _hoisted_1$1 = { key: 0 };
-const _hoisted_2$1 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createElementVNode("svg", {
+const _withScopeId$1 = (n2) => (pushScopeId("data-v-85546624"), n2 = n2(), popScopeId(), n2);
+const _hoisted_1$3 = { key: 0 };
+const _hoisted_2$2 = /* @__PURE__ */ _withScopeId$1(() => /* @__PURE__ */ createElementVNode("svg", {
   class: "icon",
   xmlns: "http://www.w3.org/2000/svg",
   viewBox: "0 0 512 512"
 }, [
   /* @__PURE__ */ createElementVNode("path", { d: "M233.4 406.6c12.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 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z" })
 ], -1));
-const _hoisted_3$1 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createElementVNode("svg", {
+const _hoisted_3$2 = /* @__PURE__ */ _withScopeId$1(() => /* @__PURE__ */ createElementVNode("svg", {
   class: "icon",
   xmlns: "http://www.w3.org/2000/svg",
   viewBox: "0 0 512 512"
 }, [
   /* @__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$8 = /* @__PURE__ */ defineComponent({
+const _sfc_main$a = /* @__PURE__ */ defineComponent({
   __name: "VListboxButton",
   props: {
     as: {
@@ -48695,12 +48781,12 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
       }, {
         default: withCtx(({ open }) => [
           renderSlot(_ctx.$slots, "default", {}, void 0, true),
-          !__props.hideIcon ? (openBlock(), createElementBlock("span", _hoisted_1$1, [
+          !__props.hideIcon ? (openBlock(), createElementBlock("span", _hoisted_1$3, [
             !open ? renderSlot(_ctx.$slots, "open-icon", { key: 0 }, () => [
-              _hoisted_2$1
+              _hoisted_2$2
             ], true) : createCommentVNode("", true),
             open ? renderSlot(_ctx.$slots, "close-icon", { key: 1 }, () => [
-              _hoisted_3$1
+              _hoisted_3$2
             ], true) : createCommentVNode("", true)
           ])) : createCommentVNode("", true)
         ]),
@@ -48709,8 +48795,8 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-var VListboxButton = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["__scopeId", "data-v-85546624"]]);
-const _sfc_main$7 = /* @__PURE__ */ defineComponent({
+var VListboxButton = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["__scopeId", "data-v-85546624"]]);
+const _sfc_main$9 = /* @__PURE__ */ defineComponent({
   __name: "VListboxItems",
   props: {
     as: {
@@ -48745,7 +48831,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$6 = /* @__PURE__ */ defineComponent({
+const _sfc_main$8 = /* @__PURE__ */ defineComponent({
   __name: "VListboxLabel",
   props: {
     as: {
@@ -48764,7 +48850,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$5 = /* @__PURE__ */ defineComponent({
+const _sfc_main$7 = /* @__PURE__ */ defineComponent({
   __name: "VListbox",
   props: {
     by: {
@@ -48857,7 +48943,7 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
         "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => parentModelValue.value = $event)
       }, {
         default: withCtx(() => [
-          __props.labelText ? (openBlock(), createBlock(_sfc_main$6, {
+          __props.labelText ? (openBlock(), createBlock(_sfc_main$8, {
             key: 0,
             class: normalizeClass(__props.labelClasses)
           }, {
@@ -48881,7 +48967,7 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
             "leave-to-class": "opacity-0"
           }, {
             default: withCtx(() => [
-              createVNode(_sfc_main$7, { class: "absolute mt-1 min-w-full" }, {
+              createVNode(_sfc_main$9, { class: "absolute mt-1 min-w-full" }, {
                 default: withCtx(() => [
                   renderSlot(_ctx.$slots, "default")
                 ]),
@@ -48896,7 +48982,7 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$4 = /* @__PURE__ */ defineComponent({
+const _sfc_main$6 = /* @__PURE__ */ defineComponent({
   __name: "VListboxItem",
   props: {
     value: {
@@ -48922,7 +49008,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$3 = /* @__PURE__ */ defineComponent({
+const _sfc_main$5 = /* @__PURE__ */ defineComponent({
   __name: "VTab",
   props: {
     disabled: {
@@ -48962,7 +49048,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$2 = /* @__PURE__ */ defineComponent({
+const _sfc_main$4 = /* @__PURE__ */ defineComponent({
   __name: "VTabPanel",
   setup(__props) {
     return (_ctx, _cache) => {
@@ -48975,7 +49061,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+const _sfc_main$3 = /* @__PURE__ */ defineComponent({
   __name: "VTabs",
   props: {
     hideSeparator: {
@@ -49059,43 +49145,136 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     };
   }
 });
+const _hoisted_1$2 = { class: "vuetiful-accordion flex w-full flex-col gap-1" };
+const _sfc_main$2 = /* @__PURE__ */ defineComponent({
+  __name: "VAccordion",
+  props: {
+    hover: {
+      type: String,
+      default: "hover:variant-soft"
+    },
+    background: {
+      type: String,
+      default: "bg-surface-200-700-token"
+    }
+  },
+  setup(__props) {
+    const props = __props;
+    provide("hover", props.hover);
+    provide("background", props.background);
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1$2, [
+        renderSlot(_ctx.$slots, "default")
+      ]);
+    };
+  }
+});
+var VAccordionItem_vue_vue_type_style_index_0_scoped_true_lang = "";
+const _withScopeId = (n2) => (pushScopeId("data-v-75f8b8b4"), n2 = n2(), popScopeId(), n2);
+const _hoisted_1$1 = { class: "vuetiful-accordion-title" };
+const _hoisted_2$1 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createElementVNode("svg", {
+  class: "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$1 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createElementVNode("svg", {
+  class: "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$1 = /* @__PURE__ */ defineComponent({
+  __name: "VAccordionItem",
+  props: {
+    title: {
+      type: String,
+      required: true
+    }
+  },
+  setup(__props) {
+    const hover = inject("hover");
+    const background = inject("background");
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(Q), {
+        class: "vuetiful-accordion-item",
+        as: "div"
+      }, {
+        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"])
+          }, {
+            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$1, toDisplayString(__props.title), 1),
+                !open ? renderSlot(_ctx.$slots, "open-item", { key: 0 }, () => [
+                  _hoisted_2$1
+                ], true) : createCommentVNode("", true),
+                open ? renderSlot(_ctx.$slots, "close-item", { key: 1 }, () => [
+                  _hoisted_3$1
+                ], true) : createCommentVNode("", true)
+              ], 2)
+            ]),
+            _: 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` : ""}`])
+          }, {
+            default: withCtx(() => [
+              renderSlot(_ctx.$slots, "default", {}, void 0, true)
+            ]),
+            _: 2
+          }, 1032, ["class"])
+        ]),
+        _: 3
+      });
+    };
+  }
+});
+var VAccordionItem = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-75f8b8b4"]]);
 var components = /* @__PURE__ */ Object.freeze({
   __proto__: null,
   [Symbol.toStringTag]: "Module",
-  VAvatar: _sfc_main$r,
-  VButton: _sfc_main$p,
+  VAvatar: _sfc_main$t,
+  VButton: _sfc_main$r,
   VBadge,
   VChip,
-  VCodeBlock: _sfc_main$n,
+  VCodeBlock: _sfc_main$p,
   VLightSwitch,
-  VRadioGroup: _sfc_main$k,
-  VRadioItem: _sfc_main$j,
-  VRadioLabel: _sfc_main$i,
-  VRadioDescription: _sfc_main$l,
-  VSwitchGroup: _sfc_main$f,
-  VSwitchLabel: _sfc_main$e,
-  VSwitchDescription: _sfc_main$g,
-  VSwitch: _sfc_main$h,
-  VDrawer: _sfc_main$d,
-  VListbox: _sfc_main$5,
+  VRadioGroup: _sfc_main$m,
+  VRadioItem: _sfc_main$l,
+  VRadioLabel: _sfc_main$k,
+  VRadioDescription: _sfc_main$n,
+  VSwitchGroup: _sfc_main$h,
+  VSwitchLabel: _sfc_main$g,
+  VSwitchDescription: _sfc_main$i,
+  VSwitch: _sfc_main$j,
+  VAccordion: _sfc_main$2,
+  VAccordionItem,
+  VDrawer: _sfc_main$f,
+  VListbox: _sfc_main$7,
   VListboxButton,
-  VListboxItem: _sfc_main$4,
-  VListboxItems: _sfc_main$7,
-  VListboxLabel: _sfc_main$6,
+  VListboxItem: _sfc_main$6,
+  VListboxItems: _sfc_main$9,
+  VListboxLabel: _sfc_main$8,
   VPreview,
-  VRail: _sfc_main$b,
-  VRailTile: _sfc_main$a,
-  VShell: _sfc_main$9,
-  VTab: _sfc_main$3,
-  VTabPanel: _sfc_main$2,
-  VTabs: _sfc_main$1
+  VRail: _sfc_main$d,
+  VRailTile: _sfc_main$c,
+  VShell: _sfc_main$b,
+  VTab: _sfc_main$5,
+  VTabPanel: _sfc_main$4,
+  VTabs: _sfc_main$3
 });
 var main = "";
 var tailwind = "";
 const _sfc_main = defineComponent({
   components: {
     VLightSwitch,
-    VButton: _sfc_main$p
+    VButton: _sfc_main$r
   },
   props: {
     bgLight: {
@@ -49335,4 +49514,4 @@ function install(app) {
   }
 }
 var index = { install };
-export { themeSwitcher as ThemeSwitcher, _sfc_main$r as VAvatar, VBadge, _sfc_main$p as VButton, VChip, _sfc_main$n as VCodeBlock, _sfc_main$d as VDrawer, VLightSwitch, _sfc_main$5 as VListbox, VListboxButton, _sfc_main$4 as VListboxItem, _sfc_main$7 as VListboxItems, _sfc_main$6 as VListboxLabel, VPreview, _sfc_main$l as VRadioDescription, _sfc_main$k as VRadioGroup, _sfc_main$j as VRadioItem, _sfc_main$i as VRadioLabel, _sfc_main$b as VRail, _sfc_main$a as VRailTile, _sfc_main$9 as VShell, _sfc_main$h as VSwitch, _sfc_main$g as VSwitchDescription, _sfc_main$f as VSwitchGroup, _sfc_main$e as VSwitchLabel, _sfc_main$3 as VTab, _sfc_main$2 as VTabPanel, _sfc_main$1 as VTabs, index as default, useDarkMode, useDrawer, useHighlight, useRail, useTheme, clipboard as vClipboard };
+export { themeSwitcher as ThemeSwitcher, _sfc_main$2 as VAccordion, VAccordionItem, _sfc_main$t as VAvatar, VBadge, _sfc_main$r as VButton, VChip, _sfc_main$p as VCodeBlock, _sfc_main$f as VDrawer, VLightSwitch, _sfc_main$7 as VListbox, VListboxButton, _sfc_main$6 as VListboxItem, _sfc_main$9 as VListboxItems, _sfc_main$8 as VListboxLabel, VPreview, _sfc_main$n as VRadioDescription, _sfc_main$m as VRadioGroup, _sfc_main$l as VRadioItem, _sfc_main$k as VRadioLabel, _sfc_main$d as VRail, _sfc_main$c as VRailTile, _sfc_main$b as VShell, _sfc_main$j as VSwitch, _sfc_main$i as VSwitchDescription, _sfc_main$h as VSwitchGroup, _sfc_main$g as VSwitchLabel, _sfc_main$5 as VTab, _sfc_main$4 as VTabPanel, _sfc_main$3 as VTabs, index as default, useDarkMode, useDrawer, useHighlight, useRail, useTheme, clipboard as vClipboard };