@varlet/ui 3.18.1 → 3.19.0

package/es/action-sheet/ActionItem.mjs

@@ -1,13 +1,15 @@
+import { callOrReturn, isString } from "@varlet/shared";
 import { defineComponent } from "vue";
 import Hover from "../hover/index.mjs";
 import VarHoverOverlay, { useHoverOverlay } from "../hover-overlay/index.mjs";
 import VarIcon from "../icon/index.mjs";
 import Ripple from "../ripple/index.mjs";
-import { createNamespace } from "../utils/components.mjs";
+import { createNamespace, MaybeVNode } from "../utils/components.mjs";
 const { name, n, classes } = createNamespace("action-sheet");
-import { resolveComponent as _resolveComponent, normalizeClass as _normalizeClass, openBlock as _openBlock, createBlock as _createBlock, createCommentVNode as _createCommentVNode, toDisplayString as _toDisplayString, createElementVNode as _createElementVNode, createVNode as _createVNode, normalizeStyle as _normalizeStyle, resolveDirective as _resolveDirective, createElementBlock as _createElementBlock, withDirectives as _withDirectives } from "vue";
+import { resolveComponent as _resolveComponent, normalizeClass as _normalizeClass, openBlock as _openBlock, createBlock as _createBlock, createCommentVNode as _createCommentVNode, createVNode as _createVNode, createElementBlock as _createElementBlock, toDisplayString as _toDisplayString, createElementVNode as _createElementVNode, normalizeStyle as _normalizeStyle, resolveDirective as _resolveDirective, withDirectives as _withDirectives } from "vue";
 function __render__(_ctx, _cache) {
   const _component_var_icon = _resolveComponent("var-icon");
+  const _component_maybe_v_node = _resolveComponent("maybe-v-node");
   const _component_var_hover_overlay = _resolveComponent("var-hover-overlay");
   const _directive_ripple = _resolveDirective("ripple");
   const _directive_hover = _resolveDirective("hover");
@@ -18,14 +20,26 @@ function __render__(_ctx, _cache) {
       style: _normalizeStyle({ color: _ctx.color })
     },
     [
-      _ctx.icon ? (_openBlock(), _createBlock(_component_var_icon, {
+      _ctx.isString(_ctx.icon) ? (_openBlock(), _createBlock(_component_var_icon, {
         key: 0,
-        "var-action-sheet-cover": "",
         class: _normalizeClass(_ctx.n("action-icon")),
         namespace: _ctx.namespace,
         name: _ctx.icon,
         size: _ctx.iconSize
-      }, null, 8, ["class", "namespace", "name", "size"])) : _createCommentVNode("v-if", true),
+      }, null, 8, ["class", "namespace", "name", "size"])) : _ctx.icon ? (_openBlock(), _createElementBlock(
+        "span",
+        {
+          key: 1,
+          class: _normalizeClass(_ctx.n("action-icon"))
+        },
+        [
+          _createVNode(_component_maybe_v_node, {
+            is: _ctx.renderIcon()
+          }, null, 8, ["is"])
+        ],
+        2
+        /* CLASS */
+      )) : _createCommentVNode("v-if", true),
       _createElementVNode(
         "div",
         {
@@ -49,6 +63,7 @@ function __render__(_ctx, _cache) {
 const __sfc__ = defineComponent({
   name,
   components: {
+    MaybeVNode,
     VarHoverOverlay,
     VarIcon
   },
@@ -60,15 +75,20 @@ const __sfc__ = defineComponent({
     color: String,
     namespace: String,
     iconSize: [String, Number],
-    icon: String
+    icon: [String, Object, Function]
   },
-  setup() {
+  setup(props) {
     const { hovering, handleHovering } = useHoverOverlay();
+    function renderIcon() {
+      return callOrReturn(props.icon);
+    }
     return {
       hovering,
+      isString,
       n,
       classes,
-      handleHovering
+      handleHovering,
+      renderIcon
     };
   }
 });

package/es/action-sheet/actionSheet.css

@@ -1 +1 @@
-:root { --action-sheet-border-radius: 2px; --action-sheet-border-top: none; --action-sheet-title-color: #888; --action-sheet-title-padding: 10px 16px; --action-sheet-title-font-size: 14px; --action-sheet-action-item-height: 48px; --action-sheet-action-item-padding: 0 18px; --action-sheet-action-item-color: #333; --action-sheet-action-item-disabled-color: var(--color-text-disabled); --action-sheet-icon-margin: 0 20px 0 0; --action-sheet-icon-size: 24px; --action-sheet-background: #fff;}.var-action-sheet { padding: 10px 0; background: var(--action-sheet-background); transition: background-color 0.25s;}.var-action-sheet__popup-radius { border-radius: var(--action-sheet-border-radius); border-top: var(--action-sheet-border-top);}.var-action-sheet__title { padding: var(--action-sheet-title-padding); color: var(--action-sheet-title-color); font-size: var(--action-sheet-title-font-size);}.var-action-sheet__action-item { display: flex; align-items: center; height: var(--action-sheet-action-item-height); padding: var(--action-sheet-action-item-padding); color: var(--action-sheet-action-item-color); cursor: pointer; position: relative;}.var-action-sheet__action-name { overflow: auto; max-height: var(--action-sheet-action-item-height);}.var-action-sheet__action-icon[var-action-sheet-cover] { margin: var(--action-sheet-icon-margin); width: var(--action-sheet-icon-size); height: var(--action-sheet-icon-size); font-size: var(--action-sheet-icon-size);}.var-action-sheet--disabled { color: var(--action-sheet-action-item-disabled-color) !important; cursor: not-allowed;}
+:root { --action-sheet-border-radius: 2px; --action-sheet-border-top: none; --action-sheet-title-color: #888; --action-sheet-title-padding: 10px 16px; --action-sheet-title-font-size: 14px; --action-sheet-action-item-height: 48px; --action-sheet-action-item-padding: 0 18px; --action-sheet-action-item-color: #333; --action-sheet-action-item-disabled-color: var(--color-text-disabled); --action-sheet-icon-margin: 0 20px 0 0; --action-sheet-icon-size: 24px; --action-sheet-background: #fff;}.var-action-sheet { padding: 10px 0; background: var(--action-sheet-background); transition: background-color 0.25s;}.var-action-sheet__popup-radius { border-radius: var(--action-sheet-border-radius); border-top: var(--action-sheet-border-top);}.var-action-sheet__title { padding: var(--action-sheet-title-padding); color: var(--action-sheet-title-color); font-size: var(--action-sheet-title-font-size);}.var-action-sheet__action-item { display: flex; align-items: center; height: var(--action-sheet-action-item-height); padding: var(--action-sheet-action-item-padding); color: var(--action-sheet-action-item-color); cursor: pointer; position: relative;}.var-action-sheet__action-name { overflow: auto; max-height: var(--action-sheet-action-item-height);}.var-action-sheet__action-icon { display: inline-flex; margin: var(--action-sheet-icon-margin); width: var(--action-sheet-icon-size); height: var(--action-sheet-icon-size); font-size: var(--action-sheet-icon-size);}.var-action-sheet__action-icon .var-icon { font-size: inherit;}.var-action-sheet--disabled { color: var(--action-sheet-action-item-disabled-color) !important; cursor: not-allowed;}

package/es/action-sheet/index.mjs

@@ -15,7 +15,7 @@ var __spreadValues = (a, b) => {
   return a;
 };
 import { call, inBrowser } from "@varlet/shared";
-import { nextTick, reactive } from "vue";
+import { nextTick, shallowReactive } from "vue";
 import { mountInstance, withInstall, withPropsDefaultsSetter } from "../utils/components.mjs";
 import VarActionSheet from "./ActionSheet.mjs";
 import { props as actionSheetProps } from "./props.mjs";
@@ -30,7 +30,9 @@ function ActionSheet(options) {
   }
   return new Promise((resolve) => {
     ActionSheet.close();
-    const reactiveActionSheetOptions = reactive(normalizeOptions(options));
+    const reactiveActionSheetOptions = shallowReactive(
+      normalizeOptions(options)
+    );
     reactiveActionSheetOptions.teleport = "body";
     singletonOptions = reactiveActionSheetOptions;
     const { unmountInstance } = mountInstance(VarActionSheet, reactiveActionSheetOptions, {

package/es/alert/alert.css

@@ -1 +1 @@
-:root { --alert-padding: 16px; --alert-border-radius: 4px; --alert-icon-size: 22px; --alert-icon-margin: 0 12px 0 0; --alert-close-icon-size: 22px; --alert-close-icon-margin: 2px 0 0 12px; --alert-standard-info-text-color: var(--color-on-info); --alert-standard-danger-text-color: var(--color-on-danger); --alert-standard-success-text-color: var(--color-on-success); --alert-standard-warning-text-color: var(--color-on-warning); --alert-danger-background: var(--color-danger); --alert-success-background: var(--color-success); --alert-warning-background: var(--color-warning); --alert-info-background: var(--color-info); --alert-tonal-danger-background: hsla(var(--hsl-danger), 0.12); --alert-tonal-success-background: hsla(var(--hsl-success), 0.12); --alert-tonal-warning-background: hsla(var(--hsl-warning), 0.12); --alert-tonal-info-background: hsla(var(--hsl-info), 0.12); --alert-tonal-danger-text-color: var(--color-danger); --alert-tonal-success-text-color: var(--color-success); --alert-tonal-warning-text-color: var(--color-warning); --alert-tonal-info-text-color: var(--color-info); --alert-message-font-size: 14px; --alert-title-font-size: 16px; --alert-title-font-weight: 500; --alert-message-margin-top: 4px; --alert-message-line-height: 1.5; --alert-title-line-height: 1.5;}.var-alert { display: flex; padding: var(--alert-padding); border-radius: var(--alert-border-radius);}.var-alert__icon { margin: var(--alert-icon-margin);}.var-alert__icon .var-icon { font-size: var(--alert-icon-size);}.var-alert__content { flex: 1;}.var-alert__title { font-size: var(--alert-title-font-size); font-weight: var(--alert-title-font-weight); line-height: var(--alert-title-line-height); word-break: normal; word-wrap: break-word;}.var-alert__title + .var-alert__message { margin-top: var(--alert-message-margin-top);}.var-alert__message { font-size: var(--alert-message-font-size); line-height: var(--alert-message-line-height);}.var-alert__close-icon { cursor: pointer; margin: var(--alert-close-icon-margin);}.var-alert__close-icon .var-icon[alert-cover] { font-size: var(--alert-close-icon-size);}.var-alert--outlined { border: thin solid currentColor; background-color: transparent;}.var-alert--outlined.var-alert--info { border-color: var(--alert-info-background); color: var(--alert-info-background);}.var-alert--outlined.var-alert--success { border-color: var(--alert-success-background); color: var(--alert-success-background);}.var-alert--outlined.var-alert--warning { border-color: var(--alert-warning-background); color: var(--alert-warning-background);}.var-alert--outlined.var-alert--danger { border-color: var(--alert-danger-background); color: var(--alert-danger-background);}.var-alert--tonal.var-alert--info { background-color: var(--alert-tonal-info-background); color: var(--alert-tonal-info-text-color);}.var-alert--tonal.var-alert--success { background-color: var(--alert-tonal-success-background); color: var(--alert-tonal-success-text-color);}.var-alert--tonal.var-alert--warning { background-color: var(--alert-tonal-warning-background); color: var(--alert-tonal-warning-text-color);}.var-alert--tonal.var-alert--danger { background-color: var(--alert-tonal-danger-background); color: var(--alert-tonal-danger-text-color);}.var-alert--standard.var-alert--info { background-color: var(--alert-info-background); color: var(--alert-standard-info-text-color);}.var-alert--standard.var-alert--success { background-color: var(--alert-success-background); color: var(--alert-standard-success-text-color);}.var-alert--standard.var-alert--warning { background-color: var(--alert-warning-background); color: var(--alert-standard-warning-text-color);}.var-alert--standard.var-alert--danger { background-color: var(--alert-danger-background); color: var(--alert-standard-danger-text-color);}
+:root { --alert-padding: 16px; --alert-border-radius: 4px; --alert-icon-size: 22px; --alert-icon-margin: 1px 12px 0 0; --alert-close-icon-size: 22px; --alert-close-icon-margin: 1px 0 0 12px; --alert-standard-info-text-color: var(--color-on-info); --alert-standard-danger-text-color: var(--color-on-danger); --alert-standard-success-text-color: var(--color-on-success); --alert-standard-warning-text-color: var(--color-on-warning); --alert-danger-background: var(--color-danger); --alert-success-background: var(--color-success); --alert-warning-background: var(--color-warning); --alert-info-background: var(--color-info); --alert-tonal-danger-background: hsla(var(--hsl-danger), 0.12); --alert-tonal-success-background: hsla(var(--hsl-success), 0.12); --alert-tonal-warning-background: hsla(var(--hsl-warning), 0.12); --alert-tonal-info-background: hsla(var(--hsl-info), 0.12); --alert-tonal-danger-text-color: var(--color-danger); --alert-tonal-success-text-color: var(--color-success); --alert-tonal-warning-text-color: var(--color-warning); --alert-tonal-info-text-color: var(--color-info); --alert-message-font-size: 14px; --alert-title-font-size: 16px; --alert-title-font-weight: 500; --alert-message-margin-top: 4px; --alert-message-line-height: 1.5; --alert-title-line-height: 1.5;}.var-alert { display: flex; padding: var(--alert-padding); border-radius: var(--alert-border-radius);}.var-alert__icon { display: inline-flex; align-items: start; margin: var(--alert-icon-margin); font-size: var(--alert-icon-size);}.var-alert__icon .var-icon { font-size: inherit;}.var-alert__content { flex: 1;}.var-alert__title { font-size: var(--alert-title-font-size); font-weight: var(--alert-title-font-weight); line-height: var(--alert-title-line-height); word-break: normal; word-wrap: break-word;}.var-alert__title + .var-alert__message { margin-top: var(--alert-message-margin-top);}.var-alert__message { font-size: var(--alert-message-font-size); line-height: var(--alert-message-line-height); margin-top: 2px;}.var-alert__close-icon { display: inline-flex; align-items: start; cursor: pointer; margin: var(--alert-close-icon-margin); font-size: var(--alert-close-icon-size);}.var-alert__close-icon .var-icon { font-size: inherit;}.var-alert--outlined { border: thin solid currentColor; background-color: transparent;}.var-alert--outlined.var-alert--info { border-color: var(--alert-info-background); color: var(--alert-info-background);}.var-alert--outlined.var-alert--success { border-color: var(--alert-success-background); color: var(--alert-success-background);}.var-alert--outlined.var-alert--warning { border-color: var(--alert-warning-background); color: var(--alert-warning-background);}.var-alert--outlined.var-alert--danger { border-color: var(--alert-danger-background); color: var(--alert-danger-background);}.var-alert--tonal.var-alert--info { background-color: var(--alert-tonal-info-background); color: var(--alert-tonal-info-text-color);}.var-alert--tonal.var-alert--success { background-color: var(--alert-tonal-success-background); color: var(--alert-tonal-success-text-color);}.var-alert--tonal.var-alert--warning { background-color: var(--alert-tonal-warning-background); color: var(--alert-tonal-warning-text-color);}.var-alert--tonal.var-alert--danger { background-color: var(--alert-tonal-danger-background); color: var(--alert-tonal-danger-text-color);}.var-alert--standard.var-alert--info { background-color: var(--alert-info-background); color: var(--alert-standard-info-text-color);}.var-alert--standard.var-alert--success { background-color: var(--alert-success-background); color: var(--alert-standard-success-text-color);}.var-alert--standard.var-alert--warning { background-color: var(--alert-warning-background); color: var(--alert-standard-warning-text-color);}.var-alert--standard.var-alert--danger { background-color: var(--alert-danger-background); color: var(--alert-standard-danger-text-color);}

package/es/badge/Badge.mjs

@@ -21,7 +21,7 @@ import { createNamespace } from "../utils/components.mjs";
 import { toSizeUnit } from "../utils/elements.mjs";
 import { props } from "./props.mjs";
 const { name, n, classes } = createNamespace("badge");
-import { renderSlot as _renderSlot, resolveComponent as _resolveComponent, normalizeClass as _normalizeClass, openBlock as _openBlock, createBlock as _createBlock, createCommentVNode as _createCommentVNode, toDisplayString as _toDisplayString, createElementBlock as _createElementBlock, vShow as _vShow, mergeProps as _mergeProps, createElementVNode as _createElementVNode, withDirectives as _withDirectives, Transition as _Transition, withCtx as _withCtx, createVNode as _createVNode } from "vue";
+import { renderSlot as _renderSlot, resolveComponent as _resolveComponent, createVNode as _createVNode, normalizeClass as _normalizeClass, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, toDisplayString as _toDisplayString, vShow as _vShow, mergeProps as _mergeProps, createElementVNode as _createElementVNode, withDirectives as _withDirectives, Transition as _Transition, withCtx as _withCtx } from "vue";
 const _hoisted_1 = { key: 0 };
 function __render__(_ctx, _cache) {
   const _component_var_icon = _resolveComponent("var-icon");
@@ -45,20 +45,30 @@ function __render__(_ctx, _cache) {
                 _ctx.n(`--${_ctx.type}`),
                 [_ctx.$slots.default, _ctx.n(`--${_ctx.position}`), _ctx.n("--offset")],
                 [_ctx.dot, _ctx.n("--dot")],
-                [_ctx.icon, _ctx.n("--icon")]
+                [_ctx.icon || _ctx.$slots.icon, _ctx.n("--icon")]
               ),
               style: __spreadValues({ background: _ctx.color }, _ctx.offsetStyle)
             }, _ctx.$attrs),
             [
-              _ctx.icon ? (_openBlock(), _createBlock(_component_var_icon, {
-                key: 0,
-                class: _normalizeClass(_ctx.n("icon")),
-                "var-badge-cover": "",
-                name: _ctx.icon,
-                namespace: _ctx.namespace
-              }, null, 8, ["class", "name", "namespace"])) : _createCommentVNode("v-if", true),
+              _ctx.$slots.icon || _ctx.icon ? (_openBlock(), _createElementBlock(
+                "span",
+                {
+                  key: 0,
+                  class: _normalizeClass(_ctx.n("icon"))
+                },
+                [
+                  _renderSlot(_ctx.$slots, "icon", {}, () => [
+                    _createVNode(_component_var_icon, {
+                      name: _ctx.icon,
+                      namespace: _ctx.namespace
+                    }, null, 8, ["name", "namespace"])
+                  ])
+                ],
+                2
+                /* CLASS */
+              )) : _createCommentVNode("v-if", true),
               _renderSlot(_ctx.$slots, "value", {}, () => [
-                !_ctx.icon && !_ctx.dot ? (_openBlock(), _createElementBlock(
+                !_ctx.$slots.icon && !_ctx.icon && !_ctx.dot ? (_openBlock(), _createElementBlock(
                   "span",
                   _hoisted_1,
                   _toDisplayString(_ctx.value),

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-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;}
+: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 { display: inline-flex; align-items: center; justify-content: center; width: 1em; height: 1em; font-size: var(--badge-icon-size); line-height: 1;}.var-badge__icon .var-icon { font-size: inherit;}.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

@@ -11,7 +11,7 @@ const defaultBadgeProps = {
   type: "danger",
   dot: true
 };
-import { renderSlot as _renderSlot, resolveComponent as _resolveComponent, normalizeClass as _normalizeClass, openBlock as _openBlock, createBlock as _createBlock, createCommentVNode as _createCommentVNode, mergeProps as _mergeProps, withCtx as _withCtx, createElementVNode as _createElementVNode, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, normalizeStyle as _normalizeStyle, resolveDirective as _resolveDirective, createElementBlock as _createElementBlock, withDirectives as _withDirectives } from "vue";
+import { renderSlot as _renderSlot, resolveComponent as _resolveComponent, openBlock as _openBlock, createBlock as _createBlock, createCommentVNode as _createCommentVNode, normalizeClass as _normalizeClass, createElementVNode as _createElementVNode, mergeProps as _mergeProps, withCtx as _withCtx, createElementBlock as _createElementBlock, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, normalizeStyle as _normalizeStyle, resolveDirective as _resolveDirective, withDirectives as _withDirectives } from "vue";
 function __render__(_ctx, _cache) {
   const _component_var_icon = _resolveComponent("var-icon");
   const _component_var_badge = _resolveComponent("var-badge");
@@ -51,30 +51,44 @@ function __render__(_ctx, _cache) {
             "var-bottom-navigation-item-cover": ""
           }), {
             default: _withCtx(() => [
+              _createElementVNode(
+                "span",
+                {
+                  class: _normalizeClass(_ctx.n("icon"))
+                },
+                [
+                  _renderSlot(_ctx.$slots, "icon", { active: _ctx.isActive }, () => [
+                    _ctx.icon ? (_openBlock(), _createBlock(_component_var_icon, {
+                      key: 0,
+                      name: _ctx.icon,
+                      namespace: _ctx.namespace
+                    }, null, 8, ["name", "namespace"])) : _createCommentVNode("v-if", true)
+                  ])
+                ],
+                2
+                /* CLASS */
+              )
+            ]),
+            _: 3
+            /* FORWARDED */
+          }, 16, ["class"])) : _ctx.$slots.icon || _ctx.icon ? (_openBlock(), _createElementBlock(
+            "span",
+            {
+              key: 1,
+              class: _normalizeClass(_ctx.n("icon"))
+            },
+            [
               _renderSlot(_ctx.$slots, "icon", { active: _ctx.isActive }, () => [
                 _ctx.icon ? (_openBlock(), _createBlock(_component_var_icon, {
                   key: 0,
                   name: _ctx.icon,
-                  namespace: _ctx.namespace,
-                  class: _normalizeClass(_ctx.n("icon")),
-                  "var-bottom-navigation-item-cover": ""
-                }, null, 8, ["name", "namespace", "class"])) : _createCommentVNode("v-if", true)
+                  namespace: _ctx.namespace
+                }, null, 8, ["name", "namespace"])) : _createCommentVNode("v-if", true)
               ])
-            ]),
-            _: 3
-            /* FORWARDED */
-          }, 16, ["class"])) : _renderSlot(_ctx.$slots, "icon", {
-            key: 1,
-            active: _ctx.isActive
-          }, () => [
-            _ctx.icon ? (_openBlock(), _createBlock(_component_var_icon, {
-              key: 0,
-              name: _ctx.icon,
-              namespace: _ctx.namespace,
-              class: _normalizeClass(_ctx.n("icon")),
-              "var-bottom-navigation-item-cover": ""
-            }, null, 8, ["name", "namespace", "class"])) : _createCommentVNode("v-if", true)
-          ])
+            ],
+            2
+            /* CLASS */
+          )) : _createCommentVNode("v-if", true)
         ],
         2
         /* CLASS */

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-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);}
+: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 { display: inline-flex; align-items: center; justify-content: center; width: 1em; height: 1em; font-size: var(--bottom-navigation-item-icon-size); line-height: 1;}.var-bottom-navigation-item__icon .var-icon { font-size: inherit;}.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/checkbox/Checkbox.mjs

@@ -1,3 +1,23 @@
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
 import { call, preventDefault } from "@varlet/shared";
 import { useEventListener, useVModel } from "@varlet/use";
 import { computed, defineComponent, nextTick, ref } from "vue";
@@ -8,10 +28,11 @@ import VarHoverOverlay, { useHoverOverlay } from "../hover-overlay/index.mjs";
 import VarIcon from "../icon/index.mjs";
 import Ripple from "../ripple/index.mjs";
 import { createNamespace, useValidation } from "../utils/components.mjs";
+import { toSizeUnit } from "../utils/elements.mjs";
 import { props } from "./props.mjs";
 import { useCheckboxGroup } from "./provide.mjs";
 const { name, n, classes } = createNamespace("checkbox");
-import { renderSlot as _renderSlot, resolveComponent as _resolveComponent, normalizeClass as _normalizeClass, createVNode as _createVNode, createCommentVNode as _createCommentVNode, normalizeStyle as _normalizeStyle, resolveDirective as _resolveDirective, openBlock as _openBlock, createElementBlock as _createElementBlock, withDirectives as _withDirectives, createElementVNode as _createElementVNode } from "vue";
+import { renderSlot as _renderSlot, resolveComponent as _resolveComponent, createVNode as _createVNode, normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, resolveDirective as _resolveDirective, withDirectives as _withDirectives, createElementVNode as _createElementVNode } from "vue";
 const _hoisted_1 = ["aria-checked", "aria-disabled", "tabindex"];
 function __render__(_ctx, _cache) {
   const _component_var_icon = _resolveComponent("var-icon");
@@ -50,30 +71,51 @@ function __render__(_ctx, _cache) {
             style: _normalizeStyle({ color: _ctx.checked || _ctx.isIndeterminate ? _ctx.checkedColor : _ctx.uncheckedColor })
           },
           [
-            _ctx.isIndeterminate ? _renderSlot(_ctx.$slots, "indeterminate-icon", { key: 0 }, () => [
-              _createVNode(_component_var_icon, {
+            _ctx.isIndeterminate ? (_openBlock(), _createElementBlock(
+              "span",
+              {
+                key: 0,
                 class: _normalizeClass(_ctx.n("icon")),
-                name: "minus-box",
-                size: _ctx.iconSize,
-                "var-checkbox-cover": ""
-              }, null, 8, ["class", "size"])
-            ]) : _createCommentVNode("v-if", true),
-            _ctx.checked && !_ctx.isIndeterminate ? _renderSlot(_ctx.$slots, "checked-icon", { key: 1 }, () => [
-              _createVNode(_component_var_icon, {
+                style: _normalizeStyle({ fontSize: _ctx.toSizeUnit(_ctx.iconSize) })
+              },
+              [
+                _renderSlot(_ctx.$slots, "indeterminate-icon", {}, () => [
+                  _createVNode(_component_var_icon, { name: "minus-box" })
+                ])
+              ],
+              6
+              /* CLASS, STYLE */
+            )) : _createCommentVNode("v-if", true),
+            _ctx.checked && !_ctx.isIndeterminate ? (_openBlock(), _createElementBlock(
+              "span",
+              {
+                key: 1,
                 class: _normalizeClass(_ctx.n("icon")),
-                name: "checkbox-marked",
-                size: _ctx.iconSize,
-                "var-checkbox-cover": ""
-              }, null, 8, ["class", "size"])
-            ]) : _createCommentVNode("v-if", true),
-            !_ctx.checked && !_ctx.isIndeterminate ? _renderSlot(_ctx.$slots, "unchecked-icon", { key: 2 }, () => [
-              _createVNode(_component_var_icon, {
+                style: _normalizeStyle({ fontSize: _ctx.toSizeUnit(_ctx.iconSize) })
+              },
+              [
+                _renderSlot(_ctx.$slots, "checked-icon", {}, () => [
+                  _createVNode(_component_var_icon, { name: "checkbox-marked" })
+                ])
+              ],
+              6
+              /* CLASS, STYLE */
+            )) : _createCommentVNode("v-if", true),
+            !_ctx.checked && !_ctx.isIndeterminate ? (_openBlock(), _createElementBlock(
+              "span",
+              {
+                key: 2,
                 class: _normalizeClass(_ctx.n("icon")),
-                name: "checkbox-blank-outline",
-                size: _ctx.iconSize,
-                "var-checkbox-cover": ""
-              }, null, 8, ["class", "size"])
-            ]) : _createCommentVNode("v-if", true),
+                style: _normalizeStyle({ fontSize: _ctx.toSizeUnit(_ctx.iconSize) })
+              },
+              [
+                _renderSlot(_ctx.$slots, "unchecked-icon", {}, () => [
+                  _createVNode(_component_var_icon, { name: "checkbox-blank-outline" })
+                ])
+              ],
+              6
+              /* CLASS, STYLE */
+            )) : _createCommentVNode("v-if", true),
             _createVNode(_component_var_hover_overlay, {
               hovering: !_ctx.disabled && !_ctx.formDisabled && _ctx.hovering,
               focusing: !_ctx.disabled && !_ctx.formDisabled && _ctx.isFocusing
@@ -156,32 +198,38 @@ const __sfc__ = defineComponent({
       });
     }
     function change(changedValue) {
-      const { checkedValue: checkedValue2, onChange } = props2;
-      value.value = changedValue;
-      call(onChange, value.value, isIndeterminate.value);
-      validateWithTrigger("onChange");
-      changedValue === checkedValue2 ? checkboxGroup == null ? void 0 : checkboxGroup.onChecked(checkedValue2) : checkboxGroup == null ? void 0 : checkboxGroup.onUnchecked(checkedValue2);
+      return __async(this, null, function* () {
+        const { checkedValue: checkedValue2, onChange } = props2;
+        value.value = changedValue;
+        changedValue === checkedValue2 ? checkboxGroup == null ? void 0 : checkboxGroup.onChecked(checkedValue2) : checkboxGroup == null ? void 0 : checkboxGroup.onUnchecked(checkedValue2);
+        yield nextTick();
+        call(onChange, changedValue, isIndeterminate.value);
+        validateWithTrigger("onChange");
+      });
     }
     function handleClick(e) {
-      const { disabled, readonly, checkedValue: checkedValue2, uncheckedValue, onClick } = props2;
-      if ((form == null ? void 0 : form.disabled.value) || disabled) {
-        return;
-      }
-      call(onClick, e);
-      if ((form == null ? void 0 : form.readonly.value) || readonly) {
-        return;
-      }
-      if (isIndeterminate.value === true) {
-        isIndeterminate.value = false;
-        call(props2.onChange, value.value, isIndeterminate.value);
-        validateWithTrigger("onChange");
-        return;
-      }
-      const maximum = checkboxGroup ? checkboxGroup.checkedCount.value >= Number(checkboxGroup.max.value) : false;
-      if (!checked.value && maximum) {
-        return;
-      }
-      change(checked.value ? uncheckedValue : checkedValue2);
+      return __async(this, null, function* () {
+        const { disabled, readonly, checkedValue: checkedValue2, uncheckedValue, onClick } = props2;
+        if ((form == null ? void 0 : form.disabled.value) || disabled) {
+          return;
+        }
+        call(onClick, e);
+        if ((form == null ? void 0 : form.readonly.value) || readonly) {
+          return;
+        }
+        if (isIndeterminate.value === true) {
+          isIndeterminate.value = false;
+          yield nextTick();
+          call(props2.onChange, value.value, isIndeterminate.value);
+          validateWithTrigger("onChange");
+          return;
+        }
+        const maximum = checkboxGroup ? checkboxGroup.checkedCount.value >= Number(checkboxGroup.max.value) : false;
+        if (!checked.value && maximum) {
+          return;
+        }
+        change(checked.value ? uncheckedValue : checkedValue2);
+      });
     }
     function handleTextClick() {
       checkbox.value.focus();
@@ -241,6 +289,7 @@ const __sfc__ = defineComponent({
       handleHovering,
       handleClick,
       handleTextClick,
+      toSizeUnit,
       toggle,
       reset,
       validate,

package/es/checkbox/checkbox.css

@@ -1 +1 @@
-:root { --checkbox-checked-color: var(--color-primary); --checkbox-unchecked-color: #555; --checkbox-disabled-color: var(--color-text-disabled); --checkbox-error-color: var(--color-danger); --checkbox-action-padding: 6px; --checkbox-text-color: #555; --checkbox-icon-size: 24px;}.var-checkbox { display: flex; align-items: center; outline: none; transform: translateX(calc(-1 * var(--checkbox-action-padding))); cursor: pointer; -webkit-tap-highlight-color: transparent;}.var-checkbox__wrap { display: inline-flex; flex-direction: column;}.var-checkbox__action { position: relative; display: flex; justify-content: center; align-items: center; flex-shrink: 0; padding: var(--checkbox-action-padding); border-radius: 50%; transition: background-color 0.25s, color 0.25s;}.var-checkbox__icon[var-checkbox-cover] { display: block; font-size: var(--checkbox-icon-size);}.var-checkbox__text { color: var(--checkbox-text-color);}.var-checkbox--checked { color: var(--checkbox-checked-color);}.var-checkbox--unchecked { color: var(--checkbox-unchecked-color);}.var-checkbox--disabled { color: var(--checkbox-disabled-color); cursor: not-allowed;}.var-checkbox--error { color: var(--checkbox-error-color);}
+:root { --checkbox-checked-color: var(--color-primary); --checkbox-unchecked-color: #555; --checkbox-disabled-color: var(--color-text-disabled); --checkbox-error-color: var(--color-danger); --checkbox-action-padding: 6px; --checkbox-text-color: #555; --checkbox-icon-size: 24px;}.var-checkbox { display: flex; align-items: center; outline: none; transform: translateX(calc(-1 * var(--checkbox-action-padding))); cursor: pointer; -webkit-tap-highlight-color: transparent;}.var-checkbox__wrap { display: inline-flex; flex-direction: column;}.var-checkbox__action { position: relative; display: flex; justify-content: center; align-items: center; flex-shrink: 0; padding: var(--checkbox-action-padding); border-radius: 50%; transition: background-color 0.25s, color 0.25s;}.var-checkbox__icon { display: inline-flex; align-items: center; justify-content: center; width: 1em; height: 1em; font-size: var(--checkbox-icon-size); line-height: 1;}.var-checkbox__icon .var-icon { font-size: inherit;}.var-checkbox__text { color: var(--checkbox-text-color);}.var-checkbox--checked { color: var(--checkbox-checked-color);}.var-checkbox--unchecked { color: var(--checkbox-unchecked-color);}.var-checkbox--disabled { color: var(--checkbox-disabled-color); cursor: not-allowed;}.var-checkbox--error { color: var(--checkbox-error-color);}

package/es/chip/Chip.mjs

@@ -39,10 +39,12 @@ function __render__(_ctx, _cache) {
               onClick: _cache[0] || (_cache[0] = (...args) => _ctx.handleClose && _ctx.handleClose(...args))
             },
             [
-              _createVNode(_component_var_icon, {
-                name: `${_ctx.iconName ? _ctx.iconName : "close-circle"}`,
-                namespace: _ctx.namespace
-              }, null, 8, ["name", "namespace"])
+              _renderSlot(_ctx.$slots, "icon", {}, () => [
+                _createVNode(_component_var_icon, {
+                  name: _ctx.closeIconName,
+                  namespace: _ctx.namespace
+                }, null, 8, ["name", "namespace"])
+              ])
             ],
             2
             /* CLASS */
@@ -84,12 +86,17 @@ const __sfc__ = defineComponent({
       const roundClass = round ? n("--round") : null;
       return [n(`--${size}`), blockClass, plainTypeClass, roundClass];
     });
+    const closeIconName = computed(() => {
+      var _a, _b;
+      return (_b = (_a = props2.icon) != null ? _a : props2.iconName) != null ? _b : "close-circle";
+    });
     function handleClose(e) {
       call(props2.onClose, e);
     }
     return {
       chipStyle,
       contentClass,
+      closeIconName,
       n,
       classes,
       formatElevation,

package/es/chip/chip.css

@@ -1 +1 @@
-: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: transparent;}.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 { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: inherit; line-height: 1; cursor: pointer; -webkit-tap-highlight-color: transparent;}.var-chip--close .var-icon { font-size: inherit;}.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

@@ -11,6 +11,10 @@ const props = {
   },
   color: String,
   textColor: String,
+  icon: pickProps(iconProps, "name"),
+  /**
+   * @deprecated use icon instead
+   */
   iconName: pickProps(iconProps, "name"),
   namespace: pickProps(iconProps, "namespace"),
   plain: Boolean,