@varlet/ui 2.22.3 → 3.0.0-alpha.1707916363117

package/README.md

@@ -39,6 +39,7 @@ Varlet is a Material design mobile component library developed based on `Vue3`,
 - 💪   Support the SSR
 - 💡   Support the Typescript
 - 💪   Make sure more than 90 percent unit test coverage, providing stability assurance
+- 🛠️   Supports both Material Design 2 and Material Design 3 design systems
 - 🛠️   Support dark mode
 - 🛠️   Provide official VSCode extension
 

package/README.zh-CN.md

@@ -39,6 +39,7 @@ Varlet 是一个基于 `Vue3` 开发的 Material 风格移动端组件库，全
 - 💪   支持 SSR
 - 💡   支持 Typescript
 - 💪   确保 90% 以上单元测试覆盖率，提供稳定性保证
+- 🛠️   同时支持 Material Design 2 和 Material Design 3 两套设计系统
 - 🛠️   支持暗黑模式
 - 🛠️   提供官方的 VSCode 插件
 

package/es/action-sheet/ActionSheet.mjs

@@ -3,7 +3,7 @@ import VarPopup from "../popup/index.mjs";
 import VarIcon from "../icon/index.mjs";
 import { defineComponent, ref, watch } from "vue";
 import { props } from "./props.mjs";
-import { pack } from "../locale/index.mjs";
+import { t } from "../locale/index.mjs";
 import { createNamespace } from "../utils/components.mjs";
 import { call } from "@varlet/shared";
 const { name, n, classes } = createNamespace("action-sheet");
@@ -49,7 +49,7 @@ function __render__(_ctx, _cache) {
                 {
                   class: _normalizeClass(_ctx.n("title"))
                 },
-                _toDisplayString((_a = _ctx.title) != null ? _a : _ctx.pack.actionSheetTitle),
+                _toDisplayString((_a = _ctx.title) != null ? _a : _ctx.t("actionSheetTitle")),
                 3
                 /* TEXT, CLASS */
               )
@@ -131,7 +131,7 @@ const __sfc__ = defineComponent({
     }
     return {
       popupShow,
-      pack,
+      t,
       n,
       classes,
       handlePopupUpdateShow,

package/es/back-top/BackTop.mjs

@@ -33,7 +33,6 @@ function __render__(_ctx, _cache) {
           _createVNode(_component_var_button, {
             elevation: _ctx.elevation,
             type: "primary",
-            round: "",
             "var-back-top-cover": ""
           }, {
             default: _withCtx(() => [

package/es/back-top/backTop.css

@@ -1 +1 @@
-:root { --back-top-right: 40px; --back-top-bottom: 40px; --back-top-button-size: 40px;}.var-back-top { position: fixed; z-index: 100; right: var(--back-top-right); bottom: var(--back-top-bottom); transform: scale(0); transition: 0.3s var(--cubic-bezier); -webkit-tap-highlight-color: rgba(0, 0, 0, 0);}.var-back-top .var-button[var-back-top-cover] { width: var(--back-top-button-size); height: var(--back-top-button-size);}.var-back-top--active { transform: scale(1);}
+:root { --back-top-right: 40px; --back-top-bottom: 40px; --back-top-button-size: 40px; --back-top-button-border-radius: 50%;}.var-back-top { position: fixed; z-index: 100; right: var(--back-top-right); bottom: var(--back-top-bottom); transform: scale(0); transition: 0.3s var(--cubic-bezier); -webkit-tap-highlight-color: rgba(0, 0, 0, 0);}.var-back-top .var-button[var-back-top-cover] { width: var(--back-top-button-size); height: var(--back-top-button-size); border-radius: var(--back-top-button-border-radius);}.var-back-top--active { transform: scale(1);}

package/es/badge/badge.css

@@ -1 +1 @@
-:root { --badge-content-padding: 2px 6px; --badge-content-border: none; --badge-content-border-radius: 100px; --badge-content-font-size: 12px; --badge-icon-size: 12px; --badge-default-color: #e0e0e0; --badge-primary-color: var(--color-primary); --badge-danger-color: var(--color-danger); --badge-success-color: var(--color-success); --badge-warning-color: var(--color-warning); --badge-info-color: var(--color-info); --badge-dot-width: 8px; --badge-dot-height: 8px;}.var-badge { display: inline-block; position: relative; transition: background-color 0.25s;}.var-badge__content { display: inline-block; vertical-align: middle; text-align: center; padding: var(--badge-content-padding); border: var(--badge-content-border); border-radius: var(--badge-content-border-radius); color: #fff; font-size: var(--badge-content-font-size);}.var-badge--offset { transform: translateX(var(--badge-offset-x)) translateY(var(--badge-offset-y));}.var-badge__icon[var-badge-cover] { font-size: var(--badge-icon-size);}.var-badge--icon { padding: 2px 4px;}.var-badge--dot { box-sizing: content-box; width: var(--badge-dot-width); height: var(--badge-dot-height); padding: 0;}.var-badge--default { background: var(--badge-default-color);}.var-badge--primary { background: var(--badge-primary-color);}.var-badge--info { background: var(--badge-info-color);}.var-badge--warning { background: var(--badge-warning-color);}.var-badge--success { background: var(--badge-success-color);}.var-badge--danger { background: var(--badge-danger-color);}.var-badge--right-top { position: absolute; top: 0; right: 0; transform: translateY(calc(-50% + var(--badge-offset-y))) translateX(calc(50% + var(--badge-offset-x)));}.var-badge--left-top { position: absolute; top: 0; left: 0; transform: translateY(calc(-50% + var(--badge-offset-y))) translateX(calc(-50% + var(--badge-offset-x)));}.var-badge--right-bottom { position: absolute; bottom: 0; right: 0; transform: translateY(calc(50% + var(--badge-offset-y))) translateX(calc(50% + var(--badge-offset-x)));}.var-badge--left-bottom { position: absolute; bottom: 0; left: 0; transform: translateY(calc(50% + var(--badge-offset-y))) translateX(calc(-50% + var(--badge-offset-x)));}.var-badge-fade-enter-active,.var-badge-fade-leave-active { transition: opacity 0.15s var(--cubic-bezier);}.var-badge-fade-enter-from,.var-badge-fade-leave-to { opacity: 0;}
+:root { --badge-content-padding: 2px 6px; --badge-content-border: none; --badge-content-border-radius: 100px; --badge-content-font-size: 12px; --badge-icon-size: 12px; --badge-default-color: #e0e0e0; --badge-primary-color: var(--color-primary); --badge-danger-color: var(--color-danger); --badge-success-color: var(--color-success); --badge-warning-color: var(--color-warning); --badge-info-color: var(--color-info); --badge-default-text-color: #1d1b20; --badge-primary-text-color: var(--color-on-primary); --badge-danger-text-color: var(--color-on-danger); --badge-success-text-color: var(--color-on-success); --badge-warning-text-color: var(--color-on-warning); --badge-info-text-color: var(--color-on-info); --badge-dot-width: 8px; --badge-dot-height: 8px;}.var-badge { display: inline-block; position: relative; transition: background-color 0.25s;}.var-badge__content { display: inline-block; vertical-align: middle; text-align: center; padding: var(--badge-content-padding); border: var(--badge-content-border); border-radius: var(--badge-content-border-radius); font-size: var(--badge-content-font-size);}.var-badge--offset { transform: translateX(var(--badge-offset-x)) translateY(var(--badge-offset-y));}.var-badge__icon[var-badge-cover] { font-size: var(--badge-icon-size);}.var-badge--icon { padding: 2px 4px;}.var-badge--dot { box-sizing: content-box; width: var(--badge-dot-width); height: var(--badge-dot-height); padding: 0;}.var-badge--default { color: var(--badge-default-text-color); background: var(--badge-default-color);}.var-badge--primary { color: var(--badge-primary-text-color); background: var(--badge-primary-color);}.var-badge--info { color: var(--badge-info-text-color); background: var(--badge-info-color);}.var-badge--warning { color: var(--badge-warning-text-color); background: var(--badge-warning-color);}.var-badge--success { color: var(--badge-success-text-color); background: var(--badge-success-color);}.var-badge--danger { color: var(--badge-danger-text-color); background: var(--badge-danger-color);}.var-badge--right-top { position: absolute; top: 0; right: 0; transform: translateY(calc(-50% + var(--badge-offset-y))) translateX(calc(50% + var(--badge-offset-x)));}.var-badge--left-top { position: absolute; top: 0; left: 0; transform: translateY(calc(-50% + var(--badge-offset-y))) translateX(calc(-50% + var(--badge-offset-x)));}.var-badge--right-bottom { position: absolute; bottom: 0; right: 0; transform: translateY(calc(50% + var(--badge-offset-y))) translateX(calc(50% + var(--badge-offset-x)));}.var-badge--left-bottom { position: absolute; bottom: 0; left: 0; transform: translateY(calc(50% + var(--badge-offset-y))) translateX(calc(-50% + var(--badge-offset-x)));}.var-badge-fade-enter-active,.var-badge-fade-leave-active { transition: opacity 0.15s var(--cubic-bezier);}.var-badge-fade-enter-from,.var-badge-fade-leave-to { opacity: 0;}

package/es/bottom-navigation/BottomNavigation.mjs

@@ -46,7 +46,7 @@ function __render__(_ctx, _cache) {
         class: _ctx.classes(_ctx.n("fab"), [_ctx.length % 2, _ctx.n("--fab-right"), _ctx.n("--fab-center")]),
         "var-bottom-navigation__fab": "",
         onClick: _ctx.handleFabClick
-      }, _ctx.fabProps, { round: "" }), {
+      }, _ctx.fabProps), {
         default: _withCtx(() => [
           _renderSlot(_ctx.$slots, "fab")
         ]),

package/es/bottom-navigation/bottomNavigation.css

@@ -1 +1 @@
-:root { --bottom-navigation-height: 50px; --bottom-navigation-z-index: 1; --bottom-navigation-background-color: #fff; --bottom-navigation-border-color: #e3e3e3; --bottom-navigation-fab-offset: 4px;}.var-bottom-navigation { width: 100%; height: var(--bottom-navigation-height); display: flex; position: relative; background-color: var(--bottom-navigation-background-color); transition: background-color 250ms, border-color 250ms; -webkit-tap-highlight-color: transparent;}.var-bottom-navigation--safe-area { padding-bottom: constant(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom); box-sizing: content-box !important;}.var-bottom-navigation--fixed { position: fixed; left: 0; bottom: 0;}.var-bottom-navigation--border { border-top: 1px solid var(--bottom-navigation-border-color);}.var-bottom-navigation__fab[var-bottom-navigation__fab] { width: var(--bottom-navigation-height); height: var(--bottom-navigation-height); position: absolute; z-index: 2; transform: translateY(-50%); overflow: hidden; transition: right 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;}.var-bottom-navigation--fab-center { right: calc(50% - var(--bottom-navigation-height) / 2);}.var-bottom-navigation--fab-right { right: var(--bottom-navigation-fab-offset);}
+:root { --bottom-navigation-height: 50px; --bottom-navigation-z-index: 1; --bottom-navigation-background-color: #fff; --bottom-navigation-border-color: var(--color-outline); --bottom-navigation-fab-offset: 4px; --bottom-navigation-fab-border-radius: 50%;}.var-bottom-navigation { width: 100%; height: var(--bottom-navigation-height); display: flex; position: relative; background-color: var(--bottom-navigation-background-color); transition: background-color 250ms, border-color 250ms; -webkit-tap-highlight-color: transparent;}.var-bottom-navigation--safe-area { padding-bottom: constant(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom); box-sizing: content-box !important;}.var-bottom-navigation--fixed { position: fixed; left: 0; bottom: 0;}.var-bottom-navigation--border { border-top: 1px solid var(--bottom-navigation-border-color);}.var-bottom-navigation__fab[var-bottom-navigation__fab] { width: var(--bottom-navigation-height); height: var(--bottom-navigation-height); border-radius: var(--bottom-navigation-fab-border-radius); position: absolute; z-index: 2; transform: translateY(-50%); overflow: hidden; transition: right 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;}.var-bottom-navigation--fab-center { right: calc(50% - var(--bottom-navigation-height) / 2);}.var-bottom-navigation--fab-right { right: var(--bottom-navigation-fab-offset);}

package/es/button/Button.mjs

@@ -23,12 +23,15 @@ function __render__(_ctx, _cache) {
         _ctx.n("$--box"),
         _ctx.n(`--${_ctx.states.size}`),
         [_ctx.block, `${_ctx.n("$--flex")} ${_ctx.n("--block")}`, _ctx.n("$--inline-flex")],
-        [_ctx.disabled, _ctx.n("--disabled")],
-        [_ctx.states.text, `${_ctx.n(`--text-${_ctx.states.type}`)} ${_ctx.n("--text")}`, `${_ctx.n(`--${_ctx.states.type}`)} ${_ctx.states.elevation}`],
-        [_ctx.states.text && _ctx.disabled, _ctx.n("--text-disabled")],
+        [!_ctx.states.text, _ctx.states.elevation],
+        [!_ctx.states.iconContainer && !_ctx.states.text, _ctx.n(`--${_ctx.states.type}`)],
+        [_ctx.states.text, `${_ctx.n("--text")} ${_ctx.n(`--text-${_ctx.states.type}`)}`],
+        [_ctx.states.iconContainer, _ctx.n(`--icon-container-${_ctx.states.type}`)],
         [_ctx.round, _ctx.n("--round")],
         [_ctx.states.outline, _ctx.n("--outline")],
-        [_ctx.loading || _ctx.pending, _ctx.n("--loading")]
+        [_ctx.loading || _ctx.pending, _ctx.n("--loading")],
+        [_ctx.disabled, _ctx.n("--disabled")],
+        [_ctx.states.text && _ctx.disabled, _ctx.n("--text-disabled")]
       )
     ),
     style: _normalizeStyle({
@@ -89,7 +92,8 @@ const __sfc__ = defineComponent({
           color: props2.color,
           text: props2.text,
           textColor: props2.textColor,
-          outline: props2.outline
+          outline: props2.outline,
+          iconContainer: props2.iconContainer
         };
       }
       const { type, size, color, textColor, mode } = buttonGroup;
@@ -99,8 +103,9 @@ const __sfc__ = defineComponent({
         size: props2.size != null ? props2.size : size.value,
         color: props2.color != null ? props2.color : color.value,
         textColor: props2.textColor != null ? props2.textColor : textColor.value,
-        text: mode.value !== "normal",
-        outline: mode.value === "outline"
+        text: mode.value === "text" || mode.value === "outline",
+        outline: mode.value === "outline",
+        iconContainer: mode.value === "icon-container"
       };
     });
     function attemptAutoLoading(result) {

package/es/button/button.css

@@ -1 +1 @@
-:root { --button-default-color: #f5f5f5; --button-default-text-color: #555; --button-primary-color: var(--color-primary); --button-danger-color: var(--color-danger); --button-success-color: var(--color-success); --button-warning-color: var(--color-warning); --button-info-color: var(--color-info); --button-disabled-color: var(--color-disabled); --button-disabled-text-color: var(--color-text-disabled); --button-border-radius: 4px; --button-mini-padding: 0 9px; --button-small-padding: 0 11px; --button-normal-padding: 0 15px; --button-large-padding: 0 22px; --button-round-padding: 6px; --button-mini-height: 20px; --button-small-height: 28px; --button-normal-height: 36px; --button-large-height: 44px; --button-mini-font-size: var(--font-size-xs); --button-small-font-size: var(--font-size-sm); --button-normal-font-size: var(--font-size-md); --button-large-font-size: var(--font-size-lg);}.var-button { position: relative; justify-content: center; align-items: center; outline: none; border: none; border-radius: var(--button-border-radius); user-select: none; cursor: pointer; font-family: inherit; transition: box-shadow 0.2s, background-color 0.25s; will-change: box-shadow; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); white-space: nowrap;}.var-button:active { box-shadow: 0 3px 5px -1px var(--shadow-key-umbra-opacity), 0 5px 8px 0 var(--shadow-key-penumbra-opacity), 0 1px 14px 0 var(--shadow-key-ambient-opacity);}.var-button__content { display: flex; align-items: center; flex-wrap: wrap;}.var-button__loading[var-button-cover] { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}.var-button--default { color: var(--button-default-text-color); background-color: var(--button-default-color);}.var-button--primary { color: #fff; background-color: var(--button-primary-color);}.var-button--info { color: #fff; background-color: var(--button-info-color);}.var-button--success { color: #fff; background-color: var(--button-success-color);}.var-button--warning { color: #fff; background-color: var(--button-warning-color);}.var-button--danger { color: #fff; background-color: var(--button-danger-color);}.var-button--disabled { background-color: var(--button-disabled-color); color: var(--button-disabled-text-color); cursor: not-allowed; box-shadow: none !important;}.var-button--loading { cursor: default;}.var-button--block { width: 100%;}.var-button--text { background-color: transparent;}.var-button--text:active { box-shadow: none;}.var-button--text-default { color: inherit;}.var-button--text-primary { color: var(--button-primary-color);}.var-button--text-info { color: var(--button-info-color);}.var-button--text-success { color: var(--button-success-color);}.var-button--text-warning { color: var(--button-warning-color);}.var-button--text-danger { color: var(--button-danger-color);}.var-button--text-disabled { color: var(--button-disabled-text-color);}.var-button--normal { height: var(--button-normal-height); padding: var(--button-normal-padding); font-size: var(--button-normal-font-size);}.var-button--large { height: var(--button-large-height); padding: var(--button-large-padding); font-size: var(--button-large-font-size);}.var-button--small { height: var(--button-small-height); padding: var(--button-small-padding); font-size: var(--button-small-font-size);}.var-button--mini { height: var(--button-mini-height); padding: var(--button-mini-padding); font-size: var(--button-mini-font-size);}.var-button--round { padding: var(--button-round-padding); border-radius: 50%; height: auto;}.var-button--outline { border: thin solid currentColor;}.var-button--hidden { opacity: 0;}
+:root { --button-default-text-color: #555; --button-primary-text-color: var(--color-on-primary); --button-danger-text-color: var(--color-on-danger); --button-success-text-color: var(--color-on-success); --button-warning-text-color: var(--color-on-warning); --button-info-text-color: var(--color-on-info); --button-default-color: #f5f5f5; --button-primary-color: var(--color-primary); --button-danger-color: var(--color-danger); --button-success-color: var(--color-success); --button-warning-color: var(--color-warning); --button-info-color: var(--color-info); --button-default-icon-color: #555; --button-primary-icon-color: var(--color-on-primary-container); --button-danger-icon-color: var(--color-on-danger-container); --button-success-icon-color: var(--color-on-success-container); --button-warning-icon-color: var(--color-on-warning-container); --button-info-icon-color: var(--color-on-info-container); --button-default-icon-container-color: #f5f5f5; --button-primary-icon-container-color: var(--color-primary-container); --button-danger-icon-container-color: var(--color-danger-container); --button-success-icon-container-color: var(--color-success-container); --button-warning-icon-container-color: var(--color-warning-container); --button-info-icon-container-color: var(--color-info-container); --button-disabled-color: var(--color-disabled); --button-disabled-text-color: var(--color-text-disabled); --button-border-radius: 4px; --button-mini-padding: 0 8px; --button-small-padding: 0 12px; --button-normal-padding: 0 16px; --button-large-padding: 0 22px; --button-round-padding: 6px; --button-mini-height: 20px; --button-small-height: 28px; --button-normal-height: 36px; --button-large-height: 44px; --button-mini-font-size: var(--font-size-xs); --button-small-font-size: var(--font-size-sm); --button-normal-font-size: var(--font-size-md); --button-large-font-size: var(--font-size-lg);}.var-button { position: relative; justify-content: center; align-items: center; outline: none; border: none; border-radius: var(--button-border-radius); user-select: none; cursor: pointer; font-family: inherit; transition: box-shadow 0.2s, background-color 0.25s, border-radius 0.2s; will-change: box-shadow; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); white-space: nowrap;}.var-button:active { box-shadow: 0 3px 5px -1px var(--shadow-key-umbra-opacity), 0 5px 8px 0 var(--shadow-key-penumbra-opacity), 0 1px 14px 0 var(--shadow-key-ambient-opacity);}.var-button__content { display: flex; align-items: center; flex-wrap: wrap;}.var-button__loading[var-button-cover] { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}.var-button--default { color: var(--button-default-text-color); background-color: var(--button-default-color);}.var-button--primary { color: var(--button-primary-text-color); background-color: var(--button-primary-color);}.var-button--info { color: var(--button-info-text-color); background-color: var(--button-info-color);}.var-button--success { color: var(--button-success-text-color); background-color: var(--button-success-color);}.var-button--warning { color: var(--button-warning-text-color); background-color: var(--button-warning-color);}.var-button--danger { color: var(--button-danger-text-color); background-color: var(--button-danger-color);}.var-button--loading { cursor: default;}.var-button--block { width: 100%;}.var-button--text-default { color: inherit;}.var-button--text-primary { color: var(--button-primary-color);}.var-button--text-info { color: var(--button-info-color);}.var-button--text-success { color: var(--button-success-color);}.var-button--text-warning { color: var(--button-warning-color);}.var-button--text-danger { color: var(--button-danger-color);}.var-button--icon-container-default { color: var(--button-default-icon-color); background-color: var(--button-default-icon-container-color);}.var-button--icon-container-primary { color: var(--button-primary-icon-color); background-color: var(--button-primary-icon-container-color);}.var-button--icon-container-info { color: var(--button-info-icon-color); background-color: var(--button-info-icon-container-color);}.var-button--icon-container-success { color: var(--button-success-icon-color); background-color: var(--button-success-icon-container-color);}.var-button--icon-container-warning { color: var(--button-warning-icon-color); background-color: var(--button-warning-icon-container-color);}.var-button--icon-container-danger { color: var(--button-danger-icon-color); background-color: var(--button-danger-icon-container-color);}.var-button--normal { height: var(--button-normal-height); padding: var(--button-normal-padding); font-size: var(--button-normal-font-size);}.var-button--large { height: var(--button-large-height); padding: var(--button-large-padding); font-size: var(--button-large-font-size);}.var-button--small { height: var(--button-small-height); padding: var(--button-small-padding); font-size: var(--button-small-font-size);}.var-button--mini { height: var(--button-mini-height); padding: var(--button-mini-padding); font-size: var(--button-mini-font-size);}.var-button--round { padding: var(--button-round-padding); border-radius: 50%; height: auto;}.var-button--outline { border: thin solid currentColor;}.var-button--hidden { opacity: 0;}.var-button--disabled { background-color: var(--button-disabled-color); color: var(--button-disabled-text-color); cursor: not-allowed; box-shadow: none !important;}.var-button--text-disabled { color: var(--button-disabled-text-color);}.var-button--text { background-color: transparent;}.var-button--text:active { box-shadow: none;}

package/es/button/props.mjs

@@ -33,6 +33,7 @@ const props = {
   outline: Boolean,
   disabled: Boolean,
   autoLoading: Boolean,
+  iconContainer: Boolean,
   ripple: {
     type: Boolean,
     default: true

package/es/card/Card.mjs

@@ -169,7 +169,6 @@ function __render__(_ctx, _cache) {
               _renderSlot(_ctx.$slots, "close-button", {}, () => [
                 _createVNode(_component_var_button, {
                   "var-card-cover": "",
-                  round: "",
                   class: _normalizeClass(_ctx.classes(_ctx.n("close-button"), _ctx.n("$-elevation--6"))),
                   onClick: _withModifiers(_ctx.close, ["stop"])
                 }, {

package/es/card/card.css

@@ -1 +1 @@
-:root { --card-padding: 0 0 15px 0; --card-background: #fff; --card-outline-color: rgba(0, 0, 0, 0.12); --card-border-radius: 4px; --card-image-width: 100%; --card-row-image-width: 140px; --card-image-height: 200px; --card-row-height: 140px; --card-title-color: #333; --card-title-font-size: 20px; --card-title-padding: 0 12px; --card-title-margin: 15px 0 0 0; --card-title-row-margin: 12px 0; --card-subtitle-color: rgba(0, 0, 0, 0.6); --card-subtitle-font-size: 14px; --card-subtitle-padding: 0 12px; --card-subtitle-margin: 10px 0 0 0; --card-subtitle-row-margin: -8px 0 0 0; --card-description-color: rgba(0, 0, 0, 0.6); --card-description-font-size: 14px; --card-description-margin: 20px 0 0 0; --card-description-padding: 0 13px; --card-footer-padding: 0 12px; --card-footer-right: 13px; --card-footer-bottom: 9px; --card-footer-margin: 30px 0 0 0; --card-line-height: 22px; --card-row-line-height: 1.5; --card-floating-buttons-bottom: 16px; --card-floating-buttons-right: 16px; --card-floating-buttons-color: #fff; --card-close-button-icon-size: 24px; --card-close-button-size: 56px; --card-close-button-primary-color: #212121; --card-close-button-text-color: #fff;}.var-card { border-radius: var(--card-border-radius); overflow: hidden; width: 100%;}.var-card--outline { border: thin solid var(--card-outline-color);}.var-card__floater { display: flex; flex-direction: column; position: static; line-height: var(--card-line-height); background: var(--card-background); transition: background-color 0.25s, color 0.25s; transition-timing-function: cubic-bezier(0.45, 0.19, 0.06, 0.89);}.var-card__container { padding: var(--card-padding); flex-grow: 1; min-width: 0;}.var-card--layout-row .var-card__floater { min-height: var(--card-row-height); height: 100%; flex-direction: row; position: relative; line-height: var(--card-row-line-height);}.var-card__image { width: var(--card-image-width); height: var(--card-image-height); display: block;}.var-card--layout-row .var-card__image { width: var(--card-row-image-width); height: auto; display: block; flex-shrink: 0;}.var-card__title { font-size: var(--card-title-font-size); padding: var(--card-title-padding); margin: var(--card-title-margin); color: var(--card-title-color); word-break: break-word;}.var-card--layout-row .var-card__title { max-width: 100%; overflow: hidden; margin: var(--card-title-row-margin); text-overflow: ellipsis; white-space: nowrap;}.var-card__subtitle { font-size: var(--card-subtitle-font-size); color: var(--card-subtitle-color); padding: var(--card-subtitle-padding); margin: var(--card-subtitle-margin); word-break: break-word;}.var-card--layout-row .var-card__subtitle { margin: var(--card-subtitle-row-margin); text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;}.var-card__description { font-size: var(--card-description-font-size); color: var(--card-description-color); margin: var(--card-description-margin); padding: var(--card-description-padding); word-break: break-all;}.var-card__footer { display: flex; justify-content: flex-end; padding: var(--card-footer-padding); margin: var(--card-footer-margin);}.var-card--layout-row .var-card__footer { position: absolute; padding: 0; right: var(--card-footer-right); bottom: var(--card-footer-bottom);}.var-card__floating-content { overflow: hidden; transition-timing-function: cubic-bezier(0.45, 0.19, 0.06, 0.89);}.var-card__floating-buttons { position: fixed; bottom: var(--card-floating-buttons-bottom); right: var(--card-floating-buttons-right); color: var(--card-floating-buttons-color);}.var-card__close-button[var-card-cover] { width: var(--card-close-button-size); height: var(--card-close-button-size); background-color: var(--card-close-button-primary-color); color: var(--card-close-button-text-color);}.var-card__close-button-icon[var-card-cover] { font-size: var(--card-close-button-icon-size);}
+:root { --card-padding: 0 0 15px 0; --card-background: #fff; --card-outline-color: var(--color-outline); --card-border-radius: 4px; --card-image-width: 100%; --card-row-image-width: 140px; --card-image-height: 200px; --card-row-height: 140px; --card-title-color: #333; --card-title-font-size: 20px; --card-title-padding: 0 12px; --card-title-margin: 15px 0 0 0; --card-title-row-margin: 12px 0; --card-subtitle-color: rgba(0, 0, 0, 0.6); --card-subtitle-font-size: 14px; --card-subtitle-padding: 0 12px; --card-subtitle-margin: 10px 0 0 0; --card-subtitle-row-margin: -8px 0 0 0; --card-description-color: rgba(0, 0, 0, 0.6); --card-description-font-size: 14px; --card-description-margin: 20px 0 0 0; --card-description-padding: 0 13px; --card-footer-padding: 0 12px; --card-footer-right: 13px; --card-footer-bottom: 9px; --card-footer-margin: 30px 0 0 0; --card-line-height: 22px; --card-row-line-height: 1.5; --card-floating-buttons-bottom: 16px; --card-floating-buttons-right: 16px; --card-floating-buttons-color: #fff; --card-close-button-icon-size: 24px; --card-close-button-size: 56px; --card-close-button-primary-color: #212121; --card-close-button-text-color: #fff; --card-close-button-border-radius: 50%;}.var-card { border-radius: var(--card-border-radius); overflow: hidden; width: 100%;}.var-card__floater { display: flex; flex-direction: column; position: static; line-height: var(--card-line-height); background: var(--card-background); transition: background-color 0.25s, color 0.25s; transition-timing-function: cubic-bezier(0.45, 0.19, 0.06, 0.89);}.var-card__container { padding: var(--card-padding); flex-grow: 1; min-width: 0;}.var-card--layout-row .var-card__floater { min-height: var(--card-row-height); height: 100%; flex-direction: row; position: relative; line-height: var(--card-row-line-height);}.var-card__image { width: var(--card-image-width); height: var(--card-image-height); display: block; transition: all 0.25s;}.var-card--layout-row .var-card__image { width: var(--card-row-image-width); height: auto; display: block; flex-shrink: 0;}.var-card__title { font-size: var(--card-title-font-size); padding: var(--card-title-padding); margin: var(--card-title-margin); color: var(--card-title-color); word-break: break-word; transition: padding 0.25s, margin 0.25s, font-size 0.25s;}.var-card--layout-row .var-card__title { max-width: 100%; overflow: hidden; margin: var(--card-title-row-margin); text-overflow: ellipsis; white-space: nowrap;}.var-card__subtitle { font-size: var(--card-subtitle-font-size); color: var(--card-subtitle-color); padding: var(--card-subtitle-padding); margin: var(--card-subtitle-margin); word-break: break-word; transition: padding 0.25s, margin 0.25s, font-size 0.25s;}.var-card--layout-row .var-card__subtitle { margin: var(--card-subtitle-row-margin); text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;}.var-card__description { font-size: var(--card-description-font-size); color: var(--card-description-color); margin: var(--card-description-margin); padding: var(--card-description-padding); word-break: break-all; transition: padding 0.25s, margin 0.25s, font-size 0.25s;}.var-card__footer { display: flex; justify-content: flex-end; padding: var(--card-footer-padding); margin: var(--card-footer-margin); transition: all 0.25s;}.var-card--layout-row .var-card__footer { position: absolute; padding: 0; right: var(--card-footer-right); bottom: var(--card-footer-bottom);}.var-card__floating-content { overflow: hidden; transition-timing-function: cubic-bezier(0.45, 0.19, 0.06, 0.89);}.var-card__floating-buttons { position: fixed; bottom: var(--card-floating-buttons-bottom); right: var(--card-floating-buttons-right); color: var(--card-floating-buttons-color);}.var-card__close-button[var-card-cover] { width: var(--card-close-button-size); height: var(--card-close-button-size); background-color: var(--card-close-button-primary-color); color: var(--card-close-button-text-color); border-radius: var(--card-close-button-border-radius);}.var-card__close-button-icon[var-card-cover] { font-size: var(--card-close-button-icon-size);}.var-card--outline { border: thin solid var(--card-outline-color);}

package/es/cell/cell.css

@@ -1 +1 @@
-:root { --cell-color: var(--color-text); --cell-font-size: var(--font-size-md); --cell-description-font-size: var(--font-size-sm); --cell-description-color: rgba(0, 0, 0, 0.6); --cell-description-margin-top: 4px; --cell-padding: 10px 12px; --cell-min-height: 40px; --cell-border-color: #bcc2cb; --cell-border-left: 12px; --cell-border-right: 12px; --cell-icon-right: 8px; --cell-extra-left: 8px;}.var-cell { align-items: center; display: flex; min-height: var(--cell-min-height); outline: none; width: 100%; padding: var(--cell-padding); position: relative; box-sizing: border-box; font-size: var(--cell-font-size); color: var(--cell-color);}.var-cell--border::after { position: absolute; box-sizing: border-box; content: ' '; pointer-events: none; bottom: 0; right: var(--cell-border-right); left: var(--cell-border-left); border-bottom: 1px solid var(--cell-border-color); transform: scaleY(0.5);}.var-cell__icon { margin-right: var(--cell-icon-right); flex: 0;}.var-cell__content { flex: 1; min-width: 0;}.var-cell__title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}.var-cell__description { font-size: var(--cell-description-font-size); color: var(--cell-description-color); margin-top: var(--cell-description-margin-top);}.var-cell__extra { flex: 0; margin-left: var(--cell-extra-left);}.var-cell--cursor { cursor: pointer;}
+:root { --cell-color: var(--color-text); --cell-font-size: var(--font-size-md); --cell-description-font-size: var(--font-size-sm); --cell-description-color: rgba(0, 0, 0, 0.6); --cell-description-margin-top: 4px; --cell-padding: 10px 12px; --cell-min-height: 40px; --cell-border-color: var(--color-outline); --cell-border-left: 12px; --cell-border-right: 12px; --cell-icon-right: 8px; --cell-extra-left: 8px;}.var-cell { align-items: center; display: flex; min-height: var(--cell-min-height); outline: none; width: 100%; padding: var(--cell-padding); position: relative; box-sizing: border-box; font-size: var(--cell-font-size); color: var(--cell-color);}.var-cell--border::after { position: absolute; box-sizing: border-box; content: ' '; pointer-events: none; bottom: 0; right: var(--cell-border-right); left: var(--cell-border-left); border-bottom: 1px solid var(--cell-border-color); transform: scaleY(0.5); transition: border 0.25s;}.var-cell__icon { margin-right: var(--cell-icon-right); flex: 0;}.var-cell__content { flex: 1; min-width: 0;}.var-cell__title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}.var-cell__description { font-size: var(--cell-description-font-size); color: var(--cell-description-color); margin-top: var(--cell-description-margin-top);}.var-cell__extra { flex: 0; margin-left: var(--cell-extra-left);}.var-cell--cursor { cursor: pointer;}

package/es/chip/Chip.mjs

@@ -31,7 +31,7 @@ function __render__(_ctx, _cache) {
             /* CLASS */
           ),
           _renderSlot(_ctx.$slots, "right"),
-          _ctx.closeable || _ctx.closable ? (_openBlock(), _createElementBlock(
+          _ctx.closeable ? (_openBlock(), _createElementBlock(
             "span",
             {
               key: 0,

package/es/chip/chip.css

@@ -1 +1 @@
-:root { --chip-default-text-color: #555; --chip-default-color: #e0e0e0; --chip-primary-color: var(--color-primary); --chip-danger-color: var(--color-danger); --chip-success-color: var(--color-success); --chip-warning-color: var(--color-warning); --chip-info-color: var(--color-info); --chip-border-radius: 2px; --chip-normal-height: 32px; --chip-large-height: 40px; --chip-small-height: 24px; --chip-mini-height: 16px; --chip-round-radius: 100px; --chip-normal-padding: 0 10px; --chip-large-padding: 0 17px; --chip-small-padding: 0 6px; --chip-mini-padding: 0 4px; --chip-text-normal-margin: 0 5px; --chip-text-large-margin: 0 5px; --chip-text-small-margin: 0 3px; --chip-text-mini-margin: 0 2px; --chip-mini-font-size: var(--font-size-xs); --chip-small-font-size: var(--font-size-sm); --chip-normal-font-size: var(--font-size-md); --chip-large-font-size: var(--font-size-lg);}.var-fade-leave-to { opacity: 0;}.var-fade-leave-active { transition: opacity 0.3s;}.var-chip { justify-content: center; align-items: center; font-family: Roboto, sans-serif; border-radius: var(--chip-border-radius); cursor: default; border: thin solid transparent; vertical-align: middle; transition: background-color 0.25s;}.var-chip--default { color: var(--chip-default-text-color); background: var(--chip-default-color);}.var-chip--primary { color: #fff; background-color: var(--chip-primary-color);}.var-chip--info { color: #fff; background-color: var(--chip-info-color);}.var-chip--success { color: #fff; background-color: var(--chip-success-color);}.var-chip--warning { color: #fff; background-color: var(--chip-warning-color);}.var-chip--danger { color: #fff; background-color: var(--chip-danger-color);}.var-chip__plain { background-color: transparent;}.var-chip__plain:active { box-shadow: none;}.var-chip__plain-default { color: inherit; border-color: currentColor;}.var-chip__plain-primary { color: var(--chip-primary-color); border-color: currentColor;}.var-chip__plain-info { color: var(--chip-info-color); border-color: currentColor;}.var-chip__plain-success { color: var(--chip-success-color); border-color: currentColor;}.var-chip__plain-warning { color: var(--chip-warning-color); border-color: currentColor;}.var-chip__plain-danger { color: var(--chip-danger-color); border-color: currentColor;}.var-chip--round { border-radius: var(--chip-round-radius);}.var-chip--normal { font-size: var(--chip-normal-font-size); padding: var(--chip-normal-padding); height: var(--chip-normal-height);}.var-chip--large { padding: var(--chip-large-padding); font-size: var(--chip-large-font-size); height: var(--chip-large-height);}.var-chip--small { padding: var(--chip-small-padding); font-size: var(--chip-small-font-size); height: var(--chip-small-height);}.var-chip--mini { padding: var(--chip-mini-padding); font-size: var(--chip-mini-font-size); height: var(--chip-mini-height);}.var-chip--close { cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);}.var-chip__text-large { margin: var(--chip-text-large-margin);}.var-chip__text-normal { margin: var(--chip-text-normal-margin);}.var-chip__text-small { margin: var(--chip-text-small-margin);}.var-chip__text-mini { margin: var(--chip-text-mini-margin);}
+:root { --chip-default-text-color: #555; --chip-primary-text-color: var(--color-on-primary-container); --chip-danger-text-color: var(--color-on-danger-container); --chip-success-text-color: var(--color-on-success-container); --chip-warning-text-color: var(--color-on-warning-container); --chip-info-text-color: var(--color-on-info-container); --chip-default-color: #e0e0e0; --chip-primary-color: var(--color-primary-container); --chip-danger-color: var(--color-danger-container); --chip-success-color: var(--color-success-container); --chip-warning-color: var(--color-warning-container); --chip-info-color: var(--color-info-container); --chip-primary-plain-color: var(--color-primary); --chip-danger-plain-color: var(--color-danger); --chip-success-plain-color: var(--color-success); --chip-warning-plain-color: var(--color-warning); --chip-info-plain-color: var(--color-info); --chip-border-radius: 2px; --chip-normal-height: 32px; --chip-large-height: 40px; --chip-small-height: 24px; --chip-mini-height: 16px; --chip-round-radius: 100px; --chip-normal-padding: 0 10px; --chip-large-padding: 0 17px; --chip-small-padding: 0 6px; --chip-mini-padding: 0 4px; --chip-text-normal-margin: 0 5px; --chip-text-large-margin: 0 5px; --chip-text-small-margin: 0 3px; --chip-text-mini-margin: 0 2px; --chip-mini-font-size: var(--font-size-xs); --chip-small-font-size: var(--font-size-sm); --chip-normal-font-size: var(--font-size-md); --chip-large-font-size: var(--font-size-lg);}.var-fade-leave-to { opacity: 0;}.var-fade-leave-active { transition: opacity 0.3s;}.var-chip { justify-content: center; align-items: center; font-family: Roboto, sans-serif; border-radius: var(--chip-border-radius); cursor: default; border: thin solid transparent; vertical-align: middle; transition: background-color 0.25s, border-radius 0.25s;}.var-chip--default { color: var(--chip-default-text-color); background: var(--chip-default-color);}.var-chip--primary { color: var(--chip-primary-text-color); background-color: var(--chip-primary-color);}.var-chip--info { color: var(--chip-info-text-color); background-color: var(--chip-info-color);}.var-chip--success { color: var(--chip-success-text-color); background-color: var(--chip-success-color);}.var-chip--warning { color: var(--chip-warning-text-color); background-color: var(--chip-warning-color);}.var-chip--danger { color: var(--chip-danger-text-color); background-color: var(--chip-danger-color);}.var-chip__plain { background-color: transparent;}.var-chip__plain:active { box-shadow: none;}.var-chip__plain-default { color: inherit; border-color: currentColor;}.var-chip__plain-primary { color: var(--chip-primary-plain-color); border-color: currentColor;}.var-chip__plain-info { color: var(--chip-info-plain-color); border-color: currentColor;}.var-chip__plain-success { color: var(--chip-success-plain-color); border-color: currentColor;}.var-chip__plain-warning { color: var(--chip-warning-plain-color); border-color: currentColor;}.var-chip__plain-danger { color: var(--chip-danger-plain-color); border-color: currentColor;}.var-chip--round { border-radius: var(--chip-round-radius);}.var-chip--normal { font-size: var(--chip-normal-font-size); padding: var(--chip-normal-padding); height: var(--chip-normal-height);}.var-chip--large { padding: var(--chip-large-padding); font-size: var(--chip-large-font-size); height: var(--chip-large-height);}.var-chip--small { padding: var(--chip-small-padding); font-size: var(--chip-small-font-size); height: var(--chip-small-height);}.var-chip--mini { padding: var(--chip-mini-padding); font-size: var(--chip-mini-font-size); height: var(--chip-mini-height);}.var-chip--close { cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);}.var-chip__text-large { margin: var(--chip-text-large-margin);}.var-chip__text-normal { margin: var(--chip-text-normal-margin);}.var-chip__text-small { margin: var(--chip-text-small-margin);}.var-chip__text-mini { margin: var(--chip-text-mini-margin);}

package/es/chip/props.mjs

@@ -19,8 +19,6 @@ const props = {
     default: true
   },
   block: Boolean,
-  /** @deprecated Use closeable to instead. */
-  closable: Boolean,
   closeable: Boolean,
   onClose: defineListenerProp()
 };

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 { 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;}
+: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 var(--color-outline);}.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/countdown/countdown.css

@@ -1 +1 @@
-:root { --countdown-text-color: #555; --countdown-text-font-size: var(--font-size-lg);}.var-countdown { color: var(--countdown-text-color); font-size: var(--countdown-text-font-size);}
+:root { --countdown-text-color: var(--color-text); --countdown-text-font-size: var(--font-size-lg);}.var-countdown { color: var(--countdown-text-color); font-size: var(--countdown-text-font-size);}

package/es/date-picker/DatePicker.mjs

@@ -31,7 +31,7 @@ import {
 import { isArray, toNumber, doubleRaf, call } from "@varlet/shared";
 import { createNamespace, formatElevation } from "../utils/components.mjs";
 import { padStart } from "../utils/shared.mjs";
-import { pack } from "../locale/index.mjs";
+import { t } from "../locale/index.mjs";
 const { name, n, classes } = createNamespace("date-picker");
 import { toDisplayString as _toDisplayString, normalizeClass as _normalizeClass, createElementVNode as _createElementVNode, renderSlot as _renderSlot, createTextVNode as _createTextVNode, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, normalizeProps as _normalizeProps, mergeProps as _mergeProps, Transition as _Transition, withCtx as _withCtx, createVNode as _createVNode, normalizeStyle as _normalizeStyle, resolveComponent as _resolveComponent, createBlock as _createBlock } from "vue";
 function __render__(_ctx, _cache) {
@@ -49,7 +49,7 @@ function __render__(_ctx, _cache) {
         "div",
         {
           class: _normalizeClass(_ctx.n("title")),
-          style: _normalizeStyle({ background: _ctx.titleColor || _ctx.headerColor || _ctx.color })
+          style: _normalizeStyle({ background: _ctx.titleColor || _ctx.color })
         },
         [
           _createElementVNode(
@@ -63,7 +63,7 @@ function __render__(_ctx, _cache) {
                 {
                   class: _normalizeClass(_ctx.n("title-hint"))
                 },
-                _toDisplayString((_a = _ctx.hint) != null ? _a : _ctx.pack.datePickerHint),
+                _toDisplayString((_a = _ctx.hint) != null ? _a : _ctx.t("datePickerHint")),
                 3
                 /* TEXT, CLASS */
               ),
@@ -341,7 +341,7 @@ const __sfc__ = defineComponent({
       if (range) {
         return chooseRangeYear.value.length ? `${chooseRangeYear.value[0]} ~ ${chooseRangeYear.value[1]}` : "";
       }
-      return multiple ? `${chooseYears.value.length}${pack.value.datePickerSelected}` : (_a = chooseYear.value) != null ? _a : "";
+      return multiple ? `${chooseYears.value.length}${t("datePickerSelected")}` : (_a = chooseYear.value) != null ? _a : "";
     });
     const getMonthTitle = computed(() => {
       var _a, _b;
@@ -351,9 +351,9 @@ const __sfc__ = defineComponent({
       }
       let monthName = "";
       if (chooseMonth.value) {
-        monthName = (_b = (_a = pack.value.datePickerMonthDict) == null ? void 0 : _a[chooseMonth.value].name) != null ? _b : "";
+        monthName = (_b = (_a = t("datePickerMonthDict")) == null ? void 0 : _a[chooseMonth.value].name) != null ? _b : "";
       }
-      return multiple ? `${chooseMonths.value.length}${pack.value.datePickerSelected}` : monthName;
+      return multiple ? `${chooseMonths.value.length}${t("datePickerSelected")}` : monthName;
     });
     const getDateTitle = computed(() => {
       var _a, _b, _c, _d;
@@ -363,15 +363,15 @@ const __sfc__ = defineComponent({
         return formatRangeDays.length ? `${formatRangeDays[0]} ~ ${formatRangeDays[1]}` : "";
       }
       if (multiple)
-        return `${chooseDays.value.length}${pack.value.datePickerSelected}`;
+        return `${chooseDays.value.length}${t("datePickerSelected")}`;
       if (!chooseYear.value || !chooseMonth.value || !chooseDay.value)
         return "";
       const weekIndex = dayjs(`${chooseYear.value}-${chooseMonth.value}-${chooseDay.value}`).day();
       const week = WEEK_HEADER.find((value) => value === `${weekIndex}`);
-      const weekName = (_b = (_a = pack.value.datePickerWeekDict) == null ? void 0 : _a[week].name) != null ? _b : "";
-      const monthName = (_d = (_c = pack.value.datePickerMonthDict) == null ? void 0 : _c[chooseMonth.value].name) != null ? _d : "";
+      const weekName = (_b = (_a = t("datePickerWeekDict")) == null ? void 0 : _a[week].name) != null ? _b : "";
+      const monthName = (_d = (_c = t("datePickerMonthDict")) == null ? void 0 : _c[chooseMonth.value].name) != null ? _d : "";
       const showDay = padStart(chooseDay.value, 2, "0");
-      if (pack.value.lang === "zh-CN")
+      if (t("lang") === "zh-CN")
         return `${chooseMonth.value}-${showDay} ${weekName.slice(0, 3)}`;
       return `${weekName.slice(0, 3)}, ${monthName.slice(0, 3)} ${chooseDay.value}`;
     });
@@ -663,7 +663,7 @@ const __sfc__ = defineComponent({
       componentProps,
       slotProps,
       formatRange,
-      pack,
+      t,
       n,
       classes,
       clickEl,

package/es/date-picker/date-picker.css

@@ -1 +1 @@
-:root { --date-picker-border-radius: 4px; --date-picker-font-size: var(--font-size-md); --date-picker-min-width: 290px; --date-picker-main-color: rgba(0, 0, 0, 0.87); --date-picker-title-hint-font-size: var(--font-size-md); --date-picker-title-height: 105px; --date-picker-title-padding: 16px; --date-picker-title-background: var(--color-primary); --date-picker-title-color: #fff; --date-picker-title-year-font-size: var(--font-size-md); --date-picker-title-year-font-weight: 500; --date-picker-title-year-margin-bottom: 8px; --date-picker-title-date-height: 48px; --date-picker-title-date-font-size: 34px; --date-picker-title-date-font-weight: 500; --date-picker-title-date-range-font-size: 20px; --date-picker-body-background-color: #fff; --date-picker-body-height: 280px; --picker-header-padding: 4px 16px; --picker-header-color: #555; --picker-actions-padding: 0 8px 12px 8px; --month-picker-padding: 0 12px; --month-picker-item-width: 33%; --month-picker-item-height: 56px; --month-picker-item-button-max-width: 140px; --year-picker-padding: 0 12px; --year-picker-item-width: 33%; --year-picker-item-height: 56px; --year-picker-item-button-max-width: 140px; --day-picker-content-item-width: 14.28%; --day-picker-content-item-font-size: var(--font-size-sm); --day-picker-content-item-padding: 2px 0; --day-picker-content-item-button-width: 32px; --day-picker-content-item-button-height: 32px; --day-picker-content-item-button-font-size: var(--font-size-sm); --day-picker-head-item-color: rgba(0, 0, 0, 0.38); --day-picker-head-item-padding: 8px 0; --day-picker-head-item-font-weight: 600;}.var-date-picker { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); border-radius: var(--date-picker-border-radius); contain: layout style; display: flex; width: 100%; flex-direction: column; font-size: var(--date-picker-font-size); position: relative; min-width: var(--date-picker-min-width); overflow: hidden;}.var-date-picker ul { list-style: none; margin: 0; padding: 0;}.var-date-picker__title { min-height: var(--date-picker-title-height); padding: var(--date-picker-title-padding); color: var(--date-picker-title-color); background: var(--date-picker-title-background); display: flex; justify-content: space-between; flex-direction: column; flex-wrap: wrap;}.var-date-picker__title-select { display: inline-flex; align-items: center; justify-content: space-between; margin-bottom: var(--date-picker-title-year-margin-bottom);}.var-date-picker__title-hint { font-size: var(--date-picker-title-hint-font-size);}.var-date-picker__title-year { opacity: 0.6; cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); font-size: var(--date-picker-title-year-font-size); font-weight: var(--date-picker-title-year-font-weight); transition: 0.3s var(--cubic-bezier); margin-bottom: 0;}.var-date-picker__title-year--active { opacity: 1;}.var-date-picker__title-date { height: var(--date-picker-title-date-height); overflow: hidden; font-size: var(--date-picker-title-date-font-size); text-align: left; font-weight: var(--date-picker-title-date-font-weight); position: relative; cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); display: flex; align-items: center; opacity: 0.6; transition: 0.3s var(--cubic-bezier);}.var-date-picker__title-date--active { opacity: 1;}.var-date-picker__title-date--range { font-size: var(--date-picker-title-date-range-font-size);}.var-date-picker__body { position: relative; overflow: auto; height: var(--date-picker-body-height); background-color: var(--date-picker-body-background-color);}.var-date-picker__body::-webkit-scrollbar { display: none; width: 0; background: transparent;}.var-date-picker__actions { background-color: var(--date-picker-body-background-color); padding: var(--picker-actions-padding); display: flex; justify-content: flex-end;}.var-date-picker .var-picker-header { padding: var(--picker-header-padding); align-items: center; display: flex; justify-content: space-between; position: relative; color: var(--picker-header-color); background-color: var(--date-picker-body-background-color);}.var-date-picker .var-picker-header__value { flex: 1; text-align: center; position: relative; overflow: hidden; font-weight: 700; cursor: pointer; user-select: none;}.var-date-picker .var-picker-header__value div { width: 100%;}.var-date-picker .var-month-picker__content { padding: var(--month-picker-padding);}.var-date-picker .var-month-picker__content ul { display: flex; flex-wrap: wrap; justify-content: space-between;}.var-date-picker .var-month-picker__content ul li { width: var(--month-picker-item-width); display: flex; height: var(--month-picker-item-height); align-items: center; justify-content: center;}.var-date-picker .var-month-picker__button[var-month-picker-cover] { width: 100%; max-width: var(--month-picker-item-button-max-width);}.var-date-picker .var-month-picker__button[var-date-picker-color-cover='true'] { color: var(--date-picker-main-color);}.var-date-picker .var-month-picker__button--disabled { color: var(--color-text-disabled) !important; cursor: not-allowed;}.var-date-picker .var-year-picker { padding: var(--year-picker-padding); display: flex; flex-wrap: wrap; justify-content: space-between;}.var-date-picker .var-year-picker li { width: var(--year-picker-item-width); display: flex; height: var(--year-picker-item-height); align-items: center; justify-content: center;}.var-date-picker .var-year-picker__button[var-year-picker-cover] { width: 100%; max-width: var(--year-picker-item-button-max-width);}.var-date-picker .var-year-picker__button[var-date-picker-color-cover='true'] { color: var(--date-picker-main-color);}.var-date-picker .var-year-picker__button--disabled { color: var(--color-text-disabled) !important; cursor: not-allowed;}.var-date-picker .var-day-picker__content ul { display: flex; flex-wrap: wrap;}.var-date-picker .var-day-picker__content ul li { position: relative; display: flex; justify-content: center; width: var(--day-picker-content-item-width); font-size: var(--day-picker-content-item-font-size); padding: var(--day-picker-content-item-padding);}.var-date-picker .var-day-picker__head li { color: var(--day-picker-head-item-color); padding: var(--day-picker-head-item-padding); font-weight: var(--day-picker-head-item-font-weight);}.var-date-picker .var-day-picker__button[var-day-picker-cover] { width: var(--day-picker-content-item-button-width); height: var(--day-picker-content-item-button-height); font-size: var(--day-picker-content-item-button-font-size);}.var-date-picker .var-day-picker__button:not(.var-day-picker__button--usable) { cursor: unset;}.var-date-picker .var-day-picker__button[var-date-picker-color-cover='true'] { color: var(--date-picker-main-color);}.var-date-picker .var-day-picker__button--disabled { color: var(--color-text-disabled) !important; cursor: not-allowed;}.var-date-picker-translatey-enter-from { opacity: 0; transform: translateY(100%);}.var-date-picker-translatey-enter-active,.var-date-picker-reverse-translatey-enter-active { transition: 0.3s var(--cubic-bezier);}.var-date-picker-translatey-leave-active,.var-date-picker-reverse-translatey-leave-active { position: absolute; transition: 0.3s var(--cubic-bezier);}.var-date-picker-translatey-leave-to { opacity: 0; transform: translateY(-100%);}.var-date-picker-reverse-translatey-enter-from { opacity: 0; transform: translateY(-100%);}.var-date-picker-reverse-translatey-leave-to { opacity: 0; transform: translateY(100%);}.var-date-picker-panel-fade-enter-from,.var-date-picker-panel-fade-leave-to { transition: 0.3s var(--cubic-bezier); opacity: 0;}.var-date-picker-panel-fade-leave-active { position: absolute;}.var-date-picker-translatex-enter-from { opacity: 0; transform: translateX(100%);}.var-date-picker-reverse-translatex-enter-from { opacity: 0; transform: translateX(-100%);}.var-date-picker-translatex-enter-active,.var-date-picker-reverse-translatex-enter-active { transition: 0.3s var(--cubic-bezier);}.var-date-picker-translatex-leave-active,.var-date-picker-reverse-translatex-leave-active { position: absolute; transition: 0.3s var(--cubic-bezier);}.var-date-picker-translatex-leave-to { opacity: 0; transform: translateX(-100%);}.var-date-picker-reverse-translatex-leave-to { opacity: 0; transform: translateX(100%);}
+:root { --date-picker-border-radius: 4px; --date-picker-font-size: var(--font-size-md); --date-picker-min-width: 290px; --date-picker-main-color: rgba(0, 0, 0, 0.87); --date-picker-title-hint-color: '#fff'; --date-picker-title-hint-font-size: var(--font-size-md); --date-picker-title-height: 105px; --date-picker-title-padding: 16px; --date-picker-title-background: var(--color-primary); --date-picker-title-color: #fff; --date-picker-title-year-font-size: var(--font-size-md); --date-picker-title-year-font-weight: 500; --date-picker-title-year-margin-bottom: 8px; --date-picker-title-date-height: 48px; --date-picker-title-date-font-size: 34px; --date-picker-title-date-font-weight: 500; --date-picker-title-date-range-font-size: 20px; --date-picker-body-background-color: #fff; --date-picker-body-height: 280px; --date-picker-body-padding: 0; --date-picker-header-padding: 4px 16px; --date-picker-header-color: #555; --date-picker-actions-padding: 0 8px 12px 8px; --date-picker-header-arrow-filter: opacity(0.54); --month-picker-padding: 0 12px; --month-picker-item-width: 33%; --month-picker-item-height: 56px; --month-picker-item-button-max-width: 140px; --year-picker-padding: 0 12px; --year-picker-item-width: 33%; --year-picker-item-height: 56px; --year-picker-item-button-max-width: 140px; --day-picker-content-item-width: 14.28%; --day-picker-content-item-font-size: var(--font-size-sm); --day-picker-content-item-padding: 2px 0; --day-picker-content-item-button-width: 32px; --day-picker-content-item-button-height: 32px; --day-picker-content-item-button-font-size: var(--font-size-sm); --day-picker-head-item-color: rgba(0, 0, 0, 0.38); --day-picker-head-item-padding: 8px 0; --day-picker-head-item-font-weight: 600;}.var-date-picker { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); border-radius: var(--date-picker-border-radius); contain: layout style; display: flex; width: 100%; flex-direction: column; font-size: var(--date-picker-font-size); position: relative; min-width: var(--date-picker-min-width); overflow: hidden;}.var-date-picker ul { list-style: none; margin: 0; padding: 0;}.var-date-picker__title { min-height: var(--date-picker-title-height); padding: var(--date-picker-title-padding); color: var(--date-picker-title-color); background: var(--date-picker-title-background); display: flex; justify-content: space-between; flex-direction: column; flex-wrap: wrap;}.var-date-picker__title-select { display: inline-flex; align-items: center; justify-content: space-between; margin-bottom: var(--date-picker-title-year-margin-bottom);}.var-date-picker__title-hint { color: var(--date-picker-title-hint-color); font-size: var(--date-picker-title-hint-font-size);}.var-date-picker__title-year { cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); font-size: var(--date-picker-title-year-font-size); font-weight: var(--date-picker-title-year-font-weight); transition: 0.3s var(--cubic-bezier); margin-bottom: 0;}.var-date-picker__title-year--active { opacity: 1;}.var-date-picker__title-date { height: var(--date-picker-title-date-height); overflow: hidden; font-size: var(--date-picker-title-date-font-size); text-align: left; font-weight: var(--date-picker-title-date-font-weight); position: relative; cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); display: flex; align-items: center; opacity: 0.6; transition: 0.3s var(--cubic-bezier);}.var-date-picker__title-date--active { opacity: 1;}.var-date-picker__title-date--range { font-size: var(--date-picker-title-date-range-font-size);}.var-date-picker__body { position: relative; overflow: auto; height: var(--date-picker-body-height); background-color: var(--date-picker-body-background-color); padding: var(--date-picker-body-padding);}.var-date-picker__body::-webkit-scrollbar { display: none; width: 0; background: transparent;}.var-date-picker__actions { background-color: var(--date-picker-body-background-color); padding: var(--date-picker-actions-padding); display: flex; justify-content: flex-end;}.var-date-picker-header { padding: var(--date-picker-header-padding); align-items: center; display: flex; justify-content: space-between; position: relative; color: var(--date-picker-header-color); background-color: var(--date-picker-body-background-color);}.var-date-picker-header__value { flex: 1; text-align: center; position: relative; overflow: hidden; font-weight: 700; cursor: pointer; user-select: none;}.var-date-picker-header__value div { width: 100%;}.var-date-picker-header__arrow[var-date-picker-header-cover] { filter: var(--date-picker-header-arrow-filter);}.var-date-picker .var-month-picker__content { padding: var(--month-picker-padding);}.var-date-picker .var-month-picker__content ul { display: flex; flex-wrap: wrap; justify-content: space-between;}.var-date-picker .var-month-picker__content ul li { width: var(--month-picker-item-width); display: flex; height: var(--month-picker-item-height); align-items: center; justify-content: center;}.var-date-picker .var-month-picker__button[var-month-picker-cover] { width: 100%; max-width: var(--month-picker-item-button-max-width);}.var-date-picker .var-month-picker__button[var-date-picker-color-cover='true'] { color: var(--date-picker-main-color);}.var-date-picker .var-month-picker__button--disabled { color: var(--color-text-disabled) !important; cursor: not-allowed;}.var-date-picker .var-year-picker { padding: var(--year-picker-padding); display: flex; flex-wrap: wrap; justify-content: space-between;}.var-date-picker .var-year-picker li { width: var(--year-picker-item-width); display: flex; height: var(--year-picker-item-height); align-items: center; justify-content: center;}.var-date-picker .var-year-picker__button[var-year-picker-cover] { width: 100%; max-width: var(--year-picker-item-button-max-width);}.var-date-picker .var-year-picker__button[var-date-picker-color-cover='true'] { color: var(--date-picker-main-color);}.var-date-picker .var-year-picker__button--disabled { color: var(--color-text-disabled) !important; cursor: not-allowed;}.var-date-picker .var-day-picker__content ul { display: flex; flex-wrap: wrap;}.var-date-picker .var-day-picker__content ul li { position: relative; display: flex; justify-content: center; width: var(--day-picker-content-item-width); font-size: var(--day-picker-content-item-font-size); padding: var(--day-picker-content-item-padding);}.var-date-picker .var-day-picker__head li { color: var(--day-picker-head-item-color); padding: var(--day-picker-head-item-padding); font-weight: var(--day-picker-head-item-font-weight);}.var-date-picker .var-day-picker__button[var-day-picker-cover] { width: var(--day-picker-content-item-button-width); height: var(--day-picker-content-item-button-height); font-size: var(--day-picker-content-item-button-font-size);}.var-date-picker .var-day-picker__button:not(.var-day-picker__button--usable) { cursor: unset;}.var-date-picker .var-day-picker__button[var-date-picker-color-cover='true'] { color: var(--date-picker-main-color);}.var-date-picker .var-day-picker__button--disabled { color: var(--color-text-disabled) !important; cursor: not-allowed;}.var-date-picker-translatey-enter-from { opacity: 0; transform: translateY(100%);}.var-date-picker-translatey-enter-active,.var-date-picker-reverse-translatey-enter-active { transition: 0.3s var(--cubic-bezier);}.var-date-picker-translatey-leave-active,.var-date-picker-reverse-translatey-leave-active { position: absolute; transition: 0.3s var(--cubic-bezier);}.var-date-picker-translatey-leave-to { opacity: 0; transform: translateY(-100%);}.var-date-picker-reverse-translatey-enter-from { opacity: 0; transform: translateY(-100%);}.var-date-picker-reverse-translatey-leave-to { opacity: 0; transform: translateY(100%);}.var-date-picker-panel-fade-enter-from,.var-date-picker-panel-fade-leave-to { transition: 0.3s var(--cubic-bezier); opacity: 0;}.var-date-picker-panel-fade-leave-active { position: absolute;}.var-date-picker-translatex-enter-from { opacity: 0; transform: translateX(100%);}.var-date-picker-reverse-translatex-enter-from { opacity: 0; transform: translateX(-100%);}.var-date-picker-translatex-enter-active,.var-date-picker-reverse-translatex-enter-active { transition: 0.3s var(--cubic-bezier);}.var-date-picker-translatex-leave-active,.var-date-picker-reverse-translatex-leave-active { position: absolute; transition: 0.3s var(--cubic-bezier);}.var-date-picker-translatex-leave-to { opacity: 0; transform: translateX(-100%);}.var-date-picker-reverse-translatex-leave-to { opacity: 0; transform: translateX(100%);}

package/es/date-picker/props.mjs

@@ -10,8 +10,6 @@ const props = {
   hint: String,
   allowedDates: Function,
   color: String,
-  /** @deprecated Use titleColor to instead. */
-  headerColor: String,
   titleColor: String,
   elevation: {
     type: [Boolean, Number, String],

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

@@ -29,7 +29,7 @@ import {
 import { WEEK_HEADER } from "../props.mjs";
 import { toNumber } from "@varlet/shared";
 import { createNamespace } from "../../utils/components.mjs";
-import { pack } from "../../locale/index.mjs";
+import { t } from "../../locale/index.mjs";
 import { onSmartMounted } from "@varlet/use";
 dayjs.extend(isSameOrBefore);
 dayjs.extend(isSameOrAfter);
@@ -196,7 +196,7 @@ const __sfc__ = defineComponent({
     });
     const getDayAbbr = (key) => {
       var _a, _b;
-      return (_b = (_a = pack.value.datePickerWeekDict) == null ? void 0 : _a[key].abbr) != null ? _b : "";
+      return (_b = (_a = t("datePickerWeekDict")) == null ? void 0 : _a[key].abbr) != null ? _b : "";
     };
     const filterDay = (day) => day > 0 ? day : "";
     const initDate = () => {

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

@@ -23,7 +23,7 @@ import PanelHeader from "./panel-header.mjs";
 import VarButton from "../../button/index.mjs";
 import { toNumber } from "@varlet/shared";
 import { createNamespace } from "../../utils/components.mjs";
-import { pack } from "../../locale/index.mjs";
+import { t } from "../../locale/index.mjs";
 dayjs.extend(isSameOrBefore);
 dayjs.extend(isSameOrAfter);
 const { n, classes } = createNamespace("month-picker");
@@ -141,7 +141,7 @@ const __sfc__ = defineComponent({
     const isCurrentYear = computed(() => props.preview.previewYear === currentYear);
     const getMonthAbbr = (key) => {
       var _a, _b;
-      return (_b = (_a = pack.value.datePickerMonthDict) == null ? void 0 : _a[key].abbr) != null ? _b : "";
+      return (_b = (_a = t("datePickerMonthDict")) == null ? void 0 : _a[key].abbr) != null ? _b : "";
     };
     const inRange = (key) => {
       const {
@@ -261,7 +261,7 @@ const __sfc__ = defineComponent({
     return {
       n,
       nDate,
-      pack,
+      t,
       MONTH_LIST,
       headerEl,
       reverse,

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

@@ -3,9 +3,9 @@ import VarIcon from "../../icon/index.mjs";
 import { defineComponent, ref, computed, watch } from "vue";
 import { toNumber } from "@varlet/shared";
 import { createNamespace } from "../../utils/components.mjs";
-import { pack } from "../../locale/index.mjs";
-const { n } = createNamespace("picker-header");
-import { resolveComponent as _resolveComponent, createVNode as _createVNode, withCtx as _withCtx, toDisplayString as _toDisplayString, openBlock as _openBlock, createElementBlock as _createElementBlock, Transition as _Transition, normalizeClass as _normalizeClass, createElementVNode as _createElementVNode } from "vue";
+import { t } from "../../locale/index.mjs";
+const { n } = createNamespace("date-picker-header");
+import { resolveComponent as _resolveComponent, createVNode as _createVNode, normalizeClass as _normalizeClass, withCtx as _withCtx, toDisplayString as _toDisplayString, openBlock as _openBlock, createElementBlock as _createElementBlock, Transition as _Transition, createElementVNode as _createElementVNode } from "vue";
 function __render__(_ctx, _cache) {
   const _component_var_icon = _resolveComponent("var-icon");
   const _component_var_button = _resolveComponent("var-button");
@@ -16,9 +16,10 @@ function __render__(_ctx, _cache) {
     },
     [
       _createVNode(_component_var_button, {
+        class: _normalizeClass(_ctx.n("arrow")),
+        "var-date-picker-header-cover": "",
         round: "",
         text: "",
-        style: { "filter": "opacity(0.54)" },
         disabled: _ctx.disabled.left,
         onClick: _cache[0] || (_cache[0] = ($event) => _ctx.checkDate("prev"))
       }, {
@@ -27,7 +28,7 @@ function __render__(_ctx, _cache) {
         ]),
         _: 1
         /* STABLE */
-      }, 8, ["disabled"]),
+      }, 8, ["class", "disabled"]),
       _createElementVNode(
         "div",
         {
@@ -55,9 +56,10 @@ function __render__(_ctx, _cache) {
         /* CLASS */
       ),
       _createVNode(_component_var_button, {
+        class: _normalizeClass(_ctx.n("arrow")),
+        "var-date-picker-header-cover": "",
         round: "",
         text: "",
-        style: { "filter": "opacity(0.54)" },
         disabled: _ctx.disabled.right,
         onClick: _cache[2] || (_cache[2] = ($event) => _ctx.checkDate("next"))
       }, {
@@ -66,7 +68,7 @@ function __render__(_ctx, _cache) {
         ]),
         _: 1
         /* STABLE */
-      }, 8, ["disabled"])
+      }, 8, ["class", "disabled"])
     ],
     2
     /* CLASS */
@@ -104,8 +106,8 @@ const __sfc__ = defineComponent({
         return previewYear;
       if (type === "month")
         return toNumber(previewYear) + forwardOrBackNum.value;
-      const monthName = (_a = pack.value.datePickerMonthDict) == null ? void 0 : _a[previewMonth].name;
-      return pack.value.lang === "zh-CN" ? `${previewYear} ${monthName}` : `${monthName} ${previewYear}`;
+      const monthName = (_a = t("datePickerMonthDict")) == null ? void 0 : _a[previewMonth].name;
+      return t("lang") === "zh-CN" ? `${previewYear} ${monthName}` : `${monthName} ${previewYear}`;
     });
     const checkDate = (checkType) => {
       if (checkType === "prev" && props.disabled.left || checkType === "next" && props.disabled.right)

package/es/dialog/Dialog.mjs

@@ -18,7 +18,7 @@ import VarPopup from "../popup/index.mjs";
 import VarButton from "../button/index.mjs";
 import { props } from "./props.mjs";
 import { defineComponent, ref, watch } from "vue";
-import { pack } from "../locale/index.mjs";
+import { t } from "../locale/index.mjs";
 import { createNamespace } from "../utils/components.mjs";
 import { toSizeUnit } from "../utils/elements.mjs";
 import { call } from "@varlet/shared";
@@ -62,7 +62,7 @@ function __render__(_ctx, _cache) {
                 var _a;
                 return [
                   _createTextVNode(
-                    _toDisplayString((_a = _ctx.title) != null ? _a : _ctx.pack.dialogTitle),
+                    _toDisplayString((_a = _ctx.title) != null ? _a : _ctx.t("dialogTitle")),
                     1
                     /* TEXT */
                   )
@@ -109,7 +109,7 @@ function __render__(_ctx, _cache) {
                   var _a;
                   return [
                     _createTextVNode(
-                      _toDisplayString((_a = _ctx.cancelButtonText) != null ? _a : _ctx.pack.dialogCancelButtonText),
+                      _toDisplayString((_a = _ctx.cancelButtonText) != null ? _a : _ctx.t("dialogCancelButtonText")),
                       1
                       /* TEXT */
                     )
@@ -131,7 +131,7 @@ function __render__(_ctx, _cache) {
                   var _a;
                   return [
                     _createTextVNode(
-                      _toDisplayString((_a = _ctx.confirmButtonText) != null ? _a : _ctx.pack.dialogConfirmButtonText),
+                      _toDisplayString((_a = _ctx.confirmButtonText) != null ? _a : _ctx.t("dialogConfirmButtonText")),
                       1
                       /* TEXT */
                     )
@@ -216,7 +216,7 @@ const __sfc__ = defineComponent({
       call(props2["onUpdate:show"], false);
     }
     return {
-      pack,
+      t,
       popupShow,
       popupCloseOnClickOverlay,
       n,

package/es/divider/divider.css

@@ -1 +1 @@
-:root { --divider-color: rgba(0, 0, 0, 0.12); --divider-text-color: #888; --divider-text-margin: 8px 0; --divider-text-padding: 0 8px; --divider-inset: 72px;}.var-divider { position: relative; width: 100%; height: 0; border: none; border-top: 1px solid var(--divider-color); margin: var(--divider-text-margin); font-size: var(--font-size-md); color: var(--divider-text-color);}.var-divider--vertical { width: 0; height: auto; align-self: stretch; margin: 0 var(--divider-text-margin); border-top: none; border-left: 1px solid var(--divider-color);}.var-divider--inset { width: calc(100% - var(--divider-inset)); left: var(--divider-inset);}.var-divider__text { display: inline-block; padding: var(--divider-text-padding);}.var-divider--with-text { background-color: transparent; height: fit-content; display: flex; align-items: center; justify-content: center; border: none;}.var-divider--with-text::before,.var-divider--with-text::after { display: inline-block; content: ''; flex: 1; height: 0; border-top: 1px solid var(--divider-color);}.var-divider--dashed { border-top-style: dashed;}.var-divider--dashed.var-divider--vertical { border-top: none; border-left-style: dashed;}.var-divider--hairline { transform: scaleY(0.5);}.var-divider--hairline.var-divider--with-text { transform: none;}.var-divider--hairline.var-divider--with-text::before,.var-divider--hairline.var-divider--with-text::after { transform: scaleY(0.5);}.var-divider--hairline.var-divider--vertical { transform: scaleX(0.5);}
+:root { --divider-color: var(--color-outline); --divider-text-color: #888; --divider-text-margin: 8px 0; --divider-text-padding: 0 8px; --divider-inset: 72px;}.var-divider { position: relative; width: 100%; height: 0; border: none; border-top: 1px solid var(--divider-color); margin: var(--divider-text-margin); font-size: var(--font-size-md); color: var(--divider-text-color);}.var-divider--vertical { width: 0; height: auto; align-self: stretch; margin: 0 var(--divider-text-margin); border-top: none; border-left: 1px solid var(--divider-color);}.var-divider--inset { width: calc(100% - var(--divider-inset)); left: var(--divider-inset);}.var-divider__text { display: inline-block; padding: var(--divider-text-padding);}.var-divider--with-text { background-color: transparent; height: fit-content; display: flex; align-items: center; justify-content: center; border: none;}.var-divider--with-text::before,.var-divider--with-text::after { display: inline-block; content: ''; flex: 1; height: 0; border-top: 1px solid var(--divider-color);}.var-divider--dashed { border-top-style: dashed;}.var-divider--dashed.var-divider--vertical { border-top: none; border-left-style: dashed;}.var-divider--hairline { transform: scaleY(0.5);}.var-divider--hairline.var-divider--with-text { transform: none;}.var-divider--hairline.var-divider--with-text::before,.var-divider--hairline.var-divider--with-text::after { transform: scaleY(0.5);}.var-divider--hairline.var-divider--vertical { transform: scaleX(0.5);}

package/es/fab/Fab.mjs

@@ -85,7 +85,7 @@ var stdin_default = defineComponent({
         "color": props2.color,
         "disabled": props2.disabled,
         "elevation": props2.elevation,
-        "round": true
+        "iconContainer": true
       }, {
         default: () => [_createVNode(Icon, {
           "var-fab-cover": true,

package/es/fab/fab.css

@@ -1 +1 @@
-:root { --fab-top: 70px; --fab-bottom: 16px; --fab-left: 16px; --fab-right: 16px; --fab-trigger-size: 56px; --fab-trigger-inactive-icon-size: 26px; --fab-trigger-active-icon-size: 22px; --fab-actions-padding: 10px 0; --fab-action-margin: 6px; --fab-transition-standard-easing: cubic-bezier(0.4, 0, 0.2, 1);}.var-fab-transition-default-enter-active { transition: 0.3s var(--fab-transition-standard-easing) !important;}.var-fab-transition-default-leave-active { transition: 0.3s var(--fab-transition-standard-easing) !important;}.var-fab__trigger[var-fab-cover] { width: var(--fab-trigger-size); height: var(--fab-trigger-size);}.var-fab__trigger-inactive-icon[var-fab-cover] { font-size: var(--fab-trigger-inactive-icon-size);}.var-fab__trigger-active-icon[var-fab-cover] { font-size: var(--fab-trigger-active-icon-size);}.var-fab__actions { position: absolute; display: flex; justify-content: center; align-items: center; padding: var(--fab-actions-padding);}.var-fab__action { margin: var(--fab-action-margin);}.var-fab--position-left-top { top: var(--fab-top); left: var(--fab-left);}.var-fab--position-right-top { top: var(--fab-top); right: var(--fab-right);}.var-fab--position-left-bottom { bottom: var(--fab-bottom); left: var(--fab-left);}.var-fab--position-right-bottom { bottom: var(--fab-bottom); right: var(--fab-right);}.var-fab--direction-left .var-fab__actions,.var-fab--direction-right .var-fab__actions { height: 100%; top: 0; padding: 0 var(--fab-actions-padding);}.var-fab--direction-left .var-fab__actions { flex-direction: row-reverse; right: 100%;}.var-fab--direction-right .var-fab__actions { flex-direction: row; left: 100%;}.var-fab--direction-top .var-fab__actions,.var-fab--direction-bottom .var-fab__actions { width: 100%; left: 0;}.var-fab--direction-top .var-fab__actions { flex-direction: column-reverse; bottom: 100%;}.var-fab--direction-bottom .var-fab__actions { flex-direction: column; top: 100%;}.var-fab--fixed { position: fixed;}.var-fab--absolute { position: absolute;}.var-fab--active-transition-enter-active { transition: 0.3s var(--fab-transition-standard-easing) !important;}.var-fab--active-transition-leave-active { transition: 0.3s var(--fab-transition-standard-easing) !important;}.var-fab--active-transition-enter-from,.var-fab--active-transition-leave-to { transform: scale(0);}.var-fab--actions-transition-top-enter-active { transition: 0.3s var(--fab-transition-standard-easing) !important;}.var-fab--actions-transition-top-leave-active { transition: 0.3s var(--fab-transition-standard-easing) !important;}.var-fab--actions-transition-top-enter-from,.var-fab--actions-transition-top-leave-to { opacity: 0; transform: translateY(40px);}.var-fab--actions-transition-bottom-enter-active { transition: 0.3s var(--fab-transition-standard-easing) !important;}.var-fab--actions-transition-bottom-leave-active { transition: 0.3s var(--fab-transition-standard-easing) !important;}.var-fab--actions-transition-bottom-enter-from,.var-fab--actions-transition-bottom-leave-to { opacity: 0; transform: translateY(-40px);}.var-fab--actions-transition-left-enter-active { transition: 0.3s var(--fab-transition-standard-easing) !important;}.var-fab--actions-transition-left-leave-active { transition: 0.3s var(--fab-transition-standard-easing) !important;}.var-fab--actions-transition-left-enter-from,.var-fab--actions-transition-left-leave-to { opacity: 0; transform: translateX(40px);}.var-fab--actions-transition-right-enter-active { transition: 0.3s var(--fab-transition-standard-easing) !important;}.var-fab--actions-transition-right-leave-active { transition: 0.3s var(--fab-transition-standard-easing) !important;}.var-fab--actions-transition-right-enter-from,.var-fab--actions-transition-right-leave-to { opacity: 0; transform: translateX(-40px);}.var-fab--trigger-icon-animation { transform: scale(0.4); opacity: 0; transition-property: transform, opacity;}.var-fab--safe-area { margin-bottom: constant(safe-area-inset-bottom); margin-bottom: env(safe-area-inset-bottom);}
+:root { --fab-top: 70px; --fab-bottom: 16px; --fab-left: 16px; --fab-right: 16px; --fab-trigger-size: 56px; --fab-trigger-border-radius: 50%; --fab-trigger-inactive-icon-size: 26px; --fab-trigger-active-icon-size: 22px; --fab-actions-padding: 10px 0; --fab-action-margin: 6px; --fab-action-size: 40px; --fab-action-border-radius: 50%; --fab-transition-standard-easing: cubic-bezier(0.4, 0, 0.2, 1);}.var-fab-transition-default-enter-active { transition: 0.3s var(--fab-transition-standard-easing) !important;}.var-fab-transition-default-leave-active { transition: 0.3s var(--fab-transition-standard-easing) !important;}.var-fab__trigger[var-fab-cover] { width: var(--fab-trigger-size); height: var(--fab-trigger-size); border-radius: var(--fab-trigger-border-radius);}.var-fab__trigger-inactive-icon[var-fab-cover] { font-size: var(--fab-trigger-inactive-icon-size);}.var-fab__trigger-active-icon[var-fab-cover] { font-size: var(--fab-trigger-active-icon-size);}.var-fab__actions { position: absolute; display: flex; justify-content: center; align-items: center; padding: var(--fab-actions-padding);}.var-fab__action { margin: var(--fab-action-margin);}.var-fab__action .var-button { width: var(--fab-action-size); height: var(--fab-action-size); border-radius: var(--fab-action-border-radius);}.var-fab--position-left-top { top: var(--fab-top); left: var(--fab-left);}.var-fab--position-right-top { top: var(--fab-top); right: var(--fab-right);}.var-fab--position-left-bottom { bottom: var(--fab-bottom); left: var(--fab-left);}.var-fab--position-right-bottom { bottom: var(--fab-bottom); right: var(--fab-right);}.var-fab--direction-left .var-fab__actions,.var-fab--direction-right .var-fab__actions { height: 100%; top: 0; padding: 0 var(--fab-actions-padding);}.var-fab--direction-left .var-fab__actions { flex-direction: row-reverse; right: 100%;}.var-fab--direction-right .var-fab__actions { flex-direction: row; left: 100%;}.var-fab--direction-top .var-fab__actions,.var-fab--direction-bottom .var-fab__actions { width: 100%; left: 0;}.var-fab--direction-top .var-fab__actions { flex-direction: column-reverse; bottom: 100%;}.var-fab--direction-bottom .var-fab__actions { flex-direction: column; top: 100%;}.var-fab--fixed { position: fixed;}.var-fab--absolute { position: absolute;}.var-fab--active-transition-enter-active { transition: 0.3s var(--fab-transition-standard-easing) !important;}.var-fab--active-transition-leave-active { transition: 0.3s var(--fab-transition-standard-easing) !important;}.var-fab--active-transition-enter-from,.var-fab--active-transition-leave-to { transform: scale(0);}.var-fab--actions-transition-top-enter-active { transition: 0.3s var(--fab-transition-standard-easing) !important;}.var-fab--actions-transition-top-leave-active { transition: 0.3s var(--fab-transition-standard-easing) !important;}.var-fab--actions-transition-top-enter-from,.var-fab--actions-transition-top-leave-to { opacity: 0; transform: translateY(40px);}.var-fab--actions-transition-bottom-enter-active { transition: 0.3s var(--fab-transition-standard-easing) !important;}.var-fab--actions-transition-bottom-leave-active { transition: 0.3s var(--fab-transition-standard-easing) !important;}.var-fab--actions-transition-bottom-enter-from,.var-fab--actions-transition-bottom-leave-to { opacity: 0; transform: translateY(-40px);}.var-fab--actions-transition-left-enter-active { transition: 0.3s var(--fab-transition-standard-easing) !important;}.var-fab--actions-transition-left-leave-active { transition: 0.3s var(--fab-transition-standard-easing) !important;}.var-fab--actions-transition-left-enter-from,.var-fab--actions-transition-left-leave-to { opacity: 0; transform: translateX(40px);}.var-fab--actions-transition-right-enter-active { transition: 0.3s var(--fab-transition-standard-easing) !important;}.var-fab--actions-transition-right-leave-active { transition: 0.3s var(--fab-transition-standard-easing) !important;}.var-fab--actions-transition-right-enter-from,.var-fab--actions-transition-right-leave-to { opacity: 0; transform: translateX(-40px);}.var-fab--trigger-icon-animation { transform: scale(0.4); opacity: 0; transition-property: transform, opacity;}.var-fab--safe-area { margin-bottom: constant(safe-area-inset-bottom); margin-bottom: env(safe-area-inset-bottom);}