@varlet/ui 2.10.2-alpha.1683285148722 → 2.10.3-alpha.1683532936621

package/es/collapse-item/collapseItem.css

@@ -1 +1 @@
-:root { --collapse-background: #fff; --collapse-text-color: #232222; --collapse-header-font-size: var(--font-size-lg); --collapse-header-padding: 10px 12px; --collapse-content-font-size: var(--font-size-md); --collapse-content-padding: 0 12px 10px; --collapse-item-margin-top: 16px; --collapse-disable-color: #bdbdbd; --collapse-border-top: thin solid rgba(0, 0, 0, 0.12);}.var-collapse-item { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; position: relative; margin-top: 0; background: var(--collapse-background); color: var(--collapse-text-color); transition: margin-top 0.25s, background-color 0.25s;}.var-collapse-item__shadow { bottom: 0; content: ''; left: 0; position: absolute; right: 0; top: 0; z-index: -1;}.var-collapse-item:not(:first-child)::after { border-top: var(--collapse-divider-top); content: ''; left: 0; position: absolute; right: 0; top: 0;}.var-collapse-item__header { align-items: center; display: flex; font-size: var(--collapse-header-font-size); outline: none; padding: var(--collapse-header-padding); justify-content: space-between; position: relative;}.var-collapse-item__header-title { transition: color 0.25s;}.var-collapse-item__header-icon { transform: rotate(0deg); opacity: 1;}.var-collapse-item__header-open { transform: rotate(-180deg);}.var-collapse-item__header--disable { opacity: 0;}.var-collapse-item__content { display: flex; font-size: var(--collapse-content-font-size); overflow: hidden; transition: all 0.25s;}.var-collapse-item__content-wrap { padding: var(--collapse-content-padding); word-break: break-all; flex: 1;}.var-collapse-item--active + .var-collapse-item,.var-collapse-item--active:not(:first-child) { margin-top: var(--collapse-item-margin-top);}.var-collapse-item--active + .var-collapse-item::after,.var-collapse-item--active:not(:first-child)::after { border-top: none;}.var-collapse-item--disable { color: var(--collapse-disable-color); cursor: not-allowed;}
+:root { --collapse-background: #fff; --collapse-text-color: #232222; --collapse-header-font-size: var(--font-size-lg); --collapse-header-padding: 10px 12px; --collapse-content-font-size: var(--font-size-md); --collapse-content-padding: 0 12px 10px; --collapse-item-margin-top: 16px; --collapse-disable-color: #bdbdbd; --collapse-border-top: thin solid rgba(0, 0, 0, 0.12);}.var-collapse-item { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; position: relative; margin-top: 0; background: var(--collapse-background); color: var(--collapse-text-color); transition: margin-top 0.25s, background-color 0.25s;}.var-collapse-item__shadow { bottom: 0; content: ''; left: 0; position: absolute; right: 0; top: 0; z-index: -1;}.var-collapse-item:not(:first-child)::after { border-top: var(--collapse-divider-top); content: ''; left: 0; position: absolute; right: 0; top: 0;}.var-collapse-item__header { align-items: center; display: flex; font-size: var(--collapse-header-font-size); outline: none; padding: var(--collapse-header-padding); justify-content: space-between; position: relative;}.var-collapse-item__header-title { transition: color 0.25s;}.var-collapse-item__header-icon { transform: rotate(0deg); opacity: 1;}.var-collapse-item__header-open { transform: rotate(-180deg);}.var-collapse-item__header--disable { opacity: 0;}.var-collapse-item__content { font-size: var(--collapse-content-font-size); overflow: hidden; transition: all 0.25s;}.var-collapse-item__content-wrap { padding: var(--collapse-content-padding); word-break: break-all;}.var-collapse-item--active + .var-collapse-item,.var-collapse-item--active:not(:first-child) { margin-top: var(--collapse-item-margin-top);}.var-collapse-item--active + .var-collapse-item::after,.var-collapse-item--active:not(:first-child)::after { border-top: none;}.var-collapse-item--disable { color: var(--collapse-disable-color); cursor: not-allowed;}

package/es/field-decorator/fieldDecorator.css

@@ -1 +1 @@
-:root { --field-decorator-middle-offset-y: 0.01px; --field-decorator-text-color: #555; --field-decorator-error-color: var(--color-danger); --field-decorator-blur-color: #888; --field-decorator-focus-color: var(--color-primary); --field-decorator-placeholder-size: 16px; --field-decorator-icon-size: 20px; --field-decorator-line-size: 1px; --field-decorator-line-focus-size: 2px; --field-decorator-disabled-color: var(--color-text-disabled); --field-decorator-standard-normal-padding-top: 22px; --field-decorator-standard-normal-padding-bottom: 4px; --field-decorator-standard-normal-icon-padding: 22px 0 4px; --field-decorator-standard-normal-non-hint-padding-top: 4px; --field-decorator-standard-normal-placeholder-translate-y: var(--field-decorator-standard-normal-padding-top); --field-decorator-standard-small-padding-top: 18px; --field-decorator-standard-small-padding-bottom: 4px; --field-decorator-standard-small-icon-padding: 18px 0 4px; --field-decorator-standard-small-non-hint-padding-top: 2px; --field-decorator-standard-small-placeholder-translate-y: var(--field-decorator-standard-small-padding-top); --field-decorator-outlined-normal-padding-top: 16px; --field-decorator-outlined-normal-padding-bottom: 16px; --field-decorator-outlined-normal-padding-left: 16px; --field-decorator-outlined-normal-padding-right: 16px; --field-decorator-outlined-normal-placeholder-space: 4px; --field-decorator-outlined-normal-icon-padding: 16px 0 16px; --field-decorator-outlined-normal-placeholder-translate-y: var(--field-decorator-outlined-normal-padding-top); --field-decorator-outlined-small-padding-top: 8px; --field-decorator-outlined-small-padding-bottom: 8px; --field-decorator-outlined-small-padding-left: 12px; --field-decorator-outlined-small-padding-right: 12px; --field-decorator-outlined-small-placeholder-space: 2px; --field-decorator-outlined-small-icon-padding: 8px 0 8px; --field-decorator-outlined-small-placeholder-translate-y: var(--field-decorator-outlined-small-padding-top);}.var-field-decorator { position: relative; width: 100%; color: var(--field-decorator-text-color);}.var-field-decorator__controller { width: 100%; display: flex; align-items: stretch; position: relative;}.var-field-decorator__middle { position: relative; flex-grow: 1; display: flex;}.var-field-decorator__icon { display: flex; align-items: center; font-size: var(--field-decorator-icon-size);}.var-field-decorator__icon .var-icon { font-size: var(--field-decorator-icon-size);}.var-field-decorator__placeholder { width: 100%; position: absolute; top: 0; left: 0; font-size: var(--field-decorator-placeholder-size); line-height: 1.5em; color: var(--field-decorator-blur-color); pointer-events: none; cursor: inherit; transform: translate(0, 0) scale(1); transform-origin: left; transition: transform 0.28s var(--cubic-bezier), color 0.25s;}.var-field-decorator__placeholder-text { position: absolute; z-index: -1; display: inline-block; pointer-events: none; opacity: 0;}.var-field-decorator__clear-icon[var-field-decorator-cover] { font-size: var(--field-decorator-icon-size); margin-left: 6px; cursor: pointer;}.var-field-decorator--placeholder-hint { width: calc(1.33 * var(--field-decorator-legend-max-width, var(--filed-decorator-controller-width)));}.var-field-decorator--placeholder-hidden { visibility: hidden;}.var-field-decorator--focus { color: var(--field-decorator-focus-color);}.var-field-decorator--disabled { color: var(--field-decorator-disabled-color); cursor: not-allowed;}.var-field-decorator--error { color: var(--field-decorator-error-color);}.var-field-decorator--standard .var-field-decorator__middle { padding: calc(var(--field-decorator-standard-normal-padding-top) + var(--field-decorator-middle-offset-y)) 0 var(--field-decorator-standard-normal-padding-bottom);}.var-field-decorator--standard .var-field-decorator__icon { padding: var(--field-decorator-standard-normal-icon-padding);}.var-field-decorator--standard .var-field-decorator__placeholder { transform: translate(0, calc(var(--field-decorator-standard-normal-placeholder-translate-y) + var(--field-decorator-middle-offset-y)));}.var-field-decorator--standard .var-field-decorator__line { width: 100%; height: var(--field-decorator-line-size); background: var(--field-decorator-blur-color); transition: background-color 0.25s;}.var-field-decorator--standard .var-field-decorator--line-disabled { background: var(--field-decorator-disabled-color);}.var-field-decorator--standard .var-field-decorator__dot { width: 100%; height: var(--field-decorator-line-focus-size); background: var(--field-decorator-focus-color); transform: scaleX(0); transform-origin: center; transition: transform 0.3s var(--cubic-bezier), background-color 0.25s;}.var-field-decorator--standard .var-field-decorator--middle-non-hint { padding-top: calc(var(--field-decorator-standard-normal-non-hint-padding-top) + var(--field-decorator-middle-offset-y));}.var-field-decorator--standard .var-field-decorator--icon-non-hint { padding-top: var(--field-decorator-standard-normal-non-hint-padding-top);}.var-field-decorator--standard .var-field-decorator--placeholder-non-hint { transform: translate(0, -50%); top: 50%;}.var-field-decorator--standard .var-field-decorator--line-focus { transform: scaleX(1);}.var-field-decorator--standard .var-field-decorator--line-error { background: var(--field-decorator-error-color);}.var-field-decorator--outlined .var-field-decorator__controller { padding: 0 var(--field-decorator-outlined-normal-padding-right) 0 var(--field-decorator-outlined-normal-padding-left);}.var-field-decorator--outlined .var-field-decorator__middle { padding: calc(var(--field-decorator-outlined-normal-padding-top) + var(--field-decorator-middle-offset-y)) 0 var(--field-decorator-outlined-normal-padding-bottom) 0;}.var-field-decorator--outlined .var-field-decorator__icon { padding: var(--field-decorator-outlined-normal-icon-padding);}.var-field-decorator--outlined .var-field-decorator__placeholder { transform: translate(0, calc(var(--field-decorator-outlined-normal-placeholder-translate-y) + var(--field-decorator-middle-offset-y)));}.var-field-decorator--outlined .var-field-decorator__line { width: 100%; height: calc(100% + (var(--field-decorator-placeholder-size) * 0.75 / 2)); position: absolute; top: calc(var(--field-decorator-placeholder-size) * 0.75 / 2 * -1); left: 0; pointer-events: none; border-radius: 4px; border: var(--field-decorator-line-size) solid var(--field-decorator-blur-color); overflow: hidden; padding: 0 calc(var(--field-decorator-outlined-normal-padding-right) - var(--field-decorator-outlined-normal-placeholder-space) - var(--field-decorator-line-size)) 0 calc(var(--field-decorator-outlined-normal-padding-left) - var(--field-decorator-outlined-normal-placeholder-space) - var(--field-decorator-line-size)); margin: 0;}.var-field-decorator--outlined .var-field-decorator__line-legend { max-width: 0; height: calc(var(--field-decorator-placeholder-size) * 0.75); visibility: hidden; padding: 0; overflow: hidden; display: block; white-space: nowrap;}.var-field-decorator--outlined .var-field-decorator--line-focus { border-width: var(--field-decorator-line-focus-size); border-color: var(--field-decorator-focus-color); padding: 0 calc(var(--field-decorator-outlined-normal-padding-right) - var(--field-decorator-outlined-normal-placeholder-space) - var(--field-decorator-line-focus-size)) 0 calc(var(--field-decorator-outlined-normal-padding-left) - var(--field-decorator-outlined-normal-placeholder-space) - var(--field-decorator-line-focus-size));}.var-field-decorator--outlined .var-field-decorator--line-disabled { border-radius: 4px; border: var(--field-decorator-line-size) solid var(--field-decorator-disabled-color);}.var-field-decorator--outlined .var-field-decorator--line-error { border-color: var(--field-decorator-error-color) !important;}.var-field-decorator--standard.var-field-decorator--small .var-field-decorator__middle { padding: calc(var(--field-decorator-standard-small-padding-top) + var(--field-decorator-middle-offset-y)) 0 var(--field-decorator-standard-small-padding-bottom);}.var-field-decorator--standard.var-field-decorator--small .var-field-decorator__placeholder { transform: translate(0, calc(var(--field-decorator-standard-small-placeholder-translate-y) + var(--field-decorator-middle-offset-y)));}.var-field-decorator--standard.var-field-decorator--small .var-field-decorator--middle-non-hint { padding-top: calc(var(--field-decorator-standard-small-non-hint-padding-top) + var(--field-decorator-middle-offset-y));}.var-field-decorator--standard.var-field-decorator--small .var-field-decorator--icon-non-hint { padding-top: var(--field-decorator-standard-small-non-hint-padding-top);}.var-field-decorator--outlined.var-field-decorator--small .var-field-decorator__controller { padding: 0 var(--field-decorator-outlined-small-padding-right) 0 var(--field-decorator-outlined-small-padding-left);}.var-field-decorator--outlined.var-field-decorator--small .var-field-decorator__middle { padding: calc(var(--field-decorator-outlined-small-padding-top) + var(--field-decorator-middle-offset-y)) 0 var(--field-decorator-outlined-small-padding-bottom) 0;}.var-field-decorator--outlined.var-field-decorator--small .var-field-decorator__icon { padding: var(--field-decorator-outlined-small-icon-padding);}.var-field-decorator--outlined.var-field-decorator--small .var-field-decorator__placeholder { transform: translate(0, calc(var(--field-decorator-outlined-small-placeholder-translate-y) + var(--field-decorator-middle-offset-y)));}.var-field-decorator--outlined.var-field-decorator--small .var-field-decorator__line { padding: 0 calc(var(--field-decorator-outlined-small-padding-right) - var(--field-decorator-outlined-small-placeholder-space) - var(--field-decorator-line-size)) 0 calc(var(--field-decorator-outlined-small-padding-left) - var(--field-decorator-outlined-small-placeholder-space) - var(--field-decorator-line-size));}.var-field-decorator--outlined.var-field-decorator--small .var-field-decorator--line-focus { padding: 0 calc(var(--field-decorator-outlined-small-padding-right) - var(--field-decorator-outlined-small-placeholder-space) - var(--field-decorator-line-focus-size)) 0 calc(var(--field-decorator-outlined-small-padding-left) - var(--field-decorator-outlined-small-placeholder-space) - var(--field-decorator-line-focus-size));}
+:root { --field-decorator-middle-offset-y: 0.01px; --field-decorator-text-color: #555; --field-decorator-error-color: var(--color-danger); --field-decorator-blur-color: #888; --field-decorator-focus-color: var(--color-primary); --field-decorator-placeholder-size: 16px; --field-decorator-icon-size: 20px; --field-decorator-line-size: 1px; --field-decorator-line-focus-size: 2px; --field-decorator-disabled-color: var(--color-text-disabled); --field-decorator-standard-normal-padding-top: 22px; --field-decorator-standard-normal-padding-bottom: 4px; --field-decorator-standard-normal-icon-padding: 22px 0 4px; --field-decorator-standard-normal-non-hint-padding-top: 4px; --field-decorator-standard-normal-placeholder-translate-y: var(--field-decorator-standard-normal-padding-top); --field-decorator-standard-small-padding-top: 18px; --field-decorator-standard-small-padding-bottom: 4px; --field-decorator-standard-small-icon-padding: 18px 0 4px; --field-decorator-standard-small-non-hint-padding-top: 2px; --field-decorator-standard-small-placeholder-translate-y: var(--field-decorator-standard-small-padding-top); --field-decorator-outlined-normal-padding-top: 16px; --field-decorator-outlined-normal-padding-bottom: 16px; --field-decorator-outlined-normal-padding-left: 16px; --field-decorator-outlined-normal-padding-right: 16px; --field-decorator-outlined-normal-placeholder-space: 4px; --field-decorator-outlined-normal-icon-padding: 16px 0 16px; --field-decorator-outlined-normal-placeholder-translate-y: var(--field-decorator-outlined-normal-padding-top); --field-decorator-outlined-small-padding-top: 8px; --field-decorator-outlined-small-padding-bottom: 8px; --field-decorator-outlined-small-padding-left: 12px; --field-decorator-outlined-small-padding-right: 12px; --field-decorator-outlined-small-placeholder-space: 2px; --field-decorator-outlined-small-icon-padding: 8px 0 8px; --field-decorator-outlined-small-placeholder-translate-y: var(--field-decorator-outlined-small-padding-top);}.var-field-decorator { position: relative; width: 100%; color: var(--field-decorator-text-color);}.var-field-decorator__controller { width: 100%; display: flex; align-items: stretch; position: relative;}.var-field-decorator__middle { position: relative; flex-grow: 1; display: flex;}.var-field-decorator__icon { display: flex; align-items: center; font-size: var(--field-decorator-icon-size);}.var-field-decorator__icon .var-icon { font-size: var(--field-decorator-icon-size);}.var-field-decorator__placeholder { max-width: 100%; position: absolute; top: 0; left: 0; font-size: var(--field-decorator-placeholder-size); line-height: 1.5em; color: var(--field-decorator-blur-color); pointer-events: none; cursor: inherit; transform: translate(0, 0) scale(1); transform-origin: left; transition: transform 0.28s var(--cubic-bezier), color 0.25s, max-width 0.28s;}.var-field-decorator__placeholder-text { position: absolute; z-index: -1; display: inline-block; pointer-events: none; opacity: 0;}.var-field-decorator__clear-icon[var-field-decorator-cover] { font-size: var(--field-decorator-icon-size); margin-left: 6px; cursor: pointer;}.var-field-decorator--placeholder-hint { max-width: calc(1.33 * var(--field-decorator-legend-max-width, var(--filed-decorator-controller-width)));}.var-field-decorator--placeholder-hidden { visibility: hidden;}.var-field-decorator--focus { color: var(--field-decorator-focus-color);}.var-field-decorator--disabled { color: var(--field-decorator-disabled-color); cursor: not-allowed;}.var-field-decorator--error { color: var(--field-decorator-error-color);}.var-field-decorator--standard .var-field-decorator__middle { padding: calc(var(--field-decorator-standard-normal-padding-top) + var(--field-decorator-middle-offset-y)) 0 var(--field-decorator-standard-normal-padding-bottom);}.var-field-decorator--standard .var-field-decorator__icon { padding: var(--field-decorator-standard-normal-icon-padding);}.var-field-decorator--standard .var-field-decorator__placeholder { transform: translate(0, calc(var(--field-decorator-standard-normal-placeholder-translate-y) + var(--field-decorator-middle-offset-y)));}.var-field-decorator--standard .var-field-decorator__line { width: 100%; height: var(--field-decorator-line-size); background: var(--field-decorator-blur-color); transition: background-color 0.25s;}.var-field-decorator--standard .var-field-decorator--line-disabled { background: var(--field-decorator-disabled-color);}.var-field-decorator--standard .var-field-decorator__dot { width: 100%; height: var(--field-decorator-line-focus-size); background: var(--field-decorator-focus-color); transform: scaleX(0); transform-origin: center; transition: transform 0.3s var(--cubic-bezier), background-color 0.25s;}.var-field-decorator--standard .var-field-decorator--middle-non-hint { padding-top: calc(var(--field-decorator-standard-normal-non-hint-padding-top) + var(--field-decorator-middle-offset-y));}.var-field-decorator--standard .var-field-decorator--icon-non-hint { padding-top: var(--field-decorator-standard-normal-non-hint-padding-top);}.var-field-decorator--standard .var-field-decorator--placeholder-non-hint { transform: translate(0, -50%); top: 50%;}.var-field-decorator--standard .var-field-decorator--line-focus { transform: scaleX(1);}.var-field-decorator--standard .var-field-decorator--line-error { background: var(--field-decorator-error-color);}.var-field-decorator--outlined .var-field-decorator__controller { padding: 0 var(--field-decorator-outlined-normal-padding-right) 0 var(--field-decorator-outlined-normal-padding-left);}.var-field-decorator--outlined .var-field-decorator__middle { padding: calc(var(--field-decorator-outlined-normal-padding-top) + var(--field-decorator-middle-offset-y)) 0 var(--field-decorator-outlined-normal-padding-bottom) 0;}.var-field-decorator--outlined .var-field-decorator__icon { padding: var(--field-decorator-outlined-normal-icon-padding);}.var-field-decorator--outlined .var-field-decorator__placeholder { transform: translate(0, calc(var(--field-decorator-outlined-normal-placeholder-translate-y) + var(--field-decorator-middle-offset-y)));}.var-field-decorator--outlined .var-field-decorator__line { width: 100%; height: calc(100% + (var(--field-decorator-placeholder-size) * 0.75 / 2)); position: absolute; top: calc(var(--field-decorator-placeholder-size) * 0.75 / 2 * -1); left: 0; pointer-events: none; border-radius: 4px; border: var(--field-decorator-line-size) solid var(--field-decorator-blur-color); overflow: hidden; padding: 0 calc(var(--field-decorator-outlined-normal-padding-right) - var(--field-decorator-outlined-normal-placeholder-space) - var(--field-decorator-line-size)) 0 calc(var(--field-decorator-outlined-normal-padding-left) - var(--field-decorator-outlined-normal-placeholder-space) - var(--field-decorator-line-size)); margin: 0;}.var-field-decorator--outlined .var-field-decorator__line-legend { max-width: 0; height: calc(var(--field-decorator-placeholder-size) * 0.75); visibility: hidden; padding: 0; overflow: hidden; display: block; white-space: nowrap;}.var-field-decorator--outlined .var-field-decorator--line-focus { border-width: var(--field-decorator-line-focus-size); border-color: var(--field-decorator-focus-color); padding: 0 calc(var(--field-decorator-outlined-normal-padding-right) - var(--field-decorator-outlined-normal-placeholder-space) - var(--field-decorator-line-focus-size)) 0 calc(var(--field-decorator-outlined-normal-padding-left) - var(--field-decorator-outlined-normal-placeholder-space) - var(--field-decorator-line-focus-size));}.var-field-decorator--outlined .var-field-decorator--line-disabled { border-radius: 4px; border: var(--field-decorator-line-size) solid var(--field-decorator-disabled-color);}.var-field-decorator--outlined .var-field-decorator--line-error { border-color: var(--field-decorator-error-color) !important;}.var-field-decorator--standard.var-field-decorator--small .var-field-decorator__middle { padding: calc(var(--field-decorator-standard-small-padding-top) + var(--field-decorator-middle-offset-y)) 0 var(--field-decorator-standard-small-padding-bottom);}.var-field-decorator--standard.var-field-decorator--small .var-field-decorator__placeholder { transform: translate(0, calc(var(--field-decorator-standard-small-placeholder-translate-y) + var(--field-decorator-middle-offset-y)));}.var-field-decorator--standard.var-field-decorator--small .var-field-decorator--middle-non-hint { padding-top: calc(var(--field-decorator-standard-small-non-hint-padding-top) + var(--field-decorator-middle-offset-y));}.var-field-decorator--standard.var-field-decorator--small .var-field-decorator--icon-non-hint { padding-top: var(--field-decorator-standard-small-non-hint-padding-top);}.var-field-decorator--outlined.var-field-decorator--small .var-field-decorator__controller { padding: 0 var(--field-decorator-outlined-small-padding-right) 0 var(--field-decorator-outlined-small-padding-left);}.var-field-decorator--outlined.var-field-decorator--small .var-field-decorator__middle { padding: calc(var(--field-decorator-outlined-small-padding-top) + var(--field-decorator-middle-offset-y)) 0 var(--field-decorator-outlined-small-padding-bottom) 0;}.var-field-decorator--outlined.var-field-decorator--small .var-field-decorator__icon { padding: var(--field-decorator-outlined-small-icon-padding);}.var-field-decorator--outlined.var-field-decorator--small .var-field-decorator__placeholder { transform: translate(0, calc(var(--field-decorator-outlined-small-placeholder-translate-y) + var(--field-decorator-middle-offset-y)));}.var-field-decorator--outlined.var-field-decorator--small .var-field-decorator__line { padding: 0 calc(var(--field-decorator-outlined-small-padding-right) - var(--field-decorator-outlined-small-placeholder-space) - var(--field-decorator-line-size)) 0 calc(var(--field-decorator-outlined-small-padding-left) - var(--field-decorator-outlined-small-placeholder-space) - var(--field-decorator-line-size));}.var-field-decorator--outlined.var-field-decorator--small .var-field-decorator--line-focus { padding: 0 calc(var(--field-decorator-outlined-small-padding-right) - var(--field-decorator-outlined-small-placeholder-space) - var(--field-decorator-line-focus-size)) 0 calc(var(--field-decorator-outlined-small-padding-left) - var(--field-decorator-outlined-small-placeholder-space) - var(--field-decorator-line-focus-size));}

package/es/index.bundle.mjs

@@ -241,7 +241,7 @@ import './time-picker/style/index.mjs'
 import './tooltip/style/index.mjs'
 import './uploader/style/index.mjs'
 
-const version = '2.10.2-alpha.1683285148722'
+const version = '2.10.3-alpha.1683532936621'
 
 function install(app) {
   ActionSheet.install && app.use(ActionSheet)

package/es/index.mjs

@@ -160,7 +160,7 @@ export * from './time-picker/index.mjs'
 export * from './tooltip/index.mjs'
 export * from './uploader/index.mjs'
 
-const version = '2.10.2-alpha.1683285148722'
+const version = '2.10.3-alpha.1683532936621'
 
 function install(app) {
   ActionSheet.install && app.use(ActionSheet)

package/es/slider/Slider.mjs

@@ -1,5 +1,5 @@
 import VarFormDetails from '../form-details/index.mjs';
-import { defineComponent, ref, computed, reactive, nextTick, watch, unref } from 'vue';
+import { defineComponent, ref, onBeforeUnmount, computed, reactive, nextTick, watch, unref } from 'vue';
 import { useValidation, createNamespace, call } from '../utils/components.mjs';
 import { useForm } from '../form/provide.mjs';
 import VarHoverOverlay, { useHoverOverlay } from '../hover-overlay/index.mjs';
@@ -17,7 +17,7 @@ import { normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, c
 
 var _withScopeId = n => (_pushScopeId(""), n = n(), _popScopeId(), n);
 
-var _hoisted_1 = ["onTouchstart", "onTouchmove", "onTouchend", "onTouchcancel"];
+var _hoisted_1 = ["onTouchstart"];
 
 function __render__(_ctx, _cache) {
   var _component_var_hover_overlay = _resolveComponent("var-hover-overlay");
@@ -57,10 +57,7 @@ function __render__(_ctx, _cache) {
       class: _normalizeClass(_ctx.n(_ctx.direction + "-thumb")),
       key: item.enumValue,
       style: _normalizeStyle(_ctx.thumbStyle(item)),
-      onTouchstart: _withModifiers($event => _ctx.start($event, item.enumValue), ["stop"]),
-      onTouchmove: _withModifiers($event => _ctx.move($event, item.enumValue), ["stop"]),
-      onTouchend: $event => _ctx.end(item.enumValue),
-      onTouchcancel: $event => _ctx.end(item.enumValue)
+      onTouchstart: _withModifiers($event => _ctx.start($event, item.enumValue), ["stop"])
     }, [_renderSlot(_ctx.$slots, "button", {
       currentValue: item.text
     }, () => [_withDirectives(_createElementVNode("div", {
@@ -218,6 +215,7 @@ var __sfc__ = defineComponent({
     var isDisabled = computed(() => props.disabled || (form == null ? void 0 : form.disabled.value));
     var isReadonly = computed(() => props.readonly || (form == null ? void 0 : form.readonly.value));
     var isVertical = computed(() => props.direction === 'vertical');
+    var activeThumb;
 
     var getOffset = e => {
       var currentTarget = e.currentTarget;
@@ -304,6 +302,20 @@ var __sfc__ = defineComponent({
       return offsetToThumb1 <= offsetToThumb2 ? Thumbs.First : Thumbs.Second;
     };
 
+    var addDocumentEvents = () => {
+      document.addEventListener('touchmove', move, {
+        passive: false
+      });
+      document.addEventListener('touchend', end);
+      document.addEventListener('touchcancel', end);
+    };
+
+    var removeDocumentEvents = () => {
+      document.removeEventListener('touchmove', move);
+      document.removeEventListener('touchend', end);
+      document.removeEventListener('touchcancel', end);
+    };
+
     var start = (event, type) => {
       if (!maxDistance.value) maxDistance.value = sliderEl.value.offsetWidth;
 
@@ -311,28 +323,36 @@ var __sfc__ = defineComponent({
         thumbsProps[type].active = true;
       }
 
+      activeThumb = type;
+      addDocumentEvents();
       if (isDisabled.value || isReadonly.value) return;
       call(props.onStart);
       isScroll.value = true;
-      thumbsProps[type].startPosition = event.touches[0][isVertical.value ? 'clientY' : 'clientX'];
+      var {
+        clientX,
+        clientY
+      } = event.touches[0];
+      thumbsProps[type].startPosition = isVertical.value ? clientY : clientX;
     };
 
-    var move = (event, type) => {
+    var move = event => {
+      event.preventDefault();
       if (isDisabled.value || isReadonly.value || !isScroll.value) return;
       var {
         startPosition,
         currentOffset
-      } = thumbsProps[type];
+      } = thumbsProps[activeThumb];
       var {
         clientX,
         clientY
       } = event.touches[0];
       var moveDistance = (isVertical.value ? startPosition - clientY : clientX - startPosition) + currentOffset;
       if (moveDistance <= 0) moveDistance = 0;else if (moveDistance >= maxDistance.value) moveDistance = maxDistance.value;
-      setPercent(moveDistance, type);
+      setPercent(moveDistance, activeThumb);
     };
 
-    var end = type => {
+    var end = () => {
+      removeDocumentEvents();
       var {
         range,
         modelValue,
@@ -342,16 +362,16 @@ var __sfc__ = defineComponent({
       } = props;
 
       if (!isDisabled.value) {
-        thumbsProps[type].active = false;
+        thumbsProps[activeThumb].active = false;
       }
 
       if (isDisabled.value || isReadonly.value) return;
       var rangeValue = [];
-      thumbsProps[type].currentOffset = thumbsProps[type].percentValue * unitWidth.value;
-      var curValue = thumbsProps[type].percentValue * toNumber(step) + toNumber(min);
+      thumbsProps[activeThumb].currentOffset = thumbsProps[activeThumb].percentValue * unitWidth.value;
+      var curValue = thumbsProps[activeThumb].percentValue * toNumber(step) + toNumber(min);
 
       if (range && isArray(modelValue)) {
-        rangeValue = type === Thumbs.First ? [curValue, modelValue[1]] : [modelValue[0], curValue];
+        rangeValue = activeThumb === Thumbs.First ? [curValue, modelValue[1]] : [modelValue[0], curValue];
       }
 
       call(onEnd, range ? rangeValue : curValue);
@@ -363,8 +383,9 @@ var __sfc__ = defineComponent({
       if (event.target.closest("." + n('thumb'))) return;
       var offset = getOffset(event);
       var type = getType(offset);
+      activeThumb = type;
       setPercent(offset, type);
-      end(type);
+      end();
     };
 
     var stepValidator = () => {
@@ -458,6 +479,9 @@ var __sfc__ = defineComponent({
       if (!stepValidator() || !valueValidator()) return;
       maxDistance.value = sliderEl.value[isVertical.value ? 'offsetHeight' : 'offsetWidth'];
     });
+    onBeforeUnmount(() => {
+      removeDocumentEvents();
+    });
     return {
       n,
       classes,

package/es/slider/slider.css

@@ -1 +1 @@
-:root { --slider-error-color: var(--color-danger); --slider-track-background: #bdbdbd; --slider-track-fill-background: var(--color-primary); --slider-thumb-block-background: var(--color-primary); --slider-thumb-ripple-background: var(--color-primary); --slider-thumb-label-background: var(--color-primary); --slider-thumb-label-font-size: var(--font-size-sm); --slider-disabled-opacity: var(--opacity-disabled);}.var-slider { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); width: 100%;}.var-slider-block { display: flex; align-items: center; position: relative; flex: 1; user-select: none; height: 36px; margin: 0 6px; transition: filter 0.25s;}.var-slider--disabled { filter: opacity(var(--slider-disabled-opacity)); cursor: not-allowed;}.var-slider-track { width: 100%; align-items: center; position: relative;}.var-slider-track-background { width: 100%; height: 2px; background: var(--slider-track-background); transition: filter, background-color, 0.25s;}.var-slider-track-fill { position: absolute; height: 100%; left: 0; transition: background-color 0.25s; background-color: var(--slider-track-fill-background);}.var-slider-thumb { position: absolute; cursor: pointer;}.var-slider-thumb-block { position: absolute; width: 12px; height: 12px; border-radius: 50%; transform: translate(-50%, -50%); transition: background-color 0.25s; z-index: 1; background-color: var(--slider-thumb-block-background);}.var-slider-thumb-ripple { position: absolute; width: 36px; height: 36px; left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 50%; opacity: 0.3; background: transparent; transition: 0.3s var(--cubic-bezier);}.var-slider-thumb-ripple--active { background: var(--slider-thumb-ripple-background);}.var-slider-thumb-label { height: 24px; width: 24px; background-color: var(--slider-thumb-label-background); display: flex; align-items: center; border: none; justify-content: center; color: #fff; border-radius: 50% 50% 0; padding: 13px; bottom: 60%; user-select: none; position: absolute; left: 45%; transition: 0.3s var(--cubic-bezier); font-size: var(--slider-thumb-label-font-size); overflow: hidden; transform: translateY(0) translateY(0) translateX(-50%) rotate(45deg) scale(0);}.var-slider-thumb-label span { transform: rotate(-45deg);}.var-slider-thumb-label--active { transform: translateY(-20%) translateY(-8px) translateX(-50%) rotate(45deg) scale(1);}.var-slider--error .var-slider__track-background { background-color: var(--slider-error-color) !important; filter: opacity(0.6);}.var-slider--error .var-slider__track-fill { background-color: var(--slider-error-color) !important;}.var-slider--error .var-slider__thumb-block { background-color: var(--slider-error-color) !important;}.var-slider--error .var-slider__thumb-ripple--active { background-color: var(--slider-error-color) !important;}.var-slider--error .var-slider__thumb-label { background-color: var(--slider-error-color) !important;}.var-slider__form[var-slider-cover] { margin: 0;}.var-slider__horizontal { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); width: 100%;}.var-slider__horizontal-block { display: flex; align-items: center; position: relative; flex: 1; user-select: none; height: 36px; margin: 0 6px; transition: filter 0.25s;}.var-slider__horizontal--disabled { filter: opacity(var(--slider-disabled-opacity)); cursor: not-allowed;}.var-slider__horizontal-track { width: 100%; align-items: center; position: relative;}.var-slider__horizontal-track-background { width: 100%; height: 2px; background: var(--slider-track-background); transition: filter, background-color, 0.25s;}.var-slider__horizontal-track-fill { position: absolute; height: 100%; left: 0; transition: background-color 0.25s; background-color: var(--slider-track-fill-background);}.var-slider__horizontal-thumb { position: absolute; cursor: pointer;}.var-slider__horizontal-thumb-block { position: absolute; width: 12px; height: 12px; border-radius: 50%; transform: translate(-50%, -50%); transition: background-color 0.25s; z-index: 1; background-color: var(--slider-thumb-block-background);}.var-slider__horizontal-thumb-ripple { position: absolute; width: 36px; height: 36px; left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 50%; opacity: 0.3; background: transparent; transition: 0.3s var(--cubic-bezier);}.var-slider__horizontal-thumb-ripple--active { background: var(--slider-thumb-ripple-background);}.var-slider__horizontal-thumb-label { height: 24px; width: 24px; background-color: var(--slider-thumb-label-background); display: flex; align-items: center; border: none; justify-content: center; color: #fff; border-radius: 50% 50% 0; padding: 13px; bottom: 60%; user-select: none; position: absolute; left: 45%; transition: 0.3s var(--cubic-bezier); font-size: var(--slider-thumb-label-font-size); overflow: hidden; transform: translateY(0) translateY(0) translateX(-50%) rotate(45deg) scale(0);}.var-slider__horizontal-thumb-label span { transform: rotate(-45deg);}.var-slider__horizontal-thumb-label--active { transform: translateY(-20%) translateY(-8px) translateX(-50%) rotate(45deg) scale(1);}.var-slider__horizontal--error .var-slider__track-background { background-color: var(--slider-error-color) !important; filter: opacity(0.6);}.var-slider__horizontal--error .var-slider__track-fill { background-color: var(--slider-error-color) !important;}.var-slider__horizontal--error .var-slider__thumb-block { background-color: var(--slider-error-color) !important;}.var-slider__horizontal--error .var-slider__thumb-ripple--active { background-color: var(--slider-error-color) !important;}.var-slider__horizontal--error .var-slider__thumb-label { background-color: var(--slider-error-color) !important;}.var-slider__horizontal__form[var-slider-cover] { margin: 0;}.var-slider__vertical { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); width: 100%; display: flex; justify-content: center; align-items: center; flex-direction: column; height: 100%;}.var-slider__vertical-block { display: flex; align-items: center; position: relative; flex: 1; user-select: none; height: 36px; margin: 0 6px; transition: filter 0.25s;}.var-slider__vertical--disabled { filter: opacity(var(--slider-disabled-opacity)); cursor: not-allowed;}.var-slider__vertical-track { width: 100%; align-items: center; position: relative;}.var-slider__vertical-track-background { width: 100%; height: 2px; background: var(--slider-track-background); transition: filter, background-color, 0.25s;}.var-slider__vertical-track-fill { position: absolute; height: 100%; left: 0; transition: background-color 0.25s; background-color: var(--slider-track-fill-background);}.var-slider__vertical-thumb { position: absolute; cursor: pointer;}.var-slider__vertical-thumb-block { position: absolute; width: 12px; height: 12px; border-radius: 50%; transform: translate(-50%, -50%); transition: background-color 0.25s; z-index: 1; background-color: var(--slider-thumb-block-background);}.var-slider__vertical-thumb-ripple { position: absolute; width: 36px; height: 36px; left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 50%; opacity: 0.3; background: transparent; transition: 0.3s var(--cubic-bezier);}.var-slider__vertical-thumb-ripple--active { background: var(--slider-thumb-ripple-background);}.var-slider__vertical-thumb-label { height: 24px; width: 24px; background-color: var(--slider-thumb-label-background); display: flex; align-items: center; border: none; justify-content: center; color: #fff; border-radius: 50% 50% 0; padding: 13px; bottom: 60%; user-select: none; position: absolute; left: 45%; transition: 0.3s var(--cubic-bezier); font-size: var(--slider-thumb-label-font-size); overflow: hidden; transform: translateY(0) translateY(0) translateX(-50%) rotate(45deg) scale(0);}.var-slider__vertical-thumb-label span { transform: rotate(-45deg);}.var-slider__vertical-thumb-label--active { transform: translateY(-20%) translateY(-8px) translateX(-50%) rotate(45deg) scale(1);}.var-slider__vertical--error .var-slider__track-background { background-color: var(--slider-error-color) !important; filter: opacity(0.6);}.var-slider__vertical--error .var-slider__track-fill { background-color: var(--slider-error-color) !important;}.var-slider__vertical--error .var-slider__thumb-block { background-color: var(--slider-error-color) !important;}.var-slider__vertical--error .var-slider__thumb-ripple--active { background-color: var(--slider-error-color) !important;}.var-slider__vertical--error .var-slider__thumb-label { background-color: var(--slider-error-color) !important;}.var-slider__vertical__form[var-slider-cover] { margin: 0;}.var-slider__vertical-block { width: 36px; display: flex; align-items: center; justify-content: center; position: relative; user-select: none; margin: 0 6px; transition: filter 0.25s;}.var-slider__vertical-track { height: 100%; width: fit-content;}.var-slider__vertical-track-background { width: 2px; height: 100%; background: var(--slider-track-background); transition: filter, background-color, 0.25s;}.var-slider__vertical-track-fill { width: 100%; top: none; bottom: 0;}.var-slider__vertical-thumb-label { transform: translateX(0) translateX(0) translateY(50%) rotate(-225deg) scale(0);}.var-slider__vertical-thumb-label span { transform: rotate(-135deg);}.var-slider__vertical-thumb-label--active { transform: translateX(20%) translateX(8px) translateY(50%) rotate(-225deg) scale(1);}
+:root { --slider-error-color: var(--color-danger); --slider-track-background: #bdbdbd; --slider-track-fill-background: var(--color-primary); --slider-thumb-block-background: var(--color-primary); --slider-thumb-ripple-background: var(--color-primary); --slider-thumb-label-background: var(--color-primary); --slider-thumb-label-font-size: var(--font-size-sm); --slider-disabled-opacity: var(--opacity-disabled);}.var-slider { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); width: 100%;}.var-slider-block { display: flex; align-items: center; position: relative; flex: 1; user-select: none; height: 36px; margin: 0 6px; transition: filter 0.25s;}.var-slider--disabled { filter: opacity(var(--slider-disabled-opacity)); cursor: not-allowed;}.var-slider-track { width: 100%; align-items: center; position: relative;}.var-slider-track-background { width: 100%; height: 2px; background: var(--slider-track-background); transition: filter, background-color, 0.25s;}.var-slider-track-fill { position: absolute; height: 100%; left: 0; transition: background-color 0.25s; background-color: var(--slider-track-fill-background);}.var-slider-thumb { position: absolute; cursor: pointer;}.var-slider-thumb-block { position: absolute; width: 12px; height: 12px; border-radius: 50%; transform: translate(-50%, -50%); transition: background-color 0.25s; z-index: 1; background-color: var(--slider-thumb-block-background);}.var-slider-thumb-ripple { position: absolute; width: 36px; height: 36px; left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 50%; opacity: 0.3; background: transparent; transition: 0.3s var(--cubic-bezier);}.var-slider-thumb-ripple--active { background: var(--slider-thumb-ripple-background);}.var-slider-thumb-label { height: 24px; width: 24px; background-color: var(--slider-thumb-label-background); display: flex; align-items: center; border: none; justify-content: center; color: #fff; border-radius: 50% 50% 0; padding: 13px; bottom: 60%; user-select: none; position: absolute; left: 45%; transition: 0.3s var(--cubic-bezier); font-size: var(--slider-thumb-label-font-size); overflow: hidden; transform: translateY(0) translateY(0) translateX(-50%) rotate(45deg) scale(0);}.var-slider-thumb-label span { transform: rotate(-45deg);}.var-slider-thumb-label--active { transform: translateY(-20%) translateY(-8px) translateX(-50%) rotate(45deg) scale(1);}.var-slider--error .var-slider__track-background { background-color: var(--slider-error-color) !important; filter: opacity(0.6);}.var-slider--error .var-slider__track-fill { background-color: var(--slider-error-color) !important;}.var-slider--error .var-slider__thumb-block { background-color: var(--slider-error-color) !important;}.var-slider--error .var-slider__thumb-ripple--active { background-color: var(--slider-error-color) !important;}.var-slider--error .var-slider__thumb-label { background-color: var(--slider-error-color) !important;}.var-slider__form[var-slider-cover] { margin: 0;}.var-slider__horizontal { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); width: 100%;}.var-slider__horizontal-block { display: flex; align-items: center; position: relative; flex: 1; user-select: none; height: 36px; margin: 0 6px; transition: filter 0.25s;}.var-slider__horizontal--disabled { filter: opacity(var(--slider-disabled-opacity)); cursor: not-allowed;}.var-slider__horizontal-track { width: 100%; align-items: center; position: relative;}.var-slider__horizontal-track-background { width: 100%; height: 2px; background: var(--slider-track-background); transition: filter, background-color, 0.25s;}.var-slider__horizontal-track-fill { position: absolute; height: 100%; left: 0; transition: background-color 0.25s; background-color: var(--slider-track-fill-background);}.var-slider__horizontal-thumb { position: absolute; cursor: pointer;}.var-slider__horizontal-thumb-block { position: absolute; width: 12px; height: 12px; border-radius: 50%; transform: translate(-50%, -50%); transition: background-color 0.25s; z-index: 1; background-color: var(--slider-thumb-block-background);}.var-slider__horizontal-thumb-ripple { position: absolute; width: 36px; height: 36px; left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 50%; opacity: 0.3; background: transparent; transition: 0.3s var(--cubic-bezier);}.var-slider__horizontal-thumb-ripple--active { background: var(--slider-thumb-ripple-background);}.var-slider__horizontal-thumb-label { height: 24px; width: 24px; background-color: var(--slider-thumb-label-background); display: flex; align-items: center; border: none; justify-content: center; color: #fff; border-radius: 50% 50% 0; padding: 13px; bottom: 60%; user-select: none; position: absolute; left: 45%; transition: 0.3s var(--cubic-bezier); font-size: var(--slider-thumb-label-font-size); overflow: hidden; transform: translateY(0) translateY(0) translateX(-50%) rotate(45deg) scale(0);}.var-slider__horizontal-thumb-label span { transform: rotate(-45deg);}.var-slider__horizontal-thumb-label--active { transform: translateY(-20%) translateY(-8px) translateX(-50%) rotate(45deg) scale(1);}.var-slider__horizontal--error .var-slider__track-background { background-color: var(--slider-error-color) !important; filter: opacity(0.6);}.var-slider__horizontal--error .var-slider__track-fill { background-color: var(--slider-error-color) !important;}.var-slider__horizontal--error .var-slider__thumb-block { background-color: var(--slider-error-color) !important;}.var-slider__horizontal--error .var-slider__thumb-ripple--active { background-color: var(--slider-error-color) !important;}.var-slider__horizontal--error .var-slider__thumb-label { background-color: var(--slider-error-color) !important;}.var-slider__horizontal__form[var-slider-cover] { margin: 0;}.var-slider__vertical { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); width: 100%; display: flex; justify-content: center; align-items: center; flex-direction: column; height: 100%;}.var-slider__vertical-block { display: flex; align-items: center; position: relative; flex: 1; user-select: none; height: 36px; margin: 0 6px; transition: filter 0.25s;}.var-slider__vertical--disabled { filter: opacity(var(--slider-disabled-opacity)); cursor: not-allowed;}.var-slider__vertical-track { width: 100%; align-items: center; position: relative;}.var-slider__vertical-track-background { width: 100%; height: 2px; background: var(--slider-track-background); transition: filter, background-color, 0.25s;}.var-slider__vertical-track-fill { position: absolute; height: 100%; left: 0; transition: background-color 0.25s; background-color: var(--slider-track-fill-background);}.var-slider__vertical-thumb { position: absolute; cursor: pointer;}.var-slider__vertical-thumb-block { position: absolute; width: 12px; height: 12px; border-radius: 50%; transform: translate(-50%, -50%); transition: background-color 0.25s; z-index: 1; background-color: var(--slider-thumb-block-background);}.var-slider__vertical-thumb-ripple { position: absolute; width: 36px; height: 36px; left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 50%; opacity: 0.3; background: transparent; transition: 0.3s var(--cubic-bezier);}.var-slider__vertical-thumb-ripple--active { background: var(--slider-thumb-ripple-background);}.var-slider__vertical-thumb-label { height: 24px; width: 24px; background-color: var(--slider-thumb-label-background); display: flex; align-items: center; border: none; justify-content: center; color: #fff; border-radius: 50% 50% 0; padding: 13px; bottom: 60%; user-select: none; position: absolute; left: 45%; transition: 0.3s var(--cubic-bezier); font-size: var(--slider-thumb-label-font-size); overflow: hidden; transform: translateY(0) translateY(0) translateX(-50%) rotate(45deg) scale(0);}.var-slider__vertical-thumb-label span { transform: rotate(-45deg);}.var-slider__vertical-thumb-label--active { transform: translateY(-20%) translateY(-8px) translateX(-50%) rotate(45deg) scale(1);}.var-slider__vertical--error .var-slider__track-background { background-color: var(--slider-error-color) !important; filter: opacity(0.6);}.var-slider__vertical--error .var-slider__track-fill { background-color: var(--slider-error-color) !important;}.var-slider__vertical--error .var-slider__thumb-block { background-color: var(--slider-error-color) !important;}.var-slider__vertical--error .var-slider__thumb-ripple--active { background-color: var(--slider-error-color) !important;}.var-slider__vertical--error .var-slider__thumb-label { background-color: var(--slider-error-color) !important;}.var-slider__vertical__form[var-slider-cover] { margin: 0;}.var-slider__vertical-block { width: 36px; display: flex; align-items: center; justify-content: center; position: relative; user-select: none; margin: 6px 0; transition: filter 0.25s;}.var-slider__vertical-track { height: 100%; width: fit-content;}.var-slider__vertical-track-background { width: 2px; height: 100%; background: var(--slider-track-background); transition: filter, background-color, 0.25s;}.var-slider__vertical-track-fill { width: 100%; top: none; bottom: 0;}.var-slider__vertical-thumb-label { transform: translateX(0) translateX(0) translateY(50%) rotate(-225deg) scale(0);}.var-slider__vertical-thumb-label span { transform: rotate(-135deg);}.var-slider__vertical-thumb-label--active { transform: translateX(20%) translateX(8px) translateY(50%) rotate(-225deg) scale(1);}