@code-coaching/vuetiful 0.16.6 → 0.18.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, watchEffect, provide, onUnmounted, inject, toRaw, watch, createCommentVNode, reactive, readonly, toRefs, createVNode, Transition, mergeProps, renderList, pushScopeId, popScopeId, resolveComponent } from "vue";
-const _hoisted_1$a = ["src", "alt"];
-const _hoisted_2$5 = {
+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 = {
   key: 1,
   class: "avatar-initials h-full w-full",
   viewBox: "0 0 512 512"
 };
-const _sfc_main$j = /* @__PURE__ */ defineComponent({
+const _sfc_main$r = /* @__PURE__ */ defineComponent({
   __name: "VAvatar",
   props: {
     initials: { type: String, default: "" },
@@ -39,7 +39,7 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
           src: imgSrc.value,
           alt: __props.alt,
           onError: _cache[0] || (_cache[0] = () => imgSrc.value = __props.fallback)
-        }, null, 40, _hoisted_1$a)) : (openBlock(), createElementBlock("svg", _hoisted_2$5, [
+        }, null, 40, _hoisted_1$b)) : (openBlock(), createElementBlock("svg", _hoisted_2$6, [
           createElementVNode("text", {
             x: "50%",
             y: "50%",
@@ -61,17 +61,17 @@ var _export_sfc = (sfc, props) => {
   }
   return target;
 };
-const _sfc_main$i = {};
-const _hoisted_1$9 = {
+const _sfc_main$q = {};
+const _hoisted_1$a = {
   class: /* @__PURE__ */ normalizeClass(`vuetiful-badge badge`)
 };
 function _sfc_render$3(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", _hoisted_1$9, [
+  return openBlock(), createElementBlock("div", _hoisted_1$a, [
     renderSlot(_ctx.$slots, "default")
   ]);
 }
-var VBadge = /* @__PURE__ */ _export_sfc(_sfc_main$i, [["render", _sfc_render$3]]);
-const _sfc_main$h = /* @__PURE__ */ defineComponent({
+var VBadge = /* @__PURE__ */ _export_sfc(_sfc_main$q, [["render", _sfc_render$3]]);
+const _sfc_main$p = /* @__PURE__ */ defineComponent({
   __name: "VButton",
   props: {
     icon: {
@@ -121,16 +121,16 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$g = {};
-const _hoisted_1$8 = {
+const _sfc_main$o = {};
+const _hoisted_1$9 = {
   class: /* @__PURE__ */ normalizeClass(`vuetiful-chip chip`)
 };
 function _sfc_render$2(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", _hoisted_1$8, [
+  return openBlock(), createElementBlock("div", _hoisted_1$9, [
     renderSlot(_ctx.$slots, "default")
   ]);
 }
-var VChip = /* @__PURE__ */ _export_sfc(_sfc_main$g, [["render", _sfc_render$2]]);
+var VChip = /* @__PURE__ */ _export_sfc(_sfc_main$o, [["render", _sfc_render$2]]);
 var deepFreezeEs6 = { exports: {} };
 function deepFreeze(obj) {
   if (obj instanceof Map) {
@@ -188,7 +188,7 @@ const scopeToCSSClass = (name, { prefix }) => {
     const pieces = name.split(".");
     return [
       `${prefix}${pieces.shift()}`,
-      ...pieces.map((x, i2) => `${x}${"_".repeat(i2 + 1)}`)
+      ...pieces.map((x2, i2) => `${x2}${"_".repeat(i2 + 1)}`)
     ].join(" ");
   }
   return `${prefix}${name}`;
@@ -339,7 +339,7 @@ function optional(re2) {
   return concat$2("(?:", re2, ")?");
 }
 function concat$2(...args) {
-  const joined = args.map((x) => source$2(x)).join("");
+  const joined = args.map((x2) => source$2(x2)).join("");
   return joined;
 }
 function stripOptionsFromArgs$2(args) {
@@ -353,7 +353,7 @@ function stripOptionsFromArgs$2(args) {
 }
 function either$2(...args) {
   const opts = stripOptionsFromArgs$2(args);
-  const joined = "(" + (opts.capture ? "" : "?:") + args.map((x) => source$2(x)).join("|") + ")";
+  const joined = "(" + (opts.capture ? "" : "?:") + args.map((x2) => source$2(x2)).join("|") + ")";
   return joined;
 }
 function countMatchGroups(re2) {
@@ -669,7 +669,7 @@ function compileKeywords(rawKeywords, caseInsensitive, scopeName = DEFAULT_KEYWO
   return compiledKeywords;
   function compileList(scopeName2, keywordList) {
     if (caseInsensitive) {
-      keywordList = keywordList.map((x) => x.toLowerCase());
+      keywordList = keywordList.map((x2) => x2.toLowerCase());
     }
     keywordList.forEach(function(keyword) {
       const pair = keyword.split("|");
@@ -5634,7 +5634,7 @@ function brainfuck(hljs2) {
   };
 }
 var brainfuck_1 = brainfuck;
-function c$2(hljs2) {
+function c$3(hljs2) {
   const regex = hljs2.regex;
   const C_LINE_COMMENT_MODE2 = hljs2.COMMENT("//", "$", { contains: [{ begin: /\\\n/ }] });
   const DECLTYPE_AUTO_RE = "decltype\\(auto\\)";
@@ -5897,7 +5897,7 @@ function c$2(hljs2) {
     }
   };
 }
-var c_1 = c$2;
+var c_1 = c$3;
 function cal(hljs2) {
   const regex = hljs2.regex;
   const KEYWORDS2 = [
@@ -9352,7 +9352,7 @@ function css(hljs2) {
   };
 }
 var css_1 = css;
-function d$3(hljs2) {
+function d$4(hljs2) {
   const D_KEYWORDS = {
     $pattern: hljs2.UNDERSCORE_IDENT_RE,
     keyword: "abstract alias align asm assert auto body break byte case cast catch class const continue debug default delete deprecated do else enum export extern final finally for foreach foreach_reverse|10 goto if immutable import in inout int interface invariant is lazy macro mixin module new nothrow out override package pragma private protected public pure ref return scope shared static struct super switch synchronized template this throw try typedef typeid typeof union unittest version void volatile while with __FILE__ __LINE__ __gshared|10 __thread __traits __DATE__ __EOF__ __TIME__ __TIMESTAMP__ __VENDOR__ __VERSION__",
@@ -9462,7 +9462,7 @@ function d$3(hljs2) {
     ]
   };
 }
-var d_1 = d$3;
+var d_1 = d$4;
 function markdown(hljs2) {
   const regex = hljs2.regex;
   const INLINE_HTML = {
@@ -10863,10 +10863,10 @@ function elixir(hljs2) {
   const LOWERCASE_SIGIL = {
     className: "string",
     begin: "~[a-z](?=" + SIGIL_DELIMITERS + ")",
-    contains: SIGIL_DELIMITER_MODES.map((x) => hljs2.inherit(
-      x,
+    contains: SIGIL_DELIMITER_MODES.map((x2) => hljs2.inherit(
+      x2,
       { contains: [
-        escapeSigilEnd(x.end),
+        escapeSigilEnd(x2.end),
         BACKSLASH_ESCAPE2,
         SUBST
       ] }
@@ -10875,9 +10875,9 @@ function elixir(hljs2) {
   const UPCASE_SIGIL = {
     className: "string",
     begin: "~[A-Z](?=" + SIGIL_DELIMITERS + ")",
-    contains: SIGIL_DELIMITER_MODES.map((x) => hljs2.inherit(
-      x,
-      { contains: [escapeSigilEnd(x.end)] }
+    contains: SIGIL_DELIMITER_MODES.map((x2) => hljs2.inherit(
+      x2,
+      { contains: [escapeSigilEnd(x2.end)] }
     ))
   };
   const REGEX_SIGIL = {
@@ -10885,12 +10885,12 @@ function elixir(hljs2) {
     variants: [
       {
         begin: "~r(?=" + SIGIL_DELIMITERS + ")",
-        contains: SIGIL_DELIMITER_MODES.map((x) => hljs2.inherit(
-          x,
+        contains: SIGIL_DELIMITER_MODES.map((x2) => hljs2.inherit(
+          x2,
           {
-            end: regex.concat(x.end, /[uismxfU]{0,7}/),
+            end: regex.concat(x2.end, /[uismxfU]{0,7}/),
             contains: [
-              escapeSigilEnd(x.end),
+              escapeSigilEnd(x2.end),
               BACKSLASH_ESCAPE2,
               SUBST
             ]
@@ -10900,11 +10900,11 @@ function elixir(hljs2) {
       {
         begin: "~R(?=" + SIGIL_DELIMITERS + ")",
         contains: SIGIL_DELIMITER_MODES.map(
-          (x) => hljs2.inherit(
-            x,
+          (x2) => hljs2.inherit(
+            x2,
             {
-              end: regex.concat(x.end, /[uismxfU]{0,7}/),
-              contains: [escapeSigilEnd(x.end)]
+              end: regex.concat(x2.end, /[uismxfU]{0,7}/),
+              contains: [escapeSigilEnd(x2.end)]
             }
           )
         )
@@ -11752,7 +11752,7 @@ function erlang(hljs2) {
         returnBegin: true,
         keywords: {
           $pattern: "-" + hljs2.IDENT_RE,
-          keyword: DIRECTIVES.map((x) => `${x}|1.5`).join(" ")
+          keyword: DIRECTIVES.map((x2) => `${x2}|1.5`).join(" ")
         },
         contains: [PARAMS]
       },
@@ -12966,7 +12966,7 @@ function lookahead$1(re2) {
   return concat$1("(?=", re2, ")");
 }
 function concat$1(...args) {
-  const joined = args.map((x) => source$1(x)).join("");
+  const joined = args.map((x2) => source$1(x2)).join("");
   return joined;
 }
 function stripOptionsFromArgs$1(args) {
@@ -12980,7 +12980,7 @@ function stripOptionsFromArgs$1(args) {
 }
 function either$1(...args) {
   const opts = stripOptionsFromArgs$1(args);
-  const joined = "(" + (opts.capture ? "" : "?:") + args.map((x) => source$1(x)).join("|") + ")";
+  const joined = "(" + (opts.capture ? "" : "?:") + args.map((x2) => source$1(x2)).join("|") + ")";
   return joined;
 }
 function fsharp(hljs2) {
@@ -34385,7 +34385,7 @@ function qml(hljs2) {
   };
 }
 var qml_1 = qml;
-function r$1(hljs2) {
+function r$2(hljs2) {
   const regex = hljs2.regex;
   const IDENT_RE2 = /(?:(?:[a-zA-Z]|\.[._a-zA-Z])[._a-zA-Z0-9]*)|\.(?!\d)/;
   const NUMBER_TYPES_RE = regex.either(
@@ -34564,7 +34564,7 @@ function r$1(hljs2) {
     ]
   };
 }
-var r_1 = r$1;
+var r_1 = r$2;
 function reasonml(hljs2) {
   function orReValues(ops) {
     return ops.map(function(op) {
@@ -40410,7 +40410,7 @@ function sql(hljs2) {
     illegal: /[{}]|<\//,
     keywords: {
       $pattern: /\b[\w\.]+/,
-      keyword: reduceRelevancy(KEYWORDS2, { when: (x) => x.length < 3 }),
+      keyword: reduceRelevancy(KEYWORDS2, { when: (x2) => x2.length < 3 }),
       literal: LITERALS2,
       type: TYPES2,
       built_in: POSSIBLE_WITHOUT_PARENS
@@ -41756,7 +41756,7 @@ function lookahead(re2) {
   return concat("(?=", re2, ")");
 }
 function concat(...args) {
-  const joined = args.map((x) => source(x)).join("");
+  const joined = args.map((x2) => source(x2)).join("");
   return joined;
 }
 function stripOptionsFromArgs(args) {
@@ -41770,7 +41770,7 @@ function stripOptionsFromArgs(args) {
 }
 function either(...args) {
   const opts = stripOptionsFromArgs(args);
-  const joined = "(" + (opts.capture ? "" : "?:") + args.map((x) => source(x)).join("|") + ")";
+  const joined = "(" + (opts.capture ? "" : "?:") + args.map((x2) => source(x2)).join("|") + ")";
   return joined;
 }
 const keywordWrapper = (keyword) => concat(
@@ -46471,12 +46471,12 @@ const useHighlight = () => {
   };
 };
 var githubDark = "";
-const _hoisted_1$7 = { class: "code-block max-w-full bg-neutral-900/90 text-sm text-white shadow rounded-container-token" };
-const _hoisted_2$4 = {
+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 = {
   class: /* @__PURE__ */ normalizeClass(`code-block-language`)
 };
-const _hoisted_3$2 = ["innerHTML"];
-const _sfc_main$f = /* @__PURE__ */ defineComponent({
+const _hoisted_3$3 = ["innerHTML"];
+const _sfc_main$n = /* @__PURE__ */ defineComponent({
   __name: "VCodeBlock",
   props: {
     language: {
@@ -46534,12 +46534,12 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
       emit("copy");
     }
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$7, [
+      return openBlock(), createElementBlock("div", _hoisted_1$8, [
         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$4, toDisplayString(languageFormatter(__props.language)), 1),
-          withDirectives((openBlock(), createBlock(unref(_sfc_main$h), {
+          createElementVNode("span", _hoisted_2$5, toDisplayString(languageFormatter(__props.language)), 1),
+          withDirectives((openBlock(), createBlock(unref(_sfc_main$p), {
             class: normalizeClass(`code-block-btn ${__props.buttonClass}`),
             onClick: _cache[0] || (_cache[0] = ($event) => onCopyClick())
           }, {
@@ -46557,13 +46557,13 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
           createElementVNode("code", {
             class: normalizeClass(`code-block-code language-${__props.language}`),
             innerHTML: unref(highlight2)(props.code, props.language)
-          }, null, 10, _hoisted_3$2)
+          }, null, 10, _hoisted_3$3)
         ], 2)
       ]);
     };
   }
 });
-const _sfc_main$e = defineComponent({
+const _sfc_main$m = defineComponent({
   props: {
     bgLight: {
       type: String,
@@ -46654,8 +46654,8 @@ const _sfc_main$e = defineComponent({
     };
   }
 });
-const _hoisted_1$6 = ["aria-checked", "title"];
-const _hoisted_2$3 = ["d"];
+const _hoisted_1$7 = ["aria-checked", "title"];
+const _hoisted_2$4 = ["d"];
 function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("div", {
     class: normalizeClass(`lightswitch-track ${_ctx.classesTrack}`),
@@ -46680,39 +46680,39 @@ 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$3)
+        }, null, 8, _hoisted_2$4)
       ], 2))
     ], 2)
-  ], 42, _hoisted_1$6);
+  ], 42, _hoisted_1$7);
 }
-var VLightSwitch = /* @__PURE__ */ _export_sfc(_sfc_main$e, [["render", _sfc_render$1]]);
-function u(r2, n2, ...a2) {
+var VLightSwitch = /* @__PURE__ */ _export_sfc(_sfc_main$m, [["render", _sfc_render$1]]);
+function u$2(r2, n2, ...a2) {
   if (r2 in n2) {
     let e2 = n2[r2];
     return typeof e2 == "function" ? e2(...a2) : e2;
   }
   let t2 = new Error(`Tried to handle "${r2}" but there is no handler defined. Only defined handlers are: ${Object.keys(n2).map((e2) => `"${e2}"`).join(", ")}.`);
-  throw Error.captureStackTrace && Error.captureStackTrace(t2, u), t2;
+  throw Error.captureStackTrace && Error.captureStackTrace(t2, u$2), t2;
 }
 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$1(o2, e2), l = Object.assign(i2, { props: n2 });
+  let n2 = j$3(o2, e2), l2 = Object.assign(i2, { props: n2 });
   if (r2 || t2 & 2 && n2.static)
-    return y$1(l);
+    return y$2(l2);
   if (t2 & 1) {
     let d2 = (a2 = n2.unmount) == null || a2 ? 0 : 1;
-    return u(d2, { [0]() {
+    return u$2(d2, { [0]() {
       return null;
     }, [1]() {
-      return y$1({ ...i2, props: { ...n2, hidden: true, style: { display: "none" } } });
+      return y$2({ ...i2, props: { ...n2, hidden: true, style: { display: "none" } } });
     } });
   }
-  return y$1(l);
+  return y$2(l2);
 }
-function y$1({ props: r2, attrs: t2, slots: e2, slot: o2, name: i2 }) {
+function y$2({ props: r2, attrs: t2, slots: e2, slot: o2, name: i2 }) {
   var m2, h2;
-  let { as: n2, ...l } = T$2(r2, ["unmount", "static"]), a2 = (m2 = e2.default) == null ? void 0 : m2.call(e2, o2), d2 = {};
+  let { as: n2, ...l2 } = T$2(r2, ["unmount", "static"]), a2 = (m2 = e2.default) == null ? void 0 : m2.call(e2, o2), d2 = {};
   if (o2) {
     let u2 = false, c2 = [];
     for (let [p2, f2] of Object.entries(o2))
@@ -46720,26 +46720,26 @@ function y$1({ props: r2, attrs: t2, slots: e2, slot: o2, name: i2 }) {
     u2 && (d2["data-headlessui-state"] = c2.join(" "));
   }
   if (n2 === "template") {
-    if (a2 = b$2(a2 != null ? a2 : []), Object.keys(l).length > 0 || Object.keys(t2).length > 0) {
+    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(l).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, g, R) => R.indexOf(s2) === g).sort((s2, g) => s2.localeCompare(g)).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$1((h2 = u2.props) != null ? h2 : {}, l), f2 = cloneVNode(u2, p2);
+      let p2 = j$3((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;
     }
     return Array.isArray(a2) && a2.length === 1 ? a2[0] : a2;
   }
-  return h$1(n2, Object.assign({}, l, d2), { default: () => a2 });
+  return h$1(n2, Object.assign({}, l2, d2), { default: () => a2 });
 }
 function b$2(r2) {
   return r2.flatMap((t2) => t2.type === Fragment ? b$2(t2.children) : [t2]);
 }
-function j$1(...r2) {
+function j$3(...r2) {
   if (r2.length === 0)
     return {};
   if (r2.length === 1)
@@ -46751,12 +46751,12 @@ function j$1(...r2) {
   if (t2.disabled || t2["aria-disabled"])
     return Object.assign(t2, Object.fromEntries(Object.keys(e2).map((i2) => [i2, void 0])));
   for (let i2 in e2)
-    Object.assign(t2, { [i2](n2, ...l) {
+    Object.assign(t2, { [i2](n2, ...l2) {
       let a2 = e2[i2];
       for (let d2 of a2) {
         if (n2 instanceof Event && n2.defaultPrevented)
           return;
-        d2(n2, ...l);
+        d2(n2, ...l2);
       }
     } });
   return t2;
@@ -46777,18 +46777,58 @@ function v(r2) {
   return r2 == null ? false : typeof r2.type == "string" || typeof r2.type == "object" || typeof r2.type == "function";
 }
 let e$1 = 0;
-function n$1() {
+function n$2() {
   return ++e$1;
 }
-function t() {
-  return n$1();
+function t$1() {
+  return n$2();
 }
 var o$1 = ((r2) => (r2.Space = " ", r2.Enter = "Enter", r2.Escape = "Escape", r2.Backspace = "Backspace", r2.Delete = "Delete", r2.ArrowLeft = "ArrowLeft", r2.ArrowUp = "ArrowUp", r2.ArrowRight = "ArrowRight", r2.ArrowDown = "ArrowDown", r2.Home = "Home", r2.End = "End", r2.PageUp = "PageUp", r2.PageDown = "PageDown", r2.Tab = "Tab", r2))(o$1 || {});
+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) {
+  let t2 = n2.resolveItems();
+  if (t2.length <= 0)
+    return null;
+  let l2 = n2.resolveActiveIndex(), s2 = l2 != null ? l2 : -1, d2 = (() => {
+    switch (r2.focus) {
+      case 0:
+        return t2.findIndex((e2) => !n2.resolveDisabled(e2));
+      case 1: {
+        let e2 = t2.slice().reverse().findIndex((i2, c2, u2) => s2 !== -1 && u2.length - c2 - 1 >= s2 ? false : !n2.resolveDisabled(i2));
+        return e2 === -1 ? e2 : t2.length - 1 - e2;
+      }
+      case 2:
+        return t2.findIndex((e2, i2) => i2 <= s2 ? false : !n2.resolveDisabled(e2));
+      case 3: {
+        let e2 = t2.slice().reverse().findIndex((i2) => !n2.resolveDisabled(i2));
+        return e2 === -1 ? e2 : t2.length - 1 - e2;
+      }
+      case 4:
+        return t2.findIndex((e2) => n2.resolveId(e2) === r2.id);
+      case 5:
+        return null;
+      default:
+        f$2(r2);
+    }
+  })();
+  return d2 === -1 ? l2 : d2;
+}
 function o(n2) {
-  var l;
-  return n2 == null || n2.value == null ? null : (l = n2.value.$el) != null ? l : n2.value;
+  var l2;
+  return n2 == null || n2.value == null ? null : (l2 = n2.value.$el) != null ? l2 : n2.value;
 }
-function r(t2, e2) {
+let n$1 = Symbol("Context");
+var l = ((e2) => (e2[e2.Open = 1] = "Open", e2[e2.Closed = 2] = "Closed", e2[e2.Closing = 4] = "Closing", e2[e2.Opening = 8] = "Opening", e2))(l || {});
+function p$3() {
+  return inject(n$1, null);
+}
+function c$2(o2) {
+  provide(n$1, o2);
+}
+function r$1(t2, e2) {
   if (t2)
     return t2;
   let n2 = e2 != null ? e2 : "button";
@@ -46796,17 +46836,17 @@ function r(t2, e2) {
     return "button";
 }
 function b$1(t2, e2) {
-  let n2 = ref(r(t2.value.type, t2.value.as));
+  let n2 = ref(r$1(t2.value.type, t2.value.as));
   return onMounted(() => {
-    n2.value = r(t2.value.type, t2.value.as);
+    n2.value = r$1(t2.value.type, t2.value.as);
   }), watchEffect(() => {
     var o$12;
     n2.value || o(e2) && o(e2) instanceof HTMLButtonElement && !((o$12 = o(e2)) != null && o$12.hasAttribute("type")) && (n2.value = "button");
   }), n2;
 }
 var i = Object.defineProperty;
-var d$2 = (t2, e2, r2) => e2 in t2 ? i(t2, e2, { enumerable: true, configurable: true, writable: true, value: r2 }) : t2[e2] = r2;
-var n = (t2, e2, r2) => (d$2(t2, typeof e2 != "symbol" ? e2 + "" : e2, r2), r2);
+var d$3 = (t2, e2, r2) => e2 in t2 ? i(t2, e2, { enumerable: true, configurable: true, writable: true, value: r2 }) : t2[e2] = r2;
+var n = (t2, e2, r2) => (d$3(t2, typeof e2 != "symbol" ? e2 + "" : e2, r2), r2);
 class s$1 {
   constructor() {
     n(this, "current", this.detect());
@@ -46849,10 +46889,10 @@ function p$2({ container: e2, accept: t2, walk: d2, enabled: o2 }) {
     let r2 = e2.value;
     if (!r2 || o2 !== void 0 && !o2.value)
       return;
-    let l = m(e2);
-    if (!l)
+    let l2 = m(e2);
+    if (!l2)
       return;
-    let c2 = Object.assign((f2) => t2(f2), { acceptNode: t2 }), n2 = l.createTreeWalker(r2, NodeFilter.SHOW_ELEMENT, c2, false);
+    let c2 = Object.assign((f2) => t2(f2), { acceptNode: t2 }), n2 = l2.createTreeWalker(r2, NodeFilter.SHOW_ELEMENT, c2, false);
     for (; n2.nextNode(); )
       d2(n2.currentNode);
   });
@@ -46863,7 +46903,21 @@ function E$1(e2 = document.body) {
   return e2 == null ? [] : Array.from(e2.querySelectorAll(c)).sort((r2, t2) => Math.sign((r2.tabIndex || Number.MAX_SAFE_INTEGER) - (t2.tabIndex || Number.MAX_SAFE_INTEGER)));
 }
 var h = ((t2) => (t2[t2.Strict = 0] = "Strict", t2[t2.Loose = 1] = "Loose", t2))(h || {});
-var y = ((t2) => (t2[t2.Keyboard = 0] = "Keyboard", t2[t2.Mouse = 1] = "Mouse", t2))(y || {});
+function w(e2, r2 = 0) {
+  var t2;
+  return e2 === ((t2 = m(e2)) == null ? void 0 : t2.body) ? false : u$2(r2, { [0]() {
+    return e2.matches(c);
+  }, [1]() {
+    let l2 = e2;
+    for (; l2 !== null; ) {
+      if (l2.matches(c))
+        return true;
+      l2 = l2.parentElement;
+    }
+    return false;
+  } });
+}
+var y$1 = ((t2) => (t2[t2.Keyboard = 0] = "Keyboard", t2[t2.Mouse = 1] = "Mouse", t2))(y$1 || {});
 typeof window != "undefined" && typeof document != "undefined" && (document.addEventListener("keydown", (e2) => {
   e2.metaKey || e2.altKey || e2.ctrlKey || (document.documentElement.dataset.headlessuiFocusVisible = "");
 }, true), document.addEventListener("click", (e2) => {
@@ -46875,19 +46929,19 @@ function I(e2) {
   return (t2 = (r2 = e2 == null ? void 0 : e2.matches) == null ? void 0 : r2.call(e2, H$1)) != null ? t2 : false;
 }
 function O(e2, r2 = (t2) => t2) {
-  return e2.slice().sort((t2, l) => {
-    let o2 = r2(t2), i2 = r2(l);
+  return e2.slice().sort((t2, l2) => {
+    let o2 = r2(t2), i2 = r2(l2);
     if (o2 === null || i2 === null)
       return 0;
     let n2 = o2.compareDocumentPosition(i2);
     return n2 & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : n2 & Node.DOCUMENT_POSITION_PRECEDING ? 1 : 0;
   });
 }
-function P(e2, r2, { sorted: t2 = true, relativeTo: l = null, skipElements: o2 = [] } = {}) {
+function P(e2, r2, { sorted: t2 = true, relativeTo: l2 = null, skipElements: o2 = [] } = {}) {
   var m2;
   let i2 = (m2 = Array.isArray(e2) ? e2.length > 0 ? e2[0].ownerDocument : document : e2 == null ? void 0 : e2.ownerDocument) != null ? m2 : document, n2 = Array.isArray(e2) ? t2 ? O(e2) : e2 : E$1(e2);
-  o2.length > 0 && n2.length > 1 && (n2 = n2.filter((s2) => !o2.includes(s2))), l = l != null ? l : i2.activeElement;
-  let x = (() => {
+  o2.length > 0 && n2.length > 1 && (n2 = n2.filter((s2) => !o2.includes(s2))), l2 = l2 != null ? l2 : i2.activeElement;
+  let x2 = (() => {
     if (r2 & 5)
       return 1;
     if (r2 & 10)
@@ -46897,9 +46951,9 @@ function P(e2, r2, { sorted: t2 = true, relativeTo: l = null, skipElements: o2 =
     if (r2 & 1)
       return 0;
     if (r2 & 2)
-      return Math.max(0, n2.indexOf(l)) - 1;
+      return Math.max(0, n2.indexOf(l2)) - 1;
     if (r2 & 4)
-      return Math.max(0, n2.indexOf(l)) + 1;
+      return Math.max(0, n2.indexOf(l2)) + 1;
     if (r2 & 8)
       return n2.length - 1;
     throw new Error("Missing Focus.First, Focus.Previous, Focus.Next or Focus.Last");
@@ -46916,10 +46970,42 @@ function P(e2, r2, { sorted: t2 = true, relativeTo: l = null, skipElements: o2 =
       if (s2 >= d2)
         return 1;
     }
-    u2 = n2[s2], u2 == null || u2.focus(L), a2 += x;
+    u2 = n2[s2], u2 == null || u2.focus(L), a2 += x2;
   } while (u2 !== i2.activeElement);
   return r2 & 6 && I(u2) && u2.select(), 2;
 }
+function u$1(e2, t2, n2) {
+  c$1.isServer || watchEffect((o2) => {
+    document.addEventListener(e2, t2, n2), o2(() => document.removeEventListener(e2, t2, n2));
+  });
+}
+function y(f2, m2, i2 = computed(() => true)) {
+  function a2(e2, u2) {
+    if (!i2.value || e2.defaultPrevented)
+      return;
+    let n2 = u2(e2);
+    if (n2 === null || !n2.getRootNode().contains(n2))
+      return;
+    let c2 = function o2(t2) {
+      return typeof t2 == "function" ? o2(t2()) : Array.isArray(t2) || t2 instanceof Set ? t2 : [t2];
+    }(f2);
+    for (let o$12 of c2) {
+      if (o$12 === null)
+        continue;
+      let t2 = o$12 instanceof HTMLElement ? o$12 : o(o$12);
+      if (t2 != null && t2.contains(n2) || e2.composed && e2.composedPath().includes(t2))
+        return;
+    }
+    return !w(n2, h.Loose) && n2.tabIndex !== -1 && e2.preventDefault(), m2(e2, n2);
+  }
+  let r2 = ref(null);
+  u$1("mousedown", (e2) => {
+    var u2, n2;
+    i2.value && (r2.value = ((n2 = (u2 = e2.composedPath) == null ? void 0 : u2.call(e2)) == null ? void 0 : n2[0]) || e2.target);
+  }, true), u$1("click", (e2) => {
+    r2.value && (a2(e2, () => r2.value), r2.value = null);
+  }, true), u$1("blur", (e2) => a2(e2, () => window.document.activeElement instanceof HTMLIFrameElement ? window.document.activeElement : null), true);
+}
 var a$1 = ((e2) => (e2[e2.None = 1] = "None", e2[e2.Focusable = 2] = "Focusable", e2[e2.Hidden = 4] = "Hidden", e2))(a$1 || {});
 let f$1 = defineComponent({ name: "Hidden", props: { as: { type: [Object, String], default: "div" }, features: { type: Number, default: 1 } }, setup(r2, { slots: t2, attrs: d2 }) {
   return () => {
@@ -46953,12 +47039,29 @@ function p$1(n2) {
       }
   }
 }
-function d$1(u2, e2, r2) {
+function d$2(u2, e2, r2) {
   let i2 = ref(r2 == null ? void 0 : r2.value), f2 = computed(() => u2.value !== void 0);
   return [computed(() => f2.value ? u2.value : i2.value), function(t2) {
     return f2.value || (i2.value = t2), e2 == null ? void 0 : e2(t2);
   }];
 }
+function r(e2) {
+  return [e2.screenX, e2.screenY];
+}
+function u() {
+  let e2 = ref([-1, -1]);
+  return { wasMoved(n2) {
+    let t2 = r(n2);
+    return e2.value[0] === t2[0] && e2.value[1] === t2[1] ? false : (e2.value = t2, true);
+  }, update(n2) {
+    e2.value = r(n2);
+  } };
+}
+function t(e2) {
+  typeof queueMicrotask == "function" ? queueMicrotask(e2) : Promise.resolve().then(e2).catch((o2) => setTimeout(() => {
+    throw o2;
+  }));
+}
 let p = Symbol("DescriptionContext");
 function b() {
   let t2 = inject(p, null);
@@ -46976,55 +47079,295 @@ function M({ slot: t2 = ref({}), name: i2 = "Description", props: o2 = {} } = {}
   }
   return provide(p, { register: s2, slot: t2, name: i2, props: o2 }), computed(() => e2.value.length > 0 ? e2.value.join(" ") : void 0);
 }
-let E = defineComponent({ name: "Description", props: { as: { type: [Object, String], default: "p" }, id: { type: String, default: () => `headlessui-description-${t()}` } }, setup(t2, { attrs: i2, slots: 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, ...l } = t2, c2 = { ...Object.entries(r2).reduce((f2, [a2, g]) => Object.assign(f2, { [a2]: unref(g) }), {}), id: d2 };
-    return H$2({ ourProps: c2, theirProps: l, slot: n2.value, attrs: i2, slots: o2, name: s2 });
+    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 };
+    return H$2({ ourProps: c2, theirProps: l2, slot: n2.value, attrs: i2, slots: o2, name: s2 });
+  };
+} });
+function de$1(t2, b2) {
+  return t2 === b2;
+}
+var fe = ((u2) => (u2[u2.Open = 0] = "Open", u2[u2.Closed = 1] = "Closed", u2))(fe || {}), pe = ((u2) => (u2[u2.Single = 0] = "Single", u2[u2.Multi = 1] = "Multi", u2))(pe || {}), ce$1 = ((u2) => (u2[u2.Pointer = 0] = "Pointer", u2[u2.Other = 1] = "Other", u2))(ce$1 || {});
+function ve(t2) {
+  requestAnimationFrame(() => requestAnimationFrame(t2));
+}
+let U$1 = Symbol("ListboxContext");
+function j$2(t2) {
+  let b2 = inject(U$1, null);
+  if (b2 === null) {
+    let u2 = new Error(`<${t2} /> is missing a parent <Listbox /> component.`);
+    throw Error.captureStackTrace && Error.captureStackTrace(u2, j$2), u2;
+  }
+  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);
+  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 };
+  }
+  let h$2 = computed(() => t2.multiple ? 1 : 0), [y$12, M2] = d$2(computed(() => t2.modelValue === void 0 ? u$2(h$2.value, { [1]: [], [0]: void 0 }) : t2.modelValue), (a2) => L("update:modelValue", a2), computed(() => t2.defaultValue)), n2 = { listboxState: e$12, value: y$12, mode: h$2, compare(a2, l2) {
+    if (typeof t2.by == "string") {
+      let r2 = t2.by;
+      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() {
+    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 });
+    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;
+    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 = "");
+  }, registerOption(a2, l2) {
+    let r2 = R((s2) => [...s2, { id: a2, dataRef: l2 }]);
+    f2.value = r2.options, i2.value = r2.activeOptionIndex;
+  }, unregisterOption(a2) {
+    let l2 = R((r2) => {
+      let s2 = r2.findIndex((S2) => S2.id === a2);
+      return s2 !== -1 && r2.splice(s2, 1), r2;
+    });
+    f2.value = l2.options, i2.value = l2.activeOptionIndex, w$1.value = 1;
+  }, select(a2) {
+    t2.disabled || M2(u$2(h$2.value, { [0]: () => a2, [1]: () => {
+      let l2 = toRaw(n2.value.value).slice(), r2 = toRaw(a2), s2 = l2.findIndex((S2) => n2.compare(r2, toRaw(S2)));
+      return s2 === -1 ? l2.push(r2) : l2.splice(s2, 1), l2;
+    } }));
+  } };
+  y([m2, x$1], (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 })));
+  let p2 = computed(() => {
+    var a2;
+    return (a2 = o(m2)) == null ? void 0 : a2.closest("form");
+  });
+  return onMounted(() => {
+    watch([p2], () => {
+      if (!p2.value || t2.defaultValue === void 0)
+        return;
+      function a2() {
+        n2.select(t2.defaultValue);
+      }
+      return p2.value.addEventListener("reset", a2), () => {
+        var l2;
+        (l2 = p2.value) == null || l2.removeEventListener("reset", a2);
+      };
+    }, { 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" })]);
+  };
+} }), 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");
+  function e2() {
+    var d2;
+    (d2 = o(L.buttonRef)) == null || d2.focus({ preventScroll: true });
+  }
+  return () => {
+    let d2 = { open: L.listboxState.value === 0, disabled: L.disabled.value }, { id: m2, ...x2 } = t2, f2 = { id: m2, ref: L.labelRef, onClick: e2 };
+    return H$2({ ourProps: f2, theirProps: x2, slot: d2, attrs: b2, slots: u2, name: "ListboxLabel" });
+  };
+} }), Fe = defineComponent({ name: "ListboxButton", props: { as: { type: [Object, String], default: "button" }, id: { type: String, default: () => `headlessui-listbox-button-${t$1()}` } }, setup(t2, { attrs: b2, slots: u2, expose: L }) {
+  let e2 = j$2("ListboxButton");
+  L({ el: e2.buttonRef, $el: e2.buttonRef });
+  function d2(o$2) {
+    switch (o$2.key) {
+      case o$1.Space:
+      case o$1.Enter:
+      case o$1.ArrowDown:
+        o$2.preventDefault(), e2.openListbox(), nextTick(() => {
+          var i2;
+          (i2 = o(e2.optionsRef)) == null || i2.focus({ preventScroll: true }), e2.value.value || e2.goToOption(a$2.First);
+        });
+        break;
+      case o$1.ArrowUp:
+        o$2.preventDefault(), e2.openListbox(), nextTick(() => {
+          var i2;
+          (i2 = o(e2.optionsRef)) == null || i2.focus({ preventScroll: true }), e2.value.value || e2.goToOption(a$2.Last);
+        });
+        break;
+    }
+  }
+  function m2(o2) {
+    switch (o2.key) {
+      case o$1.Space:
+        o2.preventDefault();
+        break;
+    }
+  }
+  function x2(o$12) {
+    e2.disabled.value || (e2.listboxState.value === 0 ? (e2.closeListbox(), nextTick(() => {
+      var i2;
+      return (i2 = o(e2.buttonRef)) == null ? void 0 : i2.focus({ preventScroll: true });
+    })) : (o$12.preventDefault(), e2.openListbox(), ve(() => {
+      var i2;
+      return (i2 = o(e2.optionsRef)) == null ? void 0 : i2.focus({ preventScroll: true });
+    })));
+  }
+  let f2 = b$1(computed(() => ({ as: t2.as, type: b2.type })), e2.buttonRef);
+  return () => {
+    var h2, y2;
+    let o$12 = { open: e2.listboxState.value === 0, disabled: e2.disabled.value, value: e2.value.value }, { id: i2, ...w2 } = t2, R = { ref: e2.buttonRef, id: i2, type: f2.value, "aria-haspopup": "listbox", "aria-controls": (h2 = o(e2.optionsRef)) == null ? void 0 : h2.id, "aria-expanded": e2.disabled.value ? void 0 : e2.listboxState.value === 0, "aria-labelledby": e2.labelRef.value ? [(y2 = o(e2.labelRef)) == null ? void 0 : y2.id, i2].join(" ") : void 0, disabled: e2.disabled.value === true ? true : void 0, onKeydown: d2, onKeyup: m2, onClick: x2 };
+    return H$2({ ourProps: R, theirProps: w2, slot: o$12, attrs: b2, slots: u2, name: "ListboxButton" });
+  };
+} }), Be = defineComponent({ name: "ListboxOptions", props: { as: { type: [Object, String], default: "ul" }, static: { type: Boolean, default: false }, unmount: { type: Boolean, default: true }, id: { type: String, default: () => `headlessui-listbox-options-${t$1()}` } }, setup(t2, { attrs: b2, slots: u2, expose: L }) {
+  let e2 = j$2("ListboxOptions"), d2 = ref(null);
+  L({ el: e2.optionsRef, $el: e2.optionsRef });
+  function m2(o$2) {
+    switch (d2.value && clearTimeout(d2.value), o$2.key) {
+      case o$1.Space:
+        if (e2.searchQuery.value !== "")
+          return o$2.preventDefault(), o$2.stopPropagation(), e2.search(o$2.key);
+      case o$1.Enter:
+        if (o$2.preventDefault(), o$2.stopPropagation(), e2.activeOptionIndex.value !== null) {
+          let i2 = e2.options.value[e2.activeOptionIndex.value];
+          e2.select(i2.dataRef.value);
+        }
+        e2.mode.value === 0 && (e2.closeListbox(), nextTick(() => {
+          var i2;
+          return (i2 = o(e2.buttonRef)) == null ? void 0 : i2.focus({ preventScroll: true });
+        }));
+        break;
+      case u$2(e2.orientation.value, { vertical: o$1.ArrowDown, horizontal: o$1.ArrowRight }):
+        return o$2.preventDefault(), o$2.stopPropagation(), e2.goToOption(a$2.Next);
+      case u$2(e2.orientation.value, { vertical: o$1.ArrowUp, horizontal: o$1.ArrowLeft }):
+        return o$2.preventDefault(), o$2.stopPropagation(), e2.goToOption(a$2.Previous);
+      case o$1.Home:
+      case o$1.PageUp:
+        return o$2.preventDefault(), o$2.stopPropagation(), e2.goToOption(a$2.First);
+      case o$1.End:
+      case o$1.PageDown:
+        return o$2.preventDefault(), o$2.stopPropagation(), e2.goToOption(a$2.Last);
+      case o$1.Escape:
+        o$2.preventDefault(), o$2.stopPropagation(), e2.closeListbox(), nextTick(() => {
+          var i2;
+          return (i2 = o(e2.buttonRef)) == null ? void 0 : i2.focus({ preventScroll: true });
+        });
+        break;
+      case o$1.Tab:
+        o$2.preventDefault(), o$2.stopPropagation();
+        break;
+      default:
+        o$2.key.length === 1 && (e2.search(o$2.key), d2.value = setTimeout(() => e2.clearSearch(), 350));
+        break;
+    }
+  }
+  let x2 = p$3(), f2 = computed(() => x2 !== null ? (x2.value & l.Open) === l.Open : e2.listboxState.value === 0);
+  return () => {
+    var h2, y2, M2, n2;
+    let o$12 = { open: e2.listboxState.value === 0 }, { id: i2, ...w2 } = t2, R = { "aria-activedescendant": e2.activeOptionIndex.value === null || (h2 = e2.options.value[e2.activeOptionIndex.value]) == null ? void 0 : h2.id, "aria-multiselectable": e2.mode.value === 1 ? true : void 0, "aria-labelledby": (n2 = (y2 = o(e2.labelRef)) == null ? void 0 : y2.id) != null ? n2 : (M2 = o(e2.buttonRef)) == null ? void 0 : M2.id, "aria-orientation": e2.orientation.value, id: i2, onKeydown: m2, role: "listbox", tabIndex: 0, ref: e2.optionsRef };
+    return H$2({ ourProps: R, theirProps: w2, slot: o$12, attrs: b2, slots: u2, features: N$1.RenderStrategy | N$1.Static, visible: f2.value, name: "ListboxOptions" });
+  };
+} }), Ke = defineComponent({ name: "ListboxOption", props: { as: { type: [Object, String], default: "li" }, value: { type: [Object, String, Number, Boolean] }, disabled: { type: Boolean, default: false }, id: { type: String, default: () => `headlessui-listbox.option-${t$1()}` } }, setup(t2, { slots: b2, attrs: u$12, expose: L }) {
+  let e2 = j$2("ListboxOption"), d2 = ref(null);
+  L({ el: d2, $el: d2 });
+  let m2 = computed(() => e2.activeOptionIndex.value !== null ? e2.options.value[e2.activeOptionIndex.value].id === t2.id : false), x2 = computed(() => u$2(e2.mode.value, { [0]: () => e2.compare(toRaw(e2.value.value), toRaw(t2.value)), [1]: () => toRaw(e2.value.value).some((n2) => e2.compare(toRaw(n2), toRaw(t2.value))) })), f2 = computed(() => u$2(e2.mode.value, { [1]: () => {
+    var p2;
+    let n2 = toRaw(e2.value.value);
+    return ((p2 = e2.options.value.find((a2) => n2.some((l2) => e2.compare(toRaw(l2), toRaw(a2.dataRef.value))))) == null ? void 0 : p2.id) === t2.id;
+  }, [0]: () => x2.value })), o$12 = computed(() => ({ disabled: t2.disabled, value: t2.value, textValue: "", domRef: d2 }));
+  onMounted(() => {
+    var p2, a2;
+    let n2 = (a2 = (p2 = o(d2)) == null ? void 0 : p2.textContent) == null ? void 0 : a2.toLowerCase().trim();
+    n2 !== void 0 && (o$12.value.textValue = n2);
+  }), onMounted(() => e2.registerOption(t2.id, o$12)), onUnmounted(() => e2.unregisterOption(t2.id)), onMounted(() => {
+    watch([e2.listboxState, x2], () => {
+      e2.listboxState.value === 0 && x2.value && u$2(e2.mode.value, { [1]: () => {
+        f2.value && e2.goToOption(a$2.Specific, t2.id);
+      }, [0]: () => {
+        e2.goToOption(a$2.Specific, t2.id);
+      } });
+    }, { immediate: true });
+  }), watchEffect(() => {
+    e2.listboxState.value === 0 && m2.value && e2.activationTrigger.value !== 0 && nextTick(() => {
+      var n2, p2;
+      return (p2 = (n2 = o(d2)) == null ? void 0 : n2.scrollIntoView) == null ? void 0 : p2.call(n2, { block: "nearest" });
+    });
+  });
+  function i2(n2) {
+    if (t2.disabled)
+      return n2.preventDefault();
+    e2.select(t2.value), e2.mode.value === 0 && (e2.closeListbox(), nextTick(() => {
+      var p2;
+      return (p2 = o(e2.buttonRef)) == null ? void 0 : p2.focus({ preventScroll: true });
+    }));
+  }
+  function w2() {
+    if (t2.disabled)
+      return e2.goToOption(a$2.Nothing);
+    e2.goToOption(a$2.Specific, t2.id);
+  }
+  let R = u();
+  function h2(n2) {
+    R.update(n2);
+  }
+  function y2(n2) {
+    R.wasMoved(n2) && (t2.disabled || m2.value || e2.goToOption(a$2.Specific, t2.id, 0));
+  }
+  function M2(n2) {
+    R.wasMoved(n2) && (t2.disabled || m2.value && e2.goToOption(a$2.Nothing));
+  }
+  return () => {
+    let { disabled: n2 } = t2, p2 = { active: m2.value, selected: x2.value, disabled: n2 }, { id: a2, value: l2, disabled: r2, ...s2 } = t2, S2 = { id: a2, ref: d2, role: "option", tabIndex: n2 === true ? void 0 : -1, "aria-disabled": n2 === true ? true : void 0, "aria-selected": x2.value, disabled: void 0, onClick: i2, onFocus: w2, onPointerenter: h2, onMouseenter: h2, onPointermove: y2, onMousemove: y2, onPointerleave: M2, onMouseleave: M2 };
+    return H$2({ ourProps: S2, theirProps: s2, slot: p2, attrs: u$12, slots: b2, name: "ListboxOption" });
   };
 } });
 let a = Symbol("LabelContext");
-function d() {
+function d$1() {
   let t2 = inject(a, null);
   if (t2 === null) {
     let n2 = new Error("You used a <Label /> component, but it is not inside a parent.");
-    throw Error.captureStackTrace && Error.captureStackTrace(n2, d), n2;
+    throw Error.captureStackTrace && Error.captureStackTrace(n2, d$1), n2;
   }
   return t2;
 }
 function K({ slot: t2 = {}, name: n2 = "Label", props: i2 = {} } = {}) {
   let e2 = ref([]);
-  function l(r2) {
+  function l2(r2) {
     return e2.value.push(r2), () => {
       let o2 = e2.value.indexOf(r2);
       o2 !== -1 && e2.value.splice(o2, 1);
     };
   }
-  return provide(a, { register: l, slot: t2, name: n2, props: i2 }), computed(() => e2.value.length > 0 ? e2.value.join(" ") : void 0);
+  return provide(a, { register: l2, slot: t2, name: n2, props: i2 }), computed(() => e2.value.length > 0 ? e2.value.join(" ") : void 0);
 }
-let T = defineComponent({ name: "Label", props: { as: { type: [Object, String], default: "label" }, passive: { type: [Boolean], default: false }, id: { type: String, default: () => `headlessui-label-${t()}` } }, setup(t2, { slots: n2, attrs: i2 }) {
-  let e2 = d();
+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: l = "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 };
-    return c2 && (delete s2.onClick, delete s2.htmlFor, delete u2.onClick), H$2({ ourProps: s2, theirProps: u2, slot: r2, attrs: i2, slots: n2, name: l });
+    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 };
+    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 });
   };
 } });
 function re(t2, c2) {
   return t2 === c2;
 }
-let j = Symbol("RadioGroupContext");
+let j$1 = Symbol("RadioGroupContext");
 function H(t2) {
-  let c2 = inject(j, null);
+  let c2 = inject(j$1, null);
   if (c2 === null) {
     let u2 = new Error(`<${t2} /> is missing a parent <RadioGroup /> component.`);
     throw Error.captureStackTrace && Error.captureStackTrace(u2, H), u2;
   }
   return c2;
 }
-let ke = defineComponent({ name: "RadioGroup", emits: { "update:modelValue": (t2) => true }, props: { as: { type: [Object, String], default: "div" }, disabled: { type: [Boolean], default: false }, by: { type: [String, Function], default: () => re }, 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 }, id: { type: String, default: () => `headlessui-radiogroup-${t()}` } }, inheritAttrs: false, setup(t2, { emit: c2, attrs: u2, slots: E2, expose: d2 }) {
-  let s2 = ref(null), i2 = ref([]), R = K({ name: "RadioGroupLabel" }), w = M({ name: "RadioGroupDescription" });
+let ke = defineComponent({ name: "RadioGroup", emits: { "update:modelValue": (t2) => true }, props: { as: { type: [Object, String], default: "div" }, disabled: { type: [Boolean], default: false }, by: { type: [String, Function], default: () => re }, 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 }, id: { type: String, default: () => `headlessui-radiogroup-${t$1()}` } }, inheritAttrs: false, setup(t2, { emit: c2, attrs: u2, slots: E2, expose: d2 }) {
+  let s2 = ref(null), i2 = ref([]), R = K({ name: "RadioGroupLabel" }), w2 = M({ name: "RadioGroupDescription" });
   d2({ el: s2, $el: s2 });
-  let [f2, S2] = d$1(computed(() => t2.modelValue), (e2) => c2("update:modelValue", e2), computed(() => t2.defaultValue)), p2 = { options: i2, value: f2, disabled: computed(() => t2.disabled), firstOption: computed(() => i2.value.find((e2) => !e2.propsRef.disabled)), containsCheckedOption: computed(() => i2.value.some((e2) => p2.compare(toRaw(e2.propsRef.value), toRaw(t2.modelValue)))), compare(e2, a2) {
+  let [f2, S2] = d$2(computed(() => t2.modelValue), (e2) => c2("update:modelValue", e2), computed(() => t2.defaultValue)), p2 = { options: i2, value: f2, disabled: computed(() => t2.disabled), firstOption: computed(() => i2.value.find((e2) => !e2.propsRef.disabled)), containsCheckedOption: computed(() => i2.value.some((e2) => p2.compare(toRaw(e2.propsRef.value), toRaw(t2.modelValue)))), compare(e2, a2) {
     if (typeof t2.by == "string") {
       let n2 = t2.by;
       return (e2 == null ? void 0 : e2[n2]) === (a2 == null ? void 0 : a2[n2]);
@@ -47034,7 +47377,7 @@ let ke = defineComponent({ name: "RadioGroup", emits: { "update:modelValue": (t2
     var n2;
     if (t2.disabled || p2.compare(toRaw(f2.value), toRaw(e2)))
       return false;
-    let a2 = (n2 = i2.value.find((l) => p2.compare(toRaw(l.propsRef.value), toRaw(e2)))) == null ? void 0 : n2.propsRef;
+    let a2 = (n2 = i2.value.find((l2) => p2.compare(toRaw(l2.propsRef.value), toRaw(e2)))) == null ? void 0 : n2.propsRef;
     return a2 != null && a2.disabled ? false : (S2(e2), true);
   }, registerOption(e2) {
     i2.value.push(e2), i2.value = O(i2.value, (a2) => a2.element);
@@ -47042,7 +47385,7 @@ let ke = defineComponent({ name: "RadioGroup", emits: { "update:modelValue": (t2
     let a2 = i2.value.findIndex((n2) => n2.id === e2);
     a2 !== -1 && i2.value.splice(a2, 1);
   } };
-  provide(j, p2), p$2({ container: computed(() => o(s2)), accept(e2) {
+  provide(j$1, p2), p$2({ container: computed(() => o(s2)), accept(e2) {
     return e2.getAttribute("role") === "radio" ? NodeFilter.FILTER_REJECT : e2.hasAttribute("role") ? NodeFilter.FILTER_SKIP : NodeFilter.FILTER_ACCEPT;
   }, walk(e2) {
     e2.setAttribute("role", "none");
@@ -47058,29 +47401,29 @@ let ke = defineComponent({ name: "RadioGroup", emits: { "update:modelValue": (t2
       case o$1.ArrowLeft:
       case o$1.ArrowUp:
         if (e2.preventDefault(), e2.stopPropagation(), P(a2, N.Previous | N.WrapAround) === T$1.Success) {
-          let l = i2.value.find((r2) => {
+          let l2 = i2.value.find((r2) => {
             var b2;
             return r2.element === ((b2 = m(s2)) == null ? void 0 : b2.activeElement);
           });
-          l && p2.change(l.propsRef.value);
+          l2 && p2.change(l2.propsRef.value);
         }
         break;
       case o$1.ArrowRight:
       case o$1.ArrowDown:
         if (e2.preventDefault(), e2.stopPropagation(), P(a2, N.Next | N.WrapAround) === T$1.Success) {
-          let l = i2.value.find((r2) => {
+          let l2 = i2.value.find((r2) => {
             var b2;
             return r2.element === ((b2 = m(r2.element)) == null ? void 0 : b2.activeElement);
           });
-          l && p2.change(l.propsRef.value);
+          l2 && p2.change(l2.propsRef.value);
         }
         break;
       case o$1.Space:
         {
           e2.preventDefault(), e2.stopPropagation();
-          let n2 = i2.value.find((l) => {
+          let n2 = i2.value.find((l2) => {
             var r2;
-            return l.element === ((r2 = m(l.element)) == null ? void 0 : r2.activeElement);
+            return l2.element === ((r2 = m(l2.element)) == null ? void 0 : r2.activeElement);
           });
           n2 && p2.change(n2.propsRef.value);
         }
@@ -47104,16 +47447,16 @@ let ke = defineComponent({ name: "RadioGroup", emits: { "update:modelValue": (t2
       };
     }, { immediate: true });
   }), () => {
-    let { disabled: e$12, name: a2, id: n2, form: l, ...r2 } = t2, b2 = { ref: s2, id: n2, role: "radiogroup", "aria-labelledby": R.value, "aria-describedby": w.value, onKeydown: m$1 };
-    return h$1(Fragment, [...a2 != null && f2.value != null ? e({ [a2]: f2.value }).map(([T2, G]) => h$1(f$1, K$1({ features: a$1.Hidden, key: T2, as: "input", type: "hidden", hidden: true, readOnly: true, form: l, name: T2, value: G }))) : [], H$2({ ourProps: b2, theirProps: { ...u2, ...T$2(r2, ["modelValue", "defaultValue", "by"]) }, slot: {}, attrs: u2, slots: E2, name: "RadioGroup" })]);
+    let { disabled: e$12, name: a2, id: n2, form: l2, ...r2 } = t2, b2 = { ref: s2, id: n2, role: "radiogroup", "aria-labelledby": R.value, "aria-describedby": w2.value, onKeydown: m$1 };
+    return h$1(Fragment, [...a2 != null && f2.value != null ? e({ [a2]: f2.value }).map(([T2, G]) => h$1(f$1, K$1({ features: a$1.Hidden, key: T2, as: "input", type: "hidden", hidden: true, readOnly: true, form: l2, name: T2, value: G }))) : [], H$2({ ourProps: b2, theirProps: { ...u2, ...T$2(r2, ["modelValue", "defaultValue", "by"]) }, slot: {}, attrs: u2, slots: E2, name: "RadioGroup" })]);
   };
 } });
 var ie = ((u2) => (u2[u2.Empty = 1] = "Empty", u2[u2.Active = 2] = "Active", u2))(ie || {});
-let Ee = defineComponent({ name: "RadioGroupOption", props: { as: { type: [Object, String], default: "div" }, value: { type: [Object, String, Number, Boolean] }, disabled: { type: Boolean, default: false }, id: { type: String, default: () => `headlessui-radiogroup-option-${t()}` } }, setup(t2, { attrs: c2, slots: u2, expose: E2 }) {
-  let d2 = H("RadioGroupOption"), s2 = K({ name: "RadioGroupLabel" }), i2 = M({ name: "RadioGroupDescription" }), R = ref(null), w = computed(() => ({ value: t2.value, disabled: t2.disabled })), f2 = ref(1);
+let Ee = defineComponent({ name: "RadioGroupOption", props: { as: { type: [Object, String], default: "div" }, value: { type: [Object, String, Number, Boolean] }, disabled: { type: Boolean, default: false }, id: { type: String, default: () => `headlessui-radiogroup-option-${t$1()}` } }, setup(t2, { attrs: c2, slots: u2, expose: E2 }) {
+  let d2 = H("RadioGroupOption"), s2 = K({ name: "RadioGroupLabel" }), i2 = M({ name: "RadioGroupDescription" }), R = ref(null), w2 = computed(() => ({ value: t2.value, disabled: t2.disabled })), f2 = ref(1);
   E2({ el: R, $el: R });
   let S2 = computed(() => o(R));
-  onMounted(() => d2.registerOption({ id: t2.id, element: S2, propsRef: w })), onUnmounted(() => d2.unregisterOption(t2.id));
+  onMounted(() => d2.registerOption({ id: t2.id, element: S2, propsRef: w2 })), onUnmounted(() => d2.unregisterOption(t2.id));
   let p2 = computed(() => {
     var r2;
     return ((r2 = d2.firstOption.value) == null ? void 0 : r2.id) === t2.id;
@@ -47125,30 +47468,30 @@ let Ee = defineComponent({ name: "RadioGroupOption", props: { as: { type: [Objec
   function n2() {
     f2.value |= 2;
   }
-  function l() {
+  function l2() {
     f2.value &= -3;
   }
   return () => {
-    let { id: r2, value: b2, disabled: T2, ...G } = t2, N2 = { checked: v2.value, disabled: m2.value, active: Boolean(f2.value & 2) }, K2 = { id: r2, ref: R, role: "radio", "aria-checked": v2.value ? "true" : "false", "aria-labelledby": s2.value, "aria-describedby": i2.value, "aria-disabled": m2.value ? true : void 0, tabIndex: e2.value, onClick: m2.value ? void 0 : a2, onFocus: m2.value ? void 0 : n2, onBlur: m2.value ? void 0 : l };
+    let { id: r2, value: b2, disabled: T2, ...G } = t2, N2 = { checked: v2.value, disabled: m2.value, active: Boolean(f2.value & 2) }, K2 = { id: r2, ref: R, role: "radio", "aria-checked": v2.value ? "true" : "false", "aria-labelledby": s2.value, "aria-describedby": i2.value, "aria-disabled": m2.value ? true : void 0, tabIndex: e2.value, onClick: m2.value ? void 0 : a2, onFocus: m2.value ? void 0 : n2, onBlur: m2.value ? void 0 : l2 };
     return H$2({ ourProps: K2, theirProps: G, slot: N2, attrs: c2, slots: u2, name: "RadioGroupOption" });
   };
-} }), we = T, Se = E;
-let S = Symbol("GroupContext"), ae = defineComponent({ name: "SwitchGroup", props: { as: { type: [Object, String], default: "template" } }, setup(l, { slots: p2, attrs: a2 }) {
+} }), we = T, Se$1 = E;
+let S = Symbol("GroupContext"), ae = defineComponent({ name: "SwitchGroup", props: { as: { type: [Object, String], default: "template" } }, setup(l2, { slots: p2, attrs: a2 }) {
   let o2 = ref(null), f2 = K({ name: "SwitchLabel", props: { htmlFor: computed(() => {
     var r2;
     return (r2 = o2.value) == null ? void 0 : r2.id;
   }), onClick(r2) {
     o2.value && (r2.currentTarget.tagName === "LABEL" && r2.preventDefault(), o2.value.click(), o2.value.focus({ preventScroll: true }));
   } } }), t2 = M({ name: "SwitchDescription" });
-  return provide(S, { switchRef: o2, labelledby: f2, describedby: t2 }), () => H$2({ theirProps: l, ourProps: {}, slot: {}, slots: p2, attrs: a2, name: "SwitchGroup" });
-} }), ue = defineComponent({ name: "Switch", emits: { "update:modelValue": (l) => true }, props: { as: { type: [Object, String], default: "button" }, modelValue: { type: Boolean, default: void 0 }, defaultChecked: { type: Boolean, optional: true }, form: { type: String, optional: true }, name: { type: String, optional: true }, value: { type: String, optional: true }, id: { type: String, default: () => `headlessui-switch-${t()}` } }, inheritAttrs: false, setup(l, { emit: p2, attrs: a2, slots: o$2, expose: f2 }) {
-  let t2 = inject(S, null), [i2, r2] = d$1(computed(() => l.modelValue), (e2) => p2("update:modelValue", e2), computed(() => l.defaultChecked));
+  return provide(S, { switchRef: o2, labelledby: f2, describedby: t2 }), () => H$2({ theirProps: l2, ourProps: {}, slot: {}, slots: p2, attrs: a2, name: "SwitchGroup" });
+} }), ue = defineComponent({ name: "Switch", emits: { "update:modelValue": (l2) => true }, props: { as: { type: [Object, String], default: "button" }, modelValue: { type: Boolean, default: void 0 }, defaultChecked: { type: Boolean, optional: true }, form: { type: String, optional: true }, name: { type: String, optional: true }, value: { type: String, optional: true }, id: { type: String, default: () => `headlessui-switch-${t$1()}` } }, inheritAttrs: false, setup(l2, { emit: p2, attrs: a2, slots: o$2, expose: f2 }) {
+  let t2 = inject(S, null), [i2, r2] = d$2(computed(() => l2.modelValue), (e2) => p2("update:modelValue", e2), computed(() => l2.defaultChecked));
   function s2() {
     r2(!i2.value);
   }
-  let w = ref(null), u2 = t2 === null ? w : t2.switchRef, g = b$1(computed(() => ({ as: l.as, type: a2.type })), u2);
+  let w2 = ref(null), u2 = t2 === null ? w2 : t2.switchRef, g = b$1(computed(() => ({ as: l2.as, type: a2.type })), u2);
   f2({ el: u2, $el: u2 });
-  function k(e2) {
+  function k2(e2) {
     e2.preventDefault(), s2();
   }
   function C(e2) {
@@ -47163,10 +47506,10 @@ let S = Symbol("GroupContext"), ae = defineComponent({ name: "SwitchGroup", prop
   });
   return onMounted(() => {
     watch([c2], () => {
-      if (!c2.value || l.defaultChecked === void 0)
+      if (!c2.value || l2.defaultChecked === void 0)
         return;
       function e2() {
-        r2(l.defaultChecked);
+        r2(l2.defaultChecked);
       }
       return c2.value.addEventListener("reset", e2), () => {
         var n2;
@@ -47174,11 +47517,200 @@ let S = Symbol("GroupContext"), ae = defineComponent({ name: "SwitchGroup", prop
       };
     }, { immediate: true });
   }), () => {
-    let { id: e2, name: n2, value: L, form: D, ...R } = l, K2 = { checked: i2.value }, x = { 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: k, 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: x, theirProps: { ...a2, ...T$2(R, ["modelValue", "defaultChecked"]) }, slot: K2, attrs: a2, slots: o$2, name: "Switch" })]);
+    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 };
+    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;
-const _sfc_main$d = /* @__PURE__ */ defineComponent({
+let d = defineComponent({ props: { onFocus: { type: Function, required: true } }, setup(t2) {
+  let n2 = ref(true);
+  return () => n2.value ? h$1(f$1, { as: "button", type: "button", features: a$1.Focusable, onFocus(o2) {
+    o2.preventDefault();
+    let e2, a2 = 50;
+    function r2() {
+      var u2;
+      if (a2-- <= 0) {
+        e2 && cancelAnimationFrame(e2);
+        return;
+      }
+      if ((u2 = t2.onFocus) != null && u2.call(t2)) {
+        n2.value = false, cancelAnimationFrame(e2);
+        return;
+      }
+      e2 = requestAnimationFrame(r2);
+    }
+    e2 = requestAnimationFrame(r2);
+  } }) : null;
+} });
+var te = ((i2) => (i2[i2.Forwards = 0] = "Forwards", i2[i2.Backwards = 1] = "Backwards", i2))(te || {}), le = ((s2) => (s2[s2.Less = -1] = "Less", s2[s2.Equal = 0] = "Equal", s2[s2.Greater = 1] = "Greater", s2))(le || {});
+let U = Symbol("TabsContext");
+function k(a2) {
+  let v2 = inject(U, null);
+  if (v2 === null) {
+    let i2 = new Error(`<${a2} /> is missing a parent <TabGroup /> component.`);
+    throw Error.captureStackTrace && Error.captureStackTrace(i2, k), i2;
+  }
+  return v2;
+}
+let j = Symbol("TabsSSRContext"), xe = defineComponent({ name: "TabGroup", emits: { change: (a2) => true }, props: { as: { type: [Object, String], default: "template" }, selectedIndex: { type: [Number], default: null }, defaultIndex: { type: [Number], default: 0 }, vertical: { type: [Boolean], default: false }, manual: { type: [Boolean], default: false } }, inheritAttrs: false, setup(a2, { slots: v2, attrs: i2, emit: s2 }) {
+  var h2;
+  let l2 = ref((h2 = a2.selectedIndex) != null ? h2 : a2.defaultIndex), n2 = ref([]), o$12 = ref([]), T2 = computed(() => a2.selectedIndex !== null), b2 = computed(() => T2.value ? a2.selectedIndex : l2.value);
+  function m2(t2) {
+    var S2;
+    let e2 = O(r2.tabs.value, o), u2 = O(r2.panels.value, o), f2 = e2.filter((p2) => {
+      var E2;
+      return !((E2 = o(p2)) != null && E2.hasAttribute("disabled"));
+    });
+    if (t2 < 0 || t2 > e2.length - 1) {
+      let p2 = u$2(l2.value === null ? 0 : Math.sign(t2 - l2.value), { [-1]: () => 1, [0]: () => u$2(Math.sign(t2), { [-1]: () => 0, [0]: () => 0, [1]: () => 1 }), [1]: () => 0 });
+      l2.value = u$2(p2, { [0]: () => e2.indexOf(f2[0]), [1]: () => e2.indexOf(f2[f2.length - 1]) }), r2.tabs.value = e2, r2.panels.value = u2;
+    } else {
+      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 r2 = { selectedIndex: computed(() => {
+    var t2, e2;
+    return (e2 = (t2 = l2.value) != null ? t2 : a2.defaultIndex) != null ? e2 : null;
+  }), orientation: computed(() => a2.vertical ? "vertical" : "horizontal"), activation: computed(() => a2.manual ? "manual" : "auto"), tabs: n2, panels: o$12, setSelectedIndex(t2) {
+    b2.value !== t2 && s2("change", t2), T2.value || m2(t2);
+  }, registerTab(t2) {
+    var f2;
+    if (n2.value.includes(t2))
+      return;
+    let e2 = n2.value[l2.value];
+    n2.value.push(t2), n2.value = O(n2.value, o);
+    let u2 = (f2 = n2.value.indexOf(e2)) != null ? f2 : l2.value;
+    u2 !== -1 && (l2.value = u2);
+  }, unregisterTab(t2) {
+    let e2 = n2.value.indexOf(t2);
+    e2 !== -1 && n2.value.splice(e2, 1);
+  }, registerPanel(t2) {
+    o$12.value.includes(t2) || (o$12.value.push(t2), o$12.value = O(o$12.value, o));
+  }, unregisterPanel(t2) {
+    let e2 = o$12.value.indexOf(t2);
+    e2 !== -1 && o$12.value.splice(e2, 1);
+  } };
+  provide(U, r2);
+  let R = ref({ tabs: [], panels: [] }), y2 = ref(false);
+  onMounted(() => {
+    y2.value = true;
+  }), provide(j, computed(() => y2.value ? null : R.value));
+  let w2 = computed(() => a2.selectedIndex);
+  return onMounted(() => {
+    watch([w2], () => {
+      var t2;
+      return m2((t2 = a2.selectedIndex) != null ? t2 : a2.defaultIndex);
+    }, { immediate: true });
+  }), watchEffect(() => {
+    if (!T2.value || b2.value == null || r2.tabs.value.length <= 0)
+      return;
+    let t2 = O(r2.tabs.value, o);
+    t2.some((u2, f2) => o(r2.tabs.value[f2]) !== o(u2)) && r2.setSelectedIndex(t2.findIndex((u2) => o(u2) === o(r2.tabs.value[b2.value])));
+  }), () => {
+    let t2 = { selectedIndex: l2.value };
+    return h$1(Fragment, [n2.value.length <= 0 && h$1(d, { onFocus: () => {
+      for (let e2 of n2.value) {
+        let u2 = o(e2);
+        if ((u2 == null ? void 0 : u2.tabIndex) === 0)
+          return u2.focus(), true;
+      }
+      return false;
+    } }), H$2({ theirProps: { ...i2, ...T$2(a2, ["selectedIndex", "defaultIndex", "manual", "vertical", "onChange"]) }, ourProps: {}, slot: t2, slots: v2, attrs: i2, name: "TabGroup" })]);
+  };
+} }), Ie = defineComponent({ name: "TabList", props: { as: { type: [Object, String], default: "div" } }, setup(a2, { attrs: v2, slots: i2 }) {
+  let s2 = k("TabList");
+  return () => {
+    let l2 = { selectedIndex: s2.selectedIndex.value }, n2 = { role: "tablist", "aria-orientation": s2.orientation.value };
+    return H$2({ ourProps: n2, theirProps: a2, slot: l2, attrs: v2, slots: i2, name: "TabList" });
+  };
+} }), ye = defineComponent({ name: "Tab", props: { as: { type: [Object, String], default: "button" }, disabled: { type: [Boolean], default: false }, id: { type: String, default: () => `headlessui-tabs-tab-${t$1()}` } }, setup(a2, { attrs: v2, slots: i2, expose: s2 }) {
+  let l2 = k("Tab"), n2 = ref(null);
+  s2({ el: n2, $el: n2 }), onMounted(() => l2.registerTab(n2)), onUnmounted(() => l2.unregisterTab(n2));
+  let o$2 = inject(j), T2 = computed(() => {
+    if (o$2.value) {
+      let e2 = o$2.value.tabs.indexOf(a2.id);
+      return e2 === -1 ? o$2.value.tabs.push(a2.id) - 1 : e2;
+    }
+    return -1;
+  }), b2 = computed(() => {
+    let e2 = l2.tabs.value.indexOf(n2);
+    return e2 === -1 ? T2.value : e2;
+  }), m$1 = computed(() => b2.value === l2.selectedIndex.value);
+  function r2(e2) {
+    var f2;
+    let u2 = e2();
+    if (u2 === T$1.Success && l2.activation.value === "auto") {
+      let S2 = (f2 = m(n2)) == null ? void 0 : f2.activeElement, p2 = l2.tabs.value.findIndex((E2) => o(E2) === S2);
+      p2 !== -1 && l2.setSelectedIndex(p2);
+    }
+    return u2;
+  }
+  function R(e2) {
+    let u2 = l2.tabs.value.map((S2) => o(S2)).filter(Boolean);
+    if (e2.key === o$1.Space || e2.key === o$1.Enter) {
+      e2.preventDefault(), e2.stopPropagation(), l2.setSelectedIndex(b2.value);
+      return;
+    }
+    switch (e2.key) {
+      case o$1.Home:
+      case o$1.PageUp:
+        return e2.preventDefault(), e2.stopPropagation(), r2(() => P(u2, N.First));
+      case o$1.End:
+      case o$1.PageDown:
+        return e2.preventDefault(), e2.stopPropagation(), r2(() => P(u2, N.Last));
+    }
+    if (r2(() => u$2(l2.orientation.value, { vertical() {
+      return e2.key === o$1.ArrowUp ? P(u2, N.Previous | N.WrapAround) : e2.key === o$1.ArrowDown ? P(u2, N.Next | N.WrapAround) : T$1.Error;
+    }, horizontal() {
+      return e2.key === o$1.ArrowLeft ? P(u2, N.Previous | N.WrapAround) : e2.key === o$1.ArrowRight ? P(u2, N.Next | N.WrapAround) : T$1.Error;
+    } })) === T$1.Success)
+      return e2.preventDefault();
+  }
+  let y2 = ref(false);
+  function w2() {
+    var e2;
+    y2.value || (y2.value = true, !a2.disabled && ((e2 = o(n2)) == null || e2.focus(), l2.setSelectedIndex(b2.value), t(() => {
+      y2.value = false;
+    })));
+  }
+  function h2(e2) {
+    e2.preventDefault();
+  }
+  let t$12 = b$1(computed(() => ({ as: a2.as, type: v2.type })), n2);
+  return () => {
+    var p2;
+    let e2 = { selected: m$1.value }, { id: u2, ...f2 } = a2, S2 = { ref: n2, onKeydown: R, onMousedown: h2, onClick: w2, id: u2, role: "tab", type: t$12.value, "aria-controls": (p2 = o(l2.panels.value[b2.value])) == null ? void 0 : p2.id, "aria-selected": m$1.value, tabIndex: m$1.value ? 0 : -1, disabled: a2.disabled ? true : void 0 };
+    return H$2({ ourProps: S2, theirProps: f2, slot: e2, attrs: v2, slots: i2, name: "Tab" });
+  };
+} }), Se = defineComponent({ name: "TabPanels", props: { as: { type: [Object, String], default: "div" } }, setup(a2, { slots: v2, attrs: i2 }) {
+  let s2 = k("TabPanels");
+  return () => {
+    let l2 = { selectedIndex: s2.selectedIndex.value };
+    return H$2({ theirProps: a2, ourProps: {}, slot: l2, attrs: i2, slots: v2, name: "TabPanels" });
+  };
+} }), ge = defineComponent({ name: "TabPanel", props: { as: { type: [Object, String], default: "div" }, static: { type: Boolean, default: false }, unmount: { type: Boolean, default: true }, id: { type: String, default: () => `headlessui-tabs-panel-${t$1()}` }, tabIndex: { type: Number, default: 0 } }, setup(a2, { attrs: v2, slots: i2, expose: s2 }) {
+  let l2 = k("TabPanel"), n2 = ref(null);
+  s2({ el: n2, $el: n2 }), onMounted(() => l2.registerPanel(n2)), onUnmounted(() => l2.unregisterPanel(n2));
+  let o$12 = inject(j), T2 = computed(() => {
+    if (o$12.value) {
+      let r2 = o$12.value.panels.indexOf(a2.id);
+      return r2 === -1 ? o$12.value.panels.push(a2.id) - 1 : r2;
+    }
+    return -1;
+  }), b2 = computed(() => {
+    let r2 = l2.panels.value.indexOf(n2);
+    return r2 === -1 ? T2.value : r2;
+  }), m2 = computed(() => b2.value === l2.selectedIndex.value);
+  return () => {
+    var t2;
+    let r2 = { selected: m2.value }, { id: R, tabIndex: y2, ...w2 } = a2, h2 = { ref: n2, id: R, role: "tabpanel", "aria-labelledby": (t2 = o(l2.tabs.value[b2.value])) == null ? void 0 : t2.id, tabIndex: m2.value ? y2 : -1 };
+    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({
   __name: "VRadioDescription",
   props: {
     as: {
@@ -47188,7 +47720,7 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
   },
   setup(__props) {
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(unref(Se), { as: __props.as }, {
+      return openBlock(), createBlock(unref(Se$1), { as: __props.as }, {
         default: withCtx(() => [
           renderSlot(_ctx.$slots, "default")
         ]),
@@ -47197,7 +47729,7 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$c = /* @__PURE__ */ defineComponent({
+const _sfc_main$k = /* @__PURE__ */ defineComponent({
   __name: "VRadioGroup",
   props: {
     as: {
@@ -47265,7 +47797,7 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$b = /* @__PURE__ */ defineComponent({
+const _sfc_main$j = /* @__PURE__ */ defineComponent({
   __name: "VRadioItem",
   props: {
     value: {
@@ -47291,7 +47823,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$a = /* @__PURE__ */ defineComponent({
+const _sfc_main$i = /* @__PURE__ */ defineComponent({
   __name: "VRadioLabel",
   props: {
     as: {
@@ -47310,11 +47842,11 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$5 = {
+const _hoisted_1$6 = {
   key: 0,
   class: "sr-only"
 };
-const _sfc_main$9 = /* @__PURE__ */ defineComponent({
+const _sfc_main$h = /* @__PURE__ */ defineComponent({
   __name: "VSwitch",
   props: {
     modelValue: {
@@ -47390,7 +47922,7 @@ const _sfc_main$9 = /* @__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$5, [
+            _ctx.$slots.default ? (openBlock(), createElementBlock("span", _hoisted_1$6, [
               renderSlot(_ctx.$slots, "default")
             ])) : createCommentVNode("", true),
             createElementVNode("div", {
@@ -47403,7 +47935,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$8 = /* @__PURE__ */ defineComponent({
+const _sfc_main$g = /* @__PURE__ */ defineComponent({
   __name: "VSwitchDescription",
   props: {
     as: {
@@ -47422,7 +47954,7 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$7 = /* @__PURE__ */ defineComponent({
+const _sfc_main$f = /* @__PURE__ */ defineComponent({
   __name: "VSwitchGroup",
   props: {
     as: {
@@ -47441,7 +47973,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$6 = /* @__PURE__ */ defineComponent({
+const _sfc_main$e = /* @__PURE__ */ defineComponent({
   __name: "VSwitchLabel",
   props: {
     as: {
@@ -47586,8 +48118,8 @@ const useDarkMode = () => {
     MODE
   };
 };
-const _hoisted_1$4 = ["aria-labelledby", "aria-describedby"];
-const _sfc_main$5 = /* @__PURE__ */ defineComponent({
+const _hoisted_1$5 = ["aria-labelledby", "aria-describedby"];
+const _sfc_main$d = /* @__PURE__ */ defineComponent({
   __name: "VDrawer",
   props: {
     regionBackdrop: {
@@ -47651,7 +48183,7 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
               "aria-describedby": unref(describedby)
             }, [
               renderSlot(_ctx.$slots, "default")
-            ], 10, _hoisted_1$4)) : createCommentVNode("", true)
+            ], 10, _hoisted_1$5)) : createCommentVNode("", true)
           ]),
           _: 3
         }, 8, ["name"]),
@@ -47663,7 +48195,7 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
               key: 0,
               ref_key: "elemBackdrop",
               ref: elemBackdrop,
-              class: normalizeClass(`drawer-backdrop backdrop-blur-xs fixed bottom-0 left-0 right-0 top-0 flex bg-surface-backdrop-token z-40 ${unref(regionBackdrop)}`),
+              class: normalizeClass(`drawer-backdrop backdrop-blur-xs fixed bottom-0 left-0 right-0 top-0 z-40 flex bg-surface-backdrop-token ${unref(regionBackdrop)}`),
               onMousedown: onBackdropInteraction,
               onTouchstart: onBackdropInteraction
             }, null, 34)) : createCommentVNode("", true)
@@ -47674,256 +48206,60 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-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$4 = /* @__PURE__ */ defineComponent({
-  __name: "VRail",
-  props: {
-    active: {
-      type: String,
-      default: "bg-secondary-active-token"
-    },
-    hover: {
-      type: String,
-      default: "hover:bg-secondary-hover-token"
-    },
-    regionLead: {
-      type: String,
-      default: ""
-    },
-    regionDefault: {
-      type: String,
-      default: ""
-    },
-    regionTrail: {
-      type: String,
-      default: ""
-    }
-  },
-  setup(__props) {
-    const props = __props;
-    provide("active", props.active);
-    provide("hover", props.hover);
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$3, [
-        createElementVNode("div", {
-          class: normalizeClass(["v-bar-lead", __props.regionLead])
-        }, [
-          renderSlot(_ctx.$slots, "lead")
-        ], 2),
-        createElementVNode("div", {
-          class: normalizeClass(["v-bar-default", __props.regionDefault])
-        }, [
-          renderSlot(_ctx.$slots, "default")
-        ], 2),
-        createElementVNode("div", {
-          class: normalizeClass(["v-bar-trail", __props.regionTrail])
-        }, [
-          renderSlot(_ctx.$slots, "trail")
-        ], 2)
-      ]);
-    };
-  }
-});
-const _sfc_main$3 = /* @__PURE__ */ defineComponent({
-  __name: "VRailTile",
-  props: {
-    value: {
-      type: String,
-      default: ""
-    },
-    tag: {
-      type: String,
-      default: "button"
-    },
-    label: {
-      type: String,
-      default: ""
-    },
-    regionIcon: {
-      type: String,
-      default: ""
-    },
-    regionLabel: {
-      type: String,
-      default: ""
-    }
-  },
-  emits: ["click"],
-  setup(__props, { emit }) {
-    const props = __props;
-    const attrs = useAttrs();
-    const { selectedRailTile: selectedRailTile2 } = useRail();
-    const active = inject("active");
-    const hover = inject("hover");
-    const activate = () => {
-      selectedRailTile2.value = props.value;
-      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 (_ctx, _cache) => {
-      return openBlock(), createBlock(resolveDynamicComponent(__props.tag), mergeProps({
-        onClick: clickHandler,
-        onKeydown: keydownHandler,
-        onKeyup: keyupHandler
-      }, unref(attrs), {
-        class: `app-rail-tile unstyled 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)}` : ""}`
-      }), {
-        default: withCtx(() => [
-          _ctx.$slots.default ? (openBlock(), createElementBlock("div", {
-            key: 0,
-            class: normalizeClass(`app-rail-tile-icon ${__props.regionIcon}`)
-          }, [
-            renderSlot(_ctx.$slots, "default")
-          ], 2)) : createCommentVNode("", true),
-          __props.label ? (openBlock(), createElementBlock("div", {
-            key: 1,
-            class: normalizeClass(`app-rail-tile-label text-center text-xs font-bold ${__props.regionLabel}`)
-          }, toDisplayString(__props.label), 3)) : createCommentVNode("", true)
-        ]),
-        _: 3
-      }, 16, ["class"]);
-    };
-  }
-});
-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$2 = defineComponent({
-  __name: "VShell",
-  props: {
-    regionPage: { type: String, default: "" },
-    slotFixedHeader: { type: String, default: "z-10" },
-    slotSidebarLeft: { type: String, default: "w-auto" },
-    slotSidebarRight: { type: String, default: "w-auto" },
-    slotPageHeader: { type: String, default: "" },
-    slotPageContent: { type: String, default: "" },
-    slotPageFooter: { type: String, default: "" },
-    slotFixedFooter: { type: String, default: "" }
-  },
-  setup(__props) {
-    return (_ctx, _cache) => {
-      var _a;
-      return openBlock(), createElementBlock("div", _hoisted_1$2, [
-        _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, [
-          _ctx.$slots.sidebarLeft ? (openBlock(), createElementBlock("aside", {
-            key: 0,
-            class: normalizeClass(`vuetiful-sidebar-left overflow-y-auto overflow-x-hidden ${__props.slotSidebarLeft}`)
-          }, [
-            renderSlot(_ctx.$slots, "sidebarLeft")
-          ], 2)) : createCommentVNode("", true),
-          createElementVNode("div", {
-            tabindex: "-1",
-            class: normalizeClass(`vuetiful-page flex flex-1 flex-col overflow-x-hidden ${(_a = __props.regionPage) != null ? _a : ""}`)
-          }, [
-            _ctx.$slots.pageHeader ? (openBlock(), createElementBlock("header", {
-              key: 0,
-              class: normalizeClass(`vuetiful-page-header flex-none ${__props.slotPageHeader}`)
-            }, [
-              renderSlot(_ctx.$slots, "pageHeader")
-            ], 2)) : createCommentVNode("", true),
-            createElementVNode("main", {
-              class: normalizeClass(`vuetiful-page-content flex-auto ${__props.slotPageContent}`)
-            }, [
-              renderSlot(_ctx.$slots, "default")
-            ], 2),
-            _ctx.$slots.pageFooter ? (openBlock(), createElementBlock("footer", {
-              key: 1,
-              class: normalizeClass(`vuetiful-page-footer flex-none ${__props.slotPageFooter}`)
-            }, [
-              renderSlot(_ctx.$slots, "pageFooter")
-            ], 2)) : createCommentVNode("", true)
-          ], 2),
-          _ctx.$slots.sidebarRight ? (openBlock(), createElementBlock("aside", {
-            key: 1,
-            class: normalizeClass(`vuetiful-sidebar-right flex-none overflow-y-auto overflow-x-hidden ${__props.slotSidebarRight}`)
-          }, [
-            renderSlot(_ctx.$slots, "sidebarRight")
-          ], 2)) : createCommentVNode("", true)
-        ]),
-        _ctx.$slots.fixedFooter ? (openBlock(), createElementBlock("footer", {
-          key: 1,
-          class: normalizeClass(`vuetiful-fixed-footer ${__props.slotFixedFooter}`)
-        }, [
-          renderSlot(_ctx.$slots, "fixedFooter")
-        ], 2)) : createCommentVNode("", true)
-      ]);
-    };
-  }
-});
 var VPreview_vue_vue_type_style_index_0_scoped_true_lang = "";
-const _withScopeId = (n2) => (pushScopeId("data-v-0d055d3d"), n2 = n2(), popScopeId(), n2);
-const _hoisted_1$1 = { class: "vuetiful-previewer overflow-hidden shadow-2xl shadow-surface-500/10 rounded-container-token dark:shadow-black/10" };
-const _hoisted_2$1 = { class: "flex items-center gap-2" };
-const _hoisted_3$1 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createElementVNode("svg", {
+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", {
   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(() => /* @__PURE__ */ createElementVNode("svg", {
+const _hoisted_4$1 = /* @__PURE__ */ _withScopeId$1(() => /* @__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(() => /* @__PURE__ */ createElementVNode("svg", {
+const _hoisted_5$1 = /* @__PURE__ */ _withScopeId$1(() => /* @__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(() => /* @__PURE__ */ createElementVNode("svg", {
+const _hoisted_6$1 = /* @__PURE__ */ _withScopeId$1(() => /* @__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(() => /* @__PURE__ */ createElementVNode("svg", {
+const _hoisted_7 = /* @__PURE__ */ _withScopeId$1(() => /* @__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(() => /* @__PURE__ */ createElementVNode("svg", {
+const _hoisted_8 = /* @__PURE__ */ _withScopeId$1(() => /* @__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(() => /* @__PURE__ */ createElementVNode("svg", {
+const _hoisted_9 = /* @__PURE__ */ _withScopeId$1(() => /* @__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$1 = /* @__PURE__ */ defineComponent({
+const _sfc_main$c = /* @__PURE__ */ defineComponent({
   __name: "VPreview",
   props: {
     hideMobileToggle: {
@@ -47979,29 +48315,29 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     const swatches = ref(false);
     const toggleSwatches = () => swatches.value = !swatches.value;
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$1, [
+      return openBlock(), createElementBlock("div", _hoisted_1$4, [
         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$1, [
-            createVNode(unref(_sfc_main$c), {
+          createElementVNode("div", _hoisted_2$3, [
+            createVNode(unref(_sfc_main$k), {
               modelValue: tabView.value,
               "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => tabView.value = $event)
             }, {
               default: withCtx(() => [
-                createVNode(unref(_sfc_main$b), {
+                createVNode(unref(_sfc_main$j), {
                   "data-test": "radio-item-preview",
                   value: "preview",
                   title: "Preview"
                 }, {
                   default: withCtx(() => [
                     renderSlot(_ctx.$slots, "preview-item", {}, () => [
-                      _hoisted_3$1
+                      _hoisted_3$2
                     ], true)
                   ]),
                   _: 3
                 }),
-                createVNode(unref(_sfc_main$b), {
+                createVNode(unref(_sfc_main$j), {
                   "data-test": "radio-item-code",
                   value: "code",
                   title: "Code"
@@ -48016,14 +48352,14 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
               ]),
               _: 3
             }, 8, ["modelValue"]),
-            !__props.hideMobileToggle && tabView.value === "preview" ? (openBlock(), createBlock(unref(_sfc_main$c), {
+            !__props.hideMobileToggle && tabView.value === "preview" ? (openBlock(), createBlock(unref(_sfc_main$k), {
               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$b), {
+                createVNode(unref(_sfc_main$j), {
                   "data-test": "radio-item-mobile",
                   value: "mobile"
                 }, {
@@ -48034,7 +48370,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
                   ]),
                   _: 3
                 }),
-                createVNode(unref(_sfc_main$b), { value: "full" }, {
+                createVNode(unref(_sfc_main$j), { value: "full" }, {
                   default: withCtx(() => [
                     renderSlot(_ctx.$slots, "desktop-item", {}, () => [
                       _hoisted_6$1
@@ -48046,7 +48382,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
               _: 3
             }, 8, ["modelValue"])) : createCommentVNode("", true)
           ]),
-          !__props.hideSwatches ? (openBlock(), createBlock(unref(_sfc_main$h), {
+          !__props.hideSwatches ? (openBlock(), createBlock(unref(_sfc_main$p), {
             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`),
@@ -48061,7 +48397,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
             _: 3
           }, 8, ["class"])) : createCommentVNode("", true)
         ], 2),
-        swatches.value ? (openBlock(), createBlock(unref(_sfc_main$c), {
+        swatches.value ? (openBlock(), createBlock(unref(_sfc_main$k), {
           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`),
@@ -48072,7 +48408,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
         }, {
           default: withCtx(() => [
             (openBlock(true), createElementBlock(Fragment, null, renderList(Object.entries(backgrounds), ([key, value], index2) => {
-              return openBlock(), createBlock(unref(_sfc_main$b), {
+              return openBlock(), createBlock(unref(_sfc_main$j), {
                 value: key,
                 key: index2,
                 class: normalizeClass(`${value} flex aspect-square cursor-pointer items-center justify-center rounded ring-[1px] ring-surface-500/50`),
@@ -48125,36 +48461,641 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-var VPreview = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-0d055d3d"]]);
+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({
+  __name: "VRail",
+  props: {
+    active: {
+      type: String,
+      default: "bg-secondary-active-token"
+    },
+    hover: {
+      type: String,
+      default: "hover:bg-secondary-hover-token"
+    },
+    regionLead: {
+      type: String,
+      default: ""
+    },
+    regionDefault: {
+      type: String,
+      default: ""
+    },
+    regionTrail: {
+      type: String,
+      default: ""
+    }
+  },
+  setup(__props) {
+    const props = __props;
+    provide("active", props.active);
+    provide("hover", props.hover);
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1$3, [
+        createElementVNode("div", {
+          class: normalizeClass(["v-bar-lead", __props.regionLead])
+        }, [
+          renderSlot(_ctx.$slots, "lead")
+        ], 2),
+        createElementVNode("div", {
+          class: normalizeClass(["v-bar-default", __props.regionDefault])
+        }, [
+          renderSlot(_ctx.$slots, "default")
+        ], 2),
+        createElementVNode("div", {
+          class: normalizeClass(["v-bar-trail", __props.regionTrail])
+        }, [
+          renderSlot(_ctx.$slots, "trail")
+        ], 2)
+      ]);
+    };
+  }
+});
+const _sfc_main$a = /* @__PURE__ */ defineComponent({
+  __name: "VRailTile",
+  props: {
+    value: {
+      type: String,
+      default: ""
+    },
+    tag: {
+      type: String,
+      default: "button"
+    },
+    label: {
+      type: String,
+      default: ""
+    },
+    regionIcon: {
+      type: String,
+      default: ""
+    },
+    regionLabel: {
+      type: String,
+      default: ""
+    }
+  },
+  emits: ["click"],
+  setup(__props, { emit }) {
+    const props = __props;
+    const attrs = useAttrs();
+    const { selectedRailTile: selectedRailTile2 } = useRail();
+    const active = inject("active");
+    const hover = inject("hover");
+    const activate = () => {
+      selectedRailTile2.value = props.value;
+      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 (_ctx, _cache) => {
+      return openBlock(), createBlock(resolveDynamicComponent(__props.tag), mergeProps({
+        onClick: clickHandler,
+        onKeydown: keydownHandler,
+        onKeyup: keyupHandler
+      }, unref(attrs), {
+        class: `app-rail-tile unstyled 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)}` : ""}`
+      }), {
+        default: withCtx(() => [
+          _ctx.$slots.default ? (openBlock(), createElementBlock("div", {
+            key: 0,
+            class: normalizeClass(`app-rail-tile-icon ${__props.regionIcon}`)
+          }, [
+            renderSlot(_ctx.$slots, "default")
+          ], 2)) : createCommentVNode("", true),
+          __props.label ? (openBlock(), createElementBlock("div", {
+            key: 1,
+            class: normalizeClass(`app-rail-tile-label text-center text-xs font-bold ${__props.regionLabel}`)
+          }, toDisplayString(__props.label), 3)) : createCommentVNode("", true)
+        ]),
+        _: 3
+      }, 16, ["class"]);
+    };
+  }
+});
+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({
+  __name: "VShell",
+  props: {
+    regionPage: { type: String, default: "" },
+    slotFixedHeader: { type: String, default: "z-10" },
+    slotSidebarLeft: { type: String, default: "w-auto" },
+    slotSidebarRight: { type: String, default: "w-auto" },
+    slotPageHeader: { type: String, default: "" },
+    slotPageContent: { type: String, default: "" },
+    slotPageFooter: { type: String, default: "" },
+    slotFixedFooter: { type: String, default: "" }
+  },
+  setup(__props) {
+    return (_ctx, _cache) => {
+      var _a;
+      return openBlock(), createElementBlock("div", _hoisted_1$2, [
+        _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, [
+          _ctx.$slots.sidebarLeft ? (openBlock(), createElementBlock("aside", {
+            key: 0,
+            class: normalizeClass(`vuetiful-sidebar-left overflow-y-auto overflow-x-hidden ${__props.slotSidebarLeft}`)
+          }, [
+            renderSlot(_ctx.$slots, "sidebarLeft")
+          ], 2)) : createCommentVNode("", true),
+          createElementVNode("div", {
+            tabindex: "-1",
+            class: normalizeClass(`vuetiful-page flex flex-1 flex-col overflow-x-hidden ${(_a = __props.regionPage) != null ? _a : ""}`)
+          }, [
+            _ctx.$slots.pageHeader ? (openBlock(), createElementBlock("header", {
+              key: 0,
+              class: normalizeClass(`vuetiful-page-header flex-none ${__props.slotPageHeader}`)
+            }, [
+              renderSlot(_ctx.$slots, "pageHeader")
+            ], 2)) : createCommentVNode("", true),
+            createElementVNode("main", {
+              class: normalizeClass(`vuetiful-page-content flex-auto ${__props.slotPageContent}`)
+            }, [
+              renderSlot(_ctx.$slots, "default")
+            ], 2),
+            _ctx.$slots.pageFooter ? (openBlock(), createElementBlock("footer", {
+              key: 1,
+              class: normalizeClass(`vuetiful-page-footer flex-none ${__props.slotPageFooter}`)
+            }, [
+              renderSlot(_ctx.$slots, "pageFooter")
+            ], 2)) : createCommentVNode("", true)
+          ], 2),
+          _ctx.$slots.sidebarRight ? (openBlock(), createElementBlock("aside", {
+            key: 1,
+            class: normalizeClass(`vuetiful-sidebar-right flex-none overflow-y-auto overflow-x-hidden ${__props.slotSidebarRight}`)
+          }, [
+            renderSlot(_ctx.$slots, "sidebarRight")
+          ], 2)) : createCommentVNode("", true)
+        ]),
+        _ctx.$slots.fixedFooter ? (openBlock(), createElementBlock("footer", {
+          key: 1,
+          class: normalizeClass(`vuetiful-fixed-footer ${__props.slotFixedFooter}`)
+        }, [
+          renderSlot(_ctx.$slots, "fixedFooter")
+        ], 2)) : createCommentVNode("", true)
+      ]);
+    };
+  }
+});
+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", {
+  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", {
+  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({
+  __name: "VListboxButton",
+  props: {
+    as: {
+      type: String,
+      default: "button"
+    },
+    hideIcon: {
+      type: Boolean,
+      default: false
+    }
+  },
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(Fe), {
+        as: __props.as,
+        class: "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$1, [
+            !open ? renderSlot(_ctx.$slots, "open-icon", { key: 0 }, () => [
+              _hoisted_2$1
+            ], true) : createCommentVNode("", true),
+            open ? renderSlot(_ctx.$slots, "close-icon", { key: 1 }, () => [
+              _hoisted_3$1
+            ], true) : createCommentVNode("", true)
+          ])) : createCommentVNode("", true)
+        ]),
+        _: 3
+      }, 8, ["as"]);
+    };
+  }
+});
+var VListboxButton = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["__scopeId", "data-v-85546624"]]);
+const _sfc_main$7 = /* @__PURE__ */ defineComponent({
+  __name: "VListboxItems",
+  props: {
+    as: {
+      type: String,
+      default: "ul"
+    },
+    static: {
+      type: Boolean,
+      default: false
+    }
+  },
+  setup(__props) {
+    const background = inject("background");
+    const text = inject("text");
+    const horizontal = inject("horizontal");
+    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)}`)
+      }, {
+        default: withCtx(() => [
+          createElementVNode("div", {
+            "data-test": "listbox-items",
+            class: normalizeClass(`flex ${unref(horizontal) ? "flex" : "flex-col"} gap-1`)
+          }, [
+            renderSlot(_ctx.$slots, "default")
+          ], 2)
+        ]),
+        _: 3
+      }, 8, ["as", "static", "class"]);
+    };
+  }
+});
+const _sfc_main$6 = /* @__PURE__ */ defineComponent({
+  __name: "VListboxLabel",
+  props: {
+    as: {
+      type: String,
+      default: "label"
+    }
+  },
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(Ae), { as: __props.as }, {
+        default: withCtx(() => [
+          renderSlot(_ctx.$slots, "default")
+        ]),
+        _: 3
+      }, 8, ["as"]);
+    };
+  }
+});
+const _sfc_main$5 = /* @__PURE__ */ defineComponent({
+  __name: "VListbox",
+  props: {
+    by: {
+      type: String
+    },
+    display: {
+      type: String
+    },
+    labelText: {
+      type: String
+    },
+    labelClasses: {
+      type: Boolean,
+      default: false
+    },
+    buttonText: {
+      type: String,
+      default: "Select an option"
+    },
+    modelValue: je.props["modelValue"],
+    horizontal: {
+      type: Boolean,
+      default: false
+    },
+    multiple: {
+      type: Boolean,
+      default: false
+    },
+    active: {
+      type: String,
+      default: "variant-filled"
+    },
+    hover: {
+      type: String,
+      default: "variant-ghost"
+    },
+    background: {
+      type: String,
+      default: "bg-surface-200-700-token"
+    },
+    text: {
+      type: String,
+      default: "text-surface-900 dark:text-surface-50"
+    }
+  },
+  emits: ["update:modelValue"],
+  setup(__props, { emit }) {
+    const props = __props;
+    const parentModelValue = ref(props.modelValue);
+    watch(
+      () => props.modelValue,
+      (newValue) => {
+        parentModelValue.value = newValue;
+      }
+    );
+    watch(
+      () => parentModelValue.value,
+      (newValue) => {
+        emit("update:modelValue", newValue);
+      }
+    );
+    provide("active", props.active);
+    provide("hover", props.hover);
+    provide("background", props.background);
+    provide("text", props.text);
+    provide("horizontal", props.horizontal);
+    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;
+      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 (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(je), {
+        "data-test": "v-listbox",
+        as: "div",
+        by: __props.by,
+        multiple: __props.multiple,
+        class: "vuetiful-listbox 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$6, {
+            key: 0,
+            class: normalizeClass(__props.labelClasses)
+          }, {
+            default: withCtx(() => [
+              createTextVNode(toDisplayString(__props.labelText), 1)
+            ]),
+            _: 1
+          }, 8, ["class"])) : createCommentVNode("", true),
+          createVNode(VListboxButton, { "data-test": "v-listbox-button" }, {
+            default: withCtx(() => [
+              createTextVNode(toDisplayString(unref(showText)), 1)
+            ]),
+            _: 1
+          }),
+          createVNode(Transition, {
+            "enter-active-class": "transition duration-150 ease-in-out",
+            "enter-from-class": "opacity-0",
+            "enter-to-class": "opacity-100",
+            "leave-active-class": "transition duration-150 ease-in-out",
+            "leave-from-class": "opacity-100",
+            "leave-to-class": "opacity-0"
+          }, {
+            default: withCtx(() => [
+              createVNode(_sfc_main$7, { class: "absolute mt-1 min-w-full" }, {
+                default: withCtx(() => [
+                  renderSlot(_ctx.$slots, "default")
+                ]),
+                _: 3
+              })
+            ]),
+            _: 3
+          })
+        ]),
+        _: 3
+      }, 8, ["by", "multiple", "modelValue"]);
+    };
+  }
+});
+const _sfc_main$4 = /* @__PURE__ */ defineComponent({
+  __name: "VListboxItem",
+  props: {
+    value: {
+      type: [String, Number, Boolean, Object],
+      required: true
+    }
+  },
+  setup(__props) {
+    const activeClass = inject("active");
+    const hoverClass = inject("hover");
+    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) : ""}`)
+          }, [
+            renderSlot(_ctx.$slots, "default")
+          ], 2)
+        ]),
+        _: 3
+      }, 8, ["value"]);
+    };
+  }
+});
+const _sfc_main$3 = /* @__PURE__ */ defineComponent({
+  __name: "VTab",
+  props: {
+    disabled: {
+      type: Boolean,
+      default: false
+    }
+  },
+  setup(__props) {
+    const activeClass = inject("active");
+    const hoverClass = inject("hover");
+    const vertical = inject("vertical");
+    const classTab = inject("classTab");
+    const hideSeparator = inject("hideSeparator");
+    const tabClass = computed(() => {
+      return classTab ? classTab : "w-full px-4 py-2";
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(ye), {
+        disabled: __props.disabled,
+        class: normalizeClass(`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)}`)
+          }, [
+            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"}`)
+          }, null, 2), [
+            [vShow, selected && !unref(hideSeparator)]
+          ])
+        ]),
+        _: 3
+      }, 8, ["disabled", "class"]);
+    };
+  }
+});
+const _sfc_main$2 = /* @__PURE__ */ defineComponent({
+  __name: "VTabPanel",
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(ge), null, {
+        default: withCtx(() => [
+          renderSlot(_ctx.$slots, "default")
+        ]),
+        _: 3
+      });
+    };
+  }
+});
+const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+  __name: "VTabs",
+  props: {
+    hideSeparator: {
+      type: Boolean,
+      default: false
+    },
+    vertical: {
+      type: Boolean,
+      default: false
+    },
+    active: {
+      type: String,
+      default: ""
+    },
+    hover: {
+      type: String,
+      default: "hover:variant-ghost"
+    },
+    classPanels: {
+      type: String,
+      default: ""
+    },
+    classTabs: {
+      type: String,
+      default: ""
+    },
+    classTab: {
+      type: String,
+      default: ""
+    },
+    classSeparator: {
+      type: String,
+      default: "border border-surface-400-500-token"
+    },
+    defaultIndex: {
+      type: Number,
+      default: 0
+    }
+  },
+  setup(__props) {
+    const props = __props;
+    provide("active", props.active);
+    provide("hover", props.hover);
+    provide("vertical", props.vertical);
+    provide("classTab", props.classTab);
+    provide("hideSeparator", props.hideSeparator);
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(xe), {
+        as: "div",
+        vertical: __props.vertical,
+        defaultIndex: __props.defaultIndex,
+        class: normalizeClass(`${__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}`)
+          }, {
+            default: withCtx(() => [
+              renderSlot(_ctx.$slots, "tabs")
+            ]),
+            _: 3
+          }, 8, ["class"]),
+          !__props.hideSeparator ? (openBlock(), createElementBlock("div", {
+            key: 0,
+            "data-test": "vuetiful-tab-separator",
+            class: normalizeClass(`${__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}`)
+          }, {
+            default: withCtx(() => [
+              renderSlot(_ctx.$slots, "default")
+            ]),
+            _: 3
+          }, 8, ["class"])
+        ]),
+        _: 3
+      }, 8, ["vertical", "defaultIndex", "class"]);
+    };
+  }
+});
 var components = /* @__PURE__ */ Object.freeze({
   __proto__: null,
   [Symbol.toStringTag]: "Module",
-  VAvatar: _sfc_main$j,
-  VButton: _sfc_main$h,
+  VAvatar: _sfc_main$r,
+  VButton: _sfc_main$p,
   VBadge,
   VChip,
-  VCodeBlock: _sfc_main$f,
+  VCodeBlock: _sfc_main$n,
   VLightSwitch,
-  VRadioGroup: _sfc_main$c,
-  VRadioItem: _sfc_main$b,
-  VRadioLabel: _sfc_main$a,
-  VRadioDescription: _sfc_main$d,
-  VSwitchGroup: _sfc_main$7,
-  VSwitchLabel: _sfc_main$6,
-  VSwitchDescription: _sfc_main$8,
-  VSwitch: _sfc_main$9,
-  VRail: _sfc_main$4,
-  VRailTile: _sfc_main$3,
-  VShell: _sfc_main$2,
-  VDrawer: _sfc_main$5,
-  VPreview
+  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,
+  VListboxButton,
+  VListboxItem: _sfc_main$4,
+  VListboxItems: _sfc_main$7,
+  VListboxLabel: _sfc_main$6,
+  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
 });
 var main = "";
 var tailwind = "";
 const _sfc_main = defineComponent({
   components: {
     VLightSwitch,
-    VButton: _sfc_main$h
+    VButton: _sfc_main$p
   },
   props: {
     bgLight: {
@@ -48394,4 +49335,4 @@ function install(app) {
   }
 }
 var index = { install };
-export { themeSwitcher as ThemeSwitcher, _sfc_main$j as VAvatar, VBadge, _sfc_main$h as VButton, VChip, _sfc_main$f as VCodeBlock, _sfc_main$5 as VDrawer, VLightSwitch, VPreview, _sfc_main$d as VRadioDescription, _sfc_main$c as VRadioGroup, _sfc_main$b as VRadioItem, _sfc_main$a as VRadioLabel, _sfc_main$4 as VRail, _sfc_main$3 as VRailTile, _sfc_main$2 as VShell, _sfc_main$9 as VSwitch, _sfc_main$8 as VSwitchDescription, _sfc_main$7 as VSwitchGroup, _sfc_main$6 as VSwitchLabel, index as default, useDarkMode, useDrawer, useHighlight, useRail, useTheme, clipboard as vClipboard };
+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 };