@varlet/ui 1.27.16 → 1.27.17-alpha.1656907860130

package/LICENCE

@@ -1,21 +1,21 @@
-The MIT License (MIT)
-
-Copyright (c) 2020 varlet
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+The MIT License (MIT)
+
+Copyright (c) 2020 varlet
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.en-US.md

@@ -1,93 +1,93 @@
-<div align="center">
-  <a href="https://varlet-varletjs.vercel.app/#/en-US/home">
-    <img src="https://varlet-varletjs.vercel.app/logo.svg" width="150">
-  </a>
-  <h1>VARLET</h1>
-  <p>Material design mobile component library for Vue3</p>
-  <p>
-    <a href="https://varlet-varletjs.vercel.app/#/en-US/home">Documentation(Vercel)</a> 
-    <a href="https://varlet.gitee.io/varlet-ui/#/en-US/home">Documentation(Gitee)</a>
-  </p>
-  <p>
-    <img src="https://img.shields.io/npm/v/@varlet/ui?style=flat-square" alt="version">
-    <img src="https://img.shields.io/github/stars/varletjs/varlet" alt="stars">
-    <img src="https://img.shields.io/badge/vue-v3.2.0%2B-%23407fbc" alt="vue">
-    <img src="https://img.shields.io/npm/l/@varlet/ui.svg" alt="licence">
-    <img src="https://img.shields.io/codecov/c/github/varletjs/varlet" alt="coverage">
-    <img src="https://img.badgesize.io/https://unpkg.com/@varlet/ui/umd/varlet.js?compression=gzip&label=gzip" alt="gzip" />
-    <img src="https://github.com/varletjs/varlet/workflows/CI/badge.svg" alt="ci">
-  </p>
-</div>
-
----
-
-### Intro
-
-Varlet is a Material design mobile component library developed based on `Vue3`, developed and maintained by partners in the community.
-
-
-### Features
-- 🚀 Provide 50+ high quality general purpose components
-- 🚀 Components are very lightweight
-- 💪 Developed by Chinese, complete Chinese and English documentation and logistics support
-- 🛠️ Support on-demand introduction
-- 🛠️ Support theme customization
-- 🌍 Support internationalization
-- 💡 Support WebStorm, VS Code component syntax highlighting
-- 💪 Support the SSR
-- 💡 Support the Typescript
-- 💪 Make sure more than 90 percent unit test coverage, providing stability assurance
-- 🛠️ Support dark mode
-
-### Install
-
-### CDN
-`varlet.js` contain all the styles and logic of the component library, and you can import them.
-
-```html
-<div id="app"></div>
-<script src="https://cdn.jsdelivr.net/npm/vue@next"></script>
-<script src="https://cdn.jsdelivr.net/npm/@varlet/ui/umd/varlet.js"></script>
-<script>
-  const app = Vue.createApp({
-    template: '<var-button>Button</var-button>'
-  })
-  app.use(Varlet).mount('#app')
-</script>
-```
-
-### Webpack / Vite
-```shell
-# Install with npm or yarn or pnpm
-
-# npm
-npm i @varlet/ui -S
-
-# yarn
-yarn add @varlet/ui
-
-# pnpm
-pnpm add @varlet/ui
-```
-
-```js
-import App from './App.vue'
-import Varlet from '@varlet/ui'
-import { createApp } from 'vue'
-import '@varlet/ui/es/style.js'
-
-createApp(App).use(Varlet).mount('#app')
-```
-
-### Sponsorship us
-
-We will use the donations to encourage open source contributors, buy them a cup of coffee and milk tea,
-purchase infrastructure that is helpful to the project, and promote the project to become better.
-
-<img style="width: 25%" src="https://github.com/varletjs/varlet/blob/dev/sponsor/wechat.png?raw=true" />
-
-### Contributors
-
-<a href="https://github.com/varletjs/varlet/graphs/contributors">
-  <img src="https://contrib.rocks/image?repo=haoziqaq/varlet" />
-</a>
+<div align="center">
+  <a href="https://varlet-varletjs.vercel.app/#/en-US/home">
+    <img src="https://varlet-varletjs.vercel.app/logo.svg" width="150">
+  </a>
+  <h1>VARLET</h1>
+  <p>Material design mobile component library for Vue3</p>
+  <p>
+    <a href="https://varlet-varletjs.vercel.app/#/en-US/home">Documentation(Vercel)</a> 
+    <a href="https://varlet.gitee.io/varlet-ui/#/en-US/home">Documentation(Gitee)</a>
+  </p>
+  <p>
+    <img src="https://img.shields.io/npm/v/@varlet/ui?style=flat-square" alt="version">
+    <img src="https://img.shields.io/github/stars/varletjs/varlet" alt="stars">
+    <img src="https://img.shields.io/badge/vue-v3.2.0%2B-%23407fbc" alt="vue">
+    <img src="https://img.shields.io/npm/l/@varlet/ui.svg" alt="licence">
+    <img src="https://img.shields.io/codecov/c/github/varletjs/varlet" alt="coverage">
+    <img src="https://img.badgesize.io/https://unpkg.com/@varlet/ui/umd/varlet.js?compression=gzip&label=gzip" alt="gzip" />
+    <img src="https://github.com/varletjs/varlet/workflows/CI/badge.svg" alt="ci">
+  </p>
+</div>
+
+---
+
+### Intro
+
+Varlet is a Material design mobile component library developed based on `Vue3`, developed and maintained by partners in the community.
+
+
+### Features
+- 🚀 Provide 50+ high quality general purpose components
+- 🚀 Components are very lightweight
+- 💪 Developed by Chinese, complete Chinese and English documentation and logistics support
+- 🛠️ Support on-demand introduction
+- 🛠️ Support theme customization
+- 🌍 Support internationalization
+- 💡 Support WebStorm, VS Code component syntax highlighting
+- 💪 Support the SSR
+- 💡 Support the Typescript
+- 💪 Make sure more than 90 percent unit test coverage, providing stability assurance
+- 🛠️ Support dark mode
+
+### Install
+
+### CDN
+`varlet.js` contain all the styles and logic of the component library, and you can import them.
+
+```html
+<div id="app"></div>
+<script src="https://cdn.jsdelivr.net/npm/vue@next"></script>
+<script src="https://cdn.jsdelivr.net/npm/@varlet/ui/umd/varlet.js"></script>
+<script>
+  const app = Vue.createApp({
+    template: '<var-button>Button</var-button>'
+  })
+  app.use(Varlet).mount('#app')
+</script>
+```
+
+### Webpack / Vite
+```shell
+# Install with npm or yarn or pnpm
+
+# npm
+npm i @varlet/ui -S
+
+# yarn
+yarn add @varlet/ui
+
+# pnpm
+pnpm add @varlet/ui
+```
+
+```js
+import App from './App.vue'
+import Varlet from '@varlet/ui'
+import { createApp } from 'vue'
+import '@varlet/ui/es/style.js'
+
+createApp(App).use(Varlet).mount('#app')
+```
+
+### Sponsorship us
+
+We will use the donations to encourage open source contributors, buy them a cup of coffee and milk tea,
+purchase infrastructure that is helpful to the project, and promote the project to become better.
+
+<img style="width: 25%" src="https://github.com/varletjs/varlet/blob/dev/sponsor/wechat.png?raw=true" />
+
+### Contributors
+
+<a href="https://github.com/varletjs/varlet/graphs/contributors">
+  <img src="https://contrib.rocks/image?repo=haoziqaq/varlet" />
+</a>

package/README.md

@@ -1,93 +1,93 @@
-<div align="center">
-  <a href="https://varlet-varletjs.vercel.app">
-    <img src="https://varlet-varletjs.vercel.app/logo.svg" width="150" >
-  </a>
-  <h1>VARLET</h1>
-  <p>基于 Vue3 的 Material design 风格移动端组件库</p>
- <p>
-    <a href="https://varlet-varletjs.vercel.app">文档(Vercel)</a> | 
-    <a href="https://varlet.gitee.io/varlet-ui">文档(Gitee)</a> | 
-<a href="https://github.com/varletjs/varlet/blob/dev/README.en-US.md">English Readme</a>
-  </p>
-  <p>
-    <img src="https://img.shields.io/npm/v/@varlet/ui?style=flat-square" alt="version">
-    <img src="https://img.shields.io/github/stars/varletjs/varlet" alt="stars">
-    <img src="https://img.shields.io/badge/vue-v3.2.0%2B-%23407fbc" alt="vue">
-    <img src="https://img.shields.io/npm/l/@varlet/ui.svg" alt="licence">
-    <img src="https://img.shields.io/codecov/c/github/varletjs/varlet" alt="coverage">
-    <img src="https://img.badgesize.io/https://unpkg.com/@varlet/ui/umd/varlet.js?compression=gzip&label=gzip" alt="gzip" />
-    <img src="https://github.com/varletjs/varlet/workflows/CI/badge.svg" alt="ci">
-  </p>
-</div>
-
----
-
-### 介绍
-
-Varlet 是一个基于 `Vue3` 开发的 Material 风格移动端组件库，全面拥抱 `Vue3` 生态，由社区建立起来的组件库团队进行维护。
-
-### 特性
-- 🚀 提供50+个高质量通用组件 
-- 🚀 组件十分轻量
-- 💪 由国人开发，完善的中英文文档和后勤保障
-- 🛠️ 支持按需引入
-- 🛠️ 支持主题定制
-- 🌍 支持国际化
-- 💡 支持 webstorm，vscode 组件属性高亮
-- 💪 支持 SSR
-- 💡 支持 Typescript 
-- 💪 确保90%以上单元测试覆盖率，提供稳定性保证
-- 🛠️ 支持暗黑模式
-
-### 安装
-
-### CDN
-`varlet.js` 包含组件库的所有样式和逻辑，引入即可。
-
-```html
-<div id="app"></div>
-<script src="https://cdn.jsdelivr.net/npm/vue@next"></script>
-<script src="https://cdn.jsdelivr.net/npm/@varlet/ui/umd/varlet.js"></script>
-<script>
-  const app = Vue.createApp({
-    template: '<var-button>按钮</var-button>'
-  })
-  app.use(Varlet).mount('#app')
-</script>
-```
-
-### Webpack / Vite
-```shell
-# 通过 npm 或 yarn 或 pnpm 安装
-
-# npm
-npm i @varlet/ui -S
-
-# yarn
-yarn add @varlet/ui
-
-# pnpm
-pnpm add @varlet/ui
-```
-
-```js
-import App from './App.vue'
-import Varlet from '@varlet/ui'
-import { createApp } from 'vue'
-import '@varlet/ui/es/style.js'
-
-createApp(App).use(Varlet).mount('#app')
-```
-
-### 捐赠我们
-
-我们将用捐赠所得去鼓励参与开源的贡献者们，给他们买一杯咖啡奶茶，购置对于项目有帮助基础设施，推动项目变得更好。
-
-<img style="width: 25%" src="https://github.com/varletjs/varlet/blob/dev/sponsor/wechat.png?raw=true" />
-
-### Contributors
-
-<a href="https://github.com/varletjs/varlet/graphs/contributors">
-  <img src="https://contrib.rocks/image?repo=varletjs/varlet" />
-</a>
-
+<div align="center">
+  <a href="https://varlet-varletjs.vercel.app">
+    <img src="https://varlet-varletjs.vercel.app/logo.svg" width="150" >
+  </a>
+  <h1>VARLET</h1>
+  <p>基于 Vue3 的 Material design 风格移动端组件库</p>
+ <p>
+    <a href="https://varlet-varletjs.vercel.app">文档(Vercel)</a> | 
+    <a href="https://varlet.gitee.io/varlet-ui">文档(Gitee)</a> | 
+<a href="https://github.com/varletjs/varlet/blob/dev/README.en-US.md">English Readme</a>
+  </p>
+  <p>
+    <img src="https://img.shields.io/npm/v/@varlet/ui?style=flat-square" alt="version">
+    <img src="https://img.shields.io/github/stars/varletjs/varlet" alt="stars">
+    <img src="https://img.shields.io/badge/vue-v3.2.0%2B-%23407fbc" alt="vue">
+    <img src="https://img.shields.io/npm/l/@varlet/ui.svg" alt="licence">
+    <img src="https://img.shields.io/codecov/c/github/varletjs/varlet" alt="coverage">
+    <img src="https://img.badgesize.io/https://unpkg.com/@varlet/ui/umd/varlet.js?compression=gzip&label=gzip" alt="gzip" />
+    <img src="https://github.com/varletjs/varlet/workflows/CI/badge.svg" alt="ci">
+  </p>
+</div>
+
+---
+
+### 介绍
+
+Varlet 是一个基于 `Vue3` 开发的 Material 风格移动端组件库，全面拥抱 `Vue3` 生态，由社区建立起来的组件库团队进行维护。
+
+### 特性
+- 🚀 提供50+个高质量通用组件 
+- 🚀 组件十分轻量
+- 💪 由国人开发，完善的中英文文档和后勤保障
+- 🛠️ 支持按需引入
+- 🛠️ 支持主题定制
+- 🌍 支持国际化
+- 💡 支持 webstorm，vscode 组件属性高亮
+- 💪 支持 SSR
+- 💡 支持 Typescript 
+- 💪 确保90%以上单元测试覆盖率，提供稳定性保证
+- 🛠️ 支持暗黑模式
+
+### 安装
+
+### CDN
+`varlet.js` 包含组件库的所有样式和逻辑，引入即可。
+
+```html
+<div id="app"></div>
+<script src="https://cdn.jsdelivr.net/npm/vue@next"></script>
+<script src="https://cdn.jsdelivr.net/npm/@varlet/ui/umd/varlet.js"></script>
+<script>
+  const app = Vue.createApp({
+    template: '<var-button>按钮</var-button>'
+  })
+  app.use(Varlet).mount('#app')
+</script>
+```
+
+### Webpack / Vite
+```shell
+# 通过 npm 或 yarn 或 pnpm 安装
+
+# npm
+npm i @varlet/ui -S
+
+# yarn
+yarn add @varlet/ui
+
+# pnpm
+pnpm add @varlet/ui
+```
+
+```js
+import App from './App.vue'
+import Varlet from '@varlet/ui'
+import { createApp } from 'vue'
+import '@varlet/ui/es/style.js'
+
+createApp(App).use(Varlet).mount('#app')
+```
+
+### 捐赠我们
+
+我们将用捐赠所得去鼓励参与开源的贡献者们，给他们买一杯咖啡奶茶，购置对于项目有帮助基础设施，推动项目变得更好。
+
+<img style="width: 25%" src="https://github.com/varletjs/varlet/blob/dev/sponsor/wechat.png?raw=true" />
+
+### Contributors
+
+<a href="https://github.com/varletjs/varlet/graphs/contributors">
+  <img src="https://contrib.rocks/image?repo=varletjs/varlet" />
+</a>
+

package/es/index.d.ts

@@ -1 +1 @@
-export * from '../types'
+export * from '..\types'

package/es/select/Select.js

@@ -8,7 +8,7 @@ import { props } from './props';
 import { useValidation, createNamespace, call } from '../utils/components';
 import { useOptions } from './provide';
 import { useForm } from '../form/provide';
-import { toPxNum } from '../utils/elements';
+import { getTop, toPxNum } from '../utils/elements';
 var {
   n,
   classes
@@ -457,16 +457,22 @@ export default defineComponent({
       var {
         body
       } = document;
+      var bodyScrollHeight = body.scrollHeight;
       nextTick(() => {
-        var _menuEl$value, _menuEl$value2;
+        var _menuEl$value;
 
         var {
-          offsetTop: menuOffsetTop,
           offsetHeight: menuOffsetHeight
         } = (_menuEl$value = menuEl.value) == null ? void 0 : _menuEl$value.parentElement;
-        var menuOffsetBottom = body.scrollHeight - menuOffsetHeight - menuOffsetTop;
-        if (menuOffsetTop < 0) offsetY.value = getOffsetY();
-        if (menuOffsetBottom < 0) offsetY.value -= ((_menuEl$value2 = menuEl.value) == null ? void 0 : _menuEl$value2.parentElement).offsetHeight - getOffsetY();
+        var wrapOffsetTop = getTop(wrapEl.value);
+
+        if (wrapOffsetTop + offsetY.value < 0) {
+          offsetY.value = getOffsetY();
+        }
+
+        if (menuOffsetHeight + wrapOffsetTop + offsetY.value > bodyScrollHeight) {
+          offsetY.value -= menuOffsetHeight - getOffsetY();
+        }
       });
     };
 

package/es/select/select.css

@@ -1 +1 @@
-:root { --select-select-text-color: #555; --select-select-padding: 5px 0; --select-error-color: var(--color-danger); --select-blur-color: #888; --select-focus-color: var(--color-primary); --select-scroller-background: #fff; --select-scroller-padding: 6px 0; --select-scroller-max-height: 278px; --select-placeholder-size: 16px; --select-icon-padding: 16px 0 0; --select-icon-size: 20px; --select-chip-margin: 5px 5px 0; --select-line-size: 1px; --select-line-spread-size: 2px; --select-arrow-size: 20px; --select-disabled-color: var(--color-text-disabled);}.var-select-footer-margin-enter-from,.var-select-footer-margin-leave-to { opacity: 0; margin-top: 2px !important;}.var-select-footer-margin-enter-active,.var-select-footer-margin-leave-active { transition: 0.2s all var(--cubic-bezier);}.var-select { width: 100%; color: var(--select-select-text-color);}.var-select__controller { width: 100%; display: flex; position: relative;}.var-select__menu[var-select-cover] { flex-grow: 1; background: transparent;}.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;}.var-select__wrap { position: relative; display: flex; flex-direction: column; padding-top: var(--select-placeholder-size);}.var-select__icon { display: flex; align-items: center; padding: var(--select-icon-padding); font-size: 20px;}.var-select__placeholder { position: absolute; top: 50%; left: 0; width: 100%; transform-origin: left; transition-property: top, transform, width; transition-duration: 0.3s; transform: translate(0, calc(-50% + var(--select-placeholder-size) / 2)) scale(1); font-size: var(--select-placeholder-size); color: var(--select-blur-color);}.var-select__select { display: flex; justify-content: space-between; align-items: center; width: 100%; min-height: 32px; padding: var(--select-select-padding); outline: none; border: none; font-size: inherit; color: var(--select-select-text-color); word-break: break-all;}.var-select__arrow[var-select-cover] { flex-shrink: 0; font-size: var(--select-arrow-size);}.var-select__line { width: 100%; height: var(--select-line-size); background: var(--select-blur-color);}.var-select__dot { width: 100%; height: var(--select-line-spread-size); background: var(--select-focus-color); transform: scaleX(0); transform-origin: center; transition: transform 0.3s var(--cubic-bezier);}.var-select--placeholder-hint { top: 0; width: 133.33%; transform: translate(0, 0) scale(0.75);}.var-select--placeholder-non-hint { top: 50%; transform: translate(0, -50%) scale(1);}.var-select--non-hint { padding-top: 0;}.var-select--placeholder-hidden { visibility: hidden;}.var-select--focus { color: var(--select-focus-color);}.var-select--spread { transform: scaleX(1);}.var-select--disabled { color: var(--select-disabled-color);}.var-select--error { color: var(--select-error-color);}.var-select--line-disabled { background: var(--select-disabled-color);}.var-select--line-error { background: var(--select-error-color);}.var-select--arrow-rotate { transform: rotate(180deg);}
+:root { --select-select-text-color: #555; --select-select-padding: 5px 0; --select-error-color: var(--color-danger); --select-blur-color: #888; --select-focus-color: var(--color-primary); --select-scroller-background: #fff; --select-scroller-padding: 6px 0; --select-scroller-max-height: 278px; --select-placeholder-size: 16px; --select-icon-padding: 16px 0 0; --select-icon-size: 20px; --select-chip-margin: 5px 5px 0; --select-line-size: 1px; --select-line-spread-size: 2px; --select-arrow-size: 20px; --select-disabled-color: var(--color-text-disabled);}.var-select-footer-margin-enter-from,.var-select-footer-margin-leave-to { opacity: 0; margin-top: 2px !important;}.var-select-footer-margin-enter-active,.var-select-footer-margin-leave-active { transition: 0.2s all var(--cubic-bezier);}.var-select { width: 100%; color: var(--select-select-text-color);}.var-select__controller { width: 100%; display: flex; position: relative;}.var-select__menu[var-select-cover] { flex-grow: 1; background: transparent;}.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;}.var-select__wrap { position: relative; display: flex; flex-direction: column; padding-top: var(--select-placeholder-size);}.var-select__icon { display: flex; align-items: center; padding: var(--select-icon-padding); font-size: 20px;}.var-select__placeholder { position: absolute; top: 50%; left: 0; width: 100%; transform-origin: left; transition-property: top, transform, width; transition-duration: 0.3s; transform: translate(0, calc(-50% + var(--select-placeholder-size) / 2)) scale(1); font-size: var(--select-placeholder-size); color: var(--select-blur-color);}.var-select__select { display: flex; justify-content: space-between; align-items: center; width: 100%; min-height: 32px; padding: var(--select-select-padding); outline: none; border: none; font-size: inherit; color: var(--select-select-text-color); word-break: break-all; overflow-x: hidden;}.var-select__arrow[var-select-cover] { flex-shrink: 0; font-size: var(--select-arrow-size);}.var-select__line { width: 100%; height: var(--select-line-size); background: var(--select-blur-color);}.var-select__dot { width: 100%; height: var(--select-line-spread-size); background: var(--select-focus-color); transform: scaleX(0); transform-origin: center; transition: transform 0.3s var(--cubic-bezier);}.var-select--placeholder-hint { top: 0; width: 133.33%; transform: translate(0, 0) scale(0.75);}.var-select--placeholder-non-hint { top: 50%; transform: translate(0, -50%) scale(1);}.var-select--non-hint { padding-top: 0;}.var-select--placeholder-hidden { visibility: hidden;}.var-select--focus { color: var(--select-focus-color);}.var-select--spread { transform: scaleX(1);}.var-select--disabled { color: var(--select-disabled-color);}.var-select--error { color: var(--select-error-color);}.var-select--line-disabled { background: var(--select-disabled-color);}.var-select--line-error { background: var(--select-error-color);}.var-select--arrow-rotate { transform: rotate(180deg);}