@varlet/ui 2.10.0 → 2.10.1-alpha.1682608027166

package/es/date-picker/src/day-picker-panel.mjs

@@ -69,7 +69,7 @@ function __render__(_ctx, _cache) {
         ripple: false,
         elevation: _ctx.componentProps.buttonElevation
       }, _extends({}, _ctx.buttonProps(day)), {
-        onClick: _cache[0] || (_cache[0] = event => chooseDay(day, event))
+        onClick: event => _ctx.chooseDay(day, event)
       }), {
         default: _withCtx(() => [_createTextVNode(_toDisplayString(_ctx.filterDay(day)), 1
         /* TEXT */
@@ -79,7 +79,7 @@ function __render__(_ctx, _cache) {
 
       }, 1040
       /* FULL_PROPS, DYNAMIC_SLOTS */
-      , ["elevation"])]);
+      , ["elevation", "onClick"])]);
     }), 128
     /* KEYED_FRAGMENT */
     ))], 2

package/es/date-picker/src/month-picker-panel.mjs

@@ -53,7 +53,7 @@ function __render__(_ctx, _cache) {
         ripple: false,
         elevation: _ctx.componentProps.buttonElevation
       }, _extends({}, _ctx.buttonProps(month.index)), {
-        onClick: _cache[0] || (_cache[0] = event => chooseMonth(month, event))
+        onClick: event => _ctx.chooseMonth(month, event)
       }), {
         default: _withCtx(() => [_createTextVNode(_toDisplayString(_ctx.getMonthAbbr(month.index)), 1
         /* TEXT */
@@ -63,7 +63,7 @@ function __render__(_ctx, _cache) {
 
       }, 1040
       /* FULL_PROPS, DYNAMIC_SLOTS */
-      , ["elevation"])]);
+      , ["elevation", "onClick"])]);
     }), 128
     /* KEYED_FRAGMENT */
     ))]))]),

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.0'
+const version = '2.10.1-alpha.1682608027166'
 
 function install(app) {
   ActionSheet.install && app.use(ActionSheet)

package/es/index.d.ts

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

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.0'
+const version = '2.10.1-alpha.1682608027166'
 
 function install(app) {
   ActionSheet.install && app.use(ActionSheet)

package/es/slider/Slider.mjs

@@ -27,25 +27,26 @@ function __render__(_ctx, _cache) {
   var _directive_hover = _resolveDirective("hover");
 
   return _openBlock(), _createElementBlock("div", {
-    class: _normalizeClass(_ctx.n())
+    class: _normalizeClass(_ctx.n(_ctx.direction))
   }, [_createElementVNode("div", {
-    class: _normalizeClass(_ctx.classes(_ctx.n('block'), [_ctx.isDisabled, _ctx.n('--disabled')], [_ctx.errorMessage, _ctx.n('--error')])),
+    class: _normalizeClass(_ctx.classes(_ctx.n(_ctx.direction + "-block"), [_ctx.isDisabled, _ctx.n('--disabled')], [_ctx.errorMessage, _ctx.n('--error')])),
     ref: "sliderEl",
     onClick: _cache[0] || (_cache[0] = function () {
       return _ctx.click && _ctx.click(...arguments);
     })
   }, [_createElementVNode("div", {
-    class: _normalizeClass(_ctx.n('track'))
+    class: _normalizeClass(_ctx.n(_ctx.direction + "-track"))
   }, [_createElementVNode("div", {
-    class: _normalizeClass(_ctx.n('track-background')),
+    class: _normalizeClass(_ctx.n(_ctx.direction + "-track-background")),
     style: _normalizeStyle({
       background: _ctx.trackColor,
-      height: _ctx.multiplySizeUnit(_ctx.trackHeight)
+      height: _ctx.isVertical ? '100%' : _ctx.multiplySizeUnit(_ctx.trackHeight),
+      width: _ctx.isVertical ? _ctx.multiplySizeUnit(_ctx.trackHeight) : '100%'
     })
   }, null, 6
   /* CLASS, STYLE */
   ), _createElementVNode("div", {
-    class: _normalizeClass(_ctx.n('track-fill')),
+    class: _normalizeClass(_ctx.n(_ctx.direction + "-track-fill")),
     style: _normalizeStyle(_ctx.getFillStyle)
   }, null, 6
   /* CLASS, STYLE */
@@ -53,12 +54,9 @@ function __render__(_ctx, _cache) {
   /* CLASS */
   ), (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(_ctx.thumbList, item => {
     return _openBlock(), _createElementBlock("div", {
-      class: _normalizeClass(_ctx.n('thumb')),
+      class: _normalizeClass(_ctx.n(_ctx.direction + "-thumb")),
       key: item.enumValue,
-      style: _normalizeStyle({
-        left: item.value + "%",
-        zIndex: _ctx.thumbsProps[item.enumValue].active ? 1 : undefined
-      }),
+      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),
@@ -66,14 +64,14 @@ function __render__(_ctx, _cache) {
     }, [_renderSlot(_ctx.$slots, "button", {
       currentValue: item.text
     }, () => [_withDirectives(_createElementVNode("div", {
-      class: _normalizeClass(_ctx.n('thumb-block')),
+      class: _normalizeClass(_ctx.n(_ctx.direction + "-thumb-block")),
       style: _normalizeStyle({
         background: _ctx.thumbColor
       })
     }, null, 6
     /* CLASS, STYLE */
     ), [[_directive_hover, value => _ctx.hover(value, item), "desktop"]]), _createElementVNode("div", {
-      class: _normalizeClass(_ctx.classes(_ctx.n('thumb-ripple'), [_ctx.thumbsProps[item.enumValue].active, _ctx.n('thumb-ripple--active')])),
+      class: _normalizeClass(_ctx.classes(_ctx.n(_ctx.direction + "-thumb-ripple"), [_ctx.thumbsProps[item.enumValue].active, _ctx.n(_ctx.direction + "-thumb-ripple--active")])),
       style: _normalizeStyle({
         background: _ctx.thumbsProps[item.enumValue].active ? _ctx.thumbColor : undefined
       })
@@ -84,7 +82,7 @@ function __render__(_ctx, _cache) {
     , ["hovering"])], 6
     /* CLASS, STYLE */
     ), _createElementVNode("div", {
-      class: _normalizeClass(_ctx.classes(_ctx.n('thumb-label'), [_ctx.showLabel(item.enumValue), _ctx.n('thumb-label--active')])),
+      class: _normalizeClass(_ctx.classes(_ctx.n(_ctx.direction + "-thumb-label"), [_ctx.showLabel(item.enumValue), _ctx.n(_ctx.direction + "-thumb-label--active")])),
       style: _normalizeStyle({
         background: _ctx.labelColor,
         color: _ctx.labelTextColor,
@@ -148,7 +146,7 @@ var __sfc__ = defineComponent({
 
     var getThumbProps = () => ({
       startPosition: 0,
-      currentLeft: 0,
+      currentOffset: 0,
       active: false,
       percentValue: 0
     });
@@ -156,14 +154,14 @@ var __sfc__ = defineComponent({
     var validateWithTrigger = () => nextTick(() => vt(['onChange'], 'onChange', props.rules, props.modelValue));
 
     var sliderEl = ref(null);
-    var maxWidth = ref(0);
+    var maxDistance = ref(0);
     var isScroll = ref(false);
     var thumbsProps = reactive({
       [Thumbs.First]: getThumbProps(),
       [Thumbs.Second]: getThumbProps()
     });
     var scope = computed(() => toNumber(props.max) - toNumber(props.min));
-    var unitWidth = computed(() => maxWidth.value / scope.value * toNumber(props.step));
+    var unitWidth = computed(() => maxDistance.value / scope.value * toNumber(props.step));
     var thumbList = computed(() => {
       var {
         modelValue,
@@ -203,16 +201,42 @@ var __sfc__ = defineComponent({
         range,
         modelValue
       } = props;
-      var left = range && isArray(modelValue) ? getValue(Math.min(modelValue[0], modelValue[1])) : 0;
-      var width = range && isArray(modelValue) ? getValue(Math.max(modelValue[0], modelValue[1])) - left : getValue(modelValue);
-      return {
-        width: width + "%",
-        left: left + "%",
+      var gap = range && isArray(modelValue) ? getValue(Math.min(modelValue[0], modelValue[1])) : 0;
+      var fillLength = range && isArray(modelValue) ? getValue(Math.max(modelValue[0], modelValue[1])) - gap : getValue(modelValue);
+      return isVertical.value ? {
+        left: '0px',
+        height: fillLength + "%",
+        bottom: gap + "%",
+        background: activeColor
+      } : {
+        top: '0px',
+        width: fillLength + "%",
+        left: gap + "%",
         background: activeColor
       };
     });
     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 getOffset = e => {
+      var currentTarget = e.currentTarget;
+      if (!currentTarget) return 0;
+
+      if (!isVertical.value) {
+        return e.clientX - getLeft(currentTarget);
+      }
+
+      return maxDistance.value - (e.clientY - currentTarget.getBoundingClientRect().top);
+    };
+
+    var thumbStyle = thumb => {
+      var key = isVertical.value ? 'bottom' : 'left';
+      return {
+        [key]: thumb.value + "%",
+        zIndex: thumbsProps[thumb.enumValue].active ? 1 : undefined
+      };
+    };
 
     var showLabel = type => {
       if (props.labelVisible === 'always') return true;
@@ -281,7 +305,7 @@ var __sfc__ = defineComponent({
     };
 
     var start = (event, type) => {
-      if (!maxWidth.value) maxWidth.value = sliderEl.value.offsetWidth;
+      if (!maxDistance.value) maxDistance.value = sliderEl.value.offsetWidth;
 
       if (!isDisabled.value) {
         thumbsProps[type].active = true;
@@ -290,13 +314,21 @@ var __sfc__ = defineComponent({
       if (isDisabled.value || isReadonly.value) return;
       call(props.onStart);
       isScroll.value = true;
-      thumbsProps[type].startPosition = event.touches[0].clientX;
+      thumbsProps[type].startPosition = event.touches[0][isVertical.value ? 'clientY' : 'clientX'];
     };
 
     var move = (event, type) => {
       if (isDisabled.value || isReadonly.value || !isScroll.value) return;
-      var moveDistance = event.touches[0].clientX - thumbsProps[type].startPosition + thumbsProps[type].currentLeft;
-      if (moveDistance <= 0) moveDistance = 0;else if (moveDistance >= maxWidth.value) moveDistance = maxWidth.value;
+      var {
+        startPosition,
+        currentOffset
+      } = thumbsProps[type];
+      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);
     };
 
@@ -315,7 +347,7 @@ var __sfc__ = defineComponent({
 
       if (isDisabled.value || isReadonly.value) return;
       var rangeValue = [];
-      thumbsProps[type].currentLeft = thumbsProps[type].percentValue * unitWidth.value;
+      thumbsProps[type].currentOffset = thumbsProps[type].percentValue * unitWidth.value;
       var curValue = thumbsProps[type].percentValue * toNumber(step) + toNumber(min);
 
       if (range && isArray(modelValue)) {
@@ -329,7 +361,7 @@ var __sfc__ = defineComponent({
     var click = event => {
       if (isDisabled.value || isReadonly.value) return;
       if (event.target.closest("." + n('thumb'))) return;
-      var offset = event.clientX - getLeft(event.currentTarget);
+      var offset = getOffset(event);
       var type = getType(offset);
       setPercent(offset, type);
       end(type);
@@ -396,11 +428,11 @@ var __sfc__ = defineComponent({
 
       if (props.range && isArray(modelValue)) {
         thumbsProps[Thumbs.First].percentValue = getPercent(modelValue[0]);
-        thumbsProps[Thumbs.First].currentLeft = thumbsProps[Thumbs.First].percentValue * unitWidth.value;
+        thumbsProps[Thumbs.First].currentOffset = thumbsProps[Thumbs.First].percentValue * unitWidth.value;
         thumbsProps[Thumbs.Second].percentValue = getPercent(modelValue[1]);
-        thumbsProps[Thumbs.Second].currentLeft = thumbsProps[Thumbs.Second].percentValue * unitWidth.value;
+        thumbsProps[Thumbs.Second].currentOffset = thumbsProps[Thumbs.Second].percentValue * unitWidth.value;
       } else if (isNumber(modelValue)) {
-        thumbsProps[Thumbs.First].currentLeft = getPercent(modelValue) * unitWidth.value;
+        thumbsProps[Thumbs.First].currentOffset = getPercent(modelValue) * unitWidth.value;
       }
     };
 
@@ -421,10 +453,10 @@ var __sfc__ = defineComponent({
       if (!stepValidator() || !valueValidator() || isScroll.value) return;
       setProps(modelValue, toNumber(step));
     });
-    watch(maxWidth, () => setProps());
+    watch(maxDistance, () => setProps());
     useMounted(() => {
       if (!stepValidator() || !valueValidator()) return;
-      maxWidth.value = sliderEl.value.offsetWidth;
+      maxDistance.value = sliderEl.value[isVertical.value ? 'offsetHeight' : 'offsetWidth'];
     });
     return {
       n,
@@ -433,6 +465,8 @@ var __sfc__ = defineComponent({
       sliderEl,
       getFillStyle,
       isDisabled,
+      isVertical,
+      thumbStyle,
       errorMessage,
       thumbsProps,
       thumbList,

package/es/slider/props.mjs

@@ -70,6 +70,10 @@ export var props = {
     type: Boolean,
     default: false
   },
+  direction: {
+    type: String,
+    default: 'horizontal'
+  },
   rules: {
     type: Array
   },

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; top: 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; 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;}
+: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);}

package/es/snackbar/style/index.mjs

@@ -1,8 +1,8 @@
 import '../../styles/common.css'
-import '../SnackbarSfc.css'
 import '../../styles/elevation.css'
 import '../../loading/loading.css'
 import '../../button/button.css'
 import '../../icon/icon.css'
 import '../snackbar.css'
 import '../coreSfc.css'
+import '../SnackbarSfc.css'