@varlet/ui 3.0.6 → 3.1.0-alpha.1709284240068

package/lib/varlet.cjs.js

@@ -7,7 +7,7 @@ const context = {
   enableRipple: true
 };
 const _ContextComponent = vue.reactive(context);
-var stdin_default$5U = vue.reactive(context);
+var stdin_default$5V = vue.reactive(context);
 var __defProp$x = Object.defineProperty;
 var __defProps$a = Object.defineProperties;
 var __getOwnPropDescs$a = Object.getOwnPropertyDescriptors;
@@ -70,7 +70,7 @@ var find = (arr, callback, from = "start") => {
   }
   return [null, -1];
 };
-var classes$1a = (...classes2) => classes2.map((className) => {
+var classes$1b = (...classes2) => classes2.map((className) => {
   if (isArray(className)) {
     const [condition, truthy, falsy = null] = className;
     return condition ? truthy : falsy;
@@ -216,7 +216,7 @@ function createNamespaceFn(namespace) {
     return {
       name: bigCamelize(componentName),
       n: createBEM,
-      classes: classes$1a
+      classes: classes$1b
     };
   };
 }
@@ -335,10 +335,15 @@ function useClickOutside(target, type, listener) {
   useEventListener(document, type, handler);
 }
 function onSmartUnmounted(hook) {
-  vue.onUnmounted(() => {
+  let keepalive = false;
+  vue.onDeactivated(() => {
+    keepalive = true;
     hook();
   });
-  vue.onDeactivated(() => {
+  vue.onUnmounted(() => {
+    if (keepalive) {
+      return;
+    }
     hook();
   });
 }
@@ -801,7 +806,7 @@ var __spreadValues$u = (a, b) => {
   return a;
 };
 var __spreadProps$8 = (a, b) => __defProps$8(a, __getOwnPropDescs$8(b));
-const { n: n$1o } = createNamespace("ripple");
+const { n: n$1p } = createNamespace("ripple");
 const ANIMATION_DURATION$1 = 250;
 function setStyles(element) {
   const { zIndex, position } = getStyle$1(element);
@@ -830,14 +835,14 @@ function computeRippleStyles(element, event) {
 function createRipple(event) {
   const _ripple = this._ripple;
   _ripple.removeRipple();
-  if (_ripple.disabled || _ripple.tasker || !stdin_default$5U.enableRipple) {
+  if (_ripple.disabled || _ripple.tasker || !stdin_default$5V.enableRipple) {
     return;
   }
   const task = () => {
     _ripple.tasker = null;
     const { x, y, centerX, centerY, size } = computeRippleStyles(this, event);
     const ripple = document.createElement("div");
-    ripple.classList.add(n$1o());
+    ripple.classList.add(n$1p());
     ripple.style.opacity = `0`;
     ripple.style.transform = `translate(${x}px, ${y}px) scale3d(.3, .3, .3)`;
     ripple.style.width = `${size}px`;
@@ -856,7 +861,7 @@ function createRipple(event) {
 function removeRipple() {
   const _ripple = this._ripple;
   const task = () => {
-    const ripples = this.querySelectorAll(`.${n$1o()}`);
+    const ripples = this.querySelectorAll(`.${n$1p()}`);
     if (!ripples.length) {
       return;
     }
@@ -873,7 +878,7 @@ function removeRipple() {
   _ripple.tasker ? window.setTimeout(task, 30) : task();
 }
 function forbidRippleTask() {
-  if (!supportTouch() || !stdin_default$5U.enableRipple) {
+  if (!supportTouch() || !stdin_default$5V.enableRipple) {
     return;
   }
   const _ripple = this._ripple;
@@ -946,7 +951,7 @@ const Ripple = {
   }
 };
 const _RippleComponent = Ripple;
-var stdin_default$5T = Ripple;
+var stdin_default$5U = Ripple;
 const props$1g = {
   show: Boolean,
   position: {
@@ -985,18 +990,24 @@ const props$1g = {
   onClickOverlay: defineListenerProp(),
   "onUpdate:show": defineListenerProp(),
   // internal for Dialog
-  onRouteChange: defineListenerProp()
+  onRouteChange: defineListenerProp(),
+  // internal for esc
+  onKeyEscape: defineListenerProp(),
+  closeOnKeyEscape: {
+    type: Boolean,
+    default: true
+  }
 };
 function resolveLock() {
-  const lockCounts = Object.keys(stdin_default$5U.locks).length;
+  const lockCounts = Object.keys(stdin_default$5V.locks).length;
   lockCounts <= 0 ? document.body.classList.remove("var--lock") : document.body.classList.add("var--lock");
 }
 function addLock(uid) {
-  stdin_default$5U.locks[uid] = 1;
+  stdin_default$5V.locks[uid] = 1;
   resolveLock();
 }
 function releaseLock(uid) {
-  delete stdin_default$5U.locks[uid];
+  delete stdin_default$5V.locks[uid];
   resolveLock();
 }
 function useLock(source, useSource) {
@@ -1054,19 +1065,59 @@ function useLock(source, useSource) {
   });
 }
 function useZIndex(source, count) {
-  const zIndex = vue.ref(stdin_default$5U.zIndex);
+  const zIndex = vue.ref(stdin_default$5V.zIndex);
   vue.watch(
     source,
     (newValue) => {
       if (newValue) {
-        stdin_default$5U.zIndex += process.env.NODE_ENV === "test" ? 0 : count;
-        zIndex.value = stdin_default$5U.zIndex;
+        stdin_default$5V.zIndex += process.env.NODE_ENV === "test" ? 0 : count;
+        zIndex.value = stdin_default$5V.zIndex;
       }
     },
     { immediate: true }
   );
   return { zIndex };
 }
+const stack = [];
+function useStack(activeGetter, zIndex) {
+  const { uid } = vue.getCurrentInstance();
+  vue.watch(activeGetter, (isActive) => {
+    if (isActive && !getStackItem(uid)) {
+      pushStackItem();
+    } else {
+      setTimeout(() => {
+        removeItem(stack, getStackItem(uid));
+      });
+    }
+  });
+  onSmartMounted(() => {
+    if (activeGetter()) {
+      pushStackItem();
+    }
+  });
+  onSmartUnmounted(() => {
+    removeItem(stack, getStackItem(uid));
+  });
+  function onStackTop() {
+    if (stack.length === 0) {
+      return true;
+    }
+    stack.sort((a, b) => a.zIndex.value - b.zIndex.value);
+    return stack[stack.length - 1].uid === uid;
+  }
+  function pushStackItem() {
+    if (getStackItem(uid)) {
+      return;
+    }
+    stack.push({ uid, zIndex });
+  }
+  function getStackItem(uid2) {
+    return stack.find((item) => item.uid === uid2);
+  }
+  return {
+    onStackTop
+  };
+}
 const POPUP_BIND_POPUP_ITEM_KEY = Symbol("POPUP_BIND_POPUP_ITEM_KEY");
 function usePopup() {
   const { bindParent, parentProvider, index } = useParent(POPUP_BIND_POPUP_ITEM_KEY);
@@ -1101,12 +1152,12 @@ var __spreadValues$t = (a, b) => {
   return a;
 };
 const {
-  name: name$1g,
-  n: n$1n,
-  classes: classes$19
+  name: name$1h,
+  n: n$1o,
+  classes: classes$1a
 } = createNamespace("popup");
-var stdin_default$5S = vue.defineComponent({
-  name: name$1g,
+var stdin_default$5T = vue.defineComponent({
+  name: name$1h,
   inheritAttrs: false,
   props: props$1g,
   setup(props2, {
@@ -1117,6 +1168,9 @@ var stdin_default$5S = vue.defineComponent({
     const {
       zIndex
     } = useZIndex(() => props2.show, 3);
+    const {
+      onStackTop
+    } = useStack(() => props2.show, zIndex);
     const {
       disabled
     } = useTeleport();
@@ -1130,6 +1184,7 @@ var stdin_default$5S = vue.defineComponent({
     bindPopupItems({
       show: vue.computed(() => props2.show)
     });
+    useEventListener(window, "keydown", handleKeydown);
     useRouteListener(() => call(props2.onRouteChange));
     function hidePopup() {
       const {
@@ -1148,7 +1203,7 @@ var stdin_default$5S = vue.defineComponent({
         overlayStyle
       } = props2;
       return vue.createVNode("div", {
-        "class": classes$19(n$1n("overlay"), overlayClass),
+        "class": classes$1a(n$1o("overlay"), overlayClass),
         "style": __spreadValues$t({
           zIndex: zIndex.value - 1
         }, overlayStyle),
@@ -1157,7 +1212,7 @@ var stdin_default$5S = vue.defineComponent({
     }
     function renderContent() {
       return vue.withDirectives(vue.createVNode("div", vue.mergeProps({
-        "class": classes$19(n$1n("content"), n$1n(`--${props2.position}`), [props2.defaultStyle, n$1n("--content-background-color")], [props2.defaultStyle, n$1n("$-elevation--3")], [props2.safeArea, n$1n("--safe-area")], [props2.safeAreaTop, n$1n("--safe-area-top")]),
+        "class": classes$1a(n$1o("content"), n$1o(`--${props2.position}`), [props2.defaultStyle, n$1o("--content-background-color")], [props2.defaultStyle, n$1o("$-elevation--3")], [props2.safeArea, n$1o("--safe-area")], [props2.safeAreaTop, n$1o("--safe-area-top")]),
         "style": {
           zIndex: zIndex.value
         }
@@ -1165,22 +1220,33 @@ var stdin_default$5S = vue.defineComponent({
     }
     function renderPopup() {
       return vue.createVNode(vue.Transition, {
-        "name": n$1n("$-fade"),
+        "name": n$1o("$-fade"),
         "onAfterEnter": props2.onOpened,
         "onAfterLeave": props2.onClosed
       }, {
         default: () => [vue.withDirectives(vue.createVNode("div", {
-          "class": classes$19(n$1n("$--box"), n$1n(), [!props2.overlay, n$1n("--pointer-events-none")]),
+          "class": classes$1a(n$1o("$--box"), n$1o(), [!props2.overlay, n$1o("--pointer-events-none")]),
           "style": {
             zIndex: zIndex.value - 2
           }
         }, [props2.overlay && renderOverlay(), vue.createVNode(vue.Transition, {
-          "name": props2.transition || n$1n(`$-pop-${props2.position}`)
+          "name": props2.transition || n$1o(`$-pop-${props2.position}`)
         }, {
           default: () => [renderContent()]
         })]), [[vue.vShow, props2.show]])]
       });
     }
+    function handleKeydown(event) {
+      if (!onStackTop() || event.key !== "Escape" || !props2.show) {
+        return;
+      }
+      call(props2.onKeyEscape);
+      if (!props2.closeOnKeyEscape) {
+        return;
+      }
+      preventDefault(event);
+      call(props2["onUpdate:show"], false);
+    }
     return () => {
       const {
         teleport
@@ -1197,10 +1263,10 @@ var stdin_default$5S = vue.defineComponent({
     };
   }
 });
-withInstall(stdin_default$5S);
-withPropsDefaultsSetter(stdin_default$5S, props$1g);
-const _PopupComponent = stdin_default$5S;
-var stdin_default$5R = stdin_default$5S;
+withInstall(stdin_default$5T);
+withPropsDefaultsSetter(stdin_default$5T, props$1g);
+const _PopupComponent = stdin_default$5T;
+var stdin_default$5S = stdin_default$5T;
 const props$1f = {
   name: String,
   size: [Number, String],
@@ -1368,6 +1434,37 @@ function formatStyleVars(styleVars) {
 function padStartFlex(style) {
   return style === "start" || style === "end" ? `flex-${style}` : style;
 }
+const focusableSelector = ["button", "input", "select", "textarea", "[tabindex]", "[href]"].map((s) => `${s}:not([disabled])`).join(", ");
+function focusChildElementByKey(hostElement, parentElement, key) {
+  var _a;
+  const focusableElements = parentElement.querySelectorAll(focusableSelector);
+  if (!focusableElements.length) {
+    return;
+  }
+  const isActiveHostElement = [hostElement, ...Array.from(hostElement.querySelectorAll(focusableSelector))].findIndex(
+    (el) => el === document.activeElement
+  ) !== -1;
+  const activeElementIndex = Array.from(focusableElements).findIndex((el) => el === document.activeElement);
+  if (key === "ArrowDown") {
+    if (isActiveHostElement && activeElementIndex === -1 || activeElementIndex === focusableElements.length - 1) {
+      focusableElements[0].focus();
+      return;
+    }
+    if (activeElementIndex !== -1 && activeElementIndex < focusableElements.length - 1) {
+      focusableElements[activeElementIndex + 1].focus();
+      return;
+    }
+  }
+  if (key === "ArrowUp") {
+    if (isActiveHostElement && activeElementIndex === -1 || activeElementIndex === 0) {
+      (_a = focusableElements[focusableElements.length - 1]) == null ? void 0 : _a.focus();
+      return;
+    }
+    if (activeElementIndex > 0) {
+      focusableElements[activeElementIndex - 1].focus();
+    }
+  }
+}
 var __async$g = (__this, __arguments, generator) => {
   return new Promise((resolve, reject) => {
     var fulfilled = (value) => {
@@ -1388,8 +1485,8 @@ var __async$g = (__this, __arguments, generator) => {
     step((generator = generator.apply(__this, __arguments)).next());
   });
 };
-const { name: name$1f, n: n$1m, classes: classes$18 } = createNamespace("icon");
-function __render__$1m(_ctx, _cache) {
+const { name: name$1g, n: n$1n, classes: classes$19 } = createNamespace("icon");
+function __render__$1n(_ctx, _cache) {
   return vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.isURL(_ctx.name) ? "img" : "i"), {
     class: vue.normalizeClass(
       _ctx.classes(
@@ -1411,8 +1508,8 @@ function __render__$1m(_ctx, _cache) {
     onClick: _ctx.onClick
   }, null, 8, ["class", "style", "src", "onClick"]);
 }
-const __sfc__$1n = vue.defineComponent({
-  name: name$1f,
+const __sfc__$1o = vue.defineComponent({
+  name: name$1g,
   props: props$1f,
   setup(props2) {
     const nextName = vue.ref("");
@@ -1438,20 +1535,249 @@ const __sfc__$1n = vue.defineComponent({
     return {
       nextName,
       animateInProgress,
-      n: n$1m,
-      classes: classes$18,
+      n: n$1n,
+      classes: classes$19,
       isURL,
       toNumber,
       toSizeUnit
     };
   }
 });
+__sfc__$1o.render = __render__$1n;
+var stdin_default$5R = __sfc__$1o;
+withInstall(stdin_default$5R);
+withPropsDefaultsSetter(stdin_default$5R, props$1f);
+const _IconComponent = stdin_default$5R;
+var stdin_default$5Q = stdin_default$5R;
+const props$1e = {
+  hovering: Boolean,
+  focusing: Boolean
+};
+const { name: name$1f, n: n$1m, classes: classes$18 } = createNamespace("hover-overlay");
+function __render__$1m(_ctx, _cache) {
+  return vue.openBlock(), vue.createElementBlock(
+    "div",
+    {
+      class: vue.normalizeClass(_ctx.classes(_ctx.n(), [_ctx.hovering, _ctx.n("--hovering")], [_ctx.focusing && !_ctx.inMobile(), _ctx.n("--focusing")]))
+    },
+    null,
+    2
+    /* CLASS */
+  );
+}
+const __sfc__$1n = vue.defineComponent({
+  name: name$1f,
+  props: props$1e,
+  setup: () => ({
+    n: n$1m,
+    classes: classes$18,
+    inMobile
+  })
+});
 __sfc__$1n.render = __render__$1m;
-var stdin_default$5Q = __sfc__$1n;
-withInstall(stdin_default$5Q);
-withPropsDefaultsSetter(stdin_default$5Q, props$1f);
-const _IconComponent = stdin_default$5Q;
-var stdin_default$5P = stdin_default$5Q;
+var stdin_default$5P = __sfc__$1n;
+withInstall(stdin_default$5P);
+withPropsDefaultsSetter(stdin_default$5P, props$1e);
+function useHoverOverlay() {
+  const hovering = vue.ref(false);
+  const handleHovering = (value) => {
+    hovering.value = value;
+  };
+  return {
+    hovering,
+    handleHovering
+  };
+}
+const _HoverOverlayComponent = stdin_default$5P;
+var stdin_default$5O = stdin_default$5P;
+function shouldDisabled(arg) {
+  if (!arg) {
+    return false;
+  }
+  if (arg === "desktop" && inMobile()) {
+    return true;
+  }
+  if (arg === "mobile" && !inMobile()) {
+    return true;
+  }
+  return false;
+}
+function getStyle(element) {
+  const style = element.getAttribute("style");
+  if (!style)
+    return {};
+  return style.split(";").filter(Boolean).reduce((style2, item) => {
+    const [key, value] = item.split(":").map((item2) => item2.trim());
+    style2[camelize(key)] = value;
+    return style2;
+  }, {});
+}
+function updateRawStyle(element) {
+  const { value } = element._hover;
+  const style = getStyle(element);
+  Object.keys(value).forEach((key) => {
+    const camelizedKey = camelize(key);
+    const styleValue = value[camelizedKey];
+    if (styleValue != null && style[camelizedKey]) {
+      element._hover.rawStyle[camelizedKey] = style[camelizedKey];
+    }
+  });
+}
+function updateStyle(element, styleValue) {
+  Object.keys(styleValue).forEach((key) => {
+    const value = styleValue[key];
+    if (value != null) {
+      element.style[key] = value;
+    }
+  });
+}
+function clearStyle(element) {
+  Object.keys(element._hover.value).forEach((key) => {
+    const value = element._hover.value[key];
+    if (value != null) {
+      element.style[key] = "";
+    }
+  });
+}
+function restoreStyle(element) {
+  clearStyle(element);
+  updateStyle(element, element._hover.rawStyle);
+}
+function createHover() {
+  const { value } = this._hover;
+  this._hover.hovering = true;
+  if (isFunction(value)) {
+    value(this._hover.hovering);
+    return;
+  }
+  updateStyle(this, value);
+}
+function removeHover() {
+  this._hover.hovering = false;
+  if (isFunction(this._hover.value)) {
+    this._hover.value(this._hover.hovering);
+    return;
+  }
+  restoreStyle(this);
+}
+function mounted$1(element, binding) {
+  var _a, _b;
+  const { arg, value } = binding;
+  if (shouldDisabled(arg)) {
+    return;
+  }
+  element._hover = {
+    value,
+    hovering: (_b = (_a = element._hover) == null ? void 0 : _a.hovering) != null ? _b : false,
+    rawStyle: {}
+  };
+  updateRawStyle(element);
+  element.addEventListener("mouseenter", createHover);
+  element.addEventListener("mouseleave", removeHover);
+}
+function unmounted(element, binding) {
+  if (shouldDisabled(binding.arg)) {
+    return;
+  }
+  restoreStyle(element);
+  element.removeEventListener("mouseenter", createHover);
+  element.removeEventListener("mouseleave", removeHover);
+}
+function beforeUpdate(element, binding) {
+  if (!element._hover) {
+    return;
+  }
+  unmounted(element, binding);
+}
+function shouldUpdateStyle(element, binding) {
+  return !isFunction(binding.value) && element._hover.hovering;
+}
+function updated$1(element, binding) {
+  mounted$1(element, binding);
+  if (shouldUpdateStyle(element, binding)) {
+    updateStyle(element, binding.value);
+  }
+}
+const Hover = {
+  mounted: mounted$1,
+  unmounted,
+  beforeUpdate,
+  updated: updated$1,
+  install(app) {
+    app.directive("hover", this);
+  }
+};
+const _HoverComponent = Hover;
+var stdin_default$5N = Hover;
+const { name: name$1e, n: n$1l, classes: classes$17 } = createNamespace("action-sheet");
+function __render__$1l(_ctx, _cache) {
+  const _component_var_icon = vue.resolveComponent("var-icon");
+  const _component_var_hover_overlay = vue.resolveComponent("var-hover-overlay");
+  const _directive_ripple = vue.resolveDirective("ripple");
+  const _directive_hover = vue.resolveDirective("hover");
+  return vue.withDirectives((vue.openBlock(), vue.createElementBlock(
+    "div",
+    {
+      class: vue.normalizeClass(_ctx.classes(_ctx.n("action-item"), _ctx.className, [_ctx.disabled, _ctx.n("--disabled")])),
+      style: vue.normalizeStyle({ color: _ctx.color })
+    },
+    [
+      _ctx.icon ? (vue.openBlock(), vue.createBlock(_component_var_icon, {
+        key: 0,
+        "var-action-sheet-cover": "",
+        class: vue.normalizeClass(_ctx.n("action-icon")),
+        namespace: _ctx.namespace,
+        name: _ctx.icon,
+        size: _ctx.iconSize
+      }, null, 8, ["class", "namespace", "name", "size"])) : vue.createCommentVNode("v-if", true),
+      vue.createElementVNode(
+        "div",
+        {
+          class: vue.normalizeClass(_ctx.n("action-name"))
+        },
+        vue.toDisplayString(_ctx.name),
+        3
+        /* TEXT, CLASS */
+      ),
+      vue.createVNode(_component_var_hover_overlay, {
+        hovering: _ctx.disabled ? false : _ctx.hovering
+      }, null, 8, ["hovering"])
+    ],
+    6
+    /* CLASS, STYLE */
+  )), [
+    [_directive_ripple, { disabled: _ctx.disabled }],
+    [_directive_hover, _ctx.handleHovering, "desktop"]
+  ]);
+}
+const __sfc__$1m = vue.defineComponent({
+  name: name$1e,
+  components: {
+    VarHoverOverlay: stdin_default$5O,
+    VarIcon: stdin_default$5Q
+  },
+  directives: { Ripple: stdin_default$5U, Hover: stdin_default$5N },
+  props: {
+    name: String,
+    className: String,
+    disabled: Boolean,
+    color: String,
+    namespace: String,
+    iconSize: [String, Number],
+    icon: String
+  },
+  setup() {
+    const { hovering, handleHovering } = useHoverOverlay();
+    return {
+      hovering,
+      n: n$1l,
+      classes: classes$17,
+      handleHovering
+    };
+  }
+});
+__sfc__$1m.render = __render__$1l;
+var stdin_default$5M = __sfc__$1m;
 var __defProp$s = Object.defineProperty;
 var __getOwnPropSymbols$s = Object.getOwnPropertySymbols;
 var __hasOwnProp$s = Object.prototype.hasOwnProperty;
@@ -1468,7 +1794,7 @@ var __spreadValues$s = (a, b) => {
     }
   return a;
 };
-const props$1e = __spreadValues$s({
+const props$1d = __spreadValues$s({
   show: Boolean,
   title: String,
   actions: {
@@ -1495,9 +1821,12 @@ const props$1e = __spreadValues$s({
   "onClosed",
   "onClickOverlay",
   // internal for function call closes the dialog
-  "onRouteChange"
+  "onRouteChange",
+  // internal for esc
+  "closeOnKeyEscape",
+  "onKeyEscape"
 ]));
-var stdin_default$5O = {
+var stdin_default$5L = {
   // Dialog
   dialogTitle: "提示",
   dialogConfirmButtonText: "确认",
@@ -1602,7 +1931,7 @@ var stdin_default$5O = {
   // time-picker
   timePickerHint: "选择时间"
 };
-var stdin_default$5N = {
+var stdin_default$5K = {
   // Dialog
   dialogTitle: "Hint",
   dialogConfirmButtonText: "Confirm",
@@ -1707,7 +2036,7 @@ var stdin_default$5N = {
   // time-picker
   timePickerHint: "SELECT TIME"
 };
-var stdin_default$5M = {
+var stdin_default$5J = {
   // Dialog
   dialogTitle: "提示",
   dialogConfirmButtonText: "確認",
@@ -1809,8 +2138,8 @@ var stdin_default$5M = {
   paginationPage: "頁",
   paginationJump: "前往"
 };
-var stdin_default$5L = stdin_default$5M;
-var stdin_default$5K = {
+var stdin_default$5I = stdin_default$5J;
+var stdin_default$5H = {
   // Dialog
   dialogTitle: "اشاره",
   dialogConfirmButtonText: "تایید",
@@ -1969,15 +2298,15 @@ function useLocale() {
   };
 }
 const { messages, currentMessage, add: add$2, use, merge, t } = useLocale();
-add$2("zh-CN", stdin_default$5O);
+add$2("zh-CN", stdin_default$5L);
 use("zh-CN");
-const _LocaleComponent = { zhCN: stdin_default$5O, enUS: stdin_default$5N, messages, currentMessage, add: add$2, use, merge, t, useLocale };
-var stdin_default$5J = {
-  zhCN: stdin_default$5O,
-  enUS: stdin_default$5N,
-  zhTW: stdin_default$5M,
-  zhHK: stdin_default$5L,
-  faIR: stdin_default$5K,
+const _LocaleComponent = { zhCN: stdin_default$5L, enUS: stdin_default$5K, messages, currentMessage, add: add$2, use, merge, t, useLocale };
+var stdin_default$5G = {
+  zhCN: stdin_default$5L,
+  enUS: stdin_default$5K,
+  zhTW: stdin_default$5J,
+  zhHK: stdin_default$5I,
+  faIR: stdin_default$5H,
   messages,
   currentMessage,
   add: add$2,
@@ -1986,32 +2315,30 @@ var stdin_default$5J = {
   t,
   useLocale
 };
-const { name: name$1e, n: n$1l, classes: classes$17 } = createNamespace("action-sheet");
-const _hoisted_1$t = ["onClick"];
-function __render__$1l(_ctx, _cache) {
-  const _component_var_icon = vue.resolveComponent("var-icon");
+const { name: name$1d, n: n$1k, classes: classes$16 } = createNamespace("action-sheet");
+function __render__$1k(_ctx, _cache) {
+  const _component_var_action_item = vue.resolveComponent("var-action-item");
   const _component_var_popup = vue.resolveComponent("var-popup");
-  const _directive_ripple = vue.resolveDirective("ripple");
-  return vue.openBlock(), vue.createBlock(_component_var_popup, vue.mergeProps({
-    class: _ctx.n("popup-radius"),
+  return vue.openBlock(), vue.createBlock(_component_var_popup, {
     position: "bottom",
-    show: _ctx.popupShow,
+    class: vue.normalizeClass(_ctx.n("popup-radius")),
     overlay: _ctx.overlay,
     "overlay-class": _ctx.overlayClass,
     "overlay-style": _ctx.overlayStyle,
     "lock-scroll": _ctx.lockScroll,
     "close-on-click-overlay": _ctx.closeOnClickOverlay,
+    "close-on-key-escape": _ctx.closeOnKeyEscape,
     teleport: _ctx.teleport,
-    "safe-area": _ctx.safeArea
-  }, {
-    "onUpdate:show": _ctx.handlePopupUpdateShow
-  }, {
+    "safe-area": _ctx.safeArea,
+    show: _ctx.show,
+    "onUpdate:show": _cache[0] || (_cache[0] = ($event) => _ctx.show = $event),
     onOpen: _ctx.onOpen,
     onClose: _ctx.onClose,
     onClosed: _ctx.onClosed,
     onOpened: _ctx.onOpened,
-    onRouteChange: _ctx.onRouteChange
-  }), {
+    onRouteChange: _ctx.onRouteChange,
+    onKeyEscape: _ctx.onKeyEscape
+  }, {
     default: vue.withCtx(() => [
       vue.createElementVNode(
         "div",
@@ -2038,32 +2365,16 @@ function __render__$1l(_ctx, _cache) {
               vue.Fragment,
               null,
               vue.renderList(_ctx.actions, (action) => {
-                return vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", {
-                  class: vue.normalizeClass(_ctx.classes(_ctx.n("action-item"), action.className, [action.disabled, _ctx.n("--disabled")])),
+                return vue.openBlock(), vue.createBlock(_component_var_action_item, {
                   key: action.name,
-                  style: vue.normalizeStyle({ color: action.color }),
+                  name: action.name,
+                  namespace: action.namespace,
+                  icon: action.icon,
+                  "icon-size": action.iconSize,
+                  "class-name": action.className,
+                  color: action.color,
                   onClick: ($event) => _ctx.handleSelect(action)
-                }, [
-                  action.icon ? (vue.openBlock(), vue.createBlock(_component_var_icon, {
-                    key: 0,
-                    class: vue.normalizeClass(_ctx.n("action-icon")),
-                    "var-action-sheet-cover": "",
-                    namespace: action.namespace,
-                    name: action.icon,
-                    size: action.iconSize
-                  }, null, 8, ["class", "namespace", "name", "size"])) : vue.createCommentVNode("v-if", true),
-                  vue.createElementVNode(
-                    "div",
-                    {
-                      class: vue.normalizeClass(_ctx.n("action-name"))
-                    },
-                    vue.toDisplayString(action.name),
-                    3
-                    /* TEXT, CLASS */
-                  )
-                ], 14, _hoisted_1$t)), [
-                  [_directive_ripple, { disabled: action.disabled }]
-                ]);
+                }, null, 8, ["name", "namespace", "icon", "icon-size", "class-name", "color", "onClick"]);
               }),
               128
               /* KEYED_FRAGMENT */
@@ -2076,49 +2387,40 @@ function __render__$1l(_ctx, _cache) {
     ]),
     _: 3
     /* FORWARDED */
-  }, 16, ["class", "show", "overlay", "overlay-class", "overlay-style", "lock-scroll", "close-on-click-overlay", "teleport", "safe-area", "onOpen", "onClose", "onClosed", "onOpened", "onRouteChange"]);
+  }, 8, ["class", "overlay", "overlay-class", "overlay-style", "lock-scroll", "close-on-click-overlay", "close-on-key-escape", "teleport", "safe-area", "show", "onOpen", "onClose", "onClosed", "onOpened", "onRouteChange", "onKeyEscape"]);
 }
-const __sfc__$1m = vue.defineComponent({
-  name: name$1e,
-  directives: { Ripple: stdin_default$5T },
+const __sfc__$1l = vue.defineComponent({
+  name: name$1d,
+  directives: { Ripple: stdin_default$5U },
   components: {
-    VarPopup: stdin_default$5R,
-    VarIcon: stdin_default$5P
+    VarPopup: stdin_default$5S,
+    VarActionItem: stdin_default$5M
   },
   inheritAttrs: false,
-  props: props$1e,
+  props: props$1d,
   setup(props2) {
-    const popupShow = vue.ref(false);
-    vue.watch(
-      () => props2.show,
-      (newValue) => {
-        popupShow.value = newValue;
-      },
-      { immediate: true }
-    );
+    const show = useVModel(props2, "show");
     function handleSelect(action) {
       if (action.disabled) {
         return;
       }
       const { closeOnClickAction, onSelect } = props2;
       call(onSelect, action);
-      closeOnClickAction && call(props2["onUpdate:show"], false);
-    }
-    function handlePopupUpdateShow(value) {
-      call(props2["onUpdate:show"], value);
+      if (closeOnClickAction) {
+        show.value = false;
+      }
     }
     return {
-      popupShow,
+      show,
       t,
-      n: n$1l,
-      classes: classes$17,
-      handlePopupUpdateShow,
+      n: n$1k,
+      classes: classes$16,
       handleSelect
     };
   }
 });
-__sfc__$1m.render = __render__$1l;
-var stdin_default$5I = __sfc__$1m;
+__sfc__$1l.render = __render__$1k;
+var stdin_default$5F = __sfc__$1l;
 var __defProp$q = Object.defineProperty;
 var __getOwnPropSymbols$q = Object.getOwnPropertySymbols;
 var __hasOwnProp$q = Object.prototype.hasOwnProperty;
@@ -2149,7 +2451,7 @@ function ActionSheet(options) {
     const reactiveActionSheetOptions = vue.reactive(normalizeOptions$3(options));
     reactiveActionSheetOptions.teleport = "body";
     singletonOptions$3 = reactiveActionSheetOptions;
-    const { unmountInstance } = mountInstance(stdin_default$5I, reactiveActionSheetOptions, {
+    const { unmountInstance } = mountInstance(stdin_default$5F, reactiveActionSheetOptions, {
       onSelect: (action) => {
         call(reactiveActionSheetOptions.onSelect, action);
         resolve(action);
@@ -2189,13 +2491,13 @@ ActionSheet.close = function() {
     });
   }
 };
-ActionSheet.Component = stdin_default$5I;
-withInstall(stdin_default$5I);
-withInstall(stdin_default$5I, ActionSheet);
-withPropsDefaultsSetter(ActionSheet, props$1e);
-const _ActionSheetComponent = stdin_default$5I;
-var stdin_default$5H = ActionSheet;
-const props$1d = {
+ActionSheet.Component = stdin_default$5F;
+withInstall(stdin_default$5F);
+withInstall(stdin_default$5F, ActionSheet);
+withPropsDefaultsSetter(ActionSheet, props$1d);
+const _ActionSheetComponent = stdin_default$5F;
+var stdin_default$5E = ActionSheet;
+const props$1c = {
   color: String,
   textColor: String,
   title: String,
@@ -2217,8 +2519,8 @@ const props$1d = {
   },
   fixed: Boolean
 };
-const { name: name$1d, n: n$1k, classes: classes$16 } = createNamespace("app-bar");
-function __render__$1k(_ctx, _cache) {
+const { name: name$1c, n: n$1j, classes: classes$15 } = createNamespace("app-bar");
+function __render__$1j(_ctx, _cache) {
   return vue.openBlock(), vue.createElementBlock(
     "div",
     {
@@ -2329,9 +2631,9 @@ function __render__$1k(_ctx, _cache) {
     /* CLASS, STYLE */
   );
 }
-const __sfc__$1l = vue.defineComponent({
-  name: name$1d,
-  props: props$1d,
+const __sfc__$1k = vue.defineComponent({
+  name: name$1c,
+  props: props$1c,
   setup(props2, { slots }) {
     const paddingLeft = vue.ref();
     const paddingRight = vue.ref();
@@ -2362,18 +2664,18 @@ const __sfc__$1l = vue.defineComponent({
       rootStyles,
       paddingLeft,
       paddingRight,
-      n: n$1k,
-      classes: classes$16,
+      n: n$1j,
+      classes: classes$15,
       formatElevation
     };
   }
 });
-__sfc__$1l.render = __render__$1k;
-var stdin_default$5G = __sfc__$1l;
-withInstall(stdin_default$5G);
-withPropsDefaultsSetter(stdin_default$5G, props$1d);
-const _AppBarComponent = stdin_default$5G;
-var stdin_default$5F = stdin_default$5G;
+__sfc__$1k.render = __render__$1j;
+var stdin_default$5D = __sfc__$1k;
+withInstall(stdin_default$5D);
+withPropsDefaultsSetter(stdin_default$5D, props$1c);
+const _AppBarComponent = stdin_default$5D;
+var stdin_default$5C = stdin_default$5D;
 const isHTMLSupportImage = (val) => {
   if (!isString(val)) {
     return false;
@@ -2585,19 +2887,19 @@ function diff(el, binding) {
   const { src, arg } = el._lazy;
   return src !== binding.value || arg !== binding.arg;
 }
-function mounted$1(el, binding) {
+function mounted(el, binding) {
   return __async$f(this, null, function* () {
     createLazy(el, binding);
     yield add$1(el);
   });
 }
-function updated$1(el, binding) {
+function updated(el, binding) {
   return __async$f(this, null, function* () {
     if (!diff(el, binding)) {
       lazyElements.includes(el) && (yield check(el));
       return;
     }
-    yield mounted$1(el, binding);
+    yield mounted(el, binding);
   });
 }
 function mergeLazyOptions(lazyOptions = {}) {
@@ -2610,9 +2912,9 @@ function mergeLazyOptions(lazyOptions = {}) {
   defaultLazyOptions.filter = filter;
 }
 const Lazy = {
-  mounted: mounted$1,
+  mounted,
   unmounted: clear,
-  updated: updated$1,
+  updated,
   install(app, lazyOptions) {
     mergeLazyOptions(lazyOptions);
     checkAllWithThrottle = throttle(checkAll, defaultLazyOptions.throttleWait);
@@ -2620,8 +2922,8 @@ const Lazy = {
   }
 };
 const _LazyComponent = Lazy;
-var stdin_default$5E = Lazy;
-const props$1c = {
+var stdin_default$5B = Lazy;
+const props$1b = {
   round: {
     type: Boolean,
     default: true
@@ -2648,10 +2950,10 @@ const props$1c = {
   onError: defineListenerProp()
 };
 const isInternalSize$1 = (size) => ["mini", "small", "normal", "large"].includes(size);
-const { name: name$1c, n: n$1j, classes: classes$15 } = createNamespace("avatar");
-const _hoisted_1$s = ["src", "alt", "lazy-loading", "lazy-error"];
-const _hoisted_2$f = ["src", "alt"];
-function __render__$1j(_ctx, _cache) {
+const { name: name$1b, n: n$1i, classes: classes$14 } = createNamespace("avatar");
+const _hoisted_1$v = ["src", "alt", "lazy-loading", "lazy-error"];
+const _hoisted_2$g = ["src", "alt"];
+function __render__$1i(_ctx, _cache) {
   const _directive_lazy = vue.resolveDirective("lazy");
   return vue.openBlock(), vue.createElementBlock(
     "div",
@@ -2690,7 +2992,7 @@ function __render__$1j(_ctx, _cache) {
             "lazy-loading": _ctx.loading,
             "lazy-error": _ctx.error,
             onLoad: _cache[0] || (_cache[0] = (...args) => _ctx.handleLoad && _ctx.handleLoad(...args))
-          }, null, 46, _hoisted_1$s)), [
+          }, null, 46, _hoisted_1$v)), [
             [_directive_lazy, _ctx.src]
           ]) : (vue.openBlock(), vue.createElementBlock("img", {
             key: 1,
@@ -2701,7 +3003,7 @@ function __render__$1j(_ctx, _cache) {
             style: vue.normalizeStyle({ objectFit: _ctx.fit }),
             onLoad: _cache[1] || (_cache[1] = (...args) => _ctx.handleLoad && _ctx.handleLoad(...args)),
             onError: _cache[2] || (_cache[2] = (...args) => _ctx.handleError && _ctx.handleError(...args))
-          }, null, 46, _hoisted_2$f))
+          }, null, 46, _hoisted_2$g))
         ],
         64
         /* STABLE_FRAGMENT */
@@ -2724,10 +3026,10 @@ function __render__$1j(_ctx, _cache) {
     /* CLASS, STYLE */
   );
 }
-const __sfc__$1k = vue.defineComponent({
-  name: name$1c,
-  directives: { Lazy: stdin_default$5E },
-  props: props$1c,
+const __sfc__$1j = vue.defineComponent({
+  name: name$1b,
+  directives: { Lazy: stdin_default$5B },
+  props: props$1b,
   setup(props2) {
     const avatarElement = vue.ref(null);
     const textElement = vue.ref(null);
@@ -2767,8 +3069,8 @@ const __sfc__$1k = vue.defineComponent({
       avatarElement,
       textElement,
       scale,
-      n: n$1j,
-      classes: classes$15,
+      n: n$1i,
+      classes: classes$14,
       isInternalSize: isInternalSize$1,
       toSizeUnit,
       handleLoad,
@@ -2777,18 +3079,18 @@ const __sfc__$1k = vue.defineComponent({
     };
   }
 });
-__sfc__$1k.render = __render__$1j;
-var stdin_default$5D = __sfc__$1k;
-withInstall(stdin_default$5D);
-withPropsDefaultsSetter(stdin_default$5D, props$1c);
-const _AvatarComponent = stdin_default$5D;
-var stdin_default$5C = stdin_default$5D;
-const props$1b = {
+__sfc__$1j.render = __render__$1i;
+var stdin_default$5A = __sfc__$1j;
+withInstall(stdin_default$5A);
+withPropsDefaultsSetter(stdin_default$5A, props$1b);
+const _AvatarComponent = stdin_default$5A;
+var stdin_default$5z = stdin_default$5A;
+const props$1a = {
   offset: [Number, String],
   vertical: Boolean
 };
-const { name: name$1b, n: n$1i, classes: classes$14 } = createNamespace("avatar-group");
-function __render__$1i(_ctx, _cache) {
+const { name: name$1a, n: n$1h, classes: classes$13 } = createNamespace("avatar-group");
+function __render__$1h(_ctx, _cache) {
   return vue.openBlock(), vue.createElementBlock(
     "div",
     {
@@ -2802,9 +3104,9 @@ function __render__$1i(_ctx, _cache) {
     /* CLASS, STYLE */
   );
 }
-const __sfc__$1j = vue.defineComponent({
-  name: name$1b,
-  props: props$1b,
+const __sfc__$1i = vue.defineComponent({
+  name: name$1a,
+  props: props$1a,
   setup(props2) {
     const rootStyles = vue.computed(() => {
       if (props2.offset == null) {
@@ -2816,19 +3118,19 @@ const __sfc__$1j = vue.defineComponent({
     });
     return {
       rootStyles,
-      n: n$1i,
-      classes: classes$14,
+      n: n$1h,
+      classes: classes$13,
       toSizeUnit
     };
   }
 });
-__sfc__$1j.render = __render__$1i;
-var stdin_default$5B = __sfc__$1j;
-withInstall(stdin_default$5B);
-withPropsDefaultsSetter(stdin_default$5B, props$1b);
-const _AvatarGroupComponent = stdin_default$5B;
-var stdin_default$5A = stdin_default$5B;
-const props$1a = {
+__sfc__$1i.render = __render__$1h;
+var stdin_default$5y = __sfc__$1i;
+withInstall(stdin_default$5y);
+withPropsDefaultsSetter(stdin_default$5y, props$1a);
+const _AvatarGroupComponent = stdin_default$5y;
+var stdin_default$5x = stdin_default$5y;
+const props$19 = {
   type: {
     type: String,
     default: "circle"
@@ -2842,9 +3144,9 @@ const props$1a = {
   description: String,
   loading: Boolean
 };
-const { name: name$1a, n: n$1h, classes: classes$13 } = createNamespace("loading");
+const { name: name$19, n: n$1g, classes: classes$12 } = createNamespace("loading");
 const _withScopeId$6 = (n2) => (vue.pushScopeId(""), n2 = n2(), vue.popScopeId(), n2);
-const _hoisted_1$r = /* @__PURE__ */ _withScopeId$6(() => /* @__PURE__ */ vue.createElementVNode(
+const _hoisted_1$u = /* @__PURE__ */ _withScopeId$6(() => /* @__PURE__ */ vue.createElementVNode(
   "svg",
   { viewBox: "25 25 50 50" },
   [
@@ -2858,10 +3160,10 @@ const _hoisted_1$r = /* @__PURE__ */ _withScopeId$6(() => /* @__PURE__ */ vue.cr
   -1
   /* HOISTED */
 ));
-const _hoisted_2$e = [
-  _hoisted_1$r
+const _hoisted_2$f = [
+  _hoisted_1$u
 ];
-function __render__$1h(_ctx, _cache) {
+function __render__$1g(_ctx, _cache) {
   return vue.openBlock(), vue.createElementBlock(
     "div",
     {
@@ -2914,7 +3216,7 @@ function __render__$1h(_ctx, _cache) {
                     color: _ctx.color
                   })
                 },
-                [..._hoisted_2$e],
+                [..._hoisted_2$f],
                 6
                 /* CLASS, STYLE */
               )
@@ -2995,10 +3297,10 @@ function __render__$1h(_ctx, _cache) {
     2
     /* CLASS */
   );
-}
-const __sfc__$1i = vue.defineComponent({
-  name: name$1a,
-  props: props$1a,
+}
+const __sfc__$1h = vue.defineComponent({
+  name: name$19,
+  props: props$19,
   setup(props2, { slots }) {
     const isShow = vue.computed(() => {
       if (!call(slots.default)) {
@@ -3015,177 +3317,18 @@ const __sfc__$1i = vue.defineComponent({
     return {
       loadingTypeDict,
       isShow,
-      n: n$1h,
-      classes: classes$13,
+      n: n$1g,
+      classes: classes$12,
       multiplySizeUnit
     };
   }
 });
-__sfc__$1i.render = __render__$1h;
-var stdin_default$5z = __sfc__$1i;
-withInstall(stdin_default$5z);
-withPropsDefaultsSetter(stdin_default$5z, props$1a);
-const _LoadingComponent = stdin_default$5z;
-var stdin_default$5y = stdin_default$5z;
-const props$19 = {
-  hovering: Boolean,
-  focusing: Boolean
-};
-const { name: name$19, n: n$1g, classes: classes$12 } = createNamespace("hover-overlay");
-function __render__$1g(_ctx, _cache) {
-  return vue.openBlock(), vue.createElementBlock(
-    "div",
-    {
-      class: vue.normalizeClass(_ctx.classes(_ctx.n(), [_ctx.hovering, _ctx.n("--hovering")], [_ctx.focusing, _ctx.n("--focusing")]))
-    },
-    null,
-    2
-    /* CLASS */
-  );
-}
-const __sfc__$1h = vue.defineComponent({
-  name: name$19,
-  props: props$19,
-  setup: () => ({
-    n: n$1g,
-    classes: classes$12
-  })
-});
 __sfc__$1h.render = __render__$1g;
-var stdin_default$5x = __sfc__$1h;
-withInstall(stdin_default$5x);
-withPropsDefaultsSetter(stdin_default$5x, props$19);
-function useHoverOverlay() {
-  const hovering = vue.ref(false);
-  const handleHovering = (value) => {
-    hovering.value = value;
-  };
-  return {
-    hovering,
-    handleHovering
-  };
-}
-const _HoverOverlayComponent = stdin_default$5x;
-var stdin_default$5w = stdin_default$5x;
-function shouldDisabled(arg) {
-  if (!arg) {
-    return false;
-  }
-  if (arg === "desktop" && inMobile()) {
-    return true;
-  }
-  if (arg === "mobile" && !inMobile()) {
-    return true;
-  }
-  return false;
-}
-function getStyle(element) {
-  const style = element.getAttribute("style");
-  if (!style)
-    return {};
-  return style.split(";").filter(Boolean).reduce((style2, item) => {
-    const [key, value] = item.split(":").map((item2) => item2.trim());
-    style2[camelize(key)] = value;
-    return style2;
-  }, {});
-}
-function updateRawStyle(element) {
-  const { value } = element._hover;
-  const style = getStyle(element);
-  Object.keys(value).forEach((key) => {
-    const camelizedKey = camelize(key);
-    const styleValue = value[camelizedKey];
-    if (styleValue != null && style[camelizedKey]) {
-      element._hover.rawStyle[camelizedKey] = style[camelizedKey];
-    }
-  });
-}
-function updateStyle(element, styleValue) {
-  Object.keys(styleValue).forEach((key) => {
-    const value = styleValue[key];
-    if (value != null) {
-      element.style[key] = value;
-    }
-  });
-}
-function clearStyle(element) {
-  Object.keys(element._hover.value).forEach((key) => {
-    const value = element._hover.value[key];
-    if (value != null) {
-      element.style[key] = "";
-    }
-  });
-}
-function restoreStyle(element) {
-  clearStyle(element);
-  updateStyle(element, element._hover.rawStyle);
-}
-function createHover() {
-  const { value } = this._hover;
-  this._hover.hovering = true;
-  if (isFunction(value)) {
-    value(this._hover.hovering);
-    return;
-  }
-  updateStyle(this, value);
-}
-function removeHover() {
-  this._hover.hovering = false;
-  if (isFunction(this._hover.value)) {
-    this._hover.value(this._hover.hovering);
-    return;
-  }
-  restoreStyle(this);
-}
-function mounted(element, binding) {
-  var _a, _b;
-  const { arg, value } = binding;
-  if (shouldDisabled(arg)) {
-    return;
-  }
-  element._hover = {
-    value,
-    hovering: (_b = (_a = element._hover) == null ? void 0 : _a.hovering) != null ? _b : false,
-    rawStyle: {}
-  };
-  updateRawStyle(element);
-  element.addEventListener("mouseenter", createHover);
-  element.addEventListener("mouseleave", removeHover);
-}
-function unmounted(element, binding) {
-  if (shouldDisabled(binding.arg)) {
-    return;
-  }
-  restoreStyle(element);
-  element.removeEventListener("mouseenter", createHover);
-  element.removeEventListener("mouseleave", removeHover);
-}
-function beforeUpdate(element, binding) {
-  if (!element._hover) {
-    return;
-  }
-  unmounted(element, binding);
-}
-function shouldUpdateStyle(element, binding) {
-  return !isFunction(binding.value) && element._hover.hovering;
-}
-function updated(element, binding) {
-  mounted(element, binding);
-  if (shouldUpdateStyle(element, binding)) {
-    updateStyle(element, binding.value);
-  }
-}
-const Hover = {
-  mounted,
-  unmounted,
-  beforeUpdate,
-  updated,
-  install(app) {
-    app.directive("hover", this);
-  }
-};
-const _HoverComponent = Hover;
-var stdin_default$5v = Hover;
+var stdin_default$5w = __sfc__$1h;
+withInstall(stdin_default$5w);
+withPropsDefaultsSetter(stdin_default$5w, props$19);
+const _LoadingComponent = stdin_default$5w;
+var stdin_default$5v = stdin_default$5w;
 var __defProp$o = Object.defineProperty;
 var __defProps$7 = Object.defineProperties;
 var __getOwnPropDescs$7 = Object.getOwnPropertyDescriptors;
@@ -3231,9 +3374,9 @@ const props$18 = {
     default: true
   },
   loadingRadius: [Number, String],
-  loadingType: pickProps(props$1a, "type"),
-  loadingSize: pickProps(props$1a, "size"),
-  loadingColor: __spreadProps$7(__spreadValues$o({}, pickProps(props$1a, "color")), {
+  loadingType: pickProps(props$19, "type"),
+  loadingSize: pickProps(props$19, "size"),
+  loadingColor: __spreadProps$7(__spreadValues$o({}, pickProps(props$19, "color")), {
     default: "currentColor"
   }),
   onClick: defineListenerProp(),
@@ -3257,7 +3400,7 @@ function useButtonGroup() {
   };
 }
 const { name: name$18, n: n$1f, classes: classes$11 } = createNamespace("button");
-const _hoisted_1$q = ["type", "disabled"];
+const _hoisted_1$t = ["type", "disabled"];
 function __render__$1f(_ctx, _cache) {
   const _component_var_loading = vue.resolveComponent("var-loading");
   const _component_var_hover_overlay = vue.resolveComponent("var-hover-overlay");
@@ -3289,8 +3432,8 @@ function __render__$1f(_ctx, _cache) {
     disabled: _ctx.disabled,
     onClick: _cache[0] || (_cache[0] = (...args) => _ctx.handleClick && _ctx.handleClick(...args)),
     onTouchstart: _cache[1] || (_cache[1] = (...args) => _ctx.handleTouchstart && _ctx.handleTouchstart(...args)),
-    onFocus: _cache[2] || (_cache[2] = ($event) => _ctx.isEffectFocusing = true),
-    onBlur: _cache[3] || (_cache[3] = ($event) => _ctx.isEffectFocusing = false)
+    onFocus: _cache[2] || (_cache[2] = ($event) => _ctx.isFocusing = true),
+    onBlur: _cache[3] || (_cache[3] = ($event) => _ctx.isFocusing = false)
   }, [
     _ctx.loading || _ctx.pending ? (vue.openBlock(), vue.createBlock(_component_var_loading, {
       key: 0,
@@ -3314,9 +3457,9 @@ function __render__$1f(_ctx, _cache) {
     ),
     vue.createVNode(_component_var_hover_overlay, {
       hovering: _ctx.disabled || _ctx.loading || _ctx.pending ? false : _ctx.hovering,
-      focusing: _ctx.disabled || _ctx.loading || _ctx.pending ? false : _ctx.isEffectFocusing
+      focusing: _ctx.disabled || _ctx.loading || _ctx.pending ? false : _ctx.isFocusing
     }, null, 8, ["hovering", "focusing"])
-  ], 46, _hoisted_1$q)), [
+  ], 46, _hoisted_1$t)), [
     [_directive_ripple, { disabled: _ctx.disabled || !_ctx.ripple || _ctx.loading || _ctx.pending }],
     [_directive_hover, _ctx.handleHovering, "desktop"]
   ]);
@@ -3324,13 +3467,13 @@ function __render__$1f(_ctx, _cache) {
 const __sfc__$1g = vue.defineComponent({
   name: name$18,
   components: {
-    VarLoading: stdin_default$5y,
-    VarHoverOverlay: stdin_default$5w
+    VarLoading: stdin_default$5v,
+    VarHoverOverlay: stdin_default$5O
   },
-  directives: { Ripple: stdin_default$5T, Hover: stdin_default$5v },
+  directives: { Ripple: stdin_default$5U, Hover: stdin_default$5N },
   props: props$18,
   setup(props2) {
-    const isEffectFocusing = inMobile() ? vue.computed(() => false) : vue.ref(false);
+    const isFocusing = vue.ref(false);
     const pending = vue.ref(false);
     const { buttonGroup } = useButtonGroup();
     const { hovering, handleHovering } = useHoverOverlay();
@@ -3393,7 +3536,7 @@ const __sfc__$1g = vue.defineComponent({
       handleHovering,
       handleClick,
       handleTouchstart,
-      isEffectFocusing
+      isFocusing
     };
   }
 });
@@ -3465,7 +3608,7 @@ const __sfc__$1f = vue.defineComponent({
   name: name$17,
   components: {
     VarButton: stdin_default$5t,
-    VarIcon: stdin_default$5P
+    VarIcon: stdin_default$5Q
   },
   inheritAttrs: false,
   props: props$17,
@@ -3567,7 +3710,7 @@ var __spreadValues$n = (a, b) => {
   return a;
 };
 const { name: name$16, n: n$1d, classes: classes$$ } = createNamespace("badge");
-const _hoisted_1$p = { key: 0 };
+const _hoisted_1$s = { key: 0 };
 function __render__$1d(_ctx, _cache) {
   const _component_var_icon = vue.resolveComponent("var-icon");
   return vue.openBlock(), vue.createElementBlock(
@@ -3605,7 +3748,7 @@ function __render__$1d(_ctx, _cache) {
               vue.renderSlot(_ctx.$slots, "value", {}, () => [
                 !_ctx.icon && !_ctx.dot ? (vue.openBlock(), vue.createElementBlock(
                   "span",
-                  _hoisted_1$p,
+                  _hoisted_1$s,
                   vue.toDisplayString(_ctx.value),
                   1
                   /* TEXT */
@@ -3628,7 +3771,7 @@ function __render__$1d(_ctx, _cache) {
 }
 const __sfc__$1e = vue.defineComponent({
   name: name$16,
-  components: { VarIcon: stdin_default$5P },
+  components: { VarIcon: stdin_default$5Q },
   inheritAttrs: false,
   props: props$16,
   setup(props2) {
@@ -3952,9 +4095,9 @@ const __sfc__$1c = vue.defineComponent({
   name: name$14,
   components: {
     VarBadge: stdin_default$5p,
-    VarIcon: stdin_default$5P
+    VarIcon: stdin_default$5Q
   },
-  directives: { Ripple: stdin_default$5T },
+  directives: { Ripple: stdin_default$5U },
   props: props$14,
   setup(props2) {
     const name2 = vue.computed(() => props2.name);
@@ -4248,7 +4391,7 @@ var __async$e = (__this, __arguments, generator) => {
 };
 const { name: name$10, n: n$17, classes: classes$W } = createNamespace("card");
 const RIPPLE_DELAY = 500;
-const _hoisted_1$o = ["src", "alt"];
+const _hoisted_1$r = ["src", "alt"];
 function __render__$17(_ctx, _cache) {
   const _component_var_icon = vue.resolveComponent("var-icon");
   const _component_var_button = vue.resolveComponent("var-button");
@@ -4293,7 +4436,7 @@ function __render__$17(_ctx, _cache) {
               }),
               src: _ctx.src,
               alt: _ctx.alt
-            }, null, 14, _hoisted_1$o)) : vue.createCommentVNode("v-if", true)
+            }, null, 14, _hoisted_1$r)) : vue.createCommentVNode("v-if", true)
           ]),
           vue.createElementVNode(
             "div",
@@ -4429,9 +4572,9 @@ function __render__$17(_ctx, _cache) {
 }
 const __sfc__$18 = vue.defineComponent({
   name: name$10,
-  directives: { Ripple: stdin_default$5T },
+  directives: { Ripple: stdin_default$5U },
   components: {
-    VarIcon: stdin_default$5P,
+    VarIcon: stdin_default$5Q,
     VarButton: stdin_default$5t
   },
   props: props$10,
@@ -4665,8 +4808,8 @@ function __render__$16(_ctx, _cache) {
 }
 const __sfc__$17 = vue.defineComponent({
   name: name$$,
-  components: { VarIcon: stdin_default$5P },
-  directives: { Ripple: stdin_default$5T },
+  components: { VarIcon: stdin_default$5Q },
+  directives: { Ripple: stdin_default$5U },
   props: props$$,
   setup(props2) {
     const borderOffsetStyles = vue.computed(() => {
@@ -4707,8 +4850,8 @@ const props$_ = {
   }
 };
 const { name: name$_, n: n$15 } = createNamespace("form-details");
-const _hoisted_1$n = { key: 0 };
-const _hoisted_2$d = { key: 0 };
+const _hoisted_1$q = { key: 0 };
+const _hoisted_2$e = { key: 0 };
 function __render__$15(_ctx, _cache) {
   return vue.openBlock(), vue.createBlock(vue.Transition, {
     name: _ctx.n()
@@ -4733,7 +4876,7 @@ function __render__$15(_ctx, _cache) {
                 default: vue.withCtx(() => [
                   _ctx.errorMessage ? (vue.openBlock(), vue.createElementBlock(
                     "div",
-                    _hoisted_1$n,
+                    _hoisted_1$q,
                     vue.toDisplayString(_ctx.errorMessage),
                     1
                     /* TEXT */
@@ -4759,7 +4902,7 @@ function __render__$15(_ctx, _cache) {
                   vue.renderSlot(_ctx.$slots, "extra-message", {}, () => [
                     _ctx.extraMessage ? (vue.openBlock(), vue.createElementBlock(
                       "div",
-                      _hoisted_2$d,
+                      _hoisted_2$e,
                       vue.toDisplayString(_ctx.extraMessage),
                       1
                       /* TEXT */
@@ -4888,6 +5031,7 @@ function useFormItems() {
   };
 }
 const { name: name$Z, n: n$14, classes: classes$U } = createNamespace("checkbox");
+const _hoisted_1$p = ["tabindex"];
 function __render__$14(_ctx, _cache) {
   const _component_var_icon = vue.resolveComponent("var-icon");
   const _component_var_hover_overlay = vue.resolveComponent("var-hover-overlay");
@@ -4898,7 +5042,7 @@ function __render__$14(_ctx, _cache) {
     "div",
     {
       class: vue.normalizeClass(_ctx.n("wrap")),
-      onClick: _cache[0] || (_cache[0] = (...args) => _ctx.handleClick && _ctx.handleClick(...args))
+      onClick: _cache[2] || (_cache[2] = (...args) => _ctx.handleClick && _ctx.handleClick(...args))
     },
     [
       vue.createElementVNode(
@@ -4907,51 +5051,50 @@ function __render__$14(_ctx, _cache) {
           class: vue.normalizeClass(_ctx.n())
         },
         [
-          vue.withDirectives((vue.openBlock(), vue.createElementBlock(
-            "div",
-            {
-              class: vue.normalizeClass(
-                _ctx.classes(
-                  _ctx.n("action"),
-                  [_ctx.checked || _ctx.isIndeterminate, _ctx.n("--checked"), _ctx.n("--unchecked")],
-                  [_ctx.errorMessage || _ctx.checkboxGroupErrorMessage, _ctx.n("--error")],
-                  [_ctx.formDisabled || _ctx.disabled, _ctx.n("--disabled")]
-                )
-              ),
-              style: vue.normalizeStyle({ color: _ctx.checked || _ctx.isIndeterminate ? _ctx.checkedColor : _ctx.uncheckedColor })
-            },
-            [
-              _ctx.isIndeterminate ? vue.renderSlot(_ctx.$slots, "indeterminate-icon", { key: 0 }, () => [
-                vue.createVNode(_component_var_icon, {
-                  class: vue.normalizeClass(_ctx.classes(_ctx.n("icon"), [_ctx.withAnimation, _ctx.n("--with-animation")])),
-                  name: "minus-box",
-                  size: _ctx.iconSize,
-                  "var-checkbox-cover": ""
-                }, null, 8, ["class", "size"])
-              ]) : vue.createCommentVNode("v-if", true),
-              _ctx.checked && !_ctx.isIndeterminate ? vue.renderSlot(_ctx.$slots, "checked-icon", { key: 1 }, () => [
-                vue.createVNode(_component_var_icon, {
-                  class: vue.normalizeClass(_ctx.classes(_ctx.n("icon"), [_ctx.withAnimation, _ctx.n("--with-animation")])),
-                  name: "checkbox-marked",
-                  size: _ctx.iconSize,
-                  "var-checkbox-cover": ""
-                }, null, 8, ["class", "size"])
-              ]) : vue.createCommentVNode("v-if", true),
-              !_ctx.checked && !_ctx.isIndeterminate ? vue.renderSlot(_ctx.$slots, "unchecked-icon", { key: 2 }, () => [
-                vue.createVNode(_component_var_icon, {
-                  class: vue.normalizeClass(_ctx.classes(_ctx.n("icon"), [_ctx.withAnimation, _ctx.n("--with-animation")])),
-                  name: "checkbox-blank-outline",
-                  size: _ctx.iconSize,
-                  "var-checkbox-cover": ""
-                }, null, 8, ["class", "size"])
-              ]) : vue.createCommentVNode("v-if", true),
-              vue.createVNode(_component_var_hover_overlay, {
-                hovering: !_ctx.disabled && !_ctx.formDisabled && _ctx.hovering
-              }, null, 8, ["hovering"])
-            ],
-            6
-            /* CLASS, STYLE */
-          )), [
+          vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", {
+            ref: "action",
+            class: vue.normalizeClass(
+              _ctx.classes(
+                _ctx.n("action"),
+                [_ctx.checked || _ctx.isIndeterminate, _ctx.n("--checked"), _ctx.n("--unchecked")],
+                [_ctx.errorMessage || _ctx.checkboxGroupErrorMessage, _ctx.n("--error")],
+                [_ctx.formDisabled || _ctx.disabled, _ctx.n("--disabled")]
+              )
+            ),
+            style: vue.normalizeStyle({ color: _ctx.checked || _ctx.isIndeterminate ? _ctx.checkedColor : _ctx.uncheckedColor }),
+            tabindex: _ctx.disabled || _ctx.formDisabled ? void 0 : "0",
+            onFocus: _cache[0] || (_cache[0] = ($event) => _ctx.isFocusing = true),
+            onBlur: _cache[1] || (_cache[1] = ($event) => _ctx.isFocusing = false)
+          }, [
+            _ctx.isIndeterminate ? vue.renderSlot(_ctx.$slots, "indeterminate-icon", { key: 0 }, () => [
+              vue.createVNode(_component_var_icon, {
+                class: vue.normalizeClass(_ctx.classes(_ctx.n("icon"), [_ctx.withAnimation, _ctx.n("--with-animation")])),
+                name: "minus-box",
+                size: _ctx.iconSize,
+                "var-checkbox-cover": ""
+              }, null, 8, ["class", "size"])
+            ]) : vue.createCommentVNode("v-if", true),
+            _ctx.checked && !_ctx.isIndeterminate ? vue.renderSlot(_ctx.$slots, "checked-icon", { key: 1 }, () => [
+              vue.createVNode(_component_var_icon, {
+                class: vue.normalizeClass(_ctx.classes(_ctx.n("icon"), [_ctx.withAnimation, _ctx.n("--with-animation")])),
+                name: "checkbox-marked",
+                size: _ctx.iconSize,
+                "var-checkbox-cover": ""
+              }, null, 8, ["class", "size"])
+            ]) : vue.createCommentVNode("v-if", true),
+            !_ctx.checked && !_ctx.isIndeterminate ? vue.renderSlot(_ctx.$slots, "unchecked-icon", { key: 2 }, () => [
+              vue.createVNode(_component_var_icon, {
+                class: vue.normalizeClass(_ctx.classes(_ctx.n("icon"), [_ctx.withAnimation, _ctx.n("--with-animation")])),
+                name: "checkbox-blank-outline",
+                size: _ctx.iconSize,
+                "var-checkbox-cover": ""
+              }, null, 8, ["class", "size"])
+            ]) : vue.createCommentVNode("v-if", true),
+            vue.createVNode(_component_var_hover_overlay, {
+              hovering: !_ctx.disabled && !_ctx.formDisabled && _ctx.hovering,
+              focusing: !_ctx.disabled && !_ctx.formDisabled && _ctx.isFocusing
+            }, null, 8, ["hovering", "focusing"])
+          ], 46, _hoisted_1$p)), [
             [_directive_hover, _ctx.handleHovering, "desktop"],
             [_directive_ripple, { disabled: _ctx.formReadonly || _ctx.readonly || _ctx.formDisabled || _ctx.disabled || !_ctx.ripple }]
           ]),
@@ -4985,14 +5128,16 @@ function __render__$14(_ctx, _cache) {
 }
 const __sfc__$15 = vue.defineComponent({
   name: name$Z,
-  directives: { Ripple: stdin_default$5T, Hover: stdin_default$5v },
+  directives: { Ripple: stdin_default$5U, Hover: stdin_default$5N },
   components: {
-    VarIcon: stdin_default$5P,
+    VarIcon: stdin_default$5Q,
     VarFormDetails: stdin_default$59,
-    VarHoverOverlay: stdin_default$5w
+    VarHoverOverlay: stdin_default$5O
   },
   props: props$Z,
   setup(props2) {
+    const action = vue.ref(null);
+    const isFocusing = vue.ref(false);
     const value = useVModel(props2, "modelValue");
     const isIndeterminate = useVModel(props2, "indeterminate");
     const checked = vue.computed(() => value.value === props2.checkedValue);
@@ -5068,10 +5213,35 @@ const __sfc__$15 = vue.defineComponent({
       }
       change(changedValue);
     }
+    useEventListener(() => window, "keydown", handleKeydown);
+    useEventListener(() => window, "keyup", handleKeyup);
+    function handleKeydown(event) {
+      if (!isFocusing.value) {
+        return;
+      }
+      const { key } = event;
+      if (key === "Enter" || key === " ") {
+        preventDefault(event);
+      }
+      if (key === "Enter") {
+        action.value.click();
+      }
+    }
+    function handleKeyup(event) {
+      if (!isFocusing.value) {
+        return;
+      }
+      if (event.key === " ") {
+        preventDefault(event);
+        action.value.click();
+      }
+    }
     function validate() {
       return v(props2.rules, props2.modelValue);
     }
     return {
+      action,
+      isFocusing,
       isIndeterminate,
       withAnimation,
       checked,
@@ -5318,7 +5488,7 @@ function __render__$12(_ctx, _cache) {
 const __sfc__$13 = vue.defineComponent({
   name: name$X,
   components: {
-    VarIcon: stdin_default$5P
+    VarIcon: stdin_default$5Q
   },
   inheritAttrs: false,
   props: props$X,
@@ -5839,7 +6009,7 @@ function __render__$$(_ctx, _cache) {
 const __sfc__$10 = vue.defineComponent({
   name: name$U,
   components: {
-    VarIcon: stdin_default$5P
+    VarIcon: stdin_default$5Q
   },
   props: props$U,
   setup(props2) {
@@ -8506,7 +8676,7 @@ const props$R = {
 const SPEED = 100;
 const DELAY = 600;
 const { name: name$R, n: n$Y, classes: classes$P } = createNamespace("counter");
-const _hoisted_1$m = ["inputmode", "readonly", "disabled"];
+const _hoisted_1$o = ["inputmode", "readonly", "disabled"];
 function __render__$Y(_ctx, _cache) {
   const _component_var_icon = vue.resolveComponent("var-icon");
   const _component_var_button = vue.resolveComponent("var-button");
@@ -8566,7 +8736,7 @@ function __render__$Y(_ctx, _cache) {
             disabled: _ctx.disabled || _ctx.formDisabled || _ctx.disableInput,
             "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.inputValue = $event),
             onChange: _cache[1] || (_cache[1] = (...args) => _ctx.handleChange && _ctx.handleChange(...args))
-          }, null, 46, _hoisted_1$m), [
+          }, null, 46, _hoisted_1$o), [
             [vue.vModelText, _ctx.inputValue]
           ]),
           vue.createVNode(_component_var_button, {
@@ -8609,10 +8779,10 @@ const __sfc__$Z = vue.defineComponent({
   name: name$R,
   components: {
     VarButton: stdin_default$5t,
-    VarIcon: stdin_default$5P,
+    VarIcon: stdin_default$5Q,
     VarFormDetails: stdin_default$59
   },
-  directives: { Ripple: stdin_default$5T },
+  directives: { Ripple: stdin_default$5U },
   inheritAttrs: false,
   props: props$R,
   setup(props2) {
@@ -9362,7 +9532,7 @@ const __sfc__$Y = vue.defineComponent({
   name: "PanelHeader",
   components: {
     VarButton: stdin_default$5t,
-    VarIcon: stdin_default$5P
+    VarIcon: stdin_default$5Q
   },
   props: {
     date: {
@@ -11228,7 +11398,10 @@ const props$O = __spreadValues$h({
   "onClosed",
   "onClickOverlay",
   // internal for function call closes the dialog
-  "onRouteChange"
+  "onRouteChange",
+  // internal for esc
+  "closeOnKeyEscape",
+  "onKeyEscape"
 ]));
 var __defProp$g = Object.defineProperty;
 var __getOwnPropSymbols$g = Object.getOwnPropertySymbols;
@@ -11259,11 +11432,13 @@ function __render__$R(_ctx, _cache) {
     "overlay-style": _ctx.overlayStyle,
     "lock-scroll": _ctx.lockScroll,
     "close-on-click-overlay": _ctx.popupCloseOnClickOverlay,
+    "close-on-key-escape": false,
     teleport: _ctx.teleport,
     onOpen: _ctx.onOpen,
     onClose: _ctx.onClose,
     onClosed: _ctx.onClosed,
     onOpened: _ctx.onOpened,
+    onKeyEscape: _ctx.handleKeyEscape,
     onRouteChange: _ctx.onRouteChange,
     onClickOverlay: _ctx.handleClickOverlay
   }, {
@@ -11374,12 +11549,12 @@ function __render__$R(_ctx, _cache) {
     ]),
     _: 3
     /* FORWARDED */
-  }, 8, ["class", "show", "overlay", "overlay-class", "overlay-style", "lock-scroll", "close-on-click-overlay", "teleport", "onOpen", "onClose", "onClosed", "onOpened", "onRouteChange", "onClickOverlay"]);
+  }, 8, ["class", "show", "overlay", "overlay-class", "overlay-style", "lock-scroll", "close-on-click-overlay", "teleport", "onOpen", "onClose", "onClosed", "onOpened", "onKeyEscape", "onRouteChange", "onClickOverlay"]);
 }
 const __sfc__$S = vue.defineComponent({
   name: name$O,
   components: {
-    VarPopup: stdin_default$5R,
+    VarPopup: stdin_default$5S,
     VarButton: stdin_default$5t
   },
   inheritAttrs: false,
@@ -11438,6 +11613,13 @@ const __sfc__$S = vue.defineComponent({
       }
       call(props2["onUpdate:show"], false);
     }
+    function handleKeyEscape() {
+      call(props2.onKeyEscape);
+      if (!props2.closeOnKeyEscape) {
+        return;
+      }
+      cancel();
+    }
     return {
       t,
       popupShow,
@@ -11447,7 +11629,8 @@ const __sfc__$S = vue.defineComponent({
       handleClickOverlay,
       confirm,
       cancel,
-      toSizeUnit
+      toSizeUnit,
+      handleKeyEscape
     };
   }
 });
@@ -13233,6 +13416,7 @@ function usePopover(options) {
     }
   });
   const { zIndex } = useZIndex(() => show.value, 1);
+  useStack(() => show.value, zIndex);
   let popoverInstance = null;
   let enterPopover = false;
   let enterHost = false;
@@ -13458,6 +13642,13 @@ function usePopover(options) {
     };
   };
   const getReference = () => options.reference ? host.value.querySelector(options.reference) : host.value;
+  const handleKeydown = (event) => {
+    const { closeOnKeyEscape = false } = options;
+    if (event.key === "Escape" && closeOnKeyEscape && show.value) {
+      preventDefault(event);
+      close();
+    }
+  };
   const resize = () => {
     popoverInstance.setOptions(getPopperOptions());
   };
@@ -13473,6 +13664,7 @@ function usePopover(options) {
     show.value = false;
     call(options["onUpdate:show"], false);
   };
+  useEventListener(window, "keydown", handleKeydown);
   useClickOutside(getReference, "click", handleClickOutside);
   onWindowResize(resize);
   vue.watch(() => [options.offsetX, options.offsetY, options.placement, options.strategy], resize);
@@ -13543,7 +13735,12 @@ const props$L = {
   onClose: defineListenerProp(),
   onClosed: defineListenerProp(),
   onClickOutside: defineListenerProp(),
-  "onUpdate:show": defineListenerProp()
+  "onUpdate:show": defineListenerProp(),
+  // internal for esc
+  closeOnKeyEscape: {
+    type: Boolean,
+    default: true
+  }
 };
 const { name: name$L, n: n$O, classes: classes$G } = createNamespace("tooltip");
 function __render__$O(_ctx, _cache) {
@@ -13696,7 +13893,7 @@ var __spreadValues$c = (a, b) => {
   return a;
 };
 const { name: name$K, n: n$N, classes: classes$F } = createNamespace("ellipsis");
-const _hoisted_1$l = { key: 0 };
+const _hoisted_1$n = { key: 0 };
 function __render__$N(_ctx, _cache) {
   const _component_var_tooltip = vue.resolveComponent("var-tooltip");
   return vue.openBlock(), vue.createBlock(
@@ -13709,7 +13906,7 @@ function __render__$N(_ctx, _cache) {
           return [
             ((_a = _ctx.tooltipProps) == null ? void 0 : _a.content) ? (vue.openBlock(), vue.createElementBlock(
               "span",
-              _hoisted_1$l,
+              _hoisted_1$n,
               vue.toDisplayString(_ctx.tooltipProps.content),
               1
               /* TEXT */
@@ -13922,7 +14119,7 @@ var stdin_default$4A = vue.defineComponent({
         "elevation": props2.elevation,
         "iconContainer": true
       }, {
-        default: () => [vue.createVNode(stdin_default$5P, {
+        default: () => [vue.createVNode(stdin_default$5Q, {
           "var-fab-cover": true,
           "class": classes$E([isActive.value, n$M("trigger-active-icon"), n$M("trigger-inactive-icon")]),
           "name": isActive.value ? props2.activeIcon : props2.inactiveIcon,
@@ -13992,7 +14189,7 @@ const props$I = {
     type: String,
     default: ""
   },
-  isFocus: Boolean,
+  isFocusing: Boolean,
   size: {
     type: String,
     default: "normal"
@@ -14027,7 +14224,7 @@ const props$I = {
   onClear: defineListenerProp()
 };
 const { name: name$I, n: n$L, classes: classes$D } = createNamespace("field-decorator");
-const _hoisted_1$k = ["for"];
+const _hoisted_1$m = ["for"];
 function __render__$M(_ctx, _cache) {
   const _component_var_icon = vue.resolveComponent("var-icon");
   return vue.openBlock(), vue.createElementBlock(
@@ -14043,7 +14240,7 @@ function __render__$M(_ctx, _cache) {
           class: vue.normalizeClass(
             _ctx.classes(
               _ctx.n("controller"),
-              [_ctx.isFocus, _ctx.n("--focus")],
+              [_ctx.isFocusing, _ctx.n("--focus")],
               [_ctx.errorMessage, _ctx.n("--error")],
               [_ctx.formDisabled || _ctx.disabled, _ctx.n("--disabled")]
             )
@@ -14087,7 +14284,7 @@ function __render__$M(_ctx, _cache) {
               _ctx.classes(
                 _ctx.n("placeholder"),
                 _ctx.n("$--ellipsis"),
-                [_ctx.isFocus, _ctx.n("--focus")],
+                [_ctx.isFocusing, _ctx.n("--focus")],
                 [_ctx.hintCenter, _ctx.n("--hint-center")],
                 [_ctx.formDisabled || _ctx.disabled, _ctx.n("--disabled")],
                 [_ctx.errorMessage, _ctx.n("--error")],
@@ -14107,14 +14304,17 @@ function __render__$M(_ctx, _cache) {
               1
               /* TEXT */
             )
-          ], 14, _hoisted_1$k)) : vue.createCommentVNode("v-if", true),
+          ], 14, _hoisted_1$m)) : vue.createCommentVNode("v-if", true),
           vue.createElementVNode(
             "div",
             {
               class: vue.normalizeClass(_ctx.classes(_ctx.n("icon"), [!_ctx.hint, _ctx.n("--icon-non-hint")]))
             },
             [
-              _ctx.clearable && !_ctx.isEmpty(_ctx.value) ? vue.renderSlot(_ctx.$slots, "clear-icon", { key: 0 }, () => [
+              _ctx.clearable && !_ctx.isEmpty(_ctx.value) ? vue.renderSlot(_ctx.$slots, "clear-icon", {
+                key: 0,
+                clear: _ctx.handleClear
+              }, () => [
                 vue.createVNode(_component_var_icon, {
                   class: vue.normalizeClass(_ctx.n("clear-icon")),
                   "var-field-decorator-cover": "",
@@ -14142,7 +14342,7 @@ function __render__$M(_ctx, _cache) {
               class: vue.normalizeClass(
                 _ctx.classes(
                   _ctx.n("line"),
-                  [_ctx.isFocus, _ctx.n("--line-focus")],
+                  [_ctx.isFocusing, _ctx.n("--line-focus")],
                   [_ctx.errorMessage, _ctx.n("--line-error")],
                   [_ctx.formDisabled || _ctx.disabled, _ctx.n("--line-disabled")]
                 )
@@ -14195,7 +14395,7 @@ function __render__$M(_ctx, _cache) {
                   class: vue.normalizeClass(
                     _ctx.classes(
                       _ctx.n("dot"),
-                      [_ctx.isFocus, _ctx.n("--line-focus")],
+                      [_ctx.isFocusing, _ctx.n("--line-focus")],
                       [_ctx.formDisabled || _ctx.disabled, _ctx.n("--line-disabled")],
                       [_ctx.errorMessage, _ctx.n("--line-error")]
                     )
@@ -14221,7 +14421,7 @@ function __render__$M(_ctx, _cache) {
 }
 const __sfc__$N = vue.defineComponent({
   name: name$I,
-  components: { VarIcon: stdin_default$5P },
+  components: { VarIcon: stdin_default$5Q },
   props: props$I,
   setup(props2) {
     const placeholderTextEl = vue.ref(null);
@@ -14231,9 +14431,9 @@ const __sfc__$N = vue.defineComponent({
     const middleOffsetWidth = vue.ref("0px");
     const middleOffsetHeight = vue.ref("0px");
     const transitionDisabled = vue.ref(true);
-    const isFloating = vue.computed(() => props2.hint && (!isEmpty(props2.value) || props2.isFocus));
+    const isFloating = vue.computed(() => props2.hint && (!isEmpty(props2.value) || props2.isFocusing));
     const color = vue.computed(
-      () => !props2.errorMessage ? props2.isFocus ? props2.focusColor : props2.blurColor : void 0
+      () => !props2.errorMessage ? props2.isFocusing ? props2.focusColor : props2.blurColor : void 0
     );
     onWindowResize(resize);
     onSmartMounted(() => {
@@ -14644,8 +14844,8 @@ const props$F = {
   onError: defineListenerProp()
 };
 const { name: name$F, n: n$I, classes: classes$B } = createNamespace("image");
-const _hoisted_1$j = ["alt", "title", "referrerpolicy", "lazy-loading", "lazy-error"];
-const _hoisted_2$c = ["alt", "title", "referrerpolicy", "src"];
+const _hoisted_1$l = ["alt", "title", "referrerpolicy", "lazy-loading", "lazy-error"];
+const _hoisted_2$d = ["alt", "title", "referrerpolicy", "src"];
 function __render__$J(_ctx, _cache) {
   var _a;
   const _directive_lazy = vue.resolveDirective("lazy");
@@ -14673,7 +14873,7 @@ function __render__$J(_ctx, _cache) {
         style: vue.normalizeStyle({ objectFit: _ctx.fit }),
         onLoad: _cache[0] || (_cache[0] = (...args) => _ctx.handleLoad && _ctx.handleLoad(...args)),
         onClick: _cache[1] || (_cache[1] = (...args) => _ctx.handleClick && _ctx.handleClick(...args))
-      }, null, 46, _hoisted_1$j)), [
+      }, null, 46, _hoisted_1$l)), [
         [_directive_lazy, (_a = _ctx.src) != null ? _a : ""]
       ]) : vue.createCommentVNode("v-if", true),
       !_ctx.lazy && !_ctx.showErrorSlot ? (vue.openBlock(), vue.createElementBlock("img", {
@@ -14688,7 +14888,7 @@ function __render__$J(_ctx, _cache) {
         onLoad: _cache[2] || (_cache[2] = (...args) => _ctx.handleLoad && _ctx.handleLoad(...args)),
         onError: _cache[3] || (_cache[3] = (...args) => _ctx.handleError && _ctx.handleError(...args)),
         onClick: _cache[4] || (_cache[4] = (...args) => _ctx.handleClick && _ctx.handleClick(...args))
-      }, null, 46, _hoisted_2$c)) : vue.createCommentVNode("v-if", true),
+      }, null, 46, _hoisted_2$d)) : vue.createCommentVNode("v-if", true),
       _ctx.showErrorSlot ? vue.renderSlot(_ctx.$slots, "error", { key: 2 }) : vue.createCommentVNode("v-if", true)
     ],
     6
@@ -14700,8 +14900,8 @@ function __render__$J(_ctx, _cache) {
 const __sfc__$K = vue.defineComponent({
   name: name$F,
   directives: {
-    Lazy: stdin_default$5E,
-    Ripple: stdin_default$5T
+    Lazy: stdin_default$5B,
+    Ripple: stdin_default$5U
   },
   props: props$F,
   setup(props2, { slots }) {
@@ -14814,7 +15014,7 @@ var __async$7 = (__this, __arguments, generator) => {
 const SWIPE_DELAY = 250;
 const SWIPE_OFFSET = 20;
 const { name: name$E, n: n$H, classes: classes$A } = createNamespace("swipe");
-const _hoisted_1$i = ["onClick"];
+const _hoisted_1$k = ["onClick"];
 function __render__$I(_ctx, _cache) {
   const _component_var_icon = vue.resolveComponent("var-icon");
   const _component_var_button = vue.resolveComponent("var-button");
@@ -14960,7 +15160,7 @@ function __render__$I(_ctx, _cache) {
                   style: vue.normalizeStyle({ background: _ctx.indicatorColor }),
                   key: l,
                   onClick: ($event) => _ctx.to(idx)
-                }, null, 14, _hoisted_1$i);
+                }, null, 14, _hoisted_1$k);
               }),
               128
               /* KEYED_FRAGMENT */
@@ -14979,8 +15179,8 @@ function __render__$I(_ctx, _cache) {
 }
 const __sfc__$J = vue.defineComponent({
   name: name$E,
-  directives: { Hover: stdin_default$5v },
-  components: { VarButton: stdin_default$5t, VarIcon: stdin_default$5P },
+  directives: { Hover: stdin_default$5N },
+  components: { VarButton: stdin_default$5t, VarIcon: stdin_default$5Q },
   props: props$E,
   setup(props2) {
     const swipeEl = vue.ref(null);
@@ -15388,7 +15588,10 @@ const props$D = __spreadValues$b(__spreadValues$b({
   "onOpened",
   "onClosed",
   // internal for function call closes the dialog
-  "onRouteChange"
+  "onRouteChange",
+  // internal for esc
+  "closeOnKeyEscape",
+  "onKeyEscape"
 ]));
 const { name: name$C, n: n$F, classes: classes$z } = createNamespace("image-preview");
 const DISTANCE_OFFSET = 12;
@@ -15397,26 +15600,29 @@ const TAP_DELAY = 350;
 const ANIMATION_DURATION = 200;
 const LONG_PRESS_DELAY = 500;
 const BASE_RATIO = 1;
-const _hoisted_1$h = ["onTouchstart"];
-const _hoisted_2$b = ["src", "alt"];
+const _hoisted_1$j = ["onTouchstart"];
+const _hoisted_2$c = ["src", "alt"];
 function __render__$G(_ctx, _cache) {
   const _component_var_swipe_item = vue.resolveComponent("var-swipe-item");
   const _component_var_swipe = vue.resolveComponent("var-swipe");
   const _component_var_icon = vue.resolveComponent("var-icon");
   const _component_var_popup = vue.resolveComponent("var-popup");
   return vue.openBlock(), vue.createBlock(_component_var_popup, {
-    class: vue.normalizeClass(_ctx.n("popup")),
     "var-image-preview-cover": "",
+    class: vue.normalizeClass(_ctx.n("popup")),
     transition: _ctx.n("$-fade"),
-    show: _ctx.popupShow,
     overlay: false,
     "close-on-click-overlay": false,
+    "close-on-key-escape": _ctx.closeOnKeyEscape,
     "lock-scroll": _ctx.lockScroll,
     teleport: _ctx.teleport,
+    show: _ctx.show,
+    "onUpdate:show": _cache[3] || (_cache[3] = ($event) => _ctx.show = $event),
     onOpen: _ctx.onOpen,
     onClose: _ctx.onClose,
     onClosed: _ctx.onClosed,
     onOpened: _ctx.onOpened,
+    onKeyEscape: _ctx.onKeyEscape,
     onRouteChange: _ctx.onRouteChange
   }, {
     default: vue.withCtx(() => [
@@ -15458,8 +15664,8 @@ function __render__$G(_ctx, _cache) {
                       class: vue.normalizeClass(_ctx.classes(_ctx.n("image"), [_ctx.isPreventDefault, _ctx.n("--prevent")])),
                       src: image,
                       alt: image
-                    }, null, 10, _hoisted_2$b)
-                  ], 46, _hoisted_1$h)
+                    }, null, 10, _hoisted_2$c)
+                  ], 46, _hoisted_1$j)
                 ]),
                 _: 2
                 /* DYNAMIC */
@@ -15513,20 +15719,20 @@ function __render__$G(_ctx, _cache) {
     ]),
     _: 3
     /* FORWARDED */
-  }, 8, ["class", "transition", "show", "lock-scroll", "teleport", "onOpen", "onClose", "onClosed", "onOpened", "onRouteChange"]);
+  }, 8, ["class", "transition", "close-on-key-escape", "lock-scroll", "teleport", "show", "onOpen", "onClose", "onClosed", "onOpened", "onKeyEscape", "onRouteChange"]);
 }
 const __sfc__$H = vue.defineComponent({
   name: name$C,
   components: {
     VarSwipe: stdin_default$4p,
     VarSwipeItem: stdin_default$4n,
-    VarPopup: stdin_default$5R,
-    VarIcon: stdin_default$5P
+    VarPopup: stdin_default$5S,
+    VarIcon: stdin_default$5Q
   },
   inheritAttrs: false,
   props: props$D,
   setup(props2) {
-    const popupShow = vue.ref(false);
+    const show = useVModel(props2, "show");
     const scale = vue.ref(1);
     const translateX = vue.ref(0);
     const translateY = vue.ref(0);
@@ -15536,8 +15742,8 @@ const __sfc__$H = vue.defineComponent({
     const swipeRef = vue.ref(null);
     const { moveX, moveY, distance, startTime, startTouch, moveTouch, endTouch } = useTouch();
     const isPreventDefault = vue.computed(() => {
-      const { imagePreventDefault, show } = props2;
-      return show && imagePreventDefault;
+      const { imagePreventDefault, show: show2 } = props2;
+      return show2 && imagePreventDefault;
     });
     let closeRunner = null;
     let longPressRunner = null;
@@ -15547,13 +15753,6 @@ const __sfc__$H = vue.defineComponent({
       prev: null
     };
     useEventListener(() => document, "contextmenu", preventImageDefault);
-    vue.watch(
-      () => props2.show,
-      (newShow) => {
-        popupShow.value = newShow;
-      },
-      { immediate: true }
-    );
     function zoomIn(ratio) {
       scale.value = toNumber(ratio);
       canSwipe.value = false;
@@ -15694,7 +15893,7 @@ const __sfc__$H = vue.defineComponent({
     return {
       swipeRef,
       isPreventDefault,
-      popupShow,
+      show,
       scale,
       translateX,
       translateY,
@@ -15946,7 +16145,7 @@ var __async$6 = (__this, __arguments, generator) => {
   });
 };
 const { name: name$A, n: n$D, classes: classes$x } = createNamespace("index-bar");
-const _hoisted_1$g = ["onClick"];
+const _hoisted_1$i = ["onClick"];
 function __render__$E(_ctx, _cache) {
   return vue.openBlock(), vue.createElementBlock(
     "div",
@@ -15980,7 +16179,7 @@ function __render__$E(_ctx, _cache) {
                     /* TEXT */
                   )
                 ])
-              ], 14, _hoisted_1$g);
+              ], 14, _hoisted_1$i);
             }),
             128
             /* KEYED_FRAGMENT */
@@ -16190,9 +16389,9 @@ const props$A = __spreadValues$9({
   "onClick"
 ]));
 const { name: name$z, n: n$C, classes: classes$w } = createNamespace("input");
-const _hoisted_1$f = ["placeholder", "enterkeyhint"];
-const _hoisted_2$a = ["id", "disabled", "readonly", "type", "value", "placeholder", "maxlength", "rows", "enterkeyhint", "inputmode"];
-const _hoisted_3$9 = ["id", "disabled", "readonly", "type", "value", "placeholder", "maxlength", "enterkeyhint", "inputmode"];
+const _hoisted_1$h = ["placeholder", "enterkeyhint"];
+const _hoisted_2$b = ["id", "disabled", "readonly", "type", "value", "placeholder", "maxlength", "rows", "enterkeyhint", "inputmode"];
+const _hoisted_3$a = ["id", "disabled", "readonly", "type", "value", "placeholder", "maxlength", "enterkeyhint", "inputmode"];
 function __render__$D(_ctx, _cache) {
   const _component_var_field_decorator = vue.resolveComponent("var-field-decorator");
   const _component_var_form_details = vue.resolveComponent("var-form-details");
@@ -16216,7 +16415,7 @@ function __render__$D(_ctx, _cache) {
           textColor: _ctx.textColor,
           focusColor: _ctx.focusColor,
           blurColor: _ctx.blurColor,
-          isFocus: _ctx.isFocus,
+          isFocusing: _ctx.isFocusing,
           errorMessage: _ctx.errorMessage,
           formDisabled: _ctx.formDisabled,
           disabled: _ctx.disabled,
@@ -16228,8 +16427,8 @@ function __render__$D(_ctx, _cache) {
           onClear: _ctx.handleClear
         })),
         vue.createSlots({
-          "clear-icon": vue.withCtx(() => [
-            vue.renderSlot(_ctx.$slots, "clear-icon")
+          "clear-icon": vue.withCtx(({ clear: clear2 }) => [
+            vue.renderSlot(_ctx.$slots, "clear-icon", { clear: clear2 })
           ]),
           "append-icon": vue.withCtx(() => [
             vue.renderSlot(_ctx.$slots, "append-icon")
@@ -16244,7 +16443,7 @@ function __render__$D(_ctx, _cache) {
                 "--input-placeholder-color": _ctx.placeholderColor
               }),
               enterkeyhint: _ctx.enterkeyhint
-            }, null, 14, _hoisted_1$f)) : vue.createCommentVNode("v-if", true),
+            }, null, 14, _hoisted_1$h)) : vue.createCommentVNode("v-if", true),
             _ctx.textarea ? (vue.openBlock(), vue.createElementBlock("textarea", {
               key: 1,
               class: vue.normalizeClass(
@@ -16280,7 +16479,7 @@ function __render__$D(_ctx, _cache) {
               onChange: _cache[3] || (_cache[3] = (...args) => _ctx.handleChange && _ctx.handleChange(...args)),
               onCompositionstart: _cache[4] || (_cache[4] = (...args) => _ctx.handleCompositionStart && _ctx.handleCompositionStart(...args)),
               onCompositionend: _cache[5] || (_cache[5] = (...args) => _ctx.handleCompositionEnd && _ctx.handleCompositionEnd(...args))
-            }, null, 46, _hoisted_2$a)) : (vue.openBlock(), vue.createElementBlock("input", {
+            }, null, 46, _hoisted_2$b)) : (vue.openBlock(), vue.createElementBlock("input", {
               key: 2,
               class: vue.normalizeClass(
                 _ctx.classes(
@@ -16312,7 +16511,7 @@ function __render__$D(_ctx, _cache) {
               onChange: _cache[9] || (_cache[9] = (...args) => _ctx.handleChange && _ctx.handleChange(...args)),
               onCompositionstart: _cache[10] || (_cache[10] = (...args) => _ctx.handleCompositionStart && _ctx.handleCompositionStart(...args)),
               onCompositionend: _cache[11] || (_cache[11] = (...args) => _ctx.handleCompositionEnd && _ctx.handleCompositionEnd(...args))
-            }, null, 46, _hoisted_3$9))
+            }, null, 46, _hoisted_3$a))
           ]),
           _: 2
           /* DYNAMIC */
@@ -16360,7 +16559,7 @@ const __sfc__$E = vue.defineComponent({
   setup(props2) {
     const id = useId();
     const el = vue.ref(null);
-    const isFocus = vue.ref(false);
+    const isFocusing = vue.ref(false);
     const isComposing = vue.ref(false);
     const { bindForm, form } = useForm();
     const {
@@ -16395,7 +16594,7 @@ const __sfc__$E = vue.defineComponent({
       if (errorMessage.value) {
         return "var(--field-decorator-error-color)";
       }
-      if (isFocus.value) {
+      if (isFocusing.value) {
         return focusColor || "var(--field-decorator-focus-color)";
       }
       return blurColor || "var(--field-decorator-placeholder-color, var(--field-decorator-blur-color))";
@@ -16418,12 +16617,12 @@ const __sfc__$E = vue.defineComponent({
       });
     }
     function handleFocus(e) {
-      isFocus.value = true;
+      isFocusing.value = true;
       call(props2.onFocus, e);
       validateWithTrigger("onFocus");
     }
     function handleBlur(e) {
-      isFocus.value = false;
+      isFocusing.value = false;
       call(props2.onBlur, e);
       validateWithTrigger("onBlur");
     }
@@ -16522,7 +16721,7 @@ const __sfc__$E = vue.defineComponent({
     return {
       el,
       id,
-      isFocus,
+      isFocusing,
       isComposing,
       errorMessage,
       placeholderColor,
@@ -16585,13 +16784,16 @@ function __render__$C(_ctx, _cache) {
       _ctx.n("$--inline-flex"),
       _ctx.n(`--${_ctx.type}`),
       [_ctx.underline !== "none", _ctx.n(`--underline-${_ctx.underline}`)],
-      [_ctx.disabled, _ctx.n("--disabled")]
+      [_ctx.disabled, _ctx.n("--disabled")],
+      [_ctx.isFocusing && !_ctx.inMobile(), _ctx.n("--focusing")]
     ),
     style: {
       color: _ctx.textColor,
       fontSize: _ctx.toSizeUnit(_ctx.textSize)
     },
-    onClick: _ctx.handleClick
+    onClick: _ctx.handleClick,
+    onFocus: _cache[0] || (_cache[0] = ($event) => _ctx.isFocusing = true),
+    onBlur: _cache[1] || (_cache[1] = ($event) => _ctx.isFocusing = false)
   }), {
     default: vue.withCtx(() => [
       vue.renderSlot(_ctx.$slots, "default")
@@ -16604,6 +16806,7 @@ const __sfc__$D = vue.defineComponent({
   name: name$y,
   props: props$z,
   setup(props2) {
+    const isFocusing = vue.ref(false);
     const tag2 = vue.computed(() => {
       const { disabled, href, to } = props2;
       if (disabled) {
@@ -16639,6 +16842,8 @@ const __sfc__$D = vue.defineComponent({
     return {
       tag: tag2,
       linkProps,
+      isFocusing,
+      inMobile,
       n: n$B,
       classes: classes$v,
       handleClick,
@@ -16826,8 +17031,8 @@ function __render__$B(_ctx, _cache) {
 }
 const __sfc__$C = vue.defineComponent({
   name: name$x,
-  directives: { Ripple: stdin_default$5T },
-  components: { VarLoading: stdin_default$5y },
+  directives: { Ripple: stdin_default$5U },
+  components: { VarLoading: stdin_default$5v },
   props: props$y,
   setup(props2) {
     const listEl = vue.ref(null);
@@ -16917,7 +17122,7 @@ var stdin_default$4a = vue.defineComponent({
     return () => vue.createVNode("div", {
       "class": classes$t(n$z(), [props2.error, n$z("--error")]),
       "style": {
-        zIndex: stdin_default$5U.zIndex + 10,
+        zIndex: stdin_default$5V.zIndex + 10,
         width: `${props2.value}%`,
         opacity: props2.opacity,
         height: toSizeUnit(props2.height),
@@ -17059,7 +17264,12 @@ const props$v = {
   onClose: defineListenerProp(),
   onClosed: defineListenerProp(),
   onClickOutside: defineListenerProp(),
-  "onUpdate:show": defineListenerProp()
+  "onUpdate:show": defineListenerProp(),
+  // internal for esc
+  closeOnKeyEscape: {
+    type: Boolean,
+    default: true
+  }
 };
 const { name: name$v, n: n$y, classes: classes$s } = createNamespace("menu");
 function __render__$A(_ctx, _cache) {
@@ -17208,72 +17418,74 @@ const props$u = {
   label: {},
   value: {},
   disabled: Boolean
-};
-const { name: name$u, n: n$x, classes: classes$r } = createNamespace("menu-option");
-function __render__$z(_ctx, _cache) {
-  const _component_var_checkbox = vue.resolveComponent("var-checkbox");
-  const _component_var_hover_overlay = vue.resolveComponent("var-hover-overlay");
-  const _directive_ripple = vue.resolveDirective("ripple");
-  const _directive_hover = vue.resolveDirective("hover");
-  return vue.withDirectives((vue.openBlock(), vue.createElementBlock(
-    "div",
-    {
-      class: vue.normalizeClass(
-        _ctx.classes(_ctx.n(), _ctx.n("$--box"), _ctx.n(`--${_ctx.size}`), [_ctx.optionSelected, _ctx.n("--selected-color")], [_ctx.disabled, _ctx.n("--disabled")])
-      ),
-      onClick: _cache[2] || (_cache[2] = (...args) => _ctx.handleClick && _ctx.handleClick(...args))
-    },
-    [
+};
+const { name: name$u, n: n$x, classes: classes$r } = createNamespace("menu-option");
+const _hoisted_1$g = ["tabindex"];
+function __render__$z(_ctx, _cache) {
+  const _component_var_checkbox = vue.resolveComponent("var-checkbox");
+  const _component_var_hover_overlay = vue.resolveComponent("var-hover-overlay");
+  const _directive_ripple = vue.resolveDirective("ripple");
+  const _directive_hover = vue.resolveDirective("hover");
+  return vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", {
+    ref: "root",
+    class: vue.normalizeClass(
+      _ctx.classes(_ctx.n(), _ctx.n("$--box"), _ctx.n(`--${_ctx.size}`), [_ctx.optionSelected, _ctx.n("--selected-color")], [_ctx.disabled, _ctx.n("--disabled")])
+    ),
+    tabindex: _ctx.disabled ? void 0 : "-1",
+    onClick: _cache[2] || (_cache[2] = (...args) => _ctx.handleClick && _ctx.handleClick(...args)),
+    onFocus: _cache[3] || (_cache[3] = ($event) => _ctx.isFocusing = true),
+    onBlur: _cache[4] || (_cache[4] = ($event) => _ctx.isFocusing = false)
+  }, [
+    vue.createElementVNode(
+      "div",
+      {
+        class: vue.normalizeClass(_ctx.classes(_ctx.n("cover"), [_ctx.optionSelected, _ctx.n("--selected-background")]))
+      },
+      null,
+      2
+      /* CLASS */
+    ),
+    _ctx.multiple ? (vue.openBlock(), vue.createBlock(_component_var_checkbox, {
+      key: 0,
+      ref: "checkbox",
+      modelValue: _ctx.optionSelected,
+      "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.optionSelected = $event),
+      disabled: _ctx.disabled,
+      onClick: _cache[1] || (_cache[1] = vue.withModifiers(() => {
+      }, ["stop"])),
+      onChange: _ctx.handleSelect
+    }, null, 8, ["modelValue", "disabled", "onChange"])) : vue.createCommentVNode("v-if", true),
+    vue.renderSlot(_ctx.$slots, "default", {}, () => [
       vue.createElementVNode(
         "div",
         {
-          class: vue.normalizeClass(_ctx.classes(_ctx.n("cover"), [_ctx.optionSelected, _ctx.n("--selected-background")]))
+          class: vue.normalizeClass(_ctx.classes(_ctx.n("text"), _ctx.n("$--ellipsis")))
         },
-        null,
-        2
-        /* CLASS */
-      ),
-      _ctx.multiple ? (vue.openBlock(), vue.createBlock(_component_var_checkbox, {
-        key: 0,
-        ref: "checkbox",
-        modelValue: _ctx.optionSelected,
-        "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.optionSelected = $event),
-        disabled: _ctx.disabled,
-        onClick: _cache[1] || (_cache[1] = vue.withModifiers(() => {
-        }, ["stop"])),
-        onChange: _ctx.handleSelect
-      }, null, 8, ["modelValue", "disabled", "onChange"])) : vue.createCommentVNode("v-if", true),
-      vue.renderSlot(_ctx.$slots, "default", {}, () => [
-        vue.createElementVNode(
-          "div",
-          {
-            class: vue.normalizeClass(_ctx.classes(_ctx.n("text"), _ctx.n("$--ellipsis")))
-          },
-          vue.toDisplayString(_ctx.label),
-          3
-          /* TEXT, CLASS */
-        )
-      ]),
-      vue.createVNode(_component_var_hover_overlay, {
-        hovering: _ctx.hovering && !_ctx.disabled
-      }, null, 8, ["hovering"])
-    ],
-    2
-    /* CLASS */
-  )), [
+        vue.toDisplayString(_ctx.label),
+        3
+        /* TEXT, CLASS */
+      )
+    ]),
+    vue.createVNode(_component_var_hover_overlay, {
+      hovering: _ctx.hovering && !_ctx.disabled,
+      focusing: _ctx.isFocusing && !_ctx.disabled
+    }, null, 8, ["hovering", "focusing"])
+  ], 42, _hoisted_1$g)), [
     [_directive_ripple, { disabled: _ctx.disabled }],
     [_directive_hover, _ctx.handleHovering, "desktop"]
   ]);
 }
 const __sfc__$A = vue.defineComponent({
   name: name$u,
-  directives: { Ripple: stdin_default$5T, Hover: stdin_default$5v },
+  directives: { Ripple: stdin_default$5U, Hover: stdin_default$5N },
   components: {
     VarCheckbox: stdin_default$57,
-    VarHoverOverlay: stdin_default$5w
+    VarHoverOverlay: stdin_default$5O
   },
   props: props$u,
   setup(props2) {
+    const root = vue.ref();
+    const isFocusing = vue.ref(false);
     const optionSelected = vue.ref(false);
     const selected = vue.computed(() => optionSelected.value);
     const label = vue.computed(() => props2.label);
@@ -17289,12 +17501,34 @@ const __sfc__$A = vue.defineComponent({
     };
     vue.watch([() => props2.label, () => props2.value], computeLabel);
     bindMenuSelect(menuOptionProvider);
+    useEventListener(() => window, "keydown", handleKeydown);
+    useEventListener(() => window, "keyup", handleKeyup);
     function handleClick() {
       if (props2.disabled) {
         return;
       }
       handleSelect();
     }
+    function handleKeydown(event) {
+      if (!isFocusing.value) {
+        return;
+      }
+      if (event.key === " " || event.key === "Enter") {
+        preventDefault(event);
+      }
+      if (event.key === "Enter") {
+        root.value.click();
+      }
+    }
+    function handleKeyup(event) {
+      if (!isFocusing.value) {
+        return;
+      }
+      if (event.key === " ") {
+        preventDefault(event);
+        root.value.click();
+      }
+    }
     function handleSelect() {
       if (multiple.value) {
         optionSelected.value = !optionSelected.value;
@@ -17305,10 +17539,12 @@ const __sfc__$A = vue.defineComponent({
       optionSelected.value = checked;
     }
     return {
+      root,
       optionSelected,
       size,
       multiple,
       hovering,
+      isFocusing,
       n: n$x,
       classes: classes$r,
       handleHovering,
@@ -17443,6 +17679,7 @@ function __render__$y(_ctx, _cache) {
   const _component_var_menu = vue.resolveComponent("var-menu");
   return vue.openBlock(), vue.createBlock(_component_var_menu, {
     ref: "menu",
+    tabindex: "-1",
     class: vue.normalizeClass(_ctx.n()),
     disabled: _ctx.disabled,
     trigger: _ctx.trigger,
@@ -17457,6 +17694,7 @@ function __render__$y(_ctx, _cache) {
     "default-style": false,
     "popover-class": _ctx.popoverClass,
     "close-on-click-reference": _ctx.closeOnClickReference,
+    "close-on-key-escape": false,
     show: _ctx.show,
     "onUpdate:show": _cache[0] || (_cache[0] = ($event) => _ctx.show = $event),
     onOpen: _ctx.onOpen,
@@ -17469,6 +17707,7 @@ function __render__$y(_ctx, _cache) {
       vue.createElementVNode(
         "div",
         {
+          ref: "menuOptionsRef",
           class: vue.normalizeClass(_ctx.classes(_ctx.n("menu"), _ctx.formatElevation(_ctx.elevation, 3), [_ctx.scrollable, _ctx.n("--scrollable")]))
         },
         [
@@ -17491,6 +17730,7 @@ const __sfc__$z = vue.defineComponent({
   props: props$t,
   setup(props2) {
     const menu = vue.ref(null);
+    const menuOptionsRef = vue.ref(null);
     const show = useVModel(props2, "show");
     const { menuOptions, length, bindMenuOptions } = useMenuOptions();
     const { computeLabel, getSelectedValue } = useSelectController({
@@ -17506,11 +17746,30 @@ const __sfc__$z = vue.defineComponent({
       onSelect
     };
     bindMenuOptions(menuSelectProvider);
+    useEventListener(() => window, "keydown", handleKeydown);
     function onSelect(option) {
       const { multiple, closeOnSelect } = props2;
       call(props2["onUpdate:modelValue"], getSelectedValue(option));
       if (!multiple && closeOnSelect) {
-        show.value = false;
+        menu.value.$el.focus();
+        close();
+      }
+    }
+    function handleKeydown(event) {
+      if (props2.disabled || !show.value) {
+        return;
+      }
+      const { key } = event;
+      if (["Escape", "ArrowDown", "ArrowUp"].includes(key)) {
+        preventDefault(event);
+      }
+      if (key === "Escape") {
+        menu.value.$el.focus();
+        close();
+        return;
+      }
+      if (key === "ArrowDown" || key === "ArrowUp") {
+        focusChildElementByKey(menu.value.$el, menuOptionsRef.value, key);
       }
     }
     function open() {
@@ -17528,6 +17787,7 @@ const __sfc__$z = vue.defineComponent({
     return {
       show,
       menu,
+      menuOptionsRef,
       n: n$w,
       classes: classes$q,
       formatElevation,
@@ -17569,75 +17829,77 @@ const props$s = {
   disabled: Boolean
 };
 const { name: name$s, n: n$v, classes: classes$p } = createNamespace("option");
+const _hoisted_1$f = ["tabindex"];
 function __render__$x(_ctx, _cache) {
   const _component_var_checkbox = vue.resolveComponent("var-checkbox");
   const _component_var_hover_overlay = vue.resolveComponent("var-hover-overlay");
   const _directive_ripple = vue.resolveDirective("ripple");
   const _directive_hover = vue.resolveDirective("hover");
-  return vue.withDirectives((vue.openBlock(), vue.createElementBlock(
-    "div",
-    {
-      class: vue.normalizeClass(_ctx.classes(_ctx.n(), _ctx.n("$--box"), [_ctx.optionSelected, _ctx.n("--selected-color")], [_ctx.disabled, _ctx.n("--disabled")])),
-      style: vue.normalizeStyle({
-        color: _ctx.optionSelected ? _ctx.focusColor : void 0
-      }),
-      onClick: _cache[2] || (_cache[2] = (...args) => _ctx.handleClick && _ctx.handleClick(...args))
-    },
-    [
+  return vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", {
+    ref: "root",
+    class: vue.normalizeClass(_ctx.classes(_ctx.n(), _ctx.n("$--box"), [_ctx.optionSelected, _ctx.n("--selected-color")], [_ctx.disabled, _ctx.n("--disabled")])),
+    style: vue.normalizeStyle({
+      color: _ctx.optionSelected ? _ctx.focusColor : void 0
+    }),
+    tabindex: _ctx.disabled ? void 0 : "-1",
+    onFocus: _cache[2] || (_cache[2] = ($event) => _ctx.isFocusing = true),
+    onBlur: _cache[3] || (_cache[3] = ($event) => _ctx.isFocusing = false),
+    onClick: _cache[4] || (_cache[4] = (...args) => _ctx.handleClick && _ctx.handleClick(...args))
+  }, [
+    vue.createElementVNode(
+      "div",
+      {
+        class: vue.normalizeClass(_ctx.classes(_ctx.n("cover"), [_ctx.optionSelected, _ctx.n("--selected-background")])),
+        style: vue.normalizeStyle({
+          background: _ctx.optionSelected ? _ctx.focusColor : void 0
+        })
+      },
+      null,
+      6
+      /* CLASS, STYLE */
+    ),
+    _ctx.multiple ? (vue.openBlock(), vue.createBlock(_component_var_checkbox, {
+      key: 0,
+      ref: "checkbox",
+      modelValue: _ctx.optionSelected,
+      "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.optionSelected = $event),
+      "checked-color": _ctx.focusColor,
+      disabled: _ctx.disabled,
+      onClick: _cache[1] || (_cache[1] = vue.withModifiers(() => {
+      }, ["stop"])),
+      onChange: _ctx.handleSelect
+    }, null, 8, ["modelValue", "checked-color", "disabled", "onChange"])) : vue.createCommentVNode("v-if", true),
+    vue.renderSlot(_ctx.$slots, "default", {}, () => [
       vue.createElementVNode(
         "div",
         {
-          class: vue.normalizeClass(_ctx.classes(_ctx.n("cover"), [_ctx.optionSelected, _ctx.n("--selected-background")])),
-          style: vue.normalizeStyle({
-            background: _ctx.optionSelected ? _ctx.focusColor : void 0
-          })
+          class: vue.normalizeClass(_ctx.classes(_ctx.n("text"), _ctx.n("$--ellipsis")))
         },
-        null,
-        6
-        /* CLASS, STYLE */
-      ),
-      _ctx.multiple ? (vue.openBlock(), vue.createBlock(_component_var_checkbox, {
-        key: 0,
-        ref: "checkbox",
-        modelValue: _ctx.optionSelected,
-        "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.optionSelected = $event),
-        "checked-color": _ctx.focusColor,
-        disabled: _ctx.disabled,
-        onClick: _cache[1] || (_cache[1] = vue.withModifiers(() => {
-        }, ["stop"])),
-        onChange: _ctx.handleSelect
-      }, null, 8, ["modelValue", "checked-color", "disabled", "onChange"])) : vue.createCommentVNode("v-if", true),
-      vue.renderSlot(_ctx.$slots, "default", {}, () => [
-        vue.createElementVNode(
-          "div",
-          {
-            class: vue.normalizeClass(_ctx.classes(_ctx.n("text"), _ctx.n("$--ellipsis")))
-          },
-          vue.toDisplayString(_ctx.label),
-          3
-          /* TEXT, CLASS */
-        )
-      ]),
-      vue.createVNode(_component_var_hover_overlay, {
-        hovering: _ctx.hovering && !_ctx.disabled
-      }, null, 8, ["hovering"])
-    ],
-    6
-    /* CLASS, STYLE */
-  )), [
+        vue.toDisplayString(_ctx.label),
+        3
+        /* TEXT, CLASS */
+      )
+    ]),
+    vue.createVNode(_component_var_hover_overlay, {
+      hovering: _ctx.hovering && !_ctx.disabled,
+      focusing: _ctx.isFocusing && !_ctx.disabled
+    }, null, 8, ["hovering", "focusing"])
+  ], 46, _hoisted_1$f)), [
     [_directive_ripple, { disabled: _ctx.disabled }],
     [_directive_hover, _ctx.handleHovering, "desktop"]
   ]);
 }
 const __sfc__$y = vue.defineComponent({
   name: name$s,
-  directives: { Ripple: stdin_default$5T, Hover: stdin_default$5v },
+  directives: { Ripple: stdin_default$5U, Hover: stdin_default$5N },
   components: {
     VarCheckbox: stdin_default$57,
-    VarHoverOverlay: stdin_default$5w
+    VarHoverOverlay: stdin_default$5O
   },
   props: props$s,
   setup(props2) {
+    const root = vue.ref();
+    const isFocusing = vue.ref(false);
     const optionSelected = vue.ref(false);
     const selected = vue.computed(() => optionSelected.value);
     const label = vue.computed(() => props2.label);
@@ -17653,12 +17915,34 @@ const __sfc__$y = vue.defineComponent({
     };
     vue.watch([() => props2.label, () => props2.value], computeLabel);
     bindSelect(optionProvider);
+    useEventListener(() => window, "keydown", handleKeydown);
+    useEventListener(() => window, "keyup", handleKeyup);
     function handleClick() {
       if (props2.disabled) {
         return;
       }
       handleSelect();
     }
+    function handleKeydown(event) {
+      if (!isFocusing.value) {
+        return;
+      }
+      if (event.key === " " || event.key === "Enter") {
+        preventDefault(event);
+      }
+      if (event.key === "Enter") {
+        root.value.click();
+      }
+    }
+    function handleKeyup(event) {
+      if (!isFocusing.value) {
+        return;
+      }
+      if (event.key === " ") {
+        preventDefault(event);
+        root.value.click();
+      }
+    }
     function handleSelect() {
       if (multiple.value) {
         optionSelected.value = !optionSelected.value;
@@ -17669,10 +17953,12 @@ const __sfc__$y = vue.defineComponent({
       optionSelected.value = checked;
     }
     return {
+      root,
       optionSelected,
       multiple,
       focusColor,
       hovering,
+      isFocusing,
       n: n$v,
       classes: classes$p,
       handleHovering,
@@ -17695,7 +17981,13 @@ const props$r = {
   },
   teleport: [String, Object, Boolean],
   onClick: defineListenerProp(),
-  "onUpdate:show": defineListenerProp()
+  "onUpdate:show": defineListenerProp(),
+  // internal for esc
+  onKeyEscape: defineListenerProp(),
+  closeOnKeyEscape: {
+    type: Boolean,
+    default: true
+  }
 };
 const {
   name: name$r,
@@ -17712,10 +18004,25 @@ var stdin_default$40 = vue.defineComponent({
     const {
       zIndex
     } = useZIndex(() => props2.show, 1);
+    const {
+      onStackTop
+    } = useStack(() => props2.show, zIndex);
     const {
       disabled
     } = useTeleport();
     useLock(() => props2.show, () => props2.lockScroll);
+    useEventListener(window, "keydown", handleKeydown);
+    function handleKeydown(event) {
+      if (!onStackTop() || event.key !== "Escape" || !props2.show) {
+        return;
+      }
+      call(props2.onKeyEscape);
+      if (!props2.closeOnKeyEscape) {
+        return;
+      }
+      preventDefault(event);
+      call(props2["onUpdate:show"], false);
+    }
     function handleClickOverlay() {
       call(props2.onClick);
       call(props2["onUpdate:show"], false);
@@ -17724,7 +18031,7 @@ var stdin_default$40 = vue.defineComponent({
       return vue.createVNode("div", vue.mergeProps({
         "class": n$u(),
         "style": {
-          zIndex: zIndex.value - 1
+          zIndex: zIndex.value
         }
       }, attrs, {
         "onClick": handleClickOverlay
@@ -18034,10 +18341,10 @@ const __sfc__$x = vue.defineComponent({
   components: {
     VarMenuSelect: stdin_default$43,
     VarMenuOption: stdin_default$45,
-    VarIcon: stdin_default$5P,
+    VarIcon: stdin_default$5Q,
     VarInput: stdin_default$4f
   },
-  directives: { Ripple: stdin_default$5T },
+  directives: { Ripple: stdin_default$5U },
   props: props$q,
   setup(props2) {
     const quickJumperValue = vue.ref("");
@@ -18244,7 +18551,7 @@ function __render__$v(_ctx, _cache) {
 }
 const __sfc__$w = vue.defineComponent({
   name: name$p,
-  directives: { Ripple: stdin_default$5T },
+  directives: { Ripple: stdin_default$5U },
   props: props$p,
   setup(props2) {
     function handleClick(e) {
@@ -18337,7 +18644,10 @@ const props$o = __spreadValues$7({
   "onOpened",
   "onClosed",
   "onClickOverlay",
-  "onRouteChange"
+  "onRouteChange",
+  // internal for esc
+  "onKeyEscape",
+  "closeOnKeyEscape"
 ]));
 const { name: name$o, n: n$r, classes: classes$m } = createNamespace("picker");
 const MOMENTUM_RECORD_TIME = 300;
@@ -18346,8 +18656,8 @@ const TRANSITION_DURATION = 200;
 const MOMENTUM_TRANSITION_DURATION = 1e3;
 let sid$1 = 0;
 const _hoisted_1$d = ["onTouchstartPassive", "onTouchmove", "onTouchend"];
-const _hoisted_2$9 = ["onTransitionend"];
-const _hoisted_3$8 = ["onClick"];
+const _hoisted_2$a = ["onTransitionend"];
+const _hoisted_3$9 = ["onClick"];
 function __render__$u(_ctx, _cache) {
   const _component_var_button = vue.resolveComponent("var-button");
   return vue.openBlock(), vue.createBlock(
@@ -18360,7 +18670,9 @@ function __render__$u(_ctx, _cache) {
         onClosed: _ctx.onClosed,
         onClickOverlay: _ctx.onClickOverlay,
         onRouteChange: _ctx.onRouteChange,
+        onKeyEscape: _ctx.onKeyEscape,
         closeOnClickOverlay: _ctx.closeOnClickOverlay,
+        closeOnKeyEscape: _ctx.closeOnKeyEscape,
         teleport: _ctx.teleport,
         show: _ctx.show,
         safeArea: _ctx.safeArea,
@@ -18495,12 +18807,12 @@ function __render__$u(_ctx, _cache) {
                                 3
                                 /* TEXT, CLASS */
                               )
-                            ], 14, _hoisted_3$8);
+                            ], 14, _hoisted_3$9);
                           }),
                           128
                           /* KEYED_FRAGMENT */
                         ))
-                      ], 46, _hoisted_2$9)
+                      ], 46, _hoisted_2$a)
                     ], 42, _hoisted_1$d);
                   }),
                   128
@@ -18549,7 +18861,7 @@ const __sfc__$v = vue.defineComponent({
   name: name$o,
   components: {
     VarButton: stdin_default$5t,
-    VarPopup: stdin_default$5R
+    VarPopup: stdin_default$5S
   },
   inheritAttrs: false,
   props: props$o,
@@ -18933,11 +19245,11 @@ const RADIUS = 20;
 const CIRCUMFERENCE = 2 * Math.PI * RADIUS;
 const { name: name$n, n: n$q, classes: classes$l } = createNamespace("progress");
 const _hoisted_1$c = ["viewBox"];
-const _hoisted_2$8 = { key: 0 };
-const _hoisted_3$7 = ["id"];
+const _hoisted_2$9 = { key: 0 };
+const _hoisted_3$8 = ["id"];
 const _hoisted_4$2 = ["offset", "stop-color"];
 const _hoisted_5$1 = ["d", "stroke-width", "stroke-dasharray"];
-const _hoisted_6 = ["d", "stroke-width", "stroke-dasharray", "stroke-dashoffset"];
+const _hoisted_6$1 = ["d", "stroke-width", "stroke-dasharray", "stroke-dashoffset"];
 function __render__$t(_ctx, _cache) {
   return vue.openBlock(), vue.createElementBlock(
     "div",
@@ -19038,7 +19350,7 @@ function __render__$t(_ctx, _cache) {
             class: vue.normalizeClass(_ctx.n("circle-svg")),
             viewBox: _ctx.circleProps.viewBox
           }, [
-            _ctx.isPlainObject(_ctx.color) ? (vue.openBlock(), vue.createElementBlock("defs", _hoisted_2$8, [
+            _ctx.isPlainObject(_ctx.color) ? (vue.openBlock(), vue.createElementBlock("defs", _hoisted_2$9, [
               vue.createElementVNode("linearGradient", {
                 id: _ctx.id,
                 x1: "100%",
@@ -19059,7 +19371,7 @@ function __render__$t(_ctx, _cache) {
                   128
                   /* KEYED_FRAGMENT */
                 ))
-              ], 8, _hoisted_3$7)
+              ], 8, _hoisted_3$8)
             ])) : vue.createCommentVNode("v-if", true),
             _ctx.track ? (vue.openBlock(), vue.createElementBlock("path", {
               key: 1,
@@ -19084,7 +19396,7 @@ function __render__$t(_ctx, _cache) {
                 transform: `rotateZ(${_ctx.rotate}deg)`,
                 transformOrigin: "50% 50%"
               })
-            }, null, 14, _hoisted_6)
+            }, null, 14, _hoisted_6$1)
           ], 10, _hoisted_1$c)),
           _ctx.label ? (vue.openBlock(), vue.createElementBlock(
             "div",
@@ -19257,7 +19569,7 @@ function __render__$s(_ctx, _cache) {
 }
 const __sfc__$t = vue.defineComponent({
   name: name$m,
-  components: { VarIcon: stdin_default$5P },
+  components: { VarIcon: stdin_default$5Q },
   props: props$m,
   setup(props2) {
     const controlPosition = vue.ref(0);
@@ -19546,11 +19858,11 @@ function __render__$r(_ctx, _cache) {
 }
 const __sfc__$s = vue.defineComponent({
   name: name$l,
-  directives: { Ripple: stdin_default$5T, Hover: stdin_default$5v },
+  directives: { Ripple: stdin_default$5U, Hover: stdin_default$5N },
   components: {
-    VarIcon: stdin_default$5P,
+    VarIcon: stdin_default$5Q,
     VarFormDetails: stdin_default$59,
-    VarHoverOverlay: stdin_default$5w
+    VarHoverOverlay: stdin_default$5O
   },
   inheritAttrs: false,
   props: props$l,
@@ -19857,11 +20169,11 @@ function __render__$p(_ctx, _cache) {
 const __sfc__$q = vue.defineComponent({
   name: name$j,
   components: {
-    VarIcon: stdin_default$5P,
+    VarIcon: stdin_default$5Q,
     VarFormDetails: stdin_default$59,
-    VarHoverOverlay: stdin_default$5w
+    VarHoverOverlay: stdin_default$5O
   },
-  directives: { Ripple: stdin_default$5T, Hover: stdin_default$5v },
+  directives: { Ripple: stdin_default$5U, Hover: stdin_default$5N },
   props: props$j,
   setup(props2) {
     const currentHoveringValue = vue.ref(-1);
@@ -19992,18 +20304,18 @@ const _hoisted_1$a = {
   xmlns: "http://www.w3.org/2000/svg",
   viewBox: "2 3.6 20 20"
 };
-const _hoisted_2$7 = /* @__PURE__ */ _withScopeId$5(() => /* @__PURE__ */ vue.createElementVNode(
+const _hoisted_2$8 = /* @__PURE__ */ _withScopeId$5(() => /* @__PURE__ */ vue.createElementVNode(
   "path",
   { d: "M11,9H13V7H11M11,20H13V11H11V20Z" },
   null,
   -1
   /* HOISTED */
 ));
-const _hoisted_3$6 = [
-  _hoisted_2$7
+const _hoisted_3$7 = [
+  _hoisted_2$8
 ];
 function __render__$o(_ctx, _cache) {
-  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$a, [..._hoisted_3$6]);
+  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$a, [..._hoisted_3$7]);
 }
 const __sfc__$p = vue.defineComponent({});
 __sfc__$p.render = __render__$o;
@@ -20013,18 +20325,18 @@ const _hoisted_1$9 = {
   xmlns: "http://www.w3.org/2000/svg",
   viewBox: "2 2 20 20"
 };
-const _hoisted_2$6 = /* @__PURE__ */ _withScopeId$4(() => /* @__PURE__ */ vue.createElementVNode(
+const _hoisted_2$7 = /* @__PURE__ */ _withScopeId$4(() => /* @__PURE__ */ vue.createElementVNode(
   "path",
   { d: "M19,3V5H19V19M17,8.4L13.4,12L17,15.6L15.6,17L12,13.4L8.4,17L7,15.6L10.6,12L7,8.4L8.4,7L12,10.6L15.6,7L17,8.4Z" },
   null,
   -1
   /* HOISTED */
 ));
-const _hoisted_3$5 = [
-  _hoisted_2$6
+const _hoisted_3$6 = [
+  _hoisted_2$7
 ];
 function __render__$n(_ctx, _cache) {
-  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$9, [..._hoisted_3$5]);
+  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$9, [..._hoisted_3$6]);
 }
 const __sfc__$o = vue.defineComponent({});
 __sfc__$o.render = __render__$n;
@@ -20034,18 +20346,18 @@ const _hoisted_1$8 = {
   xmlns: "http://www.w3.org/2000/svg",
   viewBox: "-6 -4 35 35"
 };
-const _hoisted_2$5 = /* @__PURE__ */ _withScopeId$3(() => /* @__PURE__ */ vue.createElementVNode(
+const _hoisted_2$6 = /* @__PURE__ */ _withScopeId$3(() => /* @__PURE__ */ vue.createElementVNode(
   "path",
   { d: "M10,21H14A2,2 0 0,1 12,23A2,2 0 0,1 10,21M21,19V20H3V19L5,17V11C5,7.9 7.03,5.17 10,4.29C10,4.19 10,4.1 10,4A2,2 0 0,1 12,2A2,2 0 0,1 14,4C14,4.1 14,4.19 14,4.29C16.97,5.17 19,7.9 19,11V17L21,19M17,11A5,5 0 0,0 12,6A5,5 0 0,0 7,11V18H17V11M19.75,3.19L18.33,4.61M1,11" },
   null,
   -1
   /* HOISTED */
 ));
-const _hoisted_3$4 = [
-  _hoisted_2$5
+const _hoisted_3$5 = [
+  _hoisted_2$6
 ];
 function __render__$m(_ctx, _cache) {
-  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$8, [..._hoisted_3$4]);
+  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$8, [..._hoisted_3$5]);
 }
 const __sfc__$n = vue.defineComponent({});
 __sfc__$n.render = __render__$m;
@@ -20152,25 +20464,25 @@ const _hoisted_1$7 = {
   xmlns: "http://www.w3.org/2000/svg",
   viewBox: "-3 -3 30 30"
 };
-const _hoisted_2$4 = /* @__PURE__ */ _withScopeId$2(() => /* @__PURE__ */ vue.createElementVNode(
+const _hoisted_2$5 = /* @__PURE__ */ _withScopeId$2(() => /* @__PURE__ */ vue.createElementVNode(
   "path",
   { d: "M10,19H13V22H10V19M12,2C17.35,2.22 19.68,7.62 16.5,11.67C15.67,12.67 14.33,13.33 13.67,14.17C13,15 13,16 13,17H10C10,15.33 10,13.92 10.67,12.92C11.33,11.92 12.67,11.33 13.5,10.67C15.92,8.43 15.32,5.26 12,5A3,3 0 0,0 9,8H6A6,6 0 0,1 12,2Z" },
   null,
   -1
   /* HOISTED */
 ));
-const _hoisted_3$3 = [
-  _hoisted_2$4
+const _hoisted_3$4 = [
+  _hoisted_2$5
 ];
 function __render__$k(_ctx, _cache) {
-  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$7, [..._hoisted_3$3]);
+  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$7, [..._hoisted_3$4]);
 }
 const __sfc__$l = vue.defineComponent({});
 __sfc__$l.render = __render__$k;
 var stdin_default$3G = __sfc__$l;
 const _withScopeId$1 = (n2) => (vue.pushScopeId(""), n2 = n2(), vue.popScopeId(), n2);
 const _hoisted_1$6 = { viewBox: "-4 -4 32 32" };
-const _hoisted_2$3 = /* @__PURE__ */ _withScopeId$1(() => /* @__PURE__ */ vue.createElementVNode(
+const _hoisted_2$4 = /* @__PURE__ */ _withScopeId$1(() => /* @__PURE__ */ vue.createElementVNode(
   "path",
   {
     fill: "currentColor",
@@ -20180,11 +20492,11 @@ const _hoisted_2$3 = /* @__PURE__ */ _withScopeId$1(() => /* @__PURE__ */ vue.cr
   -1
   /* HOISTED */
 ));
-const _hoisted_3$2 = [
-  _hoisted_2$3
+const _hoisted_3$3 = [
+  _hoisted_2$4
 ];
 function __render__$j(_ctx, _cache) {
-  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$6, [..._hoisted_3$2]);
+  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$6, [..._hoisted_3$3]);
 }
 const __sfc__$k = vue.defineComponent({});
 __sfc__$k.render = __render__$j;
@@ -20413,260 +20725,262 @@ const props$g = __spreadValues$6({
     default: void 0
   },
   multiple: Boolean,
-  offsetY: {
-    type: [String, Number],
-    default: 0
-  },
-  chip: Boolean,
-  readonly: Boolean,
-  separator: {
-    type: String,
-    default: ","
-  },
-  textAlign: {
-    type: String,
-    default: "left"
-  },
-  validateTrigger: {
-    type: Array,
-    default: () => ["onChange", "onClear", "onClose"]
-  },
-  rules: Array,
-  onFocus: defineListenerProp(),
-  onBlur: defineListenerProp(),
-  onClose: defineListenerProp(),
-  onChange: defineListenerProp(),
-  onClear: defineListenerProp(),
-  "onUpdate:modelValue": defineListenerProp()
-}, pickProps(props$I, [
-  "size",
-  "variant",
-  "placeholder",
-  "line",
-  "hint",
-  "textColor",
-  "focusColor",
-  "blurColor",
-  "disabled",
-  "clearable",
-  "onClick"
-]));
-const { name: name$g, n: n$i, classes: classes$e } = createNamespace("select");
-const _hoisted_1$5 = { key: 1 };
-function __render__$g(_ctx, _cache) {
-  const _component_var_chip = vue.resolveComponent("var-chip");
-  const _component_var_icon = vue.resolveComponent("var-icon");
-  const _component_var_field_decorator = vue.resolveComponent("var-field-decorator");
-  const _component_var_menu = vue.resolveComponent("var-menu");
-  const _component_var_form_details = vue.resolveComponent("var-form-details");
-  return vue.openBlock(), vue.createElementBlock(
-    "div",
-    {
-      class: vue.normalizeClass(_ctx.n()),
-      onClick: _cache[3] || (_cache[3] = (...args) => _ctx.handleFocus && _ctx.handleFocus(...args))
-    },
-    [
-      vue.createVNode(_component_var_menu, {
-        "var-select-cover": "",
-        "same-width": "",
-        "close-on-click-reference": "",
-        show: _ctx.showMenu,
-        "onUpdate:show": _cache[1] || (_cache[1] = ($event) => _ctx.showMenu = $event),
-        class: vue.normalizeClass(_ctx.n("menu")),
-        "popover-class": _ctx.variant === "standard" && _ctx.hint ? _ctx.n("--standard-menu-margin") : void 0,
-        "offset-y": _ctx.offsetY,
-        disabled: _ctx.formReadonly || _ctx.readonly || _ctx.formDisabled || _ctx.disabled,
-        placement: _ctx.placement,
-        "default-style": false,
-        onClickOutside: _ctx.handleBlur
-      }, {
-        menu: vue.withCtx(() => [
-          vue.createElementVNode(
-            "div",
-            {
-              ref: "menuEl",
-              class: vue.normalizeClass(_ctx.classes(_ctx.n("scroller"), _ctx.n("$-elevation--3")))
-            },
-            [
-              vue.renderSlot(_ctx.$slots, "default")
-            ],
-            2
-            /* CLASS */
-          )
-        ]),
-        default: vue.withCtx(() => [
-          vue.createVNode(
-            _component_var_field_decorator,
-            vue.normalizeProps(vue.guardReactiveProps({
-              value: _ctx.modelValue,
-              size: _ctx.size,
-              variant: _ctx.variant,
-              placeholder: _ctx.placeholder,
-              line: _ctx.line,
-              hint: _ctx.hint,
-              textColor: _ctx.textColor,
-              focusColor: _ctx.focusColor,
-              blurColor: _ctx.blurColor,
-              isFocus: _ctx.isFocus,
-              errorMessage: _ctx.errorMessage,
-              formDisabled: _ctx.formDisabled,
-              disabled: _ctx.disabled,
-              clearable: _ctx.clearable,
-              cursor: _ctx.cursor,
-              onClick: _ctx.handleClick,
-              onClear: _ctx.handleClear
-            })),
-            vue.createSlots({
-              "clear-icon": vue.withCtx(() => [
-                vue.renderSlot(_ctx.$slots, "clear-icon")
-              ]),
-              "append-icon": vue.withCtx(() => [
-                vue.renderSlot(_ctx.$slots, "append-icon")
-              ]),
-              default: vue.withCtx(() => [
-                vue.createElementVNode(
-                  "div",
-                  {
-                    class: vue.normalizeClass(_ctx.classes(_ctx.n("select"), [_ctx.errorMessage, _ctx.n("--error")], [_ctx.formDisabled || _ctx.disabled, _ctx.n("--disabled")])),
-                    style: vue.normalizeStyle({
-                      textAlign: _ctx.textAlign,
-                      color: _ctx.textColor
-                    })
-                  },
-                  [
-                    vue.createElementVNode(
-                      "div",
-                      {
-                        class: vue.normalizeClass(_ctx.n("label"))
-                      },
-                      [
-                        !_ctx.isEmptyModelValue ? vue.renderSlot(_ctx.$slots, "selected", { key: 0 }, () => [
-                          _ctx.multiple ? (vue.openBlock(), vue.createElementBlock(
-                            vue.Fragment,
-                            { key: 0 },
-                            [
-                              _ctx.chip ? (vue.openBlock(), vue.createElementBlock(
-                                "div",
-                                {
-                                  key: 0,
-                                  class: vue.normalizeClass(_ctx.n("chips"))
-                                },
-                                [
-                                  (vue.openBlock(true), vue.createElementBlock(
-                                    vue.Fragment,
-                                    null,
-                                    vue.renderList(_ctx.labels, (l) => {
-                                      return vue.openBlock(), vue.createBlock(_component_var_chip, {
-                                        class: vue.normalizeClass(_ctx.n("chip")),
-                                        "var-select-cover": "",
-                                        closeable: "",
-                                        size: "small",
-                                        type: _ctx.errorMessage ? "danger" : void 0,
-                                        key: l,
-                                        onClick: _cache[0] || (_cache[0] = vue.withModifiers(() => {
-                                        }, ["stop"])),
-                                        onClose: () => _ctx.handleClose(l)
-                                      }, {
-                                        default: vue.withCtx(() => [
-                                          vue.createTextVNode(
-                                            vue.toDisplayString(l),
-                                            1
-                                            /* TEXT */
-                                          )
-                                        ]),
-                                        _: 2
-                                        /* DYNAMIC */
-                                      }, 1032, ["class", "type", "onClose"]);
-                                    }),
-                                    128
-                                    /* KEYED_FRAGMENT */
-                                  ))
-                                ],
-                                2
-                                /* CLASS */
-                              )) : (vue.openBlock(), vue.createElementBlock(
-                                "div",
-                                {
-                                  key: 1,
-                                  class: vue.normalizeClass(_ctx.n("values"))
-                                },
-                                vue.toDisplayString(_ctx.labels.join(_ctx.separator)),
-                                3
-                                /* TEXT, CLASS */
-                              ))
-                            ],
-                            64
-                            /* STABLE_FRAGMENT */
-                          )) : (vue.openBlock(), vue.createElementBlock(
-                            "span",
-                            _hoisted_1$5,
-                            vue.toDisplayString(_ctx.label),
-                            1
-                            /* TEXT */
-                          ))
-                        ]) : vue.createCommentVNode("v-if", true)
-                      ],
-                      2
-                      /* CLASS */
-                    ),
-                    _ctx.enableCustomPlaceholder ? (vue.openBlock(), vue.createElementBlock(
-                      "span",
-                      {
-                        key: 0,
-                        class: vue.normalizeClass(_ctx.classes(_ctx.n("placeholder"), _ctx.n("$--ellipsis"))),
-                        style: vue.normalizeStyle({
-                          color: _ctx.placeholderColor
-                        })
-                      },
-                      vue.toDisplayString(_ctx.placeholder),
-                      7
-                      /* TEXT, CLASS, STYLE */
-                    )) : vue.createCommentVNode("v-if", true),
-                    vue.renderSlot(_ctx.$slots, "arrow-icon", { focus: _ctx.showMenu }, () => [
-                      vue.createVNode(_component_var_icon, {
-                        class: vue.normalizeClass(_ctx.classes(_ctx.n("arrow"), [_ctx.showMenu, _ctx.n("--arrow-rotate")])),
-                        "var-select-cover": "",
-                        name: "menu-down",
-                        transition: 300
-                      }, null, 8, ["class"])
-                    ])
-                  ],
-                  6
-                  /* CLASS, STYLE */
-                )
-              ]),
-              _: 2
-              /* DYNAMIC */
-            }, [
-              _ctx.$slots["prepend-icon"] ? {
-                name: "prepend-icon",
-                fn: vue.withCtx(() => [
-                  vue.renderSlot(_ctx.$slots, "prepend-icon")
-                ]),
-                key: "0"
-              } : void 0
+  offsetY: {
+    type: [String, Number],
+    default: 0
+  },
+  chip: Boolean,
+  readonly: Boolean,
+  separator: {
+    type: String,
+    default: ","
+  },
+  textAlign: {
+    type: String,
+    default: "left"
+  },
+  validateTrigger: {
+    type: Array,
+    default: () => ["onChange", "onClear", "onClose"]
+  },
+  rules: Array,
+  onFocus: defineListenerProp(),
+  onBlur: defineListenerProp(),
+  onClose: defineListenerProp(),
+  onChange: defineListenerProp(),
+  onClear: defineListenerProp(),
+  "onUpdate:modelValue": defineListenerProp()
+}, pickProps(props$I, [
+  "size",
+  "variant",
+  "placeholder",
+  "line",
+  "hint",
+  "textColor",
+  "focusColor",
+  "blurColor",
+  "disabled",
+  "clearable",
+  "onClick"
+]));
+const { name: name$g, n: n$i, classes: classes$e } = createNamespace("select");
+const _hoisted_1$5 = ["tabindex"];
+const _hoisted_2$3 = { key: 1 };
+function __render__$g(_ctx, _cache) {
+  const _component_var_chip = vue.resolveComponent("var-chip");
+  const _component_var_icon = vue.resolveComponent("var-icon");
+  const _component_var_field_decorator = vue.resolveComponent("var-field-decorator");
+  const _component_var_menu = vue.resolveComponent("var-menu");
+  const _component_var_form_details = vue.resolveComponent("var-form-details");
+  return vue.openBlock(), vue.createElementBlock("div", {
+    ref: "root",
+    class: vue.normalizeClass(_ctx.n()),
+    tabindex: _ctx.disabled || _ctx.formDisabled ? void 0 : "0",
+    onFocus: _cache[3] || (_cache[3] = (...args) => _ctx.handleFocus && _ctx.handleFocus(...args)),
+    onBlur: _cache[4] || (_cache[4] = (...args) => _ctx.handleRootBlur && _ctx.handleRootBlur(...args))
+  }, [
+    vue.createVNode(_component_var_menu, {
+      "var-select-cover": "",
+      "same-width": "",
+      "close-on-click-reference": "",
+      "close-on-key-escape": false,
+      class: vue.normalizeClass(_ctx.n("menu")),
+      "popover-class": _ctx.variant === "standard" && _ctx.hint ? _ctx.n("--standard-menu-margin") : void 0,
+      "offset-y": _ctx.offsetY,
+      disabled: _ctx.formReadonly || _ctx.readonly || _ctx.formDisabled || _ctx.disabled,
+      placement: _ctx.placement,
+      "default-style": false,
+      show: _ctx.showMenu,
+      "onUpdate:show": _cache[1] || (_cache[1] = ($event) => _ctx.showMenu = $event),
+      onClickOutside: _ctx.handleClickOutside
+    }, {
+      menu: vue.withCtx(() => [
+        vue.createElementVNode(
+          "div",
+          {
+            ref: "menuEl",
+            class: vue.normalizeClass(_ctx.classes(_ctx.n("scroller"), _ctx.n("$-elevation--3")))
+          },
+          [
+            vue.renderSlot(_ctx.$slots, "default")
+          ],
+          2
+          /* CLASS */
+        )
+      ]),
+      default: vue.withCtx(() => [
+        vue.createVNode(
+          _component_var_field_decorator,
+          vue.normalizeProps(vue.guardReactiveProps({
+            value: _ctx.modelValue,
+            size: _ctx.size,
+            variant: _ctx.variant,
+            placeholder: _ctx.placeholder,
+            line: _ctx.line,
+            hint: _ctx.hint,
+            textColor: _ctx.textColor,
+            focusColor: _ctx.focusColor,
+            blurColor: _ctx.blurColor,
+            isFocusing: _ctx.isFocusing,
+            errorMessage: _ctx.errorMessage,
+            formDisabled: _ctx.formDisabled,
+            disabled: _ctx.disabled,
+            clearable: _ctx.clearable,
+            cursor: _ctx.cursor,
+            onClick: _ctx.handleClick,
+            onClear: _ctx.handleClear
+          })),
+          vue.createSlots({
+            "clear-icon": vue.withCtx(() => [
+              vue.renderSlot(_ctx.$slots, "clear-icon")
             ]),
-            1040
-            /* FULL_PROPS, DYNAMIC_SLOTS */
-          )
-        ]),
-        _: 3
-        /* FORWARDED */
-      }, 8, ["show", "class", "popover-class", "offset-y", "disabled", "placement", "onClickOutside"]),
-      vue.createVNode(_component_var_form_details, {
-        "error-message": _ctx.errorMessage,
-        onClick: _cache[2] || (_cache[2] = vue.withModifiers(() => {
-        }, ["stop"]))
-      }, null, 8, ["error-message"])
-    ],
-    2
-    /* CLASS */
-  );
+            "append-icon": vue.withCtx(() => [
+              vue.renderSlot(_ctx.$slots, "append-icon")
+            ]),
+            default: vue.withCtx(() => [
+              vue.createElementVNode(
+                "div",
+                {
+                  class: vue.normalizeClass(_ctx.classes(_ctx.n("select"), [_ctx.errorMessage, _ctx.n("--error")], [_ctx.formDisabled || _ctx.disabled, _ctx.n("--disabled")])),
+                  style: vue.normalizeStyle({
+                    textAlign: _ctx.textAlign,
+                    color: _ctx.textColor
+                  })
+                },
+                [
+                  vue.createElementVNode(
+                    "div",
+                    {
+                      class: vue.normalizeClass(_ctx.n("label"))
+                    },
+                    [
+                      !_ctx.isEmptyModelValue ? vue.renderSlot(_ctx.$slots, "selected", { key: 0 }, () => [
+                        _ctx.multiple ? (vue.openBlock(), vue.createElementBlock(
+                          vue.Fragment,
+                          { key: 0 },
+                          [
+                            _ctx.chip ? (vue.openBlock(), vue.createElementBlock(
+                              "div",
+                              {
+                                key: 0,
+                                class: vue.normalizeClass(_ctx.n("chips"))
+                              },
+                              [
+                                (vue.openBlock(true), vue.createElementBlock(
+                                  vue.Fragment,
+                                  null,
+                                  vue.renderList(_ctx.labels, (l) => {
+                                    return vue.openBlock(), vue.createBlock(_component_var_chip, {
+                                      class: vue.normalizeClass(_ctx.n("chip")),
+                                      "var-select-cover": "",
+                                      closeable: "",
+                                      size: "small",
+                                      type: _ctx.errorMessage ? "danger" : void 0,
+                                      key: l,
+                                      onClick: _cache[0] || (_cache[0] = vue.withModifiers(() => {
+                                      }, ["stop"])),
+                                      onClose: () => _ctx.handleClose(l)
+                                    }, {
+                                      default: vue.withCtx(() => [
+                                        vue.createTextVNode(
+                                          vue.toDisplayString(l),
+                                          1
+                                          /* TEXT */
+                                        )
+                                      ]),
+                                      _: 2
+                                      /* DYNAMIC */
+                                    }, 1032, ["class", "type", "onClose"]);
+                                  }),
+                                  128
+                                  /* KEYED_FRAGMENT */
+                                ))
+                              ],
+                              2
+                              /* CLASS */
+                            )) : (vue.openBlock(), vue.createElementBlock(
+                              "div",
+                              {
+                                key: 1,
+                                class: vue.normalizeClass(_ctx.n("values"))
+                              },
+                              vue.toDisplayString(_ctx.labels.join(_ctx.separator)),
+                              3
+                              /* TEXT, CLASS */
+                            ))
+                          ],
+                          64
+                          /* STABLE_FRAGMENT */
+                        )) : (vue.openBlock(), vue.createElementBlock(
+                          "span",
+                          _hoisted_2$3,
+                          vue.toDisplayString(_ctx.label),
+                          1
+                          /* TEXT */
+                        ))
+                      ]) : vue.createCommentVNode("v-if", true)
+                    ],
+                    2
+                    /* CLASS */
+                  ),
+                  _ctx.enableCustomPlaceholder ? (vue.openBlock(), vue.createElementBlock(
+                    "span",
+                    {
+                      key: 0,
+                      class: vue.normalizeClass(_ctx.classes(_ctx.n("placeholder"), _ctx.n("$--ellipsis"))),
+                      style: vue.normalizeStyle({
+                        color: _ctx.placeholderColor
+                      })
+                    },
+                    vue.toDisplayString(_ctx.placeholder),
+                    7
+                    /* TEXT, CLASS, STYLE */
+                  )) : vue.createCommentVNode("v-if", true),
+                  vue.renderSlot(_ctx.$slots, "arrow-icon", {
+                    focus: _ctx.isFocusing,
+                    menuOpen: _ctx.showMenu
+                  }, () => [
+                    vue.createVNode(_component_var_icon, {
+                      class: vue.normalizeClass(_ctx.classes(_ctx.n("arrow"), [_ctx.showMenu, _ctx.n("--arrow-rotate")])),
+                      "var-select-cover": "",
+                      name: "menu-down",
+                      transition: 300
+                    }, null, 8, ["class"])
+                  ])
+                ],
+                6
+                /* CLASS, STYLE */
+              )
+            ]),
+            _: 2
+            /* DYNAMIC */
+          }, [
+            _ctx.$slots["prepend-icon"] ? {
+              name: "prepend-icon",
+              fn: vue.withCtx(() => [
+                vue.renderSlot(_ctx.$slots, "prepend-icon")
+              ]),
+              key: "0"
+            } : void 0
+          ]),
+          1040
+          /* FULL_PROPS, DYNAMIC_SLOTS */
+        )
+      ]),
+      _: 3
+      /* FORWARDED */
+    }, 8, ["class", "popover-class", "offset-y", "disabled", "placement", "show", "onClickOutside"]),
+    vue.createVNode(_component_var_form_details, {
+      "error-message": _ctx.errorMessage,
+      onClick: _cache[2] || (_cache[2] = vue.withModifiers(() => {
+      }, ["stop"]))
+    }, null, 8, ["error-message"])
+  ], 42, _hoisted_1$5);
 }
 const __sfc__$h = vue.defineComponent({
   name: name$g,
   components: {
-    VarIcon: stdin_default$5P,
+    VarIcon: stdin_default$5Q,
     VarMenu: stdin_default$47,
     VarChip: stdin_default$53,
     VarFieldDecorator: stdin_default$4x,
@@ -20674,8 +20988,9 @@ const __sfc__$h = vue.defineComponent({
   },
   props: props$g,
   setup(props2) {
-    const isFocus = vue.ref(false);
+    const isFocusing = vue.ref(false);
     const showMenu = vue.ref(false);
+    const root = vue.ref(null);
     const multiple = vue.computed(() => props2.multiple);
     const focusColor = vue.computed(() => props2.focusColor);
     const isEmptyModelValue = vue.computed(() => isEmpty(props2.modelValue));
@@ -20706,7 +21021,7 @@ const __sfc__$h = vue.defineComponent({
       if (errorMessage.value) {
         return "var(--field-decorator-error-color)";
       }
-      if (isFocus.value) {
+      if (isFocusing.value) {
         return focusColor2 || "var(--field-decorator-focus-color)";
       }
       return blurColor || "var(--field-decorator-placeholder-color, var(--field-decorator-blur-color))";
@@ -20731,7 +21046,52 @@ const __sfc__$h = vue.defineComponent({
       }
     );
     bindOptions(selectProvider);
+    useEventListener(() => window, "keydown", handleKeydown);
+    useEventListener(() => window, "keyup", handleKeyup);
     call(bindForm, selectProvider);
+    function handleKeydown(event) {
+      const { disabled, readonly } = props2;
+      if ((form == null ? void 0 : form.disabled.value) || (form == null ? void 0 : form.readonly.value) || disabled || readonly || !isFocusing.value) {
+        return;
+      }
+      const { key } = event;
+      if (key === " " && !showMenu.value) {
+        preventDefault(event);
+        return;
+      }
+      if (key === "Escape" && showMenu.value) {
+        root.value.focus();
+        preventDefault(event);
+        showMenu.value = false;
+        return;
+      }
+      if (key === "Tab" && showMenu.value) {
+        root.value.focus();
+        preventDefault(event);
+        handleBlur();
+        return;
+      }
+      if (key === "Enter" && !showMenu.value) {
+        preventDefault(event);
+        showMenu.value = true;
+        return;
+      }
+      if ((key === "ArrowDown" || key === "ArrowUp") && showMenu.value) {
+        preventDefault(event);
+        focusChildElementByKey(root.value, menuEl.value, key);
+      }
+    }
+    function handleKeyup(event) {
+      const { disabled, readonly } = props2;
+      if ((form == null ? void 0 : form.disabled.value) || (form == null ? void 0 : form.readonly.value) || disabled || readonly || showMenu.value || !isFocusing.value) {
+        return;
+      }
+      const { key } = event;
+      if (key === " " && !showMenu.value) {
+        preventDefault(event);
+        showMenu.value = true;
+      }
+    }
     function validateWithTrigger(trigger) {
       vue.nextTick(() => {
         const { validateTrigger, rules, modelValue } = props2;
@@ -20744,7 +21104,7 @@ const __sfc__$h = vue.defineComponent({
         return;
       }
       offsetY.value = toPxNum(props2.offsetY);
-      isFocus.value = true;
+      focus();
       call(onFocus);
       validateWithTrigger("onFocus");
     }
@@ -20757,6 +21117,18 @@ const __sfc__$h = vue.defineComponent({
       call(onBlur);
       validateWithTrigger("onBlur");
     }
+    function handleRootBlur() {
+      if (showMenu.value) {
+        return;
+      }
+      handleBlur();
+    }
+    function handleClickOutside() {
+      if (!isFocusing.value) {
+        return;
+      }
+      handleBlur();
+    }
     function onSelect(option) {
       const { disabled, readonly, multiple: multiple2, onChange } = props2;
       if ((form == null ? void 0 : form.disabled.value) || (form == null ? void 0 : form.readonly.value) || disabled || readonly) {
@@ -20767,7 +21139,10 @@ const __sfc__$h = vue.defineComponent({
       call(onChange, selectedValue);
       validateWithTrigger("onChange");
       if (!multiple2) {
-        blur();
+        root.value.focus();
+        doubleRaf().then(() => {
+          showMenu.value = false;
+        });
       }
     }
     function handleClear() {
@@ -20806,11 +21181,10 @@ const __sfc__$h = vue.defineComponent({
     }
     function focus() {
       offsetY.value = toPxNum(props2.offsetY);
-      isFocus.value = true;
-      showMenu.value = true;
+      isFocusing.value = true;
     }
     function blur() {
-      isFocus.value = false;
+      isFocusing.value = false;
       showMenu.value = false;
     }
     function validate() {
@@ -20821,8 +21195,9 @@ const __sfc__$h = vue.defineComponent({
       resetValidation();
     }
     return {
+      root,
       offsetY,
-      isFocus,
+      isFocusing,
       showMenu,
       errorMessage,
       formDisabled: form == null ? void 0 : form.disabled,
@@ -20839,9 +21214,11 @@ const __sfc__$h = vue.defineComponent({
       classes: classes$e,
       handleFocus,
       handleBlur,
+      handleClickOutside,
       handleClear,
       handleClick,
       handleClose,
+      handleRootBlur,
       reset,
       validate,
       resetValidation,
@@ -21268,9 +21645,9 @@ const __sfc__$f = vue.defineComponent({
   name: name$e,
   components: {
     VarFormDetails: stdin_default$59,
-    VarHoverOverlay: stdin_default$5w
+    VarHoverOverlay: stdin_default$5O
   },
-  directives: { Hover: stdin_default$5v },
+  directives: { Hover: stdin_default$5N },
   props: props$e,
   setup(props2) {
     const maxDistance = vue.ref(0);
@@ -21625,10 +22002,10 @@ const props$d = {
     default: 3e3
   },
   vertical: Boolean,
-  loadingType: pickProps(props$1a, "type"),
-  loadingSize: pickProps(props$1a, "size"),
-  loadingRadius: pickProps(props$1a, "radius"),
-  loadingColor: __spreadProps$1(__spreadValues$5({}, pickProps(props$1a, "color")), {
+  loadingType: pickProps(props$19, "type"),
+  loadingSize: pickProps(props$19, "size"),
+  loadingRadius: pickProps(props$19, "radius"),
+  loadingColor: __spreadProps$1(__spreadValues$5({}, pickProps(props$19, "color")), {
     default: "currentColor"
   }),
   lockScroll: Boolean,
@@ -21744,8 +22121,8 @@ function __render__$d(_ctx, _cache) {
 const __sfc__$e = vue.defineComponent({
   name: "VarSnackbarCore",
   components: {
-    VarLoading: stdin_default$5y,
-    VarIcon: stdin_default$5P
+    VarLoading: stdin_default$5v,
+    VarIcon: stdin_default$5Q
   },
   props: props$d,
   setup(props2) {
@@ -21951,7 +22328,7 @@ const TransitionGroupHost = {
       });
       return vue.createVNode(vue.TransitionGroup, vue.mergeProps(transitionGroupProps, {
         "style": {
-          zIndex: stdin_default$5U.zIndex
+          zIndex: stdin_default$5V.zIndex
         },
         "onAfterEnter": opened,
         "onAfterLeave": removeUniqOption
@@ -22299,7 +22676,7 @@ function __render__$b(_ctx, _cache) {
 }
 const __sfc__$c = vue.defineComponent({
   name: name$b,
-  components: { VarIcon: stdin_default$5P },
+  components: { VarIcon: stdin_default$5Q },
   props: props$b,
   setup() {
     const { index, steps, bindSteps } = useSteps();
@@ -22463,7 +22840,8 @@ const props$8 = {
 };
 const { name: name$8, n: n$9, classes: classes$8 } = createNamespace("switch");
 const _withScopeId = (n2) => (vue.pushScopeId(""), n2 = n2(), vue.popScopeId(), n2);
-const _hoisted_1$2 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ vue.createElementVNode(
+const _hoisted_1$2 = ["tabindex"];
+const _hoisted_2$2 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ vue.createElementVNode(
   "svg",
   { viewBox: "25 25 50 50" },
   [
@@ -22477,8 +22855,8 @@ const _hoisted_1$2 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ vue.crea
   -1
   /* HOISTED */
 ));
-const _hoisted_2$2 = [
-  _hoisted_1$2
+const _hoisted_3$2 = [
+  _hoisted_2$2
 ];
 function __render__$9(_ctx, _cache) {
   const _component_var_hover_overlay = vue.resolveComponent("var-hover-overlay");
@@ -22494,9 +22872,10 @@ function __render__$9(_ctx, _cache) {
       vue.createElementVNode(
         "div",
         {
+          ref: "switchRef",
           class: vue.normalizeClass(_ctx.classes(_ctx.n("block"), [_ctx.disabled || _ctx.formDisabled, _ctx.n("--disabled")])),
-          onClick: _cache[0] || (_cache[0] = (...args) => _ctx.switchActive && _ctx.switchActive(...args)),
-          style: vue.normalizeStyle(_ctx.styleComputed.switch)
+          style: vue.normalizeStyle(_ctx.styleComputed.switch),
+          onClick: _cache[2] || (_cache[2] = (...args) => _ctx.switchActive && _ctx.switchActive(...args))
         },
         [
           vue.createElementVNode(
@@ -22511,52 +22890,52 @@ function __render__$9(_ctx, _cache) {
             6
             /* CLASS, STYLE */
           ),
-          vue.withDirectives((vue.openBlock(), vue.createElementBlock(
-            "div",
-            {
-              class: vue.normalizeClass(_ctx.classes(_ctx.n("ripple"), [_ctx.modelValue === _ctx.activeValue, _ctx.n("ripple--active")])),
-              style: vue.normalizeStyle(_ctx.styleComputed.ripple)
-            },
-            [
-              vue.createElementVNode(
-                "div",
-                {
-                  style: vue.normalizeStyle(_ctx.styleComputed.handle),
-                  class: vue.normalizeClass(
-                    _ctx.classes(
-                      _ctx.n("handle"),
-                      _ctx.n("$-elevation--2"),
-                      [_ctx.modelValue === _ctx.activeValue, _ctx.n("handle--active")],
-                      [_ctx.errorMessage, _ctx.n("handle--error")]
-                    )
+          vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", {
+            class: vue.normalizeClass(_ctx.classes(_ctx.n("ripple"), [_ctx.modelValue === _ctx.activeValue, _ctx.n("ripple--active")])),
+            style: vue.normalizeStyle(_ctx.styleComputed.ripple),
+            tabindex: _ctx.disabled || _ctx.formDisabled ? void 0 : "0",
+            onFocus: _cache[0] || (_cache[0] = ($event) => _ctx.isFocusing = true),
+            onBlur: _cache[1] || (_cache[1] = ($event) => _ctx.isFocusing = false)
+          }, [
+            vue.createElementVNode(
+              "div",
+              {
+                style: vue.normalizeStyle(_ctx.styleComputed.handle),
+                class: vue.normalizeClass(
+                  _ctx.classes(
+                    _ctx.n("handle"),
+                    _ctx.n("$-elevation--2"),
+                    [_ctx.modelValue === _ctx.activeValue, _ctx.n("handle--active")],
+                    [_ctx.errorMessage, _ctx.n("handle--error")]
                   )
-                },
-                [
-                  _ctx.loading ? (vue.openBlock(), vue.createElementBlock(
-                    "span",
-                    {
-                      key: 0,
-                      class: vue.normalizeClass(_ctx.n("loading")),
-                      style: vue.normalizeStyle({
-                        width: _ctx.radius,
-                        height: _ctx.radius
-                      })
-                    },
-                    [..._hoisted_2$2],
-                    6
-                    /* CLASS, STYLE */
-                  )) : vue.createCommentVNode("v-if", true)
-                ],
-                6
-                /* CLASS, STYLE */
-              ),
-              vue.createVNode(_component_var_hover_overlay, { hovering: _ctx.hovering }, null, 8, ["hovering"])
-            ],
-            6
-            /* CLASS, STYLE */
-          )), [
+                )
+              },
+              [
+                _ctx.loading ? (vue.openBlock(), vue.createElementBlock(
+                  "span",
+                  {
+                    key: 0,
+                    class: vue.normalizeClass(_ctx.n("loading")),
+                    style: vue.normalizeStyle({
+                      width: _ctx.radius,
+                      height: _ctx.radius
+                    })
+                  },
+                  [..._hoisted_3$2],
+                  6
+                  /* CLASS, STYLE */
+                )) : vue.createCommentVNode("v-if", true)
+              ],
+              6
+              /* CLASS, STYLE */
+            ),
+            vue.createVNode(_component_var_hover_overlay, {
+              hovering: _ctx.hovering && !_ctx.disabled && !_ctx.formDisabled,
+              focusing: _ctx.isFocusing && !_ctx.disabled && !_ctx.formDisabled
+            }, null, 8, ["hovering", "focusing"])
+          ], 46, _hoisted_1$2)), [
             [_directive_ripple, {
-              disabled: !_ctx.ripple || _ctx.disabled || _ctx.loading || _ctx.formDisabled
+              disabled: !_ctx.ripple || _ctx.disabled || _ctx.loading || _ctx.formDisabled || _ctx.readonly || _ctx.formReadonly
             }]
           ])
         ],
@@ -22575,11 +22954,13 @@ const __sfc__$9 = vue.defineComponent({
   name: name$8,
   components: {
     VarFormDetails: stdin_default$59,
-    VarHoverOverlay: stdin_default$5w
+    VarHoverOverlay: stdin_default$5O
   },
-  directives: { Ripple: stdin_default$5T, Hover: stdin_default$5v },
+  directives: { Ripple: stdin_default$5U, Hover: stdin_default$5N },
   props: props$8,
   setup(props2) {
+    const switchRef = vue.ref(null);
+    const isFocusing = vue.ref(false);
     const { bindForm, form } = useForm();
     const { errorMessage, validateWithTrigger: vt, validate: v, resetValidation } = useValidation();
     const { hovering, handleHovering } = useHoverOverlay();
@@ -22618,6 +22999,26 @@ const __sfc__$9 = vue.defineComponent({
       resetValidation
     };
     call(bindForm, switchProvider);
+    useEventListener(window, "keydown", handleKeydown);
+    useEventListener(window, "keyup", handleKeyup);
+    function handleKeydown(event) {
+      if (!isFocusing.value) {
+        return;
+      }
+      if (event.key === " " || event.key === "Enter") {
+        preventDefault(event);
+      }
+      if (event.key === "Enter") {
+        switchRef.value.click();
+      }
+    }
+    function handleKeyup(event) {
+      if (!isFocusing.value || event.key !== " ") {
+        return;
+      }
+      preventDefault(event);
+      switchRef.value.click();
+    }
     function validate() {
       return v(props2.rules, props2.modelValue);
     }
@@ -22641,8 +23042,11 @@ const __sfc__$9 = vue.defineComponent({
         "onUpdate:modelValue": updateModelValue,
         onBeforeChange
       } = props2;
+      if (disabled || (form == null ? void 0 : form.disabled.value)) {
+        return;
+      }
       call(onClick, event);
-      if (disabled || loading || readonly || (form == null ? void 0 : form.disabled.value) || (form == null ? void 0 : form.readonly.value)) {
+      if (loading || readonly || (form == null ? void 0 : form.readonly.value)) {
         return;
       }
       const newValue = modelValue === activeValue ? inactiveValue : activeValue;
@@ -22668,7 +23072,9 @@ const __sfc__$9 = vue.defineComponent({
       resetValidation();
     }
     return {
+      switchRef,
       hovering,
+      isFocusing,
       radius,
       styleComputed,
       errorMessage,
@@ -22741,7 +23147,7 @@ function __render__$8(_ctx, _cache) {
 }
 const __sfc__$8 = vue.defineComponent({
   name: name$7,
-  directives: { Ripple: stdin_default$5T },
+  directives: { Ripple: stdin_default$5U },
   props: props$7,
   setup(props2) {
     const tabEl = vue.ref(null);
@@ -23728,7 +24134,9 @@ var stdin_default$2O = {
   "--tab-active-color": "var(--color-primary)",
   "--tab-disabled-color": "var(--color-text-disabled)",
   "--tab-font-size": "var(--font-size-md)",
-  "--tab-font-weight": "400"
+  "--tab-font-weight": "400",
+  "--tab-active-font-size": "var(--font-size-md)",
+  "--tab-active-font-weight": "400"
 };
 var stdin_default$2N = {
   "--table-background": "#303030",
@@ -23891,7 +24299,8 @@ var stdin_default$2E = {
   "--link-warning-color": "var(--color-warning)",
   "--link-info-color": "var(--color-info)",
   "--link-disabled-color": "var(--color-text-disabled)",
-  "--link-font-size": "var(--font-size-md)"
+  "--link-font-size": "var(--font-size-md)",
+  "--link-focus-opacity": "0.8"
 };
 var stdin_default$2D = {
   "--progress-label-color": "#fff",
@@ -24067,7 +24476,8 @@ var stdin_default$2i = {
   "--overlay-background-color": "rgba(0, 0, 0, 0.6)"
 };
 var stdin_default$2h = {
-  "--paper-background": "var(--color-surface-container-highest)"
+  "--paper-background": "var(--color-surface-container-highest)",
+  "--paper-border-radius": 0
 };
 var stdin_default$2g = {
   "--rate-color": "var(--color-text)",
@@ -24329,7 +24739,8 @@ var stdin_default$20 = {
   "--link-warning-color": "var(--color-warning)",
   "--link-info-color": "var(--color-info)",
   "--link-disabled-color": "var(--color-text-disabled)",
-  "--link-font-size": "var(--font-size-md)"
+  "--link-font-size": "var(--font-size-md)",
+  "--link-focus-opacity": "0.8"
 };
 var stdin_default$1$ = {
   "--cell-description-color": "var(--color-on-surface-variant)",
@@ -24346,7 +24757,8 @@ var stdin_default$1$ = {
   "--cell-extra-left": "8px"
 };
 var stdin_default$1_ = {
-  "--paper-background": "var(--color-surface-container-low)"
+  "--paper-background": "var(--color-surface-container-low)",
+  "--paper-border-radius": 0
 };
 var stdin_default$1Z = {
   "--avatar-text-color": "#fff",
@@ -24517,7 +24929,9 @@ var stdin_default$1R = {
   "--tab-active-color": "var(--color-primary)",
   "--tab-disabled-color": "var(--color-text-disabled)",
   "--tab-font-size": "var(--font-size-md)",
-  "--tab-font-weight": "400"
+  "--tab-font-weight": "400",
+  "--tab-active-font-size": "var(--font-size-md)",
+  "--tab-active-font-weight": "400"
 };
 var stdin_default$1Q = {
   "--table-background": "var(--color-surface-container-low)",
@@ -25234,7 +25648,8 @@ var stdin_default$10 = {
   "--link-warning-color": "var(--color-warning)",
   "--link-info-color": "var(--color-info)",
   "--link-disabled-color": "var(--color-text-disabled)",
-  "--link-font-size": "var(--font-size-md)"
+  "--link-font-size": "var(--font-size-md)",
+  "--link-focus-opacity": "0.8"
 };
 var stdin_default$$ = {
   "--cell-description-color": "var(--color-on-surface-variant)",
@@ -25251,7 +25666,8 @@ var stdin_default$$ = {
   "--cell-extra-left": "8px"
 };
 var stdin_default$_ = {
-  "--paper-background": "var(--color-surface-container-high)"
+  "--paper-background": "var(--color-surface-container-high)",
+  "--paper-border-radius": 0
 };
 var stdin_default$Z = {
   "--avatar-text-color": "#000",
@@ -25463,7 +25879,9 @@ var stdin_default$P = {
   "--tab-active-color": "var(--color-primary)",
   "--tab-disabled-color": "var(--color-text-disabled)",
   "--tab-font-size": "var(--font-size-md)",
-  "--tab-font-weight": "400"
+  "--tab-font-weight": "400",
+  "--tab-active-font-size": "var(--font-size-md)",
+  "--tab-active-font-weight": "400"
 };
 var stdin_default$O = {
   "--step-content-color": "rgba(255, 255, 255, .38)",
@@ -27015,8 +27433,9 @@ let fid = 0;
 const _hoisted_1$1 = ["onClick"];
 const _hoisted_2$1 = ["onClick"];
 const _hoisted_3$1 = ["src", "alt"];
-const _hoisted_4$1 = ["multiple", "accept", "capture", "disabled"];
-const _hoisted_5 = ["src"];
+const _hoisted_4$1 = ["tabindex"];
+const _hoisted_5 = ["multiple", "accept", "capture", "disabled"];
+const _hoisted_6 = ["src"];
 function __render__$1(_ctx, _cache) {
   const _component_var_icon = vue.resolveComponent("var-icon");
   const _component_var_hover_overlay = vue.resolveComponent("var-hover-overlay");
@@ -27102,45 +27521,45 @@ function __render__$1(_ctx, _cache) {
             128
             /* KEYED_FRAGMENT */
           )),
-          !_ctx.maxlength || _ctx.modelValue.length < _ctx.toNumber(_ctx.maxlength) ? vue.withDirectives((vue.openBlock(), vue.createElementBlock(
-            "div",
-            {
-              key: 0,
-              class: vue.normalizeClass(
-                _ctx.classes(
-                  [!_ctx.$slots.default, `${_ctx.n("action")} ${_ctx.formatElevation(_ctx.elevation, 2)}`],
-                  [_ctx.disabled || _ctx.formDisabled, _ctx.n("--disabled")]
-                )
-              ),
-              onClick: _cache[2] || (_cache[2] = (...args) => _ctx.handleActionClick && _ctx.handleActionClick(...args))
-            },
-            [
-              vue.createElementVNode("input", {
-                ref: "input",
-                type: "file",
-                class: vue.normalizeClass(_ctx.n("action-input")),
-                multiple: _ctx.multiple,
-                accept: _ctx.accept,
-                capture: _ctx.capture,
-                disabled: _ctx.disabled || _ctx.formDisabled || _ctx.readonly || _ctx.formReadonly,
-                onChange: _cache[0] || (_cache[0] = (...args) => _ctx.handleChange && _ctx.handleChange(...args)),
-                onClick: _cache[1] || (_cache[1] = vue.withModifiers(() => {
-                }, ["stop"]))
-              }, null, 42, _hoisted_4$1),
-              vue.renderSlot(_ctx.$slots, "default", {}, () => [
-                vue.createVNode(_component_var_icon, {
-                  class: vue.normalizeClass(_ctx.n("action-icon")),
-                  "var-uploader-cover": "",
-                  name: "plus"
-                }, null, 8, ["class"]),
-                vue.createVNode(_component_var_hover_overlay, {
-                  hovering: _ctx.hovering && !_ctx.disabled && !_ctx.formDisabled
-                }, null, 8, ["hovering"])
-              ])
-            ],
-            2
-            /* CLASS */
-          )), [
+          !_ctx.maxlength || _ctx.modelValue.length < _ctx.toNumber(_ctx.maxlength) ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", {
+            key: 0,
+            ref: "actionRef",
+            class: vue.normalizeClass(
+              _ctx.classes(
+                _ctx.n("--outline-none"),
+                [!_ctx.$slots.default, `${_ctx.n("action")} ${_ctx.formatElevation(_ctx.elevation, 2)}`],
+                [_ctx.disabled || _ctx.formDisabled, _ctx.n("--disabled")]
+              )
+            ),
+            tabindex: _ctx.disabled || _ctx.formDisabled ? void 0 : "0",
+            onClick: _cache[2] || (_cache[2] = (...args) => _ctx.handleActionClick && _ctx.handleActionClick(...args)),
+            onFocus: _cache[3] || (_cache[3] = ($event) => _ctx.isFocusing = true),
+            onBlur: _cache[4] || (_cache[4] = ($event) => _ctx.isFocusing = false)
+          }, [
+            vue.createElementVNode("input", {
+              ref: "input",
+              type: "file",
+              class: vue.normalizeClass(_ctx.n("action-input")),
+              multiple: _ctx.multiple,
+              accept: _ctx.accept,
+              capture: _ctx.capture,
+              disabled: _ctx.disabled || _ctx.formDisabled || _ctx.readonly || _ctx.formReadonly,
+              onChange: _cache[0] || (_cache[0] = (...args) => _ctx.handleChange && _ctx.handleChange(...args)),
+              onClick: _cache[1] || (_cache[1] = vue.withModifiers(() => {
+              }, ["stop"]))
+            }, null, 42, _hoisted_5),
+            vue.renderSlot(_ctx.$slots, "default", {}, () => [
+              vue.createVNode(_component_var_icon, {
+                class: vue.normalizeClass(_ctx.n("action-icon")),
+                "var-uploader-cover": "",
+                name: "plus"
+              }, null, 8, ["class"]),
+              vue.createVNode(_component_var_hover_overlay, {
+                hovering: _ctx.hovering && !_ctx.disabled && !_ctx.formDisabled && !_ctx.readonly && !_ctx.formReadonly,
+                focusing: _ctx.isFocusing && !_ctx.disabled && !_ctx.formDisabled && !_ctx.readonly && !_ctx.formReadonly
+              }, null, 8, ["hovering", "focusing"])
+            ])
+          ], 42, _hoisted_4$1)), [
             [_directive_ripple, {
               disabled: _ctx.disabled || _ctx.formDisabled || _ctx.readonly || _ctx.formReadonly || !_ctx.ripple || Boolean(_ctx.$slots.default)
             }],
@@ -27170,8 +27589,8 @@ function __render__$1(_ctx, _cache) {
         "var-uploader-cover": "",
         position: "center",
         show: _ctx.showPreview,
-        "onUpdate:show": _cache[3] || (_cache[3] = ($event) => _ctx.showPreview = $event),
-        onClosed: _cache[4] || (_cache[4] = ($event) => _ctx.currentPreview = null)
+        "onUpdate:show": _cache[5] || (_cache[5] = ($event) => _ctx.showPreview = $event),
+        onClosed: _cache[6] || (_cache[6] = ($event) => _ctx.currentPreview = null)
       }, {
         default: vue.withCtx(() => {
           var _a, _b;
@@ -27186,7 +27605,7 @@ function __render__$1(_ctx, _cache) {
               "x5-video-player-fullscreen": "false",
               controls: "",
               src: (_b = _ctx.currentPreview) == null ? void 0 : _b.url
-            }, null, 10, _hoisted_5)) : vue.createCommentVNode("v-if", true)
+            }, null, 10, _hoisted_6)) : vue.createCommentVNode("v-if", true)
           ];
         }),
         _: 1
@@ -27199,15 +27618,17 @@ function __render__$1(_ctx, _cache) {
 }
 const __sfc__$1 = vue.defineComponent({
   name: name$1,
-  directives: { Ripple: stdin_default$5T, Hover: stdin_default$5v },
+  directives: { Ripple: stdin_default$5U, Hover: stdin_default$5N },
   components: {
-    VarIcon: stdin_default$5P,
-    VarPopup: stdin_default$5R,
+    VarIcon: stdin_default$5Q,
+    VarPopup: stdin_default$5S,
     VarFormDetails: stdin_default$59,
-    VarHoverOverlay: stdin_default$5w
+    VarHoverOverlay: stdin_default$5O
   },
   props: props$1,
   setup(props2) {
+    const isFocusing = vue.ref(false);
+    const actionRef = vue.ref(null);
     const input = vue.ref(null);
     const showPreview = vue.ref(false);
     const currentPreview = vue.ref(null);
@@ -27246,6 +27667,8 @@ const __sfc__$1 = vue.defineComponent({
       reset
     };
     call(bindForm, uploaderProvider);
+    useEventListener(window, "keydown", handleKeydown);
+    useEventListener(window, "keyup", handleKeyup);
     vue.watch(
       () => props2.modelValue,
       () => {
@@ -27254,6 +27677,24 @@ const __sfc__$1 = vue.defineComponent({
       },
       { deep: true }
     );
+    function handleKeydown(event) {
+      if (!isFocusing.value) {
+        return;
+      }
+      if (event.key === " " || event.key === "Enter") {
+        event.preventDefault();
+      }
+      if (event.key === "Enter") {
+        actionRef.value.click();
+      }
+    }
+    function handleKeyup(event) {
+      if (!isFocusing.value || event.key !== " ") {
+        return;
+      }
+      event.preventDefault();
+      actionRef.value.click();
+    }
     function preview(varFile) {
       const { disabled, previewed, preventDefaultPreview, onPreview } = props2;
       if ((form == null ? void 0 : form.disabled.value) || disabled || !previewed) {
@@ -27424,12 +27865,14 @@ const __sfc__$1 = vue.defineComponent({
     }
     return {
       input,
+      actionRef,
       files,
       showPreview,
       currentPreview,
       errorMessage,
       maxlengthText,
       hovering,
+      isFocusing,
       formDisabled: form == null ? void 0 : form.disabled,
       formReadonly: form == null ? void 0 : form.readonly,
       n: n$1,
@@ -27754,12 +28197,12 @@ withInstall(stdin_default$1);
 withPropsDefaultsSetter(stdin_default$1, props);
 const _WatermarkComponent = stdin_default$1;
 var stdin_default = stdin_default$1;
-const version = "3.0.6";
+const version = "3.1.0-alpha.1709284240068";
 function install(app) {
-  stdin_default$5H.install && app.use(stdin_default$5H);
-  stdin_default$5F.install && app.use(stdin_default$5F);
+  stdin_default$5E.install && app.use(stdin_default$5E);
   stdin_default$5C.install && app.use(stdin_default$5C);
-  stdin_default$5A.install && app.use(stdin_default$5A);
+  stdin_default$5z.install && app.use(stdin_default$5z);
+  stdin_default$5x.install && app.use(stdin_default$5x);
   stdin_default$5r.install && app.use(stdin_default$5r);
   stdin_default$5p.install && app.use(stdin_default$5p);
   stdin_default$5n.install && app.use(stdin_default$5n);
@@ -27777,7 +28220,7 @@ function install(app) {
   stdin_default$4$.install && app.use(stdin_default$4$);
   stdin_default$4Z.install && app.use(stdin_default$4Z);
   stdin_default$4X.install && app.use(stdin_default$4X);
-  stdin_default$5U.install && app.use(stdin_default$5U);
+  stdin_default$5V.install && app.use(stdin_default$5V);
   stdin_default$4V.install && app.use(stdin_default$4V);
   stdin_default$4T.install && app.use(stdin_default$4T);
   stdin_default$4L.install && app.use(stdin_default$4L);
@@ -27790,20 +28233,20 @@ function install(app) {
   stdin_default$4v.install && app.use(stdin_default$4v);
   stdin_default$4t.install && app.use(stdin_default$4t);
   stdin_default$59.install && app.use(stdin_default$59);
-  stdin_default$5v.install && app.use(stdin_default$5v);
-  stdin_default$5w.install && app.use(stdin_default$5w);
-  stdin_default$5P.install && app.use(stdin_default$5P);
+  stdin_default$5N.install && app.use(stdin_default$5N);
+  stdin_default$5O.install && app.use(stdin_default$5O);
+  stdin_default$5Q.install && app.use(stdin_default$5Q);
   stdin_default$4r.install && app.use(stdin_default$4r);
   stdin_default$4l.install && app.use(stdin_default$4l);
   stdin_default$4j.install && app.use(stdin_default$4j);
   stdin_default$4h.install && app.use(stdin_default$4h);
   stdin_default$4f.install && app.use(stdin_default$4f);
-  stdin_default$5E.install && app.use(stdin_default$5E);
+  stdin_default$5B.install && app.use(stdin_default$5B);
   stdin_default$4d.install && app.use(stdin_default$4d);
   stdin_default$4b.install && app.use(stdin_default$4b);
-  stdin_default$5y.install && app.use(stdin_default$5y);
+  stdin_default$5v.install && app.use(stdin_default$5v);
   stdin_default$49.install && app.use(stdin_default$49);
-  stdin_default$5J.install && app.use(stdin_default$5J);
+  stdin_default$5G.install && app.use(stdin_default$5G);
   stdin_default$47.install && app.use(stdin_default$47);
   stdin_default$45.install && app.use(stdin_default$45);
   stdin_default$43.install && app.use(stdin_default$43);
@@ -27812,14 +28255,14 @@ function install(app) {
   stdin_default$3Z.install && app.use(stdin_default$3Z);
   stdin_default$3X.install && app.use(stdin_default$3X);
   stdin_default$3V.install && app.use(stdin_default$3V);
-  stdin_default$5R.install && app.use(stdin_default$5R);
+  stdin_default$5S.install && app.use(stdin_default$5S);
   stdin_default$3T.install && app.use(stdin_default$3T);
   stdin_default$3R.install && app.use(stdin_default$3R);
   stdin_default$3P.install && app.use(stdin_default$3P);
   stdin_default$3N.install && app.use(stdin_default$3N);
   stdin_default$3L.install && app.use(stdin_default$3L);
   stdin_default$3D.install && app.use(stdin_default$3D);
-  stdin_default$5T.install && app.use(stdin_default$5T);
+  stdin_default$5U.install && app.use(stdin_default$5U);
   stdin_default$3B.install && app.use(stdin_default$3B);
   stdin_default$3z.install && app.use(stdin_default$3z);
   stdin_default$3x.install && app.use(stdin_default$3x);
@@ -27847,10 +28290,10 @@ function install(app) {
 const index_bundle = {
   version,
   install,
-  ActionSheet: stdin_default$5H,
-  AppBar: stdin_default$5F,
-  Avatar: stdin_default$5C,
-  AvatarGroup: stdin_default$5A,
+  ActionSheet: stdin_default$5E,
+  AppBar: stdin_default$5C,
+  Avatar: stdin_default$5z,
+  AvatarGroup: stdin_default$5x,
   BackTop: stdin_default$5r,
   Badge: stdin_default$5p,
   BottomNavigation: stdin_default$5n,
@@ -27868,7 +28311,7 @@ const index_bundle = {
   Collapse: stdin_default$4$,
   CollapseItem: stdin_default$4Z,
   CollapseTransition: stdin_default$4X,
-  Context: stdin_default$5U,
+  Context: stdin_default$5V,
   Countdown: stdin_default$4V,
   Counter: stdin_default$4T,
   DatePicker: stdin_default$4L,
@@ -27881,20 +28324,20 @@ const index_bundle = {
   FloatingPanel: stdin_default$4v,
   Form: stdin_default$4t,
   FormDetails: stdin_default$59,
-  Hover: stdin_default$5v,
-  HoverOverlay: stdin_default$5w,
-  Icon: stdin_default$5P,
+  Hover: stdin_default$5N,
+  HoverOverlay: stdin_default$5O,
+  Icon: stdin_default$5Q,
   Image: stdin_default$4r,
   ImagePreview: stdin_default$4l,
   IndexAnchor: stdin_default$4j,
   IndexBar: stdin_default$4h,
   Input: stdin_default$4f,
-  Lazy: stdin_default$5E,
+  Lazy: stdin_default$5B,
   Link: stdin_default$4d,
   List: stdin_default$4b,
-  Loading: stdin_default$5y,
+  Loading: stdin_default$5v,
   LoadingBar: stdin_default$49,
-  Locale: stdin_default$5J,
+  Locale: stdin_default$5G,
   Menu: stdin_default$47,
   MenuOption: stdin_default$45,
   MenuSelect: stdin_default$43,
@@ -27903,14 +28346,14 @@ const index_bundle = {
   Pagination: stdin_default$3Z,
   Paper: stdin_default$3X,
   Picker: stdin_default$3V,
-  Popup: stdin_default$5R,
+  Popup: stdin_default$5S,
   Progress: stdin_default$3T,
   PullRefresh: stdin_default$3R,
   Radio: stdin_default$3P,
   RadioGroup: stdin_default$3N,
   Rate: stdin_default$3L,
   Result: stdin_default$3D,
-  Ripple: stdin_default$5T,
+  Ripple: stdin_default$5U,
   Row: stdin_default$3B,
   Select: stdin_default$3z,
   Skeleton: stdin_default$3x,
@@ -27935,10 +28378,10 @@ const index_bundle = {
   Uploader: stdin_default$2,
   Watermark: stdin_default
 };
-exports.ActionSheet = stdin_default$5H;
-exports.AppBar = stdin_default$5F;
-exports.Avatar = stdin_default$5C;
-exports.AvatarGroup = stdin_default$5A;
+exports.ActionSheet = stdin_default$5E;
+exports.AppBar = stdin_default$5C;
+exports.Avatar = stdin_default$5z;
+exports.AvatarGroup = stdin_default$5x;
 exports.BackTop = stdin_default$5r;
 exports.Badge = stdin_default$5p;
 exports.BottomNavigation = stdin_default$5n;
@@ -27956,7 +28399,7 @@ exports.Col = stdin_default$51;
 exports.Collapse = stdin_default$4$;
 exports.CollapseItem = stdin_default$4Z;
 exports.CollapseTransition = stdin_default$4X;
-exports.Context = stdin_default$5U;
+exports.Context = stdin_default$5V;
 exports.Countdown = stdin_default$4V;
 exports.Counter = stdin_default$4T;
 exports.DatePicker = stdin_default$4L;
@@ -27969,20 +28412,20 @@ exports.FieldDecorator = stdin_default$4x;
 exports.FloatingPanel = stdin_default$4v;
 exports.Form = stdin_default$4t;
 exports.FormDetails = stdin_default$59;
-exports.Hover = stdin_default$5v;
-exports.HoverOverlay = stdin_default$5w;
-exports.Icon = stdin_default$5P;
+exports.Hover = stdin_default$5N;
+exports.HoverOverlay = stdin_default$5O;
+exports.Icon = stdin_default$5Q;
 exports.Image = stdin_default$4r;
 exports.ImagePreview = stdin_default$4l;
 exports.IndexAnchor = stdin_default$4j;
 exports.IndexBar = stdin_default$4h;
 exports.Input = stdin_default$4f;
-exports.Lazy = stdin_default$5E;
+exports.Lazy = stdin_default$5B;
 exports.Link = stdin_default$4d;
 exports.List = stdin_default$4b;
-exports.Loading = stdin_default$5y;
+exports.Loading = stdin_default$5v;
 exports.LoadingBar = stdin_default$49;
-exports.Locale = stdin_default$5J;
+exports.Locale = stdin_default$5G;
 exports.Menu = stdin_default$47;
 exports.MenuOption = stdin_default$45;
 exports.MenuSelect = stdin_default$43;
@@ -27992,14 +28435,14 @@ exports.PIXEL = PIXEL;
 exports.Pagination = stdin_default$3Z;
 exports.Paper = stdin_default$3X;
 exports.Picker = stdin_default$3V;
-exports.Popup = stdin_default$5R;
+exports.Popup = stdin_default$5S;
 exports.Progress = stdin_default$3T;
 exports.PullRefresh = stdin_default$3R;
 exports.Radio = stdin_default$3P;
 exports.RadioGroup = stdin_default$3N;
 exports.Rate = stdin_default$3L;
 exports.Result = stdin_default$3D;
-exports.Ripple = stdin_default$5T;
+exports.Ripple = stdin_default$5U;
 exports.Row = stdin_default$3B;
 exports.SNACKBAR_TYPE = SNACKBAR_TYPE;
 exports.Select = stdin_default$3z;
@@ -28111,11 +28554,11 @@ exports._TimePickerComponent = _TimePickerComponent;
 exports._TooltipComponent = _TooltipComponent;
 exports._UploaderComponent = _UploaderComponent;
 exports._WatermarkComponent = _WatermarkComponent;
-exports.actionSheetProps = props$1e;
+exports.actionSheetProps = props$1d;
 exports.add = add$2;
-exports.appBarProps = props$1d;
-exports.avatarGroupProps = props$1b;
-exports.avatarProps = props$1c;
+exports.appBarProps = props$1c;
+exports.avatarGroupProps = props$1a;
+exports.avatarProps = props$1b;
 exports.backTopProps = props$17;
 exports.badgeProps = props$16;
 exports.bottomNavigationItemProps = props$14;
@@ -28143,12 +28586,12 @@ exports.dialogProps = props$O;
 exports.dividerProps = props$N;
 exports.dragProps = props$M;
 exports.ellipsisProps = props$K;
-exports.enUS = stdin_default$5N;
+exports.enUS = stdin_default$5K;
 exports.fabProps = props$J;
 exports.fieldDecoratorProps = props$I;
 exports.formDetailsProps = props$_;
 exports.formProps = props$G;
-exports.hoverOverlayProps = props$19;
+exports.hoverOverlayProps = props$1e;
 exports.iconProps = props$1f;
 exports.imageCache = imageCache;
 exports.imagePreviewProps = props$D;
@@ -28160,7 +28603,7 @@ exports.install = install;
 exports.linkProps = props$z;
 exports.listProps = props$y;
 exports.loadingBarProps = props$x;
-exports.loadingProps = props$1a;
+exports.loadingProps = props$19;
 exports.menuOptionProps = props$u;
 exports.menuProps = props$v;
 exports.menuSelectProps = props$t;
@@ -28204,4 +28647,4 @@ exports.useHoverOverlay = useHoverOverlay;
 exports.useLocale = useLocale;
 exports.version = version;
 exports.watermarkProps = props;
-exports.zhCN = stdin_default$5O;
+exports.zhCN = stdin_default$5L;