@varlet/ui 2.22.3 → 3.0.0-alpha.1707916363117

package/es/locale/index.mjs

@@ -20,65 +20,72 @@ import zhTW from "./zh-TW.mjs";
 import zhHK from "./zh-HK.mjs";
 import faIR from "./fa-IR.mjs";
 import { ref } from "vue";
+import { hasOwn } from "@varlet/shared";
 function useLocale() {
-  const packs2 = {};
-  const pack2 = ref({});
-  const add2 = (lang, pack3) => {
-    pack3.lang = lang;
-    packs2[lang] = pack3;
+  const messages2 = {};
+  const currentMessage2 = ref({});
+  const add2 = (lang, message) => {
+    message.lang = lang;
+    messages2[lang] = message;
   };
   const use2 = (lang) => {
-    if (!packs2[lang]) {
-      console.warn(`The ${lang} does not exist. You can mount a language package using the add method`);
+    if (!messages2[lang]) {
+      console.warn(`The ${lang} does not exist. You can mount a language message using the add method`);
       return {};
     }
-    pack2.value = packs2[lang];
+    currentMessage2.value = messages2[lang];
   };
-  const merge2 = (lang, pack3) => {
-    if (!packs2[lang]) {
-      console.warn(`The ${lang} does not exist. You can mount a language package using the add method`);
+  const merge2 = (lang, message) => {
+    if (!messages2[lang]) {
+      console.warn(`The ${lang} does not exist. You can mount a language message using the add method`);
       return;
     }
-    packs2[lang] = __spreadValues(__spreadValues({}, packs2[lang]), pack3);
+    messages2[lang] = __spreadValues(__spreadValues({}, messages2[lang]), message);
     use2(lang);
   };
+  const t2 = (id) => {
+    if (hasOwn(currentMessage2.value, id)) {
+      return currentMessage2.value[id];
+    }
+    return id;
+  };
   return {
-    packs: packs2,
-    pack: pack2,
+    messages: messages2,
+    currentMessage: currentMessage2,
     add: add2,
     use: use2,
-    merge: merge2
+    merge: merge2,
+    t: t2
   };
 }
-const { packs, pack, add, use, merge } = useLocale();
+const { messages, currentMessage, add, use, merge, t } = useLocale();
 add("zh-CN", zhCN);
 use("zh-CN");
-const _LocaleComponent = { zhCN, enUS, zhTW, zhHK, faIR, packs, pack, add, use, merge, useLocale };
+const _LocaleComponent = { zhCN, enUS, messages, currentMessage, add, use, merge, t, useLocale };
 var stdin_default = {
   zhCN,
   enUS,
   zhTW,
   zhHK,
   faIR,
-  packs,
-  pack,
+  messages,
+  currentMessage,
   add,
   use,
   merge,
+  t,
   useLocale
 };
 export {
   _LocaleComponent,
   add,
+  currentMessage,
   stdin_default as default,
   enUS,
-  faIR,
   merge,
-  pack,
-  packs,
+  messages,
+  t,
   use,
   useLocale,
-  zhCN,
-  zhHK,
-  zhTW
+  zhCN
 };

package/es/locale/zh-CN.d.ts

@@ -1,5 +1,5 @@
-import type { Pack } from '../../types'
+import type { Message } from '../../types'
 
-declare const zhCN: Pack
+declare const zhCN: Message
 
 export default zhCN

package/es/locale/zh-HK.d.ts

@@ -1,5 +1,5 @@
-import type { Pack } from '../../types'
+import type { Message } from '../../types'
 
-declare const zhHK: Pack
+declare const zhHK: Message
 
 export default zhHK

package/es/locale/zh-HK.mjs

@@ -1,5 +1,5 @@
-import pack from "./zh-TW.mjs";
-var stdin_default = pack;
+import zhHK from "./zh-TW.mjs";
+var stdin_default = zhHK;
 export {
   stdin_default as default
 };

package/es/locale/zh-TW.d.ts

@@ -1,5 +1,5 @@
-import type { Pack } from '../../types'
+import type { Message } from '../../types'
 
-declare const zhTW: Pack
+declare const zhTW: Message
 
 export default zhTW

package/es/pagination/Pagination.mjs

@@ -6,7 +6,7 @@ import VarInput from "../input/index.mjs";
 import { defineComponent, ref, computed, watch } from "vue";
 import { props } from "./props.mjs";
 import { isNumber, toNumber, call } from "@varlet/shared";
-import { pack } from "../locale/index.mjs";
+import { t } from "../locale/index.mjs";
 import { createNamespace, formatElevation } from "../utils/components.mjs";
 const { name, n, classes } = createNamespace("pagination");
 import { renderSlot as _renderSlot, resolveComponent as _resolveComponent, createVNode as _createVNode, normalizeClass as _normalizeClass, resolveDirective as _resolveDirective, openBlock as _openBlock, createElementBlock as _createElementBlock, withDirectives as _withDirectives, withKeys as _withKeys, toDisplayString as _toDisplayString, createElementVNode as _createElementVNode, createTextVNode as _createTextVNode, createCommentVNode as _createCommentVNode, renderList as _renderList, Fragment as _Fragment, withModifiers as _withModifiers, withCtx as _withCtx, createBlock as _createBlock, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
@@ -161,7 +161,7 @@ function __render__(_ctx, _cache) {
                   }, {
                     default: _withCtx(() => [
                       _createTextVNode(
-                        _toDisplayString(option) + _toDisplayString(_ctx.pack.paginationItem) + " / " + _toDisplayString(_ctx.pack.paginationPage),
+                        _toDisplayString(option) + _toDisplayString(_ctx.t("paginationItem")) + " / " + _toDisplayString(_ctx.t("paginationPage")),
                         1
                         /* TEXT */
                       )
@@ -187,7 +187,7 @@ function __render__(_ctx, _cache) {
                   _createElementVNode(
                     "span",
                     null,
-                    _toDisplayString(_ctx.size) + _toDisplayString(_ctx.pack.paginationItem) + " / " + _toDisplayString(_ctx.pack.paginationPage),
+                    _toDisplayString(_ctx.size) + _toDisplayString(_ctx.t("paginationItem")) + " / " + _toDisplayString(_ctx.t("paginationPage")),
                     1
                     /* TEXT */
                   ),
@@ -216,7 +216,7 @@ function __render__(_ctx, _cache) {
         },
         [
           _createTextVNode(
-            _toDisplayString(_ctx.pack.paginationJump) + " ",
+            _toDisplayString(_ctx.t("paginationJump")) + " ",
             1
             /* TEXT */
           ),
@@ -399,7 +399,7 @@ const __sfc__ = defineComponent({
       }
     }
     return {
-      pack,
+      t,
       current,
       menuVisible,
       size,

package/es/pagination/pagination.css

@@ -1 +1 @@
-:root { --pagination-text-color: #555; --pagination-font-size: var(--font-size-md); --pagination-active-color: #fff; --pagination-active-bg-color: var(--color-primary); --pagination-hover-bg-color: rgba(85, 85, 85, 0.15); --pagination-total-margin: 0 12px; --pagination-total-line-height: 24px; --pagination-item-width: 32px; --pagination-item-height: 32px; --pagination-item-margin: 0 6px; --pagination-item-background: #fff; --pagination-item-border-radius: 4px; --pagination-item-simple-border-radius: 50%; --pagination-list-bg-color: #fff; --pagination-list-active-bg-color: #edf5ff; --pagination-list-active-color: var(--color-primary); --pagination-input-width: 32px; --pagination-disabled-color: var(--color-text-disabled); --pagination-bg-disabled-color: var(--color-disabled); --pagination-size-line-height: 24px;}.pagination-flex-nowrap { display: flex; white-space: nowrap; align-items: center;}.var-pagination { display: flex; align-items: center; list-style: none; margin: 0; font-size: var(--pagination-font-size); padding: 0; color: var(--pagination-text-color);}.var-pagination__item { display: inline-flex; min-width: var(--pagination-item-width); align-items: center; justify-content: center; margin: var(--pagination-item-margin); height: var(--pagination-item-height); cursor: pointer; border-radius: var(--pagination-item-border-radius); outline: none; transition: all 0.25s; user-select: none; background-color: var(--pagination-item-background);}.var-pagination__item:hover { background-color: var(--pagination-hover-bg-color);}.var-pagination__item--active { color: var(--pagination-active-color); background-color: var(--pagination-active-bg-color) !important;}.var-pagination__item--hide { display: none;}.var-pagination__item--simple { background: transparent; border-radius: var(--pagination-item-simple-border-radius);}.var-pagination__item--disabled { cursor: not-allowed; color: var(--pagination-disabled-color); background-color: unset;}.var-pagination__item--disabled:hover { background-color: unset;}.var-pagination__item--disabled--hover:hover { background-color: inherit;}.var-pagination__item--disabled--active { background-color: var(--pagination-bg-disabled-color);}.var-pagination__item--disabled--active:hover { background-color: var(--pagination-bg-disabled-color);}.var-pagination__prev { margin-left: 0;}.var-pagination__total { display: flex; white-space: nowrap; align-items: center; line-height: var(--pagination-total-line-height); margin: var(--pagination-total-margin);}.var-pagination__size { display: flex; white-space: nowrap; align-items: center; line-height: var(--pagination-size-line-height); margin: var(--pagination-item-margin);}.var-pagination__size--open { display: flex; align-items: center; cursor: pointer;}.var-pagination__size--open--disabled { cursor: inherit;}.var-pagination__list { background-color: var(--pagination-list-bg-color); cursor: pointer; transition: all 0.25s;}.var-pagination__list:hover { color: var(--pagination-list-active-color); background-color: var(--pagination-list-active-bg-color);}.var-pagination__list--active { background-color: var(--pagination-list-active-bg-color) !important; color: var(--pagination-list-active-color);}.var-pagination__quickly,.var-pagination__simple { display: flex; white-space: nowrap; align-items: center;}.var-pagination__quickly [var-pagination-cover],.var-pagination__simple [var-pagination-cover] { width: var(--pagination-input-width);}.var-pagination__quickly [var-pagination-cover] .var-field-decorator__middle,.var-pagination__simple [var-pagination-cover] .var-field-decorator__middle { padding: 0;}.var-pagination__quickly [var-pagination-cover] .var-input__input,.var-pagination__simple [var-pagination-cover] .var-input__input { height: auto; text-align: center;}.var-pagination__quickly-line,.var-pagination__simple-line { height: 1px; background: transparent;}.var-pagination__quickly { margin: var(--pagination-item-margin);}.var-pagination__quickly [var-pagination-cover] { margin-left: 6px;}.var-pagination__size--open-icon[var-pagination-cover] { font-size: inherit;}
+:root { --pagination-text-color: #555; --pagination-font-size: var(--font-size-md); --pagination-active-color: var(--color-on-primary); --pagination-active-bg-color: var(--color-primary); --pagination-hover-bg-color: rgba(85, 85, 85, 0.15); --pagination-total-margin: 0 12px; --pagination-total-line-height: 24px; --pagination-item-width: 32px; --pagination-item-height: 32px; --pagination-item-margin: 0 6px; --pagination-item-background: #fff; --pagination-item-border-radius: 4px; --pagination-item-simple-border-radius: 50%; --pagination-list-bg-color: #fff; --pagination-list-active-bg-color: #edf5ff; --pagination-list-active-color: var(--color-primary); --pagination-input-width: 32px; --pagination-disabled-color: var(--color-text-disabled); --pagination-bg-disabled-color: var(--color-disabled); --pagination-size-line-height: 24px;}.pagination-flex-nowrap { display: flex; white-space: nowrap; align-items: center;}.var-pagination { display: flex; align-items: center; list-style: none; margin: 0; font-size: var(--pagination-font-size); padding: 0; color: var(--pagination-text-color);}.var-pagination__item { display: inline-flex; min-width: var(--pagination-item-width); align-items: center; justify-content: center; margin: var(--pagination-item-margin); height: var(--pagination-item-height); cursor: pointer; border-radius: var(--pagination-item-border-radius); outline: none; transition: all 0.25s; user-select: none; background-color: var(--pagination-item-background);}.var-pagination__item:hover { background-color: var(--pagination-hover-bg-color);}.var-pagination__item--active { color: var(--pagination-active-color); background-color: var(--pagination-active-bg-color) !important;}.var-pagination__item--hide { display: none;}.var-pagination__item--simple { background: transparent; border-radius: var(--pagination-item-simple-border-radius);}.var-pagination__item--disabled { cursor: not-allowed; color: var(--pagination-disabled-color); background-color: unset;}.var-pagination__item--disabled:hover { background-color: unset;}.var-pagination__item--disabled--hover:hover { background-color: inherit;}.var-pagination__item--disabled--active { background-color: var(--pagination-bg-disabled-color);}.var-pagination__item--disabled--active:hover { background-color: var(--pagination-bg-disabled-color);}.var-pagination__prev { margin-left: 0;}.var-pagination__total { display: flex; white-space: nowrap; align-items: center; line-height: var(--pagination-total-line-height); margin: var(--pagination-total-margin);}.var-pagination__size { display: flex; white-space: nowrap; align-items: center; line-height: var(--pagination-size-line-height); margin: var(--pagination-item-margin);}.var-pagination__size--open { display: flex; align-items: center; cursor: pointer;}.var-pagination__size--open--disabled { cursor: inherit;}.var-pagination__list { background-color: var(--pagination-list-bg-color); cursor: pointer; transition: all 0.25s;}.var-pagination__list:hover { color: var(--pagination-list-active-color); background-color: var(--pagination-list-active-bg-color);}.var-pagination__list--active { background-color: var(--pagination-list-active-bg-color) !important; color: var(--pagination-list-active-color);}.var-pagination__quickly,.var-pagination__simple { display: flex; white-space: nowrap; align-items: center;}.var-pagination__quickly [var-pagination-cover],.var-pagination__simple [var-pagination-cover] { width: var(--pagination-input-width);}.var-pagination__quickly [var-pagination-cover] .var-field-decorator__middle,.var-pagination__simple [var-pagination-cover] .var-field-decorator__middle { padding: 0;}.var-pagination__quickly [var-pagination-cover] .var-input__input,.var-pagination__simple [var-pagination-cover] .var-input__input { height: auto; text-align: center;}.var-pagination__quickly-line,.var-pagination__simple-line { height: 1px; background: transparent;}.var-pagination__quickly { margin: var(--pagination-item-margin);}.var-pagination__quickly [var-pagination-cover] { margin-left: 6px;}.var-pagination__size--open-icon[var-pagination-cover] { font-size: inherit;}

package/es/picker/Picker.mjs

@@ -5,7 +5,7 @@ import { props } from "./props.mjs";
 import { useTouch, useVModel } from "@varlet/use";
 import { clamp, clampArrayRange, call } from "@varlet/shared";
 import { toPxNum, getTranslateY } from "../utils/elements.mjs";
-import { pack } from "../locale/index.mjs";
+import { t } from "../locale/index.mjs";
 import { createNamespace } from "../utils/components.mjs";
 const { name, n, classes } = createNamespace("picker");
 const MOMENTUM_RECORD_TIME = 300;
@@ -67,7 +67,7 @@ function __render__(_ctx, _cache) {
                       var _a;
                       return [
                         _createTextVNode(
-                          _toDisplayString((_a = _ctx.cancelButtonText) != null ? _a : _ctx.pack.pickerCancelButtonText),
+                          _toDisplayString((_a = _ctx.cancelButtonText) != null ? _a : _ctx.t("pickerCancelButtonText")),
                           1
                           /* TEXT */
                         )
@@ -85,7 +85,7 @@ function __render__(_ctx, _cache) {
                       {
                         class: _normalizeClass(_ctx.n("title"))
                       },
-                      _toDisplayString((_a = _ctx.title) != null ? _a : _ctx.pack.pickerTitle),
+                      _toDisplayString((_a = _ctx.title) != null ? _a : _ctx.t("pickerTitle")),
                       3
                       /* TEXT, CLASS */
                     )
@@ -103,7 +103,7 @@ function __render__(_ctx, _cache) {
                       var _a;
                       return [
                         _createTextVNode(
-                          _toDisplayString((_a = _ctx.confirmButtonText) != null ? _a : _ctx.pack.pickerConfirmButtonText),
+                          _toDisplayString((_a = _ctx.confirmButtonText) != null ? _a : _ctx.t("pickerConfirmButtonText")),
                           1
                           /* TEXT */
                         )
@@ -464,7 +464,7 @@ const __sfc__ = defineComponent({
       call(props2.onCancel, values, indexes, options);
     }
     return {
-      pack,
+      t,
       optionHeight,
       optionCount,
       scrollColumns,

package/es/picker/picker.css

@@ -1 +1 @@
-:root { --picker-background: #fff; --picker-toolbar-height: 44px; --picker-confirm-button-text-color: var(--color-primary); --picker-cancel-button-text-color: #888; --picker-picked-border: 1px solid rgba(0, 0, 0, 0.12); --picker-title-font-size: var(--font-size-lg); --picker-title-text-color: #555; --picker-option-font-size: var(--font-size-lg); --picker-option-text-color: #555; --picker-toolbar-padding: 0 4px; --picker-mask-background-image: linear-gradient(180deg, hsla(0, 0%, 100%, 0.9), hsla(0, 0%, 100%, 0.4)), linear-gradient(0deg, hsla(0, 0%, 100%, 0.9), hsla(0, 0%, 100%, 0.4));}.var-picker { width: 100%; background: var(--picker-background); user-select: none; transition: 0.25s background-color;}.var-picker__popup[var-picker-cover] { width: 100%;}.var-picker__columns { position: relative; display: flex; width: 100%; cursor: grab;}.var-picker__column { flex: 1; overflow: hidden;}.var-picker__option { display: flex; justify-content: center; align-items: center; width: 100%; padding: 0 4px;}.var-picker__text { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--picker-option-text-color); font-size: var(--picker-option-font-size);}.var-picker__scroller { width: 100%; transition-timing-function: cubic-bezier(0.23, 1, 0.68, 1);}.var-picker__picked { position: absolute; z-index: 2; pointer-events: none; width: 100%; left: 0; border-top: var(--picker-picked-border); border-bottom: var(--picker-picked-border); transition: 0.25s border;}.var-picker__mask { position: absolute; pointer-events: none; top: 0; left: 0; width: 100%; height: 100%; background-image: var(--picker-mask-background-image); background-repeat: no-repeat; background-position: top, bottom;}.var-picker__toolbar { display: flex; justify-content: space-between; align-items: center; width: 100%; height: var(--picker-toolbar-height); padding: var(--picker-toolbar-padding);}.var-picker__confirm-button[var-picker-cover] { color: var(--picker-confirm-button-text-color);}.var-picker__cancel-button[var-picker-cover] { color: var(--picker-cancel-button-text-color);}.var-picker__title { color: var(--picker-title-text-color); font-size: var(--picker-title-font-size);}
+:root { --picker-background: #fff; --picker-toolbar-height: 44px; --picker-confirm-button-text-color: var(--color-primary); --picker-cancel-button-text-color: #888; --picker-picked-border: 1px solid var(--color-outline); --picker-title-font-size: var(--font-size-lg); --picker-title-text-color: #555; --picker-option-font-size: var(--font-size-lg); --picker-option-text-color: #555; --picker-toolbar-padding: 0 4px; --picker-mask-background-image: linear-gradient(180deg, hsla(0, 0%, 100%, 0.9), hsla(0, 0%, 100%, 0.4)), linear-gradient(0deg, hsla(0, 0%, 100%, 0.9), hsla(0, 0%, 100%, 0.4));}.var-picker { width: 100%; background: var(--picker-background); user-select: none; transition: 0.25s background-color;}.var-picker__popup[var-picker-cover] { width: 100%;}.var-picker__columns { position: relative; display: flex; width: 100%; cursor: grab;}.var-picker__column { flex: 1; overflow: hidden;}.var-picker__option { display: flex; justify-content: center; align-items: center; width: 100%; padding: 0 4px;}.var-picker__text { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--picker-option-text-color); font-size: var(--picker-option-font-size);}.var-picker__scroller { width: 100%; transition-timing-function: cubic-bezier(0.23, 1, 0.68, 1);}.var-picker__picked { position: absolute; z-index: 2; pointer-events: none; width: 100%; left: 0; border-top: var(--picker-picked-border); border-bottom: var(--picker-picked-border); transition: 0.25s border;}.var-picker__mask { position: absolute; pointer-events: none; top: 0; left: 0; width: 100%; height: 100%; background-image: var(--picker-mask-background-image); background-repeat: no-repeat; background-position: top, bottom;}.var-picker__toolbar { display: flex; justify-content: space-between; align-items: center; width: 100%; height: var(--picker-toolbar-height); padding: var(--picker-toolbar-padding);}.var-picker__confirm-button[var-picker-cover] { color: var(--picker-confirm-button-text-color);}.var-picker__cancel-button[var-picker-cover] { color: var(--picker-cancel-button-text-color);}.var-picker__title { color: var(--picker-title-text-color); font-size: var(--picker-title-font-size);}

package/es/progress/Progress.mjs

@@ -71,7 +71,7 @@ function __render__(_ctx, _cache) {
                 "div",
                 {
                   key: 1,
-                  class: _normalizeClass(_ctx.classes(_ctx.n("linear-certain"), _ctx.n(`linear--${_ctx.type}`), [_ctx.ripple, _ctx.n("linear-ripple")])),
+                  class: _normalizeClass(_ctx.classes(_ctx.n("linear-certain"), _ctx.n(`linear--${_ctx.type}`))),
                   style: _normalizeStyle({ background: _ctx.progressColor, width: _ctx.linearProps.width })
                 },
                 null,

package/es/progress/progress.css

@@ -1 +1 @@
-:root { --progress-font-size: var(--font-size-sm); --progress-ripple-color: #fff; --progress-track-color: #d8d8d8; --progress-label-color: #555; --progress-background: var(--color-primary); --progress-default-color: #f5f5f5; --progress-primary-color: var(--color-primary); --progress-danger-color: var(--color-danger); --progress-success-color: var(--color-success); --progress-warning-color: var(--color-warning); --progress-info-color: var(--color-info); --progress-linear-border-radius: 0px;}.var-progress { position: relative; font-size: var(--progress-font-size);}.var-progress__linear { display: flex; align-items: center;}.var-progress__linear-block { flex: 1; position: relative; overflow: hidden; height: 4px; border-radius: var(--progress-linear-border-radius);}.var-progress__linear-certain { width: 100%; height: 100%; border-radius: var(--progress-linear-border-radius);}.var-progress__linear-ripple::after { position: absolute; width: 0; background-color: var(--progress-ripple-color); height: 100%; opacity: 0; animation: ripple 1.8s cubic-bezier(0.4, 0, 0.2, 1) infinite; content: '';}.var-progress__linear-background { background-color: var(--progress-track-color);}.var-progress__linear-certain { position: absolute; background-color: var(--progress-background); top: 0; left: 0; transition: all 0.2s, background-color 0.8s;}.var-progress__linear-label { margin-left: 8px; flex: 0; color: var(--progress-label-color);}.var-progress__linear-indeterminate div { bottom: 0; height: inherit; left: 0; position: absolute; right: auto; top: 0; width: auto; will-change: left, right; border-radius: var(--progress-linear-border-radius);}.var-progress__linear-indeterminate div:first-child { animation: progress-linear-long 2.2s infinite;}.var-progress__linear-indeterminate div:last-child { animation: progress-linear-short 2.2s infinite;}.var-progress__linear--success { background-color: var(--progress-success-color);}.var-progress__linear--default { background-color: var(--progress-default-color);}.var-progress__linear--primary { background-color: var(--progress-primary-color);}.var-progress__linear--warning { background-color: var(--progress-warning-color);}.var-progress__linear--danger { background-color: var(--progress-danger-color);}.var-progress__linear--info { background-color: var(--progress-info-color);}@keyframes progress-linear-long { 0% { left: -90%; right: 100%; } 60% { left: -90%; right: 100%; } 100% { left: 100%; right: -35%; }}@keyframes progress-linear-short { 0% { left: -200%; right: 100%; } 60% { left: 107%; right: -8%; } 100% { left: 107%; right: -8%; }}@keyframes ripple { 0% { width: 0; opacity: 0.1; } 20% { width: 0; opacity: 0.5; } 80% { width: 100%; opacity: 0; }}.var-progress__circle { position: relative; width: 40px; height: 40px;}.var-progress__circle-background { stroke: var(--progress-track-color); z-index: 1;}.var-progress__circle-certain { transition: all 0.2s; stroke: var(--progress-background); position: absolute;}.var-progress__circle-label { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); color: var(--progress-label-color);}.var-progress__circle--success { stroke: var(--progress-success-color);}.var-progress__circle--default { stroke: var(--progress-default-color);}.var-progress__circle--primary { stroke: var(--progress-primary-color);}.var-progress__circle--warning { stroke: var(--progress-warning-color);}.var-progress__circle--danger { stroke: var(--progress-danger-color);}.var-progress__circle--info { stroke: var(--progress-info-color);}.var-progress__circle-indeterminate svg { animation: progress-circle-rotate 1.4s linear infinite; transform-origin: center center; transition: all 0.2s ease-in-out; width: 100%; height: 100%; position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 0;}.var-progress__circle-overlay { animation: progress-circle-dash 1.4s ease-in-out infinite, progress-circle-rotate 1.4s linear infinite; stroke-dasharray: 25, 200; stroke-dashoffset: 0; stroke-linecap: round; transform-origin: center center; transform: rotate(-90deg); z-index: 2;}@keyframes progress-circle-dash { 0% { stroke-dasharray: 1, 200; stroke-dashoffset: 0; } 50% { stroke-dasharray: 100, 200; stroke-dashoffset: -15px; } 100% { stroke-dasharray: 100, 200; stroke-dashoffset: -124px; }}@keyframes progress-circle-rotate { 100% { transform: rotate(270deg); }}
+:root { --progress-font-size: var(--font-size-sm); --progress-track-color: #d8d8d8; --progress-label-color: #555; --progress-background: var(--color-primary); --progress-default-color: #f5f5f5; --progress-primary-color: var(--color-primary); --progress-danger-color: var(--color-danger); --progress-success-color: var(--color-success); --progress-warning-color: var(--color-warning); --progress-info-color: var(--color-info); --progress-linear-border-radius: 0px;}.var-progress { position: relative; font-size: var(--progress-font-size);}.var-progress__linear { display: flex; align-items: center;}.var-progress__linear-block { flex: 1; position: relative; overflow: hidden; height: 4px; border-radius: var(--progress-linear-border-radius);}.var-progress__linear-certain { width: 100%; height: 100%; border-radius: var(--progress-linear-border-radius);}.var-progress__linear-background { background-color: var(--progress-track-color);}.var-progress__linear-certain { position: absolute; background-color: var(--progress-background); top: 0; left: 0; transition: all 0.2s, background-color 0.8s;}.var-progress__linear-label { margin-left: 8px; flex: 0; color: var(--progress-label-color);}.var-progress__linear-indeterminate div { bottom: 0; height: inherit; left: 0; position: absolute; right: auto; top: 0; width: auto; will-change: left, right; border-radius: var(--progress-linear-border-radius);}.var-progress__linear-indeterminate div:first-child { animation: progress-linear-long 2.2s infinite;}.var-progress__linear-indeterminate div:last-child { animation: progress-linear-short 2.2s infinite;}.var-progress__linear--success { background-color: var(--progress-success-color);}.var-progress__linear--default { background-color: var(--progress-default-color);}.var-progress__linear--primary { background-color: var(--progress-primary-color);}.var-progress__linear--warning { background-color: var(--progress-warning-color);}.var-progress__linear--danger { background-color: var(--progress-danger-color);}.var-progress__linear--info { background-color: var(--progress-info-color);}@keyframes progress-linear-long { 0% { left: -90%; right: 100%; } 60% { left: -90%; right: 100%; } 100% { left: 100%; right: -35%; }}@keyframes progress-linear-short { 0% { left: -200%; right: 100%; } 60% { left: 107%; right: -8%; } 100% { left: 107%; right: -8%; }}.var-progress__circle { position: relative; width: 40px; height: 40px;}.var-progress__circle-background { stroke: var(--progress-track-color); z-index: 1;}.var-progress__circle-certain { transition: all 0.2s; stroke: var(--progress-background); position: absolute;}.var-progress__circle-label { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); color: var(--progress-label-color);}.var-progress__circle--success { stroke: var(--progress-success-color);}.var-progress__circle--default { stroke: var(--progress-default-color);}.var-progress__circle--primary { stroke: var(--progress-primary-color);}.var-progress__circle--warning { stroke: var(--progress-warning-color);}.var-progress__circle--danger { stroke: var(--progress-danger-color);}.var-progress__circle--info { stroke: var(--progress-info-color);}.var-progress__circle-indeterminate svg { animation: progress-circle-rotate 1.4s linear infinite; transform-origin: center center; transition: all 0.2s ease-in-out; width: 100%; height: 100%; position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 0;}.var-progress__circle-overlay { animation: progress-circle-dash 1.4s ease-in-out infinite, progress-circle-rotate 1.4s linear infinite; stroke-dasharray: 25, 200; stroke-dashoffset: 0; stroke-linecap: round; transform-origin: center center; transform: rotate(-90deg); z-index: 2;}@keyframes progress-circle-dash { 0% { stroke-dasharray: 1, 200; stroke-dashoffset: 0; } 50% { stroke-dasharray: 100, 200; stroke-dashoffset: -15px; } 100% { stroke-dasharray: 100, 200; stroke-dashoffset: -124px; }}@keyframes progress-circle-rotate { 100% { transform: rotate(270deg); }}

package/es/progress/props.mjs

@@ -9,7 +9,6 @@ const props = {
   },
   color: [String, Object],
   trackColor: String,
-  ripple: Boolean,
   value: {
     type: [Number, String],
     default: 0

package/es/slider/slider.css

@@ -1 +1 @@
-:root { --slider-error-color: var(--color-danger); --slider-track-background: #bdbdbd; --slider-track-height: 2px; --slider-track-border-radius: 0; --slider-track-fill-border-radius: 0; --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-thumb-label-text-color: #fff; --slider-thumb-size: 12px; --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: var(--slider-track-height); background: var(--slider-track-background); transition: filter, background-color, 0.25s; border-radius: var(--slider-track-border-radius);}.var-slider-track-fill { position: absolute; height: 100%; left: 0; transition: background-color 0.25s; background-color: var(--slider-track-fill-background); border-radius: var(--slider-track-fill-border-radius);}.var-slider-thumb { position: absolute; cursor: pointer;}.var-slider-thumb-block { position: absolute; width: var(--slider-thumb-size); height: var(--slider-thumb-size); 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: var(--slider-thumb-label-text-color); 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__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: var(--slider-track-height); background: var(--slider-track-background); transition: filter, background-color, 0.25s; border-radius: var(--slider-track-border-radius);}.var-slider__horizontal-track-fill { position: absolute; height: 100%; left: 0; transition: background-color 0.25s; background-color: var(--slider-track-fill-background); border-radius: var(--slider-track-fill-border-radius);}.var-slider__horizontal-thumb { position: absolute; cursor: pointer;}.var-slider__horizontal-thumb-block { position: absolute; width: var(--slider-thumb-size); height: var(--slider-thumb-size); 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: var(--slider-thumb-label-text-color); 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__form[var-slider-cover] { margin: 0;}.var-slider__horizontal--error .var-slider__horizontal-track-background { background-color: var(--slider-error-color) !important; filter: opacity(0.6);}.var-slider__horizontal--error .var-slider__horizontal-track-fill { background-color: var(--slider-error-color) !important;}.var-slider__horizontal--error .var-slider__horizontal-thumb-block { background-color: var(--slider-error-color) !important;}.var-slider__horizontal--error .var-slider__horizontal-thumb-ripple--active { background-color: var(--slider-error-color) !important;}.var-slider__horizontal--error .var-slider__horizontal-thumb-label { background-color: var(--slider-error-color) !important;}.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: var(--slider-track-height); background: var(--slider-track-background); transition: filter, background-color, 0.25s; border-radius: var(--slider-track-border-radius);}.var-slider__vertical-track-fill { position: absolute; height: 100%; left: 0; transition: background-color 0.25s; background-color: var(--slider-track-fill-background); border-radius: var(--slider-track-fill-border-radius);}.var-slider__vertical-thumb { position: absolute; cursor: pointer;}.var-slider__vertical-thumb-block { position: absolute; width: var(--slider-thumb-size); height: var(--slider-thumb-size); 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: var(--slider-thumb-label-text-color); 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__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: var(--slider-track-height); height: 100%; background: var(--slider-track-background); transition: filter, background-color, 0.25s;}.var-slider__vertical-track-fill { width: 100%; 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);}.var-slider__vertical--error .var-slider__vertical-track-background { background-color: var(--slider-error-color) !important; filter: opacity(0.6);}.var-slider__vertical--error .var-slider__vertical-track-fill { background-color: var(--slider-error-color) !important;}.var-slider__vertical--error .var-slider__vertical-thumb-block { background-color: var(--slider-error-color) !important;}.var-slider__vertical--error .var-slider__vertical-thumb-ripple--active { background-color: var(--slider-error-color) !important;}.var-slider__vertical--error .var-slider__vertical-thumb-label { background-color: var(--slider-error-color) !important;}
+:root { --slider-error-color: var(--color-danger); --slider-track-background: #bdbdbd; --slider-track-height: 2px; --slider-track-border-radius: 0; --slider-track-fill-border-radius: 0; --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-thumb-label-text-color: var(--color-on-primary); --slider-thumb-size: 12px; --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: var(--slider-track-height); background: var(--slider-track-background); transition: filter, background-color, 0.25s; border-radius: var(--slider-track-border-radius);}.var-slider-track-fill { position: absolute; height: 100%; left: 0; transition: background-color 0.25s; background-color: var(--slider-track-fill-background); border-radius: var(--slider-track-fill-border-radius);}.var-slider-thumb { position: absolute; cursor: pointer;}.var-slider-thumb-block { position: absolute; width: var(--slider-thumb-size); height: var(--slider-thumb-size); 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: var(--slider-thumb-label-text-color); 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__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: var(--slider-track-height); background: var(--slider-track-background); transition: filter, background-color, 0.25s; border-radius: var(--slider-track-border-radius);}.var-slider__horizontal-track-fill { position: absolute; height: 100%; left: 0; transition: background-color 0.25s; background-color: var(--slider-track-fill-background); border-radius: var(--slider-track-fill-border-radius);}.var-slider__horizontal-thumb { position: absolute; cursor: pointer;}.var-slider__horizontal-thumb-block { position: absolute; width: var(--slider-thumb-size); height: var(--slider-thumb-size); 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: var(--slider-thumb-label-text-color); 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__form[var-slider-cover] { margin: 0;}.var-slider__horizontal--error .var-slider__horizontal-track-background { background-color: var(--slider-error-color) !important; filter: opacity(0.6);}.var-slider__horizontal--error .var-slider__horizontal-track-fill { background-color: var(--slider-error-color) !important;}.var-slider__horizontal--error .var-slider__horizontal-thumb-block { background-color: var(--slider-error-color) !important;}.var-slider__horizontal--error .var-slider__horizontal-thumb-ripple--active { background-color: var(--slider-error-color) !important;}.var-slider__horizontal--error .var-slider__horizontal-thumb-label { background-color: var(--slider-error-color) !important;}.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: var(--slider-track-height); background: var(--slider-track-background); transition: filter, background-color, 0.25s; border-radius: var(--slider-track-border-radius);}.var-slider__vertical-track-fill { position: absolute; height: 100%; left: 0; transition: background-color 0.25s; background-color: var(--slider-track-fill-background); border-radius: var(--slider-track-fill-border-radius);}.var-slider__vertical-thumb { position: absolute; cursor: pointer;}.var-slider__vertical-thumb-block { position: absolute; width: var(--slider-thumb-size); height: var(--slider-thumb-size); 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: var(--slider-thumb-label-text-color); 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__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: var(--slider-track-height); height: 100%; background: var(--slider-track-background); transition: filter, background-color, 0.25s;}.var-slider__vertical-track-fill { width: 100%; 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);}.var-slider__vertical--error .var-slider__vertical-track-background { background-color: var(--slider-error-color) !important; filter: opacity(0.6);}.var-slider__vertical--error .var-slider__vertical-track-fill { background-color: var(--slider-error-color) !important;}.var-slider__vertical--error .var-slider__vertical-thumb-block { background-color: var(--slider-error-color) !important;}.var-slider__vertical--error .var-slider__vertical-thumb-ripple--active { background-color: var(--slider-error-color) !important;}.var-slider__vertical--error .var-slider__vertical-thumb-label { background-color: var(--slider-error-color) !important;}

package/es/step/step.css

@@ -1 +1 @@
-:root { --step-tag-size: 20px; --step-tag-background: #9e9e9e; --step-tag-font-size: var(--font-size-md); --step-tag-color: #fff; --step-tag-active-color: var(--color-primary); --step-tag-margin: 4px 0; --step-tag-icon-size: var(--font-size-lg); --step-content-font-size: var(--font-size-md); --step-content-color: rgba(0, 0, 0, 0.38); --step-content-active-color: #000; --step-line-background: #000; --step-line-gap: 8px; --step-min-size: calc(20px + 8px); --step-line-size: calc(100% - calc(20px + 8px)); --step-vertical-tag-margin: 0 4px; --step-vertical-min-height: 50px;}.tag { width: var(--step-tag-size); height: var(--step-tag-size); background: var(--step-tag-background); display: flex; font-size: var(--step-tag-font-size); align-items: center; justify-content: center; border-radius: 50%; color: var(--step-tag-color); cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); transition: 0.3s var(--cubic-bezier);}.content { font-size: var(--step-content-font-size); color: var(--step-content-color); cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); transition: 0.3s var(--cubic-bezier);}.var-step { position: relative; flex: 1; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);}.var-step:last-child .var-step__horizontal-line { width: 0;}.var-step:last-child .var-step__vertical-line { height: 0;}.var-step__horizontal { display: flex; flex-direction: column; align-items: center;}.var-step__horizontal-tag { margin: var(--step-tag-margin); width: var(--step-tag-size); height: var(--step-tag-size); background: var(--step-tag-background); display: flex; font-size: var(--step-tag-font-size); align-items: center; justify-content: center; border-radius: 50%; color: var(--step-tag-color); cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); transition: 0.3s var(--cubic-bezier);}.var-step__horizontal-tag--active { background: var(--step-tag-active-color);}.var-step__horizontal-content { font-size: var(--step-content-font-size); color: var(--step-content-color); cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); transition: 0.3s var(--cubic-bezier);}.var-step__horizontal-content--active { color: var(--step-content-active-color);}.var-step__horizontal-line { position: absolute; top: calc(var(--step-min-size) / 2); left: calc(50% + var(--step-min-size) / 2); width: var(--step-line-size); height: 1px; transform: scaleY(0.5); background: var(--step-line-background);}.var-step__vertical { display: flex; height: 100%; min-height: var(--step-vertical-min-height);}.var-step__vertical-tag { flex-shrink: 0; margin: var(--step-vertical-tag-margin); width: var(--step-tag-size); height: var(--step-tag-size); background: var(--step-tag-background); display: flex; font-size: var(--step-tag-font-size); align-items: center; justify-content: center; border-radius: 50%; color: var(--step-tag-color); cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); transition: 0.3s var(--cubic-bezier);}.var-step__vertical-tag--active { background: var(--step-tag-active-color);}.var-step__vertical-content { font-size: var(--step-content-font-size); color: var(--step-content-color); cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); transition: 0.3s var(--cubic-bezier);}.var-step__vertical-content--active { color: var(--step-content-active-color);}.var-step__vertical-line { position: absolute; height: var(--step-line-size); left: calc(var(--step-min-size) / 2); top: calc(var(--step-min-size) - var(--step-line-gap) / 2); width: 1px; transform: scaleX(0.5); background: var(--step-line-background);}.var-step__icon[var-step-cover] { font-size: var(--step-tag-icon-size);}
+:root { --step-tag-size: 20px; --step-tag-background: #9e9e9e; --step-tag-font-size: var(--font-size-md); --step-tag-color: var(--color-on-primary); --step-tag-active-color: var(--color-primary); --step-tag-margin: 4px 0; --step-tag-icon-size: var(--font-size-lg); --step-content-font-size: var(--font-size-md); --step-content-color: rgba(0, 0, 0, 0.38); --step-content-active-color: #000; --step-line-background: #000; --step-line-gap: 8px; --step-vertical-tag-margin: 0 4px; --step-vertical-min-height: 50px;}.tag { width: var(--step-tag-size); height: var(--step-tag-size); background: var(--step-tag-background); display: flex; font-size: var(--step-tag-font-size); align-items: center; justify-content: center; border-radius: 50%; color: var(--step-tag-color); cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); transition: 0.3s var(--cubic-bezier);}.content { font-size: var(--step-content-font-size); color: var(--step-content-color); cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); transition: 0.3s var(--cubic-bezier);}.var-step { position: relative; flex: 1; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);}.var-step:last-child .var-step__horizontal-line { width: 0;}.var-step:last-child .var-step__vertical-line { height: 0;}.var-step__horizontal { display: flex; flex-direction: column; align-items: center;}.var-step__horizontal-tag { margin: var(--step-tag-margin); width: var(--step-tag-size); height: var(--step-tag-size); background: var(--step-tag-background); display: flex; font-size: var(--step-tag-font-size); align-items: center; justify-content: center; border-radius: 50%; color: var(--step-tag-color); cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); transition: 0.3s var(--cubic-bezier);}.var-step__horizontal-tag--active { background: var(--step-tag-active-color);}.var-step__horizontal-content { font-size: var(--step-content-font-size); color: var(--step-content-color); cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); transition: 0.3s var(--cubic-bezier);}.var-step__horizontal-content--active { color: var(--step-content-active-color);}.var-step__horizontal-line { position: absolute; top: calc(calc(var(--step-tag-size) + var(--step-line-gap)) / 2); left: calc(50% + calc(var(--step-tag-size) + var(--step-line-gap)) / 2); width: calc(100% - calc(var(--step-tag-size) + var(--step-line-gap))); height: 1px; transform: scaleY(0.5); background: var(--step-line-background);}.var-step__vertical { display: flex; height: 100%; min-height: var(--step-vertical-min-height);}.var-step__vertical-tag { flex-shrink: 0; margin: var(--step-vertical-tag-margin); width: var(--step-tag-size); height: var(--step-tag-size); background: var(--step-tag-background); display: flex; font-size: var(--step-tag-font-size); align-items: center; justify-content: center; border-radius: 50%; color: var(--step-tag-color); cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); transition: 0.3s var(--cubic-bezier);}.var-step__vertical-tag--active { background: var(--step-tag-active-color);}.var-step__vertical-content { font-size: var(--step-content-font-size); color: var(--step-content-color); cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); transition: 0.3s var(--cubic-bezier);}.var-step__vertical-content--active { color: var(--step-content-active-color);}.var-step__vertical-line { position: absolute; height: calc(100% - calc(var(--step-tag-size) + var(--step-line-gap))); left: calc(calc(var(--step-tag-size) + var(--step-line-gap)) / 2); top: calc(calc(var(--step-tag-size) + var(--step-line-gap)) - var(--step-line-gap) / 2); width: 1px; transform: scaleX(0.5); background: var(--step-line-background);}.var-step__icon[var-step-cover] { font-size: var(--step-tag-icon-size);}