@varlet/ui 3.0.7 → 3.1.0-alpha.1709537939980

package/es/select/Select.mjs

@@ -4,227 +4,230 @@ import VarChip from "../chip/index.mjs";
 import VarFieldDecorator from "../field-decorator/index.mjs";
 import VarFormDetails from "../form-details/index.mjs";
 import { computed, defineComponent, ref, watch, nextTick } from "vue";
-import { isArray, isEmpty, call } from "@varlet/shared";
+import { isArray, isEmpty, call, preventDefault, doubleRaf } from "@varlet/shared";
 import { props } from "./props.mjs";
 import { useValidation, createNamespace } from "../utils/components.mjs";
 import { useOptions } from "./provide.mjs";
 import { useForm } from "../form/provide.mjs";
-import { toPxNum } from "../utils/elements.mjs";
+import { focusChildElementByKey, toPxNum } from "../utils/elements.mjs";
 import { error } from "../utils/logger.mjs";
 import { useSelectController } from "./useSelectController.mjs";
+import { useEventListener } from "@varlet/use";
 const { name, n, classes } = createNamespace("select");
 import { renderSlot as _renderSlot, renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, resolveComponent as _resolveComponent, withModifiers as _withModifiers, normalizeClass as _normalizeClass, withCtx as _withCtx, createBlock as _createBlock, createCommentVNode as _createCommentVNode, createElementVNode as _createElementVNode, normalizeStyle as _normalizeStyle, createVNode as _createVNode, normalizeProps as _normalizeProps, guardReactiveProps as _guardReactiveProps, createSlots as _createSlots, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
 const _withScopeId = (n2) => (_pushScopeId(""), n2 = n2(), _popScopeId(), n2);
-const _hoisted_1 = { key: 1 };
+const _hoisted_1 = ["tabindex"];
+const _hoisted_2 = { key: 1 };
 function __render__(_ctx, _cache) {
   const _component_var_chip = _resolveComponent("var-chip");
   const _component_var_icon = _resolveComponent("var-icon");
   const _component_var_field_decorator = _resolveComponent("var-field-decorator");
   const _component_var_menu = _resolveComponent("var-menu");
   const _component_var_form_details = _resolveComponent("var-form-details");
-  return _openBlock(), _createElementBlock(
-    "div",
-    {
-      class: _normalizeClass(_ctx.n()),
-      onClick: _cache[3] || (_cache[3] = (...args) => _ctx.handleFocus && _ctx.handleFocus(...args))
-    },
-    [
-      _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: _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: _withCtx(() => [
-          _createElementVNode(
-            "div",
-            {
-              ref: "menuEl",
-              class: _normalizeClass(_ctx.classes(_ctx.n("scroller"), _ctx.n("$-elevation--3")))
-            },
-            [
-              _renderSlot(_ctx.$slots, "default")
-            ],
-            2
-            /* CLASS */
-          )
-        ]),
-        default: _withCtx(() => [
-          _createVNode(
-            _component_var_field_decorator,
-            _normalizeProps(_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
-            })),
-            _createSlots({
-              "clear-icon": _withCtx(() => [
-                _renderSlot(_ctx.$slots, "clear-icon")
-              ]),
-              "append-icon": _withCtx(() => [
-                _renderSlot(_ctx.$slots, "append-icon")
-              ]),
-              default: _withCtx(() => [
-                _createElementVNode(
-                  "div",
-                  {
-                    class: _normalizeClass(_ctx.classes(_ctx.n("select"), [_ctx.errorMessage, _ctx.n("--error")], [_ctx.formDisabled || _ctx.disabled, _ctx.n("--disabled")])),
-                    style: _normalizeStyle({
-                      textAlign: _ctx.textAlign,
-                      color: _ctx.textColor
-                    })
-                  },
-                  [
-                    _createElementVNode(
-                      "div",
-                      {
-                        class: _normalizeClass(_ctx.n("label"))
-                      },
-                      [
-                        !_ctx.isEmptyModelValue ? _renderSlot(_ctx.$slots, "selected", { key: 0 }, () => [
-                          _ctx.multiple ? (_openBlock(), _createElementBlock(
-                            _Fragment,
-                            { key: 0 },
-                            [
-                              _ctx.chip ? (_openBlock(), _createElementBlock(
-                                "div",
-                                {
-                                  key: 0,
-                                  class: _normalizeClass(_ctx.n("chips"))
-                                },
-                                [
-                                  (_openBlock(true), _createElementBlock(
-                                    _Fragment,
-                                    null,
-                                    _renderList(_ctx.labels, (l) => {
-                                      return _openBlock(), _createBlock(_component_var_chip, {
-                                        class: _normalizeClass(_ctx.n("chip")),
-                                        "var-select-cover": "",
-                                        closeable: "",
-                                        size: "small",
-                                        type: _ctx.errorMessage ? "danger" : void 0,
-                                        key: l,
-                                        onClick: _cache[0] || (_cache[0] = _withModifiers(() => {
-                                        }, ["stop"])),
-                                        onClose: () => _ctx.handleClose(l)
-                                      }, {
-                                        default: _withCtx(() => [
-                                          _createTextVNode(
-                                            _toDisplayString(l),
-                                            1
-                                            /* TEXT */
-                                          )
-                                        ]),
-                                        _: 2
-                                        /* DYNAMIC */
-                                      }, 1032, ["class", "type", "onClose"]);
-                                    }),
-                                    128
-                                    /* KEYED_FRAGMENT */
-                                  ))
-                                ],
-                                2
-                                /* CLASS */
-                              )) : (_openBlock(), _createElementBlock(
-                                "div",
-                                {
-                                  key: 1,
-                                  class: _normalizeClass(_ctx.n("values"))
-                                },
-                                _toDisplayString(_ctx.labels.join(_ctx.separator)),
-                                3
-                                /* TEXT, CLASS */
-                              ))
-                            ],
-                            64
-                            /* STABLE_FRAGMENT */
-                          )) : (_openBlock(), _createElementBlock(
-                            "span",
-                            _hoisted_1,
-                            _toDisplayString(_ctx.label),
-                            1
-                            /* TEXT */
-                          ))
-                        ]) : _createCommentVNode("v-if", true)
-                      ],
-                      2
-                      /* CLASS */
-                    ),
-                    _ctx.enableCustomPlaceholder ? (_openBlock(), _createElementBlock(
-                      "span",
-                      {
-                        key: 0,
-                        class: _normalizeClass(_ctx.classes(_ctx.n("placeholder"), _ctx.n("$--ellipsis"))),
-                        style: _normalizeStyle({
-                          color: _ctx.placeholderColor
-                        })
-                      },
-                      _toDisplayString(_ctx.placeholder),
-                      7
-                      /* TEXT, CLASS, STYLE */
-                    )) : _createCommentVNode("v-if", true),
-                    _renderSlot(_ctx.$slots, "arrow-icon", { focus: _ctx.showMenu }, () => [
-                      _createVNode(_component_var_icon, {
-                        class: _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: _withCtx(() => [
-                  _renderSlot(_ctx.$slots, "prepend-icon")
-                ]),
-                key: "0"
-              } : void 0
+  return _openBlock(), _createElementBlock("div", {
+    ref: "root",
+    class: _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))
+  }, [
+    _createVNode(_component_var_menu, {
+      "var-select-cover": "",
+      "same-width": "",
+      "close-on-click-reference": "",
+      "close-on-key-escape": false,
+      class: _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: _withCtx(() => [
+        _createElementVNode(
+          "div",
+          {
+            ref: "menuEl",
+            class: _normalizeClass(_ctx.classes(_ctx.n("scroller"), _ctx.n("$-elevation--3")))
+          },
+          [
+            _renderSlot(_ctx.$slots, "default")
+          ],
+          2
+          /* CLASS */
+        )
+      ]),
+      default: _withCtx(() => [
+        _createVNode(
+          _component_var_field_decorator,
+          _normalizeProps(_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
+          })),
+          _createSlots({
+            "clear-icon": _withCtx(({ clear }) => [
+              _renderSlot(_ctx.$slots, "clear-icon", { clear })
+            ]),
+            "append-icon": _withCtx(() => [
+              _renderSlot(_ctx.$slots, "append-icon")
             ]),
-            1040
-            /* FULL_PROPS, DYNAMIC_SLOTS */
-          )
-        ]),
-        _: 3
-        /* FORWARDED */
-      }, 8, ["show", "class", "popover-class", "offset-y", "disabled", "placement", "onClickOutside"]),
-      _createVNode(_component_var_form_details, {
-        "error-message": _ctx.errorMessage,
-        onClick: _cache[2] || (_cache[2] = _withModifiers(() => {
-        }, ["stop"]))
-      }, null, 8, ["error-message"])
-    ],
-    2
-    /* CLASS */
-  );
+            default: _withCtx(() => [
+              _createElementVNode(
+                "div",
+                {
+                  class: _normalizeClass(_ctx.classes(_ctx.n("select"), [_ctx.errorMessage, _ctx.n("--error")], [_ctx.formDisabled || _ctx.disabled, _ctx.n("--disabled")])),
+                  style: _normalizeStyle({
+                    textAlign: _ctx.textAlign,
+                    color: _ctx.textColor
+                  })
+                },
+                [
+                  _createElementVNode(
+                    "div",
+                    {
+                      class: _normalizeClass(_ctx.n("label"))
+                    },
+                    [
+                      !_ctx.isEmptyModelValue ? _renderSlot(_ctx.$slots, "selected", { key: 0 }, () => [
+                        _ctx.multiple ? (_openBlock(), _createElementBlock(
+                          _Fragment,
+                          { key: 0 },
+                          [
+                            _ctx.chip ? (_openBlock(), _createElementBlock(
+                              "div",
+                              {
+                                key: 0,
+                                class: _normalizeClass(_ctx.n("chips"))
+                              },
+                              [
+                                (_openBlock(true), _createElementBlock(
+                                  _Fragment,
+                                  null,
+                                  _renderList(_ctx.labels, (l) => {
+                                    return _openBlock(), _createBlock(_component_var_chip, {
+                                      class: _normalizeClass(_ctx.n("chip")),
+                                      "var-select-cover": "",
+                                      closeable: "",
+                                      size: "small",
+                                      type: _ctx.errorMessage ? "danger" : void 0,
+                                      key: l,
+                                      onClick: _cache[0] || (_cache[0] = _withModifiers(() => {
+                                      }, ["stop"])),
+                                      onClose: () => _ctx.handleClose(l)
+                                    }, {
+                                      default: _withCtx(() => [
+                                        _createTextVNode(
+                                          _toDisplayString(l),
+                                          1
+                                          /* TEXT */
+                                        )
+                                      ]),
+                                      _: 2
+                                      /* DYNAMIC */
+                                    }, 1032, ["class", "type", "onClose"]);
+                                  }),
+                                  128
+                                  /* KEYED_FRAGMENT */
+                                ))
+                              ],
+                              2
+                              /* CLASS */
+                            )) : (_openBlock(), _createElementBlock(
+                              "div",
+                              {
+                                key: 1,
+                                class: _normalizeClass(_ctx.n("values"))
+                              },
+                              _toDisplayString(_ctx.labels.join(_ctx.separator)),
+                              3
+                              /* TEXT, CLASS */
+                            ))
+                          ],
+                          64
+                          /* STABLE_FRAGMENT */
+                        )) : (_openBlock(), _createElementBlock(
+                          "span",
+                          _hoisted_2,
+                          _toDisplayString(_ctx.label),
+                          1
+                          /* TEXT */
+                        ))
+                      ]) : _createCommentVNode("v-if", true)
+                    ],
+                    2
+                    /* CLASS */
+                  ),
+                  _ctx.enableCustomPlaceholder ? (_openBlock(), _createElementBlock(
+                    "span",
+                    {
+                      key: 0,
+                      class: _normalizeClass(_ctx.classes(_ctx.n("placeholder"), _ctx.n("$--ellipsis"))),
+                      style: _normalizeStyle({
+                        color: _ctx.placeholderColor
+                      })
+                    },
+                    _toDisplayString(_ctx.placeholder),
+                    7
+                    /* TEXT, CLASS, STYLE */
+                  )) : _createCommentVNode("v-if", true),
+                  _renderSlot(_ctx.$slots, "arrow-icon", {
+                    focus: _ctx.isFocusing,
+                    menuOpen: _ctx.showMenu
+                  }, () => [
+                    _createVNode(_component_var_icon, {
+                      class: _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: _withCtx(() => [
+                _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"]),
+    _createVNode(_component_var_form_details, {
+      "error-message": _ctx.errorMessage,
+      onClick: _cache[2] || (_cache[2] = _withModifiers(() => {
+      }, ["stop"]))
+    }, null, 8, ["error-message"])
+  ], 42, _hoisted_1);
 }
 const __sfc__ = defineComponent({
   name,
@@ -237,8 +240,9 @@ const __sfc__ = defineComponent({
   },
   props,
   setup(props2) {
-    const isFocus = ref(false);
+    const isFocusing = ref(false);
     const showMenu = ref(false);
+    const root = ref(null);
     const multiple = computed(() => props2.multiple);
     const focusColor = computed(() => props2.focusColor);
     const isEmptyModelValue = computed(() => isEmpty(props2.modelValue));
@@ -269,7 +273,7 @@ const __sfc__ = 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))";
@@ -294,7 +298,52 @@ const __sfc__ = 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) {
       nextTick(() => {
         const { validateTrigger, rules, modelValue } = props2;
@@ -307,7 +356,7 @@ const __sfc__ = defineComponent({
         return;
       }
       offsetY.value = toPxNum(props2.offsetY);
-      isFocus.value = true;
+      focus();
       call(onFocus);
       validateWithTrigger("onFocus");
     }
@@ -320,6 +369,18 @@ const __sfc__ = 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) {
@@ -330,7 +391,10 @@ const __sfc__ = defineComponent({
       call(onChange, selectedValue);
       validateWithTrigger("onChange");
       if (!multiple2) {
-        blur();
+        root.value.focus();
+        doubleRaf().then(() => {
+          showMenu.value = false;
+        });
       }
     }
     function handleClear() {
@@ -369,11 +433,10 @@ const __sfc__ = 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() {
@@ -384,8 +447,9 @@ const __sfc__ = defineComponent({
       resetValidation();
     }
     return {
+      root,
       offsetY,
-      isFocus,
+      isFocusing,
       showMenu,
       errorMessage,
       formDisabled: form == null ? void 0 : form.disabled,
@@ -402,9 +466,11 @@ const __sfc__ = defineComponent({
       classes,
       handleFocus,
       handleBlur,
+      handleClickOutside,
       handleClear,
       handleClick,
       handleClose,
+      handleRootBlur,
       reset,
       validate,
       resetValidation,

package/es/select/select.css

@@ -1 +1 @@
-:root { --select-scroller-background: var(--color-surface-container-high); --select-scroller-padding: 6px 0; --select-scroller-max-height: 278px; --select-scroller-border-radius: 2px; --select-chip-margin: 5px 5px 0; --select-arrow-size: 20px; --select-standard-menu-margin: calc(var(--field-decorator-placeholder-size) * 0.75 + 12px) 0 0 0; --select-label-font-size: 16px;}.var-select { text-align: left;}.var-select__menu[var-select-cover] { width: 100%; background: transparent; display: block;}.var-select__chip[var-select-cover] { margin: var(--select-chip-margin);}.var-select__scroller { max-height: var(--select-scroller-max-height); background: var(--select-scroller-background); padding: var(--select-scroller-padding); overflow-y: auto; transition: background-color 0.25s; border-radius: var(--select-scroller-border-radius);}.var-select__wrap { position: relative; display: flex; flex-direction: column; width: 100%;}.var-select__select { display: flex; justify-content: space-between; align-items: center; width: 100%; min-height: 24px; outline: none; border: none; font-size: inherit; color: var(--field-decorator-text-color); word-break: break-all; overflow: hidden; transition: color 0.25s;}.var-select__label { display: flex; align-items: center; font-size: var(--select-label-font-size);}.var-select__placeholder { max-width: 100%; position: absolute; top: 50%; left: 0; transform: translateY(-50%); font-size: var(--field-decorator-placeholder-size); line-height: 1.5em; color: var(--field-decorator-blur-color); pointer-events: none; cursor: inherit;}.var-select__arrow[var-select-cover] { flex-shrink: 0; font-size: var(--select-arrow-size);}.var-select--standard-menu-margin { margin: var(--select-standard-menu-margin) !important;}.var-select--disabled { color: var(--field-decorator-disabled-color); cursor: not-allowed;}.var-select--error { color: var(--field-decorator-error-color);}.var-select--arrow-rotate { transform: rotate(180deg);}
+:root { --select-scroller-background: var(--color-surface-container-high); --select-scroller-padding: 6px 0; --select-scroller-max-height: 278px; --select-scroller-border-radius: 2px; --select-chip-margin: 5px 5px 0; --select-arrow-size: 20px; --select-standard-menu-margin: calc(var(--field-decorator-placeholder-size) * 0.75 + 12px) 0 0 0; --select-label-font-size: 16px;}.var-select { text-align: left; outline: none;}.var-select__menu[var-select-cover] { width: 100%; background: transparent; display: block;}.var-select__chip[var-select-cover] { margin: var(--select-chip-margin);}.var-select__scroller { max-height: var(--select-scroller-max-height); background: var(--select-scroller-background); padding: var(--select-scroller-padding); overflow-y: auto; transition: background-color 0.25s; border-radius: var(--select-scroller-border-radius);}.var-select__wrap { position: relative; display: flex; flex-direction: column; width: 100%;}.var-select__select { display: flex; justify-content: space-between; align-items: center; width: 100%; min-height: 24px; outline: none; border: none; font-size: inherit; color: var(--field-decorator-text-color); word-break: break-all; overflow: hidden; transition: color 0.25s;}.var-select__label { display: flex; align-items: center; font-size: var(--select-label-font-size);}.var-select__placeholder { max-width: 100%; position: absolute; top: 50%; left: 0; transform: translateY(-50%); font-size: var(--field-decorator-placeholder-size); line-height: 1.5em; color: var(--field-decorator-blur-color); pointer-events: none; cursor: inherit;}.var-select__arrow[var-select-cover] { flex-shrink: 0; font-size: var(--select-arrow-size);}.var-select--standard-menu-margin { margin: var(--select-standard-menu-margin) !important;}.var-select--disabled { color: var(--field-decorator-disabled-color); cursor: not-allowed;}.var-select--error { color: var(--field-decorator-error-color);}.var-select--arrow-rotate { transform: rotate(180deg);}