@varlet/ui 3.17.0 → 3.18.0-alpha.1781190469654

package/README.md

@@ -26,7 +26,7 @@ Varlet is a `Vue3` component library based on Material Design 2 and 3, supportin
 
 ### Features
 
-- 🚀   Provide 60+ high quality general purpose components
+- 🚀   Provide 70+ high quality general purpose components
 - 🚀   Components are very lightweight
 - 💪   Developed by Chinese, complete Chinese and English documentation and logistics support
 - 🛠️   Support on-demand introduction

package/README.zh-CN.md

@@ -26,7 +26,7 @@ Varlet 是一个 `Vue3` 组件库，基于 Material Design 2 和 3，支持移
 
 ### 特性
 
-- 🚀   提供 60+ 个高质量通用组件
+- 🚀   提供 70+ 个高质量通用组件
 - 🚀   组件十分轻量
 - 💪   由国人开发，完善的中英文文档和后勤保障
 - 🛠️   支持按需引入

package/es/action-sheet/style/index.mjs

@@ -3,5 +3,5 @@ import '../../icon/icon.css'
 import '../../ripple/ripple.css'
 import '../../popup/popup.css'
 import '../actionSheet.css'
-import '../ActionSheetSfc.css'
 import '../ActionItemSfc.css'
+import '../ActionSheetSfc.css'

package/es/app-bar/AppBar.mjs

@@ -19,6 +19,8 @@ function __render__(_ctx, _cache) {
             _ctx.n(),
             _ctx.n("$--box"),
             [_ctx.safeAreaTop, _ctx.n("--safe-area-top")],
+            [_ctx.type === "surface", _ctx.n("--surface")],
+            [_ctx.size === "large", _ctx.n("--large")],
             [_ctx.round, _ctx.n("--round")],
             [_ctx.fixed, _ctx.n("--fixed")],
             [_ctx.border, _ctx.n("--border")],

package/es/app-bar/appBar.css

@@ -1 +1 @@
-:root { --app-bar-color: var(--color-primary); --app-bar-title-padding: 0 12px; --app-bar-title-font-size: var(--font-size-lg); --app-bar-text-color: #fff; --app-bar-height: 54px; --app-bar-left-gap: 6px; --app-bar-right-gap: 6px; --app-bar-border-radius: 4px; --app-bar-font-size: var(--font-size-lg); --app-bar-border-bottom: thin solid var(--color-outline);}.var-app-bar { position: relative; width: 100%; font-size: var(--app-bar-font-size); background: var(--app-bar-color); color: var(--app-bar-text-color); transition: background-color 0.25s;}.var-app-bar__toolbar { position: relative; display: flex; justify-content: center; align-items: center; height: var(--app-bar-height);}.var-app-bar__title { font-size: var(--app-bar-title-font-size); flex: 1; height: 100%; display: flex; align-items: center; justify-content: center; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; padding: var(--app-bar-title-padding);}.var-app-bar__left,.var-app-bar__right { display: flex; align-items: center; height: 100%;}.var-app-bar__left { position: absolute; top: 0; left: var(--app-bar-left-gap);}.var-app-bar__right { position: absolute; top: 0; right: var(--app-bar-right-gap);}.var-app-bar--round { border-radius: var(--app-bar-border-radius);}.var-app-bar--safe-area-top { padding-top: constant(safe-area-inset-top); padding-top: env(safe-area-inset-top); box-sizing: content-box !important;}.var-app-bar--fixed { position: fixed; top: 0; left: 0;}.var-app-bar--border { border-bottom: var(--app-bar-border-bottom);}
+:root { --app-bar-color: var(--color-primary); --app-bar-title-padding: 0 12px; --app-bar-title-font-size: var(--font-size-lg); --app-bar-text-color: #fff; --app-bar-surface-color: #fff; --app-bar-surface-text-color: rgba(0, 0, 0, 0.87); --app-bar-surface-border-bottom: thin solid var(--color-outline); --app-bar-height: 54px; --app-bar-large-height: 64px; --app-bar-left-gap: 6px; --app-bar-right-gap: 6px; --app-bar-border-radius: 4px; --app-bar-font-size: var(--font-size-lg); --app-bar-border-bottom: thin solid var(--color-outline);}.var-app-bar { position: relative; width: 100%; font-size: var(--app-bar-font-size); background: var(--app-bar-color); color: var(--app-bar-text-color); transition: background-color 0.25s;}.var-app-bar__toolbar { position: relative; display: flex; justify-content: center; align-items: center; height: var(--app-bar-height);}.var-app-bar__title { font-size: var(--app-bar-title-font-size); flex: 1; height: 100%; display: flex; align-items: center; justify-content: center; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; padding: var(--app-bar-title-padding);}.var-app-bar__left,.var-app-bar__right { display: flex; align-items: center; height: 100%;}.var-app-bar__left { position: absolute; top: 0; left: var(--app-bar-left-gap);}.var-app-bar__right { position: absolute; top: 0; right: var(--app-bar-right-gap);}.var-app-bar--round { border-radius: var(--app-bar-border-radius);}.var-app-bar--large .var-app-bar__toolbar { height: var(--app-bar-large-height);}.var-app-bar--surface { background: var(--app-bar-surface-color); color: var(--app-bar-surface-text-color);}.var-app-bar--safe-area-top { padding-top: constant(safe-area-inset-top); padding-top: env(safe-area-inset-top); box-sizing: content-box !important;}.var-app-bar--fixed { position: fixed; top: 0; left: 0;}.var-app-bar--border { border-bottom: var(--app-bar-border-bottom);}.var-app-bar--surface.var-app-bar--border { border-bottom: var(--app-bar-surface-border-bottom);}

package/es/app-bar/props.mjs

@@ -1,4 +1,12 @@
 const props = {
+  type: {
+    type: String,
+    default: "primary"
+  },
+  size: {
+    type: String,
+    default: "normal"
+  },
   color: String,
   textColor: String,
   title: String,

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-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;}
+: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-flex; align-items: center; position: relative; vertical-align: middle; transition: background-color 0.25s;}.var-badge__content { display: inline-flex; align-items: center; justify-content: center; 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); line-height: 1;}.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-item/BottomNavigationItem.mjs

@@ -112,10 +112,10 @@ const __sfc__ = defineComponent({
   directives: { Ripple },
   props,
   setup(props2) {
+    const { index, bottomNavigation, bindBottomNavigation } = useBottomNavigation();
     const name2 = computed(() => props2.name);
     const isActive = computed(() => [name2.value, index.value].includes(active.value));
     const badgeProps = computed(() => props2.badge === true ? defaultBadgeProps : props2.badge);
-    const { index, bottomNavigation, bindBottomNavigation } = useBottomNavigation();
     const { animated, active, activeColor, inactiveColor, variant } = bottomNavigation;
     const bottomNavigationItemProvider = {
       name: name2,

package/es/bottom-navigation-item/bottomNavigationItem.css

@@ -1 +1 @@
-:root { --bottom-navigation-item-font-size: var(--font-size-sm); --bottom-navigation-item-inactive-color: #646566; --bottom-navigation-item-active-color: var(--color-primary); --bottom-navigation-item-active-background-color: var(--color-surface-container-high); --bottom-navigation-item-variant-active-background-color: var(--color-primary-container); --bottom-navigation-item-variant-active-color: var(--color-on-primary-container); --bottom-navigation-item-line-height: 1; --bottom-navigation-item-icon-size: 22px; --bottom-navigation-item-icon-margin-bottom: 5px; --bottom-navigation-item-variant-icon-container-height: 30px; --bottom-navigation-item-variant-icon-container-border-radius: 100px; --bottom-navigation-item-variant-icon-container-max-width: 58px;}.var-bottom-navigation-item { height: 100%; padding-bottom: 2px; position: relative; display: inline-flex; flex: 1 1 0%; flex-direction: column; align-items: center; justify-content: center; line-height: var(--bottom-navigation-item-line-height); color: var(--bottom-navigation-item-inactive-color); cursor: pointer; user-select: none; vertical-align: middle; appearance: none; text-decoration: none; background-color: transparent; outline: 0; border: 0; transition: color 250ms, margin 250ms;}.var-bottom-navigation-item--variant-padding { padding-bottom: 6px;}.var-bottom-navigation-item--active { color: var(--bottom-navigation-item-active-color); background-color: var(--bottom-navigation-item-active-background-color); transition: background-color 250ms;}.var-bottom-navigation-item--animated .var-bottom-navigation-item__label { font-size: calc(var(--bottom-navigation-item-font-size) * 1.16);}.var-bottom-navigation-item--variant-icon-container { display: flex; justify-content: center; align-items: center; width: 0; height: var(--bottom-navigation-item-variant-icon-container-height); border-radius: var(--bottom-navigation-item-variant-icon-container-border-radius); max-width: var(--bottom-navigation-item-variant-icon-container-max-width);}.var-bottom-navigation-item--variant-active { color: var(--bottom-navigation-item-variant-active-color); background-color: var(--bottom-navigation-item-variant-active-background-color); width: 100%; transition: background-color 0.25s, width 0.5s;}.var-bottom-navigation-item--right-half-space { margin-right: calc(var(--bottom-navigation-height) / 2);}.var-bottom-navigation-item--left-half-space { margin-left: calc(var(--bottom-navigation-height) / 2);}.var-bottom-navigation-item--right-space { margin-right: calc(var(--bottom-navigation-height) + var(--bottom-navigation-fab-offset));}.var-bottom-navigation-item__icon[var-bottom-navigation-item-cover] { font-size: var(--bottom-navigation-item-icon-size);}.var-bottom-navigation-item__badge[var-bottom-navigation-item-cover] { margin-top: 6px; margin-right: -4px;}.var-bottom-navigation-item__label { margin-top: var(--bottom-navigation-item-icon-margin-bottom); font-size: var(--bottom-navigation-item-font-size); transition: font-size 0.2s ease 0.1s; white-space: nowrap;}
+:root { --bottom-navigation-item-font-size: var(--font-size-sm); --bottom-navigation-item-inactive-color: #646566; --bottom-navigation-item-active-color: var(--color-primary); --bottom-navigation-item-active-background-color: var(--color-surface-container-high); --bottom-navigation-item-variant-active-background-color: var(--color-primary-container); --bottom-navigation-item-variant-active-color: var(--color-on-primary-container); --bottom-navigation-item-line-height: 1; --bottom-navigation-item-icon-size: 22px; --bottom-navigation-item-icon-margin-bottom: 5px; --bottom-navigation-item-variant-icon-margin-bottom: 6px; --bottom-navigation-item-variant-icon-container-height: 30px; --bottom-navigation-item-variant-icon-container-border-radius: 100px; --bottom-navigation-item-variant-icon-container-max-width: 58px;}.var-bottom-navigation-item { height: 100%; padding-bottom: 2px; position: relative; display: inline-flex; flex: 1 1 0%; flex-direction: column; align-items: center; justify-content: center; line-height: var(--bottom-navigation-item-line-height); color: var(--bottom-navigation-item-inactive-color); cursor: pointer; user-select: none; vertical-align: middle; appearance: none; text-decoration: none; background-color: transparent; outline: 0; border: 0; transition: color 250ms, margin 250ms;}.var-bottom-navigation-item--variant-padding { padding-bottom: 6px;}.var-bottom-navigation-item--active { color: var(--bottom-navigation-item-active-color); background-color: var(--bottom-navigation-item-active-background-color); transition: background-color 250ms;}.var-bottom-navigation-item--animated .var-bottom-navigation-item__label { font-size: calc(var(--bottom-navigation-item-font-size) * 1.16);}.var-bottom-navigation-item--variant-icon-container { display: flex; justify-content: center; align-items: center; width: 0; height: var(--bottom-navigation-item-variant-icon-container-height); border-radius: var(--bottom-navigation-item-variant-icon-container-border-radius); max-width: var(--bottom-navigation-item-variant-icon-container-max-width);}.var-bottom-navigation-item--variant-active { color: var(--bottom-navigation-item-variant-active-color); background-color: var(--bottom-navigation-item-variant-active-background-color); width: 100%; transition: background-color 0.25s, width 0.5s;}.var-bottom-navigation-item--right-half-space { margin-right: calc(var(--bottom-navigation-height) / 2);}.var-bottom-navigation-item--left-half-space { margin-left: calc(var(--bottom-navigation-height) / 2);}.var-bottom-navigation-item--right-space { margin-right: calc(var(--bottom-navigation-height) + var(--bottom-navigation-fab-offset));}.var-bottom-navigation-item__icon[var-bottom-navigation-item-cover] { font-size: var(--bottom-navigation-item-icon-size);}.var-bottom-navigation-item__badge[var-bottom-navigation-item-cover] { margin-top: 6px; margin-right: -4px;}.var-bottom-navigation-item__label { margin-top: var(--bottom-navigation-item-icon-margin-bottom); font-size: var(--bottom-navigation-item-font-size); transition: font-size 0.2s ease 0.1s; white-space: nowrap;}.var-bottom-navigation-item--variant-padding .var-bottom-navigation-item__label { margin-top: var(--bottom-navigation-item-variant-icon-margin-bottom);}

package/es/button/Button.mjs

@@ -1,4 +1,4 @@
-import { call, normalizeToArray } from "@varlet/shared";
+import { call, normalizeToArray, toNumber } from "@varlet/shared";
 import { computed, defineComponent, ref } from "vue";
 import Hover from "../hover/index.mjs";
 import VarHoverOverlay, { useHoverOverlay } from "../hover-overlay/index.mjs";
@@ -26,7 +26,9 @@ function __render__(_ctx, _cache) {
         [!_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.states.filledDefault, _ctx.n("--filled-default")],
         [_ctx.round, _ctx.n("--round")],
+        [_ctx.fab, _ctx.n("--fab")],
         [_ctx.states.outline, _ctx.n("--outline")],
         [_ctx.loading || _ctx.pending, _ctx.n("--loading")],
         [_ctx.disabled, _ctx.n("--disabled")],
@@ -88,20 +90,21 @@ const __sfc__ = defineComponent({
     const { buttonGroup } = useButtonGroup();
     const { hovering, handleHovering } = useHoverOverlay();
     const states = computed(() => {
-      var _a, _b, _c, _d, _e, _f;
+      var _a, _b, _c, _d, _e, _f, _g;
       if (!buttonGroup) {
         return {
-          elevation: formatElevation(props2.elevation, 2),
+          elevation: props2.tonal ? "" : formatElevation(props2.elevation, 2),
           type: (_a = props2.type) != null ? _a : "default",
           size: (_b = props2.size) != null ? _b : "normal",
           color: props2.color,
           text: props2.text,
           textColor: props2.textColor,
           outline: props2.outline,
-          iconContainer: props2.iconContainer
+          iconContainer: props2.tonal || props2.iconContainer,
+          filledDefault: (props2.type == null || props2.type === "default") && isFilledElevation(props2.elevation) && !props2.text && !props2.outline && !props2.tonal && !props2.iconContainer
         };
       }
-      const { type, size, color, textColor, mode } = buttonGroup;
+      const { type, size, color, textColor, mode, elevation } = buttonGroup;
       return {
         elevation: "",
         type: (_c = props2.type) != null ? _c : type.value,
@@ -110,7 +113,8 @@ const __sfc__ = defineComponent({
         textColor: (_f = props2.textColor) != null ? _f : textColor.value,
         text: mode.value === "text" || mode.value === "outline",
         outline: mode.value === "outline",
-        iconContainer: mode.value === "icon-container"
+        iconContainer: mode.value === "tonal" || mode.value === "icon-container",
+        filledDefault: mode.value === "normal" && ((_g = props2.type) != null ? _g : type.value) === "default" && isFilledElevation(elevation.value)
       };
     });
     function attemptAutoLoading(result) {
@@ -143,6 +147,9 @@ const __sfc__ = defineComponent({
       }
       isFocusing.value = true;
     }
+    function isFilledElevation(elevation) {
+      return elevation === false || toNumber(elevation) === 0;
+    }
     return {
       pending,
       states,

package/es/button/button.css

@@ -1 +1 @@
-: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: transparent; 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;}
+: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-default-filled-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-fab-size: 56px; --button-fab-border-radius: 16px; --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: transparent; 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--filled-default { background-color: var(--button-default-filled-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: wait;}.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--fab { width: var(--button-fab-size); height: var(--button-fab-size); padding: 0; border-radius: var(--button-fab-border-radius);}.var-button--round.var-button--fab { border-radius: 50%;}.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

@@ -28,11 +28,13 @@ const props = {
   size: String,
   loading: Boolean,
   round: Boolean,
+  fab: Boolean,
   block: Boolean,
   text: Boolean,
   outline: Boolean,
   disabled: Boolean,
   autoLoading: Boolean,
+  tonal: Boolean,
   iconContainer: Boolean,
   ripple: {
     type: Boolean,

package/es/collapse-transition/useCollapseTransition.mjs

@@ -23,16 +23,22 @@ import { nextTick, watch } from "vue";
 function useCollapseTransition(options) {
   const { contentEl, showContent, expand } = options;
   let isInitToTrigger = true;
+  let transitionVersion = 0;
+  let startedTransitionVersion = 0;
   watch(
     expand,
     (value) => {
+      const version = ++transitionVersion;
       nextTick(() => {
-        value ? open() : close();
+        value ? open(version) : close(version);
       });
     },
     { immediate: true }
   );
-  function open() {
+  function isLatestTransition(version) {
+    return version === transitionVersion;
+  }
+  function open(version) {
     return __async(this, null, function* () {
       if (!contentEl.value) {
         return;
@@ -40,13 +46,13 @@ function useCollapseTransition(options) {
       contentEl.value.style.height = "";
       showContent.value = true;
       yield raf();
-      if (!contentEl.value) {
+      if (!contentEl.value || !isLatestTransition(version)) {
         return;
       }
       const { offsetHeight } = contentEl.value;
       contentEl.value.style.height = "0px";
       yield raf();
-      if (!contentEl.value) {
+      if (!contentEl.value || !isLatestTransition(version)) {
         return;
       }
       contentEl.value.style.height = offsetHeight + "px";
@@ -54,27 +60,40 @@ function useCollapseTransition(options) {
         return;
       }
       yield doubleRaf();
-      if (isInitToTrigger) {
+      if (isInitToTrigger && isLatestTransition(version)) {
         handleTransitionEnd();
       }
     });
   }
-  const close = () => __async(null, null, function* () {
+  const close = (version) => __async(null, null, function* () {
     if (!contentEl.value) {
       return;
     }
     const { offsetHeight } = contentEl.value;
     contentEl.value.style.height = offsetHeight + "px";
     yield raf();
+    if (!contentEl.value || !isLatestTransition(version)) {
+      return;
+    }
     contentEl.value.style.height = "0px";
   });
-  const handleTransitionEnd = () => {
+  const handleTransitionEnd = (event) => {
+    if (event && (event.target !== contentEl.value || event.propertyName !== "height")) {
+      return;
+    }
+    if (event && startedTransitionVersion !== transitionVersion) {
+      return;
+    }
     if (!expand.value) {
       showContent.value = false;
     }
     contentEl.value.style.height = "";
   };
-  const handleTransitionStart = () => {
+  const handleTransitionStart = (event) => {
+    if (event && (event.target !== contentEl.value || event.propertyName !== "height")) {
+      return;
+    }
+    startedTransitionVersion = transitionVersion;
     isInitToTrigger = false;
   };
   return {